/* ═══════════════════════════════════════
   SELF-HOSTED FONTS (latin subset, woff2)
   Served from our own origin so the LCP text font is fetched on the warm
   same-origin HTTP/2 connection - no fonts.gstatic.com round-trip.
   Google Sans + Roboto Mono latin are single variable files (one face,
   weight range 400-700). Google Sans Display ships separate 400/700.
═══════════════════════════════════════ */
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/googlesans.woff2) format('woff2');
}
@font-face {
  font-family: 'Google Sans Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/googlesansdisplay-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Google Sans Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/googlesansdisplay-700.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/robotomono.woff2) format('woff2');
}
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/material-symbols-subset.woff2) format('woff2');
}

/* Material Symbols utility class. Previously supplied by Google's stylesheet;
   now that fonts are self-hosted we must define it ourselves. The 'liga' feature
   is what turns the ligature text (e.g. "calendar_month") into the icon glyph.
   Per-page CSS may still override font-size. */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ═══════════════════════════════════════
   MD3 DARK THEME - GLOBAL MARKETS
   Primary: Cyan-teal family
   Surface: Deep navy
═══════════════════════════════════════ */
:root {
  --md-primary:          #4DD0E1;
  --md-on-primary:       #00363C;
  --md-primary-container:#004F58;
  --md-on-primary-cont:  #97F0FF;

  --md-secondary:        #80CBC4;
  --md-on-secondary:     #003733;
  --md-secondary-cont:   #005049;
  --md-on-secondary-cont:#9EF2EC;

  --md-tertiary:         #B0BEC5;
  --md-on-tertiary:      #1E272C;
  --md-tertiary-cont:    #2D3D45;
  --md-on-tertiary-cont: #CFE4EF;

  --md-error:            #F28B82;
  --md-on-error:         #601410;
  --md-error-cont:       #8C1D18;
  --md-on-error-cont:    #F9DEDC;

  --md-background:       #061018;
  --md-on-background:    #DEE4E7;
  --md-surface:          #0C1A24;
  --md-on-surface:       #DEE4E7;
  --md-surface-variant:  #3F4F57;
  --md-on-surface-var:   #BFC8CE;
  --md-outline:          #899297;
  --md-outline-var:      #1C2A33;

  --md-surf-1:           #111F2A;
  --md-surf-2:           #14242F;
  --md-surf-3:           #172834;
  --md-surf-4:           #1A2D3A;
  --md-surf-5:           #1C3040;

  /* Chrome (header/footer bars) — semantic tokens so a future dashboard
     light theme can re-point them without touching component rules.
     Dark defaults below keep the current dark look unchanged. */
  --md-topbar-bg:      var(--md-surf-2);
  --md-brand-icon-bg:  var(--md-primary-container);
  --md-brand-icon-fg:  var(--md-on-primary-cont);

  --gain:       #4CAF50;
  --loss:       #EF5350;
  --gain-cont:  rgba(76,175,80,0.12);
  --loss-cont:  rgba(239,83,80,0.12);
  --amber:      #FFA726;
  --amber-cont: rgba(255,167,38,0.12);
  --purple:     #CE93D8;

  --cat-markets:    #9575CD;
  --cat-rates:      #2979FF;
  --cat-commodities:#D4A843;
  --cat-currencies: #0D9488;
  --cat-crypto:     #CE93D8;

  --font-display: 'Google Sans Display', 'Google Sans', sans-serif;
  --font-body:    'Google Sans', sans-serif;
  --font-mono:    'Roboto Mono', monospace;

  --shape-xs:   4px;
  --shape-sm:   8px;
  --shape-md:   12px;
  --shape-lg:   16px;
  --shape-xl:   28px;
  --shape-full: 100px;
  --shape-chip: 8px;    /* MD3 chip shape — rounded rectangle, not a pill */

  --sp-xs:  0.25rem;
  --sp-sm:  0.5rem;
  --sp-md:  0.75rem;
  --sp-lg:  1rem;
  --sp-xl:  1.5rem;
  --sp-2xl: 2rem;

  /* Fluid type tokens — dashboard (dt-*)
     Grow smoothly from mobile → 4K via vw interpolation */
  --dt-2xs:  clamp(0.5rem,   0.45rem  + 0.15vw, 0.625rem);  /* 8–10px  */
  --dt-xs:   clamp(0.5625rem,0.525rem + 0.2vw,  0.6875rem); /* 9–11px  */
  --dt-sm:   clamp(0.625rem, 0.575rem + 0.25vw, 0.8125rem); /* 10–13px */
  --dt-base: clamp(0.6875rem,0.625rem + 0.3vw,  0.875rem);  /* 11–14px */
  --dt-md:   clamp(0.75rem,  0.7rem   + 0.3vw,  1rem);      /* 12–16px */
  --dt-lg:   clamp(0.875rem, 0.8rem   + 0.4vw,  1.25rem);   /* 14–20px */
  --dt-xl:   clamp(1rem,     0.9rem   + 0.5vw,  1.5rem);    /* 16–24px */
  --dt-hero: clamp(1.125rem, 1rem     + 0.75vw, 1.875rem);  /* 18–30px */
}

/* ══════════════════════════════════════════════════════════════════════
   DASHBOARD LIGHT THEME  (opt-in, independent of the content-page theme)
   Triggered by html[data-dash-theme="light"]. The attribute is set only on
   dashboard pages by a gated pre-paint script, with its OWN localStorage key
   (gmd-dash-theme), so the dashboard light/dark choice is fully separate from
   the content-page toggle (data-theme / gmd-theme). Dark is the default and
   stays byte-identical whenever this block is inert.

   How it works: the ~40 MD3 tokens are re-pointed to an MD3 cyan LIGHT tonal
   palette, so the ~340 var() consumers flip automatically. A short list of
   targeted overrides then fixes the hard-coded on-surface offenders (cyan /
   near-white text and white state-layer overlays). The AI Mood, economic-
   calendar and info-modal popups invert their dark-glass panels to FROSTED
   LIGHT glass (keeping the cyan/purple gradient accents) with their inner text
   re-pointed to the on-surface tokens. Only the tiny [data-tooltip] hover
   bubble stays dark — a dark micro-label over light UI is standard MD3.
══════════════════════════════════════════════════════════════════════ */
html[data-dash-theme="light"] {
  color-scheme: light;

  /* Shares its palette values with the content-page light theme for brand
     consistency (see content-v2.css). */
  --md-primary:           #006780;
  --md-on-primary:        #ffffff;
  --md-primary-container: #b8eafe;
  --md-on-primary-cont:   #001f29;

  --md-secondary:         #4a6268;
  --md-on-secondary:      #ffffff;
  --md-secondary-cont:    #cde7ed;
  --md-on-secondary-cont: #051f23;

  --md-tertiary:          #545d62;
  --md-on-tertiary:       #ffffff;
  --md-tertiary-cont:     #d8e2e7;
  --md-on-tertiary-cont:  #121d22;

  --md-error:             #ba1a1a;
  --md-on-error:          #ffffff;
  --md-error-cont:        #ffdad6;
  --md-on-error-cont:     #410002;

  --md-background:        #f8fafd;
  --md-on-background:     #191c1e;
  --md-surface:           #f8fafd;
  --md-on-surface:        #191c1e;
  --md-surface-variant:   #dce4e8;
  --md-on-surface-var:    #40484c;
  --md-outline:           #70787d;
  --md-outline-var:       #c0c8cd;

  /* Tonal elevation surfaces — ascending MD3 light containers */
  --md-surf-1:            #ffffff;
  --md-surf-2:            #eef3f7;
  --md-surf-3:            #e7edf1;
  --md-surf-4:            #e1e8ec;
  --md-surf-5:            #dbe3e8;

  /* Chrome — prominent cyan header, matching the content pages */
  --md-topbar-bg:         var(--md-primary-container);
  --md-brand-icon-bg:     var(--md-primary);
  --md-brand-icon-fg:     var(--md-on-primary);

  /* Darken gain/loss/amber so they pass WCAG AA as text on light surfaces;
     the dark-theme values wash out on white. */
  --gain:   #2e7d32;
  --loss:   #c62828;
  --amber:  #a15c00;
}

/* On-surface text that was hard-coded cyan / near-white — re-point to tokens */
html[data-dash-theme="light"] .movers-copy,
html[data-dash-theme="light"] .ss-aimood-btn { color: var(--md-primary); }
html[data-dash-theme="light"] .ss-aimood-label { color: var(--md-on-surface); }
/* On-card accent values that wash out on white - route to darkened tokens */
html[data-dash-theme="light"] .mood-cell-rating.greed { color: var(--gain); }
html[data-dash-theme="light"] .mood-cell-rating.fear  { color: var(--loss); }
html[data-dash-theme="light"] .cat-vixf1 .gauge-val   { color: #0277bd; }

/* State-layer overlays: invert white→black so hovers, fills and hairlines stay
   visible on the light surfaces (white overlays disappear on white). */
html[data-dash-theme="light"] .inst-row:hover,
html[data-dash-theme="light"] .movers-section:hover,
html[data-dash-theme="light"] .ss-item              { background: rgba(0,0,0,.04); }
html[data-dash-theme="light"] .movers-section:active { background: rgba(0,0,0,.08); }
html[data-dash-theme="light"] .news-item:hover       { background: rgba(0,0,0,.03); }
html[data-dash-theme="light"] .movers-modal-close:hover { background: rgba(0,0,0,.06); }
html[data-dash-theme="light"] .news-item             { border-bottom-color: rgba(0,0,0,.07); }
html[data-dash-theme="light"] .ss-reset-view         { border-color: rgba(0,0,0,.12); background: rgba(0,0,0,.04); }
html[data-dash-theme="light"] .ss-cal-btn            { background: rgba(0,0,0,.04); }
html[data-dash-theme="light"] .ss-cal-btn:hover      { color: var(--md-on-surface); background: rgba(0,0,0,.06); }

/* Softer shadow on light (the .4 black drop is too heavy on a white card) */
html[data-dash-theme="light"] .card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.12); }

/* ── Dark-glass popups → frosted light glass (AI Mood / ecocal / info modal).
   Panel inverts to a light frosted surface; the cyan/purple gradient border
   glow carries over (softened black drop). The info-modal body is fully
   tokenized, so flipping its panel auto-darkens its text; the AI Mood and
   ecocal popups also need their hard-coded light-grey text re-pointed. */
html[data-dash-theme="light"] .aimood-popup,
html[data-dash-theme="light"] .ecocal-popup,
html[data-dash-theme="light"] .info-modal-box {
  background: rgba(248,250,253,.9);
  box-shadow:
    0 0 0 1px rgba(6,182,212,.45),
    0 0 0 3px rgba(168,85,247,.16),
    0 0 40px rgba(6,182,212,.12),
    0 20px 60px rgba(0,0,0,.22);
}

/* Inner near-white / slate text → on-surface tokens */
html[data-dash-theme="light"] .aimood-text,
html[data-dash-theme="light"] .ecocal-code { color: var(--md-on-surface); }
html[data-dash-theme="light"] .aimood-popup-meta,
html[data-dash-theme="light"] .aimood-close-btn,
html[data-dash-theme="light"] .ecocal-popup-meta,
html[data-dash-theme="light"] .ecocal-close-btn,
html[data-dash-theme="light"] .ecocal-section,
html[data-dash-theme="light"] .ecocal-date { color: var(--md-on-surface-var); }
/* Solid-cyan glyphs / chips → primary (the gradient-clipped title text is fine
   on light and is left alone) */
html[data-dash-theme="light"] .ecocal-title-glyph,
html[data-dash-theme="light"] .ecocal-info,
html[data-dash-theme="light"] .ss-cal-glyph { color: var(--md-primary); }
html[data-dash-theme="light"] .aimood-disclaimer { color: var(--md-error); }

/* Close-button hovers + footer/row hairlines: invert white overlays to black */
html[data-dash-theme="light"] .aimood-close-btn:hover,
html[data-dash-theme="light"] .ecocal-close-btn:hover { color: var(--md-on-surface); background: rgba(0,0,0,.06); }
html[data-dash-theme="light"] .info-modal-close:hover { background: rgba(0,0,0,.08); }
html[data-dash-theme="light"] .ecocal-row + .ecocal-row { border-top-color: rgba(0,0,0,.06); }
html[data-dash-theme="light"] .aimood-popup-footer { border-top-color: rgba(0,0,0,.08); }

