/* ==========================================================================
   Henshin AI — Primary Dashboard Mockup (V2)
   Blue palette + tasteful gradients + hourly-cadence framing
   ========================================================================== */

:root {
  /* ------- Surfaces ------------------------------------------------- */
  /* Light palette is the true inverse of the night palette: near-white
     surfaces, teal-cast borders and ink, same aqua accent family. */
  --bg-page:          #FAFCFD;          /* very near-white page canvas */
  --bg-card:          #FFFFFF;
  --bg-card-subtle:   #F1F6F8;          /* pale aqua-tinted subtle surface */
  --bg-hero:          #0F1630;          /* deep navy hero (gradient applied in component) */

  /* Page background — mirror of the night page gradient. Pure white at
     the top fading to a pale aqua wash at the bottom. Reads as the
     daylight counterpart of the deep-teal night canvas. */
  --page-gradient:
    linear-gradient(180deg, #FFFFFF 0%, #F3F8F9 40%, #EAF2F3 100%);

  /* Warm sand tone used on things like the funnel track (complementary
     to the aqua accent — warm/cool contrast reads nicely). */
  --sand-soft:  #F2E7CD;
  --sand-mid:   #E8D9B6;

  /* ------- Borders -------------------------------------------------- */
  /* Teal-cast borders — belong to the brand instead of generic grey. */
  --border-soft:      rgba(31, 94, 110, 0.10);
  --border-strong:    rgba(31, 94, 110, 0.22);

  /* ------- Ink ------------------------------------------------------ */
  /* Deep teal-navy ink — a true inverse of night's #E8F0F2. */
  --ink-primary:      #0A1F27;
  --ink-secondary:    #42606B;
  --ink-tertiary:     #8295A0;
  --ink-on-hero:      #F2F5FB;

  /* ------- Aquamarine (hero accent) -------------------------------- */
  --blue-primary:     #3D8FA0;
  --blue-deep:        #1F5E6E;
  --blue-light:       #7FC4CF;
  --blue-soft:        #DCEEEE;
  --blue-tint:        #EEF7F6;
  --blue-glow:        rgba(61, 143, 160, 0.28);   /* deep-teal glow (inverse of night's pale-aqua glow) */

  /* Gradients */
  --grad-blue:        linear-gradient(135deg, #3D8FA0 0%, #1F5E6E 100%);
  --grad-blue-soft:   linear-gradient(135deg, #7FC4CF 0%, #3D8FA0 100%);
  --grad-hero:
    radial-gradient(600px 400px at 80% 10%, rgba(127, 196, 207, 0.35), transparent 60%),
    radial-gradient(500px 500px at 10% 110%, rgba(61, 143, 160, 0.45), transparent 55%),
    linear-gradient(135deg, #081F28 0%, #12404C 40%, #1F5E6E 100%);
  /* Light monochrome gradient — lifted ~75% from the original dark version
     so the scorecards read pale-steel → near-white with dark text on top.
     Kept cool-neutral (no purple cast). */
  --grad-gray-hero:
    radial-gradient(520px 400px at 85% 5%, rgba(255, 255, 255, 0.9), transparent 60%),
    radial-gradient(420px 420px at 8% 110%, rgba(222, 228, 240, 0.55), transparent 55%),
    linear-gradient(135deg, #C7CCD6 0%, #D4D9E2 35%, #E4E7EE 70%, #F2F4F8 100%);

  /* Dashed cross-hatch grid — a faint square pattern behind the gradient.
     Lines are a muted aqua-teal so they read as texture, not decoration. */
  --pattern-grid-dashed:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M0 0 L44 0 M0 0 L0 44' stroke='%231F5E6E' stroke-width='1' stroke-dasharray='2,5' stroke-opacity='0.14'/%3E%3C/svg%3E");

  /* Same pattern but tuned for dark cards (hero) — pale-aqua lines */
  --pattern-grid-dashed-dark:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M0 0 L44 0 M0 0 L0 44' stroke='%23B5DDE1' stroke-width='1' stroke-dasharray='2,5' stroke-opacity='0.12'/%3E%3C/svg%3E");
  --grad-card-top:
    linear-gradient(180deg, rgba(127, 196, 207, 0.10) 0%, rgba(127, 196, 207, 0) 40%);

  /* --grad-primary — light-mode signature card surface. Mirror of the
     night --grad-primary: two radial highlights (white + pale aqua)
     over a cool-white base. One gradient, one vibe, across every card. */
  --grad-primary:
    radial-gradient(520px 400px at 85% 5%, rgba(255, 255, 255, 0.85), transparent 60%),
    radial-gradient(420px 420px at 5% 105%, rgba(127, 196, 207, 0.12), transparent 60%),
    linear-gradient(135deg, #FFFFFF 0%, #F5F9FA 55%, #E8F1F2 100%);

  /* ------- Semantic ------------------------------------------------ */
  --success:          #1A9A58;
  --warn:             #B8860B;
  --danger:           #C84A4A;

  /* ------- Chart palette (aquamarine-first) ------------------------ */
  --chart-1:          #1F5E6E;          /* deep teal — primary series */
  --chart-2:          #3D8FA0;          /* aqua-teal — accent series */
  --chart-3:          #7FC4CF;          /* aquamarine — tertiary */
  --chart-4:          #B5DDE1;          /* pale aqua — quaternary */

  /* ------- Radius -------------------------------------------------- */
  --r-sm:             8px;
  --r-md:             12px;
  --r-lg:             16px;
  --r-xl:             24px;
  --r-full:           999px;

  /* ------- Shadows (softer + bluer than previous red theme) -------- */
  --shadow-0:         0 0 0 1px var(--border-soft);
  --shadow-1:         0 1px 2px rgba(15, 22, 48, 0.04), 0 0 0 1px var(--border-soft);
  --shadow-2:         0 8px 24px rgba(15, 22, 48, 0.08), 0 0 0 1px var(--border-soft);
  --shadow-hero:      0 12px 32px rgba(50, 79, 123, 0.28), 0 0 0 1px rgba(134, 166, 222, 0.25);

  /* ------- Motion -------------------------------------------------- */
  --t-instant:        120ms ease-out;
  --t-quick:          200ms cubic-bezier(0.2, 0, 0, 1);
  --t-smooth:         320ms cubic-bezier(0.2, 0, 0, 1);
}

/* ========================================================================
   Reset + base
   ======================================================================== */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Electrolize", system-ui, -apple-system, sans-serif;
  color: var(--ink-primary);
  background: var(--page-gradient);
  background-attachment: fixed;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 2px solid var(--blue-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Typography helpers */
/* ---------------------------------------------------------------------
   Oxanium is our display face — a geometric superellipse sans that
   ships real weights (400–800). Display labels use 600 for presence
   without the heavy-handed look of 800. No more text-stroke hacks.
   --------------------------------------------------------------------- */
.label-display,
.panel-label,
.scorecard-label,
.breadcrumb,
.split-head,
.os-title,
.geo-total-label {
  font-family: "Oxanium", sans-serif;
  font-weight: 600;
  color: var(--ink-primary);
}
.label-display {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1;
}
.mono { font-family: "Inconsolata", monospace; font-variant-numeric: tabular-nums; }
.num { font-family: "Zen Dots", "Inconsolata", monospace; font-feature-settings: "tnum"; }

/* ========================================================================
   Top bar
   ======================================================================== */

.topbar {
  height: 68px;
  /* Frosted paper — semi-transparent near-white so it reads as the same
     paper wash as the top of the body gradient, but still masks any
     content that scrolls under it. */
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  /* Aqua divider line beneath the header */
  border-bottom: 4px solid var(--blue-primary);
  box-shadow: 0 1px 0 rgba(61, 143, 160, 0.12), 0 4px 18px rgba(15, 22, 48, 0.04);
  color: var(--ink-primary);
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar-inner {
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.brand-lockup {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  line-height: 1;
}
.brand-logo {
  display: block;
  height: 28px;
  /* Aspect ratio of henshin-logo.png is 1423:322 (≈4.42:1) */
  width: calc(28px * 4.42);
  margin-top: 1px;
  background: url('/logos/henshin-logo-white.png') no-repeat center / contain;
}
.brand-ai {
  font-family: "Oxanium", sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: #FFFFFF;
  letter-spacing: 0.01em;
  line-height: 1;
  transform: translateY(-2px);
  -webkit-text-stroke: 0.8px #FFFFFF;
  paint-order: stroke fill;
}

/* Day-mode brand lockup — swap the white logo for the teal variant and
   retint the "AI" text to deep teal so the lockup reads on the light
   topbar. */
body.theme-day .brand-logo {
  background-image: url('/logos/henshin-logo-teal.png');
}
body.theme-day .brand-ai {
  color: var(--blue-deep);
  -webkit-text-stroke: 0.8px var(--blue-deep);
}

.topnav {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  /* Translucent glass pill that sits on the navy gradient. */
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(134, 166, 222, 0.20);
  border-radius: var(--r-full);
  flex: 0 0 auto;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  backdrop-filter: blur(8px);
}
/* Give the topbar a positioning context so the nav can sit dead-center */
.topbar-inner { position: relative; }
/* Brand + right cluster push the edges; the nav floats over the middle */
.brand-lockup { position: relative; z-index: 2; }
.topbar-right { margin-left: auto; position: relative; z-index: 2; }

/* ---------------------------------------------------------------------
   Nav links — Helvetica Neue Bold, uppercase, tracked. Clean, crisp,
   editorial; reads well on the navy bar at small sizes. Zero new font
   load — uses the system Helvetica on Mac/iOS, Arial elsewhere.
   --------------------------------------------------------------------- */
.topnav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--r-full);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.75);
  transition: background var(--t-quick), color var(--t-quick), box-shadow var(--t-quick);
  white-space: nowrap;
}
.topnav-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}
.topnav-link.is-active {
  background: var(--grad-blue);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(134, 166, 222, 0.35);
}
.topnav-icon { width: 15px; height: 15px; font-size: 15px; line-height: 1; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }

.topbar-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.icon-btn {
  width: 36px; height: 36px;
  border-radius: var(--r-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-secondary);
  transition: background var(--t-instant), color var(--t-instant);
  position: relative;
}
.topbar .icon-btn:hover { background: var(--bg-card-subtle); color: var(--blue-deep); }
.icon-btn.ghost { width: 32px; height: 32px; }
.icon-btn i, .icon-btn svg { width: 18px; height: 18px; font-size: 18px; line-height: 1; }

.notif-dot {
  position: absolute;
  top: 8px; right: 9px;
  width: 7px; height: 7px;
  background: var(--blue-primary);
  border-radius: 50%;
  box-shadow: 0 0 0 2px #FFFFFF;          /* ring matches the white bar */
}

/* ---------------------------------------------------------------------
   Hamburger button — three thick rounded bars. Click to open drawer.
   --------------------------------------------------------------------- */
.hamburger {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-soft);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
  transition: background var(--t-quick), border-color var(--t-quick), transform var(--t-quick);
}
.hamburger:hover {
  background: var(--blue-tint);
  border-color: var(--blue-light);
}
.hamburger span {
  display: block;
  width: 22px;
  height: 3px;
  border-radius: 999px;
  background: var(--blue-deep);
  transition: transform var(--t-smooth), opacity var(--t-smooth);
}
/* Animate to an X when the menu is open */
body.menu-open .hamburger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.menu-open .hamburger span:nth-child(2) { opacity: 0; }
body.menu-open .hamburger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------------------------------------------------------------------
   App shell + side drawer — shell slides left when menu opens so the
   drawer is revealed on the right.
   --------------------------------------------------------------------- */
.app-shell {
  transition: transform var(--t-smooth);
  will-change: transform;
}
body.menu-open .app-shell {
  transform: translateX(-300px);
}

.side-menu-scrim {
  position: fixed;
  inset: 0;
  background: rgba(15, 22, 48, 0.25);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-smooth), visibility var(--t-smooth);
  z-index: 80;
}
body.menu-open .side-menu-scrim { opacity: 1; visibility: visible; }

.side-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 100vh;
  background: #FFFFFF;
  border-left: 2px solid var(--blue-primary);
  box-shadow: -16px 0 40px rgba(15, 22, 48, 0.12);
  transform: translateX(100%);
  transition: transform var(--t-smooth);
  z-index: 90;
  padding: 28px 18px;
  overflow-y: auto;
}
body.menu-open .side-menu { transform: translateX(0); }

.side-menu-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.side-menu-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 10px;
  color: var(--ink-primary);
  font-family: "Oxanium", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  -webkit-text-stroke: 0.35px var(--ink-primary);
  paint-order: stroke fill;
  transition: background var(--t-quick), color var(--t-quick);
}
.side-menu-link:hover {
  background: var(--blue-tint);
  color: var(--blue-deep);
  -webkit-text-stroke-color: var(--blue-deep);
}
.side-menu-link.is-active {
  background: var(--grad-blue);
  color: #FFFFFF;
  -webkit-text-stroke: 0.35px #FFFFFF;
  box-shadow: 0 4px 14px rgba(31, 94, 110, 0.22);
}
.side-menu-icon {
  font-size: 20px;
  width: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.side-menu-sep {
  height: 1px;
  background: var(--border-soft);
  margin: 14px 4px;
}

.avatar.avatar-sm { width: 30px; height: 30px; }
.avatar {
  width: 36px; height: 36px;
  border-radius: var(--r-full);
  background: var(--grad-blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 12px rgba(50, 79, 123, 0.3);
  border: none;
  cursor: pointer;
  transition: transform var(--t-quick), box-shadow var(--t-quick);
}
.avatar:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(31, 94, 110, 0.35); }

/* Logo variant — replaces the gradient + initials with the client brand.
   Dark aqua background keeps the white logo readable. */
.avatar.avatar-logo {
  background: var(--grad-hero);
  padding: 4px;
  overflow: hidden;
  border: 1px solid rgba(127, 196, 207, 0.22);
}
.avatar.avatar-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ---------------------------------------------------------------------
   Avatar dropdown menu — anchored below the avatar, appears on click.
   --------------------------------------------------------------------- */
.avatar-wrap { position: relative; }
.avatar-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 200px;
  padding: 8px;
  background: #FFFFFF;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  box-shadow:
    0 2px 6px rgba(15, 22, 48, 0.06),
    0 16px 40px rgba(31, 94, 110, 0.18);
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity var(--t-quick), transform var(--t-quick);
  z-index: 60;
}
.avatar-menu.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.avatar-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: 14px;
  color: var(--ink-primary);
  text-decoration: none;
  transition: background var(--t-quick), color var(--t-quick);
}
.avatar-menu-item i {
  font-size: 18px;
  line-height: 1;
  color: var(--ink-secondary);
  flex-shrink: 0;
}
.avatar-menu-item:hover { background: var(--blue-soft); color: var(--blue-deep); }
.avatar-menu-item:hover i { color: var(--blue-deep); }
.avatar-menu-sep {
  height: 1px;
  background: var(--border-soft);
  margin: 6px 4px;
}

