:root {
  --ui-gap: 12px;
  --ui-font: 14px;
  --card-width: 230px;
  --chart-height: 45%;
}
body {
  font-size: var(--ui-font);
}
.app-header {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px;
  min-height: 64px;
  max-height: none !important;
  gap: 8px;
}
.app-header h1 {
  flex: none;
}
.hue-control {
  flex: 1 0 90px !important;
  order: 0 !important;
  margin: 0 !important;
  min-width: 90px;
}
.header-actions {
  flex: none;
  margin-left: auto;
}
.header-actions details {
  flex: none;
  border-radius: 10px;
}
.header-actions details[open] {
  display: flex;
  align-items: center;
  background: var(--chart-background);
  border: 1px solid #ffffff30;
}
.header-actions details[open] summary {
  float: left;
}
.header-popover {
  position: static !important;
  display: inline-flex;
  align-items: center;
  width: auto;
  max-height: none !important;
  padding: 2px 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  animation: none !important;
}
.header-popover select {
  width: auto;
  max-width: 230px;
}
#custom-date-range:not(.hidden) {
  display: inline-flex;
  flex-direction: row;
  margin: 0 0 0 8px;
}
.header-popover input {
  width: 145px;
}
.header-actions summary,
.header-actions > button {
  width: 44px;
  height: 44px;
  min-height: 44px;
}
#dashboard-content {
  padding: 0 var(--ui-gap);
}
#page-home.active {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(150px, 1fr) minmax(170px, auto);
  gap: var(--ui-gap);
}
#page-home .metrics-grid {
  gap: 8px;
}
#page-home .metric-card {
  padding: 10px;
}
#page-home #direct-timeline-panel {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
#timeline-full {
  flex: 1;
  min-height: 100px;
  display: flex;
  align-items: stretch;
}
#timeline-full svg {
  height: 100%;
  min-height: 130px;
  object-fit: fill;
}
#page-home .lead-panel {
  padding: var(--ui-gap);
  min-height: 0;
  overflow: hidden;
}
#leads-list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  max-height: none;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  padding: 5px 2px 10px;
}
.lead-card {
  flex: 0 0 var(--card-width);
  scroll-snap-align: start;
  border: 1px solid #ffffff30;
  border-radius: 12px;
  padding: 12px;
  background: var(--chart-background);
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow-wrap: anywhere;
}
.lead-card time {
  font-size: 0.8em;
  opacity: 0.8;
}
.lead-card strong {
  font-size: 1em;
}
.lead-card .lead-phone {
  font-size: 1.1em;
}
.lead-more {
  flex: 0 0 100px;
  border: 1px solid #ffffff30;
  border-radius: 12px;
  padding: 12px;
}
.lead-card.new-card {
  animation: lead-enter 0.4s ease-out;
}
@keyframes lead-enter {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.settings-grid {
  margin-top: 20px;
}
.settings-grid fieldset {
  min-width: 0;
  padding: 16px;
  border: 1px solid #ffffff25;
  border-radius: 12px;
}
.settings-grid legend {
  padding: 0 6px;
  font-weight: 600;
}
.setting {
  margin-bottom: 14px;
}
.setting input[type="checkbox"] {
  width: 22px;
  height: 22px;
}
.settings-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}
.settings-footer button {
  padding: 10px 16px;
  border: 1px solid #ffffff40;
  border-radius: 10px;
}
.glass-panel {
  padding: var(--ui-gap);
}
#page-direct.active {
  height: 100%;
  min-height: 0;
}
#direct-analytics {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border-radius: 6px;
  padding: 8px;
}
#direct-analytics table {
  border-collapse: collapse;
  font-size: var(--ui-font);
}
#direct-analytics td,
#direct-analytics th {
  padding: 6px 8px;
  border: 1px solid #ffffff20;
}
#direct-analytics thead {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--ambient-base);
}
#direct-analytics .overflow-x-auto {
  max-height: 65dvh;
  overflow: auto;
}
#direct-analytics > div {
  margin-bottom: 8px;
}
#direct-analytics h3 {
  font-size: 16px;
}
#direct-analytics button,
#direct-analytics select,
#direct-analytics input {
  min-height: 34px;
  border-radius: 4px;
}
#timeline-full svg,
#timeline-week-chart svg {
  background: var(--chart-background) !important;
}
#timeline-full:fullscreen {
  background: var(--chart-background);
}
.adaptive-text body {
  color: var(--text-page);
}
.adaptive-text .glass-panel,
.adaptive-text .glass-panel [class*="text-"] {
  color: var(--text-panel) !important;
}
.adaptive-text .app-header,
.adaptive-text .app-header select,
.adaptive-text .app-header input {
  color: var(--text-page) !important;
}
.adaptive-text #timeline-full svg text,
.adaptive-text #timeline-week-chart svg text {
  fill: var(--text-chart) !important;
}
@media (min-width: 900px) {
  #page-home.active {
    grid-template-rows: auto minmax(170px, var(--chart-height)) minmax(
        165px,
        1fr
      );
  }
  #page-home .metrics-grid .text-3xl {
    font-size: clamp(20px, 2.2vh, 30px);
  }
}
@media (max-width: 639px) {
  .app-header h1 {
    font-size: 17px;
  }
  #page-home.active {
    height: auto;
    min-height: 100%;
    grid-template-rows: auto minmax(220px, 35dvh) auto;
  }
  #bottom-nav {
    justify-content: flex-start;
    margin-bottom: env(safe-area-inset-bottom);
    padding: 8px;
  }
  .metrics-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .metrics-grid > * {
    padding: 8px !important;
    overflow-wrap: anywhere;
  }
  .metrics-grid .text-3xl {
    font-size: 20px;
  }
  #dashboard-content {
    padding: 0 8px;
  }
  .header-popover select {
    max-width: 190px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .new-card {
    animation: none !important;
  }
}
html {
  font-size: var(--ui-font);
}
.glass-panel {
  background: rgba(var(--glass-rgb, 13, 10, 20), var(--glass-opacity, 0.45));
}
/* Contrast mode uses known solid surfaces so moving dots cannot reduce readability. */
.contrast-text .glass-panel {
  background: var(--surface-panel);
}
.contrast-text .app-header {
  background: var(--ambient-base);
}
.contrast-text .glass-panel input,
.contrast-text .glass-panel select,
.contrast-text .glass-panel button {
  background: var(--surface-panel);
  color: var(--text-panel) !important;
}
.contrast-text #timeline-full svg,
.contrast-text #timeline-week-chart svg,
.contrast-text .lead-card {
  background: var(--surface-chart) !important;
}
.adaptive-text .lead-card {
  color: var(--text-chart) !important;
}
.contrast-text #direct-analytics td,
.contrast-text #direct-analytics th {
  background: var(--surface-panel);
}
.contrast-text .input-dark {
  background: var(--ambient-base);
}
#direct-timeline-panel > h3 {
  padding-right: 44px;
  font-size: 1.1rem;
}
#direct-timeline-panel > button {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 40px;
  display: grid;
  place-items: center;
}
#direct-timeline-panel > .flex {
  gap: 5px 12px;
  margin-top: 8px;
}
#direct-timeline-panel label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  cursor: pointer;
}
#direct-timeline-panel input.timeline-metric {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
#direct-timeline-panel > h4 {
  margin-top: 4px;
  margin-bottom: 4px;
  font-size: 0.85rem;
}
#timeline-full {
  min-height: 150px;
}
#page-home .lead-panel {
  align-self: start;
}
@media (max-width: 639px) {
  #page-home.active {
    grid-template-rows: auto minmax(340px, 42dvh) auto;
  }
}
.header-actions > button.hidden {
  display: none;
}
.adaptive-text .app-header [class*="text-"],
.adaptive-text #bottom-nav button {
  color: var(--text-page) !important;
}
.contrast-text #bottom-nav button {
  background: var(--ambient-base);
}