/* ── Theme toggle button (top-bar trail) ──────────────────────────────
   Mirrors the content-page .theme-toggle (content-v2.css), but keyed to
   data-dash-theme since that stylesheet is not loaded on the dashboard. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: var(--shape-full);
  background: transparent;
  color: var(--md-on-background);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms ease, color 150ms ease;
}
/* Top-bar help link: matches the theme-toggle icon button, desktop only */
.topbar-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; flex-shrink: 0;
  border-radius: var(--shape-full); background: transparent;
  color: var(--md-on-background); text-decoration: none;
}
.topbar-help:hover  { background: color-mix(in srgb, var(--md-on-background) 8%, transparent); }
.topbar-help:active { background: color-mix(in srgb, var(--md-on-background) 12%, transparent); }
.topbar-help:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }
.topbar-help .material-symbols-outlined { font-size: 1.25rem; }
@media (max-width: 720px) { .topbar-help { display: none; } }

.theme-toggle:hover  { background: color-mix(in srgb, var(--md-on-background) 8%, transparent); }
.theme-toggle:active { background: color-mix(in srgb, var(--md-on-background) 12%, transparent); }
.theme-toggle:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }
.theme-toggle svg { width: 1.25rem; height: 1.25rem; }
/* Show the current state: sun while light, moon while dark (dark is default,
   so the sun is hidden until data-dash-theme="light"). */
.theme-toggle .theme-toggle-sun { display: none; }
html[data-dash-theme="light"] .theme-toggle .theme-toggle-moon { display: none; }
html[data-dash-theme="light"] .theme-toggle .theme-toggle-sun  { display: block; }

/* Smooth crossfade only while toggling (.theme-anim added by the handler for
   ~250ms, so page load and hovers are never animated). */
@media (prefers-reduced-motion: no-preference) {
  html.theme-anim,
  html.theme-anim * {
    transition: background-color .25s ease, color .25s ease,
                border-color .25s ease, fill .25s ease;
  }
}

/* ── First-visit theme-mode onboarding popup ──────────────────────────
   Anchored top-right under the app bar, with a caret pointing up toward the
   sun/moon toggle. Token-driven, so it renders correctly in light and dark.
   On narrow screens it docks to the bottom, clear of the mobile nav bar. */
.theme-intro {
  position: fixed;
  top: calc(64px + env(safe-area-inset-top, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  z-index: 1500;
  width: min(20rem, calc(100vw - 24px));
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
.theme-intro.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.theme-intro-card {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--sp-md);
  flex-wrap: wrap;
  padding: var(--sp-lg);
  background: var(--md-surf-3);
  border: 1px solid var(--md-outline-var);
  border-radius: var(--shape-lg);
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
}
/* Caret pointing up toward the top-bar toggle */
.theme-intro-card::before {
  content: '';
  position: absolute; bottom: 100%; right: 18px;
  border: 7px solid transparent;
  border-bottom-color: var(--md-outline-var);
}
.theme-intro-card::after {
  content: '';
  position: absolute; bottom: 100%; right: 19px;
  border: 6px solid transparent;
  border-bottom-color: var(--md-surf-3);
}
.theme-intro-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; flex-shrink: 0;
  border-radius: var(--shape-full);
  background: var(--md-primary-container);
  color: var(--md-on-primary-cont);
}
.theme-intro-text { flex: 1; min-width: 9rem; }
.theme-intro-title {
  font-family: var(--font-display);
  /* MD3 Title Medium (~16sp) - fixed, not the dense dashboard clamp */
  font-size: 1rem; font-weight: 600; line-height: 1.4;
  color: var(--md-on-surface);
  margin-bottom: var(--sp-xs);
}
.theme-intro-body {
  font-family: var(--font-body);
  /* MD3 Body Medium (14sp) for comfortable reading */
  font-size: 0.875rem; line-height: 1.45;
  color: var(--md-on-surface-var);
}
.theme-intro-dismiss {
  margin-left: auto;
  font-family: var(--font-body);
  /* MD3 Label Large (14sp) */
  font-size: 0.875rem; font-weight: 600;
  letter-spacing: .02em;
  padding: var(--sp-sm) var(--sp-lg);
  border: none; border-radius: var(--shape-full);
  background: var(--md-primary);
  color: var(--md-on-primary);
  cursor: pointer;
  transition: filter .15s, box-shadow .15s;
}
.theme-intro-dismiss:hover { filter: brightness(1.08); }
.theme-intro-dismiss:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }

@media (max-width: 720px) {
  .theme-intro {
    top: auto;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    left: 12px; right: 12px;
    width: auto;
    transform: translateY(8px);
  }
  /* Below the bar there is nothing to point at, so drop the caret */
  .theme-intro-card::before,
  .theme-intro-card::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-intro { transition: opacity .25s ease; transform: none; }
  .theme-intro.is-open { transform: none; }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Visually hidden - readable by search engines and screen readers, invisible on screen */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

html {
  height: 100%;
  overflow-x: hidden;
}

body {
  height: 100%;
  overflow-x: hidden;
  font-family: var(--font-body);
  background: var(--md-background);
  color: var(--md-on-surface);
}

/* ── LAYOUT SHELL ─────────────────────────────── */
/* 100dvh = dynamic viewport height — correct on iOS Safari (accounts for browser chrome) */
.shell {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  grid-template-columns: minmax(0, 1fr);   /* single column that can shrink below content */
  height: 100dvh;
}
/* Grid children must not widen the column past the viewport — without this a
   nowrap child (footer links / status strip) on tablet stretches the shell wide
   and pushes the sticky header trail off-screen. */
.shell > * { min-width: 0; }

/* main is the only scrollable zone */
main {
  overflow-y: auto;
  min-height: 0;          /* required: lets grid child shrink below content size */
}

/* Desktop (>=1101px): the DASHBOARD is a fixed one-screen view — clip the
   few-px of trailing slack instead of showing a scrollbar. Content pages (About,
   Terms, …) must keep scrolling, so this is scoped to the dashboard only. */
@media (min-width: 1101px) {
  body.is-dashboard main { overflow-y: hidden; }
}

/* ── TOP APP BAR ──────────────────────────────── */
.top-bar {
  display: flex;
  align-items: center;
  background: var(--md-topbar-bg);
  border-bottom: 1px solid var(--md-outline-var);
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  /* Vertical breathing room + iOS/Android safe-area insets so the sticky bar
     never bleeds under the system status bar (standalone PWA / notched phones). */
  padding: var(--sp-sm) var(--sp-xl);
  padding-top: calc(var(--sp-sm) + env(safe-area-inset-top, 0px));
  padding-right: max(var(--sp-xl), env(safe-area-inset-right, 0px));
  padding-left: max(var(--sp-xl), env(safe-area-inset-left, 0px));
  min-height: 4rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

.top-bar-lead {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  flex: 1 1 0;
  min-width: 0;
}

.brand-icon {
  flex-shrink: 0;
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--shape-sm);
  background: var(--md-brand-icon-bg);
  display: flex; align-items: center; justify-content: center;
  color: var(--md-brand-icon-fg);
  text-decoration: none;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: .04em;
  position: relative;
  overflow: hidden;
}
.brand-icon::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(77,208,225,.25);
  animation: brand-pulse 3s ease-in-out infinite;
}
@keyframes brand-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

.brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.brand-name {
  /* MD3 Title hierarchy: mixed-case, geometric display face, near-zero tracking */
  font-family: var(--font-display);
  font-size: clamp(0.875rem, 0.6rem + 0.85vw, 1.5rem);
  font-weight: 600;
  color: var(--md-on-background);
  letter-spacing: 0;
  line-height: 1.25;
  /* Stay on one line; if the trail (e.g. a long "RECONNECTING..." chip) squeezes
     the header, ellipsize rather than breaking into one letter per line. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-sub {
  font-family: var(--font-mono);
  font-size: var(--dt-xs);
  color: var(--md-primary);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-bar-trail {
  display: flex;
  align-items: center;
  gap: var(--sp-lg);
  flex-shrink: 0;
  margin-left: var(--sp-lg);
}

.chip-live {
  display: inline-flex; align-items: center; gap: var(--sp-xs);
  padding: 0.25rem 0.75rem;
  border-radius: var(--shape-chip);
  border: 1px solid rgba(76,175,80,.35);
  background: rgba(76,175,80,.08);
  font-family: var(--font-mono);
  font-size: var(--dt-xs);
  font-weight: 700;
  color: var(--gain); letter-spacing: .1em; text-transform: uppercase;
}
.chip-live .dot {
  width: 0.375rem; height: 0.375rem; border-radius: 50%;
  background: var(--gain);
  animation: blink 1.4s ease-in-out infinite;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .15; } }

/* YouTube live link */
.yt-live-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px;
  border-radius: var(--shape-chip);
  border: 1px solid rgba(255,0,0,.35);
  background: rgba(255,0,0,.08);
  font-family: var(--font-mono); font-size: var(--dt-xs); font-weight: 700;
  color: #ff4444; letter-spacing: .10em; text-transform: uppercase;
  text-decoration: none;
  transition: background .2s, border-color .2s;
}
.yt-live-link:hover { background: rgba(255,0,0,.16); border-color: rgba(255,0,0,.6); }
.yt-icon { flex-shrink: 0; }

/* Reddit community link */
.reddit-community-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px;
  border-radius: var(--shape-chip);
  border: 1px solid rgba(255,69,0,.35);
  background: rgba(255,69,0,.08);
  font-family: var(--font-mono); font-size: var(--dt-xs); font-weight: 700;
  color: #ff6314; letter-spacing: .10em; text-transform: uppercase;
  text-decoration: none;
  transition: background .2s, border-color .2s;
}
.reddit-community-link:hover { background: rgba(255,69,0,.16); border-color: rgba(255,69,0,.6); }


.clock { text-align: right; }
.clock-time {
  font-family: var(--font-mono);
  font-size: var(--dt-xl);
  font-weight: 500;
  color: var(--md-on-background);
  line-height: 1;
}
.clock-date {
  font-family: var(--font-mono);
  font-size: var(--dt-xs);
  color: var(--md-on-surface-var);
  letter-spacing: .06em;
}

/* ══════════════════════════════════════════════════
   STATUS STRIP
   Single band: regime | session | futures | vix | f&g | p/c
   Color = regime only. No decoration.
══════════════════════════════════════════════════ */
.status-strip {
  background: var(--md-surf-2);
  border-bottom: 2px solid var(--md-outline-var);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 var(--sp-xl);
  gap: var(--sp-lg);
  font-family: var(--font-mono);
  position: relative;
  transition: border-bottom-color .4s;
  --ss-pill-bg:     rgba(136,144,151,.10);
  --ss-pill-border: rgba(136,144,151,.22);
}
.status-strip.risk-on  { border-bottom-color: rgba(76,175,80,.7);  --ss-pill-bg: rgba(76,175,80,.12);  --ss-pill-border: rgba(76,175,80,.35); }
.status-strip.risk-off { border-bottom-color: rgba(239,83,80,.7);  --ss-pill-bg: rgba(239,83,80,.12);  --ss-pill-border: rgba(239,83,80,.35); }
.status-strip.mixed    { border-bottom-color: rgba(255,167,38,.7); --ss-pill-bg: rgba(255,167,38,.12); --ss-pill-border: rgba(255,167,38,.35); }

.status-strip::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  transition: background .4s;
}
.status-strip.risk-on::before  { background: rgba(76,175,80,.04); }
.status-strip.risk-off::before { background: rgba(239,83,80,.04); }
.status-strip.mixed::before    { background: rgba(255,167,38,.04); }

.ss-regime {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 6px 16px;
  border-radius: var(--shape-chip);
  background: var(--ss-pill-bg);
  border: 1px solid var(--ss-pill-border);
  transition: background .4s, border-color .4s;
  position: relative;
  z-index: 1;
}
.ss-regime-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--md-outline);
  transition: background .4s;
  flex-shrink: 0;
}
.status-strip.risk-on  .ss-regime-dot { background: var(--gain); }
.status-strip.risk-off .ss-regime-dot { background: var(--loss); animation: blink 1.4s ease-in-out infinite; }
.status-strip.mixed    .ss-regime-dot { background: var(--amber); }

.ss-regime-label {
  font-size: var(--dt-xs);
  color: var(--md-on-surface-var);
  letter-spacing: .02em;
}
.ss-regime-val {
  font-size: var(--dt-base); font-weight: 800; letter-spacing: .02em;
  transition: color .4s;
}
.status-strip.risk-on  .ss-regime-val { color: var(--gain); }
.status-strip.risk-off .ss-regime-val { color: var(--loss); }
.status-strip.mixed    .ss-regime-val { color: var(--amber); }
.status-strip.neutral  .ss-regime-val { color: var(--md-on-surface-var); }