/* ========================================================================
   Page layout
   ======================================================================== */

.page {
  max-width: none;
  margin: 0;
  padding: 32px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding-bottom: 32px;
}
.page-header-title {
  display: flex;
  align-items: center;
  gap: 16px;
}
.client-logo {
  width: 64px;
  height: 64px;
  border-radius: var(--r-md);
  object-fit: contain;
  padding: 8px;
  background: var(--grad-hero);
  box-shadow:
    0 0 0 1px rgba(127, 196, 207, 0.22),
    0 6px 16px rgba(31, 94, 110, 0.18);
  flex-shrink: 0;
}

.breadcrumb {
  font-size: 12px;
  letter-spacing: 0.14em;
  margin-bottom: 12px;
}
.page-title {
  font-family: "Electrolize", sans-serif;
  font-size: 36px;
  line-height: 1.1;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.015em;
  background: linear-gradient(180deg, var(--ink-primary) 30%, var(--blue-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.page-header-actions { display: flex; gap: 8px; }

.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--r-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  color: var(--ink-primary);
  font-size: 14px;
  font-weight: 500;
  transition: background var(--t-instant);
}
/* Wide variant — used for the date range picker so it reads as a
   substantive control, not a tiny chip. Extra internal gap between
   the icon and label, and between label and chevron. */
.pill-btn.pill-btn-wide {
  min-width: 260px;
  padding: 0 20px;
  justify-content: space-between;
  gap: 12px;
}
.pill-btn.pill-btn-wide > :last-child { margin-left: auto; }
.pill-btn:hover { background: var(--bg-card-subtle); }
.pill-icon { width: 16px; height: 16px; font-size: 16px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }

.row { margin-bottom: 24px; }
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-12 { grid-column: span 12; }

/* Stacked scorecard column (sits beside the map) */
.scorecard-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.scorecard-stack .scorecard {
  flex: 1 1 0;
  min-height: 0;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.scorecard-stack .scorecard-label { margin-bottom: 10px; }
.scorecard-stack .scorecard-value { font-size: 30px; }
.scorecard-stack .scorecard-delta { margin-top: 10px; font-size: 12px; }
.scorecard-stack .scorecard-hero { padding: 20px 22px; }
.scorecard-stack .scorecard-hero .hero-sub { margin-top: 6px; font-size: 12px; }
.scorecard-stack .scorecard-hero .hero-metrics { margin-top: 8px; font-size: 12px; gap: 4px; }
.scorecard-stack .scorecard-hero .hero-footnote { margin-top: 8px; padding-top: 8px; }

/* ========================================================================
   Card
   ======================================================================== */

.card {
  /* Subtle top-to-bottom gradient: near-white at the top fading to a
     pale blue-tint at the bottom. Combined with a crisp hairline border
     and a soft shadow, this creates a visible "lift" against the
     patterned page background. */
  background: linear-gradient(180deg, #FFFFFF 0%, #EEF7F6 100%);
  border-radius: var(--r-lg);
  padding: 24px;
  border: 1px solid rgba(80, 103, 170, 0.12);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 1px 2px rgba(15, 22, 48, 0.04),
    0 10px 24px rgba(50, 79, 123, 0.08);
  transition: box-shadow var(--t-quick), transform var(--t-quick);
  position: relative;
  /* overflow: visible so .card-hint tooltips can escape the card edge;
     the card's hover gradient ::before is now clipped via a separate
     inner wrapper only if needed (currently just a subtle fade). */
  overflow: visible;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 120px;
  background: var(--grad-card-top);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-smooth);
  border-radius: var(--r-lg) var(--r-lg) 0 0;   /* respect card corners now that parent overflow is visible */
}
.card:hover {
  /* Mirrors the night-mode hover treatment on a light surface: small
     lift + teal border + layered teal glow. Tokens auto-flip between
     modes so this single rule works in both, but the night-mode
     override later in the file provides a heavier-weight variant. */
  transform: translateY(-2px);
  border-color: rgba(31, 94, 110, 0.28);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 2px 4px rgba(15, 22, 48, 0.05),
    0 18px 36px rgba(50, 79, 123, 0.12),
    0 0 0 1px rgba(61, 143, 160, 0.12),
    0 0 28px rgba(61, 143, 160, 0.16);
}
.card:hover::before { opacity: 1; }
.card { transition: box-shadow var(--t-quick), transform var(--t-quick), border-color var(--t-quick); }

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  gap: 16px;
  position: relative;
  z-index: 1;
}
.card-sub { font-size: 13px; color: var(--ink-tertiary); margin-top: 6px; }
.tag { color: var(--ink-tertiary); font-size: 13px; }
.link-btn {
  color: var(--ink-secondary);
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.link-btn:hover { color: var(--blue-primary); }

/* ========================================================================
   Scorecards
   ======================================================================== */

.scorecard { padding: 24px; }
.scorecard-label {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.scorecard-value {
  font-family: "Zen Dots", "Inconsolata", monospace;
  font-size: 32px;
  line-height: 1;
  color: var(--ink-primary);
  display: flex;
  align-items: baseline;
  gap: 3px;
  letter-spacing: -0.03em;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}
/* Solid --blue-deep for numerals. Gradient text is reserved for ONE hero
   metric per view (.geo-total-num on the globe card). Everywhere else a
   solid ink reads cleaner and passes WCAG AA on pale surfaces. */
.scorecard-value.gradient .num {
  background: none;
  -webkit-text-fill-color: var(--blue-deep);
  color: var(--blue-deep);
}
.scorecard-currency {
  font-family: "Electrolize", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-secondary);
  transform: translateY(-8px);
  -webkit-text-fill-color: initial;
}
.scorecard-delta {
  margin-top: 16px;
  font-size: 13px;
  color: var(--ink-secondary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.scorecard-delta.up { color: var(--success); }
.scorecard-delta.down { color: var(--danger); }
.delta-arrow { width: 14px; height: 14px; font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.delta-context { color: var(--ink-tertiary); margin-left: 4px; }

/* ------------------------------------------------------------------
   Light scorecard variant — pale steel → near-white gradient with a
   faint dashed-grid square pattern overlay. Dark ink on top for contrast.
   Class is still .scorecard-dark for HTML stability even though the
   treatment is now light.
   ------------------------------------------------------------------ */
.scorecard-dark {
  /* Layer order: dashed grid on top, gradient below. */
  background:
    var(--pattern-grid-dashed),
    var(--grad-gray-hero);
  background-size: 44px 44px, auto;
  color: var(--ink-primary);
  border: 1px solid rgba(80, 103, 170, 0.14);
  box-shadow: 0 4px 14px rgba(15, 22, 48, 0.06), 0 0 0 1px rgba(210, 216, 228, 0.55);
  position: relative;
  /* Parent overflow visible so card-hint tooltips can escape. The
     decorative ::after below uses border-radius: inherit to stay clipped
     to the card's rounded corners. */
}
.scorecard-dark::before { display: none; }
.scorecard-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
}
.scorecard-dark .scorecard-label {
  color: var(--ink-primary);
  -webkit-text-stroke: 0.35px var(--ink-primary);
}
.scorecard-dark .scorecard-currency {
  color: var(--ink-secondary);
  -webkit-text-fill-color: initial;
}
.scorecard-dark .scorecard-value { color: var(--ink-primary); }
.scorecard-dark .scorecard-value.gradient .num {
  background: none;
  -webkit-text-fill-color: var(--blue-deep);
  color: var(--blue-deep);
}
.scorecard-dark .scorecard-delta.up {
  color: var(--success);
}
.scorecard-dark .scorecard-delta.down {
  color: var(--danger);
}
.scorecard-dark .scorecard-delta .delta-context {
  color: var(--ink-tertiary);
}

/* ------------------------------------------------------------------
   Green scorecard variant — pale sage → near-white gradient + a
   matching dashed-grid pattern tinted green. Mirrors .scorecard-dark
   in structure but with a sage-aqua cast so alternating cards read
   as distinct-but-family.
   ------------------------------------------------------------------ */
.scorecard-green {
  background:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M0 0 L44 0 M0 0 L0 44' stroke='%232F6E54' stroke-width='1' stroke-dasharray='2,5' stroke-opacity='0.14'/%3E%3C/svg%3E"),
    radial-gradient(520px 400px at 85% 5%, rgba(255, 255, 255, 0.9), transparent 60%),
    radial-gradient(420px 420px at 8% 110%, rgba(183, 212, 194, 0.55), transparent 55%),
    linear-gradient(135deg, #B7D4C4 0%, #CFE1D5 35%, #E2EDE5 70%, #F2F7F3 100%);
  background-size: 44px 44px, auto, auto, auto;
  color: var(--ink-primary);
  border: 1px solid rgba(47, 110, 84, 0.16);
  box-shadow: 0 4px 14px rgba(15, 48, 30, 0.06), 0 0 0 1px rgba(199, 220, 208, 0.55);
  position: relative;
}
.scorecard-green::before { display: none; }
.scorecard-green::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
}
.scorecard-green .scorecard-label {
  color: var(--ink-primary);
  -webkit-text-stroke: 0.35px var(--ink-primary);
}
.scorecard-green .scorecard-currency {
  color: var(--ink-secondary);
  -webkit-text-fill-color: initial;
}
.scorecard-green .scorecard-value { color: var(--ink-primary); }
.scorecard-green .scorecard-value.gradient .num {
  background: none;
  -webkit-text-fill-color: #2F6E54;
  color: #2F6E54;
}
.scorecard-green .scorecard-delta.up { color: var(--success); }
.scorecard-green .scorecard-delta.down { color: var(--danger); }
.scorecard-green .scorecard-delta .delta-context { color: var(--ink-tertiary); }

/* Inverted hero scorecard — deep navy with blue radial glow + grid pattern */
.scorecard-hero {
  background:
    var(--pattern-grid-dashed-dark),
    var(--grad-hero);
  background-size: 44px 44px, auto;
  color: var(--ink-on-hero);
  border-radius: var(--r-xl);
  padding: 24px;
  position: relative;
  box-shadow: var(--shadow-hero);
  border: 1px solid rgba(134, 166, 222, 0.12);
  /* Inner glow wrapper sits on a pseudo with clipped corners so the radial
     bloom doesn't escape the rounded edges now that overflow is visible. */
  isolation: isolate;
}
.scorecard-hero::before {
  /* Clipped radial glow. */
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 120%, rgba(134, 166, 222, 0.25), transparent 55%);
  pointer-events: none;
}
.scorecard-hero::after { display: none; }
.scorecard-hero > * { position: relative; z-index: 1; }
.scorecard-hero .scorecard-value { color: var(--ink-on-hero); }
.scorecard-hero .scorecard-value .num {
  background: none;
  -webkit-text-fill-color: var(--ink-on-hero);
  color: var(--ink-on-hero);
}
.hero-label { color: var(--ink-on-hero); opacity: 0.9; }
.hero-sub {
  margin-top: 8px;
  font-size: 13px;
  color: rgba(242, 245, 251, 0.7);
  letter-spacing: 0.02em;
}
.hero-metrics {
  margin-top: 14px;
  font-family: "Inconsolata", monospace;
  font-size: 14px;
  color: var(--ink-on-hero);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.dot-sep { color: rgba(134, 166, 222, 0.6); }
/* ========================================================================
   Indicator dots — glow (hourly cadence) + pulse (animated, live feel)
   ======================================================================== */

/* Legacy pulse-dot — used on the most-recent purchase feed entry.
   Kept as a slow pulse to signal freshness without feeling "realtime". */
.pulse-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--blue-primary);
  box-shadow: 0 0 0 0 rgba(80, 103, 170, 0.55);
  animation: henshin-pulse 2.2s ease-out infinite;
  vertical-align: middle;
}
.pulse-dot.red {
  /* Semantic name preserved (used in HTML/JS) but recolored to the blue
     accent now that the palette has moved away from red. */
  background: var(--blue-primary);
  box-shadow: 0 0 0 0 rgba(80, 103, 170, 0.55);
}
@keyframes henshin-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(80, 103, 170, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(80, 103, 170, 0.00); }
  100% { box-shadow: 0 0 0 0   rgba(80, 103, 170, 0.00); }
}

/* Purchase-feed row indicator column */
.feed-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.feed-dot.empty {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--border-soft);
}

.glow-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--blue-primary);
  box-shadow: 0 0 0 3px rgba(80, 103, 170, 0.20);
  vertical-align: middle;
}
.glow-dot.light { background: var(--blue-light); box-shadow: 0 0 0 3px rgba(134, 166, 222, 0.25); }

.sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--blue-soft);
  color: var(--blue-deep);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-family: "Inconsolata", monospace;
  text-transform: uppercase;
}

/* ========================================================================
   Geo centerpiece
   ======================================================================== */

.geo-card {
  padding: 0;                               /* map fills the card edge-to-edge */
  border-radius: var(--r-xl);
  overflow: hidden;                         /* clip the map to the rounded corners */
  background: transparent;                  /* map covers the full surface; no frame */
  box-shadow: var(--shadow-1);
}
/* Neutralize the .card top-highlight pseudo so it doesn't show over the map */
.geo-card::before { display: none; }
.geo-inner {
  position: relative;
  height: 640px;
  border-radius: var(--r-xl);
  overflow: hidden;
  /* Easing border-radius keeps the fullscreen flip from feeling jarring.
     Transforms intentionally skipped — they create a new containing
     block and break Mapbox's canvas sizing. */
  transition: border-radius 180ms ease;
  /* Dark navy loading background — matches the Mapbox `dusk` + blue-ice
     tint so the pre-tile state doesn't flash a different color. */
  background:
    radial-gradient(600px 400px at 20% 10%, rgba(80, 103, 170, 0.28), transparent 60%),
    radial-gradient(500px 500px at 90% 110%, rgba(50, 79, 123, 0.35), transparent 55%),
    linear-gradient(180deg, #0B1230 0%, #1A2450 100%);
}
/* ---- Fullscreen map ------------------------------------------------- *
 * When #geo-map-frame gets .is-fullscreen it lifts out of the grid and
 * covers the viewport. Mapbox's canvas sizes from its container, so
 * after the class flip we call map.resize() in an rAF loop (see map.js)
 * — once for the class change, once for the layout settle — so the
 * canvas matches the new box both entering AND exiting fullscreen. */
.geo-inner.is-fullscreen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  border-radius: 0;
  box-shadow: none;
}
/* Freeze page scroll while fullscreen so wheel/touch events land on
 * the map, not the document behind it. */
body.map-is-fullscreen {
  overflow: hidden;
}
.map-mount {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.map-mount gmp-map-3d { width: 100%; height: 100%; display: block; }
.map-mount .mapboxgl-map { width: 100%; height: 100%; border-radius: inherit; }
.map-mount .mapboxgl-canvas { outline: none; }
.map-mount .mapboxgl-ctrl-bottom-right,
.map-mount .mapboxgl-ctrl-bottom-left { margin-bottom: 72px; }
.map-mount .mapboxgl-ctrl-group {
  box-shadow: var(--shadow-1);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.map-mount .mapboxgl-ctrl-attrib {
  background: rgba(15, 22, 48, 0.75) !important;
  color: #fff !important;
}
.map-mount .mapboxgl-ctrl-attrib a { color: #fff !important; opacity: 0.85; }

.henshin-map-popup .mapboxgl-popup-content {
  background: var(--bg-card);
  color: var(--ink-primary);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-2);
  padding: 10px 14px;
  font-family: "Electrolize", sans-serif;
}
.henshin-map-popup .mapboxgl-popup-tip { border-top-color: var(--bg-card); }

/* ---------------------------------------------------------------------
   Rich click popup — a detail card that opens when a GPS pin is clicked.
   Matches the white "panel" look of Top Countries / This Hour overlays.
   --------------------------------------------------------------------- */
/* Fade the card content in (slight upward nudge) when the overlay opens */
.overlay-marker-detail.is-open .mp-card {
  animation: mp-fade-in 260ms ease both;
}
@keyframes mp-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mp-card {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  color: var(--ink-primary);
  font-family: "Electrolize", sans-serif;
  width: 300px;
  overflow: hidden;
  padding: 16px;
}

.mp-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.mp-head-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.mp-flag {
  width: 22px;
  height: 16px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(15, 22, 48, 0.08);
  flex-shrink: 0;
}
.mp-city {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp-sessions {
  font-size: 12px;
  color: var(--ink-secondary);
  font-family: "Inconsolata", monospace;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-soft);
  white-space: nowrap;
}
.mp-close {
  width: 26px; height: 26px;
  border-radius: 6px;
  border: 1px solid var(--border-soft);
  background: var(--bg-card-subtle);
  color: var(--ink-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
}
.mp-close:hover { background: rgba(15, 22, 48, 0.06); color: var(--ink-primary); }

.mp-section {
  padding: 10px 0;
  border-top: 1px solid var(--border-soft);
}
.mp-section:first-of-type { border-top: none; padding-top: 2px; }
.mp-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin-bottom: 6px;
}
.mp-location {
  font-size: 14px;
  color: var(--ink-primary);
  font-weight: 600;
}
.mp-coords {
  font-size: 12px;
  color: var(--ink-tertiary);
  margin-top: 4px;
  font-family: "Inconsolata", monospace;
}

.mp-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: center;
  padding: 5px 0;
}
.mp-row .mp-icon {
  font-size: 18px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-deep);
  background: rgba(61, 143, 160, 0.10);
  border: 1px solid rgba(61, 143, 160, 0.18);
}
.mp-k {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}
.mp-v {
  font-size: 13px;
  color: var(--ink-primary);
  font-weight: 500;
  margin-top: 2px;
}

.mp-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(15, 22, 48, 0.06);
  display: flex;
  overflow: hidden;
  margin: 8px 0 8px;
}
.mp-bar-smart  { background: var(--blue-primary); height: 100%; }
.mp-bar-direct { background: var(--blue-light); height: 100%; }
.mp-bar-legend {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-secondary);
}
.mp-bar-legend .mp-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}
.mp-dot-smart { background: var(--blue-primary); }
.mp-dot-direct { background: var(--blue-light); }

.mp-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
  text-align: center;
}
.mp-stat-k {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}
.mp-stat-v {
  font-family: "Zen Dots", "Inconsolata", monospace;
  font-size: 18px;
  color: var(--ink-primary);
  margin-top: 4px;
}

.mp-foot {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
  font-size: 11px;
  color: var(--ink-tertiary);
}

/* Map overlays */
.geo-overlay { position: absolute; z-index: 2; pointer-events: auto; }
.overlay-top-left  {
  top: 20px;
  left: 20px;
  background: rgba(15, 22, 48, 0.78);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(134, 166, 222, 0.25);
  border-radius: var(--r-full);
  padding: 8px 14px;
}
.overlay-top-center { top: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; }
.overlay-top-right  { top: 20px; right: 20px; display: flex; gap: 8px; align-items: center; }
.overlay-left-mid   { top: 50%; left: 20px; transform: translateY(-50%); width: 240px; transition: opacity 300ms ease, visibility 300ms ease; }
.overlay-left-mid.is-faded { opacity: 0; visibility: hidden; pointer-events: none; }

/* Marker detail occupies the same slot as Top Countries. Hidden until a pin
   is clicked, then fades in via .is-open (mirroring .is-faded on siblings). */
.overlay-marker-detail {
  width: 300px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.overlay-marker-detail.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.overlay-right-mid  { top: 50%; right: 20px; transform: translateY(-50%); width: 220px; }
.overlay-bottom-left { bottom: 20px; left: 20px; right: 20px; }

.overlay-top-left .label-display {
  color: #FFFFFF;                             /* override dark-ink global rule on the glass panel */
  -webkit-text-stroke: 0.35px #FFFFFF;
  font-size: 11px;
}

/* Total-sessions pill — replaces flag chips */
.geo-total-pill {
  background: rgba(15, 22, 48, 0.72);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(134, 166, 222, 0.25);
  border-radius: var(--r-full);
  padding: 10px 20px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  box-shadow: 0 6px 20px rgba(15, 22, 48, 0.3);
}
.geo-total-num {
  font-family: "Zen Dots", monospace;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #FFFFFF 0%, #B8C7E8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.geo-total-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: #FFFFFF;                             /* override the shared global rule — hero overlay needs white */
  -webkit-text-stroke: 0.35px #FFFFFF;
  text-transform: uppercase;
  line-height: 1;
}
.geo-total-divider {
  width: 1px;
  height: 20px;
  background: rgba(134, 166, 222, 0.3);
}

.toggle-group {
  display: inline-flex;
  background: rgba(15, 22, 48, 0.72);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(134, 166, 222, 0.25);
  border-radius: var(--r-sm);
  padding: 2px;
}
.toggle-btn {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 6px 10px;
  border-radius: 6px;
  color: rgba(184, 199, 232, 0.8);
}
.toggle-btn.is-active {
  background: var(--grad-blue);
  color: #fff;
  box-shadow: 0 2px 6px rgba(50, 79, 123, 0.4);
}

.overlay-top-right .icon-btn.ghost {
  background: rgba(15, 22, 48, 0.72);
  border: 1px solid rgba(134, 166, 222, 0.25);
  color: rgba(184, 199, 232, 0.9);
}
.overlay-top-right .icon-btn.ghost:hover { background: rgba(15, 22, 48, 0.9); }

.panel {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: 16px;
  box-shadow: var(--shadow-1);
}
.panel-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.loc-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
}
.loc-list li + li { border-top: 1px solid var(--border-soft); }
.loc-flag {
  width: 22px;
  height: 16px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(15, 22, 48, 0.08);
  flex-shrink: 0;
}
.loc-name { flex: 1; color: var(--ink-primary); font-weight: 500; }
.loc-num { font-family: "Inconsolata", monospace; font-weight: 500; color: var(--ink-primary); }

.live-num {
  font-family: "Zen Dots", "Inconsolata", monospace;
  font-size: 28px;
  line-height: 1;
  color: var(--blue-deep);
  letter-spacing: -0.02em;
}
.live-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-secondary);
  margin-top: 6px;
}
.live-sub {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
  font-family: "Inconsolata", monospace;
  font-size: 13px;
  color: var(--ink-primary);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.live-sub .sub-k { color: var(--ink-tertiary); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }

.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-full);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-primary);
  transition: background var(--t-instant);
}
.chip:hover { background: var(--bg-card-subtle); }
.chip.is-active {
  background: var(--grad-blue);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 10px rgba(50, 79, 123, 0.35);
}

/* 2D fallback */
.map-fallback-svg { width: 100%; height: 100%; display: block; }

/* ========================================================================
   Tabs / period selector
   ======================================================================== */

.tabs {
  display: inline-flex;
  background: var(--bg-card-subtle);
  border-radius: var(--r-sm);
  padding: 2px;
  gap: 2px;
}
.tab {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  border-radius: 6px;
  color: var(--ink-secondary);
  transition: background var(--t-instant), color var(--t-instant);
}
.tab:hover { color: var(--ink-primary); }
.tab.is-active {
  background: var(--bg-card);
  color: var(--blue-deep);
  box-shadow: 0 1px 2px rgba(15, 22, 48, 0.08);
}

/* ========================================================================
   Donut + legend
   ======================================================================== */

.donut-wrap { position: relative; }
.donut-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.donut-center-num {
  font-family: "Zen Dots", monospace;
  font-size: 18px;                   /* sized so a 7-digit (1,000,000+) number fits inside the ring */
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--blue-deep);
}
.donut-center-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-tertiary);
  margin-top: 4px;
}
.legend { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.legend li {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  grid-column-gap: 8px;
  align-items: center;
  font-size: 13px;
}
.legend-sw { width: 10px; height: 10px; border-radius: 2px; }
.legend-val { font-family: "Inconsolata", monospace; font-weight: 500; }
.legend-bar {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: 2px;
  background: var(--bg-card-subtle);
  overflow: hidden;
}
.legend-bar span { display: block; height: 100%; border-radius: 2px; }

/* ========================================================================
   Social cards
   ======================================================================== */

/* ---------------------------------------------------------------------
   Social cards — default layout (YouTube, TikTok/X):
     metrics in a 3-col horizontal row above a full-width chart.
   Instagram opts into the 2-col .social-body layout (metrics stacked
   on the left, donut on the right).
   --------------------------------------------------------------------- */
.social-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.social-metric { display: flex; flex-direction: column; gap: 4px; }
.social-v {
  font-family: "Zen Dots", monospace;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink-primary);
  line-height: 1;
}
.social-k {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-tertiary);
}

/* Instagram-only 2-column body (metrics left · donut right). Bigger numbers
   since the left column has more room. */
