/* StockScope — shared design tokens & components
   Palette per validated dataviz reference (light + dark selected separately). */
:root{
  color-scheme: light;
  --surface-1:#fcfcfb; --page:#f9f9f7; --surface-2:#f3f2ee;
  --text-primary:#0b0b0b; --text-secondary:#52514e; --muted:#898781;
  --grid:#e1e0d9; --axis:#c3c2b7; --border:rgba(11,11,11,0.10);
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100;
  --seq-100:#cde2fb; --seq-250:#86b6ef; --seq-400:#3987e5; --seq-450:#2a78d6; --seq-550:#1c5cab; --seq-650:#104281;
  --good:#0ca30c; --warning:#fab219; --serious:#ec835a; --critical:#d03b3b;
  --success-text:#006300;
  --up:#d03b3b; --down:#0ca30c; /* TW convention: red up, green down */
}
@media (prefers-color-scheme: dark){
  :root:where(:not([data-theme="light"])){
    color-scheme: dark;
    --surface-1:#1a1a19; --page:#0d0d0d; --surface-2:#242422;
    --text-primary:#ffffff; --text-secondary:#c3c2b7; --muted:#898781;
    --grid:#2c2c2a; --axis:#383835; --border:rgba(255,255,255,0.10);
    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
    --seq-100:#184f95; --seq-250:#256abf; --seq-400:#3987e5; --seq-450:#3987e5; --seq-550:#5598e7; --seq-650:#6da7ec;
    --success-text:#0ca30c;
    --up:#e66767; --down:#0ca30c;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --surface-1:#1a1a19; --page:#0d0d0d; --surface-2:#242422;
  --text-primary:#ffffff; --text-secondary:#c3c2b7; --muted:#898781;
  --grid:#2c2c2a; --axis:#383835; --border:rgba(255,255,255,0.10);
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
  --seq-100:#184f95; --seq-250:#256abf; --seq-400:#3987e5; --seq-450:#3987e5; --seq-550:#5598e7; --seq-650:#6da7ec;
  --success-text:#0ca30c;
  --up:#e66767; --down:#0ca30c;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--page);color:var(--text-primary);
  font-family:system-ui,-apple-system,"Segoe UI","Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  line-height:1.65;font-size:15px;-webkit-text-size-adjust:100%;
}
a{color:var(--s1)}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--page) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.topbar-in{max-width:1100px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:14px}
.brand{font-weight:700;font-size:16px;letter-spacing:-.02em;text-decoration:none;color:var(--text-primary);white-space:nowrap;display:flex;align-items:center;gap:7px}
.brand .dot{width:9px;height:9px;border-radius:99px;background:var(--s1);display:inline-block}
.spacer{flex:1}