.ss-items {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.ss-item {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px var(--sp-md);
  border-right: 1px solid var(--md-outline-var);
  white-space: nowrap;
}
.ss-item:last-child { border-right: none; }

.ss-key {
  font-size: var(--dt-xs);
  color: var(--md-on-surface-var);
  letter-spacing: .02em;
}
.ss-val {
  font-size: var(--dt-sm); font-weight: 600;
  color: var(--md-on-surface);
  letter-spacing: .02em;
}
.ss-val.up      { color: var(--gain); }
.ss-val.down    { color: var(--loss); }
.ss-val.mixed   { color: var(--amber); }
.ss-val.neutral { color: var(--md-on-surface); }

/* Event badge pill */
.ss-event { align-items: center; }
.ss-event-right {
  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
}
.ss-event-badge {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 7px;
  border-radius: 20px;
  border: 1px solid currentColor;
  white-space: nowrap;
  flex-shrink: 0;
}
.ss-event-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: currentColor;
}
.ss-event-name {
  font-family: var(--font-mono); font-size: var(--dt-sm); font-weight: 800;
  letter-spacing: .02em;
}
.ss-event-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid var(--md-on-surface-var);
  font-size: var(--dt-2xs); font-weight: 700; font-style: normal;
  color: var(--md-on-surface-var);
  text-decoration: none; flex-shrink: 0;
  opacity: .55;
  transition: opacity .15s;
}
.ss-event-info::before { content: 'i'; }
.ss-event-info:hover { opacity: 1; }
.ss-event-sep {
  font-size: var(--dt-xs); opacity: .4;
}
.ss-event-when {
  font-family: var(--font-mono); font-size: var(--dt-xs); font-weight: 500;
  opacity: .85; white-space: nowrap;
}
/* Urgency colours - applied to badge, inherited by dot + text */
.ss-event-badge.urgent  {
  color: var(--loss);
  background: rgba(239,83,80,.12);
  border-color: rgba(239,83,80,.5);
}
.ss-event-badge.urgent .ss-event-dot { animation: blink 0.7s ease-in-out infinite; }
.ss-event-badge.today   {
  color: var(--loss);
  background: rgba(239,83,80,.08);
  border-color: rgba(239,83,80,.35);
}
.ss-event-badge.soon    {
  color: var(--amber);
  background: rgba(255,167,38,.08);
  border-color: rgba(255,167,38,.35);
}
.ss-event-badge.distant {
  color: var(--md-on-surface-var);
  background: var(--md-surf-2);
  border-color: var(--md-outline-var);
}

.ss-sessions {
  align-items: center !important;
  gap: var(--sp-sm) !important;
}
.ss-session {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--shape-chip);
  border: 1px solid var(--md-outline-var);
  transition: border-color .3s, background .3s;
  white-space: nowrap;
}
.ss-session.open {
  border-color: rgba(76,175,80,.35);
  background: rgba(76,175,80,.07);
}
.ss-session-dot {
  width: 5px; height: 5px; border-radius: 50%;
  flex-shrink: 0;
  transition: background .3s;
}
.ss-session.open   .ss-session-dot { background: var(--gain); animation: blink 2s ease-in-out infinite; }
.ss-session.closed .ss-session-dot { background: var(--md-outline-var); }
.ss-session-name {
  font-size: var(--dt-xs); font-weight: 700;
  letter-spacing: .02em;
}
.ss-session.open   .ss-session-name { color: var(--md-on-surface); }
.ss-session.closed .ss-session-name { color: var(--md-on-surface-var); }
.ss-session-status {
  font-size: var(--dt-xs); font-weight: 700; letter-spacing: .02em;
}
.ss-session.open   .ss-session-status { color: var(--gain); }
.ss-session.closed .ss-session-status { color: var(--md-on-surface-var); opacity: .45; }

/* Desktop + tablet: ss-top-row is transparent — children flow directly into the strip */
.ss-top-row { display: contents; }

/* Stack into rows only on phones — tablets (≥720px) have room for a single row */
@media (max-width: 720px) {
  .status-strip {
    flex-direction: column;
    align-items: flex-start;
    min-height: auto;
    padding: var(--sp-sm) var(--sp-lg);
    gap: var(--sp-xs);
    border-left-width: 0;
    border-top: 3px solid var(--md-outline-var);
  }
  .status-strip.risk-on  { border-top-color: var(--gain); }
  .status-strip.risk-off { border-top-color: var(--loss); }
  .status-strip.mixed    { border-top-color: var(--amber); }

  /* First row: regime always centered; reset view floats right absolutely */
  .ss-top-row {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    min-height: 24px;
  }
  .ss-top-row .ss-regime     { border-right: none; padding-right: 0; }
  .ss-top-row .ss-reset-view { position: absolute; right: 0; }
  .ss-regime-val { font-size: 13px; }

  .ss-items { gap: var(--sp-xs); }

  .ss-item {
    background: rgba(255,255,255,.05);
    border-radius: var(--shape-chip);
    border: 1px solid var(--md-outline-var) !important;
    padding: 3px 10px;
  }
}

/* Tablet (iPad Mini ~768px) — keep the strip on one row by tightening spacing */
@media (min-width: 45.0625rem) and (max-width: 56.25rem) {
  .status-strip { padding: 0 var(--sp-md); gap: var(--sp-md); }
  .ss-item { padding: 5px var(--sp-sm); }
  .ss-sessions { gap: var(--sp-xs) !important; }
}

/* ── MAIN ─────────────────────────────────────── */
main {
  padding: var(--sp-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

/* ── MD3 CARD BASE ────────────────────────────── */
.card {
  background: var(--md-surf-1);
  border-radius: var(--shape-lg);
  border: 1px solid var(--md-outline-var);
  overflow: hidden;
  position: relative;
  transition: box-shadow .2s ease;
}
.card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.4); }

.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: var(--shape-lg) var(--shape-lg) 0 0;
}
.card.cat-markets::before    { background: linear-gradient(90deg, var(--cat-markets),    transparent); }
.card.cat-rates::before      { background: linear-gradient(90deg, var(--cat-rates),      transparent); }
.card.cat-commodities::before{ background: linear-gradient(90deg, var(--cat-commodities),transparent); }
.card.cat-currencies::before { background: linear-gradient(90deg, var(--cat-currencies), transparent); }
.card.cat-crypto::before     { background: linear-gradient(90deg, var(--cat-crypto),     transparent); }
.card.cat-vix::before        { background: linear-gradient(90deg, var(--md-error),       transparent); }
.card.cat-vixf1::before      { background: linear-gradient(90deg, #29B6F6,               transparent); }
.card.cat-fg::before         { background: linear-gradient(90deg, var(--amber),          transparent); }
.card.cat-pc::before         { background: linear-gradient(90deg, var(--purple),         transparent); }
.card.cat-partners::before   { background: linear-gradient(90deg, #fff,                  transparent); }

/* ── SECTION ROW ──────────────────────────────── */
.section-row { display: grid; gap: var(--sp-md); min-width: 0; width: 100%; }
.row-5 { grid-template-columns: repeat(5, 1fr); }

/* ── CARD HEADER ──────────────────────────────── */
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-md) var(--sp-lg) var(--sp-sm);
}
.card-title {
  font-family: var(--font-body); font-size: var(--dt-sm); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  cursor: grab; user-select: none;
}
.card-title:active { cursor: grabbing; }
.gauge-label        { cursor: grab; user-select: none; }
.gauge-label:active { cursor: grabbing; }
.card.is-dragging  { opacity: .4; transition: opacity .15s; }

/* ── FLIP CARD (news panel) ──────────────────────────────────────────────── */

/* Flippable card: perspective container, allow 3D rotation outside bounds */
.card.is-flippable {
  perspective: 1200px;
  overflow: visible;
}

/* Inner wrapper rotates - MD3 emphasized decelerate easing */
.card-inner {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.05, .7, .1, 1);
}
.card-inner.is-flipped { transform: rotateY(180deg); }

/* Both faces: hidden when facing away */
.card-face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--shape-lg);
  overflow: hidden;
}
/* Front stays in normal flow - gives card-inner its natural height */
.card-front {
  position: relative;
}
/* When flipped: hide outer color stripe (back face has its own) + belt-and-suspenders on front */
.card.is-flippable:has(.card-inner.is-flipped)::before { opacity: 0; }
.card-inner.is-flipped .card-front { visibility: hidden; }
/* Back overlays the front at the same size, starts face-down */
.card-back {
  position: absolute; inset: 0;
  transform: rotateY(180deg);
  background: var(--md-surf-1);
  border: 1px solid var(--md-outline-var);
  display: flex; flex-direction: column;
}
/* Colored gradient line at top - matches the front face ::before stripe */
.card-back::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: var(--shape-lg) var(--shape-lg) 0 0;
  background: linear-gradient(90deg,
    rgb(var(--fold-r), var(--fold-g), var(--fold-b)),
    transparent);
}

/* ── News panel (back face content) ─────────────── */
.news-panel { display: flex; flex-direction: column; height: 100%; }

.news-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-md) var(--sp-lg) var(--sp-sm);
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgb(var(--fold-r), var(--fold-g), var(--fold-b));
  flex-shrink: 0;
}

.news-back-btn {
  background: none; border: none; cursor: pointer;
  color: var(--md-on-surface-var); font-size: 16px; line-height: 1;
  padding: 2px 4px; border-radius: 4px;
  transition: color .15s, background .15s;
}
.news-back-btn:hover { color: var(--md-primary); background: rgba(6,182,212,.1); }

.news-list {
  list-style: none; margin: 0; padding: 4px 0;
  overflow-y: auto; flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(6,182,212,.3) transparent;
}
.news-list::-webkit-scrollbar { width: 4px; }
.news-list::-webkit-scrollbar-thumb { background: rgba(6,182,212,.3); border-radius: 4px; }

.news-item {
  padding: 9px 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background .15s;
}
.news-item:last-child { border-bottom: none; }
.news-item:hover { background: rgba(255,255,255,.03); }

.news-item a {
  color: var(--md-on-surface);
  text-decoration: none;
  font-size: 13px; line-height: 1.5;
  display: block;
  font-weight: 500;
}
.news-item a:hover { color: var(--md-primary); }

.news-item-meta {
  font-size: 11px;
  margin-top: 4px; display: flex; align-items: center; gap: 5px;
}
.news-item-meta span:first-child {
  color: rgb(var(--fold-r), var(--fold-g), var(--fold-b));
  font-weight: 400;
  opacity: .85;
}
.news-item-meta span:last-child {
  color: var(--md-on-surface-var);
}
.news-item-meta::after {
  content: none;
}
.news-item-meta span:first-child:not(:empty) + span::before {
  content: '·';
  margin-right: 5px;
  color: var(--md-on-surface-var);
  opacity: .5;
}

/* ── Dog-ear fold (bottom-right corner flip trigger) ─────────────────────── */

/* Per-section fold color - matches the section header color at half opacity */
.card.cat-markets     { --fold-r: 149; --fold-g: 117; --fold-b: 205; }
.card.cat-crypto      { --fold-r: 206; --fold-g: 147; --fold-b: 216; }
.card.cat-commodities { --fold-r: 212; --fold-g: 168; --fold-b:  67; }
.card.cat-currencies  { --fold-r:  13; --fold-g: 148; --fold-b: 136; }
.card.cat-rates       { --fold-r:  41; --fold-g: 121; --fold-b: 255; }

/* Attention pulse for the corner dot - signals the fold is clickable */
@keyframes fold-dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--fold-r), var(--fold-g), var(--fold-b), .6); }
  70%  { box-shadow: 0 0 0 8px rgba(var(--fold-r), var(--fold-g), var(--fold-b), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--fold-r), var(--fold-g), var(--fold-b), 0); }
}

