:root{
  color-scheme: light;
  --bg:#F2F5F4; --surface:#FFFFFF; --surface-2:#E9EEED; --sunken:#EDF1F0;
  --line:#D6DEDC; --line-2:#BFCAC8;
  --ink:#0E1817; --ink-2:#46524F; --ink-3:#6E7B78;
  --accent:#0d9488; --accent-ink:#0a6d64; --accent-soft:rgba(13,148,136,.10);
  --s-walcl:#2a78d6; --s-tga:#eb6834; --s-rrp:#4a3aa7;
  --pos:#0d9488; --neg:#c0392f;
  --good:#1f7a4d; --warn:#a06a00; --serious:#c2571a; --critical:#b52a25;
  --shadow:0 1px 2px rgba(14,24,23,.05), 0 8px 24px -16px rgba(14,24,23,.28);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#0B1110; --surface:#141B1A; --surface-2:#1C2523; --sunken:#101716;
    --line:#26312F; --line-2:#394644;
    --ink:#E9F0EE; --ink-2:#A9B7B4; --ink-3:#7C8A87;
    --accent:#19a99a; --accent-ink:#35c3b2; --accent-soft:rgba(25,169,154,.14);
    --s-walcl:#3987e5; --s-tga:#d95926; --s-rrp:#9085e9;
    --pos:#19a99a; --neg:#e06a5f;
    --good:#3faa76; --warn:#d9a441; --serious:#e8834a; --critical:#e06a5f;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -18px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0B1110; --surface:#141B1A; --surface-2:#1C2523; --sunken:#101716;
  --line:#26312F; --line-2:#394644;
  --ink:#E9F0EE; --ink-2:#A9B7B4; --ink-3:#7C8A87;
  --accent:#19a99a; --accent-ink:#35c3b2; --accent-soft:rgba(25,169,154,.14);
  --s-walcl:#3987e5; --s-tga:#d95926; --s-rrp:#9085e9;
  --pos:#19a99a; --neg:#e06a5f;
  --good:#3faa76; --warn:#d9a441; --serious:#e8834a; --critical:#e06a5f;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -18px rgba(0,0,0,.9);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Noto Sans TC", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  font-size:15px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px 72px}
h1,h2,h3{margin:0; text-wrap:balance; font-family:"Noto Serif TC", "Songti TC", serif; font-weight:700; letter-spacing:.01em}
.mono{font-family:"IBM Plex Mono", ui-monospace, "SF Mono", monospace; font-variant-numeric:tabular-nums}
.num{font-family:"IBM Plex Mono", ui-monospace, monospace; font-variant-numeric:tabular-nums; letter-spacing:-.01em}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--line); background:var(--surface)}
.masthead .wrap{padding-top:34px; padding-bottom:26px}
.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--accent)}
h1{font-size:clamp(28px,4.2vw,40px); line-height:1.2; margin:12px 0 8px}
.dek{color:var(--ink-2); max-width:62ch; font-size:15.5px}
.meta{display:flex; gap:0; flex-wrap:wrap; margin-top:20px; border-top:1px solid var(--line); padding-top:14px}
.meta div{padding-right:28px; margin-right:28px; border-right:1px solid var(--line)}
.meta div:last-child{border-right:0; margin-right:0; padding-right:0}
.meta dt{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-family:"IBM Plex Mono",monospace}
.meta dd{margin:2px 0 0; font-size:14px; font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; color:var(--ink)}

/* ---------- verdict ---------- */
.verdict{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:0; background:var(--surface); border:1px solid var(--line); border-radius:3px; margin-top:28px; overflow:hidden; box-shadow:var(--shadow)}
.verdict::before{content:""; position:absolute}
.v-main{padding:26px 28px; border-right:1px solid var(--line); position:relative}
.v-main::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent)}
.v-main[data-sev="alert"]::before{background:var(--critical)}
.v-label{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-family:"IBM Plex Mono",monospace}
.v-headline{font-family:"Noto Serif TC",serif; font-weight:700; font-size:clamp(24px,3.4vw,32px); line-height:1.25; margin:8px 0 4px}
.hero-num{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-top:14px}
.hero-num .big{font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:clamp(34px,5.6vw,50px); letter-spacing:-.03em; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums}
.hero-num .unit{font-size:14px; color:var(--ink-3)}
.delta{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-weight:500; font-size:14px; padding:3px 9px; border-radius:2px; white-space:nowrap}
.delta.up{color:var(--pos); background:var(--accent-soft)}
.delta.down{color:var(--neg); background:color-mix(in srgb, var(--neg) 11%, transparent)}
.delta.flat{color:var(--ink-3); background:var(--surface-2)}
.v-side{padding:24px 28px; background:var(--sunken)}
.chips{display:flex; flex-direction:column; gap:9px; margin-top:12px}
.chip{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; line-height:1.5}
.chip .sq{flex:none; width:10px; height:10px; margin-top:5px; border-radius:1px}
.chip.ok .sq{background:var(--good)} .chip.warning .sq{background:var(--warn)}
.chip.serious .sq{background:var(--serious)} .chip.critical .sq{background:var(--critical)}
.chip b{font-weight:700}
.v-extra{margin-top:16px; padding-top:13px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:5px}
.v-extra .t-row{display:flex; justify-content:space-between; gap:16px; font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:12.5px}
.v-extra .t-row span:first-child{color:var(--ink-3)}
.chip span{color:var(--ink-2)}

