* { box-sizing: border-box; }
  body { background: var(--bg); color: var(--text); font: 14px/1.5 -apple-system,
         "Segoe UI", Roboto, Helvetica, sans-serif; margin: 0; padding: 26px 18px 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; color: var(--text); }
  h2 { font-size: 13px; margin: 0 0 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
  .grid { display: grid; gap: 14px; grid-template-columns: repeat(12, 1fr); }
  .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 15px 17px; }
  .span12 { grid-column: span 12; } .span8 { grid-column: span 8; }
  .span6 { grid-column: span 6; } .span4 { grid-column: span 4; }
  @media (max-width: 900px) { .span8, .span6, .span4 { grid-column: span 12; } }

  /* regime hero */
  .hero { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
  .quad-badge { font-size: 22px; font-weight: 800; padding: 8px 18px; border-radius: 13px; color: #fff; }
  .quad-Q1 { background: var(--q1); } .quad-Q2 { background: var(--q2); color: #1a1a1a; }
  .quad-Q3 { background: var(--q3); } .quad-Q4 { background: var(--q4); }
  .metric { display: flex; flex-direction: column; gap: 1px; }
  .metric .v { font-size: 18px; font-weight: 700; color: var(--text); }
  .metric .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
  .chip { display: inline-block; padding: 3px 11px; border-radius: 12px; font-weight: 600; font-size: 12.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)); }
  .c-up { --c: var(--up); } .c-down { --c: var(--down); } .c-warn { --c: var(--warn); }
  .c-info { --c: var(--info); } .c-muted { --c: var(--muted); }

  /* global-risk-beta regime tilt (amplifiers vs cushions) */
  .gb-tilt { display:inline-block; font-size:11px; font-weight:700; padding:2px 8px;
             border-radius:9px; border:1px solid var(--line); white-space:nowrap; }
  .gb-favored { background:color-mix(in srgb,var(--up) 16%,transparent); color:var(--ink-up, var(--up));
                border-color:color-mix(in srgb,var(--up) 40%,transparent); }
  .gb-exposed { background:color-mix(in srgb,var(--down) 16%,transparent); color:var(--ink-down, var(--down));
                border-color:color-mix(in srgb,var(--down) 40%,transparent); }
  .gb-lag,.gb-neutral { background:var(--panel2,var(--panel)); color:var(--muted); }
  /* consolidated stock-screener: segmented mode toggle (parallels china.html) */
  .sb-seg { display:inline-flex; flex-wrap:wrap; gap:4px; padding:4px; border-radius:11px;
            background:var(--panel2,color-mix(in srgb,var(--muted) 10%,var(--panel)));
            border:1px solid var(--line); margin:2px 0 14px; }
  .sb-seg button { font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
            border:1px solid transparent; background:transparent; color:var(--muted);
            padding:6px 13px; border-radius:8px; line-height:1.2; transition:all .14s ease;
            white-space:nowrap; }
  .sb-seg button:hover { color:var(--text); }
  .sb-seg button[aria-selected="true"] { background:var(--panel); color:var(--text);
            border-color:var(--line); box-shadow:var(--popover-shadow,0 1px 3px rgba(0,0,0,.12)); }
  .sb-cap { margin:0 0 12px; text-transform:none; line-height:1.55; }
  .sb-table th.th-sort { cursor:pointer; user-select:none; }
  .sb-table th.th-sort:hover { color:var(--text); }
  .sb-table th.sorted { color:var(--text); }
  .sb-table .sarrow { font-size:9px; opacity:.32; margin-left:3px; font-weight:700; }
  .sb-table th.sorted .sarrow { opacity:.9; color:var(--ink-link, var(--link)); }

  /* global risk overlay (HK-specific) */
  .risk-badge { font-size: 20px; font-weight: 800; padding: 7px 16px; border-radius: 12px;
                background: color-mix(in srgb, var(--c, var(--muted)) 20%, var(--panel));
                color: color-mix(in srgb, var(--c, var(--muted)) 88%, var(--text)); }
  .peg-wrap { margin: 14px 0 4px; }
  .peg-gauge { position: relative; height: 8px; border-radius: 5px; margin: 7px 0 4px;
               background: linear-gradient(90deg, var(--up) 0%, color-mix(in srgb, var(--muted) 60%, var(--panel)) 50%, var(--down) 100%); }
  .peg-marker { position: absolute; top: -4px; width: 4px; height: 16px; border-radius: 3px;
                background: var(--text); transform: translateX(-50%); box-shadow: 0 0 0 2px var(--panel); }
  .peg-ends { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); }
  .factor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 7px 14px; margin-top: 12px; }
  .factor { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
  .factor .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
                 background: color-mix(in srgb, var(--c, var(--muted)) 85%, transparent); }
  .factor .fz { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }

  /* regime hero: growth/inflation gauges + quad map + meaning (US/China parity) */
  .herogauges { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; max-width: 600px; margin: 18px 0 2px; }
  .hg-l { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; margin-bottom: 6px; }
  .hg-l .hv { font-variant-numeric: tabular-nums; }
  .qmeaning { font-size: 13.5px; line-height: 1.55; margin: 16px 0 2px; color: var(--text); }
  .regwatch { font-size: 13px; font-weight: 600; margin: 8px 0 0; padding: 7px 11px; border-radius: 9px;
              background: color-mix(in srgb, var(--warn) 14%, var(--panel)); color: color-mix(in srgb, var(--warn) 88%, var(--text)); }
  .qmap { display: grid; grid-template-columns: 92px 1fr 1fr; gap: 8px; margin: 18px 0 4px; }
  .qmap .ax { font-size: 11px; color: var(--muted); display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.3; }
  .qmap .cell { border-radius: 12px; padding: 14px 18px; color: #fff; font-weight: 700; font-size: 16px; opacity: .4;
                display: flex; flex-direction: column; justify-content: center; min-height: 132px; transition: opacity .15s; }
  .qmap .cell small { display: block; font-weight: 500; font-size: 11.5px; opacity: .92; margin-top: 6px; line-height: 1.4; }
  .qmap .cell.cur { opacity: 1; box-shadow: inset 0 0 0 2px var(--text); }
  @media (max-width: 900px) { .qmap .cell { min-height: 92px; font-size: 14px; } }
  .qmap .q1 { background: var(--q1); } .qmap .q2 { background: var(--q2); color: #1a1a1a; }
  .qmap .q3 { background: var(--q3); } .qmap .q4 { background: var(--q4); }

  table { border-collapse: collapse; width: 100%; font-size: 13px; }
  th, td { text-align: right; padding: 5px 8px; border-bottom: 1px solid var(--line); }
  th { color: var(--muted); font-weight: 500; }
  th:first-child, td:first-child, td.l, th.l { text-align: left; }
  .pos { color: var(--ink-up, var(--up)); } .neg { color: var(--ink-down, var(--down)); }
  .lad { display: inline-block; padding: 1px 9px; border-radius: 10px; font-size: 11.5px; font-weight: 700;
         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); }
  .agechip { font-size: 10.5px; font-weight: 700; color: var(--muted); white-space: nowrap; margin-left: 5px; }
  .note { font-size: 12.5px; color: var(--muted); line-height: 1.6; }
  .sub { font-size: 11.5px; color: var(--muted); }
  .mtf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
  .mtf-card .mtf-name { font-weight: 700; font-size: 13.5px; margin-bottom: 6px; color: var(--text); }
  h3 { font-size: 12.5px; margin: 12px 0 6px; color: var(--text); }

  /* ---- playbook: lifespan bar + next-quad odds + exposure dial -------------- */
  .lifebar { position: relative; height: 16px; border-radius: 8px; overflow: hidden; margin: 12px 0 3px; background: var(--panel2); }
  .lifebar .zone { position: absolute; top: 0; height: 100%; }
  .lifebar .marker { position: absolute; top: -2px; height: calc(100% + 4px); width: 3px; background: var(--text); border-radius: 2px; box-shadow: 0 0 0 1px var(--panel); }
  .lifelabels { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); }
  .prob { display: flex; align-items: center; gap: 9px; margin: 7px 0; }
  .prob .nm { flex: 0 0 96px; font-size: 12.5px; font-weight: 600; }
  .prob .bar { flex: 1; height: 14px; background: var(--panel2); border-radius: 7px; overflow: hidden; }
  .prob .bar i { display: block; height: 100%; border-radius: 7px; }
  .prob .pc { flex: 0 0 38px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
  .pdial { display: flex; gap: 4px; margin: 6px 0 12px; }
  .pdial > span { flex: 1; text-align: center; font-size: 11.5px; font-weight: 700; padding: 7px 4px; border-radius: 8px;
                background: var(--panel2); color: var(--muted); border: 1px solid var(--line); }
  .pdial .on-def { background: color-mix(in srgb, var(--down) 80%, var(--panel)); color: #fff; border-color: transparent; }
  .pdial .on-car { background: color-mix(in srgb, var(--warn) 75%, var(--panel)); color: #1a1a1a; border-color: transparent; }
  .pdial .on-neu { background: color-mix(in srgb, var(--muted) 55%, var(--panel)); color: var(--text); border-color: transparent; }
  .pdial .on-con { background: color-mix(in srgb, var(--up) 62%, var(--panel)); color: #fff; border-color: transparent; }
  .pdial .on-agg { background: color-mix(in srgb, var(--up) 88%, var(--panel)); color: #fff; border-color: transparent; }
  .reason { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; margin: 5px 0; line-height: 1.45; }
  .sig { flex: none; width: 17px; height: 17px; border-radius: 50%; font-size: 11px; font-weight: 800; line-height: 17px; text-align: center; }
  .sig-p { background: color-mix(in srgb, var(--up) 22%, var(--panel)); color: var(--ink-up, var(--up)); }
  .sig-m { background: color-mix(in srgb, var(--down) 22%, var(--panel)); color: var(--ink-down, var(--down)); }
  .sig-i { background: color-mix(in srgb, var(--muted) 22%, var(--panel)); color: var(--muted); }
  .pcard { background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; margin: 6px 0; font-size: 12.5px; }
  .calltag { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 8px; margin-right: 6px; text-transform: uppercase; letter-spacing: .03em; }
  .tag-pref { background: color-mix(in srgb, var(--info) 18%, var(--panel)); color: color-mix(in srgb, var(--info) 85%, var(--text)); }
  .tag-lead { background: color-mix(in srgb, var(--up) 18%, var(--panel)); color: color-mix(in srgb, var(--up) 85%, var(--text)); }
  .tag-avoid { background: color-mix(in srgb, var(--down) 18%, var(--panel)); color: color-mix(in srgb, var(--down) 85%, var(--text)); }
  .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:4px; }
  .help .tip { display:none; position:absolute; bottom:140%; left:50%; transform:translateX(-50%); width:330px; background:var(--panel);
               border:1px solid var(--line); padding:9px 11px; border-radius:8px; z-index:60; font-size:12px; line-height:1.45; color:var(--text);
               font-weight:400; text-transform:none; letter-spacing:normal; box-shadow:var(--popover-shadow);
               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; }
  .stat-row { display:flex; flex-wrap:wrap; gap:18px; align-items:baseline; margin:2px 0 10px; }
  .stat-row .v { font-size:22px; font-weight:800; color:var(--text); }
  /* .stat-row .v is more specific than the generic .pos/.neg — restate direction color
     at higher specificity so flow/premium stats read green/red (and zh-flip via tokens) */
  .stat-row .v.pos { color: var(--ink-up, var(--up)); } .stat-row .v.neg { color: var(--ink-down, var(--down)); }
  table.sortable th.th-sort { cursor: pointer; user-select: none; }
  table.sortable th.sorted { color: var(--text); }
  table.sortable th .sarrow { font-size: 9px; opacity: .32; margin-left: 3px; font-weight: 700; }
  table.sortable th.sorted .sarrow { opacity: .9; color: var(--ink-link, var(--link)); }

  /* ---- regime time machine (timemachine.js) -------------------------------- */
  #time-machine .tm-wrap { position: relative; margin: 4px 0 2px; }
  .tm-canvas { display: block; width: 100%; height: 56px; cursor: ew-resize; border-radius: 8px; touch-action: none; }
  .tm-range { -webkit-appearance: none; appearance: none; width: 100%; height: 16px; background: transparent; margin: 2px 0 0; cursor: ew-resize; }
  .tm-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--line); }
  .tm-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--text); border: 2px solid var(--panel); box-shadow: 0 1px 4px rgba(0,0,0,.35); }
  .tm-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--text); border: 2px solid var(--panel); }
  .tm-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 8px 0 12px; }
  .tm-presets { display: inline-flex; flex-wrap: wrap; gap: 6px; }
  .tm-btn { font: inherit; font-size: 12px; font-weight: 600; color: var(--text); background: var(--panel2); border: 1px solid var(--line); border-radius: 7px; padding: 5px 11px; cursor: pointer; }
  .tm-btn:hover { border-color: var(--link); }
  .tm-play { display: inline-flex; align-items: center; gap: 7px; }
  .tm-play-ico { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--text); }
  .tm-play.is-playing .tm-play-ico { width: 9px; height: 11px; border: none; border-left: 3px solid var(--text); border-right: 3px solid var(--text); }
  .tm-readout { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
  .tm-asof { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; }
  .tm-date { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .tm-state-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 10px; }
  .tm-state-tag.is-live { color: color-mix(in srgb, var(--up) 85%, var(--text)); background: color-mix(in srgb, var(--up) 16%, var(--panel)); }
  .tm-state-tag.is-hist { color: var(--muted); background: color-mix(in srgb, var(--muted) 16%, var(--panel)); }
  .tm-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
  .tm-gauges { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; margin: 12px 0 4px; }
  @media (max-width: 640px) { .tm-gauges { grid-template-columns: 1fr; } }
  .tm-glabel { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 600; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
  .tm-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .badge { display: inline-block; padding: 3px 11px; border-radius: 11px; font-weight: 700; font-size: 12.5px; }
  /* per-quad ink/fill matrix — same recipe as dashboard.html.j2 small badges
     (13px needs 4.5:1; green/gold carry near-black ink, blue/light-green deepen
     the fill; zh rules after light so the q1/q3 hue swap wins ties). */
  .badge.quad-Q1 { background: var(--q1); color: #1a1a1a; } .badge.quad-Q2 { background: var(--q2); color: #1a1a1a; }
  .badge.quad-Q3 { background: var(--q3); color: #fff; } .badge.quad-Q4 { background: var(--q4); color: #fff; }
  html:not([data-theme="light"]) .badge.quad-Q4 { background: color-mix(in srgb, var(--q4) 88%, var(--bg)); }
  html[data-theme="light"] .badge.quad-Q1 { background: color-mix(in srgb, var(--q1) 90%, var(--text)); color: #fff; }
  html[data-lang="zh"] .badge.quad-Q1 { background: var(--q1); color: #fff; }
  html[data-lang="zh"] .badge.quad-Q3 { color: #1a1a1a; }
  html[data-theme="light"][data-lang="zh"] .badge.quad-Q3 { background: color-mix(in srgb, var(--q3) 90%, var(--text)); color: #fff; }
  .badge.state-STABLE { background: color-mix(in srgb, var(--muted) 16%, var(--panel)); color: color-mix(in srgb, var(--muted) 82%, var(--text)); }
  .kv { font-size: 12.5px; color: var(--muted); } .kv b { color: var(--text); font-variant-numeric: tabular-nums; }
  .gauge { position: relative; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--down), var(--line) 50%, var(--up)); }
  .gauge i { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--text); border: 2px solid var(--panel); transform: translate(-50%,-50%); }
  .foot { margin-top: 26px; color: var(--muted); font-size: 12px; text-align: center; line-height: 1.7; }
  /* nav split-dropdown (macro / stocks / lookup) */
  .nav-dd { position: relative; }
  .nav-dd .caret { font-size: 9px; opacity: .6; }
  .nav-dd-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 210px; background: var(--panel);
    border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 12px 34px rgba(0,0,0,.28); padding: 6px;
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s, transform .16s, visibility .16s; z-index: 70; }
  .nav-dd:hover > .nav-dd-menu, .nav-dd:focus-within > .nav-dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-dd-menu a { display: block; padding: 7px 10px; border-radius: 8px; font-size: 13px; color: var(--muted); text-decoration: none; white-space: nowrap; }
  .nav-dd-menu a:hover, .nav-dd-menu a.active { background: var(--panel2); color: var(--text); }
  /* ---- standout-stock cards (mirror of the US dashboard) -------------------- */
  .nch { display: block; width: 100%; margin: 7px 0 5px; border-radius: 5px; background: var(--panel2); }
  .nbgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 10px; margin-top: 11px; }
  /* 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). Cards are already overflow-guarded + compact. */
  @media (max-width:680px){
    .nbgrid[data-showmore-rows]{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
    .nbgrid[data-showmore-rows] .nb-tk{ font-size:13px; }
    .nbgrid[data-showmore-rows] .nb-px{ font-size:12px; }
    /* let the header wrap so the signal badge + price drop to a new line instead of being
       clipped by the card's overflow:hidden when the column is this narrow. */
    .nbgrid[data-showmore-rows] .nb-top{ flex-wrap:wrap; row-gap:2px; }
  }
  a.nbcard { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px;
            padding: 9px 11px 10px; position: relative; overflow: hidden;
            display: flex; flex-direction: column; gap: 4px; color: var(--text);
            transition: transform .12s, box-shadow .12s, border-color .12s; }
  a.nbcard:hover { transform: translateY(-2px); box-shadow: 0 5px 18px rgba(0,0,0,.22); border-color: var(--link); }
  /* state accent as a TOP gradient stripe (RIPENING-shelf idiom) — not a left border.
     position/clip live on .nbcard (not a.nbcard): div.nbcard variants (venue-demand
     picks) must contain their own absolute stripe, else it escapes to an ancestor. */
  .nbcard { position: relative; overflow: hidden; }
  .nbcard::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; pointer-events: none;
                    background: linear-gradient(90deg, var(--muted), transparent); opacity: .6; }
  .nbcard.nb-up::before { background: linear-gradient(90deg, var(--up), color-mix(in srgb, var(--up) 30%, transparent)); opacity: 1; }
  .nbcard.nb-down::before { background: linear-gradient(90deg, var(--down), color-mix(in srgb, var(--down) 30%, transparent)); opacity: 1; }
  .nbcard.nb-caution::before { background: linear-gradient(90deg, var(--warn), color-mix(in srgb, var(--warn) 30%, transparent)); opacity: 1; }
  .nb-top { display: flex; align-items: baseline; gap: 6px; }
  .nb-tk { font-weight: 800; font-size: 14px; color: var(--text); letter-spacing: .01em; }
  .nb-nm { font-size: 10px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
  .nb-px { font-weight: 700; font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .nb-sub { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); }
  /* ripe-list card lead (§7.1) + group / entry-window / port chips (§5.0) */
  .nb-lead { font-size: 11px; line-height: 1.45; color: var(--fg); margin: 5px 0 3px; font-weight: 600; }
  .nb-ripe { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 0 0 3px; }
  .nb-ripe span { font-size: 9px; font-weight: 800; padding: 1px 6px; border-radius: 7px; letter-spacing: .01em; border: 1px solid var(--line); }
  .nb-grp.grp-open { color: var(--ink-up, var(--up)); border-color: color-mix(in srgb, var(--up) 40%, var(--line)); background: color-mix(in srgb, var(--up) 10%, var(--panel)); }
  .nb-grp.grp-set { color: var(--ink-warn, var(--warn)); border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); background: color-mix(in srgb, var(--warn) 9%, var(--panel)); }
  .nb-ewin { color: var(--muted); }
  .nb-ewin.ew-open-now { color: var(--ink-up, var(--up)); }
  .nb-port.pt-wash { color: var(--ink-link, var(--link)); border-color: color-mix(in srgb, var(--link) 35%, var(--line)); }
  .nb-port.pt-ext { color: var(--ink-down, var(--down)); border-color: color-mix(in srgb, var(--down) 35%, var(--line)); }
  /* data-health banner (§5.5) */
  .health-banner { border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line)); background: color-mix(in srgb, var(--warn) 8%, var(--panel)); }
  .health-banner .hb-h { margin: 0 0 4px; font-weight: 800; color: var(--ink-warn, var(--warn)); text-transform: none; }
  .health-banner .hb-list { margin: 0; padding-left: 18px; }
  .health-banner .hb-item { font-size: 11.5px; line-height: 1.6; color: var(--fg); }
  /* freshness sentinel — stale = loud red panel; degraded = one thin amber line */
  .hk-fresh-stale { border: 1px solid color-mix(in srgb, var(--act) 50%, var(--line)); background: color-mix(in srgb, var(--act) 7%, var(--panel)); }
  .hk-fresh-stale .hb-h { margin: 0 0 5px; font-weight: 800; color: var(--ink-act, var(--act)); text-transform: none; }
  .hk-fresh-stale .hb-msg { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--fg); }
  .hk-fresh-stale .hb-exp { margin: 4px 0 0; font-size: 11px; color: var(--muted); }
  .hk-fresh-degraded { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; font-size: 12px; line-height: 1.4;
    color: color-mix(in srgb, var(--warn) 85%, var(--fg)); border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--line)); background: color-mix(in srgb, var(--warn) 7%, var(--panel)); }
  .hk-fresh-degraded .hfd-i { color: var(--ink-warn, var(--warn)); font-size: 13px; }
  .nbcard .nch { background: transparent; margin: 4px 0 2px; }
  .nb-bot { display: flex; align-items: center; gap: 6px; margin-top: 1px; }
  .nb-state { font-size: 10px; font-weight: 800; letter-spacing: .02em; padding: 1px 7px; border-radius: 8px; }
  .nb-up .nb-state { color: var(--ink-up, var(--up)); background: color-mix(in srgb, var(--up) 15%, var(--panel)); }
  .nb-down .nb-state { color: var(--ink-down, var(--down)); background: color-mix(in srgb, var(--down) 15%, var(--panel)); }
  .nb-caution .nb-state { color: var(--ink-warn, var(--warn)); background: color-mix(in srgb, var(--warn) 15%, var(--panel)); }
  .nb-alpha { display: flex; align-items: center; gap: 6px; font-size: 9.5px; margin-top: 2px; flex-wrap: wrap; }
  .nb-az { font-weight: 800; font-variant-numeric: tabular-nums; padding: 0 5px; border-radius: 7px;
           background: var(--panel); border: 1px solid var(--line); color: var(--muted); }
  .nb-az.az-up { color: var(--ink-up, var(--up)); border-color: color-mix(in srgb, var(--up) 38%, var(--line)); }
  .nb-az.az-dn { color: var(--ink-down, var(--down)); border-color: color-mix(in srgb, var(--down) 38%, var(--line)); }
  .nb-rk { color: var(--muted); font-variant-numeric: tabular-nums; }
  .nb-ent { font-weight: 700; padding: 0 5px; border-radius: 7px; }
  .ent-good { color: var(--ink-up, var(--up)); background: color-mix(in srgb, var(--up) 14%, var(--panel)); }
  .ent-warn { color: var(--ink-warn, var(--warn)); background: color-mix(in srgb, var(--warn) 16%, var(--panel)); }
  /* dark-zh: red-on-red-tint lands at 4.41:1 on the 14% tint; thin to 8% (W3 lever). */
  html[data-lang="zh"]:not([data-theme="light"]) .ent-good { background: color-mix(in srgb, var(--up) 8%, var(--panel)); }

  /* ═══ HK BOARD RESURRECTION — priority display layer (hk_prophet_v1, 2026-08-02) ═══
     research/HK_BOARD_RESURRECTION_MASTERPLAN_BY_FABLE.md §0 G1/G4/G9.

     PORTED, NOT DESIGNED. Every rule below is the shipped US board's (#4331,
     templates/dashboard.html.j2) with the panel id swapped — same tokens, same
     geometry, same interaction, same words for the same states. HK is the third
     board on this idiom; a third dialect of it would cost the reader more than
     it could ever buy. The only HK-specific decision is WHAT the theme slot
     names (the hk_leadership cohort, fenced display-tier — see the marks row).

     Everything here renders ONLY when the artifact carries row.stage. A pre-v1
     hk_standouts.json (which is every artifact until the first nightly after the
     engine lane merges) takes the untouched flat path and renders unchanged.

     ── stage-bucket headings ────────────────────────────────────────────────
     The board's PRIMARY structure, so they carry more presence than a hairline:
     a coloured left bar plus a tint fading out to the right. The bar is the
     non-verbal encoding of the bucket and the label IS the stance — "Live now",
     "Ran — don't chase" are complete instructions on their own. --sgc carries
     the tone so one rule set serves all five buckets. Tones are --pv-* tokens and
     follow the active language convention: green-up/red-down in English,
     red-up/green-down in Chinese — except the two direction-NEUTRAL tones
     (--pv-wait, --muted), which mean the same thing in both and are the right home
     for a stance with no direction in it. */
  .nb-stage-hd { grid-column: 1 / -1; display: flex; align-items: baseline; flex-wrap: wrap;
                 gap: 3px 9px; margin: 15px 0 4px; padding: 5px 11px 5px 9px;
                 border-left: 3px solid var(--sgc, var(--muted)); border-radius: 0 8px 8px 0;
                 background: linear-gradient(90deg,
                   color-mix(in srgb, var(--sgc, var(--muted)) 12%, transparent), transparent 62%); }
  .nb-stage-hd:first-child { margin-top: 2px; }
  .nb-stage-hd .sh-l { font-size: 11.5px; font-weight: 800; letter-spacing: .05em;
                 text-transform: uppercase;
                 color: color-mix(in srgb, var(--sgc, var(--muted)) 52%, var(--text)); }
  .nb-stage-hd .sh-n { font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums;
                 padding: 1px 7px; border-radius: 999px;
                 background: color-mix(in srgb, var(--sgc, var(--muted)) 17%, transparent);
                 color: color-mix(in srgb, var(--sgc, var(--muted)) 55%, var(--text)); }
  .nb-stage-hd .sh-s { font-size: 11px; font-weight: 500; color: var(--muted);
                 text-transform: none; letter-spacing: 0; }
  html[data-lang="zh"] .nb-stage-hd .sh-l { letter-spacing: 0; }
  .sg-live       { --sgc: var(--pv-buy); }
  .sg-setting_up { --sgc: var(--pv-near); }
  .sg-ran        { --sgc: var(--muted); }
  /* Basing is the "watch — don't chase" shelf, so it takes the wait tone, not the
     avoid tone it used to inherit by sitting inside Blocked. --pv-wait is amber and
     is deliberately one of the two verb tones the zh 红涨绿跌 block does NOT remap
     (theme.css) — a directionless stance must read the same in both languages. */
  .sg-basing     { --sgc: var(--pv-wait); }
  .sg-blocked    { --sgc: var(--pv-avoid); }

  /* ── stage filter chips ──────────────────────────────────────────────────
     Real button elements with aria-pressed (a toggle group, not tabs — there is
     no tabpanel), count pills matching the stage headings so the panel counts one
     way throughout. Lives INSIDE .nb-grid-section so HK's table-mode toggle
     hides it with the grid it filters. */
  .pbf-bar { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 11px;
             background: var(--panel2); border: 1px solid var(--line); margin: 8px 0 2px; }
  .pbf-bar button { font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
             display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
             border: 1px solid transparent; background: transparent; color: var(--muted);
             padding: 6px 13px; border-radius: 8px; line-height: 1.2;
             -webkit-tap-highlight-color: transparent;
             transition: color .14s ease, background .14s ease, border-color .14s ease; }
  .pbf-bar button:hover { color: var(--text); }
  .pbf-bar button:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
  .pbf-bar button[aria-pressed="true"] { background: var(--panel); color: var(--text);
             border-color: var(--line); box-shadow: var(--popover-shadow, 0 1px 3px rgba(0,0,0,.12)); }
  .pbf-n { font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums;
           padding: 1px 7px; border-radius: 999px;
           background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--muted); }
  .pbf-bar button[aria-pressed="true"] .pbf-n {
           background: color-mix(in srgb, var(--link) 16%, transparent); color: var(--ink-link, var(--link)); }
  @media (max-width: 680px) { .pbf-bar button { min-height: 44px; padding: 6px 14px; font-size: 13px; } }
  /* the polite result announcement — visible to assistive tech only */
  .pbf-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
              overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

  /* filter visibility. The hide half and the reveal half target DISJOINT sets
     (`:not([data-stage=X])` vs `[data-stage=X]`), so they never fight on
     specificity. The reveal half exists because .sm-hidden is
     `display:none!important` — without it, filtering to a bucket that sits below
     the show-more fold would show an EMPTY board. While a bucket is filtered the
     show-more bar is hidden too: its "Showing 12 of 40" counts the unfiltered
     board. `:not(.st-table-mode)` is the HK-only addition — the table view has
     its own row filtering and must not inherit a stale grid facet. */
  #standouts:not(.st-table-mode)[data-stagef="live"]       [data-stage]:not([data-stage="live"]),
  #standouts:not(.st-table-mode)[data-stagef="setting_up"] [data-stage]:not([data-stage="setting_up"]),
  #standouts:not(.st-table-mode)[data-stagef="ran"]        [data-stage]:not([data-stage="ran"]),
  #standouts:not(.st-table-mode)[data-stagef="basing"]     [data-stage]:not([data-stage="basing"]),
  #standouts:not(.st-table-mode)[data-stagef="blocked"]    [data-stage]:not([data-stage="blocked"]) { display: none !important; }
  #standouts:not(.st-table-mode)[data-stagef="live"]       .sm-hidden[data-stage="live"],
  #standouts:not(.st-table-mode)[data-stagef="setting_up"] .sm-hidden[data-stage="setting_up"],
  #standouts:not(.st-table-mode)[data-stagef="ran"]        .sm-hidden[data-stage="ran"],
  #standouts:not(.st-table-mode)[data-stagef="basing"]     .sm-hidden[data-stage="basing"],
  #standouts:not(.st-table-mode)[data-stagef="blocked"]    .sm-hidden[data-stage="blocked"] { display: flex !important; }
  #standouts[data-stagef]:not([data-stagef="all"]) .nb-grid-section .sm-bar { display: none !important; }

  /* ── ran section ─────────────────────────────────────────────────────────
     Deliberately NOT a fourth table: the leaders table already follows this
     panel, and the ran lane is a "these are gone" list, not a comparison. Quiet
     one-line rows, panel-TINTED rather than panel-filled, so they read as
     visible-but-not-entries. */
  .pbr { margin-top: 17px; }
  .pbr-hd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 9px; }
  .pbr-t { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
           color: var(--muted); }
  html[data-lang="zh"] .pbr-t { letter-spacing: 0; }
  .pbr-n { font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums;
           padding: 1px 7px; border-radius: 999px;
           background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--muted); }
  .pbr-s { font-size: 11px; color: var(--muted); line-height: 1.5; margin: 4px 0 8px; }
  .pbr-l { display: flex; flex-direction: column; gap: 5px; }
  .pbr-r { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 9px; padding: 6px 10px;
           border: 1px solid var(--line); border-radius: 8px; text-decoration: none;
           background: color-mix(in srgb, var(--panel2) 45%, transparent);
           color: var(--text); font-size: 11px; min-width: 0; }
  .pbr-r:hover { border-color: color-mix(in srgb, var(--muted) 45%, var(--line)); }
  .pbr-tk { font-weight: 800; font-size: 11.5px; flex: none; }
  .pbr-nm { color: var(--muted); min-width: 0; flex: 1 1 7em;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pbr-m { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
  /* --up/--down (NOT --pv-*) is correct here: this IS a directional figure, so it
     must flip red/green under html[data-lang="zh"]. HK already scopes .pos/.neg
     the same way; .az-up/.az-dn are the board-family names the US rows use. */
  .pbr-m .az-up { color: var(--ink-up, var(--up)); font-weight: 700; }
  .pbr-m .az-dn { color: var(--ink-down, var(--down)); font-weight: 700; }
  /* the honest em-dash: a ran row whose move since the signal could not be
     measured prints the gap rather than a zero. Muted, so it never reads as a
     flat return. */
  .pbr-m .pbr-na { color: var(--muted); opacity: .8; font-weight: 600; }
  /* ── vetoed section (G6) — the entry gate's own receipt ───────────────────
     The register here is SELF-CRITICISM, not opportunity. These are signals the
     gate refused, printed with what the name did afterwards so the gate can be
     judged; the lane is doing its job precisely when it reads badly. Two things
     keep it from inverting into "look what you missed, go buy them": it wears the
     Blocked bucket's own tone (--pv-avoid) rather than the buy green or the
     ran-lane amber, and the move column sits BEHIND the reason, never above it.
     Row geometry is the ran lane's, deliberately — same family, quieter voice. */
  .pbv { margin-top: 17px; }
  .pbr-r.pbr-veto { border-left: 2px solid color-mix(in srgb, var(--pv-avoid) 45%, var(--line));
           background: color-mix(in srgb, var(--pv-avoid) 4%, transparent); }
  .pbr-r.pbr-veto:hover { border-color: color-mix(in srgb, var(--pv-avoid) 45%, var(--line));
           border-left-color: color-mix(in srgb, var(--pv-avoid) 70%, var(--line)); }
  /* the block reason gets its own line: it is a full sentence, and squeezing it
     onto the identity row would truncate the one thing this lane exists to say */
  .pbv-why { flex: 1 1 100%; font-size: 10.5px; line-height: 1.5;
             color: color-mix(in srgb, var(--muted) 70%, var(--text)); }
  .pbv-mk { color: var(--muted); font-variant-numeric: tabular-nums; opacity: .85; flex: none; }
  /* the population line. It reads BEFORE the rows on purpose: the twelve figures
     below are the top of a ranked-then-truncated distribution, and a reader who
     meets them first has already formed the wrong impression by the time any
     footnote arrives. Muted and small — it frames the rows, it is not a headline. */
     At --muted it sat 8px under the subtitle at the same weight and colour and read
     as a fourth clause of it; the ink is the same 70/30 mix .pbv-why uses, which is
     enough to make it a statement of its own without turning it into a headline. */
  .pbv-pop { margin: 7px 0 1px; font-size: 10.5px; line-height: 1.55;
             color: color-mix(in srgb, var(--muted) 70%, var(--text));
             font-variant-numeric: tabular-nums; }
  /* a row whose stance differs from the section's says so; when every row agrees,
     the constant is printed ONCE in the section line and nowhere else */
  .pbv-st { font-size: 10.5px; font-weight: 700; color: var(--muted); flex: none; }
  /* board order / priority framing footnote */
  .pb-fn { margin: 9px 0 0; font-size: 11px; color: var(--muted); line-height: 1.55; }

  /* ── leaders strip table (US .topsetups idiom, ported) ────────────────────
     `.ts-tbl td{text-align:left}` is load-bearing: the page-global `th, td
     {text-align:right}` above would otherwise right-shift every text column. */
  .topsetups { margin-top: 14px; }
  .ts-tbl { width: 100%; border-collapse: collapse; margin-top: 7px; font-size: 11.5px; }
  .ts-tbl th { text-align: left; font-weight: 700; color: var(--muted); font-size: 10px;
               text-transform: uppercase; letter-spacing: .03em; padding: 3px 8px;
               border-bottom: 1px solid var(--line); }
  html[data-lang="zh"] .ts-tbl th { letter-spacing: 0; }
  .ts-tbl td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line); }
  .ts-tbl th.r, .ts-tbl td.r { text-align: right; font-variant-numeric: tabular-nums; }
  .ts-row { cursor: pointer; transition: background .12s; }
  .ts-row:hover { background: var(--panel2); }
  .ts-tk { font-weight: 800; color: var(--text); }
  /* The ticker is a real anchor so theme.js's capture-phase Terminal intercept can
     see it (and so middle-/cmd-click still opens a tab). It must not read as a blue
     link inside the row — the row itself is the affordance. */
  .ts-tk-a { color: inherit; text-decoration: none; }
  .ts-nm { font-size: 10px; color: var(--muted); }
  .ts-tbl td.az-up { color: var(--ink-up, var(--up)); font-weight: 700; }
  .ts-tbl td.az-dn { color: var(--ink-down, var(--down)); font-weight: 700; }
  /* ── strip tables on phones: primary decisions never x-scroll. At the board's
     own 680px break the tertiary columns demote to the row's own page (every row
     is a tap-through); what stays — ticker+name, the rank-key column, and the
     stance column — keeps its visible header as its label. .tbl-scroll (theme.css)
     remains underneath as the fail-safe if a future column outgrows the budget. */
  @media (max-width: 680px){
    .topsetups .ts-tbl .c-sector, .topsetups .ts-tbl .c-offhigh,
    .topsetups .ts-tbl .c-age,    .topsetups .ts-tbl .c-theme { display: none; }
  }
  /* ---- unified Conviction Profile on each standout card (SCREEN framing) ----- */
  .nb-conv { display: flex; align-items: center; gap: 7px; margin: 5px 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 bottoming-alignment chip (weekly+3d+daily turning up) */
  .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; }
  .nb-tier { font-size: 8px; color: var(--muted); margin-top: 3px; letter-spacing: .02em; }
  /* volatility black hole + honesty notes (HK overhaul, China-parity) */
  .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 + compact entry-timing chip (US-parity gauges) */
  .nb-size { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap;
             padding: 0 5px; border-radius: 7px; color: var(--muted);
             background: var(--panel); border: 1px solid var(--line); }
  .nb-size.sz-up { color: var(--ink-up, var(--up)); border-color: color-mix(in srgb, var(--up) 38%, var(--line)); }
  .nb-size.sz-dn { color: var(--ink-warn, var(--warn)); border-color: color-mix(in srgb, var(--warn) 42%, var(--line)); }
  .nb-entry { display: flex; align-items: center; gap: 5px; margin-top: 4px; padding: 3px 6px;
              border-radius: 7px; 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); }
  .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); }
  .nbe-exit, .nbe-avoid, .nbe-blocked { border-top-color: var(--down); }
  .nbe-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); flex: none; }
  .nbe-dot.a3 { background: var(--up); } .nbe-dot.a2 { background: var(--g-cold); }
  .nbe-dot.a1 { background: var(--warn); } .nbe-dot.a0 { background: var(--down); }
  .nbe-status { font-size: 9px; font-weight: 800; color: var(--text); line-height: 1.2; }
  .nbe-zone { margin-left: auto; font-size: 9px; font-weight: 700; color: var(--muted);
              font-variant-numeric: tabular-nums; white-space: nowrap; }

  /* ---- US/China-parity panels ported to HK (dial / bignum / alerts / risk gauges) ---- */
  .dial { position: relative; height: 9px; border-radius: 5px; margin: 6px 0 3px;
          background: linear-gradient(90deg, var(--up), var(--warn) 55%, var(--down)); }
  .dial.rev { background: linear-gradient(90deg, var(--down), var(--warn) 45%, var(--up)); }
  .dial i { position: absolute; top: -3px; width: 4px; height: 15px; border-radius: 2px; background: var(--text); transform: translateX(-50%); box-shadow: 0 0 0 2px var(--panel); }
  .dial-ends { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); }
  .bignum { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
  /* fired alerts (ported from the US/China dashboard) */
  .alert { display: block; padding: 10px 13px; border-radius: 8px; margin: 8px 0;
           background: var(--panel2, var(--panel)); border-left: 3px solid var(--muted);
           color: var(--text); transition: transform .12s, box-shadow .12s; }
  a.alert:hover { transform: translateX(2px); box-shadow: 0 3px 14px rgba(0,0,0,.22); }
  .alert-high { border-left-color: var(--down); }
  .alert-warn { border-left-color: var(--warn); }
  .alert-info { border-left-color: var(--info); }
  .alert-head { display: flex; align-items: baseline; gap: 8px; }
  .alert-ico { font-size: 15px; flex: none; line-height: 1; }
  .alert-head b { font-size: 13.5px; color: var(--text); }
  .alert-jump { margin-left: auto; font-size: 11px; font-weight: 700;
                color: var(--ink-link, var(--link)); flex: none; white-space: nowrap; }
  .alert-detail { margin: 6px 0 0; font-size: 12.5px; color: var(--text); font-variant-numeric: tabular-nums; }
  .alert-what { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--line);
                font-size: 12px; color: var(--muted); line-height: 1.5; }
  .alert-edge { margin: 5px 0 0; font-size: 12px; color: var(--text); line-height: 1.45; }
  .alert-edge b { color: var(--muted); font-weight: 600; }
  /* AI master brief */
  .ai-brief .mb-sum { font-size: 15px; font-weight: 600; margin: 0 0 10px; }
  .ai-brief .mb-sec { margin: 10px 0; } .ai-brief .mb-h { font-weight: 600; color: var(--ink-link, var(--link)); margin: 0 0 4px; }
  .ai-brief .mb-list { margin: 4px 0 0 18px; padding: 0; } .ai-brief .mb-list li { margin: 3px 0; }
  .ai-brief .mb-foot { margin-top: 12px; color: var(--muted); font-size: 12px; }
  .ai-brief .mb-deg { color: var(--muted); font-size: 12px; font-style: italic; margin: 4px 0; }

  /* ============ HK STOCK DESK — command-center hero, flows desk, conviction chips ===== */
  .deskhero { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px 26px; align-items: start; }
  @media (max-width: 820px) { .deskhero { grid-template-columns: 1fr; } }
  .desk-title { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
  .desk-title h1 { font-size: 22px; margin: 0; }
  .desk-verdict { margin: 14px 0 0; padding: 12px 15px; border-radius: 11px; line-height: 1.5;
      background: color-mix(in srgb, var(--c, var(--info)) 12%, var(--panel));
      border: 1px solid color-mix(in srgb, var(--c, var(--info)) 30%, var(--line)); }
  .desk-verdict.rv-on { --c: var(--up); } .desk-verdict.rv-off { --c: var(--down); } .desk-verdict.rv-neu { --c: var(--info); }
  .desk-verdict b { color: var(--text); }
  .desk-verdict .rv-lead { font-size: 13.5px; font-weight: 700; display: block; margin-bottom: 3px; color: var(--text); }
  .desk-verdict .rv-body { font-size: 12.5px; color: var(--muted); }
  /* exposure split bar (amplifiers vs cushions) */
  .expo-wrap { margin: 4px 0 2px; }
  .expo-bar { display: flex; height: 22px; border-radius: 7px; overflow: hidden; border: 1px solid var(--line); }
  .expo-bar .amp { background: color-mix(in srgb, var(--down) 60%, var(--panel)); }
  .expo-bar .mid { background: var(--panel2, color-mix(in srgb, var(--muted) 16%, var(--panel))); }
  .expo-bar .cush { background: color-mix(in srgb, var(--up) 58%, var(--panel)); }
  .expo-seg { display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800;
      color: #fff; min-width: 0; white-space: nowrap; }
  .expo-bar .mid .expo-seg { color: var(--muted); }
  .expo-key { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); margin-top: 5px; }
  .expo-key b { color: var(--text); }
  /* desk stat tiles */
  .desk-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
  @media (min-width: 560px) { .desk-stats { grid-template-columns: repeat(4, 1fr); } }
  .deskhero .desk-stats { grid-template-columns: repeat(2, 1fr); }
  .dstat { background: var(--panel2, color-mix(in srgb, var(--muted) 8%, var(--panel)));
      border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; }
  .dstat .dv { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.05; }
  .dstat .dk { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; }
  .desk-overlay { margin-top: 11px; font-size: 12px; color: var(--muted); }
  .desk-overlay .ov-chip { display: inline-block; font-weight: 700; padding: 1px 8px; border-radius: 8px; margin-left: 4px;
      background: color-mix(in srgb, var(--warn) 16%, var(--panel)); color: color-mix(in srgb, var(--warn) 85%, var(--text)); }
  /* southbound + A/H conviction chips on the standout cards */
  .nb-flow { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
  .nb-flow span { font-size: 9px; font-weight: 800; padding: 1px 6px; border-radius: 7px; letter-spacing: .01em;
      border: 1px solid var(--line); color: var(--muted); background: var(--panel); overflow-wrap: anywhere; max-width: 100%; }
  .nb-flow .fl-buy { color: var(--ink-up, var(--up)); border-color: color-mix(in srgb, var(--up) 40%, var(--line));
      background: color-mix(in srgb, var(--up) 10%, var(--panel)); }
  .nb-flow .fl-sell { color: var(--ink-down, var(--down)); border-color: color-mix(in srgb, var(--down) 40%, var(--line));
      background: color-mix(in srgb, var(--down) 10%, var(--panel)); }
  .nb-flow .fl-val { color: var(--ink-info, var(--info)); border-color: color-mix(in srgb, var(--info) 40%, var(--line));
      background: color-mix(in srgb, var(--info) 10%, var(--panel)); }
  /* H2a SFC reportable-short CONTEXT chip (ACCRUE) — a high short book leans returns softer */
  .nb-flow .fl-short { color: var(--ink-warn, var(--warn)); border-color: color-mix(in srgb, var(--warn) 42%, var(--line));
      background: color-mix(in srgb, var(--warn) 11%, var(--panel)); }
  /* smart-money flows desk */
  .flows-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
  @media (max-width: 760px) { .flows-grid { grid-template-columns: 1fr; } }
  .flow-col h3 { margin: 0 0 7px; }
  .flow-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
  .flow-row:last-child { border-bottom: none; }
  .flow-row .fr-tk { font-weight: 800; min-width: 64px; color: inherit; text-decoration: none; cursor: pointer; }
  .flow-row .fr-tk:hover { text-decoration: underline; }
  .flow-row .fr-nm { color: var(--muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .flow-row .fr-bar { flex: 0 0 88px; height: 8px; border-radius: 5px; background: var(--panel2); position: relative; overflow: hidden; }
  .flow-row .fr-bar i { position: absolute; top: 0; height: 100%; border-radius: 5px; }
  .flow-row .fr-v { flex: 0 0 56px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
  .flow-row .fr-own { flex: 0 0 44px; text-align: right; font-size: 10.5px; color: var(--muted); }
  /* desk watch strip (strong-but-blocked) */
  .watch-strip { margin: 14px 0 2px; padding: 11px 13px; border-radius: 10px;
      background: color-mix(in srgb, var(--warn) 9%, var(--panel)); border: 1px solid color-mix(in srgb, var(--warn) 26%, var(--line)); }
  .watch-strip .ws-h { font-size: 12px; font-weight: 800; color: color-mix(in srgb, var(--warn) 88%, var(--text)); margin: 0 0 7px; text-transform: uppercase; letter-spacing: .04em; }
  .watch-grid { display: flex; flex-wrap: wrap; gap: 8px; }
  .watch-grid a { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border-radius: 8px; min-width: 130px;
      background: var(--panel); border: 1px solid var(--line); color: var(--text); transition: border-color .12s, transform .12s; }
  .watch-grid a:hover { border-color: var(--link); transform: translateY(-1px); }
  .watch-grid .wg-tk { font-weight: 800; font-size: 12.5px; }
  .watch-grid .wg-v { font-size: 10px; color: var(--muted); line-height: 1.3; }
  /* falling-knife demote (H4 KILL) — deepest-3M loser pushed out of the entry groups */
  .watch-grid a.wg-knife { border-color: color-mix(in srgb, var(--down) 34%, var(--line));
      background: color-mix(in srgb, var(--down) 7%, var(--panel)); }
  .watch-grid .wg-knife-chip { margin-top: 3px; font-size: 9px; font-weight: 800; line-height: 1.25;
      color: var(--ink-down, var(--down)); }
  /* H-PLC placement/rights dilution demote — dilutive top-up announced within 90d */
  .watch-grid a.wg-plc { border-color: color-mix(in srgb, var(--down) 34%, var(--line));
      background: color-mix(in srgb, var(--down) 7%, var(--panel)); }
  .watch-grid .wg-plc-chip { margin-top: 3px; font-size: 9px; font-weight: 800; line-height: 1.25;
      color: var(--ink-down, var(--down)); }
  /* Washout Watch strip — igniting · unconfirmed · high-risk */
  .ww-strip { margin: 8px 0 0; }
  .ww-grid { display: flex; flex-wrap: wrap; gap: 8px; }
  .ww-card { display: flex; flex-direction: column; gap: 3px; padding: 8px 11px; border-radius: 9px;
      min-width: 160px; max-width: 240px;
      background: var(--panel); border: 1px solid color-mix(in srgb, var(--down) 25%, var(--line));
      color: var(--text); text-decoration: none; transition: border-color .12s, transform .12s; }
  .ww-card:hover { border-color: var(--link); transform: translateY(-1px); }
  .ww-card.ww-ignite { border-color: color-mix(in srgb, var(--warn) 60%, var(--line));
      background: color-mix(in srgb, var(--warn) 7%, var(--panel)); }
  .ww-card.ww-pullback { border-color: color-mix(in srgb, var(--up) 35%, var(--line));
      background: color-mix(in srgb, var(--up) 5%, var(--panel)); }
  .ww-card.ww-chase { border-color: color-mix(in srgb, var(--down) 40%, var(--line)); }
  .ww-tk { font-weight: 800; font-size: 13px; }
  .ww-nm { font-size: 10px; color: var(--muted); }
  .ww-state { display: inline-block; font-size: 9.5px; font-weight: 800; padding: 1px 7px;
      border-radius: 8px; margin-top: 2px; }
  .ww-state.st-ignite { background: color-mix(in srgb, var(--warn) 22%, var(--panel));
      color: color-mix(in srgb, var(--warn) 90%, var(--text)); }
  .ww-state.st-watch  { background: color-mix(in srgb, var(--down) 16%, var(--panel));
      color: color-mix(in srgb, var(--down) 80%, var(--text)); }
  .ww-state.st-pull   { background: color-mix(in srgb, var(--up) 20%, var(--panel));
      color: color-mix(in srgb, var(--up) 80%, var(--text)); }
  .ww-state.st-chase  { background: color-mix(in srgb, var(--down) 20%, var(--panel));
      color: color-mix(in srgb, var(--down) 90%, var(--text)); }
  .ww-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
  .ww-chip { font-size: 8.5px; font-weight: 800; padding: 1px 6px; border-radius: 6px;
      background: color-mix(in srgb, var(--muted) 14%, var(--panel));
      color: color-mix(in srgb, var(--muted) 80%, var(--text)); }
  .ww-chip.wc-adr   { background: color-mix(in srgb, var(--up) 18%, var(--panel)); color: color-mix(in srgb, var(--up) 85%, var(--text)); }
  .ww-chip.wc-bear  { background: color-mix(in srgb, var(--up) 16%, var(--panel)); color: color-mix(in srgb, var(--up) 80%, var(--text)); }
  .ww-chip.wc-buy   { background: color-mix(in srgb, var(--up) 20%, var(--panel)); color: color-mix(in srgb, var(--up) 90%, var(--text)); }
  .ww-chip.wc-narr  { background: color-mix(in srgb, var(--info, #60c) 14%, var(--panel)); color: color-mix(in srgb, var(--info, #60c) 80%, var(--text)); }
  .ww-chip.wc-sb    { background: color-mix(in srgb, var(--up) 16%, var(--panel)); color: color-mix(in srgb, var(--up) 80%, var(--text)); }
  .ww-chip.wc-rsi   { background: color-mix(in srgb, var(--warn) 20%, var(--panel)); color: color-mix(in srgb, var(--warn) 85%, var(--text)); }
  .ww-chip.wc-cat   { background: color-mix(in srgb, var(--muted) 10%, var(--panel)); color: var(--muted); }
  .ww-chip.wc-knife { background: color-mix(in srgb, var(--down) 20%, var(--panel)); color: color-mix(in srgb, var(--down) 90%, var(--text)); }
  .ww-hint { font-size: 9.5px; color: var(--muted); line-height: 1.3; margin-top: 2px; }
  .ww-meta { font-size: 9px; color: var(--muted); margin-top: 2px; }
  .ww-empty { font-size: 11.5px; color: var(--muted); padding: 6px 0; }
  /* compact chip row for non-igniting watch names (Law-4: constant text moved to the footer) */
  .ww-cold-wrap { margin-top: 10px; }
  .ww-cold-h { font-size: 10.5px; font-weight: 700; color: var(--muted); margin: 0 0 6px;
      text-transform: uppercase; letter-spacing: .04em; }
  .ww-cold-row { display: flex; flex-wrap: wrap; gap: 6px; }
  .ww-cold-chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 9px;
      border-radius: 8px; text-decoration: none; color: var(--text);
      background: color-mix(in srgb, var(--down) 6%, var(--panel));
      border: 1px solid color-mix(in srgb, var(--down) 22%, var(--line)); transition: border-color .12s; }
  .ww-cold-chip:hover { border-color: var(--link); }
  .ww-cold-tk { font-weight: 800; font-size: 12px; }
  .ww-cold-nm { font-size: 10px; color: var(--muted); }
  .ww-cold-knife { font-size: 10px; }
  .ww-foot { font-size: 11px; color: var(--muted); line-height: 1.5; margin: 10px 0 0; }
  /* H5 peg-liquidity regime conditioner chip in the deskhero */
  .desk-liq { margin-top: 9px; display: flex; flex-direction: column; gap: 3px; padding: 8px 11px;
      border-radius: 9px; border: 1px solid var(--line); background: var(--panel); }
  .desk-liq.lq-easy { border-color: color-mix(in srgb, var(--up) 34%, var(--line));
      background: color-mix(in srgb, var(--up) 7%, var(--panel)); }
  .desk-liq.lq-tight { border-color: color-mix(in srgb, var(--down) 34%, var(--line));
      background: color-mix(in srgb, var(--down) 7%, var(--panel)); }
  .desk-liq .lq-chip { font-size: 11.5px; font-weight: 700; }
  .desk-liq .lq-accrue { font-weight: 600; opacity: .7; font-size: 10.5px; }
  .desk-liq .lq-note { font-size: 10.5px; color: var(--muted); line-height: 1.35; }
  /* high-impact event-risk banner (macro) */
  .evbanner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
      padding: 10px 15px; border-radius: 11px; margin-bottom: 0;
      background: color-mix(in srgb, var(--warn) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--warn) 26%, var(--line)); }
  .evbanner .ev-h { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: color-mix(in srgb, var(--warn) 88%, var(--text)); white-space: nowrap; }
  .evbanner .ev-list { display: flex; flex-wrap: wrap; gap: 7px; }
  .ev-chip { display: inline-flex; align-items: baseline; gap: 5px; font-size: 11.5px; padding: 3px 9px; border-radius: 8px;
      background: var(--panel); border: 1px solid var(--line); }
  .ev-chip b { color: var(--text); } .ev-chip .ev-d { font-weight: 800; color: var(--ink-warn, var(--warn)); font-variant-numeric: tabular-nums; }
  .ev-chip .ev-rg { font-size: 9px; font-weight: 700; padding: 0 5px; border-radius: 6px; color: var(--muted); background: var(--panel2, color-mix(in srgb,var(--muted) 12%,var(--panel))); }
  .cat-imminent { background: color-mix(in srgb, var(--warn) 8%, var(--panel)); }

  /* ===== W6 UX overhaul (§7) — ONE desk manifest, track-record panel, tier-driven chrome ===== */
  /* (A) desk manifest: the single "what this desk is / isn't" block that replaces the ~6×
     repeated screen-vs-buylist caveats. Two clauses, colour-keyed, well-typeset. */
  .desk-manifest { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 12px 0 0;
      padding: 11px 14px; border-radius: 11px; border: 1px solid var(--line);
      background: color-mix(in srgb, var(--info) 5%, var(--panel)); }
  @media (max-width: 640px) { .desk-manifest { grid-template-columns: 1fr; gap: 8px; } }
  .dm-cell { min-width: 0; }
  .dm-k { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
      display: inline-flex; align-items: center; gap: 5px; margin-bottom: 3px; }
  .dm-is .dm-k { color: var(--ink-up, var(--up)); }
  .dm-isnt .dm-k { color: var(--muted); }
  .dm-v { font-size: 12px; line-height: 1.5; color: var(--fg); }
  .dm-v b { color: var(--text); }
  .dm-isnt .dm-v { color: var(--muted); }
  .dm-tierline { grid-column: 1 / -1; margin: 1px 0 0; padding-top: 8px; border-top: 1px solid var(--line);
      font-size: 10.5px; color: var(--muted); line-height: 1.5; }
  .dm-tierline b { color: var(--text); }
  .dm-badge { display: inline-block; font-size: 9px; font-weight: 800; padding: 1px 6px; border-radius: 6px;
      letter-spacing: .02em; border: 1px solid var(--line); color: var(--muted);
      background: color-mix(in srgb, var(--muted) 8%, var(--panel)); vertical-align: middle; }

  /* (B) track-record / public scoreboard panel (§7.4) — intentional, not apologetic. */
  .trackrec { border: 1px solid color-mix(in srgb, var(--info) 26%, var(--line));
      background: color-mix(in srgb, var(--info) 4%, var(--panel)); }
  .tr-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 9px; }
  .tr-head h2 { margin: 0; }
  .tr-status { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
      padding: 2px 9px; border-radius: 8px; }
  .tr-status.st-accruing { color: var(--ink-warn, var(--warn)); background: color-mix(in srgb, var(--warn) 13%, var(--panel));
      border: 1px solid color-mix(in srgb, var(--warn) 34%, var(--line)); }
  .tr-status.st-scored { color: var(--ink-up, var(--up)); background: color-mix(in srgb, var(--up) 13%, var(--panel));
      border: 1px solid color-mix(in srgb, var(--up) 38%, var(--line)); }
  .tr-lead { font-size: 13px; line-height: 1.55; color: var(--fg); margin: 0 0 10px; }
  .tr-lead b { color: var(--text); }
  .tr-timeline { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; }
  .tr-step { flex: 1 1 150px; min-width: 0; padding: 9px 12px; border-radius: 9px; border: 1px solid var(--line);
      background: var(--panel); }
  .tr-step .ts-k { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
  .tr-step .ts-v { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 2px; line-height: 1.1; }
  .tr-step .ts-sub { font-size: 10.5px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
  .tr-step.ts-now { border-color: color-mix(in srgb, var(--info) 40%, var(--line));
      background: color-mix(in srgb, var(--info) 7%, var(--panel)); }
  .tr-step.ts-now .ts-v { color: var(--ink-info, var(--info)); }
  .tr-foot { font-size: 10.5px; color: var(--muted); margin: 9px 0 0; line-height: 1.5; }
  .tr-tbl { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 4px; }
  .tr-tbl th, .tr-tbl td { text-align: right; padding: 5px 9px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
  .tr-tbl th:first-child, .tr-tbl td:first-child { text-align: left; }
  .tr-tbl th { color: var(--muted); font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; }

  /* (C) evidence-tag micro-style on the why-now chips — .et-validated / .et-accruing / .et-context. */
  .ev-tag { font-size: 7.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
      padding: 0 3px; border-radius: 4px; margin-left: 3px; vertical-align: middle; }
  .ev-tag.et-validated { color: var(--ink-up, var(--up)); background: color-mix(in srgb, var(--up) 15%, var(--panel)); }
  .ev-tag.et-accruing { color: var(--ink-warn, var(--warn)); background: color-mix(in srgb, var(--warn) 15%, var(--panel)); }
  .ev-tag.et-context { color: var(--muted); background: color-mix(in srgb, var(--muted) 12%, var(--panel)); }
  /* A/H = the near-GO edge (DSR 0.879) — gets visual priority among the flow chips. */
  .nb-flow .fl-val.fl-lead { border-color: color-mix(in srgb, var(--info) 62%, var(--line));
      background: color-mix(in srgb, var(--info) 16%, var(--panel)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--info) 22%, transparent); }

  /* (D) tier-driven chrome (§7 item 1): on this screen-tier market the composite score chip
     is DESATURATED + downsized so the mechanism lead + entry window carry the weight. The
     card stays ALIVE via an accent keyed to the entry-window state. */
  .nb-cscore { filter: saturate(.55); opacity: .82; font-size: 11px; min-width: 24px; }
  /* entry-window state drives the TOP stripe (overrides the base state stripe) */
  .nbcard.ew-open-now::before { background: linear-gradient(90deg, color-mix(in srgb, var(--up) 62%, var(--line)), transparent); opacity: 1; }
  .nbcard.ew-pullback::before { background: linear-gradient(90deg, color-mix(in srgb, var(--g-cold) 55%, var(--line)), transparent); opacity: 1; }
  .nbcard.ew-wait::before { background: linear-gradient(90deg, color-mix(in srgb, var(--muted) 40%, var(--line)), transparent); opacity: .85; }
  .nbcard.ew-open-now:hover { box-shadow: 0 3px 16px color-mix(in srgb, var(--up) 20%, transparent); }
  /* ===================== 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; } }
  /* ===== HK command panel — compact synthesis ===== */
  #hk-command-panel{border-top:2px solid var(--line);padding-bottom:14px}
  #hk-command-panel .cp-head{display:flex;flex-wrap:wrap;align-items:center;gap:9px 18px;margin-bottom:13px}
  #hk-command-panel .cp-verdict{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap}
  #hk-command-panel .cp-badge{font-size:13px;font-weight:800;letter-spacing:.02em;padding:4px 12px;border-radius:999px;
    border:1px solid var(--c,var(--muted));color:var(--c,var(--muted));background:color-mix(in srgb,var(--c,var(--muted)) 13%,transparent);white-space:nowrap}
  #hk-command-panel .cp-sub{font-size:11px;color:var(--muted)}
  #hk-command-panel .cp-meters{display:flex;gap:16px;margin-left:auto;flex-wrap:wrap}
  #hk-command-panel .cp-meter{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700}
  #hk-command-panel .cp-meter .lab{white-space:nowrap}
  #hk-command-panel .cp-bar{width:64px;height:6px;border-radius:3px;background:var(--panel2);border:1px solid var(--line);overflow:hidden}
  #hk-command-panel .cp-bar>i{display:block;height:100%;border-radius:3px;transition:width .4s ease}
  #hk-command-panel .cp-meter .n{font-variant-numeric:tabular-nums;min-width:26px;text-align:right}
  #hk-command-panel .cp-sec{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 7px;font-weight:700}
  #hk-command-panel .cp-forces{display:grid;grid-template-columns:repeat(auto-fit,minmax(256px,1fr));gap:6px;margin-bottom:14px}
  #hk-command-panel .cp-force{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:8px;background:var(--panel2);
    border:1px solid var(--line);border-left:3px solid var(--c,var(--muted))}
  #hk-command-panel .cp-force .ic{font-size:13px;line-height:1;flex:0 0 auto}
  #hk-command-panel .cp-force .nm{font-size:12px;font-weight:700;flex:0 0 auto;white-space:nowrap}
  #hk-command-panel .cp-force .dt{font-size:11px;color:var(--muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #hk-command-panel .cp-force .st{font-size:10px;font-weight:800;color:var(--c,var(--muted));flex:0 0 auto;white-space:nowrap;text-transform:uppercase;letter-spacing:.03em}
  #hk-command-panel .cp-watch{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
  #hk-command-panel .cp-wcard{background:var(--panel2);border-radius:9px;padding:9px 11px}
  #hk-command-panel .cp-wcard h4{margin:0 0 6px;font-size:11.5px;font-weight:800}
  #hk-command-panel .cp-wrow{display:flex;align-items:center;gap:6px;font-size:12px;padding:2px 0}
  #hk-command-panel .cp-wrow a.tk{font-weight:800;color:inherit;text-decoration:none}
  #hk-command-panel .cp-wrow a.tk:hover{text-decoration:underline}
  #hk-command-panel .cp-wrow .nm{flex:1;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
  #hk-command-panel .cp-tape .row{display:flex;align-items:baseline;gap:8px;font-size:11.5px;padding:3px 0;border-bottom:1px solid var(--line)}
  #hk-command-panel .cp-tape .row .dt{flex:0 0 74px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
  #hk-command-panel .cp-tape .row a.tk{font-weight:800;color:inherit;text-decoration:none}
  #hk-command-panel .cp-tape .row a.tk:hover{text-decoration:underline}
  @media (max-width:640px){ #hk-command-panel .cp-watch{grid-template-columns:1fr} #hk-command-panel .cp-meters{margin-left:0;width:100%} }
  /* ===== combined Southbound & A/H section (flow + cross-listing value, each with a read) ===== */
  #mainland-money .sbah-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:11px;margin:6px 0 10px}
  #mainland-money .sbah-card{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:11px 13px}
  #mainland-money .sbah-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
  #mainland-money .sbah-t{font-size:12.5px;font-weight:800}
  #mainland-money .sbah-sig{font-size:11px;font-weight:800;padding:2px 10px;border-radius:999px;white-space:nowrap;
    border:1px solid var(--c,var(--muted));color:var(--c,var(--muted));background:color-mix(in srgb,var(--c,var(--muted)) 13%,transparent)}
  #mainland-money .sig-in{--c:var(--up)}
  #mainland-money .sig-out{--c:var(--down)}
  #mainland-money .sig-neu{--c:var(--muted)}
  #mainland-money .sbah-read{font-size:11px;color:var(--muted);margin-top:8px;line-height:1.45}
  #mainland-money .sbah-pairs{margin-top:9px;width:100%;font-size:11px;border-collapse:collapse}
  #mainland-money .sbah-pairs td{padding:2px 0;border-bottom:1px solid var(--line)}
  #mainland-money .sbah-pairs td:last-child{text-align:right;font-variant-numeric:tabular-nums}

  /* ── W8-G: Standout table view (HK port of W8-E/W8-R6) ──────────────────── */
  .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; }

  /* count chips row */
  #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 */
  /* filter-row + column-chooser chrome (.stf-*) is injected by stocktable.js since v3 */

  /* table wrapper — horizontal scroll, sticky first col */
  .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); }

  /* sticky first column */
  .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))); }

  /* row accents by stage / group */
  .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-row-ready td:first-child { box-shadow:inset 3px 0 0 var(--link); }
  .st-row-basing td:first-child { box-shadow:inset 3px 0 0 color-mix(in srgb,var(--link) 45%,var(--muted)); }
  .st-row-falling td:first-child { box-shadow:inset 3px 0 0 var(--down); }
  .st-row-falling td { color:var(--muted); }

  /* sort arrow */
  .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)); }

  /* cell colors */
  .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); }

  /* th tooltip */
  .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; }

  /* mobile: table scrolls, first col sticky */
  @media (max-width:680px) {
    .st-table { font-size:11px; }
    .st-table td, .st-table th { padding:5px 7px; }
  }

  /* ============================================================
     HK mx5 MACRO DASHBOARD — scoped to body.page-hk
     hkx- prefix; mirrors china.html cnx- pattern exactly.
     All mechanics ported from china.html.j2 and spec §Mandatory.
     ============================================================ */
  /* Mechanic #1: override theme grid so page renders full-width */
  body.page-hk .grid{display:block}
  /* Mechanic #2: 1500px wrap with US-width body padding */
  @media(min-width:1100px){body.page-hk{padding:26px max(40px,calc((100vw - 1500px)/2))}}
  body.page-hk .hkx-wrap{position:relative;z-index:1;max-width:1500px;margin:0 auto;padding:0}
  body.page-hk .hkx-aurora{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
  body.page-hk .hkx-aurora::before{content:"";position:absolute;top:-220px;left:12%;width:820px;height:560px;border-radius:50%;filter:blur(90px);background:radial-gradient(ellipse,rgba(69,184,115,.12) 0%,transparent 70%)}
  body.page-hk .hkx-aurora::after{content:"";position:absolute;bottom:-100px;right:-100px;width:700px;height:600px;border-radius:50%;filter:blur(90px);background:radial-gradient(ellipse,rgba(99,102,241,.10) 0%,transparent 70%)}
  body.page-hk .hkx-aurora .au-a3{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);width:600px;height:500px;border-radius:50%;filter:blur(90px);background:radial-gradient(ellipse,rgba(69,184,115,.07) 0%,transparent 70%)}
  /* State-adaptive aurora tints — baked from market_state.color server-side */
  body.page-hk .hkx-aurora.au-yellow::before{background:radial-gradient(ellipse,rgba(245,158,11,.10) 0%,transparent 70%)}
  body.page-hk .hkx-aurora.au-yellow .au-a3{background:radial-gradient(ellipse,rgba(245,158,11,.06) 0%,transparent 70%)}
  body.page-hk .hkx-aurora.au-red::before{background:radial-gradient(ellipse,rgba(239,68,68,.10) 0%,transparent 70%)}
  body.page-hk .hkx-aurora.au-red .au-a3{background:radial-gradient(ellipse,rgba(239,68,68,.06) 0%,transparent 70%)}
  /* Light-mode aurora: much fainter */
  [data-theme="light"] body.page-hk .hkx-aurora::before{background:radial-gradient(ellipse,rgba(69,184,115,.05) 0%,transparent 70%)}
  [data-theme="light"] body.page-hk .hkx-aurora.au-yellow::before{background:radial-gradient(ellipse,rgba(156,98,18,.05) 0%,transparent 70%)}
  [data-theme="light"] body.page-hk .hkx-aurora.au-yellow .au-a3{background:radial-gradient(ellipse,rgba(156,98,18,.035) 0%,transparent 70%)}
  [data-theme="light"] body.page-hk .hkx-aurora.au-red::before{background:radial-gradient(ellipse,rgba(220,38,38,.05) 0%,transparent 70%)}
  [data-theme="light"] body.page-hk .hkx-aurora.au-red .au-a3{background:radial-gradient(ellipse,rgba(220,38,38,.035) 0%,transparent 70%)}
  @media(prefers-reduced-motion:reduce){body.page-hk .hkx-aurora{animation:none}}
  /* Glass card base */
  body.page-hk .hkx-card{background:var(--mx5-glass-bg,rgba(16,22,30,.55));border:1px solid var(--mx5-glass-border,rgba(255,255,255,.12));border-radius:18px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 8px 32px rgba(0,0,0,.55),0 1.5px 0 rgba(255,255,255,.07) inset;padding:18px 20px;transition:background .2s,border-color .2s,box-shadow .2s,transform .2s;margin-bottom:14px}
  body.page-hk .hkx-card[role="button"]{cursor:pointer}
  body.page-hk .hkx-card[role="button"]:hover{background:rgba(22,29,38,.62);border-color:rgba(255,255,255,.16);box-shadow:0 6px 24px rgba(0,0,0,.25);transform:translateY(-1px)}
  
  
  body.page-hk .hkx-ctitle{font-size:13px;font-weight:700;letter-spacing:-.01em;color:var(--text);margin-bottom:14px;display:flex;align-items:center;gap:8px}
  body.page-hk .hkx-ctitle .zh{font-weight:500;opacity:.5;text-transform:none;letter-spacing:0}
  body.page-hk .hkx-ctitle .q{margin-left:6px;width:14px;height:14px;border-radius:50%;border:1px solid var(--muted);color:var(--muted);font-size:9px;display:inline-flex;align-items:center;justify-content:center;font-weight:700}
  /* Mechanic #3: hero z-index 30 for popover stacking context */
  /* Mechanic #4: hero stance color driven by ms class */
  body.page-hk .hkx-hero{display:grid;grid-template-columns:minmax(360px,2fr) minmax(400px,3fr);gap:0;padding:0;position:relative;z-index:30}
  /* until the score log accrues >=2 sessions, collapse the empty history panel
     instead of reserving ~60% of the hero for "Building score history…" */
  body.page-hk .hkx-hero.hkx-hero-solo{grid-template-columns:1fr}
  body.page-hk .hkx-hero.hkx-hero-solo .hkx-hero-right{display:none}
  body.page-hk .hkx-hero-left{padding:22px 26px;border-right:1px solid rgba(255,255,255,.12);position:relative}
  body.page-hk .hkx-hero-right{padding:18px 24px 14px}
  body.page-hk .hkx-regime-pill{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:4px 12px;font-size:11.5px}
  body.page-hk .hkx-regime-pill .dot{width:8px;height:8px;border-radius:50%}
  /* Mechanic #4 color classes */
  /* zh 红涨绿跌: use color-mix over var(--up)/var(--down) so zh swap flows through
     automatically (rgba hex literals would stay green/red regardless of lang). */
  body.page-hk .ms-green .hkx-regime-pill{background:color-mix(in srgb,var(--up) 10%,transparent)}
  body.page-hk .ms-green .hkx-regime-pill .dot{background:var(--up)}
  body.page-hk .ms-yellow .hkx-regime-pill{background:rgba(224,160,48,.10)}
  body.page-hk .ms-yellow .hkx-regime-pill .dot{background:var(--warn)}
  body.page-hk .ms-red .hkx-regime-pill{background:color-mix(in srgb,var(--down) 10%,transparent)}
  body.page-hk .ms-red .hkx-regime-pill .dot{background:var(--down)}
  body.page-hk .hkx-live-pill{display:inline-flex;align-items:center;gap:5px;font-size:10px;letter-spacing:.8px;color:var(--muted);border:1px solid var(--line);padding:2px 8px;border-radius:999px;margin-left:8px;opacity:.45}
  body.page-hk .hkx-live-pill .d{width:6px;height:6px;border-radius:50%;background:var(--muted)}
  body.page-hk .hkx-gauge-row{display:flex;gap:20px;align-items:center;margin-top:10px;margin-bottom:16px}
  /* Gauge scaled to 192×120 per US spec (viewBox unchanged so needle math intact) */
  body.page-hk .hkx-gauge-svg{flex:0 0 192px;width:192px;height:120px;overflow:visible;display:block}
  @media(max-width:560px){body.page-hk .hkx-gauge-svg{width:90px;height:58px;flex:0 0 90px}}
  /* Mechanic #4: gauge arc color per state */
  body.page-hk .hkx-gauge-fill{stroke:var(--warn)}
  body.page-hk .ms-green .hkx-gauge-fill{stroke:var(--up)}
  body.page-hk .ms-red .hkx-gauge-fill{stroke:var(--down)}
  /* needle accents follow the same .ms-* class (US idiom: hub ring + core +
     glowing tip dot in the verdict colour; stem is theme-text) */
  body.page-hk .hkx-needle-hub{fill:var(--panel,rgba(8,12,18,.85));stroke:var(--warn);stroke-width:1.5}
  body.page-hk .hkx-needle-core,body.page-hk .hkx-needle-tip{fill:var(--warn)}
  body.page-hk .hkx-needle-tip{filter:drop-shadow(0 0 3.5px var(--warn))}
  body.page-hk .ms-green .hkx-needle-hub{stroke:var(--up)}
  body.page-hk .ms-green .hkx-needle-core,body.page-hk .ms-green .hkx-needle-tip{fill:var(--up)}
  body.page-hk .ms-green .hkx-needle-tip{filter:drop-shadow(0 0 3.5px var(--up))}
  body.page-hk .ms-red .hkx-needle-hub{stroke:var(--down)}
  body.page-hk .ms-red .hkx-needle-core,body.page-hk .ms-red .hkx-needle-tip{fill:var(--down)}
  body.page-hk .ms-red .hkx-needle-tip{filter:drop-shadow(0 0 3.5px var(--down))}
  body.page-hk .hkx-score-line{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
  /* Big score — US parity: 68px/800 with state glow */
  body.page-hk .hkx-big-score{font-size:68px;font-weight:800;line-height:.95;letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--ink-warn, var(--warn));text-shadow:0 0 36px rgba(245,158,11,.3)}
  body.page-hk .ms-green .hkx-big-score{color:var(--ink-up, var(--up));text-shadow:0 0 36px rgba(34,217,122,.3)}
  body.page-hk .ms-red .hkx-big-score{color:var(--ink-down, var(--down));text-shadow:0 0 36px rgba(239,68,68,.3)}
  /* zh glow literal mirrors (color text flips via --up/--down; rgba glow needs explicit mirror) */
  html[data-lang="zh"] body.page-hk .ms-green .hkx-big-score{text-shadow:0 0 36px rgba(239,68,68,.3)}
  html[data-lang="zh"] body.page-hk .ms-red .hkx-big-score{text-shadow:0 0 36px rgba(34,217,122,.3)}
  @media(max-width:560px){body.page-hk .hkx-big-score{font-size:34px}}
  body.page-hk .hkx-verdict{font-size:19px;font-weight:700;white-space:nowrap}
  @media(max-width:560px){body.page-hk .hkx-verdict{font-size:13px}}
  body.page-hk .hkx-verdict .arr{color:var(--ink-warn, var(--warn))}
  body.page-hk .ms-green .hkx-verdict .arr{color:var(--ink-up, var(--up))}
  body.page-hk .ms-red .hkx-verdict .arr{color:var(--ink-down, var(--down))}
  body.page-hk .hkx-sub{margin-left:7px;color:var(--muted);font-weight:400}
  body.page-hk .hkx-sub-line{font-size:11.5px;font-weight:650;letter-spacing:.4px;color:var(--ink-warn, var(--warn));margin-top:2px}
  body.page-hk .ms-green .hkx-sub-line{color:var(--ink-up, var(--up))}
  body.page-hk .ms-red .hkx-sub-line{color:var(--ink-down, var(--down))}
  /* Mechanic #4: three per-color spans, CSS-toggled */
  body.page-hk .hkx-sub-line .hkx-sub-g,body.page-hk .hkx-sub-line .hkx-sub-r{display:none}
  body.page-hk .hkx-sub-line .hkx-sub-y{display:inline}
  body.page-hk .ms-green .hkx-sub-line .hkx-sub-g{display:inline}
  body.page-hk .ms-green .hkx-sub-line .hkx-sub-y{display:none}
  body.page-hk .ms-red .hkx-sub-line .hkx-sub-r{display:inline}
  body.page-hk .ms-red .hkx-sub-line .hkx-sub-y{display:none}
  body.page-hk .hkx-thesis{font-size:13px;font-weight:450;line-height:1.55;color:var(--text);max-width:52ch;margin:12px 0 10px}
  body.page-hk .hkx-flip{font-size:11.5px;color:var(--muted);background:rgba(224,160,48,.08);border:1px solid rgba(224,160,48,.25);border-radius:10px;padding:7px 10px;max-width:46ch}
  body.page-hk .ms-green .hkx-flip{background:color-mix(in srgb,var(--up) 8%,transparent);border-color:color-mix(in srgb,var(--up) 25%,transparent)}
  body.page-hk .hkx-hero-btns{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;position:relative}
  /* F · hero buttons harmonised to the mx5/gbtn recipe: frosted glass, inset sheen, hover lift */
  body.page-hk .hkx-hbtn{background:var(--gbtn-bg,rgba(255,255,255,.05));border:1px solid var(--gbtn-brd,rgba(255,255,255,.13));color:var(--muted);border-radius:999px;padding:6px 13px;font-size:11.5px;font-weight:600;cursor:pointer;font-family:inherit;display:inline-flex;gap:6px;align-items:center;
    -webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
    box-shadow:inset 0 1px 0 var(--gbtn-sheen);
    transition:color .2s ease,border-color .2s ease,background .2s ease,transform .16s ease,box-shadow .25s ease}
  body.page-hk .hkx-hbtn:hover{color:var(--text);background:var(--gbtn-bg-hover,rgba(255,255,255,.09));border-color:var(--gbtn-brd-hover,rgba(255,255,255,.28));transform:translateY(-1px);box-shadow:inset 0 1px 0 var(--gbtn-sheen),0 8px 20px -10px rgba(3,7,18,.55)}
  body.page-hk .hkx-hbtn:active{transform:translateY(0) scale(.985);box-shadow:inset 0 1px 0 var(--gbtn-sheen)}
  body.page-hk .hkx-hbtn:focus-visible{outline:2px solid var(--up);outline-offset:2px}
  @media (prefers-reduced-motion:reduce){body.page-hk .hkx-hbtn,body.page-hk .hkx-hbtn:hover,body.page-hk .hkx-hbtn:active{transform:none}}
  body.page-hk .hkx-hbtn .n{font-weight:700}
  body.page-hk .hkx-path-h{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
  body.page-hk .hkx-path-svg{width:100%;height:auto;display:block}
  /* Popovers */
  body.page-hk .hkx-pop{position:absolute;top:calc(100% + 10px);left:0;width:300px;background:var(--mx5-pop-bg,rgba(13,18,26,.97));border:1px solid rgba(255,255,255,.14);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.6);padding:16px 18px;z-index:40;display:none}
  body.page-hk .hkx-pop.open{display:block;animation:hkx-popin .18s ease-out}
  @keyframes hkx-popin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  body.page-hk .hkx-pop-h{font-size:10.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--text);margin-bottom:12px}
  body.page-hk .hkx-pop-row{margin:9px 0}
  body.page-hk .hkx-pop-row .pr-t{display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px}
  body.page-hk .hkx-pop-row .pr-t b{font-weight:700}
  body.page-hk .hkx-pop-bar{height:4px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
  body.page-hk .hkx-pop-bar i{display:block;height:100%;border-radius:3px}
  body.page-hk .hkx-pop-flag{font-size:9.5px;font-weight:700;letter-spacing:.8px;margin:10px 0 2px}
  body.page-hk .hkx-pop-link{display:block;font-size:11.5px;font-weight:650;color:var(--ink-link, var(--link));margin-top:12px;cursor:pointer}
  body.page-hk .hkx-pop-big{display:flex;align-items:baseline;gap:10px;margin:2px 0 4px}
  /* family-coherence per #3174 pattern: .hkx-pop-big shows the pullback risk number
     which is a direction read (risk-off) → var(--down) flips correctly in zh */
  body.page-hk .hkx-pop-big .n{font-size:30px;font-weight:750;color:var(--ink-down, var(--down))}
  body.page-hk .hkx-pop-big .t{font-size:12.5px;font-weight:700;color:var(--ink-down, var(--down))}
  body.page-hk .hkx-pop-sub{font-size:11.5px;color:var(--muted);margin-bottom:8px}
  body.page-hk .hkx-hero-vitals{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
  body.page-hk .hkx-vchip{font-size:10.5px;border-radius:8px;padding:4px 9px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:var(--muted)}
  body.page-hk .hkx-vchip b{color:var(--text);font-weight:650}
  body.page-hk .hkx-vchip.warn{border-color:rgba(224,160,48,.35);color:var(--ink-warn, var(--warn))}
  body.page-hk .hkx-vchip.bad{border-color:rgba(224,100,100,.35);color:#eda8a8}
  /* Tiles */
  body.page-hk .hkx-secbar{display:flex;align-items:baseline;justify-content:space-between;margin:20px 2px 12px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
  body.page-hk .hkx-secbar b{color:var(--text);font-weight:700}
  body.page-hk .hkx-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 16px}
  @media(max-width:1100px){body.page-hk .hkx-tiles{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){body.page-hk .hkx-tiles{grid-template-columns:1fr}}
  body.page-hk .hkx-tile{padding:13px 15px;border-top:2px solid transparent;transition:border-color .2s}
  body.page-hk .hkx-tile:hover{border-top-color:var(--up)}
  body.page-hk .hkx-tile .sym{font-size:11px;font-weight:700;letter-spacing:.6px}
  body.page-hk .hkx-tile .nm{font-size:9.5px;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;margin-top:1px}
  body.page-hk .hkx-tile .px{font-size:19px;font-weight:700;margin-top:7px}
  body.page-hk .hkx-tile .chg{font-size:11.5px;font-weight:650;margin-top:1px}
  /* zh 红涨绿跌 is AUTOMATIC: theme.css flips --up/--down globally under
     html[data-lang="zh"], so direction elements just use the direction tokens.
     Do NOT add per-page dir-* flip rules — they double-flip back to green
     (caught live on this build). */
  body.page-hk .hkx-tile .chg.up{color:var(--ink-up, var(--up))}
  body.page-hk .hkx-tile .chg.dn{color:var(--ink-down, var(--down))}
  /* Racks */
  body.page-hk .hkx-rack2{display:grid;grid-template-columns:3fr 2fr;gap:14px;margin-bottom:14px}
  body.page-hk .hkx-rack3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}
  @media(max-width:1000px){body.page-hk .hkx-rack2,body.page-hk .hkx-rack3{grid-template-columns:1fr}}
  @media(max-width:1000px){body.page-hk .hkx-hero{grid-template-columns:1fr}}
  @media(max-width:1000px){body.page-hk .hkx-hero-left{border-right:none;border-bottom:1px solid rgba(255,255,255,.12)}}
  /* Card internals */
  body.page-hk .hkx-row{display:flex;gap:10px;align-items:flex-start;padding:6px 0;border-bottom:1px solid var(--line);font-size:12.5px}
  body.page-hk .hkx-row:last-child{border-bottom:none}
  body.page-hk .hkx-row .ic{flex:0 0 20px;text-align:center;font-size:12px;padding-top:1px}
  body.page-hk .hkx-row .sub{display:block;font-size:10.5px;color:var(--muted);margin-top:1px}
  body.page-hk .hkx-kv{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);font-size:12.5px}
  body.page-hk .hkx-kv:last-of-type{border-bottom:none}
  body.page-hk .hkx-kv .k{color:var(--muted)}
  body.page-hk .hkx-kv .v{font-weight:650;text-align:right}
  body.page-hk .hkx-stword.ok{color:var(--ink-up, var(--up))}
  body.page-hk .hkx-stword.warn{color:var(--ink-warn, var(--warn))}
  body.page-hk .hkx-stword.bad{color:var(--ink-down, var(--down))}
  /* .hkx-stword.act uses var(--act) which is a non-flipping legacy alias → remap to var(--down)
     so it participates in the zh swap (market-direction reads: "act" = a bad stance).
     NO zh overrides for .ok/.bad here: they paint from --up/--down, which the theme.css
     zh swap already flips — a zh-scoped re-swap would double-flip them back to Western. */
  body.page-hk .hkx-stword.act{color:var(--ink-down, var(--down))}
  body.page-hk .hkx-chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}
  body.page-hk .hkx-chip{font-size:11px;border-radius:999px;padding:3px 10px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.04)}
  body.page-hk .hkx-chip.hot{background:rgba(224,100,100,.13);border-color:rgba(224,100,100,.4);color:#eda8a8}
  body.page-hk .hkx-chip.turn{background:rgba(69,184,115,.12);border-color:rgba(69,184,115,.4);color:#8fd7ae}
  /* Attention chip (news names getting real coverage) — plain state word, muted glass */
  body.page-hk .hkx-nchip{display:inline-flex;align-items:baseline;gap:6px;font-size:11.5px;border-radius:999px;padding:4px 11px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
  body.page-hk .hkx-nchip b{font-weight:650;color:var(--text)}
  body.page-hk .hkx-nchip .st{font-size:10.5px;color:var(--muted)}
  /* News & Filings type pill — colour = MARKET IMPACT direction (semantic, not decor):
     buyback supports price (--up), placement dilutes (--down), results neutral (--info). */
  body.page-hk .hkx-tp{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.5px;
     text-transform:uppercase;border-radius:5px;padding:2px 7px;white-space:nowrap;
     border:1px solid color-mix(in srgb,var(--muted) 40%,transparent);color:var(--muted);
     background:color-mix(in srgb,var(--muted) 10%,transparent)}
  body.page-hk .hkx-tp.buyback{border-color:color-mix(in srgb,var(--up) 55%,transparent);color:var(--ink-up, var(--up));background:color-mix(in srgb,var(--up) 12%,transparent)}
  body.page-hk .hkx-tp.placement{border-color:color-mix(in srgb,var(--down) 55%,transparent);color:var(--ink-down, var(--down));background:color-mix(in srgb,var(--down) 12%,transparent)}
  body.page-hk .hkx-tp.results{border-color:color-mix(in srgb,var(--info) 55%,transparent);color:var(--ink-info, var(--info));background:color-mix(in srgb,var(--info) 12%,transparent)}
  /* recent-window count strip — honest counts, plain words, one glance line */
  body.page-hk .hkx-fsum{display:flex;flex-wrap:wrap;gap:5px 14px;font-size:11.5px;color:var(--muted);margin:2px 0 10px}
  body.page-hk .hkx-fsum b{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
  body.page-hk .hkx-fsum .u{color:var(--ink-up, var(--up))} body.page-hk .hkx-fsum .d{color:var(--ink-down, var(--down))} body.page-hk .hkx-fsum .i{color:var(--ink-info, var(--info))}
  /* filing row (card + dialog) — date · company · pill · plain read */
  body.page-hk .hkx-frw{display:flex;align-items:baseline;gap:9px;padding:7px 0;border-bottom:1px solid var(--line);font-size:12.5px}
  body.page-hk .hkx-frw:last-child{border-bottom:none}
  body.page-hk .hkx-frw .co{font-weight:650;color:var(--text);white-space:nowrap}
  body.page-hk .hkx-frw .rd{color:var(--muted);font-size:11.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.page-hk .hkx-frw .dt{color:var(--muted);font-size:10.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
  body.page-hk .hkx-warm{font-size:12px;color:var(--muted);background:color-mix(in srgb,var(--info) 6%,transparent);border-left:2px solid color-mix(in srgb,var(--info) 40%,transparent);border-radius:0 8px 8px 0;padding:9px 12px;margin:2px 0}
  body.page-hk .hkx-fresh{font-size:10.5px;color:var(--muted);margin-top:6px;opacity:.85}
  body.page-hk .hkx-lbl{font-size:9.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);margin:8px 0 4px}
  body.page-hk .hkx-foot{font-size:10.5px;color:var(--muted);margin-top:9px;border-top:1px solid rgba(255,255,255,.05);padding-top:7px}
  body.page-hk .hkx-bignum{font-size:28px;font-weight:750;line-height:1.05}
  body.page-hk .hkx-bigsub{font-size:12px;font-weight:650;margin-top:3px}
  body.page-hk .hkx-alert-pill{margin-left:auto;font-size:10px;font-weight:700;background:rgba(224,160,48,.16);color:var(--ink-warn, var(--warn));border-radius:999px;padding:2px 9px;letter-spacing:.5px}
  /* direction-wash helpers for inline pills: use color-mix so zh swap applies automatically */
  body.page-hk .hkx-alert-pill.pill-buy{background:color-mix(in srgb,var(--up) 14%,transparent);color:var(--ink-up, var(--up))}
  body.page-hk .hkx-alert-pill.pill-sell{background:color-mix(in srgb,var(--down) 14%,transparent);color:var(--ink-down, var(--down))}
  body.page-hk .hkx-heat{display:flex;gap:4px;margin-top:6px}
  body.page-hk .hkx-heat i{flex:1;height:12px;border-radius:3px}
  /* h=hot (green), h2=warm, h3=mild, c=cold (red), c2=cool, n=neutral */
  body.page-hk .hkx-heat i{background:var(--muted);opacity:.25}
  body.page-hk .hkx-heat i.h{background:var(--up);opacity:1}
  body.page-hk .hkx-heat i.h2{background:color-mix(in srgb,var(--up) 65%,transparent);opacity:1}
  body.page-hk .hkx-heat i.h3{background:color-mix(in srgb,var(--up) 35%,transparent);opacity:1}
  body.page-hk .hkx-heat i.c{background:var(--down);opacity:1}
  body.page-hk .hkx-heat i.c2{background:color-mix(in srgb,var(--down) 50%,transparent);opacity:1}
  body.page-hk .hkx-heat i.n{background:rgba(255,255,255,.12);opacity:1}
  
  body.page-hk .hkx-heat-legend{display:flex;justify-content:space-between;margin-top:7px;font-size:10px;font-weight:600;letter-spacing:.03em}
  body.page-hk .hkx-heat-legend .heat-up{color:var(--ink-up, var(--up))}
  body.page-hk .hkx-heat-legend .heat-dn{color:var(--ink-down, var(--down))}
  
  body.page-hk .hkx-ilx{margin:6px 0 2px}
  body.page-hk .hkx-stk{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:12px}
  body.page-hk .hkx-stk:last-of-type{border-bottom:none}
  body.page-hk .hkx-tkr-btn{display:inline-block;background:rgba(91,155,240,.10);border:1px solid rgba(91,155,240,.35);color:#a9c8f5;border-radius:8px;padding:3px 10px;font-weight:700;font-size:12px;cursor:pointer;text-decoration:none}
  body.page-hk .hkx-tkr-btn:hover{background:rgba(91,155,240,.22)}
  body.page-hk .hkx-stk-meta{flex:1;min-width:0;color:var(--muted);font-size:10.5px}
  body.page-hk .hkx-stk-meta b{color:var(--text);font-weight:650;font-size:11.5px}
  body.page-hk .hkx-stage{flex:0 0 auto;font-size:9px;font-weight:700;letter-spacing:.6px;border-radius:5px;padding:2px 7px;background:rgba(69,184,115,.14);color:#8fd7ae;border:1px solid rgba(69,184,115,.35)}
  /* the mint literal is dark-tuned (1.45:1 on light paper); light takes the estate ink, dark is untouched */
  html[data-theme="light"] body.page-hk .hkx-stage{color:var(--ink-up,var(--up));border-color:color-mix(in srgb,var(--ink-up,var(--up)) 40%,var(--line))}
  body.page-hk .hkx-screener-btn{display:block;width:100%;text-align:center;margin-top:11px;background:linear-gradient(135deg,rgba(91,155,240,.18),rgba(69,184,115,.14));border:1px solid rgba(91,155,240,.4);color:var(--text);font-weight:700;font-size:12.5px;border-radius:12px;padding:10px 0;cursor:pointer;text-decoration:none;letter-spacing:.4px}
  body.page-hk .hkx-bbar{display:flex;height:14px;border-radius:6px;overflow:hidden;margin:6px 0}
  body.page-hk .hkx-bbar .bull{background:var(--up)} body.page-hk .hkx-bbar .bear{background:var(--down)}
  
  body.page-hk .hkx-pegband{position:relative;height:24px;border-radius:8px;margin:8px 0 20px;background:linear-gradient(90deg,rgba(69,184,115,.25),rgba(224,160,48,.2),rgba(224,100,100,.3))}
  
  body.page-hk .hkx-pegband .hkx-mark{position:absolute;top:-3px;bottom:-3px;width:3px;background:var(--text);border-radius:2px}
  body.page-hk .hkx-pegband .hkx-ends{position:absolute;bottom:-14px;left:0;width:100%;display:flex;justify-content:space-between;font-size:9px;color:var(--muted)}
  body.page-hk .hkx-estrip{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
  body.page-hk .hkx-ev{flex:1 1 84px;text-align:center;border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:9px 6px;background:rgba(255,255,255,.02)}
  body.page-hk .hkx-ev .en{font-size:11px;font-weight:650;margin:2px 0}
  body.page-hk .hkx-ev .ed{font-size:10px;color:var(--muted)}
  body.page-hk .hkx-ev .imp{font-size:9px;font-weight:700;letter-spacing:.6px;border-radius:4px;padding:1px 6px}
  body.page-hk .hkx-imp.high{background:rgba(224,100,100,.2);color:#eda8a8}
  body.page-hk .hkx-imp.med{background:rgba(224,160,48,.16);color:var(--ink-warn, var(--warn))}
  body.page-hk .hkx-dh{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);padding:11px 18px}
  body.page-hk .hkx-dh b{color:var(--text);font-weight:650}
  body.page-hk .hkx-dh .d{width:8px;height:8px;border-radius:50%;background:var(--warn)}
  body.page-hk .hkx-links{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 12px}
  body.page-hk .hkx-links a{color:var(--text);text-decoration:none;font-size:12px;border:1px solid rgba(255,255,255,.12);background:var(--mx5-glass-bg,rgba(16,22,30,.55));border-radius:999px;padding:7px 15px}
  body.page-hk .hkx-receipt{font-size:11px;color:var(--muted);border-top:1px solid rgba(255,255,255,.07);margin-top:14px;padding-top:10px}
  body.page-hk .hkx-sep{height:1px;background:rgba(255,255,255,.07);margin:14px 0}
  body.page-hk .hkx-eyebrow{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:14px 0 8px}
  body.page-hk .hkx-eyebrow:first-child{margin-top:0}
  body.page-hk .hkx-plain{font-size:12.5px;color:var(--muted);background:rgba(91,155,240,.06);border-left:2px solid rgba(91,155,240,.4);border-radius:0 8px 8px 0;padding:8px 12px;margin:2px 0 14px}
  body.page-hk .hkx-plain b{color:var(--text);font-weight:650}
  body.page-hk .hkx-frow{display:grid;grid-template-columns:180px 1fr 48px;gap:12px;align-items:center;padding:7px 0;font-size:12.5px}
  body.page-hk .hkx-frow .fread{font-size:11px;color:var(--muted)}
  body.page-hk .hkx-fbar{height:7px;border-radius:4px;background:rgba(255,255,255,.07);overflow:hidden}
  body.page-hk .hkx-fbar i{display:block;height:100%;border-radius:4px}
  body.page-hk .hkx-fscore{text-align:right;font-weight:700}
  body.page-hk table.hkx-mt{width:100%;border-collapse:collapse;font-size:12px}
  body.page-hk table.hkx-mt th{font-size:9.5px;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);text-align:left;padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.09)}
  body.page-hk table.hkx-mt td{padding:7px 8px;border-bottom:1px solid rgba(255,255,255,.05)}
  body.page-hk table.hkx-mt td.r,body.page-hk table.hkx-mt th.r{text-align:right}
  body.page-hk .hkx-tt-dn{color:var(--ink-down, var(--down));font-weight:650} body.page-hk .hkx-tt-up{color:var(--ink-up, var(--up));font-weight:650} body.page-hk .hkx-tt-fl{color:var(--ink-warn, var(--warn));font-weight:650}
  body.page-hk .hkx-cols2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  @media(max-width:980px){body.page-hk .hkx-cols2{grid-template-columns:1fr}}
  /* Mechanic #6: 2-col dialog with minmax(0,1fr) */
  body.page-hk .hkx-hm-wrap{border:1px solid rgba(255,255,255,.09);border-radius:12px;background:rgba(255,255,255,.02);padding:12px}
  /* Cross-asset strip (market_tiles row) */
  body.page-hk .hkx-cas-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:0 0 16px}
  @media(max-width:1100px){body.page-hk .hkx-cas-strip{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:560px){body.page-hk .hkx-cas-strip{grid-template-columns:repeat(2,1fr)}}
  body.page-hk .hkx-cat{padding:10px 12px;border-radius:12px}
  body.page-hk .hkx-cat .cat-tag{font-size:9.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
  body.page-hk .hkx-cat .cat-val{font-size:14px;font-weight:700;line-height:1.1}
  body.page-hk .hkx-cat .cat-chg{font-size:10.5px;font-weight:650;margin-top:2px}
  body.page-hk .hkx-cat .cat-tone{font-size:9.5px;font-weight:700;letter-spacing:.5px;border-radius:4px;padding:1px 7px;margin-top:3px;display:inline-block}
  body.page-hk .hkx-cat .cat-tone.bull{background:color-mix(in srgb,var(--up) 14%,transparent);color:var(--ink-up, var(--up))}
  body.page-hk .hkx-cat .cat-tone.bear{background:color-mix(in srgb,var(--down) 14%,transparent);color:var(--ink-down, var(--down))}
  body.page-hk .hkx-cat .cat-tone.warn{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--ink-warn, var(--warn))}
  body.page-hk .hkx-cat .cat-tone.neu{background:rgba(255,255,255,.06);color:var(--muted)}
  /* PEG-warn accent on the USD/HKD tile */
  body.page-hk .hkx-cat.peg-warn{border-color:rgba(224,160,48,.4)!important}
  /* Data health dialog */
  body.page-hk .hkx-dh-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);font-size:12px}
  body.page-hk .hkx-dh-row:last-child{border-bottom:none}
  body.page-hk .hkx-dh-dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
  /* Valuation section in dlg-flows */
  body.page-hk .hkx-val-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:10px 0}
  body.page-hk .hkx-freshbar{background:rgba(224,160,48,.10);border:1px solid rgba(224,160,48,.3);border-radius:12px;padding:8px 14px;font-size:12px;color:var(--ink-warn, var(--warn));margin-bottom:14px}
  body.page-hk .hkx-nchip{display:inline-block;font-size:10px;font-weight:650;border-radius:6px;padding:2px 8px;margin:2px 4px 0 0;background:rgba(255,255,255,.06);color:var(--muted)}
  /* Dial (VHSI gauge) */
  body.page-hk .hkx-dial{width:100%;max-width:320px;margin:0 auto;display:block}
  body.page-hk .hkx-dial-word{text-align:center;font-size:14px;font-weight:700;color:var(--ink-warn, var(--warn));margin-top:-4px}
  body.page-hk .hkx-dial-sub{text-align:center;font-size:10.5px;color:var(--muted)}

  /* Mechanic #5: Dialog animation (China #2592 spec) */
  body.page-hk .hkx-dlg{position:fixed;inset:0;display:none;align-items:flex-start;justify-content:center;z-index:200;overflow:auto;padding:5vh 16px}
  body.page-hk .hkx-dlg.open{display:flex}
  body.page-hk .hkx-dlg-backdrop{position:fixed;inset:0;background:rgba(5,8,12,.6);backdrop-filter:blur(6px)}
  body.page-hk .hkx-dlg-panel{position:relative;width:min(900px,94vw);background:rgba(13,17,24,.94);border:1px solid rgba(255,255,255,.14);border-radius:20px;box-shadow:0 30px 90px rgba(0,0,0,.6);backdrop-filter:blur(28px) saturate(1.4);margin-bottom:6vh}
  body.page-hk .hkx-dlg-head{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid rgba(255,255,255,.09)}
  body.page-hk .hkx-dlg-title{font-size:13px;font-weight:700;letter-spacing:.7px;text-transform:uppercase}
  /* E · close button → mx5 gbtn-icon recipe: frosted circle, inset sheen, hover lift + brighter fill */
  body.page-hk .hkx-dlg-close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:999px;
    background:var(--gbtn-bg);border:1px solid var(--gbtn-brd);color:var(--muted);font-size:16px;line-height:1;cursor:pointer;font-family:inherit;flex-shrink:0;
    -webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
    box-shadow:inset 0 1px 0 var(--gbtn-sheen),0 1px 2px rgba(3,7,18,.18);
    transition:background .2s ease,border-color .2s ease,color .2s ease,transform .16s ease,box-shadow .25s ease}
  body.page-hk .hkx-dlg-close:hover{background:var(--gbtn-bg-hover,rgba(255,255,255,.08));border-color:var(--gbtn-brd-hover,rgba(255,255,255,.28));color:var(--text);transform:translateY(-1px);box-shadow:inset 0 1px 0 var(--gbtn-sheen),0 8px 20px -10px rgba(3,7,18,.55)}
  body.page-hk .hkx-dlg-close:active{transform:translateY(0) scale(.985);box-shadow:inset 0 1px 0 var(--gbtn-sheen)}
  body.page-hk .hkx-dlg-close:focus-visible{outline:2px solid var(--up);outline-offset:2px}
  @media (prefers-reduced-motion:reduce){body.page-hk .hkx-dlg-close,body.page-hk .hkx-dlg-close:hover,body.page-hk .hkx-dlg-close:active{transform:none}}
  body.page-hk .hkx-dlg-body{padding:18px 22px 22px}
  /* Mechanic #6: dialog body 2-col with minmax(0,1fr) */
  body.page-hk .hkx-dlg-body .hkx-cols2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  @media(max-width:980px){body.page-hk .hkx-dlg-body .hkx-cols2{grid-template-columns:minmax(0,1fr)}}
  /* E · mobile bottom-sheet (≤700px) — mx5 parity: dialog docks to bottom, panel slides up */
  @media(max-width:700px){
    body.page-hk .hkx-dlg{align-items:flex-end;padding:0}
    body.page-hk .hkx-dlg-panel{width:calc(100% - 24px);max-width:none;max-height:88vh;margin:0 12px;border-radius:20px 20px 0 0;overflow-y:auto}
    body.page-hk .hkx-dlg-close{width:40px;height:40px;font-size:20px}
    @media(prefers-reduced-motion:no-preference){
      body.page-hk .hkx-dlg-panel{opacity:1;transform:translateY(100%) scale(1);transition:transform 260ms cubic-bezier(.22,.9,.26,1.02)}
      body.page-hk .hkx-dlg.hkx-in .hkx-dlg-panel{transform:translateY(0) scale(1)}
      body.page-hk .hkx-dlg.hkx-closing .hkx-dlg-panel{transition-duration:200ms}
    }
    @media(prefers-reduced-motion:reduce){body.page-hk .hkx-dlg.open .hkx-dlg-panel{transform:translateY(0)}}
  }
  /* ilx / Signal-Ink charts stretch to their column width intrinsically (illus.css);
     no per-chart resize needed. */
  body.page-hk table.hkx-mt{display:block;max-width:100%;overflow-x:auto}
  @media(prefers-reduced-motion:no-preference){
    body.page-hk .hkx-dlg-backdrop{opacity:0;transition:opacity 240ms ease-out}
    body.page-hk .hkx-dlg.hkx-in .hkx-dlg-backdrop{opacity:1}
    body.page-hk .hkx-dlg-panel{opacity:0;transform:translateY(14px) scale(.965);transition:opacity 320ms cubic-bezier(.22,.9,.26,1.02),transform 320ms cubic-bezier(.22,.9,.26,1.02)}
    body.page-hk .hkx-dlg.hkx-in .hkx-dlg-panel{opacity:1;transform:translateY(0) scale(1)}
    body.page-hk .hkx-dlg.hkx-closing .hkx-dlg-backdrop{transition-duration:180ms}
    body.page-hk .hkx-dlg.hkx-closing .hkx-dlg-panel{transition-duration:180ms}
    body.page-hk .hkx-dlg-body > *{opacity:0;transform:translateY(10px);transition:opacity 300ms ease-out,transform 300ms cubic-bezier(.22,.9,.26,1.02)}
    body.page-hk .hkx-dlg.hkx-in .hkx-dlg-body > *{opacity:1;transform:translateY(0)}
    body.page-hk .hkx-dlg.hkx-in .hkx-dlg-body > *:nth-child(1){transition-delay:60ms}
    body.page-hk .hkx-dlg.hkx-in .hkx-dlg-body > *:nth-child(2){transition-delay:100ms}
    body.page-hk .hkx-dlg.hkx-in .hkx-dlg-body > *:nth-child(3){transition-delay:140ms}
    body.page-hk .hkx-dlg.hkx-in .hkx-dlg-body > *:nth-child(4){transition-delay:180ms}
    body.page-hk .hkx-dlg.hkx-in .hkx-dlg-body > *:nth-child(5){transition-delay:220ms}
    body.page-hk .hkx-dlg.hkx-in .hkx-dlg-body > *:nth-child(n+6){transition-delay:0ms}
    body.page-hk .hkx-dlg.hkx-closing .hkx-dlg-body > *{transition-delay:0ms!important}
  }
  @media(prefers-reduced-motion:reduce){
    body.page-hk .hkx-dlg.open .hkx-dlg-backdrop{opacity:1}
    body.page-hk .hkx-dlg.open .hkx-dlg-panel{opacity:1;transform:none}
    body.page-hk .hkx-dlg.open .hkx-dlg-body > *{opacity:1;transform:none}
  }

  /* Mechanic #9: light-mode — exact US tokens */
  [data-theme="light"] body.page-hk{--mx5-glass-bg:rgba(255,255,255,.82);--mx5-glass-border:rgba(0,0,0,.06);--mx5-pop-bg:rgba(255,255,255,.97)}
  [data-theme="light"] body.page-hk .hkx-card{box-shadow:0 4px 24px rgba(0,0,0,.09),0 1px 0 rgba(255,255,255,.95) inset}
  [data-theme="light"] body.page-hk .hkx-card[role="button"]:hover{background:rgba(255,255,255,.92);border-color:rgba(0,0,0,.14);box-shadow:0 6px 24px rgba(0,0,0,.12)}
  [data-theme="light"] body.page-hk .hkx-pop{background:rgba(255,255,255,.98);border-color:rgba(0,0,0,.1);box-shadow:0 8px 32px rgba(0,0,0,.13)}
  [data-theme="light"] body.page-hk .hkx-dlg-panel{background:rgba(255,255,255,.98);border-color:rgba(0,0,0,.1)}
  [data-theme="light"] body.page-hk .hkx-dlg-backdrop{background:rgba(20,24,30,.34)}
  [data-theme="light"] body.page-hk .hkx-dlg-head{border-bottom-color:rgba(0,0,0,.09)}
  [data-theme="light"] body.page-hk .hkx-dlg-close{border-color:rgba(0,0,0,.18)}
  [data-theme="light"] body.page-hk .hkx-hm-wrap{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.1)}
  [data-theme="light"] body.page-hk .hkx-links a,[data-theme="light"] body.page-hk .hkx-dh{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.09)}
  [data-theme="light"] body.page-hk .hkx-hero-left{border-right-color:rgba(0,0,0,.08)}
  [data-theme="light"] body.page-hk .hkx-row,[data-theme="light"] body.page-hk .hkx-kv,[data-theme="light"] body.page-hk .hkx-foot,[data-theme="light"] body.page-hk .hkx-stk,[data-theme="light"] body.page-hk .hkx-receipt,[data-theme="light"] body.page-hk table.hkx-mt td,[data-theme="light"] body.page-hk table.hkx-mt th,[data-theme="light"] body.page-hk .hkx-sep{border-color:rgba(0,0,0,.08)}
  [data-theme="light"] body.page-hk .hkx-pop-bar,[data-theme="light"] body.page-hk .hkx-fbar,[data-theme="light"] body.page-hk .hkx-heat i.n{background:rgba(0,0,0,.09)}
  [data-theme="light"] body.page-hk .hkx-hbtn{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.12)}
  [data-theme="light"] body.page-hk .hkx-hbtn:hover{background:rgba(0,0,0,.06)}
  [data-theme="light"] body.page-hk .hkx-chip:not(.hot):not(.turn),[data-theme="light"] body.page-hk .hkx-ev,[data-theme="light"] body.page-hk .hkx-nchip{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.1)}
  [data-theme="light"] body.page-hk .hkx-regime-pill{border-color:rgba(0,0,0,.12)}
  [data-theme="light"] body.page-hk .hkx-chip.hot,[data-theme="light"] body.page-hk .hkx-imp.high{color:#b4232a}
  [data-theme="light"] body.page-hk .hkx-chip.turn{color:#1f7a44}
  [data-theme="light"] body.page-hk .hkx-tkr-btn{color:#2456a8}

  /* ═══════════════════════════════════════════════════════════════════
     MX5 SCORECARD SYSTEM — ported from templates/dashboard.html.j2 (US macro
     exemplar), re-scoped body.page-macro.mx4-grid → body.page-hk. Components:
     A hero regime odometer · B 60-session verdict-band path · C combined
     index face · D sentiment odometer. Accent routes through --up/--warn/--down
     so STATE drives the glance AND the zh 红涨绿跌 swap flips it. */
  /* ── v5 glass tokens (HK layer) ── */
  body.page-hk{
    --mx5-glass-bg:      rgba(16,22,30,.55);
    --mx5-pop-bg:        rgba(13,18,26,.96);
    --mx5-glass-border:  rgba(255,255,255,.12);
    --mx5-glass-shadow:  0 8px 32px rgba(0,0,0,.55), 0 1.5px 0 rgba(255,255,255,.07) inset;
    --mx5-blur:          blur(20px);
    --mx5-radius-card:   18px;
    --mx5-radius-pill:   999px;
    --mx5-accent:        var(--up,#22d97a);
    --mx5-accent-glow:   color-mix(in srgb,var(--up) 30%,transparent);
    --mx5-accent-dim:    color-mix(in srgb,var(--up) 10%,transparent);
    --mx5-warn:          var(--warn,#f59e0b);
    --mx5-warn-dim:      color-mix(in srgb,var(--warn) 10%,transparent);
    --mx5-accent-ink:    var(--ink-up, var(--up));
    --mx5-warn-ink:      var(--ink-warn, var(--warn));
    --mx5-hover-bg:      rgba(22,29,38,.62);
    --mx5-hover-border:  rgba(255,255,255,.16);
    --mx5-hover-shadow:  0 6px 24px rgba(0,0,0,.25);
    --mx5-focus-ring:    0 0 0 2px color-mix(in srgb,var(--up) 55%,transparent);
    --ink-1: var(--text);
    --ink-2: var(--muted);
    /* Third ink = --muted, the same value china/intl/macro already use. The
       70%-alpha form here composited to 3.43:1 on the light panel while
       carrying axis ticks, tickers and eyebrows; a THIRD text grade lighter
       than --muted cannot clear AA at all, so the hierarchy below --muted is
       carried by size and weight, never by fading the ink. */
    --ink-3: var(--muted);
  }
  [data-theme="light"] body.page-hk{
    --mx5-glass-shadow:  0 4px 24px rgba(0,0,0,.09), 0 1px 0 rgba(255,255,255,.95) inset;
    --mx5-accent-ink:    #17753f;
    --mx5-warn-ink:      #9c6212;
    --mx5-hover-bg:      rgba(255,255,255,.92);
    --mx5-hover-border:  rgba(0,0,0,.14);
    --mx5-hover-shadow:  0 6px 24px rgba(0,0,0,.12);
  }
  /* STATE → accent (routes through --up/--warn/--down → flips in zh) */
  body.page-hk .mx5-score-green  { --mx5-gauge: var(--up);   --mx5-accent: var(--up);   }
  body.page-hk .mx5-score-yellow { --mx5-gauge: var(--warn); --mx5-accent: var(--warn); }
  body.page-hk .mx5-score-red    { --mx5-gauge: var(--down); --mx5-accent: var(--down); }

  /* ── A · Hero gauge cluster ── */
  body.page-hk .mx5-sc-gauge-row{display:flex;align-items:center;gap:20px;margin-bottom:14px;flex-wrap:wrap;
    --mx5-accent-glow:color-mix(in srgb,var(--mx5-accent) 30%,transparent);
    --mx5-accent-dim:color-mix(in srgb,var(--mx5-accent) 10%,transparent);}
  body.page-hk .mx5-gauge-svg{width:176px;height:127px;overflow:visible;display:block;flex-shrink:0;}
  [data-theme="light"] body.page-hk .mx5-gauge-svg > text{fill:rgba(10,16,24,.42);}
  [data-theme="light"] body.page-hk .mx5-gauge-svg path:first-of-type{stroke:rgba(10,16,24,.10);}
  [data-theme="light"] body.page-hk .mx5-gauge-svg g[stroke]{stroke:rgba(10,16,24,.20);}
  /* The shared light pointer lives in theme.css and inherits this gauge's
     state-driven --mx5-gauge token. Dark presentation attributes stay untouched. */
  /* CSS wins over SVG presentation attr → arc + numeral recolour by state (var() resolves here) */
  body.page-hk #mx5-gauge-arc-fill { stroke: var(--mx5-gauge, #f59e0b); }
  /* The big score beside the gauge already states the number; the in-arc numeral +
     "/100" collided with the needle hub at glance size → hidden (remove-one-accessory).
     The arc fill + needle still encode the 0–100 position visually. */
  body.page-hk #mx5-score-numeral,
  body.page-hk .mx5-gauge-svg text:last-of-type{ display:none; }
  /* needle accent parts recolour by state (CSS property beats the SVG fill/stroke attr)
     so the hub ring, core dot + tip flip 红涨绿跌 in zh alongside the arc + numeral */
  body.page-hk .mx5-needle-ring{stroke:var(--mx5-gauge,#f59e0b);}
  body.page-hk .mx5-needle-fill{fill:var(--mx5-gauge,#f59e0b);}
  body.page-hk .mx5-score-line{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;}
  body.page-hk .mx5-verdict-word{white-space:nowrap;font-size:19px;font-weight:700;color:var(--ink-1);}
  body.page-hk .mx5-big-score{font-size:60px;font-weight:800;line-height:.95;color:var(--mx5-accent-ink);
    text-shadow:0 0 40px var(--mx5-accent-glow);letter-spacing:-.035em;font-variant-numeric:tabular-nums;}
  body.page-hk .mx5-score-green .mx5-big-score{color:var(--ink-up, var(--up));text-shadow:0 0 36px color-mix(in srgb,var(--up) 30%,transparent);}
  body.page-hk .mx5-score-yellow .mx5-big-score{color:var(--ink-warn, var(--warn));text-shadow:0 0 36px color-mix(in srgb,var(--warn) 30%,transparent);}
  body.page-hk .mx5-score-red .mx5-big-score{color:var(--ink-down, var(--down));text-shadow:0 0 36px color-mix(in srgb,var(--down) 30%,transparent);}
  body.page-hk .mx5-sub-line{font-size:11px;color:var(--mx5-accent-ink);font-weight:600;margin-top:3px;}
  body.page-hk .mx5-score-yellow .mx5-sub-line{color:var(--mx5-warn-ink);}
  body.page-hk .mx5-score-red .mx5-sub-line{color:var(--ink-down, var(--down));}

  /* ── B · 60-session path panel ── */
  body.page-hk .mx5-sc-right{display:flex;flex-direction:column;flex:1;min-width:0;}
  body.page-hk .mx5-path-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;}
  body.page-hk .mx5-path-title{font-size:11px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:var(--ink-3);}
  body.page-hk .mx5-path-meta{font-size:11px;color:var(--ink-3);}
  body.page-hk .mx5-path-plot{position:relative;flex:1;min-height:180px;display:flex;}
  body.page-hk .mx5-path-svg{display:block;width:100%;flex:1;min-height:180px;overflow:visible;touch-action:pan-y;}
  body.page-hk .mx5-path-labels{position:absolute;inset:0;pointer-events:none;font-family:Inter,-apple-system,sans-serif;font-size:11px;line-height:1;}
  body.page-hk .mx5-path-labels > span{position:absolute;white-space:nowrap;}
  body.page-hk .mx5-pl-y{left:4px;transform:translateY(-50%);color:var(--ink-3);font-variant-numeric:tabular-nums;}
  body.page-hk .mx5-pl-zone{right:10px;transform:translateY(-50%);font-weight:600;}
  body.page-hk .mx5-pl-zone.on{color:var(--ink-up,var(--up));}
  body.page-hk .mx5-pl-zone.mid{color:var(--ink-warn,var(--warn));}
  body.page-hk .mx5-pl-zone.off{color:var(--ink-down,var(--down));}
  body.page-hk .mx5-pl-x{top:96.4%;color:var(--ink-3);}
  body.page-hk .mx5-pl-today{width:9px;height:9px;border-radius:50%;transform:translate(-50%,-50%);background:currentColor;box-shadow:0 0 6px currentColor;}
  body.page-hk .mx5-path-cross{position:absolute;top:0;width:1px;height:100%;background:linear-gradient(rgba(255,255,255,.28),rgba(255,255,255,.06));opacity:0;transform:translateX(-1px);pointer-events:none;transition:opacity .12s ease-out;will-change:left,opacity;}
  body.page-hk .mx5-path-dot{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--mx5-accent);border:2px solid var(--mx5-pop-bg,#0d121a);box-shadow:0 0 10px var(--mx5-accent-glow),0 0 0 1px rgba(255,255,255,.25);opacity:0;pointer-events:none;transform:translate(-50%,-50%);transition:opacity .12s ease-out;will-change:left,top,opacity;}
  body.page-hk .mx5-path-tip{position:absolute;z-index:6;pointer-events:none;display:flex;flex-direction:column;gap:2px;padding:8px 11px;border-radius:10px;background:rgba(15,19,26,.72);border:1px solid rgba(255,255,255,.12);box-shadow:0 8px 30px rgba(0,0,0,.5);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);opacity:0;transform:translate(-50%,calc(-100% - 14px)) translateY(4px);transition:opacity .13s ease-out,transform .13s ease-out;white-space:nowrap;}
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){body.page-hk .mx5-path-tip{background:var(--mx5-pop-bg,rgba(13,18,26,.98));}}
  [data-theme="light"] body.page-hk .mx5-path-tip{background:rgba(255,255,255,.82);border-color:rgba(0,0,0,.10);box-shadow:0 8px 30px rgba(0,0,0,.16);}
  body.page-hk .mx5-path-tip.show{opacity:1;transform:translate(-50%,calc(-100% - 14px));}
  body.page-hk .mx5-path-tip-date{font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--ink-3);text-transform:uppercase;}
  [data-theme="light"] body.page-hk .mx5-path-tip-date{color:rgba(0,0,0,.5);}
  body.page-hk .mx5-path-tip-row{display:flex;align-items:baseline;gap:7px;}
  body.page-hk .mx5-path-tip-score{font-size:16px;font-weight:800;line-height:1;color:var(--ink-1);font-variant-numeric:tabular-nums;}
  [data-theme="light"] body.page-hk .mx5-path-tip-score{color:rgba(0,0,0,.9);}
  body.page-hk .mx5-path-tip-verdict{font-size:12px;font-weight:600;}
  @media(max-width:820px){body.page-hk .mx5-sc-right{display:none;}}

  /* ── C · Combined-index face + market grid ── */
  body.page-hk .sxg-face.mx5-card-face{display:flex;flex-direction:column;padding:16px 18px 12px;cursor:pointer;
    border-radius:var(--mx5-radius-card);background:var(--mx5-glass-bg);border:1px solid var(--mx5-glass-border);
    backdrop-filter:var(--mx5-blur);box-shadow:var(--mx5-glass-shadow);user-select:none;position:relative;
    font:inherit;text-align:left;width:100%;color:inherit;box-sizing:border-box;
    transition:background .2s ease-out,border-color .2s ease-out,box-shadow .2s ease-out,transform .2s ease-out;margin-bottom:14px;}
  body.page-hk .sxg-face.mx5-card-face::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.04) 0%,transparent 55%);pointer-events:none;}
  body.page-hk .sxg-face.mx5-card-face:hover{background:var(--mx5-hover-bg);border-color:var(--mx5-hover-border);box-shadow:var(--mx5-hover-shadow);transform:translateY(-1px);}
  body.page-hk .sxg-face.mx5-card-face:focus-visible{outline:none;box-shadow:var(--mx5-focus-ring),var(--mx5-hover-shadow);}
  body.page-hk .mx5-face-eyebrow{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:6px;margin-bottom:12px;position:relative;}
  body.page-hk .mx5-face-eyebrow::after{content:'';flex:1;height:1px;background:color-mix(in srgb,var(--line,var(--muted)) 35%,transparent);}
  body.page-hk .mx5-mkt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
  @media(max-width:1100px){body.page-hk .mx5-mkt-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:520px){body.page-hk .mx5-mkt-grid{grid-template-columns:1fr 1fr;}}
  body.page-hk .mx5-mkt-tile{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:14px 16px 11px;position:relative;overflow:hidden;transition:background .2s ease-out,border-color .2s ease-out;}
  [data-theme="light"] body.page-hk .mx5-mkt-tile{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.07);}
  body.page-hk .mx5-mkt-ticker{font-size:11px;font-weight:700;letter-spacing:.07em;color:var(--ink-3);text-transform:uppercase;margin-bottom:3px;}
  body.page-hk .mx5-mkt-sub{font-size:11px;color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase;margin-bottom:4px;}
  body.page-hk .mx5-mkt-price{font-size:18px;font-weight:700;line-height:1;color:var(--ink-1);margin-bottom:4px;font-variant-numeric:tabular-nums;}
  body.page-hk .mx5-mkt-delta{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;}
  body.page-hk .mx5-mkt-delta.up{color:var(--ink-up, var(--up));}
  body.page-hk .mx5-mkt-delta.dn{color:var(--ink-down, var(--down));}
  body.page-hk .mx5-face-open{font-size:11px;color:var(--ink-3);margin-top:12px;font-weight:600;}

  /* ── D · Sentiment odometer (Mood & Fear) ── */
  /* HK dial = inverted VHSI: high fear → needle LEFT (panic). fg-fear→--down, fg-greed→--up,
     neutral→--warn; --fg-col routes through those so it flips 红涨绿跌 in zh. */
  body.page-hk .fg-greed{--fg-col:var(--up);--fg-col-ink:var(--ink-up, var(--up))} body.page-hk .fg-fear{--fg-col:var(--down);--fg-col-ink:var(--ink-down, var(--down))} body.page-hk .fg-neutral{--fg-col:var(--warn);--fg-col-ink:var(--ink-warn, var(--warn))}
  body.page-hk #hkx-sentiment .fg-mark-s{stroke:var(--fg-col)} body.page-hk #hkx-sentiment .fg-mark-f{fill:var(--fg-col)}
  body.page-hk #hkx-sentiment .fg-lab-panic{fill:var(--down)} body.page-hk #hkx-sentiment .fg-lab-euph{fill:var(--up)}
  body.page-hk .mx5-sentiment-dial-wrap{text-align:center;margin-bottom:4px;}
  body.page-hk .mx5-sentiment-zone-text{font-size:15px;font-weight:700;color:var(--fg-col-ink,var(--fg-col,var(--ink-warn, var(--warn))));text-align:center;margin-bottom:3px;}
  body.page-hk .mx5-sentiment-label{font-size:11px;color:var(--ink-3);text-align:center;margin-top:2px;}

  /* ── AI BRIEF DIALOG — ABX v2 shared body (.aib2-*); ZH-safe blue accent by default ── */

/* ── AI BRIEF v2 (aib2-*) — shared token spine ──────────────────────────────── */
.aib2{
  /* accent defaults to a stable Western blue (never red-flips in ZH); macro
     overrides to its green brief accent on its own dialog root. */
  --aib2-acc:var(--info,#3b82f6);
  --aib2-mut:var(--muted,rgba(255,255,255,.55));
  --aib2-surf:rgba(255,255,255,.035);
  --aib2-hair:rgba(255,255,255,.09);
  --aib2-track:rgba(255,255,255,.12);
  /* tone palette — engine-computed key_facts + stance tints. These are SEMANTIC
     quality tints (good/warn/bad), NOT price direction, so they use FIXED hexes and
     must NOT bind to --up/--down (which swap red<->green under html[data-lang="zh"]).
     This matches the sibling china chip idiom (.cnx-chip.turn = fixed green,
     .cnx-chip.hot = fixed red) — a "good" reading stays green in EN and ZH alike. */
  /* Bound to the HEALTH tokens rather than fixed hexes: --ok/--act encode safety,
     never direction, so they already do not flip under 红涨绿跌 — which is exactly
     the property this block was hand-rolling. Binding also earns the light twins
     and the --ink-* text grades for free (the fixed pair measured 2.7:1 and 3.5:1
     on a white panel). Same intent, one source of truth. */
  --aib2-good:var(--ok,#45b873);
  --aib2-bad:var(--act,#e06464);
  --aib2-warn:var(--warn,#f59e0b);  /* amber — does not flip in ZH */
  --aib2-info:var(--info,#5b9bf0);  /* blue  — does not flip in ZH */
  color:var(--text);
}
[data-theme="light"] .aib2{
  --aib2-surf:rgba(0,0,0,.028);--aib2-hair:rgba(0,0,0,.09);--aib2-track:rgba(0,0,0,.12);
  --aib2-good:#1f9a55;--aib2-bad:#cf4040;  /* light-theme fixed variants (match theme.css) */
}

/* ── 1 · header strip ───────────────────────────────────────────────────────── */
.aib2-hdr{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px;padding-bottom:15px;
  border-bottom:1px solid color-mix(in srgb,var(--aib2-acc) 16%,var(--aib2-hair));}
.aib2-icon{width:38px;height:38px;flex-shrink:0;border-radius:11px;
  background:linear-gradient(150deg,color-mix(in srgb,var(--aib2-acc) 22%,transparent),color-mix(in srgb,var(--aib2-acc) 8%,transparent));
  border:1px solid color-mix(in srgb,var(--aib2-acc) 30%,transparent);
  color:var(--aib2-acc);font-size:13px;font-weight:800;letter-spacing:.02em;
  display:flex;align-items:center;justify-content:center;}
.aib2-hdr-meta{flex:1;min-width:0;}
.aib2-hdr-title{font-size:15px;font-weight:700;color:var(--text);line-height:1.3;margin-bottom:4px;}
.aib2-hdr-sub{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.aib2-hdr-date{font-size:12px;color:var(--aib2-mut);font-variant-numeric:tabular-nums;letter-spacing:.02em;}
.aib2-cadence{font-size:10.5px;font-weight:650;letter-spacing:.02em;
  padding:2px 9px;border-radius:999px;
  background:color-mix(in srgb,var(--aib2-acc) 11%,transparent);
  border:1px solid color-mix(in srgb,var(--aib2-acc) 24%,transparent);
  color:color-mix(in srgb,var(--aib2-acc) 82%,var(--text));}
.aib2-badge{margin-left:auto;align-self:center;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--aib2-acc);opacity:.85;text-align:right;line-height:1.45;
  white-space:normal;max-width:210px;flex-shrink:0;}
[data-theme="light"] .aib2-badge{opacity:.95;}

/* ── section spine — a labelled hairline naming each movement ────────────────── */
.aib2-sec{display:flex;align-items:center;gap:10px;margin:20px 0 11px;}
.aib2-sec:first-child{margin-top:4px;}
.aib2-sec::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--aib2-acc) 26%,var(--aib2-hair)),transparent);}
.aib2-sec-label{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--aib2-mut);display:inline-flex;align-items:center;gap:7px;}
.aib2-sec-label::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--aib2-acc);}