.card-fold {
  position: absolute; bottom: 0; right: 0;
  width: 30px; height: 30px;
  border-radius: 0 0 var(--shape-lg) 0;
  cursor: pointer; z-index: 20;
  background: linear-gradient(135deg, transparent 55%,
    rgba(var(--fold-r), var(--fold-g), var(--fold-b), .32) 55%);
  transition: width .25s cubic-bezier(.05,.7,.1,1),
              height .25s cubic-bezier(.05,.7,.1,1),
              background .25s;
}
/* Tooltip */
.card-fold::before {
  content: 'Latest news';
  position: absolute; bottom: calc(100% + 8px); right: 0;
  white-space: nowrap;
  background: var(--md-surf-3, #2a2a3a);
  color: var(--md-on-surface);
  font-size: 11px; font-weight: 500; letter-spacing: .02em;
  padding: 4px 9px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s, transform .18s;
}
/* Persistent attention dot in the dog-ear corner - always pulsing so users
   notice the fold is clickable (works on touch too, where there is no hover) */
.card-fold::after {
  content: '';
  position: absolute; bottom: 6px; right: 6px;
  width: 5px; height: 5px; border-radius: 50%;
  background: #fff;
  opacity: .9;
  animation: fold-dot-pulse 2.2s ease-out infinite;
}
.card.is-flippable:hover .card-fold {
  width: 42px; height: 42px;
  background: linear-gradient(135deg, transparent 55%,
    rgba(var(--fold-r), var(--fold-g), var(--fold-b), .65) 55%);
  animation: none; opacity: 1;
}
/* On hover the dot moves inward to sit on the enlarged fold */
.card.is-flippable:hover .card-fold::after  { bottom: 9px; right: 9px; }
.card.is-flippable:hover .card-fold::before { opacity: 1; transform: translateY(0); }
/* Keyboard focus - mirror the hover affordance and add a visible ring */
.card-fold:focus-visible {
  width: 42px; height: 42px;
  background: linear-gradient(135deg, transparent 55%,
    rgba(var(--fold-r), var(--fold-g), var(--fold-b), .65) 55%);
  animation: none; opacity: 1;
  outline: 2px solid #67e8f9; outline-offset: 2px;
}
.card-fold:focus-visible::after  { bottom: 9px; right: 9px; }
.card-fold:focus-visible::before { opacity: 1; transform: translateY(0); }

/* When any card is flipped - all folds hidden via JS .is-disabled */
.card-fold.is-disabled {
  opacity: 0 !important;
  pointer-events: none;
}

/* ── New headline arrival animation (MD3 emphasized easing + cyan flash) ── */
@keyframes news-arrive {
  0%   { transform: translateY(-10px); opacity: 0; background: rgba(6,182,212,.18); }
  50%  { background: rgba(6,182,212,.08); }
  100% { transform: translateY(0);     opacity: 1; background: transparent; }
}
.news-item--new {
  animation: news-arrive .45s cubic-bezier(.05, .7, .1, 1) both;
}
.cat-markets    .card-title { color: var(--cat-markets); }
.cat-rates      .card-title { color: var(--cat-rates); }
.cat-commodities .card-title { color: var(--cat-commodities); }
.cat-currencies  .card-title { color: var(--cat-currencies); }
.cat-crypto     .card-title { color: var(--cat-crypto); }

/* ── Timespan toggle - scoped to cards with data-timespan-group ── */
.timespan-toggle {
  display: flex; gap: 1px;
  background: var(--md-surf-3);
  border-radius: 5px;
  padding: 1px;
}
.ts-btn {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 5px; border: none; border-radius: 4px;
  background: transparent; color: var(--md-outline);
  cursor: pointer; transition: background .15s, color .15s;
  min-width: 22px; text-align: center;
}
.ts-btn:hover  { color: var(--md-on-surface); }
.ts-btn.active { background: var(--md-surf-1); color: var(--md-primary); }

.card-badge {
  font-family: var(--font-mono); font-size: 9px; padding: 2px 8px;
  border-radius: var(--shape-chip); background: var(--md-outline-var);
  color: var(--md-on-surface-var); letter-spacing: .1em;
}

.hdivider { height: 1px; background: var(--md-outline-var); margin: 0 var(--sp-lg); }

/* ── INSTRUMENT LIST ──────────────────────────── */
.inst-list { display: flex; flex-direction: column; padding: 0 0 var(--sp-sm); }

.inst-row {
  display: grid; grid-template-columns: 1fr auto;
  align-items: start; gap: var(--sp-sm);
  padding: calc(var(--sp-sm) - 0.11rem) var(--sp-lg);
  border-radius: var(--shape-sm);
  transition: background .15s; cursor: default;
}
.inst-row:hover { background: rgba(255,255,255,.04); }
.inst-row + .inst-row { border-top: 1px solid var(--md-outline-var); }

/* Rotating slot: one row visible at a time, cycled by rotateSlot() in JS.
   Reserves a stable row height so the card doesn't jump on each swap.
   The separator lives on the container (the wrapping div breaks the
   .inst-row + .inst-row chain, so the visible row can't inherit it). */
.rotating-slot { position: relative; min-height: 44px; border-top: 1px solid var(--md-outline-var); }
.rotating-slot .inst-row { border-top: 0; }

.inst-sym {
  font-family: var(--font-mono); font-size: var(--dt-base); font-weight: 500;
  color: var(--md-on-surface-var); letter-spacing: .03em; line-height: 1;
}
.inst-name { font-size: var(--dt-xs); color: var(--md-on-surface-var); margin-top: 1px; }

/* ── Futures badge ── */
.fut-badge {
  display: inline-block;
  font-size: var(--dt-2xs); font-weight: 800; letter-spacing: .02em;
  padding: 1px 4px; border-radius: 3px;
  background: rgba(255,180,0,.15); color: #ffb400;
  border: 1px solid rgba(255,180,0,.35);
  vertical-align: middle; margin-left: 3px;
}
.fut-row { opacity: .92; }
.fut-row .inst-name { color: #ffb400; opacity: .8; }

.spark-svg { width: 80px; height: 28px; display: block; margin-top: 2px; overflow: visible; }
.spark-line { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.spark-line.up   { stroke: var(--gain); }
.spark-line.down { stroke: var(--loss); }
.spark-area { stroke: none; opacity: .15; }
.spark-area.up   { fill: var(--gain); }
.spark-area.down { fill: var(--loss); }
.spark-dot { r: 2; }
.spark-dot.up   { fill: var(--gain); }
.spark-dot.down { fill: var(--loss); }
.spark-base {
  stroke: var(--md-on-surface-var);
  stroke-width: 0.75;
  stroke-dasharray: 2.5 2;
  opacity: 0.4;
}

.inst-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.inst-price {
  font-family: var(--font-mono); font-size: var(--dt-md); font-weight: 700;
  color: var(--md-on-surface); letter-spacing: .02em; transition: color .25s;
}
.inst-price.flash-up   { color: var(--gain); }
.inst-price.flash-down { color: var(--loss); }

.chg-chip {
  font-family: var(--font-mono); font-size: var(--dt-xs); font-weight: 700;
  padding: 2px 8px; border-radius: var(--shape-chip);
  letter-spacing: .04em; min-width: 64px; text-align: center;
}
.chg-chip.up   { color: var(--gain); background: var(--gain-cont); }
.chg-chip.down { color: var(--loss); background: var(--loss-cont); }

/* ── BOTTOM ROW ───────────────────────────────── */
.bottom-row { display: grid; grid-template-columns: 220px 220px 220px 220px 1fr 1fr; gap: var(--sp-md); align-items: stretch; min-width: 0; width: 100%; }

/* ── MARKET MOOD CARD ─────────────────────────── */
.card.cat-mood::before { background: linear-gradient(90deg, #4DD0E1, transparent); }
.mood-card {
  display: flex; flex-direction: column;
  height: 100%; padding: var(--sp-sm) var(--sp-md) var(--sp-md);
}
.mood-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr; gap: 4px; flex: 1; min-height: 0;
}
.mood-header { display: flex; align-items: center; margin-bottom: var(--sp-xs); }
.mood-title {
  font-family: var(--font-body); font-size: var(--dt-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--md-primary);
}
.mood-cell {
  background: var(--md-surf-2);
  border-radius: var(--shape-sm);
  padding: 4px 8px;
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 0 8px;
  border: 1px solid var(--md-outline-var);
  overflow: hidden;
}
.mood-cell-label {
  font-size: 9px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--md-on-surface-var);
  display: flex; align-items: center; gap: 3px; white-space: nowrap;
}
.mood-cell-right {
  display: flex; flex-direction: row; align-items: baseline; gap: 5px;
}
.mood-cell-val {
  font-family: var(--font-mono); font-size: var(--dt-md); font-weight: 700;
  color: var(--md-on-background); line-height: 1;
}
.mood-cell-rating {
  font-size: 9px; font-weight: 600; letter-spacing: .03em;
  text-transform: capitalize; white-space: nowrap;
}
.mood-cell-rating.greed   { color: #4CAF50; }
.mood-cell-rating.fear    { color: #EF5350; }
.mood-cell-rating.neutral { color: var(--md-on-surface-var); }

/* ── GAUGE ────────────────────────────────────── */
.gauge-card { padding: var(--sp-md) var(--sp-lg) var(--sp-lg); display: flex; flex-direction: column; gap: var(--sp-xs); }
.gauge-label { font-size: var(--dt-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--md-on-surface-var); }
.gauge-wrap { display: flex; align-items: center; gap: var(--sp-md); margin-top: var(--sp-xs); }
.gauge-arc { width: 100px; height: 60px; flex-shrink: 0; }
.gauge-info { display: flex; flex-direction: column; }
.gauge-val { font-family: var(--font-mono); font-size: clamp(1.25rem, 1rem + 1vw, 2.25rem); font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.cat-vix   .gauge-val { color: var(--md-error); }
.cat-vixf1 .gauge-val { color: #29B6F6; }
.cat-fg    .gauge-val { color: var(--amber); }
.cat-pc    .gauge-val { color: var(--purple); }
.gauge-sub { font-family: var(--font-mono); font-size: var(--dt-xs); color: var(--md-on-surface-var); margin-top: 4px; }
.gauge-sentiment { font-size: var(--dt-sm); font-weight: 700; margin-top: 2px; }

/* ── PARTNERS ─────────────────────────────────── */
.partners-card { display: flex; flex-direction: column; height: 100%; }
.partners-body {
  display: flex; flex: 1; min-height: 0; overflow: hidden;
}
.partners-body-single { justify-content: stretch; }
.aff-panel-full { flex: 1; }
.aff-panel, .ad-panel {
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
  padding: var(--sp-sm);
}
.panel-col-label {
  font-family: var(--font-mono); font-size: 8px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--md-outline);
  display: flex; align-items: center; gap: 5px; flex-shrink: 0;
  margin-bottom: var(--sp-xs);
}
.panel-live-dot {
  width: 4px; height: 4px; border-radius: 50%; background: var(--gain);
  animation: blink 2s ease-in-out infinite; flex-shrink: 0;
}
.aff-stage { flex: 1; position: relative; }
.aff-slide {
  position: absolute; inset: 0;
  display: flex; align-items: stretch;
  opacity: 0; transform: translateY(2px);
  transition: opacity 1.1s ease-in-out, transform 1.1s ease-in-out;
  pointer-events: none;
}
.aff-slide.active { opacity: 1; transform: translateY(0); pointer-events: auto; }



/* ── Card shell ──────────────────────────────────────── */
.aff-slide-inner {
  position: relative;
  width: 100%; height: 100%;
  border-radius: var(--shape-sm);
  border: 1px solid var(--md-outline-var);
  overflow: hidden; cursor: pointer;
  transition: border-color .25s, box-shadow .25s;
  background: var(--md-surf-2);
}
.aff-slide-inner:hover {
  border-color: var(--aff-color, var(--md-secondary));
  box-shadow: 0 0 0 1px var(--aff-color, var(--md-secondary)),
              0 6px 20px rgba(0,0,0,.4);
}
.aff-slide-inner:hover .aff-banner { transform: scale(1.03); }

/* ── Full-bleed banner image ─────────────────────────── */
.aff-slide-inner picture {
  display: block; width: 100%; height: 100%;
}
.aff-banner {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center center; display: block;
  transition: transform .4s ease;
}
/* Fallback when image is missing - show brand-colored bg */
.aff-banner.aff-banner-missing {
  display: none;
}
.aff-banner.aff-banner-missing ~ .aff-overlay {
  background: linear-gradient(160deg,
    var(--aff-color, var(--md-primary)),
    rgba(0,0,0,.85));
  inset: 0;
}

/* ── Bottom gradient overlay ─────────────────────────── */
.aff-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 24px 12px 10px;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 100%);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 8px;
}
.aff-name {
  font-size: 11px; font-weight: 700;
  color: #fff; line-height: 1.2;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aff-cta-btn {
  font-size: 12px; font-weight: 800; letter-spacing: .06em;
  color: #fff; white-space: nowrap; flex-shrink: 0;
  background: var(--aff-color, var(--md-secondary));
  padding: 9px 20px; border-radius: var(--shape-full);
  min-height: 38px; display: inline-flex; align-items: center;
  border: 1px solid color-mix(in srgb, var(--aff-color, var(--md-secondary)) 60%, #fff 40%);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--aff-color, var(--md-secondary)) 30%, transparent 70%),
    0 4px 16px rgba(0,0,0,.5),
    0 0 20px color-mix(in srgb, var(--aff-color, var(--md-secondary)) 40%, transparent 60%);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, filter .15s;
  text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.aff-slide-inner:hover .aff-cta-btn {
  transform: scale(1.04);
  filter: brightness(1.12);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--aff-color, var(--md-secondary)) 50%, transparent 50%),
    0 6px 24px rgba(0,0,0,.5),
    0 0 32px color-mix(in srgb, var(--aff-color, var(--md-secondary)) 60%, transparent 40%);
}

/* ── Dots ────────────────────────────────────────────── */
.slide-dots {
  position: absolute; bottom: 6px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 4px; z-index: 2;
}
.sdot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--md-outline-var);
  transition: background .3s, transform .3s;
}
.sdot.on { background: var(--md-secondary); transform: scale(1.4); }

.partners-col-div { width: 1px; background: var(--md-outline-var); margin: var(--sp-sm) 0; flex-shrink: 0; }

/* ── MARKET MOVERS BAR ────────────────────────── */
.movers-bar {
  background: var(--md-surf-2);
  border-top: 1px solid var(--md-outline-var);
  height: 44px;
  display: flex;
  align-items: stretch;
  position: sticky; bottom: 0; z-index: 50;
  overflow: visible;
}

.movers-section {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  flex: 1;
  padding: 0 var(--sp-lg);
  overflow: visible;
  min-width: 0;
}

.movers-center {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 0 var(--sp-lg);
  border-left:  1px solid var(--md-outline-var);
  border-right: 1px solid var(--md-outline-var);
  height: 100%;
  white-space: nowrap;
}
.movers-copy {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #4DD0E1;
  letter-spacing: .04em;
}
.movers-legal-sep {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--md-outline);
}
.movers-legal-link {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: .06em;
  color: var(--md-on-surface-var);  /* #BFC8CE - passes WCAG AA on dark bg */
  text-decoration: none;
  transition: color .15s;
}
.movers-legal-link:hover { color: var(--md-primary); }
.movers-coffee-chip {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  color: #2E1500; background: #FF6433;
  border-radius: var(--shape-chip); padding: 1px 7px;
  text-decoration: none; white-space: nowrap;
  transition: opacity .15s;
}
.movers-coffee-chip:hover { opacity: .8; }

.movers-label {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap; flex-shrink: 0;
}
.movers-gain .movers-label { color: var(--gain); }
.movers-loss .movers-label { color: var(--loss); }
.movers-loss { justify-content: flex-end; }

.movers-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}
.movers-loss .movers-chips { justify-content: flex-end; }