/* ---------- sections ---------- */
section{margin-top:46px}
.sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-bottom:10px; border-bottom:1px solid var(--line-2)}
.sec-head h2{font-size:19px}
.sec-head .note{font-size:12.5px; color:var(--ink-3); font-family:"IBM Plex Mono",monospace}
.panel{background:var(--surface); border:1px solid var(--line); border-top:0; border-radius:0 0 3px 3px; padding:18px 20px 14px}
.legend{display:flex; gap:18px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-2); margin-bottom:6px}
.legend i{display:inline-block; width:11px; height:11px; border-radius:1px; margin-right:6px; vertical-align:-1px}
.chart{position:relative}
.chart svg{display:block}
.axis-cap{font-size:11.5px; color:var(--ink-3); font-family:"IBM Plex Mono",monospace; margin:10px 0 6px}
.corrbar{margin-top:14px; padding-top:13px; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px}
.corrbar div{font-size:12.5px; color:var(--ink-2)}
.corrbar b{display:block; font-family:"IBM Plex Mono",monospace; font-size:20px; font-weight:600; color:var(--ink); letter-spacing:-.02em; margin-bottom:1px}
.corrbar .cap{font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); font-family:"IBM Plex Mono",monospace}
.corrnote{grid-column:1/-1; font-size:12.5px; color:var(--ink-2); line-height:1.65; border-left:2px solid var(--line-2); padding-left:12px}

/* ---------- small multiples ---------- */
.sm-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:1px; background:var(--line)}
.sm{background:var(--surface); padding:16px 18px 10px}
.sm h3{font-size:13.5px; font-family:"Noto Sans TC",sans-serif; font-weight:700; display:flex; align-items:center; gap:8px}
.sm h3 i{width:9px;height:9px;border-radius:50%;display:inline-block}
.sm .sub{font-size:11.5px; color:var(--ink-3); font-family:"IBM Plex Mono",monospace; margin-top:2px}
.sm .row{display:flex; align-items:baseline; gap:10px; margin:10px 0 2px; flex-wrap:wrap}
.sm .val{font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:26px; letter-spacing:-.02em; font-variant-numeric:tabular-nums}

/* ---------- rules ---------- */
.rules{border:1px solid var(--line); border-top:0; background:var(--surface); border-radius:0 0 3px 3px}
.rule{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:16px; align-items:start; padding:15px 20px; border-bottom:1px solid var(--line)}
.rule:last-child{border-bottom:0}
.rule .id{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-3); padding-top:2px; width:26px}
.rule .name{font-weight:700; font-size:14.5px}
.rule .txt{font-size:13px; color:var(--ink-2); margin-top:1px}
.rule .metric{font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--ink-3); margin-top:5px}
.status{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.04em; padding:4px 10px; border-radius:2px; white-space:nowrap; border:1px solid}
.status.clear{color:var(--good); border-color:color-mix(in srgb,var(--good) 35%,transparent); background:color-mix(in srgb,var(--good) 8%,transparent)}
.status.hit{color:var(--critical); border-color:color-mix(in srgb,var(--critical) 45%,transparent); background:color-mix(in srgb,var(--critical) 10%,transparent)}

/* ---------- table ---------- */
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-top:0; background:var(--surface); border-radius:0 0 3px 3px; max-height:560px; overflow-y:auto}
table{border-collapse:collapse; width:100%; font-size:13px; min-width:1140px}
th,td{padding:8px 12px; text-align:right; white-space:nowrap; border-bottom:1px solid var(--line)}
th{position:sticky; top:0; background:var(--surface-2); z-index:2; font-family:"IBM Plex Mono",monospace; font-weight:500; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); text-align:right; border-bottom:1px solid var(--line-2)}
th:first-child,td:first-child{text-align:left; position:sticky; left:0; background:var(--surface); z-index:1}
th:first-child{background:var(--surface-2); z-index:3}
tbody tr:hover td{background:var(--sunken)}
tbody tr:hover td:first-child{background:var(--sunken)}
td.n{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}
td.sig{text-align:left; white-space:normal; min-width:220px; font-size:12px; line-height:1.5}
td.note-c{text-align:left; white-space:nowrap; font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:12px}
.tag{display:inline-block; font-size:11px; padding:1px 7px; border-radius:2px; margin:1px 4px 1px 0; font-weight:500}
.tag.critical{color:var(--critical); background:color-mix(in srgb,var(--critical) 12%,transparent)}
.tag.serious{color:var(--serious); background:color-mix(in srgb,var(--serious) 14%,transparent)}
.tag.warning{color:var(--warn); background:color-mix(in srgb,var(--warn) 14%,transparent)}
.tag.none{color:var(--ink-3)}
.up{color:var(--pos)} .down{color:var(--neg)}

/* ---------- tooltip ---------- */
.tip{position:absolute; pointer-events:none; opacity:0; transition:opacity .09s; background:var(--surface); border:1px solid var(--line-2); border-radius:3px; box-shadow:var(--shadow); padding:8px 11px; font-size:12.5px; z-index:10; min-width:150px}
.tip .t-date{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-3); letter-spacing:.05em; margin-bottom:4px}
.tip .t-row{display:flex; justify-content:space-between; gap:16px; font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}
.tip .t-row span:first-child{color:var(--ink-2)}

footer{margin-top:52px; padding-top:22px; border-top:1px solid var(--line-2); font-size:12.5px; color:var(--ink-3); line-height:1.8}
footer a{color:var(--accent-ink); text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
footer a:hover{border-bottom-color:var(--accent)}
footer h3{font-size:12px; font-family:"IBM Plex Mono",monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); margin-bottom:6px}
.fgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:26px}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}
@media (max-width:760px){
  .verdict{grid-template-columns:1fr}
  .v-main{border-right:0; border-bottom:1px solid var(--line)}
  .meta{display:grid; grid-template-columns:1fr 1fr; gap:12px 20px}
  .meta div{border-right:0; padding-right:0; margin-right:0}
}