:root{
    --bg:#ffffff; --surface:#ffffff; --surface-2:#f5f5f7; --surface-3:#ebebed;
    --border:rgba(0,0,0,.08); --border-soft:rgba(0,0,0,.04);
    --text:#1d1d1f; --text-dim:#6e6e73; --text-faint:#aeaeb2;
    /* Alias used by the server-rendered SEO blocks (var(--text-color,#333)).
       Resolves against whichever --text the active theme sets. */
    --text-color:var(--text);
    --gold:#0071e3; --gold-ink:#0066cc; --gold-soft:rgba(0,113,227,.08);
    --blue:#0071e3; --blue-soft:rgba(0,113,227,.08);
    --up:#34c759; --down:#ff3b30; --up-line:#34c759; --down-line:#ff3b30;
    --up-soft:rgba(52,199,89,.1); --down-soft:rgba(255,59,48,.08);
    --verify:#0071e3; --verify-soft:rgba(0,113,227,.08);
    --btn:#1d1d1f; --btn-ink:#ffffff;
    --shadow:0 1px 3px rgba(0,0,0,.04),0 4px 24px rgba(0,0,0,.06);
    --shadow-sm:0 1px 2px rgba(0,0,0,.04);
    --radius:14px; --radius-sm:10px;
    --mono:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  @media(prefers-color-scheme:dark){
    :root{
      --bg:#000000; --surface:#1c1c1e; --surface-2:#2c2c2e; --surface-3:#3a3a3c;
      --border:rgba(255,255,255,.1); --border-soft:rgba(255,255,255,.05);
      --text:#f5f5f7; --text-dim:#a1a1a6; --text-faint:#636366;
      --gold:#2997ff; --gold-ink:#64b5f6; --gold-soft:rgba(41,151,255,.12);
      --blue:#2997ff; --blue-soft:rgba(41,151,255,.1);
      --up:#30d158; --down:#ff453a; --up-line:#30d158; --down-line:#ff453a;
      --up-soft:rgba(48,209,88,.12); --down-soft:rgba(255,69,58,.1);
      --verify:#2997ff; --verify-soft:rgba(41,151,255,.1);
      --btn:#f5f5f7; --btn-ink:#1c1c1e;
      --shadow:0 1px 4px rgba(0,0,0,.3),0 8px 32px rgba(0,0,0,.3);
      --shadow-sm:0 1px 2px rgba(0,0,0,.2);
    }
  }
  :root[data-theme="light"]{
    --bg:#ffffff; --surface:#ffffff; --surface-2:#f5f5f7; --surface-3:#ebebed;
    --border:rgba(0,0,0,.08); --border-soft:rgba(0,0,0,.04);
    --text:#1d1d1f; --text-dim:#6e6e73; --text-faint:#aeaeb2;
    --gold:#0071e3; --gold-ink:#0066cc; --gold-soft:rgba(0,113,227,.08);
    --blue:#0071e3; --blue-soft:rgba(0,113,227,.08);
    --up:#34c759; --down:#ff3b30; --up-line:#34c759; --down-line:#ff3b30;
    --up-soft:rgba(52,199,89,.1); --down-soft:rgba(255,59,48,.08);
    --verify:#0071e3; --verify-soft:rgba(0,113,227,.08);
    --btn:#1d1d1f; --btn-ink:#ffffff;
    --shadow:0 1px 3px rgba(0,0,0,.04),0 4px 24px rgba(0,0,0,.06);
    --shadow-sm:0 1px 2px rgba(0,0,0,.04);
  }
  :root[data-theme="dark"]{
    --bg:#000000; --surface:#1c1c1e; --surface-2:#2c2c2e; --surface-3:#3a3a3c;
    --border:rgba(255,255,255,.1); --border-soft:rgba(255,255,255,.05);
    --text:#f5f5f7; --text-dim:#a1a1a6; --text-faint:#636366;
    --gold:#2997ff; --gold-ink:#64b5f6; --gold-soft:rgba(41,151,255,.12);
    --blue:#2997ff; --blue-soft:rgba(41,151,255,.1);
    --up:#30d158; --down:#ff453a; --up-line:#30d158; --down-line:#ff453a;
    --up-soft:rgba(48,209,88,.12); --down-soft:rgba(255,69,58,.1);
    --verify:#2997ff; --verify-soft:rgba(41,151,255,.1);
    --btn:#f5f5f7; --btn-ink:#1c1c1e;
    --shadow:0 1px 4px rgba(0,0,0,.3),0 8px 32px rgba(0,0,0,.3);
    --shadow-sm:0 1px 2px rgba(0,0,0,.2);
  }

  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.55;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:15px;letter-spacing:-.011em}
  h1,h2,h3{letter-spacing:-.025em;line-height:1.2}
  .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
  button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
  a{color:inherit;text-decoration:none;cursor:pointer}
  input,textarea{font-family:inherit;font-size:inherit}
  ::selection{background:var(--gold-soft)}
  :focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
  .num-up{color:var(--up);font-family:var(--mono);font-variant-numeric:tabular-nums}
  .num-down{color:var(--down);font-family:var(--mono);font-variant-numeric:tabular-nums}
  /* Quant 0–100 position meter (ticker Quant tab + screener): neutral accent so a score
     is never confused with an up/down price move */
  .qmeter{display:inline-block;position:relative;width:46px;height:4px;border-radius:2px;background:var(--border);vertical-align:middle;flex:none;overflow:hidden}
  .qmeter i{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--blue)}
  .qmeter-na{background:repeating-linear-gradient(90deg,var(--border) 0 3px,transparent 3px 6px)}

  /* ---------- Ticker strip ---------- */
  .strip{display:flex;align-items:stretch;background:var(--surface);border-bottom:1px solid var(--border);
    overflow:hidden;position:sticky;top:0;z-index:45}
  .strip-fixed{display:flex;align-items:stretch;flex:none}
  .strip-marquee{flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .strip-marquee::-webkit-scrollbar{display:none}
  .strip-track{display:flex;align-items:stretch;width:max-content;position:relative}
  .strip::-webkit-scrollbar{display:none}
  .strip{contain:layout style;will-change:transform}
  .strip .pill{display:flex;align-items:center;padding:0 18px;font-weight:600;font-size:12.5px;border-right:1px solid var(--border);flex:none;letter-spacing:0}
  .strip .lbl{display:flex;align-items:center;padding:0 16px;font-size:11.5px;color:var(--text-faint);font-weight:500;flex:none;gap:6px}
  .strip-item{display:flex;align-items:center;gap:8px;padding:11px 16px;white-space:nowrap;font-size:12.5px;flex:none;cursor:pointer;transition:background .15s}
  .strip-item:hover{background:var(--surface-2)}
  .strip-item .sym{font-family:var(--mono);font-weight:600;display:flex;align-items:center;gap:5px}
  .strip-item .chg{font-family:var(--mono);font-size:11.5px;font-weight:600}
  .strip-ctl{display:flex;align-items:center;gap:2px;padding:0 10px;margin-left:auto;position:sticky;right:0;background:var(--surface);border-left:1px solid var(--border)}
  .strip-ctl button{width:32px;height:32px;border-radius:8px;color:var(--text-faint);display:grid;place-items:center;transition:all .15s}
  .strip-ctl button:hover{background:var(--surface-2);color:var(--text-dim)}
  .mkt-clock{display:flex;align-items:center;gap:6px;padding:0 8px;font-size:12px;flex:none;white-space:nowrap}
  .mkt-time{font-variant-numeric:tabular-nums;font-weight:600;font-size:12.5px;letter-spacing:-.01em;color:var(--text)}
  /* per-market open/closed signal */
  .mkt-dot{width:7px;height:7px;border-radius:50%;flex:none;display:inline-block;position:relative}
  .mkt-dot.open{background:#34c759}
  .mkt-dot.open::after{content:'';position:absolute;inset:0;border-radius:50%;background:#34c759;
    animation:dotpulse 1.9s ease-out infinite}
  @keyframes dotpulse{0%{transform:scale(1);opacity:.55}70%{transform:scale(2.6);opacity:0}100%{opacity:0}}
  .mkt-dot.break{background:#ff9500}
  .mkt-dot.closed{background:#c7c7cc}
  @media(prefers-reduced-motion:reduce){.mkt-dot.open::after{animation:none}}
  /* tab strip scrolls without a bar sitting on top of the labels */
  .rc-tabscroll{margin:0 12px 4px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;text-align:center}
  .rc-tabscroll::-webkit-scrollbar{display:none}
  .mkt-badge{font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:6px;letter-spacing:.01em}
  .mkt-more-wrap{display:flex;justify-content:center;margin:14px 0 0}
  .mkt-more{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:var(--surface);color:var(--text-dim);
    padding:9px 18px;border-radius:999px;font-size:12.5px;font-weight:600;cursor:pointer;transition:color .16s,border-color .16s,box-shadow .16s,transform .16s}
  .mkt-more:hover{color:var(--text);border-color:var(--text-faint);box-shadow:0 2px 10px rgba(0,0,0,.07);transform:translateY(-1px)}
  .mkt-more svg{width:13px;height:13px;transition:transform .2s}
  .mkt-more.open svg{transform:rotate(180deg)}

  /* ---------- Smart Screen (multi-factor, computed from live market data) ---------- */
  .smart-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:26px 2px 10px}
  .smart-title{display:flex;align-items:baseline;gap:9px}
  .smart-title h2{font-size:15px;font-weight:700;letter-spacing:-.01em;margin:0}
  .smart-title .cnt{font-size:12px;color:var(--text-faint);font-weight:500}
  .smart-desc{font-size:12.5px;color:var(--text-dim);line-height:1.5;margin:0 0 12px;padding:0 2px}
  .smart-note{font-size:11px;color:var(--text-faint);margin-top:10px;padding-top:10px;border-top:1px solid var(--border-soft);line-height:1.5}
  .smart-score{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:22px;padding:0 7px;border-radius:6px;
    font-family:var(--mono);font-size:12px;font-weight:700;background:var(--gold-soft);color:var(--gold-ink)}
  .why{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
  .why span{font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:5px;background:var(--surface-2);color:var(--text-dim);white-space:nowrap}
  .why span.up{background:rgba(52,199,89,.12);color:var(--up)}
  .why span.down{background:rgba(255,59,48,.12);color:var(--down)}
  .why span.vol{background:rgba(139,92,246,.12);color:#8b5cf6}
  .smart-empty{text-align:center;padding:26px 12px;color:var(--text-faint);font-size:13px}

  /* ---------- Sortable data table + 52-week range position ---------- */
  .mkt-table th.sortable{cursor:pointer;user-select:none;white-space:nowrap;transition:color .14s}
  .mkt-table th.sortable:hover{color:var(--text-dim)}
  .mkt-table th.sortable.on{color:var(--text)}
  .mkt-table th.sortable svg{width:9px;height:9px;margin-left:3px;vertical-align:middle;opacity:0;transition:opacity .14s,transform .18s}
  .mkt-table th.sortable.on svg{opacity:1}
  .mkt-table th.sortable.on.asc svg{transform:rotate(180deg)}
  .rngbar{display:inline-block;position:relative;width:56px;height:5px;border-radius:3px;background:var(--surface-3);vertical-align:middle}
  .rngbar i{position:absolute;top:-2.5px;width:3px;height:10px;border-radius:2px;background:var(--text);transform:translateX(-50%)}
  .cell-sub{color:var(--text-faint);font-size:11px;margin-top:2px}
  @media(max-width:900px){.mkt-table .col-opt{display:none}}
  .mkt-open{background:rgba(52,199,89,.15);color:#34c759}
  .mkt-break{background:rgba(255,149,0,.15);color:#ff9500}
  .mkt-closed{background:rgba(142,142,147,.15);color:#8e8e93}
  .tk-dot{width:14px;height:14px;border-radius:4px;display:inline-block;flex:none}
  .strip-logo{width:16px;height:16px;border-radius:4px;object-fit:contain;flex:none;background:var(--surface-2)}

  /* ---------- Top bar ---------- */
  .topbar{position:sticky;top:41px;z-index:40;display:flex;align-items:center;gap:14px;padding:calc(9px + env(safe-area-inset-top,0px)) 20px 9px;
    background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--border)}
  .topbar-brand{flex-shrink:0;display:flex;align-items:center;border-radius:8px;transition:opacity .15s}
  .topbar-brand:hover{opacity:.75}
  .search{flex:1;min-width:160px;max-width:420px;position:relative}
  .search input{width:100%;background:var(--surface-2);border:1px solid transparent;border-radius:10px;
    padding:9px 52px 9px 40px;color:var(--text);outline:none;font-size:14px;transition:all .2s}
  .search input:focus{background:var(--surface);border-color:var(--border);box-shadow:0 0 0 3px var(--gold-soft)}
  .search input::placeholder{color:var(--text-faint)}
  .search .si{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--text-faint);pointer-events:none;transition:color .2s}
  .search:focus-within .si{color:var(--gold)}
  .search-kbd{position:absolute;right:9px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:10.5px;font-weight:600;
    color:var(--text-faint);background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:2.5px 6px;pointer-events:none;transition:opacity .15s}
  .search:focus-within .search-kbd{opacity:0}
  .search .ac{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1px solid var(--border);
    border-radius:12px;box-shadow:var(--shadow);overflow:hidden;z-index:60}
  .top-nav{margin-left:auto;display:flex;align-items:center;gap:2px}
  .top-nav a{position:relative;display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:9px;font-weight:500;font-size:13.5px;
    color:var(--text-dim);transition:color .15s,background .15s;white-space:nowrap;cursor:pointer}
  .top-nav a svg{width:17px;height:17px;flex:none;opacity:.85}
  .top-nav a:hover{background:var(--surface-2);color:var(--text)}
  .top-nav a.on{color:var(--gold);font-weight:600}
  .top-nav a.on svg{opacity:1}
  .top-nav a.on::after{content:'';position:absolute;left:11px;right:11px;bottom:-10px;height:2px;background:var(--gold);border-radius:2px 2px 0 0}
  .top-nav .live-ping{width:6px;height:6px;border-radius:50%;background:var(--down);flex:none;animation:livepulse 1.8s ease-in-out infinite}
  @keyframes livepulse{0%,100%{opacity:1}50%{opacity:.25}}
  .nav-div{width:1px;height:22px;background:var(--border);margin:0 7px;flex:none}
  .icon-btn{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--text-dim);transition:all .15s}
  .icon-btn:hover{background:var(--surface-2);color:var(--text)}
  .badge-new{font-size:10px;font-weight:700;letter-spacing:.02em;color:#fff;background:var(--gold);padding:2px 7px;border-radius:5px;margin-right:6px}
  #topnav-auth{display:flex;gap:5px;flex-shrink:0;white-space:nowrap;align-items:center}
  .ava-btn{display:grid;place-items:center;padding:2px;border-radius:50%;border:2px solid transparent;transition:border-color .15s,transform .12s;cursor:pointer}
  .ava-btn:hover{border-color:var(--border)}
  .ava-btn.open{border-color:var(--gold)}
  .ava-btn:active{transform:scale(.94)}
  .menu-head{padding:12px 14px 10px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border-soft)}
  .menu-head .mh-name{font-weight:650;font-size:13.5px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .menu-head .mh-handle{font-size:11.5px;color:var(--text-faint);font-family:var(--mono)}

  /* ---------- Layout ---------- */
  .layout{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);
    gap:28px;padding:24px 32px;align-items:start}

  /* ---------- Sidebar ---------- */
  .sidebar{display:flex;flex-direction:column;gap:16px}
  .brand{display:flex;align-items:center;gap:9px;padding:4px 8px 8px}
  .brand .lens{width:26px;height:26px;flex:none}
  .brand .wm{font-weight:700;font-size:22px;letter-spacing:-.03em}
  .brand .wm b{color:var(--gold)}
  .brand .wm-img{height:28px;width:auto;display:block}
  .brand .chev{margin-left:auto;color:var(--text-faint)}
  .side-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
  .side-nav{padding:6px}
  .side-nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--text);font-weight:500;font-size:14.5px;transition:background .15s}
  .side-nav a:hover{background:var(--surface-2)}
  .side-nav a.active{background:var(--gold-soft);color:var(--gold-ink)}
  .side-nav a.active svg{stroke:var(--gold-ink)}
  .side-nav a svg{width:20px;height:20px;flex:none;stroke-width:1.8}
  .side-nav a .chev{margin-left:auto;color:var(--text-faint)}
  .prof-mini{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;transition:background .15s}
  .prof-mini:hover{background:var(--surface-2)}
  .btn-post{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;background:var(--gold);color:#fff;
    padding:12px;border-radius:12px;font-weight:600;font-size:15px;transition:all .2s;letter-spacing:-.01em}
  .btn-post:hover{filter:brightness(1.08)}

  .wl-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px}
  .wl-head b{font-size:13.5px;font-weight:600}
  .wl-head .f{font-size:12px;color:var(--text-faint);display:flex;gap:12px}
  .wl-row{display:flex;align-items:center;gap:10px;padding:9px 16px;cursor:pointer;border-top:1px solid var(--border-soft);transition:background .15s}
  .wl-row:hover{background:var(--surface-2)}
  .wl-native{color:inherit;text-decoration:none;display:flex;align-items:center;gap:10px;flex:1;min-width:0}
  .wl-native:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
  button.wl-result{width:100%;text-align:left;color:inherit;background:none;font:inherit;border:0;border-bottom:1px solid var(--border-soft)}
  button.wl-result:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
  button.wl-result:disabled{opacity:.55;cursor:default}
  .wl-feedback{font-size:12px;color:var(--text-muted);min-height:18px;margin:8px 0}
  .wl-page-head.page-head p{display:block;font-size:12px}
  #wl-page-body .wl-remove{flex:none;width:44px;min-height:44px;padding:0;color:var(--text-faint)}
  #wl-page-body .wl-remove:hover{color:var(--text)}
  #wl-page-body .wl-remove span{font-size:20px;line-height:1}
  #wl-page-body .wl-alert{flex:none;width:44px;min-height:44px;padding:0;color:var(--text-faint)}
  #wl-page-body .wl-alert:hover:not(:disabled){color:var(--text)}
  #wl-page-body .wl-alert:disabled{opacity:.35;cursor:not-allowed}
  #wl-page-body .wl-alert.on,#wl-page-body .wl-alert.on:hover:not(:disabled){color:var(--gold-ink)}
  #wl-page-body .wl-row{gap:6px}
  #wl-page-body .ch.wl-unpriced{color:var(--text-faint);font-family:inherit;font-size:11px}
  .wl-search-panel .wl-result .l{flex:1;display:block}
  .wl-search-panel .wl-result .sym,.wl-search-panel .wl-result .nm{display:block;max-width:none}
  .wl-search-panel .wl-result{gap:12px;min-height:52px}
  .wl-page-head button:focus-visible,#wl-page-body button:focus-visible,.wl-search-full:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  .wl-row .l{flex:1;min-width:0}
  .wl-row .sym{font-family:var(--mono);font-weight:600;font-size:13px}
  .wl-row .nm{font-size:11px;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .wl-row .r{text-align:right}
  .wl-row .px{font-family:var(--mono);font-weight:600;font-size:13px}
  .wl-row .ch{font-family:var(--mono);font-size:11px;font-weight:600}
  .wl-grip{color:var(--text-faint);font-size:11px;cursor:grab;opacity:0;transition:opacity .15s;user-select:none;flex:none;padding:0 2px;letter-spacing:-1px}
  .wl-row:hover .wl-grip{opacity:.6}
  /* Portfolio polish: hierarchy + light motion (entrance on first load, new-row flash, edit slide, delete fade) */
  .pf-row .pf-v{font-weight:500}
  .pf-row .pf-strong .pf-v,.pf-row .pf-plc .pf-v{font-weight:700}
  .pf-chip{display:inline-block;padding:1px 7px;border-radius:6px;font-size:11.5px;font-weight:600;background:var(--surface-2);font-variant-numeric:tabular-nums;white-space:nowrap}
  .pf-chip-up{background:var(--up-soft)}.pf-chip-down{background:var(--down-soft)}
  .pf-pl>span:first-child{display:block}
  .pf-pl .pf-chip{margin-top:4px}
  .pf-summary .stat{transition:background .2s}
  .pf-tone-up{background:var(--up-soft)!important}.pf-tone-down{background:var(--down-soft)!important}
  .pf-row .wl-logo,.pf-row .tk-dot-lg{width:36px;height:36px}
  .pf-row{transition:background .18s,opacity .25s}
  .pf-act{transition:color .15s,opacity .15s}
  @keyframes pfUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  @keyframes pfFlash{from{background:var(--gold-soft)}to{background:transparent}}
  @keyframes pfOpen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  .pf-in{animation:pfUp .38s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*40ms + 60ms)}
  .pf-summary.pf-in{animation-delay:0ms}
  .pf-fresh{animation:pfFlash 1.6s ease-out}
  .pf-form-inline{animation:pfOpen .2s ease-out}
  .pf-leaving{opacity:.35;pointer-events:none}
  @media(prefers-reduced-motion:reduce){.pf-in,.pf-fresh,.pf-form-inline{animation:none}.pf-row,.pf-act{transition:none}}
  /* Portfolio holdings: one column per figure. Narrow container = card with labelled columns;
     ≥720px container = table with a header row. */
  #pf-body{container-type:inline-size;overflow:hidden}
  .pf-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px 12px;padding:14px 16px;border-top:1px solid var(--border-soft);cursor:pointer;transition:background .15s}
  .pf-row:first-child,.pf-head+.pf-row{border-top:0}
  .pf-row:hover{background:var(--surface-2)}
  .pf-head{display:none}
  /* compact (phone) row: [logo $SYM / lot · avg] .......... [Nilai / Untung/Rugi]; tap = details + actions */
  .pf-row{grid-template-columns:minmax(0,1fr) auto;gap:1px 12px;padding:10px 14px;align-items:center}
  .pf-row .wl-logo,.pf-row .tk-dot-lg{width:32px;height:32px}
  .pf-id{grid-column:1;grid-row:1/3;display:flex;align-items:center;gap:10px;min-width:0}
  .pf-meta-m{font-size:11.5px;color:var(--text-faint);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pf-row .pf-num{display:none}
  .pf-row .pf-strong,.pf-row .pf-plc{display:block;grid-column:2;text-align:right}
  .pf-row .pf-strong{grid-row:1}.pf-row .pf-plc{grid-row:2}
  .pf-row .pf-strong .pf-k,.pf-row .pf-plc .pf-k{display:none}
  .pf-row .pf-strong .pf-v{font-size:13.5px}
  /* compact: value + % only; the rupiah P/L shows when the row is opened */
  .pf-row .pf-plc .pf-pl>span:first-child{display:none;font-size:12px;font-weight:600}
  .pf-row.pf-open .pf-plc .pf-pl>span:first-child{display:block}
  .pf-row .pf-plc .pf-chip{background:none;padding:0;font-size:12px}
  .pf-row.pf-open .pf-plc .pf-chip{margin-top:2px}
  .pf-row .pf-plc .pf-v,.pf-row .pf-strong .pf-v{overflow:visible}
  .pf-row .pf-acts{display:none}
  .pf-row.pf-open{background:var(--surface-2)}
  .pf-row.pf-open .pf-num:nth-child(4),.pf-row.pf-open .pf-num:nth-child(5){display:block;grid-row:3;margin-top:10px}
  .pf-row.pf-open .pf-num:nth-child(4){grid-column:1}.pf-row.pf-open .pf-num:nth-child(5){grid-column:2;text-align:right}
  .pf-row.pf-open .pf-acts{display:flex;grid-column:1/-1;grid-row:4;margin-top:10px;gap:18px;animation:pfOpen .18s ease-out}
  .pf-c{min-width:0}
  /* Analysis: one quiet panel under the holdings (supporting info, lighter than the holdings card) */
  .pf-analysis{margin-top:18px;padding:16px 18px;border:1px solid var(--border-soft);border-radius:12px;background:var(--surface)}
  .pf-an-h{font-size:13px;font-weight:600;color:var(--text);cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px;border-radius:6px}
  .pf-an-h::-webkit-details-marker{display:none}
  .pf-an-h::after{content:'';width:7px;height:7px;border-right:1.5px solid var(--text-faint);border-bottom:1.5px solid var(--text-faint);transform:rotate(45deg);margin-right:4px;transition:transform .15s}
  .pf-analysis[open]>.pf-an-h{margin-bottom:14px}
  .pf-an-peek{margin-left:auto;font-size:12px;font-weight:500;color:var(--text-faint);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .pf-analysis[open] .pf-an-peek{display:none}
  .pf-analysis[open]>.pf-an-h::after{transform:rotate(-135deg)}
  .pf-an-h:focus-visible{outline:2px solid var(--btn);outline-offset:3px}
  @media(max-width:1079px){.pf-an-h{min-height:28px}}
  @media(prefers-reduced-motion:reduce){.pf-an-h::after{transition:none}}
  .pf-an-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px 40px}
  .pf-insights{display:flex;flex-direction:column;gap:16px;min-width:0}
  .pf-sectors{min-width:0}
  .pf-ins-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:5px 0;border-top:1px solid var(--border-soft);font-size:12.5px}
  .pf-ins-grp .pf-sec-h+.pf-ins-row{border-top:0}
  .pf-ins-k{color:var(--text-dim);white-space:nowrap}
  .pf-ins-v{font-weight:600;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .pf-ins-v .pf-sym{font-family:var(--mono);font-weight:700;margin-right:4px}
  .pf-note{font-weight:500;letter-spacing:0;text-transform:none;color:var(--text-faint)}
  .pf-sec-h,.pf-analysis h2.pf-sec-h{font-size:11px;line-height:1.4;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint);margin:0 0 8px}
  .pf-sec-list{display:flex;flex-direction:column;gap:10px}
  .pf-sec-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
  .pf-sec-name{font-size:12.5px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pf-sec-pct{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
  .pf-sec-bar{height:3px;border-radius:2px;background:var(--surface-3);overflow:hidden;margin:4px 0 3px}
  .pf-sec-bar i{display:block;height:100%;background:var(--gold);opacity:.55}
  .pf-sec-meta{font-size:11.5px;color:var(--text-faint);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pf-l1{display:flex;align-items:center;gap:8px;min-width:0}
  .pf-alloc{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;color:var(--text-faint);font-variant-numeric:tabular-nums;white-space:nowrap}
  .pf-alloc-bar{display:inline-block;width:32px;height:4px;border-radius:2px;background:var(--surface-3);overflow:hidden}
  .pf-alloc-bar i{display:block;height:100%;background:var(--gold);opacity:.55}
  .pf-idt{min-width:0}
  .pf-id .sym{font-family:var(--mono);font-weight:700;font-size:14px}
  .pf-sym,#pf-body .pf-id .sym,#pf-results .wl-result .sym,#pf-form .sym{color:var(--gold-ink)}
  .pf-k{display:block;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint);margin-bottom:3px}
  .pf-v{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pf-na{color:var(--text-faint);font-weight:500}
  .pf-plc .pf-v{font-weight:700}
  .pf-logo-sm{width:20px!important;height:20px!important;font-size:8px!important;border-radius:50%}
  @container (min-width:860px){
    .pf-row .pf-num,.pf-row .pf-acts{display:block}
    .pf-row .pf-acts{display:flex}
    .pf-row .pf-k{display:none}
    .pf-act-view,.pf-meta-m{display:none!important}
    .pf-l1{flex-direction:column;align-items:flex-start;gap:3px}
    .pf-alloc-bar{width:24px}
    .pf-row.pf-open{background:none}
    .pf-row{grid-template-columns:minmax(0,1.1fr) minmax(0,.55fr) minmax(0,.85fr) minmax(0,.85fr) minmax(0,1.3fr) minmax(0,1.3fr) minmax(0,1.3fr) 84px;align-items:center;gap:0 12px;padding:12px 16px}
    .pf-v{white-space:nowrap;font-size:13px;overflow-wrap:normal}
    .pf-head{align-items:center}
    .pf-head{display:grid;cursor:default;padding:9px 16px;border-bottom:1px solid var(--border-soft)}
    .pf-head:hover{background:none}
    .pf-head .pf-c{font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .pf-id,.pf-row .pf-acts,.pf-row .pf-num,.pf-row .pf-strong,.pf-row .pf-plc,.pf-row.pf-open .pf-num:nth-child(4),.pf-row.pf-open .pf-num:nth-child(5){grid-column:auto;grid-row:auto;margin-top:0;text-align:right}
    .pf-id{text-align:left}
    .pf-row .pf-plc .pf-pl{display:block}
    .pf-row .pf-plc .pf-pl>span:first-child{display:block;font-size:13px;font-weight:700}
    .pf-row .pf-plc .pf-chip{margin-top:4px;padding:1px 7px;font-size:11.5px}
    .pf-row .pf-plc .pf-chip-up{background:var(--up-soft)}.pf-row .pf-plc .pf-chip-down{background:var(--down-soft)}.pf-row .pf-plc .pf-chip:not(.pf-chip-up):not(.pf-chip-down){background:var(--surface-2)}
    .pf-num{text-align:right}
    .pf-row .pf-k{display:none}
    .pf-acts{justify-content:flex-end;gap:12px}
    .pf-row .pf-act{opacity:.45}
    .pf-row:hover .pf-act,.pf-row:focus-within .pf-act{opacity:1}
    .pf-row .pf-num:not(.pf-strong):not(.pf-plc) .pf-v{color:var(--text-dim)}
  }
  .pf-row.pf-editing{background:var(--surface-2)}
  .pf-act{position:relative;background:none;border:none;padding:2px 0;font:inherit;font-size:12px;font-weight:500;color:var(--text-dim);cursor:pointer;border-radius:4px}
  .pf-act:hover{color:var(--text);text-decoration:underline;text-underline-offset:2px}
  .pf-act-del:hover{color:var(--down)}
  .pf-act:focus-visible{outline:2px solid var(--btn);outline-offset:2px}
  #pf-results .wl-result .nm{max-width:none}
  .pf-form-inline{padding:12px 16px 14px;background:var(--surface-2);border-top:1px solid var(--border-soft)}
  .pf-form-inline .wl-search-full{background:var(--surface)}
  .pf-summary .stat-grid{grid-template-columns:repeat(3,1fr)}
  .pf-summary .stat{min-width:0}
  .pf-summary .v{overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
  .pf-stat-pl .v{font-size:17px}
  .pf-stat-pl .v{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px}
  .pf-amt{white-space:nowrap}
  .pf-pct{font-size:13px;white-space:nowrap}
  @media(max-width:560px){.pf-summary .stat-grid{grid-template-columns:1fr 1fr}.pf-stat-pl{grid-column:1/-1}}
  @media(max-width:1079px){.pf-act::after{content:'';position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}}
  .wl-del{background:none;border:none;color:var(--text-faint);font-size:12px;cursor:pointer;opacity:0;transition:opacity .15s;padding:2px 4px;border-radius:4px;flex:none}
  .wl-row:first-child{border-top:none}
  .wl-row .wl-logo,.wl-row .tk-dot-lg{width:30px;height:30px;border-radius:8px;flex:none}
  .wl-spark-sm{width:64px;height:26px;flex:none}
  @media(max-width:430px){.wl-spark-sm{display:none}}
  .wl-row:hover .wl-del{opacity:.6}
  .wl-del:hover{opacity:1!important;color:var(--down)}
  .wl-dragging{opacity:.4}
  .wl-over{border-top:2px solid var(--btn)!important}
  .wl-add-btn{background:none;border:1px solid var(--border);color:var(--text-dim);font-size:16px;width:26px;height:26px;border-radius:8px;cursor:pointer;display:grid;place-items:center;transition:all .15s;font-weight:500;line-height:1}
  .wl-add-btn:hover{background:var(--surface-2);color:var(--text)}
  .wl-add-box{padding:0 12px 8px}
  .wl-add-box input{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--text);font-size:12.5px;outline:none}
  .wl-add-box input:focus{border-color:var(--btn)}
  .wl-result{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;cursor:pointer;border-radius:6px;transition:background .12s}
  .wl-result:hover{background:var(--surface-2)}
  .wl-result .l{display:flex;align-items:center;gap:8px;min-width:0}
  .wl-result .sym{font-family:var(--mono);font-weight:600;font-size:12.5px}
  .wl-result .nm{font-size:11px;color:var(--text-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px}
  .wl-search-full{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);color:var(--text);font-size:13.5px;outline:none;margin-bottom:8px}
  .wl-search-full:focus{border-color:var(--btn)}
  .wl-grip-cell{color:var(--text-faint);cursor:grab;font-size:13px;letter-spacing:-1px;opacity:.3;user-select:none;width:20px}
  tr:hover .wl-grip-cell{opacity:.7}
  tr.wl-dragging{opacity:.4}
  tr.wl-over{outline:2px solid var(--btn);outline-offset:-2px}
  .wl-detail-table{width:100%;border-collapse:collapse;font-size:12.5px;white-space:nowrap}
  .wl-detail-table th{padding:10px 12px;font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-faint);border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);z-index:1}
  .wl-detail-table td{padding:10px 12px;border-bottom:1px solid var(--border-soft);vertical-align:middle}
  .wl-detail-table tr:hover{background:var(--surface-2)}
  .wl-detail-table .sticky-col{position:sticky;left:0;background:var(--surface);z-index:1;min-width:180px}
  .wl-detail-table tr:hover .sticky-col{background:var(--surface-2)}
  .tk-dot-lg{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex:none}
  .wl-logo{width:32px;height:32px;border-radius:50%;flex:none;object-fit:cover}
  .wl-spark-wrap{width:100px;height:32px;display:inline-block;position:relative;overflow:hidden}
  .wl-spark-wrap a[id*="tv-attr"]{display:none!important}

  .socials{display:flex;gap:4px;padding:2px 6px}
  .socials a{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--text-faint);transition:all .15s}
  .socials a:hover{background:var(--surface-2);color:var(--text-dim)}
  .footlinks{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px 10px;padding:6px 8px;font-size:12px}
  .footlinks a{color:var(--text-faint);padding:2px 0;transition:color .15s}
  .footlinks a:hover{color:var(--text-dim)}
  .appbadges{display:flex;gap:8px;padding:6px 8px;flex-wrap:wrap}
  .appbadge{display:flex;align-items:center;gap:8px;background:var(--btn);color:var(--btn-ink);border-radius:10px;padding:7px 11px;font-size:11px;font-weight:500}
  .appbadge b{font-size:12.5px;font-weight:700;display:block;line-height:1.1}
  .disc-side{font-size:10.5px;color:var(--text-faint);line-height:1.55;padding:8px}

  /* ---------- Cards / panels ---------- */
  .panel{background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:none;contain:content}
  .panel-head{display:flex;align-items:center;gap:10px;padding:18px 20px 0}
  .panel-head h2{font-size:17px;font-weight:600;margin:0;letter-spacing:-.02em}
  .panel-head .rgt{margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--text-faint);min-width:0}
  #livenote{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  @media(max-width:700px){#livenote{display:none}}
  .tabs{display:flex;gap:24px;padding:14px 20px 0;border-bottom:1px solid var(--border-soft)}
  .tabs button{padding:8px 0;font-weight:500;font-size:14px;color:var(--text-faint);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s}
  .tabs button.on{color:var(--text);border-bottom-color:var(--gold);font-weight:600}
  .pills{display:flex;gap:8px;padding:14px 20px 4px;align-items:center}
  .pill-btn{border:1px solid var(--border);border-radius:8px;padding:7px 15px;font-size:13px;font-weight:500;color:var(--text-dim);transition:all .15s}
  .pill-link{display:inline-flex;align-items:center;gap:5px;text-decoration:none;white-space:nowrap}
  .pill-link span{font-size:11px;opacity:.7}
  .sect-badge.off .live-dot{background:var(--text-faint);animation:none;box-shadow:none}
  .pill-btn:hover{background:var(--surface-2)}
  .pill-btn.on{background:var(--text);color:var(--bg);border-color:var(--text)}
  .daterange{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:5px 12px;transition:border-color .15s}
  .daterange:focus-within{border-color:var(--text-dim)}
  .daterange input[type=date]{border:0;background:transparent;color:var(--text);font-size:13px;font-family:inherit;color-scheme:light dark;padding:1px;cursor:pointer}
  .daterange input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.6}
  .daterange .dr-sep{color:var(--text-faint);font-size:12px}
  /* ---- Emiten (ticker) page ---- */
  /* Phase 10B: scanner context — navigation state carried from the Chart
     Pattern Scanner. Deliberately quieter than the hero so it reads as
     provenance, not as a price signal. */
  .tk-scanctx{margin-top:14px;border-left:3px solid var(--blue)}
  .tk-scanctx-hd{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .tk-scanctx-eyebrow{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint)}
  .tk-scanctx-x{background:none;border:0;cursor:pointer;color:var(--text-faint);font-size:17px;line-height:1;padding:0 2px;border-radius:4px}
  .tk-scanctx-x:hover{color:var(--text-dim)}
  .tk-scanctx-x:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  .tk-scanctx-body{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:5px;flex-wrap:wrap}
  .tk-scanctx-main{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;min-width:0}
  .tk-scanctx-pat{font-size:15px;font-weight:650;letter-spacing:-.01em}
  .tk-scanctx-pat.up{color:var(--up)}
  .tk-scanctx-pat.down{color:var(--down)}
  .tk-scanctx-sep{color:var(--text-faint);font-size:12px}
  .tk-scanctx-tf,.tk-scanctx-status{font-size:12.5px;color:var(--text-dim)}
  .tk-scanctx-score{display:flex;align-items:baseline;gap:5px;flex-shrink:0}
  .tk-scanctx-score .k{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint)}
  .tk-scanctx-score .v{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
  .tk-scanctx-cta{display:inline-block;margin-top:9px;font-size:12.5px;font-weight:600;color:var(--blue);text-decoration:none}
  .tk-scanctx-cta:hover{text-decoration:underline;text-underline-offset:2px}
  .tk-scanctx-cta:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
  .tk-hero{display:flex;flex-direction:column;gap:14px}
  .tk-id{display:flex;align-items:center;gap:14px}
  .tk-id-txt{flex:1;min-width:0}
  .tk-id-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .tk-id-h h1{margin:0;font-size:22px}
  .tk-id-name{color:var(--text-dim);font-size:13px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tk-quote{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
  .tk-price{font-size:32px;font-weight:800;letter-spacing:-.5px;font-family:var(--mono);line-height:1}
  .tk-chg{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px}
  .tk-chg .pill{padding:3px 10px;border-radius:999px;font-size:13px}
  .tk-chg .pill.up{background:rgba(48,209,88,.15);color:var(--up)}
  .tk-chg .pill.down{background:rgba(255,69,58,.15);color:var(--down)}
  .tk-ohl{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;border-top:1px solid var(--border);padding-top:14px}
  .tk-ohl .c{padding:0}
  .tk-ohl .k{font-size:11px;color:var(--text-faint)}
  .tk-ohl .v{font-size:14px;font-weight:600;font-family:var(--mono);margin-top:3px}
  .tk-chartctl{display:flex;align-items:center;margin-bottom:2px}
  #tkcanvas{height:300px;position:relative}
  /* OHLCV crosshair legend, laid over the chart's top margin (no extra height) */
  .tk-legend{position:absolute;left:6px;top:4px;right:64px;z-index:2;display:flex;flex-wrap:wrap;gap:0 8px;pointer-events:none;
    font-size:11px;line-height:15px;color:var(--text-faint);font-variant-numeric:tabular-nums;white-space:nowrap}
  .tk-legend b{font-weight:600;color:var(--text-dim)}
  .tk-pills{display:flex;gap:6px;overflow-x:auto;flex:1;scrollbar-width:none;padding-bottom:2px}
  .tk-pills::-webkit-scrollbar{display:none}
  .tk-pills .pill-btn{flex:none}
  .tk-chartsub{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
  .tk-actions{display:flex;gap:10px;margin-top:14px}
  .tk-actions .btn{flex:1;white-space:nowrap}
  .tk-stats{display:flex;flex-direction:column;gap:22px}
  .tk-rb-top{display:flex;justify-content:space-between;font-size:11px;color:var(--text-faint);margin-bottom:8px}
  .tk-rb-track{position:relative;height:4px;border-radius:999px;background:var(--surface-3)}
  .tk-rb-dot{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;background:var(--text);border:2px solid var(--surface);box-shadow:0 0 0 1px var(--border);transform:translate(-50%,-50%)}
  .tk-rb-dot.up{background:var(--up)}
  .tk-rb-dot.down{background:var(--down)}
  .tk-rb-ends{display:flex;justify-content:space-between;font-size:12.5px;font-weight:600;font-family:var(--mono);margin-top:7px}
  .tk-statgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 24px;border-top:1px solid var(--border)}
  .tk-statgrid .cell{display:flex;justify-content:space-between;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--border)}
  .tk-statgrid .k{font-size:12.5px;color:var(--text-dim)}
  .tk-statgrid .v{font-size:13.5px;font-weight:600;font-family:var(--mono)}
  .tk-perf{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;text-align:center}
  .tk-perf .p{padding:0}
  .tk-perf .k{font-size:10.5px;color:var(--text-faint);font-weight:500}
  .tk-perf .v{font-size:13px;font-weight:600;font-family:var(--mono);margin-top:4px}
  .tk-sub-title{font-size:11px;font-weight:600;color:var(--text-faint);margin-bottom:2px}
  .company-description{font-size:14px;line-height:1.7}
  .related-stocks-title{font-size:13px;font-weight:600;margin-bottom:10px}
  .related-stocks-list{display:flex;flex-wrap:wrap;gap:6px}
  .related-stock-link{display:inline-block;padding:6px 12px;font-size:13px;color:var(--text-color);text-decoration:none;background:var(--surface-2);border-radius:8px}
  /* Corporate Action tab */
  .ca-root{padding:0}
  .ca-filters{margin:8px 0 16px;display:flex;justify-content:flex-end;max-width:100%;box-sizing:border-box}
  .ca-filter-wrap{position:relative;display:inline-flex;align-items:center;max-width:100%}
  .ca-filter-wrap::after{content:'';position:absolute;right:11px;width:7px;height:7px;pointer-events:none;
    border-right:1.5px solid var(--text-dim);border-bottom:1.5px solid var(--text-dim);
    transform:translateY(-2px) rotate(45deg)}
  .ca-filter-select{appearance:none;-webkit-appearance:none;max-width:100%;
    padding:6px 30px 6px 11px;border:1px solid var(--border);border-radius:7px;
    background:var(--surface-2);color:var(--text);font-family:inherit;font-size:12.5px;
    font-weight:500;line-height:1.35;cursor:pointer;text-overflow:ellipsis}
  .ca-filter-select:hover{border-color:var(--text-faint)}
  .ca-filter-select:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
  .ca-section{margin-bottom:18px}
  .ca-section:last-child{margin-bottom:0}
  .ca-section-head{font-size:13px;font-weight:600;color:var(--text);padding:0 0 6px;display:flex;align-items:center;gap:8px}
  .ca-section-head::after{content:'';flex:1;height:1px;background:var(--border)}
  .ca-section-dot{width:6px;height:6px;border-radius:50%;flex:none;background:var(--gold)}
  .ca-item{padding:0 2px;border-bottom:1px solid var(--border-soft);transition:background .15s ease}
  .ca-item:hover{background:var(--surface)}
  .ca-item.ca-open{background:var(--surface)}
  .ca-item:last-child{border-bottom:none}
  .ca-toggle{appearance:none;width:100%;border:0;background:transparent;color:inherit;font:inherit;text-align:left;display:grid;grid-template-columns:122px minmax(0,1fr) minmax(130px,auto) 26px;align-items:center;gap:22px;padding:14px 0;cursor:pointer}
  .ca-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;border-radius:6px}
  .ca-upcoming .ca-item{border-left:2px solid var(--gold);padding-left:12px}
  .ca-type{flex:none;width:122px;text-align:center;font-size:12px;font-weight:600;padding:7px 10px;border-radius:7px;letter-spacing:.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ca-div{background:rgba(52,199,89,.07);color:#299847}
  .ca-rups{background:rgba(59,130,246,.07);color:#397bd4}
  .ca-split{background:rgba(175,82,222,.07);color:#8f4bb2}
  .ca-ri{background:rgba(255,159,10,.08);color:#c97800}
  .ca-war{background:rgba(255,69,58,.06);color:#c84a43}
  .ca-bonus{background:rgba(52,199,89,.07);color:#299847}
  .ca-rsplit{background:rgba(175,82,222,.07);color:#8f4bb2}
  .ca-other{background:var(--surface-2);color:var(--text-dim)}
  .ca-val{min-width:0;font-size:14px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ca-date{font-size:12.5px;color:var(--text-dim);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
  .ca-arrow{flex:none;width:26px;height:26px;display:flex;align-items:center;justify-content:center;color:var(--text-faint);transition:transform .18s ease,color .15s ease}
  .ca-arrow svg{width:15px;height:15px}
  .ca-toggle:hover .ca-arrow{color:var(--text)}
  .ca-item.ca-open .ca-arrow{transform:rotate(180deg);color:var(--text-dim)}
  .ca-detail{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .18s ease,opacity .14s ease}
  .ca-item.ca-open .ca-detail{grid-template-rows:1fr;opacity:1}
  .ca-detail-inner{min-height:0;overflow:hidden;padding:0 0 0 144px;transition:padding .18s ease}
  .ca-item.ca-open .ca-detail-inner{padding-bottom:15px}
  .ca-detail-group{border-top:1px solid var(--border-soft);padding-top:11px;margin-top:11px}
  .ca-detail-group:first-child{margin-top:0}
  .ca-detail-group h4{font-size:12px;line-height:1.4;font-weight:600;color:var(--text-dim);margin:0 0 9px}
  .ca-detail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px 28px}
  .ca-d-row{display:flex;flex-direction:column;gap:3px;min-width:0}
  .ca-d-full{grid-column:1/-1}
  .ca-d-k{font-size:11.5px;font-weight:400;color:var(--text-faint);white-space:normal}
  .ca-d-v{font-size:13px;font-weight:600;color:var(--text);text-align:left;font-variant-numeric:tabular-nums;min-width:0;overflow-wrap:anywhere}
  .ca-group-primary .ca-d-v{font-size:14px}
  .ca-group-secondary .ca-d-v{font-weight:500}
  .ca-note{font-size:11.5px;line-height:1.5;color:var(--text-faint);margin:8px 0 0}
  .ca-quality{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
  .ca-quality span{font-size:11.5px;line-height:1.4;color:var(--text-dim);background:var(--surface-2);border-radius:999px;padding:5px 9px}
  .ca-state{min-height:100px;display:flex;align-items:center;justify-content:center;gap:9px;text-align:center;padding:24px;color:var(--text-faint);font-size:13px}
  .ca-state-error{flex-direction:column}
  .ca-state-error button{border:1px solid var(--border);background:var(--surface-2);color:var(--text);border-radius:8px;padding:8px 13px;font:inherit;font-weight:600;cursor:pointer}
  .ca-state-error button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
  .ca-loader{width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--text-dim);border-radius:50%;animation:spin .8s linear infinite}
  @media(max-width:600px){
    .ca-filter-select{min-height:36px;font-size:13px;padding-top:7px;padding-bottom:7px}
    .ca-toggle{grid-template-columns:minmax(96px,auto) minmax(0,1fr) 26px;gap:8px 10px;padding:13px 0}
    .ca-type{grid-column:1;width:auto;min-width:96px}
    .ca-arrow{grid-column:3;grid-row:1;margin-left:auto}
    .ca-val{grid-column:1/-1;grid-row:2;font-size:15px}
    .ca-date{grid-column:1/-1;grid-row:3;text-align:left;font-size:12px}
    .ca-detail-inner{padding-left:0}
    .ca-item.ca-open .ca-detail-inner{padding-bottom:13px}
    .ca-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
    .ca-d-k{white-space:normal}
  }
  @media(prefers-reduced-motion:reduce){.ca-detail,.ca-detail-inner,.ca-arrow{transition:none}}
  .ks-group{margin-bottom:18px}
  .ks-group:last-child{margin-bottom:0}
  .ks-label{font-size:13.5px;font-weight:600;color:var(--text);padding:0 0 8px;display:flex;align-items:center;gap:8px}
  .ks-label::after{content:'';flex:1;height:0.5px;background:var(--border)}
  .ks-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
  .ks-row{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0}
  .ks-row .k{font-size:12.5px;color:var(--text-dim)}
  .ks-row .dot{flex:1;border-bottom:1px dotted var(--border);margin:0 8px;min-width:12px;position:relative;top:-3px}
  .ks-row .v{font-size:13px;font-weight:600;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
  .ks-row .v .u{font-weight:400;font-size:11px;color:var(--text-faint);margin-left:1px}
  @media(max-width:560px){.ks-cols{grid-template-columns:1fr}}
  @media(max-width:560px){
    .tk-price{font-size:27px}
    .tk-id-h h1{font-size:20px}
    .tk-ohl{grid-template-columns:repeat(2,1fr)}
    .tk-statgrid{grid-template-columns:1fr}
  }
  .seg{padding:6px 12px;border-radius:7px;font-size:13px;font-weight:500;color:var(--text-dim)}
  .seg.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}
  .demo-badge{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--down);background:var(--down-soft);padding:3px 9px;border-radius:5px}
  .bcode{font-family:var(--mono);font-weight:600;color:var(--gold-ink)}.bcode.foreign{color:#16a34a}.bcode.domestic{color:#ef4444}
  .broker-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
  .broker-filters .pill-btn{padding:5px 11px;font-size:12px}
  .broker-filters select,.broker-filters input[type=date]{font-size:13px;padding:7px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);outline:none;cursor:pointer;min-width:100px}
  .broker-action-bar{margin:12px 0 14px;padding:0 2px}
  .broker-action-bar .bar{height:10px;border-radius:5px;background:linear-gradient(to right,#dc2626,#ef4444,#f87171,#d4d4d8,#86efac,#22c55e,#16a34a);position:relative}
  .broker-action-bar .marker{position:absolute;top:-3px;width:3px;height:16px;background:var(--text);border-radius:2px;transform:translateX(-50%)}
  .broker-action-bar .labels{display:flex;justify-content:space-between;margin-top:4px;font-size:11px;font-weight:600;color:var(--text-dim)}
  .broker-tbl{width:100%;border-collapse:separate;border-spacing:0 3px;font-size:13px}
  .broker-tbl th{font-size:11px;font-weight:600;text-transform:uppercase;color:var(--text-faint);padding:4px 6px;white-space:nowrap}
  .broker-tbl td{padding:8px 6px;white-space:nowrap;font-family:var(--mono);font-size:12px}
  .broker-tbl .r{text-align:right}
  .broker-tbl .sep{width:1px;padding:0;background:var(--border)}
  .sentimeter{display:inline-flex;align-items:center;gap:3px}
  .sm-seg{width:14px;height:5px;border-radius:2px;display:inline-block}
  .sm-label{font-size:11px;font-weight:600;margin-left:6px}
  .sm-dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none;margin-right:2px}
  .news-header{display:flex;align-items:center;gap:12px;margin-bottom:10px}
  .news-header h1{font-size:22px;font-weight:700;margin:0;letter-spacing:-.03em;flex:none}
  .news-mobile-category{display:none}
  .news-header .news-sep{width:1px;height:18px;background:var(--border);flex:none}
  .news-header p{margin:0;color:var(--text-dim);font-size:13px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .news-search{position:relative;flex:0 0 220px}
  .news-search input{width:100%;background:var(--surface-2);border:1px solid transparent;border-radius:10px;padding:8px 12px 8px 34px;color:var(--text);outline:none;font-size:13px;transition:all .2s}
  .news-search input:focus{background:var(--surface);border-color:var(--border);box-shadow:0 0 0 3px var(--gold-soft)}
  .news-search .si2{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-faint)}
  @media(max-width:640px){.news-header{flex-wrap:wrap}.news-header .news-sep{display:none}.news-header p{white-space:normal;flex-basis:100%;order:3;font-size:12px}.news-search{flex:1 1 100%}}
  .chiprow{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;margin-bottom:4px}
  .chiprow::-webkit-scrollbar{display:none}
  .chiprow .pill-btn{white-space:nowrap;flex:none}
  .pill-tabs2{display:inline-flex;gap:2px;background:var(--surface-2);padding:3px;border-radius:8px}
  .pill-tabs2 button{padding:5px 13px;border-radius:6px;font-size:12.5px;font-weight:500;color:var(--text-dim);transition:all .15s}
  .pill-tabs2 button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}
  .pill-tabs2.stream-cats button{font-weight:600}
  .news-acts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
  .nact{border:1px solid var(--border);border-radius:8px;padding:6px 12px;font-size:12.5px;font-weight:500;color:var(--text-dim);transition:all .15s}
  .nact:hover{background:var(--surface-2);color:var(--text)}
  .nact.on{color:var(--gold-ink);border-color:var(--gold);background:var(--gold-soft)}
  .news-full{align-items:flex-start}
  .cal-row{display:flex;gap:14px;align-items:center;padding:14px 18px}
  .cal-type{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;border:1px solid var(--border);border-radius:6px;padding:4px 10px;flex:none;min-width:66px;text-align:center}
  .cat-dropdown-wrap{position:relative;z-index:50}
  .cat-dropdown{position:absolute;top:0;left:0;z-index:50;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:4px;min-width:150px}
  .cat-item{padding:8px 14px;font-size:13px;border-radius:7px;cursor:pointer;color:var(--text)}
  .cat-item:hover{background:var(--surface-2)}
  .cat-item.on{font-weight:700;color:var(--gold-ink)}
  .ca-filter{display:flex;gap:8px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
  .news-new-banner{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:9px 12px;border:1px solid var(--gold);border-radius:10px;background:var(--gold-soft);color:var(--text-color);font-size:13px;font-weight:500}
  .news-new-banner .news-new-count{flex:none;display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--gold);color:#fff;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
  .news-new-banner .news-new-go{margin-left:auto;background:transparent;color:var(--gold-ink);border-color:var(--gold);font-weight:600}
  .news-new-banner .news-new-go:hover{background:var(--gold);color:#fff}
  .news-new-banner:focus-within{outline:2px solid var(--gold);outline-offset:2px}
  /* /news: controls stay reachable, new stories stay visible, rows scan faster */
  .nw-bar{position:sticky;top:96px;z-index:6;margin:0 0 16px;padding:10px 0;background:var(--bg);border-bottom:1px solid var(--border-soft)}
  .nw-bar .chiprow{margin:0;padding:0;gap:6px}
  .nw-bar .chiprow .pill-btn{height:34px;padding:0 14px;font-size:13.5px;display:inline-flex;align-items:center;white-space:nowrap}
  @media(max-width:1399px){.nw-bar .chiprow{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);padding-right:28px}}
  /* header right cluster: Latest/Relevant + search, one height, one right edge */
  .nw-head-r{display:flex;align-items:center;gap:10px;flex:none}
  .nw-head-r .nw-sort{height:38px;align-items:center;margin:0}
  .nw-head-r .nw-sort button{height:32px;display:inline-flex;align-items:center;font-size:13px}
  .nw-head-r .news-search{flex:0 0 300px}
  .nw-head-r .news-search input{height:38px}
  .nw-upd{margin-left:6px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--text-faint)}
  .nw-upd:not(:empty)::before{content:'·';margin-right:6px}
  .nw-note .nw-upd{margin-left:0}.nw-note .nw-upd::before{content:none}
  /* pinned over the feed, so the tint sits on a solid surface — headlines must never show through */
  .news-new-banner{position:sticky;top:160px;z-index:5;background:linear-gradient(var(--gold-soft),var(--gold-soft)),var(--surface);box-shadow:0 6px 18px rgba(0,0,0,.1)}
  .news-item{align-items:flex-start}
  /* hover actions live inside the text column (meta line), never over the thumbnail */
  .news-item .ni-main{position:relative}
  .news-item .ni-main>.ni-acts{right:0;top:auto;bottom:-3px;transform:none}
  .ni-thumb{flex:none;width:112px;height:72px;border-radius:9px;object-fit:cover;background:var(--surface-2);margin-left:auto;align-self:center}
  .nw-more{display:flex;justify-content:center;margin:16px 0 4px;min-height:44px}
  @media(max-width:1079px){
    .nw-bar{top:50px;margin:0 -16px 12px;padding:8px 16px;gap:10px}
    .news-new-banner{top:60px}
    /* phone rows stack vertically, so the thumbnail pins top-right beside the headline */
    .ni-thumb{position:absolute;top:12px;right:16px;width:72px;height:54px;border-radius:8px;margin:0}
    .news-item:has(.ni-thumb) .ni-main,.news-item:has(.ni-thumb) .ni-when{padding-right:84px}
  }
  @media(max-width:640px){.news-new-banner{flex-wrap:wrap;row-gap:4px}.news-new-banner .news-new-go{margin-left:0}}
  .ca-filter input{background:var(--surface-2);border:1px solid transparent;border-radius:8px;padding:7px 12px;font-size:13px;color:var(--text);outline:none;width:180px}
  .ca-filter input:focus{border-color:var(--border);box-shadow:0 0 0 3px var(--gold-soft)}
  .ca-legend{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
  .ca-legend span{font-size:11px;display:flex;align-items:center;gap:4px}
  .ca-legend .dot{width:8px;height:8px;border-radius:50%;flex:none}
  .ai-note{margin-left:auto;font-size:11.5px;color:var(--text-faint);display:flex;align-items:center;gap:5px}

  .flame{color:var(--gold)}

  /* ---------- Market Pulse ---------- */
  .mp-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:18px 20px 14px}
  .mp-hero .mp-val{font-family:var(--mono);font-size:28px;font-weight:700;letter-spacing:-.025em;margin-top:2px}
  .mp-hero .mp-chg{font-weight:700;font-size:14px;margin-top:2px}
  .mp-sub-idx{display:flex;gap:0;border-top:1px solid var(--border);overflow-x:auto}
  .mp-sub-idx .mp-idx{flex:1;min-width:0;padding:10px 16px;border-right:1px solid var(--border);cursor:pointer;transition:background .15s}
  .mp-sub-idx .mp-idx:last-child{border-right:none}
  .mp-sub-idx .mp-idx:hover{background:var(--surface-2)}
  .mp-idx .mp-idx-name{font-size:11px;font-weight:600;color:var(--text-faint);text-transform:uppercase;letter-spacing:.03em}
  .mp-idx .mp-idx-val{font-family:var(--mono);font-weight:600;font-size:13px;margin-top:2px}
  .mp-idx .mp-idx-chg{font-family:var(--mono);font-size:11.5px;font-weight:600;margin-top:1px}
  .mp-bb{padding:13px 20px;border-top:1px solid var(--border)}
  .mp-bb-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
  .mp-bb-head .mp-bb-t{font-size:10px;font-weight:600;color:var(--text-faint);text-transform:uppercase;letter-spacing:.04em}
  .mp-bb-head .mp-bb-legend{display:flex;gap:14px;font-family:var(--mono);font-weight:600;font-size:12px}
  .mp-bb-track{display:flex;height:8px;border-radius:5px;overflow:hidden;background:var(--surface-2)}
  .mp-bb-track i{display:block;height:100%;transition:width .4s}
  .mp-head-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .mp-fresh{font-size:11.5px;color:var(--text-faint);display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
  .mp-fresh::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--up);flex:none}
  .mp-fresh.off::before{background:var(--text-faint)}
  .mp-label{font-size:11px;font-weight:600;color:var(--text-faint);text-transform:uppercase;letter-spacing:.03em}
  .mp-chg-row{display:flex;align-items:baseline;gap:9px;margin-top:3px}
  .mp-pts{font-family:var(--mono);font-size:12.5px;font-weight:600;opacity:.7}
  .mp-cap{padding:9px 20px;border-top:1px solid var(--border);font-size:11px;color:var(--text-faint)}
  .mp-breadth{display:flex;gap:12px;align-items:baseline;margin-top:4px}
  .mp-breadth span{font-family:var(--mono);font-weight:600;font-size:13px}
  @media(max-width:560px){
    .mp-sub-idx{flex-wrap:wrap}
    .mp-sub-idx .mp-idx{min-width:33%}
  }

  /* ---------- Stream / posts ---------- */
  .section-title{display:flex;align-items:center;gap:9px;margin:24px 2px 14px;font-size:16px;font-weight:600;letter-spacing:-.02em}
  .live-dot{width:7px;height:7px;border-radius:50%;background:var(--up);display:inline-block;animation:pulse 1.6s infinite}
  .feed{display:flex;flex-direction:column;gap:10px}
  .composer{padding:14px 16px 12px;background:var(--surface);border:1px solid var(--border);border-radius:14px;
    transition:border-color .18s,box-shadow .18s}
  .composer.on,.composer:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
  .composer.cmp-page{border:none;box-shadow:none;padding:0;border-radius:0}
  .cmp-top{display:flex;gap:12px;align-items:flex-start}
  .cmp-input{flex:1;min-width:0}
  .composer textarea{width:100%;display:block;resize:none;overflow-y:auto;min-height:26px;max-height:300px;
    background:transparent;border:none;color:var(--text);outline:none;font:inherit;font-size:15.5px;line-height:1.55;padding:5px 0 0}
  .composer.cmp-page textarea{min-height:96px;font-size:16px}
  .composer textarea::placeholder{color:var(--text-faint)}
  .cmp-foot{display:flex;align-items:center;gap:8px;margin-top:10px;padding-left:52px;flex-wrap:wrap}
  .composer.cmp-page .cmp-foot{padding-left:0;border-top:1px solid var(--border-soft);padding-top:12px;margin-top:14px}
  .cmp-tools{display:flex;gap:2px;align-items:center;margin-left:2px}
  .cmp-ico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--text-faint);transition:all .15s}
  .cmp-ico svg{width:19px;height:19px}
  .cmp-ico:hover{background:var(--gold-soft);color:var(--gold)}
  .cmp-ico:active{transform:scale(.92)}
  .cmp-count{font-family:var(--mono);font-size:11.5px;color:var(--text-faint);min-width:0;font-variant-numeric:tabular-nums}
  .cmp-count.warn{color:var(--down);font-weight:600}
  .cmp-send{margin-left:auto;padding:8px 20px}
  .cmp-send:disabled{opacity:.4;cursor:not-allowed;filter:none}
  .cmp-disc{font-size:11px;color:var(--text-faint);margin:9px 0 0 52px;line-height:1.5}
  .composer.cmp-page .cmp-disc{margin-left:0}
  .cmp-disc b{color:var(--text-dim);font-weight:600}
  .cmp-hint{display:none}
  .composer.on .cmp-hint{display:inline;opacity:.75}
  .sentiment-pick{display:flex;gap:6px}
  .chip{border:1px solid var(--border);border-radius:8px;padding:6px 13px;font-size:12.5px;font-weight:500;color:var(--text-dim);display:inline-flex;align-items:center;gap:5px;transition:all .15s}
  .chip:hover{border-color:var(--text-faint)}
  .chip[data-on="bull"].sel{background:var(--up-soft);color:var(--up);border-color:transparent}
  .chip[data-on="bear"].sel{background:var(--down-soft);color:var(--down);border-color:transparent}
  .chip[data-on="neutral"].sel{background:var(--surface-3);color:var(--text);border-color:transparent}
  /* ---------- Poll creator ---------- */
  .poll-creator{margin:10px 0 2px;padding:12px 13px 11px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2)}
  .pc-head{display:flex;align-items:center;gap:6px;margin-bottom:9px}
  .pc-title{font-size:12.5px;font-weight:700;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:6px}
  .pc-close{margin-left:auto;font-size:11.5px;color:var(--down);padding:3px 8px;border-radius:7px;transition:background .12s}
  .pc-close:hover{background:var(--down-soft)}
  .pc-q{width:100%;box-sizing:border-box;padding:9px 11px;border:1px solid var(--border);border-radius:9px;
    background:var(--surface);color:var(--text);font:inherit;font-size:13.5px;font-weight:600;outline:none;transition:border-color .15s}
  .pc-rows{margin-top:8px;display:flex;flex-direction:column;gap:6px}
  .pc-row{display:flex;align-items:center;gap:8px}
  .pc-dot{width:20px;height:20px;flex:none;border-radius:50%;background:var(--surface-3);color:var(--text-dim);
    font-size:10.5px;font-weight:700;display:grid;place-items:center;font-family:var(--mono)}
  .poll-choice{flex:1;min-width:0;padding:8px 11px;border:1px solid var(--border);border-radius:9px;
    background:var(--surface);color:var(--text);font:inherit;font-size:13px;outline:none;transition:border-color .15s}
  .poll-creator input:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
  .pc-x{width:24px;height:24px;flex:none;border-radius:7px;color:var(--text-faint);font-size:12px;
    display:grid;place-items:center;transition:all .12s}
  .pc-x:hover{background:var(--down-soft);color:var(--down)}
  .pc-x-gap{width:24px;flex:none}
  .pc-foot{display:flex;align-items:center;margin-top:9px}
  .pc-add{font-size:12px;font-weight:600;color:var(--gold);padding:5px 10px;border-radius:8px;
    border:1px dashed var(--border);transition:all .14s}
  .pc-add:hover:not(:disabled){background:var(--gold-soft);border-color:var(--gold);border-style:solid}
  .pc-add:disabled{opacity:.4;cursor:not-allowed;color:var(--text-faint)}
  .pc-hint{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--text-faint)}
  /* ---------- Poll display ---------- */
  /* white-space:normal is load-bearing: .post .body is pre-wrap, which otherwise renders
     every newline in the poll template as blank space and balloons the rows */
  .poll-display{white-space:normal;margin:12px 0 4px;padding:14px 15px 12px;border:1px solid var(--border);
    border-radius:14px;background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.04)}
  .poll-display .poll-q{font-weight:650;font-size:14.5px;margin:0 0 3px;line-height:1.4}
  .poll-sub{font-size:11.5px;color:var(--text-faint);margin-bottom:11px}
  .poll-opts{display:flex;flex-direction:column;gap:7px}

  /* --- unvoted: radio-style, clearly clickable --- */
  .poll-opt{position:relative;display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;
    text-align:left;padding:11px 14px;border-radius:10px;border:1.5px solid var(--border);
    font-size:13.5px;line-height:1.35;overflow:hidden;background:var(--surface);color:var(--text)}
  .poll-opt.vote{cursor:pointer;transition:border-color .16s,background .16s,transform .12s}
  .poll-opt.vote:hover{border-color:var(--gold);background:var(--gold-soft)}
  .poll-opt.vote:active{transform:scale(.985)}
  .po-radio{flex:none;width:17px;height:17px;border-radius:50%;border:2px solid var(--border);
    display:grid;place-items:center;transition:border-color .16s}
  .poll-opt.vote:hover .po-radio{border-color:var(--gold)}
  .po-radio::after{content:'';width:7px;height:7px;border-radius:50%;background:var(--gold);
    transform:scale(0);transition:transform .18s cubic-bezier(.34,1.56,.64,1)}
  .poll-opt.vote:hover .po-radio::after{transform:scale(1)}

  /* --- results: animated bar fill, staggered --- */
  .poll-opt.res{cursor:default;border-color:var(--border-soft);animation:pollrow .32s ease both}
  @keyframes pollrow{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
  .poll-bar{position:absolute;left:0;top:0;bottom:0;width:var(--pct);border-radius:8px;
    background:var(--surface-3);transform-origin:left;animation:pollfill .6s cubic-bezier(.22,1,.36,1) both}
  @keyframes pollfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .poll-opt.lead .poll-bar{background:var(--gold-soft)}
  .poll-opt.voted{border-color:var(--gold)}
  .poll-opt.voted .poll-bar{background:color-mix(in srgb,var(--gold) 26%,transparent)}
  .poll-opt-text{position:relative;z-index:1;display:flex;align-items:center;gap:10px;width:100%}
  .po-label{flex:1;min-width:0;display:flex;align-items:center;gap:6px;word-break:break-word}
  .poll-opt.voted .po-label{font-weight:650}
  .po-check{flex:none;width:16px;height:16px;border-radius:50%;background:var(--gold);color:#fff;
    font-size:10px;font-weight:800;display:grid;place-items:center;animation:popcheck .3s cubic-bezier(.34,1.56,.64,1) both}
  @keyframes popcheck{from{transform:scale(0)}to{transform:scale(1)}}
  .po-num{flex:none;display:flex;align-items:baseline;gap:6px;font-family:var(--mono);animation:fadein .5s .15s both}
  @keyframes fadein{from{opacity:0}to{opacity:1}}
  .po-num b{font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums}
  .poll-opt.lead .po-num b{color:var(--gold)}
  .po-num i{font-style:normal;font-size:11px;color:var(--text-faint)}
  .poll-total{font-size:11.5px;color:var(--text-faint);margin-top:10px;display:flex;align-items:center;gap:5px}
  .poll-voted-chip{color:var(--gold);font-weight:600}
  @media(prefers-reduced-motion:reduce){
    .poll-opt.res,.poll-bar,.po-check,.po-num{animation:none}
    .poll-bar{transform:none}
  }
  .composer .send{margin-left:auto}
  .btn{border-radius:10px;padding:10px 20px;font-weight:500;font-size:14px;transition:all .2s;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;justify-content:center;letter-spacing:-.005em}
  .btn-dark{background:var(--btn);color:var(--btn-ink)}.btn-dark:hover{opacity:.88}
  .btn-gold{background:var(--gold);color:#fff}.btn-gold:hover{filter:brightness(1.1)}
  .btn-ghost{border:1px solid var(--border);color:var(--text)}.btn-ghost:hover{background:var(--surface-2)}
  .btn-sm{padding:6px 12px;font-size:13px;line-height:1;border-radius:8px}
  @keyframes spin{to{transform:rotate(360deg)}}.spinning .refresh-icon{animation:spin .6s linear infinite}
  .btn-block{width:100%}
  .btn-outline-gold{border:1.5px solid var(--gold);color:var(--gold);background:transparent}.btn-outline-gold:hover{background:var(--gold-soft)}
  .auth-page{max-width:400px;margin:0 auto;padding:48px 0}
  .auth-page .auth-logo{text-align:center;margin-bottom:36px}
  .auth-page .auth-logo img{height:32px;width:auto}
  .auth-page .auth-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:36px;box-shadow:var(--shadow)}
  .auth-page .auth-card h1{font-size:24px;font-weight:700;margin:0 0 6px;letter-spacing:-.03em}
  .auth-page .auth-card .sub{color:var(--text-dim);font-size:14px;margin:0 0 24px;font-weight:400}
  .auth-page .auth-footer{text-align:center;margin-top:24px;font-size:13.5px;color:var(--text-dim)}
  .auth-page .auth-footer a{color:var(--gold);font-weight:500;cursor:pointer}
  .auth-page .auth-footer a:hover{text-decoration:underline}
  .auth-page .auth-divider{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--text-faint);font-size:12px}
  .auth-page .auth-divider::before,.auth-page .auth-divider::after{content:'';flex:1;border-top:1px solid var(--border)}
  .auth-page .field{margin-top:18px}
  .auth-page .field:first-of-type{margin-top:0}
  .auth-page .pw-toggle{position:relative}
  .auth-page .pw-toggle input{width:100%;padding-right:42px}
  .auth-page .pw-toggle button{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-faint);cursor:pointer;padding:4px}
  .auth-page .pw-str{height:3px;border-radius:2px;margin-top:8px;background:var(--surface-2);overflow:hidden}
  .auth-page .pw-str .bar{height:100%;border-radius:2px;transition:width .3s,background .3s}
  .auth-page .namegen{display:flex;align-items:center;gap:8px;margin-top:10px;padding:11px 14px;background:var(--surface-2);border-radius:10px;font-family:var(--mono);font-size:14px;flex-wrap:wrap}
  .auth-page .namegen .g{flex:1 1 100%;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .auth-steps{display:flex;gap:6px;margin-bottom:24px}
  .auth-steps .dot{height:4px;flex:1;border-radius:2px;background:var(--surface-3);transition:background .3s}
  .auth-steps .dot.on{background:var(--gold)}

  .sidebar-auth{display:flex;flex-direction:column;gap:10px;padding:4px 0}
  .sidebar-auth .welcome{font-size:13.5px;color:var(--text-dim);line-height:1.55;margin-bottom:6px}

  .post{padding:14px 16px}
  .post .head{display:flex;align-items:center;gap:10px}
  .ava{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:600;font-size:13px;color:#fff;font-family:var(--mono)}
  .ava.sm{width:28px;height:28px;font-size:10px;border-radius:50%}
  .name{font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:14px}
  .handle{color:var(--text-faint);font-weight:400;font-size:12.5px}
  .badge-verify{display:inline-flex;align-items:center;gap:3px;color:var(--verify);font-size:11px;font-weight:600;background:var(--verify-soft);padding:2px 8px;border-radius:6px}
  .badge-anon{display:inline-flex;align-items:center;gap:3px;color:var(--text-faint);font-size:11px;font-weight:500;background:var(--surface-2);padding:2px 8px;border-radius:6px}
  /* Phase 68: agent marker is visually secondary (no pill, low contrast); same on desktop and mobile */
  .ai-mark{display:inline;color:var(--text-faint);font-size:10.5px;font-weight:400;letter-spacing:0;opacity:.75;cursor:help;margin-left:2px;text-decoration:none;white-space:nowrap}
  .ai-mark:hover,.ai-mark:focus-visible{opacity:1;text-decoration:underline dotted;outline:none}
  .prof-about{margin-top:8px;font-size:12px;color:var(--text-faint)}
  .prof-about summary{cursor:pointer;width:max-content;list-style:none}
  .prof-about summary::-webkit-details-marker{display:none}
  .prof-about summary::before{content:"ⓘ ";}
  .prof-about p{margin:6px 0 0;max-width:60ch;line-height:1.5}
  .post:hover{border-color:var(--border);box-shadow:0 1px 4px rgba(0,0,0,.06)}
.post-news{border-left:3px solid transparent}
  .post-news:hover{border-left-color:var(--gold)}
  .post .body{margin-top:8px;font-size:15px;white-space:pre-wrap;word-break:break-word;line-height:1.65}
  /* unscoped on purpose: the thread page renders this inside a plain .panel, so a
     `.post .post-img` rule silently never matched there and images blew past the card */
  .post-img{display:block;margin:10px 0 2px;max-width:100%;width:auto;max-height:480px;
    border-radius:10px;object-fit:contain;background:var(--surface-2);border:1px solid var(--border-soft);cursor:zoom-in}
  .post-img-link{display:inline-block;max-width:100%;line-height:0}
  .post-fig .post-img-link{display:block;width:100%;height:100%}
  .mention{color:var(--gold-ink);font-weight:600;cursor:pointer}
  .mention:hover{text-decoration:underline}
  .notif-bell{position:relative;cursor:pointer;width:36px;height:36px;border-radius:8px;display:grid;place-items:center;color:var(--text-dim);transition:all .15s}
  .notif-bell:hover{background:var(--surface-2);color:var(--text)}
  .notif-bell .notif-dot{position:absolute;top:2px;right:0;min-width:16px;height:16px;background:var(--down);color:#fff;font-size:10px;font-weight:700;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px}
  .badge-role{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:600;padding:2px 7px;border-radius:5px}
  .badge-role.admin{background:rgba(255,59,48,.12);color:#ff3b30}
  .badge-role.coadmin{background:rgba(255,149,0,.12);color:#ff9500}
  .badge-role.moderator{background:rgba(88,86,214,.12);color:#5856d6}
  .reputasi-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--text-dim)}
  .reputasi-score{color:#ff9500;font-family:var(--mono)}
  .reputasi-tier{font-size:11px;color:var(--text-faint);font-weight:500}
  .flag-queue-item{padding:14px 16px;border-bottom:1px solid var(--border)}
  .flag-queue-item .reason{font-size:11px;font-weight:600;text-transform:uppercase;padding:2px 7px;border-radius:5px;display:inline-block}
  .flag-queue-item .reason.review{background:rgba(255,149,0,.12);color:#ff9500}
  .flag-queue-item .reason.scam{background:rgba(255,59,48,.12);color:#ff3b30}
  .admin-user-row{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--border)}
  .admin-user-row select{padding:4px 8px;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);color:var(--text);font-size:12px}
  .notif-item{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}
  .notif-item:hover{background:var(--surface-2)}
  .notif-item.unseen{background:var(--gold-soft)}
  .notif-pop{width:340px;min-width:340px;display:flex;flex-direction:column;max-height:min(440px,70vh)}
  .notif-pop-head{padding:12px 16px;font-weight:650;font-size:13.5px;border-bottom:1px solid var(--border-soft);flex:none}
  .notif-pop-body{overflow-y:auto;flex:1;min-height:0}
  .notif-pop-body .notif-item{padding:11px 14px}
  .notif-pop-body .notif-item:last-child{border-bottom:none}
  .notif-pop-load{padding:26px 16px;text-align:center;color:var(--text-faint);font-size:13px}
  .notif-pop-more{flex:none;width:100%;padding:11px 14px;font-size:12.5px;font-weight:600;color:var(--gold);
    border-top:1px solid var(--border-soft);text-align:center;justify-content:center;transition:background .12s}
  .notif-pop-more:hover{background:var(--surface-2)}
  .emoji-pick{display:flex;flex-wrap:wrap;gap:4px;padding:8px;max-height:200px;overflow-y:auto}
  .emoji-pick span{font-size:22px;cursor:pointer;padding:4px;border-radius:6px;transition:background .15s}
  .emoji-pick span:hover{background:var(--surface-2)}
  .img-upload-btn{cursor:pointer;color:var(--text-faint);transition:color .15s;padding:0}
  .img-upload-btn:hover{color:var(--gold-ink)}
  .img-preview{position:relative;margin-top:8px;display:inline-block}
  .img-preview img{max-width:200px;max-height:150px;border-radius:8px;object-fit:cover}
  .img-preview .rm{position:absolute;top:4px;right:4px;background:rgba(0,0,0,.7);color:#fff;border:none;border-radius:50%;width:22px;height:22px;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center}
  .at-ac{position:absolute;bottom:100%;left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:0 -4px 12px rgba(0,0,0,.12);max-height:200px;overflow-y:auto;z-index:50}
  .at-ac .ac-item{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;font-size:13px}
  .at-ac .ac-item:hover{background:var(--surface-2)}
  .cashtag{color:var(--gold-ink);font-family:var(--mono);font-weight:600;background:var(--gold-soft);padding:1px 5px;border-radius:4px;cursor:pointer;transition:all .15s}
  .cashtag:hover{filter:brightness(.92)}
  .senti-tag{font-size:11.5px;font-weight:650;padding:4px 11px;border-radius:8px;display:inline-flex;gap:4px;align-items:center}
  .senti-tag.bull{background:var(--up-soft);color:var(--up)}
  .senti-tag.bear{background:var(--down-soft);color:var(--down)}
  .senti-tag.neutral{background:var(--surface-2);color:var(--text-dim)}
  .post .tags{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
  .post .actions{display:flex;gap:2px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border-soft)}
  .act{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:20px;font-size:12.5px;font-weight:500;color:var(--text-faint);transition:all .15s}
  .act:hover{background:var(--surface-2);color:var(--text-dim)}
  .act.liked{color:var(--down)}
  .act.bookmark.saved{color:var(--gold)}
  .act svg{width:15px;height:15px}
  .act.more{margin-left:auto}
  /* ---------- Threaded comments (Reddit model: 1px hairline rails, no elbows) ---------- */
  .thread{margin-top:6px}
  .cmt{position:relative}
  .thread>.cmt{padding-top:14px}
  .thread>.cmt+.cmt{border-top:1px solid var(--border-soft)}
  .cmt-row{display:flex;gap:8px;align-items:flex-start}
  .cmt-lead{display:flex;align-items:center;gap:6px;flex:none}
  .cmt-fold{width:18px;height:18px;flex:none;border-radius:50%;border:1px solid var(--border);color:var(--text-faint);
    background:var(--surface);font-size:11px;font-weight:700;line-height:1;display:grid;place-items:center;transition:all .13s}
  .cmt-fold:hover{border-color:var(--text-dim);color:var(--text)}
  .cmt-fold-gap{width:18px;flex:none}
  .cmt-more{margin:2px 0 0 26px;font-size:12px;font-weight:600;color:var(--gold);padding:3px 0;transition:opacity .13s}
  .cmt-more:hover{opacity:.75}
  .cmt.folded>.cmt-row{opacity:.75}
  .cmt-sortbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:0 0 9px;margin-bottom:2px;
    border-bottom:1px solid var(--border-soft)}
  .cmt-count{font-weight:650;font-size:13.5px;color:var(--text-dim)}
  .sort-seg{display:inline-flex;gap:1px}
  .sort-seg button{padding:4px 10px;border-radius:14px;font-size:12px;font-weight:600;color:var(--text-faint);transition:all .14s}
  .sort-seg button:hover{background:var(--surface-2);color:var(--text-dim)}
  .sort-seg button.on{background:var(--surface-2);color:var(--text)}
  .cmt-foldall{margin-left:auto;font-size:12px;font-weight:600;color:var(--text-faint);padding:4px 9px;border-radius:14px;transition:all .13s}
  .cmt-foldall:hover{background:var(--surface-2);color:var(--text-dim)}
  /* post action bar: compact grey pills like Reddit's */
  .thread-acts{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}
  .thread-acts .act{background:var(--surface-2);border-radius:16px;padding:7px 13px;font-size:13px;font-weight:600;color:var(--text-dim)}
  .thread-acts .act:hover{background:var(--surface-3);color:var(--text)}
  .thread-acts .act.liked{background:var(--down-soft);color:var(--down)}
  .cmt-ava{flex:none;cursor:pointer;line-height:0}
  .cmt-row .ava.sm{width:22px;height:22px;font-size:9px;border-radius:50%}
  .cmt-main{flex:1;min-width:0;margin-top:-1px}
  .cmt-head{display:flex;align-items:center;gap:5px;flex-wrap:wrap;line-height:1.3;min-height:22px}
  .cmt-name{font-weight:600;font-size:12.5px;color:var(--text);cursor:pointer;letter-spacing:-.005em}
  .cmt-name:hover{text-decoration:underline}
  .cmt-time{font-size:12px;color:var(--text-faint);white-space:nowrap}
  .cmt-reply-to{font-size:11px;color:var(--text-faint);display:inline-flex;align-items:center;gap:3px;
    max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cmt-body{font-size:14px;line-height:1.5;margin:1px 0 3px;white-space:pre-wrap;word-break:break-word;color:var(--text)}
  .cmt-actions{display:flex;gap:0;margin-left:-8px}
  .cmt-actions .act{padding:4px 8px;font-size:12px;border-radius:14px;gap:4px}
  .cmt-actions .act svg{width:13px;height:13px}
  .cmt-actions .danger-act{color:var(--red,#ff3b30);opacity:.6}
  .cmt-actions .danger-act:hover{opacity:1}
  /* one continuous hairline per nested group; the fold toggle sits on it. no elbows. */
  .cmt-children{position:relative;margin:0;padding-left:26px}
  .cmt-children::before{content:'';position:absolute;left:8px;top:0;bottom:10px;width:1px;
    background:var(--border);transition:background .15s}
  .cmt-children:hover::before{background:var(--text-faint)}
  .cmt-children>.cmt{padding-top:10px}
  .cmt-children.tight{padding-left:20px}
  .cmt-children.tight::before{left:6px}
  .reply-box{display:flex;gap:9px;align-items:flex-start;margin-top:10px;padding:10px 12px;background:var(--surface-2);
    border:1px solid transparent;border-radius:12px;transition:border-color .15s}
  .reply-box:focus-within{border-color:var(--border);background:var(--surface)}
  .rb-main{flex:1;min-width:0}
  .reply-box textarea{width:100%;display:block;resize:none;min-height:34px;max-height:200px;background:transparent;
    border:none;color:var(--text);outline:none;font:inherit;font-size:13.5px;line-height:1.55}
  .reply-box textarea::placeholder{color:var(--text-faint)}
  .rb-tools{display:flex;align-items:center;gap:2px;margin-top:4px}
  .rb-tools .cmp-ico{width:30px;height:30px}
  .rb-tools .cmp-ico svg{width:17px;height:17px}
  .rb-tools .btn{margin-left:auto;padding:6px 15px;font-size:12px}
  .edited-tag{font-style:italic;opacity:.8}
  /* ---------- Post title + markdown body ---------- */
  .post-title{margin:10px 0 3px;font-size:19px;font-weight:750;line-height:1.3;letter-spacing:-.025em;cursor:pointer}
  .post-title:hover{color:var(--gold)}
  .thread-title{margin:14px 0 4px;font-size:23px;font-weight:800;line-height:1.25;letter-spacing:-.02em}
  .thread-body{font-size:16px;line-height:1.65;margin-top:6px}
  .md{white-space:normal;word-break:break-word}
  .md p{margin:0 0 2px}
  .md .md-gap{height:.62em}
  .md .md-h{margin:12px 0 4px;font-weight:700;line-height:1.3}
  .md h3.md-h{font-size:1.24em}.md h4.md-h{font-size:1.12em}.md h5.md-h{font-size:1.02em}
  .md ul,.md ol{margin:4px 0 6px;padding-left:22px}
  .md li{margin:2px 0;line-height:1.55}
  .md ul{list-style:disc}.md ol{list-style:decimal}
  .md blockquote{margin:6px 0;padding:2px 0 2px 12px;border-left:3px solid var(--border);color:var(--text-dim)}
  .md code{font-family:var(--mono);font-size:.9em;background:var(--surface-2);padding:1.5px 5px;border-radius:5px}
  .md strong{font-weight:700}.md em{font-style:italic}.md del{opacity:.65}
  .md a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
  /* ---------- Composer title + format bar ---------- */
  .cmp-title{width:100%;box-sizing:border-box;background:transparent;border:none;outline:none;color:var(--text);
    font:inherit;font-size:17px;font-weight:700;letter-spacing:-.015em;padding:2px 0 4px;margin-bottom:2px}
  .cmp-title::placeholder{color:var(--text-faint);font-weight:600}
  .composer .cmp-title{border-bottom:1px solid transparent;transition:border-color .15s}
  .composer.on .cmp-title{border-bottom-color:var(--border-soft)}
  .cmp-fmt{margin-top:8px;padding-left:52px;display:none}
  .composer.on .cmp-fmt,.composer.cmp-page .cmp-fmt{display:block}
  .composer.cmp-page .cmp-fmt{padding-left:0}
  /* Collapsed inline composer: a quiet invitation, not a publishing application.
     Every control is DEFERRED, never removed — the markup and all module state
     (_pendingImage, _pollActive, quickSenti, the textarea value) are untouched, so
     expanding restores exactly what was there.  `.cmp-page` (/create) is excluded
     from every rule here and keeps showing everything. */
  .composer:not(.on):not(.cmp-page) .cmp-title,
  .composer:not(.on):not(.cmp-page) .cmp-foot,
  .composer:not(.on):not(.cmp-page) .cmp-disc{display:none}
  .fmt-bar{display:flex;align-items:center;gap:1px;flex-wrap:wrap;padding:4px;background:var(--surface-2);border-radius:9px}
  .fmt-btn{min-width:28px;height:28px;padding:0 6px;border-radius:6px;font-size:12.5px;color:var(--text-dim);
    display:inline-flex;align-items:center;justify-content:center;transition:all .12s;font-family:var(--mono)}
  .fmt-btn:hover{background:var(--surface);color:var(--gold)}
  .fmt-btn:active{transform:scale(.9)}
  .fmt-sep{width:1px;height:16px;background:var(--border);margin:0 4px;flex:none}
  .fmt-help{margin-left:auto;width:18px;height:18px;border-radius:50%;background:var(--surface-3);color:var(--text-faint);
    font-size:11px;font-weight:700;display:grid;place-items:center;cursor:help;flex:none}
  .cmt-img{max-width:280px;max-height:220px;border-radius:10px;margin:6px 0 2px;cursor:pointer;display:block;border:1px solid var(--border)}
  .post-modal-thread{max-height:50vh;overflow-y:auto;margin-top:4px}

  /* ---------- Right column ---------- */
  .rightcol{flex-direction:column;gap:16px}
  .rc-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 12px}
  .rc-head b{font-size:14px;font-weight:600}
  .rc-head a{font-size:12.5px;color:var(--text-faint);display:flex;align-items:center;gap:3px;transition:color .15s}
  .rc-head a:hover{color:var(--text-dim)}
  .news-row{display:flex;gap:12px;padding:13px 18px;border-top:1px solid var(--border-soft);cursor:pointer;transition:background .15s}
  .news-row:hover{background:var(--surface-2)}
  .news-row .thumb{width:52px;height:52px;border-radius:10px;flex:none;display:grid;place-items:center;font-family:var(--mono);font-weight:700;color:#fff;font-size:14px}
  .news-row>div{min-width:0}
  .news-row .nt{font-size:13.5px;font-weight:500;line-height:1.4}
  .news-row .nm{display:flex;align-items:center;gap:7px;margin-top:6px;font-size:11.5px;color:var(--text-faint)}
  .news-row .src{display:inline-flex;align-items:center;gap:4px;font-weight:500}
  .btn-mini{border:1px solid var(--border);border-radius:6px;padding:4px 10px;font-size:11.5px;font-weight:500;color:var(--text-dim);margin-top:8px;align-self:flex-start;transition:all .15s}
  .btn-mini:hover{background:var(--surface-2)}

  .rule-list{margin:0;padding:0 2px;list-style:none;display:flex;flex-direction:column;gap:10px}
  .rule-list li{display:flex;gap:9px;font-size:13px;color:var(--text-dim);line-height:1.5}
  .rule-list .rn{color:var(--gold-ink);font-family:var(--mono);font-weight:600;flex:none}
  .verify-cta .vb{width:34px;height:34px;border-radius:10px;background:var(--verify-soft);display:grid;place-items:center;color:var(--verify)}

  /* ---------- Market / ticker / profile views ---------- */
  .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap}
  .page-head h1{font-size:28px;font-weight:700;margin:0;letter-spacing:-.03em}
  .page-head p{margin:4px 0 0;color:var(--text-dim);font-size:14px;font-weight:400}
  .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  @media(max-width:560px){.grid-2{grid-template-columns:1fr}}
  .p-pad{padding:18px}
  .card-title{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);display:flex;align-items:center;gap:8px;margin:0 0 14px}
  .mkt-table{width:100%;border-collapse:collapse}
  .mkt-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);font-weight:500;padding:0 8px 10px}
  .mkt-table th.r,.mkt-table td.r{text-align:right}
  .mkt-table td{padding:11px 8px;border-top:1px solid var(--border-soft);font-size:14px}
  .mkt-table tbody tr{cursor:pointer;transition:background .12s}
  .mkt-table tbody tr:hover{background:var(--surface-2)}
  .mkt-table .sym{font-family:var(--mono);font-weight:600}
  .mkt-table .nm{color:var(--text-faint);font-size:12px}

  /* ===== Homepage 2026 — structured, dense, product-forward ================
     One page grid. Different container treatments per information pattern:
     hero (market) / market cards (what matters) / editorial (news) /
     product cards (research) / open groups (discovery). Every value below is
     an existing token or the app's existing 4px rhythm. */
  /* Section anatomy: header block (heading + supporting line + action), content,
     then one deliberate major gap. The gap is whitespace, never another rule. */
  .hp-sec{margin:0 0 30px}
  /* A section whose own content carries no container (Market Pulse has its panel,
     the cards have their borders) needs an explicit boundary, or it reads as a
     continuation of the text rows above it.  --border, not --border-soft: the
     soft hairline is what separates rows INSIDE a section, so reusing it here
     would read as one more row divider rather than a chapter break. */
  /* A chapter break, not a container: one quiet hairline on the content column
     plus a bigger step in the vertical rhythm.  --border rather than
     --border-soft, because the soft hairline is what divides rows INSIDE a
     section; this one has to read as a level above that. */
  .hp-sec.hp-brk{border-top:1px solid var(--border);padding-top:24px;margin-top:28px}
  /* the reset is scoped to the view's own last section — the hero is the last child
     of its #overview wrapper, and an unscoped :last-child silently cancelled the
     gap between the hero and the section under it */
  main.view > .hp-sec:last-child{margin-bottom:0}
  .hp-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;
    column-gap:14px;padding:0 0 11px}
  .hp-head h2{font-size:16.5px;font-weight:700;letter-spacing:-.02em;margin:0;color:var(--text)}
  .hp-head .hp-note{grid-column:1;font-size:12.5px;color:var(--text-dim);margin-top:2px;line-height:1.4}
  .hp-head .hp-more{grid-row:1;grid-column:2;font-size:12.5px;font-weight:600;color:var(--gold-ink);
    cursor:pointer;text-decoration:none;white-space:nowrap}
  .hp-head .hp-more:hover{text-decoration:underline}

  .hp-title{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 10px}
  .hp-h1{font-size:22px;font-weight:700;letter-spacing:-.025em;margin:0;color:var(--text)}
  .hp-h1-sub{font-size:13px;color:var(--text-dim);margin:0}

  /* ── L1 Market Pulse — the page hero. Value + chart share one band; the
       supporting indices sit in a single grouped strip, not in mini-cards. ── */
  .hp-mp{overflow:hidden}
  /* ===== Home Market Pulse (hpx): value first, calm real chart, four real stats ===== */
  .hpx{padding:14px 22px 0;overflow:hidden}
  .hpx-hd{display:flex;align-items:center;gap:12px}
  .hpx-hd h2{font-size:15px;font-weight:700;letter-spacing:-.01em;margin:0}
  .hpx-hd .mp-fresh{font-size:12px}
  .hpx-more{margin-left:auto;font-size:13px;font-weight:600;color:var(--gold-ink);text-decoration:none;white-space:nowrap}
  .hpx-more:hover{text-decoration:underline}
  .hpx-main{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:40px;padding:8px 0 12px;cursor:pointer}
  .hpx-main:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:10px}
  .hpx-lab{font-size:12px;color:var(--text-faint)}
  .hpx-lab b{font-weight:700;color:var(--text-dim);letter-spacing:.04em;margin-right:4px}
  .hpx-val{font-family:var(--mono);font-size:42px;font-weight:750;letter-spacing:-.04em;line-height:1.05;margin-top:4px;font-variant-numeric:tabular-nums}
  .hpx-chg{display:flex;align-items:baseline;gap:10px;margin-top:6px;font-family:var(--mono);font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
  .hpx-pts{color:var(--text-dim);font-weight:600;font-size:13.5px}
  .hpx-prev{margin-top:6px;font-size:12px;color:var(--text-faint)}
  .hpx-prev span{font-family:var(--mono);color:var(--text-dim)}
  .hpx-fig{margin:0;min-width:0;justify-self:end;width:min(100%,420px);display:flex;flex-direction:column;gap:6px}
  .hpx-fig canvas{display:block;width:100%;height:76px}
  .hpx-fig figcaption{font-size:11px;color:var(--text-faint);text-align:right}
  .hpx-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 -22px;border-top:1px solid var(--border-soft)}
  .hpx-stat{display:flex;flex-direction:column;gap:5px;min-width:0;padding:10px 22px 12px;border-left:1px solid var(--border-soft)}
  .hpx-stat:first-child{border-left:0}
  .hpx-stat .k{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hpx-stat .v{display:flex;align-items:baseline;gap:8px;min-width:0;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
  .hpx-stat .v .num-up,.hpx-stat .v .num-down,.hpx-stat .v span[class]{font-family:var(--mono);font-size:13px}
  .hpx-sec-n{overflow:hidden;text-overflow:ellipsis;min-width:0}
  .hpx-unch{color:var(--text-dim)}
  .hpx-na{color:var(--text-faint);font-weight:600}
  .hpx-bar{display:flex;height:5px;border-radius:3px;overflow:hidden;background:var(--surface-3)}
  .hpx-bar .u{background:var(--up)}.hpx-bar .f{background:var(--border)}.hpx-bar .d{background:var(--down)}
  /* Most Active: a leaderboard panel — header like Market Pulse, ranked rows, value bar vs #1 */
  .hpx-actp{padding:14px 22px 10px}
  .hpx-act-hd{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:4px}
  .hpx-act-ti h2{font-size:17px;font-weight:750;letter-spacing:-.02em;margin:0}
  .hpx-act-ti p{margin:3px 0 0;font-size:12.5px;color:var(--text-dim)}
  .hpx-act-r{display:flex;align-items:center;gap:14px;flex:none}
  .hpx-sess{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;color:var(--text-dim);background:var(--surface-2)}
  .hpx-act{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
  .hpx-col{min-width:0}
  .hpx-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto 78px;align-items:center;gap:12px;padding:8px 8px;margin:0 -8px;border-radius:10px;cursor:pointer;transition:background .12s}
  .hpx-col .hpx-row+.hpx-row{border-top:1px solid var(--border-soft)}
  .hpx-row:hover{background:var(--surface-2)}
  .hpx-row:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
  .hpx-rk{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--text-faint)}
  .hpx-rk.top{color:var(--gold-ink);background:var(--blue-soft)}
  .hpx-id{display:flex;align-items:center;gap:11px;min-width:0}
  .hpx-id .tk-logoimg,.hpx-id .tk-badge{width:30px;height:30px}
  .hpx-tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
  .hpx-sl{display:flex;align-items:center;gap:7px;min-width:0;overflow:hidden}
  .hpx-sl b{font-family:var(--mono);font-size:14.5px;font-weight:700}
  .hpx-ar{font-size:10px;font-weight:800;letter-spacing:.05em;padding:1px 6px;border-radius:5px}
  .hpx-ar.up{color:var(--up);background:var(--up-soft)}.hpx-ar.down{color:var(--down);background:var(--down-soft)}
  .hpx-tx small,.hpx-pv small,.hpx-ch small{font-size:11.5px;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hpx-vb{display:block;height:3px;margin-top:3px;border-radius:2px;background:var(--surface-3);max-width:180px}
  .hpx-vb i{display:block;height:100%;border-radius:2px;background:var(--gold);opacity:.55}
  .hpx-pv,.hpx-ch{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-variant-numeric:tabular-nums;white-space:nowrap}
  .hpx-pv b{font-family:var(--mono);font-size:14.5px;font-weight:700}
  .hpx-ch b{font-family:var(--mono);font-size:14px;font-weight:700}
  .hpx-act-ft{margin:6px 0 0;padding-top:8px;border-top:1px solid var(--border-soft);font-size:11.5px;line-height:1.5;color:var(--text-faint)}
  /* narrower laptops: one column so names and ARA/ARB chips never collide with prices */
  @media(max-width:1179px){.hpx-act{grid-template-columns:minmax(0,1fr)}.hpx-col+.hpx-col .hpx-row:first-child{border-top:1px solid var(--border-soft)}.hpx-vb{max-width:240px}}
  @media(max-width:1079px){
    .hpx{padding:14px 16px 0}
    .hpx-main{grid-template-columns:minmax(0,1fr);gap:12px;padding:10px 0 14px}
    .hpx-val{font-size:38px}
    .hpx-fig{justify-self:stretch;width:100%}
    .hpx-fig canvas{height:56px}
    .hpx-fig figcaption{text-align:left}
    .hpx-more{font-size:12.5px}
    .hpx-stats{grid-template-columns:repeat(2,minmax(0,1fr));margin:0 -16px}
    .hpx-stat{padding:12px 16px 14px}
    .hpx-stat:nth-child(3){border-left:0}
    .hpx-stat:nth-child(n+3){border-top:1px solid var(--border-soft)}
    .hpx-stat .v{font-size:14px}
    .hpx-stat .v:has(.hpx-sec-n){flex-direction:column;align-items:flex-start;gap:2px;white-space:normal}
    .hpx-sec-n{white-space:normal}
  }
  .hp-mp-hd{display:flex;align-items:center;gap:10px;padding:11px 20px 0}
  .hp-mp-hd h2{font-size:14px;font-weight:700;letter-spacing:-.01em;margin:0}
  .hp-mp-hd .rgt{margin-left:auto;display:flex;align-items:center;gap:8px}
  .hp-mp-top{display:grid;grid-template-columns:minmax(200px,auto) minmax(0,1fr);
    gap:88px;align-items:center;padding:4px 20px 12px;cursor:pointer}
  .hp-mp-l{min-width:0}
  .hp-mp-lab{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
    color:var(--text-faint)}
  .hp-mp-val{font-family:var(--mono);font-size:54px;font-weight:700;letter-spacing:-.042em;
    line-height:1.0;margin-top:5px;font-variant-numeric:tabular-nums;color:var(--text)}
  .hp-mp-row{display:flex;align-items:center;gap:9px;margin-top:8px;flex-wrap:wrap}
  .hp-mp-chg{font-family:var(--mono);font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
  .hp-mp-pts{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--text-dim);
    font-variant-numeric:tabular-nums}
  .hp-mp-chart{position:relative;min-width:0;height:90px;width:64%;justify-self:end}
  /* Phase 10F.5: Market Pulse chart motion (Home, mobile + desktop). The line draws in once per
     visit; the latest point is a beacon — core with a halo and heartbeat, plus a fading radar ring.
     Position/colour come from drawRealSpark(); the global reduced-motion rule stops all of it. */
  .has-dot::before,.has-dot::after{content:'';position:absolute;left:var(--dot-x);top:var(--dot-y);width:8px;height:8px;
    margin:-4px 0 0 -4px;border-radius:50%;pointer-events:none}
  .has-dot::after{background:var(--dot-c);box-shadow:0 0 0 2px var(--surface),0 0 10px color-mix(in srgb,var(--dot-c) 55%,transparent);
    animation:hhDotBeat 2.4s ease-in-out infinite}
  .has-dot::before{background:color-mix(in srgb,var(--dot-c) 40%,transparent);animation:hhDotRing 2.4s cubic-bezier(.2,.6,.3,1) infinite}
  .reveal canvas{animation:hhChartReveal 1.1s var(--rev-delay,0ms) cubic-bezier(.3,.7,.2,1) both}
  .reveal.has-dot::after{animation:hhDotIn .35s calc(1s + var(--rev-delay,0ms)) both,hhDotBeat 2.4s calc(1.35s + var(--rev-delay,0ms)) ease-in-out infinite}
  .reveal.has-dot::before{opacity:0;animation:hhDotRing 2.4s calc(1.35s + var(--rev-delay,0ms)) cubic-bezier(.2,.6,.3,1) infinite}
  @keyframes hhChartReveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
  @keyframes hhDotIn{from{opacity:0;transform:scale(0)}60%{transform:scale(1.4)}to{opacity:1;transform:scale(1)}}
  @keyframes hhDotBeat{0%,40%,100%{transform:scale(1)}12%{transform:scale(1.3)}24%{transform:scale(1)}}
  @keyframes hhDotRing{0%{transform:scale(1);opacity:.85}75%,100%{transform:scale(4.5);opacity:0}}
  /* the global reduced-motion rule targets elements, not their pseudo-elements */
  @media(prefers-reduced-motion:reduce){.has-dot::before{display:none}.has-dot::after,.reveal canvas{animation:none}}
  .hp-mp-chart canvas{width:100%;height:90px;display:block}
  /* one quiet footer, not two banded sub-sections: supporting indices on one
     line, breadth on the next. No cells, no track, no separate caption band. */
  .hp-mp-foot{padding:12px 20px 13px;border-top:1px solid var(--border-soft);
    display:flex;flex-direction:column;gap:7px}
  .hp-mp-group-label{display:none}
  .hp-mp-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 0}
  .hp-mp-ix{display:inline-flex;align-items:baseline;gap:6px;cursor:pointer}
  .hp-mp-ix:not(:last-child)::after{content:'·';color:var(--border);margin:0 10px}
  .hp-mp-ix .k{font-size:10.5px;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:var(--text-dim)}
  .hp-mp-ix .v{font-family:var(--mono);font-size:13.5px;font-weight:700;color:var(--text);
    font-variant-numeric:tabular-nums;letter-spacing:-.02em}
  .hp-mp-ix .c{font-family:var(--mono);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
  .hp-mp-bd{font-family:var(--mono);font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
  .hp-mp-bd span:not(:last-child)::after{content:'·';color:var(--border);margin:0 9px;font-weight:400}

  /* ── L2 What Matters — compact market cards, scannable in one pass ────── */
  /* one native horizontal row: no arrows, no buttons, no scrollbar chrome — the
     next card peeking past the edge is the whole affordance. */
  /* overflow-x:auto forces overflow-y to a clipping value, so the row needs real
     vertical room: the hover border sits on the card's own 1px edge and the focus
     ring 2px outside it, and both are cut off when the card is flush with the
     content box.  Padding gives that room; the negative margin gives it back, so
     the row occupies exactly the height it did before. */
  .hp-wm-grid{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding:6px 0 6px;margin:-6px 0 -4px}
  .hp-wm-grid::-webkit-scrollbar{display:none}
  .hp-wm{flex:0 0 18%;scroll-snap-align:start}
  .hp-wm{display:flex;flex-direction:column;gap:5px;background:var(--surface);
    border:1px solid var(--border);border-radius:12px;padding:11px 13px 10px;cursor:pointer;
    transition:border-color .15s,box-shadow .15s,transform .15s}
  .hp-wm:hover{border-color:var(--gold);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
  .hp-wm:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
  .hp-wm-r1{display:flex;align-items:center;gap:8px}
  .hp-wm-r1 .pct{font-size:12.5px;padding:2px 7px}
  .hp-wm-sym{font-family:var(--mono);font-size:15px;font-weight:700;letter-spacing:-.015em}
  .hp-wm-nm{font-size:11.5px;color:var(--text-faint);line-height:1.3;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    min-height:2.6em}
  .hp-wm-r2{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:1px}
  .hp-wm-px{font-family:var(--mono);font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;
    letter-spacing:-.025em;white-space:nowrap}
  .hp-wm-vol{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--text-faint);
    font-variant-numeric:tabular-nums;white-space:nowrap}
  .hp-mobile-market{display:none}

  /* L3 News: lead + flowing companions, not a card of rows */
  .hp-ed{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);
    gap:24px;align-items:start}
  .hp-ed-lead{cursor:pointer;display:flex;flex-direction:column;gap:6px}
  .hp-ed-fig{position:relative;width:100%;aspect-ratio:2.35/1;overflow:hidden;
    border-radius:var(--radius-sm);background:var(--surface-2);flex:none;margin-bottom:2px}
  .hp-ed-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .hp-ed-lead:hover .hp-ed-h{color:var(--gold-ink)}
  .hp-ed-kick{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;
    letter-spacing:.07em;text-transform:uppercase;color:var(--text-dim)}
  .hp-ed-h{font-size:23px;font-weight:700;line-height:1.22;letter-spacing:-.03em;color:var(--text);
    text-wrap:balance;transition:color .12s}
  .hp-ed-m{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text-faint);
    flex-wrap:wrap}
  .hp-ed-tk{display:flex;gap:5px;flex-wrap:wrap}
  .hp-ed-cta{font-size:12px;font-weight:700;color:var(--gold-ink);
    display:inline-flex;align-items:center;gap:5px;margin-top:1px}
  .hp-ed-lead:hover .hp-ed-cta{gap:8px}

  /* supporting column: natural stacked flow, hairline only between rows */
  .hp-ed-side{display:flex;flex-direction:column}
  .hp-ed-it{display:flex;gap:11px;align-items:flex-start;padding:10px 0;cursor:pointer;
    border-top:1px solid var(--border-soft)}
  .hp-ed-it:first-child{border-top:0;padding-top:0}
  .hp-ed-it:last-child{padding-bottom:0}
  .hp-ed-it-fig{position:relative;width:120px;aspect-ratio:3/2;overflow:hidden;
    border-radius:var(--radius-sm);background:var(--surface-2);flex:none}
  .hp-ed-it-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .hp-ed-it .hp-ed-t{font-size:13.5px;font-weight:600;line-height:1.32;color:var(--text);
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
    transition:color .12s}
  .hp-ed-it:hover .hp-ed-t{color:var(--gold-ink)}
  .hp-ed-it .hp-ed-s{font-size:11px;color:var(--text-faint);margin-top:3px}
  .hp-ed-tm{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--text-faint);
    flex:none;padding-top:1px;font-variant-numeric:tabular-nums}
  /* the source's initials on a plain plate — never an empty box, never an
     external placeholder service */
  .hp-ed-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.04em;
    color:var(--text-faint);background:var(--surface-2);text-transform:uppercase}
  .hp-ed-fig .hp-ed-ph{font-size:15px;letter-spacing:.08em}

  .nw-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:-2px 0 16px}.nw-head h1{font-size:32px;font-weight:700;letter-spacing:-.04em;line-height:1.05;margin:0}.nw-lead{cursor:pointer;display:flex;flex-direction:column;gap:10px;min-width:0}.nw-lead .nw-lead-fig{aspect-ratio:16/9;max-height:none;border-radius:var(--radius-sm);margin:0 0 4px}.nw-kick{display:flex;align-items:center;gap:7px;min-width:0;font-size:12.5px;overflow:hidden}.nw-fav{width:18px;height:18px;border-radius:5px;object-fit:cover}.nw-src{font-weight:600;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto!important}.nw-lead-h{font-weight:700;line-height:1.18;letter-spacing:-.032em;margin:0;text-wrap:balance;transition:color .12s}.nw-lead:hover .nw-lead-h,.nw-it:hover .nw-it-h{color:var(--gold-ink)}.nw-foot{margin-top:auto;display:flex;align-items:center;gap:8px;font-size:12px;min-height:26px}.nw-ago{color:var(--text-faint);white-space:nowrap}.nw-acts{margin-left:auto;display:flex;gap:2px}.nw-side{display:flex;flex-direction:column;min-width:0;container-type:inline-size}.nw-it{display:flex;gap:14px;align-items:center;cursor:pointer;min-width:0;padding:12px 0;border-top:1px solid var(--border-soft)}.nw-it:first-child{border-top:0}.nw-it .nw-it-fig{aspect-ratio:16/9;border-radius:var(--radius-sm)}.nw-it-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}.nw-it-h{font-weight:600;line-height:1.35;letter-spacing:-.011em;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;transition:color .12s}.nw-meta{display:flex;align-items:center;gap:6px;min-width:0;font-size:11.5px}.nw-kick>*,.nw-meta>*{flex:none}.nw-meta .sm-dot{margin-left:auto}.nw-clock{font-family:var(--mono);font-weight:600;color:var(--text-faint);font-variant-numeric:tabular-nums}.nw-feat .hp-ed-ph{background:var(--gold-soft);color:var(--gold-ink)}
  @media(min-width:1080px){.nw-head .news-search{flex:0 0 300px}.nw-feat{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(300px,1fr);align-items:stretch;padding:0;margin-bottom:20px;overflow:hidden}.nw-lead{padding:18px 22px 18px 18px;border-right:1px solid var(--border-soft)}.nw-lead-h{font-size:clamp(22px,2.05vw,30px)}.nw-side{padding:6px 18px}.nw-it{flex:1}.nw-it .nw-it-fig{width:clamp(112px,10.4vw,152px)}.nw-it-h{font-size:clamp(13.5px,1.08vw,15.5px)}}
  @container (max-width:340px){.nw-it{gap:11px}.nw-it .nw-it-fig{width:96px}.nw-meta .ni-fav{display:none}}

  /* ── L3b Community — lighter than news: no container chrome around the bar ─ */
  .hp-feedbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px}
  .hp-sort{margin-left:auto;display:inline-flex;gap:2px;background:var(--surface-2);
    padding:3px;border-radius:8px}
  .hp-sort button{font:inherit;font-size:12px;font-weight:500;color:var(--text-dim);
    background:none;border:0;padding:4px 11px;border-radius:6px;cursor:pointer;transition:all .15s}
  .hp-sort button.on{background:var(--surface);color:var(--text);font-weight:600;
    box-shadow:var(--shadow-sm)}
  .hp-sort button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
  /* once the bar wraps, margin-left:auto would strand the control on a right-aligned
     second line — align it back under the tabs instead */
  @media(max-width:480px){.hp-sort{margin-left:0}}
  .feed .post{padding:14px 18px}
  .feed .post .body{font-size:14.5px;line-height:1.55}
  /* the homepage is a preview surface, not the reading surface: a tall post image
     made Community outweigh the editorial block above it. Scoped to the homepage
     feed — the thread and profile views keep the full 480px image. */
  /* ── L3b Community (homepage highlights) — editorial rows, not stacked cards.
     Everything here is scoped to .hp-feed, so the thread page, profiles and
     bookmarks keep the card treatment they already had. ── */
  .hp-feed{display:flex;flex-direction:column;gap:0}
  .hp-po{padding:11px 0;border-top:1px solid var(--border-soft);background:none;
    border-left:0;border-right:0;border-bottom:0;border-radius:0;box-shadow:none}
  /* The row itself never changes on hover — no wash, no border, no shadow, no
     movement.  Both declarations below only NEUTRALISE the inherited card hover
     (.post:hover paints a box-shadow rectangle and deepens border-color, which on
     a borderless row would draw a card and darken the separator).  The single
     piece of feedback is the action controls gaining contrast; liked and saved
     keep their own colour. */
  .hp-po:hover{box-shadow:none;border-color:var(--border-soft)}
  /* an inline market reference, not a widget: no container, border, shadow or radius */
  .hp-po-mkt{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;margin-top:7px}
  .hp-po-mkt .sep{color:var(--border);font-size:12px}
  .hp-po-mk{display:inline-flex;align-items:baseline;gap:5px;cursor:pointer;border-radius:4px}
  .hp-po-mk .s{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--gold-ink)}
  .hp-po-mk .p{font-family:var(--mono);font-size:12px;color:var(--text-dim);
    font-variant-numeric:tabular-nums}
  .hp-po-mk .c{font-size:12px;font-weight:600}
  .hp-po-mkt .d{font-size:11px;color:var(--text-faint);white-space:nowrap}
  .hp-po-mk:hover .s{text-decoration:underline}
  .hp-po-mk:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
  /* the only visual addition in 4D.3: a compact Trending notice.  No panel, no
     border, no icon — it sits on the page surface like the rest of the section. */
  .hp-tr-note{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-size:13px;color:var(--text-dim)}
  .hp-tr-note b{font-weight:600;color:var(--text)}
  .hp-tr-act{font:inherit;font-size:12.5px;font-weight:600;color:var(--gold-ink);
    background:none;border:0;padding:0;cursor:pointer}
  .hp-tr-act:hover{text-decoration:underline}
  .hp-tr-act:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
  /* the composer is the one element allowed modest input treatment; the slot only
     provides the gap to the feed below it */
  .cmp-slot{margin:0 0 14px}
  /* calm and compact — roughly the collapsed composer's footprint, no alert card,
     no icon, no border beyond the surface it sits on */
  .cmp-limit{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;
    background:var(--surface-2);border-radius:var(--radius-sm);padding:14px 16px;
    font-size:13px;color:var(--text-dim)}
  .cmp-limit b{font-weight:600;color:var(--text)}
  .hp-po-more{display:inline-block;margin-top:12px;font-size:12.5px;font-weight:600;
    color:var(--gold-ink);cursor:pointer}
  .hp-po-more:hover{text-decoration:underline}
  .hp-po:hover .act:not(.liked):not(.saved){color:var(--text-dim)}
  .hp-po:first-child{border-top:0;padding-top:2px}
  .hp-po:last-child{padding-bottom:2px}
  .hp-po-hd{display:flex;align-items:center;gap:9px}
  .hp-po-id{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;min-width:0;line-height:1.3}
  .hp-po-u{font-size:13.5px;font-weight:600;color:var(--text);cursor:pointer;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .hp-po-u:hover{color:var(--gold-ink)}
  /* one trust marker, not three: role when there is one, else verified */
  .hp-po-role{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    color:var(--text-faint);white-space:nowrap}
  .hp-po-t{font-size:11.5px;color:var(--text-faint);white-space:nowrap}
  .hp-po-t::before{content:'·';margin-right:7px;color:var(--border)}
  .hp-po-role::before{content:'·';margin-right:7px;color:var(--border)}
  .hp-po-h{font-size:15px;font-weight:700;line-height:1.35;margin:7px 0 0;cursor:pointer}
  .hp-po .hp-po-b{margin-top:5px;font-size:14px;line-height:1.55;cursor:pointer;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  /* /community is a reading surface: full body, and media gets more room.  These
     are the ONLY differences from the homepage window — everything else in the
     editorial system is shared. */
  .hp-po.hp-po-full .hp-po-b{display:block;-webkit-line-clamp:none;overflow:visible}
  .hp-po.hp-po-full .post-fig{max-height:320px}
  .hp-po .tags{margin-top:7px}
  /* the action row carries no separator rule here — the post border already divides */
  .hp-po .actions{margin-top:5px;padding-top:0;border-top:0;margin-left:-10px}
  /* the card pins the overflow right against its own border; on a borderless row
     that leaves it stranded, so it groups with the other actions here */
  .hp-po .act.more{margin-left:0}
  /* homepage media: reserved 16:9 box, so nothing reflows as the image decodes
     and a tall portrait can never run away with the feed */
  .hp-po .post-fig{margin-top:9px;aspect-ratio:16/9;max-height:220px;overflow:hidden;
    border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--border-soft)}
  .hp-po .post-fig .post-img{width:100%;height:100%;margin:0;max-height:none;
    object-fit:cover;border:0;border-radius:0}
  main.view .hp-sec .feed .post-img{max-height:300px}

  /* ── L4 Research — product cards with the app's own icon language ─────── */
  .hp-rs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .hp-rs{display:flex;gap:11px;background:var(--surface);border:1px solid var(--border);
    border-radius:12px;padding:13px 14px;text-decoration:none;color:inherit;cursor:pointer;
    transition:border-color .15s,box-shadow .15s,transform .15s}
  .hp-rs:hover{border-color:var(--gold);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
  .hp-rs:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
  .hp-rs-i{flex:none;width:31px;height:31px;border-radius:8px;background:var(--surface-2);
    display:flex;align-items:center;justify-content:center;color:var(--text-dim);
    transition:background .15s,color .15s}
  .hp-rs-i svg{width:17px;height:17px}
  .hp-rs:hover .hp-rs-i{background:var(--gold-soft);color:var(--gold-ink)}
  .hp-rs-b{min-width:0;display:flex;flex-direction:column}
  .hp-rs-n{font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
  /* supporting products stay the same size — the hierarchy is carried by type
     weight, icon emphasis and description length, never by a bigger box */
  .hp-rs.sub .hp-rs-n{font-size:13.5px;font-weight:600}
  .hp-rs.sub .hp-rs-i{color:var(--text-faint)}
  .hp-rs.sub .hp-rs-d{-webkit-line-clamp:1}
  .hp-rs-d{font-size:12px;line-height:1.48;color:var(--text-dim);margin-top:3px;flex:1;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .hp-rs-go{font-size:11.5px;font-weight:700;color:var(--gold-ink);margin-top:8px;
    display:inline-flex;align-items:center;gap:5px}
  .hp-rs:hover .hp-rs-go{gap:8px}

  /* ── Context rail: grouped supporting panels, not a detached sidebar ──── */
  .rc-g{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
    color:var(--text-faint);margin:2px 0 -9px;padding:0 2px}
  /* rail density — scoped so the News page's own .news-row spacing is untouched */
  .rightcol{gap:14px}
  .rightcol .news-row{padding:9px 16px;gap:9px}
  .rightcol .news-row .nt{font-size:12.5px;line-height:1.4}
  .rightcol .news-row .nm{font-size:10.5px;margin-top:2px}
  .rightcol .news-row .thumb{width:30px;height:30px;border-radius:7px;font-size:11px}
  .rightcol .rc-head{padding:10px 16px 8px}
  .rightcol .rule-list li{margin-bottom:7px;font-size:12px;line-height:1.45}
  .rightcol .p-pad{padding:12px 16px}
  .rc-g:first-child{margin-top:0}

  @media(max-width:1240px){
    .hp-wm{flex-basis:31.5%}
  }
  @media(max-width:1080px){
    .hp-rs-grid{grid-template-columns:repeat(2,1fr)}
    .hp-ed{grid-template-columns:minmax(0,1fr)}
    /* stacked, the lead figure spans the full column — a tall crop would tower
       over the headline it belongs to, so it caps instead of growing */
    .hp-ed-fig{max-height:220px}
    /* stacked, a single column of rows would strand half the width beside each
       short headline — pair them up instead */
    .hp-ed-side{margin-top:4px;display:grid;grid-template-columns:1fr 1fr;column-gap:22px}
    .hp-ed-it:nth-child(-n+2){border-top:0;padding-top:0}
    .hp-ed-it:nth-last-child(-n+2){padding-bottom:0}
  }
  @media(max-width:1079px){
    .hp-mp-foot{gap:12px}
    .hp-mp-group-label{display:block;margin-bottom:6px;font-size:11px;font-weight:700;
      letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim)}
    .hp-mp-indexes .hp-mp-line{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
      margin:0 -20px;padding:0 20px 4px;gap:8px;scroll-snap-type:x proximity;
      -webkit-overflow-scrolling:touch}
    .hp-mp-indexes .hp-mp-line::-webkit-scrollbar{display:none}
    .hp-mp-indexes .hp-mp-ix{flex:0 0 auto;min-height:44px;padding:7px 10px;
      border:1px solid var(--border-soft);border-radius:9px;scroll-snap-align:start}
    .hp-mp-indexes .hp-mp-ix::after{content:none}
    .hp-mp-bd{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:8px}
    .hp-mp-bd span{min-width:0;white-space:nowrap}
    .hp-mp-bd span:not(:last-child)::after{content:none}
    .hp-mobile-market{display:block}
    .hp-mm-movers{display:grid;grid-template-columns:1fr 1fr;gap:16px}
    .hp-mm-col h3{display:flex;align-items:center;gap:7px;margin:0 0 5px;font-size:12px;
      font-weight:700;color:var(--text-dim)}
    .hp-mm-list{border-top:1px solid var(--border-soft)}
    .hp-mm-stock{width:100%;min-height:52px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;
      align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border-soft);
      color:var(--text);text-align:left}
    .hp-mm-id{min-width:0;display:flex;flex-direction:column;gap:1px}
    .hp-mm-id b,.hp-mm-price{font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums}
    .hp-mm-id small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;
      color:var(--text-faint)}
    .hp-mm-sector-head{margin-top:24px}
    .hp-mm-sectors{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;
      padding:2px 0 6px;scroll-snap-type:x proximity;scrollbar-width:none;
      -webkit-overflow-scrolling:touch}
    .hp-mm-sectors::-webkit-scrollbar{display:none}
    .hp-mm-sector{flex:0 0 156px;min-height:52px;display:flex;align-items:center;
      justify-content:space-between;gap:10px;padding:8px 11px;border:1px solid var(--border);
      border-radius:10px;color:var(--text);text-align:left;scroll-snap-align:start}
    .hp-mm-sector span{min-width:0;font-size:14px;line-height:1.25}
    .hp-mm-sector b{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;
      white-space:nowrap}
  }
  /* tablet: the desktop inset would leave the chart under half the row here */
  @media(max-width:900px){
    .hp-mp-top{gap:48px}
    .hp-mp-chart{width:100%;justify-self:stretch}
  }
  @media(max-width:760px){
    .hp-mp-top{grid-template-columns:minmax(0,1fr);gap:6px}
    .hp-mp-chart{width:100%;justify-self:stretch}
    .hp-mp-chart,.hp-mp-chart canvas{height:110px}
  }
  @media(max-width:640px){
    .hp-h1{font-size:19px}
    .hp-mp-val{font-size:38px}
    .hp-mp-hd,.hp-mp-top{padding-left:16px;padding-right:16px}
    .hp-mp-foot{padding-left:16px;padding-right:16px}
    /* each item takes its own line here — a trailing middot would just dangle */
    .hp-mp-ix:not(:last-child)::after{content:none}
    .hp-rs-grid{grid-template-columns:1fr;gap:8px}
    .hp-ed-h{font-size:18px}
    .hp-ed-it-fig{width:104px}
    .hp-ed-it{padding:10px 0;gap:10px}
    /* back to one column — two would squeeze the headline to a few words */
    .hp-ed-side{grid-template-columns:1fr;column-gap:0}
    .hp-ed-it:nth-child(2){border-top:1px solid var(--border-soft);padding-top:10px}
    .hp-ed-it:nth-last-child(2){padding-bottom:10px}
    .hp-wm-grid{gap:9px}
    .hp-wm{flex-basis:46%}
    .hp-mp-indexes .hp-mp-line{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
    .hp-mm-movers{grid-template-columns:1fr;gap:20px}
  }
  @media(max-width:360px){
    .hp-mp-val{font-size:34px}
    .hp-mp-chart,.hp-mp-chart canvas{height:88px}
    .hp-mm-stock{grid-template-columns:minmax(0,1fr) auto auto;gap:6px}
    .hp-mm-stock .pct{font-size:12px;padding-left:5px;padding-right:5px}
  }
  /* ===== market page (premium) ===== */
  /* % pill — matches app small-text scale */
  .pct{display:inline-flex;align-items:center;gap:3px;font-family:var(--mono);font-size:12px;font-weight:700;padding:2px 6px;border-radius:6px;line-height:1.3;white-space:nowrap}
  .pct.up{color:var(--up);background:var(--up-soft)}
  .pct.down{color:var(--down);background:var(--down-soft)}
  /* hero */
  .mkt-hero{border-radius:16px;padding:16px 20px 4px;margin-bottom:16px;position:relative;overflow:hidden;border:1px solid var(--border-soft);
    background:var(--surface);box-shadow:var(--shadow-sm)}
  .mkt-idxtabs{margin-bottom:14px}
  .mkt-hero-main{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
  .mkt-hero-label{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim)}
  .mkt-hero-val{font-family:var(--mono);font-size:36px;font-weight:750;letter-spacing:-.03em;line-height:1.1;margin:4px 0 6px;font-variant-numeric:tabular-nums}
  .mkt-hero-chg{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .mkt-hero-chg .pts{font-family:var(--mono);font-size:14px;font-weight:700}
  .mkt-hero-chart{flex:0 0 auto;width:44%;max-width:440px;height:80px}
  .mkt-hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px;padding:14px 0 12px;border-top:1px solid var(--border-soft)}
  .mkt-hero-stats .stat{display:flex;flex-direction:column;gap:6px;min-width:0;background:none;border-radius:0;padding:0 0 0 16px;border-left:1px solid var(--border-soft)}
  .mkt-hero-stats .stat:first-child{padding-left:0;border-left:0}
  .mkt-hero-stats .k{font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim)}
  .mkt-hero-stats .v{font-size:15px;font-weight:700;min-height:22px;display:flex;align-items:center;gap:6px;white-space:nowrap;font-variant-numeric:tabular-nums}
  .mkt-breadth{display:flex;flex-direction:column-reverse;gap:7px}
  .breadth-bar{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--surface-3)}
  .breadth-bar.mini{height:6px;border-radius:3px}
  .breadth-bar .up{background:var(--up)}.breadth-bar .flat{background:var(--border)}.breadth-bar .down{background:var(--down)}
  /* section header — aligned to app .section-title scale */
  .mkt-sec-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:18px 2px 10px}
  .mkt-sec-head h2{font-size:15px;font-weight:700;letter-spacing:-.01em;margin:0}
  .mkt-sec-meta{font-size:12px;color:var(--text-faint);font-weight:500}
  .mkt-card{border-radius:14px}
  .mkt-card-t{font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--text-faint);display:flex;align-items:center;gap:7px;margin-bottom:6px}
  .mkt-card-t .dot{width:7px;height:7px;border-radius:50%}.mkt-card-t .dot.up{background:var(--up)}.mkt-card-t .dot.down{background:var(--down)}
  /* top movers: titles carry the gainer/loser split; desktop shows the company name the mobile list already had */
  .mkt-mover-grid .mkt-card-t{font-size:14px;font-weight:700;letter-spacing:-.01em;text-transform:none;color:var(--text);margin-bottom:10px}
  .mkt-mover-grid .mkt-card-t .dot{width:8px;height:8px}
  .mkt-mover-grid .mkt-row-id{display:flex;flex-direction:column;gap:1px;min-width:0}
  .mkt-mover-grid .mkt-mobile-name{display:block;max-width:190px;font-size:12px;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mkt-mover-grid .tk-cell{min-width:0}
  /* the per-row sparkline is a seeded placeholder, not price history, so movers don't show it */
  .mkt-mover-grid .spk,.mkt-mover-grid .mkt-trend{display:none}
  .mkt-mv-state{padding:22px 4px;font-size:13px;color:var(--text-dim);text-align:center}
  /* ===== /market page system — scoped to .mkt-page so other routes keep their look ===== */
  .mkt-page .page-head{align-items:center;margin-bottom:16px}
  .mkt-page .page-head h1{font-size:30px;letter-spacing:-.035em}
  .mkt-page .mkt-sec-head{margin:30px 2px 12px;align-items:baseline}
  .mkt-page .mkt-sec-head h2{font-size:17px;font-weight:750;letter-spacing:-.02em}
  .mkt-page .mkt-card{border-radius:14px;border-color:var(--border-soft);box-shadow:none}
  .mkt-page .mkt-hero-main{flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:40px}
  .mkt-page .mkt-hero-l{flex:0 0 auto}
  .mkt-page .mkt-hero-sub{font-weight:500;text-transform:none;letter-spacing:0;color:var(--text-faint);margin-left:4px}
  .mkt-page .mkt-hero-fig{flex:0 1 300px;min-width:0;margin:0 0 0 auto;display:flex;flex-direction:column;gap:4px}
  .mkt-page .mkt-hero-chart{width:100%;max-width:none;height:52px}
  .mkt-page .mkt-hero-fig figcaption{font-size:11px;color:var(--text-faint);text-align:right}
  .mkt-page .heatmap{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
  .mkt-page .heat-tile{min-height:60px;padding:10px 12px}
  .mkt-page .heat-tile .ht-name{font-size:12.5px}
  .mkt-page .heat-tile .ht-pct{font-variant-numeric:tabular-nums}
  .mkt-page .heat-tile:focus-visible,.mkt-page .mkt-table tbody tr:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
  .mkt-sec-filter{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 2px 0;font-size:13px;color:var(--text-dim)}
  .mkt-sec-filter b{color:var(--text)}
  #mkt-browse{scroll-margin-top:110px}
  .mkt-sec-filter a{color:var(--gold);font-weight:600;cursor:pointer;text-decoration:none}
  .mkt-sec-filter button{border:1px solid var(--border);background:var(--surface);color:var(--text-dim);border-radius:8px;padding:3px 10px;font:inherit;font-size:12px;cursor:pointer}
  .mkt-page .mkt-table td.r,.mkt-page .mkt-table .px{font-variant-numeric:tabular-nums}
  /* Jelajah Saham filter bar: search + one sector dropdown + live count on a single line */
  .mkt-page .mkt-filterbar{flex-direction:row;align-items:center;gap:10px;margin:0 0 8px}
  .mkt-page .mkt-search-wrap{flex:1 1 auto;min-width:0}
  .mkt-page .mkt-search{height:40px;padding-top:0;padding-bottom:0;border-radius:10px}
  .mkt-sector-pick{position:relative;flex:0 0 auto}
  .mkt-sector-pick select{appearance:none;-webkit-appearance:none;height:40px;min-width:210px;max-width:280px;padding:0 36px 0 14px;border:1px solid var(--border);border-radius:10px;
    background:var(--surface-2);color:var(--text);font:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:border-color .15s,box-shadow .15s}
  .mkt-sector-pick::after{content:'';position:absolute;right:15px;top:50%;width:7px;height:7px;margin-top:-5px;border-right:2px solid var(--text-faint);border-bottom:2px solid var(--text-faint);transform:rotate(45deg);pointer-events:none}
  .mkt-sector-pick select:hover{border-color:var(--text-faint)}
  .mkt-sector-pick select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
  .mkt-browse-count{flex:none;font-size:12px;color:var(--text-faint);white-space:nowrap;font-variant-numeric:tabular-nums;min-width:72px;text-align:right}
  /* every stock table on /market: ticker + company name, same row height as Top Movers */
  .mkt-page .mkt-table .mkt-row-id{display:flex;flex-direction:column;gap:1px;min-width:0}
  .mkt-page .mkt-table .mkt-mobile-name{display:block;max-width:240px;font-size:12px;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mkt-page .mkt-table .xtra .vol-x{background:none;padding:0;border-radius:0;color:var(--text);font-weight:600;font-size:13px}
  /* Smart Screen: reasons are columns on the row (desktop), a plain text line on mobile — no pills */
  .mkt-page .hh-srow-smart .sm-m{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap}
  .mkt-page .hh-srow-smart .sm-m.up{color:var(--up)}.mkt-page .hh-srow-smart .sm-m.down{color:var(--down)}
  .mkt-page .hh-srow-smart .cell-sub{font-size:12px;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
  .mkt-page .hh-srow-smart .why{gap:12px}
  .mkt-page .hh-srow-smart .why span{background:none;padding:0;border-radius:0;font-size:12px;font-weight:500;color:var(--text-dim)}
  .mkt-page .hh-srow-smart .why span.up{color:var(--up)}.mkt-page .hh-srow-smart .why span.down{color:var(--down)}
  @media(min-width:901px){.mkt-page .hh-srow-smart .why{display:none}}
  /* Smart Screen now holds 10 screens: tabs get their own full-width line under the title */
  @media(min-width:1080px){
    .mkt-page .smart-head{flex-direction:column;align-items:flex-start;gap:12px}
    /* same plain text-tab language as the section nav: no boxes, active = underline */
    .mkt-page .smart-head .pill-tabs2{width:100%;max-width:100%;flex-wrap:wrap;gap:4px 16px;padding:0;margin:0;background:none;border-radius:0;border-bottom:1px solid var(--border-soft)}
    .mkt-page .smart-head .pill-tabs2 button{flex:none;white-space:nowrap;padding:8px 0;background:none;box-shadow:none;border-radius:0;
      font-size:13px;font-weight:500;color:var(--text-dim);border-bottom:2px solid transparent;margin-bottom:-1px}
    .mkt-page .smart-head .pill-tabs2 button:hover{color:var(--text)}
    .mkt-page .smart-head .pill-tabs2 button.on{color:var(--text);font-weight:600;background:none;box-shadow:none;border-bottom-color:var(--text)}
  }
  @media(max-width:900px){.mkt-page .hh-srow-smart .cell-sub{display:none}
    .mkt-page .mkt-table tr.hh-srow-smart .why{flex-wrap:wrap;white-space:normal;overflow:visible;column-gap:10px;row-gap:2px}}
  .mkt-page .mkt-hero-prev{margin-top:6px;font-size:12px;color:var(--text-faint)}
  .mkt-page .mkt-hero-prev .mono{color:var(--text-dim);font-variant-numeric:tabular-nums}
  .mkt-page .mkt-unch{color:var(--text-dim)}
  /* colour key: same two hues and alpha range as heatColor() (0.10 → 0.65 at ±3%) */
  .mkt-heat-key{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;font-size:11px;color:var(--text-faint)}
  .mkt-heat-key i{width:120px;height:6px;border-radius:3px;background:linear-gradient(90deg,rgba(255,69,58,.65),rgba(255,69,58,.1) 49.5%,rgba(48,209,88,.1) 50.5%,rgba(48,209,88,.65))}
  .mkt-heat-key em{font-style:normal;margin-left:6px}
  /* in-page section nav: sticks under the site header */
  .mkt-jump{position:sticky;top:96px;z-index:5;display:flex;gap:22px;margin:0 2px 16px;padding:0;background:var(--bg);border-bottom:1px solid var(--border-soft)}
  .mkt-jump a{flex:none;padding:11px 0 10px;font-size:13px;font-weight:500;color:var(--text-dim);text-decoration:none;white-space:nowrap;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .12s}
  .mkt-jump a:hover{color:var(--text)}
  .mkt-jump a.on{color:var(--text);font-weight:600;border-bottom-color:var(--text)}
  .mkt-jump a:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
  .mkt-page [id^="mkt-s-"],#mkt-browse{scroll-margin-top:160px}
  .mkt-foot{margin:22px 2px 4px;font-size:12px;line-height:1.55;color:var(--text-faint);max-width:72ch}
  /* mobile: every sector visible at once (2-col grid) instead of a 2-tile carousel */
  @media(max-width:1079px){
    .mkt-page .mkt-sector-panel .heatmap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;overflow:visible;margin:0;padding:0;scroll-snap-type:none}
    .mkt-page .mkt-sector-panel .heat-tile{flex:none;min-height:50px;padding:8px 10px;gap:3px}
    .mkt-page .mkt-sector-panel .ht-name{font-size:13px}
    .mkt-page .mkt-sec-head{margin-top:26px}
    .mkt-page .page-head h1{font-size:26px}
    .mkt-page .mkt-hero-main{flex-wrap:wrap;gap:10px}
    .mkt-page .mkt-hero-l,.mkt-page .mkt-hero-fig{flex:1 1 100%;margin:0}
    .mkt-page .mkt-hero-chart{height:48px}
    .mkt-jump{top:50px;gap:18px;margin:0 -16px 12px;padding:0 16px;overflow-x:auto;scrollbar-width:none}
    .mkt-jump::-webkit-scrollbar{display:none}
    .mkt-page [id^="mkt-s-"],#mkt-browse{scroll-margin-top:110px}
    .mkt-page .mkt-hero-fig figcaption{text-align:left}
  }
  /* heatmap — denser */
  .heatmap{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:7px;margin-top:2px}
  .heat-tile{display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-height:52px;padding:9px 11px;border-radius:11px;border:1px solid transparent;cursor:pointer;transition:transform .12s,box-shadow .12s;text-align:left}
  .heat-tile:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.1)}
  .heat-tile.sel{outline:2px solid var(--gold);outline-offset:1px}
  .heat-tile .ht-name{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .heat-tile .ht-row{display:flex;align-items:baseline;justify-content:space-between;gap:6px}
  .heat-tile .ht-pct{font-family:var(--mono);font-size:13.5px;font-weight:700}
  .heat-tile .ht-n{font-family:var(--mono);font-size:10px;color:var(--text-dim);font-weight:600}
  /* table rows */
  .mkt-table td{vertical-align:middle}
  .mkt-rank{width:24px;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--text-faint);text-align:center}
  .tk-cell{display:flex;align-items:center;gap:9px;min-width:0}
  .tk-badge{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:10.5px;color:#fff;letter-spacing:-.02em}
  .tk-logoimg{width:26px;height:26px;border-radius:50%;flex:none;object-fit:cover}
  .mkt-table .px{font-weight:600;white-space:nowrap}
  .mkt-table tbody td{height:46px}/* uniform row height so left/right mover tables line up */
  .mkt-table .sym{white-space:nowrap}
  .mkt-mobile-name{display:none}
  .mkt-table .xtra .vol-x,.vol-x{font-family:var(--mono);font-weight:700;color:var(--gold);background:var(--gold-soft);padding:2px 7px;border-radius:6px;font-size:12px}
  .mkt-table .spk{width:60px}
  /* filter bar */
  .mkt-filterbar{display:flex;flex-direction:column;gap:10px;margin:2px 0 6px}
  .mkt-search-wrap{position:relative;display:flex;align-items:center}
  .mkt-search-wrap svg{position:absolute;left:13px;width:16px;height:16px;color:var(--text-faint);pointer-events:none}
  .mkt-search{width:100%;background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:10px 14px 10px 38px;color:var(--text);outline:none;font-size:14px;transition:border-color .15s,box-shadow .15s}
  .mkt-search:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
  /* Market page tablet (iPad portrait ~768-834px): wide enough for desktop, but
     the two narrow mover tables and the 3-col hero stats read cramped. */
  @media(max-width:880px){
    .grid-2{grid-template-columns:1fr}
    .mkt-hero-stats{grid-template-columns:repeat(2,1fr)}
    .mkt-hero-chart{display:none}
    .heatmap{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  }
  @media(max-width:640px){
    .mkt-hero-val{font-size:26px}
    .mkt-hero-stats{grid-template-columns:1fr;gap:11px}
    .mkt-hero-chart{display:none}
    .heatmap{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
    .tk-badge{display:none}
  }
  .hero-idx .val{font-family:var(--mono);font-size:32px;font-weight:700;letter-spacing:-.025em}
  .sect-badge{font-size:11px;font-weight:500;color:var(--text-dim);background:var(--surface-2);padding:4px 11px;border-radius:6px}
  .tk-logo{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:17px;color:#231800;overflow:hidden;flex:none;position:relative}
  .tk-logo-img{width:100%;height:100%;object-fit:contain;display:block;border-radius:50%}
  .tk-logo-fallback{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:17px;border-radius:50%}
  .tk-price{font-family:var(--mono);font-size:28px;font-weight:700;letter-spacing:-.025em}
  .gauge{height:10px;border-radius:5px;overflow:hidden;display:flex;background:var(--down-soft)}
  .gauge .bull{background:var(--up)}
  .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
  @media(max-width:560px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
  .stat{background:var(--surface-2);border-radius:10px;padding:12px 14px}
  .stat .k{font-size:11px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.04em;font-weight:500}
  .stat .v{font-family:var(--mono);font-weight:600;font-size:15px;margin-top:4px}
  /* ---------- Profile ---------- */
  /* flat card, no gradient. the only colour is a thin accent rule keyed to the user's avatar. */
  .prof{position:relative;padding:24px 24px 0;border:1px solid var(--border);border-radius:16px;background:var(--surface);overflow:hidden}
  .prof::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--prof-hue);opacity:.9}
  .prof-top{position:relative;display:flex;gap:16px;align-items:flex-start}
  .prof-ava{width:72px;height:72px;flex:none;border-radius:22px;display:grid;place-items:center;
    font-family:var(--mono);font-weight:700;font-size:26px;color:#fff}
  .prof-id{flex:1;min-width:0;padding-top:2px}
  .prof-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .prof-name h2{font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
  .prof-handle{font-family:var(--mono);font-size:13px;color:var(--text-faint);margin-top:2px}
  .prof-acts{display:flex;gap:7px;flex:none}
  .alert-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 11px;margin-top:6px;
    background:var(--surface-2);border:1px solid var(--border-soft);border-radius:9px;font-size:13.5px}
  .alert-del{width:24px;height:24px;border-radius:6px;color:var(--text-faint);font-size:13px;flex:none}
  .alert-del:hover{background:var(--down-soft);color:var(--down)}
  .prof-bio{margin-top:13px;font-size:14.5px;line-height:1.55;max-width:600px}
  .prof-link{display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-size:13px;color:var(--gold);font-weight:500}
  .prof-link:hover{text-decoration:underline}
  /* stats as one inline strip, not four floating columns */
  .prof-stats{display:flex;align-items:center;gap:0;margin:16px -24px 0;padding:0 24px;border-top:1px solid var(--border-soft);flex-wrap:wrap}
  .prof-stat{padding:13px 0;margin-right:26px;display:flex;align-items:baseline;gap:6px}
  .prof-stat b{font-size:15px;font-weight:750;font-variant-numeric:tabular-nums}
  .prof-stat span{font-size:12.5px;color:var(--text-faint)}
  .prof-rep{margin-left:auto;display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:20px;
    background:var(--gold-soft);font-size:12.5px;font-weight:600;color:var(--gold);align-self:center}
  .prof-tabs{display:flex;gap:2px;margin:14px 0 12px;border-bottom:1px solid var(--border-soft)}
  .prof-tabs button{position:relative;padding:9px 14px;font-size:13.5px;font-weight:600;color:var(--text-faint);transition:color .15s}
  .prof-tabs button:hover{color:var(--text-dim)}
  .prof-tabs button.on{color:var(--text)}
  .prof-tabs button.on::after{content:'';position:absolute;left:10px;right:10px;bottom:-1px;height:2.5px;background:var(--gold);border-radius:3px 3px 0 0}
  .prof-tabs .cnt{font-family:var(--mono);font-size:11.5px;opacity:.7;margin-left:4px}
  @media(max-width:480px){
    .prof{padding:18px 15px 0;border-radius:13px}
    .prof-ava{width:56px;height:56px;font-size:20px;border-radius:17px}
    .prof-name h2{font-size:18px}
    /* buttons drop to their own full-width row so they stop squeezing the name */
    .prof-top{flex-wrap:wrap}
    .prof-acts{flex-basis:100%;margin-top:12px}
    .prof-acts .btn{flex:1}
    .prof-stats{margin:13px -15px 0;padding:0 15px}
    .prof-stat{margin-right:18px;padding:11px 0}
    .prof-rep{margin:0 0 11px}
  }
  .field{display:flex;flex-direction:column;gap:7px;margin-top:16px}
  .field label{font-size:12.5px;font-weight:500;color:var(--text-dim)}
  .field input,.field textarea{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:11px 14px;color:var(--text);outline:none;font-size:14px;transition:all .2s}
  .field input:focus,.field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
  .empty{text-align:center;padding:48px 24px;color:var(--text-faint);font-size:14px}
  .spark{display:block}
  /* ---------- News list ---------- */
  .news-item{position:relative;display:flex;gap:15px;padding:14px 18px 13px 16px;cursor:pointer;transition:background .14s}
  .news-item:hover{background:var(--surface-2)}
  .news-item+.news-item{border-top:1px solid var(--border-soft)}
  /* sentiment = tinted rule */
  .news-item::before{content:'';position:absolute;left:0;top:-1px;bottom:-1px;width:3px;background:var(--st);opacity:0;transition:opacity .14s}
  .news-item:hover::before{opacity:.85}
  .ni-when{flex:none;width:46px;padding-top:1px;text-align:right;display:flex;flex-direction:column;gap:2px}
  .ni-clock{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--text-dim);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
  .ni-ago{font-size:10.5px;color:var(--text-faint);white-space:nowrap}
  .ni-main{flex:1;min-width:0}
  .ni-title{font-size:15.5px;font-weight:600;line-height:1.4;letter-spacing:-.011em;margin:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .news-item:hover .ni-title{color:var(--gold-ink)}
  .ni-meta{display:flex;align-items:center;gap:7px;margin-top:7px;font-size:12px;color:var(--text-faint);flex-wrap:nowrap;overflow:hidden}
  .ni-meta>*{flex:none}.ni-meta .ni-src{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .ni-fav{width:14px;height:14px;border-radius:3px;flex:none;object-fit:cover}
  .ni-src{font-weight:600;color:var(--text-dim)}
  .ni-tag{font-size:10.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
    color:var(--st);background:color-mix(in srgb,var(--st) 13%,transparent);padding:2px 7px;border-radius:5px}
  .ni-cash{font-size:11px;padding:1px 6px}
  .ni-impact{font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;background:var(--surface-3);color:var(--text-dim);white-space:nowrap}
  /* absolute: in-flow hidden buttons padded every row */
  .ni-acts{position:absolute;right:14px;top:50%;transform:translateY(-50%);
    display:flex;gap:2px;opacity:0;pointer-events:none;transition:opacity .14s}
  .news-item:hover .ni-acts,.news-item:focus-within .ni-acts{opacity:1;pointer-events:auto}
  .ni-act{font-size:12px;font-weight:600;color:var(--text-faint);padding:4px 9px;border-radius:14px;transition:all .13s}
  .ni-act:hover{background:var(--surface-3);color:var(--text)}
  .ni-act.on{color:var(--gold)}
  /* touch: back in flow */
  @media(hover:none){
    .ni-acts{position:static;transform:none;opacity:1;pointer-events:auto;margin:8px 0 0 -9px}
    .news-item::before{opacity:.7}
  }
  .news-full{display:flex;gap:16px;padding:16px 18px;cursor:pointer;transition:background .15s}
  .news-full:hover{background:var(--surface-2)}
  .news-full .thumb{width:112px;height:76px;border-radius:10px;flex:none;display:grid;place-items:center;font-family:var(--mono);font-weight:700;color:#fff;font-size:18px}
  .news-daysep{padding:12px 18px 4px;font-size:12px;font-weight:700;color:var(--text-faint);text-transform:uppercase;letter-spacing:.04em}

  /* ---------- Modal / menu / toast ---------- */
  .overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:100;display:grid;place-items:center;padding:20px;animation:fade .18s}
  .modal{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);animation:pop .2s cubic-bezier(.2,.9,.3,1.1);max-height:92vh;overflow:auto}
  .modal.wide{max-width:540px}
  .modal-pad{padding:28px;position:relative}
  .modal h2{margin:0 0 4px;font-size:20px;font-weight:700;letter-spacing:-.025em}
  .modal .sub{color:var(--text-dim);font-size:14px;margin:0 0 20px;font-weight:400}
  .modal-x{position:absolute;top:-6px;right:-6px}
  .steps{display:flex;gap:6px;margin-bottom:20px}
  .steps .s{flex:1;height:3px;border-radius:2px;background:var(--surface-3)}
  .steps .s.on{background:var(--gold)}
  .auth-tabs{display:flex;background:var(--surface-2);border-radius:10px;padding:3px;margin-bottom:22px}
  .auth-tabs button{flex:1;padding:9px;border-radius:8px;font-weight:500;color:var(--text-dim);transition:all .15s}
  .auth-tabs button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}
  .namegen{display:flex;gap:8px;align-items:center;margin-top:8px}
  .namegen .g{font-family:var(--mono);font-weight:600;font-size:16px;flex:1;background:var(--surface-2);border:1px dashed var(--border);border-radius:10px;padding:11px 14px;color:var(--gold-ink)}
  .nudge{display:flex;gap:10px;background:var(--gold-soft);border:1px solid color-mix(in srgb,var(--gold) 20%,transparent);border-radius:10px;padding:12px 14px;font-size:13px;margin-top:16px;line-height:1.5}
  .ackrow{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:13px;color:var(--text-dim);line-height:1.5}
  .ackrow input{margin-top:2px;accent-color:var(--gold);width:16px;height:16px}
  .kyc-step{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--border-soft)}
  .kyc-step:last-child{border-bottom:none}
  .kyc-ic{width:34px;height:34px;border-radius:10px;background:var(--surface-2);display:grid;place-items:center;color:var(--gold-ink);flex:none;font-weight:600}
  .report-opt{display:flex;gap:10px;align-items:center;padding:12px 14px;border:1px solid var(--border);border-radius:10px;margin-top:8px;font-size:14px;transition:all .15s}
  .report-opt:hover{border-color:var(--gold);background:var(--gold-soft)}
  .menu{position:fixed;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);z-index:90;overflow:hidden;min-width:200px;animation:pop .12s}
  .menu button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;font-size:13.5px;text-align:left;color:var(--text);font-weight:400;transition:background .12s}
  .menu button:hover{background:var(--surface-2)}
  .menu button.danger{color:var(--down)}
  .menu .sep{height:1px;background:var(--border-soft)}
  .ac-item{display:flex;align-items:center;gap:11px;padding:10px 14px;cursor:pointer;transition:background .12s}
  .ac-item:hover{background:var(--surface-2)}
  .ac-item.ac-on{background:var(--surface-2)}
  .ac-item .as{font-family:var(--mono);font-weight:600;color:var(--gold-ink);width:60px}
  .ac-item .an{font-size:12.5px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--btn);color:var(--btn-ink);padding:12px 22px;border-radius:12px;z-index:200;font-size:14px;font-weight:500;box-shadow:var(--shadow);animation:toastin .25s}
  .share-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px 28px;z-index:210;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,.18);animation:sharePopIn .35s cubic-bezier(.2,.9,.3,1.1);display:flex;flex-direction:column;align-items:center;gap:10px;min-width:200px}
  .share-popup .sp-ic{width:44px;height:44px;border-radius:50%;background:var(--gold-soft);color:var(--gold-ink);display:grid;place-items:center;font-size:22px;animation:popBounce .5s cubic-bezier(.2,.9,.3,1.1)}
  .share-popup .sp-msg{font-size:15px;font-weight:600;color:var(--text);letter-spacing:-.02em}
  .share-popup .sp-url{font-size:12px;color:var(--text-dim);max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  @keyframes sharePopIn{from{opacity:0;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
  @keyframes sharePopOut{from{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.9)}}

  /* ---------- Live TV floating player ---------- */
  #livetv{position:fixed;right:24px;bottom:24px;z-index:95}
  .ltv-panel{cursor:default}
  .ltv-head{cursor:grab}
  .ltv-head:active{cursor:grabbing}
  .ltv-resize{position:absolute;width:14px;height:14px;bottom:0;right:0;cursor:nwse-resize;z-index:2}
  .ltv-resize::after{content:'';position:absolute;bottom:4px;right:4px;width:8px;height:8px;border-right:2px solid var(--text-faint);border-bottom:2px solid var(--text-faint);opacity:.5}
  @media(max-width:560px){#livetv{right:12px;bottom:12px}}
  .ltv-launch{display:flex;align-items:center;gap:9px;background:var(--btn);color:var(--btn-ink);border-radius:12px;padding:11px 18px;font-weight:500;font-size:14px;box-shadow:var(--shadow);cursor:pointer;animation:pop .2s;transition:all .2s}
  .ltv-launch:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(0,0,0,.15)}
  .ltv-launch .rec{width:8px;height:8px;border-radius:50%;background:#ff3b30;animation:pulse 1.6s infinite}
  .ltv-panel{width:380px;max-width:calc(100vw - 24px);background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;animation:pop .2s}
  .ltv-panel.min{width:240px}
  .ltv-head{display:flex;align-items:center;gap:6px;padding:10px 10px 10px 14px}
  .ltv-head .ttl{display:flex;align-items:center;gap:8px;min-width:0;font-weight:600;font-size:13.5px}
  .ltv-head .ttl .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ltv-head .rec{width:7px;height:7px;border-radius:50%;background:#ff3b30;flex:none;animation:pulse 1.6s infinite}
  .ltv-ibtn{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--text-dim);flex:none;transition:all .15s}
  .ltv-ibtn:hover{background:var(--surface-2);color:var(--text)}
  .ltv-video{position:relative;width:100%;aspect-ratio:16/9;background:#000}
  .ltv-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
  .ltv-tabs{display:none;gap:4px;padding:8px 8px 4px}
  .ltv-tabs button{flex:1;padding:7px;border-radius:7px;font-size:12.5px;font-weight:500;color:var(--text-dim);background:var(--surface-2);transition:all .15s}
  .ltv-tabs button.on{background:var(--text);color:var(--bg)}
  .ltv-list{display:none;max-height:210px;overflow:auto;padding:6px 8px 8px}
  .ltv-panel.picking .ltv-tabs,.ltv-panel.picking .ltv-list{display:flex}
  .ltv-panel.picking .ltv-list{display:block}
  .ltv-ch{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13.5px;font-weight:500;transition:background .12s}
  .ltv-ch:hover{background:var(--surface-2)}
  .ltv-ch.on{background:var(--gold-soft);color:var(--gold-ink)}
  .ltv-ch .logo{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:600;font-family:var(--mono);flex:none}
  .ltv-foot{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-top:1px solid var(--border-soft);font-size:12px;color:var(--text-faint)}
  .ltv-foot a{color:var(--gold-ink);font-weight:500}
  .ltv-panel.min .ltv-tabs,.ltv-panel.min .ltv-list,.ltv-panel.min .ltv-foot{display:none}

  @keyframes fade{from{opacity:0}to{opacity:1}}
  @keyframes pop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
  @keyframes toastin{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
  @keyframes popBounce{0%{transform:scale(0) rotate(-10deg);opacity:0}50%{transform:scale(1.15) rotate(2deg)}70%{transform:scale(.95)}100%{transform:scale(1) rotate(0deg);opacity:1}}
  @keyframes shake{0%,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-4px)}20%,40%,60%,80%{transform:translateX(4px)}}
  .limit-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:300;display:grid;place-items:center;padding:20px;animation:fade .2s}
  .limit-card{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:32px 28px 24px;text-align:center;box-shadow:0 8px 40px rgba(0,0,0,.25);animation:pop .25s cubic-bezier(.2,.9,.3,1.1)}
  .limit-card .icon{font-size:52px;animation:popBounce .5s cubic-bezier(.2,.9,.3,1.1)}
  .limit-card h3{font-size:18px;font-weight:700;margin:14px 0 6px;letter-spacing:-.02em}
  .limit-card p{font-size:14px;color:var(--text-dim);line-height:1.5;margin:0 0 18px}
  .limit-card .reset-time{display:inline-block;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:6px 14px;font-size:13px;font-weight:600;color:var(--text);margin-bottom:18px}
  .limit-card .btn{width:100%;padding:11px;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;border:none;background:var(--btn);color:var(--btn-ink);transition:opacity .15s}
  .limit-card .btn:hover{opacity:.85}
  .limit-card .btn:active{transform:scale(.97)}
  .view{animation:fade .15s}
  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

  /* ---------- Bottom nav (mobile) ---------- */
  .btm-nav{display:none}
  @media(max-width:1079px){
    .btm-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:50;background:var(--surface);border-top:1px solid var(--border);padding:4px 0 env(safe-area-inset-bottom,4px);justify-content:space-around}
    .btm-nav a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;font-size:10px;color:var(--text-faint);font-weight:500;min-width:48px;min-height:44px;-webkit-tap-highlight-color:transparent}
    .btm-nav a.on{color:var(--gold-ink)}
    .btm-nav a svg{width:22px;height:22px}
  }

  /* ---------- Mobile responsive ---------- */
  @media(max-width:480px){
    /* Layout */
    .section-title{font-size:13px;margin:12px 2px 8px}
    .panel{border-radius:10px}
    .p-pad{padding:14px !important}
    /* Market Pulse compact */
    .mp-hero{padding:12px 14px 10px}
    .mp-hero .mp-label{font-size:10px}
    .mp-hero .mp-val{font-size:24px}
    .mp-hero .mp-chg{font-size:12px}
    .mp-hero .mp-spark{max-height:48px}
    .mp-sub-idx .mp-idx{padding:8px 10px}
    .mp-idx .mp-idx-name{font-size:10px}
    .mp-idx .mp-idx-val{font-size:12px}
    .mp-idx .mp-idx-chg{font-size:10.5px}
    .mp-breadth span{font-size:12px}
    /* Posts compact */
    .feed{gap:8px}
    .hp-feed{gap:0}
    .hp-sec.hp-brk{padding-top:18px;margin-top:22px}
    .hp-po{padding:11px 0}
    .hp-po-u{font-size:13px}
    .hp-po .hp-po-b{font-size:13.5px;line-height:1.5}
    .hp-po .post-fig{max-height:180px}
    .hp-po.hp-po-full .post-fig{max-height:240px}
    /* keep homepage taps comfortable even though the row is denser */
    .hp-po .act{padding:9px 10px;min-height:40px}
    .post{padding:12px 14px}
    .post .head{gap:8px}
    .ava{width:32px;height:32px;font-size:12px;border-radius:8px}
    .ava.sm{width:26px;height:26px;font-size:10px}
    .name{font-size:13px;gap:4px}
    .handle{font-size:11.5px}
    .badge-anon,.badge-verify{font-size:10px;padding:1px 6px}
    .post .body{margin-top:8px;font-size:13.5px;line-height:1.55}
    .post .tags{margin-top:8px;gap:5px}
    .senti-tag{font-size:10.5px;padding:3px 9px}
    .post .actions{margin-top:8px;gap:2px}
    .act{padding:4px 8px;font-size:12px;gap:4px}
    .act svg{width:14px;height:14px}
    /* Composer */
    .composer{padding:10px 12px;border-radius:12px}
    .cmp-top{gap:8px}
    .composer textarea{font-size:14px}
    .cmp-foot{padding-left:0;gap:5px;margin-top:9px}
    .cmp-ico{width:31px;height:31px}
    .cmp-ico svg{width:17px;height:17px}
    .cmp-send{padding:7px 15px;font-size:13px}
    .cmp-disc{margin:7px 0 0;font-size:10px}
    .cmp-hint{display:none !important}
    /* Ticker detail */
    .tk-logo{width:40px !important;height:40px !important;font-size:14px !important;border-radius:50% !important}
    .tk-logo-img{border-radius:50% !important}
    .tk-logo-fallback{border-radius:50% !important}
    .tk-price{font-size:24px !important}
    .card-title{font-size:13px !important}
    .gauge{height:6px !important}
    .stat{padding:10px !important}
    .stat .k{font-size:11px}
    .stat .v{font-size:13px !important}
    /* Tabs */
    .tabs button{font-size:12px;padding:8px 6px}
    .pill-tabs2 button{font-size:11px;padding:4px 9px}
    /* Auth */
    .auth-page{padding:16px 0}
    .auth-page .auth-logo{margin-bottom:20px}
    .auth-page .auth-logo img{height:26px}
    .auth-page .auth-card{padding:20px 16px;border-radius:12px}
    .auth-page .auth-card h1{font-size:18px}
    .auth-page .auth-card .sub{font-size:13px;margin-bottom:16px}
    .auth-steps{margin-bottom:16px}
    .btn{padding:8px 16px;font-size:13px;border-radius:8px}
    .btn-block{padding:10px 16px}
    /* Modal */
    .modal{margin:8px;max-width:calc(100vw - 16px);border-radius:12px}
    .modal.wide{max-width:calc(100vw - 16px)}
    /* News */
    .news-grid{grid-template-columns:1fr !important}
    .news-header{gap:6px}
    .news-header h1{font-size:18px}
    .news-search{flex:1 1 100%}
    .news-search input{font-size:12px;padding:7px 10px 7px 30px}
    .news-row{padding:8px 12px}
    .news-row .nt{font-size:12.5px}
    .news-row .nm{font-size:10.5px}
    .news-row .thumb{width:44px;height:44px;border-radius:8px}
    .news-full{padding:10px 12px;gap:8px}
    .news-full .thumb{width:72px;height:52px;border-radius:8px}
    .news-full>div{overflow:hidden}
    .news-full>div>div{overflow:hidden;text-overflow:ellipsis}
    .news-item{padding:11px 13px 10px 11px;gap:10px}
    .ni-when{width:38px}
    .ni-clock{font-size:11.5px}
    .ni-ago{display:none}
    .ni-title{font-size:14px;line-height:1.36}
    .ni-meta{font-size:11px;margin-top:6px}
    .ni-acts{margin-top:7px}
    .news-header p{font-size:11px}
    .chiprow{gap:4px}
    /* Watchlist compact */
    .page-head h1{font-size:18px}
    .page-head p{display:none}
    .wl-detail-table th:nth-child(n+6),.wl-detail-table td:nth-child(n+6){display:none}
    .wl-detail-table th:nth-child(3),.wl-detail-table td:nth-child(3){display:none}
    .wl-detail-table th:nth-child(1),.wl-detail-table td:nth-child(1){display:none}
    .wl-detail-table td,.wl-detail-table th{padding:8px 6px;font-size:12px}
    .wl-detail-table .sym{font-size:12px}
    .tk-dot-lg{width:28px !important;height:28px !important;font-size:11px !important}
    /* Misc */
    #livetv{right:8px;bottom:56px}
    .ltv-panel{width:calc(100vw - 16px)}
    .broker-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
    .broker-table table{min-width:500px}
    .stat-grid{grid-template-columns:repeat(2,1fr) !important}
    .grid-2{grid-template-columns:1fr !important}
    .wl-result .nm{max-width:80px}
    /* Market compact */
    .page-head{margin-bottom:10px}
    .page-head h1{font-size:20px}
    .page-head p{display:none}
    .page-head+div[style*="font-size:11.5px"]{display:none}
    .hero-idx{margin-bottom:8px !important}
    .hero-idx .card-title{font-size:10px;margin-bottom:8px}
    .hero-idx .val{font-size:24px !important}
    .hero-idx .spark{height:48px !important}
    .card-title{font-size:10px;margin-bottom:8px}
    .mkt-table th{font-size:10px;padding:0 6px 6px}
    .mkt-table td{padding:8px 6px;font-size:12.5px}
    .mkt-table .nm{display:none}
    .mkt-table .spark{width:48px !important;height:20px !important}
    .grid-2{gap:8px !important}
    /* News compact */
    .news-header h1{font-size:16px}
    .news-header p{display:none}
    .news-header .news-sep{display:none}
    .news-full>div>div:first-child{font-size:14px !important}
    .news-acts{margin-top:6px;gap:4px}
    .nact{padding:4px 8px;font-size:11px;border-radius:6px}
    .news-daysep{padding:8px 12px 2px;font-size:10.5px}
    .news-acts .nact:last-child{display:none}
    .senti-meter{transform:scale(.85);transform-origin:left}
    .sm-dot{display:none}
    /* Thread comments */
    .thread{margin-top:10px}
    .cmt-row{gap:8px}
    .cmt-row .ava.sm{width:21px;height:21px;font-size:9px}
    .cmt-body{font-size:13.5px}
    .cmt-children{padding-left:20px}
    .cmt-children::before{left:8px}
    .cmt-children.tight{padding-left:15px}
    .cmt-children.tight::before{left:5px}
    .reply-box{padding:8px 10px;gap:6px}
    .reply-box textarea{font-size:12.5px}
  }
  @media(max-width:1079px){
    /* floating UI clears the bottom nav, so it shares the nav's boundary */
    #livetv{right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 64px)}
    .toast{bottom:calc(env(safe-area-inset-bottom,0px) + 76px)}
  }
  @media(max-width:1240px){
    /* Ticker/emiten page tablet */
    .tk-price{font-size:28px}
    .tk-ohl{grid-template-columns:repeat(2,1fr)}
    #tkcanvas{height:220px}
    .tk-actions{gap:8px}
    .tk-actions .btn{font-size:12.5px;padding:8px 14px}
    .tk-statgrid{grid-template-columns:repeat(2,1fr)}
    .tk-perf{gap:4px}
    .tk-perf .v{font-size:12px}
    .tk-rb-ends{font-size:11.5px}
    .tk-id-h h1{font-size:20px}
    .panel{margin-top:12px}
    .p-pad{padding:16px}
    .tabs{padding:12px 16px 0;gap:18px;font-size:13px}
    .tk-stats{gap:16px}
    .company-description{font-size:14px;line-height:1.7}
  }
  @media(max-width:360px){
    .mp-hero .mp-val{font-size:21px}
    .mp-hero .mp-chg{font-size:11px}
    .tabs{gap:16px;padding-left:14px}
  }

  /* ── Shell architecture — single owner (Mobile UX Phase 1) ───────────────
     Two shell-level decisions live HERE and nowhere else. Anything that wants
     to change them changes this block, so they cannot desynchronise again.

     1. ONE shell boundary: <1080 mobile, >=1080 desktop (Phase 3).
        The second grid column and the rail are granted by the same query, so
        the rail can never render without a column to live in. Base is
        single-column + `.rightcol{display:none}` (the Phase 1 polarity), so
        there is no hide-rule a later declaration can override, and no
        `!important` is needed anywhere in the shell.

        Before Phase 3 the grid collapsed at <=1240 while the rail appeared at
        >=1241 and the bottom nav ran to <=1240 — so 1080-1240 rendered the
        desktop strip and topbar with every top-nav link hidden AND the mobile
        bottom nav. That hybrid range no longer exists.

     2. Mobile container gutters + fixed-bottom-nav clearance. */
  .rightcol{display:none}
  @media(min-width:1080px){
    .layout{grid-template-columns:minmax(0,1fr) 340px}
    .rightcol{display:flex;position:sticky;top:96px}
  }
  @media(max-width:1079px){
    #tkcanvas{height:220px}
    .layout{padding-top:16px;padding-left:16px;padding-right:16px;
      padding-bottom:calc(56px + 16px + env(safe-area-inset-bottom,0px))}
  }
  @media(min-width:600px) and (max-width:1079px){
    .layout{padding-left:24px;padding-right:24px}
  }
  @media(max-width:359px){
    .layout{padding-left:12px;padding-right:12px}
  }

  /* ── Mobile shell: header + nav (Mobile UX Phase 2) ──────────────────────
     Below the desktop grid the header is COMPOSED, not the desktop header
     with pieces subtracted. It is one row that cannot wrap:

        [ wordmark ] ....flex.... [ search ] [ account ]

     The previous rules lived at max-width:480 and set `flex-wrap:wrap` with
     `.search{order:3;flex-basis:100%}`, which forced the search onto a second
     row (81px) and, once brand+locale+theme+Masuk+Daftar stopped fitting, a
     third (105px). Height is now a constant, not content-dependent.

     Locale and theme keep their DOM + handlers but lose their persistent
     header slot; they are reached from the account sheet. Search reuses the
     SAME #search input and #searchac autocomplete — presented as an overlay
     row — so there is exactly one search implementation. */
  @media(max-width:1079px){
    .strip{display:none}
    .topbar{position:sticky;top:0;flex-wrap:nowrap;gap:8px;box-sizing:border-box;
      padding:calc(7px + env(safe-area-inset-top,0px)) 16px 7px}
    .topbar-brand{margin-right:auto}
    .topbar-brand .wm-img{height:20px;width:auto}
    .top-nav{margin-left:0;gap:4px;flex:none}
    .top-nav a,.nav-div,#langbtn,#themebtn,.search-kbd{display:none}
    /* one account entry point: the avatar when signed in; signed out, the header
       is logo + search and account lives in the bottom nav (Phase 10F.2) */
    #topnav-auth{gap:4px}
    /* Masuk, Daftar, notifications and "+ Post" all live in the account sheet
       (and the home composer). */
    #topnav-auth .btn-ghost,#topnav-auth .btn-gold,#topnav-auth .notif-bell,#topnav-auth .hh-postbtn{display:none}
    .ava-btn{min-width:36px;min-height:36px}
    /* search collapsed to a trigger; the input itself is the overlay */
    .search{display:none}
    body.hh-msearch .search{display:flex;align-items:center;gap:6px;position:fixed;
      top:0;left:0;right:0;z-index:120;max-width:none;min-width:0;
      background:var(--surface);border-bottom:1px solid var(--border);
      padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px}
    body.hh-msearch .search input{flex:1;min-width:0;font-size:16px;padding:10px 12px 10px 38px;border-radius:10px}
    body.hh-msearch .search .si{left:24px}
    body.hh-msearch .search .ac{top:calc(100% + 4px);left:12px;right:12px;max-height:70vh;overflow-y:auto}
    body.hh-msearch .search .ac-item{min-height:44px;box-sizing:border-box}
    body.hh-msearch .ms-close{display:grid}
    body.hh-msearch{overflow:hidden}
  }
  @media(min-width:600px) and (max-width:1079px){.topbar{padding-left:24px;padding-right:24px}}
  @media(max-width:359px){.topbar{padding-left:12px;padding-right:12px;gap:6px}}
  /* 44px hit area from a 36px visual control — density kept, target comfortable */
  .mob-ico{display:grid;width:36px;height:36px;border-radius:9px;place-items:center;
    color:var(--text-dim);background:transparent;position:relative;flex:none;cursor:pointer}
  .mob-ico::after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;
    transform:translate(-50%,-50%)}
  .mob-ico:active{background:var(--surface-2)}
  /* Phase 10F.3: account entry in the mobile header; the avatar takes the slot when signed in */
  .mob-ico.on{color:var(--gold-ink)}
  #topnav:has(.ava-btn) #mobaccount{display:none}
  .ms-close{display:none}
  /* the mobile-only controls are removed by the desktop shell, not forced by the mobile one */
  @media(min-width:1080px){.mob-ico{display:none}}
  /* account sheet rows reuse the existing .menu language */
  .acct-sheet{display:flex;flex-direction:column;gap:2px;margin:0 -28px}
  .acct-sheet button,.acct-sheet a{display:flex;align-items:center;gap:12px;width:100%;
    min-height:48px;padding:10px 28px;font-size:14.5px;text-align:left;color:var(--text);
    font-weight:400;background:none;border:0;cursor:pointer;text-decoration:none}
  .acct-sheet button:active,.acct-sheet a:active{background:var(--surface-2)}
  .acct-sheet .danger{color:var(--down)}
  .acct-sheet .sep{height:1px;background:var(--border-soft);margin:6px 28px}
  .acct-sheet .val{margin-left:auto;font-size:12.5px;color:var(--text-faint);font-weight:500}
  .acct-head{display:flex;align-items:center;gap:11px;padding:0 0 14px;margin-bottom:6px;
    border-bottom:1px solid var(--border-soft)}
  .acct-head .ah-name{font-weight:650;font-size:15px;line-height:1.25}
  .acct-head .ah-handle{font-size:12px;color:var(--text-faint);font-family:var(--mono)}
  /* ── Mobile foundation: touch / type / numerics (Mobile UX Phase 4A) ─────
     Three global floors, declared once, mobile-scoped. Desktop (>=1080) is
     untouched. No !important: this block is last, so it wins on order alone.

     Measured before: 120 shared controls under a 44px hit area across the
     seven views, 52 text nodes under 12px (down to 9px), and numeric columns
     without tabular figures. Visual sizes stay compact where density matters;
     what grows is the touch area. */
  @media(max-width:1079px){
    /* -- touch: controls that must simply be bigger (chips, tabs, buttons) -- */
    .pill-btn,.pill-tabs2 button,.seg,.act,.ni-act,.stream-sort-btn,
    .btn-sm,.chiprow .pill-btn,.tk-pills .pill-btn{
      min-height:44px;display:inline-flex;align-items:center;justify-content:center}
    .act{min-width:44px}
    .pill-btn,.seg,.pill-tabs2 button{padding-left:14px;padding-right:14px}
    /* -- touch: text-links that must stay visually small -> 44px hit area -- */
    .hp-more,.hp-po-u,.hp-po-mk,.hp-po-more,.hp-rs-go,.hp-mp-ix,.hp-po-t{
      min-height:44px;display:inline-flex;align-items:center}
    .topbar-brand{position:relative}
    .topbar-brand::after{content:'';position:absolute;left:50%;top:50%;
      width:100%;height:44px;min-width:44px;transform:translate(-50%,-50%)}
    /* dense link list: standard 40px row rather than a 44px one that would
       double the footer's height */
    .site-footer a{padding-top:11px;padding-bottom:11px}
    /* -- typography: eyebrow floor 11px -- */
    .ft-h,.rc-g,.k,
    .news-daysep,.ni-tag,.mkt-badge,.ava.sm,.mkt-table th{font-size:11px}
    /* -- typography: metadata floor 12px -- */
    .cell-sub,.hp-wm-vol,.hp-wm-nm,.hp-po-t,.hp-rs-go,.ni-src,.ni-clock,
    .hp-ed-s,.ht-n,.sm-label,.smart-note,.tk-sub-title,
    .lbl,.d,.up,.seg,.pill-btn,.pill-tabs2 button,
    .sect-badge,.ni-tag,.news-header p{font-size:12px}
    /* -- numerics: aligned figures line up and never ellipsise -- */
    .chg,.px,.v,.c,.hp-wm-px,.hp-wm-vol,.mkt-table td.r,.ks-row .v,
    .tk-statgrid .v,.tk-ohl .v,.stat .v{font-variant-numeric:tabular-nums}
    .chg,.px,.hp-wm-px,.hp-mp-ix .v{text-overflow:clip}
    /* -- chips: peer rows scroll, and land on an item rather than mid-label -- */
    .chiprow,.tk-pills,.rc-tabscroll{scroll-snap-type:x proximity;
      scroll-padding-inline:12px;-webkit-overflow-scrolling:touch}
    .chiprow > *,.tk-pills > *,.rc-tabscroll .pill-tabs2 button{scroll-snap-align:start}
    /* specificity tier: these lose to descendant selectors elsewhere in the
       sheet, so the floor has to be stated at matching weight */
    .site-footer .ft-h{font-size:11px}
    .hp-mp-ix .k,.mkt-hero-stats .k,.tk-statgrid .k{font-size:11px}
    .mkt-table th,.mkt-table th.r{font-size:11px}
    .why span,.mkt-card .ht-n,.mkt-table .up,.mkt-table .down{font-size:12px}
    /* remaining shared controls */
    .btn,.mkt-more,.mkt-search,
    .mkt-table th.sortable{min-height:44px}
    .btn,.mkt-more{display:inline-flex;align-items:center;justify-content:center}
    /* last two below the 11px floor; sizes only, no structural change */
    .btm-nav a span{font-size:11px}
    .tk-perf .k{font-size:11px}
  }
  /* Mobile UX Phase 4B: fit the data at its owning component. */
  @media(max-width:1079px){
    .mkt-mobile-context{margin-bottom:8px;min-height:44px;align-content:center}
    .mkt-hero{padding:13px 14px 2px;margin-bottom:20px}
    .mkt-idxtabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;
      margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
    .mkt-idxtabs::-webkit-scrollbar{display:none}
    .mkt-hero-main{align-items:flex-start}
    .mkt-hero-val{font-size:30px;font-variant-numeric:tabular-nums}
    .mkt-hero-stats{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
    .mkt-hero-stats .stat{padding:0;background:none;border-left:0}
    .mkt-hero-stats .stat{padding-left:0 !important;padding-right:0 !important}/* beats the global mobile .stat padding */
    .mkt-hero-stats .stat:last-child{grid-column:1/-1;flex-direction:row;align-items:baseline;justify-content:space-between;padding-top:10px;border-top:1px solid var(--border-soft)}
    .mkt-sector-panel{padding:0;background:transparent;border:0;box-shadow:none;overflow:hidden}
    .mkt-sector-panel .heatmap{display:flex;grid-template-columns:none;gap:8px;overflow-x:auto;
      overflow-y:hidden;padding:2px 0 6px;scroll-snap-type:x proximity;scrollbar-width:none;
      -webkit-overflow-scrolling:touch}
    .mkt-sector-panel .heatmap::-webkit-scrollbar{display:none}
    .mkt-sector-panel .heat-tile{flex:0 0 158px;min-height:58px;scroll-snap-align:start}
    .mkt-sector-panel .ht-name{font-size:14px}
    .mkt-mover-head .mkt-sec-head{align-items:flex-start;flex-direction:column}
    .mkt-mover-head .rc-tabscroll{width:100%;overflow-x:auto;flex-wrap:nowrap}
    .mkt-mover-head .rc-tabscroll::-webkit-scrollbar{display:none}
    .mkt-mover-grid{gap:18px}
    .mkt-mover-grid .mkt-card{padding:0;background:transparent;border:0;box-shadow:none}
    .mkt-mover-grid .mkt-card-t{font-size:14px;margin:0 0 4px}
    .mkt-mover-grid .mkt-table,.mkt-mover-grid .mkt-table tbody{display:block}
    .mkt-mover-grid .mkt-table thead{display:none}
    .mkt-mover-grid .mkt-table tr{min-height:58px;display:grid;
      grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;
      border-top:1px solid var(--border-soft)}
    .mkt-mover-grid .mkt-table td{display:block;height:auto;padding:7px 0;border:0;min-width:0}
    .mkt-mover-grid .mkt-table .mkt-rank,.mkt-mover-grid .mkt-table .spk{display:none}
    .mkt-mover-grid .tk-cell{flex-direction:row;align-items:center;gap:8px}
    .mkt-mover-grid .tk-logoimg,.mkt-mover-grid .tk-badge{display:block;width:26px;height:26px}
    .mkt-mover-grid .tk-badge{display:grid}
    .mkt-row-id{min-width:0;display:flex;flex-direction:column;gap:2px}
    .mkt-mobile-name{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;
      white-space:nowrap;font-size:12px;color:var(--text-faint)}
    .mkt-mover-grid .mkt-table .px{white-space:nowrap;font-variant-numeric:tabular-nums}
    .mkt-mobile-active{margin-top:22px}
    .mkt-mobile-active-list{border-top:1px solid var(--border-soft)}
    .mkt-mobile-active-list>button{width:100%;min-height:58px;display:grid;
      grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:7px 0;
      border-bottom:1px solid var(--border-soft);color:var(--text);text-align:left}
    .mkt-active-id,.mkt-active-market{min-width:0;display:flex;flex-direction:column;gap:2px}
    .mkt-active-id b,.mkt-active-market b{font-family:var(--mono);font-size:14px;
      font-variant-numeric:tabular-nums}
    .mkt-active-id small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
      font-size:12px;color:var(--text-faint)}
    .mkt-active-market{align-items:flex-end;white-space:nowrap}
    .mkt-active-market small{font-family:var(--mono);font-size:12px;color:var(--text-faint);
      font-variant-numeric:tabular-nums}
    .tk-mobile-ia{display:flex;flex-direction:column;gap:14px;margin-top:18px}
    .tk-mobile-section>h2{font-size:16px;line-height:1.3;margin:0 2px 8px}
    .tk-mobile-section>.panel,.tk-mobile-section>#quant-panel>.panel{margin-top:0}
    .tk-mobile-section>.pill-tabs2{margin:0 0 8px}
    .tk-mobile-section>.pill-tabs2 button{min-height:44px}
    .tk-mobile-profile #tkprofile>.tk-sub-title{display:none}
    .tk-mobile-ohl .tk-ohl{border-top:0;padding-top:0}
    .tk-stats .tk-statgrid .cell,.tk-mobile-profile .tk-statgrid .cell{padding:8px 0;gap:2px}
    .tk-stats .tk-statgrid .k,.tk-mobile-profile .tk-statgrid .k,.tk-mobile-ohl .tk-ohl .k{font-size:12px}
    .tk-stats .tk-statgrid .v,.tk-mobile-profile .tk-statgrid .v{font-size:14px}
    .tk-perf .v{font-size:13px}
    .tk-mobile-ohl .tk-ohl .v{font-size:15px}
    .tk-mobile-profile .company-description{font-size:15px;line-height:1.65}
    .tk-mobile-fullstats #keystats-panel{padding:14px}
    .tk-mobile-fullstats .ks-group{margin-bottom:16px}
    .tk-mobile-fullstats .ks-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
    .tk-mobile-fullstats .ks-row{min-width:0;align-items:flex-start;flex-direction:column;justify-content:flex-start;gap:3px;padding:8px 0}
    .tk-mobile-fullstats .ks-row .dot{display:none}
    .tk-mobile-fullstats .ks-row .k{font-size:14px;line-height:1.3}
    .tk-mobile-fullstats .ks-row .v{max-width:100%;font-size:14px;white-space:normal;overflow-wrap:anywhere}
    .tk-mobile-peers{overflow:hidden}
    .tk-mobile-peers .related-stocks-list{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x proximity}
    .tk-mobile-peers .related-stocks-list::-webkit-scrollbar{display:none}
    .tk-mobile-peers .related-stock-link{display:flex;justify-content:space-between;align-items:center;gap:12px;min-width:220px;min-height:44px;padding:9px 12px;scroll-snap-align:start}
    .related-stock-id,.related-stock-market{display:flex;flex-direction:column;min-width:0;gap:2px}
    .related-stock-name{white-space:nowrap;color:var(--text-dim);font-size:12px;line-height:1.25}
    .related-stock-id>.mono{font-size:14px;font-weight:600}
    .related-stock-market{align-items:flex-end;flex:none;font-size:14px;font-variant-numeric:tabular-nums}
    .tk-statgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .tk-statgrid .cell{min-width:0;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px}
    .tk-statgrid .v{max-width:100%;white-space:normal;overflow-wrap:anywhere}
    .tk-tabs,.tk-actions{flex-wrap:wrap}
    .tk-tabs button{min-width:44px;min-height:44px}
    .mkt-table .spk,.mkt-table .mkt-trend{display:none}
    .mkt-table td{font-size:14px}
    .mkt-table .up,.mkt-table .down{font-size:13px}
  }
  @media(max-width:560px){
    .mkt-table th,.mkt-table td{padding-left:2px;padding-right:2px}
    .mkt-table .tk-cell{flex-direction:column;align-items:flex-start;gap:4px}
    .mkt-table .px{white-space:normal}
    .mkt-table .cell-sub,.mkt-table .why span{overflow-wrap:anywhere;white-space:normal}
    .mkt-hero-val{font-size:28px}
  }
  @media(max-width:360px){
    .mkt-hero-val{font-size:27px}
    .mkt-mover-grid .mkt-table tr,.mkt-mobile-active-list>button{gap:6px}
    .mkt-mover-grid .pct,.mkt-mobile-active-list .pct{font-size:12px;padding-left:5px;padding-right:5px}
  }
  @media(max-width:430px){#tkcanvas{height:180px}}
  /* compact legend: close, change and volume on one line */
  @media(max-width:430px){.tk-legend{flex-wrap:nowrap;overflow:hidden}.tk-legend .tk-lg-x{display:none}}
  @media(max-width:375px){#tkcanvas{height:170px}}
  /* /berita mobile (8B) */
  @media(max-width:1079px){
    .news-mobile-category{display:block;margin:0 0 8px}
    .news-mobile-category .hh-dd{width:100%;justify-content:flex-end}
    .news-mobile-category .hh-dd-l{margin-right:auto;color:var(--text-dim)}
    .news-search input{min-height:44px}
    /* wrap so $TICKER anchors stay reachable at 320 */
    .ni-meta{flex-wrap:wrap;overflow:visible;row-gap:6px}
    .news-daysep{margin-top:10px}
  }
  /* ── Shared mobile polish (Mobile UX Phase 9A) ───────────────────────────
     Scroll affordance. Measured at 375 before this block, the partial-item
     peek at rest was: .tk-pills none, .hp-wm-grid 5px, .rc-tabscroll(sector)
     5px, .hp-mp-line 7px, .chiprow 22px — a sliver that reads as clipping
     rather than continuation. The repo already solved this for .hp-mp-line and
     .mkt-idxtabs with a negative-margin edge bleed, so that existing pattern is
     extended rather than a new effect introduced. No gradient, no shadow, no
     mask: the rail simply runs to its container's edge, so the cut lands on the
     frame boundary and the next item keeps more of itself visible. */
  :root{--hh-gutter:16px}
  @media(max-width:359px){:root{--hh-gutter:12px}}
  @media(min-width:600px) and (max-width:1079px){:root{--hh-gutter:24px}}
  @media(max-width:1079px){
    /* page-column rails bleed to the layout gutter */
    .chiprow,.hp-wm-grid{
      margin-left:calc(-1 * var(--hh-gutter));margin-right:calc(-1 * var(--hh-gutter));
      padding-left:var(--hh-gutter);padding-right:var(--hh-gutter);
      scroll-padding-inline:var(--hh-gutter)}
    /* panel-level rails bleed to the panel's inner edge (its 14px p-pad) */
    .tk-pills,.related-stocks-list,.mkt-sector-panel .heatmap{
      margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px;
      scroll-padding-inline:14px}
    /* every mobile rail snaps to item starts so a scroll never stops mid-label */
    .chiprow,.hp-wm-grid,.hp-mm-sectors,.tk-pills,
    .related-stocks-list,.rc-tabscroll,.mkt-sector-panel .heatmap{
      scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
      scrollbar-width:thin;scrollbar-color:var(--border) transparent}
    .chiprow::-webkit-scrollbar,.hp-wm-grid::-webkit-scrollbar,
    .hp-mm-sectors::-webkit-scrollbar,
    .tk-pills::-webkit-scrollbar,.related-stocks-list::-webkit-scrollbar,
    .rc-tabscroll::-webkit-scrollbar,
    .mkt-sector-panel .heatmap::-webkit-scrollbar{display:block;height:3px}
    .chiprow::-webkit-scrollbar-thumb,.hp-wm-grid::-webkit-scrollbar-thumb,
    .hp-mm-sectors::-webkit-scrollbar-thumb,
    .tk-pills::-webkit-scrollbar-thumb,.related-stocks-list::-webkit-scrollbar-thumb,
    .rc-tabscroll::-webkit-scrollbar-thumb,
    .mkt-sector-panel .heatmap::-webkit-scrollbar-thumb{
      background:var(--border);border-radius:2px}
    .chiprow > *,.hp-wm-grid > *,.hp-mm-sectors > *,
    .tk-pills > *,.related-stocks-list > *,.mkt-sector-panel .heatmap > *,
    .rc-tabscroll > *,.rc-tabscroll .pill-tabs2 > *{scroll-snap-align:start}

    /* Typography floor: the last two shared labels still under 11px.
       Stated at descendant weight because that is where they are set. */
    .news-row .src,.hp-mp-ix .k,.tk-perf .k,.tk-scanctx-score .k,
    .mkt-hero-stats .k,.stat .k,.ni-ago,.badge-anon,.senti-tag{font-size:11px}

    /* Touch: compact controls keep their visual size and gain a 44px hit area.
       Scoped to standalone chips — inline $TICKER anchors inside headlines and
       prose stay naturally sized, per the interaction contract. */
    .ni-meta .cashtag,.wl-del{position:relative}
    .ni-meta .cashtag::after,.wl-del::after{content:'';position:absolute;
      left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
    .hp-po-u{min-width:44px}
    /* Quant section nav is a segmented control; presentation only, no logic touched */
    .qp-secnav button{min-height:44px}
  }
  .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}
  .breadcrumb{display:flex;align-items:center;gap:6px;margin-bottom:14px;font-size:13px;color:var(--text-dim);flex-wrap:wrap}
  .breadcrumb a{color:var(--text-dim);text-decoration:none;cursor:pointer}
  .breadcrumb a:hover{color:var(--gold)}
  .breadcrumb .sep{color:var(--text-faint);font-size:10px;user-select:none}
  .breadcrumb .current{color:var(--text);font-weight:500}
  .related-posts{margin-top:28px}
  .related-posts .section-title{font-size:16px;font-weight:600;margin:0 0 12px 0;color:var(--text)}
  .related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
  .related-card{background:var(--card);border:1px solid var(--border);border-radius:9px;padding:12px 14px;cursor:pointer;transition:border-color .15s}
  .related-card:hover{border-color:var(--gold)}
  .related-card .related-title{font-size:14px;font-weight:600;margin:0 0 4px 0;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .related-card .related-body{font-size:12.5px;color:var(--text-dim);margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.45}
  .related-card .related-body p{margin:0}
  .related-card .related-meta{display:flex;gap:10px;font-size:11px;color:var(--text-faint);flex-wrap:wrap}
  .related-card .related-tags{margin-top:5px;display:flex;gap:4px;flex-wrap:wrap}

  /* ── Phase 10A: mobile primitives & density (<=1079 only; desktop frozen) ──
     Measured before: stock rows 55-124px, tabs 44-66px tall, 30px section
     gaps, prices on a 1.55 line-height. Font sizes were already mostly in
     range, so density comes from leading, control height and rhythm — not a
     blanket font shrink. Spacing rhythm: 4 / 8 / 12 / 16 / 20 / 24. */
  @media(max-width:1079px){
    /* A. Stock Row — one identity geometry: [logo] $TICKER / name  ... price / change */
    .hh-srow{display:flex;align-items:center;gap:10px;min-height:64px;box-sizing:border-box;
      padding-top:10px;padding-bottom:10px}
    .hh-srow-id{flex:1 1 auto;min-width:0}
    .hh-srow-num{margin-left:auto;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
    .hh-srow .sym{font-size:14px;line-height:1.25;font-weight:600}
    .hh-srow .nm,.hh-srow .mkt-mobile-name{font-size:12px;line-height:1.3;color:var(--text-faint);
      display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .hh-srow .px{font-size:16px;line-height:1.2;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
    .hh-srow .ch,.hh-srow .pct{font-size:13px;line-height:1.25;font-variant-numeric:tabular-nums;white-space:nowrap}
    .hh-srow .tk-logoimg,.hh-srow .wl-logo{width:32px;height:32px;display:block}
    .hh-srow .tk-badge,.hh-srow .tk-dot-lg{width:32px;height:32px;border-radius:50%}
    .hh-srow .tk-badge{display:grid}
    /* table adapter: the same geometry expressed on a <tr> */
    .view .mkt-table:has(tr.hh-srow){display:block}
    .view .mkt-table:has(tr.hh-srow) thead{display:none}
    .view .mkt-table:has(tr.hh-srow) tbody{display:block}
    .view .mkt-table tr.hh-srow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
      column-gap:0;row-gap:2px;align-items:center;border-top:1px solid var(--border-soft)}
    .view .mkt-table tbody tr.hh-srow:first-child{border-top:0}
    .view .mkt-table tr.hh-srow td{display:block;padding:0;border:0;height:auto;min-width:0}
    .view .mkt-table tr.hh-srow td.mkt-rank{grid-column:1;grid-row:1/span 2;padding-right:10px;
      font-size:12px;color:var(--text-faint);font-variant-numeric:tabular-nums}
    .view .mkt-table tr.hh-srow td.hh-srow-id{grid-column:2;grid-row:1/span 2;padding-right:10px}
    .view .mkt-table tr.hh-srow .tk-cell{flex-direction:row;align-items:center;gap:10px}
    .view .mkt-table tr.hh-srow .mkt-row-id{display:flex;flex-direction:column;gap:1px;min-width:0}
    .view .mkt-table tr.hh-srow td.hh-srow-px{grid-column:3;grid-row:1;align-self:end;text-align:right}
    .view .mkt-table tr.hh-srow td.hh-srow-chg{grid-column:3;grid-row:2;align-self:start;text-align:right}
    .view .mkt-table tr.hh-srow td.hh-srow-meta{grid-column:3;grid-row:3;text-align:right;
      font-size:11px;color:var(--text-faint)}
    .view .mkt-table tr.hh-srow td.spk{display:none}
    .view .mkt-table tr.hh-srow .pct{background:none;padding:0}

    /* B. Selector primitive — compact trigger, vertical option list in the modal */
    .hh-dd{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;position:relative;
      border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);
      color:var(--text);font-size:13px;font-weight:500;max-width:100%}
    .hh-dd::before{content:'';position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
    .hh-dd-l{color:var(--text-faint)}
    .hh-dd-v{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .hh-sel{display:flex;flex-direction:column;margin:0 -28px}
    .hh-sel button{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;
      padding:0 28px;font-size:14px;text-align:left;color:var(--text);background:none;border:0;
      border-top:1px solid var(--border-soft)}
    .hh-sel button.on{color:var(--gold-ink);font-weight:600}

    /* C. Typography — tighten leading on dense roles; headings to 16px */
    .view h2,.mkt-sec-head h2,.hp-sec-title{font-size:16px;line-height:1.3}
    .hp-wm-px{line-height:1.25}
    .hp-wm-sym{line-height:1.3}

    /* D. Controls — 36px visual, 44px hit via ::before; no wrapped pills */
    .view .pill-btn,.view .pill-tabs2 button,.view .seg,.view .qp-secnav button,.view .tk-tabs button,
    .view .tk-mobile-section>.pill-tabs2 button{min-height:36px;min-width:44px;justify-content:center;padding-left:12px;padding-right:12px;
      font-size:13px;white-space:nowrap;position:relative}
    .view .pill-btn::before,.view .pill-tabs2 button::before,.view .seg::before,.view .qp-secnav button::before,
    .view .tk-tabs button::before{content:'';position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
    .chiprow,.tk-pills,.rc-tabscroll{padding-top:4px;padding-bottom:4px}

    /* E. Spacing rhythm */
    .hp-sec{margin-bottom:24px}
    .mkt-sec-head{margin-top:16px;margin-bottom:8px}
    .view .p-pad{padding:12px}

    /* F. Bottom nav — same five destinations, lighter chrome, clearer active */
    .btm-nav{padding-top:4px}
    .btm-nav a{min-height:54px;gap:3px;position:relative}
    .btm-nav a svg{width:22px;height:22px}
    .btm-nav a span{font-size:11px;line-height:1.2}
    .btm-nav a.on{font-weight:600}
    .btm-nav a.on::after{content:'';position:absolute;top:-4px;left:25%;right:25%;height:2px;
      border-radius:0 0 2px 2px;background:var(--gold)}
  }

  /* ── Phase 10B: mobile Home + Market (<=1079 only; desktop frozen) ─────────
     Every stock list on both pages is the hh-srow family; multi-option rows
     are hhSelect triggers. Spacing stays on the 4/8/12/16/20/24 rhythm. */
  @media(max-width:1079px){
    /* row family: button/div rows share the 10A geometry */
    .hh-srow-list{border-top:1px solid var(--border-soft)}
    button.hh-srow{width:100%;background:none;border:0;border-bottom:1px solid var(--border-soft);
      text-align:left;color:var(--text);font:inherit;cursor:pointer;padding-left:0;padding-right:0}
    .hh-srow-rank{flex:none;width:18px;font-size:12px;color:var(--text-faint);
      font-variant-numeric:tabular-nums;text-align:right}
    .hh-srow-logo{flex:none;display:grid;place-items:center;width:32px;height:32px}
    .hh-srow-logo .tk-logoimg,.hh-srow-logo .tk-badge{grid-area:1/1}
    .hh-srow-id .sym,.hh-srow-id .nm{display:block}
    .hh-srow .pct{background:none;padding:0}
    .hh-srow-meta{font-size:11px;line-height:1.3;color:var(--text-faint);white-space:nowrap}
    .hh-srow-val{font-weight:600;color:var(--text-dim);font-variant-numeric:tabular-nums}
    .hh-srow .cell-sub{font-size:12px;line-height:1.3;color:var(--text-faint);
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    /* table rows: fixed rank lane so logos align across ranked and unranked lists */
    .view .mkt-table tr.hh-srow td.mkt-rank{width:28px;box-sizing:border-box;text-align:right}
    /* a metadata line must not push a list past the 64-76px band */
    .view .mkt-table tr.hh-srow{row-gap:0;min-height:64px}
    .view .mkt-table tr.hh-srow td.hh-srow-meta,.hh-srow-meta{line-height:1.2}
    .view .mkt-table tr.hh-srow .xtra .vol-x{padding:0 5px;font-size:11px;line-height:1.3}
    /* Smart Screen: reasons replace the company line; score sits under price */
    .hh-srow-smart .why{display:flex;flex-direction:row;flex-wrap:nowrap;gap:8px;white-space:nowrap;
      overflow:hidden;font-size:12px;line-height:1.3;margin:0}
    /* table-only cells that the row geometry does not use */
    .view .mkt-table tr.hh-srow td.col-opt{display:none}
    /* inline ticker so a Suspend badge stays on the ticker line */
    .view .mkt-table tr.hh-srow .sym{display:inline}
    .view .mkt-table tr.hh-srow .mkt-badge{vertical-align:1px}
    .hh-srow-smart .why span{font-size:12px;white-space:nowrap;overflow-wrap:normal;padding:1px 6px;flex:none}
    .hh-srow-smart .smart-score{font-size:12px;font-weight:600;padding:1px 6px;line-height:1.3}
    /* All Stocks keeps sorting: its sortable header becomes a compact sort bar */
    .view .mkt-table:has(tr.hh-srow) thead:has(.sortable){display:block;border-bottom:1px solid var(--border-soft)}
    .view .mkt-table:has(tr.hh-srow) thead:has(.sortable) tr{display:flex;gap:4px;align-items:center}
    .view .mkt-table:has(tr.hh-srow) thead:has(.sortable) th{display:flex;align-items:center;
      min-height:36px;padding:0 8px;font-size:12px}
    .view .mkt-table:has(tr.hh-srow) thead:has(.sortable) th.col-opt,
    .view .mkt-table:has(tr.hh-srow) thead:has(.sortable) th.mkt-trend{display:none}
    /* one row for heading + selector */
    .view .mkt-sec-head:has(.hh-dd),.view .mkt-mover-head .mkt-sec-head:has(.hh-dd),
    .view .smart-head:has(.hh-dd),.hp-head-dd{flex-direction:row;align-items:center;
      justify-content:space-between;flex-wrap:nowrap;gap:12px}
    .view .smart-head:has(.hh-dd){margin-top:20px;margin-bottom:8px}
    .view .smart-desc{margin:0 2px 8px;font-size:12px;line-height:1.4}
    .mkt-mobile-active .hh-srow-list{margin-top:0}

    /* Home: Market Pulse — figure beside its chart instead of above it */
    .hp-mp-top{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px}
    .hp-mp-val{font-size:32px}
    .hp-mp-chart,.hp-mp-chart canvas{height:64px}
    /* Home: movers stacked, sectors as a 2x2 grid (no horizontal strip) */
    .hp-mm-movers{grid-template-columns:minmax(0,1fr);gap:12px}
    .hp-mm-col{min-width:0}
    /* sparkline is optional metadata; like the Market rows, the row geometry drops it */
    .wl-row.hh-srow .wl-spark-wrap{display:none}
    .hp-mm-col h3{margin:0 0 4px}
    .hp-mm-all{display:inline-flex;margin-top:8px}
    .hp-mm-sector-head{margin-top:16px}
    .hp-mm-sectors{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;overflow:visible;
      margin-left:0;margin-right:0;padding:0;scroll-snap-type:none}
    .hp-mm-sector{min-height:44px;min-width:0;gap:6px}
    .hp-mm-sector span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .hp-mm-sector b{flex:none}
    /* Home: community stays visible without dominating (Home section only — the
       /community feed shares .hp-feed and must show every post) */
    .hp-sec .hp-feed > *:nth-child(n+3){display:none}
  }

  /* ── Phase 10F: mobile Home recomposition (<=1079 only; desktop frozen) ──
     flat Market Pulse (chart first, IHSG below)
     -> Most Active (5 rows) -> Market News -> movers, sectors, community, research.
     The page title stays in the DOM for assistive tech and outline, visually hidden. */
  @media(max-width:1079px){
    .view .hp-title:has(+ #overview){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
      clip:rect(0 0 0 0);white-space:nowrap;border:0}
    .hp-pulse{margin:4px 0 16px}
    .hp-mobile-active{margin-bottom:16px}
    .hp-mobile-active .hp-head{padding-bottom:4px}
    #hpnews .hp-ed-kick{font-size:11px}
    .hp-pulse-hd h2{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:0;color:var(--text)}
    .hp-pulse-hd p{margin:2px 0 0;font-size:13px;line-height:1.35;color:var(--text-dim)}
    .hp-pulse-chart{margin-top:10px;cursor:pointer;position:relative}
    .hp-pulse-chart canvas{display:block;width:100%;height:132px}
    .hp-pulse-sum{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;width:100%;
      min-height:44px;margin:8px 0 0;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
    .hp-pulse-sum .l,.hp-pulse-sum .r{display:flex;flex-direction:column;min-width:0;gap:2px}
    .hp-pulse-sum .r{align-items:flex-end;text-align:right}
    .hp-pulse-sum b{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--text)}
    .hp-pulse-sum .r b{font-family:var(--mono);font-variant-numeric:tabular-nums}
    .hp-pulse-sum .l span{font-size:13px;line-height:1.3;color:var(--text-dim)}
    .hp-pulse-sum .r span{font-family:var(--mono);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
  }
  /* Phase 10F.1: smallest phones only — pull Market News into the first
     viewport by trimming spacing above it (text sizes, rows and order unchanged). */
  @media(max-width:359px){
    .hp-pulse{margin-bottom:10px}
    .hp-pulse-hd p{font-size:12px;letter-spacing:-.01em}
    .hp-pulse-chart{margin-top:6px}
    .hp-pulse-chart canvas{height:112px}
    .hp-pulse-sum{margin-top:6px;gap:8px}
    .hp-pulse-sum .l span,.hp-pulse-sum .r span{font-size:12px;letter-spacing:-.01em}
    .hp-mobile-active{margin-bottom:8px}
    .hp-mobile-active .hp-head{padding-bottom:0}
    .hp-mobile-active .hh-srow{min-height:56px;padding-top:6px;padding-bottom:6px}
  }

  /* ── Phase 10G: mobile Community (<=1079 only; desktop frozen) ──────────
     title -> Latest/Trending -> flat feed. The signed-out sign-in card leaves the
     feed (account stays one tap away in the header); the signed-in composer stays. */
  @media(max-width:1079px){
    /* 10G.1: title -> tabs -> dense flat feed on the shared 16px gutter */
    .view .hp-title:has(+ .hp-feedbar){display:block;margin:0 0 10px}
    .view .hp-title:has(+ .hp-feedbar) .hp-h1{font-size:24px;line-height:1.2}
    .view .hp-title:has(+ .hp-feedbar) .hp-h1-sub{margin:2px 0 0;font-size:13.5px;letter-spacing:-.01em;line-height:1.35;color:var(--text-dim)}
    /* 10G.3: Latest/Trending stays pinned under the header while the feed scrolls */
    .view .hp-title + .hp-feedbar{position:sticky;top:calc(51px + env(safe-area-inset-top,0px));z-index:30;
      margin:0 0 6px;padding:6px 0;background:var(--bg)}
    .view .hp-title + .hp-feedbar{transition:box-shadow .18s ease}
    .view .hp-title + .hp-feedbar.is-stuck{box-shadow:0 10px 12px -10px rgba(0,0,0,.22)}
    .view .hp-title + .hp-feedbar .hp-sort{display:flex;width:100%;margin:0}
    .view .hp-title + .hp-feedbar .hp-sort button{flex:1;min-height:32px;padding-top:0;padding-bottom:0;font-size:13px;position:relative}
    .view .hp-title + .hp-feedbar .hp-sort button::before{content:'';position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
    .view .hp-feedbar + .cmp-slot:has(> .composer:not(#composer)){display:none}
    /* posts: every control keeps its 44px hit; negative margins let those hit
       areas overlap the whitespace instead of stacking it */
    .view .cmp-slot ~ #feed .hp-po{padding:12px 0 4px}
    .view .cmp-slot ~ #feed .hp-po .hp-po-hd{gap:10px;margin:-6px 0}
    .view .cmp-slot ~ #feed .hp-po .ava{width:30px;height:30px;font-size:11px;border-radius:50%}
    .view .cmp-slot ~ #feed .hp-po .hp-po-id{flex:1;align-items:center;flex-wrap:nowrap}
    .view .cmp-slot ~ #feed .hp-po .hp-po-u{font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .view .cmp-slot ~ #feed .hp-po .hp-po-t{margin-left:auto;font-size:12px}
    .view .cmp-slot ~ #feed .hp-po .hp-po-t::before{content:none}
    .view .cmp-slot ~ #feed .hp-po .hp-po-b{margin-top:4px;font-size:15px;line-height:1.4}
    .view .cmp-slot ~ #feed .hp-po .hp-po-mkt{margin:-6px 0 -8px}
    .view .cmp-slot ~ #feed .hp-po .actions{margin:-4px 0 0 -10px}
    .view .cmp-slot ~ #feed .hp-po .act{min-height:44px}
    .view .cmp-slot ~ #feed .hp-po .act svg{width:18px;height:18px}
    .view .cmp-slot ~ #feed .hp-po .act.more{margin-left:auto;margin-right:-10px}
    .view .cmp-slot ~ #feed .hp-po .post-fig{margin-top:8px;aspect-ratio:auto;max-height:none;height:auto;border-radius:8px}
    .view .cmp-slot ~ #feed .hp-po .post-fig .post-img{width:100%;height:auto;max-height:480px;object-fit:contain}
  }
  /* 11B.2: desktop Community stamps share the mobile format, right-aligned in the header */
  @media(min-width:1080px){.view .cmp-slot ~ #feed .hp-po-id{flex:1}.view .cmp-slot ~ #feed .hp-po-t{margin-left:auto}.view .cmp-slot ~ #feed .hp-po-t::before{content:none}}

  /* ── Phase 10C: mobile ticker (<=1079 only; desktop frozen) ────────────────
     One section at a time behind a selector; chart controls collapse to a
     range dropdown, two icon buttons and a settings sheet. */
  @media(max-width:1079px){
    .view .tk-sec-off{display:none}
    /* Phase 10C.3: identity left, market state right, on one flat row (no hero card).
       The legacy <=480 !important logo/price sizes need matching !important here. */
    .view .breadcrumb:has(+ .tk-hero){margin-bottom:8px}
    /* Phase 10C.6: the logo spans both rows; company identity aligns beneath the ticker */
    .view .tk-hero{display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:8px;row-gap:4px;
      min-height:73px;margin-top:0;padding:0 0 12px;background:transparent;border:0;border-bottom:1px solid var(--border);border-radius:0;box-shadow:none}
    .view .tk-hero .tk-id{display:contents}
    .view .tk-hero .tk-id-txt{display:contents}
    .view .tk-hero .tk-logo{grid-row:1/3;grid-column:1;width:44px !important;height:44px !important;font-size:12px !important}
    .view .tk-hero .tk-id-h{grid-row:1;grid-column:2;align-self:end;gap:6px;flex-wrap:nowrap;min-width:0}
    .view .tk-hero .tk-id-h h1{font-size:22px;line-height:1.1}
    .view .tk-hero .sect-badge{font-size:11px;padding:1px 6px;white-space:nowrap;flex:none}
    /* the sector already leads the breadcrumb; only status badges (inline-styled) stay beside the ticker */
    .view .tk-hero .tk-id-h h1 + .sect-badge:not([style]){display:none}
    .view .tk-hero .tk-id-name{grid-row:2;grid-column:2;align-self:start;min-width:0;font-size:12px;line-height:1.25;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .view .tk-hero .tk-quote{display:contents;text-align:right}
    .view .tk-hero .tk-price{grid-row:1;grid-column:3;align-self:end;justify-self:end;font-size:24px !important;line-height:1.1;white-space:nowrap}
    .view .tk-hero .tk-chg{grid-row:2;grid-column:3;align-self:start;display:flex;flex-wrap:nowrap;justify-content:flex-end;align-items:baseline;gap:0 3px;
      min-width:max-content;font-size:11px;line-height:1.25;white-space:nowrap}
    .view .tk-hero .tk-chg .pill{order:2;padding:0;background:none;font-size:11px}
    .view .tk-hero .tk-chg .tk-chg-pct::before{content:'('}
    .view .tk-hero .tk-chg .tk-chg-pct::after{content:')'}
    .view .tk-hero .tk-chg-abs{order:1}
    .view .tk-hero .tk-chg-session{order:3;font-size:11px;line-height:1.25}
    /* section selector: a flat navigation row, label left, value + chevron right */
    .tk-sec-nav{display:flex}
    .tk-sec-nav .hh-dd{width:100%;min-height:44px;padding:0 2px;border:0;border-bottom:1px solid var(--border);border-radius:0;background:transparent}
    .tk-sec-nav .hh-dd-v{margin-left:auto}
    /* flat sections: chart, key metrics and OHLC sit on the page, not in cards
       (tk-flat is added by arrangeTickerMobile, which also drops their inline margins) */
    .view .tk-flat{padding:12px 0 0;margin-top:0;background:transparent;border:0;border-radius:0;box-shadow:none}
    .view .tk-mobile-section[data-tksec] > h2,.view .tk-mobile-ohl h2{margin:16px 0 4px;font-size:16px}
    /* chart panel: canvas, then one compact control row */
    .tk-mctl{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}
    .tk-mctl .hh-dd{min-height:34px}
    .tk-mctl-right{display:flex;align-items:center;gap:6px}
    .tk-mctl #tktype{display:flex;gap:2px;padding:2px;border-radius:var(--radius-sm);background:var(--surface-2)}
    .view .tk-mctl .seg{min-width:44px;min-height:34px;padding:0;display:grid;place-items:center;position:relative}
    /* 44px-tall hit area around the 34px visual (same pattern as .hh-dd / .tk-actions) */
    .view .tk-mctl .seg::before{content:'';position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
    .view .tk-mctl .tk-mctl-set{border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text-dim)}
    /* chart workspace entry on phones/tablets: an icon in the control row (never over the candles) */
    .tk-exp-ov.busy{opacity:.55;cursor:progress}
    /* Phase 10C.4: #tkloading lives in the toolbar: loading text, then the period return */
    .tk-mctl #tkloading{flex:1 1 auto;min-width:0;margin:0;text-align:center;font-size:13px;font-weight:600;line-height:1.3;
      color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
    #tkcustomrow{margin-top:8px}
    /* actions: one row of three, compact visual, 44px hit */
    .view .tk-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:6px;border-top:1px solid var(--border)}
    .view .tk-actions .btn{min-height:40px;padding:0 4px;font-size:13px;font-weight:600;position:relative;white-space:nowrap;
      background:transparent;border:0;border-radius:0;box-shadow:none;color:var(--text-dim)}
    /* only an active watch carries emphasis */
    .view .tk-actions .btn-ghost:first-child{color:var(--gold-ink)}
    .view .tk-actions .btn::before{content:'';position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
    /* key metrics + OHLC: two columns, tight rhythm */
    .view .tk-stats{gap:12px}
    .view .tk-statgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px}
    .view .tk-statgrid .cell{padding:6px 0}
    .view .tk-ohl{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 16px}
    /* Quant disclosures keep their look; only the touch area grows (::before is their +/- glyph) */
    .view .qp-disclose summary{position:relative}
    .view .qp-disclose summary::after{content:'';position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
    /* Phase 10C.3: Quant factor rows reach the 44px hit and news source labels 11px (ticker only) */
    .view .tk-mobile-quant .qp-group > summary{min-height:44px}
    .view .tk-mobile-news .nm{font-size:11px}
    /* related stocks: cards size to the full company name (the list already scrolls sideways) */
    .tk-mobile-peers .related-stock-link{flex:none}
    .tk-mobile-peers .related-stock-id{min-width:max-content}
    /* pattern empty state */
    .tk-pattern-empty p{margin:0 0 8px;font-size:14px;line-height:1.4;color:var(--text-dim)}
    /* profile disclosure inside Financials */
    .tk-about > summary{min-height:44px;display:flex;align-items:center;cursor:pointer;
      font-size:16px;font-weight:600;padding:0 2px;list-style-position:inside}
  }
  /* Phase 10D.2: Blog index + article (<=1079 only; desktop frozen).
     blog_data.py renders these server-side with inline styles, so the mobile
     overrides need !important; markup, content and SEO are untouched. */
  @media(max-width:1079px){
    /* the page already has its gutter: drop the second 16px inset */
    .view .blog-index,.view .blog-article{padding:4px 0 0 !important;overflow-wrap:break-word}
    /* breadcrumb: one line; links keep a 44px hit without growing the row */
    .blog-index > nav,.blog-article > nav[aria-label="breadcrumb"]{display:flex;align-items:center;min-width:0;
      margin:0 0 8px !important;font-size:12px !important;white-space:nowrap}
    .blog-index > nav > a,.blog-article > nav[aria-label="breadcrumb"] > a{padding:13px 0;margin:-13px 0}
    .blog-article > nav[aria-label="breadcrumb"] > span[aria-current]{min-width:0;overflow:hidden;text-overflow:ellipsis}
    /* listing: compact header and rows */
    .blog-index > h1,.blog-article > h1{font-size:22px !important;line-height:1.25;margin:0 0 6px !important}
    .blog-index > p{font-size:14px !important;line-height:1.5 !important;margin:0 0 12px !important}
    .blog-index > a{padding:12px 0 !important;gap:10px !important}
    .blog-index > a > img{width:96px !important;height:54px !important}
    .blog-index > a h2{font-size:16px !important;line-height:1.3;margin:0 0 4px !important;
      display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
    .blog-index > a p{font-size:13px !important;line-height:1.45 !important;margin:0 0 4px !important;
      display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    /* article: compact meta, bounded hero, comfortable body */
    .blog-article > h1 + div{font-size:12px !important;margin-bottom:12px !important}
    .blog-article > img{max-height:220px;object-fit:cover;margin-bottom:16px !important;border-radius:8px !important}
    .blog-article .blog-body{font-size:16px !important;line-height:1.7 !important}
    .blog-article .blog-body table{font-size:13px !important}
    .blog-article .blog-body th,.blog-article .blog-body td{padding:8px 6px !important;overflow-wrap:anywhere}
    .blog-article .blog-body pre{overflow-x:auto;max-width:100%}
    /* related-articles block + prev/next: compact rows, full-width taps */
    .blog-article > div:has(> h3){margin-top:24px !important;padding-top:16px !important}
    .blog-article > div:has(> h3) > h3{margin-bottom:8px !important}
    .blog-article > div:has(> h3) > div{gap:8px !important}
    .blog-article > div:has(> h3) a{padding:8px 10px !important;min-height:44px;box-sizing:border-box}
    .blog-article > div:has(> h3) a span:first-child{display:-webkit-box !important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .blog-article > nav:not([aria-label="breadcrumb"]){flex-direction:column;gap:8px !important;margin-top:24px !important}
    .blog-article > nav:not([aria-label="breadcrumb"]) > a{flex:none !important;min-width:0 !important;padding:10px 12px !important}
    .blog-article > nav:not([aria-label="breadcrumb"]) > a > span:last-child{display:-webkit-box !important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  }
  /* smallest phones: chart tier only (container must equal tickerChartHeight()) */
  @media(max-width:359px){
    #tkcanvas{height:150px}
  }
  /* Compact ticker chart — history range (Rentang). One fixed order, 1D → MAX then
     Kustom; never a scrolling strip, never off-screen. Desktop: one wrapping row.
     Phones/tablets: a grid (9 across, or 5 + 4 below 480px). */
  .tk-pills{flex-wrap:wrap;overflow:visible;scroll-snap-type:none}
  .tk-pills .pill-btn[aria-pressed="true"]{box-shadow:inset 0 0 0 1px var(--text)}
  #tkcanvas[data-empty]::after{content:attr(data-empty);position:absolute;inset:0;display:grid;place-items:center;padding:16px;
    text-align:center;font-size:13px;color:var(--text-faint);border:1px dashed var(--border);border-radius:var(--radius-sm,8px)}
  .tk-retry{margin-left:6px;padding:4px 10px;border:1px solid var(--border);border-radius:8px;font-size:12px;font-weight:600;color:var(--text)}
  @media(max-width:1079px){
    .view .tk-pills,.tk-pills{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px;margin:0;padding:0;
      overflow:visible;scroll-snap-type:none}
    .view .tk-pills .pill-btn{min-width:0;padding-left:2px;padding-right:2px;min-height:38px;font-variant-numeric:tabular-nums}
    .tk-mctl-right .tk-exp-ov{color:var(--text-dim)}
  }
  @media(max-width:479px){
    .view .tk-pills,.tk-pills{grid-template-columns:repeat(5,minmax(0,1fr))}
  }
  /* Ticker chart card, kept plain: title + period result, a quiet "full chart" button,
     text range buttons, icon chart-type buttons, small toggles. */
  .tk-chead{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
  .tk-chead-l{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;min-width:0}
  .tk-ctitle{margin:0;font-size:16px;font-weight:700;letter-spacing:-.01em}
  .tk-cperf{font-size:13px;color:var(--text-faint)}
  .tk-open{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:9px;
    border:1px solid var(--border);background:var(--surface);color:var(--blue);font-size:13px;font-weight:600;flex:none}
  .tk-open:hover{background:var(--blue-soft)}
  .tk-open:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  .tk-open.busy{opacity:.7;cursor:progress}
  .tk-chartpanel .tk-pills{gap:2px}
  .tk-chartpanel .tk-pills .pill-btn{border:0;border-radius:8px;padding:6px 11px;font-weight:600;color:var(--text-faint);background:transparent}
  .tk-chartpanel .tk-pills .pill-btn:hover{color:var(--text);background:transparent}
  .tk-chartpanel .tk-pills .pill-btn.on,.tk-chartpanel .tk-pills .pill-btn[aria-pressed="true"]{background:var(--surface-2);color:var(--text);box-shadow:none}
  /* one control line: ranges on the left; chart type + expand on the right */
  .tk-chartpanel .tk-chartctl{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
  .tk-cright{display:flex;align-items:center;gap:6px;margin-left:auto}
  .tk-icons{display:flex;gap:2px;padding:3px;border-radius:9px;background:var(--surface-2)}
  .tk-icons .seg{display:grid;place-items:center;width:34px;height:30px;padding:0;color:var(--text-faint)}
  .tk-icons .seg.on{color:var(--text)}
  @media(max-width:1079px){
    .tk-chead{margin-bottom:10px}
    .tk-ctitle{font-size:15px}
    .tk-chartpanel .tk-pills{gap:3px}
    .tk-chartpanel .tk-pills .pill-btn{padding-left:2px;padding-right:2px}
    .view .tk-mctl .tk-exp-ov{color:var(--blue)}
  }
  /* Ticker header (desktop): identity left, price right on one line; the session's
     open/high/low/previous close as one quiet strip. A faint corner tint follows the
     day's direction. Phones/tablets keep their own flat header (Phase 10C). */
  @media(min-width:1080px){
    .tk-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"id quote" "ohl ohl";
      align-items:center;gap:18px 24px;padding:22px 24px 18px}
    .tk-hero.tk-dir-up{background:radial-gradient(120% 140% at 100% 0,color-mix(in srgb,var(--up) 9%,transparent),transparent 42%),var(--surface)}
    .tk-hero.tk-dir-down{background:radial-gradient(120% 140% at 100% 0,color-mix(in srgb,var(--down) 8%,transparent),transparent 42%),var(--surface)}
    .tk-hero .tk-id{grid-area:id;display:flex;align-items:center;gap:16px;min-width:0}
    .tk-hero .tk-logo{width:58px;height:58px;box-shadow:0 0 0 1px var(--border)}
    .tk-hero .tk-id-h h1{font-size:26px;letter-spacing:-.02em;line-height:1.1}
    .tk-hero .sect-badge{font-size:11.5px}
    .tk-hero .tk-id-name{font-size:14px;margin-top:4px}
    .tk-hero .tk-quote{grid-area:quote;display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right}
    .tk-hero .tk-price{font-size:36px;font-weight:800;letter-spacing:-.03em;line-height:1}
    .tk-hero .tk-chg{gap:10px;font-size:14px}
    .tk-hero .tk-chg .pill{font-size:13px;font-weight:700;padding:4px 10px;border-radius:8px}
    .tk-hero .tk-chg .pill.up::before{content:'▲ ';font-size:10px}
    .tk-hero .tk-chg .pill.down::before{content:'▼ ';font-size:10px}
    .tk-hero .tk-ohl{grid-area:ohl;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding-top:16px}
    .tk-hero .tk-ohl .c{padding:0 18px;border-left:1px solid var(--border)}
    .tk-hero .tk-ohl .c:first-child{padding-left:0;border-left:0}
    .tk-hero .tk-ohl .k{font-size:12px;color:var(--text-faint)}
    .tk-hero .tk-ohl .v{font-size:16px;font-weight:700;margin-top:5px;font-variant-numeric:tabular-nums}
    .tk-hero>div[style*="border-top"]{grid-column:1/-1}   /* suspended notice spans the card */
  }
  /* Ticker stats: ranges read as "where is the price between low and high", the
     day's numbers as tiles, performance as tinted chips. Desktop: ranges | tiles. */
  .tk-ranges{display:flex;flex-direction:column;gap:20px}
  .tk-rb-top{align-items:baseline;font-size:12.5px;color:var(--text-dim);font-weight:600;margin-bottom:10px}
  .tk-rb-where{font-size:12px;font-weight:500;color:var(--text-faint)}
  .tk-stats .tk-rb-track{height:6px;background:var(--surface-2)}
  .tk-rb-fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px}
  .tk-rb-fill.up{background:color-mix(in srgb,var(--up) 40%,transparent)}
  .tk-rb-fill.down{background:color-mix(in srgb,var(--down) 35%,transparent)}
  .tk-stats .tk-rb-dot{width:14px;height:14px;border:3px solid var(--surface);box-shadow:0 0 0 1px var(--border),0 1px 3px rgba(0,0,0,.15)}
  .tk-rb-ends{margin-top:9px}
  .tk-rb-ends span{display:flex;flex-direction:column;gap:1px}
  .tk-rb-ends span:last-child{text-align:right}
  .tk-rb-ends small{font-family:inherit;font-size:11px;font-weight:500;color:var(--text-faint)}
  .tk-stats .tk-statgrid,.tk-profile .tk-statgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;border-top:0}
  .tk-stats .tk-statgrid .cell,.tk-profile .tk-statgrid .cell{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:11px 13px;
    border:0;border-radius:11px;background:var(--surface-2)}
  .tk-stats .tk-statgrid .k,.tk-profile .tk-statgrid .k{font-size:12px;color:var(--text-faint)}
  .tk-stats .tk-statgrid .v,.tk-profile .tk-statgrid .v{font-size:16px;font-weight:700}
  .tk-statgrid .cell.hot{background:var(--blue-soft)}
  .tk-statgrid .cell.hot .v{color:var(--blue)}
  .tk-perfwrap{display:flex;flex-direction:column;gap:8px}
  .tk-stats .tk-perf{gap:8px}
  .tk-stats .tk-perf .p{padding:10px 6px;border-radius:10px;background:var(--surface-2)}
  .tk-stats .tk-perf .p.up{background:color-mix(in srgb,var(--up) 10%,transparent)}
  .tk-stats .tk-perf .p.down{background:color-mix(in srgb,var(--down) 9%,transparent)}
  .tk-stats .tk-perf .k{font-size:11.5px}
  .tk-stats .tk-perf .v{font-size:14.5px;font-weight:700}
  .tk-sub-title{font-size:12.5px;font-weight:600;color:var(--text-dim)}
  @media(min-width:1080px){
    .tk-stats{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-areas:"ranges tiles" "perf perf";gap:26px 32px}
    .tk-ranges{grid-area:ranges;justify-content:center}
    .tk-stats .tk-statgrid{grid-area:tiles;grid-template-columns:repeat(2,minmax(0,1fr));align-content:center}
    .tk-perfwrap{grid-area:perf}
  }
  /* tabs: the active one in brand blue */
  .tk-tabs button.on{border-bottom-color:var(--blue);color:var(--text)}
  .tk-tabs button:hover{color:var(--text)}
  /* company profile: say whose profile it is; long text folds to four lines */
  .tk-prof-h{margin:6px 0 10px;font-size:17px;font-weight:700;letter-spacing:-.01em}
  .tk-profile .company-description{font-size:14.5px;line-height:1.65}
  .tk-clamp p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .tk-clamp.open p{display:block}
  .tk-more{margin-top:6px;padding:4px 0;font-size:13px;font-weight:600;color:var(--blue)}
  .tk-more:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
  .tk-profile .tk-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
  @media(max-width:479px){
    .tk-stats .tk-statgrid,.tk-profile .tk-statgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .tk-stats .tk-perf{gap:4px}
    .tk-stats .tk-perf .p{padding:8px 2px}
    .tk-stats .tk-perf .v{font-size:12.5px}
  }
  /* ticker news list */
  .tkn-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 10px}
  .tkn-head .pill-tabs2{margin:0}
  .tkn-count{font-size:12.5px;color:var(--text-faint);font-variant-numeric:tabular-nums}
  .tkn-list{padding:4px 0;overflow:hidden}
  .tkn-more{display:block;width:calc(100% - 40px);margin:6px 20px 4px;padding:10px;border:1px solid var(--border);border-radius:10px;background:none;color:var(--text);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
  .tkn-more:hover{border-color:var(--blue);color:var(--blue)}
  .tkn-more span{color:var(--text-faint);font-weight:500}
  .tkn-note{margin:0;padding:10px 20px 12px;font-size:11.5px;color:var(--text-faint)}
  .tkn-empty{display:grid;gap:4px;padding:28px 20px;text-align:center;font-size:13px;color:var(--text-faint)}
  .tkn-empty b{color:var(--text);font-size:14px}
  .tkn-skel>div{display:grid;gap:8px;padding:14px 20px}
  .tkn-skel>div+div{border-top:1px solid var(--border-soft)}
  .tkn-skel i,.tkn-skel b{display:block;height:10px;border-radius:5px;background:var(--surface-2)}
  .tkn-skel i{width:30%}.tkn-skel b{height:13px}.tkn-skel b+b{width:65%}
  @media(max-width:767px){
    .tkn-more{width:calc(100% - 32px);margin:6px 16px 4px}
    .tkn-list .ni-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
    .tkn-note{padding:10px 16px 12px}
  }