.mover-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--shape-chip);
  font-family: var(--font-mono);
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity .2s;
}
.mover-chip.up   { background: var(--gain-cont); border: 1px solid rgba(76,175,80,.22); }
.mover-chip.down { background: var(--loss-cont);  border: 1px solid rgba(239,83,80,.22); }
.mover-chip.mover-placeholder { opacity: .25; }

.mover-sym {
  font-size: 10px; font-weight: 700;
  letter-spacing: .04em;
  color: var(--md-on-surface-var);
}
.mover-pct {
  font-size: 11px; font-weight: 600;
}
.mover-chip.up   .mover-pct { color: var(--gain); }
.mover-chip.down .mover-pct { color: var(--loss); }

/* Tablet - show 2 chips per side */
@media (max-width: 900px) {
  .movers-bar .mover-chip:nth-child(n+3) { display: none; }
}
/* ── Movers section clickable ── */
.movers-section { cursor: pointer; transition: background .15s; }
.movers-section:hover { background: rgba(255,255,255,.04); }
.movers-section:active { background: rgba(255,255,255,.08); }

.movers-view-all {
  font-size: 9px; font-weight: 600; letter-spacing: .08em;
  color: var(--md-primary);
  background: rgba(var(--md-primary-rgb, 100,181,246),.12);
  border: 1px solid rgba(var(--md-primary-rgb, 100,181,246),.25);
  border-radius: 10px; padding: 1px 6px;
  text-transform: uppercase; white-space: nowrap;
  margin-left: 5px; vertical-align: middle;
  transition: background .15s;
}
.movers-section:hover .movers-view-all {
  background: rgba(var(--md-primary-rgb, 100,181,246),.22);
}

/* ── Movers popups ── */
.movers-popup {
  position: fixed; bottom: 48px; z-index: 900;
  background: var(--md-surf-3, #1e1e2e);
  border: 1px solid var(--md-outline-var);
  border-radius: 12px;
  width: 320px;
  box-shadow: 0 -4px 32px rgba(0,0,0,.5);
  opacity: 0; pointer-events: none; visibility: hidden;
  transform: translateY(10px);
  transition: opacity .18s, transform .18s, visibility 0s linear .18s;
}
.movers-popup.open { opacity: 1; pointer-events: auto; visibility: visible; transform: translateY(0); transition: opacity .18s, transform .18s, visibility 0s; }
.movers-popup-gain { left: 0; }
.movers-popup-loss { right: 0; }

.movers-popup-header {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--md-outline-var);
}
.movers-popup-title {
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
}
.movers-popup-title.gain { color: var(--gain); }
.movers-popup-title.loss { color: var(--loss); }
.movers-popup-sub {
  font-size: 10px; color: var(--md-on-surface-var); flex: 1;
}
.movers-modal-close {
  background: none; border: none; cursor: pointer;
  color: var(--md-on-surface-var); font-size: 13px; line-height: 1;
  padding: 2px 4px; border-radius: 4px;
  transition: color .15s, background .15s;
}
.movers-modal-close:hover { color: var(--md-on-surface); background: rgba(255,255,255,.06); }

.movers-popup-body { padding: 10px 14px 4px; }

.movers-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-mono); font-size: 11px;
}
.movers-table th {
  text-align: left; color: var(--md-on-surface-var);
  font-size: 10px; font-weight: 600; letter-spacing: .06em;
  padding: 0 8px 6px 0; border-bottom: 1px solid var(--md-outline-var);
}
.movers-table th:last-child, .movers-table td:last-child { text-align: right; padding-right: 0; }
.movers-table td {
  padding: 6px 8px 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  color: var(--md-on-surface);
  white-space: nowrap;
}
.movers-table tr:last-child td { border-bottom: none; }
.movers-table .col-sym { font-weight: 700; color: var(--md-primary); }
.movers-table .col-name { color: var(--md-on-surface-var); max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
.movers-table .col-chg.gain { color: var(--gain); }
.movers-table .col-chg.loss { color: var(--loss); }
.movers-table .col-pct.gain { color: var(--gain); font-weight: 700; }
.movers-table .col-pct.loss { color: var(--loss); font-weight: 700; }

.movers-modal-footer {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--md-on-surface-var); opacity: .45;
  text-align: center; padding: 6px 0 8px;
}

/* Phone + tablet — 2-row footer: gainers+losers tap row + links row.
   Up to 900px so the long center link row can never overflow and push the
   shell (and the sticky header trail) wide. */