/* ── 2 · the gist (glance tick-list) ────────────────────────────────────────── */
.aib2-gist{margin-bottom:16px;}
.aib2-gist-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:9px;}
.aib2-gist-list li{position:relative;padding-left:20px;
  font-size:14.5px;line-height:1.55;color:var(--text);font-weight:500;}
.aib2-gist-list li::before{content:"";position:absolute;left:2px;top:.58em;
  width:7px;height:7px;border-radius:2px;transform:rotate(45deg);
  background:color-mix(in srgb,var(--aib2-acc) 62%,transparent);}
.aib2-gist-list li b{font-weight:750;color:var(--text);}
/* first gist item = the most important thing today — a touch louder */
.aib2-gist-list li:first-child{font-size:15px;font-weight:600;}

/* STANCE PILL — the signature. Accent-tinted directive; the stance verb is bold. */
.aib2-stance{display:flex;align-items:flex-start;gap:11px;
  padding:13px 16px;border-radius:13px;
  background:color-mix(in srgb,var(--aib2-acc) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--aib2-acc) 30%,transparent);
  border-left:4px solid color-mix(in srgb,var(--aib2-acc) 72%,transparent);
  box-shadow:0 1px 0 color-mix(in srgb,var(--aib2-acc) 8%,transparent);}
