/* =========================================================
     CSS Variables — dark first, light overrides via @media
     ========================================================= */
  :root {
    --bg: #070A0F;
    --surface-0: #0B1017;
    --surface-1: #0F1620;
    --surface-2: #141E2A;
    --surface-3: #1A2634;
    --overlay: #202E3E;
    --border-subtle: #1D2937;
    --border-strong: #2D3E52;
    --text-primary: #F2F6FB;
    --text-secondary: #A6B2C1;
    --text-tertiary: #818EA0;
    --accent: #36A3FF;
    --accent-strong: #1687E8;
    --accent-soft: #102A42;
    --positive: #28C08D;
    --negative: #F05B67;
    --warning: #E3A640;
    --neutral: #7E8DA1;
    --focus: #8ED0FF;

    /* Compatibility aliases: keep legacy selectors stable while removing the
       former purple/HK/LLM meaning from accent-2. */
    --bg-2: var(--surface-0);
    --card: var(--surface-1);
    --card-2: var(--surface-2);
    --border: var(--border-subtle);
    --text: var(--text-primary);
    --text-dim: var(--text-secondary);
    --text-faint: var(--text-tertiary);
    --accent-2: var(--accent);
    --green: var(--positive);
    --red: var(--negative);
    --amber: var(--warning);
    --gray: var(--neutral);
    --pos: var(--positive);
    --neg: var(--negative);
    --warn: var(--warning);
    --muted: var(--text-secondary);
    --tab-active-bg: var(--surface-2);
    --table-row-hover: var(--surface-3);
    --shadow-topbar: 0 8px 24px rgba(0,0,0,.22);
    --radius: 10px;
    --radius-sm: 6px;
    --gap: 12px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  }
  @media (prefers-color-scheme: light) {
    :root {
      --bg: #F3F6F9;
      --surface-0: #F8FAFC;
      --surface-1: #FFFFFF;
      --surface-2: #F2F5F8;
      --surface-3: #E9EEF3;
      --overlay: #DFE7EF;
      --border-subtle: #D8E0E8;
      --border-strong: #B9C6D3;
      --text-primary: #101821;
      --text-secondary: #526170;
      --text-tertiary: #5E6D7D;
      --accent: #087DD1;
      --accent-strong: #0567B1;
      --accent-soft: #DCEEFF;
      --positive: #138B66;
      --negative: #C83D4A;
      --warning: #A66F08;
      --neutral: #66788D;
      --focus: #0078C9;
      --shadow-topbar: 0 8px 24px rgba(18,33,48,.08);
    }
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  /* OS-level reduced motion: kill decorative animation (banner pulse, refresh spin,
     bar transitions). JS smooth-scrolls check the same media query. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    padding-bottom: env(safe-area-inset-bottom);
  }
  a { color: var(--accent); text-decoration: none; }
  a:hover { text-decoration: underline; }
  code { font-family: var(--mono); font-size: 0.9em; }

  /* =========================================================
     Sticky header + tab bar
     ========================================================= */
  .topbar {
    position: sticky; top: 0; z-index: 30;
    background: var(--surface-0);
    border-bottom: 1px solid var(--border);
    padding: var(--space-3) var(--space-4) 0;
    padding-top: max(var(--space-3), env(safe-area-inset-top));
    box-shadow: var(--shadow-topbar);
  }
  .topbar-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
  }
  .brand {
    display: flex; align-items: center; gap: 8px;
    min-width: 0;
  }
  .brand-mark {
    width: 26px; height: 26px; flex: 0 0 auto; display: block;
  }
  .brand h1 {
    margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em;
  }
  .brand .updated {
    font-size: 11px; color: var(--text-dim);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  @media (max-width: 480px) {
    .brand-mark { width: 24px; height: 24px; }
    .brand .updated { display: none; }
  }
  .refresh-btn {
    appearance: none; background: var(--card); color: var(--text);
    border: 1px solid var(--border); border-radius: 999px;
    min-height: 36px; min-width: 36px; padding: 0 var(--space-3);
    font-size: 14px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px;
    transition: background 0.15s, color 0.15s, border-color 0.3s;
  }
  .refresh-btn:active { background: var(--card-2); }
  .refresh-btn.is-loading .ic { animation: spin 0.8s linear infinite; }
  .refresh-btn.ok-flash { border-color: var(--green); }
  .refresh-btn.fresh-flash { border-color: var(--accent); color: var(--accent); }
  .refresh-btn[disabled] { opacity: 0.6; cursor: not-allowed; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .topbar-actions { display: inline-flex; align-items: center; gap: 8px; }
  .nav-link {
    color: var(--text-dim); text-decoration: none; font-size: 13px;
    padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); transition: background 0.15s, color 0.15s;
  }
  .nav-link:hover { color: var(--text); background: var(--card-2); }
  @media (max-width: 480px) {
    .nav-link { padding: var(--space-2); font-size: 12px; }
  }

  .tabs {
    display: flex; gap: var(--space-1); margin-top: var(--space-3);
    overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab-btn {
    appearance: none; background: transparent; color: var(--text-dim);
    border: none; position: relative;
    padding: var(--space-3) var(--space-4); min-height: 44px;
    font-size: 14px; font-weight: 500; cursor: pointer;
    white-space: nowrap;
  }
  .tab-btn.active { color: var(--text); }
  .tab-btn.active::after {
    content: ""; position: absolute; width: 22px; height: 2px;
    left: 50%; bottom: 3px; transform: translateX(-50%);
    border-radius: 999px; background: var(--accent);
  }
  .tab-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

  /* Desktop tab bar — a real underline nav, not the mobile edge-fade scroller. */
  @media (min-width: 1024px) {
    .tabs {
      gap: 2px; margin-top: 14px; overflow: visible;
      -webkit-mask-image: none; mask-image: none;
      border-bottom: 1px solid var(--border);
    }
    .tab-btn {
      padding: 10px 18px; min-height: 40px; font-size: 13.5px; font-weight: 550;
      border-radius: 8px 8px 0 0; transition: color .15s, background .15s;
    }
    .tab-btn:hover { color: var(--text); background: var(--surface-1); }
    .tab-btn.active { color: var(--accent); }
    .tab-btn.active::after {
      width: 100%; height: 2px; left: 0; bottom: -1px; transform: none; border-radius: 0;
    }
  }

  /* Per-market segmented control (broker-app style) for Equity / Daily P&L */
  .card-head { display: flex; align-items: center; justify-content: space-between;
    gap: 8px 12px; flex-wrap: wrap; margin-bottom: 12px; }
  .card-head h3 { margin: 0; }
  .mkt-seg { display: inline-flex; gap: 2px; background: var(--bg-2);
    border: 1px solid var(--border); border-radius: var(--radius); padding: 2px; }
  .mkt-seg-btn { display: inline-flex; align-items: center; justify-content: center;
    gap: 5px; appearance: none; background: transparent; color: var(--text-dim);
    border: none; border-radius: var(--radius-sm); padding: 5px 11px; min-height: 30px;
    font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer;
    white-space: nowrap; transition: background .12s, color .12s; }
  /* iOS-style raised pill for the active segment → colored dots stay visible */
  .mkt-seg-btn.active { background: var(--card); color: var(--text); }
  .mkt-seg-btn:not(.active):hover { color: var(--text); }
  /* Market dots replace flag emoji (regional-indicator glyphs misrender on mobile) */
  .seg-dot { width: 7px; height: 7px; border-radius: 50%; flex: none;
    background: var(--text-dim); }
  .seg-dot.us { background: var(--accent); }
  .seg-dot.hk { background: var(--accent-2); }
  /* Mobile: stack heading + full-width equal segments so labels never misalign */
  @media (max-width: 560px) {
    .card-head { flex-direction: column; align-items: stretch; gap: 8px; }
    .mkt-seg { width: 100%; }
    .mkt-seg-btn { flex: 1; padding: 8px 4px; }
  }

  /* Swipe affordance is conveyed by the tab-edge fade, not persistent copy. */
  .swipe-hint { display: none; }

  /* =========================================================
     Layout — mobile single column, desktop 3-column
     ========================================================= */
  main { padding: var(--space-4); max-width: 1600px; margin: 0 auto; }
  .pager { display: contents; }   /* desktop: transparent — panels join the grid */
  .panel { display: block; }

  /* ── Mobile (<1024px): iOS-native paged tabs ──
     Fixed chrome (header + footer), the content area is a horizontal
     scroll-snap pager. Each tab is its own page that scrolls vertically.
     Native scrolling = buttery preview / momentum / snap, zero JS gesture code. */
  @media (max-width: 1023px) {
    html, body { height: 100%; }
    body {
      display: flex; flex-direction: column;
      height: 100dvh; min-height: 100dvh; overflow: hidden;
    }
    .topbar { flex: 0 0 auto; }
    /* No pinned footer on mobile — it stole ~127px from every tab. Its links live
       in the header (Briefs/GitHub); the disclaimer rides each page's scroll end. */
    footer { display: none; }
    .panel::after {
      content: "Not investment advice · point-in-time · past performance ≠ future results";
      display: block; margin-top: 16px; padding: 12px 0 4px;
      border-top: 1px solid var(--border);
      font-size: 10px; color: var(--text-faint); text-align: center; line-height: 1.5;
    }
    main {
      flex: 1 1 auto; min-height: 0; min-width: 0; max-width: 100%;
      padding: 0;
      display: flex; flex-direction: column;   /* banner (auto) + pager (flex) */
    }
    .desk-rail { flex: 0 0 auto; margin: 8px 16px 0; }
    .pager {
      display: flex; flex: 1 1 auto;
      min-height: 0; min-width: 0;              /* don't let wide content expand the pager */
      overflow-x: auto; overflow-y: hidden;
      scroll-snap-type: x mandatory;
      overscroll-behavior-x: contain;          /* don't trigger browser back-swipe */
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .pager::-webkit-scrollbar { display: none; }
    .panel {
      flex: 0 0 100%; width: 100%; height: 100%;
      min-width: 0;                            /* clamp page to viewport, not content width */
      overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain;
      scroll-snap-align: start; scroll-snap-stop: always;
      padding: var(--space-4);
      -webkit-overflow-scrolling: touch;
    }
    /* visually hidden but kept in the a11y tree so the heading sequence stays h1→h2→h3
       (display:none would drop the h2 → axe/screen-readers see an h1→h3 skip). NOTE: must
       stay IN FLOW — position:absolute here escapes the horizontal scroll-snap pager and
       shoves the panel left (blank gutter on the right). 1px+clip-path collapses it safely. */
    .panel > h2 { width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
      white-space: nowrap; margin: 0; padding: 0; font-size: 1px; }
    /* inner horizontal scrollers must NOT page the tabs — overscroll-x:contain stops
       their horizontal scroll from chaining to the pager (touch-action stays auto so
       vertical swipes still scroll the page). */
    .movers-scroll, .table-wrap { overscroll-behavior-x: contain; }
  }

  /* ── Desktop (≥1024px): focused tabbed editorial layout ──
     One tab visible at a time (same IA as mobile) so the page is a composed
     ~2-3 column view per question — NOT the former 48-card wall. Each panel is
     its own 12-column grid; cards opt into width via .lead/.wide/.narrow. The
     desk rail is a full-width summary above the panels, shared across tabs.
     Desktop-only display:none — the mobile scroll-snap pager needs ALL panels
     laid out, so this override must never leak below 1024px. */
  @media (min-width: 1024px) {
    .swipe-hint { display: none; }
    main {
      display: block;
      max-width: 1280px; margin: 0 auto;
      padding: 24px 28px 40px;
    }
    .pager { display: block; }
    .panel { display: none; }
    /* Balanced masonry (CSS multi-column) instead of a rigid 2-col grid: cards
       flow to equalize column heights, so a tall card no longer leaves the other
       column half-empty (the old "歪" / lopsided look). Focal leads and section
       dividers break out full-width via column-span:all, which also carves the
       tab into clear editorial sections rather than a uniform box wall. */
    .panel.active {
      display: block;
      column-count: 2;
      column-gap: 22px;
    }
    .panel.active > * { break-inside: avoid; }
    .panel.active > .card { margin: 0 0 22px; }
    .panel.active > .card.lead,
    .panel.active > .sect-divider,
    .panel.active > .today-highlights,
    .panel.active > h2 { column-span: all; }
    .panel.active > .sect-divider { margin: 6px 0 18px; }
    .panel.active > .today-highlights { margin-bottom: 20px; }
    /* Tab already names the view → panel <h2> stays in the a11y tree only. */
    .panel.active > h2 { width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
      white-space: nowrap; margin: 0; padding: 0; font-size: 1px; }
    /* A full-width lead card with a long vertical list (e.g. hard-gate breaches)
       flows that list into 2 balanced columns so it reads as a compact band, not a
       1000px tower that unbalances the whole tab. */
    .panel.active > .card.lead .risk-alerts,
    .panel.active > .card.lead .plan-timeline,
    .panel.active > .card.lead .plan-actions,
    .panel.active > .card.lead .sector-context,
    .panel.active > .card.lead .sentiment-drill {
      display: block; column-count: 2; column-gap: 24px;
    }
    .panel.active > .card.lead .risk-alerts > .risk-alert,
    .panel.active > .card.lead .plan-timeline > *,
    .panel.active > .card.lead .plan-actions > *,
    .panel.active > .card.lead .sector-context > *,
    .panel.active > .card.lead .sentiment-drill > * {
      break-inside: avoid; margin-bottom: var(--space-2);
    }
  }
  /* =========================================================
     Card primitives
     ========================================================= */
  .card {
    background: var(--card);
    /* Border blends into the fill on dark → cards read as soft raised panels, not
       outlined boxes (the "card wall" look). Light mode keeps a hairline for
       definition against the near-white page. */
    border: 1px solid var(--card);
    border-radius: 12px;
    padding: var(--space-4);
    margin-bottom: var(--gap);
  }
  .card.is-pending { visibility: hidden; }
  @media (prefers-color-scheme: light) {
    .card { border-color: var(--border-subtle); }
  }
  .card h3 {
    margin: 0 0 var(--space-3);
    font-size: 12px; font-weight: 600;
    color: var(--text-dim); text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .card h3 .badge { float: right; text-transform: none; letter-spacing: 0; }

  /* =========================================================
     Mobile information-entropy fold — diagnostic cards (Concentration /
     Leveraged ETF / Risk Metrics) collapse to a one-line peek so Hero answers
     "怎么样了" in ~2 screens instead of 5. Nothing is removed: tap to expand,
     state persists per card. Desktop (3-col, space to spare) always expanded.
     ========================================================= */
  .card.fold-m > h3 .peek {
    display: none; text-transform: none; letter-spacing: 0;
    font-family: var(--mono); font-weight: 600; font-size: 11px;
    color: var(--text); margin-left: 8px; vertical-align: middle;
  }
  @media (max-width: 1023px) {
    .card.fold-m > h3 {
      margin-bottom: 0; cursor: pointer; position: relative; padding-right: 18px;
      -webkit-tap-highlight-color: transparent; user-select: none;
      /* keep the one-line header tappable at thumb size */
      min-height: 24px; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 0;
    }
    .card.fold-m > h3::after {
      content: "›"; position: absolute; right: 2px; top: 50%;
      transform: translateY(-50%) rotate(90deg); transition: transform .15s;
      color: var(--text-faint); font-size: 15px; font-weight: 400;
    }
    .card.fold-m.open > h3 { margin-bottom: var(--space-3); }
    .card.fold-m.open > h3::after { transform: translateY(-50%) rotate(-90deg); }
    .card.fold-m:not(.open) > :not(h3) { display: none; }
    .card.fold-m:not(.open) > h3 .peek { display: inline; }
  }

  /* Market snapshot source captions are attribution noise on a phone — the
     stale ⚠ marker already covers the failure case. Desktop keeps them. */
  @media (max-width: 480px) {
    .market-cell .src { display: none; }
  }

  /* =========================================================
     Hero: Market Snapshot (大盘指数 vs 我的组合)
     ========================================================= */
  .market-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0;
    min-height: 76px;
    border-top: 1px solid var(--border-subtle);
  }
  .market-cell {
    background: var(--surface-1);
    border-radius: 0;
    padding: var(--space-3);
    text-align: left;
    font-variant-numeric: tabular-nums;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: var(--space-2);
    border-right: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    min-height: 76px;
  }
  .market-cell .lbl {
    grid-column: 1 / -1;
    font-size: 10px; color: var(--text-dim);
    text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
  }
  .market-cell .val {
    font-size: 20px; font-weight: 700; margin: var(--space-1) 0 0;
  }
  .market-cell .pct {
    font-size: 13px; font-weight: 600; text-align: right;
  }
  .market-cell .src {
    grid-column: 1 / -1;
    font-size: 9px; color: var(--text-faint); margin-top: var(--space-1);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .market-cell.stale::after {
    content: "⚠"; position: absolute; top: 4px; right: 8px;
    color: var(--text-faint); font-size: 11px;
  }
  @media (max-width: 560px) {
    .market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  .rs-row { line-height: 1.4; min-height: 16px; }
  .rs-row b.pos { color: var(--green); }
  .rs-row b.neg { color: var(--red); }

  /* =========================================================
     Hero: 总资产卡
     ========================================================= */
  .totals-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0;
    border-top: 1px solid var(--border-subtle);
  }
  @media (max-width: 360px) {
    /* Narrow phones: HK$xx,xxx is too wide for half-grid; stack legs vertically */
    .totals-grid { grid-template-columns: 1fr; gap: 0; }
    .total-leg { padding: var(--space-3); }
  }
  .total-leg {
    background: var(--surface-1);
    border-radius: 0;
    padding: var(--space-3);
    border-right: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    min-height: 82px;
  }
  .total-leg .lbl { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
  .total-leg .val { font-size: 24px; font-weight: 700; margin: var(--space-1) 0 0; font-variant-numeric: tabular-nums; }
  .total-leg .sub { font-size: 12px; font-variant-numeric: tabular-nums; }
  .total-combined {
    margin-top: 0;
    background: var(--surface-1);
    border-radius: 0;
    padding: var(--space-4) var(--space-3);
    display: flex; flex-wrap: wrap; gap: var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
  }
  .total-combined > div { flex: 1 1 130px; min-width: 0; min-height: 66px; }
  .total-combined .lbl { font-size: 11px; color: var(--text-dim); }
  .total-combined .val {
    font-size: 32px; line-height: 1.15; font-weight: 700;
    margin-top: var(--space-1); font-variant-numeric: tabular-nums;
  }
  .total-combined .fx { font-size: 11px; color: var(--text-faint); }

  .pos { color: var(--green); }
  .neg { color: var(--red); }
  .neutral { color: var(--text-dim); }

  /* Catalysts list */
  .catalysts-list { display: flex; flex-direction: column; gap: var(--space-2); max-height: 240px; overflow-y: auto; }
  .catalyst-row {
    padding: var(--space-2) var(--space-3); background: var(--card-2); border-radius: var(--radius-sm);
    font-size: 12px; display: grid; grid-template-columns: 70px 80px 1fr; gap: var(--space-2);
  }
  .catalyst-row .date { font-family: var(--mono); color: var(--text-dim); }
  .catalyst-row .ticker { font-family: var(--mono); font-weight: 600; color: var(--accent); }
  .catalyst-row .detail { color: var(--text); }
  .catalyst-row.fomc .ticker { color: var(--accent-2); }
  .catalyst-row.macro .ticker { color: var(--warning); }

  /* News digest markdown */
  .news-digest { font-size: 13px; line-height: 1.5; max-height: 360px; overflow-y: auto; }
  .news-digest h3 { font-size: 13px; color: var(--accent); margin: 12px 0 4px; }
  .news-digest h3:first-child { margin-top: 0; }
  .news-digest ul { padding-left: 18px; margin: 4px 0; }
  .news-digest li { margin: 3px 0; }
  .news-digest strong { color: var(--text); }
  .news-digest .digest-meta { color: var(--text-dim); font-size: 11px; margin-bottom: 8px; }

  /* Macro row */
  .macro-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .macro-cell {
    background: var(--card-2); border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-2); text-align: center; font-variant-numeric: tabular-nums;
  }
  .macro-cell .lbl { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
  .macro-cell .val { font-size: 17px; font-weight: 700; }
  .macro-cell .sub { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
  .macro-cell.up   .sub { color: var(--positive); }
  .macro-cell.down .sub { color: var(--negative); }

  /* Regime badge (top of macro card) — risk_on / neutral / risk_off */
  .regime-badge { display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:var(--radius-sm);
    margin-bottom:var(--space-3); font-size:12px; border:1px solid var(--border); }
  .regime-badge .rg-dot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
  .regime-badge .rg-label { font-weight:800; text-transform:uppercase; letter-spacing:0.04em; }
  .regime-badge .rg-reasons { color: var(--text-dim); font-size:11px; }
  .regime-badge.risk_on  { background: color-mix(in srgb, var(--positive) 10%, transparent); border-color: color-mix(in srgb, var(--positive) 35%, transparent); }
  .regime-badge.risk_on  .rg-dot { background:var(--positive); } .regime-badge.risk_on  .rg-label { color:var(--positive); }
  .regime-badge.neutral  { background: rgba(148,163,184,0.10); border-color: rgba(148,163,184,0.35); }
  .regime-badge.neutral  .rg-dot { background:#94a3b8; } .regime-badge.neutral  .rg-label { color:#94a3b8; }
  .regime-badge.risk_off { background: color-mix(in srgb, var(--negative) 10%, transparent); border-color: color-mix(in srgb, var(--negative) 35%, transparent); }
  .regime-badge.risk_off .rg-dot { background:var(--negative); } .regime-badge.risk_off .rg-label { color:var(--negative); }
  .regime-badge.green { background: color-mix(in srgb, var(--positive) 10%, transparent); border-color: color-mix(in srgb, var(--positive) 35%, transparent); }
  .regime-badge.green .rg-dot { background:var(--positive); } .regime-badge.green .rg-label { color:var(--positive); }
  .regime-badge.amber { background: color-mix(in srgb, var(--warning) 12%, transparent); border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
  .regime-badge.amber .rg-dot { background:var(--warning); } .regime-badge.amber .rg-label { color:var(--warning); }
  .regime-badge.red   { background: color-mix(in srgb, var(--negative) 10%, transparent); border-color: color-mix(in srgb, var(--negative) 35%, transparent); }
  .regime-badge.red   .rg-dot { background:var(--negative); } .regime-badge.red   .rg-label { color:var(--negative); }

  /* Risk keyword banner (top of macro card; hidden when no hits) */
  .risk-banner {
    margin-bottom: var(--space-3); padding: var(--space-2) var(--space-3);
    background: color-mix(in srgb, var(--negative) 10%, transparent); border-left: 3px solid var(--negative);
    border-radius: var(--radius-sm); font-size: 12px; line-height: 1.5;
  }
  .risk-banner .rb-hdr { color: var(--negative); font-weight: 700; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
  .risk-banner .rb-row { color: var(--text); margin: 2px 0; }
  .risk-banner .rb-tk  { font-weight: 700; color: var(--negative); margin-right: 8px; }
  .risk-banner .rb-kw  { background: color-mix(in srgb, var(--negative) 15%, transparent); padding: 1px 5px;
    border-radius: 3px; font-size: 11px; margin: 0 3px; }

  /* Per-ticker sentiment drill (collapsible) */
  .sentiment-drill { margin-top: var(--space-3); display: flex; flex-direction: column; gap: 4px; }
  .sd-row { background: var(--card-2); border-radius: var(--radius-sm); overflow: hidden; }
  .sd-row summary {
    list-style: none; cursor: pointer; padding: var(--space-2) var(--space-3);
    display: grid; grid-template-columns: 56px 28px 1fr auto; gap: 8px; align-items: center;
    font-size: 12px; font-variant-numeric: tabular-nums;
  }
  .sd-row summary::-webkit-details-marker { display: none; }
  .sd-row summary::after { content: '▸'; color: var(--text-dim); font-size: 10px; }
  .sd-row[open] summary::after { content: '▾'; }
  .sd-row .sd-tk { font-weight: 700; color: var(--text); }
  .sd-row .sd-reg { font-size: 10px; color: var(--text-dim); text-transform: uppercase; }
  .sd-row .sd-counts { color: var(--text-dim); font-size: 11px; }
  .sd-row .sd-counts strong { color: var(--text); }
  .sd-body { padding: 4px 12px 12px; font-size: 11.5px; line-height: 1.5; color: var(--text-dim); }
  .sd-body .sd-grp { color: var(--text-dim); font-size: 10px; text-transform: uppercase;
    letter-spacing: 0.05em; margin-top: var(--space-2); }
  .sd-body ul { margin: 2px 0 0; padding-left: 16px; }
  .sd-body li { margin: 1px 0; color: var(--text); }
  .sd-body .sd-empty { color: var(--text-dim); font-style: italic; font-size: 11px; }

  /* Influence radar (Trump / Musk / Serenity feed) */
  .infl-feed { display: flex; flex-direction: column; gap: var(--space-2); max-height: 420px; overflow-y: auto; }
  .infl-summary { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: 4px; font-size: 11px; }
  .infl-chip { padding: 2px 8px; border-radius: 999px; font-weight: 700; }
  .infl-chip.held { background: color-mix(in srgb, var(--negative) 14%, transparent); color: var(--negative); }
  .infl-chip.idea { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); }
  .infl-chip.sect { background: var(--card-2); color: var(--text-dim); }
  .infl-row {
    background: var(--card-2); border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3); border-left: 3px solid var(--text-dim);
  }
  .infl-row.is-held { border-left-color: var(--negative); }
  .infl-row.is-idea { border-left-color: var(--warning); }
  .infl-hdr { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 4px; font-size: 11px; flex-wrap: wrap; }
  .infl-who { font-weight: 800; padding: 2px 8px; border-radius: 4px; font-size: 11px; }
  .infl-who.trump { background: color-mix(in srgb, var(--negative) 16%, transparent); color: var(--negative); }
  .infl-who.musk  { background: rgba(59,130,246,0.16); color: #3b82f6; }
  .infl-stance { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 2px 8px; border-radius: 3px; font-weight: 700; }
  .infl-stance.up   { background: color-mix(in srgb, var(--positive) 16%, transparent); color: var(--positive); }
  .infl-stance.down { background: color-mix(in srgb, var(--negative) 16%, transparent); color: var(--negative); }
  .infl-stance.flat { background: var(--card); color: var(--text-dim); }
  .infl-rel { margin-left: auto; color: var(--text-dim); font-size: 10px; font-variant-numeric: tabular-nums; }
  .infl-sum { font-size: 12.5px; line-height: 1.45; color: var(--text); }
  .infl-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; font-size: 10.5px; }
  .infl-tag { padding: 2px 8px; border-radius: 4px; font-weight: 700; }
  .infl-tag.held { background: color-mix(in srgb, var(--negative) 14%, transparent); color: var(--negative); }
  .infl-tag.idea { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); }
  .infl-tag.sect { background: var(--card); color: var(--text-dim); font-weight: 500; }
  .infl-meta { color: var(--text-dim); font-size: 10px; margin-top: 4px; }

  /* Peer divergence (your holding vs its sector peers, 1d) */
  .peer-div-list { display: flex; flex-direction: column; gap: var(--space-2); }
  .peer-div-row {
    background: var(--card-2); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
    border-left: 3px solid var(--text-dim); font-variant-numeric: tabular-nums;
  }
  .peer-div-row.lag  { border-left-color: var(--negative); }   /* you trail peers */
  .peer-div-row.lead { border-left-color: var(--positive); }   /* you beat peers */
  .pd-top { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
  .pd-tk { font-weight: 800; color: var(--text); }
  .pd-self { font-weight: 700; }
  .pd-gap { margin-left: auto; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; }
  .pd-gap.lag  { background: color-mix(in srgb, var(--negative) 14%, transparent); color: var(--negative); }
  .pd-gap.lead { background: color-mix(in srgb, var(--positive) 16%, transparent); color: var(--positive); }
  .pd-vs { font-size: 11.5px; color: var(--text-dim); margin-top: 3px; }
  .pd-vs b { color: var(--text); font-weight: 600; }
  .pd-caveat { color: var(--text-dim); font-size: 10px; margin-top: 8px; font-style: italic; }

  /* Risk metrics grid */
  .risk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .risk-cell {
    background: var(--surface-1); border-radius: 0;
    padding: var(--space-3); text-align: left; font-variant-numeric: tabular-nums;
    border-top: 1px solid var(--border-subtle);
  }
  .risk-cell .lbl { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
  .risk-cell .val { font-size: 20px; font-weight: 700; margin-top: var(--space-1); }
  .risk-alerts { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
  .risk-alert {
    padding: var(--space-2) var(--space-3); background: var(--card-2); border-radius: var(--radius-sm);
    font-size: 12px; display: flex; align-items: center; gap: var(--space-2);
    border-left: 3px solid var(--red);
  }
  .risk-alert.medium { border-left-color: var(--warning); }
  .risk-alert .icon { font-size: 14px; }
  @media (max-width: 480px) {
    .risk-grid { grid-template-columns: repeat(2, 1fr); }
  }

  /* Leveraged ETF exposure row */
  .lev-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .lev-cell {
    background: var(--surface-1); border-radius: 0;
    padding: var(--space-3); text-align: left; font-variant-numeric: tabular-nums;
    border-top: 1px solid var(--border-subtle);
  }
  .lev-cell .lbl { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
  .lev-cell .val { font-size: 20px; font-weight: 700; }
  .lev-tickers { margin-top: 8px; font-size: 11px; }

  /* Today's range bars */
  .range-list { display: flex; flex-direction: column; gap: 8px; }
  .range-row { display: grid; grid-template-columns: 60px 1fr auto; gap: 8px; align-items: center; font-size: 12px; }
  .range-row .tk { font-weight: 600; font-family: ui-monospace, "Menlo", monospace; }
  .range-bar { height: 8px; background: var(--card-2); border-radius: 4px; position: relative; overflow: hidden; }
  .range-bar > .fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--green), var(--red)); opacity: 0.5; }
  .range-bar > .dot { position: absolute; top: -2px; width: 4px; height: 12px; background: var(--text); border-radius: 2px; }
  .range-row .val { font-variant-numeric: tabular-nums; color: var(--text-dim); font-size: 11px; min-width: 50px; text-align: right; }

  /* Extremes (winners/losers) */
  .extremes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .extremes-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; margin-bottom: 8px; }
  .extremes-list { display: flex; flex-direction: column; gap: var(--space-2); }
  .extremes-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--space-2) var(--space-3); background: var(--card-2); border-radius: var(--radius-sm);
    font-variant-numeric: tabular-nums; font-size: 13px;
  }
  .extremes-row .tk { font-weight: 600; font-family: ui-monospace, "Menlo", monospace; }

  /* Today's P&L cards */
  .today-pnl-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    border-top: 1px solid var(--border-subtle);
  }
  .today-pnl-cell {
    background: var(--surface-1); border-radius: 0;
    padding: var(--space-4) var(--space-3); text-align: left;
    font-variant-numeric: tabular-nums;
    border-right: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    min-height: 86px;
  }
  .today-pnl-cell .lbl { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; margin-bottom: 4px; }
  .today-pnl-cell .val { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
  .today-pnl-cell .pct { font-size: 12px; margin-top: 2px; }

  /* Delta table */
  .delta-table {
    width: 100%; border-collapse: collapse;
    font-variant-numeric: tabular-nums;
  }
  .delta-table th, .delta-table td {
    padding: 8px; text-align: right; font-size: 13px;
    border-bottom: 1px solid var(--border);
  }
  .delta-table th:first-child, .delta-table td:first-child {
    text-align: left; color: var(--text-dim); font-weight: 500;
  }
  .delta-table thead th { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
  .delta-table tbody tr:last-child td { border-bottom: none; }

  /* Per-market return breakdown cards */
  .mkt-breakdown { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
  .mkt-breakdown-head { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: var(--space-3); }
  .mkt-breakdown-head .muted { font-weight: 500; font-size: 11px; }
  .mkt-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  @media (max-width: 560px) { .mkt-cards { grid-template-columns: 1fr; } }
  .mkt-card {
    background: var(--card-2); border: 1px solid var(--border);
    border-top: 2px solid var(--accent); border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
  }
  .mkt-card[data-mkt="hk"] { border-top-color: var(--accent-2); }
  .mkt-head { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--text);
    display: flex; align-items: center; gap: var(--space-2); }
  .mkt-head .muted { font-weight: 500; }
  .mkt-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
  .mkt-card[data-mkt="hk"] .mkt-dot { background: var(--accent-2); }
  .mkt-ret-label { font-size: 11px; color: var(--text-dim); margin-top: 9px; }
  .mkt-ret { font-size: 27px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; margin-top: 1px; }
  .mkt-stats { margin-top: 11px; display: grid; gap: 5px; }
  .mkt-stat { display: flex; justify-content: space-between; font-size: 13px; }
  .mkt-stat .lbl { color: var(--text-dim); }
  .mkt-stat .v { font-variant-numeric: tabular-nums; font-weight: 600; }
  .mkt-comp { margin-top: 11px; display: grid; gap: var(--space-2); }
  .mkt-comp-row { display: grid; grid-template-columns: 44px 1fr 62px; align-items: center; gap: 8px; font-size: 12px; }
  .mkt-comp-row .lbl { color: var(--text-dim); }
  .mkt-comp-row .v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
  .mkt-bar { height: 7px; background: var(--card); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
  .mkt-bar-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
  .mkt-bar-fill.pos { background: var(--green); }
  .mkt-bar-fill.neg { background: var(--red); }
  .mkt-chips { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
  .mkt-chip { font-size: 11px; color: var(--text-dim); background: var(--card);
    border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; }
  .mkt-chip b { font-weight: 600; font-variant-numeric: tabular-nums; margin-left: 2px; }
  .mkt-card-skel { color: var(--text-faint); padding: 20px; text-align: center; }

  /* HHI gauges */
  .hhi-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .hhi-card {
    background: var(--surface-1); border-radius: 0;
    padding: var(--space-3) var(--space-3) var(--space-5); text-align: center;
    border-top: 1px solid var(--border-subtle);
  }
  .hhi-card .lbl { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
  .hhi-ring {
    --pct: 0;
    --color: var(--accent);
    width: 84px; height: 84px; margin: var(--space-2) auto var(--space-5);
    border-radius: 50%;
    background: conic-gradient(var(--color) calc(var(--pct) * 1%), var(--border) 0);
    display: flex; align-items: center; justify-content: center;
    position: relative;
  }
  .hhi-ring::before {
    content: ""; position: absolute; inset: 8px;
    background: var(--surface-1); border-radius: 50%;
  }
  .hhi-ring .inner {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center;
    font: 700 16px/1.1 var(--mono); font-variant-numeric: tabular-nums;
  }
  .hhi-ring .inner::before {
    content: "HHI"; color: var(--text-faint); font: 600 9px/1 var(--mono);
    letter-spacing: .08em; margin-bottom: var(--space-1);
  }
  .hhi-ring::after {
    content: "0 → .50"; position: absolute; left: 50%; top: calc(100% + 4px);
    transform: translateX(-50%); white-space: nowrap;
    color: var(--text-faint); font: 500 9px/1 var(--mono);
  }
  .hhi-card .verdict { font-size: 12px; font-weight: 600; }
  .hhi-card .top2 { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

  /* Anomalies */
  .anomaly-list { display: flex; flex-direction: column; gap: 8px; }
  .anomaly {
    display: flex; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-3); background: var(--card-2); border-radius: var(--radius-sm);
    border-left: 3px solid var(--amber);
  }
  .anomaly.high { border-left-color: var(--red); }
  .anomaly.medium { border-left-color: var(--amber); }
  .anomaly.low { border-left-color: var(--gray); }
  .anomaly .icon { font-size: 16px; line-height: 1; }
  .anomaly .body { min-width: 0; flex: 1; }
  .anomaly .ticker { font-weight: 600; font-family: var(--mono); }
  .anomaly .detail { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
  .empty-state { font-size: 12px; color: var(--text-faint); font-style: italic; padding: 8px 0; }

  /* Movers — horizontal scroll cards */
  .movers-scroll {
    display: flex; gap: 8px; overflow-x: auto;
    margin: 0 -16px; padding: 0 16px 4px;
    scrollbar-width: thin;
  }
  .mover-card {
    flex: 0 0 130px;
    background: var(--card-2);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    border-top: 3px solid var(--gray);
  }
  .mover-card.up { border-top-color: var(--green); }
  .mover-card.down { border-top-color: var(--red); }
  .mover-card .tk { font-family: var(--mono); font-weight: 700; font-size: 13px; }
  .mover-card .nm { font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mover-card .pct { font-size: 18px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
  .mover-card .px { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

  /* Sector Context — vertical sector blocks with top-movers + self position */
  .sector-context { display: flex; flex-direction: column; gap: var(--space-3); }
  .sector-block { background: var(--card-2); border-radius: var(--radius-sm); padding: var(--space-3); }
  .sector-block .theme { font-weight: 700; font-size: 13px; margin-bottom: var(--space-2); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
  .sector-block .theme .in-book { font-size: 10.5px; font-weight: 500; color: var(--text-dim); font-family: var(--mono); }
  .sector-block .movers { display: flex; flex-wrap: wrap; gap: var(--space-2) 12px; font-size: 11.5px; }
  .sector-block .mover-inline { font-family: var(--mono); font-variant-numeric: tabular-nums; }
  .sector-block .mover-inline .nm { color: var(--text-dim); font-family: var(--font); margin-left: 4px; }
  .sector-block .mover-inline .cat { color: var(--text-faint); font-family: var(--font); font-size: 10.5px; margin-left: 4px; }
  .sector-block .self { margin-top: var(--space-2); font-size: 11.5px; padding-top: var(--space-2); border-top: 1px dashed var(--card); color: var(--text-dim); }
  .sector-block .self .tk { font-family: var(--mono); color: var(--text); font-weight: 600; }
  .sector-block .self .rank.lead { color: var(--green); }
  .sector-block .self .rank.lag { color: var(--red); }
  .sector-block .self .attr { font-style: italic; }

  /* Calibration badge */
  .calib-badge {
    display: flex; align-items: center; gap: 12px;
    padding: var(--space-3); background: var(--card-2); border-radius: var(--radius-sm);
  }
  .calib-badge .brier-val {
    font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums;
  }
  .calib-badge .meta { font-size: 12px; color: var(--text-dim); }
  .calib-badge .tier {
    font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px;
    background: var(--card); color: var(--text);
  }
  .tier.excellent { background: color-mix(in srgb, var(--positive) 15%, transparent); color: var(--positive); }
  .tier.good { background: rgba(91,141,239,.15); color: var(--accent); }
  .tier.fair { background: color-mix(in srgb, var(--warning) 15%, transparent); color: var(--warning); }
  .tier.poor { background: color-mix(in srgb, var(--negative) 15%, transparent); color: var(--negative); }

  /* =========================================================
     Drill: holdings table
     ========================================================= */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to right, transparent, var(--card) 80%) 100% 0,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.38), transparent) 100% 0;
    background-repeat: no-repeat;
    background-size: 30px 100%, 13px 100%;
    background-attachment: local, scroll;
  }
  .holdings-table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
    min-width: 720px;
  }
  .holdings-table th, .holdings-table td {
    height: 44px; padding: var(--space-2); text-align: right;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
  }
  .holdings-table th.num, .holdings-table td.num {
    text-align: right; font-family: var(--mono);
    font-feature-settings: "tnum";
  }
  .holdings-table th:first-child, .holdings-table td:first-child,
  .holdings-table th:nth-child(2), .holdings-table td:nth-child(2) { text-align: left; }
  .holdings-table th:first-child, .holdings-table td:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--surface-1);
    box-shadow: none;
  }
  .holdings-table thead th:first-child { z-index: 3; background: var(--surface-2); }
  .holdings-table .name-cell { max-width: 140px; overflow: hidden; text-overflow: ellipsis; color: var(--text-dim); font-size: 11.5px; }
  .holdings-table .spark-cell { padding: 4px 8px; line-height: 0; vertical-align: middle; min-width: 60px; }
  .holdings-table .spark { display: inline-block; vertical-align: middle; }
  .holdings-table .spark.spark-up   { color: var(--green); }
  .holdings-table .spark.spark-down { color: var(--red); }
  .holdings-table .spark.spark-flat { color: var(--text-faint); }
  .holdings-table .spark.muted-spark { color: var(--text-faint); }

  /* Watch Levels (今日触发位) */
  .watch-levels { display: flex; flex-direction: column; }
  .wl-row { display: grid; grid-template-columns: 50px 1fr auto auto auto; gap: 8px;
    align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--border);
    font-size: 12.5px; font-variant-numeric: tabular-nums; }
  .wl-row:last-child { border-bottom: none; }
  .wl-who { font-weight: 700; color: var(--text); }
  .wl-label { color: var(--text-dim); font-size: 11.5px; }
  .wl-target { color: var(--text); text-align: right; }
  .wl-cur { color: var(--text-dim); font-size: 11.5px; text-align: right; }
  .wl-dist { text-align: right; font-weight: 700; white-space: nowrap; }
  .wl-dist.near { color: var(--red); }
  .wl-dist.mid  { color: var(--amber); }
  .wl-dist.far  { color: var(--text-faint); }
  .wl-cond { grid-template-columns: 50px 1fr; }
  .wl-cond-txt { color: var(--text-dim); font-size: 11.5px; }
  /* Sparkline column is dense; hide it whenever the holdings table sits in a narrow
   * column. The dashboard uses a 3-column grid ≥1024px (each column ≈ 1/3 of the
   * viewport), so Drill only has room for the sparkline once the viewport is wider
   * than ~1440px; wide desktop keeps the 7d shape column. */
  @media (max-width: 1440px) {
    .holdings-table .spark-col, .holdings-table .spark-cell { display: none; }
  }
  .holdings-table .spark-cell svg { width: 56px; height: 18px; }
  .holdings-table .cell-stack { line-height: 1.3; }
  .holdings-table .cell-sub { font-size: 10.5px; opacity: 0.75; }
  .holdings-table thead th {
    position: sticky; top: 0; background: var(--surface-2);
    font-size: 11px; color: var(--text-dim); text-transform: uppercase;
    letter-spacing: 0.05em; cursor: pointer;
    user-select: none; height: 44px;
  }
  .holdings-table thead th:hover { color: var(--text); }
  .holdings-table thead th .arr { color: var(--accent); margin-left: 2px; }
  .holdings-table tbody tr:hover { background: var(--surface-3); }
  .holdings-table tbody tr:hover td:first-child {
    background: var(--surface-3);
    box-shadow: inset 2px 0 var(--accent);
  }
  .holdings-table .ticker { font-family: var(--mono); font-weight: 600; }
  .holdings-table .region-us { color: var(--accent); }
  .holdings-table .region-hk { color: var(--accent-2); }
  .matrix-status {
    display: inline-flex; align-items: center; gap: var(--space-2);
    color: var(--text); font-weight: 600; white-space: nowrap;
  }
  .matrix-status::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--neutral); flex: 0 0 auto;
  }
  .matrix-status.critical::before { background: var(--negative); }
  .matrix-status.elevated::before { background: var(--warning); }
  .matrix-status.positive::before { background: var(--positive); }
  .matrix-status.neutral::before { background: var(--neutral); }

  /* Plan actions */
  .plan-actions { display: flex; flex-direction: column; gap: 8px; }
  .plan-action {
    padding: var(--space-3); background: var(--card-2); border-radius: var(--radius-sm);
    display: grid; grid-template-columns: auto 1fr auto; gap: 8px 12px;
    align-items: center;
    font-size: 13px;
  }
  .plan-action .date { font-size: 11px; color: var(--text-faint); font-family: var(--mono); }
  .plan-action .tk { font-family: var(--mono); font-weight: 600; }
  .plan-action .meta { font-size: 11px; color: var(--text-dim); }
  .plan-action .outcome {
    font-size: 11px; padding: 3px 8px; border-radius: 999px; font-weight: 600;
  }
  .outcome.win { background: color-mix(in srgb, var(--positive) 15%, transparent); color: var(--positive); }
  .outcome.loss { background: color-mix(in srgb, var(--negative) 15%, transparent); color: var(--negative); }
  .outcome.pending { background: rgba(107,118,145,.15); color: var(--gray); }
  .outcome.flat { background: color-mix(in srgb, var(--warning) 15%, transparent); color: var(--warning); }
  /* Bucket historical win-rate badge (from calibration.per_bucket) */
  .bucket-wr {
    display: inline-block; margin-left: 8px; padding: 2px 8px;
    border-radius: 6px; font-size: 10px; font-family: var(--mono);
    font-weight: 600; vertical-align: middle; white-space: nowrap;
  }
  .bucket-wr .wr-n { font-weight: 400; opacity: .55; font-size: 9px; margin-left: 2px; }
  .bucket-wr.wr-bad { background: color-mix(in srgb, var(--negative) 15%, transparent); color: var(--negative); }
  .bucket-wr.wr-mid { background: color-mix(in srgb, var(--warning) 15%, transparent); color: var(--warning); }
  .bucket-wr.wr-ok  { background: color-mix(in srgb, var(--positive) 15%, transparent); color: var(--positive); }
  .bucket-wr.wr-lown { opacity: .6; }

  /* driven_by chip — which data source drove the call (color encodes edge) */
  .drv-chip {
    display: inline-block; margin-left: 8px; padding: 2px 8px;
    border-radius: 6px; font-size: 10px; font-weight: 600;
    vertical-align: middle; white-space: nowrap;
  }
  .drv-chip.drv-catalyst   { background: color-mix(in srgb, var(--positive) 15%, transparent); color: var(--positive); }
  .drv-chip.drv-technical  { background: rgba(148,163,184,.18); color: var(--muted); }
  .drv-chip.drv-sentiment  { background: color-mix(in srgb, var(--warning) 15%, transparent); color: var(--warning); }
  .drv-chip.drv-influencer { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
  .drv-chip.drv-macro      { background: rgba(96,165,250,.15); color: #60a5fa; }
  .drv-chip.drv-peer       { background: rgba(45,212,191,.15); color: #2dd4bf; }
  @media (max-width: 600px) {
    .drv-chip { font-size: 9px; padding: 1px 5px; margin-left: 4px; }
  }

  /* ── LLM narrative cards (behavioral review / bear cases / hidden concentration) ── */
  .llm-card { border-left: 3px solid rgba(167,139,250,.55); }
  .llm-tag {
    text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 11px;
    color: var(--accent);
  }
  .llm-src { margin-top: var(--space-3); font-size: 10px; color: var(--text-faint); font-family: var(--mono); }
  /* behavioral review */
  .br-verdict {
    font-size: 15px; font-weight: 700; line-height: 1.45; margin: 2px 0 12px;
    color: var(--text);
  }
  .br-point {
    display: flex; gap: 8px; align-items: flex-start; padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2); border-radius: var(--radius-sm); background: var(--card-2);
    font-size: 13px; line-height: 1.5;
  }
  .br-point .br-icon { flex: 0 0 auto; font-size: 12px; margin-top: 1px; }
  .br-point.br-edge { border-left: 3px solid var(--green); }
  .br-point.br-bias { border-left: 3px solid var(--amber); }
  .br-point.br-warn { border-left: 3px solid var(--red); }
  /* bear cases (pre-mortem) */
  .bear-case {
    padding: var(--space-3); margin-bottom: 8px; border-radius: var(--radius-sm);
    background: var(--card-2); border-left: 3px solid color-mix(in srgb, var(--negative) 50%, transparent);
  }
  .bear-tk { font-weight: 700; font-family: var(--mono); font-size: 14px; margin-bottom: 4px; }
  .bear-thesis { font-size: 13px; line-height: 1.5; margin-bottom: 8px; color: var(--text); }
  .bear-meta { font-size: 12px; line-height: 1.45; color: var(--text-dim); margin-top: 4px; }
  .bear-lbl {
    display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px;
    border-radius: 5px; margin-right: 8px; vertical-align: middle;
  }
  .bear-lbl.bl-fal   { background: color-mix(in srgb, var(--positive) 15%, transparent); color: var(--positive); }
  .bear-lbl.bl-watch { background: rgba(96,165,250,.15); color: #60a5fa; }
  /* hidden concentration */
  .hc-headline { font-size: 14px; font-weight: 600; line-height: 1.45; margin-bottom: 12px; }
  .hc-bar-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
  .hc-factor { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--accent); max-width: 40%; }
  .hc-bar { flex: 1 1 auto; height: 10px; background: var(--card-2); border-radius: 5px; overflow: hidden; }
  .hc-bar-fill {
    height: 100%; border-radius: 5px;
    background: linear-gradient(90deg, rgba(124,140,242,.7), color-mix(in srgb, var(--negative) 80%, transparent));
  }
  .hc-pct { flex: 0 0 auto; font-family: var(--mono); font-weight: 700; font-size: 14px; }
  .hc-detail { font-size: 12px; line-height: 1.55; color: var(--text-dim); }
  @media (max-width: 600px) {
    .br-verdict { font-size: 14px; }
    .br-point, .bear-thesis { font-size: 12.5px; }
    .hc-factor { max-width: 36%; font-size: 11px; }
  }

  /* LLM status banner — intraday one-liner, sticky top across tabs */
  .status-banner {
    display: flex; align-items: center; gap: var(--space-3);
    margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4);
    background: var(--accent-soft);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: var(--radius-sm);
    font-size: 13.5px; line-height: 1.45;
  }
  .status-banner .sb-pulse {
    flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent);
  }
  .status-banner .sb-text { flex: 1 1 auto; font-weight: 500; color: var(--text); }
  .status-banner .sb-time { flex: 0 0 auto; font-size: 10px; color: var(--text-faint); font-family: var(--mono); white-space: nowrap; }
  .status-banner.is-pending { visibility: hidden; }

  /* ── Desk rail — collapsed one-line pulse on detail tabs ── */
  .desk-rail {
    display: block; min-height: 0; margin-bottom: 18px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface-1);
  }
  .desk-rail.is-overview { display: none; }
  .desk-rail-toggle {
    width: 100%; min-width: 0; min-height: 38px; padding: 7px 11px;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center; gap: 10px;
    appearance: none; border: 0; background: transparent; color: var(--text);
    font: inherit; text-align: left; cursor: pointer;
  }
  .desk-rail-toggle:focus-visible {
    outline: 2px solid var(--focus); outline-offset: -2px;
  }
  .dr-toggle-label {
    color: var(--text-tertiary); font: 700 9.5px/1 var(--mono);
    letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  }
  .dr-compact {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--text-secondary); font: 650 11px/1.3 var(--mono);
    font-variant-numeric: tabular-nums;
  }
  .dr-chevron {
    width: 7px; height: 7px; border-right: 1.5px solid var(--text-tertiary);
    border-bottom: 1.5px solid var(--text-tertiary);
    transform: translateY(-2px) rotate(45deg); transition: transform .15s ease;
  }
  .desk-rail-toggle[aria-expanded="true"] .dr-chevron {
    transform: translateY(2px) rotate(225deg);
  }
  .desk-rail-expanded {
    display: flex; align-items: stretch; gap: 10px;
    padding: 0 10px 10px; border-top: 1px solid var(--border);
  }
  .desk-rail-expanded[hidden] { display: none; }
  .desk-rail .dr-narrative {
    margin: 10px 0 0; flex: 1 1 300px; min-width: 0;
  }
  .dr-kpis {
    display: flex; align-items: stretch; flex: 0 0 auto;
    margin-top: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface-1); overflow: visible;
  }
  .dr-kpi {
    display: flex; flex-direction: column; justify-content: center; gap: 2px;
    min-width: 0; min-height: 48px; padding: 7px 13px;
    border-left: 1px solid var(--border);
  }
  .dr-kpi:first-child { border-left: none; }
  .dr-k {
    color: var(--text-tertiary); font-size: 9px; font-weight: 600;
    letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  }
  .dr-v {
    min-width: 0; color: var(--text); font: 700 13.5px/1.2 var(--mono);
    font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
  }
  @media (max-width: 1023px) {
    .desk-rail { margin-bottom: 0; }
    .desk-rail-expanded {
      flex-direction: column; align-items: stretch; gap: 8px;
    }
    .desk-rail .dr-narrative { flex: none; margin-top: 10px; }
    .dr-kpis {
      display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px; margin-top: 0; border: 0; background: transparent;
    }
    .dr-kpi {
      border: 1px solid var(--border); border-radius: var(--radius-sm);
      background: var(--surface-1); padding: 7px 9px;
    }
  }
  @media (max-width: 600px) {
    .dr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dr-kpi:last-child { grid-column: 1 / -1; }
  }
  /* mover attribution note */
  .mover-card.has-note { min-height: auto; }
  .mover-note {
    margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border);
    font-size: 10.5px; line-height: 1.4; color: var(--text-dim);
    white-space: normal; max-width: 220px;
  }
  @media (max-width: 600px) {
    .status-banner { font-size: 12.5px; padding: 9px 11px; gap: 8px; }
    .status-banner .sb-time { display: none; }
    .mover-note { max-width: 160px; font-size: 10px; }
  }

  /* Plan timeline (Reflect) — fuller decision cards: plan + rationale + outcome */
  .plan-timeline { display: flex; flex-direction: column; gap: var(--space-3); }
  .pt-row {
    padding: 12px; background: var(--card-2); border-radius: var(--radius-sm);
    border-left: 3px solid var(--border);
    display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-2) 12px;
    align-items: start; font-size: 13px;
  }
  .pt-row.outcome-win { border-left-color: var(--green); }
  .pt-row.outcome-loss { border-left-color: var(--red); }
  .pt-row.outcome-pending { border-left-color: var(--gray); }
  .pt-row .pt-head {
    display: flex; flex-direction: column; gap: 2px; min-width: 78px;
  }
  .pt-row .pt-date { font-size: 11px; color: var(--text-faint); font-family: var(--mono); }
  .pt-row .pt-ticker { font-family: var(--mono); font-weight: 700; font-size: 14px; }
  .pt-row .pt-region { font-size: 10px; color: var(--text-faint); }
  .pt-row .pt-body { min-width: 0; }
  .pt-row .pt-action {
    font-weight: 600; color: var(--text);
  }
  .pt-row .pt-trigger {
    font-size: 11px; color: var(--text-dim); margin-top: 2px;
    font-family: var(--mono);
  }
  .pt-row .pt-rationale {
    font-size: 12px; color: var(--text-dim); margin-top: var(--space-2);
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
  .pt-row .pt-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
  .pt-row .pt-conf {
    font-size: 11px; padding: 2px 8px; border-radius: 999px;
    background: rgba(91,141,239,.12); color: var(--accent); font-weight: 600;
    font-family: var(--mono);
  }
  .pt-row .pt-followed-true { color: var(--green); font-size: 10px; font-weight: 600; }
  .pt-row .pt-followed-false { color: var(--text-faint); font-size: 10px; }
  .pt-row .pt-pnl { font-size: 11px; font-family: var(--mono); font-weight: 600; }
  .pt-row .pt-pnl.pos { color: var(--green); }
  .pt-row .pt-pnl.neg { color: var(--red); }

  /* Trigger-type breakdown bars (extends Plan Review card) */
  .trig-block { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--border); }
  .trig-block .trig-title {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-dim); margin-bottom: var(--space-3); font-weight: 600;
    overflow-wrap: anywhere; word-break: break-word;
  }
  /* Mobile: 2-row stacked (name + stat above bar). Desktop: 3-col single row. */
  .trig-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "name stat" "bar bar";
    column-gap: var(--space-3); row-gap: 4px;
    align-items: center; margin-bottom: var(--space-3); font-size: 12px;
  }
  .trig-row > * { min-width: 0; }  /* let grid children shrink instead of overflowing */
  .trig-row .trig-name { grid-area: name; font-family: var(--mono); color: var(--text);
    overflow-wrap: anywhere; }
  .trig-row .trig-bar {
    grid-area: bar;
    height: 12px; background: var(--card-2); border-radius: 4px; overflow: hidden;
    display: flex;
  }
  .trig-row .trig-bar .seg-win { background: var(--green); }
  .trig-row .trig-bar .seg-loss { background: var(--red); }
  .trig-row .trig-bar .seg-pending { background: var(--gray); opacity: 0.5; }
  .trig-row .trig-stat {
    grid-area: stat; font-family: var(--mono); font-size: 11px;
    text-align: right; color: var(--text-dim);
  }
  .trig-row .trig-stat.alert { color: var(--red); font-weight: 700; }
  @media (min-width: 640px) {
    .trig-row {
      grid-template-columns: 110px 1fr 130px;
      grid-template-areas: "name bar stat";
      row-gap: 0;
    }
    .trig-row .trig-bar { height: 14px; }
  }

  /* Drawdown Recovery (Reflect) */
  /* minmax(0, 1fr) prevents wide stat cells from forcing the card past its column.
   * On desktop the dashboard runs a 3-col layout (≥1024px) so the Reflect column
   * is only ~420px wide — too narrow for a 2-col DD grid; collapse back to single. */
  .dd-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  @media (min-width: 768px) and (max-width: 1023px) {
    .dd-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  }
  .dd-region {
    padding: var(--space-4); background: var(--card-2); border-radius: var(--radius-sm);
    border-left: 3px solid var(--border);
  }
  .dd-region.recovery-poor { border-left-color: var(--red); }
  .dd-region.recovery-mid  { border-left-color: var(--amber); }
  .dd-region.recovery-good { border-left-color: var(--green); }
  .dd-region .dd-region-name {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-dim); font-weight: 600; margin-bottom: 8px;
  }
  .dd-region .dd-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: var(--space-3); }
  .dd-region .dd-cell .lbl { font-size: 10px; color: var(--text-faint); }
  .dd-region .dd-cell .val { font-size: 18px; font-weight: 700; font-family: var(--mono); margin-top: 2px; }
  .dd-region .dd-cell .val.neg { color: var(--red); }
  .dd-region .dd-cell .val.pos { color: var(--green); }
  .dd-region .dd-bar {
    height: 8px; background: var(--card); border-radius: 4px; overflow: hidden;
    border: 1px solid var(--border);
  }
  .dd-region .dd-bar-fill { height: 100%; transition: width 0.4s; }
  .dd-region .dd-bar-fill.poor { background: var(--red); }
  .dd-region .dd-bar-fill.mid  { background: var(--amber); }
  .dd-region .dd-bar-fill.good { background: var(--green); }
  .dd-region .dd-status {
    margin-top: var(--space-2); font-size: 11px; color: var(--text-dim);
  }

  /* 历史净值极值 (peak / trough / max drawdown) */
  .ext-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; }
  @media (min-width: 720px) { .ext-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
  .ext-region {
    background: var(--card-2, var(--card)); border: 1px solid var(--border);
    border-left: 3px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4);
  }
  .ext-region.is-low { border-left-color: var(--red); }
  .ext-region .ext-head {
    display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-3);
  }
  .ext-region .ext-name { font-size: 13px; font-weight: 700; letter-spacing: .04em; }
  .ext-region .ext-flag { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
  .ext-region .ext-flag.low { background: rgba(229,72,77,.16); color: var(--red); }
  .ext-region .ext-flag.ok  { background: rgba(48,164,108,.16); color: var(--green); }
  .ext-row { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; }
  .ext-row .k { font-size: 11px; color: var(--text-faint); }
  .ext-row .v { font-size: 15px; font-weight: 700; font-family: var(--mono); }
  .ext-row .v.neg { color: var(--red); }
  .ext-row .v small { font-size: 10px; color: var(--text-faint); font-weight: 500; margin-left: 5px; font-family: inherit; }
  .ext-region .ext-dd {
    margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border);
  }
  .ext-region .ext-dd .v { font-size: 20px; color: var(--red); }
  .ext-region .ext-dd .span { font-size: 10px; color: var(--text-dim); margin-top: 3px; }
  /* 回撤恢复条 (并入历史利润极值卡) */
  .ext-region .ext-dd .dd-bar {
    height: 8px; background: var(--card); border-radius: 4px; overflow: hidden;
    border: 1px solid var(--border); margin-top: var(--space-2);
  }
  .ext-region .ext-dd .dd-bar-fill { height: 100%; transition: width 0.4s; }
  .ext-region .ext-dd .dd-bar-fill.poor { background: var(--red); }
  .ext-region .ext-dd .dd-bar-fill.mid  { background: var(--amber); }
  .ext-region .ext-dd .dd-bar-fill.good { background: var(--green); }
  .ext-region .ext-dd .v .rec-good { color: var(--green); }
  .ext-region .ext-dd .v .rec-mid  { color: var(--amber); }
  .ext-region .ext-dd .v .rec-poor { color: var(--red); }

  /* 8d Return Heatmap (Drill) */
  .ret-heatmap {
    display: grid; gap: var(--space-2);
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  }
  .ret-cell {
    padding: 9px 8px; border-radius: var(--radius-sm);
    display: flex; flex-direction: column; gap: 2px;
    min-height: 64px; justify-content: center; align-items: center;
    text-align: center;
    border: 1px solid var(--border);
    transition: transform 0.15s;
  }
  .ret-cell .rc-spark { line-height: 0; width: 100%; margin: 1px 0 2px; }
  .ret-cell .rc-spark svg { width: 100%; height: 22px; display: block; opacity: 0.92; }
  .ret-cell:hover { transform: translateY(-1px); }
  .ret-cell .rc-ticker {
    font-family: var(--mono); font-weight: 700; font-size: 13px;
    color: var(--text);
  }
  .ret-cell .rc-ret {
    font-family: var(--mono); font-weight: 600; font-size: 12px;
  }
  .ret-cell .rc-meta { font-size: 9px; color: var(--text-faint); }

  /* Weight × Confidence scatter (Drill) */
  .wc-chart-box { width: 100%; min-height: 300px; height: 300px; }
  @media (min-width: 1024px) {
    .wc-chart-box { min-height: 380px; height: 380px; }
  }
  .wc-legend {
    display: flex; flex-wrap: wrap; gap: var(--space-3) 18px; font-size: 11px;
    color: var(--text-dim); margin-top: 8px;
  }
  .wc-legend span::before {
    content: ""; display: inline-block; width: 9px; height: 9px;
    border-radius: 50%; margin-right: 5px; vertical-align: middle;
  }
  .wc-legend .lg-high::before { background: var(--negative); }
  .wc-legend .lg-conv::before { background: var(--accent); }
  .wc-legend .lg-low::before { background: var(--warning); }
  .wc-legend .lg-com::before { background: var(--positive); }
  .wc-legend .lg-nod::before { background: var(--neutral); }

  /* Shadow portfolio policy simulation (Drill) */
  .shadow-toggle {
    width: 100%; margin: 0; padding: 0; border: 0; background: transparent;
    color: inherit; text-align: left; cursor: pointer;
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: 8px 12px;
    font: inherit; -webkit-tap-highlight-color: transparent;
  }
  .shadow-toggle:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 4px;
  }
  .shadow-toggle-title {
    color: var(--text-dim); font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  .shadow-toggle::after {
    content: "›"; grid-column: 2; grid-row: 1 / span 2;
    color: var(--text-faint); font-size: 18px;
    transform: rotate(90deg); transition: transform .15s;
  }
  .shadow-toggle[aria-expanded="true"]::after { transform: rotate(-90deg); }
  .shadow-summary {
    grid-column: 1; color: var(--text); font: 650 11px/1.5 var(--mono);
    overflow-wrap: anywhere;
  }
  .shadow-expanded { margin-top: 12px; }
  .shadow-sim-label {
    display: inline-flex; align-items: center; gap: var(--space-2);
    margin: 0 0 var(--space-3); padding: 4px 12px;
    border: 1px solid rgba(229,72,77,.55); border-radius: 999px;
    background: rgba(229,72,77,.14); color: var(--red);
    font-size: 12px; font-weight: 800; letter-spacing: .08em;
  }
  .shadow-estimand {
    margin: 0 0 12px; padding: var(--space-3);
    border-left: 3px solid var(--amber); border-radius: 0 7px 7px 0;
    background: color-mix(in srgb, var(--warning) 7%, transparent); color: var(--text-dim);
    font-size: 12px; line-height: 1.55;
  }
  .shadow-diff-grid, .shadow-fill-grid {
    display: grid; gap: 8px; margin: var(--space-3) 0;
  }
  .shadow-diff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shadow-fill-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .shadow-stat {
    min-width: 0; padding: var(--space-3); border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: var(--card-2);
  }
  .shadow-stat .lbl {
    color: var(--text-faint); font-size: 10px; line-height: 1.3;
    overflow-wrap: anywhere;
  }
  .shadow-stat .val {
    margin-top: 4px; color: var(--text); font: 700 18px var(--mono);
  }
  .shadow-stat .val.pos { color: var(--green); }
  .shadow-stat .val.neg { color: var(--red); }
  .shadow-stat.skipped {
    border-color: rgba(229,72,77,.42); background: rgba(229,72,77,.08);
  }
  .shadow-chart-unit {
    margin-top: var(--space-3); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 9px 8px 3px;
  }
  .shadow-chart-title {
    padding-left: 4px; color: var(--text); font: 700 12px var(--mono);
  }
  .shadow-chart-box { width: 100%; height: 235px; min-height: 235px; }
  .shadow-constraint-note {
    margin: 8px 0; color: var(--red); font-size: 11px;
    font-weight: 650; line-height: 1.45;
  }
  .shadow-coverage-note {
    margin: 8px 0; color: var(--amber); font-size: 11px;
    font-weight: 700; line-height: 1.45;
  }
  .shadow-limitations {
    margin-top: var(--space-3); padding-top: 9px; border-top: 1px dashed var(--border);
    color: var(--text-faint); font-size: 10px; line-height: 1.55;
  }
  @media (max-width: 600px) {
    .shadow-fill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* =========================================================
     Reflect: charts
     ========================================================= */
  .chart-box {
    width: 100%; min-height: 280px; height: 280px;
  }
  .chart-box, .wc-chart-box, .shadow-chart-box {
    contain: layout;
  }
  @media (min-width: 1024px) {
    .chart-box { min-height: 360px; height: 360px; }
  }
  .chart-hint {
    font-size: 11px; color: var(--text-faint);
    margin: -4px 0 8px; line-height: 1.4;
  }
  /* Says why a number is absent, in two lines. Not a post-mortem: the audit trail
     for why the money view came down belongs in the repo, not on kcn's dashboard. */
  .retired-note {
    font-size: 12px; line-height: 1.6; color: var(--text-dim);
    border: 1px dashed var(--border); border-radius: var(--radius-sm);
    padding: 11px 13px; margin: 4px 0 12px;
  }
  .retired-note p { margin: 0; }
  .revision-note {
    font-size: 11px; line-height: 1.55; color: var(--text-dim);
    border-left: 2px solid var(--accent); background: var(--bg-soft, transparent);
    padding: var(--space-2) var(--space-3); margin: 0 0 12px; border-radius: 0 6px 6px 0;
  }
  .revision-note b { color: var(--text); }
  .retired-note b { color: var(--text); }
  .audit-summary, .timing-zones {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px; margin: var(--space-3) 0;
  }
  .audit-stat, .timing-zone {
    background: var(--card-2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: var(--space-3); min-width: 0;
  }
  .audit-stat .n, .timing-zone .median {
    font: 700 18px var(--mono); color: var(--text);
  }
  .sect-divider {
    display: flex; align-items: center; gap: var(--space-3);
    font: 700 12px var(--mono); letter-spacing: 0.04em;
    color: var(--text-dim); margin: 2px 2px 4px; padding-top: 4px;
  }
  .sect-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
  .audit-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
  .audit-row {
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--card-2); overflow: hidden;
  }
  .audit-row summary {
    cursor: pointer; list-style: none; display: grid;
    grid-template-columns: 86px minmax(0,1fr) auto; gap: 8px;
    align-items: center; padding: var(--space-3); font-size: 12px;
  }
  .audit-row summary::-webkit-details-marker { display: none; }
  .audit-row .audit-title { overflow-wrap: anywhere; }
  .audit-state { font: 600 10px var(--mono); color: var(--text-dim); }
  .audit-detail {
    padding: 0 12px 12px; border-top: 1px solid var(--border);
    font-size: 11px; color: var(--text-dim); line-height: 1.5;
  }
  .audit-detail-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
    gap: 8px; margin-top: 9px;
  }
  .audit-detail-grid > div {
    min-width: 0; padding: 8px; background: var(--card);
    border-radius: 6px; overflow-wrap: anywhere;
  }
  .audit-path { width: 100%; height: 54px; margin-top: var(--space-2); display: block; }
  .timing-events { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 8px; }
  .timing-events table { min-width: 560px; width: 100%; font-size: 10px; }
  @media (max-width: 600px) {
    .audit-row summary { grid-template-columns: 72px minmax(0,1fr); }
    .audit-row summary .audit-state { grid-column: 2; }
  }

  /* KPI strip — broker-style summary cards (Reflect tab top row) */
  .kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0;
    border-top: 1px solid var(--border-subtle);
  }
  .kpi-cell {
    background: var(--surface-1);
    border-radius: 0;
    padding: var(--space-3);
    text-align: left;
    border-right: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    min-height: 82px;
  }
  .kpi-cell .lbl {
    font-size: 11px; color: var(--text-dim);
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  .kpi-cell .val {
    font-size: 20px; font-weight: 700;
    margin: var(--space-1) 0 0;
    font-variant-numeric: tabular-nums;
  }
  .kpi-cell .sub {
    font-size: 12px;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
  }

  /* Plan review per-bucket horizontal bars */
  .bucket-row {
    display: grid;
    grid-template-columns: 130px 1fr 90px;
    gap: var(--space-3); align-items: center;
    padding: 8px 0;
    font-size: 12px;
    border-bottom: 1px dashed var(--border);
  }
  .bucket-row:last-child { border-bottom: none; }
  .bucket-row .name { font-weight: 600; color: var(--text); font-family: var(--mono); }
  .bucket-row .bar-wrap {
    background: var(--card-2);
    border-radius: 999px;
    height: 14px;
    position: relative;
    overflow: hidden;
  }
  .bucket-row .bar-fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: var(--accent);
    transition: width .3s ease;
  }
  .bucket-row .bar-fill.win { background: var(--green); }
  .bucket-row .bar-fill.followed { background: var(--accent); }
  /* Win-rate fill — same 45/60 threshold color language as the action badges */
  .bucket-row .bar-fill.wr-bad { background: var(--red); }
  .bucket-row .bar-fill.wr-mid { background: var(--amber); }
  .bucket-row .bar-fill.wr-ok  { background: var(--green); }
  .bucket-row .bar-fill.lown   { opacity: .5; }
  .bucket-row .stat .muted { color: var(--text-faint); font-weight: 400; }
  .bucket-row .stat {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text-dim);
    font-size: 11px;
  }
  .bucket-row .stat .n { color: var(--text); font-weight: 600; }

  /* Footer */
  footer {
    padding: 24px 16px 32px;
    text-align: center; font-size: 11px; color: var(--text-faint);
  }
  footer a { color: var(--text-dim); }
  .build-status {
    display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
    justify-content: center; margin: 0 auto 12px; padding: 5px 12px;
    border: 1px solid var(--border, #2a2f3a); border-radius: 999px;
    font-size: 11px; color: var(--text-dim); cursor: help; max-width: 92%;
  }
  .build-status .bs-label { color: var(--text); }
  .build-status .bs-gen { color: var(--text-faint); font-family: var(--mono); }

  /* Utility */
  .mono { font-family: var(--mono); }
  .right { text-align: right; }
  .muted { color: var(--text-dim); }
  .nowrap { white-space: nowrap; }
  .warn-text { color: var(--warning); }

  /* =========================================================
     Overview-first command center
     ========================================================= */
  @media (min-width: 1024px) {
    .panel.active[data-panel="hero"] { column-count: auto; }
    .panel.active[data-panel="hero"] > .overview-command { column-span: all; }
  }
  .overview-command {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px; align-items: stretch;
  }
  .overview-command > * { min-width: 0; margin: 0; }
  .overview-card-kicker {
    color: var(--text-tertiary); font: 700 9.5px/1.2 var(--mono);
    letter-spacing: .09em; text-transform: uppercase;
  }
  .overview-book {
    grid-column: span 5; min-height: 226px; overflow: hidden;
    background:
      linear-gradient(140deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 55%),
      var(--surface-1);
  }
  .overview-book-primary {
    margin-top: 8px; color: var(--text); font: 760 clamp(32px, 3.2vw, 48px)/1 var(--mono);
    letter-spacing: -.055em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
  }
  .overview-book-secondary {
    margin-top: 7px; color: var(--text-secondary); font: 650 clamp(16px, 1.7vw, 22px)/1.2 var(--mono);
    font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
  }
  .overview-fx {
    margin-top: 5px; color: var(--text-tertiary); font: 500 10px/1.3 var(--mono);
    overflow-wrap: anywhere;
  }
  .overview-fx-mirror { display: none; }
  .overview-leg-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0; margin: 16px -16px -16px; border-top: 1px solid var(--border-subtle);
  }
  .overview-leg {
    min-width: 0; padding: 11px 16px; border-right: 1px solid var(--border-subtle);
  }
  .overview-leg:last-child { border-right: 0; }
  .overview-leg .lbl,
  .overview-today-cell .lbl {
    color: var(--text-tertiary); font-size: 9.5px; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase;
  }
  .overview-leg .val {
    margin-top: 2px; color: var(--text); font: 700 clamp(15px, 1.5vw, 20px)/1.25 var(--mono);
    font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
  }
  .overview-leg .sub {
    margin-top: 1px; font: 600 10.5px/1.35 var(--mono);
    font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
  }
  .overview-today {
    grid-column: span 4; min-height: 226px;
    display: flex; flex-direction: column;
  }
  .overview-today-grid {
    flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch; margin-top: 14px; border-top: 1px solid var(--border-subtle);
  }
  .overview-today-cell {
    min-width: 0; padding: 20px 12px 12px 0; border-right: 1px solid var(--border-subtle);
  }
  .overview-today-cell + .overview-today-cell { padding-left: 14px; border-right: 0; }
  .overview-today-cell .val {
    margin-top: 9px; font: 750 clamp(19px, 2vw, 27px)/1.05 var(--mono);
    letter-spacing: -.04em; font-variant-numeric: tabular-nums;
    /* keep the signed currency figure on one line — never break mid-number */
    white-space: nowrap;
  }
  .overview-today-cell .pct {
    margin-top: 6px; font: 650 12px/1.3 var(--mono);
    font-variant-numeric: tabular-nums;
  }
  .overview-discipline {
    grid-column: span 3; min-height: 226px;
    display: grid; grid-template-rows: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--border-subtle); border-radius: 12px;
    background: var(--surface-1); overflow: hidden;
  }
  .overview-discipline-cell {
    min-width: 0; padding: 15px; border-bottom: 1px solid var(--border-subtle);
  }
  .overview-discipline-cell:last-child { border-bottom: 0; }
  .overview-discipline-value {
    margin-top: 7px; color: var(--text); font: 750 clamp(22px, 2.4vw, 32px)/1 var(--mono);
    letter-spacing: -.035em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
  }
  .overview-discipline-meta {
    margin-top: 5px; color: var(--text-tertiary); font: 500 10px/1.35 var(--mono);
    overflow-wrap: anywhere;
  }
  .overview-equity {
    grid-column: span 8; min-height: 480px; padding: 18px 18px 12px;
  }
  .overview-equity .card-head { align-items: flex-start; }
  .overview-equity .card-head h3 {
    margin: 5px 0 0; color: var(--text); font-size: 17px;
    letter-spacing: -.01em; text-transform: none;
  }
  .overview-equity-hint { max-width: 92%; margin: -3px 0 3px; }
  .overview-equity-chart { min-height: 390px; height: 390px; }
  .overview-verdict {
    grid-column: span 4; min-height: 480px; padding: 18px;
    border-top: 2px solid var(--warning);
  }
  .overview-verdict-head,
  .overview-gates-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
  }
  .overview-verdict-head h3 {
    margin: 5px 0 0; color: var(--text); font-size: 17px;
    letter-spacing: -.01em; text-transform: uppercase;
  }
  .overview-jump,
  .overview-strip-link {
    appearance: none; border: 0; background: transparent; color: var(--accent);
    font: 650 10px/1.2 var(--mono); cursor: pointer;
  }
  .overview-jump { padding: 6px 0 6px 8px; white-space: nowrap; }
  .overview-jump:focus-visible,
  .overview-strip-link:focus-visible {
    outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px;
  }
  .overview-status {
    margin: 14px 0 12px; padding: 10px 11px; font-size: 12.5px;
  }
  .overview-verdict .today-highlights {
    display: grid; grid-template-columns: 1fr; gap: 6px;
    margin: 0 0 14px; min-height: 0;
  }
  .overview-verdict .hl-chip {
    min-width: 0; padding: 7px 9px; border-radius: var(--radius-sm);
    font-size: 11.5px; overflow-wrap: anywhere;
  }
  .overview-gates {
    padding-top: 12px; border-top: 1px solid var(--border-subtle);
  }
  .overview-gates-head {
    color: var(--text-secondary); font: 700 10px/1.2 var(--mono);
    letter-spacing: .06em; text-transform: uppercase;
  }
  .overview-gates-directive {
    display: -webkit-box; margin-top: 7px; overflow: hidden;
    -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    color: var(--text-tertiary); font-size: 10.5px; line-height: 1.45;
  }
  .overview-gates .risk-alerts { margin-top: 8px; gap: 6px; }
  .overview-gates .risk-alert {
    align-items: flex-start; padding: 7px 9px; font-size: 10.5px; line-height: 1.35;
  }
  .overview-strip {
    grid-column: 1 / -1; min-width: 0;
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, .8fr) minmax(0, .8fr);
    border: 1px solid var(--border-subtle); border-radius: 12px;
    background: var(--surface-1); overflow: hidden;
  }
  .overview-strip-cell {
    position: relative; min-width: 0; min-height: 122px; padding: 12px 14px;
    border-right: 1px solid var(--border-subtle);
  }
  .overview-strip-cell:last-child { border-right: 0; }
  .overview-strip-link {
    width: 100%; padding: 0 0 9px; display: flex;
    align-items: center; justify-content: space-between; gap: 8px;
    color: var(--text-secondary); text-align: left;
    letter-spacing: .06em; text-transform: uppercase;
  }
  .overview-strip-link span:last-child { color: var(--accent); letter-spacing: 0; text-transform: none; }
  .overview-asof {
    position: absolute; top: 31px; left: 14px; font: 500 9px/1.2 var(--mono);
  }
  .overview-market .market-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)); min-height: 58px; margin-top: 9px;
  }
  .overview-market .market-cell { min-height: 58px; padding: 7px 9px; }
  .overview-market .market-cell .val { font-size: 14px; }
  .overview-market .market-cell .pct { font-size: 10.5px; }
  .overview-market .market-cell .src { display: none; }
  .overview-market .rs-row {
    min-height: 0; margin-top: 5px; font-size: 9.5px; white-space: normal;
    overflow-wrap: anywhere;
  }
  .overview-mover-summary {
    color: var(--text); font: 750 clamp(19px, 2vw, 27px)/1.15 var(--mono);
    font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
  }
  .overview-mover-summary .tk { display: block; color: var(--text-secondary); font: 700 12px/1.3 var(--mono); }
  .overview-anomaly-count {
    color: var(--warning); font: 760 clamp(25px, 2.6vw, 36px)/1 var(--mono);
    font-variant-numeric: tabular-nums;
  }
  .overview-anomaly-summary {
    margin-top: 6px; color: var(--text-tertiary); font-size: 10.5px;
    line-height: 1.35; overflow-wrap: anywhere;
  }
  .overview-command > .hero-honesty-card { grid-column: span 5; min-height: 220px; }
  .overview-command > .hero-gold-card { grid-column: span 7; min-height: 760px; }

  /* Hero top "今日要点" triage strip */
  .today-highlights {
    display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px;
    margin: 0 0 var(--space-4); min-height: 34px;
  }
  /* Data arrives after the scaffold. Fixed grid rows + floors reserve the same
     geometry, preserving the existing CLS=0 behavior without hiding active data. */
  #guardrail-card { min-height: 560px; }
  .hl-chip {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: 8px 12px; border-radius: 999px;
    font-size: 13px; line-height: 1.3; font-weight: 500;
    background: var(--card-2); border: 1px solid var(--border); color: var(--text);
  }
  .hl-chip .hl-ic { font-size: 13px; }
  .hl-chip.hl-alert { border-color: var(--red); background: color-mix(in srgb, var(--red) 14%, var(--card)); color: var(--red); font-weight: 600; }
  .hl-chip.hl-warn  { border-color: var(--amber); color: var(--amber); }
  .hl-chip.hl-up    { border-color: var(--green); color: var(--green); }
  .hl-chip.hl-down  { border-color: var(--red); color: var(--red); }
  .hl-chip.hl-info  { border-color: var(--accent); color: var(--accent); }

  @media (min-width: 768px) and (max-width: 1023px) {
    .overview-book, .overview-today { grid-column: span 6; }
    .overview-discipline {
      grid-column: 1 / -1; min-height: 112px;
      grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none;
    }
    .overview-discipline-cell { border-right: 1px solid var(--border-subtle); border-bottom: 0; }
    .overview-discipline-cell:last-child { border-right: 0; }
    .overview-equity, .overview-verdict, .overview-strip,
    .overview-command > .hero-honesty-card,
    .overview-command > .hero-gold-card { grid-column: 1 / -1; }
  }
  @media (max-width: 767px) {
    .overview-command { display: flex; flex-direction: column; gap: 12px; }
    .overview-book, .overview-today, .overview-discipline,
    .overview-equity, .overview-verdict, .overview-strip,
    .overview-command > .hero-honesty-card,
    .overview-command > .hero-gold-card { width: 100%; min-width: 0; }
    .overview-book, .overview-today, .overview-discipline { min-height: 0; }
    .overview-equity, .overview-verdict { min-height: 0; }
    .overview-equity-chart { min-height: 300px; height: 300px; }
    .overview-equity-hint { max-width: none; }
    .overview-strip { display: flex; flex-direction: column; }
    .overview-strip-cell {
      min-height: 0; border-right: 0; border-bottom: 1px solid var(--border-subtle);
    }
    .overview-strip-cell:last-child { border-bottom: 0; }
    .overview-market .market-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 9px;
    }
    .overview-market .market-cell:last-child { grid-column: 1 / -1; }
    .overview-command > .hero-gold-card { min-height: 760px; }
  }
  @media (max-width: 420px) {
    .overview-book-primary { font-size: clamp(29px, 10vw, 38px); }
    .overview-book-secondary { font-size: 17px; }
    .overview-leg .val { font-size: 15px; }
    .overview-today-cell .val { font-size: clamp(21px, 7.2vw, 28px); }
    .overview-today-cell { padding-right: 8px; }
    .overview-today-cell + .overview-today-cell { padding-left: 10px; }
  }

  /* =========================================================
     Overflow / truncation hardening
     ========================================================= */
  .panel, .card, .card > *, .status-banner .sb-text,
  .risk-alert > div, .anomaly .detail, .market-cell,
  .kpi-cell, .risk-cell, .lev-cell, .hhi-card,
  .mkt-card, .extremes-grid > *, .macro-row > *,
  .plan-action > *, .catalyst-row > *, .pd-top > *,
  .sd-row summary > *, .dd-region .dd-cell,
  .card [style*="display:flex"] > * {
    min-width: 0;
  }
  .status-banner .sb-text,
  .risk-alert > div, .anomaly .detail, .catalyst-row .detail,
  .plan-action .meta, .peer-div-row, .mkt-stat .v,
  .kpi-cell .val, .kpi-cell .sub, .risk-cell .val,
  .lev-cell .val, .shadow-stat .val, .ext-row .v,
  .sd-row .sd-counts, .sd-body, .pt-row .pt-trigger,
  .dd-region .dd-cell .val {
    overflow-wrap: anywhere;
  }
  .calib-badge, .pd-top { flex-wrap: wrap; }
  .pd-gap { margin-left: 0; }
  .table-wrap {
    width: 100%; max-width: 100%; min-width: 0; padding-bottom: 3px;
    overscroll-behavior-x: contain;
  }
  #holdings-table { min-width: 940px; }
  #holdings-table th:nth-child(6),
  #holdings-table td:nth-child(6) {
    min-width: 112px; padding-left: 12px; padding-right: 16px;
  }
  #decision-matrix-table { min-width: 760px !important; }
  .holdings-table th:last-child,
  .holdings-table td:last-child { padding-right: 14px; }
  .delta-table { min-width: 300px; }
  #gold-dca-card table { max-width: 100%; font-variant-numeric: tabular-nums; }
  @media (max-width: 600px) {
    .wl-row:not(.wl-cond) {
      grid-template-columns: 50px minmax(0, 1fr) auto;
    }
    .wl-row:not(.wl-cond) .wl-cur { grid-column: 2; }
    .wl-row:not(.wl-cond) .wl-dist { grid-column: 3; }
    .pt-row { grid-template-columns: 74px minmax(0, 1fr); }
    .pt-row .pt-side {
      grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start;
      flex-wrap: wrap;
    }
    .bucket-row {
      grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px;
    }
    .bucket-row .bar-wrap { grid-column: 1 / -1; grid-row: 2; }
    .bucket-row .stat { grid-column: 2; grid-row: 1; }
    .catalyst-row { grid-template-columns: 64px minmax(64px, auto) minmax(0, 1fr); }
  }