.social-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 20px;
  align-items: stretch;
}
.social-body .social-metrics {
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: flex-start;
  margin-bottom: 0;
  padding-top: 10%;
}
.social-body .social-v { font-size: 26px; }
.social-chart {
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.social-chart canvas { width: 100% !important; height: 100% !important; }

/* TikTok / X split — side-by-side sub-cards */
.split-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 12px;
}
.split-col {
  padding: 12px;
  background: var(--bg-card-subtle);
  border-radius: var(--r-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.split-head {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Color the TikTok / X sub-cards to match their bar-chart series */
.split-col-tiktok {
  background: var(--blue-deep);           /* #1F5E6E — TikTok bar color */
}
.split-col-tiktok .split-head,
.split-col-tiktok .social-v {
  color: #FFFFFF;
}
.split-col-tiktok .social-k {
  color: rgba(255, 255, 255, 0.72);
}

.split-col-x {
  background: var(--blue-light);          /* #7FC4CF — X bar color */
}
.split-col-x .split-head,
.split-col-x .social-v {
  color: var(--blue-deep);
}
.split-col-x .social-k {
  color: rgba(15, 22, 48, 0.62);
}

/* ========================================================================
   Data table
   ======================================================================== */

.data-table th {
  font-family: "Oxanium", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-primary);
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-soft);
}
.data-table th.num-col, .data-table td.num-col { text-align: right; font-variant-numeric: tabular-nums; }
/* Earned column — money values in success-green, bold, slightly larger
   so they're the most-scannable column at a glance. */
.data-table td.num-col.earned {
  color: var(--success);
  font-weight: 700;
}
.data-table td {
  padding: 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--bg-card-subtle); }
.data-table .mono-cell { font-family: "Inconsolata", monospace; font-weight: 500; }
.product-thumb {
  width: 44px; height: 44px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Oxanium", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  overflow: hidden;
  background: var(--bg-card-subtle);
  box-shadow: 0 0 0 1px var(--border-soft);
}
.product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-thumb-fallback {
  background: var(--grad-blue);
  color: #fff;
  font-size: 12px;
}
.product-name { font-weight: 500; color: var(--ink-primary); }
.product-sub { font-size: 11px; color: var(--ink-tertiary); margin-top: 2px; }

/* SKU — small uppercase amber/orange label + value, color-coded so the
   identifier stands out from the surrounding gray sub-text. */
.product-sub .sku-label {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(232, 137, 30, 0.14);
  color: #B85F0F;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 10px;
}
.product-sub .sku-val {
  color: #B85F0F;
  font-weight: 600;
  font-family: "Inconsolata", monospace;
}
/* Price — green to read as money / earnings */
.product-sub .price-val {
  color: var(--success);
  font-weight: 700;
  font-family: "Inconsolata", monospace;
}
.sparkline-cell canvas { width: 80px !important; height: 28px !important; }

/* ========================================================================
   Purchase history feed
   ======================================================================== */

.feed-card { display: flex; flex-direction: column; }
.purchase-feed {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  overflow-y: auto;
  margin: 0 -8px;
}
.purchase-feed li {
  display: grid;
  grid-template-columns: 12px 68px 22px 22px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 16px 10px;
  border-radius: var(--r-sm);
  font-size: 13px;
}

/* Day/night indicator — warm amber for day, cool aqua for night. Small
   rounded tile so it reads as a deliberate badge, not a stray icon. */
.feed-daynight,
.evt-daynight {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
}
.dn-day   { background: rgba(232, 183, 74, 0.16); color: #9C7A1E; }
.dn-night { background: rgba(61, 143, 160, 0.14); color: var(--blue-deep); }
.purchase-feed li + li { border-top: 1px solid var(--border-soft); }
.feed-time { font-family: "Inconsolata", monospace; color: var(--ink-secondary); font-size: 12px; }
.feed-flag {
  width: 20px;
  height: 15px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(15, 22, 48, 0.08);
}
.evt-flag {
  display: inline-block;
  width: 18px;
  height: 13px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(15, 22, 48, 0.08);
  margin-right: 8px;
  vertical-align: -2px;
}
.feed-email { font-family: "Inconsolata", monospace; color: var(--ink-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-amt { font-family: "Inconsolata", monospace; font-weight: 700; color: var(--blue-deep); }

/* ========================================================================
   Bar list
   ======================================================================== */

.bar-list { display: flex; flex-direction: column; gap: 14px; }
.bar-list.compact { gap: 10px; }
.bar-list li {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  grid-column-gap: 10px;
  row-gap: 6px;
  align-items: center;
}
.bar-icon {
  width: 22px;
  height: 22px;
  font-size: 16px;
  color: var(--blue-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bar-list li .bar-track { grid-column: 1 / -1; margin-left: 32px; }
.bar-name {
  font-size: 13px;
  color: var(--ink-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bar-val {
  font-family: "Inconsolata", monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-primary);
}
.bar-track {
  grid-column: 1 / -1;
  height: 8px;
  border-radius: 999px;
  background: var(--bg-card-subtle);
  overflow: hidden;
}
.bar-track span {
  display: block;
  height: 100%;
  background: var(--grad-blue);
  border-radius: 999px;
  transition: width var(--t-smooth);
}

/* Devices */
.device-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.device-row.os-row { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.device {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 14px;
  background: var(--grad-blue);
  color: #FFFFFF;
  border-radius: var(--r-md);
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 6px 16px rgba(31, 94, 110, 0.22);
  transition: transform var(--t-quick), box-shadow var(--t-quick);
}
.device::after {
  /* Oversized icon watermark in the top-right corner — each tile inherits
     its icon via currentColor on the inline <i>, so this pseudo element
     instead adds a soft aqua bloom that makes the tile feel alive. */
  content: "";
  position: absolute;
  inset: auto -20px -20px auto;
  width: 120px;
  height: 120px;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.18), transparent 70%);
  pointer-events: none;
}
.device:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 10px 22px rgba(31, 94, 110, 0.30);
}
 
.device::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(134, 166, 222, 0.0) 0%, rgba(134, 166, 222, 0.12) 100%);
  opacity: 0;
  transition: opacity var(--t-smooth);
}
.device:hover::before { opacity: 1; }
.device i, .device svg {
  width: 28px; height: 28px;
  font-size: 28px;
  line-height: 1;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 2px 6px rgba(8, 31, 40, 0.35));
}
.device-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.72);
  position: relative;
  z-index: 1;
}
.device-val {
  font-family: "Inconsolata", monospace;
  font-size: 20px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
}
.os-row .device { padding: 14px 12px; }
.os-row .device i, .os-row .device svg { width: 22px; height: 22px; font-size: 22px; }
.os-row .device-val { font-size: 17px; }
.os-breakdown .os-title {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* ========================================================================
   Event categories (NEW)
   ======================================================================== */

.event-cat-list { display: flex; flex-direction: column; gap: 14px; }
.event-cat-list li {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  grid-column-gap: 12px;
  row-gap: 6px;
  align-items: center;
}
.event-cat-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-soft);
  color: var(--blue-deep);
}
.event-cat-icon.commerce  { background: linear-gradient(135deg, #DCEEEE, #B5DDE1); color: var(--blue-deep); }
.event-cat-icon.engage    { background: linear-gradient(135deg, #EEEFFA, #D8DCF0); color: #5A4EAA; }
.event-cat-icon.lead      { background: linear-gradient(135deg, #E8F4EC, #C6E4D3); color: var(--success); }
.event-cat-icon.pageview  { background: linear-gradient(135deg, var(--blue-soft), var(--blue-light)); color: #fff; }
.event-cat-icon i, .event-cat-icon svg { width: 18px; height: 18px; font-size: 18px; line-height: 1; }
.event-cat-name { font-weight: 500; color: var(--ink-primary); font-size: 13px; }
.event-cat-num {
  font-family: "Inconsolata", monospace;
  font-weight: 700;
  color: var(--ink-primary);
  font-size: 14px;
}
.event-cat-list li .bar-track { grid-column: 1 / -1; margin-left: 48px; }

/* ========================================================================
   E-commerce funnel (NEW)
   ======================================================================== */

/* Where Fans Are — two stacked lists (top countries · top cities)
   side by side, each row with a flag, name, mini bar, and count. */
.places-card { display: flex; flex-direction: column; }
.places-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: auto;
  margin-bottom: auto;
}
.places-col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  font-weight: 700;
  margin-bottom: 14px;
}
.places-col-head i { font-size: 14px; color: var(--blue-deep); }
.places-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.places-list li {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 10px;
  align-items: center;
}
.places-flag {
  width: 22px;
  height: 16px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(15, 22, 48, 0.10);
}
.places-name {
  font-size: 13px;
  color: var(--ink-primary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.places-val {
  font-family: "Inconsolata", monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-primary);
}
.places-bar {
  grid-column: 2 / 3;
  grid-row: 2;
  height: 6px;
  background: var(--bg-card-subtle);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 4px;
}
.places-bar > span {
  display: block;
  height: 100%;
  background: var(--grad-blue);
  border-radius: 999px;
}

/* City pill — overrides the default places row layout. The pill itself
   contains a thumbnail + city name; the bar/value still sit alongside. */
.places-cities li {
  grid-template-columns: minmax(180px, 1fr) auto;
  row-gap: 8px;
}
.places-cities .places-bar {
  grid-column: 1 / 3;
  grid-row: 2;
  margin-top: 0;
}
.city-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-primary);
  max-width: 100%;
  min-width: 0;
}
.city-pill img {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(15, 22, 48, 0.10);
}
.city-pill span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Most Visited card — treemap fills the body of the card */
.visited-card { display: flex; flex-direction: column; }
.visited-treemap {
  flex: 1;
  position: relative;
  height: 240px;
  margin-top: auto;
  margin-bottom: auto;
}
.visited-treemap canvas { width: 100% !important; height: 100% !important; }

/* Found You card — polar area chart on the left, color-keyed legend on
   the right. Same vertical centering treatment as YouTube so heights
   match the cards next to it. */
.found-card { display: flex; flex-direction: column; }
.found-body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin-top: auto;
  margin-bottom: auto;
}
.found-chart-wrap {
  position: relative;
  height: 220px;
}
.found-chart-wrap canvas { width: 100% !important; height: 100% !important; }
.found-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.found-legend li {
  display: grid;
  grid-template-columns: 10px 18px 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--ink-primary);
}
.fyl-sw {
  width: 10px; height: 10px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(15, 22, 48, 0.10);
}
.found-legend li i {
  font-size: 16px;
  color: var(--ink-secondary);
  line-height: 1;
}
.fyl-name { color: var(--ink-primary); font-weight: 500; }
.fyl-val {
  font-family: "Inconsolata", monospace;
  font-weight: 700;
  color: var(--ink-primary);
}

/* Path-to-purchase card — center the funnel vertically in the card
   so short content doesn't pool at the top with a big empty bottom. */
.path-card { display: flex; flex-direction: column; }
.path-card .funnel { margin-top: auto; margin-bottom: auto; }

/* YouTube card — center the metrics + sparkline pair vertically. Header
   stays at the top (natural flex order); auto margins push the group
   toward the center of whatever remaining space exists. */
.yt-card { display: flex; flex-direction: column; }
.yt-card > .social-metrics { margin-top: auto; }
.yt-card > .chart-wrap { margin-bottom: auto; }

.funnel { display: flex; flex-direction: column; gap: 32px; }
.funnel-step {
  display: flex;
  align-items: center;
  gap: 14px;
}
.funnel-icon {
  width: 32px;
  height: 32px;
  font-size: 18px;
  border-radius: 8px;
  background: var(--sand-soft);
  color: var(--blue-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.funnel-step-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-tertiary);
  width: 96px;
  flex-shrink: 0;
}
.funnel-bar {
  flex: 1;
  height: 32px;
  background: var(--sand-soft);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
.funnel-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--grad-blue);
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: #fff;
  font-family: "Inconsolata", monospace;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(50, 79, 123, 0.25);
}
/* ---- AI insights panel below the funnel ---- */
.ai-insights {
  margin-top: 20px;
  padding: 16px;
  background: linear-gradient(180deg, #FBF6E7 0%, #FDFAEF 100%);
  border: 1px solid rgba(184, 156, 90, 0.22);
  border-radius: var(--r-md);
}
/* Plain variant — sits directly on the card's native background
   (no cream wash, no border, no extra padding). */
.ai-insights.ai-insights-plain {
  background: transparent;
  border: none;
  padding: 0;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  border-radius: 0;
}
/* When a card contains an AI insights panel, make the card a flex column
   so the panel can grow to fill the card's full height (eliminates the
   empty background strip when the card is stretched by its grid row). */
.card:has(> .ai-insights) {
  display: flex;
  flex-direction: column;
}
.card:has(> .ai-insights) > .ai-insights {
  flex: 1 1 auto;
}
.ai-insights-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.ai-insights-badge {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--grad-blue);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(31, 94, 110, 0.24);
}
.ai-insights-title {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-primary);
}
.ai-insights-sub {
  font-size: 12px;
  color: var(--ink-tertiary);
  margin-top: 2px;
}
.ai-insights-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ai-insights-list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-primary);
}
.ai-insights-list li strong { color: var(--blue-deep); font-weight: 700; }
.ai-insights-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.ai-insights-icon.warn  { background: rgba(200, 120, 60, 0.18); color: #8A4E1A; }
.ai-insights-icon.info  { background: rgba(61, 143, 160, 0.15); color: var(--blue-deep); }
.ai-insights-icon.good  { background: rgba(26, 154, 88, 0.18); color: var(--success); }
.ai-insights-icon.focus { background: var(--grad-blue); color: #FFFFFF; box-shadow: 0 2px 6px rgba(31, 94, 110, 0.28); }
.ai-insights-tip {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-secondary);
  font-style: italic;
}

.funnel-drop {
  font-size: 11px;
  font-family: "Inconsolata", monospace;
  color: var(--ink-tertiary);
  width: 64px;
  flex-shrink: 0;
  text-align: right;
}

/* ========================================================================
   Site performance / gauges
   ======================================================================== */

.gauge-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.gauge {
  padding: 16px;
  background: var(--bg-card-subtle);
  border-radius: var(--r-md);
  position: relative;
  overflow: hidden;
}
.gauge::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 80px; height: 80px;
  background: radial-gradient(circle at 100% 0%, rgba(134, 166, 222, 0.25), transparent 70%);
  pointer-events: none;
}
.gauge-val {
  font-family: "Zen Dots", monospace;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--blue-deep);
}
.gauge-unit {
  font-family: "Electrolize", sans-serif;
  font-size: 14px;
  color: var(--ink-secondary);
  margin-left: 2px;
  font-weight: 500;
  -webkit-text-fill-color: initial;
}
.gauge-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-tertiary);
  margin-top: 8px;
}