@media (max-width: 900px) {
  .movers-bar {
    height: auto;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .movers-section {
    display: flex;
    flex: 0 0 50%;
    height: 36px;
    padding: 0 var(--sp-sm);
    justify-content: center;
    border-bottom: 1px solid var(--md-outline-var);
    overflow: hidden;
  }
  .movers-section.movers-loss { border-left: 1px solid var(--md-outline-var); }
  .movers-chips { display: none; }
  .movers-label { font-size: 0.6875rem; white-space: nowrap; }
  .movers-view-all { display: none; }
  .movers-section.movers-gain { order: 1; }
  .movers-section.movers-loss { order: 2; }
  .movers-center {
    order: 3;
    flex: 0 0 100%;
    border-left: none; border-right: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 0.5rem;
    padding: 0.375rem var(--sp-sm);
    height: auto;
  }
  .movers-legal-link {
    font-size: 0.75rem;
    min-height: 2rem;
    display: inline-flex; align-items: center;
    padding: 0.25rem 0.125rem;
  }
  .movers-legal-sep  { font-size: 0.75rem; }
  .movers-copy       { font-size: 0.75rem; }
  .movers-hide-mobile { display: none; }
  .movers-coffee-wrap { display: contents; }
  .movers-coffee-chip { font-size: 0.6875rem; }
}


/* ── RESPONSIVE ───────────────────────────────── */

/* 1440p / QHD (≥ 1440px) */
@media (min-width: 1440px) {
  .bottom-row { grid-template-columns: 240px 240px 240px 240px 1fr 1fr; }
  .gauge-arc  { width: 110px; height: 66px; }
}

/* 1920p / FHD large (≥ 1920px) */
@media (min-width: 1920px) {
  .bottom-row { grid-template-columns: 270px 270px 270px 270px 1fr 1fr; }
  .gauge-arc  { width: 125px; height: 75px; }
}

/* QHD / 4K (≥2560px) — scale the whole UI through the root font so every
   rem-based size (text, spacing, shapes) grows proportionally, and cap the
   content width so cards stay dense instead of stretching sparse.
   NOTE: starting points — UNVERIFIED on real 4K hardware. Tune the root
   font clamp ceiling and the max-width once a 4K display is available. */
@media (min-width: 2560px) {
  html { font-size: clamp(16px, 0.5vw + 6px, 30px); }
  main { max-width: 3400px; margin-inline: auto; }

  /* Share the surplus vertical height: the market sections take the lion's
     share (grow 2) and the gauge row a smaller part (grow 1, from the general
     rule below), so the gauges no longer balloon. Distribute the instrument
     rows to fill the taller section cards with content instead of a top-pinned
     void. UNVERIFIED on real 4K hardware — tune the grow ratio / scale ceiling
     against a live 4K screen. */
  main > .section-row     { flex: 2 1 0; }
  .section-row            { grid-template-rows: 1fr; }
  .section-row .card      { display: flex; flex-direction: column; }
  .section-row .inst-list { flex: 1; justify-content: space-between; }
}

@media (max-width: 1600px) { .row-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1400px) {
  .bottom-row { grid-template-columns: 220px 220px 220px 220px 1fr; }
  .bottom-row .cat-mood    { grid-column: span 2; }
  .bottom-row .cat-partners { grid-column: span 2; }
}
@media (max-width: 1100px) {
  .row-5 { grid-template-columns: repeat(2, 1fr); }
  /* 5 sections in 2 columns leaves the last one orphaned — let it fill the row */
  .row-5 > :last-child { grid-column: 1 / -1; }
  .bottom-row { grid-template-columns: repeat(4, 1fr); }
  .bottom-row .cat-mood    { grid-column: span 2; }
  .bottom-row .cat-partners { grid-column: span 2; }
  .bottom-row .cat-partners .partners-body { min-height: 160px; }
  .ad-panel, #ad-slot { min-height: 120px; }
  /* Allow main to scroll on tablet — content taller than viewport */
  main { overflow-y: auto; padding-bottom: 52px; }
}

/* Tablet portrait — iPad Mini (768px) / iPad (810px) */
@media (max-width: 900px) {
  .row-5 { grid-template-columns: repeat(2, 1fr); }
  .bottom-row { grid-template-columns: repeat(2, 1fr); }
  .bottom-row .cat-mood    { grid-column: span 2; }
  .bottom-row .cat-partners { grid-column: span 2; }
  .bottom-row .cat-partners .partners-body { min-height: 180px; }
  main { padding-bottom: 52px; }
}

@media (max-width: 720px) {
  .row-5 { grid-template-columns: 1fr; }
  .bottom-row { grid-template-columns: 1fr; }
  .bottom-row .cat-mood    { grid-column: 1; }
  .bottom-row .cat-partners { grid-column: 1; }
  .bottom-row .cat-partners .partners-body { min-height: 160px; }
  .ad-panel, #ad-slot { min-height: 120px; }
  main { padding-bottom: 80px; }

  /* Affiliate button — smaller on mobile to avoid overflow */
  .aff-cta-btn {
    font-size: 10px;
    padding: 6px 10px;
    min-height: 30px;
  }
  .aff-name { font-size: 10px; }
}


/* ── HEADER RESPONSIVE ────────────────────────────── */
/* below 600px — hide yt/reddit */
@media (max-width: 37.5rem) {
  .yt-live-link, .reddit-community-link { display: none; }
  .top-bar { padding: 0 var(--sp-lg); }
  .top-bar-trail { gap: var(--sp-md); }
}
/* below 480px — hide brand-sub */
@media (max-width: 30rem) {
  .brand-sub { display: none; }
}
/* below 360px (Galaxy Z Fold folded) — show "GLOBAL MARKETS" only */
@media (max-width: 22.5rem) {
  .brand-dashboard { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track, .brand-icon::after, .chip-live .dot, .ss-regime-dot { animation: none !important; }
}


/* Legal / admin page styles → content.css (not loaded on the dashboard) */

/* ══════════════════════════════════════════════════
   MD3 TOOLTIP  —  usage: data-tooltip="Your text"
   Optional: data-tooltip-pos="top|bottom|left|right"
   Default position: top
══════════════════════════════════════════════════ */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::before,
[data-tooltip]::after {
  pointer-events: none;
  position: absolute;
  z-index: 9999;
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}
/* Bubble */
[data-tooltip]::before {
  content: attr(data-tooltip);
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #1e2130;
  color: #e8eaed;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .02em;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid rgba(6,182,212,.6);
  box-shadow:
    0 0 0 1px rgba(168,85,247,.3),
    0 0 0 3px rgba(6,182,212,.08),
    0 4px 20px rgba(0,0,0,.6),
    0 0 18px rgba(6,182,212,.25),
    0 0 35px rgba(168,85,247,.12);
}
/* Arrow */
[data-tooltip]::after {
  content: '';
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent;
  border-top-color: #2a2d36;
  border-bottom: none;
}
/* Hover / focus show */
[data-tooltip]:hover::before,
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::before,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Position: bottom */
[data-tooltip][data-tooltip-pos="bottom"]::before {
  bottom: auto;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-4px);
}
[data-tooltip][data-tooltip-pos="bottom"]::after {
  bottom: auto;
  top: calc(100% + 2px);
  transform: translateX(-50%) translateY(-4px);
  border-top-color: transparent;
  border-bottom: 5px solid #2a2d36;
  border-top: none;
}
[data-tooltip][data-tooltip-pos="bottom"]:hover::before,
[data-tooltip][data-tooltip-pos="bottom"]:hover::after,
[data-tooltip][data-tooltip-pos="bottom"]:focus-visible::before,
[data-tooltip][data-tooltip-pos="bottom"]:focus-visible::after {
  transform: translateX(-50%) translateY(0);
}
/* Position: right */
[data-tooltip][data-tooltip-pos="right"]::before {
  bottom: auto; top: 50%; left: calc(100% + 8px);
  transform: translateY(-50%) translateX(-4px);
}
[data-tooltip][data-tooltip-pos="right"]::after {
  bottom: auto; top: 50%; left: calc(100% + 2px);
  transform: translateY(-50%) translateX(-4px);
  border: 5px solid transparent; border-right-color: #2a2d36; border-left: none;
}
[data-tooltip][data-tooltip-pos="right"]:hover::before,
[data-tooltip][data-tooltip-pos="right"]:hover::after,
[data-tooltip][data-tooltip-pos="right"]:focus-visible::before,
[data-tooltip][data-tooltip-pos="right"]:focus-visible::after {
  transform: translateY(-50%) translateX(0);
}
/* Hide native title tooltip when data-tooltip is used */
[data-tooltip] { -webkit-user-select: none; }

/* ══════════════════════════════════════════════════
   RESET VIEW CHIP (status strip, left side)
══════════════════════════════════════════════════ */
.ss-reset-view {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 12px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 20px;
  background: rgba(255,255,255,.06);
  color: var(--md-on-surface-var);
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  letter-spacing: .04em; cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
  white-space: nowrap;
}
.ss-reset-view:hover {
  border-color: rgba(255,100,100,.6);
  background: rgba(255,100,100,.12);
  color: #ff8080;
}
.ss-reset-icon { font-size: 13px; line-height: 1; }

/* ══════════════════════════════════════════════════
   AI MOOD CHIP (status strip)
══════════════════════════════════════════════════ */
.ss-aimood { align-items: center; padding: 0 0.125rem; }

.ss-aimood-btn {
  display: inline-flex; align-items: center; gap: 0.3125rem;
  padding: 0.1875rem 0.5625rem 0.1875rem 0.4375rem;
  background: linear-gradient(135deg, rgba(6,182,212,.15) 0%, rgba(168,85,247,.15) 100%);
  border: 1px solid rgba(6,182,212,.4);
  border-radius: 1.25rem;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--dt-2xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: #67e8f9;
  position: relative;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.ss-aimood-btn:hover {
  border-color: rgba(6,182,212,.75);
  background: linear-gradient(135deg, rgba(6,182,212,.25) 0%, rgba(168,85,247,.25) 100%);
  box-shadow: 0 0 12px rgba(6,182,212,.35);
}
.ss-aimood-glyph {
  font-size: var(--dt-xs);
  animation: aimood-spin 8s linear infinite;
}
@keyframes aimood-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.ss-aimood-label { color: #e2e8f0; }

/* Subtle pulse ring to signal freshness */
.ss-aimood-pulse {
  display: inline-block;
  width: 0.375rem; height: 0.375rem;
  border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 0 0 rgba(34,211,238,.6);
  animation: aimood-pulse 2.4s ease-out infinite;
}
@keyframes aimood-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,211,238,.7); }
  70%  { box-shadow: 0 0 0 6px rgba(34,211,238,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,211,238,0); }
}

/* ══════════════════════════════════════════════════
   AI MOOD POPUP (glassmorphism)
══════════════════════════════════════════════════ */
.aimood-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(3px);
  z-index: 1800;
}
.aimood-backdrop.open { display: block; }

