:root {
  /* ── AlphaWhisper brand (Concept 3, Signal Pulse) ────────────────
   * Cyan → blue → indigo gradient. Used for the wordmark, logo mark,
   * loading states, and key brand accents throughout the app. */
  --brand-1: #22D3EE;              /* cyan, start of gradient */
  --brand-2: #3B82F6;              /* blue, middle */
  --brand-3: #6366F1;              /* indigo, end */
  --brand-grad: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 50%, var(--brand-3) 100%);
  --brand-grad-h: linear-gradient(90deg, var(--brand-1) 0%, var(--brand-2) 50%, var(--brand-3) 100%);
  --brand-bg-1: #0F1A30;           /* logo tile bg top */
  --brand-bg-2: #070C18;           /* logo tile bg bottom, also used as ultra-dark theme */
  --brand-pulse: #7DD3FC;          /* light cyan, the pulse line accent */

  /* Apple-inspired light interface, refined, spacious, premium */
  --bg: #fbfbfd;                   /* page, Apple's barely-off-white */
  --bg-soft: #f5f5f7;              /* Apple signature soft gray */
  --bg-grad: none;
  --panel: #ffffff;                /* elevated card, pure white lifts off the page */
  --panel-hi: #fafafa;             /* hover surface */
  --inner: #f5f5f7;                /* inset (Apple gray) */
  --inner-hi: #ebebed;             /* surface-2 */
  --border: #e6e6e9;               /* soft hairline */
  --border-hi: #d2d2d7;            /* Apple border */
  --text: #1d1d1f;                 /* Apple near-black */
  --text-soft: #424245;            /* body copy */
  --dim: #6e6e73;                  /* Apple secondary gray */
  --dim-2: #86868b;                /* Apple tertiary / metadata */
  --accent: #0071e3;               /* Apple blue */
  --accent-hi: #0056b3;
  --accent-soft: rgba(0, 113, 227, 0.08);
  --accent-ring: rgba(0, 113, 227, 0.22);
  --bull: #099e4a;                 /* refined readable green */
  --bull-soft: rgba(9, 158, 74, 0.10);
  --bear: #e0322c;                 /* refined red */
  --bear-soft: rgba(224, 50, 44, 0.08);
  --neutral: #6e6e73;
  --warn: #bf6000;                 /* readable amber */
  --warn-soft: rgba(255, 159, 10, 0.14);
  --warn-bg: #fff8ec;
  --gold: #ff9f0a;
  --purple: #8944d6;
  --purple-soft: rgba(137, 68, 214, 0.08);

  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Radius scale, Apple uses generous, consistent corner radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Soft, diffuse elevation, Apple shadows are subtle and low-contrast */
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.03);
  --shadow-hi: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
  --shadow-hero: 0 2px 8px rgba(0, 0, 0, 0.04), 0 14px 36px rgba(0, 0, 0, 0.08);
  --ring: 0 0 0 1px var(--border);
  --ring-hi: 0 0 0 1px var(--border-hi);
}

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

/* ─── Mobile / accessibility globals ─────────────────────────────────
 * `color-scheme: light` tells iOS Safari we intentionally render light;
 *   prevents the OS from auto-darkening form controls + scrollbars.
 * `text-size-adjust: 100%` stops iOS from inflating text in landscape.
 * `-webkit-tap-highlight-color` mutes the gray flash on tap (we have
 *   our own hover/active states).
 * `overscroll-behavior-y` tames the pull-to-refresh bounce on Chrome
 *   Android, which otherwise triggers mid-scroll and feels janky.
 */
:root { color-scheme: light; }
html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
}
body {
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

/* Keyboard focus ring, visible on tab navigation, hidden on mouse clicks.
 * Uses :focus-visible so we don't annoy mouse users with rings on every
 * click. Applied AFTER the individual component rules so it wins on
 * equal specificity for elements without their own focus treatment. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
/* Inputs have their own box-shadow focus state, don't double up. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline: none; }

/* Respect the user's "Reduce Motion" OS setting. Kills transitions and
 * animations on every element without needing to update each rule. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Minimum 44×44 CSS-px touch target on interactive form controls,
 * Apple HIG / Google Material guideline. Buttons in styles.css are
 * ~40px today; this bumps them without changing visual padding.
 * Scoped to interactive controls so it doesn't affect read-only UI. */
button,
[role="button"],
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
select,
textarea {
  min-height: 44px;
}

body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* overscroll-behavior set above; keep tap-highlight here to override */
  -webkit-tap-highlight-color: transparent;
}

.wrap {
  max-width: 1440px;
  margin: 0 auto;
  /* env(safe-area-inset-*) respects iPhone notch / home indicator
   * and landscape Dynamic Island. max() keeps desktop padding intact. */
  padding-top:    max(24px, env(safe-area-inset-top));
  padding-right:  max(28px, env(safe-area-inset-right));
  padding-bottom: max(40px, env(safe-area-inset-bottom));
  padding-left:   max(28px, env(safe-area-inset-left));
}

header {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

/* ── Brand, Concept 3 (Signal Pulse) implementation ──
 * Clickable wrapper goes to #dashboard. Logo mark = inline SVG so it
 * stays crisp at any size and gradients render without raster fallback.
 * Wordmark splits "Alpha" (text color) + "Whisper" (gradient) + "AI"
 * (muted). Tagline below in mono caps. */
.brand {
  flex: 0 0 auto;
  min-width: 250px;
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.brand:hover { transform: translateY(-1px); filter: brightness(1.05); }
.brand:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 4px; border-radius: 12px; }

.brand-mark {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: block;
  border-radius: 11px;
  box-shadow:
    0 4px 12px rgba(34, 211, 238, 0.18),
    0 2px 4px rgba(99, 102, 241, 0.15),
    0 0 0 1px rgba(123, 211, 252, 0.08);
  overflow: hidden;
}
.brand-mark svg { width: 100%; height: 100%; display: block; }

.brand-text { display: flex; flex-direction: column; gap: 1px; }

.brand-wordmark {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text);
  line-height: 1.05;
  margin: 0;
}
.brand-grad {
  background: var(--brand-grad-h);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.brand-sub {
  font-weight: 600;
  color: var(--dim);
  font-size: 14px;
  letter-spacing: 0.04em;
  margin-left: 2px;
}
.brand-tagline {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--brand-2);
  text-transform: uppercase;
  margin-top: 2px;
  opacity: 0.85;
}
/* Dark mode: tagline shines a bit more */
html[data-theme="dark"] .brand-tagline { color: var(--brand-1); opacity: 1; }
html[data-theme="dark"] .brand-mark {
  box-shadow:
    0 4px 16px rgba(34, 211, 238, 0.25),
    0 0 0 1px rgba(123, 211, 252, 0.15);
}
/* h1 base, kept for any legacy use; brand uses .brand-wordmark */
h1 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--text);
  line-height: 1.05;
}
/* Section titles, confident, readable (was a tiny uppercase eyebrow). */
h2 {
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  line-height: 1.2;
}
.h2-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.meta { color: var(--dim); font-size: 11px; letter-spacing: 0; font-variant-numeric: tabular-nums; }

.search-box {
  flex: 1;
  display: flex;
  gap: 8px;
  max-width: 620px;
  position: relative;
}

.search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--panel);
  border: 1px solid var(--border-hi);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 50;
  max-height: 360px;
  overflow-y: auto;
  padding: 6px;
}
.search-results .sr-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s;
}
.search-results .sr-row:hover,
.search-results .sr-row.sr-active {
  background: var(--inner);
}
.search-results .sr-sym {
  font-family: var(--font-mono, var(--font-ui));
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.02em;
}
.search-results .sr-name {
  flex: 1;
  color: var(--dim);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-results .sr-empty {
  padding: 12px 14px;
  color: var(--dim);
  font-size: 12px;
}

.search-box input {
  flex: 1;
  background: var(--inner);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 12px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-family: var(--font-ui);
  font-weight: 400;
  outline: none;
  letter-spacing: 0.01em;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.search-box input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
  background: var(--panel);
}
.search-box input::placeholder {
  color: var(--dim);
  font-family: var(--font-ui);
  font-weight: 400;
}

button {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
button:hover {
  background: var(--panel-hi);
  border-color: var(--border-hi);
  color: var(--accent);
  box-shadow: var(--shadow);
}
button:disabled { opacity: 0.4; cursor: not-allowed; }
button.primary {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
  font-weight: 600;
}
button.primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); color: #ffffff; }

#search-btn {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(26, 115, 232, 0.3);
}
#search-btn:hover {
  background: var(--accent-hi);
  border-color: var(--accent-hi);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(26, 115, 232, 0.3);
}

.status-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

/* ─── Responsive header (phones + narrow tablets) ─────────────────────
 * Below 760px: stack brand / search / status vertically so nothing gets
 * squeezed or cut off. Keeps the primary search input full-width and
 * easy to tap. Also tightens `.wrap` side padding for small screens. */
@media (max-width: 760px) {
  .wrap {
    padding-left:  max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  header {
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
  }
  .brand { min-width: 0; flex: 1 1 auto; }
  .search-box {
    order: 3;            /* push below brand + status */
    flex: 1 1 100%;      /* full width on its own row */
    max-width: none;
  }
  .status-group {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
}

.market-status {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
  font-family: var(--font-mono);
}
.market-status.open {
  background: #e6f4ea;
  color: #137333;
  border: 1px solid #ceead6;
}
.market-status.closed {
  background: var(--inner);
  color: var(--dim);
  border: 1px solid var(--border);
}

.live-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--dim);
}
.live-indicator .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dim);
}
.live-indicator.live .dot { background: var(--bull); animation: pulse 2s infinite; }
.live-indicator.stale .dot { background: var(--warn); }
.live-indicator.off .dot { background: var(--bear); }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.detail[hidden] { display: none; }   /* v77.82, no empty placeholder panel */
.detail {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 30px;
  min-height: 340px;
  margin-bottom: 28px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.detail .empty {
  color: var(--dim);
  font-size: 14px;
  text-align: center;
  padding: 80px 0;
  font-style: italic;
}

.detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.detail-symbol {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-family: var(--font-ui);
  color: var(--text);
  line-height: 1;
}
.detail-price {
  font-size: 28px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
}
.detail-change {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  font-weight: 600;
  margin-top: 6px;
}

/* "What is this ticker", company name / description / sector / market cap */
.detail-head-left { display: flex; gap: 14px; align-items: flex-start; }
.detail-logo {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--bg-soft, #f5f5f7);
  object-fit: contain;
  padding: 4px;
  flex: 0 0 44px;
}
.detail-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-top: 4px;
  letter-spacing: -0.01em;
}
.detail-meta {
  font-size: 12px;
  color: var(--dim);
  margin-top: 2px;
  letter-spacing: 0.01em;
}
.detail-desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg-soft, #f5f5f7);
  border: 1px solid var(--border, #e5e5ea);
  border-radius: var(--radius-md, 12px);
  padding: 12px 14px;
  margin: -6px 0 18px 0;
}

/* Per-card "what is this?", opportunity + pre-move cards */
.opp-card-name {
  font-size: 12px;
  color: var(--dim);
  margin: 2px 0 6px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.005em;
}
.opp-card-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  margin-left: 4px;
  border-radius: 4px;
  background: var(--bg-soft, #f5f5f7);
  border: 1px solid var(--border, #e5e5ea);
  color: var(--dim);
  vertical-align: middle;
}

/* Watchlist tiny name line */
.wl-name {
  font-size: 11px;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 2px 0 4px 0;
}

.up { color: var(--bull); }
.down { color: var(--bear); }

.earnings-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 14px;
  font-size: 12px;
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-weight: 500;
}
.earnings-strip.earn-hot {
  background: var(--warn-bg);
  border-color: #feefc3;
  color: var(--warn);
}
.earnings-strip.earn-warn {
  background: #fef7e0;
  border-color: #feefc3;
  color: var(--warn);
}
.earnings-strip.earn-cool {
  background: var(--inner);
  color: var(--text-soft);
  border-color: var(--border);
}
.earn-label {
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 10.5px;
  text-transform: uppercase;
}
.earnings-strip.earn-hot .earn-label { color: var(--warn); }
.earn-detail { color: inherit; opacity: 0.9; font-weight: 500; }
.earn-beat { color: var(--bull); font-weight: 600; }
.earn-miss { color: var(--bear); font-weight: 600; }
.earn-neutral { color: var(--dim); }
.earn-history {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  margin-left: auto;
}
.earn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.earn-dot.beat { background: var(--bull); }
.earn-dot.miss { background: var(--bear); }
.earn-dot.neutral { background: var(--dim); }

/* ── IV Rank strip ───────────────────────────────────────
 * Premium-seller context banner. Mirrors .earnings-strip layout, but uses a
 * different color axis: green = rich-premium (seller-friendly), blue =
 * compressed-premium (don't sell), amber = earnings-inflated (don't trust).
 */
.iv-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 14px;
  font-size: 12px;
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-weight: 500;
}
.iv-strip.iv-hot {
  background: var(--bull-soft);
  border-color: rgba(30, 142, 62, 0.28);
  color: var(--bull);
}
.iv-strip.iv-warm {
  background: var(--inner);
  border-color: rgba(30, 142, 62, 0.18);
  color: var(--bull);
}
.iv-strip.iv-neutral {
  background: var(--inner);
  color: var(--text-soft);
}
.iv-strip.iv-cold {
  background: var(--accent-soft);
  border-color: rgba(26, 115, 232, 0.22);
  color: var(--accent-hi);
}
.iv-strip.iv-warn {
  background: var(--warn-bg);
  border-color: #feefc3;
  color: var(--warn);
}
.iv-label {
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 10.5px;
  text-transform: uppercase;
}
.iv-label b {
  font-size: 14px;
  font-weight: 800;
  margin-left: 4px;
  letter-spacing: 0;
}
.iv-verdict {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}
.iv-strip.iv-neutral .iv-verdict {
  background: rgba(0, 0, 0, 0.04);
}
.iv-detail { color: inherit; opacity: 0.9; font-weight: 500; }
/* Reason is optional flavor, push to the right, ellipsize on narrow screens
 * so it can't force the row to overflow. */
.iv-reason {
  margin-left: auto;
  max-width: 44ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-style: italic;
  opacity: 0.78;
}
@media (max-width: 760px) {
  .iv-reason {
    margin-left: 0;
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    flex-basis: 100%;
  }
}

.detail-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  margin-bottom: 12px;
  align-items: stretch;
}