.progress-block { padding-top: 4px; }
.progress-head {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-secondary);
  margin-bottom: 8px;
}
.progress-track {
  height: 6px;
  background: var(--bg-card-subtle);
  border-radius: 3px;
  overflow: hidden;
}
.progress-track span {
  display: block;
  height: 100%;
  background: var(--grad-blue);
  border-radius: 3px;
}

/* ========================================================================
   Summary of Activity (NEW)
   ======================================================================== */

.summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.summary-item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-card-subtle);
  border-radius: var(--r-sm);
}
.summary-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.summary-k {
  font-size: 12px;
  color: var(--ink-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.summary-v {
  font-family: "Inconsolata", monospace;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink-primary);
}
.summary-v .v-unit { font-size: 12px; color: var(--ink-tertiary); margin-left: 4px; font-weight: 500; }

/* Color-coded row variants — each tint stays in the aquamarine family
   with one warm accent for money + coral for the bounce-rate outlier. */
.summary-aqua   { background: linear-gradient(90deg, #E6F4F5 0%, #F4FAFA 100%); }
.summary-aqua   .summary-icon { background: rgba(127, 196, 207, 0.22); color: #1F5E6E; }

.summary-teal   { background: linear-gradient(90deg, #D8EBEC 0%, #EDF5F5 100%); }
.summary-teal   .summary-icon { background: rgba(31, 94, 110, 0.18); color: #1F5E6E; }

.summary-gold   { background: linear-gradient(90deg, #F7EED6 0%, #FBF7EA 100%); }
.summary-gold   .summary-icon { background: rgba(232, 183, 74, 0.25); color: #9C7A1E; }

.summary-sage   { background: linear-gradient(90deg, #DEECE2 0%, #EFF6F1 100%); }
.summary-sage   .summary-icon { background: rgba(125, 179, 158, 0.25); color: #2F6E54; }

.summary-violet { background: linear-gradient(90deg, #E4E8F3 0%, #F1F3F9 100%); }
.summary-violet .summary-icon { background: rgba(154, 168, 204, 0.28); color: #4E5B86; }

.summary-coral  { background: linear-gradient(90deg, #F8E0E0 0%, #FBEFEF 100%); }
.summary-coral  .summary-icon { background: rgba(232, 90, 90, 0.18); color: #B14545; }

/* ========================================================================
   Recent Events table (NEW)
   ======================================================================== */

.pill {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-family: "Inconsolata", monospace;
  font-weight: 700;
  border-radius: var(--r-full);
  background: var(--bg-card-subtle);
  color: var(--ink-secondary);
  letter-spacing: 0.02em;
  text-transform: lowercase;
}
.pill.pageview   { background: var(--blue-soft); color: var(--blue-deep); }
.pill.commerce   { background: #E5EEFD; color: #1F3A6B; }
.pill.engagement { background: #EEEFFA; color: #4A3F8C; }
.pill.lead       { background: #E8F4EC; color: #0E6E3B; }

/* ========================================================================
   Footer
   ======================================================================== */

.footer {
  text-align: center;
  font-family: "Inconsolata", monospace;
  font-size: 11px;
  color: var(--ink-tertiary);
  padding: 32px 0 16px;
  letter-spacing: 0.02em;
}

/* ========================================================================
   Card hint — small ⓘ icon with an on-hover tooltip
   ======================================================================== */

.card-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-left: 8px;
  width: 16px;
  height: 16px;
  color: var(--ink-tertiary);
  cursor: help;
  -webkit-text-stroke: 0;              /* icon shouldn't inherit any text-stroke from ancestors */
  transition: color var(--t-quick);
  position: relative;                   /* anchor for the tooltip */
  flex-shrink: 0;
}
.card-hint:hover { color: var(--blue-primary); }
.card-hint .hint-icon {
  width: 14px;
  height: 14px;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* The actual tooltip bubble, rendered via ::after so no JS is required.
   Positioned below the icon; wrapped to a fixed width for readability. */
.card-hint::after {
  content: attr(data-hint);
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, -4px);
  min-width: 200px;
  max-width: 280px;
  width: max-content;
  padding: 10px 12px;
  background: var(--ink-primary);
  color: #FFFFFF;
  font-family: "Electrolize", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  border-radius: var(--r-sm);
  box-shadow: 0 10px 28px rgba(15, 22, 48, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease-out, transform 150ms ease-out;
  z-index: 200;
  white-space: normal;
  -webkit-text-stroke: 0;
  -webkit-text-fill-color: #FFFFFF;
}
/* Little arrow pointing up to the icon */
.card-hint::before {
  content: "";
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: var(--ink-primary);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease-out;
  z-index: 201;
}
.card-hint:hover::after,
.card-hint:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
.card-hint:hover::before,
.card-hint:focus-visible::before {
  opacity: 1;
}

/* When the card-hint lives inside an overlay on the dark map, recolor the
   icon and the tooltip so they stay readable against the dark glass. */
.card-hint.on-dark { color: rgba(184, 199, 232, 0.85); }
.card-hint.on-dark:hover { color: #FFFFFF; }
.card-hint.on-dark::after {
  background: #FFFFFF;
  color: var(--ink-primary);
  -webkit-text-fill-color: var(--ink-primary);
}
.card-hint.on-dark::before {
  border-bottom-color: #FFFFFF;
}

/* Same treatment for hints inside the inverted "TODAY" hero scorecard. */
.card-hint.on-hero { color: rgba(184, 199, 232, 0.85); }
.card-hint.on-hero:hover { color: #FFFFFF; }
.card-hint.on-hero::after {
  background: #FFFFFF;
  color: var(--ink-primary);
  -webkit-text-fill-color: var(--ink-primary);
}
.card-hint.on-hero::before {
  border-bottom-color: #FFFFFF;
}

/* ========================================================================
   Number count-in
   ======================================================================== */

@keyframes countIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.num { animation: countIn 480ms ease-out both; }

/* ========================================================================
   Responsive
   ======================================================================== */

@media (max-width: 1280px) {
  .page { padding: 24px; }
  .geo-inner { height: 560px; }
}

@media (max-width: 1024px) {
  .grid-12 { grid-template-columns: repeat(8, 1fr); }
  .col-3 { grid-column: span 4; }
  .col-4 { grid-column: span 8; }
  .col-6 { grid-column: span 8; }
  .col-8 { grid-column: span 8; }
  .col-9 { grid-column: span 8; }
  .col-12 { grid-column: span 8; }
  .geo-inner { height: 480px; }
  .overlay-left-mid, .overlay-right-mid { width: 180px; }
  .page-title { font-size: 32px; }
  .topnav { overflow-x: auto; }
  .scorecard-stack {
    grid-column: span 8;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 640px) {
  .page { padding: 16px; }
  .topbar-inner { padding: 0 16px; gap: 12px; }
  .topnav { display: none; }
  .grid-12 { grid-template-columns: 1fr; gap: 16px; }
  .col-3, .col-4, .col-6, .col-8, .col-9, .col-12 { grid-column: 1 / -1; }
  .scorecard-stack { grid-template-columns: 1fr; grid-column: 1 / -1; }
  .geo-card { display: none; }
  .page-header { flex-direction: column; align-items: flex-start; }
  .page-title { font-size: 28px; }
  .scorecard-value { font-size: 28px; }
  .split-metrics { grid-template-columns: 1fr; }
}

/* ========================================================================
   AI Chat Panel
   Drops down below the sticky topbar when the AI nav link is clicked.
   Two-column layout: left = conversation list, right = active thread.
   When open, the dashboard below shifts down (no overlay — uses max-height
   so the grid reflows).
   ======================================================================== */

.ai-chat-panel {
  /* Full-page AI chat view — hidden until body.view-ai is set. Fills the
     viewport below the sticky topbar. */
  display: none;
  background:
    radial-gradient(800px 300px at 10% 0%, rgba(127, 196, 207, 0.14), transparent 60%),
    linear-gradient(180deg, #EEF7F6 0%, #FFFFFF 100%);
  border-bottom: 1px solid var(--border-soft);
}
body.view-ai .ai-chat-panel { display: block; }
body.view-ai > .app-shell main.page { display: none; }

.ai-chat-inner {
  display: grid;
  grid-template-columns: 300px 1fr;
  /* Sit below the 68px sticky topbar */
  height: calc(100vh - 68px);
  max-width: none;
}

/* Left column — conversation list */
.ai-chat-list {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.55);
}
.ai-chat-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--border-soft);
}
.pill-btn-compact {
  padding: 6px 10px !important;
  font-size: 12px !important;
  gap: 4px !important;
}
.ai-convos {
  list-style: none;
  margin: 0;
  padding: 8px;
  overflow-y: auto;
  flex: 1;
}
.ai-convos li {
  padding: 12px 14px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t-quick);
}
.ai-convos li:hover { background: var(--blue-soft); }
.ai-convos li.is-active {
  background: var(--blue-soft);
  box-shadow: inset 0 0 0 1px rgba(61, 143, 160, 0.28);
}
.ai-convo-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-convo-sub {
  font-size: 12px;
  color: var(--ink-tertiary);
  margin-top: 2px;
}

/* Right column — active thread */
.ai-chat-thread {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ai-chat-thread-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-soft);
  gap: 16px;
}
.ai-chat-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-primary);
}
.ai-chat-sub {
  font-size: 12px;
  color: var(--ink-tertiary);
  margin-top: 4px;
}
.ai-close {
  width: 32px; height: 32px;
  background: transparent;
  color: var(--ink-secondary);
}
.ai-close:hover { background: var(--blue-soft); color: var(--blue-deep); }

.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ai-msg { display: flex; gap: 10px; }
.ai-msg-user { justify-content: flex-end; }
.ai-msg-user .ai-msg-bubble {
  background: var(--grad-blue);
  color: #FFFFFF;
  border-radius: 18px 18px 4px 18px;
  padding: 10px 14px;
  max-width: 72%;
  font-size: 14px;
}
.ai-msg-bot .ai-msg-avatar {
  width: 28px; height: 28px;
  border-radius: 999px;
  background: var(--grad-blue-soft);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}
.ai-msg-bot .ai-msg-bubble {
  background: var(--blue-soft);
  color: var(--ink-primary);
  border-radius: 18px 18px 18px 4px;
  padding: 10px 14px;
  max-width: 72%;
  font-size: 14px;
  line-height: 1.45;
}

.ai-chat-composer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--border-soft);
  background: #FFFFFF;
}
.ai-chat-composer input {
  flex: 1;
  height: 44px;
  padding: 0 16px;
  border-radius: var(--r-full);
  border: 1px solid var(--border-soft);
  background: var(--blue-tint);
  color: var(--ink-primary);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color var(--t-quick), box-shadow var(--t-quick);
}
.ai-chat-composer input:focus {
  border-color: var(--blue-primary);
  box-shadow: 0 0 0 3px rgba(61, 143, 160, 0.15);
}
.ai-send-btn {
  width: 40px; height: 40px;
  border-radius: 999px;
  background: var(--grad-blue);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  border: none;
  transition: transform var(--t-quick), box-shadow var(--t-quick);
}
.ai-send-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(31, 94, 110, 0.28);
}


/* ========================================================================
   Theme Studio — right-side slide-out with color controls
   ======================================================================== */

.theme-studio {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 360px;
  background: #FFFFFF;
  border-left: 1px solid var(--border-soft);
  box-shadow: -20px 0 60px rgba(15, 22, 48, 0.15);
  z-index: 200;
  transform: translateX(100%);
  transition: transform 340ms cubic-bezier(0.2, 0, 0, 1);
  display: flex;
  flex-direction: column;
}
.theme-studio.is-open { transform: translateX(0); }

.theme-studio-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--border-soft);
}
.theme-studio-title {
  font-family: "Oxanium", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--ink-primary);
}
.theme-studio-sub {
  font-size: 12px;
  color: var(--ink-tertiary);
  margin-top: 4px;
}
.theme-studio-close {
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--ink-secondary);
}
.theme-studio-close:hover { background: var(--blue-soft); color: var(--blue-deep); }

.theme-studio-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.theme-group-title {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  font-weight: 700;
  margin-bottom: 10px;
}
.theme-row {
  display: grid;
  grid-template-columns: 72px 44px 1fr;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  transition: background var(--t-quick);
}
.theme-row:hover { background: var(--blue-tint); }
.theme-row label {
  font-size: 13px;
  color: var(--ink-primary);
  font-weight: 500;
}
.theme-row input[type="color"] {
  width: 44px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  background: #FFFFFF;
  cursor: pointer;
}
.theme-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.theme-row input[type="color"]::-webkit-color-swatch { border: none; border-radius: 4px; }
.theme-val {
  font-family: "Inconsolata", monospace;
  font-size: 12px;
  color: var(--ink-secondary);
  letter-spacing: 0.02em;
}

.theme-presets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.theme-preset {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #FFFFFF;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--ink-primary);
  cursor: pointer;
  transition: background var(--t-quick), border-color var(--t-quick), transform var(--t-quick);
}
.theme-preset:hover {
  background: var(--blue-tint);
  border-color: var(--blue-light);
  transform: translateY(-1px);
}
.theme-preset > span {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(15, 22, 48, 0.12);
  flex-shrink: 0;
}

.theme-studio-foot {
  display: flex;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
  margin-top: auto;
}
.theme-studio-foot .pill-btn { flex: 1; justify-content: center; height: 36px; }

/* ========================================================================
   YouTube card enhancements (Row 4) + YouTube Deep Dive section
   ======================================================================== */

/* --- LIVE pill on the YouTube card head ----------------------------- */
.yt-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #FEECEC;
  color: #C0392B;
  font-family: "Inconsolata", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
}
.yt-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E53935;
  box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.22);
  animation: henshin-pulse 1.8s ease-out infinite;
}

/* Second metrics row inside the YouTube card — tighter spacing + divider */
.yt-card > .yt-metrics-2 {
  margin-top: 0;
  padding-top: 12px;
  border-top: 1px dashed var(--border-soft);
}
.yt-card > .yt-metrics-2 .social-v { font-size: 20px; }

/* Shorts vs Long-form mini bar at the bottom of the YT card */
.yt-format-split {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.yt-format-label {
  display: flex;
  justify-content: space-between;
  font-family: "Inconsolata", monospace;
  font-size: 11px;
  color: var(--ink-tertiary);
  letter-spacing: 0.04em;
}
.yt-format-label span { display: inline-flex; align-items: center; gap: 6px; }
.yt-format-sw {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 3px;
}
.yt-format-sw-shorts { background: var(--blue-deep); }
.yt-format-sw-long   { background: var(--blue-light); }
.yt-format-bar {
  display: flex;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--bg-card-subtle);
}
.yt-format-shorts { background: var(--blue-deep); }
.yt-format-long   { background: var(--blue-light); }

/* --- YouTube Deep Dive section header ------------------------------- */
.yt-deep-dive {
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px dashed var(--border-soft);
}
.yt-deep-dive-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.yt-deep-dive-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.yt-deep-dive-badge {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #FF0033 0%, #C90028 100%);
  color: #FFFFFF;
  font-size: 24px;
  box-shadow: 0 6px 16px rgba(201, 0, 40, 0.22);
}
.yt-deep-dive-title {
  font-family: "Oxanium", sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--ink-primary);
  margin: 0;
}
.yt-deep-dive-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.yt-channel-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  font-size: 12px;
  color: var(--ink-primary);
  font-weight: 600;
}
.yt-channel-pill img {
  width: 22px; height: 22px; border-radius: 50%; object-fit: cover;
}
.yt-channel-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--bg-card-subtle);
  font-family: "Inconsolata", monospace;
  font-size: 12px;
  color: var(--ink-secondary);
}
.yt-channel-stat .ti { font-size: 14px; color: var(--blue-primary); }

/* --- Top Videos table thumbnails ------------------------------------ */
.yt-videos-table .product-name { font-size: 13px; line-height: 1.35; }
.yt-video-thumb {
  position: relative;
  display: block;
  width: 84px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-card-subtle);
  box-shadow: inset 0 0 0 1px var(--border-soft);
}
.yt-video-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.yt-video-thumb-fallback {
  background: linear-gradient(135deg, #1F5E6E 0%, #3D8FA0 100%);
}
.yt-video-dur {
  position: absolute;
  right: 4px; bottom: 4px;
  padding: 1px 5px;
  font-family: "Inconsolata", monospace;
  font-size: 10px;
  font-weight: 700;
  color: #FFFFFF;
  background: rgba(0, 0, 0, 0.78);
  border-radius: 3px;
  line-height: 1.2;
}
.yt-video-shorts-tag {
  position: absolute;
  left: 4px; top: 4px;
  padding: 1px 5px;
  font-family: "Inconsolata", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #FFFFFF;
  background: #FF0033;
  border-radius: 3px;
}

/* --- Subscriber gained/lost summary --------------------------------- */
.yt-sub-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.yt-sub-stat {
  padding: 10px;
  border-radius: var(--r-sm);
  background: var(--bg-card-subtle);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.yt-sub-stat-v {
  font-family: "Zen Dots", monospace;
  font-size: 18px;
  color: var(--ink-primary);
}
.yt-sub-stat-k {
  font-family: "Inconsolata", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-tertiary);
}
.yt-sub-gained { background: rgba(61, 143, 160, 0.12); }
.yt-sub-gained .yt-sub-stat-v { color: var(--blue-deep); }
.yt-sub-lost   { background: rgba(127, 196, 207, 0.18); }
.yt-sub-lost   .yt-sub-stat-v { color: #7A4E4E; }
.yt-sub-net    { background: var(--blue-deep); }
.yt-sub-net .yt-sub-stat-v, .yt-sub-net .yt-sub-stat-k { color: #FFFFFF; }
.yt-sub-net .yt-sub-stat-k { color: rgba(255,255,255,0.72); }

/* --- Retention notes list ------------------------------------------- */
.yt-retention-notes {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-secondary);
}
.yt-retention-notes li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-card-subtle);
  border-radius: var(--r-sm);
}
.yt-retention-notes strong { color: var(--ink-primary); font-weight: 600; }
.yt-ret-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.yt-ret-dot.hook { background: var(--blue-primary); }
.yt-ret-dot.drop { background: #E65A5A; }
.yt-ret-dot.peak { background: var(--blue-deep); }

/* --- Traffic sources layout ----------------------------------------- */
.yt-sources {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 20px;
  align-items: center;
}
.yt-sources-chart { position: relative; }
.yt-sources-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.yt-sources-legend li {
  display: grid;
  grid-template-columns: 14px 18px 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-secondary);
}
.yt-sources-legend .legend-sw {
  width: 10px; height: 10px; border-radius: 3px;
}
.yt-sources-legend .ti { color: var(--blue-primary); font-size: 14px; }
.yt-sources-legend .fyl-val {
  font-family: "Inconsolata", monospace;
  font-weight: 700;
  color: var(--ink-primary);
}

/* --- Demographics (age × gender stacked bars) ----------------------- *
 * Card is sized by its taller siblings (YT Geography / Playback), so
 * the 6 age rows sat tight at the top with ~400px of dead space below.
 * Flex the card as a column and let .yt-demo grow to fill available
 * height with space-between, so rows breathe evenly and the legend
 * pins to the natural bottom. */
.yt-demo-card {
  display: flex;
  flex-direction: column;
}
.yt-demo-card .yt-demo {
  flex: 1;
  justify-content: space-between;
  gap: 0;                    /* space-between owns spacing */
  padding: 8px 0 12px;
}

.yt-demo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.yt-demo-row {
  display: grid;
  grid-template-columns: 48px 1fr 42px;
  align-items: center;
  gap: 10px;
}
.yt-demo-age {
  font-family: "Inconsolata", monospace;
  font-size: 12px;
  color: var(--ink-secondary);
  text-align: right;
}
.yt-demo-bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--bg-card-subtle);
}
.yt-demo-m { background: var(--blue-deep); }
.yt-demo-f { background: var(--blue-light); }
.yt-demo-pct {
  font-family: "Inconsolata", monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-primary);
}
.yt-demo-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 14px;
  font-family: "Inconsolata", monospace;
  font-size: 12px;
  color: var(--ink-secondary);
}
.yt-demo-legend span { display: inline-flex; align-items: center; gap: 6px; }
.yt-demo-sw {
  display: inline-block;
  width: 10px; height: 10px; border-radius: 3px;
}
.yt-demo-m-sw { background: var(--blue-deep); }
.yt-demo-f-sw { background: var(--blue-light); }

