
  * { 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:18px; }
  @media (min-width:1100px){ body{ padding:26px max(40px,calc((100vw - 1320px)/2)); } }
  a { text-decoration:none; color:inherit; }
  h1 { font-size:20px; margin:0; }
  h2 { font-size:14px; margin:0 0 10px; color:var(--muted); text-transform:uppercase;
       letter-spacing:.06em; }
  .panel { background:var(--panel); border:1px solid var(--line); border-radius:10px;
           padding:14px 16px; margin-bottom:14px; }
  .topline { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
  .muted { color:var(--muted); }
  .sm { font-size:12px; }
  table { border-collapse:collapse; width:100%; font-size:13px; }
  th,td { text-align:left; padding:4px 7px; border-bottom:1px solid var(--line); }
  th { color:var(--muted); font-weight:500; }
  td.r, th.r { text-align:right; }
  .pos { color:var(--up); } .neg { color:var(--down); }
  .help { display:inline-flex; align-items:center; justify-content:center; width:15px;
          height:15px; border-radius:50%; border:1px solid var(--muted); color:var(--muted);
          font-size:10px; font-weight:600; cursor:help; position:relative; vertical-align:middle; margin-left:5px; }
  .help .tip { display:none; position:absolute; top:140%; left:50%; transform:translateX(-50%);
               width:300px; 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; box-shadow:var(--popover-shadow); pointer-events:auto; cursor:auto;
               max-height:min(60vh,420px); overflow-y:auto; overscroll-behavior:contain; }
  /* invisible hover pad across the icon→tip gap — keeps :hover alive mid-travel (on .help, not .tip: the tip is a scroll container and clips its pseudos) */
  .help:hover::before { content:''; position:absolute; top:100%; left:-30px; right:-30px; height:10px; }
  .help:hover .tip { display:block; }
  .lead { display:flex; flex-direction:column; gap:6px; }
  .leadrow { display:grid; grid-template-columns:150px 1fr 64px; align-items:center; gap:10px; }
  .leadbar { height:14px; border-radius:7px; background:var(--panel2); position:relative; overflow:hidden; }
  .leadbar > i { position:absolute; top:0; bottom:0; }
  .cardgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:14px; }
  .fcard { background:var(--panel2); border:1px solid var(--line); border-radius:9px; padding:11px 12px; }
  .fcard h3 { font-size:13px; margin:0 0 7px; display:flex; align-items:center; }
  .fcard .badge { margin-left:auto; font-size:10.5px; padding:1px 7px; border-radius:8px;
                  background:var(--panel); border:1px solid var(--line); color:var(--muted); }
  .twocol { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; }
  @media (max-width:760px){ .twocol{ grid-template-columns:minmax(0,1fr); } }
  .zpos { color:var(--up); font-weight:600; } .zneg { color:var(--down); font-weight:600; }
  .chip { display:inline-block; font-size:11px; padding:1px 7px; margin:0 4px 4px 0; border-radius:8px;
          background:var(--panel2); border:1px solid var(--line); color:var(--muted); }
  /* validation chip — status colours (--ok/--act/--muted) do NOT flip in zh mode, unlike --up/--down */
  .val-chip { display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:.03em;
              padding:1px 6px; margin-left:7px; border-radius:6px; vertical-align:middle; white-space:nowrap; }
  .val-chip.validated   { color:var(--ok);    border:1px solid color-mix(in srgb,var(--ok) 55%,transparent);
                          background:color-mix(in srgb,var(--ok) 12%,transparent); }
  .val-chip.negative-ic { color:var(--act);   border:1px solid color-mix(in srgb,var(--act) 55%,transparent);
                          background:color-mix(in srgb,var(--act) 14%,transparent); }
  .val-chip.fdr-fail    { color:var(--muted); border:1px solid var(--line); background:var(--panel2); }
  .ic-alert { margin:0 0 10px; padding:8px 11px; border-radius:7px; font-size:12px; line-height:1.5;
              border:1px solid color-mix(in srgb,var(--act) 45%,transparent);
              background:color-mix(in srgb,var(--act) 9%,var(--panel)); }
  .ic-alert b { color:var(--act); font-weight:700; }
  sub { font-size:.72em; }
  .bbar { display:inline-block; width:150px; max-width:42vw; height:11px; border-radius:6px;
          background:var(--panel2); position:relative; overflow:hidden; vertical-align:middle; }
  .bbar > i { position:absolute; left:0; top:0; bottom:0; border-radius:6px; }
  .spk { width:96px; height:26px; display:block; }
  .hm { border-collapse:collapse; font-size:11px; }
  .hm td, .hm th { border:1px solid var(--bg); padding:0; text-align:center; }
  .hm th { color:var(--muted); font-weight:500; padding:2px 4px; white-space:nowrap; }
  .hmc { width:30px; height:26px; text-align:center; color:var(--text); font-size:10px; }
  .quilt { border-collapse:collapse; font-size:10.5px; width:100%; }
  .quilt th { color:var(--muted); font-weight:500; padding:2px 4px; white-space:nowrap; font-size:10px; }
  .quilt td { padding:3px 5px; text-align:right; border:1px solid var(--bg); white-space:nowrap; }
  .quilt2 { border-collapse:separate; border-spacing:2px; font-size:10px; }
  .quilt2 th { color:var(--muted); font-weight:500; padding:1px 3px; text-align:center; font-size:9.5px; }
  .quilt2 td.qc { width:54px; height:30px; border-radius:4px; text-align:center; color:#0b1220; vertical-align:middle; }
  .quilt2 td.qc .qf { display:block; font-weight:600; font-size:9px; line-height:1.05; }
  .quilt2 td.qc .qv { display:block; font-size:9px; opacity:.85; font-variant-numeric:tabular-nums; }
  .quilt2 td.qc.hl { outline:2px solid var(--text); outline-offset:-2px; }
  .r20bars { display:grid; grid-template-columns:auto 1fr auto; gap:2px 8px; align-items:center; margin-top:4px; max-width:560px; }
  .r20lab { font-size:11.5px; color:var(--muted); white-space:nowrap; }
  .r20track { height:12px; border-radius:6px; background:var(--panel2); position:relative; }
  .r20track > i { position:absolute; top:0; bottom:0; }
  .r20track > i.mid { left:50%; width:1px; background:var(--muted); opacity:.5; }
  .r20val { font-size:11.5px; font-variant-numeric:tabular-nums; text-align:right; }
  .flip { display:inline-block; font-size:11px; padding:1px 7px; margin:0 4px 4px 0; border-radius:8px;
          background:var(--panel2); border:1px solid var(--line); }
  .seg { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
  .seg button { border:0; border-radius:0; background:var(--panel); color:var(--text); cursor:pointer;
                font-size:12px; padding:4px 10px; }
  .seg button.on { background:var(--panel2); font-weight:600; }
  .scroll { overflow-x:auto; }
  table[data-leg="lo"] .v-ls, table[data-leg="ls"] .v-lo { display:none; }
  .chartbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; margin:8px 0 2px; }
  .tabs { display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
  .tabs button { border:0; background:var(--panel); color:var(--muted); font-size:12px; padding:5px 11px; cursor:pointer; border-right:1px solid var(--line); }
  .tabs button:last-child { border-right:0; }
  .tabs button.on { background:var(--panel2); color:var(--text); font-weight:650; }
  .tabs .rangeN { width:72px; background:var(--panel); color:var(--text); border:0; border-left:1px solid var(--line); padding:5px 8px; font-size:12px; }
  #fchart { height:400px; width:100%; }
  .legend { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:10px; }
  .lchip { display:inline-flex; align-items:center; gap:6px; font-size:12px; cursor:pointer; }
  .lchip.off { opacity:.34; }
  .lchip .ldot { width:9px; height:9px; border-radius:50%; display:inline-block; }
  .lchip .lv { color:var(--muted); font-variant-numeric:tabular-nums; }
  #sector-monitor td.hzc { font-variant-numeric:tabular-nums; text-align:center; }
  #sector-monitor .zc { font-size:12.5px; font-weight:600; } #sector-monitor .rr { font-size:10px; opacity:.7; display:block; }
  /* NW status chips */
  .nw-chip { display:inline-block; font-size:10.5px; font-weight:600; padding:2px 8px; margin:0 4px 4px 0;
             border-radius:7px; border:1px solid var(--line); background:var(--panel2); color:var(--muted);
             white-space:nowrap; letter-spacing:.02em; }
  .nw-chip.live      { color:var(--ok);   border-color:color-mix(in srgb,var(--ok) 55%,transparent);
                       background:color-mix(in srgb,var(--ok) 10%,transparent); }
  .nw-chip.dormant   { color:var(--muted); }
  .nw-chip.shadow    { color:var(--act);  border-color:color-mix(in srgb,var(--act) 45%,transparent);
                       background:color-mix(in srgb,var(--act) 8%,transparent); }
  .nw-chip.accruing  { color:var(--act);  border-color:color-mix(in srgb,var(--act) 45%,transparent);
                       background:color-mix(in srgb,var(--act) 8%,transparent); }
  .nw-chip.bh-withheld { color:var(--down); border-color:color-mix(in srgb,var(--down) 50%,transparent);
                          background:color-mix(in srgb,var(--down) 8%,transparent); }
  .nw-chip.null      { color:var(--muted); }
  .nw-chip.gate-passed { color:var(--ok);  border-color:color-mix(in srgb,var(--ok) 55%,transparent);
                          background:color-mix(in srgb,var(--ok) 10%,transparent); }
  .nw-chip.pre-fdr   { color:var(--muted); font-style:italic; }
  .nw-status-grid { display:grid; grid-template-columns:minmax(130px,auto) 1fr; gap:4px 12px;
                    font-size:12.5px; align-items:start; margin-top:10px; }
  .nw-status-grid .nw-lab { color:var(--muted); padding-top:2px; }
  .nw-influence { display:flex; flex-wrap:wrap; gap:4px 0; margin-top:4px; }
  .nw-influence .nw-chip { margin-bottom:0; }
