/* ============================================================================
   湘楚財經日報 — design system v1 (2026-10-07)
   Direction: professional dark "terminal" theme. Restrained charcoal/navy base,
   muted gold accent (brand/trust), teal+coral for market direction (always paired
   with a glyph, never colour alone). No gradients-as-decoration, no glassmorphism.
   All colours/tokens defined once here; pages use class names only.
   ========================================================================== */

:root{
  /* --- surfaces ---------------------------------------------------------- */
  --bg:#0b0e13;            /* page */
  --surface:#11151c;       /* cards, header */
  --surface-2:#161c25;     /* raised/inset blocks */
  --surface-3:#1c232e;     /* hover */
  --line:#232c38;          /* hairlines */
  --line-strong:#33404f;   /* emphasis borders */

  /* --- text -------------------------------------------------------------- */
  --fg:#e8edf4;            /* 15.6:1 on --bg */
  --fg-2:#c3ccd8;          /* 11.2:1 */
  --fg-muted:#9aa7b6;      /*  7.1:1 on --surface  (AA all sizes) */
  --fg-dim:#7d8896;        /*  5.4:1 (AA >=14px) */

  /* --- brand / accent ---------------------------------------------------- */
  --accent:#c9a227;        /* muted gold  — 7.3:1 on --surface */
  --accent-ink:#0b0e13;    /* text on gold */
  --accent-soft:rgba(201,162,39,.12);
  --link:#8fb8e8;          /* calm blue — 8.1:1 on --surface */
  --link-hover:#b6d2f5;

  /* --- market semantics (colour + glyph, colourblind safe) --------------- */
  --up:#3fb0a0;            /* teal   — 6.6:1 */
  --up-soft:rgba(63,176,160,.12);
  --down:#e07a5f;          /* coral  — 5.6:1 */
  --down-soft:rgba(224,122,95,.12);
  --flat:#93a1b1;
  --warn:#e3b341;
  --warn-bg:rgba(227,179,65,.09);

  /* --- data-viz (categorical, colourblind-aware) ------------------------- */
  --dv-1:#3fb0a0; --dv-2:#5b9bd5; --dv-3:#c9a227; --dv-4:#e07a5f;
  --dv-5:#9b7ede; --dv-6:#7cb342; --dv-7:#d16ba5; --dv-8:#8b98a8;

  /* --- type scale (1.25) -------------------------------------------------- */
  --fs-xs:12px; --fs-sm:13px; --fs-base:14px; --fs-md:16px;
  --fs-lg:18px; --fs-xl:21px; --fs-2xl:26px; --fs-3xl:32px;
  --lh-tight:1.25; --lh-body:1.6;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang HK","Hiragino Sans HK",
         "Microsoft JhengHei",Roboto,"Noto Sans TC","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* --- spacing (4px base) ------------------------------------------------- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --wrap:1160px;

  /* --- radii / elevation -------------------------------------------------- */
  --r-sm:4px; --r-md:8px; --r-pill:999px;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -16px rgba(0,0,0,.7);
  --ring:0 0 0 2px var(--bg), 0 0 0 4px var(--link);
  --t-fast:120ms; --t:170ms;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:var(--fs-base)/var(--lh-body) var(--font);
  font-variant-numeric:tabular-nums;text-rendering:optimizeLegibility}
img,svg,video{max-width:100%;height:auto}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover);text-decoration:underline}
h1,h2,h3{line-height:var(--lh-tight);margin:0 0 var(--s3);font-weight:650}
h1{font-size:var(--fs-2xl);letter-spacing:-.01em}
h2{font-size:var(--fs-xl);letter-spacing:-.005em}
h3{font-size:var(--fs-md)}
p{margin:0 0 var(--s3)}
hr{border:0;border-top:1px solid var(--line);margin:var(--s5) 0}
code,kbd{font-family:var(--mono);font-size:.92em;background:var(--surface-2);padding:1px 5px;border-radius:var(--r-sm)}
::selection{background:var(--accent-soft)}