/* ---- YouTube channel banner — SUBSCRIBER CHANGE card -------------- *
 * Hero image pulled flush with the card edges (negative margin beats
 * the card's 24px padding), with rounded corners and a subtle hairline
 * so it reads as a polished inset, not a raw asset. object-fit:cover
 * lets the wide YouTube banner crop nicely at any card width. */
.yt-channel-banner {
  display: block;
  margin: -24px -24px 16px;
  border-radius: var(--r-md) var(--r-md) 0 0;
  overflow: hidden;
  aspect-ratio: 6 / 1;
  background: var(--bg-card-subtle);
  border-bottom: 1px solid var(--border-soft);
  position: relative;
  text-decoration: none;
  transition: filter var(--t-quick);
}
.yt-channel-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.yt-channel-banner:hover { filter: brightness(1.08); }

/* --- Cards & End-screens card vertical rhythm ----------------------- *
 * The card sits in a row that's sized by its tallest sibling (AD
 * REVENUE / COMMENTS), which left this card with ~160px of dead space
 * at the bottom. Make the card a flex column, let the bar-list grow to
 * fill the available height, and space-between the 4 rows so the CTAs
 * breathe vertically. The .yt-card-tot footer sits at the natural
 * bottom because it's the last child. */
.yt-cards-card {
  display: flex;
  flex-direction: column;
}
.yt-cards-card .bar-list {
  flex: 1;
  justify-content: space-between;
  gap: 0;                    /* space-between owns spacing now */
  padding: 8px 0 4px;        /* breathing room against head + footer */
}

/* --- Cards & End-screens totals footer ------------------------------ */
.yt-card-tot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 22px;
  padding-top: 20px;
  padding-bottom: 4px;
  border-top: 1px dashed var(--border-soft);
}
.yt-card-tot > div { display: flex; flex-direction: column; gap: 8px; }
.yt-card-tot-v {
  font-family: "Zen Dots", monospace;
  font-size: 15px;
  color: var(--ink-primary);
}
.yt-card-tot-k {
  font-family: "Inconsolata", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-tertiary);
}

/* --- YPP badge + revenue hero --------------------------------------- */
.yt-ypp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #F9E4A5 0%, #E6C360 100%);
  color: #5A4210;
  font-family: "Inconsolata", monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.yt-rev-hero {
  font-family: "Zen Dots", monospace;
  font-size: 34px;
  color: var(--blue-deep);
  margin: 6px 0 10px;
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.yt-rev-hero .scorecard-currency { font-size: 22px; }
.yt-rev-metrics { margin-top: 4px; }
.yt-rev-metrics .social-v { font-size: 18px; }

/* --- YouTube comments feed ------------------------------------------ */
.yt-comments {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 440px;
  overflow-y: auto;
}
.yt-comment {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  padding: 10px;
  background: var(--bg-card-subtle);
  border-radius: var(--r-sm);
}
.yt-comment-av {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-blue);
  color: #FFFFFF;
  font-family: "Zen Dots", monospace;
  font-size: 13px;
  flex-shrink: 0;
}
.yt-comment-body { min-width: 0; }
.yt-comment-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.yt-comment-user {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-primary);
}
.yt-comment-when {
  font-family: "Inconsolata", monospace;
  font-size: 11px;
  color: var(--ink-tertiary);
}
.yt-comment-text {
  font-size: 13px;
  color: var(--ink-secondary);
  line-height: 1.4;
  margin: 4px 0 6px;
  word-break: break-word;
}
.yt-comment-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: "Inconsolata", monospace;
  font-size: 10px;
}
.yt-comment-sent {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.yt-comment-sent .ti { font-size: 13px; }
.yt-comment-sent-pos { background: rgba(61, 143, 160, 0.15); color: var(--blue-deep); }
.yt-comment-sent-neu { background: rgba(140, 151, 175, 0.18); color: var(--ink-secondary); }
.yt-comment-sent-neg { background: rgba(230, 90, 90, 0.15);   color: #B24A4A; }
.yt-comment-vid {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-tertiary);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.yt-comment-vid .ti { font-size: 12px; }

/* --- Sentiment strip on the Recent Comments card -------------------- */
.yt-sent-strip {
  margin: 4px 0 12px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--bg-card-subtle);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.yt-sent-strip-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.yt-sent-strip-score {
  font-family: "Zen Dots", monospace;
  font-size: 20px;
  color: var(--blue-deep);
}
.yt-sent-strip-score .v-unit {
  font-family: "Electrolize", sans-serif;
  font-size: 11px;
  color: var(--ink-secondary);
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-left: 4px;
}
.yt-sent-strip-meta {
  font-family: "Inconsolata", monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}
.yt-sent-strip-bar {
  display: flex;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(15, 22, 48, 0.05);
}
.yt-sent-seg { display: block; height: 100%; }
.yt-sent-seg.pos { background: var(--blue-primary); }
.yt-sent-seg.neu { background: var(--ink-tertiary); }
.yt-sent-seg.neg { background: #E65A5A; }

/* --- Channel Sentiment card ----------------------------------------- */
.yt-sent-ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--grad-blue-soft);
  color: #FFFFFF;
  font-family: "Inconsolata", monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.yt-sent-ai-badge .ti { font-size: 13px; }

.yt-sent-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 24px;
  align-items: flex-start;
}

/* Left column — score + breakdown */
.yt-sent-score {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.yt-sent-score-hero {
  font-family: "Zen Dots", monospace;
  font-size: 58px;
  line-height: 1;
  color: var(--blue-deep);
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.yt-sent-score-unit {
  font-family: "Electrolize", sans-serif;
  font-size: 28px;
  font-weight: 500;
  color: var(--ink-secondary);
  -webkit-text-fill-color: var(--ink-secondary);
}
.yt-sent-score-label {
  font-family: "Inconsolata", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-tertiary);
}
.yt-sent-score-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--blue-deep);
  font-family: "Inconsolata", monospace;
  font-size: 12px;
  font-weight: 700;
}
.yt-sent-score-delta .delta-context {
  font-weight: 500;
  color: var(--ink-tertiary);
}