/* ---------- search ---------- */
.search{position:relative;flex:1;max-width:460px}
.search input{
  width:100%;padding:9px 14px 9px 36px;border-radius:10px;border:1px solid var(--axis);
  background:var(--surface-1);color:var(--text-primary);font-size:14.5px;font-family:inherit;
}
.search input:focus{outline:2px solid var(--s1);outline-offset:-1px;border-color:transparent}
.search .ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;font-size:14px}
.results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface-1);border:1px solid var(--axis);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.14);overflow:hidden;display:none;max-height:min(60vh,420px);overflow-y:auto}
.results.on{display:block}
.res{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--border)}
.res:last-child{border-bottom:0}
.res:hover,.res.sel{background:var(--surface-2)}
.res .sym{font-weight:600;font-size:13.5px;min-width:72px;font-variant-numeric:tabular-nums}
.res .nm{font-size:13px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.res .ex{font-size:11px;color:var(--muted);border:1px solid var(--border);border-radius:99px;padding:1px 7px;white-space:nowrap}
.res-empty{padding:14px;font-size:13px;color:var(--text-secondary);text-align:center}

/* ---------- buttons ---------- */
.btn{background:var(--surface-1);border:1px solid var(--axis);color:var(--text-primary);border-radius:9px;padding:7px 12px;font-size:13px;cursor:pointer;font-family:inherit;white-space:nowrap}
.btn:hover{background:var(--surface-2)}
.btn.sm{padding:4px 10px;font-size:12.5px}
.btn.on{background:var(--s1);border-color:var(--s1);color:#fff}
.seg{display:inline-flex;gap:4px;flex-wrap:wrap}

/* ---------- generic blocks ---------- */
h1{font-size:26px;line-height:1.25;margin:0 0 4px;letter-spacing:-.02em}
h2{font-size:19px;margin:40px 0 4px;letter-spacing:-.01em;padding-top:14px;border-top:1px solid var(--border)}
h3{font-size:15px;margin:24px 0 8px}
p{margin:10px 0}
.lead{color:var(--text-secondary)}
.card{background:var(--surface-1);border:1px solid var(--border);border-radius:12px;padding:18px 20px;margin:16px 0}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px;margin:16px 0}
.tile{background:var(--surface-1);border:1px solid var(--border);border-radius:12px;padding:13px 15px}
.tile .lbl{font-size:12.5px;color:var(--text-secondary);margin-bottom:3px}
.tile .val{font-size:23px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.tile .dlt{font-size:12.5px;color:var(--text-secondary);margin-top:2px}
.up{color:var(--up);font-weight:600}
.dn{color:var(--down);font-weight:600}
.pos{color:var(--success-text);font-weight:600}
.neg{color:var(--critical);font-weight:600}
.hero{background:var(--surface-1);border:1px solid var(--border);border-radius:12px;padding:20px 22px;margin:16px 0}
.hero .fig{font-size:46px;font-weight:600;letter-spacing:-.03em;line-height:1.1;margin:2px 0 2px}
.flag{border-left:3px solid var(--warning);background:var(--surface-1);border-radius:0 12px 12px 0;padding:13px 17px;margin:12px 0;border-top:1px solid var(--border);border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.flag .h{font-weight:600;font-size:14px;margin-bottom:3px;display:flex;align-items:center;gap:7px}
.flag p{margin:2px 0 0;font-size:14px;color:var(--text-secondary)}
.flag.crit{border-left-color:var(--critical)}
.flag.good{border-left-color:var(--good)}
.flag.info{border-left-color:var(--s1)}
.badge{font-size:11px;border-radius:99px;padding:1px 8px;border:1px solid var(--border);color:var(--text-secondary);white-space:nowrap}

table{width:100%;border-collapse:collapse;font-size:13.5px;margin:10px 0;font-variant-numeric:tabular-nums}
th,td{padding:8px 10px;text-align:right;border-bottom:1px solid var(--border);white-space:nowrap}
th:first-child,td:first-child{text-align:left;font-variant-numeric:normal;position:sticky;left:0;background:var(--surface-1)}
thead th{color:var(--text-secondary);font-weight:600;font-size:12.5px;border-bottom:1px solid var(--axis)}
tbody tr:hover{background:color-mix(in srgb,var(--text-primary) 4%,transparent)}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:10px}

figure{margin:16px 0;background:var(--surface-1);border:1px solid var(--border);border-radius:12px;padding:16px 18px 12px}
figcaption{font-size:14px;font-weight:600;margin-bottom:2px}
.fignote{font-size:12.5px;color:var(--text-secondary);margin:0 0 10px}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--text-secondary);margin-top:8px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.key-line{width:14px;height:2px;border-radius:2px;display:inline-block}
.key-rect{width:11px;height:11px;border-radius:2px;display:inline-block}
svg{display:block;width:100%;height:auto;overflow:visible}

.tt{position:fixed;pointer-events:none;background:var(--surface-1);border:1px solid var(--axis);border-radius:8px;padding:8px 10px;font-size:12.5px;box-shadow:0 4px 16px rgba(0,0,0,.16);opacity:0;transition:opacity .1s;z-index:60;min-width:130px}
.tt-t{color:var(--text-secondary);font-size:11.5px;margin-bottom:4px}
.tt-r{display:flex;align-items:center;gap:8px;justify-content:space-between}
.tt-v{font-weight:600;font-variant-numeric:tabular-nums}
.tt-n{color:var(--text-secondary)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.grid2,.grid3{grid-template-columns:1fr}.hero .fig{font-size:38px}h1{font-size:22px}}

.skel{background:linear-gradient(90deg,var(--surface-2) 25%,var(--border) 37%,var(--surface-2) 63%);background-size:400% 100%;animation:sk 1.3s ease infinite;border-radius:8px}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}
.loading .fade{opacity:.45;transition:opacity .2s}