[data-theme="light"] .aib2-stance{background:color-mix(in srgb,var(--aib2-acc) 9%,#fff);}
.aib2-stance-mark{color:var(--aib2-acc);font-size:15px;line-height:1.4;flex-shrink:0;margin-top:1px;}
.aib2-stance-body{font-size:15px;line-height:1.5;color:var(--text);font-weight:600;}
.aib2-stance-body b{font-weight:800;
  /* the stance verb gets the accent so the eye lands on the directive first */
  color:color-mix(in srgb,var(--aib2-acc) 55%,var(--text));}
/* tone variants — protect/stand-aside lean amber; act leans green; ignore muted */
.aib2-stance--warn{--aib2-acc:var(--aib2-warn);}
.aib2-stance--go{--aib2-acc:var(--aib2-good);}
.aib2-stance--muted{--aib2-acc:var(--aib2-mut);}
.aib2-stance--muted .aib2-stance-body b{color:var(--text);}

/* v1 lead card (summary fallback when tldr absent) */
.aib2-lead{font-size:16.5px;font-weight:600;line-height:1.62;color:var(--text);
  padding:16px 18px;border-radius:13px;margin-bottom:16px;
  background:color-mix(in srgb,var(--aib2-acc) 7%,transparent);
  border:1px solid color-mix(in srgb,var(--aib2-acc) 18%,transparent);
  border-left:3px solid color-mix(in srgb,var(--aib2-acc) 60%,transparent);}
[data-theme="light"] .aib2-lead{background:color-mix(in srgb,var(--aib2-acc) 6%,#fff);}

/* ── 3 · key readings (key_facts chip rail) ─────────────────────────────────── */
.aib2-kf-rail{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.aib2-kf{display:inline-flex;align-items:baseline;gap:7px;
  padding:6px 12px;border-radius:999px;font-size:12.5px;line-height:1.3;
  background:var(--aib2-surf);border:1px solid var(--aib2-hair);max-width:100%;}
.aib2-kf-k{color:var(--aib2-mut);font-weight:600;white-space:nowrap;}
.aib2-kf-v{color:var(--text);font-weight:700;min-width:0;}
/* tone tints — the value carries the read; the chip border/wash confirms it */
.aib2-kf--good{background:color-mix(in srgb,var(--aib2-good) 10%,var(--aib2-surf));
  border-color:color-mix(in srgb,var(--aib2-good) 34%,transparent);}
.aib2-kf--good .aib2-kf-v{color:color-mix(in srgb,var(--aib2-good) 72%,var(--text));}
.aib2-kf--warn{background:color-mix(in srgb,var(--aib2-warn) 10%,var(--aib2-surf));
  border-color:color-mix(in srgb,var(--aib2-warn) 34%,transparent);}
.aib2-kf--warn .aib2-kf-v{color:color-mix(in srgb,var(--aib2-warn) 74%,var(--text));}
.aib2-kf--bad{background:color-mix(in srgb,var(--aib2-bad) 11%,var(--aib2-surf));
  border-color:color-mix(in srgb,var(--aib2-bad) 36%,transparent);}
.aib2-kf--bad .aib2-kf-v{color:color-mix(in srgb,var(--aib2-bad) 74%,var(--text));}
.aib2-kf--info{background:color-mix(in srgb,var(--aib2-info) 10%,var(--aib2-surf));
  border-color:color-mix(in srgb,var(--aib2-info) 32%,transparent);}
.aib2-kf--info .aib2-kf-v{color:color-mix(in srgb,var(--aib2-info) 78%,var(--text));}
.aib2-kf--neutral{/* uses base surf/hair; value stays --text */}

/* ── 4 · confidence meter ────────────────────────────────────────────────────── */
.aib2-conf{display:flex;align-items:center;gap:13px;margin-bottom:4px;
  padding:11px 14px;background:var(--aib2-surf);border:1px solid var(--aib2-hair);border-radius:11px;}
.aib2-conf-bar{display:flex;gap:4px;align-items:center;padding:4px;border-radius:7px;background:var(--aib2-track);cursor:help;}
.aib2-conf-seg{width:26px;height:6px;border-radius:3px;
  background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 8%,transparent);transition:background .2s;}
.aib2-conf-seg.on{background:var(--aib2-acc);box-shadow:none;}
.aib2-conf-label{font-size:12.5px;font-weight:650;color:var(--text);}
.aib2-conf-asof{font-size:11.5px;color:var(--aib2-mut);margin-left:auto;font-variant-numeric:tabular-nums;}

/* ── 5 · the full read (regime prose) ───────────────────────────────────────── */
.aib2-regime{font-size:14px;color:var(--text);line-height:1.72;margin-bottom:16px;opacity:.94;}

/* ── 6/7/8/9 · cards + grid ─────────────────────────────────────────────────── */
.aib2-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:13px;margin-bottom:12px;}
@media(max-width:560px){.aib2-grid{grid-template-columns:1fr;}}
.aib2-card{padding:14px 16px 15px;border-radius:12px;background:var(--aib2-surf);border:1px solid var(--aib2-hair);}
.aib2-card--full{margin-bottom:12px;}
.aib2-card--conflicts{border-left:3px solid var(--aib2-warn);}
.aib2-card--tx{border-left:3px solid var(--aib2-info);}
.aib2-card--playbook{border-left:3px solid var(--aib2-acc);}
.aib2-eyebrow{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--aib2-mut);margin-bottom:9px;display:flex;align-items:center;gap:6px;}
.aib2-card--conflicts .aib2-eyebrow{color:color-mix(in srgb,var(--aib2-warn) 78%,var(--aib2-mut));}
.aib2-card--tx .aib2-eyebrow{color:color-mix(in srgb,var(--aib2-info) 74%,var(--aib2-mut));}
.aib2-card--playbook .aib2-eyebrow{color:color-mix(in srgb,var(--aib2-acc) 74%,var(--aib2-mut));}
.aib2-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;}
.aib2-items li{position:relative;padding-left:14px;font-size:13px;color:var(--text);line-height:1.6;}
.aib2-items li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;
  background:color-mix(in srgb,currentColor 32%,transparent);}