.yt-sent-breakdown {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.yt-sent-breakdown li {
  display: grid;
  grid-template-columns: 14px 70px 42px;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  font-size: 12px;
  color: var(--ink-secondary);
}
.yt-sent-breakdown .bar-track { grid-column: 1 / -1; grid-row: 2; margin-left: 24px; margin-top: 2px; }
.yt-sent-breakdown .yt-sent-count {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-left: 24px;
  font-family: "Inconsolata", monospace;
  font-size: 10px;
  color: var(--ink-tertiary);
}
.yt-sent-dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.yt-sent-dot.pos { background: var(--blue-primary); }
.yt-sent-dot.neu { background: var(--ink-tertiary); }
.yt-sent-dot.neg { background: #E65A5A; }
.yt-sent-name { font-weight: 600; color: var(--ink-primary); }
.yt-sent-val {
  font-family: "Inconsolata", monospace;
  font-weight: 700;
  color: var(--ink-primary);
  text-align: right;
}

/* Right column — charts + per-video list */
.yt-sent-charts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.yt-sent-sub {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.yt-sent-sub-2 { margin-top: 6px; }
.yt-sent-sub-title {
  font-family: "Electrolize", sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-primary);
  font-weight: 600;
}
.yt-sent-sub-meta {
  font-family: "Inconsolata", monospace;
  font-size: 10px;
  color: var(--ink-tertiary);
}

.yt-sent-video-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.yt-sent-video {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(140px, 1.6fr) 78px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}
.yt-sent-video-title {
  color: var(--ink-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.yt-sent-video-bar {
  display: flex;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(15, 22, 48, 0.05);
}
.yt-sent-video-val {
  font-family: "Inconsolata", monospace;
  font-weight: 700;
  color: var(--ink-primary);
  text-align: right;
  font-size: 12px;
}
.yt-sent-video-count {
  font-weight: 500;
  color: var(--ink-tertiary);
  font-size: 11px;
}

/* --- Top Themes card ------------------------------------------------ */
.yt-themes-card { display: flex; flex-direction: column; }
.yt-themes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.yt-theme {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  padding: 10px;
  background: var(--bg-card-subtle);
  border-radius: var(--r-sm);
}
.yt-theme-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.yt-theme-sent-pos { background: rgba(61, 143, 160, 0.14); color: var(--blue-deep); }
.yt-theme-sent-neu { background: rgba(140, 151, 175, 0.18); color: var(--ink-secondary); }
.yt-theme-sent-neg { background: rgba(230, 90, 90, 0.14); color: #B24A4A; }
.yt-theme-body { min-width: 0; }
.yt-theme-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 3px;
}
.yt-theme-cat {
  font-family: "Inconsolata", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blue-deep);
  font-weight: 700;
}
.yt-theme-count {
  font-family: "Inconsolata", monospace;
  font-size: 10px;
  color: var(--ink-tertiary);
  white-space: nowrap;
}
.yt-theme-label {
  font-size: 13px;
  color: var(--ink-primary);
  line-height: 1.35;
}

.yt-themes-cta {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--grad-blue);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.yt-themes-cta .ti { font-size: 16px; }
.yt-themes-cta strong { font-weight: 700; }

/* --- Responsive tweaks for deep-dive -------------------------------- */
@media (max-width: 900px) {
  .yt-sources { grid-template-columns: 1fr; }
  .yt-sub-summary { grid-template-columns: repeat(3, 1fr); }
  .yt-card-tot { grid-template-columns: 1fr 1fr; }
  .yt-deep-dive-title { font-size: 20px; }
  .yt-sent-grid { grid-template-columns: 1fr; }
  .yt-sent-video { grid-template-columns: minmax(0, 1fr) minmax(120px, 1.2fr) 70px; }
}

/* ========================================================================
   Primary tab bar — 4-pillar navigation (Overview / YouTube / Web / Shop)
   ======================================================================== */
.tab-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0 0 20px;
  padding: 6px;
  border-radius: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  box-shadow: 0 1px 2px rgba(15, 22, 48, 0.04);
}

.tab-bar-btn {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  padding: 12px 16px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--ink-secondary);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.tab-bar-btn:hover {
  background: var(--bg-card-subtle);
  color: var(--ink-primary);
}

.tab-bar-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--bg-card-subtle);
  font-size: 20px;
  color: var(--ink-secondary);
  transition: background 160ms ease, color 160ms ease;
}

.tab-bar-name {
  grid-column: 2;
  grid-row: 1;
  font-family: "Oxanium", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-primary);
  line-height: 1.1;
}

.tab-bar-sub {
  grid-column: 2;
  grid-row: 2;
  font-family: "Inconsolata", monospace;
  font-size: 11px;
  color: var(--ink-tertiary);
  line-height: 1.2;
}

.tab-bar-badge {
  position: absolute;
  top: 8px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #FEECEC;
  color: #C0392B;
  font-family: "Inconsolata", monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.tab-bar-badge .yt-live-dot {
  width: 6px; height: 6px;
  box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.22);
}

.tab-bar-btn.is-active {
  background: var(--bg-card);
  box-shadow: 0 2px 10px rgba(15, 22, 48, 0.08), inset 0 0 0 1px var(--blue-primary);
  color: var(--ink-primary);
}
.tab-bar-btn.is-active .tab-bar-icon {
  background: var(--grad-blue);
  color: #FFFFFF;
  box-shadow: 0 4px 10px rgba(31, 94, 110, 0.28);
}
.tab-bar-btn.is-active .tab-bar-name {
  color: var(--blue-deep);
}

/* Visibility rules — hide sections whose data-tab doesn't match the
   current body.tab-X class. Default (no body class) shows everything. */
body.tab-overview [data-tab]:not([data-tab~="overview"]) { display: none; }
body.tab-youtube  [data-tab]:not([data-tab~="youtube"])  { display: none; }
body.tab-web      [data-tab]:not([data-tab~="web"])      { display: none; }
body.tab-shop     [data-tab]:not([data-tab~="shop"])     { display: none; }

/* When a tab is active and its section has no content, keep at least
   the page header visible — it's always rendered. */

/* ---- Responsive: stack tabs on narrower screens -------------------- */
@media (max-width: 960px) {
  .tab-bar { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .tab-bar { grid-template-columns: 1fr; }
  .tab-bar-btn { padding: 10px 12px; }
}

/* ========================================================================
   Day / Night theme toggle (side menu) + dark palette override
   ======================================================================== */

/* --- Segmented Day/Night toggle in the side menu ------------------- */
.theme-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-soft);
}
.theme-mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-secondary);
  cursor: pointer;
  font-family: "Oxanium", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.theme-mode-btn:hover { color: var(--ink-primary); }
.theme-mode-icon { font-size: 16px; }
.theme-mode-btn.is-active {
  background: var(--bg-card);
  color: var(--ink-primary);
  box-shadow: 0 2px 6px rgba(15, 22, 48, 0.08), inset 0 0 0 1px var(--blue-primary);
}
.theme-mode-btn.is-active .theme-mode-icon { color: var(--blue-primary); }

/* ========================================================================
   NIGHT THEME — dark teal palette. Activated via body.theme-night.
   Overrides the core CSS custom properties so everything that uses
   them flips automatically. A few hardcoded surfaces get patched
   below (side menu, topbar, scorecards, tab-bar accent).
   ======================================================================== */