.chips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.chip{border:1px solid var(--axis);background:var(--surface-1);border-radius:99px;padding:5px 13px;font-size:13px;cursor:pointer;text-decoration:none;color:var(--text-primary);font-variant-numeric:tabular-nums}
.chip:hover{background:var(--surface-2)}

.disc{font-size:12px;color:var(--muted);margin:36px 0 60px;border-top:1px solid var(--border);padding-top:14px}
.err{border:1px solid var(--critical);border-radius:12px;padding:16px 18px;margin:16px 0;background:var(--surface-1)}
.err h3{margin:0 0 6px;color:var(--critical)}
.hide{display:none !important}
.src{font-size:12.5px;color:var(--text-secondary)}

/* ==================== heat map ==================== */
.hm-wrap{background:#141413;border:1px solid var(--border);border-radius:14px;padding:12px;margin:14px 0}
.hm-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.hm-bar .grow{flex:1}
.hm-sel{background:#1e1e1c;border:1px solid #37373a;color:#f2f2ef;border-radius:9px;padding:7px 12px;font-size:13.5px;font-family:inherit;cursor:pointer}
.hm-sel:focus{outline:2px solid var(--s1);outline-offset:-1px}
.hm-status{font-size:12.5px;color:#8e8d86}
.hm{position:relative;width:100%}
.hm-sector{position:absolute;overflow:hidden}
.hm-head{font-size:11.5px;font-weight:600;color:#b9b8b2;padding:3px 4px 0;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-tile{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;text-decoration:none;border-radius:2px;line-height:1.16;text-align:center;padding:2px;
  transition:filter .12s,outline-color .12s;outline:2px solid transparent;outline-offset:-2px}
.hm-tile:hover,.hm-tile:focus-visible{filter:brightness(1.28);outline-color:#fff;z-index:5}
.hm-sym{font-weight:700;letter-spacing:-.01em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-pct{font-variant-numeric:tabular-nums;opacity:.94;margin-top:1px}
.hm-name{font-size:10.5px;opacity:.72;margin-top:2px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 3px}
.hm-empty{padding:40px 16px;text-align:center;color:#8e8d86;font-size:14px}
.hm-legend{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:11px;font-size:11.5px;color:#8e8d86}
.hm-legend i{width:26px;height:11px;border-radius:2px;display:inline-block}
.hm-tt{background:#1e1e1c;border-color:#3a3a37;color:#f2f2ef}
.hm-tt .tt-t{color:#c3c2b7}
.hm-tt .tt-n{color:#96958e}
.hm-skel{height:100%;border-radius:8px;background:linear-gradient(90deg,#1c1c1a 25%,#2a2a27 37%,#1c1c1a 63%);background-size:400% 100%;animation:sk 1.3s ease infinite}

/* movers strip */
.mv{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin:12px 0}
.mv-col{background:var(--surface-1);border:1px solid var(--border);border-radius:12px;padding:12px 14px}
.mv-col h4{margin:0 0 8px;font-size:13px;color:var(--text-secondary);font-weight:600}
.mv-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:4px 0;text-decoration:none;color:var(--text-primary);font-size:13.5px}
.mv-row:hover{text-decoration:underline}
.mv-row .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mv-row .p{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}

/* chips carrying a live % */
.chip .q{font-variant-numeric:tabular-nums;font-weight:600;margin-left:6px}

/* Up/down colour convention follows the heat-map選擇 and applies site-wide. */
:root[data-updown="us"]{ --up:#0ca30c; --down:#d03b3b; }
:root[data-updown="cvd"]{ --up:#2a78d6; --down:#eb6834; }
:root[data-theme="dark"][data-updown="us"]{ --up:#0ca30c; --down:#e66767; }
:root[data-theme="dark"][data-updown="cvd"]{ --up:#3987e5; --down:#d95926; }
@media (prefers-color-scheme: dark){
  :root:where(:not([data-theme="light"]))[data-updown="us"]{ --up:#0ca30c; --down:#e66767; }
  :root:where(:not([data-theme="light"]))[data-updown="cvd"]{ --up:#3987e5; --down:#d95926; }
}