.aib2-card--conflicts .aib2-items li::before{background:color-mix(in srgb,var(--aib2-warn) 55%,transparent);}
.aib2-card--tx .aib2-items li::before{background:color-mix(in srgb,var(--aib2-info) 55%,transparent);}
.aib2-items li b,.aib2-prose b,.aib2-watch-body b{font-weight:700;color:var(--text);}
.aib2-prose{font-size:13.5px;color:var(--text);line-height:1.72;}

/* what to watch */
.aib2-watch{list-style:none;margin:0;padding:0;}
.aib2-watch-row{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--text);line-height:1.6;padding:5px 0;}
.aib2-watch-row + .aib2-watch-row{border-top:1px solid var(--aib2-hair);}
.aib2-watch-mark{color:var(--aib2-acc);flex-shrink:0;margin-top:1px;font-size:13px;line-height:1.5;}

/* upcoming catalysts */
.aib2-cat-rail{display:flex;flex-wrap:wrap;gap:8px;}
.aib2-cat{display:inline-flex;align-items:baseline;gap:6px;padding:5px 12px;border-radius:999px;
  font-size:12.5px;font-weight:600;background:var(--aib2-surf);border:1px solid var(--aib2-hair);color:var(--text);}
.aib2-cat-d{color:var(--aib2-mut);font-variant-numeric:tabular-nums;font-weight:700;}
.aib2-cat-read{font-size:12.5px;color:var(--aib2-mut);line-height:1.55;margin-top:11px;}