body.theme-night {
  /* ------- Surfaces ------- */
  --bg-page:          #04131A;
  --bg-card:          #0F2A38;          /* dark teal card (matches user reference) */
  --bg-card-subtle:   #0A2230;
  --bg-hero:          #020B11;

  --page-gradient:
    linear-gradient(180deg, #04131A 0%, #081E28 40%, #0C2A36 100%);

  /* ------- Borders ------- */
  --border-soft:      rgba(127, 196, 207, 0.14);
  --border-strong:    rgba(127, 196, 207, 0.26);

  /* ------- Ink ------- */
  --ink-primary:      #E8F0F2;
  --ink-secondary:    #9FB6BE;
  --ink-tertiary:     #5E7680;
  --ink-on-hero:      #E8F0F2;

  /* ------- Accent teals — shifted up a step so they read on dark ------- */
  --blue-primary:     #7FC4CF;
  --blue-deep:        #5DA9B7;
  --blue-light:       #B5DDE1;
  --blue-soft:        rgba(127, 196, 207, 0.14);
  --blue-tint:        rgba(127, 196, 207, 0.08);
  --blue-glow:        rgba(127, 196, 207, 0.45);

  /* ------- Gradients rebuilt against new accent stops ------- */
  --grad-blue:        linear-gradient(135deg, #7FC4CF 0%, #3D8FA0 100%);
  --grad-blue-soft:   linear-gradient(135deg, #B5DDE1 0%, #7FC4CF 100%);

  /* --grad-primary is the signature surface for every card in night
     mode — a dark teal base with a subtle corner highlight and a
     deeper counter-tone at the far corner. One gradient, one vibe,
     across the entire app in night mode. */
  --grad-primary:
    radial-gradient(520px 400px at 85% 5%, rgba(127, 196, 207, 0.12), transparent 60%),
    radial-gradient(420px 420px at 5% 105%, rgba(31, 94, 110, 0.22), transparent 60%),
    linear-gradient(135deg, #0A2230 0%, #0F2A38 55%, #13384A 100%);

  /* Legacy aliases keep any existing references working — they all
     point at the same primary gradient now. */
  --grad-hero:        var(--grad-primary);
  --grad-gray-hero:   var(--grad-primary);
  --grad-card-top:
    linear-gradient(180deg, rgba(127, 196, 207, 0.06) 0%, rgba(127, 196, 207, 0) 40%);

  color-scheme: dark;
  color: var(--ink-primary);
}

/* ---- Patches for hardcoded-light surfaces -------------------------- */

body.theme-night .topbar {
  /* Strongly accented horizontal gradient — deep navy-teal on the edges
     ramping to a brighter aqua-teal through the middle. Gives the bar
     a defined presence instead of a flat wash. */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(90deg,
      #031821 0%,
      #0A2F3C 22%,
      #165467 50%,
      #0A2F3C 78%,
      #031821 100%);
  border-bottom: 2px solid #5DD5D5;
  box-shadow:
    0 1px 0 rgba(93, 213, 213, 0.35),
    0 6px 24px rgba(93, 213, 213, 0.18),
    inset 0 1px 0 rgba(181, 221, 225, 0.10);
  backdrop-filter: saturate(150%) blur(10px);
}
body.theme-night .hamburger span { background: var(--ink-primary); }

body.theme-night .side-menu {
  background: var(--bg-card);
  border-left: 1px solid var(--border-soft);
}
body.theme-night .side-menu-link {
  color: var(--ink-primary);
  -webkit-text-stroke: 0;
}
body.theme-night .side-menu-link:hover {
  background: rgba(127, 196, 207, 0.08);
}
body.theme-night .side-menu-link.is-active {
  background: rgba(127, 196, 207, 0.14);
  color: var(--blue-primary);
}
body.theme-night .side-menu-sep { background: var(--border-soft); }

/* Cards — unified signature surface in night mode. Every card uses
   the same rich two-radial dark teal gradient so the whole app feels
   like one piece of hardware. */
body.theme-night .card {
  background: var(--grad-primary);
  border: 1px solid var(--border-soft);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.18);
  color: var(--ink-primary);
  transition:
    transform var(--t-smooth),
    border-color var(--t-smooth),
    box-shadow var(--t-smooth);
}

/* Hover = lift + aqua border + layered outer glow. */
body.theme-night .card:hover {
  transform: translateY(-2px);
  border-color: rgba(93, 213, 213, 0.45);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 12px 28px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(93, 213, 213, 0.20),
    0 0 32px rgba(93, 213, 213, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  body.theme-night .card { transition: none; }
  body.theme-night .card:hover { transform: none; }
}

/* Scorecard variants inherit the base .card gradient — no per-variant
   overrides needed. Text colors on what was the white hero variant
   flip to light ink automatically via the parent .card rule. */
body.theme-night .scorecard-hero .scorecard-label,
body.theme-night .scorecard-hero .scorecard-value,
body.theme-night .scorecard-hero .hero-sub,
body.theme-night .scorecard-hero .hero-metrics {
  color: var(--ink-primary);
}

/* scorecard-dark's day treatment includes a dashed grid pattern,
   its own gray-hero gradient, and a 35% white top-sheen ::after.
   In night mode we strip all three so the card renders with only
   the canonical --grad-primary inherited from .card. */
body.theme-night .scorecard-dark {
  background: var(--grad-primary);
  background-size: auto;
  border-color: var(--border-soft);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.18);
}
body.theme-night .scorecard-dark::after { display: none; }

/* Restore gradient-text fill for the big number so it reads as aqua
   like the YouTube reference card (day-mode uses ink→deep→primary, which
   goes muddy on a dark background). */
body.theme-night .scorecard-dark .scorecard-value.gradient .num {
  background: none;
  -webkit-text-fill-color: var(--blue-light);
  color: var(--blue-light);
}
body.theme-night .scorecard-dark .scorecard-label,
body.theme-night .scorecard-dark .scorecard-value { color: var(--ink-primary); }
body.theme-night .scorecard-dark .scorecard-currency {
  color: var(--ink-secondary);
  -webkit-text-fill-color: var(--ink-secondary);
}
body.theme-night .scorecard-dark .scorecard-delta.up { color: var(--blue-light); }
body.theme-night .scorecard-dark .scorecard-delta .delta-context { color: var(--ink-tertiary); }

/* Donut center number — the big total sitting inside the ring.
   Day uses a gradient fill; in night mode that goes muddy, so we
   swap to pure white for maximum legibility. */
body.theme-night .donut-center-num {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #FFFFFF;
  color: #FFFFFF;
}

/* COMMAND CENTER breadcrumb above the client title — force pure white
   in night mode so it's fully legible against the dark page gradient. */
body.theme-night .breadcrumb {
  color: #FFFFFF;
  -webkit-text-stroke: 0;
}

/* Day button is disabled while the app is night-only. Style it so users
   see it's not interactive. */
.theme-mode-btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Summary rows — override the day-mode pastel gradient backgrounds
   with a uniform dark-teal chip. Icons keep their per-category tint
   (aqua, amber, lime, lavender, etc.) for quick scanning. */
body.theme-night .summary-item {
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-soft);
}
body.theme-night .summary-item .summary-k,
body.theme-night .summary-item .summary-v { color: var(--ink-primary); }
body.theme-night .summary-item .v-unit { color: var(--ink-tertiary); }

/* Per-category icon chips — remap to the night palette so each row is
   still individually recognizable at a glance. */
body.theme-night .summary-aqua   .summary-icon { background: rgba(93, 213, 213, 0.18); color: #5DD5D5; }
body.theme-night .summary-teal   .summary-icon { background: rgba(127, 196, 207, 0.18); color: #7FC4CF; }
body.theme-night .summary-gold   .summary-icon { background: rgba(251, 184, 15, 0.20); color: #FBB80F; }

/* TikTok/X split sub-cards — in night mode, transparent with outline
   borders so they don't dominate the card with a big filled teal block.
   Labels and values become white on the dark surface. */
body.theme-night .split-col-tiktok,
body.theme-night .split-col-x {
  background: transparent;
  border: 1px solid var(--border-soft);
  box-shadow: none;
}
body.theme-night .split-col-tiktok .split-head,
body.theme-night .split-col-tiktok .social-v,
body.theme-night .split-col-x .split-head,
body.theme-night .split-col-x .social-v {
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
}
body.theme-night .split-col-tiktok .social-k,
body.theme-night .split-col-x .social-k {
  color: var(--ink-secondary);
}

/* ---------------------------------------------------------------------
   Path-to-Purchase funnel — night mode
   Replaces the day-mode warm sand (#F2E7CD) track + icon background
   with a dark teal surface + soft aqua outline, matching the rest of
   the night palette. Aqua fill bars keep their existing --grad-blue.
   --------------------------------------------------------------------- */
body.theme-night .funnel-icon {
  background: rgba(93, 213, 213, 0.08);
  color: #5DD5D5;
  border: 1px solid rgba(93, 213, 213, 0.22);
}
body.theme-night .funnel-bar {
  background: rgba(8, 32, 42, 0.6);
  border: 1px solid var(--border-soft);
}
body.theme-night .funnel-bar-fill {
  background: linear-gradient(135deg, #5DD5D5 0%, #3D8FA0 100%);
  box-shadow: 0 0 10px rgba(93, 213, 213, 0.18);
}
body.theme-night .funnel-step-label { color: var(--ink-secondary); }
body.theme-night .funnel-drop { color: var(--ink-tertiary); }

/* ---------------------------------------------------------------------
   Social cards — dotted dividers between metric groups
   Matches the pattern already used on the YouTube card (.yt-metrics-2
   has a dashed border-top) so Instagram and TikTok/X feel visually
   consistent. Adds both horizontal AND vertical dotted dividers so the
   individual numbers get clear breathing room.
   --------------------------------------------------------------------- */

/* Shared divider color for the social-card metric groups. --border-soft
   is only 14% opacity in night mode which is too faint to read as a
   "divider" between large numbers. This token stays in the aqua family
   but at a visible ~32% so the dashed lines feel intentional. */
body.theme-night { --divider-dashed: rgba(127, 196, 207, 0.32); }

/* Instagram card — metrics are stacked vertically inside .social-body.
   Add dashed separators between each stacked metric. */
body.theme-night .social-body .social-metrics .social-metric + .social-metric {
  padding-top: 18px;
  border-top: 1px dashed var(--divider-dashed);
}

/* TikTok/X split sub-cards — two metrics stacked per column. Add a
   dashed separator centered between them. .split-col is flex w/ gap:10px,
   so flex-gap handles the space ABOVE the border and padding-top handles
   the space BELOW; no margin-top needed (it would compound the gap and
   push the line above center). */
body.theme-night .split-col .social-metric + .social-metric {
  padding-top: 10px;
  border-top: 1px dashed var(--divider-dashed);
}

/* YouTube card — horizontal metrics are in a 3-column grid. Add
   vertical dashed dividers between columns for extra breathing room.
   Also promote the existing horizontal dashed divider to the same
   visible color so both axes match. */
body.theme-night .yt-card .social-metrics { column-gap: 0; }
body.theme-night .yt-card .social-metrics .social-metric {
  padding: 0 16px;
  border-left: 1px dashed var(--divider-dashed);
}
body.theme-night .yt-card .social-metrics .social-metric:first-child {
  border-left: none;
  padding-left: 0;
}
body.theme-night .yt-card > .yt-metrics-2 {
  border-top-color: var(--divider-dashed);
}
body.theme-night .summary-sage   .summary-icon { background: rgba(168, 214, 142, 0.20); color: #A8D68E; }
body.theme-night .summary-violet .summary-icon { background: rgba(176, 155, 219, 0.20); color: #B09BDB; }
body.theme-night .summary-coral  .summary-icon { background: rgba(255, 155, 122, 0.20); color: #FF9B7A; }

/* Tab bar */
body.theme-night .tab-bar {
  background: var(--bg-card);
  border-color: var(--border-soft);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
body.theme-night .tab-bar-btn:hover { background: rgba(127, 196, 207, 0.06); }
body.theme-night .tab-bar-btn.is-active {
  background: rgba(127, 196, 207, 0.10);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), inset 0 0 0 1px var(--blue-primary);
}

/* Pills, chips, toggles in the map overlay — legible on dark */
body.theme-night .pill-btn,
body.theme-night .chip,
body.theme-night .toggle-btn {
  background: rgba(127, 196, 207, 0.08);
  color: var(--ink-primary);
  border-color: var(--border-soft);
}
body.theme-night .chip.is-active,
body.theme-night .toggle-btn.is-active {
  background: var(--grad-blue);
  color: #04131A;
}

/* Geo map overlay panels */
body.theme-night .geo-overlay.panel {
  background: rgba(8, 32, 42, 0.82);
  border-color: var(--border-soft);
  color: var(--ink-primary);
  backdrop-filter: saturate(160%) blur(6px);
}
body.theme-night .geo-total-pill {
  background: rgba(8, 32, 42, 0.82);
  color: var(--ink-primary);
  border-color: var(--border-soft);
}

/* Tables */
body.theme-night .data-table tr:hover td { background: rgba(127, 196, 207, 0.05); }
body.theme-night .data-table td { border-bottom-color: var(--border-soft); }
body.theme-night .product-thumb-fallback { background: var(--grad-blue); }

/* Feeds + lists */
body.theme-night .purchase-feed li,
body.theme-night .yt-comment,
body.theme-night .yt-theme,
body.theme-night .yt-sub-stat,
body.theme-night .yt-retention-notes li {
  background: var(--bg-card-subtle);
}
body.theme-night .yt-sub-net { background: var(--blue-deep); }
body.theme-night .yt-sub-net .yt-sub-stat-v,
body.theme-night .yt-sub-net .yt-sub-stat-k { color: #04131A; }
body.theme-night .yt-sub-net .yt-sub-stat-k { color: rgba(4, 19, 26, 0.7); }

/* Bar tracks — lift them so they don't disappear on dark */
body.theme-night .bar-track { background: rgba(127, 196, 207, 0.10); }

/* Hint tooltip (card-hint) — in night mode --ink-primary flips to a
   near-white so the base rule (ink background, white text) collapses
   to white-on-white. Force a dark-teal bubble with pure white text. */
body.theme-night .card-hint:hover { color: var(--blue-primary); }
body.theme-night .card-hint::after {
  background: #04131A;
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(127, 196, 207, 0.22);
}
body.theme-night .card-hint::before {
  border-bottom-color: #04131A;
}

/* Numbers & gradient text stay legible — they already use --grad-blue
   which we've rebuilt above. */

/* Theme Studio panel header in night mode */
body.theme-night .theme-studio { background: var(--bg-card); }
body.theme-night .theme-studio-head { border-bottom-color: var(--border-soft); }

/* AI chat view */
body.theme-night .ai-chat-panel { background: var(--bg-page); }
body.theme-night .ai-convos li { color: var(--ink-secondary); }
body.theme-night .ai-convos li.is-active { background: rgba(127, 196, 207, 0.08); color: var(--ink-primary); }
body.theme-night .ai-msg-bubble { background: var(--bg-card); color: var(--ink-primary); }
body.theme-night .ai-msg-user .ai-msg-bubble { background: var(--grad-blue); color: #04131A; }
body.theme-night .ai-chat-composer input {
  background: var(--bg-card-subtle);
  color: var(--ink-primary);
  border-color: var(--border-soft);
}

/* YT live pill keeps its red but the backdrop needs to tolerate dark */
body.theme-night .yt-live-pill { background: rgba(229, 57, 53, 0.14); }
body.theme-night .tab-bar-badge { background: rgba(229, 57, 53, 0.18); }

/* Sentiment strip / breakdowns */
body.theme-night .yt-sent-strip,
body.theme-night .yt-sent-strip-bar,
body.theme-night .yt-sent-video-bar { background: rgba(127, 196, 207, 0.10); }
body.theme-night .yt-sent-seg.neu { background: #5E7680; }

/* Themes CTA on dark — keep gradient but adjust contrast */
body.theme-night .yt-themes-cta { color: #04131A; }

/* ========================================================================
   Shop tab — compact KPI mini cards (secondary metrics row)
   ======================================================================== */
.kpi-mini {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
}
.kpi-mini-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kpi-mini-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--blue-soft);
  color: var(--blue-deep);
  font-size: 16px;
}
.kpi-mini-label {
  font-family: "Oxanium", sans-serif;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--ink-secondary);
}
.kpi-mini-value {
  font-family: "Zen Dots", monospace;
  font-size: 30px;
  line-height: 1;
  color: var(--blue-deep);
  display: flex;
  align-items: baseline;
}
.kpi-mini-value .v-unit {
  font-family: "Electrolize", sans-serif;
  font-size: 16px;
  color: var(--ink-secondary);
  -webkit-text-fill-color: var(--ink-secondary);
  margin-left: 3px;
  font-weight: 500;
}
.kpi-mini-sub {
  font-family: "Inconsolata", monospace;
  font-size: 11px;
  color: var(--ink-tertiary);
}

body.theme-night .kpi-mini-icon {
  background: rgba(127, 196, 207, 0.12);
  color: var(--blue-primary);
}

/* ---- Map-detail popup — night mode --------------------------------- *
 * The .mp-card was hardcoded to rgba(255,255,255,0.96), which left the
 * auto-flipped light ink tokens (--ink-primary, etc.) illegible on a
 * white surface. Swap the card background to the canonical
 * --grad-primary dark-teal surface used by every other card in night
 * mode — one consistent vibe across the whole app — and fix the two
 * remaining rgba(15,22,48,*) hardcoded-light bits so they read on dark.
 * Ink colors, borders, icon tints all cascade from tokens already, so
 * nothing else needs to change. */
body.theme-night .mp-card {
  background: var(--grad-primary);
  backdrop-filter: none;
  border-color: var(--border-soft);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.45),
    0 16px 48px rgba(0, 0, 0, 0.32);
}

/* Flag outline — day uses dark-ink hairline; on dark we want a subtle
 * light-teal hairline that matches the rest of the card's border tone. */
body.theme-night .mp-flag {
  box-shadow: 0 0 0 1px rgba(127, 196, 207, 0.22);
}

/* Close-button hover was a dark wash on white in day mode; invert to a
 * light wash on dark so the hover state is visible. */
body.theme-night .mp-close:hover {
  background: rgba(127, 196, 207, 0.10);
  color: var(--ink-primary);
}

/* Traffic-source bar track — day used rgba(15,22,48,0.06) (near-black
 * on white); on dark that's invisible. Low-opacity light-teal reads as
 * an empty track without competing with the filled segments. */
body.theme-night .mp-bar {
  background: rgba(127, 196, 207, 0.10);
}

/* Icon chip on each row — bump the teal tint slightly on dark so it
 * doesn't read flat. */
body.theme-night .mp-row .mp-icon {
  background: rgba(127, 196, 207, 0.12);
  border-color: rgba(127, 196, 207, 0.22);
  color: var(--blue-primary);
}