/* ── Mini price chart on Overview tab (compact, click → full chart) ── */
.mini-chart-wrap {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #e5e5ea);
  border-radius: var(--radius-md, 12px);
  padding: 12px 14px;
  margin-bottom: 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.mini-chart-wrap:hover { border-color: var(--accent, #0071e3); transform: translateY(-1px); }
.mini-chart-header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 6px;
}
.mini-chart-label { font-size: 11px; font-weight: 700; color: var(--dim, #6e6e73); letter-spacing: 0.04em; text-transform: uppercase; }
.mini-chart-cta { font-size: 10.5px; color: var(--accent, #0071e3); font-weight: 600; }
.mini-chart-canvas { width: 100%; height: 140px; }
.mini-chart-error { font-size: 11px; color: var(--dim, #6e6e73); padding: 30px 0; text-align: center; font-style: italic; }

/* ── P/C Volume trend sparkline ── */
.pcr-trend { margin-top: 10px; }
.pcr-trend-card {
  background: var(--bg-soft, #f5f5f7);
  border: 1px solid var(--border, #e6e6e9);
  border-radius: var(--radius-sm, 8px);
  padding: 8px 10px;
}
.pcr-trend-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.pcr-trend-label { font-size: 11px; font-weight: 600; color: var(--dim, #6e6e73); letter-spacing: 0.04em; text-transform: uppercase; }
.pcr-trend-badge {
  font-size: 10.5px; font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--inner, #f5f5f7);
  border: 1px solid var(--border, #e6e6e9);
  color: var(--text, #1d1d1f);
}
.pcr-trend-badge.bullish { background: var(--bull-soft); color: var(--bull); border-color: transparent; }
.pcr-trend-badge.bearish { background: var(--bear-soft); color: var(--bear); border-color: transparent; }
.pcr-trend-svg { display: block; width: 100%; height: 36px; color: var(--dim, #6e6e73); }
.pcr-trend-foot {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-size: 11px; color: var(--text-soft, #424245); margin-top: 4px;
}
.pcr-trend-foot strong { color: var(--text, #1d1d1f); font-weight: 700; }
.pcr-trend-hint { color: var(--dim-2, #86868b); font-style: italic; flex-basis: 100%; margin-top: 2px; }
.pcr-trend-loading, .pcr-trend-state { font-size: 11px; color: var(--dim, #6e6e73); font-style: italic; }
.pcr-trend-building { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* ── Pillar radar, 6-axis shape that surfaces imbalances ── */
.pillar-radar-card {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #e6e6e9);
  border-radius: var(--radius-md, 12px);
  padding: 14px 16px 12px;
  margin-bottom: 16px;
  box-shadow: var(--shadow, 0 1px 2px rgba(0,0,0,0.04));
}
.pillar-radar-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.pillar-radar-title { font-size: 11px; font-weight: 700; color: var(--dim, #6e6e73); letter-spacing: 0.05em; text-transform: uppercase; }
.pr-balance { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.pr-balance-bal  { background: var(--bull-soft); color: var(--bull); }
.pr-balance-mix  { background: var(--accent-soft); color: var(--accent); }
.pr-balance-spik { background: var(--warn-soft); color: var(--warn); }
.pillar-radar-wrap { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(180px, 1fr); gap: 16px; align-items: center; color: var(--text, #1d1d1f); }
.pillar-radar-svg { display: block; width: 100%; max-height: 260px; }
.pillar-radar-legend { font-size: 12px; color: var(--text-soft, #424245); line-height: 1.55; }
.pr-leg-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.pr-leg-row strong { color: var(--text, #1d1d1f); font-weight: 700; }
.pr-leg-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.pr-leg-dot.pr-strong { background: var(--bull, #099e4a); }
.pr-leg-dot.pr-weak   { background: var(--bear, #e0322c); }
.pr-leg-hint { color: var(--dim, #6e6e73); font-style: italic; margin-top: 4px; display: block; }
@media (max-width: 720px) {
  .pillar-radar-wrap { grid-template-columns: 1fr; }
  .pillar-radar-svg { max-height: 220px; }
}

.pillars-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}
@media (max-width: 1200px) {
  .pillars-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .detail-summary { grid-template-columns: 1fr; }
  .pillars-row { grid-template-columns: repeat(2, 1fr); }
}

/* ── Score hero (v64), collapsed from 4 competing numbers to one
 *    answer line. Direction + composite are the hero; everything else
 *    is behind the disclosure. ──
 */
.score-hero {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
  padding: 16px 20px;
  margin-bottom: 18px;
}
.score-hero.dir-BULLISH { border-left: 4px solid var(--bull); }
.score-hero.dir-BEARISH { border-left: 4px solid var(--bear); }
.score-hero.dir-NEUTRAL { border-left: 4px solid var(--dim); }
.score-hero-main {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 26px; font-weight: 800; letter-spacing: -0.02em;
}
.score-hero-arrow { font-size: 32px; }
.score-hero.dir-BULLISH .score-hero-arrow,
.score-hero.dir-BULLISH .score-hero-dir { color: var(--bull); }
.score-hero.dir-BEARISH .score-hero-arrow,
.score-hero.dir-BEARISH .score-hero-dir { color: var(--bear); }
.score-hero.dir-NEUTRAL .score-hero-arrow,
.score-hero.dir-NEUTRAL .score-hero-dir { color: var(--dim); }
.score-hero-dir { letter-spacing: 0.02em; }
.score-hero-sep { color: var(--dim-2); font-weight: 400; }
.score-hero-num { font-variant-numeric: tabular-nums; }
.score-hero-num-lbl { font-size: 14px; font-weight: 500; color: var(--dim); }
.score-hero-sub {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 8px;
  font-size: 12.5px; color: var(--text-soft);
}
.score-hero-disclose {
  margin-left: auto;
  background: transparent; border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 10px; font-size: 11px; font-weight: 600;
  color: var(--dim); cursor: pointer; min-height: 24px;
}
.score-hero-disclose:hover { color: var(--text); border-color: var(--border-hi); }
.score-hero-detail {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: 12px; color: var(--text-soft); line-height: 1.5;
}
.score-hero-detail-item strong { color: var(--text); font-weight: 700; }

/* ── Backtest "building track record" card, shown when n<10 ── */
.bt-building {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--bg-soft);
  border: 1px dashed var(--border-hi);
  border-radius: var(--radius-md, 12px);
  padding: 16px 18px;
  margin: 10px 0 14px;
}
.bt-building-icon { font-size: 24px; line-height: 1; }
.bt-building-head { font-size: 13.5px; font-weight: 700; color: var(--text); }
.bt-building-sub  { font-size: 12px; color: var(--text-soft); margin-top: 4px; line-height: 1.5; }
.bt-building-sub strong { color: var(--text); }
.bt-min-n { font-size: 10px; font-weight: 600; color: var(--dim); margin-left: 6px; letter-spacing: 0.04em; }

/* ── Last-session highlights (v64), empty-state fallback for Opportunities ── */
.opp-archive-banner {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--bg-soft);
  border: 1px dashed var(--border-hi);
  border-radius: var(--radius-md, 12px);
  padding: 12px 16px;
  margin-bottom: 14px;
}
.opp-archive-icon { font-size: 22px; }
.opp-archive-head { font-size: 13.5px; font-weight: 700; color: var(--text); }
.opp-archive-sub { font-size: 11.5px; color: var(--text-soft); margin-top: 3px; line-height: 1.5; }
.opp-archive-cap { font-size: 11px; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: 0.05em; margin: 14px 0 6px; }
.opp-archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.opp-card-archive {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md, 12px);
  padding: 12px 14px; cursor: pointer; transition: border-color 0.15s, transform 0.15s;
}
.opp-card-archive:hover { border-color: var(--accent); transform: translateY(-1px); }
.opp-card-head { display: flex; align-items: baseline; gap: 8px; }
.opp-card-icon { font-size: 14px; }
.opp-card-sym { font-size: 14px; font-weight: 700; color: var(--text); }
.opp-card-score { font-size: 18px; font-weight: 800; margin-left: auto; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.opp-card-grade { font-size: 11px; font-weight: 700; color: var(--dim); }
.opp-card-meta { font-size: 11px; color: var(--text-soft); margin-top: 4px; }

.score-big-card {
  background: var(--inner);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 22px;
  text-align: center;
  min-width: 140px;
  position: relative;
}
.score-big-num {
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  letter-spacing: -0.03em;
}
.score-big-label {
  font-size: 9px;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-top: 8px;
  font-weight: 700;
}
.score-big-grade {
  font-size: 18px;
  font-weight: 700;
  margin-top: 4px;
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
}

.dir-cell {
  background: var(--inner);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  min-width: 180px;
}
.dir-badge {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  border: 1px solid transparent;
}
.dir-BULLISH, .dir-LEAN-BULLISH { background: #e6f4ea; color: #137333; border-color: #ceead6; }
.dir-BEARISH, .dir-LEAN-BEARISH { background: #fce8e6; color: #c5221f; border-color: #fad2cf; }
.dir-NEUTRAL { background: #f1f3f4; color: var(--neutral); border-color: var(--border-hi); }
.conf { font-size: 11px; color: var(--dim); letter-spacing: 0.02em; }

.pillar-cell {
  background: var(--inner);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 12px;
  text-align: center;
  transition: border-color 0.15s, transform 0.15s;
}
.pillar-cell:hover {
  border-color: var(--border-hi);
  transform: translateY(-1px);
}
.pillar-label {
  font-size: 9.5px;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}
.pillar-source {
  color: var(--dim);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 9px;
  opacity: 0.7;
}
.pillar-score {
  font-size: 26px;
  font-weight: 700;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
}
.pillar-bar {
  height: 3px;
  background: var(--inner-hi);
  border-radius: 2px;
  margin-top: 10px;
  overflow: hidden;
}
.pillar-bar-fill { height: 100%; border-radius: 2px; transition: width 0.4s ease-out; }

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 900px) {
  .detail-grid { grid-template-columns: 1fr; }
}

/* ── Tab bar (Overview / Swing Trade) ─ elegant underline style ─ */
.tab-bar {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 22px;
  margin-top: 8px;
  padding: 0 2px;
}
.tab {
  position: relative;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 12px 18px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.18s;
  margin-bottom: -1px;
  letter-spacing: 0.02em;
}
.tab::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 2px;
  background: transparent;
  border-radius: 2px 2px 0 0;
  transition: background 0.18s;
}
.tab:hover {
  color: var(--text);
}
.tab:hover::after {
  background: var(--border-hi);
}
.tab.active {
  color: var(--accent-hi);
}
.tab.active::after {
  background: var(--accent);
  box-shadow: 0 -4px 12px -2px var(--accent-ring);
}
.tab-icon {
  font-size: 13px;
  line-height: 1;
  opacity: 0.9;
}
.tab-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-left: 4px;
}
.tab-dot-bull {
  background: var(--bull);
  animation: pulse 2.4s infinite;
  box-shadow: 0 0 0 3px rgba(30, 142, 62, 0.15);
}
.tab-dot-bear {
  background: var(--bear);
  animation: pulse 2.4s infinite;
  box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.15);
}
.tab-dot-neutral { background: var(--dim); }

.tab-content { padding-top: 4px; }

/* ── TradingView tab: Lightweight Charts + layer toggles ───── */
.chart-section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.chart-head-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.chart-toggles {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.chart-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--dim);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  flex-shrink: 0;
}
.chart-expand-btn:hover {
  background: var(--accent-soft);
  color: var(--accent-hi);
  border-color: var(--accent-ring);
}
.chart-expand-btn:active { transform: scale(0.96); }
.chart-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--dim);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  font-family: inherit;
}
.chart-chip:hover { background: var(--inner-hi); }
.chart-chip.on {
  background: var(--accent-soft);
  color: var(--accent-hi);
  border-color: var(--accent-ring);
}
.chart-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.chart-container {
  width: 100%;
  height: 520px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  position: relative;
  overflow: hidden;
}
.chart-loading,
.chart-error {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dim);
  font-size: 13px;
  font-family: var(--font-mono);
}
.chart-error { color: var(--bear); }
.chart-legend {
  margin-top: 8px;
  color: var(--dim-2);
  font-size: 11px;
  font-family: var(--font-mono);
  text-align: right;
}

/* Fullscreen mode, triggered by the expand button via the Fullscreen API.
   Uses flex layout so the chart container grows to fill all available
   vertical space between the header and the legend footer. ESC exits. */
.chart-section:fullscreen,
.chart-section:-webkit-full-screen {
  background: #ffffff;
  padding: 20px 28px;
  border-radius: 0;
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chart-section:fullscreen .chart-head,
.chart-section:-webkit-full-screen .chart-head {
  margin-bottom: 16px;
  flex-shrink: 0;
}
.chart-section:fullscreen .chart-container,
.chart-section:-webkit-full-screen .chart-container {
  flex: 1 1 auto;
  height: auto;          /* override fixed 520px */
  min-height: 0;         /* allow flex to actually shrink/grow */
}
.chart-section:fullscreen .chart-legend,
.chart-section:-webkit-full-screen .chart-legend {
  flex-shrink: 0;
}
/* Hint: when fullscreen is active, swap the expand icon's tint so users can
   see at a glance that the button now collapses instead of expands. */
.chart-section:fullscreen .chart-expand-btn,
.chart-section:-webkit-full-screen .chart-expand-btn {
  background: var(--accent-soft);
  color: var(--accent-hi);
  border-color: var(--accent-ring);
}

/* CSS pseudo-fullscreen, kicks in when the native Fullscreen API is denied
   (iframed contexts, sandboxed pages, strict Permissions-Policy headers).
   Pins the chart section over the viewport with position:fixed so it
   visually matches the native fullscreen mode. ESC exits via a JS handler. */
.chart-section-faux-fs {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  margin: 0 !important;
  background: #ffffff !important;
  padding: 20px 28px !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.chart-section-faux-fs .chart-head {
  margin-bottom: 16px;
  flex-shrink: 0;
}
.chart-section-faux-fs .chart-container {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}
.chart-section-faux-fs .chart-legend {
  flex-shrink: 0;
}
.chart-section-faux-fs .chart-expand-btn {
  background: var(--accent-soft);
  color: var(--accent-hi);
  border-color: var(--accent-ring);
}
/* Lock the background from scrolling while the chart overlay is active */
body.chart-fullscreen-active {
  overflow: hidden;
}

/* ── Swing hint card (CTA in Overview tab) ─────────────────── */
.swing-hint-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.06) 0%, rgba(96, 165, 250, 0.02) 100%);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s, background 0.15s;
  margin-top: 4px;
}
.swing-hint-card:hover {
  border-color: var(--border-hi);
  border-left-color: var(--accent-hi);
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px var(--accent-ring), var(--shadow-hi);
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.1) 0%, rgba(96, 165, 250, 0.04) 100%);
}
.swing-hint-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.85;
}
.swing-hint-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-hi);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.swing-hint-sub {
  font-size: 11.5px;
  color: var(--text-soft);
  line-height: 1.45;
  margin-top: 3px;
}
.swing-hint-arrow {
  margin-left: auto;
  font-size: 18px;
  color: var(--accent);
  font-weight: 600;
  transition: transform 0.15s, color 0.15s;
  flex-shrink: 0;
}
.swing-hint-card:hover .swing-hint-arrow {
  transform: translateX(3px);
  color: var(--accent-hi);
}

.section { margin-bottom: 20px; }
.section-title {
  font-size: 10px;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 10px;
  font-weight: 700;
}

.signals { display: flex; flex-wrap: wrap; gap: 5px; }
.signal {
  font-size: 11px;
  padding: 4px 10px;
  background: var(--inner);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-soft);
  font-weight: 500;
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
}
.signal-sf {
  background: var(--accent-soft);
  border-color: rgba(26, 115, 232, 0.2);
  color: var(--accent);
}

.alerts-list { display: flex; flex-direction: column; gap: 4px; }
.alert-row {
  display: grid;
  grid-template-columns: 72px 1fr auto auto;
  gap: 10px;
  padding: 7px 12px;
  background: var(--inner);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  align-items: center;
  font-family: var(--font-mono);
}
.alert-row.bull { border-left: 3px solid var(--bull); }
.alert-row.bear { border-left: 3px solid var(--bear); }
.alert-side { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.alert-row.bull .alert-side { color: var(--bull); }
.alert-row.bear .alert-side { color: var(--bear); }
.alert-strike { color: var(--text-soft); }
.alert-prem { font-weight: 700; color: var(--text); }
.alert-rule {
  color: var(--dim);
  font-size: 10px;
  text-align: right;
  font-family: var(--font-ui);
  letter-spacing: 0.02em;
}

.signal-news {
  background: var(--warn-bg);
  border-color: #feefc3;
  color: var(--warn);
}
.signal-fund {
  background: var(--accent-soft);
  border-color: rgba(26, 115, 232, 0.2);
  color: var(--accent);
}

/* ── Fair Value card (StockOracle-inspired hero) ──────────────── */
.fv-card {
  background: linear-gradient(180deg, var(--panel) 0%, var(--inner) 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 24px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.fv-hero-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.fv-title {
  font-size: 10px;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
}
.fv-verdict {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 6px 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
}
.fv-verdict::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.fv-cheap { background: #e6f4ea; color: #137333; border: 1px solid #ceead6; }
.fv-cheap::before { background: var(--bull); }
.fv-fair { background: var(--warn-bg); color: var(--warn); border: 1px solid #feefc3; }
.fv-fair::before { background: var(--gold); }
.fv-expensive { background: #fce8e6; color: #c5221f; border: 1px solid #fad2cf; }
.fv-expensive::before { background: var(--bear); }

.fv-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
  padding: 14px 0 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
@media (max-width: 700px) {
  .fv-hero { grid-template-columns: 1fr; gap: 14px; }
}
.fv-hero-num {
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}
.fv-hero-currency {
  font-size: 24px;
  font-weight: 500;
  color: var(--dim);
  margin-right: 4px;
  vertical-align: 8px;
  font-family: var(--font-ui);
}
.fv-hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.fv-metric {
  background: var(--inner);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.fv-metric-label {
  font-size: 9px;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}
.fv-metric-val {
  font-size: 18px;
  font-weight: 700;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
}
.fv-metric-val.mv-good { color: var(--bull); }
.fv-metric-val.mv-bad { color: var(--bear); }
/* Text-label variant, used when the value is a word ("FAIR VALUED") rather
   than a number. Drops the mono face and shrinks to fit in the same box. */
.fv-metric-val--text {
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 6px;
}

.fv-range-wrap { min-width: 0; margin-bottom: 12px; }
.fv-range-header {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  margin-bottom: 8px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.fv-range-mid { font-weight: 600; color: var(--text-soft); }

.fv-bar {
  position: relative;
  height: 32px;
}
.fv-bar-track {
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(to right,
    var(--bull) 0%,
    #81c995 30%,
    #e8eaed 50%,
    #f28b82 70%,
    var(--bear) 100%);
  border-radius: 2px;
}
.fv-bar-mid-marker {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 2px;
  height: 12px;
  background: var(--dim-2);
  opacity: 0.4;
  transform: translateX(-1px);
}
.fv-bar-current {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  text-align: center;
}
.fv-bar-current-dot {
  width: 16px;
  height: 16px;
  background: var(--bg);
  border: 3px solid var(--accent);
  border-radius: 50%;
  margin: 6px auto 0;
  box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.16), 0 1px 3px rgba(26, 115, 232, 0.3);
}
.fv-bar-current-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.fv-methods-wrap {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.fv-methods-summary {
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  user-select: none;
  list-style: none;
  padding: 4px 0;
}
.fv-methods-summary::-webkit-details-marker { display: none; }
.fv-methods-summary::before {
  content: '▸ ';
  transition: transform 0.15s;
  display: inline-block;
}
details[open] .fv-methods-summary::before { content: '▾ '; }

.fv-methods {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: var(--inner);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.fv-method {
  display: grid;
  grid-template-columns: 90px 80px 1fr;
  gap: 10px;
  font-size: 11px;
  align-items: center;
}
.fv-method-name { font-weight: 600; color: var(--text); font-size: 11.5px; }
.fv-method-val {
  font-family: var(--font-mono);
  color: var(--accent-hi);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.fv-method-note { color: var(--dim); font-size: 10px; font-style: italic; }

.fv-assumptions {
  font-size: 10px;
  color: var(--dim);
  font-style: italic;
  line-height: 1.5;
  padding: 0 2px;
}

/* ── Smart Money card (analyst consensus + insider Form 4) ──── */
.smart-money-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
}
/* Beginner-first compact verdict rows */
.sm-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
.sm-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: center;
  padding: 11px 14px;
  border-radius: var(--radius-md, 12px);
  background: var(--bg-soft, #f5f5f7);
  border-left: 3px solid transparent;
}
.sm-row-icon {
  font-size: 17px;
  line-height: 1;
  text-align: center;
  font-weight: 700;
}
.sm-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sm-row-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sm-row-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dim, #6e6e73);
}
.sm-row-bias {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.005em;
}
.sm-row-flag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--panel, #fff);
}
.sm-flag-bull { color: var(--bull, #099e4a); }
.sm-flag-bear { color: var(--bear, #e0322c); }
.sm-row-stat {
  font-size: 12.5px;
  color: var(--text, #1d1d1f);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
/* Verdict tones, match Markov card scheme */
.sm-row-bull { background: rgba(9,158,74,0.10); border-left-color: var(--bull, #099e4a); }
.sm-row-bull .sm-row-bias { color: var(--bull, #099e4a); }
.sm-row-bull .sm-row-icon { color: var(--bull, #099e4a); }
.sm-row-lean-bull { background: rgba(9,158,74,0.05); border-left-color: rgba(9,158,74,0.5); }
.sm-row-lean-bull .sm-row-bias { color: var(--bull, #099e4a); }
.sm-row-mixed { background: var(--bg-soft, #f5f5f7); border-left-color: var(--border, #e5e5ea); }
.sm-row-mixed .sm-row-bias { color: var(--dim, #6e6e73); }
.sm-row-lean-bear { background: rgba(224,50,44,0.05); border-left-color: rgba(224,50,44,0.5); }
.sm-row-lean-bear .sm-row-bias { color: var(--bear, #e0322c); }
.sm-row-bear { background: rgba(224,50,44,0.10); border-left-color: var(--bear, #e0322c); }
.sm-row-bear .sm-row-bias { color: var(--bear, #e0322c); }
.sm-row-bear .sm-row-icon { color: var(--bear, #e0322c); }
.sm-row-empty { background: var(--bg-soft, #f5f5f7); border-left-color: var(--border-soft, #f3f4f6); }
.sm-row-empty .sm-row-bias { color: var(--dim, #6e6e73); font-style: italic; }
.sm-row-empty .sm-row-stat { color: var(--dim, #6e6e73); font-style: italic; }
/* The "Show full detail" tap-to-reveal */
.sm-details {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft, #f3f4f6);
}
.sm-details summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--dim, #6e6e73);
  letter-spacing: 0.005em;
}
.sm-details summary:hover { color: var(--accent, #0071e3); }
.sm-details[open] summary { margin-bottom: 12px; }
.sm-details-grid { margin-top: 0; }

/* ── Quality Scorecard, verdict-first layout ─────────────────── */
.sc-verdict {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-md, 12px);
  background: var(--bg-soft, #f5f5f7);
  margin-bottom: 10px;
}
.sc-verdict-icon { font-size: 18px; line-height: 1; font-weight: 700; }
.sc-verdict-label { font-size: 15px; font-weight: 700; letter-spacing: -0.005em; }
.sc-bull { background: rgba(9,158,74,0.10); }
.sc-bull .sc-verdict-label { color: var(--bull, #099e4a); }
.sc-bull .sc-verdict-icon { color: var(--bull, #099e4a); }
.sc-lean-bull { background: rgba(9,158,74,0.05); }
.sc-lean-bull .sc-verdict-label { color: var(--bull, #099e4a); }
.sc-mixed { background: var(--bg-soft, #f5f5f7); }
.sc-mixed .sc-verdict-label { color: var(--dim, #6e6e73); }
.sc-lean-bear { background: rgba(224,50,44,0.05); }
.sc-lean-bear .sc-verdict-label { color: var(--bear, #e0322c); }
.sc-bear { background: rgba(224,50,44,0.10); }
.sc-bear .sc-verdict-label { color: var(--bear, #e0322c); }
.sc-bear .sc-verdict-icon { color: var(--bear, #e0322c); }
.sc-sentence {
  font-size: 13px;
  color: var(--text, #1d1d1f);
  line-height: 1.55;
  margin-bottom: 14px;
}
.sc-details {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #e5e5ea);
  border-radius: var(--radius-md, 12px);
  padding: 10px 14px;
}
.sc-details summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--dim, #6e6e73);
}
.sc-details summary:hover { color: var(--accent, #0071e3); }
.sc-details[open] summary { margin-bottom: 10px; }
.sc-details-body { display: flex; flex-direction: column; gap: 8px; }
.sm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.sm-head-left { display: flex; align-items: baseline; gap: 10px; }
.sm-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--fg);
}
.sm-sub {
  font-size: 11px;
  color: var(--dim);
  letter-spacing: 0.02em;
}
.sm-head-right {
  font-size: 11px;
  color: var(--dim);
  letter-spacing: 0.02em;
}
.sm-head-right b { color: var(--fg); }
.sm-head-right.sm-good b { color: var(--green); }
.sm-head-right.sm-bad b { color: var(--red); }

.sm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.sm-grid-3 {
  grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 1100px) {
  .sm-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
  .sm-grid, .sm-grid-3 { grid-template-columns: 1fr; }
}

/* ── Congress column accents (columns otherwise reuse .sm-col styles) ── */
.sm-parties { display: flex; gap: 6px; flex-wrap: wrap; }
.sm-party {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  letter-spacing: 0.05em;
}
.sm-party-d { background: #e8f0fe; color: #1a56db; }
.sm-party-r { background: #fde8e8; color: #b93421; }
.sm-party-i { background: #f1f3f4; color: #5f6368; }
.sm-notable { color: #d68900; font-weight: 700; margin-right: 2px; }

/* Sector RS badge in Smart Money header */
.sm-sector-badge {
  margin-left: 12px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--inner);
  border: 1px solid var(--border);
  color: var(--fg-sub, #5f6368);
  letter-spacing: 0.01em;
  cursor: default;
}
.sm-sector-badge.sm-good {
  background: #e6f4ea;
  color: #0b6e2e;
  border-color: #cfe8d5;
}
.sm-sector-badge.sm-bad {
  background: #fdecea;
  color: #b93421;
  border-color: #f5c2bb;
}

/* ── Macro regime banner (top of page) ── */
.macro-banner {
  max-width: 1280px;
  margin: 0 auto 16px;
  padding: 12px 20px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.macro-banner .macro-main {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.macro-banner .macro-sub {
  font-size: 12px;
  color: var(--fg-sub, #5f6368);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.macro-banner .macro-upcoming {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 10px;
  color: var(--fg-sub, #5f6368);
  letter-spacing: 0.08em;
  margin-left: 4px;
}
.macro-chip {
  background: var(--inner);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  color: var(--fg);
}
.macro-preevent {
  background: #fef3c7;
  border-color: #fde68a;
}
.macro-preevent .macro-main { color: #92400e; }
.macro-awaiting {
  background: #e8f0fe;
  border-color: #d2e3fc;
}
.macro-awaiting .macro-main { color: #1a56db; }
.macro-postevent {
  background: #f3e8ff;
  border-color: #e9d5ff;
}
.macro-postevent .macro-main { color: #6d28d9; }

/* ── Context pill row (corporate actions + macro confidence capping) ── */
.context-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.context-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--inner);
  color: var(--fg);
}
.context-pill.pill-corp {
  background: #e8f5e9;
  border-color: #c8e6c9;
  color: #1b5e20;
}
.context-pill.pill-macro {
  background: #fef3c7;
  border-color: #fde68a;
  color: #92400e;
}

.sm-col {
  background: var(--panel-2, #fafafa);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sm-col-empty { opacity: 0.8; }
.sm-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sm-col-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--dim);
  text-transform: uppercase;
}
.sm-col-bias {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 9px;
  border-radius: 12px;
  background: var(--chip-bg, #eef1f4);
  color: var(--fg);
  border: 1px solid var(--border);
}
.sm-col-bias.sm-good { background: #e6f4ea; color: #0b6e2e; border-color: #c8e6c9; }
.sm-col-bias.sm-lean-good { background: #f0f7ef; color: #1a6a3a; border-color: #d6e9d2; }
.sm-col-bias.sm-bad { background: #fdecea; color: #b93421; border-color: #f5c2ba; }
.sm-col-bias.sm-lean-bad { background: #fcf2ee; color: #a04225; border-color: #f1d7c8; }

.sm-col-main {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.sm-big {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.sm-big.sm-good { color: #1e8e3e; }
.sm-big.sm-bad { color: #d93025; }
.sm-analysts {
  font-size: 11px;
  color: var(--dim);
  letter-spacing: 0.02em;
}

.sm-votes, .sm-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sm-vote, .sm-stat {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 10px;
  letter-spacing: 0.02em;
  background: var(--chip-bg, #eef1f4);
  color: var(--fg);
  border: 1px solid var(--border);
}
.vote-sb { background: #e6f4ea; color: #0b6e2e; border-color: #c8e6c9; }
.vote-b  { background: #eef7f1; color: #2e7d41; border-color: #d2e7d8; }
.vote-h  { background: #f1f3f4; color: #5f6368; border-color: #dadce0; }
.vote-s  { background: #fcf2ee; color: #a04225; border-color: #f1d7c8; }
.vote-ss { background: #fdecea; color: #b93421; border-color: #f5c2ba; }

.buy-stat  { background: #e6f4ea; color: #0b6e2e; border-color: #c8e6c9; }
.sell-stat { background: #fdecea; color: #b93421; border-color: #f5c2ba; }

.sm-trend {
  font-size: 11px;
  color: var(--dim);
  letter-spacing: 0.02em;
}

.sm-cluster {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 7px 10px;
  border-radius: 8px;
  margin-top: 2px;
}
.cluster-buy  { background: #e6f4ea; color: #0b6e2e; border: 1px solid #8ecf9f; }
.cluster-sell { background: #fdecea; color: #b93421; border: 1px solid #ed9b8e; }

.sm-txn-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  margin-top: 2px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.sm-txn-row {
  display: grid;
  grid-template-columns: 54px 1fr 70px 68px auto;
  gap: 6px;
  align-items: center;
  padding: 5px 6px;
  border-radius: 4px;
  font-size: 11px;
}
.sm-txn-name[data-trader] {
  cursor: pointer;
  transition: color 0.1s;
}
.sm-txn-name[data-trader]:hover {
  color: var(--accent);
  text-decoration: underline;
}
.sm-trackrecord {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.sm-trackrecord.tr-elite {
  background: linear-gradient(135deg, #fbbf24, #d97706);
  color: #fff;
  box-shadow: 0 1px 3px rgba(217, 119, 6, 0.35);
}
.sm-trackrecord.tr-strong {
  background: #22c55e;
  color: #fff;
}
.sm-trackrecord.tr-average {
  background: #e5e7eb;
  color: #4b5563;
}
.sm-trackrecord.tr-weak {
  background: rgba(217, 48, 37, 0.12);
  color: #b93421;
}
.sm-trackrecord.tr-unrated {
  background: transparent;
  color: var(--dim);
  border: 1px dashed var(--border);
}

/* ── Trader drill-down modal ─────────────────────────────────── */
.trader-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: trader-fade-in 120ms ease-out;
}
@keyframes trader-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.trader-modal {
  background: var(--bg, #fff);
  color: var(--fg);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  max-width: 840px;
  width: 100%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
}
.trader-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft, #f8fafc);
}
.trader-modal-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.trader-modal-close {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--dim);
  padding: 4px 10px;
  border-radius: 6px;
}
.trader-modal-close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--fg);
}
.trader-modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
}
.trader-loading,
.trader-empty {
  color: var(--dim);
  font-size: 13px;
  padding: 20px;
  text-align: center;
}
.trader-summary-meta {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  align-items: center;
}
.trader-chamber {
  font-size: 11px;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.trader-summary-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}
.trader-card {
  background: var(--bg-soft, #f8fafc);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
.trader-card-label {
  font-size: 10px;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.trader-card-val {
  font-size: 16px;
  font-weight: 700;
}
.trader-card-sub {
  font-size: 11px;
  font-weight: 400;
  color: var(--dim);
}
.trader-reason {
  font-size: 12px;
  color: var(--dim);
  margin-bottom: 14px;
  font-style: italic;
}
.ret-good { color: #0b6e2e; }
.ret-bad  { color: #b93421; }
.ret-muted { color: var(--dim); }

.trader-highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.trader-highlight-col {
  background: var(--bg-soft, #f8fafc);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
.trader-highlight-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.trader-highlight-row {
  display: grid;
  grid-template-columns: 1fr 70px 60px;
  gap: 8px;
  font-size: 12px;
  padding: 3px 0;
  align-items: center;
}
.trader-highlight-row span:last-child {
  text-align: right;
  font-weight: 600;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

.trader-trade-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.trader-trade-sub {
  font-size: 11px;
  font-weight: 400;
  color: var(--dim);
}
.trader-trade-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.trader-trade-row {
  display: grid;
  grid-template-columns: 70px 70px 80px 80px 1fr;
  gap: 8px;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 6px;
  align-items: center;
}
.trader-trade-row.buy  { background: rgba(30, 142, 62, 0.05); }
.trader-trade-row.sell { background: rgba(217, 48, 37, 0.05); }
.trader-trade-dir {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.04em;
}
.trader-trade-row.buy  .trader-trade-dir { color: #0b6e2e; }
.trader-trade-row.sell .trader-trade-dir { color: #b93421; }
.trader-trade-ticker {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-weight: 700;
}
.trader-trade-date { color: var(--dim); font-size: 11px; }
.trader-trade-amt  { font-family: var(--font-mono, 'JetBrains Mono', monospace); }
.trader-return {
  text-align: right;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-weight: 600;
}

@media (max-width: 640px) {
  .trader-summary-cards { grid-template-columns: repeat(2, 1fr); }
  .trader-highlights    { grid-template-columns: 1fr; }
  .trader-trade-row     { grid-template-columns: 54px 60px 70px 70px 1fr; font-size: 11px; }
}
.sm-txn-row.buy  { background: rgba(30, 142, 62, 0.06); }
.sm-txn-row.sell { background: rgba(217, 48, 37, 0.06); }
.sm-txn-dir {
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 10px;
}
.sm-txn-row.buy  .sm-txn-dir { color: #0b6e2e; }
.sm-txn-row.sell .sm-txn-dir { color: #b93421; }
.sm-txn-name {
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sm-txn-amt {
  text-align: right;
  font-weight: 600;
  color: var(--fg);
}
.sm-txn-date {
  text-align: right;
  color: var(--dim);
  font-size: 10px;
}

.sm-empty {
  font-size: 11px;
  color: var(--dim);
  font-style: italic;
  padding: 4px 0;
}

.sm-notes {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sm-note {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 10px;
  background: var(--chip-bg, #eef1f4);
  color: var(--dim);
  border: 1px solid var(--border);
}

/* ── Quality Scorecard ──────────────────────────────────────── */
.scorecard {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
}
.scorecard-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.scorecard-title {
  font-size: 10px;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
}
.rank-row {
  display: grid;
  grid-template-columns: 140px 1fr 120px 1fr;
  gap: 14px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.rank-row:last-child { border-bottom: none; }
.rank-row.moat-row {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-hi);
}
@media (max-width: 760px) {
  .rank-row { grid-template-columns: 110px 1fr 100px; }
  .rank-note { grid-column: 1 / -1; padding-left: 124px; margin-top: -4px; }
}
.rank-label {
  font-weight: 600;
  color: var(--text);
  font-size: 12px;
}
.rank-bar-wrap {
  height: 10px;
  background: var(--inner);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.rank-bar {
  height: 100%;
  border-radius: 5px;
  transition: width 0.4s ease-out;
}
.rank-bar.tier-5 { background: var(--bull); }
.rank-bar.tier-4 { background: #5bb974; }
.rank-bar.tier-3 { background: var(--gold); }
.rank-bar.tier-2 { background: #f28b82; }
.rank-bar.tier-1 { background: var(--bear); }

.rank-tier {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  font-family: var(--font-mono);
}
.rank-tier.tier-5 { color: var(--bull); }
.rank-tier.tier-4 { color: #137333; }
.rank-tier.tier-3 { color: var(--warn); }
.rank-tier.tier-2 { color: #b3261e; }
.rank-tier.tier-1 { color: var(--bear); }

.rank-note {
  font-size: 10.5px;
  color: var(--dim);
  font-style: italic;
  line-height: 1.4;
}

.moat-score-num {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  padding: 2px 7px;
  background: var(--panel-hi);
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-right: 4px;
  color: var(--accent-hi);
  letter-spacing: -0.01em;
}

.news-list { display: flex; flex-direction: column; gap: 4px; }
.news-row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 10px;
  padding: 8px 12px;
  background: var(--inner);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  align-items: start;
  line-height: 1.45;
  transition: background 0.15s, border-color 0.15s;
}
.news-row:hover { background: var(--inner-hi); border-color: var(--border-hi); }
.news-row.sent-bullish { border-left: 3px solid var(--bull); }
.news-row.sent-bearish { border-left: 3px solid var(--bear); }
.news-row.sent-neutral { border-left: 3px solid var(--dim); }
.news-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 5px;
}
.news-row.sent-bullish .news-dot { background: var(--bull); }
.news-row.sent-bearish .news-dot { background: var(--bear); }
.news-row.sent-neutral .news-dot { background: var(--dim); }
.news-head { color: var(--text); }
.news-head strong { color: var(--warn); margin-right: 3px; font-weight: 700; font-size: 10px; letter-spacing: 0.04em; }
.news-meta {
  color: var(--dim);
  font-size: 10px;
  white-space: nowrap;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

#toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 380px;
}
.toast {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 12px;
  box-shadow: var(--shadow-hi);
  cursor: pointer;
  transition: opacity 0.5s, transform 0.5s;
  border-left: 3px solid var(--accent);
  animation: toastIn 0.25s ease-out;
}
.toast.sent-bullish { border-left-color: var(--bull); }
.toast.sent-bearish { border-left-color: var(--bear); }
.toast.major { box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow-hi); }
.toast.fading { opacity: 0; transform: translateX(20px); }
.toast-head { display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 13px; }
.toast-head strong { color: var(--accent); letter-spacing: -0.01em; }
.toast-sent { color: var(--dim); text-transform: uppercase; font-size: 10px; letter-spacing: 0.08em; font-weight: 600; }
.toast.sent-bullish .toast-sent { color: var(--bull); }
.toast.sent-bearish .toast-sent { color: var(--bear); }
.toast-body { color: var(--text); line-height: 1.4; margin-bottom: 4px; }
.toast-meta { color: var(--dim); font-size: 10px; }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

.levels-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.level-col h4 { font-size: 11px; font-weight: 600; margin-bottom: 8px; }
.level-col.res h4 { color: var(--bear); }
.level-col.sup h4 { color: var(--bull); }
.level {
  font-size: 12px;
  padding: 8px 10px;
  margin-bottom: 4px;
  background: var(--inner);
  border: 1px solid var(--border);
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: border-color 0.15s, background 0.15s;
}
.level:hover { background: var(--inner-hi); border-color: var(--border-hi); }
.level:last-child { margin-bottom: 0; }
.level-price {
  font-weight: 700;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.level-type {
  color: var(--dim);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

.expected-range {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 12px 16px;
  background: var(--inner);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: inline-flex;
  gap: 16px;
  align-items: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
}
.expected-range .atr {
  color: var(--dim);
  font-size: 11px;
  font-weight: 500;
  padding-left: 14px;
  border-left: 1px solid var(--border);
}

.ai-block {
  background: var(--accent-soft);
  padding: 16px 18px;
  border-radius: 10px;
  border-left: 3px solid var(--accent);
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  color: var(--text);
}
.ai-loading { color: var(--dim); font-style: italic; }

/* ── Swing Trade Idea card (institutional structured output) ───────── */
.swing-block { min-height: 100px; }
.swing-card {
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-hi) 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: var(--shadow);
}
.swing-card.swing-nosetup {
  background: var(--inner);
  border-color: var(--border);
}

.swing-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.swing-dir-cell { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.swing-dir-badge {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  border: 1px solid transparent;
}
.swing-dir-badge.dir-long {
  background: #e6f4ea;
  color: #137333;
  border-color: #ceead6;
}
.swing-dir-badge.dir-short {
  background: #fce8e6;
  color: #c5221f;
  border-color: #fad2cf;
}
.swing-dir-badge.dir-no-setup {
  background: var(--inner);
  color: var(--dim);
  border: 1px solid var(--border);
}

.swing-conf {
  font-size: 11px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 5px;
  letter-spacing: 0.04em;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.swing-conf.conf-high { background: #e6f4ea; color: #137333; border: 1px solid #ceead6; }
.swing-conf.conf-med { background: var(--warn-bg); color: var(--warn); border: 1px solid #feefc3; }
.swing-conf.conf-low { background: var(--inner); color: var(--dim); border: 1px solid var(--border); }

.swing-meta { display: flex; align-items: center; gap: 8px; }
.swing-time { font-size: 10px; color: var(--dim); font-variant-numeric: tabular-nums; }
.swing-regen-btn, .swing-retry-btn {
  background: var(--inner);
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 14px;
  color: var(--accent);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.swing-retry-btn {
  width: auto;
  padding: 0 10px;
  font-size: 11px;
  margin-top: 8px;
}
.swing-regen-btn:hover, .swing-retry-btn:hover { background: var(--accent-soft); border-color: var(--accent); }

.swing-thesis {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text);
  margin-bottom: 14px;
  padding: 14px 16px;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  letter-spacing: 0.005em;
}

.swing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.swing-sec {
  background: var(--inner);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  transition: border-color 0.15s, background 0.15s;
}
.swing-sec:hover { border-color: var(--border-hi); background: var(--inner-hi); }
.swing-sec-sm { border-left: 3px solid var(--accent); }
.swing-sec-tech { border-left: 3px solid var(--bull); }
.swing-sec-opts { border-left: 3px solid #a855f7; }
.swing-sec-risks { border-left: 3px solid var(--warn); }

.swing-sec-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-soft);
  margin-bottom: 10px;
}

.swing-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 10px;
  padding: 4px 0;
  font-size: 12px;
  line-height: 1.5;
  align-items: start;
}
.swing-k {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--dim);
  letter-spacing: 0.08em;
  font-weight: 600;
  padding-top: 2px;
}
.swing-v { color: var(--text); }
.swing-row-entry .swing-v, .swing-entry { color: var(--bull); font-weight: 700; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.swing-row-stop .swing-v, .swing-stop { color: var(--bear); font-weight: 700; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.swing-v { font-variant-numeric: tabular-nums; }

/* Chain-priced badge, green pill when entry/targets/R:R came from live Tradier
   chain, amber when we fell back to LLM estimates. Sits inline next to the
   entry mid/max row so you see at a glance how trustworthy the numbers are. */
.chain-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-sans);
  letter-spacing: 0.02em;
  border-radius: 4px;
  vertical-align: middle;
  cursor: help;
}
.chain-badge-ok {
  background: var(--bull-soft, #d1fae5);
  color: var(--bull, #047857);
  border: 1px solid var(--bull, #047857);
}
.chain-badge-warn {
  background: var(--warn-soft, #fef3c7);
  color: var(--warn, #b45309);
  border: 1px solid var(--warn, #b45309);
}

/* ── Markov card ───────────────────────────────────────────────────── */
/* ── Base card system (Apple-style elevated surface) ──────────────────
   Used by Markov, Backtest, and any future .card. Gives them the same
   white surface, soft border, generous radius, and subtle lift. */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow);
}
.card-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.markov-card { margin-top: 14px; }
/* New beginner-first verdict layout */
.mk-verdict {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-md, 12px);
  background: var(--bg-soft, #f5f5f7);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.mk-verdict-icon { font-size: 18px; line-height: 1; flex-shrink: 0; }
.mk-verdict-label { font-size: 15px; font-weight: 700; letter-spacing: -0.005em; }
.mk-verdict-bull { background: rgba(9,158,74,0.10); }
.mk-verdict-bull .mk-verdict-label { color: var(--bull, #099e4a); }
.mk-verdict-bull .mk-verdict-icon { color: var(--bull, #099e4a); }
.mk-verdict-lean-bull { background: rgba(9,158,74,0.05); }
.mk-verdict-lean-bull .mk-verdict-label { color: var(--bull, #099e4a); }
.mk-verdict-mixed { background: var(--bg-soft, #f5f5f7); }
.mk-verdict-mixed .mk-verdict-label { color: var(--dim, #6e6e73); }
.mk-verdict-lean-bear { background: rgba(224,50,44,0.05); }
.mk-verdict-lean-bear .mk-verdict-label { color: var(--bear, #e0322c); }
.mk-verdict-bear { background: rgba(224,50,44,0.10); }
.mk-verdict-bear .mk-verdict-label { color: var(--bear, #e0322c); }
.mk-trust {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--panel, #fff);
  letter-spacing: 0.04em;
}
.mk-trust-high { color: var(--bull, #099e4a); }
.mk-trust-mid  { color: var(--dim, #6e6e73); }
.mk-trust-low  { color: var(--warn, #d97706); font-style: italic; font-weight: 600; }
.mk-sentence {
  font-size: 13px;
  color: var(--text, #1d1d1f);
  line-height: 1.55;
  margin-bottom: 14px;
}
.mk-sentence b.up { color: var(--bull, #099e4a); }
.mk-sentence b.down { color: var(--bear, #e0322c); }
.mk-bigstat {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #e5e5ea);
  border-radius: var(--radius-md, 12px);
  padding: 18px 16px;
  text-align: center;
  margin-bottom: 12px;
}
.mk-bigstat-num {
  font-size: 36px;
  font-weight: 800;
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}
.mk-bigstat-num.up { color: var(--bull, #099e4a); }
.mk-bigstat-num.down { color: var(--bear, #e0322c); }
.mk-bigstat-lbl {
  font-size: 11.5px;
  color: var(--dim, #6e6e73);
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}
.mk-details {
  margin-top: 4px;
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #e5e5ea);
  border-radius: var(--radius-md, 12px);
  padding: 10px 14px;
}
.mk-details summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--dim, #6e6e73);
  letter-spacing: 0.005em;
}
.mk-details summary:hover { color: var(--accent, #0071e3); }
.mk-details[open] summary { margin-bottom: 10px; }
.mk-details-body { display: flex; flex-direction: column; gap: 10px; }
.mk-blocks { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .mk-blocks { grid-template-columns: 1fr; } }
.mk-block {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--surface-2, #fafafa);
}
.mk-block-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.mk-state {
  font-weight: 700; font-size: 12px; padding: 2px 9px; border-radius: 6px;
  text-transform: capitalize; letter-spacing: 0.01em;
}
.mk-hot     { background: var(--bull-soft, #d1fae5); color: var(--bull, #047857); }
.mk-warm    { background: #ecfdf5; color: #059669; }
.mk-neutral { background: var(--surface-3, #f1f5f9); color: var(--dim, #64748b); }
.mk-cool    { background: #fef2f2; color: #dc2626; }
.mk-cold    { background: var(--bear-soft, #fee2e2); color: var(--bear, #b91c1c); }
.mk-meta { font-size: 10px; color: var(--dim, #94a3b8); font-family: var(--font-mono); }
.mk-trans-row { font-size: 11px; color: var(--text, #334155); margin-bottom: 8px; display: flex; gap: 10px; flex-wrap: wrap; }
.mk-trans b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.mk-fwd { width: 100%; border-collapse: collapse; font-size: 11px; }
.mk-fwd th { font-weight: 600; color: var(--dim, #94a3b8); text-align: center; padding: 2px 4px; font-family: var(--font-mono); }
.mk-fwd th:first-child { text-align: left; }
.mk-fwd td { text-align: center; padding: 3px 4px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.mk-fwd td span { display: block; line-height: 1.25; }
.mk-fwd .mk-sub { font-size: 9px; color: var(--dim, #94a3b8); }
.mk-fwd .mk-rowlabel { text-align: left; color: var(--dim, #64748b); font-size: 10px; }
.mk-fwd .mk-na { color: var(--dim, #cbd5e1); }
.mk-fwd .mk-lown { opacity: 0.45; }
.mk-fwd .up { color: var(--bull, #16a34a); font-weight: 700; }
.mk-fwd .down { color: var(--bear, #dc2626); font-weight: 700; }
.mk-accum { margin-top: 4px; }
.mk-accum-bar { height: 6px; border-radius: 3px; background: var(--surface-3, #e5e7eb); overflow: hidden; margin-bottom: 5px; }
.mk-accum-fill { height: 100%; background: linear-gradient(90deg, #60a5fa, #3b82f6); transition: width 0.3s; }
.mk-accum-txt { font-size: 10px; color: var(--dim, #94a3b8); }
.mk-foot { font-size: 9.5px; color: var(--dim, #94a3b8); margin-top: 8px; line-height: 1.4; }

/* ── Track Record / Edge Report ────────────────────────────────────── */
.track-record-section { margin-top: 22px; }
.tr-accum { font-size: 12px; color: var(--dim, #94a3b8); padding: 10px 0; }
.tr-version-banner {
  font-size: 11.5px;
  line-height: 1.4;
  padding: 8px 11px;
  margin: 0 0 12px;
  border-radius: 8px;
  background: rgba(99,102,241,0.08);
  color: var(--text, #1d1d1f);
  border-left: 2px solid rgba(99,102,241,0.6);
}
.tr-version-banner b { color: rgb(67,56,202); }
.tr-grid { display: grid; gap: 14px; grid-template-columns: 1.4fr 1fr; }
@media (max-width: 860px) { .tr-grid { grid-template-columns: 1fr; } }
.tr-card { border: 1px solid var(--border, #e5e7eb); border-radius: var(--radius-lg); padding: 16px 18px; background: var(--panel, #fff); box-shadow: var(--shadow); }
.tr-card-title { font-weight: 700; font-size: 13px; margin-bottom: 12px; }
.tr-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.tr-kpi { text-align: center; padding: 8px 4px; background: var(--surface-2, #fafafa); border-radius: 8px; }
.tr-kpi-val { font-size: 19px; font-weight: 800; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tr-kpi-lbl { font-size: 9.5px; color: var(--dim, #94a3b8); margin-top: 2px; }
.tr-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .tr-tables { grid-template-columns: 1fr; } .tr-kpis { grid-template-columns: repeat(2,1fr); } }
.tr-tbl-cap { font-size: 10.5px; color: var(--dim, #64748b); font-weight: 600; margin-bottom: 5px; }
.tr-tbl { width: 100%; border-collapse: collapse; font-size: 11px; }
.tr-tbl th { text-align: left; font-weight: 600; color: var(--dim, #94a3b8); padding: 3px 5px; border-bottom: 1px solid var(--border, #eee); font-size: 10px; }
.tr-tbl td { padding: 4px 5px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--border-soft, #f3f4f6); }
.tr-tbl .tr-grade { font-weight: 700; font-family: var(--font-sans); }
.tr-tbl .tr-n { color: var(--dim, #cbd5e1); font-size: 10px; }
.tr-tbl .tr-dt { color: var(--dim, #94a3b8); font-size: 10px; }
.tr-grade-inline { display: inline-block; padding: 0 5px; border-radius: 4px; background: var(--surface-3, #f1f5f9); font-size: 9.5px; color: var(--dim, #64748b); font-family: var(--font-sans); }
.tr-stop { color: var(--bear, #dc2626); font-size: 9px; font-weight: 700; }
.tr-tbl .up, .tr-kpi-val.up { color: var(--bull, #16a34a); }
.tr-tbl .down, .tr-kpi-val.down { color: var(--bear, #dc2626); }
.tr-insight { margin-top: 12px; padding: 9px 11px; background: var(--accent-soft, #eff6ff); border-left: 3px solid var(--accent, #3b82f6); border-radius: 6px; font-size: 11.5px; line-height: 1.5; color: var(--text, #334155); }
.tr-ph { font-size: 10px; color: var(--dim, #94a3b8); font-weight: 500; font-family: var(--font-mono); }
.tr-cutoff {
  font-size: 11px;
  color: var(--dim, #6e6e73);
  background: var(--bg-soft, #f5f5f7);
  border: 1px solid var(--border-soft, #f3f4f6);
  border-radius: 6px;
  padding: 5px 9px;
  margin: -6px 0 12px 0;
  display: inline-block;
  letter-spacing: 0.005em;
}

/* "Building track record…" placeholder shown to non-admin users while the
   system accumulates statistically meaningful trade outcomes (n < 30). */
.tr-gated-card {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #e5e5ea);
  border-radius: var(--radius-lg, 16px);
  padding: 22px 24px;
  text-align: center;
}
.tr-gated-card .card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text, #1d1d1f);
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}
.tr-gated-body { max-width: 420px; margin: 0 auto; }
.tr-gated-headline {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #1d1d1f);
  margin-bottom: 12px;
}
.tr-gated-bar {
  width: 100%;
  height: 6px;
  background: var(--bg-soft, #f5f5f7);
  border-radius: 999px;
  overflow: hidden;
  margin: 0 0 8px 0;
}
.tr-gated-bar-fill {
  height: 100%;
  background: var(--accent, #0071e3);
  border-radius: inherit;
  transition: width .3s ease;
}
.tr-gated-meta {
  font-size: 11px;
  color: var(--dim, #6e6e73);
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
  margin-bottom: 14px;
}
.tr-gated-note {
  font-size: 12.5px;
  color: var(--dim, #6e6e73);
  line-height: 1.5;
  letter-spacing: 0.005em;
}
.tr-hz-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 4px 0 12px; }
.tr-hz { text-align: center; padding: 6px 2px; border-radius: 7px; background: var(--surface-2, #fafafa); border: 1px solid transparent; }
.tr-hz-active { border-color: var(--accent, #3b82f6); background: var(--accent-soft, #eff6ff); }
.tr-hz-h { font-size: 9.5px; color: var(--dim, #94a3b8); font-family: var(--font-mono); }
.tr-hz-v { font-size: 15px; font-weight: 800; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tr-hz-n { font-size: 9px; color: var(--dim, #cbd5e1); }
.tr-hz-v.up { color: var(--bull, #16a34a); }
.tr-hz-v.down { color: var(--bear, #dc2626); }

/* ── Backtest card ─────────────────────────────────────────────────── */
.bt-card { margin-bottom: 14px; }

/* v77.26, Legacy-engine banner. Quarantines the retired LLM swing-idea
 * backtest so traders stop reading those numbers as current performance.
 * Visual treatment: muted amber so it reads as "FYI archive" not "alert". */
.bt-card-legacy { opacity: 0.92; }
.bt-legacy-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.10), rgba(245, 158, 11, 0.04));
  border: 1px solid rgba(245, 158, 11, 0.30);
  border-left-width: 3px;
  border-radius: var(--radius-md, 12px);
}
.bt-legacy-pill {
  display: inline-block;
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 4px 9px;
  background: rgba(245, 158, 11, 0.18);
  color: #92400e;
  border-radius: 999px;
  white-space: nowrap;
}
.bt-legacy-note {
  flex: 1;
  font-size: 12.5px;
  color: var(--text-soft, #3a3a3c);
  line-height: 1.5;
}
.bt-legacy-note strong { color: var(--text, #1d1d1f); }


.bt-headline { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: center; margin-bottom: 14px; }
@media (max-width: 720px) { .bt-headline { grid-template-columns: 1fr; } }
.bt-curve-lbl { font-size: 10.5px; color: var(--dim, #64748b); font-weight: 600; margin-bottom: 4px; }
.bt-equity { width: 100%; height: 64px; display: block; }
.bt-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bt-kpi { text-align: center; padding: 8px 4px; background: var(--surface-2, #fafafa); border-radius: 8px; }
.bt-kpi-val { font-size: 18px; font-weight: 800; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.bt-kpi-lbl { font-size: 9px; color: var(--dim, #94a3b8); margin-top: 2px; }
.bt-kpi-val.up { color: var(--bull, #16a34a); }
.bt-kpi-val.down { color: var(--bear, #dc2626); }
.bt-tbl .bt-best { background: var(--bull-soft, #f0fdf4); font-weight: 600; }
.bt-tbl .bt-best td:first-child { color: var(--bull, #15803d); }

/* ── Top Opportunities ─────────────────────────────────────────────── */
.opportunities-section { margin-bottom: 22px; }
.opp-regime { font-size: 12.5px; color: var(--text, #334155); background: var(--accent-soft, #eff6ff); border-left: 3px solid var(--accent, #3b82f6); border-radius: 6px; padding: 8px 11px; margin-bottom: 10px; }
.opp-regime:empty { display: none; }
.opp-regime-icon { margin-right: 4px; }
.opp-themes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.opp-theme { padding: 6px 10px; border-radius: 8px; font-size: 11px; border: 1px solid var(--border, #e5e7eb); background: var(--surface-2, #fafafa); cursor: help; }
.opp-theme-strength { font-size: 8.5px; font-weight: 800; letter-spacing: 0.04em; padding: 1px 5px; border-radius: 4px; margin-right: 5px; vertical-align: middle; }
.opp-theme-name { font-weight: 700; }
.opp-theme-tickers { color: var(--dim, #94a3b8); margin-left: 6px; font-family: var(--font-mono); font-size: 10px; }
.th-hot .opp-theme-strength { background: var(--bull, #16a34a); color: #fff; }
.th-warm .opp-theme-strength { background: var(--warn, #d97706); color: #fff; }
.th-emerging .opp-theme-strength { background: var(--dim, #64748b); color: #fff; }
.th-hot { border-color: var(--bull, #16a34a); }
/* Apple-style segmented control, Bull / Bear / All filter */
.opp-toggle { display: inline-flex; gap: 3px; padding: 3px; background: var(--inner, #f5f5f7); border-radius: 10px; margin-bottom: 14px; }
.opp-toggle:empty { display: none; }
.opp-seg { min-height: 0; padding: 6px 14px; border: none; background: transparent; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--dim, #6e6e73); cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; letter-spacing: -0.01em; }
.opp-seg:hover { color: var(--text, #1d1d1f); background: transparent; box-shadow: none; }
.opp-seg.active { background: var(--panel, #fff); color: var(--text, #1d1d1f); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.opp-seg-n { font-family: var(--font-mono); font-size: 10.5px; color: var(--dim-2, #86868b); margin-left: 3px; }
.opp-seg.active .opp-seg-n { color: var(--accent, #0071e3); }
/* ── Portfolio Risk panel ─────────────────────────────────────────── */
.opp-risk:empty { display: none; }
.risk-card { margin-bottom: 14px; }
.risk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.risk-acct { font-size: 12px; color: var(--dim, #6e6e73); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.risk-acct input { min-height: 0; width: 96px; padding: 6px 10px; font-size: 13px; font-family: var(--font-mono); border: 1px solid var(--border, #e6e6e9); border-radius: 8px; background: var(--inner, #f5f5f7); color: var(--text); }
.risk-acct input:focus { outline: none; border-color: var(--accent, #0071e3); box-shadow: 0 0 0 3px var(--accent-ring); background: #fff; }
.risk-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.risk-kpi { text-align: center; padding: 9px 4px; background: var(--inner, #f5f5f7); border-radius: 10px; }
.risk-kpi-val { font-size: 19px; font-weight: 800; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text); }
.risk-kpi-lbl { font-size: 9.5px; color: var(--dim-2, #86868b); margin-top: 2px; }
.risk-budget { height: 8px; border-radius: 4px; background: var(--inner-hi, #ebebed); overflow: hidden; margin-bottom: 4px; }
.risk-budget-fill { height: 100%; background: linear-gradient(90deg, #34c759, #0071e3); transition: width .3s; }
.risk-budget-lbl { font-size: 10px; color: var(--dim-2, #86868b); margin-bottom: 12px; }
.risk-clusters { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.risk-cluster { display: flex; align-items: center; gap: 10px; }
.risk-cluster-bar { flex: 0 0 120px; height: 7px; border-radius: 4px; background: var(--inner-hi, #ebebed); overflow: hidden; }
.risk-cluster-fill { height: 100%; background: var(--accent, #0071e3); }
.risk-cluster-fill.capped { background: var(--warn, #bf6000); }
.risk-cluster-lbl { font-size: 11.5px; color: var(--text-soft, #424245); }
.risk-cluster-lbl b { font-family: var(--font-mono); }
.risk-warn { font-size: 11.5px; color: var(--warn, #bf6000); background: var(--warn-bg, #fff8ec); border-radius: 8px; padding: 7px 10px; margin-top: 6px; line-height: 1.4; }
.regime-strip { border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; border: 1px solid var(--border); }
.regime-strip.regime-risk_on { background: var(--bull-soft); border-color: rgba(9,158,74,0.2); }
.regime-strip.regime-risk_off { background: var(--bear-soft); border-color: rgba(224,50,44,0.2); }
.regime-strip.regime-high_vol { background: var(--bear-soft); border-color: rgba(224,50,44,0.3); }
.regime-strip.regime-chop { background: var(--inner, #f5f5f7); }
.regime-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.regime-label { font-weight: 700; font-size: 13px; color: var(--text); }
.regime-favors { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 5px; background: var(--panel); }
.regime-favors.up { color: var(--bull); } .regime-favors.down { color: var(--bear); }
.regime-meta { font-size: 11px; color: var(--dim); font-family: var(--font-mono); margin-left: auto; }
.regime-guidance { font-size: 11.5px; color: var(--text-soft); line-height: 1.45; }
.learn-card { margin-bottom: 14px; }
.learn-insight { font-size: 12px; color: var(--text-soft); background: var(--accent-soft); border-radius: 8px; padding: 7px 11px; margin-bottom: 6px; line-height: 1.45; }
.tr-tbl .tr-lown { opacity: 0.5; }
.opp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.opp-card { border: 1px solid var(--border, #e5e7eb); border-radius: var(--radius-lg); padding: 14px 16px; background: var(--panel, #fff); box-shadow: var(--shadow); cursor: pointer; transition: border-color .18s, box-shadow .18s, transform .18s; }
.opp-card:hover { transform: translateY(-1px); }
.opp-card:hover { border-color: var(--accent, #3b82f6); box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.opp-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.opp-tk { font-weight: 800; font-size: 15px; font-family: var(--font-mono); }
.opp-thesis { font-size: 11px; font-weight: 700; }
.opp-thesis.up { color: var(--bull, #16a34a); }
.opp-thesis.down { color: var(--bear, #dc2626); }
.opp-conf { margin-left: auto; font-size: 10px; color: var(--accent, #3b82f6); font-family: var(--font-mono); letter-spacing: -1px; cursor: help; }
.opp-card-theme { font-size: 10px; color: var(--dim, #64748b); margin-bottom: 6px; }
.opp-card-theme .opp-theme-strength { font-size: 8px; }
.opp-card-stats { display: flex; flex-wrap: wrap; gap: 10px; font-size: 10.5px; color: var(--dim, #64748b); }
.opp-card-stats b { font-family: var(--font-mono); color: var(--text, #334155); }
.opp-card-stats .up { color: var(--bull, #16a34a); }
.opp-card-stats .down { color: var(--bear, #dc2626); }
.opp-loading { grid-column: 1 / -1; padding: 18px; text-align: center; font-size: 12.5px; color: var(--dim, #64748b); background: var(--surface-2, #fafafa); border-radius: 10px; border: 1px dashed var(--border, #e5e7eb); }
.opp-loading-sub { display: block; font-size: 10.5px; color: var(--dim, #94a3b8); margin-top: 4px; }
/* ── Gravity, dealer-positioning map ────────────────────────────── */
.gravity-section { margin-bottom: 22px; }
.gv-body { display: flex; flex-direction: column; gap: 14px; }

/* Stale-snapshot banner, visible when serving last EOD instead of live recompute */
.gv-stale-banner {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--warn-bg, #fff8ec);
  border: 1px solid var(--warn, #bf6000);
  border-radius: var(--radius-md, 12px);
  padding: 10px 14px;
}
.gv-stale-icon { font-size: 18px; flex-shrink: 0; line-height: 1.4; }
.gv-stale-head { font-size: 12px; font-weight: 700; color: var(--warn, #bf6000); letter-spacing: 0.02em; }
.gv-stale-body { font-size: 12px; color: var(--text-soft, #424245); margin-top: 3px; line-height: 1.45; }

/* ── v73, Dirty-map banner ── */
.gv-dirty-banner {
  display: flex; align-items: flex-start; gap: 12px;
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  border: 1px solid #374151;
  border-radius: var(--radius-md, 12px);
  padding: 12px 16px;
  color: #f3f4f6;
}
.gv-dirty-icon { font-size: 20px; flex-shrink: 0; line-height: 1.4; }
.gv-dirty-head { font-size: 13px; font-weight: 800; color: #f59e0b; letter-spacing: 0.04em; text-transform: uppercase; }
.gv-dirty-body { font-size: 12px; color: #d1d5db; margin-top: 4px; line-height: 1.5; }
.gv-dirty-body b { color: #fbbf24; }

/* ── v73, Live tag with pulse (matches brand cyan, but signals freshness) ── */
.gv-live-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.1em;
  padding: 2px 9px 2px 6px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  margin-left: 8px;
  vertical-align: middle;
}
.gv-live-pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #10b981;
  animation: gvLivePulse 1.6s ease-in-out infinite;
}
@keyframes gvLivePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
  50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}

/* ── v73, Labeled color legend (our differentiator) ── */
.gv-legend {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
  padding: 0;
  overflow: hidden;
}
.gv-legend[open] { padding-bottom: 10px; }
.gv-legend-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.gv-legend-head::-webkit-details-marker { display: none; }
.gv-legend-title { font-size: 12.5px; font-weight: 700; color: var(--text); }
.gv-legend-toggle { font-size: 14px; color: var(--dim); transition: transform 0.2s ease; }
.gv-legend[open] .gv-legend-toggle { transform: rotate(180deg); }
.gv-legend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  padding: 0 14px;
}
.gv-legend-item {
  border-left: 4px solid var(--dim);
  background: var(--bg-soft, #f5f5f7);
  border-radius: 6px;
  padding: 9px 12px;
}
.gv-legend-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.gv-legend-swatch { width: 14px; height: 14px; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,0.05); }
.gv-legend-label { font-size: 12.5px; font-weight: 800; color: var(--text); letter-spacing: 0.04em; }
.gv-legend-meaning { font-size: 11.5px; color: var(--text-soft); line-height: 1.45; }
.gv-legend-action { font-size: 11px; color: var(--dim); margin-top: 3px; line-height: 1.5; }
.gv-legend-action strong { color: var(--text-soft); font-weight: 700; }

/* v73, Zone badge on each Key Level row + per-row action line */
.gv-kl-zone-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: help;
  flex-shrink: 0;
}
.gv-kl-action {
  font-size: 11.5px;
  color: var(--text-soft);
  background: var(--bg-soft, #f5f5f7);
  border-left: 3px solid var(--dim);
  border-radius: 4px;
  padding: 6px 10px;
  margin-top: 6px;
  line-height: 1.5;
}
.gv-kl-action strong { color: var(--text); font-weight: 700; }

/* The honesty banner, tone-coloured by regime classifier */
.gv-banner {
  border-radius: var(--radius-lg, 16px);
  border: 1px solid var(--border, #e5e5ea);
  padding: 14px 18px;
  background: var(--panel, #ffffff);
}
.gv-banner-head { font-size: 14.5px; font-weight: 700; color: var(--text, #1d1d1f); margin-bottom: 6px; letter-spacing: -0.005em; }
.gv-banner-body { font-size: 12.5px; color: var(--text, #1d1d1f); line-height: 1.55; }
.gv-banner-meta { font-size: 11px; color: var(--dim, #6e6e73); margin-top: 8px; font-variant-numeric: tabular-nums; }
/* Calm / FYI day, neutral white, faint border */
.gv-tone-calm { background: var(--bg-soft, #f5f5f7); border-color: var(--border-soft, #f3f4f6); }
.gv-tone-calm .gv-banner-head { color: var(--dim, #6e6e73); }
/* Normal, default look */
.gv-tone-normal { }
/* Tail negative, amber warning */
.gv-tone-tail_neg {
  background: linear-gradient(180deg, #fff8eb 0%, #fffaf0 100%);
  border-color: #f4cb73;
}
.gv-tone-tail_neg .gv-banner-head { color: #92580d; }
/* Tail positive, calm green */
.gv-tone-tail_pos {
  background: linear-gradient(180deg, #f0faf4 0%, #f7fcf9 100%);
  border-color: #a3d9b1;
}
.gv-tone-tail_pos .gv-banner-head { color: #1f6a3a; }
/* Learning, blue accent */
.gv-tone-learning {
  background: linear-gradient(180deg, #f1f6ff 0%, #f8fbff 100%);
  border-color: #b9d4f5;
}
.gv-tone-learning .gv-banner-head { color: #0a4a8a; }

/* Summary row, top 3 numbers at a glance */
.gv-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.gv-sum-row {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #e5e5ea);
  border-radius: var(--radius-md, 12px);
  padding: 10px 12px;
  text-align: center;
}
.gv-sum-k { font-size: 10.5px; color: var(--dim, #6e6e73); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.gv-sum-v { font-size: 17px; font-weight: 700; color: var(--text, #1d1d1f); font-variant-numeric: tabular-nums; font-family: var(--font-mono, monospace); margin-top: 4px; }
.gv-sum-v.up { color: var(--bull, #099e4a); }
.gv-sum-v.down { color: var(--bear, #e0322c); }
@media (max-width: 620px) { .gv-summary { grid-template-columns: 1fr; } }

/* Action zones */
.gv-zones-title { font-size: 11px; color: var(--dim, #6e6e73); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; }
.gv-zones { display: flex; flex-direction: column; gap: 8px; }
.gv-zone {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #e5e5ea);
  border-radius: var(--radius-md, 12px);
  padding: 11px 13px;
}
.gv-zone-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.gv-zone-icon { font-size: 14px; }
.gv-zone-strike { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; font-family: var(--font-mono, monospace); }
.gv-zone-type { font-size: 10px; font-weight: 700; color: var(--dim, #6e6e73); text-transform: uppercase; letter-spacing: 0.04em; }
.gv-zone-bar {
  flex: 1; height: 4px;
  background: var(--bg-soft, #f5f5f7);
  border-radius: 999px;
  overflow: hidden;
  margin-left: auto;
  max-width: 110px;
}
.gv-zone-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--dim, #6e6e73);
}
.gv-zone-caption { font-size: 12.5px; color: var(--text, #1d1d1f); line-height: 1.5; font-weight: 500; }
.gv-zone-simple-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text, #1d1d1f);
  letter-spacing: -0.005em;
}
.gv-zone-todo {
  font-size: 11.5px;
  color: var(--dim, #6e6e73);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border-soft, #f3f4f6);
  line-height: 1.5;
}
/* Technical detail, collapsed by default for power users */
.gv-zone-tech {
  margin-top: 6px;
  font-size: 10.5px;
}
.gv-zone-tech summary {
  cursor: pointer;
  color: var(--dim, #6e6e73);
  font-weight: 500;
  letter-spacing: 0.005em;
  font-style: italic;
}
.gv-zone-tech summary:hover { color: var(--accent, #0071e3); }
.gv-zone-tech-body {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  color: var(--dim, #6e6e73);
  background: var(--bg-soft, #f5f5f7);
  border-radius: 6px;
  padding: 8px 10px;
  margin-top: 4px;
  line-height: 1.5;
}

/* "How to read this map" intro card, beginners-first onboarding */
.gv-intro {
  background: linear-gradient(180deg, #f1f6ff 0%, #f8fbff 100%);
  border: 1px solid #b9d4f5;
  border-radius: var(--radius-md, 12px);
  padding: 12px 14px;
  margin-bottom: 6px;
}
.gv-intro summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  color: #0a4a8a;
  letter-spacing: -0.005em;
  list-style: none;
}
.gv-intro summary::-webkit-details-marker { display: none; }
.gv-intro[open] summary { margin-bottom: 10px; }
.gv-intro-body { display: flex; flex-direction: column; gap: 8px; }
.gv-intro-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12.5px;
  color: var(--text, #1d1d1f);
  line-height: 1.5;
}
.gv-intro-row b { font-weight: 700; }
.gv-intro-row i { color: var(--dim, #6e6e73); font-style: italic; }
.gv-intro-icon {
  font-size: 18px;
  line-height: 1.3;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}
.gv-intro-tip {
  font-size: 12px;
  color: var(--text, #1d1d1f);
  background: rgba(255,255,255,0.6);
  border-radius: 8px;
  padding: 9px 11px;
  line-height: 1.5;
  margin-top: 4px;
}
.gv-intro-dismiss {
  align-self: flex-start;
  background: transparent;
  border: 1px solid #b9d4f5;
  color: #0a4a8a;
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 11.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  margin-top: 4px;
  transition: background 0.15s ease;
}
.gv-intro-dismiss:hover { background: rgba(10,74,138,0.08); }
/* Zone-type accent borders */
/* v73.3, action zone cards now use the exact 7-zone palette hex so
   cards, ladder rows, Key Levels badges, and the legend all match.
   Boost/Slide both belong to AMPLIFIER (negative gamma) but keep their
   direction-specific icon (🚀 up, ⛷️ down), the zone badge inside the
   card makes the AMPLIFIER classification explicit. Magnet = MAGNET. */
.gv-zone-call { border-left: 4px solid #dc2626; }      /* AMPLIFIER red (up direction) */
.gv-zone-call .gv-zone-bar-fill { background: #dc2626; }
.gv-zone-call .gv-zone-strike { color: #dc2626; }
.gv-zone-put  { border-left: 4px solid #dc2626; }      /* AMPLIFIER red (down direction) */
.gv-zone-put .gv-zone-bar-fill { background: #dc2626; }
.gv-zone-put .gv-zone-strike { color: #dc2626; }
.gv-zone-pin  { border-left: 4px solid #16a34a; }      /* MAGNET green */
.gv-zone-pin .gv-zone-bar-fill { background: #16a34a; }
.gv-zone-pin .gv-zone-strike { color: #16a34a; }
/* Zone classification badge, links each action card back to the legend.
   Identical look + color hex to the badges in Key Levels rows. */
.gv-zone-mapbadge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 3px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Power-user chart (collapsed by default) */
.gv-details {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #e5e5ea);
  border-radius: var(--radius-md, 12px);
  padding: 12px 14px;
}
.gv-details summary { font-size: 12px; color: var(--dim, #6e6e73); cursor: pointer; font-weight: 600; }
.gv-details[open] summary { margin-bottom: 8px; }
.gv-chart { width: 100%; height: auto; max-height: 380px; display: block; }

/* ── Section titles inside Gravity body ──────────────────────────── */
.gv-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #1d1d1f);
  letter-spacing: -0.005em;
  margin-top: 4px;
  margin-bottom: 4px;
}

/* ── Key Levels, 5 stacked cards (the new default view) ────────── */
.gv-keylevels {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #e5e5ea);
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.gv-kl-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft, #f3f4f6);
}
.gv-kl-row:last-child { border-bottom: 0; }
/* v73.1, rows without a legacy icon collapse the left column so the
   new zone badge becomes the leftmost visual element. Spot row keeps
   the 📍 pin. */
.gv-kl-row.gv-kl-no-icon { grid-template-columns: 1fr; }
.gv-kl-icon { font-size: 20px; line-height: 1; text-align: center; }
.gv-kl-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gv-kl-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.gv-kl-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text, #1d1d1f);
  letter-spacing: -0.005em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gv-kl-strike {
  font-size: 18px;
  font-weight: 800;
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--text, #1d1d1f);
}
.gv-kl-dist {
  font-size: 10.5px;
  font-weight: 600;
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--bg-soft, #f5f5f7);
  color: var(--dim, #6e6e73);
}
.gv-kl-dist.up { color: var(--bull, #099e4a); background: rgba(9,158,74,0.08); }
.gv-kl-dist.down { color: var(--bear, #e0322c); background: rgba(224,50,44,0.08); }
.gv-kl-caption { font-size: 12px; color: var(--dim, #6e6e73); line-height: 1.5; }
/* Per-kind tints, coral / blue / accent / amber */
.gv-kl-ceiling { background: linear-gradient(90deg, rgba(255,99,99,0.06) 0%, rgba(255,99,99,0.02) 100%); }
.gv-kl-ceiling .gv-kl-strike { color: #c83838; }
.gv-kl-floor { background: linear-gradient(90deg, rgba(50,130,220,0.06) 0%, rgba(50,130,220,0.02) 100%); }
.gv-kl-floor .gv-kl-strike { color: #1f6abc; }
.gv-kl-magnet { background: linear-gradient(90deg, rgba(181,137,0,0.05) 0%, rgba(181,137,0,0.01) 100%); }
.gv-kl-magnet .gv-kl-strike { color: #b58900; }
.gv-kl-flip {
  background: linear-gradient(90deg, rgba(181,137,0,0.04) 0%, rgba(181,137,0,0.01) 100%);
  border-top: 1px dashed #b58900;
  border-bottom: 1px dashed #b58900;
}
.gv-kl-flip .gv-kl-strike { color: #b58900; }
.gv-kl-spot {
  background: linear-gradient(90deg, rgba(0,113,227,0.10) 0%, rgba(0,113,227,0.04) 50%, rgba(0,113,227,0.10) 100%);
  border-top: 2px solid var(--accent, #0071e3);
  border-bottom: 2px solid var(--accent, #0071e3);
}
.gv-kl-spot .gv-kl-strike { color: var(--accent, #0071e3); font-size: 20px; }
.gv-kl-spot .gv-kl-label { color: var(--accent, #0071e3); }

/* ── Today's Playbook, 3-card decision row ──────────────────────── */
.gv-playbook {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.gv-pb-card {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #e5e5ea);
  border-radius: var(--radius-md, 12px);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gv-pb-head {
  font-size: 11px;
  font-weight: 700;
  color: var(--dim, #6e6e73);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.gv-pb-arrow { font-size: 14px; line-height: 1; }
.gv-pb-body { font-size: 12.5px; color: var(--text, #1d1d1f); line-height: 1.5; }
/* v73.4, Playbook card colors are driven inline from d.zoneLabels so they
   always match the actual target strike's zone color (WALL / FLOOR /
   MAGNET / NEUTRAL). The bare class rules below just set border weight
   and a fallback color in case d.zoneLabels is missing. */
.gv-pb-up   { border-left: 4px solid #2563eb; }  /* WALL blue fallback */
.gv-pb-down { border-left: 4px solid #ea580c; }  /* FLOOR orange fallback */
.gv-pb-mid  { border-left: 4px solid #16a34a; }  /* MAGNET green fallback */
/* Inline zone badge inside each playbook card heading, same shape as
   the badges in Key Levels and action cards. */
.gv-pb-zonebadge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  margin-left: 6px;
  vertical-align: 1px;
  white-space: nowrap;
}
@media (max-width: 720px) { .gv-playbook { grid-template-columns: 1fr; } }

/* ── Collapsible details for advanced views ──────────────────────── */
.gv-zones-details,
.gv-ladder-details {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #e5e5ea);
  border-radius: var(--radius-md, 12px);
  padding: 10px 14px;
}
.gv-zones-details summary,
.gv-ladder-details summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--dim, #6e6e73);
  letter-spacing: 0.01em;
}
.gv-zones-details summary:hover,
.gv-ladder-details summary:hover { color: var(--accent, #0071e3); }
.gv-zones-details[open] summary,
.gv-ladder-details[open] summary { margin-bottom: 10px; }
.gv-ladder-wrap { margin-top: 8px; }

/* ── Disclaimer at the bottom of the Gravity page ────────────────── */
/* v75.8, Inline Gravity DQ banner. Renders at the top of the Gravity tab
   whenever the current symbol has any server- or client-detected
   integrity issues. The banner is intentionally loud, credibility
   demands users see this BEFORE acting on the data. */
.gv-dq-banner {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px;
  margin: 0 0 14px;
  border-radius: var(--radius-md, 12px);
  border-width: 1px; border-style: solid;
}
.gv-dq-icon { font-size: 22px; line-height: 1; margin-top: 1px; flex-shrink: 0; }
.gv-dq-body { flex: 1; min-width: 0; }
.gv-dq-head { font-size: 13.5px; font-weight: 800; letter-spacing: -0.005em; }
.gv-dq-list {
  margin: 6px 0 6px; padding-left: 18px;
  font-size: 12px; line-height: 1.5; color: var(--text);
}
.gv-dq-list li { margin-bottom: 3px; }
.gv-dq-foot { font-size: 11px; color: var(--dim, #6e6e73); }
.gv-dq-warn  {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.10), rgba(245, 158, 11, 0.03));
  border-color: rgba(245, 158, 11, 0.35);
}
.gv-dq-warn .gv-dq-head { color: #b45309; }
.gv-dq-error {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.10), rgba(220, 38, 38, 0.03));
  border-color: rgba(220, 38, 38, 0.40);
}
.gv-dq-error .gv-dq-head { color: #b91c1c; }

/* v75, Calendar Hazard banners (Expiry Distortion + Liquidation Window)
   and the Index Sync panel. These are the cross-tape + temporal reads
   that turn the gravity map into a full situational picture. */
.gv-hazard {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 14px;
  margin: 0 0 10px;
  border-radius: var(--radius-md, 12px);
}
.gv-hazard-icon { font-size: 18px; line-height: 1; margin-top: 1px; flex-shrink: 0; }
.gv-hazard-body { flex: 1; min-width: 0; }
.gv-hazard-title {
  font-size: 13px; font-weight: 700; letter-spacing: -0.005em;
}
.gv-hazard-sub {
  font-size: 11.5px; line-height: 1.45; color: var(--dim, #6e6e73);
  margin-top: 3px;
}
.gv-hazard-opex {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.10), rgba(245, 158, 11, 0.04));
  border: 1px solid rgba(245, 158, 11, 0.30);
}
.gv-hazard-opex .gv-hazard-title { color: #b45309; }
.gv-hazard-liq {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.10), rgba(124, 58, 237, 0.04));
  border: 1px solid rgba(124, 58, 237, 0.30);
}
.gv-hazard-liq .gv-hazard-title { color: #6d28d9; }

/* Index Sync panel, sits above the verdict on index views. */
.gv-sync {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 4px;
  align-items: center;
  padding: 12px 16px;
  margin: 0 0 12px;
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--border, #e5e5ea);
}
.gv-sync-head {
  grid-column: 1;
  font-size: 13.5px; font-weight: 800;
  letter-spacing: -0.005em;
}
.gv-sync-syms {
  grid-column: 2; grid-row: 1 / span 2;
  display: inline-flex; gap: 6px;
}
.gv-sync-sym {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; font-family: var(--font-mono, monospace);
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.gv-sync-sym-up   { color: #15803d; background: rgba(22, 163, 74, 0.10); border-color: rgba(22, 163, 74, 0.30); }
.gv-sync-sym-down { color: #b91c1c; background: rgba(220, 38, 38, 0.10); border-color: rgba(220, 38, 38, 0.30); }
.gv-sync-sym-flat { color: var(--dim, #6e6e73); }
.gv-sync-detail {
  grid-column: 1;
  font-size: 11.5px; line-height: 1.45; color: var(--dim, #6e6e73);
}
.gv-sync-bull     { background: linear-gradient(135deg, rgba(22, 163, 74, 0.06), rgba(22, 163, 74, 0.02)); border-color: rgba(22, 163, 74, 0.25); }
.gv-sync-bull .gv-sync-head { color: #15803d; }
.gv-sync-bear     { background: linear-gradient(135deg, rgba(220, 38, 38, 0.06), rgba(220, 38, 38, 0.02)); border-color: rgba(220, 38, 38, 0.25); }
.gv-sync-bear .gv-sync-head { color: #b91c1c; }
.gv-sync-neutral  { background: var(--bg-soft, #f5f5f7); }
.gv-sync-diverged { background: linear-gradient(135deg, rgba(245, 158, 11, 0.06), rgba(245, 158, 11, 0.02)); border-color: rgba(245, 158, 11, 0.30); }
.gv-sync-diverged .gv-sync-head { color: #b45309; }

.gv-disclaimer {
  font-size: 11.5px;
  color: var(--dim, #6e6e73);
  line-height: 1.5;
  background: var(--bg-soft, #f5f5f7);
  border-left: 3px solid var(--warn, #d97706);
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 4px;
}

/* ── Alignment card (Phase 2, GEX × VEX 4-state) ─────────────── */
.gv-align {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #e5e5ea);
  border-radius: var(--radius-lg, 16px);
  padding: 14px 16px;
}
.gv-align-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.gv-align-pill {
  font-size: 9.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg-soft, #f5f5f7);
  color: var(--dim, #6e6e73);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.gv-align-title { font-size: 14px; font-weight: 700; color: var(--text, #1d1d1f); letter-spacing: -0.005em; }
.gv-align-body { font-size: 12.5px; color: var(--text, #1d1d1f); line-height: 1.5; margin-bottom: 12px; }
.gv-align-greeks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gv-greek {
  background: var(--bg-soft, #f5f5f7);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex; flex-direction: column;
}
.gv-greek-label { font-size: 9.5px; color: var(--dim, #6e6e73); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.gv-greek-val { font-size: 14px; font-weight: 700; font-family: var(--font-mono, monospace); font-variant-numeric: tabular-nums; margin-top: 2px; }
.gv-greek-val.up { color: var(--bull, #099e4a); }
.gv-greek-val.down { color: var(--bear, #e0322c); }
.gv-greek-meaning { font-size: 10px; color: var(--dim, #6e6e73); margin-top: 2px; }
/* Alignment tone backgrounds */
.gv-align-calm     { }
.gv-align-tail_neg {
  background: linear-gradient(180deg, #fff8eb 0%, #fffaf0 100%);
  border-color: #f4cb73;
}
.gv-align-tail_neg .gv-align-pill { background: #f4cb73; color: #5b3a04; }
.gv-align-tail_pos {
  background: linear-gradient(180deg, #f0faf4 0%, #f7fcf9 100%);
  border-color: #a3d9b1;
}
.gv-align-tail_pos .gv-align-pill { background: #a3d9b1; color: #14502a; }
@media (max-width: 620px) { .gv-align-greeks { grid-template-columns: 1fr; } }

/* ── Charm Clock, last-90-min 0DTE charm-pressure card ─────────── */
.gv-charm {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #e5e5ea);
  border-radius: var(--radius-lg, 16px);
  padding: 12px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.gv-charm-head {
  display: flex; align-items: center; gap: 10px;
}
.gv-charm-state {
  font-size: 9.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg-soft, #f5f5f7);
  color: var(--dim, #6e6e73);
  letter-spacing: 0.06em;
}
.gv-charm-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #1d1d1f);
  letter-spacing: -0.005em;
}
.gv-charm-countdown {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--dim, #6e6e73);
  font-family: var(--font-mono, monospace);
  background: var(--bg-soft, #f5f5f7);
  padding: 3px 8px;
  border-radius: 6px;
}
.gv-charm-body {
  display: flex; align-items: center; gap: 16px;
}
.gv-charm-direction {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--dim, #6e6e73);
}
.gv-charm-direction.up { color: var(--bull, #099e4a); }
.gv-charm-direction.down { color: var(--bear, #e0322c); }
.gv-charm-arrow { font-size: 22px; line-height: 1; }
.gv-charm-dir-label { letter-spacing: -0.005em; }
.gv-charm-caption { font-size: 12.5px; color: var(--text, #1d1d1f); line-height: 1.5; flex: 1; }
.gv-charm-meta { font-size: 10.5px; color: var(--dim, #6e6e73); font-variant-numeric: tabular-nums; }
/* State-based tones, 7 phases, each with a distinct visual treatment */
.gv-charm-closed {
  background: var(--bg-soft, #f5f5f7);
  border-color: var(--border-soft, #f3f4f6);
}
.gv-charm-closed .gv-charm-title { color: var(--dim, #6e6e73); }
.gv-charm-pre_open {
  background: linear-gradient(180deg, #f8f5fb 0%, #fbf9fd 100%);
  border-color: #d8c5e8;
}
.gv-charm-pre_open .gv-charm-state { background: #d8c5e8; color: #4a2868; }
.gv-charm-opening {
  background: linear-gradient(180deg, #f7fafe 0%, #fbfcfe 100%);
  border-color: #b9d4f5;
}
.gv-charm-opening .gv-charm-state { background: #b9d4f5; color: #0a4a8a; }
.gv-charm-morning {
  background: linear-gradient(180deg, #f8fcfb 0%, #fbfdfd 100%);
  border-color: #b9e0d4;
}
.gv-charm-morning .gv-charm-state { background: #b9e0d4; color: #134d3a; }
.gv-charm-building {
  background: linear-gradient(180deg, #fefdf7 0%, #fffaf0 100%);
  border-color: #f4cb73;
}
.gv-charm-building .gv-charm-state { background: #f4cb73; color: #5b3a04; }
.gv-charm-watching {
  background: linear-gradient(180deg, #fefdf7 0%, #fffef5 100%);
  border-color: #e8d99a;
}
.gv-charm-watching .gv-charm-state { background: #e8d99a; color: #5b3a04; }
.gv-charm-active {
  background: linear-gradient(180deg, #f7fbf9 0%, #f0f9f4 100%);
  border-color: #98d4ad;
  box-shadow: 0 0 0 4px rgba(9,158,74,0.06);
}
.gv-charm-active .gv-charm-state { background: #98d4ad; color: #134d29; }

/* ── The Verdict, synthesis decision layer ──────────────────────── */
/* Dashboard "Today's setups", batch list */
.today-setups-section { margin-bottom: 20px; }

/* v77.3, Confluence Setups (new swing engine output) */
.confluence-section { margin-bottom: 24px; }

/* ── v77.68, Morning Brief (Decision Desk) ───────────────────── */
.brief-section { margin-bottom: 20px; }
.brief {
  border-radius: 14px;
  padding: 16px 18px;
  border: 1px solid var(--border, #e5e5ea);
}
.brief-damp {
  background: linear-gradient(135deg, rgba(22,163,74,0.08) 0%, rgba(22,163,74,0.02) 100%);
  border-color: rgba(22,163,74,0.35);
}
.brief-amp {
  background: linear-gradient(135deg, rgba(220,38,38,0.08) 0%, rgba(220,38,38,0.02) 100%);
  border-color: rgba(220,38,38,0.35);
}
.brief-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}
.brief-stance {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 4px 11px;
  border-radius: 6px;
  color: #fff;
  flex-shrink: 0;
}
.brief-damp .brief-stance { background: #16a34a; }
.brief-amp  .brief-stance { background: #dc2626; }
.brief-title { font-size: 13px; font-weight: 700; color: var(--text, #1d1d1f); }
.brief-time { font-size: 11px; color: var(--dim, #6e6e73); margin-left: auto; font-variant-numeric: tabular-nums; }
.brief-body { font-size: 13px; line-height: 1.55; color: var(--text-soft, #3a3a3c); margin-bottom: 10px; }
.brief-mixed {
  font-size: 12px;
  font-weight: 600;
  color: var(--warn, #d97706);
  padding: 7px 11px;
  background: rgba(217,119,6,0.08);
  border-radius: 8px;
  margin-bottom: 10px;
}
.brief-indices {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.brief-idx {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 11px;
  background: var(--bg, #fff);
  border: 1px solid var(--border, #e5e5ea);
  border-radius: 8px;
  font-size: 12px;
}
.brief-idx-sym { font-family: var(--font-mono, monospace); font-weight: 800; min-width: 44px; }
.brief-idx-spot { font-family: var(--font-mono, monospace); font-weight: 700; color: var(--text, #1d1d1f); font-variant-numeric: tabular-nums; }
.brief-idx-pressure { font-weight: 700; font-size: 11px; }
.brief-idx-levels {
  color: var(--dim, #6e6e73);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.brief-lv-sep { opacity: 0.5; }
.brief-macro {
  font-size: 12px;
  color: var(--text-soft, #3a3a3c);
  padding-top: 6px;
  border-top: 1px dashed var(--border, #e5e5ea);
}

/* Dealer-story strip on swing cards */
.cf-ctx-line {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 7px 0 2px;
}
.cf-fit {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 4px;
  color: #fff;
  cursor: help;
}
.cf-fit-grind { background: #16a34a; }
.cf-fit-mom { background: #dc2626; }
.cf-fit-runway { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); }
.cf-ctx {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--bg-soft, #f5f5f7);
  border: 1px solid var(--border, #e5e5ea);
  color: var(--text-soft, #3a3a3c);
  cursor: help;
  font-variant-numeric: tabular-nums;
}

/* ══ v77.69, DESK THEME: vibrant light trading-desk layer ═════════
 * Design goals: rich + energetic WITHOUT dark backgrounds. Electric
 * indigo→violet as the "engine" identity gradient, amber as the energy
 * accent, tinted glows instead of gray shadows. Everything stays on
 * white/near-white surfaces for daylight readability + iOS Safari. */
:root {
  --desk-grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #d946ef 100%);
  --desk-grad-soft: linear-gradient(135deg, rgba(79,70,229,0.09) 0%, rgba(124,58,237,0.05) 55%, rgba(217,70,239,0.07) 100%);
  --desk-amber: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
  --desk-glow-indigo: 0 6px 24px rgba(79,70,229,0.14);
  --desk-glow-amber: 0 6px 24px rgba(245,158,11,0.16);
}
/* Subtle premium wash at the top of the app, barely-there tint that
 * makes white cards pop without any dark surface. */
body {
  background-image: linear-gradient(180deg, rgba(79,70,229,0.045) 0%, rgba(217,70,239,0.02) 220px, transparent 480px);
  background-repeat: no-repeat;
}
/* Section headers, gradient dot + tighter identity */
.h2-dot {
  background: var(--desk-grad) !important;
  box-shadow: 0 0 8px rgba(124,58,237,0.5);
}
/* Top-nav active pill, engine identity gradient */
.topnav-item[aria-selected="true"],
.topnav-item.active {
  background: var(--desk-grad) !important;
  color: #fff !important;
  box-shadow: var(--desk-glow-indigo);
}
.bottom-tab[aria-selected="true"] { color: #6d28d9 !important; }
/* Key cards get tinted elevation + hover lift (desktop) / press (touch) */
.confluence-card,
.brief,
.radar,
.gv-hp,
.gv-pulse,
.gv-timeline {
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.confluence-card:hover,
.radar-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--desk-glow-indigo);
}

/* ── Big Move Radar, the hero strip ── */
.radar-section { margin-bottom: 20px; }
.radar {
  position: relative;
  border-radius: 16px;
  padding: 16px 18px 14px;
  background: #fff;
  border: 1px solid rgba(124,58,237,0.22);
  box-shadow: var(--desk-glow-indigo);
  overflow: hidden;
}
/* Identity strip across the top of the radar */
.radar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--desk-grad);
}
.radar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.radar-title {
  font-size: 14px;
  font-weight: 800;
  background: var(--desk-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.01em;
}
.radar-meta { font-size: 11px; color: var(--dim, #6e6e73); }
.radar-hz { margin-bottom: 10px; }
.radar-hz:last-child { margin-bottom: 0; }
.radar-hz-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--dim, #6e6e73);
  margin-bottom: 7px;
}
.radar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}
.radar-card {
  appearance: none;
  text-align: left;
  cursor: pointer;
  border-radius: 12px;
  padding: 12px 13px;
  background: var(--desk-grad-soft);
  border: 1px solid rgba(124,58,237,0.18);
  min-height: 44px;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.radar-card:active { transform: scale(0.985); }
.radar-up { border-left: 3px solid #16a34a; }
.radar-down { border-left: 3px solid #dc2626; }
.radar-coiled { border-left: 3px solid #f59e0b; }
.radar-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.radar-sym {
  font-family: var(--font-mono, monospace);
  font-size: 15px;
  font-weight: 800;
  color: var(--text, #1d1d1f);
}
.radar-dir { font-size: 13px; font-weight: 800; cursor: help; }
.radar-dir.up { color: #16a34a; }
.radar-dir.down { color: #dc2626; }
.radar-dir.coiled { color: #f59e0b; }
.radar-score {
  margin-left: auto;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: var(--desk-amber);
  padding: 3px 9px;
  border-radius: 999px;
  box-shadow: var(--desk-glow-amber);
  cursor: help;
  font-variant-numeric: tabular-nums;
}
.radar-spot {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--dim, #6e6e73);
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.radar-drivers { display: flex; flex-direction: column; gap: 4px; }
.radar-driver {
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--text-soft, #3a3a3c);
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(124,58,237,0.12);
  border-radius: 6px;
  padding: 4px 8px;
}
.radar-none { font-size: 12px; color: var(--dim, #6e6e73); line-height: 1.5; }
.radar-empty { box-shadow: none; }

/* ── v77.81, Direction-first radar cards ─────────────────────────── */
.radar-dir-badge {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
  cursor: help;
  white-space: nowrap;
}
.radar-dir-badge.up     { color: #fff; background: #16a34a; }
.radar-dir-badge.down   { color: #fff; background: #dc2626; }
.radar-dir-badge.coiled { color: #7c2d12; background: #fde68a; }
.radar-dir-strength { font-size: 8px; letter-spacing: 2px; vertical-align: 1px; }
.radar-both {
  font-size: 9.5px;
  font-weight: 700;
  color: #6d28d9;
  background: rgba(124,58,237,0.10);
  border-radius: 999px;
  padding: 2px 7px;
  white-space: nowrap;
  cursor: help;
}
.radar-card.radar-up     { border-left: 3px solid #16a34a; }
.radar-card.radar-down   { border-left: 3px solid #dc2626; }
.radar-card.radar-coiled { border-left: 3px dashed #f59e0b; }
.radar-cue {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  padding: 5px 9px;
  border-radius: 8px;
  margin-bottom: 6px;
}
.radar-cue.up     { color: #166534; background: rgba(22,163,74,0.10); }
.radar-cue.down   { color: #991b1b; background: rgba(220,38,38,0.10); }
.radar-cue.coiled { color: #92400e; background: rgba(245,158,11,0.12); }

/* ── v77.81, Market Pulse additions ──────────────────────────────── */
.pulse-stance { font-weight: 600; }
.pulse-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 4px; }
.pulse-chip {
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,0.8);
  border: 1px solid var(--border, #e5e5ea);
  color: var(--text-soft, #3a3a3c);
  cursor: help;
}
.pulse-chip.up   { color: #166534; border-color: rgba(22,163,74,0.35); background: rgba(22,163,74,0.07); }
.pulse-chip.down { color: #991b1b; border-color: rgba(220,38,38,0.35); background: rgba(220,38,38,0.07); }
.pulse-chip.flat { color: var(--dim, #6e6e73); }
.pulse-struct {
  font-size: 12px;
  color: var(--text-soft, #3a3a3c);
  margin-top: 8px;
  line-height: 1.5;
}

/* ── v77.81, Focus Trade of the Week ─────────────────────────────── */
.focus {
  border-radius: var(--radius-lg, 16px);
  background: var(--panel, #ffffff);
  border: 1.5px solid var(--border, #e5e5ea);
  padding: 16px 18px 13px;
  margin-bottom: 16px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.focus:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(0,0,0,0.07); }
.focus-long  { border-color: rgba(22,163,74,0.5); background: linear-gradient(180deg, rgba(22,163,74,0.05), transparent 55%), var(--panel, #fff); }
.focus-short { border-color: rgba(220,38,38,0.5); background: linear-gradient(180deg, rgba(220,38,38,0.05), transparent 55%), var(--panel, #fff); }
.focus-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.focus-badge {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
  background: linear-gradient(90deg, #7c3aed, #a855f7);
  padding: 4px 11px;
  border-radius: 999px;
}
.focus-grade {
  font-size: 11px;
  font-weight: 800;
  color: #7c3aed;
  background: rgba(124,58,237,0.10);
  padding: 3px 9px;
  border-radius: 999px;
  cursor: help;
}
.focus-replaced { font-size: 10.5px; font-weight: 700; color: #b45309; cursor: help; }
.focus-week { margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--dim, #6e6e73); font-family: var(--font-mono, monospace); }
.focus-main { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.focus-sym { font-family: var(--font-mono, monospace); font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.focus-dir { font-size: 15px; font-weight: 800; }
.focus-long .focus-dir { color: #16a34a; }
.focus-short .focus-dir { color: #dc2626; }
.focus-spot { font-size: 13px; color: var(--dim, #6e6e73); font-family: var(--font-mono, monospace); font-variant-numeric: tabular-nums; }
.focus-rr { font-size: 13px; font-weight: 800; color: #0071e3; font-family: var(--font-mono, monospace); }
.focus-levels { display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--font-mono, monospace); font-size: 13.5px; font-variant-numeric: tabular-nums; margin-bottom: 10px; }
.focus-levels b { font-family: var(--font-sans, system-ui); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dim, #6e6e73); margin-right: 5px; }
.focus-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.focus-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-soft, #f5f5f7);
  border: 1px solid var(--border, #e5e5ea);
  color: var(--text-soft, #3a3a3c);
}
.focus-foot { font-size: 11px; color: var(--dim, #6e6e73); line-height: 1.5; }
.focus-none { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; cursor: default; padding: 12px 16px; }
.focus-none-msg { font-size: 12px; color: var(--dim, #6e6e73); line-height: 1.5; }

/* ── v77.81, Slim empty state (shared) ───────────────────────────── */
.slim-empty {
  font-size: 12px;
  color: var(--dim, #6e6e73);
  line-height: 1.5;
  background: var(--bg-soft, #f5f5f7);
  border: 1px dashed var(--border, #e5e5ea);
  border-radius: 10px;
  padding: 9px 14px;
  margin-bottom: 12px;
}

@media (max-width: 620px) {
  .radar { padding: 13px 13px 11px; border-radius: 14px; }
  .radar-grid { grid-template-columns: 1fr; }
  .focus { padding: 13px 13px 11px; }
  .focus-week { flex-basis: 100%; margin-left: 0; order: 5; }
  .focus-levels { gap: 12px; }
  .pulse-chips { gap: 5px; }
}

/* ── v77.73, Whisper: the decision agent pane ────────────────────── */
.gv-whisper-body { padding-top: 6px; }
.wsp-status {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--desk-grad-soft, rgba(79,70,229,0.06));
  border: 1px solid rgba(124,58,237,0.22);
  margin-bottom: 8px;
}
.wsp-agent {
  font-size: 14px;
  font-weight: 800;
  background: var(--desk-grad, linear-gradient(135deg, #4f46e5, #7c3aed));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wsp-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
}
.wsp-state-live { color: #15803d; }
.wsp-state-idle { color: var(--dim, #6e6e73); }
.wsp-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.wsp-state-live .wsp-dot { animation: wspPulse 1.6s ease-in-out infinite; }
@keyframes wspPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.8); }
}
.wsp-syms {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  color: var(--dim, #6e6e73);
}
.wsp-exp {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 9px;
  border-radius: 4px;
  background: var(--desk-grad, linear-gradient(135deg, #4f46e5, #7c3aed));
  color: #fff;
}
.wsp-explain {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--dim, #6e6e73);
  margin: 0 2px 14px;
}
.wsp-section-title {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--dim, #6e6e73);
  margin: 14px 0 8px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.wsp-stream-src { font-weight: 600; letter-spacing: 0.02em; margin-left: auto; }
.wsp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.wsp-card {
  border-radius: 14px;
  padding: 14px 15px;
  background: #fff;
  border: 1px solid var(--border, #e5e5ea);
  box-shadow: var(--desk-glow-indigo, 0 6px 24px rgba(79,70,229,0.10));
}
.wsp-long { border-left: 3px solid #16a34a; }
.wsp-short { border-left: 3px solid #dc2626; }
.wsp-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.wsp-sym {
  font-family: var(--font-mono, monospace);
  font-size: 19px;
  font-weight: 800;
  color: var(--text, #1d1d1f);
}
.wsp-dir {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border, #e5e5ea);
  background: var(--bg-soft, #f5f5f7);
}
.wsp-dir.up { color: #15803d; border-color: rgba(22,163,74,0.4); }
.wsp-dir.down { color: #b91c1c; border-color: rgba(220,38,38,0.4); }
.wsp-ring {
  margin-left: auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wsp-ring-inner {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  font-weight: 800;
  color: var(--text, #1d1d1f);
}
.wsp-contract {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.wsp-contract-name {
  font-family: var(--font-mono, monospace);
  font-size: 14px;
  font-weight: 800;
  color: #4338ca;
}
.wsp-contract-entry {
  font-family: var(--font-mono, monospace);
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.wsp-contract-none { font-size: 11.5px; color: var(--dim, #6e6e73); }
.wsp-max {
  font-size: 12px;
  color: var(--text-soft, #3a3a3c);
  margin-top: 4px;
}
.wsp-max b { color: #15803d; }
.wsp-rr {
  font-size: 12px;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
  cursor: help;
}
.wsp-rr-note { font-size: 10px; color: var(--dim, #6e6e73); }
.wsp-levels {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--dim, #6e6e73);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border, #e5e5ea);
}
.wsp-lv-sep { opacity: 0.5; }
.wsp-why { margin-top: 8px; }
.wsp-why summary {
  font-size: 11px;
  font-weight: 700;
  color: var(--dim, #6e6e73);
  cursor: pointer;
  min-height: 30px;
  display: flex;
  align-items: center;
}
.wsp-why ul {
  margin: 4px 0 2px;
  padding-left: 18px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-soft, #3a3a3c);
}
.wsp-foot {
  margin-top: 9px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--dim, #6e6e73);
}
.wsp-empty {
  font-size: 12px;
  line-height: 1.55;
  color: var(--dim, #6e6e73);
  padding: 14px;
  border: 1px dashed var(--border, #e5e5ea);
  border-radius: 12px;
  background: var(--bg-soft, #f5f5f7);
}
.wsp-stream {
  border: 1px solid var(--border, #e5e5ea);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.wsp-ev {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 13px;
  border-bottom: 1px dashed var(--border, #e5e5ea);
  font-size: 12px;
}
.wsp-ev:last-child { border-bottom: none; }
.wsp-ev-agent {
  font-weight: 800;
  flex-shrink: 0;
  min-width: 84px;
  color: var(--text, #1d1d1f);
}
.wsp-ev-msg { color: var(--text-soft, #3a3a3c); line-height: 1.45; }
.wsp-ev-time {
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  color: var(--dim, #6e6e73);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 620px) {
  .wsp-grid { grid-template-columns: 1fr; }
  .wsp-ev { flex-wrap: wrap; }
  .wsp-ev-time { margin-left: 0; width: 100%; text-align: right; }
}
.confluence-meta {
  font-size: 11.5px; color: var(--dim, #6e6e73);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.confluence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}
.confluence-card {
  background: var(--panel, #fff);
  border: 1px solid var(--border, #e5e5ea);
  border-left-width: 3px;
  border-radius: var(--radius-md, 12px);
  padding: 14px 16px;
  transition: box-shadow 0.15s ease;
}
.confluence-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.confluence-card.cf-long  { border-left-color: #16a34a; }
.confluence-card.cf-short { border-left-color: #dc2626; }
.cf-head {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 4px;
}
.cf-sym {
  font-family: var(--font-mono, monospace);
  font-weight: 800; font-size: 17px;
  letter-spacing: -0.01em;
}
.cf-dir {
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.04em;
}
.cf-score {
  margin-left: auto;
  font-family: var(--font-mono, monospace);
  font-size: 11px; font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  color: var(--dim, #6e6e73);
}
.cf-score-high { background: rgba(22, 163, 74, 0.15); color: #15803d; }
.cf-score-mid  { background: rgba(245, 158, 11, 0.15); color: #b45309; }
.cf-score-low  { background: rgba(0, 0, 0, 0.06); color: var(--dim); }
.cf-spot {
  font-size: 12px; color: var(--dim, #6e6e73);
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}
.cf-tripod {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-soft, #f5f5f7);
  border-radius: 10px;
  margin-bottom: 12px;
}
.cf-cell { min-width: 0; }
.cf-k {
  font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--dim, #6e6e73);
  margin-bottom: 2px;
}
.cf-v {
  font-family: var(--font-mono, monospace);
  font-size: 13.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.cf-v-target { color: #15803d; }
.cf-v-stop   { color: #b91c1c; }
.cf-v-rr     { color: var(--accent-solid, #3B82F6); }
.cf-pct {
  font-size: 10px; font-weight: 600;
  margin-left: 4px;
  opacity: 0.8;
}
.cf-reasons-label {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--dim, #6e6e73);
  margin-bottom: 4px;
}
.cf-reasons {
  margin: 0; padding-left: 18px;
  font-size: 12px; line-height: 1.55;
  color: var(--text, #1d1d1f);
}
.cf-reasons li { margin-bottom: 2px; }

/* v77.4, Horizon tags (inline in section header and per-card) */
.cf-horizon-tag {
  display: inline-block;
  padding: 2px 8px;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.15);
  color: #15803d;
  vertical-align: 2px;
}
.cf-horizon-tag.cf-horizon-mw {
  background: rgba(124, 58, 237, 0.15);
  color: #6d28d9;
}
.cf-card-horizon {
  font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px;
  background: rgba(124, 58, 237, 0.10);
  color: #6d28d9;
}
.confluence-card.cf-mw .cf-card-horizon {
  background: rgba(124, 58, 237, 0.15);
}

/* Multi-week empty state, slight purple accent to distinguish */
.confluence-empty-mw {
  border-color: rgba(124, 58, 237, 0.20);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.03), rgba(124, 58, 237, 0.01));
}

/* v77.10, Compact swing card variant (dashboard). Reduces vertical
 * density so 5+ ideas fit on screen. Click opens the detail modal. */
.cf-grid-compact {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}
.confluence-card.cf-compact {
  cursor: pointer;
  appearance: none;
  font: inherit;
  text-align: left;
  width: 100%;
  padding: 10px 14px;
  background: var(--panel, #fff);
  border: 1px solid var(--border, #e5e5ea);
  border-left-width: 3px;
  border-radius: var(--radius-md, 12px);
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}
.confluence-card.cf-compact:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}
.confluence-card.cf-compact:focus-visible {
  outline: 2px solid var(--accent-solid, #3B82F6);
  outline-offset: 2px;
}
.confluence-card.cf-compact .cf-head { margin-bottom: 6px; }
.cf-compact-line {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.cf-compact-k {
  font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--dim, #6e6e73);
  margin-right: 3px;
}
.cf-compact-rr {
  font-weight: 800;
  color: var(--accent-solid, #3B82F6);
}
.cf-compact-tgt { color: #15803d; font-weight: 700; }
.cf-compact-stop { color: #b91c1c; font-weight: 700; }
.cf-compact-hint {
  font-size: 10.5px;
  color: var(--dim, #6e6e73);
  opacity: 0.7;
  margin-top: 2px;
}
.confluence-card.cf-compact:hover .cf-compact-hint { opacity: 1; }

/* Swing detail modal, uses the alerts-modal scaffolding. */
.swing-detail-card { max-width: 560px; }
#swing-detail-body .confluence-card {
  border: none; padding: 0; box-shadow: none;
  border-left-width: 0;
}
#swing-detail-body .confluence-card:hover { box-shadow: none; }

/* Empty state, honest 'no setups' message */
.confluence-empty {
  text-align: center;
  padding: 30px 20px;
  background: var(--bg-soft, #f5f5f7);
  border: 1px solid var(--border, #e5e5ea);
  border-radius: var(--radius-md, 12px);
}
.confluence-empty-icon { font-size: 32px; line-height: 1; margin-bottom: 8px; }
.confluence-empty-head {
  font-size: 14px; font-weight: 700;
  color: var(--text, #1d1d1f);
  margin-bottom: 4px;
}
.confluence-empty-sub {
  font-size: 12px; color: var(--dim, #6e6e73);
}

.verdict-list {
  padding: 18px 20px;
  border-radius: var(--radius-lg, 16px);
}
.verdict-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.verdict-list-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text, #1d1d1f);
  letter-spacing: -0.01em;
}
.verdict-list-meta { font-size: 11px; color: var(--dim, #6e6e73); font-variant-numeric: tabular-nums; }
.verdict-rows { display: flex; flex-direction: column; gap: 8px; }
.verdict-rows-waits { margin-top: 8px; opacity: 0.85; }
.verdict-list-foot {
  font-size: 11px;
  color: var(--dim, #6e6e73);
  margin-top: 12px;
  font-style: italic;
}
.verdict-waits-details {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft, #f3f4f6);
}
.verdict-waits-details summary {
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--dim, #6e6e73);
}
.verdict-waits-details[open] summary { margin-bottom: 6px; }

/* One verdict row */
.verdict-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--radius-md, 12px);
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #e5e5ea);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.verdict-row:hover { transform: translateY(-1px); border-color: var(--accent, #0071e3); }
.verdict-row-icon { font-size: 16px; line-height: 1.2; }
.verdict-row-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.verdict-row-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.verdict-row-symbol {
  font-size: 15px;
  font-weight: 800;
  font-family: var(--font-mono, monospace);
  letter-spacing: -0.01em;
}
.verdict-row-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.verdict-row-spot {
  font-size: 12px;
  color: var(--dim, #6e6e73);
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
}
.verdict-row-conf {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bg-soft, #f5f5f7);
  color: var(--dim, #6e6e73);
  margin-left: auto;
}
.verdict-row-trade {
  font-size: 12.5px;
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text, #1d1d1f);
}
.verdict-row-why {
  font-size: 11.5px;
  color: var(--dim, #6e6e73);
  line-height: 1.5;
}
/* Directional lean, shown when verdict is WAIT but pillars still tilt one way.
 * Tells the user "we're not high-conviction but here's the read if you do trade." */
.verdict-row-lean {
  font-size: 11px;
  font-weight: 600;
  margin-top: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  display: inline-block;
}
.verdict-row-lean.lean-bull { background: var(--bull-soft); color: var(--bull); }
.verdict-row-lean.lean-bear { background: var(--bear-soft); color: var(--bear); }
/* Verdict-specific tones */
.vr-calls { border-left: 3px solid var(--bull, #099e4a); }
.vr-calls .verdict-row-label { color: var(--bull, #099e4a); }
.vr-puts  { border-left: 3px solid var(--bear, #e0322c); }
.vr-puts  .verdict-row-label { color: var(--bear, #e0322c); }
.vr-wait  { border-left: 3px solid var(--dim, #6e6e73); }
.vr-wait  .verdict-row-label { color: var(--dim, #6e6e73); }
/* Lean rows (v77.79): directional tilt below a full call. Same tones as
   calls/puts but a DASHED left border so a lean never reads as a hard signal. */
.vr-lean-bull { border-left: 3px dashed var(--bull, #099e4a); }
.vr-lean-bull .verdict-row-label { color: var(--bull, #099e4a); }
.vr-lean-bull .verdict-row-conf { background: var(--bull-soft); color: var(--bull, #099e4a); }
.vr-lean-bear { border-left: 3px dashed var(--bear, #e0322c); }
.vr-lean-bear .verdict-row-label { color: var(--bear, #e0322c); }
.vr-lean-bear .verdict-row-conf { background: var(--bear-soft); color: var(--bear, #e0322c); }
/* Leaning band is a collapsible details (v77.80), reuses the waits-details
   chrome; the summary gets a soft accent so it still reads as directional
   while collapsed. */
.verdict-leans-details summary { color: var(--accent, #0071e3); font-weight: 700; }

/* Single-ticker verdict card (detail view + Gravity page) */
.verdict-card {
  padding: 22px 24px;
  border-radius: var(--radius-lg, 16px);
  border-width: 2px;
}
.verdict-card-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.verdict-card-symbol {
  font-size: 22px;
  font-weight: 800;
  font-family: var(--font-mono, monospace);
  letter-spacing: -0.02em;
}
.verdict-card-spot {
  font-size: 14px;
  color: var(--dim, #6e6e73);
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
}
/* v73.6, structural-verdict mode tag (indices use a Gravity-native verdict
   instead of the directional engine). Small pill in the card head that
   flags the difference + carries a hover explanation. */
.verdict-card-mode-tag {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 4px;
  background: linear-gradient(135deg, #22D3EE 0%, #3B82F6 100%);
  color: #fff;
  cursor: help;
  white-space: nowrap;
  text-transform: uppercase;
}
/* Structural verdict variants, color the decision band so 🎯 TRADE THE
   LEVELS reads as positive action, ⚫ WAIT SHIFTING reads as caution,
   🔄 NEUTRAL reads as neutral. Match the 7-zone palette. */
.verdict-card-structural-trade .verdict-card-decision   { background: rgba(22, 163, 74, 0.10); }
.verdict-card-structural-trade .verdict-card-label      { color: #16a34a; }
.verdict-card-structural-wait .verdict-card-decision    { background: rgba(55, 65, 81, 0.10); }
.verdict-card-structural-wait .verdict-card-label       { color: #374151; }
.verdict-card-structural-neutral .verdict-card-decision { background: rgba(156, 163, 175, 0.12); }
.verdict-card-structural-neutral .verdict-card-label    { color: #6b7280; }
.verdict-card-decision {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px 18px;
  border-radius: var(--radius-md, 12px);
  background: var(--bg-soft, #f5f5f7);
}
.verdict-card-icon { font-size: 28px; line-height: 1; }
.verdict-card-label {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.verdict-card-calls .verdict-card-decision { background: rgba(9,158,74,0.10); }
.verdict-card-calls { border-color: var(--bull, #099e4a); }
.verdict-card-calls .verdict-card-label { color: var(--bull, #099e4a); }
.verdict-card-puts  .verdict-card-decision { background: rgba(224,50,44,0.10); }
.verdict-card-puts  { border-color: var(--bear, #e0322c); }
.verdict-card-puts  .verdict-card-label { color: var(--bear, #e0322c); }
.verdict-card-wait  .verdict-card-decision { background: var(--bg-soft, #f5f5f7); }
.verdict-card-wait  { border-color: var(--border, #e5e5ea); }
.verdict-card-wait  .verdict-card-label { color: var(--dim, #6e6e73); }
/* v77.78, LEAN cards: a directional tilt below a full call. Deliberately
   softer than the calls/puts cards (lighter tint, dashed border) so a lean
   never reads as a hard buy/sell signal. */
.verdict-card-lean-bull .verdict-card-decision { background: rgba(9,158,74,0.06); }
.verdict-card-lean-bull { border-color: rgba(9,158,74,0.45); border-style: dashed; }
.verdict-card-lean-bull .verdict-card-label { color: var(--bull, #099e4a); }
.verdict-card-lean-bear .verdict-card-decision { background: rgba(224,50,44,0.06); }
.verdict-card-lean-bear { border-color: rgba(224,50,44,0.45); border-style: dashed; }
.verdict-card-lean-bear .verdict-card-label { color: var(--bear, #e0322c); }
.verdict-lean-factors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.verdict-lean-k {
  font-size: 11px;
  font-weight: 700;
  color: var(--dim, #6e6e73);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.verdict-lean-chip {
  font-size: 12px;
  font-weight: 600;
  color: var(--text, #1d1d1f);
  background: var(--bg-soft, #f5f5f7);
  border: 1px solid var(--border, #e5e5ea);
  border-radius: 999px;
  padding: 3px 10px;
}
.verdict-lean-conv {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--dim, #6e6e73);
  white-space: nowrap;
}
.verdict-trade-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.verdict-trade-item {
  background: var(--bg-soft, #f5f5f7);
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
}
.verdict-trade-k {
  font-size: 10px;
  color: var(--dim, #6e6e73);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.verdict-trade-v {
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--text, #1d1d1f);
  margin-top: 4px;
}
.verdict-card-why {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text, #1d1d1f);
  margin-bottom: 10px;
}
.verdict-card-why-k {
  font-size: 11px;
  font-weight: 700;
  color: var(--dim, #6e6e73);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 6px;
}
.verdict-card-foot {
  font-size: 11px;
  color: var(--dim, #6e6e73);
  font-style: italic;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft, #f3f4f6);
}
.verdict-card-behavior {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text, #1d1d1f);
  background: rgba(0,113,227,0.05);
  border-left: 3px solid var(--accent, #0071e3);
  border-radius: 6px;
  padding: 9px 12px;
  margin-bottom: 10px;
}
.verdict-card-whale {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text, #1d1d1f);
  background: linear-gradient(135deg, rgba(168,84,222,0.10) 0%, rgba(75,134,242,0.06) 100%);
  border-left: 3px solid #a854de;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.verdict-card-whale-icon { font-size: 16px; line-height: 1; }
.verdict-card-whale-title { font-size: 11px; font-weight: 700; color: #6a3596; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }
.verdict-card-whale-body { font-size: 12px; color: var(--text, #1d1d1f); font-variant-numeric: tabular-nums; }
.verdict-row-whale {
  font-size: 11px;
  color: #6a3596;
  background: rgba(168,84,222,0.07);
  border-radius: 5px;
  padding: 5px 9px;
  margin-top: 4px;
  font-weight: 600;
  letter-spacing: 0.005em;
}
.verdict-row-behavior {
  font-size: 11px;
  color: var(--text, #1d1d1f);
  background: rgba(0,113,227,0.04);
  border-radius: 5px;
  padding: 5px 9px;
  margin-top: 4px;
  line-height: 1.5;
}
@media (max-width: 620px) {
  .verdict-trade-grid { grid-template-columns: 1fr; }
}

/* ── Whales page (standalone view) ─────────────────────────────── */
.whales-page-section { margin-bottom: 28px; }
.whales-summary { margin-bottom: 18px; }
.wh-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

/* ── Actionable banner, the headline of the Whales page ── */
.wh-actionable-banner {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, rgba(9,158,74,0.10), rgba(9,158,74,0.04));
  border: 1px solid var(--bull, #099e4a);
  border-radius: var(--radius-md, 12px);
  padding: 14px 18px;
  margin-bottom: 14px;
}
.wh-actionable-banner.wh-act-empty {
  background: var(--bg-soft);
  border-color: var(--border);
}
.wh-act-pulse {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--bull, #099e4a);
  flex-shrink: 0;
  position: relative;
  animation: wh-pulse 2s ease-in-out infinite;
}
.wh-act-pulse-off { background: var(--dim-2, #86868b); animation: none; }
@keyframes wh-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(9,158,74,0.6); }
  50% { box-shadow: 0 0 0 8px rgba(9,158,74,0); }
}
.wh-act-head { font-size: 14px; font-weight: 700; color: var(--text); }
.wh-act-empty .wh-act-head { color: var(--dim); font-weight: 600; }

/* ── Market Phase banner + poll-health diagnostics ── */
.wh-phase-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--text-soft);
}
.wh-phase-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wh-phase-pill {
  background: var(--accent-soft); color: var(--accent);
  padding: 3px 10px; border-radius: 999px;
  font-weight: 700; font-size: 11.5px; letter-spacing: 0.02em;
}
.wh-phase-banner.wh-phase-lunch .wh-phase-pill,
.wh-phase-banner.wh-phase-after_hours .wh-phase-pill,
.wh-phase-banner.wh-phase-closed .wh-phase-pill,
.wh-phase-banner.wh-phase-weekend .wh-phase-pill,
.wh-phase-banner.wh-phase-overnight .wh-phase-pill,
.wh-phase-banner.wh-phase-pre_market .wh-phase-pill { background: var(--inner); color: var(--dim); }
.wh-phase-banner.wh-phase-open_rush .wh-phase-pill,
.wh-phase-banner.wh-phase-power_hour .wh-phase-pill { background: var(--bull-soft); color: var(--bull); }
.wh-phase-hint { color: var(--dim); font-style: italic; }
.wh-phase-health {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--dim); font-variant-numeric: tabular-nums;
}
.wh-phase-err { color: var(--bear); }

/* Coverage-check bar: small input where the user can verify what we
 * saw for any specific ticker, useful when they spot a print on another
 * tool that we missed. */
.wh-check-bar {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
  padding: 10px 14px;
  margin-bottom: 12px;
}
#wh-check-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wh-check-label { font-size: 12.5px; color: var(--text-soft); font-weight: 600; }
#wh-check-input {
  background: var(--inner); border: 1px solid var(--border); border-radius: var(--radius-sm, 8px);
  padding: 6px 10px; font-size: 13px; color: var(--text); min-height: 32px;
  font-family: var(--font-mono); width: 130px;
}
#wh-check-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.wh-check-btn {
  background: var(--accent); color: white; border: none; border-radius: var(--radius-sm, 8px);
  padding: 6px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; min-height: 32px;
}
.wh-check-btn:hover { background: var(--accent-hi); }
.wh-check-result:not(:empty) { margin-top: 10px; }
.wh-check-loading { font-size: 12px; color: var(--dim); font-style: italic; padding: 6px 0; }
.wh-check-err { font-size: 12px; color: var(--bear); padding: 6px 0; }
.wh-check-verdict {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--border);
}
.wh-check-verdict.wh-check-tracked { background: var(--bull-soft); border-color: var(--bull); }
.wh-check-verdict.wh-check-missed-by-tracker { background: var(--warn-bg); border-color: var(--warn); }
.wh-check-verdict.wh-check-filtered-out { background: var(--bg-soft); }
.wh-check-verdict.wh-check-no-upstream { background: var(--inner); }
.wh-check-icon { font-size: 20px; line-height: 1; }
.wh-check-verdict .wh-check-label { font-size: 13px; font-weight: 700; color: var(--text); }
.wh-check-detail { font-size: 12px; color: var(--text-soft); margin-top: 3px; line-height: 1.5; }
.wh-check-rows-head { font-size: 11px; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: 0.04em; margin: 12px 0 6px; }
.wh-check-row { font-size: 12px; padding: 5px 0; border-bottom: 1px dashed var(--border); color: var(--text-soft); font-family: var(--font-mono); }
.wh-check-row:last-child { border-bottom: none; }
.wh-check-row strong { color: var(--text); }
.wh-check-rows-sellers { color: var(--dim); margin-top: 12px; }
.wh-check-dir { display: inline-block; width: 18px; }

/* ── System health banner, visible whenever a subsystem is degraded ── */
.sys-health-banner { margin: 0 0 14px; }
.sys-health-banner[hidden] { display: none; }
.sys-health-inner {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 16px;
  border-radius: var(--radius-md, 12px);
}
/* v73.19, Budget chip variants. ok → not rendered. Other levels show
   with progressively louder color treatments. budget-only style for when
   the system is otherwise healthy but the budget chip still flags. */
.sys-health-inner.sys-budget-only {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 8px 14px;
  justify-content: flex-end;
}
.sys-uw-budget {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 600;
  font-family: var(--font-mono, monospace);
  padding: 5px 10px;
  border-radius: 999px;
  cursor: help;
  background: rgba(0, 0, 0, 0.04);
  color: var(--text, #1d1d1f);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.sys-uw-label { font-weight: 800; letter-spacing: 0.04em; opacity: 0.7; }
.sys-uw-num   { font-variant-numeric: tabular-nums; }
.sys-uw-bar {
  display: inline-block; position: relative;
  width: 56px; height: 4px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.sys-uw-bar-fill {
  display: block; height: 100%;
  background: currentColor;
  transition: width 0.25s ease;
}
.sys-uw-ok        { /* default neutral */ }
.sys-uw-warn      { background: rgba(245, 158, 11, 0.15); color: #b45309; border-color: rgba(245, 158, 11, 0.35); }
.sys-uw-critical  { background: rgba(220, 38, 38, 0.15);  color: #b91c1c; border-color: rgba(220, 38, 38, 0.40); }
.sys-uw-exhausted { background: #dc2626; color: #fff;     border-color: #dc2626; }
.sys-uw-exhausted .sys-uw-bar { background: rgba(255, 255, 255, 0.25); }
.sys-health-inner.sys-degraded {
  background: var(--warn-bg);
  border: 1px solid var(--warn);
}
.sys-health-inner.sys-recovering {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
}
.sys-health-icon { font-size: 18px; line-height: 1.3; flex-shrink: 0; }
.sys-health-head { font-size: 13px; font-weight: 700; color: var(--text); }
.sys-health-sub  { font-size: 11.5px; color: var(--text-soft); margin-top: 3px; line-height: 1.5; }
.wh-act-sub { font-size: 12px; color: var(--text-soft); margin-top: 3px; line-height: 1.45; }
.wh-summary-tile {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #e5e5ea);
  border-radius: var(--radius-md, 12px);
  padding: 14px 16px;
  text-align: center;
}
.wh-summary-tile-wide { text-align: left; }
.wh-summary-num {
  font-size: 22px;
  font-weight: 800;
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text, #1d1d1f);
  line-height: 1.1;
}
.wh-summary-num .up { color: var(--bull, #099e4a); }
.wh-summary-num .down { color: var(--bear, #e0322c); }
.wh-summary-num.up { color: var(--bull, #099e4a); }
.wh-summary-num.down { color: var(--bear, #e0322c); }
.wh-summary-num.wh-summary-dim { color: var(--dim, #6e6e73); font-weight: 600; }
.wh-summary-sep { color: var(--dim, #6e6e73); margin: 0 6px; font-weight: 400; }
.wh-summary-mover { font-size: 17px; }
.wh-summary-lbl {
  font-size: 10.5px;
  color: var(--dim, #6e6e73);
  margin-top: 6px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.wh-tile-fresh {
  background: linear-gradient(135deg, rgba(255,106,0,0.08) 0%, rgba(255,142,60,0.04) 100%);
  border-color: rgba(255,106,0,0.3);
}
.whales-foot {
  font-size: 12.5px;
  color: var(--dim, #6e6e73);
  background: var(--bg-soft, #f5f5f7);
  border-radius: var(--radius-md, 12px);
  padding: 14px 18px;
  margin-top: 14px;
  line-height: 1.6;
}
.whales-foot strong { color: var(--text, #1d1d1f); font-weight: 700; }
@media (max-width: 860px) {
  .wh-summary-grid { grid-template-columns: 1fr 1fr; }
  .wh-summary-tile-wide { grid-column: 1 / -1; }
}

/* ── Whale Tracker panel ───────────────────────────────────────── */
.whale-tracker-section { margin-bottom: 20px; }
.whale-card {
  padding: 18px 20px;
  border-radius: var(--radius-lg, 16px);
}
.whale-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.whale-title { font-size: 16px; font-weight: 700; color: var(--text, #1d1d1f); letter-spacing: -0.005em; }
.whale-meta { font-size: 11px; color: var(--dim, #6e6e73); font-variant-numeric: tabular-nums; }
.whale-rows { display: flex; flex-direction: column; gap: 8px; }
.whale-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.whale-tabs {
  display: flex; gap: 4px;
  background: var(--bg-soft, #f5f5f7);
  border-radius: 999px;
  padding: 3px;
}
.whale-tab {
  padding: 6px 14px;
  border: 0;
  background: transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--dim, #6e6e73);
  cursor: pointer;
  letter-spacing: 0.005em;
}
.whale-tab:hover { color: var(--text, #1d1d1f); }
.whale-tab.active {
  background: var(--panel, #fff);
  color: var(--text, #1d1d1f);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.whale-fresh-toggle {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px;
  color: var(--dim, #6e6e73);
  cursor: pointer;
  font-weight: 600;
}
.whale-fresh-toggle input { cursor: pointer; accent-color: #ff6a00; }
.whale-fresh-toggle:hover { color: var(--text, #1d1d1f); }
.whale-push-toggle {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer; user-select: none;
  font-size: 12px; font-weight: 600;
  color: var(--dim);
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  margin-left: 8px;
}
.whale-push-toggle:hover { color: var(--text); border-color: var(--border-hi); }
.whale-push-toggle input { cursor: pointer; accent-color: var(--accent); }
.whale-push-toggle.whale-push-on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.whale-fresh {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  background: linear-gradient(135deg, #ff6a00 0%, #ff8e3c 100%);
  color: white;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  animation: whaleFreshPulse 2s ease-in-out infinite;
}
@keyframes whaleFreshPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.whale-age {
  font-size: 10.5px;
  color: var(--dim, #6e6e73);
  font-style: italic;
  font-variant-numeric: tabular-nums;
}
.whale-row-fresh {
  background: linear-gradient(90deg, rgba(255,106,0,0.08) 0%, rgba(255,106,0,0.02) 100%);
  border-color: rgba(255,106,0,0.4);
  box-shadow: 0 0 0 1px rgba(255,106,0,0.15);
}
.whale-row-fresh.whale-bull { border-left-color: var(--bull, #099e4a); }
.whale-row-fresh.whale-bear { border-left-color: var(--bear, #e0322c); }

/* ── BOUGHT / SOLD badge, most important new label when showing both sides ── */
.whale-side-badge {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.whale-side-bought {
  background: var(--accent-soft, rgba(0,113,227,0.08));
  color: var(--accent, #0071e3);
  border: 1px solid var(--accent, #0071e3);
}
.whale-side-sold {
  background: var(--bg-soft, #f5f5f7);
  color: var(--dim, #6e6e73);
  border: 1px dashed var(--border-hi, #d2d2d7);
}
/* Seller rows get a softer look, dashed left border, slightly muted background */
.whale-row-seller {
  background: linear-gradient(90deg, rgba(120,120,128,0.04) 0%, transparent 100%);
}
.whale-row-seller .whale-dir { opacity: 0.7; }

/* ── Buyer/Seller filter tabs ── */
.whale-side-tabs {
  display: inline-flex; gap: 4px;
  background: var(--inner, #f5f5f7);
  border-radius: 999px;
  padding: 3px;
}
.whale-side-tab {
  font-size: 11.5px; font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  border: none; background: transparent;
  color: var(--dim, #6e6e73);
  cursor: pointer;
  min-height: 28px;
  transition: background 0.15s, color 0.15s;
}
.whale-side-tab:hover { color: var(--text); }
.whale-side-tab.active {
  background: var(--panel, #ffffff);
  color: var(--text, #1d1d1f);
  box-shadow: var(--shadow, 0 1px 2px rgba(0,0,0,0.04));
}
.whale-side-tab-buyers.active { color: var(--accent, #0071e3); }
.whale-side-tab-sellers.active { color: var(--warn, #bf6000); }

/* ── Actionable badge, prints in the last 30 min, still tradeable ── */
/* v77.88, entry-truth lane headers + badges */
.wh-lane {
  font-size: 12px;
  color: var(--dim, #6e6e73);
  padding: 10px 14px;
  border-radius: 10px;
  margin: 14px 0 8px;
  line-height: 1.5;
}
.wh-lane b { letter-spacing: 0.04em; margin-right: 6px; }
.wh-lane-entry {
  background: rgba(9,158,74,0.08);
  border: 1px solid rgba(9,158,74,0.35);
}
.wh-lane-entry b { color: var(--bull, #099e4a); }
.wh-lane-track {
  background: var(--bg-soft, #f5f5f7);
  border: 1px dashed var(--border, #e5e5ea);
}
.whale-atentry {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bull, #099e4a);
  color: white;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.whale-moving {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(245,158,11,0.18);
  color: #b45309;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.whale-lag {
  font-size: 10px;
  font-weight: 600;
  color: var(--bull, #099e4a);
  cursor: help;
}
.whale-lag-late { color: #b45309; }

.whale-actionable {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bull, #099e4a);
  color: white;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.whale-row-actionable {
  background: linear-gradient(90deg, rgba(9,158,74,0.10) 0%, rgba(9,158,74,0.02) 100%);
  border-color: var(--bull, #099e4a) !important;
  box-shadow: 0 0 0 1px rgba(9,158,74,0.18);
}

/* ── "Already ran" badge, biggest mover but stale (>30 min) ── */
.whale-already-ran {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--inner-hi, #ebebed);
  color: var(--dim, #6e6e73);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.whale-row-stale-mover { opacity: 0.78; }
/* ⏱ stale, one-sided weekend/off-hours quote, mid is the last good
 * two-sided value; UI shows 'as of' instead of 'now' so users know. */
.whale-stale {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--warn-bg);
  color: var(--warn);
  margin-left: 4px;
  letter-spacing: 0.04em;
  cursor: help;
}

/* History line: shows the FIRST detected print vs cumulative, only rendered
 * when cumulative is ≥50% bigger than the first print, i.e. real accumulation
 * happened over time. Otherwise it'd be redundant. */
.whale-history {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed var(--border);
  font-size: 11px;
  color: var(--text-soft);
}
.whale-hist-label { color: var(--dim); font-weight: 600; letter-spacing: 0.02em; }
.whale-hist-val { font-family: var(--font-mono); font-weight: 700; color: var(--text); }
.whale-hist-sep { color: var(--dim-2); }
.whale-hist-cum { font-family: var(--font-mono); color: var(--text-soft); }
.whale-hist-active {
  background: var(--accent-soft);
  color: var(--accent);
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 600;
  margin-left: 4px;
}
/* ⭐ TOP MOVER badge + gold-tinted row for the biggest mover since fill */
.whale-row-best {
  background: linear-gradient(90deg, rgba(255,193,7,0.10) 0%, rgba(255,193,7,0.03) 100%);
  border-color: rgba(255,193,7,0.45);
  box-shadow: 0 0 0 1px rgba(255,193,7,0.18);
}
.whale-row-best.whale-bull { border-left: 3px solid var(--bull, #099e4a); }
.whale-row-best.whale-bear { border-left: 3px solid var(--bear, #e0322c); }
.whale-best {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  background: linear-gradient(135deg, #ffc107 0%, #ffa000 100%);
  color: white;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

/* Confidence ⓘ helper icon + colored confidence value */
.conf-help {
  display: inline-block;
  font-size: 11px;
  color: var(--dim, #6e6e73);
  cursor: help;
  margin-left: 4px;
  padding: 0 3px;
  border-radius: 50%;
  border: 1px solid var(--border, #e5e5ea);
  width: 14px; height: 14px;
  line-height: 12px;
  text-align: center;
}
.conf-help:hover { color: var(--accent, #0071e3); border-color: var(--accent, #0071e3); }
.conf-val { font-weight: 700; }
.conf-val.conf-high { color: var(--bull, #099e4a); }
.conf-val.conf-medium { color: var(--warn, #d97706); }
.conf-val.conf-low { color: var(--bear, #e0322c); }

/* Visual cue that the Fresh filter is currently ON */
.whale-fresh-toggle-on {
  background: rgba(255,106,0,0.10);
  border-radius: 999px;
  padding: 6px 11px;
  color: #c34d00;
}
.whale-fresh-toggle-on:hover { color: #c34d00; }
.whale-fresh-toggle-on input { accent-color: #ff6a00; }

/* ── v77.46, 🚨 URGENT flow (≤30 DTE + ≥15% OTM) ── */
.whale-urgent {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  background: linear-gradient(135deg, #ff3b30 0%, #c41a10 100%);
  color: white;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(255,59,48,0.35);
  cursor: help;
}
.whale-row-urgent {
  background: linear-gradient(90deg, rgba(255,59,48,0.12) 0%, rgba(255,59,48,0.02) 100%);
  border-color: rgba(255,59,48,0.55) !important;
  box-shadow: 0 0 0 1px rgba(255,59,48,0.20), 0 0 8px rgba(255,59,48,0.10);
}
.whale-row-urgent.whale-bull { border-left: 3px solid #ff3b30; }
.whale-row-urgent.whale-bear { border-left: 3px solid #ff3b30; }
/* Urgent-only filter toggle, mirrors fresh-toggle but in red-orange. */
.whale-urgent-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft, #6e6e73);
  cursor: pointer;
  user-select: none;
  padding: 6px 11px;
  border-radius: 999px;
  min-height: 32px;
  transition: background 0.15s ease, color 0.15s ease;
}
.whale-urgent-toggle:hover { color: var(--text, #1d1d1f); }
.whale-urgent-toggle input { cursor: pointer; accent-color: #ff3b30; }
.whale-urgent-toggle-on {
  background: rgba(255,59,48,0.12);
  color: #c41a10;
}
.whale-urgent-toggle-on:hover { color: #c41a10; }
.whale-urgent-toggle-on input { accent-color: #ff3b30; }
/* Filter-aware empty state */
.whale-empty {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 20px;
  background: var(--bg-soft, #f5f5f7);
  border-radius: var(--radius-md, 12px);
  border: 1px dashed var(--border, #e5e5ea);
}
.whale-empty-icon { font-size: 32px; line-height: 1; flex-shrink: 0; }
.whale-empty-body { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.whale-empty-title { font-size: 14px; font-weight: 700; color: var(--text, #1d1d1f); letter-spacing: -0.005em; }
.whale-empty-sub { font-size: 12.5px; color: var(--dim, #6e6e73); line-height: 1.5; }
.whale-empty-cta {
  align-self: flex-start;
  margin-top: 8px;
  padding: 7px 14px;
  background: var(--accent, #0071e3);
  color: white;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.whale-empty-cta:hover { background: #005bbb; }
.whale-foot {
  font-size: 11px;
  color: var(--dim, #6e6e73);
  margin-top: 12px;
  font-style: italic;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft, #f3f4f6);
}
.whale-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-md, 12px);
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #e5e5ea);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.whale-row:hover { transform: translateY(-1px); border-color: var(--accent, #0071e3); }
.whale-row.whale-bull { border-left: 3px solid var(--bull, #099e4a); }
.whale-row.whale-bear { border-left: 3px solid var(--bear, #e0322c); }
.whale-dir { font-size: 18px; line-height: 1.3; }
.whale-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.whale-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.whale-ticker { font-size: 14px; font-weight: 800; font-family: var(--font-mono, monospace); letter-spacing: -0.01em; }
.whale-strike { font-size: 13px; font-weight: 700; font-family: var(--font-mono, monospace); color: var(--text, #1d1d1f); }
.whale-expiry { font-size: 11px; color: var(--dim, #6e6e73); }
.whale-prem {
  font-size: 11.5px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--bg-soft, #f5f5f7);
  color: var(--text, #1d1d1f);
  margin-left: auto;
}
.whale-since {
  font-size: 13px;
  font-weight: 800;
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
}
.whale-since.up { color: var(--bull, #099e4a); }
.whale-since.down { color: var(--bear, #e0322c); }
.whale-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11px;
  color: var(--dim, #6e6e73);
  font-variant-numeric: tabular-nums;
}
.whale-fill { font-family: var(--font-mono, monospace); }
.whale-extr { color: var(--dim, #6e6e73); }
.whale-flags { color: var(--dim, #6e6e73); font-style: italic; }

/* ── Gravity badge on opportunity cards ───────────────────────────── */
.gv-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 600;
  padding: 5px 9px;
  margin-top: 6px;
  border-radius: 6px;
  background: var(--bg-soft, #f5f5f7);
  border: 1px solid var(--border-soft, #f3f4f6);
  color: var(--text, #1d1d1f);
  letter-spacing: 0.005em;
}
.gv-badge-icon { font-size: 13px; line-height: 1; flex-shrink: 0; }
.gv-badge-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gv-badge-range { font-family: var(--font-mono, monospace); font-variant-numeric: tabular-nums; color: var(--dim, #6e6e73); flex-shrink: 0; }
.gv-badge-tail-pos { background: rgba(9,158,74,0.06); border-color: #a3d9b1; }
.gv-badge-tail-pos .gv-badge-text { color: #1f6a3a; }
.gv-badge-tail-neg { background: rgba(224,50,44,0.06); border-color: #f4a8a8; }
.gv-badge-tail-neg .gv-badge-text { color: #8a2828; }
.gv-badge-calm { background: var(--bg-soft, #f5f5f7); border-color: var(--border-soft, #f3f4f6); }
.gv-badge-calm .gv-badge-text { color: var(--dim, #6e6e73); }
.gv-badge-normal { }

/* ── 0DTE banner, appears on expiration days ─────────────────────── */
.gv-zdte-banner {
  background: linear-gradient(180deg, #fff4e6 0%, #fffaf0 100%);
  border: 1px solid #f4a86a;
  border-radius: var(--radius-lg, 16px);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 1px 0 rgba(244, 168, 106, 0.2);
}
.gv-zdte-banner.gv-zdte-not-today {
  background: var(--bg-soft, #f5f5f7);
  border-color: var(--border, #e5e5ea);
  box-shadow: none;
}
.gv-zdte-flame {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.gv-zdte-text { flex: 1; min-width: 0; }
.gv-zdte-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #8a4a0a;
  letter-spacing: -0.005em;
}
.gv-zdte-banner.gv-zdte-not-today .gv-zdte-title { color: var(--dim, #6e6e73); }
.gv-zdte-meta {
  font-size: 11.5px;
  color: var(--dim, #6e6e73);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

/* ── Round-strike marker on Key Level rows ────────────────────────── */
.gv-kl-round-badge {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(181,137,0,0.12);
  color: #b58900;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.gv-kl-round {
  position: relative;
}
.gv-kl-round::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px; width: 3px;
  background: linear-gradient(180deg, #f4cb73 0%, #b58900 100%);
  border-radius: 0 2px 2px 0;
}
@media (max-width: 620px) {
  .gv-charm-body { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ── The Gravity Ladder, distinctive vertical price ladder ──── */
.gv-ladder {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #e5e5ea);
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  font-family: var(--font-mono, monospace);
}
.gv-lad-row {
  display: grid;
  /* v73.8, wider columns to fit the new % delta pill on the left and the
     $ GEX value + 👑 KING marker on the right. */
  grid-template-columns: 120px 1fr 190px;
  align-items: center;
  height: 24px;
  padding: 0 12px 0 10px;
  border-bottom: 1px solid var(--border-soft, #f3f4f6);
  transition: background 0.2s ease;
  position: relative;
}
.gv-lad-row:last-child { border-bottom: 0; }
.gv-lad-strike {
  font-size: 11px;
  color: var(--dim, #6e6e73);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.gv-lad-bar-wrap {
  position: relative; height: 14px;
  display: flex; align-items: center;
  /* center line */
  background: linear-gradient(to right, transparent 49.5%, var(--border, #e5e5ea) 49.5%, var(--border, #e5e5ea) 50.5%, transparent 50.5%);
}
.gv-lad-bar {
  position: absolute;
  top: 2px; bottom: 2px;
  border-radius: 2px;
  transition: width 0.2s ease;
}
.gv-lad-bar-pos { left: 50%; background: var(--bull, #099e4a); }
.gv-lad-bar-neg { right: 50%; background: var(--bear, #e0322c); }
.gv-lad-anno {
  text-align: right;
  font-size: 10px;
  color: var(--dim, #6e6e73);
  font-family: var(--font-ui, system-ui);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 8px;
}
/* v73.2, ZONE-based row tints. Each strike's row background matches the
   color of the zone it was classified into (server-side classifyStrikeZones,
   or client-side fallback in renderGravityLadder). Same 7-color palette as
   the Key Levels badges and the legend, so all three views speak the same
   visual language.
   🟢 MAGNET    #16a34a   strongest positive gamma, defended strike
   🔴 AMPLIFIER #dc2626   strongest negative gamma, vol amplification
   🔵 WALL      #2563eb   call OI ceiling above spot
   🟠 FLOOR     #ea580c   put OI support below spot
   🟡 FLIP      #f59e0b   zero-gamma regime change
   ⚫ SHIFTING  #374151   dirty map, re-pricing in progress
   ⚪ NEUTRAL   #9ca3af   low edge */
.gv-lad-zone-magnet.gv-int-1    { background: rgba(22, 163, 74, 0.04); }
.gv-lad-zone-magnet.gv-int-2    { background: rgba(22, 163, 74, 0.10); }
.gv-lad-zone-magnet.gv-int-3    { background: rgba(22, 163, 74, 0.18); }
.gv-lad-zone-magnet.gv-int-4    { background: rgba(22, 163, 74, 0.26); }
.gv-lad-zone-magnet.gv-int-5    { background: rgba(22, 163, 74, 0.36); }
.gv-lad-zone-amplifier.gv-int-1 { background: rgba(220, 38, 38, 0.04); }
.gv-lad-zone-amplifier.gv-int-2 { background: rgba(220, 38, 38, 0.11); }
.gv-lad-zone-amplifier.gv-int-3 { background: rgba(220, 38, 38, 0.19); }
.gv-lad-zone-amplifier.gv-int-4 { background: rgba(220, 38, 38, 0.28); }
.gv-lad-zone-amplifier.gv-int-5 { background: rgba(220, 38, 38, 0.38); }
.gv-lad-zone-wall.gv-int-1      { background: rgba(37, 99, 235, 0.04); }
.gv-lad-zone-wall.gv-int-2      { background: rgba(37, 99, 235, 0.10); }
.gv-lad-zone-wall.gv-int-3      { background: rgba(37, 99, 235, 0.18); }
.gv-lad-zone-wall.gv-int-4      { background: rgba(37, 99, 235, 0.26); }
.gv-lad-zone-wall.gv-int-5      { background: rgba(37, 99, 235, 0.36); }
.gv-lad-zone-floor.gv-int-1     { background: rgba(234, 88, 12, 0.04); }
.gv-lad-zone-floor.gv-int-2     { background: rgba(234, 88, 12, 0.10); }
.gv-lad-zone-floor.gv-int-3     { background: rgba(234, 88, 12, 0.18); }
.gv-lad-zone-floor.gv-int-4     { background: rgba(234, 88, 12, 0.26); }
.gv-lad-zone-floor.gv-int-5     { background: rgba(234, 88, 12, 0.36); }
.gv-lad-zone-flip.gv-int-1      { background: rgba(245, 158, 11, 0.05); }
.gv-lad-zone-flip.gv-int-2      { background: rgba(245, 158, 11, 0.12); }
.gv-lad-zone-flip.gv-int-3      { background: rgba(245, 158, 11, 0.20); }
.gv-lad-zone-flip.gv-int-4      { background: rgba(245, 158, 11, 0.28); }
.gv-lad-zone-flip.gv-int-5      { background: rgba(245, 158, 11, 0.38); }
.gv-lad-zone-shifting.gv-int-1  { background: rgba(55, 65, 81, 0.04); }
.gv-lad-zone-shifting.gv-int-2  { background: rgba(55, 65, 81, 0.10); }
.gv-lad-zone-shifting.gv-int-3  { background: rgba(55, 65, 81, 0.18); }
.gv-lad-zone-shifting.gv-int-4  { background: rgba(55, 65, 81, 0.24); }
.gv-lad-zone-shifting.gv-int-5  { background: rgba(55, 65, 81, 0.32); }
.gv-lad-zone-neutral.gv-int-1   { background: rgba(156, 163, 175, 0.03); }
.gv-lad-zone-neutral.gv-int-2   { background: rgba(156, 163, 175, 0.06); }
.gv-lad-zone-neutral.gv-int-3   { background: rgba(156, 163, 175, 0.10); }
.gv-lad-zone-neutral.gv-int-4   { background: rgba(156, 163, 175, 0.14); }
.gv-lad-zone-neutral.gv-int-5   { background: rgba(156, 163, 175, 0.18); }
/* v73.8, Intraday delta percentage PILL. Replaces the bare ▲/▼ from
   v73.2. Pill format shows signed delta (+87%, -45%) so the trader
   sees magnitude, not just direction. Renders inside the
   strike column, immediately after the price. */
.gv-lad-deltapill {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 8px;
  letter-spacing: 0;
  vertical-align: 1px;
}
.gv-lad-deltapill.up   { background: rgba(22, 163, 74, 0.15);  color: #16a34a; border: 1px solid rgba(22, 163, 74, 0.30); }
.gv-lad-deltapill.down { background: rgba(220, 38, 38, 0.15);  color: #dc2626; border: 1px solid rgba(220, 38, 38, 0.30); }

/* v73.8, Signed GEX dollar value, right-aligned. Color encodes sign:
   green for positive (defended /
   pinning), red for negative (vol amplification). */
.gv-lad-gexval {
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.gv-lad-gexval.pos { color: #16a34a; }
.gv-lad-gexval.neg { color: #dc2626; }

/* v73.12, 👑 KING + ⚡ STORM markers. Two strikes per band with opposite
   physical roles. KING = strongest magnet (largest positive GEX, price
   gravitates here). STORM = strongest amplifier (most negative GEX, vol
   explodes through here). Gold band for KING, red band for STORM. */
.gv-lad-king { font-size: 12px; line-height: 1; margin-left: 4px; }
.gv-lad-king-row {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.04) 0%, rgba(245, 158, 11, 0.08) 50%, rgba(245, 158, 11, 0.04) 100%);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.25);
}
.gv-lad-storm { font-size: 12px; line-height: 1; margin-left: 4px; }
.gv-lad-storm-row {
  background: linear-gradient(90deg, rgba(220, 38, 38, 0.05) 0%, rgba(220, 38, 38, 0.10) 50%, rgba(220, 38, 38, 0.05) 100%);
  box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.30);
}
/* v75, 🛡️ SENTINEL marker. Defender between spot and KING. Distinct
   teal tint so it doesn't compete with KING gold or STORM red. */
.gv-lad-sentinel { font-size: 12px; line-height: 1; margin-left: 4px; }
/* v73.16, 🌑 DARKPOOL marker. Lights up on strikes where institutional
   block trades have printed (≥$10M aggregated). Heavy variant (🌑🌑) for
   the top quartile by total premium. Subtle violet accent on the row so
   the institutional positioning story is visible without competing with
   the gamma color (zone tint). Cursor:help suggests there's a tooltip. */
.gv-lad-dp {
  font-size: 11px;
  line-height: 1;
  margin-left: 3px;
  cursor: help;
  letter-spacing: -2px;
}
.gv-lad-dp-heavy { letter-spacing: -3px; }
.gv-lad-dp-row {
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.025) 0%, rgba(124, 58, 237, 0.05) 50%, rgba(124, 58, 237, 0.025) 100%);
  box-shadow: inset 2px 0 0 rgba(124, 58, 237, 0.35);
}
.gv-lad-row { cursor: help; }

/* ── v77.66, Institutional Depth Pack ─────────────────────────── */
/* Greek lens pills, GEX/DEX/VEX/CHEX switcher above the ladder.
 * Mobile-first: ≥44pt touch targets, horizontal scroll on overflow. */
.gv-lens-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0 8px;
}
.gv-lens-pill {
  appearance: none;
  border: 1px solid var(--border, #e5e5ea);
  background: var(--bg-soft, #f5f5f7);
  color: var(--dim, #6e6e73);
  font-size: 12px;
  font-weight: 800;
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.02em;
  padding: 10px 14px;
  min-height: 40px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.gv-lens-pill:hover { color: var(--text, #1d1d1f); }
.gv-lens-pill.active {
  background: var(--accent-solid, #0071e3);
  border-color: var(--accent-solid, #0071e3);
  color: #fff;
}
.gv-lens-hint {
  font-size: 11px;
  color: var(--dim, #6e6e73);
  flex-basis: 100%;
  margin-top: 2px;
}
/* v77.67b, Active-lens reading guide: definition + green/red key. */
.gv-lens-guide {
  border: 1px solid var(--border, #e5e5ea);
  border-radius: 10px;
  padding: 11px 13px;
  margin: 4px 0 10px;
  background: var(--bg-soft, #f5f5f7);
}
.gv-lens-guide-what {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text, #1d1d1f);
  margin-bottom: 8px;
}
.gv-lens-guide-keys {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 8px;
}
.gv-lens-key {
  font-size: 11.5px;
  line-height: 1.45;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--bg, #fff);
}
.gv-lens-key-pos { border-left: 3px solid #16a34a; }
.gv-lens-key-neg { border-left: 3px solid #dc2626; }
.gv-lens-guide-read {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-soft, #3a3a3c);
  font-weight: 600;
}
/* Collapsed full reference for all four lenses. */
.gv-lens-help {
  margin: 0 0 10px;
  border: 1px dashed var(--border, #e5e5ea);
  border-radius: 10px;
  padding: 8px 13px;
}
.gv-lens-help summary {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--dim, #6e6e73);
  cursor: pointer;
  min-height: 32px;
  display: flex;
  align-items: center;
}
.gv-lens-help-block {
  padding: 10px 0;
  border-bottom: 1px dashed var(--border, #e5e5ea);
}
.gv-lens-help-block:last-child { border-bottom: none; }
.gv-lens-help-title { font-size: 12px; font-weight: 800; margin-bottom: 4px; }
.gv-lens-help-what { font-size: 11.5px; line-height: 1.45; color: var(--text-soft, #3a3a3c); margin-bottom: 6px; }
.gv-lens-help-list {
  list-style: none;
  padding: 0;
  margin: 0 0 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gv-lens-help-list li {
  font-size: 11px;
  line-height: 1.45;
  padding: 5px 9px;
  border-radius: 5px;
  background: var(--bg-soft, #f5f5f7);
}
.gv-lens-help-list li.pos { border-left: 3px solid #16a34a; }
.gv-lens-help-list li.neg { border-left: 3px solid #dc2626; }
.gv-lens-help-read { font-size: 11px; color: var(--dim, #6e6e73); font-weight: 600; line-height: 1.45; }

/* Hedging Pressure card, the "what dealers MUST do" panel. */
.gv-hp {
  border-radius: 12px;
  padding: 14px 16px;
  margin: 10px 0;
  border: 1px solid var(--border, #e5e5ea);
}
.gv-hp-damp {
  background: linear-gradient(135deg, rgba(22,163,74,0.07) 0%, rgba(22,163,74,0.02) 100%);
  border-color: rgba(22,163,74,0.35);
}
.gv-hp-amp {
  background: linear-gradient(135deg, rgba(220,38,38,0.07) 0%, rgba(220,38,38,0.02) 100%);
  border-color: rgba(220,38,38,0.35);
}
.gv-hp-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.gv-hp-pill {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 4px;
  color: #fff;
  flex-shrink: 0;
}
.gv-hp-damp .gv-hp-pill { background: #16a34a; }
.gv-hp-amp  .gv-hp-pill { background: #dc2626; }
.gv-hp-title { font-size: 12.5px; font-weight: 700; color: var(--text, #1d1d1f); }
.gv-hp-body { font-size: 13px; line-height: 1.5; color: var(--text-soft, #3a3a3c); }
.gv-hp-tiers {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 9px;
  font-size: 11.5px;
  color: var(--dim, #6e6e73);
  font-variant-numeric: tabular-nums;
}
.gv-hp-note { color: var(--warn, #d97706); font-weight: 600; }

/* Air Pockets, velocity zones with no dealer interest. */
.gv-airpockets {
  border: 1px dashed var(--border, #e5e5ea);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 10px 0;
  background: var(--bg-soft, #f5f5f7);
}
.gv-ap-head { font-size: 12px; font-weight: 700; margin-bottom: 7px; color: var(--text, #1d1d1f); }
.gv-ap-list { display: flex; gap: 8px; flex-wrap: wrap; }
.gv-ap-item {
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--bg, #fff);
  border: 1px solid var(--border, #e5e5ea);
  cursor: help;
}
.gv-ap-item em { font-style: normal; color: var(--dim, #6e6e73); font-weight: 500; }
.gv-ap-below { border-left: 3px solid #dc2626; }
.gv-ap-above { border-left: 3px solid #16a34a; }
.gv-ap-straddling { border-left: 3px solid #d97706; }

/* Air-pocket rows in the ladder, visibly "hollow" (dashed edge + faded). */
.gv-lad-pocket {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 6px,
    rgba(128,128,128,0.05) 6px 12px
  );
  box-shadow: inset 2px 0 0 rgba(128,128,128,0.25);
}
.gv-lad-pocket .gv-lad-strike { opacity: 0.65; }

/* Confluence badges, stacked-signal levels. */
.gv-lad-confl {
  font-size: 10px;
  line-height: 1;
  margin-left: 4px;
  cursor: help;
  color: var(--warn, #d97706);
  font-weight: 800;
}
.gv-lad-confl-triple {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 3px rgba(217,119,6,0.35);
}

/* ── v77.67, Alive Pack ───────────────────────────────────────── */
/* Dealer Flow Pulse, HIRO-style live oscillator card. */
.gv-pulse {
  border-radius: 12px;
  padding: 14px 16px;
  margin: 10px 0;
  border: 1px solid var(--border, #e5e5ea);
  background: var(--bg, #fff);
}
.gv-pulse-bull { border-left: 3px solid #16a34a; }
.gv-pulse-bear { border-left: 3px solid #dc2626; }
.gv-pulse-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.gv-pulse-title { font-size: 12.5px; font-weight: 700; color: var(--text, #1d1d1f); }
.gv-pulse-live {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
}
.gv-pulse-on { background: rgba(22,163,74,0.12); color: #15803d; }
.gv-pulse-idle { background: var(--bg-soft, #f5f5f7); color: var(--dim, #6e6e73); }
.gv-pulse-reading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.gv-pulse-val {
  font-family: var(--font-mono, monospace);
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.gv-pulse-lbl { font-size: 12px; color: var(--text-soft, #3a3a3c); line-height: 1.4; }
.gv-pulse-chart { width: 100%; height: 88px; display: block; }
.gv-pulse-zero { stroke: var(--border, #e5e5ea); stroke-width: 1; stroke-dasharray: 4 4; }
.gv-pulse-line.bull { stroke: #16a34a; stroke-width: 2; }
.gv-pulse-line.bear { stroke: #dc2626; stroke-width: 2; }
.gv-pulse-area.bull { fill: rgba(22,163,74,0.12); }
.gv-pulse-area.bear { fill: rgba(220,38,38,0.12); }
.gv-pulse-empty, .gv-pulse-foot {
  font-size: 11px;
  color: var(--dim, #6e6e73);
  line-height: 1.45;
}
.gv-pulse-foot { margin-top: 7px; }

/* Structure Timeline, the intraday shift feed. */
.gv-timeline {
  border-radius: 12px;
  padding: 14px 16px;
  margin: 10px 0;
  border: 1px solid var(--border, #e5e5ea);
  background: var(--bg, #fff);
}
.gv-tl-head {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text, #1d1d1f);
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.gv-tl-live {
  font-size: 10px;
  font-weight: 700;
  color: var(--dim, #6e6e73);
  background: var(--bg-soft, #f5f5f7);
  padding: 3px 8px;
  border-radius: 999px;
}
.gv-tl-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--border, #e5e5ea);
}
.gv-tl-row:last-child { border-bottom: none; }
.gv-tl-time {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--dim, #6e6e73);
  flex-shrink: 0;
  min-width: 74px;
  font-variant-numeric: tabular-nums;
}
.gv-tl-msg { font-size: 12.5px; line-height: 1.45; color: var(--text, #1d1d1f); }
.gv-tl-pressure-flip .gv-tl-msg { font-weight: 700; }
.gv-tl-gex-sign-flip .gv-tl-msg { font-weight: 700; }
.gv-tl-empty { font-size: 11.5px; color: var(--dim, #6e6e73); line-height: 1.5; }

/* Spot row highlight, strong blue band */
.gv-lad-spot {
  background: linear-gradient(90deg, rgba(0,113,227,0.10) 0%, rgba(0,113,227,0.18) 50%, rgba(0,113,227,0.10) 100%) !important;
  border-top: 2px solid var(--accent, #0071e3);
  border-bottom: 2px solid var(--accent, #0071e3);
  height: 26px;
}
.gv-lad-spot .gv-lad-strike { color: var(--accent, #0071e3); font-weight: 800; }
.gv-lad-spot .gv-lad-anno { color: var(--accent, #0071e3); font-weight: 700; }
/* Flip row, amber */
.gv-lad-flip {
  background: linear-gradient(90deg, rgba(181,137,0,0.10) 0%, rgba(181,137,0,0.18) 50%, rgba(181,137,0,0.10) 100%) !important;
  border-top: 1px dashed #b58900;
  border-bottom: 1px dashed #b58900;
}
.gv-lad-flip .gv-lad-strike { color: #b58900; font-weight: 800; }
.gv-lad-flip .gv-lad-anno { color: #b58900; font-weight: 700; }
/* Inline zone tags */
.gv-lad-tag {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}
/* v73.2, old role-typed tag colors removed; inline style on each tag now
   pulls color directly from the zone palette, so they always match the
   bar and row tint exactly. */
/* Mobile, keep the ladder tight */
@media (max-width: 620px) {
  /* v73.8, keep delta pill + GEX value visible on mobile, tighter columns. */
  .gv-lad-row { grid-template-columns: 96px 1fr 130px; padding: 0 10px 0 8px; }
  .gv-lad-gexval { font-size: 9.5px; }
  .gv-lad-deltapill { font-size: 8.5px; padding: 1px 4px; }
  .gv-lad-anno { font-size: 9px; }
}

/* ── Top nav (Dashboard / AlphaWhisper Gravity) ──────────────────── */
.topnav {
  display: flex;
  gap: 4px;
  background: var(--bg-soft, #f5f5f7);
  border: 1px solid var(--border, #e5e5ea);
  border-radius: 999px;
  padding: 4px;
  margin: 16px 0 18px 0;
  width: fit-content;
  max-width: 100%;
  box-shadow: var(--shadow);
}
.topnav-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--dim, #6e6e73);
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: background 0.2s ease, color 0.2s ease;
}
.topnav-item:hover { color: var(--text, #1d1d1f); }
/* v75.2, <a> variant for tabs that navigate to standalone pages */
.topnav-link { text-decoration: none; }
.topnav-item.active {
  background: var(--panel, #ffffff);
  color: var(--text, #1d1d1f);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.04);
}
.topnav-icon { font-size: 15px; line-height: 1; }
.view { animation: viewFadeIn .25s ease; }
@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 520px) {
  .topnav-item { padding: 8px 12px; font-size: 12.5px; }
  .topnav-label { display: inline; }
}

/* ── Ticker picker (Gravity page) ────────────────────────────────── */
.gv-picker {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #e5e5ea);
  border-radius: var(--radius-md, 12px);
  padding: 10px 14px;
  margin-bottom: 14px;
}
.gv-picker-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--dim, #6e6e73);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.gv-picker-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1 1 auto;
}
.gv-chip {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--border, #e5e5ea);
  background: var(--bg-soft, #f5f5f7);
  color: var(--text, #1d1d1f);
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.gv-chip:hover { background: var(--border-soft, #f3f4f6); }
.gv-chip.active {
  background: var(--accent, #0071e3);
  border-color: var(--accent, #0071e3);
  color: white;
}
/* Overflow chips + "More" button, only relevant on mobile */
.gv-chip-overflow { display: inline-block; }
.gv-chip-more {
  font-family: var(--font-sans, system-ui);
  font-size: 11.5px; font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px dashed var(--border, #e5e5ea);
  background: transparent;
  color: var(--accent, #0071e3);
  cursor: pointer;
  display: none; /* desktop hides the toggle entirely */
}
@media (max-width: 640px) {
  /* hide overflow chips until user taps "More" */
  .gv-picker-chips .gv-chip-overflow { display: none; }
  .gv-picker-chips-expanded .gv-chip-overflow { display: inline-block; }
  .gv-chip-more { display: inline-block; }
}
.gv-picker-form { margin: 0; }
.gv-picker-input {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 11px;
  border: 1px solid var(--border, #e5e5ea);
  border-radius: 999px;
  background: var(--bg-soft, #f5f5f7);
  color: var(--text, #1d1d1f);
  width: 130px;
  outline: none;
  transition: border-color 0.15s ease;
}
.gv-picker-input:focus { border-color: var(--accent, #0071e3); background: var(--panel, #ffffff); }

/* v77.23, Expiry filter pills on the Intraday Gravity ladder. */
.gv-expiry-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 14px;
  flex-wrap: wrap;
}
.gv-expiry-picker-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim, #6e6e73);
}
.gv-expiry-pills {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: var(--bg-soft, #f5f5f7);
  border: 1px solid var(--border, #e5e5ea);
  border-radius: 999px;
}
.gv-expiry-pill {
  appearance: none;
  border: none;
  background: transparent;
  padding: 5px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--dim, #6e6e73);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.gv-expiry-pill:hover { color: var(--text, #1d1d1f); }
.gv-expiry-pill.active {
  background: var(--accent-solid, #0071e3);
  color: #fff;
}
.gv-expiry-resolved {
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  color: var(--dim, #6e6e73);
  font-variant-numeric: tabular-nums;
}

/* v77.16, Gravity sub-tabs (Intraday / Horizon). Single Gravity menu
 * item, two panes underneath. Horizon is lazy-loaded so the intraday
 * refresh cycle never competes with the matrix fetch for UW slots. */
.gv-subnav {
  display: flex;
  gap: 6px;
  margin: 14px 0 16px;
  padding: 4px;
  background: var(--bg-soft, #f5f5f7);
  border: 1px solid var(--border, #e5e5ea);
  border-radius: var(--radius-md, 12px);
}
.gv-subnav-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: var(--dim, #6e6e73);
  font-family: inherit;
  text-align: left;
  transition: background 0.12s ease, color 0.12s ease;
}
.gv-subnav-btn:hover { background: rgba(0, 0, 0, 0.03); color: var(--text); }
.gv-subnav-btn.active {
  background: var(--panel, #fff);
  color: var(--text, #1d1d1f);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.gv-subnav-icon { font-size: 18px; line-height: 1; }
.gv-subnav-label {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.005em;
}
.gv-subnav-btn.active .gv-subnav-label { color: var(--accent-solid, #0071e3); }
.gv-subnav-sub {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.7;
  margin-left: auto;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .gv-subnav-btn { flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; }
  .gv-subnav-sub { margin-left: 0; }
}
.gv-pane { animation: gvFadeIn 0.18s ease; }
@keyframes gvFadeIn {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Gravity Horizon matrix (v77.13) ──────────────────────────────
 * Per-(strike × expiration) dealer-positioning heatmap. Cells colored
 * by signed netGex; spot-row highlighted. Mobile-scrollable. */
.gv-matrix-section { margin-top: 4px; }
.gv-matrix-sub {
  font-size: 12px;
  color: var(--dim, #6e6e73);
  margin: 4px 0 10px;
  line-height: 1.5;
}
.gv-matrix-legend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 4px;
}
.gv-legend-pos, .gv-legend-neg {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
  vertical-align: middle;
}
.gv-legend-pos { background: hsla(142 71% 45% / 0.55); }
.gv-legend-neg { background: hsla(0 84% 60% / 0.55); }
.gv-matrix-body { min-height: 100px; }
.gv-matrix-wrap {
  overflow-x: auto;
  border: 1px solid var(--border, #e5e5ea);
  border-radius: var(--radius-md, 12px);
  background: var(--panel, #fff);
  -webkit-overflow-scrolling: touch;
}
.gv-matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.gv-matrix-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-soft, #f5f5f7);
  font-weight: 700;
  font-size: 10.5px;
  padding: 6px 8px;
  text-align: right;
  border-bottom: 1px solid var(--border, #e5e5ea);
  color: var(--dim, #6e6e73);
  letter-spacing: 0.02em;
}
.gv-matrix-table .gvm-strike-head {
  text-align: left;
  width: 80px;
}
.gv-matrix-table .gvm-strike {
  position: sticky;
  left: 0;
  background: var(--panel, #fff);
  font-weight: 700;
  text-align: left;
  padding: 4px 10px;
  border-right: 1px solid var(--border, #e5e5ea);
  color: var(--text, #1d1d1f);
  white-space: nowrap;
  z-index: 1;
}
.gv-matrix-table .gvm-td {
  padding: 4px 8px;
  text-align: right;
  border-bottom: 1px solid rgba(0,0,0,0.03);
  border-right: 1px solid rgba(0,0,0,0.03);
  white-space: nowrap;
  min-width: 64px;
  font-weight: 600;
}
.gv-matrix-table .gvm-empty {
  color: var(--dim, #6e6e73);
  opacity: 0.4;
  font-weight: 400;
}
.gv-matrix-table tbody tr:hover { background: rgba(0, 113, 227, 0.04); }
.gv-matrix-table tbody tr:hover .gvm-strike { background: rgba(0, 113, 227, 0.06); }
.gv-matrix-table .gvm-row-spot .gvm-strike {
  background: linear-gradient(90deg, rgba(0, 113, 227, 0.18), rgba(0, 113, 227, 0.04));
  color: var(--accent-solid, #0071e3);
  font-weight: 800;
}
.gv-matrix-table .gvm-row-spot {
  border-top: 2px solid var(--accent-solid, #0071e3);
  border-bottom: 2px solid var(--accent-solid, #0071e3);
}
.gv-matrix-table .gvm-spot-tag {
  font-size: 9.5px;
  font-weight: 700;
  margin-left: 4px;
  padding: 1px 5px;
  background: var(--accent-solid, #0071e3);
  color: #fff;
  border-radius: 3px;
  letter-spacing: 0.02em;
}
.gv-matrix-table tfoot .gvm-foot-td {
  font-weight: 800;
  border-top: 2px solid var(--border, #e5e5ea);
  background: var(--bg-soft, #f5f5f7);
}
.gv-matrix-table tfoot .gvm-strike {
  background: var(--bg-soft, #f5f5f7);
  border-top: 2px solid var(--border, #e5e5ea);
}

/* ── v77.70, Horizon Institutional Pass ─────────────────────────── */
/* OPEX chip + column tint, the monthly third-Friday column */
.gvm-opex {
  display: inline-block;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-left: 5px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--desk-amber, linear-gradient(135deg, #f59e0b 0%, #f97316 100%));
  color: #fff;
  vertical-align: middle;
  cursor: help;
}
.gvm-th-opex { background: rgba(245,158,11,0.08); }
/* Expected move + WoW badges under the date */
.gvm-th-sub {
  display: flex;
  gap: 5px;
  justify-content: flex-end;
  margin-top: 3px;
  flex-wrap: wrap;
}
.gvm-em {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--dim, #6e6e73);
  background: var(--bg-soft, #f5f5f7);
  border: 1px solid var(--border, #e5e5ea);
  padding: 1px 6px;
  border-radius: 999px;
  cursor: help;
  font-variant-numeric: tabular-nums;
}
.gvm-wow {
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
  cursor: help;
  font-variant-numeric: tabular-nums;
}
.gvm-wow.up { background: rgba(22,163,74,0.12); color: #15803d; }
.gvm-wow.down { background: rgba(220,38,38,0.12); color: #b91c1c; }
/* % of book share row */
.gvm-share-td {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--dim, #6e6e73);
  background: var(--bg-soft, #f5f5f7);
  font-variant-numeric: tabular-nums;
}
.gvm-share-label { font-size: 10px; cursor: help; }
.gv-matrix-foot {
  font-size: 11px;
  color: var(--dim, #6e6e73);
  margin-top: 8px;
  line-height: 1.5;
}
/* ═════════════════════════════════════════════════════════════════
 * v77.27, AlphaWhisper Orbit: dark-theme price chart with GEX bands
 * and darkpool overlays. Dark canvas matches the high-contrast read of
 * the dealer-positioning bands and the purple darkpool boxes.
 * ═════════════════════════════════════════════════════════════════ */
.view-orbit { padding: 12px 16px; }
.orbit-section { background: transparent; }
.orbit-section .section-header { margin-bottom: 12px; }
.orbit-section .section-header h2 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.orbit-picker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 12px;
  flex-wrap: wrap;
}
.orbit-picker-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim, #6e6e73);
}
.orbit-picker-chips {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: var(--bg-soft, #f5f5f7);
  border: 1px solid var(--border, #e5e5ea);
  border-radius: 999px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.orbit-picker-chips::-webkit-scrollbar { display: none; }

/* v77.55, Symbol search input + star button */
.orbit-sym-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.orbit-sym-input {
  appearance: none;
  border: 1px solid var(--border, #e5e5ea);
  background: var(--bg-soft, #f5f5f7);
  color: var(--text, #1d1d1f);
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 8px;
  width: 110px;
  min-height: 36px;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.orbit-sym-input:focus {
  border-color: var(--accent-solid, #0071e3);
  background: var(--bg, #fff);
}
.orbit-sym-input::placeholder {
  color: var(--dim, #6e6e73);
  font-weight: 700;
}
.orbit-sym-star {
  appearance: none;
  border: 1px solid var(--border, #e5e5ea);
  background: var(--bg-soft, #f5f5f7);
  color: var(--dim, #6e6e73);
  font-size: 16px;
  line-height: 1;
  padding: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.orbit-sym-star:hover { color: #ffc107; }
.orbit-sym-star-on { color: #ffc107; border-color: rgba(255,193,7,0.5); }
.orbit-chip-fav { color: var(--text, #1d1d1f); }
.orbit-chip-load {
  background: var(--accent-soft, rgba(0,113,227,0.10));
  color: var(--accent-solid, #0071e3);
  font-weight: 700;
}
@media (max-width: 620px) {
  /* Mobile: stack the symbol row above the chip strip so neither
   * gets cramped. Chip strip already horizontally scrolls. */
  .orbit-picker { flex-direction: column; align-items: stretch; gap: 8px; }
  .orbit-sym-search { width: 100%; }
  .orbit-sym-input { flex: 1; width: auto; }
  .orbit-picker-chips { width: 100%; }
}
.orbit-chip {
  appearance: none;
  border: none;
  background: transparent;
  padding: 5px 14px;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 800;
  color: var(--dim, #6e6e73);
  border-radius: 999px;
  cursor: pointer;
}
.orbit-chip:hover { color: var(--text); }
.orbit-chip.active {
  background: var(--accent-solid, #0071e3);
  color: #fff;
}
.orbit-status {
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  color: var(--dim, #6e6e73);
  font-variant-numeric: tabular-nums;
}
/* v77.29, Replay button placeholder (disabled until Phase 3 snapshot history) */
.orbit-replay-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--dim, #6e6e73);
  background: var(--bg-soft, #f5f5f7);
  border: 1px solid var(--border, #e5e5ea);
  border-radius: 999px;
  cursor: not-allowed;
  opacity: 0.55;
}
.orbit-replay-btn:hover:not(:disabled) {
  opacity: 1;
  background: var(--panel, #fff);
}
.orbit-replay-btn span { font-size: 10px; }

/* v77.33, Floating OHLC tooltip overlay anchored top-left of the
 * chart. Native TradingView pattern: tabular numbers, mono font, small
 * K/V chips that update on every crosshair move. Pointer-events:none
 * so the chart still receives mouse events under it. */
.orbit-ohlc {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(11, 14, 20, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  backdrop-filter: blur(6px);
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.92);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  user-select: none;
}
.orbit-ohlc[hidden] { display: none; }
.orbit-ohlc-time {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.01em;
  padding-right: 4px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.orbit-ohlc-pair {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.orbit-ohlc-k {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.50);
}
.orbit-ohlc-v {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}
@media (max-width: 720px) {
  .orbit-ohlc { font-size: 10.5px; gap: 7px; padding: 6px 9px; }
}

/* v77.29, Loading overlay so chart doesn't appear blank during fetches */
.orbit-chart-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(11, 14, 20, 0.65);
  backdrop-filter: blur(2px);
  z-index: 5;
  pointer-events: none;
}
.orbit-chart-loading[hidden] { display: none; }
.orbit-spinner {
  width: 32px; height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: #fff;
  border-radius: 50%;
  animation: orbit-spin 0.8s linear infinite;
}
.orbit-loading-text {
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
@keyframes orbit-spin { to { transform: rotate(360deg); } }

/* v77.28, Timeframe pills (1m / 5m / 15m / 1H / 4H / 1D) */
.orbit-tf-pills {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg-soft, #f5f5f7);
  border: 1px solid var(--border, #e5e5ea);
  border-radius: 999px;
}
.orbit-tf-pill {
  appearance: none;
  border: none;
  background: transparent;
  padding: 5px 11px;
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  font-weight: 800;
  color: var(--dim, #6e6e73);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.orbit-tf-pill:hover:not(:disabled) { color: var(--text, #1d1d1f); }
.orbit-tf-pill.active {
  background: var(--accent-solid, #0071e3);
  color: #fff;
}
.orbit-tf-pill.orbit-tf-soon,
.orbit-tf-pill:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.orbit-chart-wrap {
  position: relative;
  background: #0b0e14;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  /* Lightweight Charts needs a sized container with autoSize:true. */
  height: clamp(420px, 60vh, 680px);
}
/* v77.57, Crosshair cursor over the actual chart canvas. TradingView's
 * signature feel, the moment you hover over the price area, the
 * cursor becomes a precision crosshair. Only the price area, not the
 * axis labels (where pointer/cursor should be the default). */
.orbit-chart canvas { cursor: crosshair; }
/* v77.38, Fullscreen mode. Two code paths both land here visually:
 *   1. Native Fullscreen API → the browser sets :fullscreen on the wrap
 *   2. CSS fallback (sandboxed contexts) → .orbit-fs-active class is added
 * Either way the wrap fills the viewport, candles get all the real-estate,
 * and the chart re-fits via fitContent() on the size change. */
.orbit-chart-wrap.orbit-fs-active,
.orbit-chart-wrap:fullscreen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  border-radius: 0;
  border: none;
}
/* v77.42, Fullscreen button. Sized to 44pt Apple HIG minimum so it's
 * always reliably tappable on touch. Positioned safe-area-aware so it
 * sits below the iOS notch when the wrap goes fullscreen.
 *
 * Two visual states:
 *   - Default (entering): square 44pt icon-only button
 *   - In fullscreen (exiting): wider pill with "× Exit" label so the
 *     exit affordance is IMPOSSIBLE to miss on mobile. */
.orbit-fs-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 20;   /* above OHLC overlay (z:6) + loading overlay (z:5) */
  appearance: none;
  min-width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  background: rgba(11, 14, 20, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.92);
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.15s var(--ease-spring), border-color 0.15s var(--ease-spring), transform 0.1s var(--ease-spring);
  -webkit-tap-highlight-color: transparent;
}
.orbit-fs-btn:hover {
  background: rgba(11, 14, 20, 0.96);
  border-color: rgba(255, 255, 255, 0.32);
}
.orbit-fs-btn:active { transform: scale(0.94); }
/* In fullscreen, button becomes a brighter, larger "Exit" pill that
 * sits below the safe-area inset (iOS notch / status bar). Hard to miss. */
.orbit-fs-btn-active,
.orbit-chart-wrap.orbit-fs-active .orbit-fs-btn,
.orbit-chart-wrap:fullscreen .orbit-fs-btn {
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  background: rgba(220, 38, 38, 0.92);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
  padding: 0 14px 0 12px;
  font-size: 16px;
}
.orbit-fs-icon[hidden],
.orbit-fs-label[hidden] { display: none; }
.orbit-fs-label-exit {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.orbit-fs-icon-exit { font-size: 20px; line-height: 1; }

/* In fullscreen mode add a subtle bottom-center hint on mobile
 * "Tap × Exit or swipe back to leave", only visible for ~3s on entry,
 * then auto-fades. Reassures the user there's an escape route. */
.orbit-chart-wrap.orbit-fs-active::after,
.orbit-chart-wrap:fullscreen::after {
  content: 'Tap × Exit (top right) to leave fullscreen';
  position: absolute;
  bottom: max(20px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  background: rgba(11, 14, 20, 0.85);
  color: rgba(255, 255, 255, 0.92);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  pointer-events: none;
  animation: orbitFsHint 3.5s ease forwards;
  backdrop-filter: blur(8px);
  z-index: 21;
}
@keyframes orbitFsHint {
  0%, 80% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-chart-wrap.orbit-fs-active::after,
  .orbit-chart-wrap:fullscreen::after { animation: none; }
}
.orbit-chart {
  position: absolute;
  inset: 0;
}
.orbit-foot {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--bg-soft, #f5f5f7);
  border: 1px solid var(--border, #e5e5ea);
  border-radius: var(--radius-md, 12px);
  font-size: 12.5px;
  color: var(--text-soft, #3a3a3c);
  line-height: 1.55;
}
.orbit-foot strong { color: var(--text, #1d1d1f); }
@media (max-width: 720px) {
  .view-orbit { padding: 8px 10px; }
  .orbit-chart-wrap { height: clamp(360px, 55vh, 500px); }
}

.gv-matrix-empty {
  padding: 18px;
  background: var(--bg-soft, #f5f5f7);
  border: 1px solid var(--border, #e5e5ea);
  border-radius: var(--radius-md, 12px);
  color: var(--dim, #6e6e73);
  font-size: 13px;
  line-height: 1.5;
}

/* Per-expiration timeline (fallback view when UW doesn't expose
 * per-strike-per-expiry data) */
.gv-timeline-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.gv-timeline-table thead th {
  background: var(--bg-soft, #f5f5f7);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dim, #6e6e73);
  padding: 8px 12px;
  text-align: right;
  border-bottom: 1px solid var(--border, #e5e5ea);
}
.gv-timeline-table thead th:first-child { text-align: left; }
.gv-timeline-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  vertical-align: middle;
}
.gv-timeline-table tbody tr:hover { background: rgba(0, 113, 227, 0.04); }
.gvt-exp {
  font-weight: 700;
  white-space: nowrap;
}
.gvt-dte {
  display: inline-block;
  font-size: 10px;
  margin-left: 6px;
  padding: 1px 5px;
  background: var(--bg-soft, #f5f5f7);
  border-radius: 3px;
  color: var(--dim, #6e6e73);
  font-weight: 600;
}
.gvt-cell { min-width: 140px; }
.gvt-bar-wrap {
  width: 100%;
  height: 10px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 2px;
}
.gvt-bar { height: 100%; border-radius: 4px; transition: width 0.2s ease; }
.gvt-val {
  font-size: 11px;
  font-weight: 700;
  text-align: right;
  letter-spacing: -0.005em;
}
.gvt-val.up { color: #15803d; }
.gvt-val.down { color: #b91c1c; }
.gvt-num {
  text-align: right;
  font-size: 11.5px;
  font-weight: 600;
}
.gvt-call { color: #15803d; }
.gvt-put { color: #b91c1c; }
.gvt-leg-pos, .gvt-leg-neg {
  font-weight: 700;
  padding: 0 4px;
  border-radius: 3px;
}
.gvt-leg-pos { color: #15803d; background: rgba(22, 163, 74, 0.08); }
.gvt-leg-neg { color: #b91c1c; background: rgba(220, 38, 38, 0.08); }

/* ── Regime backtest (Phase 4) ───────────────────────────────────── */
.gv-edge-section { margin-top: 4px; }
.gv-edge-card {
  background: var(--panel, #ffffff);
  border: 1px solid var(--border, #e5e5ea);
  border-radius: var(--radius-md, 12px);
  padding: 14px 16px;
}
.gv-edge-headline {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text, #1d1d1f);
  margin-bottom: 10px;
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.gv-edge-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-family: var(--font-mono, monospace);
}
.gv-edge-tbl th {
  text-align: center;
  font-weight: 700;
  color: var(--dim, #6e6e73);
  padding: 6px 8px;
  border-bottom: 1px solid var(--border, #eee);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.gv-edge-tbl td {
  padding: 8px;
  border-bottom: 1px solid var(--border-soft, #f3f4f6);
}
.gv-edge-tbl .gv-edge-regime {
  font-family: var(--font-ui, system-ui);
  font-weight: 700;
  font-size: 12px;
  color: var(--text, #1d1d1f);
  text-align: left;
}
.gv-edge-cell { text-align: center; font-variant-numeric: tabular-nums; }
.gv-edge-cell-top { font-weight: 700; font-size: 12.5px; display: flex; justify-content: center; gap: 8px; }
.gv-edge-cell-top .up { color: var(--bull, #099e4a); }
.gv-edge-cell-top .down { color: var(--bear, #e0322c); }
.gv-edge-cell-n { font-size: 10px; color: var(--dim, #6e6e73); margin-top: 2px; }
.gv-edge-gated { color: var(--dim, #6e6e73); font-style: italic; font-size: 10.5px; }
.gv-edge-baseline { background: var(--bg-soft, #f5f5f7); }
.gv-edge-baseline .gv-edge-regime { font-weight: 600; color: var(--dim, #6e6e73); font-style: italic; }
.gv-edge-bar { height: 6px; background: var(--bg-soft, #f5f5f7); border-radius: 999px; overflow: hidden; margin: 10px 0; }
.gv-edge-bar-fill { height: 100%; background: var(--accent, #0071e3); border-radius: inherit; }
.gv-edge-meta { font-size: 11px; color: var(--dim, #6e6e73); margin-bottom: 6px; }
.gv-edge-note { font-size: 11px; color: var(--dim, #6e6e73); line-height: 1.5; margin-top: 10px; }

.premove-section { margin-bottom: 22px; }
.pm-card { border-left: 3px solid var(--accent, #6366f1); }
.pm-coiled { font-size: 10px; font-weight: 800; color: #6366f1; background: #eef2ff; padding: 1px 7px; border-radius: 5px; letter-spacing: 0.03em; }
.pm-cat { color: var(--warn, #d97706); font-weight: 600; }
.pm-bias { font-size: 10.5px; font-weight: 800; }
.pm-bias.up { color: var(--bull, #16a34a); }
.pm-bias.down { color: var(--bear, #dc2626); }
.pm-signals { display: flex; gap: 6px; margin: 6px 0; flex-wrap: wrap; }
.pm-sig { font-size: 9.5px; padding: 1px 6px; border-radius: 4px; background: var(--surface-3, #f1f5f9); color: var(--dim, #64748b); font-family: var(--font-mono); }
.pm-sig.up { background: var(--bull-soft, #dcfce7); color: var(--bull, #15803d); }
.pm-sig.down { background: var(--bear-soft, #fee2e2); color: var(--bear, #b91c1c); }
.pm-techread { font-size: 10px; color: var(--dim, #64748b); margin-bottom: 6px; line-height: 1.4; }
.retry-btn { margin-left: 8px; padding: 3px 12px; font-size: 12px; font-weight: 600; border: 1px solid var(--accent, #3b82f6); color: var(--accent, #3b82f6); background: transparent; border-radius: 6px; cursor: pointer; }
.retry-btn:hover { background: var(--accent, #3b82f6); color: #fff; }

.swing-targets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.swing-tgt {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  text-align: center;
}
.swing-tgt-label {
  font-size: 9px;
  color: var(--dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}
.swing-tgt-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--bull);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  margin-top: 2px;
}

.swing-opts-type {
  display: inline-block;
  padding: 3px 10px;
  background: var(--purple-soft);
  color: var(--purple);
  border: 1px solid rgba(132, 48, 206, 0.2);
  border-radius: 4px;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}
.swing-opts-strike {
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  letter-spacing: -0.01em;
  font-size: 14px;
}

.swing-risks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.swing-risks li {
  font-size: 12px;
  color: var(--text-soft);
  padding-left: 16px;
  position: relative;
  line-height: 1.5;
}
.swing-risks li::before {
  content: '▪';
  position: absolute;
  left: 2px;
  color: var(--warn);
  font-weight: 700;
}

.swing-nosetup-reason {
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.6;
  padding: 10px 0;
  font-style: italic;
}

.swing-cached-note {
  margin-top: 10px;
  font-size: 10px;
  color: var(--dim);
  text-align: right;
  font-style: italic;
}

/* ── Swing Trade Idea: extended Bloomberg-terminal fields ────────────── */

/* Grade badge (A+/A/B/C/D/F) */
.swing-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-family: var(--font-mono);
  text-transform: uppercase;
}
.swing-grade.grade-a {
  background: #e6f4ea;
  color: #137333;
  border: 1px solid #ceead6;
}
.swing-grade.grade-b {
  background: #e8f0fe;
  color: #1967d2;
  border: 1px solid #d2e3fc;
}
.swing-grade.grade-c {
  background: var(--warn-bg);
  color: var(--warn);
  border: 1px solid #feefc3;
}
.swing-grade.grade-d {
  background: #fce8e6;
  color: #c5221f;
  border: 1px solid #fad2cf;
}

/* Timeframe pill */
.swing-timeframe {
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--inner);
  color: var(--text-soft);
  border: 1px solid var(--border);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Best Bet of Day */
.swing-best-bet {
  font-size: 9.5px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--warn-bg);
  color: var(--warn);
  border: 1px solid rgba(249, 171, 0, 0.4);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  animation: pulse 2.4s infinite;
}
.swing-best-bet-card {
  border-color: rgba(249, 171, 0, 0.5);
  box-shadow: 0 0 0 3px var(--warn-bg), var(--shadow-hero);
}

/* Catalyst strip right above thesis */
.swing-catalyst {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(168, 85, 247, 0.08);
  border-left: 3px solid #a855f7;
  border-radius: 4px;
  font-size: 12px;
  color: var(--text-soft);
  margin-bottom: 10px;
}
.swing-catalyst-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--purple);
  padding: 3px 8px;
  background: var(--purple-soft);
  border: 1px solid rgba(132, 48, 206, 0.2);
  border-radius: 4px;
  font-family: var(--font-mono);
  text-transform: uppercase;
}

/* Fair Value block inside the swing card */
.swing-sec-fv { border-left: 3px solid #0ea5e9; }
.swing-fv-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
.swing-fv-cell {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  text-align: center;
}
.swing-fv-k {
  font-size: 9px;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}
.swing-fv-v {
  font-size: 17px;
  font-weight: 700;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text);
}
.swing-fv-v.up { color: var(--bull); }
.swing-fv-v.down { color: var(--bear); }
.swing-fv-method {
  font-size: 10.5px;
  color: var(--dim);
  font-style: italic;
  line-height: 1.4;
  padding-top: 4px;
  border-top: 1px dashed var(--border);
}

/* Extended Smart Money metrics row */
.swing-sm-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.swing-sm-met {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.swing-sm-met span {
  font-size: 9px;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.swing-sm-met b {
  font-size: 12px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.3;
}
.swing-sm-met.up b { color: var(--bull); }
.swing-sm-met.down b { color: var(--bear); }
.swing-sm-met.neut b { color: var(--text-soft); }

.swing-retail {
  color: var(--warn);
  font-style: italic;
  font-size: 11px;
  padding-top: 6px;
  margin-top: 4px;
  border-top: 1px dashed var(--border);
  opacity: 0.9;
}

/* Options headline row, CALL $420 May 15 (28d) */
.swing-opts-headline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 8px;
}
.swing-opts-expiry {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.swing-opts-meta {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.swing-opts-rr, .swing-opts-size {
  font-size: 11px;
  color: var(--dim);
  letter-spacing: 0.02em;
}
.swing-opts-rr b, .swing-opts-size b {
  color: var(--accent-hi);
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  margin-left: 4px;
}
.swing-tgt-inline {
  font-family: var(--font-mono);
  color: var(--bull);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Invalidation single-line killswitch */
.swing-sec-invalid {
  background: #fef7f5;
  border-left: 3px solid var(--bear);
}
.swing-invalidation-line {
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.5;
  font-weight: 500;
  padding: 4px 0;
}

/* Key dates */
.swing-sec-dates { border-left: 3px solid #0891b2; }
.swing-dates-list { display: flex; flex-direction: column; gap: 4px; }
.swing-date-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 12px;
  border-bottom: 1px dashed var(--border);
}
.swing-date-row:last-child { border-bottom: none; }
.swing-date-event {
  font-weight: 700;
  color: var(--text);
}
.swing-date-when {
  font-family: var(--font-mono);
  color: var(--dim);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Sources footer */
.swing-sources {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--inner);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 10.5px;
  color: var(--dim);
  line-height: 1.6;
}
.swing-sources-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-soft);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.swing-src-row { margin-bottom: 3px; }
.swing-src-row b {
  color: var(--text-soft);
  font-weight: 600;
  margin-right: 4px;
}
.swing-src-row code {
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--panel-hi);
  padding: 2px 6px;
  border: 1px solid var(--border-hi);
  border-radius: 3px;
  color: var(--accent-hi);
  letter-spacing: 0.02em;
}

.swing-nosetup-note {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.5;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}

.swing-placeholder {
  padding: 20px;
  text-align: center;
  color: var(--dim);
  background: var(--inner);
  border: 1px dashed var(--border);
  border-radius: 8px;
}
.swing-placeholder-text { font-size: 13px; font-weight: 500; }
.swing-placeholder-sub { font-size: 11px; margin-top: 4px; font-style: italic; opacity: 0.8; }

.swing-error {
  padding: 12px;
  background: var(--bear-soft);
  color: var(--bear);
  border: 1px solid rgba(248, 113, 113, 0.35);
  border-radius: 8px;
  font-size: 12px;
}

.err {
  color: var(--bear);
  background: var(--bear-soft);
  border: 1px solid rgba(248, 113, 113, 0.35);
  padding: 12px;
  border-radius: 8px;
  font-size: 13px;
}

.proxy-note { color: var(--warn); font-size: 11px; margin-top: 4px; }

.watchlist-section { margin-bottom: 30px; }
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
  gap: 14px;
  flex-wrap: wrap;
}
.wl-meta { color: var(--dim-2); font-size: 11.5px; font-variant-numeric: tabular-nums; }

.watchlist-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 12px;
}

.wl-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s, background 0.18s;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.wl-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  background: transparent;
  transition: background 0.15s;
}
.wl-card:hover {
  border-color: var(--border-hi);
  transform: translateY(-1px);
  box-shadow: var(--shadow-hi);
  background: var(--panel-hi);
}
.wl-card:hover::before { background: var(--border-hi); }
.wl-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-hi);
  background: var(--panel-hi);
}
.wl-card.active::before { background: var(--accent); }

.wl-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.wl-symbol {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}
.wl-score {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
}

.wl-mid {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  color: var(--text-soft);
  margin-bottom: 8px;
}
.wl-price {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.wl-chg {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 10.5px;
}

.wl-flow {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-size: 9.5px;
  color: var(--dim);
  display: flex;
  justify-content: space-between;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--font-mono);
}

.empty-wl { color: var(--dim); font-size: 12px; padding: 12px; font-style: italic; }

footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  color: var(--dim);
  font-size: 11px;
  text-align: center;
}

.skeleton-detail {
  padding: 36px 24px;
  text-align: left;
  color: var(--text-soft);
  font-style: normal;
  max-width: 480px; margin: 0 auto;
}
.skel-head { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 14px; text-align: center; }
.skel-head strong { color: var(--accent); font-weight: 700; }
.skel-steps { list-style: none; padding: 0; margin: 0 0 14px; }
.skel-steps li {
  padding: 8px 12px 8px 32px;
  position: relative;
  font-size: 13px;
  color: var(--dim);
  border-radius: var(--radius-sm, 8px);
  transition: background 0.2s, color 0.2s;
}
.skel-steps li::before {
  content: '◌';
  position: absolute; left: 10px; top: 8px;
  color: var(--dim-2);
}
.skel-steps li.active {
  color: var(--text);
  background: var(--bg-soft);
  font-weight: 600;
}
.skel-steps li.active::before {
  content: '◉';
  color: var(--accent);
  animation: skelPulse 1s ease-in-out infinite;
}
.skel-steps li.done {
  color: var(--bull);
  background: transparent;
}
.skel-steps li.done::before { content: '✓'; color: var(--bull); animation: none; }
@keyframes skelPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.skel-foot { font-size: 11px; color: var(--dim); font-style: italic; text-align: center; }

.flash {
  animation: flash 0.6s ease-out;
}
@keyframes flash {
  0% { background: var(--accent-soft); }
  100% { background: var(--panel); }
}

/* ── User chip (top-right, installed by auth-guard.js) ───────── */
.user-chip {
  position: relative;
  margin-left: 12px;
}
.user-chip-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  transition: background 120ms;
}
.user-chip-inner:hover {
  background: rgba(255, 255, 255, 0.08);
}
.user-chip-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
  color: white;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0;
}
.user-chip-name {
  font-size: 12px;
  color: var(--fg);
  font-weight: 500;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-chip-role {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  background: linear-gradient(135deg, #fbbf24, #d97706);
  color: white;
  border-radius: 999px;
}
.user-chip-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
  padding: 4px;
  z-index: 100;
}
.user-chip-item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 5px;
  color: var(--fg);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
}
.user-chip-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* ────────────────────────────────────────────────────────────────────
 * Dark mode, Apple iOS-13-style dark token overrides
 * Applied when <html data-theme="dark"> is set by the theme toggle.
 * Bull/bear, accent, gold, warn shifted to Apple's official dark-mode
 * palette so contrast stays WCAG-AA on near-black surfaces.
 * ──────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] {
  color-scheme: dark;
}
html[data-theme="dark"]:root,
html[data-theme="dark"] :root,
html[data-theme="dark"] {
  --bg:        #000000;
  --bg-soft:   #1c1c1e;
  --bg-grad:   none;
  --panel:     #1c1c1e;
  --panel-hi:  #2c2c2e;
  --inner:     #2c2c2e;
  --inner-hi:  #3a3a3c;
  --border:    #38383a;
  --border-hi: #48484a;
  --border-soft: #2c2c2e;
  --text:      #f5f5f7;
  --text-soft: #d1d1d6;
  --dim:       #98989d;
  --dim-2:     #636366;
  --accent:    #0a84ff;
  --accent-hi: #409cff;
  --accent-soft: rgba(10, 132, 255, 0.15);
  --accent-ring: rgba(10, 132, 255, 0.35);
  --bull:      #30d158;
  --bull-soft: rgba(48, 209, 88, 0.18);
  --bear:      #ff453a;
  --bear-soft: rgba(255, 69, 58, 0.18);
  --neutral:   #98989d;
  --warn:      #ff9f0a;
  --warn-soft: rgba(255, 159, 10, 0.22);
  --warn-bg:   #3a2e14;
  --gold:      #ffd60a;
  --purple:    #bf5af2;
  --purple-soft: rgba(191, 90, 242, 0.18);

  --shadow:     0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow-hi:  0 4px 16px rgba(0, 0, 0, 0.50), 0 1px 4px rgba(0, 0, 0, 0.35);
  --shadow-hero:0 2px 8px rgba(0, 0, 0, 0.40), 0 14px 36px rgba(0, 0, 0, 0.60);
}

/* Inputs + minor element nudges that don't read variables directly */
html[data-theme="dark"] body { background: var(--bg); color: var(--text); }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: var(--inner);
  color: var(--text);
  border-color: var(--border);
}
html[data-theme="dark"] input::placeholder { color: var(--dim); }
html[data-theme="dark"] .topnav-item:not(.active) { color: var(--dim); }

/* Data Quality badge, header status pill, click for full report */
.dq-badge {
  background: var(--bull-soft);
  color: var(--bull);
  border: 1px solid var(--bull);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  min-height: 28px;
  cursor: pointer;
  transition: filter 0.15s, transform 0.15s;
  display: inline-flex; align-items: center; gap: 6px;
}
.dq-badge:hover { filter: brightness(1.05); transform: translateY(-1px); }
.dq-badge.dq-ok   { background: var(--bull-soft); color: var(--bull); border-color: var(--bull); }
.dq-badge.dq-warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); }
.dq-badge.dq-err  { background: var(--bear-soft); color: var(--bear); border-color: var(--bear); }
.dq-badge.dq-crit { background: var(--bear); color: white; border-color: var(--bear); animation: dqPulse 1.5s ease-in-out infinite; }
@keyframes dqPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.7; } }

/* DQ modal body */
.dq-meta { font-size: 11.5px; color: var(--text-soft); padding: 10px 12px; background: var(--inner); border-radius: var(--radius-sm, 8px); margin-bottom: 12px; line-height: 1.6; }
.dq-meta strong { color: var(--text); }
.dq-cat { margin-bottom: 14px; }
.dq-cat-head { font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 6px; display: flex; justify-content: space-between; }
.dq-cat-n { font-size: 11px; color: var(--dim); font-weight: 600; }
.dq-finding { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 6px; margin-bottom: 4px; font-size: 12px; line-height: 1.45; }
.dq-finding.dq-ok   { background: var(--bull-soft); color: var(--text-soft); }
.dq-finding.dq-warn { background: var(--warn-bg); color: var(--text); }
.dq-finding.dq-err  { background: var(--bear-soft); color: var(--text); }
.dq-finding.dq-crit { background: var(--bear); color: white; }
.dq-fnd-sev {
  flex-shrink: 0;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em;
  padding: 2px 7px; border-radius: 4px;
  background: rgba(0,0,0,0.12);
  color: inherit;
  min-width: 60px; text-align: center;
}
.dq-fnd-msg { flex: 1; }

/* Theme toggle button in the header */
.theme-toggle {
  background: var(--inner);
  border: 1px solid var(--border);
  border-radius: 999px;
  width: 36px; height: 36px;
  min-height: 36px; /* override 44px globals on this small affordance */
  font-size: 16px; line-height: 1;
  color: var(--text);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.theme-toggle:hover { background: var(--panel-hi); border-color: var(--border-hi); transform: scale(1.05); }
.theme-toggle:active { transform: scale(0.95); }

/* ── Alerts modal + form ── */
.alerts-modal {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  padding: 20px;
}
.alerts-modal[hidden] { display: none; }
.alerts-modal-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-hero, 0 20px 60px rgba(0,0,0,0.4));
  width: 100%; max-width: 640px;
  max-height: 88vh; overflow: auto;
  padding: 22px 22px 20px;
}
.alerts-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.alerts-modal-head h3 { font-size: 17px; font-weight: 700; color: var(--text); margin: 0; }
.alerts-close {
  background: transparent; border: none; font-size: 26px; line-height: 1;
  color: var(--dim); cursor: pointer; padding: 0 6px; min-height: auto;
}
.alerts-close:hover { color: var(--text); }
.alerts-modal-intro { font-size: 12.5px; color: var(--text-soft); margin-bottom: 14px; line-height: 1.5; }
.alerts-form { margin-bottom: 14px; }
.alerts-form-row { display: grid; grid-template-columns: 120px 1fr 1fr auto; gap: 8px; }
@media (max-width: 640px) { .alerts-form-row { grid-template-columns: 1fr 1fr; } }
.alerts-form input, .alerts-form select {
  background: var(--inner); border: 1px solid var(--border); border-radius: var(--radius-sm, 8px);
  padding: 8px 10px; font-size: 13px; color: var(--text); min-height: 36px;
}
.alerts-form input:focus, .alerts-form select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.alerts-add {
  background: var(--accent); color: white; border: none; border-radius: var(--radius-sm, 8px);
  padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; min-height: 36px;
}
.alerts-add:hover { background: var(--accent-hi); }
.alerts-perm { margin-top: 8px; font-size: 12px; }
.alerts-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.alerts-empty { font-size: 12.5px; color: var(--dim); font-style: italic; padding: 12px; text-align: center; border: 1px dashed var(--border); border-radius: var(--radius-sm, 8px); }
.alerts-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--inner); border: 1px solid var(--border); border-radius: var(--radius-sm, 8px);
  padding: 10px 12px;
}
.alerts-item-off { opacity: 0.55; }
.alerts-item-line { font-size: 13px; color: var(--text); }
.alerts-item-line strong { font-weight: 700; }
.alerts-item-meta { font-size: 11px; color: var(--dim); margin-top: 2px; }
.alerts-item-actions { display: flex; gap: 6px; flex-shrink: 0; }
.alerts-item-actions button {
  background: transparent; border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 10px; font-size: 11px; font-weight: 600; color: var(--text-soft);
  cursor: pointer; min-height: 28px;
}
.alerts-item-actions button:hover { background: var(--panel); border-color: var(--border-hi); }
.alerts-foot { font-size: 11.5px; color: var(--dim); font-style: italic; line-height: 1.5; border-top: 1px solid var(--border); padding-top: 10px; }
.alerts-toggle { font-size: 15px; }

/* ── Options Chain tab ── */
.chain-wrap { padding: 8px 0 4px; }
.chain-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; flex-wrap: wrap; }
.chain-tool-label { font-size: 12px; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: 0.04em; }
.chain-expiry-select {
  background: var(--inner); border: 1px solid var(--border); border-radius: var(--radius-sm, 8px);
  padding: 6px 10px; font-size: 13px; color: var(--text); min-height: 36px;
  font-family: var(--font-mono);
}
.chain-tool-itm-only { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-soft); cursor: pointer; }
.chain-tool-itm-only input { width: 14px; height: 14px; min-height: 0; }
.chain-headline-row { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--text-soft); padding: 8px 12px; background: var(--inner); border-radius: var(--radius-sm, 8px); margin-bottom: 10px; }
.chain-headline-row strong { color: var(--text); font-weight: 700; }
.chain-body { min-height: 200px; }
.chain-loading, .chain-error { font-size: 12.5px; color: var(--dim); padding: 24px; text-align: center; font-style: italic; }
.chain-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md, 12px); }
.chain-table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: var(--font-mono); }
.chain-thead-section th { font-size: 11px; font-weight: 700; padding: 8px 6px; background: var(--inner); letter-spacing: 0.06em; text-transform: uppercase; }
.chain-thead-section .chain-call { color: var(--bull); text-align: right; }
.chain-thead-section .chain-put  { color: var(--bear); text-align: left; }
.chain-thead-section .chain-strike-h { background: var(--bg-soft); color: var(--text); text-align: center; }
.chain-thead-cols th { padding: 5px 6px; font-size: 10.5px; font-weight: 600; color: var(--dim); background: var(--inner-hi); }
.chain-row td { padding: 6px 6px; text-align: right; color: var(--text-soft); border-top: 1px solid var(--border); }
.chain-row td.chain-put { text-align: left; }
.chain-row td.chain-strike { text-align: center; font-weight: 700; color: var(--text); background: var(--bg-soft); }
.chain-row-atm td.chain-strike { background: var(--accent-soft); color: var(--accent); }
.chain-row-atm td { border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); }
.chain-itm { background: rgba(0, 113, 227, 0.04); }
.voi-warm { color: var(--warn); font-weight: 700; }
.voi-hot  { color: var(--bear); font-weight: 800; }
.chain-foot { font-size: 11.5px; color: var(--dim); line-height: 1.5; margin-top: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.chain-foot strong { color: var(--text-soft); }

/* ── Portfolio / position tracker ── */
.portfolio-section { padding: 12px 0 30px; }
.pf-add-form {
  display: grid;
  grid-template-columns: 100px 90px 90px 130px 100px 130px 130px 1fr auto;
  gap: 8px; align-items: center;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
  padding: 12px; margin-bottom: 16px;
}
.pf-add-form input, .pf-add-form select {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm, 8px);
  padding: 7px 10px; font-size: 12.5px; color: var(--text); min-height: 36px;
  font-family: var(--font-mono);
}
.pf-add-form input:focus, .pf-add-form select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.pf-add-btn {
  background: var(--accent); color: white; border: none; border-radius: var(--radius-sm, 8px);
  padding: 8px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; min-height: 36px;
}
.pf-add-btn:hover { background: var(--accent-hi); }
@media (max-width: 900px) {
  .pf-add-form { grid-template-columns: 1fr 1fr; }
  .pf-add-btn { grid-column: 1 / -1; }
}
.pf-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
@media (max-width: 640px) { .pf-summary { grid-template-columns: repeat(2, 1fr); } }
.pf-sum-tile {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md, 12px);
  padding: 12px 14px;
}
.pf-sum-num { font-size: 20px; font-weight: 800; color: var(--text); font-family: var(--font-mono); letter-spacing: -0.02em; }
.pf-sum-num.up { color: var(--bull); }
.pf-sum-num.down { color: var(--bear); }
.pf-sum-lbl { font-size: 11px; color: var(--dim); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.pf-section-title { font-size: 11px; font-weight: 700; color: var(--dim); letter-spacing: 0.06em; text-transform: uppercase; margin: 14px 0 6px; }
.pf-closed-title { margin-top: 24px; }
.pf-list { display: flex; flex-direction: column; gap: 8px; }
.pf-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md, 12px);
  padding: 12px 14px;
}
.pf-row-closed { opacity: 0.70; background: var(--bg-soft); }
.pf-row-title { font-size: 14px; color: var(--text); }
.pf-row-meta  { font-size: 11.5px; color: var(--dim); margin-top: 3px; }
.pf-row-pnl  { font-size: 17px; font-weight: 800; font-family: var(--font-mono); letter-spacing: -0.02em; text-align: right; }
.pf-row-pnl.up   { color: var(--bull); }
.pf-row-pnl.down { color: var(--bear); }
.pf-pnl-pct { font-size: 11px; font-weight: 600; opacity: 0.85; margin-left: 6px; }
.pf-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.pf-row-actions button {
  background: transparent; border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 11px; font-size: 11.5px; font-weight: 600; color: var(--text-soft);
  cursor: pointer; min-height: 28px;
}
.pf-row-actions button:hover { background: var(--inner); border-color: var(--border-hi); color: var(--text); }
.pf-foot {
  font-size: 11.5px; color: var(--dim); font-style: italic; line-height: 1.5;
  border-top: 1px solid var(--border); padding-top: 12px; margin-top: 20px;
}
.pf-foot strong { color: var(--text-soft); font-style: normal; }
@media (max-width: 640px) {
  .pf-row { grid-template-columns: 1fr; }
  .pf-row-pnl { text-align: left; }
}

/* ────────────────────────────────────────────────────────────────────
 * Mobile responsive pass (v65)
 *
 * Phone-first overrides for the 375–430px viewport range (iPhone SE
 * through Pro Max). Everything above 640px is unchanged.
 *
 * Goals:
 *   • Topnav + ticker tabs fit a 375px viewport without horizontal scroll
 *   • Tap targets stay ≥44×44 per Apple HIG
 *   • Long horizontal toolbars become horizontally-scrollable rails
 *     (with momentum + snap) instead of wrapping into ragged rows
 *   • Wide tables get horizontal scroll, not viewport overflow
 *   • Hero/KPI tiles stack and downsize without dropping below 11px
 * ──────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

  /* Page-wide: tighter side padding on tiny screens, already done in
   * the 760px block above, but reinforce here for any new sections.
   * Nothing else overrides it. */
  .wrap {
    padding-left:  max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }

  /* Header: brand-logo shrinks a touch and the meta line uses smaller
   * type so the connecting/health text doesn't push the live-indicator
   * onto a second row. */
  .brand-logo { width: 36px; height: 36px; font-size: 14px; }
  .brand-text h1 { font-size: 18px; }
  .meta { font-size: 10.5px; }
  #search-btn { padding: 10px 14px; min-width: 88px; }
  .search-box input { font-size: 16px; /* prevents iOS zoom-on-focus */ padding: 11px 16px; }

  /* Section h2, the long titles like "Top Opportunities, multi-factor
   * market hunt" overflow at 375px. Shrink + tighten letter-spacing. */
  .section-header h2 { font-size: 15px; line-height: 1.3; letter-spacing: -0.01em; }

  /* ── Top nav (4 main views) ──
   * Hide the "AlphaWhisper " prefix on the Gravity/Whales chips so we
   * keep the short noun. The label remains visible at all widths. */
  .topnav { width: 100%; justify-content: space-between; }
  .topnav-prefix { display: none; }
  .topnav-item { padding: 9px 10px; font-size: 12px; flex: 1 1 0; justify-content: center; gap: 5px; }
  .topnav-icon { font-size: 14px; }

  /* ── Ticker detail tab bar (Overview / TradingView / Chain / Swing) ──
   * The labels overflow at 375px. Convert to a horizontally-scrollable
   * rail with snap-points so each tab is still tappable & readable. */
  .tab-bar {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .tab-bar::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; scroll-snap-align: start; padding: 11px 12px 13px; font-size: 12px; }

  /* ── Pillars row ──
   * Existing 900px breakpoint sets it to 2 cols. Verify each tile
   * doesn't overflow by tightening padding + font-size. */
  .pillars-row { gap: 8px; }

  /* ── Score hero ──
   * 26px is too large at 375px when the line includes arrow + dir
   * label + composite number. Drop to 20px and tighten the disclose
   * button placement. */
  .score-hero { padding: 14px 14px; }
  .score-hero-main { font-size: 20px; gap: 8px; }
  .score-hero-arrow { font-size: 24px; }
  .score-hero-num-lbl { font-size: 12px; }
  .score-hero-sub { font-size: 11.5px; gap: 6px; }
  .score-hero-disclose { margin-left: 0; }

  /* ── Whales toolbar ──
   * Tab pills + fresh toggle + push toggle is too wide at 375px.
   * Stack into two rows: tabs on row 1 (scrollable), toggles on row 2. */
  .whale-toolbar { gap: 8px; }
  .whale-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
  }
  .whale-tabs::-webkit-scrollbar { display: none; }
  .whale-tab { flex: 0 0 auto; font-size: 11px; padding: 7px 11px; min-height: 32px; }
  .whale-push-toggle { margin-left: 0; }
  .whale-side-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; max-width: 100%; }
  .whale-side-tabs::-webkit-scrollbar { display: none; }
  .whale-side-tab { flex: 0 0 auto; }

  /* ── Whale rows ──
   * The 28px gutter + main column is fine, but the `.whale-top` line
   * (ticker / strike / expiry / premium) overflows. Force the premium
   * to drop to a new line by removing `margin-left:auto` and letting
   * the flex wrap. Also shrink ticker/strike a touch. */
  .whale-row { padding: 10px 12px; gap: 10px; grid-template-columns: 22px 1fr; }
  .whale-dir { font-size: 16px; }
  .whale-top { gap: 8px; }
  .whale-ticker { font-size: 13px; }
  .whale-strike { font-size: 12px; }
  .whale-prem { margin-left: 0; font-size: 11px; }
  .whale-since { font-size: 12px; }
  .whale-sub { gap: 8px; font-size: 10.5px; }

  /* ── Backtest KPI tiles ──
   * 3 tiles side-by-side get cramped under 375px. Drop to 1 col or use
   * 3 cols with smaller numbers. Choose 3 cols with reduced font so
   * users see win-rate / N / avg side-by-side. */
  .bt-kpis { gap: 6px; }
  .bt-kpi { padding: 6px 2px; }
  .bt-kpi-val { font-size: 15px; }
  .bt-kpi-lbl { font-size: 9px; }

  /* ── Options chain table ──
   * Already wrapped in .chain-table-wrap with overflow-x:auto. Make the
   * strike column visually sticky so users can scroll left/right and
   * still see the strike. Tighten cell padding. */
  .chain-table { font-size: 11px; }
  .chain-table-wrap { -webkit-overflow-scrolling: touch; }
  .chain-row td, .chain-thead-cols th { padding: 5px 4px; font-size: 10.5px; }
  .chain-row td.chain-strike, .chain-thead-section .chain-strike-h {
    position: sticky; left: 0; z-index: 2;
    box-shadow: 1px 0 0 var(--border);
  }

  /* ── Verdict card ──
   * Hero label "BUY CALLS" / "BUY PUTS" is 24px on desktop, fine on
   * phone too, but the inner padding + trade-grid get squeezed. */
  .verdict-card { padding: 16px 14px; }
  .verdict-card-symbol { font-size: 18px; }
  .verdict-card-spot { font-size: 12.5px; }
  .verdict-card-decision { padding: 11px 13px; gap: 10px; }
  .verdict-card-icon { font-size: 22px; }
  .verdict-card-label { font-size: 19px; }
  .verdict-trade-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .verdict-trade-v { font-size: 14px; }
  .verdict-row { padding: 10px 12px; }
  .verdict-row-symbol { font-size: 13px; }

  /* ── Portfolio add form ──
   * Already stacks at 900px. At 375px we want the inputs to be
   * full-width (1 col) so labels and values are easy to scan. */
  .pf-add-form { grid-template-columns: 1fr; padding: 10px; }
  .pf-add-btn { width: 100%; }

  /* ── Last-session archive grid ──
   * 180px minmax fits 1 column at 375px (180+12*2 = 204; viewport-32 ≈
   * 343 → 1 col). Confirm no overflow by tightening internal padding. */
  .opp-archive-grid { grid-template-columns: 1fr; gap: 6px; }

  /* ── Alerts modal ──
   * The form-row collapses to 1 col at 640px already, but the modal
   * card itself can be too wide. Constrain. */
  .alerts-modal-card { max-width: calc(100vw - 24px); }
}

/* Narrower phones (iPhone SE / mini): one more pass for the hero +
 * topnav so the prefix really stays hidden and the hero number doesn't
 * wrap awkwardly. */
@media (max-width: 380px) {
  .topnav-item { padding: 9px 6px; font-size: 11px; gap: 4px; }
  .topnav-icon { font-size: 13px; }
  .score-hero-main { font-size: 18px; }
  .score-hero-arrow { font-size: 22px; }
  .tab { padding: 11px 10px 13px; font-size: 11.5px; }
  .whale-tab { font-size: 10.5px; padding: 7px 9px; }
  .brand { min-width: 0; gap: 10px; }
  .brand-mark { width: 38px; height: 38px; }
  .brand-wordmark { font-size: 16px; }
  .brand-tagline { font-size: 9px; letter-spacing: 0.18em; }
}

/* ════════════════════════════════════════════════════════════════
 * AlphaWhisper brand touches (v68, Concept 3 implementation)
 * ════════════════════════════════════════════════════════════════
 * Subtle but consistent brand presence: gradient strip at the very
 * top of the page, brand-flavored loading splash, brand color used
 * for the section dot, footer wordmark. The goal is "users see it
 * and never forget it" without crowding the data layer.
 */

/* Brand strip across the very top of the page, 3px gradient bar,
 * always visible, instant recognition. Renders before anything else
 * scrolls. */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--brand-grad-h);
  z-index: 9999;
  pointer-events: none;
}

/* Section-header dot (h2 .h2-dot), was a flat color, now uses the
 * brand gradient so every "Top Opportunities", "Watchlist", "Whales"
 * section header carries a tiny brand mark. */
.h2-dot {
  background: var(--brand-grad) !important;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.10);
}

/* Live indicator, use brand cyan when live so the "pulse" matches
 * the brand pulse line in the logo (instead of a generic green). */
.live-indicator.live .dot {
  background: var(--brand-pulse);
  box-shadow: 0 0 8px rgba(125, 211, 252, 0.6);
}

/* h2-dot accent on opportunity cards, same brand presence */
.opp-theme-strength {
  background: var(--brand-grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* Footer, wordmark + tagline, never let users forget who built this */
footer {
  border-top: 1px solid var(--border);
  padding: 20px 14px;
  margin-top: 36px;
  text-align: center;
  color: var(--dim);
  font-size: 12px;
  line-height: 1.6;
}
footer .footer-brand {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 4px;
}
footer .footer-brand .brand-grad {
  background: var(--brand-grad-h);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
footer .footer-tag {
  font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.22em;
  color: var(--brand-2);
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* ═══════════════════════════════════════════════════════════════════
 * v77.44, Gravity staleness banners. Two states:
 *   1. Stale-but-spot-overlaid (within 60min RTH cap, off-hours):
 *      amber banner explaining what's live vs cached. Mobile-readable.
 *   2. Stale-unavailable (>60min RTH or no snapshot at all): full
 *      block replacing the levels panel, refuses to misinform.
 * ═══════════════════════════════════════════════════════════════════ */
.gv-stale-banner {
  display: block;
  margin: 8px 0 14px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.10), rgba(245, 158, 11, 0.04));
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-left-width: 4px;
  border-radius: 10px;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.5;
}
.gv-stale-banner-head {
  font-weight: 700;
  font-size: 14px;
  color: #b45309;
  margin-bottom: 4px;
}
html[data-theme="dark"] .gv-stale-banner-head { color: #fbbf24; }
.gv-stale-banner-body { color: var(--text-soft, #3a3a3c); }
.gv-stale-banner-body strong { color: var(--text, #1d1d1f); }

.gv-stale-block {
  display: block;
  padding: 28px 24px;
  background: var(--bg-soft, #f5f5f7);
  border: 1px solid var(--border, #e5e5ea);
  border-radius: 14px;
  text-align: center;
}
.gv-stale-head {
  font-size: 17px;
  font-weight: 800;
  color: #b91c1c;
  margin-bottom: 10px;
  letter-spacing: -0.005em;
}
html[data-theme="dark"] .gv-stale-head { color: #f87171; }
.gv-stale-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text, #1d1d1f);
  max-width: 560px;
  margin: 0 auto 14px;
}
.gv-stale-foot {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--dim, #6e6e73);
  max-width: 560px;
  margin: 0 auto;
}
.gv-stale-foot strong { color: var(--text); font-weight: 700; }
@media (max-width: 620px) {
  .gv-stale-banner { padding: 11px 12px; font-size: 13px; }
  .gv-stale-banner-head { font-size: 13.5px; }
  .gv-stale-block { padding: 22px 16px; }
  .gv-stale-head { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════
 * v77.39, Mobile polish pass. Lifts the app from "responsive web"
 * to "feels like a native iOS app" via 8 cross-cutting changes:
 *
 *   1. Bottom tab bar (<620px), native iOS nav pattern
 *   2. 44pt touch targets across all interactive pills/chips/buttons
 *   3. Tap polish, kill blue tap-flash, momentum scrolling, overscroll-contain
 *   4. Sticky header (mobile only), compact on scroll, blurred bg
 *   5. Modal safe-area-bottom, respects home indicator
 *   6. Global tabular numerals, numbers don't jitter during refresh
 *   7. Subtle card elevation, layered shadows like iOS surfaces
 *   8. Spring-like easing, transitions feel kinetic, not linear
 * ═══════════════════════════════════════════════════════════════════ */

/*, Spring easing variable used across transitions */
:root {
  --ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/*, Global tabular numerals + kerning + ligatures. Numbers in the
 *   Hawks/Gravity/Confluence cards used to "jitter" between refreshes
 *   because proportional figures change width as values change. tnum
 *   locks every digit to the same width, same look as iOS Stocks/Wallet. */
body {
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'tnum' 1, 'ss01' 1;
}

/*, Momentum scrolling + overscroll containment on all scrollable regions.
 *   Without this, scrolling a sub-region (Hawks table, chain, matrix)
 *   captures the body scroll and feels janky vs iOS's edge-bounce. */
.gv-matrix-wrap,
.alerts-modal-card,
.whales-summary,
.orbit-chart-wrap,
[class*="-list"],
[class*="-table"] {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/*, Modal safe-area awareness so the X / footer button isn't behind
 *   the iPhone home indicator. */
.alerts-modal-card {
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}

/*, Spring-easing pickup on the most user-touched surfaces. Linear
 *   easing reads as "web app"; spring easing reads as "native". */
.topnav-item,
.bottom-tab,
.card,
.confluence-card,
.cf-compact,
.swing-card,
.gv-chip,
.orbit-chip,
.orbit-tf-pill,
.gv-expiry-pill,
.gv-subnav-btn {
  transition: background 0.18s var(--ease-spring),
              color 0.18s var(--ease-spring),
              transform 0.18s var(--ease-spring),
              box-shadow 0.22s var(--ease-spring),
              border-color 0.18s var(--ease-spring);
}

/*, 44pt minimum touch targets on every interactive pill/chip.
 *   Apple HIG floor. Many were 28-34px tall, hard to tap precisely. */
@media (max-width: 760px) {
  .gv-chip,
  .orbit-chip,
  .orbit-tf-pill,
  .gv-expiry-pill,
  .gv-subnav-btn,
  .topnav-item,
  .alerts-add,
  .alerts-close,
  .orbit-fs-btn,
  .swing-regen-btn,
  .whale-empty-cta {
    min-height: 44px;
  }
  .alerts-close { min-width: 44px; }
}

/* ── Bottom tab bar (mobile only, <620px) ─────────────────────────
 * Native iOS navigation pattern. Frosted-glass background, large
 * touch targets, safe-area-aware padding for the home indicator. */
.bottom-tabbar {
  display: none;   /* shown only at <620px via media query below */
}
@media (max-width: 620px) {
  /* Hide top nav on mobile, bottom bar takes over */
  .topnav { display: none !important; }
  .bottom-tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding: 6px max(8px, env(safe-area-inset-left)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right));
  }
  /* Push body content above the bottom bar so nothing's covered */
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }
}
html[data-theme="dark"] .bottom-tabbar {
  background: rgba(11, 14, 20, 0.85);
  border-top-color: rgba(255, 255, 255, 0.08);
}
.bottom-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 52px;
  padding: 6px 4px;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--dim, #6e6e73);
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: color 0.15s var(--ease-spring), transform 0.1s var(--ease-spring);
}
.bottom-tab:active {
  /* Subtle press-down feedback, native iOS feel */
  transform: scale(0.92);
}
.bottom-tab.active {
  color: var(--accent-solid, #0071e3);
}
.bottom-tab-icon {
  font-size: 22px;
  line-height: 1;
  transition: transform 0.15s var(--ease-spring);
}
.bottom-tab.active .bottom-tab-icon {
  transform: scale(1.08);
}
.bottom-tab-label {
  font-size: 10px;
  font-weight: 600;
}

/* ── Sticky header on mobile ──────────────────────────────────────
 * Native pattern: header stays at top, slight blur underneath as
 * content scrolls past. Reduces vertical loss to the brand block. */
@media (max-width: 620px) {
  header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    margin: 0 calc(-1 * max(16px, env(safe-area-inset-left))) 12px calc(-1 * max(16px, env(safe-area-inset-right)));
    padding: 10px max(16px, env(safe-area-inset-left));
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
  html[data-theme="dark"] header {
    background: rgba(11, 14, 20, 0.85);
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }
}

/* ── Subtle card elevation upgrade ───────────────────────────────
 * Layered shadows like iOS surface materials. Replaces flat-bordered
 * cards with a softer depth that catches the eye without screaming. */
.card,
.confluence-card,
.swing-card,
.orbit-foot,
.alerts-modal-card {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.04);
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .confluence-card,
html[data-theme="dark"] .swing-card,
html[data-theme="dark"] .alerts-modal-card {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 4px 16px rgba(0, 0, 0, 0.35);
}

/* ── Press-down feedback on cards (mobile touch only) ────────────
 * Native iOS pattern: tappable cards scale-down briefly on touch.
 * Mouse hover keeps the existing hover lift on desktop. */
@media (hover: none) and (pointer: coarse) {
  .cf-compact:active,
  .swing-card:active,
  .opp-card:active {
    transform: scale(0.985);
  }
}

/* ── Smooth scrolling behavior on supported surfaces ─────────────
 * `scroll-behavior: smooth` makes anchor-jumps feel native. */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bottom-tab:active { transform: none; }
  .bottom-tab.active .bottom-tab-icon { transform: none; }
}