/* ── 10 · degraded notice ────────────────────────────────────────────────────── */
.aib2-degraded{font-size:12px;color:var(--aib2-mut);margin:8px 0 4px;padding:9px 13px;border-radius:9px;
  background:color-mix(in srgb,var(--aib2-warn) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--aib2-warn) 22%,transparent);
  border-left:3px solid var(--aib2-warn);}

/* ── responsive — 390px bleed guard ─────────────────────────────────────────── */
@media(max-width:560px){
  .aib2-hdr{flex-wrap:wrap;}
  /* the house-law badge takes its own wrapped row (aligned under the title,
     past the 38px icon + 14px gap) — without a flex-basis it stays on row 1
     and clips at the panel edge on narrow phones */
  .aib2-badge{flex-basis:calc(100% - 52px);margin-left:52px;text-align:left;max-width:none;align-self:flex-start;}
  .aib2-conf{flex-wrap:wrap;gap:9px;}
  .aib2-conf-asof{margin-left:0;width:100%;}
  .aib2-kf{width:100%;justify-content:space-between;}
}

/* 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-hk .hkx-big-score,
  body.page-hk .ms-green .hkx-big-score,
  body.page-hk .ms-red .hkx-big-score,
  body.page-hk .mx5-big-score,
  body.page-hk .mx5-score-green .mx5-big-score,
  body.page-hk .mx5-score-yellow .mx5-big-score,
  body.page-hk .mx5-score-red .mx5-big-score
) { text-shadow:none; }
html[data-lang="zh"][data-theme="light"] body.page-hk .ms-green .hkx-big-score { text-shadow:none; }
html[data-lang="zh"][data-theme="light"] body.page-hk .ms-red .hkx-big-score { text-shadow:none; }