/* Glyph-only difference compositing also applies to the white glow. */
.pixel-invert .inverse-ink { color: white !important; mix-blend-mode: difference; }
.inverse-glow .inverse-ink { text-shadow: 0 0 var(--ink-glow) white, 0 0 var(--ink-glow) white; }
.pixel-invert svg text { fill: white !important; mix-blend-mode: difference; }
.inverse-glow svg text { filter: drop-shadow(0 0 3px white); }
#timeline-detail { position: fixed; inset: auto 16px 82px auto; margin: 0; z-index: 2000; max-height: 45dvh; overflow: auto; }
.preset-panel { margin-top: 20px; padding: 16px; border: 1px solid #ffffff30; border-radius: 12px; display: flex; gap: 12px; flex-wrap: wrap; }
.preset-panel button { padding: 8px; border: 1px solid #ffffff40; border-radius: 8px; }
.preset-panel input,.preset-panel select { max-width: 100%; min-width: 140px; }
#preset-status { flex-basis: 100%; }
.lead-card, #page-journal .glass-panel, #page-journal section { background: var(--journal-background); }
#page-traffic .glass-panel, #page-traffic [class*="bg-[#"] { background: var(--traffic-background); }
#page-direct .glass-panel, #page-direct [class*="bg-[#"] { background: var(--direct-background); }
#page-traffic.active, #page-direct.active { display: block; overflow: auto; }
#page-traffic > *, #page-direct > * { width: 100%; min-width: 0; }
#page-traffic .grid > *, #page-direct .grid > * { min-width: 0; overflow-wrap: anywhere; }
#page-traffic .glass-panel { margin-bottom: var(--ui-gap); }
#page-direct #direct-analytics { height: auto; overflow: visible; }
#page-direct thead { background: var(--direct-background); }
#direct-timeline-panel:fullscreen { background: var(--ambient-base); padding: 16px; height: 100dvh; display: flex; flex-direction: column; overflow: auto; }
#direct-timeline-panel:fullscreen #timeline-full { flex: 1; min-height: 150px; }