.aimood-popup {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.94);
  opacity: 0;
  width: min(33.75rem, 92vw);
  z-index: 1900;
  /* Glassmorphism dark */
  background: rgba(8,12,24,.82);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-radius: 1rem;
  /* Cyan-to-purple gradient border glow */
  border: 1px solid transparent;
  background-clip: padding-box;
  box-shadow:
    0 0 0 1px rgba(6,182,212,.5),
    0 0 0 3px rgba(168,85,247,.2),
    0 0 40px rgba(6,182,212,.18),
    0 20px 60px rgba(0,0,0,.65);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
}
.aimood-popup.open {
  display: block;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.aimood-popup-header {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.875rem 1.125rem 0.75rem;
  border-bottom: 1px solid rgba(6,182,212,.2);
}
.aimood-popup-title {
  display: flex; align-items: center; gap: 0.5rem;
  flex: 1;
}
.aimood-title-glyph {
  font-size: var(--dt-lg);
  background: linear-gradient(135deg, #22d3ee, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: aimood-spin 8s linear infinite;
}
.aimood-title-text {
  font-family: var(--font-body);
  font-size: var(--dt-sm); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  background: linear-gradient(90deg, #22d3ee, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.aimood-popup-meta {
  font-family: var(--font-mono);
  font-size: var(--dt-2xs); font-weight: 500;
  color: rgba(148,163,184,.7);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.aimood-close-btn {
  background: none; border: none;
  font-size: var(--dt-base); line-height: 1;
  color: rgba(148,163,184,.6);
  cursor: pointer; padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  transition: color .15s, background .15s;
}
.aimood-close-btn:hover { color: #e2e8f0; background: rgba(255,255,255,.07); }

.aimood-popup-body { padding: 1.125rem 1.25rem 0.875rem; }

.aimood-text {
  font-family: var(--font-body);
  font-size: var(--dt-md); line-height: 1.65;
  color: #f1f5f9;
  margin: 0;
  letter-spacing: .01em;
}

.aimood-popup-footer {
  padding: 0.625rem 1.25rem 0.875rem;
  border-top: 1px solid rgba(255,255,255,.06);
}
.aimood-disclaimer {
  font-family: var(--font-mono);
  font-size: var(--dt-2xs);
  color: #ff4444;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.5;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .aimood-popup { width: 96vw; border-radius: 0.75rem; }
}

/* ══════════════════════════════════════════════════
   ECONOMIC CALENDAR  —  chip + popup agenda
══════════════════════════════════════════════════ */
.ss-cal { align-items: center; padding: 0 0.125rem; }
.ss-cal-btn {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.1875rem 0.75rem;
  border: 1px solid rgba(6,182,212,.4);
  border-radius: 1.25rem;
  background: rgba(255,255,255,.06);
  color: var(--md-on-surface-var);
  font-family: var(--font-body); font-size: var(--dt-xs); font-weight: 600;
  letter-spacing: .04em; cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: border-color .2s, background .2s, box-shadow .2s, color .2s;
}
.ss-cal-btn:hover {
  border-color: rgba(6,182,212,.75);
  background: rgba(6,182,212,.12);
  box-shadow: 0 0 12px rgba(6,182,212,.35);
  color: #e2e8f0;
}
.ss-cal-glyph { flex-shrink: 0; color: #67e8f9; }

.ecocal-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  z-index: 1800;
}
.ecocal-backdrop.open { display: block; }

.ecocal-popup {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.94);
  width: min(35rem, 94vw);
  max-height: 82vh;
  /* Glassmorphism dark - matches AI Mood popup */
  background: rgba(8,12,24,.82);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-radius: 1rem;
  border: 1px solid transparent;
  background-clip: padding-box;
  /* Cyan-to-purple gradient border glow */
  box-shadow:
    0 0 0 1px rgba(6,182,212,.5),
    0 0 0 3px rgba(168,85,247,.2),
    0 0 40px rgba(6,182,212,.18),
    0 20px 60px rgba(0,0,0,.65);
  opacity: 0;
  z-index: 1900;
  overflow: hidden;
  flex-direction: column;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
}
.ecocal-popup.open {
  display: flex;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.ecocal-popup-header {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.875rem 1.125rem 0.75rem;
  border-bottom: 1px solid rgba(6,182,212,.2);
  flex-shrink: 0;
}
.ecocal-popup-title {
  display: flex; align-items: center; gap: 0.5rem;
}
.ecocal-title-glyph { color: #22d3ee; }
.ecocal-title-text {
  font-family: var(--font-body);
  font-size: var(--dt-sm); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  background: linear-gradient(90deg, #22d3ee, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ecocal-popup-meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--dt-2xs); font-weight: 500;
  color: rgba(148,163,184,.7);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ecocal-close-btn {
  background: none; border: none; cursor: pointer;
  color: rgba(148,163,184,.6);
  font-size: var(--dt-base); line-height: 1;
  padding: 0.125rem 0.25rem; border-radius: 0.25rem;
  transition: color .15s, background .15s;
}
.ecocal-close-btn:hover { color: #e2e8f0; background: rgba(255,255,255,.07); }

.ecocal-popup-body {
  padding: 0.375rem 0;
  overflow-y: auto;
}

/* Section divider (Past / Upcoming) */
.ecocal-section {
  font-family: var(--font-mono);
  font-size: var(--dt-2xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(148,163,184,.7);
  padding: 0.75rem 1.125rem 0.375rem;
}

/* Agenda row */
.ecocal-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 1.125rem;
  border-left: 3px solid transparent;
}
.ecocal-row + .ecocal-row { border-top: 1px solid rgba(255,255,255,.04); }
.ecocal-date {
  font-family: var(--font-mono);
  font-size: var(--dt-sm); font-weight: 700;
  width: 4.375rem; flex-shrink: 0;
  color: #cbd5e1;
}
.ecocal-name {
  display: flex; flex-direction: column; gap: 0.0625rem;
  flex: 1;
}
.ecocal-code-wrap { display: inline-flex; align-items: center; gap: 0.4375rem; }
.ecocal-code {
  font-family: var(--font-body);
  font-size: var(--dt-base); font-weight: 700;
  letter-spacing: .04em;
  color: #e2e8f0;
}
.ecocal-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 0.9375rem; height: 0.9375rem; border-radius: 50%;
  border: 1px solid rgba(103,232,249,.5);
  font-family: var(--font-mono); font-size: var(--dt-2xs); font-weight: 700;
  line-height: 1; font-style: normal; text-decoration: none;
  color: #67e8f9; flex-shrink: 0;
  opacity: .7;
  transition: opacity .15s, background .15s, border-color .15s;
}
.ecocal-info:hover {
  opacity: 1;
  background: rgba(103,232,249,.15);
  border-color: #67e8f9;
}
.ecocal-full {
  font-family: var(--font-body);
  font-size: var(--dt-2xs); font-weight: 500;
  letter-spacing: .02em;
  color: var(--md-on-surface-var);
}
.ecocal-time {
  font-family: var(--font-mono);
  font-size: var(--dt-sm);
  color: var(--md-on-surface-var);
  flex-shrink: 0;
}

/* Past events - greyed out */
.ecocal-row.past { opacity: .4; }
.ecocal-row.past .ecocal-code { font-weight: 600; }

/* Upcoming urgency accents */
.ecocal-row.urgent  { border-left-color: #ef4444; }   /* < 4h  */
.ecocal-row.today   { border-left-color: #f87171; }   /* today */
.ecocal-row.soon    { border-left-color: #f59e0b; }   /* this week */
.ecocal-row.distant { border-left-color: #475569; }   /* later */

.ecocal-popup-footer {
  padding: 0.625rem 1.125rem 0.875rem;
  border-top: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.ecocal-disclaimer {
  font-family: var(--font-mono);
  font-size: var(--dt-2xs); font-weight: 600;
  color: var(--md-on-surface-var);
  letter-spacing: .02em;
  line-height: 1.5;
}
.ecocal-empty {
  padding: 1.75rem 1.125rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--dt-sm);
  color: var(--md-on-surface-var);
}

@media (max-width: 600px) {
  .ecocal-popup { width: 96vw; border-radius: 0.75rem; max-height: 86vh; }
  .ecocal-date  { width: 3.5rem; }
}

/* ── Info / Guide popup ──────────────────────────────────────────────────── */
.info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--md-on-surface-var, #888);
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  margin-left: 3px;
  vertical-align: middle;
  opacity: 0.5;
  transition: opacity 0.15s, color 0.15s;
  line-height: 1;
}
.info-btn:hover { opacity: 1; color: var(--md-primary); }

.info-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.info-modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.info-modal-backdrop[hidden] { display: none; }

.info-modal-box {
  background: rgba(8,12,24,.88);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid transparent;
  background-clip: padding-box;
  border-radius: 16px;
  width: 100%;
  max-width: 520px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(6,182,212,.5),
    0 0 0 3px rgba(168,85,247,.2),
    0 0 40px rgba(6,182,212,.18),
    0 20px 60px rgba(0,0,0,.65);
  transform: translateY(12px);
  transition: transform 0.4s ease, opacity 0.4s ease;
  opacity: 0;
}
.info-modal-backdrop.is-open .info-modal-box {
  transform: translateY(0);
  opacity: 1;
}

.info-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--md-outline-var, rgba(255,255,255,0.08));
}
.info-modal-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--md-primary, #4dd0e1);
}
.info-modal-close {
  background: none;
  border: none;
  color: var(--md-on-surface-var, #888);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background 0.15s;
}
.info-modal-close:hover { background: rgba(255,255,255,0.08); }

.info-modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--md-on-surface, #e0e0e0);
}
.info-modal-body p { margin-bottom: 10px; }
.info-modal-body p:last-child { margin-bottom: 0; }
.info-modal-body strong { color: var(--md-primary, #4dd0e1); font-weight: 600; }
.info-modal-loading { color: var(--md-on-surface-var, #888); font-size: 0.85rem; }

.info-modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--md-outline-var, rgba(255,255,255,0.08));
  text-align: right;
}
.info-modal-full-link {
  font-size: 0.8rem;
  color: var(--md-primary, #4dd0e1);
  text-decoration: none;
  font-weight: 600;
}
.info-modal-full-link:hover { text-decoration: underline; }

.guide-aff-nudge {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--md-outline-var, rgba(255,255,255,0.08));
}
.guide-aff-nudge a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  transition: opacity 0.15s;
}
.guide-aff-nudge a:hover { opacity: 0.8; }
.guide-aff-nudge-text { flex: 1; }
.guide-aff-nudge-offer {
  flex-shrink: 0;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--shape-chip);
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}
.guide-aff-nudge-arrow { font-size: 0.9rem; flex-shrink: 0; margin-left: 8px; }

/* ══════════════════════════════════════════════════
   BREAKING NEWS ALERT BANNER
   Fixed top, slides down from above the viewport.
   MD3 error container colours + elevated shadow.
══════════════════════════════════════════════════ */
/* Breaking-news banner: MD3-semantic. It is informational, not an error, so
   the surface is a neutral tonal container (--md-surf-4) with on-surface text.
   Red is used only as the "BREAKING" accent (chip + live dot) to signal urgency
   without misusing the error color role. */
.market-alert {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 2000;
  background: var(--md-surf-4);
  transform: translateY(-100%);
  transition: transform 0.35s cubic-bezier(0.2, 0, 0, 1);  /* MD3 emphasized */
  /* Signature cyan -> purple glow border (matches AI Mood popup + nav drawer) */
  box-shadow:
    0 0 0 1px rgba(6,182,212,.5),
    0 0 0 3px rgba(168,85,247,.2),
    0 0 40px rgba(6,182,212,.18),
    0 10px 40px rgba(0,0,0,.55);
  will-change: transform;
}
html[data-dash-theme="light"] .market-alert {
  box-shadow:
    0 0 0 1px rgba(6,182,212,.45),
    0 0 0 3px rgba(168,85,247,.16),
    0 0 40px rgba(6,182,212,.12),
    0 10px 40px rgba(0,0,0,.18);
}
.market-alert.visible {
  transform: translateY(0);
}
.market-alert-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 10px 20px;
}
.market-alert-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--md-error);
  flex-shrink: 0;
  animation: alert-live-pulse 1.8s ease-in-out infinite;
}
.market-alert-label {
  /* MD3 label-small on a red accent chip (error-container is theme-aware) */
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  color: var(--md-on-error-cont);
  background: var(--md-error-cont);
  padding: 3px 9px;
  border-radius: 999px;
  flex-shrink: 0;
  white-space: nowrap;
}
.market-alert-msg {
  /* MD3 body-medium */
  flex: 1;
  font-size: 14px; font-weight: 500;
  color: var(--md-on-surface);
  line-height: 1.4;
}
.market-alert-dismiss {
  /* MD3 standard icon button: no border, tonal state layer on hover */
  background: none;
  border: none;
  border-radius: 50%;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: var(--md-on-surface-var);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.market-alert-dismiss .material-symbols-outlined { font-size: 20px; }
.market-alert-dismiss:hover {
  background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
  color: var(--md-on-surface);
}

@keyframes alert-live-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .45; transform: scale(.82); }
}
@media (prefers-reduced-motion: reduce) {
  .market-alert-dot { animation: none; }
}

/* ══════════════════════════════════════════════════
   FULLSCREEN MODE
   Triggered by body.fullscreen (set via JS fullscreenchange)
══════════════════════════════════════════════════ */
.fs-hint {
  display: none;
  position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%);
  z-index: 1800;
  background: rgba(0,0,0,.7); color: rgba(255,255,255,.7);
  font-size: 11px; font-weight: 500; letter-spacing: .04em;
  padding: 6px 16px; border-radius: var(--shape-full);
  pointer-events: none;
  animation: fadeOutHint 3s ease forwards;
}
@keyframes fadeOutHint {
  0%   { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; }
}
body.fullscreen .fs-hint        { display: block; }
body.fullscreen .top-bar        { display: none; }
/* Top-bar is removed from the grid in fullscreen — drop its track so the
   remaining rows map correctly: status(auto) · main(1fr) · footer(auto).
   Without this the 1fr shifts onto the footer and a black gap opens above it. */
body.fullscreen .shell          { padding-top: 0; grid-template-rows: auto 1fr auto; }
body.fullscreen .status-strip   { border-radius: 0; }
body.fullscreen .cookie-notice  { display: none !important; }

/* When the viewport is taller than the content (F11 browser-fullscreen, tall
   monitors, or API fullscreen) the gauge row absorbs the leftover vertical
   space so no black gap opens between the gauges and the footer. When content
   overflows (normal windowed) there is no leftover space, so these stay inert. */
main > .bottom-row {
  flex: 1 0 auto;   /* grow into spare space, never shrink below content */
}
/* Cards inside bottom-row fill the taller row */
.bottom-row .card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* Gauge card centres its content vertically in the extra height */
.bottom-row .gauge-card {
  flex: 1;
  justify-content: center;
}
/* Fullscreen: the cards grow wide/tall, so centre the gauge horizontally and
   let the arc scale into the extra room. Without this the fixed-width arc
   strands itself bottom-left with a dead gap to the right. Scoped to
   body.fullscreen so the windowed layout is untouched. height:auto keeps the
   120×70 viewBox aspect ratio, so the arc stays a proper semicircle. */
body.fullscreen .bottom-row .gauge-wrap { justify-content: center; }
body.fullscreen .bottom-row .gauge-arc  { width: clamp(125px, 9vw, 200px); height: auto; }
/* Partners card body fills the height so affiliate slides stretch */
.bottom-row .partners-card,
.bottom-row .partners-body {
  flex: 1;
  height: 100%;
}
.bottom-row .aff-panel,
.bottom-row .aff-stage,
.bottom-row .aff-slide,
.bottom-row .aff-slide-inner {
  height: 100%;
}

/* ══════════════════════════════════════════════════
   FIRST-VISIT WELCOME - desktop modal / mobile sheet
══════════════════════════════════════════════════ */
.gmw { position: fixed; inset: 0; z-index: 3000; display: flex; }
.gmw[hidden] { display: none; }
.gmw-scrim {
  position: absolute; inset: 0; background: rgba(0, 0, 0, .55);
  opacity: 0; transition: opacity .22s ease;
}
.gmw.open .gmw-scrim { opacity: 1; }
.gmw-dialog {
  position: relative; margin: auto;
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100vh - 48px); overflow-y: auto;
  color: var(--md-on-surface);
  border-radius: 20px; padding: 24px;
  /* Signature glass + cyan->purple glow, matching the update toast / AI Mood popup */
  background: color-mix(in srgb, var(--md-surface) 82%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow:
    0 0 0 1px rgba(6, 182, 212, .5),
    0 0 0 3px rgba(168, 85, 247, .2),
    0 0 40px rgba(6, 182, 212, .18),
    0 14px 44px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 255, 255, .10);
  opacity: 0; transform: scale(.96);
  transition: opacity .22s ease, transform .22s ease;
}
html[data-dash-theme="light"] .gmw-dialog {
  box-shadow:
    0 0 0 1px rgba(6, 182, 212, .45),
    0 0 0 3px rgba(168, 85, 247, .16),
    0 0 40px rgba(6, 182, 212, .12),
    0 14px 44px rgba(0, 0, 0, .18),
    inset 0 1px 0 rgba(255, 255, 255, .6);
}
.gmw.open .gmw-dialog { opacity: 1; transform: scale(1); }

/* Mobile: MD3 bottom sheet (flush; portaled + z-index sits above the bottom nav) */
.gmw--mobile { align-items: flex-end; }
.gmw--mobile .gmw-dialog {
  margin: 0; width: 100%; max-width: none;
  border-radius: 28px 28px 0 0;
  transform: translateY(100%);
  padding: 30px 22px calc(22px + env(safe-area-inset-bottom, 0px));
}
.gmw--mobile.open .gmw-dialog { transform: translateY(0); }
/* MD3 drag handle */
.gmw--mobile .gmw-dialog::before {
  content: ''; position: absolute; top: 10px; left: 50%;
  width: 32px; height: 4px; margin-left: -16px;
  border-radius: 2px; background: var(--md-on-surface-var); opacity: .4;
}

/* Content toggles (JS sets the mode class) */
.gmw--desktop .gmw-m { display: none; }
.gmw--mobile  .gmw-d { display: none; }

.gmw-close {
  position: absolute; top: 12px; right: 12px;
  background: none; border: 0; cursor: pointer; color: inherit;
  opacity: .6; display: inline-flex; padding: 4px;
}
.gmw-close:hover { opacity: 1; }
.gmw-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--gain);
}
.gmw-dot {
  width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  animation: gmwPulse 2s ease-in-out infinite;
}
@keyframes gmwPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.gmw-title { font-size: 1.25rem; margin: 10px 0 12px; }
.gmw-intro { font-size: .95rem; line-height: 1.5; opacity: .9; margin: 0 0 14px; }
.gmw-free {
  display: inline-flex; align-items: center; gap: .3rem; width: fit-content;
  margin: 4px 0 14px;
  font-family: var(--font-mono, monospace); font-size: .72rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--md-on-surface);
  background: color-mix(in srgb, var(--md-primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--md-primary) 40%, transparent);
  padding: 3px 10px; border-radius: 999px;
}
.gmw-free .material-symbols-outlined { font-size: 15px; color: var(--md-primary); }
.gmw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.gmw-list li { display: flex; gap: 12px; align-items: flex-start; }
.gmw-ic { color: var(--md-primary); font-size: 22px; flex: 0 0 auto; }
.gmw-txt { font-size: .9rem; line-height: 1.45; }
.gmw-txt strong { display: block; margin-bottom: 2px; }
.gmw-bigscreen { font-size: .9rem; line-height: 1.5; opacity: .9; margin: 4px 0 14px; }
.gmw-actions { display: flex; gap: 10px; margin-top: 20px; }
.gmw-share, .gmw-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; padding: 11px 18px; font-weight: 600; font-size: .9rem;
  cursor: pointer; border: 0; flex: 1;
}
.gmw-cta {
  background: linear-gradient(135deg, #7C4DFF, #2962FF); color: #fff;
  box-shadow: 0 4px 12px rgba(41, 98, 255, .40);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.gmw-cta:hover  { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(41, 98, 255, .50); }
.gmw-cta:active { filter: brightness(.96); transform: translateY(0); }
.gmw-share {
  background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); color: inherit;
  border: 1px solid var(--md-outline-var);
}
.gmw-share .material-symbols-outlined,
.gmw-cta   .material-symbols-outlined { font-size: 18px; }
.gmw-learn {
  display: block; margin-top: 14px; text-align: center;
  font-size: .85rem; color: var(--md-primary); text-decoration: none;
}
.gmw-learn:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  .gmw-scrim, .gmw-dialog { transition: none; }
  .gmw-dot { animation: none; }
}

