* { box-sizing: border-box; }
  /* ── Crafted icon system (Canada testing ground 2026-07-24) — monoline SVGs that
     inherit currentColor, so they theme + zh-flip for free. Base + per-slot sizing +
     stance colours. Promote to theme.css when rolled out site-wide. ── */
  .ic-svg{width:1em;height:1em;display:inline-block;vertical-align:-.135em;fill:none;
    stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
  .nav-search .mag .ic-svg{width:15px;height:15px;stroke-width:2}
  .ai-brief-link .ic-svg{width:15px;height:15px;margin-right:1px}
  .cax-hbtn .ic-svg{width:14px;height:14px}
  .cax-row .ic .ic-svg,.cax-pb-ic .ic-svg{width:16px;height:16px}
  .ic-up{color:var(--ink-up, var(--up))} .ic-dn{color:var(--ink-down, var(--down))} .ic-link{color:var(--ink-link, var(--link))}
  .ic-warn{color:var(--ink-warn, var(--warn))} .ic-mut{color:var(--muted)} .ic-violet{color:#8b5cf6}
  .ic-spin{transform-origin:12px 12px;animation:ic-spin 1.1s linear infinite}
  @keyframes ic-spin{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion:reduce){.ic-spin{animation:none}}
  body { background: var(--bg); color: var(--text); font: 14px/1.5 -apple-system,
         "Segoe UI", Roboto, Helvetica, sans-serif; margin: 0; padding: 18px; }
  @media (min-width: 1100px) { body { padding: 26px max(40px, calc((100vw - 1500px) / 2)); } }
  html[data-lang="zh"] body { font-family: "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",-apple-system,sans-serif; }
  a { text-decoration: none; color: var(--ink-link, var(--link)); }
  h1 { font-size: 21px; margin: 0 0 2px; }
  h2 { font-size: 14px; margin: 0 0 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
  .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 15px 17px; margin-bottom: 14px; }
  .muted { color: var(--muted); } .small { font-size: 12px; }
  .row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
  .grid { display: grid; gap: 12px; }
  .navbtn { display:inline-block; padding:5px 11px; border-radius:9px; background:var(--panel2); border:1px solid var(--line); color:var(--text); font-size:13px; font-weight:600; }
  /* hero quad badge */
  .quad { display:inline-flex; align-items:center; gap:9px; padding:7px 15px; border-radius:12px; font-weight:800; font-size:18px; color:#fff; }
  .q-Q1 { background:var(--q1,#2e9e4f); } .q-Q2 { background:var(--q2,#d4a017); }
  .q-Q3 { background:var(--q3,#d04545); } .q-Q4 { background:var(--q4,#3f78d8); }
  .dial { display:inline-flex; flex-direction:column; gap:2px; min-width:120px; }
  .dial b { font-size:19px; } .dial .lbl { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
  .pos { color:var(--ink-up, var(--up)); } .neg { color:var(--ink-down, var(--down)); }
  .chip { display:inline-block; padding:3px 9px; border-radius:9px; font-size:12px; font-weight:600;
          background:var(--panel2); border:1px solid var(--line); }
  .chip.on { background:color-mix(in srgb,var(--up) 16%,transparent); color:var(--ink-up, var(--up)); border-color:color-mix(in srgb,var(--up) 38%,transparent); }
  .chip.off { background:color-mix(in srgb,var(--down) 16%,transparent); color:var(--ink-down, var(--down)); border-color:color-mix(in srgb,var(--down) 38%,transparent); }
  .chip.neutral { color:var(--muted); }
  /* overlay hero */
  .riskbig { font-size:26px; font-weight:800; }
  .risk-on { color:var(--ink-up, var(--up)); } .risk-off { color:var(--ink-down, var(--down)); } .risk-neutral, .risk-unknown { color:var(--muted); }
  .factors { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
  .fct { display:flex; flex-direction:column; gap:1px; padding:6px 10px; border-radius:9px; background:var(--panel2); border:1px solid var(--line); min-width:96px; }
  .fct .fl { font-size:11px; color:var(--muted); } .fct .fv { font-size:13px; font-weight:700; }
  .fct.on { border-left:3px solid var(--up); } .fct.off { border-left:3px solid var(--down); } .fct.neutral { border-left:3px solid var(--muted); }
  /* sector + standout cards */
  .cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:11px; }
  .card { background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:11px 13px; }
  /* mobile: pack the standout cards 2-up so the list doesn't scroll on and on (paired with the
     3-row cap via data-showmore-rows + theme.js). Scoped to the standout grid only — the sector
     .cards grid keeps its own responsive layout. */
  @media (max-width:680px){
    .cards[data-showmore-rows]{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
    .cards[data-showmore-rows] .card{ padding:9px 10px; }
  }
  /* The shared mtf.js paints a .mtf-grid of D/3D/W panels; theme.css forces
     repeat(3,1fr), which overflows the ~260px sector/benchmark cards (the
     "RSI 74 overbought" row spills past the edge). Let the timeframe panels
     stack when the card is narrow and spread out only when there's room. */
  .card .mtf-grid, .mtf-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .card .mtf-card { padding: 8px 10px; min-width: 0; }
  .card svg { max-width: 100%; }
  .lad { display:inline-block; padding:2px 9px; border-radius:10px; font-weight:700; font-size:11.5px;
         background:color-mix(in srgb, var(--c, var(--muted)) 16%, var(--panel)); color:color-mix(in srgb, var(--c, var(--muted)) 82%, var(--text)); }
  .lad.up { --c:var(--up); } .lad.down { --c:var(--down); } .lad.flat { --c:var(--muted); }
  .rk { font-size:12px; font-weight:800; color:var(--muted); }
  /* ---- BRANCH-B rank pill (replaces the suppressed composite chip) + card lead ---- */
  .rankpill { font-size:12px; font-weight:800; font-variant-numeric:tabular-nums;
              min-width:26px; text-align:center; padding:1px 6px; border-radius:8px;
              color:var(--muted); border:1px solid var(--line); background:var(--panel);
              cursor:help; }
  .nb-lead { font-size:11px; line-height:1.4; margin:5px 0 2px; color:var(--text); }
  /* ---- unified Conviction Profile on each standout card ---------------- */
  .nb-conv { display:flex; align-items:center; gap:7px; margin:7px 0 1px; }
  .nb-cscore { font-size:13px; font-weight:800; font-variant-numeric:tabular-nums;
               min-width:30px; text-align:center; padding:1px 5px; border-radius:8px;
               border:1px solid var(--line); color:var(--text); }
  .nb-cscore.band-high { color:var(--ink-up, var(--up)); border-color:color-mix(in srgb,var(--up) 45%,var(--line));
                         background:color-mix(in srgb,var(--up) 12%,var(--panel)); }
  .nb-cscore.band-constructive { color:var(--g-cold);
                         border-color:color-mix(in srgb,var(--g-cold) 40%,var(--line)); }
  .nb-cscore.band-neutral { color:var(--muted); }
  .nb-cscore.band-low { color:var(--ink-down, var(--down)); border-color:color-mix(in srgb,var(--down) 35%,var(--line)); }
  .nb-verdict { font-size:10.5px; font-weight:700; line-height:1.25; color:var(--text); }
  /* multi-timeframe ENTRY-gate chip (engine.cycles.mtf_alignment) — mirrors US/CN/HK */
  .nb-align { display:flex; align-items:center; gap:5px; margin:3px 0 1px; min-width:0;
              font-size:9.5px; font-weight:700; letter-spacing:.01em; padding:2px 7px;
              border-radius:7px; border:1px solid var(--line);
              color:var(--ink-up, var(--up)); background:color-mix(in srgb,var(--up) 9%,var(--panel)); }
  .nb-align.nba-near { color:var(--ink-warn, var(--warn)); background:color-mix(in srgb,var(--warn) 9%,var(--panel)); }
  .nb-align .nba-line { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .nb-align .nba-tag { margin-left:auto; flex:none; font-size:8px; font-weight:800;
                       text-transform:uppercase; letter-spacing:.04em; opacity:.85; }
  .nb-axes { display:flex; gap:4px; margin-top:3px; }
  .nb-ax { flex:1; }
  .nb-ax .axl { font-size:8px; color:var(--muted); letter-spacing:.03em; }
  .nb-ax .axt { height:3px; border-radius:2px; background:var(--line); margin-top:1px; overflow:hidden; }
  .nb-ax .axf { height:100%; background:var(--g-cold); border-radius:2px; }
  .nb-ax.ax-na .axf { background:transparent; }
  /* ---- Caution icon + popover (replaces old pill-row; ported from dashboard #1061) ---- */
  .nb-cau { position:relative; display:inline-flex; margin-top:4px; }
  .nb-cau-btn {
    display:inline-flex; align-items:center; gap:3px;
    padding:0 5px 0 4px; height:18px; border-radius:9px; border:none; cursor:pointer;
    font-size:9px; font-weight:700; line-height:1;
    color:var(--ink-warn, var(--warn)); background:color-mix(in srgb,var(--warn) 14%,var(--panel));
    text-decoration:none;
    animation:nb-cau-pulse 2.5s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce) { .nb-cau-btn { animation:none; } }
  @keyframes nb-cau-pulse {
    0%, 100% { opacity:1; }
    50%       { opacity:.55; }
  }
  .nb-cau-badge {
    display:inline-flex; align-items:center; justify-content:center;
    width:13px; height:13px; border-radius:50%; font-size:8px; font-weight:800;
    background:var(--warn); color:var(--panel);
  }
  .nb-cau-pop {
    display:none; position:absolute; z-index:120; bottom:calc(100% + 5px); left:0;
    min-width:180px; max-width:min(260px, calc(100vw - 24px));
    padding:7px 9px; border-radius:8px;
    background:var(--panel); border:1px solid color-mix(in srgb,var(--warn) 40%,var(--line));
    box-shadow:0 4px 16px rgba(0,0,0,.18);
    font-size:10px; font-weight:600; line-height:1.45; color:var(--ink-warn, var(--warn));
    pointer-events:none;
  }
  .nb-cau-pop .cau-row { display:block; padding:2px 0; }
  .nb-cau-pop .cau-row + .cau-row { border-top:1px solid color-mix(in srgb,var(--warn) 20%,var(--line)); padding-top:4px; margin-top:2px; }
  /* Show on hover/focus (desktop) */
  .nb-cau:hover .nb-cau-pop,
  .nb-cau:focus-within .nb-cau-pop,
  .nb-cau.nb-cau-open .nb-cau-pop { display:block; pointer-events:auto; }
  /* Flip to below if near top of viewport (added by JS) */
  .nb-cau.pop-below .nb-cau-pop { bottom:auto; top:calc(100% + 5px); }
  /* Clamp to right edge */
  .nb-cau.pop-right .nb-cau-pop { left:auto; right:0; }
  /* volatility black hole chip + honesty notes (Canada overhaul, mirrors china.html) */
  .nb-vf { display:flex; flex-wrap:wrap; gap:4px; margin-top:3px; }
  .nb-vchip { font-size:8.5px; font-weight:800; padding:0 5px; border-radius:6px; border:1px solid var(--line);
              color:var(--muted); white-space:nowrap; }
  .vf-coil { color:var(--ink-link, var(--link)); border-color:color-mix(in srgb,var(--link) 38%,var(--line));
             background:color-mix(in srgb,var(--link) 10%,var(--panel)); }
  .vf-up { color:var(--ink-up, var(--up)); border-color:color-mix(in srgb,var(--up) 45%,var(--line)); }
  .vf-down { color:var(--ink-down, var(--down)); border-color:color-mix(in srgb,var(--down) 40%,var(--line)); }
  .vf-exp { color:var(--ink-warn, var(--warn)); border-color:color-mix(in srgb,var(--warn) 35%,var(--line)); }
  .nb-note { font-size:8.5px; line-height:1.3; margin-top:3px; padding:2px 5px; border-radius:6px;
             color:var(--muted); background:color-mix(in srgb,var(--text) 4%,var(--panel)); }
  .nb-note-anticipation { color:var(--ink-link, var(--link)); background:color-mix(in srgb,var(--link) 8%,var(--panel)); }
  /* ---- vol-managed size chip + entry-timing gauge (mirrors the US standout card) ---- */
  .nb-bot { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:4px; font-size:10px; }
  .nb-size { font-size:9.5px; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap;
             padding:0 5px; border-radius:6px; border:1px solid var(--line); color:var(--muted); }
  .nb-size.sz-up { color:var(--ink-up, var(--up)); border-color:color-mix(in srgb,var(--up) 38%,var(--line));
                   background:color-mix(in srgb,var(--up) 10%,var(--panel)); }
  .nb-size.sz-dn { color:var(--ink-warn, var(--warn)); border-color:color-mix(in srgb,var(--warn) 42%,var(--line));
                   background:color-mix(in srgb,var(--warn) 10%,var(--panel)); }
  .nb-entry { margin:5px 0 1px; padding:5px 7px; border-radius:8px; border-top:2px solid var(--muted);
              background:color-mix(in srgb,var(--text) 4%,var(--panel)); }
  .nbe-buy_now, .nbe-partial { border-top-color:var(--up);
              background:color-mix(in srgb,var(--up) 7%,var(--panel)); }
  .nbe-buy_soon, .nbe-watch { border-top-color:var(--g-cold); }
  .nbe-wait_pullback, .nbe-hold, .nbe-bounce_wait { border-top-color:var(--warn); }
  .nbe-extended, .nbe-topping { border-top-color:var(--warn);
              background:color-mix(in srgb,var(--warn) 7%,var(--panel)); }
  .nbe-exit, .nbe-avoid, .nbe-blocked { border-top-color:var(--down);
              background:color-mix(in srgb,var(--down) 7%,var(--panel)); }
  .nbe-head { display:flex; align-items:center; gap:5px; }
  .nbe-dot { width:7px; height:7px; border-radius:50%; background:var(--muted); flex:none; }
  .nbe-dot.a3 { background:var(--up); box-shadow:0 0 0 3px color-mix(in srgb,var(--up) 22%,transparent); }
  .nbe-dot.a2 { background:var(--g-cold); }
  .nbe-dot.a1 { background:var(--warn); }
  .nbe-dot.a0 { background:var(--down); }
  .nbe-status { font-size:10px; font-weight:800; color:var(--text); line-height:1.2; }
  .nbe-zone { display:flex; align-items:baseline; gap:5px; margin-top:3px; }
  .nbe-lbl { color:var(--muted); font-size:8px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
  .nbe-px { font-weight:800; font-size:11px; color:var(--text); font-variant-numeric:tabular-nums; }
  .nbe-pct { color:var(--muted); font-size:9px; font-variant-numeric:tabular-nums; }
  .ab { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
  .abcol h3 { font-size:12px; margin:0 0 6px; text-transform:uppercase; letter-spacing:.04em; }
  .abcol.ab-on_the_run h3 { color:#8b5cf6; }  /* neutral violet — NOT green/buy */
  .abcol .it { font-size:12.5px; padding:3px 0; border-bottom:1px solid var(--line); }
  table { border-collapse:collapse; width:100%; font-size:13px; }
  th,td { text-align:right; padding:4px 8px; border-bottom:1px solid var(--line); }
  th { color:var(--muted); font-weight:500; } th:first-child,td:first-child { text-align:left; }
  .help { display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%; border:1px solid var(--muted); color:var(--muted); font-size:10px; font-weight:600; cursor:help; position:relative; vertical-align:middle; margin-left:5px; }
  .help .tip { display:none; position:absolute; bottom:150%; left:50%; transform:translateX(-50%); width:300px; background:var(--panel); border:1px solid var(--line); padding:10px 12px; border-radius:9px; z-index:60; font-size:12px; line-height:1.5; color:var(--text); text-align:left; font-weight:400; text-transform:none; letter-spacing:normal; box-shadow:var(--popover-shadow); pointer-events:auto; cursor:auto; max-height:min(60vh,420px); overflow-y:auto; overscroll-behavior:contain; }
  /* invisible hover pad across the icon→tip gap — keeps :hover alive mid-travel (on .help, not .tip: the tip is a scroll container and clips its pseudos) */
  .help:hover::before { content:''; position:absolute; bottom:100%; left:-30px; right:-30px; height:10px; }
  .help:hover .tip { display:block; }
  .caveat { font-size:11.5px; color:var(--muted); font-style:italic; }
  /* ===== W6 UX overhaul (§7): desk-header · track-record · watch/laggard strips ===== */
  /* ONE "what this desk is / isn't" block — replaces the 6× repeated caveat museum. */
  .desk-hdr { margin:2px 0 12px; padding:11px 14px; border-radius:11px;
    border:1px solid color-mix(in srgb,var(--link) 26%,var(--line));
    background:linear-gradient(180deg, color-mix(in srgb,var(--link) 7%,var(--panel)), var(--panel)); }
  .desk-hdr .dh-is { font-size:13px; font-weight:700; color:var(--text); line-height:1.5; margin:0; }
  .desk-hdr .dh-isnt { font-size:12px; color:var(--muted); line-height:1.5; margin:5px 0 0; }
  .desk-hdr .dh-isnt b { color:color-mix(in srgb,var(--warn) 80%,var(--text)); font-weight:700; }
  /* track-record panel — the accountability centerpiece; ships 'accruing'. */
  .trk { margin:10px 0 2px; padding:11px 13px; border-radius:11px; border:1px solid var(--line);
    background:color-mix(in srgb,var(--text) 3%,var(--panel)); }
  .trk-h { font-size:12px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
    color:var(--text); margin:0 0 6px; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
  .trk-badge { font-size:9px; font-weight:800; padding:1px 7px; border-radius:20px; letter-spacing:.04em;
    border:1px solid color-mix(in srgb,var(--g-cold) 45%,var(--line)); color:var(--g-cold);
    background:color-mix(in srgb,var(--g-cold) 10%,var(--panel)); }
  .trk-badge.scored { border-color:color-mix(in srgb,var(--up) 50%,var(--line)); color:var(--ink-up, var(--up));
    background:color-mix(in srgb,var(--up) 10%,var(--panel)); }
  .trk-body { font-size:12.5px; color:var(--text); line-height:1.55; }
  .trk-note { font-size:11px; color:var(--muted); margin:6px 0 0; }
  .trk-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px; margin:7px 0 0; }
  .trk-cell { padding:6px 9px; border-radius:8px; border:1px solid var(--line);
    background:var(--panel); }
  .trk-cell .tv { font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--text); }
  .trk-cell .tk { font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
  /* WATCH strip — strong edge, blocked entry (parity with hk.html.j2). */
  .watch-strip { margin:14px 0 2px; padding:11px 13px; border-radius:11px;
    border:1px solid color-mix(in srgb,var(--g-cold) 32%,var(--line));
    background:color-mix(in srgb,var(--g-cold) 6%,var(--panel)); }
  .watch-strip .ws-h { font-size:12px; font-weight:800; margin:0 0 7px; text-transform:uppercase;
    letter-spacing:.04em; color:color-mix(in srgb,var(--g-cold) 78%,var(--text)); }
  .watch-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:8px; }
  .watch-grid a { display:block; padding:6px 9px; border-radius:8px; border:1px solid var(--line);
    background:var(--panel); text-decoration:none; }
  .watch-grid a.wg-knife { border-color:color-mix(in srgb,var(--down) 34%,var(--line)); }
  .watch-grid .wg-tk { display:block; font-weight:800; color:var(--text); font-size:12.5px; }
  .watch-grid .wg-v { display:block; font-size:10.5px; color:var(--muted); line-height:1.35; margin-top:1px; }
  .wg-knife-chip { display:inline-block; margin-top:4px; font-size:8.5px; font-weight:800; padding:1px 5px;
    border-radius:6px; color:var(--ink-down, var(--down)); border:1px solid color-mix(in srgb,var(--down) 38%,var(--line));
    background:color-mix(in srgb,var(--down) 9%,var(--panel)); }
  .wg-blk-chip { display:inline-block; margin-top:4px; font-size:8.5px; font-weight:800; padding:1px 5px;
    border-radius:6px; color:var(--ink-warn, var(--warn)); border:1px solid color-mix(in srgb,var(--warn) 34%,var(--line)); }
  /* why-now evidence-tag micro-style (§7.4) — colour-codes the chip's evidence tier. */
  .nb-vchip.ev-accrue { border-style:dashed; }
  .nb-vchip.ev-oil { color:var(--ink-warn, var(--warn)); border-color:color-mix(in srgb,var(--warn) 40%,var(--line)); }
  .nb-vchip.ev-insider { color:var(--ink-up, var(--up)); border-color:color-mix(in srgb,var(--up) 42%,var(--line));
    background:color-mix(in srgb,var(--up) 8%,var(--panel)); }
  .nb-vchip.ev-earn { color:var(--ink-link, var(--link)); border-color:color-mix(in srgb,var(--link) 42%,var(--line));
    background:color-mix(in srgb,var(--link) 8%,var(--panel)); }
  /* CA2 confluence tier badge — T1..T4 green (fresh cross), gate-none muted (ran, no cross). */
  .nb-vchip.gate-tier { color:var(--ink-up, var(--up)); border-color:color-mix(in srgb,var(--up) 50%,var(--line));
    background:color-mix(in srgb,var(--up) 10%,var(--panel)); }
  .nb-vchip.gate-none { color:var(--muted); border-style:dotted;
    border-color:color-mix(in srgb,var(--muted) 40%,var(--line)); }
  /* CA2 confluence stat line in the desk header. */
  .desk-hdr .dh-conf { font-size:12px; color:var(--muted); line-height:1.5; margin:6px 0 0; }
  .desk-hdr .dh-conf b.pos { color:var(--ink-up, var(--up)); }
  .desk-hdr .dh-conf b.neg { color:var(--muted); }
  /* CA2 sector-concentration banner — honest, not a re-rank. */
  .chip.sec-conc { border-color:color-mix(in srgb,var(--warn) 35%,var(--line));
    background:color-mix(in srgb,var(--warn) 6%,var(--panel)); font-size:12px; }
  /* CA2 pullback-zone row inside the entry gauge (cool, a don't-chase reset range). */
  .nbe-zone.nbe-pull { color:var(--g-cold); }
  .nbe-zone.nbe-pull .nbe-px { color:var(--g-cold); }
  /* entry-window state as a TOP gradient stripe (RIPENING-shelf idiom) — not a left border */
  .card.ent-open, .card.ent-pullback, .card.ent-wait { position:relative; overflow:hidden; }
  .card.ent-open::before, .card.ent-pullback::before, .card.ent-wait::before {
      content:""; position:absolute; top:0; left:0; right:0; height:3px; pointer-events:none; }
  .card.ent-open::before { background:linear-gradient(90deg,var(--up),color-mix(in srgb,var(--up) 30%,transparent)); }
  .card.ent-pullback::before { background:linear-gradient(90deg,var(--g-cold),color-mix(in srgb,var(--g-cold) 30%,transparent)); }
  .card.ent-wait::before { background:linear-gradient(90deg,var(--muted),transparent); opacity:.6; }
  /* ===================== COMMAND-CENTER REGIME HERO (shared) =====================
     The modern macro scorecard ported from the US macro terminal (dashboard.html.j2)
     to China / HK / Canada. Scoped under .cmd-hero on the hero panel so it never
     restyles the rest of the page; every colour routes through the existing theme
     vars so dark/light + the zh Asia red/green swap propagate at paint. A 3-column
     bar: 2x2 quadrant locator · headline regime + plain-English standfirst · a
     vitals strip of the market's NATIVE drivers (LABEL · VALUE · MEANING). */
  .cmd-hero {
    --num: var(--font-mono, ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace);
    --hair: color-mix(in srgb, var(--line) 72%, transparent);
    --tile: color-mix(in srgb, var(--panel2, var(--panel)) 86%, var(--panel));
    --ink-1: var(--text);
    --ink-2: color-mix(in srgb, var(--text) 64%, transparent);
    --ink-3: var(--muted);
    --rule: 1px;
    padding: 19px 21px;
  }
  html[data-theme="light"] .cmd-hero {
    --ink-2: color-mix(in srgb, var(--text) 70%, transparent);
    --hair: color-mix(in srgb, var(--line) 90%, transparent);
  }
  .cmd-hero .num, .cmd-hero .num-lg, .cmd-hero .v-num, .cmd-hero .v-chip {
    font-family: var(--num); font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1; letter-spacing: -.01em; }
  .cmd-hero .num-lg { font-size: 22px; font-weight: 800; line-height: 1.05; color: var(--ink-1); }

  .cmd-hero .hero-bar { display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 26px; }
  .cmd-hero .hero-main { padding: 2px 28px; min-width: 0;
    border-left: var(--rule) solid var(--hair); border-right: var(--rule) solid var(--hair); }

  /* LEFT — 2x2 quadrant locator (growth↑ top, inflation→ right; lit cell only) */
  .cmd-hero .hero-loc { display: grid; gap: 7px; justify-items: start; }
  .cmd-hero .qmini { display: grid; grid-template-columns: repeat(2, 31px);
    grid-template-rows: repeat(2, 31px); gap: 5px; }
  .cmd-hero .qm { border-radius: 6px;
    background: color-mix(in srgb, var(--qc) 14%, var(--tile));
    border: var(--rule) solid color-mix(in srgb, var(--qc) 28%, var(--hair));
    transition: box-shadow .2s ease; }
  .cmd-hero .qm.on { background: var(--qc);
    box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--qc),
                0 0 18px color-mix(in srgb, var(--qc) 55%, transparent); }
  .cmd-hero .loc-axes { display: flex; justify-content: space-between; width: 100%;
    gap: 8px; font-family: var(--num); font-size: 8px; letter-spacing: .05em;
    color: var(--ink-3); text-transform: uppercase; font-weight: 700; }

  /* CENTER — the read */
  .cmd-hero .hero-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center;
    gap: 7px; flex-wrap: wrap; }
  .cmd-hero .hero-eyebrow .num { color: var(--ink-2); }
  .cmd-hero .hero-regime { display: flex; align-items: center; gap: 12px; margin: 7px 0 6px; }
  .cmd-hero .hr-dot { width: 13px; height: 13px; border-radius: 50%; flex: none; }
  .cmd-hero h1.hr-name { font-size: 33px; font-weight: 800; letter-spacing: -.02em;
    line-height: 1; color: var(--ink-1); margin: 0; }
  html[data-lang="zh"] .cmd-hero h1.hr-name { font-size: 31px; letter-spacing: 0; }
  .cmd-hero .hero-says { margin: 0; font-size: 14px; color: var(--ink-2);
    max-width: 54ch; line-height: 1.5; }
  .cmd-hero .hero-says b { color: var(--ink-1); font-weight: 700; }

  /* RIGHT — vitals strip: 4 cells, each LABEL · VALUE · plain-English MEANING */
  .cmd-hero .hero-vitals { display: grid;
    grid-template-columns: repeat(2, minmax(124px, 1fr)); gap: 13px 20px; }
  .cmd-hero .vital { display: grid; gap: 4px; align-content: start; }
  .cmd-hero .v-top { display: flex; align-items: center; gap: 5px; }
  .cmd-hero .v-label { font-family: var(--num); font-size: 9.5px; font-weight: 700;
    letter-spacing: .1em; color: var(--ink-3); text-transform: uppercase; }
  .cmd-hero .v-num { color: var(--ink-1); }
  .cmd-hero .v-num small { font-size: 14px; color: var(--ink-3); font-weight: 600; font-family: var(--num); }
  .cmd-hero .v-mean { font-size: 11px; color: var(--ink-2); line-height: 1.35; }
  .cmd-hero .v-meter { height: 4px; border-radius: 2px; background: var(--tile);
    position: relative; overflow: hidden; }
  .cmd-hero .v-meter::after { content: ""; position: absolute; inset: 0 auto 0 0;
    width: var(--p, 0%); background: var(--mc, var(--ink-2)); border-radius: 2px; }
  .cmd-hero .v-chip { font-size: 12.5px; font-weight: 700; padding: 3px 10px;
    border-radius: 7px; width: max-content; border: var(--rule) solid var(--hair);
    background: var(--tile); color: var(--ink-1); }
  .cmd-hero .v-chip.tone-up, .cmd-hero .v-chip.liq-expanding { color: var(--ink-up, var(--up));
    border-color: color-mix(in srgb, var(--up) 45%, var(--hair));
    background: color-mix(in srgb, var(--up) 13%, var(--tile)); }
  .cmd-hero .v-chip.tone-down, .cmd-hero .v-chip.liq-contracting { color: var(--ink-down, var(--down));
    border-color: color-mix(in srgb, var(--down) 45%, var(--hair));
    background: color-mix(in srgb, var(--down) 13%, var(--tile)); }
  .cmd-hero .v-chip.tone-warn { color: var(--ink-warn, var(--warn));
    border-color: color-mix(in srgb, var(--warn) 45%, var(--hair));
    background: color-mix(in srgb, var(--warn) 11%, var(--tile)); }
  .cmd-hero .v-chip.tone-info { color: var(--ink-info, var(--info, var(--link)));
    border-color: color-mix(in srgb, var(--info, var(--link)) 45%, var(--hair));
    background: color-mix(in srgb, var(--info, var(--link)) 11%, var(--tile)); }

  @media (max-width: 900px) {
    .cmd-hero .hero-bar { grid-template-columns: 1fr; gap: 16px; }
    .cmd-hero .hero-main { border: 0; padding: 14px 0;
      border-top: var(--rule) solid var(--hair); border-bottom: var(--rule) solid var(--hair); }
    .cmd-hero h1.hr-name { font-size: 28px; }
    .cmd-hero .hero-vitals { grid-template-columns: repeat(2, 1fr); }
  }
  /* ===================== MARKET STATE board (shared) =====================
     The side-by-side .ms-front board ported from the US macro terminal (#646):
     Market State (verdict + evidence) left, the growth×inflation hero-bar right,
     the multi-timeframe tape full-width below. Lives INSIDE the .cmd-hero panel so
     it inherits its theme vars (--num/--hair/--tile/--ink-*/--rule); include this
     AFTER _cmd_hero.css.j2 so the verdict's .v-* rules win over the vitals' on the
     left column only (every verdict rule is scoped under .ms-verdict so the hero-bar
     vitals are never restyled). Colour spent only on signal. */
  .cmd-hero .ms-front { --hair-strong: var(--line); --ms-c: var(--ink-3); }
  .cmd-hero .ms-front.ms-green  { --ms-c: var(--up); }
  .cmd-hero .ms-front.ms-yellow { --ms-c: var(--warn); }
  .cmd-hero .ms-front.ms-red    { --ms-c: var(--down); }

  /* base = mobile: one tight stack (radar → eyebrow → verdict/evidence → tape →
     divider → backdrop). At >=1100px it promotes to the side-by-side grid. */
  .cmd-hero .ms-front.ms { display: flex; flex-direction: column; gap: 14px; }
  .cmd-hero .ms-front > .rrx, .cmd-hero .ms-front > .ms-head { margin: 0; }
  .cmd-hero .ms-front > .ms-top, .cmd-hero .ms-front > .ms-tape { margin-top: 0; }
  .cmd-hero .ms-front > .ms-divider { margin: 4px 0 0; }
  @media (min-width: 1100px) {
    .cmd-hero .ms-front.ms { display: grid; gap: 0 30px; align-items: start;
      grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
      grid-template-areas: "radar radar" "head head" "state hero" "tape tape"; }
    .cmd-hero .ms-front > .rrx { grid-area: radar; margin-bottom: 12px; }
    .cmd-hero .ms-front > .ms-head { grid-area: head; }
    .cmd-hero .ms-front > .ms-top { grid-area: state; margin-top: 14px; }
    .cmd-hero .ms-front > .ms-tape { grid-area: tape; }
    .cmd-hero .ms-front > .ms-divider { display: none; }
    /* the backdrop, recomposed for the narrow right column: [locator | regime]
       on top, the four vitals as a 2×2 strip beneath — never the 3-up layout */
    .cmd-hero .ms-front > .hero-bar { grid-area: hero; margin-top: 14px; padding-left: 30px;
      border-left: var(--rule) solid var(--hair);
      grid-template-columns: auto minmax(0, 1fr); gap: 12px 18px; }
    .cmd-hero .ms-front > .hero-bar .hero-main { grid-column: 2; border: 0; padding: 0; }
    .cmd-hero .ms-front > .hero-bar .hero-vitals { grid-column: 1 / -1; gap: 12px 18px; }
  }

  /* Risk Radar — the shared .rrx card (engine/risk_radar_intl.py feeds it on these
     boards). Same markup + CSS as the US Macro/Stocks pages; global theme tokens only. */
  /* ============================================================================
     RISK RADAR CARD (.rrx) — the one shared, redesigned alert used on the US Macro
     + US-Stocks pages AND the China / HK / Canada Market-State boards (the macros
     live in _risk_radar_card.html.j2). GLOBAL theme vars only + an inline --rc state
     accent, so it renders the same in the page-macro, page-stocks and china/hk/canada
     scopes. The escalating odds ramp replaces the old cramped "5d.. 10d.. 21d.." run.
     Included by dashboard.html.j2 (both modes) + _market_state.css.j2 (CN/HK/CA). ==== */
  .rrx { --rc: var(--warn);
         display: grid; gap: 12px; margin: 12px 0 2px; padding: 15px 18px; border-radius: 12px;
         background: var(--panel);
         border: 1px solid var(--line);
         border-left: 4px solid var(--rc); font-size: 12.5px; line-height: 1.4;
         box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 16px 32px -24px rgba(0,0,0,.4); }
  body.page-macro .ms-front > .rrx { margin: 0 0 14px; }
  /* grouping wrappers: inert everywhere by default (the card keeps its single-column
     stack on the China/HK/Canada/stocks placements); the macro front-page overrides
     these to display:flex to build the 2-column banner. */
  .rrx > .rrx-main, .rrx > .rrx-side { display: contents; min-width: 0; }
  /* Perf: loud pulse = pseudo animating ONLY opacity (compositor-run); animating
     box-shadow on the card repainted it every frame (2026-07-21 mobile audit).
     mmGlowBreathe keyframes ship in theme.css (loaded on every placement). */
  .rrx.rrx-loud { background: color-mix(in srgb, var(--rc) 5%, var(--panel));
         position: relative;
         box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 20%, transparent), 0 14px 34px -18px color-mix(in srgb, var(--rc) 70%, transparent); }
  .rrx.rrx-loud::before { content: ""; position: absolute; inset: 0; border-radius: inherit;
         pointer-events: none;
         box-shadow: 0 0 0 5px color-mix(in srgb, var(--rc) 6%, transparent);
         opacity: 0; animation: mmGlowBreathe 2.4s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce) { .rrx.rrx-loud::before { animation: none; opacity: 0; }
         .rrx.rrx-loud { box-shadow: 0 0 0 1px color-mix(in srgb, var(--rc) 30%, transparent); } }
  /* header */
  .rrx .rrx-hd { display: flex; align-items: flex-start; gap: 10px; }
  .rrx .rrx-ic { font-size: 18px; line-height: 1.1; flex: none; }
  .rrx .rrx-id { min-width: 0; flex: 1; }
  .rrx .rrx-ttl { display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
         font-weight: 700; font-size: 13px; color: var(--text); }
  .rrx .rrx-badge { font-weight: 800; letter-spacing: .03em; color: var(--rc); font-size: 11.5px;
         font-variant-numeric: tabular-nums; padding: 1px 7px; border-radius: 5px;
         background: color-mix(in srgb, var(--rc) 16%, transparent);
         border: 1px solid color-mix(in srgb, var(--rc) 38%, transparent); }
  .rrx .rrx-dom { color: var(--muted); font-size: 11.5px; margin-top: 2px; }
  .rrx .rrx-authority { font-size: 10.5px; line-height: 1.35; margin-top: 3px; font-weight: 600; }
  .rrx .rrx-authority.is-advisory { color: var(--muted); }
  .rrx .rrx-authority.is-binding { color: var(--rc); }
  .rrx .rrx-amp { color: var(--rc); font-weight: 600; font-size: 11px; margin-top: 3px; }
  .rrx .rrx-gross { flex: none; text-align: center; padding: 3px 11px; border-radius: 9px;
         background: color-mix(in srgb, var(--rc) 12%, transparent);
         border: 1px solid color-mix(in srgb, var(--rc) 32%, transparent); }
  .rrx .rrx-gross .gv { display: block; font-weight: 800; font-size: 15px; color: var(--rc);
         font-variant-numeric: tabular-nums; line-height: 1.1; }
  .rrx .rrx-gross .gn { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .07em;
         color: var(--muted); }
  /* odds hero — flat on the card (the amber wash now lives on .rrx itself, not a nested box) */
  .rrx .rrx-odds { display: flex; gap: 16px; align-items: stretch; flex-wrap: wrap; }
  .rrx .rrx-odds-l { flex: 1 1 150px; display: flex; flex-direction: column; justify-content: center; }
  .rrx .rrx-cap { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
         color: var(--muted); }
  .rrx .rrx-cap-sub { font-weight: 600; letter-spacing: .02em; opacity: .8; }
  .rrx .rrx-big { font-weight: 800; font-size: 40px; line-height: .95; color: var(--rc); margin: 4px 0 2px;
         font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
  .rrx .rrx-big .pct { font-size: 22px; margin-left: 1px; }
  .rrx .rrx-big .rrx-hz { font-size: 11px; font-weight: 600; color: var(--muted); margin-left: 7px;
         letter-spacing: 0; }
  .rrx .rrx-vsn { font-size: 11.5px; color: var(--muted); }
  .rrx .rrx-vsn b { color: var(--text); font-variant-numeric: tabular-nums; }
  /* escalating ramp */
  .rrx .rrx-ramp { flex: 1 1 240px; min-width: 0; max-width: 430px; display: flex; align-items: flex-end;
         justify-content: space-between; gap: 12px; position: relative; padding-top: 18px; }
  .rrx .rrx-col { flex: 1 1 0; min-width: 0; max-width: 76px; display: flex; flex-direction: column;
         align-items: center; gap: 5px; }
  .rrx .rrx-v { font-size: 12.5px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
  .rrx .rrx-col.is-hd .rrx-v { color: var(--rc); }
  .rrx .rrx-tk { width: 100%; max-width: 54px; height: 64px; position: relative;
         display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--line); }
  .rrx .rrx-norm { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 2px 2px 0 0;
         background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--muted) 32%, transparent) 0 4px, transparent 4px 8px);
         border-top: 1px dashed color-mix(in srgb, var(--muted) 60%, transparent); }
  .rrx .rrx-fill { width: 100%; border-radius: 3px 3px 0 0; position: relative; z-index: 1; min-height: 6px;
         background: linear-gradient(180deg, var(--rc), color-mix(in srgb, var(--rc) 50%, transparent)); }
  .rrx .rrx-hl { font-size: 10.5px; font-weight: 600; color: var(--muted); }
  .rrx .rrx-col.is-hd .rrx-hl { color: var(--text); }
  .rrx .rrx-leg { position: absolute; top: 0; right: 2px; display: flex; align-items: center; gap: 4px;
         font-size: 9.5px; color: var(--muted); }
  .rrx .rrx-leg-n { width: 13px; border-top: 1px dashed color-mix(in srgb, var(--muted) 60%, transparent); }
  /* threat meters */
  .rrx .rrx-threats { display: flex; flex-wrap: wrap; gap: 6px; }
  .rrx .rrx-th { --sb: var(--muted); display: inline-flex; align-items: center; gap: 6px;
         padding: 3px 9px; border-radius: 7px; font-size: 11px;
         background: var(--panel); border: 1px solid var(--line); }
  .rrx .rrx-th.dom { background: color-mix(in srgb, var(--sb) 10%, var(--panel));
         border-color: color-mix(in srgb, var(--sb) 50%, var(--line)); }
  .rrx .rrx-th.dim { opacity: .58; }
  .rrx .rrx-th-n { color: var(--text); font-weight: 600; }
  .rrx .rrx-th.dom .rrx-th-n { color: var(--sb); }
  .rrx .rrx-meter { display: inline-flex; gap: 1.5px; }
  .rrx .rrx-meter i { width: 3px; height: 11px; border-radius: 1px;
         background: color-mix(in srgb, var(--muted) 28%, transparent); }
  .rrx .rrx-meter i.on { background: var(--sb); }
  .rrx .rrx-th-s { color: var(--text); font-weight: 800; font-size: 11.5px; font-variant-numeric: tabular-nums; }
  .rrx .rrx-tag { font-size: 8.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
         border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
  .rrx .rrx-ev { font-size: 11px; color: var(--muted); }
  .rrx .rrx-ev-k { font-weight: 700; color: var(--text); margin-right: 6px; }
  .rrx .rrx-ev-p { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
  /* action */
  .rrx .rrx-do { font-size: 12px; color: var(--text); padding-top: 9px;
         border-top: 1px solid color-mix(in srgb, var(--rc) 20%, var(--line)); }
  .rrx .rrx-do-k { font-weight: 800; color: var(--rc); text-transform: uppercase; letter-spacing: .06em;
         font-size: 10.5px; margin-right: 8px; }
  /* election-cycle context chip (US radar only; engine/election_cycle.py) */
  /* compressed to <=2 dense lines so the cycle context never balloons the card */
  .rrx .rrx-cyc { font-size: 10.5px; color: var(--muted); padding-top: 7px; margin-top: 2px; line-height: 1.4;
         border-top: 1px solid color-mix(in srgb, var(--rc) 16%, var(--line));
         display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 1px; }
  .rrx .rrx-cyc-k { font-weight: 700; color: var(--text); }
  .rrx .rrx-cyc-tag { color: var(--rc); font-weight: 700; font-size: 9.5px; }
  /* RC-R11 washout counter-read chip — a cyan-tinted variant of the modulator row. */
  .rrx .rrx-cyc.rrx-washout { border-top-color: color-mix(in srgb, var(--cyan, #38bdf8) 22%, var(--line)); }
  .rrx .rrx-cyc.rrx-washout .rrx-cyc-k { color: var(--cyan, #38bdf8); }
  .rrx .rrx-cyc-sub { color: var(--muted); font-size: 10px; margin: 0; }
  .rrx .rrx-cyc-sec { color: var(--text); font-size: 10px; margin: 0; flex-basis: 100%;
         font-variant-numeric: tabular-nums; }
  /* self-audit line (international radars only) */
  .rrx .rrx-audit { font-size: 10.5px; color: var(--muted); }
  .rrx .rrx-audit-k { font-weight: 700; color: var(--text); margin-right: 6px; }
  .rrx .rrx-audit b { color: var(--text); font-variant-numeric: tabular-nums; }
  /* track-record line — one muted glance-tier line surfacing the forward-ledger scorecard */
  .rrx .rrx-trk { font-size: 10.5px; color: var(--muted); display: flex;
         align-items: center; gap: 5px; flex-wrap: wrap; line-height: 1.4; }
  /* de-escalation panel (engine/risk_radar_recovery.py) — "risk peaking / risk-off may be ending".
     Display-only; --rvc = green when receding, blue when merely peaking. Cool palette so it never
     reads like a green "all-clear" buy signal. */
  .rrx .rrx-rec { --rvc: var(--info); display: flex; flex-direction: column; gap: 7px;
         padding: 9px 11px; border-radius: 9px;
         background: color-mix(in srgb, var(--rvc) 7%, var(--panel));
         border: 1px solid color-mix(in srgb, var(--rvc) 30%, var(--line));
         border-left: 3px solid var(--rvc); }
  .rrx .rrx-rec.is-turn { background: color-mix(in srgb, var(--rvc) 13%, var(--panel));
         box-shadow: 0 0 0 1px color-mix(in srgb, var(--rvc) 26%, transparent); }
  .rrx .rrx-rec-hd { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
  .rrx .rrx-rec-ar { color: var(--rvc); font-weight: 800; font-size: 14px; line-height: 1; }
  .rrx .rrx-rec-ttl { font-weight: 700; font-size: 12px; color: var(--text); }
  .rrx .rrx-rec-tag { font-size: 8.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
         color: var(--rvc); background: color-mix(in srgb, var(--rvc) 16%, transparent);
         border: 1px solid color-mix(in srgb, var(--rvc) 42%, transparent); border-radius: 4px; padding: 0 5px; }
  .rrx .rrx-rec-mid { display: flex; align-items: center; gap: 9px; }
  .rrx .rrx-rec-spark { width: 84px; height: 24px; flex: none;
         background: color-mix(in srgb, var(--rvc) 5%, transparent); border-radius: 4px; }
  .rrx .rrx-rec-spark .pk { fill: var(--muted); }
  .rrx .rrx-rec-spark .lx { fill: var(--rvc); }
  .rrx .rrx-rec-sub { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 0; }
  .rrx .rrx-rec-cats { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
  .rrx .rrx-rec-k { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
         color: var(--muted); }
  .rrx .rrx-rec-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px;
         color: var(--text); padding: 2px 7px; border-radius: 6px;
         background: var(--panel); border: 1px solid var(--line); }
  .rrx .rrx-rec-chip.fresh { color: var(--fresh-ok); font-weight: 600;
         border-color: color-mix(in srgb, var(--fresh-ok) 45%, var(--line));
         background: color-mix(in srgb, var(--fresh-ok) 10%, var(--panel)); }
  .rrx .rrx-rec-cats.none { font-size: 10.5px; color: var(--muted); font-style: italic; }
  /* RRX2 WA: drivers line ("what faded / still warm") + muted "no signal" chip */
  .rrx .rrx-rec-drv { font-size: 10px; color: var(--muted); line-height: 1.4; margin-top: -2px; }
  /* RLT-R5: measured-edge salience line — receipt/muted styling, demoted below catalyst chips */
  .rrx .rrx-rec-sal { font-size: 10px; color: var(--muted); font-style: italic; line-height: 1.4;
         padding: 2px 0 0; border-top: 1px solid color-mix(in srgb, var(--muted) 20%, transparent); margin-top: 1px; }
  .rrx .rrx-rec-chip.muted { color: var(--muted); font-style: italic; border-style: dashed; }
  .rrx .rrx-rec-do { font-size: 11px; color: var(--text); line-height: 1.4; }
  .rrx .rrx-rec-do-k { font-weight: 800; color: var(--rvc); text-transform: uppercase; letter-spacing: .06em;
         font-size: 9.5px; margin-right: 6px; }
  body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx { gap: 10px; padding: 13px 16px; }
  body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx .rrx-odds { gap: 14px; align-items: center; }
  body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx .rrx-big { font-size: 34px; margin: 2px 0 1px; }
  body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx .rrx-big .pct { font-size: 19px; }
  body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx .rrx-vsn { font-size: 11px; }
  body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx .rrx-ramp { gap: 10px; padding-top: 12px; }
  body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx .rrx-col { gap: 3px; }
  body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx .rrx-v { font-size: 11.5px; }
  body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx .rrx-tk { height: 44px; }
  body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx .rrx-hl { font-size: 10px; }
  body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx .rrx-audit,
  body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx .rrx-th.dim,
  body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx .rrx-rec-mid,
  body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx .rrx-rec-do,
  body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx .rrx-cyc-sub,
  body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx .rrx-cyc-sec { display: none; }
  body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx .rrx-rec { gap: 5px; padding: 7px 10px; }
  body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx .rrx-cyc { padding-top: 5px; line-height: 1.25; }
  body:is(.page-macro, .page-china, .page-canada) { padding-top: 26px; }
  @media (max-width: 760px) {
    .rrx .rrx-odds { flex-direction: column; gap: 14px; }
    .rrx .rrx-odds-l { flex: 0 0 auto; }
    .rrx .rrx-ramp { flex: 0 0 auto; width: 100%; max-width: none; justify-content: space-around; }
  }
  /* phone: collapse to a SIMPLE, STRONG alert — headline + the one number that
     matters + the action. The ramp, the verbose amplification line and the
     non-dominant threat meters are desktop-only detail, not a mobile wall. */
  @media (max-width: 560px) {
    .rrx { padding: 14px 15px; gap: 10px; }
    .rrx .rrx-amp, .rrx .rrx-ramp, .rrx .rrx-ev, .rrx .rrx-cyc, .rrx .rrx-audit { display: none; }
    .rrx .rrx-cgl { display: flex; }
    .rrx .rrx-big { font-size: 34px; }
    .rrx .rrx-threats { gap: 5px; }
    .rrx .rrx-th:not(.dom) { display: none; }
  }
  /* desktop: the consolidated 2-column board (header/odds/ramp | threats/evidence/
     action/cycle) on EVERY market's .ms-front board, not just the US macro one —
     roughly halves the card height vs the single-column stack. The US dashboard
     keeps its own (higher-specificity, identical) copy; this is what reaches the
     China / HK / Canada boards that only load this shared partial.
     `.imd-radar` is the international dashboards' section wrapper (JP/KR/EZ/GB/IN,
     templates/international_macro.html.j2) — a full-page-width placement, so it takes
     the same wide board instead of stranding the ramp beside an empty middle. Inert
     on every page that has no such wrapper. */
  @media (min-width: 1100px) {
    :is(.ms-front, .imd-radar) > .rrx { grid-template-columns: minmax(0,1fr) minmax(0,1fr);
      column-gap: 22px; row-gap: 0; align-items: stretch; }
    :is(.ms-front, .imd-radar) > .rrx > .rrx-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
    :is(.ms-front, .imd-radar) > .rrx > .rrx-main .rrx-odds { flex: 1 1 auto; }
    :is(.ms-front, .imd-radar) > .rrx > .rrx-main .rrx-ramp { align-items: stretch; }
    :is(.ms-front, .imd-radar) > .rrx > .rrx-main .rrx-tk { height: auto; flex: 1 1 auto; min-height: 64px; }
    :is(.ms-front, .imd-radar) > .rrx > .rrx-side { display: flex; flex-direction: column; justify-content: center;
      gap: 9px; min-width: 0; padding-left: 22px;
      border-left: 1px solid color-mix(in srgb, var(--rc) 22%, var(--line)); }
    body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx > .rrx-main .rrx-odds { flex: 0 0 auto; }
    body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx > .rrx-main .rrx-ramp { align-items: flex-end; }
    body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx > .rrx-main .rrx-tk { height: 44px; flex: 0 0 44px; min-height: 44px; }
    body:is(.page-macro, .page-china, .page-canada) .ms-front > .rrx > .rrx-side { gap: 7px; padding-left: 20px; }
  }

  /* Shared country Risk Radar DIALOG (.rrd-) — the full US-style modal cloned from
     #dlg-risk, opened from each country page's pullback-risk entry points. Markup:
     _risk_radar_dlg.html.j2. Included here because this file is the one style include
     china / hk / canada already share, and the dialog scopes its own .rrx overrides. */
  /* ==================== SHARED country Risk Radar dialog (.rrd-) ====================
     Design cloned from the US modal #dlg-risk (templates/dashboard.html.j2 §1-§8):
     driver headline ladder -> embedded .rrx card -> 2-col signal-tile grid -> context
     chips -> country factor rows -> leaders -> FX -> one merged footer. Same rhythm,
     same type ladder, PAGE-NEUTRAL classes so china / hk / canada share one source.

     Tokens only. The US dialog leans on the mx5 --ink-1/2/3 ladder, which does NOT
     exist on the country pages — this file uses the global --text / --muted / --line /
     --panel2 set instead, so the same markup renders correctly in both scopes.

     RISK COLOUR LAW: severity is painted ONLY from the zh-flipping --down / --warn /
     --up family (theme.css `html[data-lang="zh"]` swaps --up/--down globally, Asia
     convention), never a literal green/red hex. Tone is carried on --rrd-c by the
     .tone-* helper classes so one variable drives icon, chip, bar and value together.

     Included from _market_state.css.j2 (the single style include already shared by
     china / hk / canada). Markup: _risk_radar_dlg.html.j2. ============================ */

  .rrd { font-family: var(--font-ui, inherit); --rrd-c: var(--muted); }
  .rrd, .rrd * { min-width: 0; }
  .rrd .tone-down { --rrd-c: var(--down); }
  .rrd .tone-warn { --rrd-c: var(--warn); }
  .rrd .tone-up   { --rrd-c: var(--up); }
  .rrd .tone-muted{ --rrd-c: var(--muted); }

  /* ── headline ladder (clone of .mx5-dlg-driver-hd) ───────────────────────── */
  .rrd-hd { display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
    padding: 16px 18px; border-radius: 12px;
    background: color-mix(in srgb, var(--text) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--text) 9%, transparent); }
  .rrd-hd-ico { width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    color: var(--rrd-c); background: color-mix(in srgb, var(--rrd-c) 13%, transparent); }
  .rrd-hd-ico svg { width: 20px; height: 20px; display: block; }
  .rrd-hd-txt { min-width: 0; }
  .rrd-hd-label { font-size: 13px; font-weight: 700; margin-bottom: 3px; color: var(--rrd-c); }
  .rrd-hd-sub { font-size: 11px; line-height: 1.5; color: var(--muted); }
  .rrd-hd-sub + .rrd-hd-sub { margin-top: 3px; }
  .rrd-hd-sub b { font-family: var(--num); font-variant-numeric: tabular-nums;
    font-weight: 700; color: var(--text); }

  /* ── section furniture (clone of .mx5-dlg-eyebrow / .mx5-dlg-sep) ─────────── */
  .rrd-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
  html[data-lang="zh"] .rrd-eyebrow { letter-spacing: 0; }
  .rrd-sep { height: 1px; margin: 22px 0;
    background: color-mix(in srgb, var(--text) 8%, transparent); }
  .rrd-absent { font-size: 11.5px; line-height: 1.5; color: var(--muted); }

  /* ── signal tiles (clone of .rkc-sig-grid / .rkc-sig) ─────────────────────── */
  .rrd-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 2px 0 4px; }
  @media (max-width: 700px) { .rrd-tiles { grid-template-columns: 1fr; } }
  .rrd-tile { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px;
    border-radius: 11px; background: color-mix(in srgb, var(--text) 3%, transparent);
    border: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
    transition: border-color .2s ease, transform .16s ease, background .2s ease; }
  .rrd-tile[data-tip-en] { cursor: help; }
  .rrd-tile:hover { transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--rrd-c) 34%, var(--line));
    background: color-mix(in srgb, var(--text) 5%, transparent); }
  @media (prefers-reduced-motion: reduce) { .rrd-tile:hover { transform: none; } }
  .rrd-tile-ico { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: var(--rrd-c); background: color-mix(in srgb, var(--rrd-c) 12%, transparent); }
  .rrd-tile-ico svg { width: 15px; height: 15px; display: block; }
  .rrd-tile-body { flex: 1; min-width: 0; }
  .rrd-tile-lbl { font: 700 12px/1.25 var(--font-ui, inherit); color: var(--text); }
  .rrd-tile-state { font-size: 11px; line-height: 1.45; color: var(--muted); margin-top: 2px;
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; }
  .rrd-tile-state b { font-family: var(--num); font-variant-numeric: tabular-nums;
    font-weight: 700; color: var(--text); }
  .rrd-tile-chip { display: inline-flex; align-items: center; white-space: nowrap;
    font: 700 10px/1 var(--font-ui, inherit); letter-spacing: .03em;
    padding: 2px 6px; border-radius: 5px; color: var(--rrd-c);
    background: color-mix(in srgb, var(--rrd-c) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--rrd-c) 32%, transparent); }
  html[data-lang="zh"] .rrd-tile-chip { letter-spacing: 0; }
  .rrd-tile-tip { display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; flex: 0 0 auto; margin-left: auto; border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
    color: var(--muted); font: 700 10px/1 var(--font-ui, inherit);
    cursor: help; user-select: none; transition: border-color .2s, color .2s; }
  .rrd-tile-tip:hover { border-color: var(--rrd-c); color: var(--rrd-c); }
  /* calendar tile stacks its dated rows under the label */
  .rrd-cal { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
  .rrd-cal-row { display: flex; align-items: baseline; gap: 7px; font-size: 11px;
    color: var(--muted); line-height: 1.35; }
  .rrd-cal-d { flex: 0 0 auto; font-family: var(--num); font-variant-numeric: tabular-nums;
    font-weight: 700; color: var(--text); letter-spacing: .01em; }
  .rrd-cal-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ── context chips (clone of .mx5-dlg-chips-row / .mx5-dlg-chip) ──────────── */
  .rrd-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .rrd-chips-k { font-size: 10px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted); }
  html[data-lang="zh"] .rrd-chips-k { letter-spacing: 0; }
  .rrd-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 12px;
    border-radius: 20px; font-size: 11px; font-weight: 600; color: var(--muted);
    background: color-mix(in srgb, var(--rrd-c) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--rrd-c) 30%, transparent); }
  .rrd-chip[data-tip-en] { cursor: help; }
  .rrd-chip b { font-weight: 700; color: var(--rrd-c); }

  /* ── country factor rows (label · bar · figure · one-word read) ───────────── */
  .rrd-frows { display: flex; flex-direction: column; gap: 2px; }
  .rrd-frow { display: grid; grid-template-columns: minmax(110px, 1.25fr) minmax(0, 1fr) 62px 62px;
    align-items: center; gap: 12px; padding: 8px 0; font-size: 12px;
    border-top: 1px solid color-mix(in srgb, var(--text) 6%, transparent); }
  .rrd-frow:first-child { border-top: 0; }
  .rrd-frow[data-tip-en] { cursor: help; }
  .rrd-fname { color: var(--text); font-weight: 600; }
  .rrd-fbar { height: 7px; border-radius: 4px; overflow: hidden;
    background: color-mix(in srgb, var(--text) 7%, transparent); }
  .rrd-fbar i { display: block; height: 100%; border-radius: 4px; transform-origin: 0 50%;
    background: linear-gradient(90deg, color-mix(in srgb, var(--rrd-c) 50%, transparent), var(--rrd-c)); }
  .rrd-fval { text-align: right; font-family: var(--num); font-variant-numeric: tabular-nums;
    font-weight: 700; color: var(--text); }
  .rrd-fread { text-align: right; font-size: 11px; font-weight: 700; color: var(--rrd-c); }
  @media (max-width: 640px) {
    .rrd-frow { grid-template-columns: minmax(0, 1fr) 56px 56px; }
    .rrd-frow .rrd-fbar { display: none; }
  }
  .rrd-fnote { margin-top: 10px; font-size: 11px; line-height: 1.5; color: var(--muted); }

  /* ── gauges slot (CN deep-drawdown / slowdown charts ported from the old dialog) ─ */
  .rrd-gauges { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
  @media (max-width: 820px) { .rrd-gauges { grid-template-columns: minmax(0, 1fr); } }
  .rrd-gauge-hd { display: flex; align-items: baseline; gap: 9px; margin-bottom: 4px; }
  .rrd-gauge-name { font: 700 12px/1.25 var(--font-ui, inherit); color: var(--text); }
  .rrd-gauge-score { font-family: var(--num); font-variant-numeric: tabular-nums;
    font-size: 22px; font-weight: 800; color: var(--rrd-c); line-height: 1; }
  .rrd-gauge-read { font-size: 11px; font-weight: 700; color: var(--rrd-c); }
  .rrd-gauge-chart { max-width: 100%; overflow-x: auto; }
  .rrd-gauge-chart img, .rrd-gauge-chart svg, .rrd-gauge-chart .chart-ph { max-width: 100%; }

  /* ── leaders (clone of .rkc-ldr-*) ────────────────────────────────────────── */
  .rrd-ldr-line { font: 600 12.5px/1.45 var(--font-ui, inherit); color: var(--text); margin-bottom: 10px; }
  .rrd-ldr-rows { display: flex; flex-direction: column; gap: 6px; }
  .rrd-ldr-row { display: grid; grid-template-columns: 58px minmax(0, 1fr) 1fr 54px;
    align-items: center; gap: 9px; }
  /* no magnitude to draw -> the bar column is not emitted at all */
  .rrd-ldr-row.is-plain { grid-template-columns: 58px minmax(0, 1fr) 54px; }
  .rrd-ldr-tkr { font: 700 11px/1 var(--font-mono, ui-monospace, 'SF Mono', monospace);
    color: var(--text); letter-spacing: .02em; }
  .rrd-ldr-name { font-size: 11px; color: var(--muted); overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
  .rrd-ldr-track { height: 9px; border-radius: 5px;
    background: color-mix(in srgb, var(--text) 6%, transparent); overflow: hidden; }
  .rrd-ldr-fill { height: 100%; border-radius: 5px; transform-origin: 0 50%;
    background: linear-gradient(90deg, color-mix(in srgb, var(--rrd-c) 55%, transparent), var(--rrd-c)); }
  .rrd-ldr-val { text-align: right; font: 800 11px/1 var(--font-ui, inherit);
    font-family: var(--num); font-variant-numeric: tabular-nums; color: var(--rrd-c); }
  @media (max-width: 640px) { .rrd-ldr-row { grid-template-columns: 58px minmax(0, 1fr) 54px; }
    .rrd-ldr-row .rrd-ldr-track { display: none; } }

  /* ── risk ladder (clone of #dlg-risk .scare-ladder, §6 of the US modal) ───── */
  .rrd-ladder { display: flex; flex-direction: column; gap: 2px; }
  .rrd-lrow { display: grid; grid-template-columns: minmax(120px, 1.2fr) minmax(0, 1fr) 38px 66px;
    align-items: center; gap: 10px; padding: 7px 0; font-size: 12px;
    border-top: 1px solid color-mix(in srgb, var(--text) 6%, transparent); }
  .rrd-lrow:first-child { border-top: 0; }
  .rrd-lname { color: var(--text); font-weight: 600; }
  .rrd-lscore { text-align: right; font-family: var(--num); font-variant-numeric: tabular-nums;
    font-weight: 800; color: var(--rrd-c); }
  .rrd-lband { justify-self: end; font: 700 9.5px/1 var(--font-ui, inherit); letter-spacing: .05em;
    text-transform: uppercase; padding: 3px 7px; border-radius: 999px; white-space: nowrap;
    color: var(--rrd-c); background: color-mix(in srgb, var(--rrd-c) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--rrd-c) 30%, transparent); }
  html[data-lang="zh"] .rrd-lband { letter-spacing: 0; }
  @media (max-width: 640px) {
    .rrd-lrow { grid-template-columns: minmax(0, 1fr) 38px 62px; }
    .rrd-lrow .rrd-fbar { display: none; }
  }

  /* ── FX rows ──────────────────────────────────────────────────────────────── */
  .rrd-fx { display: flex; flex-direction: column; gap: 2px; }
  .rrd-fxrow { display: grid; grid-template-columns: minmax(110px, 160px) minmax(0, 1fr);
    align-items: center; gap: 12px; padding: 8px 0; font-size: 12px;
    border-top: 1px solid color-mix(in srgb, var(--text) 6%, transparent); }
  .rrd-fxrow:first-child { border-top: 0; }
  .rrd-fxk { color: var(--text); font-weight: 600; }
  .rrd-fxv { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; color: var(--muted); }
  .rrd-fxnum { font-family: var(--num); font-variant-numeric: tabular-nums; font-weight: 700;
    color: var(--text); }

  /* ── merged footer (clone of .rsx-dlg-footer) ─────────────────────────────── */
  .rrd-foot { font-size: 10.5px; line-height: 1.55; color: var(--muted); margin-top: 4px; }

  /* ── the embedded .rrx card, dialog-scoped (mirrors the #dlg-risk overrides) ─
     The card's own stacked prose rows are REBUILT above as tiles / rows, so the
     duplicates are suppressed here ONLY — the shared board default (the .rrx card
     on the china / hk / canada home boards) is untouched. The de-escalation panel
     (.rrx-rec) has no tile twin, so it STAYS. */
  .rrd .rrx { box-shadow: none; border-left-width: 3px;
    background: color-mix(in srgb, var(--rc) 5%, var(--panel));
    border-color: color-mix(in srgb, var(--rc) 22%, var(--line)); }
  .rrd .rrx .rrx-ev, .rrd .rrx .rrx-do, .rrd .rrx .rrx-cgl,
  .rrd .rrx .rrx-fxc, .rrd .rrx .rrx-trk, .rrd .rrx .rrx-audit { display: none; }
  .rrd .rrx .rrx-ramp { padding-top: 22px; }
  .rrd .rrx .rrx-tk { height: 66px; }

  /* header strip */
  .cmd-hero .ms-head { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin: 0 0 4px; }
  .cmd-hero .ms-eyebrow { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
    font-family: var(--num); font-size: 11px; font-weight: 700; letter-spacing: .2em;
    text-transform: uppercase; color: var(--ink-2); margin: 0; }
  html[data-lang="zh"] .cmd-hero .ms-eyebrow { letter-spacing: 0; }
  .cmd-hero .ms-live { width: 7px; height: 7px; border-radius: 50%; background: var(--ms-c); flex: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ms-c) 20%, transparent); }
  .cmd-hero .ms-date { font-family: var(--num); font-size: 11px; letter-spacing: .04em; color: var(--ink-3); white-space: nowrap; }

  /* top: verdict | evidence */
  .cmd-hero .ms-top { display: grid; grid-template-columns: minmax(0, 236px) minmax(0, 1fr); margin-top: 16px; }
  .cmd-hero .ms-verdict { padding-right: 22px; border-right: var(--rule) solid var(--hair); }
  .cmd-hero .ms-evidence { padding-left: 22px; min-width: 0; }
  @media (max-width: 760px) {
    .cmd-hero .ms-top { grid-template-columns: 1fr; }
    .cmd-hero .ms-verdict { padding: 0 0 16px; border-right: 0; border-bottom: var(--rule) solid var(--hair-strong); }
    .cmd-hero .ms-evidence { padding: 16px 0 0; }
  }

  /* verdict column — every rule scoped under .ms-verdict so the hero vitals'
     .v-label / .v-meter are never restyled */
  .cmd-hero .ms-verdict .v-label { font-family: var(--num); font-size: 10px; font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 9px; }
  .cmd-hero .ms-verdict .v-word { font-size: 40px; line-height: .94; font-weight: 800; letter-spacing: -.025em;
    margin: 0; color: var(--ms-c); display: flex; align-items: center; gap: .2em; }
  .cmd-hero .ms-verdict .v-word .arr { font-family: var(--num); font-size: .42em; font-weight: 700; transform: translateY(-.04em); }
  html[data-lang="zh"] .cmd-hero .ms-verdict .v-word { letter-spacing: 0; }
  .cmd-hero .ms-verdict .v-scorerow { display: flex; align-items: baseline; gap: 7px; margin-top: 11px; }
  .cmd-hero .ms-verdict .v-score { font-family: var(--num); font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--ink-1); }
  .cmd-hero .ms-verdict .v-outof { font-family: var(--num); font-size: 13px; color: var(--ink-3); }
  .cmd-hero .ms-verdict .v-meter { margin-top: 12px; height: 6px; border-radius: 3px; position: relative; overflow: hidden;
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--down) 30%, var(--panel2)) 0 42%,
      color-mix(in srgb, var(--warn) 30%, var(--panel2)) 42% 60%,
      color-mix(in srgb, var(--up) 30%, var(--panel2)) 60% 100%); }
  .cmd-hero .ms-verdict .v-meter .tick { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ms-c); border-radius: 2px; box-shadow: 0 0 0 2px var(--panel); }
  .cmd-hero .ms-verdict .v-scale { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--num); font-size: 9.5px; letter-spacing: .02em; color: var(--ink-3); }
  .cmd-hero .ms-verdict .v-thesis { margin: 12px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-1); }
  .cmd-hero .ms-verdict .v-override { margin: 10px 0 0; display: flex; align-items: flex-start; gap: 7px; padding: 8px 11px; border-radius: 7px;
    border: var(--rule) solid color-mix(in srgb, var(--act) 38%, var(--hair)); background: color-mix(in srgb, var(--act) 11%, transparent);
    font-size: 11.5px; line-height: 1.4; color: var(--ink-1); }
  .cmd-hero .ms-verdict .v-override .ic { color: var(--ink-act, var(--act)); flex: none; font-size: 12px; line-height: 1.3; }
  .cmd-hero .ms-verdict .v-flip { margin: 13px 0 0; padding: 8px 11px; border-left: 2px solid var(--warn);
    background: color-mix(in srgb, var(--warn) 7%, transparent); font-size: 12px; line-height: 1.45; color: var(--ink-2); }

  /* evidence matrix — one tight row per factor (arrow · title · bar · score) */
  .cmd-hero .e-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 2px; }
  .cmd-hero .e-title { font-family: var(--num); font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); margin: 0; }
  .cmd-hero .e-cols { font-family: var(--num); font-size: 9.5px; letter-spacing: .06em; color: var(--ink-3); }
  .cmd-hero .ms-f { border-top: var(--rule) solid var(--hair); display: grid; align-items: center;
    grid-template-columns: 14px minmax(0, 1fr) 70px 28px; column-gap: 11px; padding: 6px 3px; }
  .cmd-hero .ms-f.tone-good { --ft: var(--up); }
  .cmd-hero .ms-f.tone-warn { --ft: var(--warn); }
  .cmd-hero .ms-f.tone-bad  { --ft: var(--down); }
  .cmd-hero .ms-f.tone-flat { --ft: var(--ink-3); }
  .cmd-hero .ms-f .f-dir { font-family: var(--num); font-size: 11px; line-height: 1; text-align: center; color: var(--ft); }
  /* the title IS the hover target: reuse .help/.tip but strip the ?-circle to plain dotted text */
  .cmd-hero .ms-f .f-name.help { position: relative; display: block; min-width: 0; width: auto; height: auto;
    border: 0; border-radius: 0; margin: 0; overflow: visible; cursor: help; }
  .cmd-hero .ms-f .f-name .f-txt { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 12.5px; font-weight: 600; color: var(--ink-1);
    text-decoration: underline dotted color-mix(in srgb, var(--ink-3) 55%, transparent); text-underline-offset: 3px; }
  .cmd-hero .ms-f .f-name.help:hover .f-txt { text-decoration-color: var(--ink-2); }
  html[data-lang="zh"] .cmd-hero .ms-f .f-name .f-txt { text-underline-offset: 2px; }
  .cmd-hero .ms-f .f-name .tip { width: 248px; font-weight: 400; }
  .cmd-hero .ms-f .f-tipread { display: block; color: var(--ink-1); line-height: 1.45; margin-bottom: 7px; }
  .cmd-hero .ms-f .f-tipmetrics { display: flex; flex-wrap: wrap; gap: 6px 7px; }
  .cmd-hero .ms-f .f-tone { height: 4px; border-radius: 2px; background: var(--panel2); overflow: hidden; }
  .cmd-hero .ms-f .f-tone i { display: block; height: 100%; border-radius: 2px; background: var(--ft); }
  .cmd-hero .ms-f .f-score { font-family: var(--num); font-size: 15px; font-weight: 700; text-align: right; line-height: 1; color: var(--ft); }
  .cmd-hero .ms-metric { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 9px; background: var(--tile);
    border: var(--rule) solid var(--hair); border-radius: 6px; font-size: 11px; color: var(--ink-3); }
  .cmd-hero .ms-metric b { font-family: var(--num); font-weight: 700; color: var(--ink-1); }
  @media (max-width: 760px) { .cmd-hero .ms-f { grid-template-columns: 14px minmax(0, 1fr) 72px 26px; column-gap: 9px; } }
  @media (max-width: 560px) { .cmd-hero .ms-f .f-score { font-size: 14px; } }

  /* multi-timeframe tape */
  .cmd-hero .ms-tape { margin-top: 16px; padding-top: 13px; border-top: var(--rule) solid var(--hair-strong); }
  .cmd-hero .tape-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
  .cmd-hero .tape-title { display: inline-flex; align-items: center; gap: 7px; font-family: var(--num); font-size: 10px; font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); margin: 0; }
  html[data-lang="zh"] .cmd-hero .tape-title { letter-spacing: 0; }
  .cmd-hero .tape-sub { font-family: var(--num); font-size: 9.5px; letter-spacing: .04em; color: var(--ink-3); }
  .cmd-hero table.ms-tapetbl { width: 100%; border-collapse: collapse; }
  .cmd-hero table.ms-tapetbl th { font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3);
    text-align: center; padding: 6px 6px; border-bottom: var(--rule) solid var(--hair); }
  .cmd-hero table.ms-tapetbl th.l, .cmd-hero table.ms-tapetbl td.l { text-align: left; }
  .cmd-hero table.ms-tapetbl th.r, .cmd-hero table.ms-tapetbl td.r { text-align: right; }
  .cmd-hero table.ms-tapetbl td { padding: 6px 6px; border-bottom: var(--rule) solid var(--hair); }
  .cmd-hero table.ms-tapetbl tr:last-child td { border-bottom: 0; }
  .cmd-hero .t-inst { font-size: 13px; font-weight: 600; color: var(--ink-1); }
  .cmd-hero .ms-cell2 { display: inline-flex; align-items: baseline; gap: 6px; justify-content: center; font-family: var(--num); }
  .cmd-hero .ms-cell2 .ar { font-size: 11px; line-height: 1; }
  .cmd-hero .ms-cell2 .rsi { font-size: 12.5px; color: var(--ink-2); }
  .cmd-hero .ms-cell2.good, .cmd-hero .ms-conf.good { color: var(--ink-up, var(--up)); }
  .cmd-hero .ms-cell2.bad,  .cmd-hero .ms-conf.bad  { color: var(--ink-down, var(--down)); }
  .cmd-hero .ms-cell2.flat, .cmd-hero .ms-conf.warn, .cmd-hero .ms-conf.flat { color: var(--ink-warn, var(--warn)); }
  .cmd-hero .ms-conf { font-size: 12px; font-weight: 700; white-space: nowrap; }
  .cmd-hero .ms-confstrip { display: flex; flex-wrap: wrap; gap: 8px; }
  .cmd-hero .ms-confchip { display: inline-flex; align-items: baseline; gap: 9px; min-width: 0; padding: 7px 10px;
    border: var(--rule) solid var(--hair); border-radius: 8px; background: var(--tile); }
  .cmd-hero .ms-confchip.good { border-color: color-mix(in srgb, var(--up) 32%, var(--hair)); }
  .cmd-hero .ms-confchip.bad { border-color: color-mix(in srgb, var(--down) 32%, var(--hair)); }
  .cmd-hero .ms-confchip.warn { border-color: color-mix(in srgb, var(--warn) 32%, var(--hair)); }
  .cmd-hero .ms-tech { margin-top: 12px; padding-top: 12px; border-top: var(--rule) solid var(--hair); }
  .cmd-hero .ms-tech-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; font-weight: 700; }
  .cmd-hero .ms-tech-head .note { font-weight: 400; text-transform: none; }
  .cmd-hero .ms-tech-stat { font-family: var(--num); font-size: 17px; font-weight: 800; color: var(--ink-1); }
  .cmd-hero .ms-tech .mtf-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
  @media (max-width: 560px) {
    .cmd-hero table.ms-tapetbl th, .cmd-hero table.ms-tapetbl td { padding-left: 3px; padding-right: 3px; }
    .cmd-hero .ms-cell2 .rsi { display: none; }
    .cmd-hero .ms-confchip { width: 100%; justify-content: space-between; }
  }
  .cmd-hero .ms-caveat { margin: 9px 0 0; font-size: 10.5px; line-height: 1.45; color: var(--ink-3); }

  /* divider into the macro-backdrop column (full-width label on mobile, hidden on the desktop grid) */
  .cmd-hero .ms-divider { display: flex; align-items: center; gap: 12px; font-family: var(--num);
    font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
  .cmd-hero .ms-divider::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
  html[data-lang="zh"] .cmd-hero .ms-divider { letter-spacing: 0; }
  @media (prefers-reduced-motion: reduce) { .cmd-hero .qm { transition: none; } }
  body.page-canada { padding-top: 24px; }
  /* defensive: if mx5 wrap nests inside .grid, force block layout */
  body.page-canada .grid { display: block; }




  /* ── W8-G: Standout table view (CA port of W8-E) ──────────────────────── */
  .st-view-toggle { display:inline-flex; gap:3px; padding:3px; border-radius:8px;
    background:var(--panel2,color-mix(in srgb,var(--muted) 10%,var(--panel)));
    border:1px solid var(--line); margin-left:10px; vertical-align:middle; }
  .st-view-toggle button { font:inherit; font-size:12px; font-weight:700; cursor:pointer;
    border:1px solid transparent; background:transparent; color:var(--muted);
    padding:4px 9px; border-radius:5px; line-height:1; transition:all .12s; }
  .st-view-toggle button[aria-selected="true"] { background:var(--panel); color:var(--text);
    border-color:var(--line); box-shadow:0 1px 3px rgba(0,0,0,.1); }
  #stocktable-wrap { display:none; }
  #standouts.st-table-mode #stocktable-wrap { display:block; }
  #standouts.st-table-mode .nb-grid-section { display:none; }
  #st-count-chips { display:inline-flex; gap:5px; flex-wrap:wrap; align-items:center; margin:8px 0; }
  .st-chip { display:inline-block; font-size:10px; font-weight:700; padding:2px 9px;
    border-radius:999px; white-space:nowrap; }
  .st-chip-entry { background:color-mix(in srgb,var(--up) 14%,transparent);
    color:var(--ink-up, var(--up)); border:1px solid color-mix(in srgb,var(--up) 35%,transparent); }
  .st-chip-ran { background:color-mix(in srgb,var(--muted) 12%,transparent);
    color:var(--muted); border:1px solid var(--line); }
  .st-chip-rip { background:color-mix(in srgb,var(--link) 12%,transparent);
    color:var(--ink-link, var(--link)); border:1px solid color-mix(in srgb,var(--link) 30%,transparent); }
  .st-chip-knife { background:color-mix(in srgb,var(--down) 12%,transparent);
    color:var(--ink-down, var(--down)); border:1px solid color-mix(in srgb,var(--down) 25%,transparent); }
  /* filter-row + column-chooser chrome (.stf-*) is injected by stocktable.js since v3 */
  .st-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%;
    border:1px solid var(--line); border-radius:9px; }
  .st-table { border-collapse:collapse; width:100%; font-size:12px;
    font-variant-numeric:tabular-nums; }
  .st-table thead { position:sticky; top:0; z-index:4;
    background:var(--panel2,color-mix(in srgb,var(--muted) 9%,var(--panel))); }
  .st-table th { padding:7px 10px; font-size:11px; font-weight:700; color:var(--muted);
    text-align:left; white-space:nowrap; border-bottom:2px solid var(--line);
    user-select:none; }
  .st-table th.st-sortable { cursor:pointer; }
  .st-table th.st-sortable:hover { color:var(--text); }
  .st-table td { padding:6px 10px; border-bottom:1px solid var(--line);
    text-align:left; white-space:nowrap; vertical-align:middle; }
  .st-table td.st-r, .st-table th.st-r { text-align:right; }
  .st-table tbody tr:last-child td { border-bottom:none; }
  .st-table tbody tr:hover td { background:color-mix(in srgb,var(--link) 5%,transparent); }
  .st-sticky-col { position:sticky; left:0; z-index:2; background:var(--panel); }
  thead .st-sticky-col { z-index:5;
    background:var(--panel2,color-mix(in srgb,var(--muted) 9%,var(--panel))); }
  .st-row-entry td { background:color-mix(in srgb,var(--up) 4%,transparent); }
  .st-row-entry td.st-sticky-col { background:color-mix(in srgb,var(--up) 8%,var(--panel)); }
  .st-row-entry td:first-child { box-shadow:inset 3px 0 0 var(--up); }
  .st-row-ran td:first-child { box-shadow:inset 3px 0 0 var(--muted); }
  .st-sarrow { font-size:8px; margin-left:2px; opacity:.28; }
  .st-sarrow-idle { font-size:8px; }
  .st-table th:has(.st-sarrow:not(.st-sarrow-idle)) .st-sarrow { opacity:.9; color:var(--ink-link, var(--link)); }
  .st-pos { color:var(--ink-up, var(--up)); font-weight:600; }
  .st-neg { color:var(--ink-down, var(--down)); font-weight:600; }
  .st-muted { color:var(--muted); }
  .st-new-dot::before { content:"NEW"; display:inline-block; font-size:8px; font-weight:800;
    background:var(--up); color:#fff; padding:0 4px; border-radius:4px; margin-right:4px;
    vertical-align:1px; }
  html[data-lang="zh"] .st-new-dot::before { content:"新"; font-size:10px; }
  .st-th-tip { display:inline-flex; align-items:center; justify-content:center;
    width:13px; height:13px; border-radius:50%; border:1px solid var(--muted);
    color:var(--muted); font-size:9px; font-weight:700; cursor:help;
    position:relative; vertical-align:1px; margin-left:3px; }
  .st-th-tip::after { content:attr(data-tip-en); display:none; position:absolute;
    bottom:150%; left:50%; transform:translateX(-50%); width:220px; max-width:90vw;
    background:var(--panel); border:1px solid var(--line); border-radius:8px;
    padding:7px 10px; font-size:11px; font-weight:400; color:var(--text); text-align:left;
    white-space:normal; box-shadow:var(--popover-shadow,0 3px 12px rgba(0,0,0,.18)); z-index:30; }
  html[data-lang="zh"] .st-th-tip::after { content:attr(data-tip-zh); }
  .st-th-tip:hover::after { display:block; }
  @media (max-width:680px) {
    .st-table { font-size:11px; }
    .st-table td, .st-table th { padding:5px 7px; }
  }


/* light: bloom off (DESIGN_DOCTRINE §5.8) — a coloured glow behind text is a jewel on graphite
     and a stain on white; dark keeps every one of these). */
html[data-theme="light"] :is(
  body.page-canada .cax-big-score,
  body.page-canada .ms-green .cax-big-score,
  body.page-canada .ms-red .cax-big-score
) { text-shadow:none; }
html[data-lang="zh"][data-theme="light"] body.page-canada .ms-green .cax-big-score { text-shadow:none; }
html[data-lang="zh"][data-theme="light"] body.page-canada .ms-red .cax-big-score { text-shadow:none; }