/* ══════════════════════════════════════════════════════════════════════════
     Subsector Confluence — sc-* design system.
     Ports the macro.html mx5 idiom (glass isles, mono numerals, verdict copy,
     breathing / staggered motion) into a self-contained namespace built on the
     shared theme.css tokens. The subject is ROTATION + ENTRY TIMING, so the
     signature is the confluence ribbon (the whole universe's buy→avoid spread),
     not a cloned risk gauge. Bilingual via .l-en/.l-zh (theme.js toggles).
     ══════════════════════════════════════════════════════════════════════════ */
  * { box-sizing:border-box; }
  body { background:var(--bg); color:var(--text); font:14px/1.5 var(--font-ui); margin:0; padding:22px 0 40px; }
  body.page-subsectors { --sc-num:var(--font-mono); }
  a { text-decoration:none; color:inherit; }
  .sc-num, .num { font-family:var(--sc-num,var(--font-mono)); font-variant-numeric:tabular-nums; }
  .wrap { padding:14px; }
  @media (min-width:1100px){ .wrap{ padding:16px max(28px,calc((100vw - 1580px)/2)); } }

  /* ── top bar: title, self-explaining subtitle, tabs ────────────────────── */
  .sc-top { margin:6px 2px 4px; }
  .sc-kicker { display:flex; align-items:center; gap:9px; }
  .sc-kicker h1 { font-size:23px; margin:0; font-weight:800; letter-spacing:-.02em; display:flex; align-items:center; gap:9px; }
  /* ── icon system (shared _icons.html.j2 monoline set) ───────────────────────
     Inline SVG, stroke=currentColor, so every glyph inherits its slot's ink and
     rides the theme / zh swaps for free. Replaces the emoji that used to do
     section-head duty (a colour-fixed, OS-dependent glyph in a typographic
     system). Base + per-slot sizing lives here per the macro's header note. */
  .ic-svg { width:1em; height:1em; display:inline-block; flex:none; fill:none;
    stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.135em; }
  .sc-kicker .sc-h1-ic { width:22px; height:22px; color:var(--ink-info, var(--info)); stroke-width:1.7;
    filter:drop-shadow(0 0 12px color-mix(in srgb,var(--info) 55%,transparent)); }
  /* Section-head ink encodes the page's own three altitudes: the ACT sections
     (what to do now · picks) carry the live info accent; the EXPLORE sections
     below them stay muted. The icon is structure, not decoration. */
  .sc-h2-ic { width:17px; height:17px; color:var(--muted); stroke-width:1.7; }
  .sc-s1 .sc-h2-ic, .sc-s2 .sc-h2-ic { color:var(--ink-info, var(--info)); }
  /* leadership column heads: the mark carries the stance the column carries —
     accelerating leaders take the up ink (and flip with 红涨绿跌), coiling
     laggards take the info ink, exactly like their stage badges below. */
  .sc-h3-ic { width:15px; height:15px; stroke-width:1.7; }
  .sc-h3-ic.ic-run { color:var(--ink-up, var(--up)); }
  .sc-h3-ic.ic-coil { color:var(--ink-info, var(--info)); }
  .sc-search .sc-find-ic { width:14px; height:14px; color:var(--muted); }
  .lc-filtered .lc-veto-ic { width:12px; height:12px; margin-right:2px; }
  .nav-context-link .ic-svg { width:15px; height:15px; margin-right:1px; }
  .sc-asof { color:var(--muted); font-size:12px; margin-left:auto; font-family:var(--sc-num); }
  .sc-lede { color:var(--muted); font-size:12.5px; margin:5px 2px 0; max-width:82ch; line-height:1.5; }
  .sc-lede b { color:var(--text); font-weight:650; }

  .sc-tabs { display:flex; flex-wrap:wrap; gap:5px; margin:15px 2px 0; }
  .sc-tab { display:flex; align-items:center; gap:7px; padding:8px 15px; cursor:pointer; font-weight:650; font-size:13px; color:var(--muted);
    background:var(--gbtn-bg); border:1px solid var(--gbtn-brd); border-radius:11px; transition:color .16s, border-color .16s, background .16s, transform .12s; }
  .sc-tab:hover { color:var(--text); border-color:var(--gbtn-brd-hover); transform:translateY(-1px); }
  .sc-tab.on { color:var(--text); background:color-mix(in srgb,var(--info) 15%,var(--panel)); border-color:color-mix(in srgb,var(--info) 50%,transparent);
    box-shadow:0 0 0 1px color-mix(in srgb,var(--info) 24%,transparent), 0 6px 18px -10px color-mix(in srgb,var(--info) 60%,transparent); }
  .sc-tab .n { font-size:11px; font-weight:700; color:var(--muted); font-family:var(--sc-num); background:color-mix(in srgb,var(--text) 8%,transparent);
    padding:1px 6px; border-radius:6px; min-width:20px; text-align:center; }
  .sc-tab.on .n { color:var(--ink-info, var(--info)); background:color-mix(in srgb,var(--info) 16%,transparent); }
  /* rising-star tab badge — a DRAWN badge, not clip-art: gold stroke over a
     translucent gold fill, so it reads as one of ours in both themes. */
  .star-badge { display:inline-flex; align-items:center; line-height:0; }
  .star-badge .ic-svg { width:13px; height:13px; stroke-width:1.55;
    stroke:#e8b93c; fill:color-mix(in srgb,#e8b93c 20%,transparent);
    filter:drop-shadow(0 0 6px color-mix(in srgb,#e8b93c 45%,transparent)); }

  /* ── the glass isle: shared surface for hero + section panels ──────────── */
  .isle { position:relative; background:var(--glass-bg); border:1px solid var(--glass-brd); border-radius:18px;
    box-shadow:var(--glass-shadow); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); padding:18px 20px; }
  .isle::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:radial-gradient(120% 90% at 8% -10%, color-mix(in srgb,var(--isle-color,var(--info)) 12%,transparent), transparent 60%); }
  .isle > * { position:relative; }

  /* hero */
  .sc-hero { --isle-color:var(--info); margin:16px 0 8px; padding:20px 22px 18px; overflow:hidden; }
  .sc-hero::after { content:""; position:absolute; left:-30%; top:-60%; width:60%; height:180%; z-index:0; pointer-events:none;
    background:radial-gradient(closest-side, color-mix(in srgb,var(--isle-color) 22%,transparent), transparent 70%);
    opacity:.5; filter:blur(30px); animation:sc-underglow 6s ease-in-out infinite; }
  @keyframes sc-underglow { 0%,100%{opacity:.34;transform:translateX(0)} 50%{opacity:.6;transform:translateX(12px)} }

  .sc-eyebrow { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
  .sc-eyebrow .dot { width:8px; height:8px; border-radius:50%; background:var(--isle-color); flex-shrink:0;
    box-shadow:0 0 10px 2px color-mix(in srgb,var(--isle-color) 55%,transparent); animation:sc-beacon 3s ease-in-out infinite; }
  @keyframes sc-beacon { 0%,100%{opacity:.55} 50%{opacity:1} }
  .sc-eyebrow .lbl { font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--isle-color); }
  .sc-eyebrow .backdrop { margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
  .bd-chip { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:650; padding:3px 9px; border-radius:999px;
    border:1px solid var(--line); background:color-mix(in srgb,var(--panel2) 60%,transparent); color:var(--muted); white-space:nowrap; }
  .bd-chip b { color:var(--text); font-weight:750; }
  .bd-chip .bd-ic { font-size:11px; }
  .bd-chip.bd-riskon { color:var(--ink-up, var(--up)); border-color:color-mix(in srgb,var(--up) 40%,transparent); }
  .bd-chip.bd-riskoff { color:var(--ink-down, var(--down)); border-color:color-mix(in srgb,var(--down) 40%,transparent); }
  .bd-chip.bd-mixed { color:var(--ink-orange, var(--orange)); border-color:color-mix(in srgb,var(--orange) 40%,transparent); }
  .bd-chip .num { color:inherit; }

  .sc-hero-grid { display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center; }
  @media (max-width:720px){ .sc-hero-grid { grid-template-columns:1fr; gap:16px; } }

  .sc-headline { text-align:center; padding:2px 10px 2px 2px; border-right:1px solid var(--line); }
  @media (max-width:720px){ .sc-headline { border-right:none; border-bottom:1px solid var(--line); padding:0 0 12px; } }
  .sc-headline .big { font-family:var(--sc-num); font-size:64px; line-height:.92; font-weight:800; letter-spacing:-.03em;
    color:var(--ink-up, var(--up)); filter:drop-shadow(0 0 16px color-mix(in srgb,var(--up) 42%,transparent)); }
  .sc-headline .big.zero { color:var(--muted); filter:none; }
  .sc-headline .cap { font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:3px; }

  /* the confluence ribbon — the signature */
  .sc-ribbon-wrap { min-width:0; }
  .sc-ribbon-label { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:7px; }
  .sc-ribbon-label .t { font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
  .sc-ribbon-label .h { font-size:11px; color:var(--muted); font-family:var(--sc-num); }
  .sc-ribbon { display:flex; width:100%; height:44px; border-radius:11px; overflow:hidden; border:1px solid var(--line);
    background:color-mix(in srgb,var(--panel2) 50%,transparent); }
  .sc-seg { position:relative; min-width:2px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
    color:#fff; overflow:hidden; transform-origin:left; animation:sc-seg-grow .7s cubic-bezier(.22,1,.36,1) backwards; }
  @keyframes sc-seg-grow { from{ transform:scaleX(0); opacity:.3 } to{ transform:scaleX(1); opacity:1 } }
  .sc-seg .sc-seg-n { font-family:var(--sc-num); font-size:15px; font-weight:800; line-height:1; text-shadow:0 1px 3px rgba(0,0,0,.4); }
  .sc-seg .sc-seg-t { font-size:8.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; opacity:.92; white-space:nowrap;
    text-shadow:0 1px 2px rgba(0,0,0,.4); }
  .sc-seg.narrow .sc-seg-t { display:none; }
  .sc-seg.tiny .sc-seg-n { font-size:12px; }
  .sc-seg.entry   { background:linear-gradient(180deg,var(--fill-up, var(--up)),color-mix(in srgb,var(--fill-up, var(--up)) 78%,#000)); box-shadow:inset 0 0 20px color-mix(in srgb,#fff 22%,transparent); }
  .sc-seg.tailwind{ background:linear-gradient(180deg,color-mix(in srgb,var(--fill-up, var(--up)) 62%,var(--fill-info, var(--info))),color-mix(in srgb,var(--fill-up, var(--up)) 44%,var(--fill-info, var(--info)))); }
  .sc-seg.neutral { background:color-mix(in srgb,var(--g-mid) 82%,var(--panel)); color:var(--muted); }
  .sc-seg.late    { background:linear-gradient(180deg,var(--fill-orange, var(--orange)),color-mix(in srgb,var(--fill-orange, var(--orange)) 78%,#000)); }
  .sc-seg.headwind{ background:linear-gradient(180deg,var(--fill-down, var(--down)),color-mix(in srgb,var(--fill-down, var(--down)) 76%,#000)); }
  .sc-seg.entry, .sc-seg.headwind { position:relative; }
  .sc-seg.entry::after, .sc-seg.headwind::after { content:""; position:absolute; inset:0; opacity:.0;
    background:linear-gradient(90deg,transparent,color-mix(in srgb,#fff 40%,transparent),transparent); animation:sc-sheen 4.5s ease-in-out infinite; }
  @keyframes sc-sheen { 0%,72%{ transform:translateX(-120%); opacity:0 } 82%{ opacity:.7 } 92%,100%{ transform:translateX(120%); opacity:0 } }
  .sc-ribbon-legend { display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }
  .sc-ribbon-legend span { font-size:10px; color:var(--muted); display:inline-flex; align-items:center; gap:5px; }
  .sc-ribbon-legend i { width:9px; height:9px; border-radius:3px; display:inline-block; }

  .sc-hero-verdict { margin-top:16px; font-size:13.5px; line-height:1.55; max-width:96ch; }
  .sc-hero-verdict b { color:var(--text); font-weight:700; }
  .sc-hero-verdict .accent-up { color:var(--ink-up, var(--up)); font-weight:700; }
  .sc-hero-verdict .accent-down { color:var(--ink-down, var(--down)); font-weight:700; }

  .sc-best { display:flex; align-items:flex-start; gap:9px; margin-top:13px; padding:11px 13px; border-radius:12px;
    background:color-mix(in srgb,var(--up) 9%,transparent); border:1px solid color-mix(in srgb,var(--up) 30%,transparent); }
  .sc-best.none { background:color-mix(in srgb,var(--muted) 8%,transparent); border-color:var(--line); }
  .sc-best .ar { color:var(--ink-up, var(--up)); font-weight:800; flex-shrink:0; }
  .sc-best.none .ar { color:var(--muted); }
  .sc-best .bd { font-size:12.5px; line-height:1.5; }
  .sc-best .bd .nm { font-weight:750; color:var(--text); }
  .sc-best .bd .why { color:var(--muted); }
  .sc-best a.nm:hover { color:var(--ink-link, var(--link)); }

  .sc-honesty { margin-top:14px; padding-top:11px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; line-height:1.55; display:flex; gap:7px; align-items:baseline; }
  .sc-honesty .num { color:var(--text); }

  /* ── section chrome ────────────────────────────────────────────────────── */
  .sec { margin:26px 0 6px; }
  .sec-head { display:flex; align-items:baseline; gap:9px; margin:0 2px 4px; }
  .sec-head h2 { font-size:15.5px; font-weight:750; margin:0; display:flex; align-items:center; gap:8px; letter-spacing:-.01em; }
  .sec-head .n { font-size:12px; font-weight:700; color:var(--muted); font-family:var(--sc-num); }
  .sec .desc { color:var(--muted); font-size:11.5px; margin:0 2px 12px; max-width:94ch; line-height:1.5; }

  /* the two-column act board: buy-ready | avoid */
  .sc-board { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  @media (max-width:860px){ .sc-board { grid-template-columns:1fr; } }
  .sc-colhead { display:flex; align-items:center; gap:8px; margin:0 2px 9px; font-size:13px; font-weight:750; }
  .sc-colhead .pip { width:9px; height:9px; border-radius:3px; }
  .sc-colhead .pip.buy { background:var(--up); box-shadow:0 0 8px color-mix(in srgb,var(--up) 60%,transparent); }
  .sc-colhead .pip.avoid { background:var(--down); box-shadow:0 0 8px color-mix(in srgb,var(--down) 60%,transparent); }
  .sc-colhead .n { font-size:11.5px; color:var(--muted); font-family:var(--sc-num); font-weight:700; }

  .gcards { display:flex; flex-direction:column; gap:9px; }
  .gcard { display:block; position:relative; background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--line);
    border-radius:13px; padding:12px 14px; transition:border-color .15s, transform .12s, box-shadow .15s; animation:sc-rise .4s cubic-bezier(.22,1,.36,1) backwards; }
  .gcard:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--isle-color,var(--info)) 55%,transparent);
    box-shadow:0 10px 26px -14px color-mix(in srgb,var(--isle-color,var(--info)) 70%,transparent); }
  @keyframes sc-rise { from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
  .gcard .g-top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
  .gcard .g-nm { font-weight:750; font-size:14px; line-height:1.2; }
  .gcard .g-sct { color:var(--muted); font-size:10px; margin-top:2px; text-transform:uppercase; letter-spacing:.04em; }
  .gcard .g-row { display:flex; align-items:center; gap:6px; margin-top:9px; flex-wrap:wrap; }
  .gcard .g-act { font-size:12px; line-height:1.45; margin-top:9px; color:var(--text); }
  .gcard .g-act .lead { font-weight:700; }
  .gcard .g-sig { color:var(--muted); font-size:11px; margin-top:5px; font-family:var(--sc-num); }
  .gcard .g-fresh { color:var(--muted); font-size:11px; }

  /* tier + regime + entry pills */
  .tier { font-family:var(--sc-num); font-weight:800; font-size:11px; padding:2px 7px; border-radius:6px; letter-spacing:.02em; color:#fff; }
  /* White text on a fill needs the SOLID grade, not the ink rung: --ink-* is identity
     in dark by construction, so an ink-filled badge stays 2.5:1 there. --fill-* mixes
     the hue toward black instead, which is theme-independent — white lands 5.1–8.1:1
     on these four in both themes (was 3.61 / 3.10 light, 2.51 / 2.2 dark). */
  .tier.T1{ background:var(--fill-up, var(--up)); }
  .tier.T2{ background:color-mix(in srgb, var(--fill-up, var(--up)) 84%, #000); }
  .tier.T3{ background:var(--fill-info, var(--info)); }
  .tier.T4{ background:#3c4a8c; }
  .tier.none{ background:var(--g-mid); color:var(--muted); }
  html[data-lang="zh"] .tier.T2{ background:color-mix(in srgb, var(--fill-up, var(--up)) 84%, #000); }
  .pill { font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:999px; border:1px solid var(--line); white-space:nowrap; }
  .pill.buy{ color:var(--ink-up, var(--up)); border-color:color-mix(in srgb,var(--up) 45%,transparent); background:color-mix(in srgb,var(--up) 8%,transparent); }
  .pill.avoid{ color:var(--ink-down, var(--down)); border-color:color-mix(in srgb,var(--down) 45%,transparent); background:color-mix(in srgb,var(--down) 7%,transparent); }
  .pill.neutral{ color:var(--muted); }
  .pill.tactical,.pill.late{ color:var(--ink-orange, var(--orange)); border-color:color-mix(in srgb,var(--orange) 45%,transparent); }
  .pill.behavesas{ color:var(--ink-info, var(--info)); border-color:color-mix(in srgb,var(--info) 45%,transparent); background:color-mix(in srgb,var(--info) 8%,transparent); }
  .pill.entry{ color:var(--ink-up, var(--up)); border-color:color-mix(in srgb,var(--up) 55%,transparent); background:color-mix(in srgb,var(--up) 12%,transparent); font-weight:800; }

  /* reliability dot */
  .rel { display:inline-flex; align-items:center; gap:4px; font-size:10px; color:var(--muted); }
  .rel i { width:7px; height:7px; border-radius:50%; display:inline-block; }
  .rel.high i{ background:var(--up); } .rel.med i{ background:var(--orange); } .rel.low i{ background:var(--muted); opacity:.6; }

  /* ── picks table + full table ──────────────────────────────────────────── */
  table.sc-tbl { width:100%; border-collapse:collapse; font-size:12.5px; }
  table.sc-tbl th { text-align:left; color:var(--muted); font-weight:650; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em;
    padding:8px 10px; border-bottom:1px solid var(--line); cursor:pointer; white-space:nowrap; user-select:none; }
  table.sc-tbl th.sortable:hover { color:var(--text); }
  table.sc-tbl th .arr { opacity:.4; font-size:9px; }
  table.sc-tbl th.sorted .arr { opacity:1; color:var(--ink-info, var(--info)); }
  table.sc-tbl td { padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
  table.sc-tbl tbody tr { transition:background .12s; }
  table.sc-tbl tbody tr:hover td { background:color-mix(in srgb,var(--text) 4%,transparent); }
  .sc-tbl .tk { font-weight:750; font-family:var(--sc-num); }
  .pos{ color:var(--ink-up, var(--up)); } .neg{ color:var(--ink-down, var(--down)); }
  .scbar { display:inline-block; height:6px; border-radius:3px; background:var(--up); vertical-align:middle; margin-left:6px;
    box-shadow:0 0 6px color-mix(in srgb,var(--up) 45%,transparent); }

  .sc-tablecard { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:6px 4px 4px; overflow:hidden; }
  .sc-search { display:flex; align-items:center; gap:8px; margin:6px 8px 8px; }
  .sc-search input { flex:0 1 320px; background:var(--panel2); border:1px solid var(--line); border-radius:9px; color:var(--text);
    font:13px var(--font-ui); padding:7px 11px; outline:none; transition:border-color .15s; }
  .sc-search input:focus { border-color:color-mix(in srgb,var(--info) 55%,transparent); }
  .sc-search .cnt { color:var(--muted); font-size:11px; font-family:var(--sc-num); margin-left:auto; }
  .tbl-scroll { overflow-x:auto; }

  /* running / coiling leadership cards */
  .lead-cols { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  @media (max-width:820px){ .lead-cols{ grid-template-columns:1fr; } }
  .lcards { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:9px; }
  .lcard { border:1px solid var(--line); border-left:3px solid var(--line); border-radius:12px; padding:10px 12px; background:var(--panel);
    transition:transform .12s, border-color .15s; animation:sc-rise .4s cubic-bezier(.22,1,.36,1) backwards; }
  .lcard:hover { transform:translateY(-1px); }
  .lcard .lc-top { display:flex; justify-content:space-between; align-items:center; gap:6px; }
  .lcard .lc-nm { font-weight:700; font-size:12.5px; line-height:1.2; }
  .lcard .lc-sub { color:var(--muted); font-size:9.5px; text-transform:uppercase; letter-spacing:.04em; margin-top:2px; }
  .lcard .lc-row { display:flex; gap:5px; align-items:center; margin-top:8px; flex-wrap:wrap; }
  .lcard .lc-meta { color:var(--muted); font-size:10.5px; margin-top:6px; font-family:var(--sc-num); }
  .lcard .lc-tf { font-size:10.5px; margin-top:6px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-family:var(--sc-num); }
  .lcard .lc-tf .tfc { font-weight:700; }
  .lc-filtered { color:var(--muted); font-size:10.5px; margin-top:10px; line-height:1.45; padding-top:9px; border-top:1px dashed var(--line); }
  .lcard .lc-macro { color:var(--ink-down, var(--down)); font-size:10px; margin-top:6px; font-weight:600; }
  .qp { font-family:var(--sc-num); font-size:10px; font-weight:700; padding:2px 7px; border-radius:6px; border:1px solid; }

  /* sector backdrop strip + nasdaq internals */
  .secstrip { display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:8px; }
  .secstrip .s { background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:9px 11px; transition:transform .12s, border-color .15s; }
  .secstrip a.s:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--info) 45%,transparent); }
  .secstrip .s .snm { font-weight:700; font-size:12px; }
  .ni-ew-chip { display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px 10px; background:var(--panel); border:1px solid var(--line);
    border-radius:10px; padding:7px 13px; font-size:12.5px; margin:4px 0 10px; font-family:var(--sc-num); }

  .empty { color:var(--muted); padding:16px; background:color-mix(in srgb,var(--panel) 60%,transparent); border:1px dashed var(--line); border-radius:12px; font-size:12.5px; }
  .sc-more { margin:10px 2px 0; font:650 12px var(--font-ui); color:var(--ink-link, var(--link)); background:var(--gbtn-bg); border:1px solid var(--gbtn-brd);
    border-radius:9px; padding:6px 14px; cursor:pointer; transition:border-color .15s, background .15s; }
  .sc-more:hover { border-color:var(--gbtn-brd-hover); background:var(--gbtn-bg-hover); }
  .sc-collapsed .sc-xtra { display:none; }
  .sc-foot { color:var(--muted); font-size:11px; margin:30px 2px 0; line-height:1.6; max-width:108ch; border-top:1px solid var(--line); padding-top:14px; }
  .sc-foot a { color:var(--ink-link, var(--link)); }

  /* staggered section entrance */
  .sc-stagger { opacity:0; transform:translateY(10px); animation:sc-rise .5s cubic-bezier(.22,1,.36,1) forwards; }
  .sc-s1{animation-delay:.04s}.sc-s2{animation-delay:.10s}.sc-s3{animation-delay:.16s}.sc-s4{animation-delay:.22s}.sc-s5{animation-delay:.28s}.sc-s6{animation-delay:.34s}

  @media (prefers-reduced-motion:reduce){
    .sc-hero::after, .sc-eyebrow .dot { animation:none !important; }
    .sc-seg, .gcard, .lcard, .sc-stagger { animation:none !important; opacity:1 !important; transform:none !important; }
    .sc-seg.entry::after, .sc-seg.headwind::after { animation:none !important; }
  }

  /* ══════════════════════════════════════════════════════════════════════════
     LIGHT MODE — designed, not inherited (2026-08-03)
     The sc-* system was drawn dark-first, so light used to arrive as a token
     swap: a glass isle over a tinted canvas reads as a pastel-blue FIELD, and
     the ribbon's mid-luminance fills collapse into it (NEUTRAL disappeared
     outright). Light is a first-class target here, with its own depth recipe:

         canvas #e8ebf1  →  panel #ffffff  →  card #ffffff on a tinted column

     Three rules of the port: (1) every selector is guarded on
     html[data-theme="light"] AND scoped to this page, so dark stays
     byte-identical; (2) theme.js injects html.soft-contrast[data-theme="light"]
     LATE in <head> at specificity (0,2,1) — every rule below clears it on
     SPECIFICITY, never on source order; (3) small coloured text rebinds the
     STATE token to the estate's text-grade --ink-* twin on the element itself,
     so the 红涨绿跌 swap keeps working (the ink tokens are already zh-aware) and
     no fill anywhere changes hue.
     ══════════════════════════════════════════════════════════════════════════ */

  /* 1 · canvas — one step deeper than the estate default so white reads as material.
     --sc-l-buy / --sc-l-sell are the light board's two DIRECTIONAL inks, declared
     once here and swapped once below: every rule that paints "this is the buy
     side" reads the token, so the 红涨绿跌 convention has exactly one flip point
     on this page instead of a hex to forget in each rule. */
  html[data-theme="light"] body.page-subsectors { background:#e8ebf1; --sc-l-buy:#1f9d55; --sc-l-sell:#c0453e; }
  html[data-theme="light"][data-lang="zh"] body.page-subsectors { --sc-l-buy:#c0453e; --sc-l-sell:#1f9d55; }

  /* 2 · top-level panels — white material, hairline edge, one soft lift */
  html[data-theme="light"] body.page-subsectors .isle,
  html[data-theme="light"] body.page-subsectors .sc-tablecard {
    background-color:#fff; border-color:#dde2ea;
    box-shadow:0 1px 2px rgba(23,32,55,.05), 0 8px 24px -12px rgba(23,32,55,.10);
  }
  /* the hero keeps an info-blue PRESENCE, not an info-blue field: a 2px accent
     rule along the top edge, and the breathing aurora dialled down to a hint. */
  html[data-theme="light"] body.page-subsectors .sc-hero {
    background-image:linear-gradient(90deg,
      color-mix(in srgb,var(--info) 88%,#fff) 0%,
      color-mix(in srgb,var(--info) 42%,#fff) 46%,
      transparent 92%);
    background-repeat:no-repeat; background-size:100% 2px;
    background-position:0 0; background-origin:border-box;
  }
  html[data-theme="light"] body.page-subsectors .isle::before {
    background:radial-gradient(120% 90% at 8% -10%, color-mix(in srgb,var(--info) 5%,transparent), transparent 62%);
  }
  html[data-theme="light"] body.page-subsectors .sc-hero::after {
    background:radial-gradient(closest-side, color-mix(in srgb,var(--info) 6%,transparent), transparent 70%);
    opacity:1; filter:blur(24px);
  }
  html[data-theme="light"] body.page-subsectors .sc-headline { border-right-color:#e3e8f0; }
  @media (max-width:720px){
    html[data-theme="light"] body.page-subsectors .sc-headline { border-bottom-color:#e3e8f0; }
  }
  html[data-theme="light"] body.page-subsectors .sc-honesty { border-top-color:#e3e8f0; }
  html[data-theme="light"] body.page-subsectors .bd-chip { background:#f6f7fa; border-color:#dde2ea; }

  /* 3 · the confluence ribbon — the signature, re-pitched for white.
     Own hues (not the fill tokens): the tokens are tuned to sit on ink, and on
     white NEUTRAL and LATE washed out entirely. 1px white gaps are drawn as a
     shadow so no segment loses a pixel of width. */
  html[data-theme="light"] body.page-subsectors .sc-ribbon {
    background:#edf0f5; border-color:#dde2ea;
  }
  html[data-theme="light"] body.page-subsectors .sc-seg { color:#fff; }
  html[data-theme="light"] body.page-subsectors .sc-seg + .sc-seg { box-shadow:-1px 0 0 0 #fff; }
  html[data-theme="light"] body.page-subsectors .sc-seg.entry    { background:var(--sc-l-buy); box-shadow:none; }
  html[data-theme="light"] body.page-subsectors .sc-seg.tailwind { background:color-mix(in srgb,var(--up) 55%,var(--info)); }
  html[data-theme="light"] body.page-subsectors .sc-seg.late     { background:#b07a10; }
  html[data-theme="light"] body.page-subsectors .sc-seg.headwind { background:var(--sc-l-sell); }
  /* NEUTRAL is a real reading ("22 groups are doing nothing"), so it gets a
     surface of its own instead of dissolving into the track. Ink deepened from
     the drafted #57607a to clear 4.5:1 on the #aeb6c4 fill (it measured 3.06). */
  html[data-theme="light"] body.page-subsectors .sc-seg.neutral  { background:#aeb6c4; color:#3c4457; }
  html[data-theme="light"] body.page-subsectors .sc-seg.neutral .sc-seg-n,
  html[data-theme="light"] body.page-subsectors .sc-seg.neutral .sc-seg-t { text-shadow:none; }
  html[data-theme="light"] body.page-subsectors .sc-ribbon-legend i { box-shadow:inset 0 0 0 1px rgba(23,32,55,.16); }

  /* 4 · best-timed entry — a green-railed inset, quiet enough to read as a note */
  html[data-theme="light"] body.page-subsectors .sc-best {
    background:color-mix(in srgb,var(--sc-l-buy) 6%,#fff);
    border-color:color-mix(in srgb,var(--sc-l-buy) 25%,#dde2ea);
    border-left:3px solid var(--sc-l-buy);
  }
  html[data-theme="light"] body.page-subsectors .sc-best.none {
    background:#f6f7fa; border-color:#dde2ea; border-left-color:#c4cbd7;
  }

  /* 5 · the two-sided act board — in light the columns had no container at all,
     so "buy-ready | don't chase" stopped reading as one instrument. Each column
     gets a faint side-coded wash; the cards inside stay white. */
  html[data-theme="light"] body.page-subsectors .sc-board > .sc-col {
    padding:12px 12px 14px; border-radius:15px; border:1px solid #dde2ea;
  }
  html[data-theme="light"] body.page-subsectors .sc-board > .sc-col:first-child {
    background:color-mix(in srgb,var(--sc-l-buy) 3%,#fff); border-color:color-mix(in srgb,var(--sc-l-buy) 15%,#dde2ea);
  }
  html[data-theme="light"] body.page-subsectors .sc-board > .sc-col:last-child {
    background:color-mix(in srgb,var(--sc-l-sell) 3%,#fff); border-color:color-mix(in srgb,var(--sc-l-sell) 15%,#dde2ea);
  }

  /* 6 · nested cards — white on the wash, one hairline, the tinted left rail
     (set inline per class) survives because border-color never touches it. */
  html[data-theme="light"] body.page-subsectors .gcard,
  html[data-theme="light"] body.page-subsectors .lcard,
  html[data-theme="light"] body.page-subsectors .secstrip .s,
  html[data-theme="light"] body.page-subsectors .ni-ew-chip {
    background:#fff; border-color:#e3e8f0; box-shadow:0 1px 2px rgba(23,32,55,.05);
  }
  html[data-theme="light"] body.page-subsectors .gcard:hover,
  html[data-theme="light"] body.page-subsectors .lcard:hover {
    box-shadow:0 6px 18px -10px rgba(23,32,55,.28);
  }
  html[data-theme="light"] body.page-subsectors .empty {
    background:#f6f7fa; border-color:#dde2ea; color:var(--muted);
  }
  html[data-theme="light"] body.page-subsectors .sc-search input { background:#f6f7fa; border-color:#dde2ea; }
  html[data-theme="light"] body.page-subsectors table.sc-tbl tbody tr:hover td { background:#f4f6fa; }

  /* 7 · small coloured text — the state palette is FILL-grade and drops to
     3.0–3.6:1 on white at 10–12px. Rebinding --up/--down/--info/--orange to the
     estate's text-grade --ink-* twins ON THESE ELEMENTS lifts every inline
     `color:var(--ink-up, var(--up))` the renderer emits, keeps 红涨绿跌 intact (the ink tokens
     carry their own zh twins), and leaves every fill in the page untouched. */
  html[data-theme="light"] body.page-subsectors :is(.qp, .tfc, .g-act, .g-sig, .lc-meta, .lc-macro,
    .pos, .neg, .pill, .rel, .sc-hero-verdict, .sc-best .bd, .bd-chip) {
    --up:var(--ink-up); --down:var(--ink-down); --info:var(--ink-info);
    --orange:var(--ink-orange); --warn:var(--ink-warn);
  }
  html[data-theme="light"] body.page-subsectors .lc-macro { color:var(--ink-down, var(--down)); }
  html[data-theme="light"] body.page-subsectors .pill.neutral { color:var(--muted); border-color:#dde2ea; }
  html[data-theme="light"] body.page-subsectors .tier.none { background:#c4cbd7; color:#2e3950; }


  /* 8 · icons on white — a glow behind a stroke reads as a smudge, and the gold
     badge needs a deeper stroke to stay a badge rather than a highlight. */
  html[data-theme="light"] body.page-subsectors .sc-kicker .sc-h1-ic { filter:none; }
  html[data-theme="light"] .star-badge .ic-svg {
    stroke:#a8790f; fill:color-mix(in srgb,#e8b93c 25%,#fff); filter:none;
  }