/* ══════════════════════════════════════════════════
   COOKIE NOTICE BAR - fixed bottom, MD3 surface
══════════════════════════════════════════════════ */
/* ── Flip panel mobile ───────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* Dog-ear slightly larger on mobile for touch */
  .card-fold { width: 38px; height: 38px; }
  /* News text slightly larger for readability on small screens */
  .news-item a  { font-size: 13px; }
}

.cookie-notice {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1900;
  background: var(--md-surf-4);
  border-top: 1px solid var(--md-outline-var);
  box-shadow: 0 -2px 12px rgba(0,0,0,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 20px;
  animation: slideUpNotice .3s cubic-bezier(0.2, 0, 0, 1);
}
@keyframes slideUpNotice {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.cookie-notice.hide {
  transform: translateY(100%);
  opacity: 0;
  transition: transform .3s cubic-bezier(0.4, 0, 1, 1), opacity .25s;
}
.cookie-notice-text {
  font-size: 12px;
  color: var(--md-on-surface-var);
  text-align: center;
}
.cookie-notice-text strong {
  color: var(--md-on-surface);
}
.cookie-notice-text a {
  color: var(--md-primary);
  text-decoration: underline;
  margin-left: 4px;
}
.cookie-notice-text a:hover {
  opacity: .8;
}
.cookie-notice-btn {
  background: var(--md-primary);
  color: var(--md-on-primary);
  border: none;
  border-radius: var(--shape-full);
  padding: 6px 18px;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity .15s;
}
.cookie-notice-btn:hover { opacity: .88; }

/* Affiliate mgmt table + legal-contact → content.css */

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAV — global app shell (every page, <= 720px)
   ═══════════════════════════════════════════════════════════════════════════ */
.mobile-bottom-nav { display: none; }

@media (max-width: 720px) {
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1200;
    align-items: center;
    justify-content: space-around;
    /* 80dp content zone + safe-area inset added BELOW it (not absorbed into
       the height), so the pill + label keep their breathing room on phones
       with a home indicator. Symmetric 8px base padding. */
    min-height: calc(80px + env(safe-area-inset-bottom, 0px));
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--md-surface);
    border-top: 1px solid var(--md-outline-var);
  }
  .mnav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    text-decoration: none;
    color: var(--md-on-surface-var);
    -webkit-tap-highlight-color: transparent;
  }
  .mnav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 32px;
    border-radius: 16px;
    font-size: 24px;
    line-height: 1;
    background: transparent;
    transition:
      background-color 250ms cubic-bezier(0.05, 0.7, 0.1, 1.0),
      color 200ms cubic-bezier(0.2, 0, 0, 1);
  }
  .mnav-label { font-size: 12px; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; }
  .mnav-item:active .mnav-icon { background: color-mix(in srgb, var(--md-on-surface) 10%, transparent); }
  .mnav-item.is-active { color: var(--md-primary); }
  .mnav-item.is-active .mnav-icon { background: var(--md-primary-container); color: var(--md-primary); }

  /* Clearance so content isn't hidden behind the fixed nav (main is the scroller) */
  main { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }

  /* Keep the brand title from breaking "DASHBOARD" mid-word on narrow screens */
  .brand-dashboard { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .mnav-icon { transition: none; }
}

/* ── New-version refresh toast (MD3 Expressive, glass) ──────────────────────
   Shown when the server reports a newer build than the one this page loaded.
   Glass surface + gradient icon badge and pill action to match the dashboard;
   theme-aware via tokens so it reads correctly in light and dark. */
.gmd-update-toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 4000; box-sizing: border-box;
  display: flex; align-items: center; gap: 12px;
  min-height: 56px;
  min-width: min(360px, calc(100vw - 24px));
  max-width: min(560px, calc(100vw - 24px));
  padding: 10px 12px 10px 14px; border-radius: 18px;
  background: color-mix(in srgb, var(--md-surface, #1c1b1f) 80%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  /* Signature cyan -> purple glow border (matches AI Mood popup + nav drawer) */
  box-shadow:
    0 0 0 1px rgba(6,182,212,.5),
    0 0 0 3px rgba(168,85,247,.2),
    0 0 40px rgba(6,182,212,.18),
    0 14px 44px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.10);
  color: var(--md-on-surface, #e6e1e5);
  font-size: .9rem; font-weight: 500; line-height: 1.3;
  animation: gmdToastIn .3s cubic-bezier(.2, .8, .2, 1);
}
html[data-dash-theme="light"] .gmd-update-toast {
  box-shadow:
    0 0 0 1px rgba(6,182,212,.45),
    0 0 0 3px rgba(168,85,247,.16),
    0 0 40px rgba(6,182,212,.12),
    0 14px 44px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.6);
}
.gmd-update-toast-msg { flex: 1 1 auto; }
@keyframes gmdToastIn {
  from { opacity: 0; transform: translate(-50%, 16px) scale(.98); }
  to   { opacity: 1; transform: translate(-50%, 0)    scale(1); }
}
.gmd-update-toast-badge {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 12px;
  background: linear-gradient(135deg, #7C4DFF, #2962FF); color: #fff;
  box-shadow: 0 4px 12px rgba(124, 77, 255, .45);
}
.gmd-update-toast-badge .material-symbols-outlined { font-size: 20px; }
.gmd-update-toast-link {
  color: var(--md-primary, #7C4DFF); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.gmd-update-toast-btn {
  flex: 0 0 auto; border: none; cursor: pointer; white-space: nowrap;
  background: linear-gradient(135deg, #7C4DFF, #2962FF); color: #fff;
  font: inherit; font-weight: 700; letter-spacing: .01em;
  min-height: 36px; padding: 8px 18px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(41, 98, 255, .40);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.gmd-update-toast-btn:hover  { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(41, 98, 255, .50); }
.gmd-update-toast-btn:active { filter: brightness(.96); transform: translateY(0); }
.gmd-update-toast-close {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border: none; border-radius: 50%;
  background: none; color: var(--md-on-surface-var, #c9c5d0); cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.gmd-update-toast-close .material-symbols-outlined { font-size: 20px; }
.gmd-update-toast-close:hover  { background: color-mix(in srgb, var(--md-on-surface, #fff) 8%, transparent);  color: var(--md-on-surface, #e6e1e5); }
.gmd-update-toast-close:active { background: color-mix(in srgb, var(--md-on-surface, #fff) 12%, transparent); }
@media (prefers-reduced-motion: reduce) { .gmd-update-toast { animation: none; } }

/* ── Site navigation drawer (dashboard, desktop only) ───────────────────────
   MD3 Expressive: gradient launcher, glass drawer, pill nav items with tinted
   icon chips, emphasized motion and a staggered item entrance. */
.site-nav-launcher {
  position: fixed; left: 0; top: 50%; transform: translateY(-50%);
  z-index: 1200; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 44px; padding: 0; cursor: pointer;
  border: none; border-radius: 0 14px 14px 0;
  background: linear-gradient(135deg, #7C4DFF, #2962FF); color: #fff;
  box-shadow: 2px 0 12px rgba(41, 98, 255, .42), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: width .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s ease, filter .15s ease;
}
.site-nav-launcher:hover,
.site-nav-launcher[aria-expanded="true"] {
  width: 28px; filter: brightness(1.08);
  box-shadow: 4px 0 18px rgba(124, 77, 255, .52), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.site-nav-launcher .material-symbols-outlined { font-size: 17px; transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.site-nav-launcher:hover .material-symbols-outlined { transform: translateX(1px); }

.site-nav-scrim {
  position: fixed; inset: 0; z-index: 1300; background: rgba(0, 0, 0, .42);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .25s ease;
}
.site-nav-scrim.open { opacity: 1; }

.site-nav-drawer {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 1400;
  width: 320px; max-width: 86vw; box-sizing: border-box;
  display: flex; flex-direction: column; padding: 16px 14px 18px;
  background: var(--md-surf-2, var(--md-surface, #fff));
  color: var(--md-on-surface, #1c1b1f);
  border: 1px solid transparent;
  border-radius: 0 28px 28px 0;
  /* Cyan-to-purple gradient border glow, matching the AI Mood popup */
  box-shadow:
    0 0 0 1px rgba(6, 182, 212, .5),
    0 0 0 3px rgba(168, 85, 247, .2),
    0 0 40px rgba(6, 182, 212, .18),
    8px 0 60px rgba(0, 0, 0, .5);
  transform: translateX(-104%); transition: transform .34s cubic-bezier(.2, .9, .2, 1);
}
.site-nav-drawer.open { transform: translateX(0); }
.site-nav-drawer-head {
  display: flex; align-items: center; gap: 12px; padding: 4px 6px 14px;
}
.site-nav-drawer-logo {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px;
  object-fit: cover; box-shadow: 0 3px 10px rgba(0, 0, 0, .28);
}
.site-nav-drawer-titles { flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.15; }
.site-nav-drawer-title { font-size: 1.3rem; font-weight: 800; letter-spacing: .5px; }
.site-nav-drawer-sub {
  font-size: .7rem; font-weight: 700; letter-spacing: .9px; text-transform: uppercase;
  color: var(--md-on-surface-var, #5f5f6b);
}
.site-nav-drawer-close {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border: none; border-radius: 50%;
  background: none; color: var(--md-on-surface-var, #5f5f6b); cursor: pointer;
  transition: background .12s ease;
}
.site-nav-drawer-close:hover { background: color-mix(in srgb, var(--md-on-surface, #000) 8%, transparent); }
.site-nav-list { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.site-nav-item {
  display: flex; align-items: center; gap: 14px; padding: 10px 12px;
  border-radius: 16px; text-decoration: none; color: var(--md-on-surface, #1c1b1f);
  font-size: .95rem; font-weight: 600;
  transition: background .14s ease, transform .14s ease;
}
.site-nav-item:hover {
  background: var(--md-secondary-container, color-mix(in srgb, var(--md-primary, #7C4DFF) 14%, transparent));
  transform: translateX(3px);
}
.site-nav-item-icon {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 11px;
  background: color-mix(in srgb, var(--md-primary, #7C4DFF) 12%, transparent);
  color: var(--md-primary, #7C4DFF);
}
.site-nav-item-icon .material-symbols-outlined { font-size: 21px; }

@media (max-width: 720px) {
  .site-nav-launcher, .site-nav-scrim, .site-nav-drawer { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav-drawer, .site-nav-scrim, .site-nav-launcher,
  .site-nav-launcher .material-symbols-outlined { transition: none; }
  .site-nav-drawer.open .site-nav-item { animation: none; }
}