/* ---------- focus / a11y ---------- */
:focus{outline:none}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)}
.skip-link{position:absolute;left:-9999px;top:var(--s2);z-index:100;background:var(--accent);color:var(--accent-ink);
  padding:var(--s2) var(--s4);border-radius:var(--r-sm);font-weight:650}
.skip-link:focus{left:var(--s2)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s4)}
main{padding-bottom:var(--s7)}
.section{margin-top:var(--s7);scroll-margin-top:76px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:var(--s2);margin-bottom:var(--s4)}
.section-head h2{margin:0;font-size:var(--fs-lg)}
.section-head .meta{color:var(--fg-dim);font-size:var(--fs-xs)}
.grid{display:grid;gap:var(--s4)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.bento{display:grid;gap:var(--s4);grid-template-columns:repeat(12,1fr)}
.bento>*{grid-column:span 12}
@media (min-width:820px){
  .bento>.col-6{grid-column:span 6}
  .bento>.col-4{grid-column:span 4}
  .bento>.col-8{grid-column:span 8}
}

/* ---------- header / nav ---------- */
.site-header{position:sticky;top:0;z-index:20;background:rgba(11,14,19,.96);border-bottom:1px solid var(--line);
  backdrop-filter:saturate(140%) blur(6px)}
.site-header .bar{display:flex;align-items:center;gap:var(--s4);min-height:58px}
.brand{display:flex;align-items:center;gap:var(--s2);font-weight:700;font-size:var(--fs-md);white-space:nowrap}
.brand:hover{text-decoration:none}
.brand .mark{width:26px;height:26px;flex:0 0 26px;display:block}
.brand b{color:var(--accent)}
.nav{margin-left:auto;display:flex;align-items:center;gap:var(--s1)}
.nav a{color:var(--fg-muted);font-size:var(--fs-base);padding:var(--s2) var(--s3);border-radius:var(--r-sm);display:block}
.nav a:hover{color:var(--fg);background:var(--surface-2);text-decoration:none}
.nav a[aria-current="page"]{color:var(--fg);background:var(--surface-2)}
.nav-toggle{display:none;margin-left:auto;background:var(--surface-2);border:1px solid var(--line);color:var(--fg);
  border-radius:var(--r-sm);padding:6px 10px;font:inherit;cursor:pointer}
@media (max-width:760px){
  .nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;
    background:var(--surface);border-bottom:1px solid var(--line);padding:var(--s2);display:none}
  .nav[data-open="true"]{display:flex}
  .nav a{padding:var(--s3)}
  .nav-toggle{display:block}
  .site-header{position:sticky}
}

/* ---------- hero ---------- */
.hero{padding:var(--s4) 0 var(--s3);border-bottom:1px solid var(--line)}
.hero + .wrap > .section:first-of-type{margin-top:var(--s5)}
.hero .eyebrow{color:var(--accent);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:650}
.hero h1{margin:var(--s2) 0 var(--s3);max-width:26ch;font-size:var(--fs-3xl);letter-spacing:-.015em}
.hero .lede{color:var(--fg-2);font-size:var(--fs-md);max-width:62ch}
.hero-actions{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s4)}
.snapshot{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:var(--s5)}
.snapshot .snap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3) var(--s4)}
.snapshot .snap .k{color:var(--fg-dim);font-size:var(--fs-xs)}
.snapshot .snap .v{font-size:var(--fs-lg);font-weight:650;margin-top:2px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:var(--s2);border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--fg);padding:11px 16px;min-height:44px;font:inherit;font-size:var(--fs-base);cursor:pointer;
  transition:background var(--t),border-color var(--t),color var(--t)}
.btn:hover{background:var(--surface-3);border-color:var(--fg-dim);text-decoration:none;color:var(--fg)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:650}
.btn-primary:hover{background:#d9b23a;border-color:#d9b23a;color:var(--accent-ink)}
.btn-sm{padding:5px 9px;font-size:var(--fs-sm)}
.btn[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

/* ---------- cards / badges ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s4)}
.card.tight{padding:var(--s3) var(--s4)}
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s3)}
.card-head h3{margin:0;font-size:var(--fs-lg);font-weight:650;color:var(--accent)}
.card-head .meta{color:var(--fg-dim);font-size:var(--fs-xs)}
.stack>*+*{margin-top:var(--s3)}
.pill{display:inline-block;font-size:var(--fs-xs);padding:2px 8px;border-radius:var(--r-pill);
  border:1px solid var(--line-strong);color:var(--fg-muted);white-space:nowrap}
.pill-ok{border-color:rgba(63,176,160,.5);color:var(--up);background:var(--up-soft)}
.pill-warn{border-color:rgba(227,179,65,.45);color:var(--warn);background:var(--warn-bg)}
.badge-score{font-size:var(--fs-xs);padding:2px 8px;border-radius:var(--r-pill);border:1px solid var(--line-strong);color:var(--fg-muted)}
.s-a{border-color:rgba(63,176,160,.55);color:var(--up)} .s-b{border-color:rgba(91,155,213,.55);color:#5b9bd5}
.s-c{border-color:rgba(227,179,65,.5);color:var(--warn)} .s-d{border-color:rgba(224,122,95,.5);color:var(--down)}
.notice{background:var(--warn-bg);border:1px solid rgba(227,179,65,.35);color:var(--warn);
  border-radius:var(--r-md);padding:var(--s3) var(--s4);font-size:var(--fs-sm);line-height:1.65}
.notice a{color:var(--warn)}

/* ---------- delta (gain/loss: colour + glyph) ---------- */
.delta{font-variant-numeric:tabular-nums;white-space:nowrap}
.delta.up{color:var(--up)} .delta.down{color:var(--down)} .delta.flat{color:var(--flat)}
.delta .g{font-size:.85em;margin-right:2px}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
table.data{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
table.data caption{text-align:left;color:var(--fg-dim);font-size:var(--fs-xs);padding:var(--s3) var(--s3) 0}
table.data th,table.data td{padding:9px var(--s3);border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
table.data thead th{position:sticky;top:0;z-index:1;background:var(--surface-2);color:var(--fg-muted);
  font-weight:600;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em}
table.data tbody tr:nth-child(even){background:rgba(255,255,255,.014)}
table.data tbody tr:hover{background:var(--surface-3)}
table.data tbody tr:last-child td{border-bottom:0}
table.data td.num,table.data th.num{text-align:right}
table.data td.dim{color:var(--fg-dim)}
table.data th button{all:unset;cursor:pointer;color:inherit;font:inherit;display:inline-flex;align-items:center;gap:4px}
table.data th button:hover{color:var(--fg)}
table.data th[aria-sort] button{color:var(--fg)}
.tbl-hint{color:var(--fg-dim);font-size:var(--fs-xs);margin-top:var(--s2)}
@media (max-width:640px){
  table.data th.hide-sm,table.data td.hide-sm{display:none}   /* prioritise columns on phones */
}

/* ---------- sector heatmap cells ---------- */
.hm{border-radius:var(--r-sm);padding:2px 6px;display:inline-block;min-width:62px;text-align:right;
  font-variant-numeric:tabular-nums}

/* ---------- KPI row ---------- */
.kpi{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.kpi .k-item b{display:block;font-size:var(--fs-xl);font-weight:650;letter-spacing:-.01em}
.kpi .k-item span{color:var(--fg-2);font-size:var(--fs-sm);line-height:1.3}

/* ---------- forms ---------- */
label{display:block;color:var(--fg-muted);font-size:var(--fs-sm);margin:var(--s4) 0 6px}
input,select,textarea{width:100%;background:var(--bg);color:var(--fg);border:1px solid var(--line-strong);
  border-radius:var(--r-sm);padding:10px var(--s3);font:inherit;font-size:var(--fs-base)}
input:hover,select:hover{border-color:var(--fg-dim)}
input:focus-visible,select:focus-visible{outline:none;box-shadow:var(--ring);border-color:var(--line-strong)}
.hint{color:var(--fg-dim);font-size:var(--fs-xs);margin-top:6px}
.msg{margin-top:var(--s3);font-size:var(--fs-base);padding:var(--s3);border-radius:var(--r-sm);display:none}
.msg.ok{display:block;background:var(--up-soft);border:1px solid rgba(63,176,160,.45);color:var(--up)}
.msg.err{display:block;background:var(--down-soft);border:1px solid rgba(224,122,95,.45);color:var(--down)}

/* ---------- search ---------- */
.search{display:flex;gap:var(--s2);align-items:center;background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--r-md);padding:var(--s2) var(--s3);max-width:520px}
.search svg{flex:0 0 18px;color:var(--fg-dim)}
.search input{border:0;background:transparent;padding:6px 0}
.search input:focus-visible{box-shadow:none}

/* ---------- skeletons (avoid layout shift while data loads) ---------- */
.skeleton{position:relative;overflow:hidden;background:var(--surface-2);border-radius:var(--r-sm);min-height:1em}
.skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);
  transform:translateX(-100%);animation:sh 1.4s infinite}
@keyframes sh{100%{transform:translateX(100%)}}
.sk-row{height:34px;margin:6px 0}
[data-loading="true"]{min-height:120px}

/* ---------- video embeds ---------- */
.ratio{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:var(--r-md);overflow:hidden}
.ratio iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.placeholder{display:flex;align-items:center;justify-content:center;color:var(--fg-dim);font-size:var(--fs-sm);
  padding:var(--s5) 0;background:var(--surface-2);border:1px dashed var(--line-strong);border-radius:var(--r-md)}
.tabs{display:flex;gap:var(--s2);flex-wrap:wrap;margin:var(--s4) 0}
.tab{padding:8px 16px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--surface);
  color:var(--fg-muted);cursor:pointer;font:inherit;font-size:var(--fs-base)}
.tab:hover{color:var(--fg);background:var(--surface-2)}
.tab[aria-selected="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:650}

/* ---------- news items ---------- */
.item{border-top:1px solid var(--line);padding:var(--s4) 0}
.item:first-of-type{border-top:0;padding-top:var(--s2)}
.item-head{display:flex;gap:var(--s3);align-items:flex-start;justify-content:space-between}
/* news headline = level 2, one uniform size + the market's muted hue */
.item-head h4{margin:0;font-size:var(--l2);line-height:1.5;font-weight:650;color:var(--sec2,var(--fg-2))}
/* the videos page follows the selected market's identity */
body[data-market="HK"]{--accent:#c9a227;--sec2:#b6a266}
body[data-market="US"]{--accent:#3fb0a0;--sec2:#6ca79b}
.summary{color:var(--fg-2);font-size:var(--fs-sm);margin-top:6px}
.trade{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s3);
  margin-top:var(--s3);color:var(--fg-muted);font-size:var(--fs-sm)}
.trade b{color:var(--fg)}
.src{color:var(--fg-dim);font-size:var(--fs-xs);margin-top:var(--s2)}

/* ---------- footer ---------- */
.site-footer{margin-top:var(--s7);border-top:1px solid var(--line);background:var(--surface);padding:var(--s6) 0}
.foot-grid{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.foot-grid h4{margin:0 0 var(--s2);font-size:var(--fs-sm);color:var(--fg-muted);text-transform:uppercase;letter-spacing:.06em}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin:6px 0;font-size:var(--fs-sm)}
.foot-grid a{color:var(--fg-muted)} .foot-grid a:hover{color:var(--fg)}
.foot-note{border-top:1px solid var(--line);margin-top:var(--s5);padding-top:var(--s4);color:var(--fg-dim);font-size:var(--fs-xs);line-height:1.7}

/* ---------- print (compliance pages are sometimes printed) ---------- */
@media print{
  .site-header,.site-footer,.search,.hero-actions,.skip-link{display:none!important}
  body{background:#fff;color:#000}
  .card,.table-wrap{border-color:#ccc;background:#fff}
}

/* ==========================================================================
   market split: banner hero, market cards, highlight cards, video strip
   ======================================================================== */
.hero-banner{position:relative;border-bottom:1px solid var(--line);overflow:hidden}
.hero-banner::before{content:"";position:absolute;inset:0;background-image:var(--banner);
  background-size:cover;background-position:center right}
.hero-banner::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(11,14,19,.90) 0%,rgba(11,14,19,.76) 38%,rgba(11,14,19,.40) 72%,rgba(11,14,19,.14) 100%)}
.hero-banner>*{position:relative;z-index:1}
.hero-banner .wrap{padding-top:var(--s4);padding-bottom:var(--s3)}
.hero-banner h1{margin:var(--s1) 0 var(--s2);font-size:var(--fs-3xl);max-width:18ch;color:var(--accent);letter-spacing:-.015em}
.hero-banner .lede{font-size:var(--fs-sm);max-width:54ch;margin:0}
.hero-banner .hero-actions{margin-top:var(--s3);gap:var(--s2)}
.hero-banner .hero-actions .btn{padding:7px 13px;font-size:var(--fs-sm)}
.hero-banner + .wrap > .section:first-of-type{margin-top:var(--s5)}
/* hero KPI cards: number first, label underneath (shared with the record section) */
.hero .kpi{margin-top:var(--s3);gap:var(--s2);grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.hero .kpi .k-item{background:rgba(13,17,23,.88);border:1px solid var(--line);border-radius:var(--r-md);
  padding:8px 12px;display:flex;flex-direction:column;gap:3px;min-width:0}
/* label on top (readable, never overflowing), value underneath at a uniform size */
.hero .kpi .k-item .k-lab{font-size:var(--fs-sm);font-weight:500;color:var(--fg-2);line-height:1.3;
  overflow-wrap:anywhere;min-width:0}
.hero .kpi .k-item .k-val{font-size:clamp(19px,1.6vw,26px);line-height:1.12;font-weight:700;white-space:nowrap;letter-spacing:-.01em}
.hero .kpi .k-item .k-val span{font-size:inherit;font-weight:inherit}
.hero .kpi .k-item .k-val .k-accent{color:var(--accent)}
.hero .kpi .k-item .k-val .k-dim{color:var(--fg-2)}
.hero .kpi .k-item .k-val .up{color:var(--up)}
.hero .kpi .k-item .k-val .down{color:var(--down)}
/* record dashboard — same value size as the hero, single row, L2 labels tinted by the block hue */
.k-accent{color:var(--accent)}
.k-dim2{color:var(--fg-dim)}
#record-kpi{grid-template-columns:repeat(9,minmax(0,1fr));gap:6px}
#record-kpi .k-item{background:rgba(13,17,23,.62);border:1px solid var(--line);border-radius:var(--r-md);
  padding:8px 8px;display:flex;flex-direction:column;gap:3px;min-width:0}
#record-kpi .k-item .k-lab{font-size:var(--l2);font-weight:650;color:var(--sec2,var(--fg-2));line-height:1.25}
#record-kpi .k-item .k-val{font-size:clamp(19px,1.6vw,26px);line-height:1.12;font-weight:700;white-space:nowrap}
#record-kpi .k-item .k-val span{font-size:inherit;font-weight:inherit}
#record-kpi .k-item .k-val .up{color:var(--up)}
#record-kpi .k-item .k-val .down{color:var(--down)}
#record-kpi .k-item .k-val .k-accent{color:var(--accent)}
#record-kpi .k-item .k-val .k-dim2{color:var(--fg-dim)}
@media (max-width:1100px){#record-kpi{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){#record-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hero .kpi .snap{background:rgba(13,17,23,.88);border:1px solid var(--line);border-radius:var(--r-md);padding:8px 12px}
.hero-note{color:var(--fg-dim);font-size:var(--fs-xs);margin:var(--s4) 0 0;padding-left:12px;max-width:none;line-height:1.5}
/* ==========================================================================
   Colour carries information — in OUR palette, not a finviz-style tile wall.
   Signature pieces: performance ribbons (HK gold / US teal skew), a four-step
   signal-strength meter, and keep-gain/loss semantics teal-vs-coral everywhere
   (always paired with ▲▼ so colour is never the only cue).
   ======================================================================== */
.idx{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(142px,1fr));margin-top:var(--s3)}
.idx .i-card{background:rgba(13,17,23,.74);border:1px solid var(--line);border-radius:var(--r-md);padding:6px 10px}
.idx .i-card .i-name{font-size:var(--fs-xs);color:var(--fg-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.idx .i-card .i-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.idx .i-card .i-px{font-size:var(--fs-md);font-weight:650}
.idx .i-card .i-chg{font-size:var(--fs-base);font-weight:700}
/* performance ribbons: name | bar centred on zero | value */
.ribs{margin-top:var(--s3)}
.rib-head,.rib{display:grid;grid-template-columns:110px minmax(0,1fr) 88px 88px;gap:10px;align-items:center}
.rib-head{color:var(--fg-dim);font-size:11px;padding-bottom:4px;border-bottom:1px solid var(--line)}
.rib{padding:2px 0}
.rib .r-name{font-size:var(--fs-sm);color:var(--fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rib .r-track{position:relative;height:14px;background:var(--surface-3);border-radius:3px}
.rib .r-track::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.14)}
.rib .r-bar{position:absolute;top:3px;bottom:3px;border-radius:2px}
.rib .r-v20{font-size:var(--fs-sm);font-weight:650;text-align:right}
.rib .r-v1{font-size:var(--fs-xs);text-align:right;color:var(--fg-dim)}
@media (max-width:620px){.rib-head,.rib{grid-template-columns:78px minmax(0,1fr) 70px 58px;gap:6px}}
/* four-step signal-strength meter (our own scale, explained in the legend) */
.sig{display:inline-flex;gap:3px;vertical-align:middle;margin-left:6px}
.sig i{width:7px;height:11px;border-radius:2px;background:var(--surface-3);display:block}
.sig i.on-strong{background:#c9a227}
.sig i.on-good{background:#3fb0a0}
.sig i.on-fair{background:#5b9bd5}
.sig i.on-weak{background:#4a5563}
.pill{display:inline-block;padding:1px 7px;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:650;
  border:1px solid transparent;line-height:1.5;white-space:nowrap}
.pill-up{color:#4cc0ae;background:rgba(63,176,160,.16);border-color:rgba(63,176,160,.38)}
.pill-down{color:#ef8a70;background:rgba(224,122,95,.16);border-color:rgba(224,122,95,.38)}
.pill-mid{color:var(--fg-2);background:var(--surface-3);border-color:var(--line)}
.pill-gold{color:#e0bf55;background:rgba(201,162,39,.18);border-color:rgba(201,162,39,.42)}
.breadth{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-xs);color:var(--fg-dim);vertical-align:middle}
.breadth .b-bar{width:110px;height:7px;border-radius:4px;overflow:hidden;display:flex;background:var(--surface-3)}
.breadth .b-bar i{display:block;height:100%}
.breadth .b-up{background:#3fb0a0}.breadth .b-dn{background:#e07a5f}
details.more{margin-top:var(--s3)}
details.more>summary{cursor:pointer;color:var(--fg-dim);font-size:var(--fs-xs);padding:6px 0;list-style:none}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::before{content:"▸ ";color:var(--fg-dim)}
details.more[open]>summary::before{content:"▾ "}
details.more>summary:hover{color:var(--fg-2)}
.hl-grid{display:grid;gap:var(--s4);grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:start}
@media (max-width:880px){.hl-grid{grid-template-columns:1fr}}
.pick{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px dashed var(--line)}
.pick:last-child{border-bottom:0}
.pick:first-child{padding-top:0}
.pick b{font-weight:650}
.pick .p-meta{color:var(--fg-dim);font-size:var(--fs-xs);white-space:nowrap}
.legend{color:var(--fg-dim);font-size:11px;margin-top:8px;line-height:1.6}
.legend .sw{display:inline-block;width:8px;height:8px;border-radius:2px;margin:0 3px 0 8px;vertical-align:middle}
/* hi-dpi desktops: the hero is full-bleed, so serve the 3200px render instead of upscaling the 2400px one */
@media (min-resolution:1.5dppx) and (min-width:701px){
  .hero-banner::before{background-image:var(--banner-2x,var(--banner))}
}
/* phones: use the taller crop so the image is never upscaled (blurry) */
@media (max-width:700px){
  .hero-banner::before{background-image:var(--banner-sm,var(--banner));background-position:center}
  .hero-banner::after{background:linear-gradient(180deg,rgba(11,14,19,.86) 0%,rgba(11,14,19,.72) 42%,rgba(11,14,19,.30) 100%)}
  /* keep the phone hero short: 2-up KPI cards, 4 cards, fewer buttons */
  .hero .kpi{grid-template-columns:repeat(2,1fr)}
  .hero .kpi .k-item:nth-child(5){display:none}
  .hero .kpi .k-item b{font-size:var(--fs-xl)}
  .hero-banner h1{font-size:var(--fs-xl)}
  .hero-banner .hero-actions .btn:nth-child(2){display:none}
  .hero-note{font-size:11px}
}
.hero-hub{background:radial-gradient(120% 130% at 10% 0%,rgba(201,162,39,.11),transparent 42%),
  radial-gradient(120% 130% at 90% 0%,rgba(63,176,160,.11),transparent 42%)}
.market-grid{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.market-card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;transition:border-color var(--t),transform var(--t)}
.market-card:hover{border-color:var(--mc);transform:translateY(-2px);text-decoration:none}
.mc-banner{height:148px;background-size:cover;background-position:center}
.mc-body{padding:var(--s4)}
.market-card h3{margin:var(--s1) 0 var(--s2);font-size:var(--fs-lg)}
.market-card p{color:var(--fg-muted);font-size:var(--fs-sm);margin:0 0 var(--s3)}
.mc-cta{color:var(--mc);font-weight:650}
.hl-card{border-left:3px solid var(--accent)}
/* ---------- sectors vs benchmark: period switch, chips, Top-5 panel ---------- */
.periods{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:var(--s3)}
.periods .p-label{font-size:var(--l2);font-weight:650;color:var(--sec2,var(--fg-2));margin-right:2px}
.periods .p-btn{font:inherit;font-size:var(--fs-sm);padding:5px 12px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--surface);color:var(--fg-2);cursor:pointer;
  transition:border-color var(--t),background var(--t),color var(--t)}
.periods .p-btn:hover{border-color:var(--sec,var(--accent));color:var(--fg)}
.periods .p-btn.on{background:var(--sec,var(--accent));border-color:var(--sec,var(--accent));color:#0b0e13;font-weight:700}
.sectors{margin-top:var(--s3)}
.sub-head{font-size:var(--l2);font-weight:650;color:var(--sec2,var(--fg-2));margin:0 0 8px}
.s-chips{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(152px,1fr))}
.s-chip{text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:8px 10px;cursor:pointer;display:flex;flex-direction:column;gap:2px;font:inherit;color:inherit;
  transition:border-color var(--t),background var(--t)}
.s-chip:hover{border-color:var(--sec,var(--accent))}
.s-chip.on{border-color:var(--sec,var(--accent));background:var(--surface-2)}
.s-chip .s-name{font-size:var(--l2);font-weight:650;color:var(--fg)}
.s-chip .s-val{font-size:var(--fs-lg);font-weight:700;line-height:1.2}
.s-chip .s-sub{font-size:11px;color:var(--fg-dim)}
.s-chip.sc-up .s-val{color:var(--up)}
.s-chip.sc-dn .s-val{color:var(--down)}
.s-panel{margin-top:var(--s3);scroll-margin-top:80px}
.s-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:6px;flex-wrap:wrap}
.s-head b{font-size:var(--l2);color:var(--sec2,var(--fg-2))}
.s-head .s-meta{color:var(--fg-dim);font-size:var(--fs-xs)}
@media (max-width:700px){.s-chips{grid-template-columns:repeat(2,1fr)}}
/* section headings carry a hue each: hierarchy you can see at a glance.
   --sec  = L1 tone (strong, for the section heading)
   --sec2 = L2 tone (same hue family, muted, for labels inside the block)
   These hues are chrome only — data colours stay teal/coral/white. */
#highlight{--sec:#e0bf55;--sec2:#b6a266}   /* 今日重點 — 金 */
#scan     {--sec:#4cc0ae;--sec2:#6ca79b}   /* 今日掃描 — 青 */
#market   {--sec:#6fa8dc;--sec2:#7e9cc0}   /* 市場數據 — 藍 */
#record   {--sec:#9b8cf0;--sec2:#8f88c6}   /* 訊號追蹤 — 紫 */
#videos,
#method,
#sources  {--sec:#b8c4d4;--sec2:#97a3b4}   /* 輔助區   — 中性 */
/* hero = the market's own hue; hub falls back to neutral */
.hero-banner{--accent2:#97a3b4}
body[data-market="HK"] .hero-banner{--accent2:#b6a266}
body[data-market="US"] .hero-banner{--accent2:#6ca79b}
.section-head h2{position:relative;padding-left:15px;font-size:var(--fs-2xl);color:var(--sec,var(--accent));letter-spacing:-.01em}
.section-head h2::before{content:"";position:absolute;left:0;top:.14em;bottom:.14em;width:4px;border-radius:2px;background:var(--sec,var(--accent))}
#videos .section-head h2,#method .section-head h2,#sources .section-head h2{font-size:var(--fs-xl)}
.section-head .meta{color:var(--fg-dim)}
@media (max-width:700px){
  .section-head h2{font-size:var(--fs-xl)}
  #videos .section-head h2,#method .section-head h2,#sources .section-head h2{font-size:var(--fs-lg)}
}
/* ==========================================================================
   Two-level typography (the boss's rule)
   L1 = section heads / page title (bigger, their own hue, above).
   L2 = every label row inside a block — KPI labels, index names, sub-headings,
        table headers — one identical size (14px) and tinted with the block hue.
   ======================================================================== */
:root{--l2:var(--fs-base)}                                      /* L2 = 14px, one size everywhere */
.hero .kpi .k-item .k-lab,
.idx .i-card .i-name,
#highlight .hl-grid h3,
#highlight .picks h4,
#scan table.data thead th,
#market table.data thead th,
#record table.data thead th,
#videos .strip .s-body b,
#latest .strip .s-body b,
#method .card > h3,
#sources .card > h3,
.k-lab,.strip .s-body b,.card > h3,table.data thead th{font-size:var(--l2);font-weight:650;letter-spacing:0}
.hero .kpi .k-item .k-lab,.idx .i-card .i-name{color:var(--accent2,var(--fg-2))}
.k-lab{color:var(--sec2,var(--fg-2))}
table.data thead th{color:var(--sec2,var(--fg-2));text-transform:none}
#highlight .hl-grid h3,#highlight .picks h4{color:var(--sec2,var(--fg-2))}
#videos .strip .s-body b,
#latest .strip .s-body b,#method .card > h3,#sources .card > h3{color:var(--fg-2)}
.hl-grid h3{font-size:var(--l2)}
@media (max-width:700px){
  .hero .kpi .k-item .k-lab,.idx .i-card .i-name,#highlight .hl-grid h3,#highlight .picks h4,
  #scan table.data thead th,#market table.data thead th,#record table.data thead th,
  #videos .strip .s-body b,
#latest .strip .s-body b,#method .card > h3,#sources .card > h3{font-size:13px}
}
.strip{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.strip a.s-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;display:block}
.strip a.s-card:hover{border-color:var(--accent);text-decoration:none}
.strip img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
.strip .s-body{padding:var(--s3)}
.strip .s-body b{display:block;font-size:var(--fs-base);line-height:1.45;color:var(--fg)}
.strip .s-body span{color:var(--fg-dim);font-size:var(--fs-xs)}
.score-big{font-size:var(--fs-2xl);font-weight:700;line-height:1}
@media (prefers-reduced-motion: reduce){.market-card:hover{transform:none}}