/* ============================================================
   THEME TOKENS — derived from logo: royal blue + green
   Light and dark share the brand hues; only surfaces flip.
============================================================ */
:root{
  --brand:#1657D0;        /* royal blue — logo mark */
  --brand-600:#1147AE;
  --brand-700:#0D3A90;
  --green:#1BA45B;        /* logo green — brand/actions */
  --green-600:#158A4C;
  --sans:'Roboto',system-ui,sans-serif;
  --mono:'Roboto',system-ui,sans-serif;
}

/* LIGHT */
[data-theme="light"] {
    --bg: #F4F6FB; /* faint blue-grey paper */
    --surface: #FFFFFF;
    --surface-2: #F9FAFD;
    --header: #0D3A90; /* deep royal blue header */
    --header-ink: #FFFFFF;
    --header-sub: #AFC4EC;
    --ink: #0F1B33;
    --muted: #000000;
    --line: #DDE3EF;
    --line-soft: #EAEEF6;
    --hero-bg: #0D3A90;
    --hero-ink: #FFFFFF;
    --hero-sub: #BBCDEC;
    --board-bg: #0A2E73;
    --board-line: rgba(255,255,255,.12);
    --board-ink: #FFFFFF;
    --board-sub: #9DB4DE;
    --up: #0F7B54; /* price up — distinct from brand green */
    --down: #C0392B; /* price down */
    --up-bright: #2FD48A;
    --down-bright: #F0705E;
    --util-bg: #0A2E73;
    --util-ink: #AFC4EC;
    --foot-bg: #081B41;
    --foot-ink: #9DB0D2;
    --risk-bg: #EAEEF6;
    --risk-ink: #5E6B84;
    --shadow: 0 1px 2px rgba(13,58,144,.05),0 4px 14px rgba(13,58,144,.06);
}

/* DARK */
[data-theme="dark"]{
  --bg:#0A1120;           /* near-black navy */
  --surface:#111C31;
  --surface-2:#0E1729;
  --header:#0C1526;
  --header-ink:#FFFFFF;
  --header-sub:#8CA3C9;
  --ink:#E7ECF5;
  --muted:#8A98B2;
  --line:#22314F;
  --line-soft:#1A273F;
  --hero-bg:#0C1830;
  --hero-ink:#FFFFFF;
  --hero-sub:#A7B7D6;
  --board-bg:#0A1424;
  --board-line:rgba(255,255,255,.09);
  --board-ink:#FFFFFF;
  --board-sub:#8CA3C9;
  --up:#2FD48A;
  --down:#F0705E;
  --up-bright:#2FD48A;
  --down-bright:#F0705E;
  --util-bg:#070E1B;
  --util-ink:#8CA3C9;
  --foot-bg:#070E1B;
  --foot-ink:#8494B2;
  --risk-bg:#0E1729;
  --risk-ink:#8A98B2;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;height:100%}
body{margin:0;font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.55;
  -webkit-font-smoothing:antialiased;transition:background .25s,color .25s;
  min-height:100%;display:flex;flex-direction:column}
body > main{flex:1 0 auto}
a{color:inherit}
.wrap{margin:0 auto;padding:0 24px;max-width:1400px}
body.page-dashboard .wrap{max-width:none}

/* ---------- Utility bar ---------- */
.util{background:var(--util-bg);color:var(--util-ink);font-size:12.5px;font-family:var(--mono)}
.util .wrap{display:flex;justify-content:space-between;align-items:center;height:34px;gap:16px}
.util a{text-decoration:none}
.util a:hover{color:var(--green)}
.util-links{display:flex;gap:18px;align-items:center}
#mkt-status.mkt-open{color:var(--green)}
#mkt-status.mkt-closed{color:var(--down)}

/* ---------- Header ---------- */
header{background:var(--header);color:var(--header-ink);position:sticky;top:0;z-index:50;
  border-bottom:1px solid var(--board-line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:8px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
.brand-logo{height:40px;width:auto;display:block;border-radius:4px}
.brand-logo-lg{height:48px}
.brand-wm{display:flex;flex-direction:column;line-height:1.25}
.brand-wm b{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--header-ink)}
.brand-wm span{display:block;font-family:var(--mono);font-size:10px;color:var(--green);
  letter-spacing:.06em;text-transform:uppercase;margin-top:2px}
.brand-wm-lg b{font-size:19px}
.brand-wm-lg span{font-size:11px}
footer .brand-wm b{color:#fff}
#nav{display:flex;gap:26px}
#nav a{text-decoration:none;font-size:14.5px;font-weight:500;color:var(--header-sub);
  padding:6px 0;border-bottom:2px solid transparent;transition:color .15s}
#nav a:hover,#nav a.on{color:var(--header-ink);border-color:var(--green)}
.actions{display:flex;gap:10px;align-items:center}
.btn{display:inline-block;background:var(--green);color:#fff;text-decoration:none;font-weight:600;
  font-size:14px;padding:10px 18px;border:0;border-radius:3px;cursor:pointer;font-family:var(--sans);
  transition:background .15s}
.btn:hover{background:var(--green-600)}
.btn-blue{background:var(--brand)}
.btn-blue:hover{background:var(--brand-600)}
.btn-ghost{background:transparent;color:var(--header-ink);border:1px solid rgba(255,255,255,.28)}
.header-btn{padding:6px 18px}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-ghost-light{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost-light:hover{background:var(--surface-2)}
.btn:disabled{opacity:.6;cursor:not-allowed}

/* theme toggle */
.toggle{width:34px;height:34px;border-radius:6px;border:1px solid rgba(255,255,255,.22);
  background:transparent;color:var(--header-ink);cursor:pointer;display:flex;align-items:center;
  justify-content:center;font-size:16px;transition:background .15s}
.toggle:hover{background:rgba(255,255,255,.1)}
.menu-btn{display:none;background:none;border:0;color:var(--header-ink);font-size:24px;cursor:pointer}

/* iTrade header shortcut — wordmark badge instead of a square icon, so it
   widens to fit rather than squashing the logo down to 34px. */
/* No border/background here (unlike the plain .toggle buttons either side
   of it) — the badge image already is a complete, self-contained rounded
   graphic with its own border baked in, so wrapping it in .toggle's box too
   just doubled up the framing and left an awkward gap of empty space
   between the image and that outer border. */
.it-badge-btn{width:auto;height:auto;padding:0;border:0;background:transparent}
.it-badge-btn:hover{background:transparent}
.it-badge-btn img{display:block;transition:opacity .15s}
.it-badge-btn:hover img{opacity:.85}

/* ---------- Ticker ribbon (signature) ---------- */
.ribbon{background:var(--util-bg);border-bottom:1px solid var(--board-line);overflow:hidden;position:relative}
.ribbon::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--util-bg) 0%,transparent 6%,transparent 94%,var(--util-bg) 100%)}
.tape{display:flex;width:max-content;animation:roll 60s linear infinite}
@keyframes roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ribbon:hover .tape{animation-play-state:paused}
.tick{display:flex;align-items:baseline;gap:9px;padding:11px 22px;
  border-right:1px solid var(--board-line);font-family:var(--mono);font-size:13px;white-space:nowrap}
.tick .sym{color:var(--board-ink);font-weight:500;letter-spacing:.03em}
.tick .px{color:var(--board-sub)}
.tick .ch{font-size:12px;font-weight:600}
.up{color:var(--up)}.down{color:var(--down)}
.tick .up{color:var(--up-bright)}.tick .down{color:var(--down-bright)}
/* The ticker keeps auto-scrolling even for visitors with Reduce Motion on —
   a deliberate call, not an oversight (see ts/chrome.ts's loadTape()). */

/* ---------- Hero ---------- */
.hero{background:var(--hero-bg);color:var(--hero-ink);padding:52px 0 60px;
  border-bottom:3px solid var(--green);position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-40%;right:-10%;width:520px;height:520px;
  background:radial-gradient(circle,rgba(22,87,208,.35) 0%,transparent 65%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;position:relative}
.eyebrow{font-family:var(--mono);font-size:14px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--green);margin-bottom:18px}
.hero h1{font-size:47px;line-height:1.08;letter-spacing:-.03em;margin:0 0 20px;font-weight:700}
.hero p{font-size:16.5px;color:var(--hero-sub);margin:0 0 30px;max-width:44ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.trust{display:flex;gap:34px;margin-top:38px;padding-top:26px;border-top:1px solid var(--board-line)}
.trust div{font-family:var(--mono)}
.trust b{display:block;font-size:22px;color:var(--hero-ink);font-weight:600}
.trust span{font-size:11.5px;color:var(--board-sub);letter-spacing:.05em}

/* Board card */
.board{background:var(--board-bg);border:1px solid var(--board-line);border-radius:5px;
  overflow:hidden;box-shadow:var(--shadow)}
.board-hd{display:flex;justify-content:space-between;align-items:center;padding:13px 18px;
  border-bottom:1px solid var(--board-line)}
.board-hd h3{margin:0;font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  font-family:var(--mono);color:var(--board-sub);font-weight:500}
.live{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12.5px;color:var(--up-bright)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--up-bright);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.idx-block{padding:18px 18px 20px}
.idx-block + .idx-block{border-top:1px solid var(--board-line)}
.idx-block-hd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.idx-block-name{font-family:var(--mono);font-size:22px;color:var(--board-ink);font-weight:600;letter-spacing:.02em}
.idx-block-chg{font-family:var(--mono);font-size:16px;font-weight:600}
.idx-block-chg.up{color:var(--up-bright)}.idx-block-chg.down{color:var(--down-bright)}
.idx-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.idx-col:first-child{border-right:1px solid var(--board-line);padding-right:16px}
.idx-col-hd{font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--board-sub);font-weight:600;margin-bottom:10px}
.idx-val{font-family:var(--mono);font-size:30px;font-weight:700;letter-spacing:-.01em;margin-bottom:6px}
.idx-val.up{color:var(--up-bright)}.idx-val.down{color:var(--down-bright)}
.idx-chgline{font-family:var(--mono);font-size:16px;font-weight:600;margin-bottom:10px}
.idx-chgline.up{color:var(--up-bright)}.idx-chgline.down{color:var(--down-bright)}
.idx-turnover{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--board-sub);margin-bottom:10px}
.idx-adv{font-family:var(--mono);font-size:15px;font-weight:600;white-space:nowrap}
.idx-adv .up{color:var(--up-bright)}.idx-adv .down{color:var(--down-bright)}.idx-adv .unch{color:var(--board-sub)}
.board-ft{padding:11px 18px;font-family:var(--mono);font-size:11px;color:var(--board-sub);
  display:flex;justify-content:space-between}

/* Dashboard's index board: DSEX and CASPI side by side, full section width */
#market-index .board{max-width:none}
#market-index .idx{display:grid;grid-template-columns:1fr 1fr}
#market-index .idx-block{padding:22px 30px 24px}
#market-index .idx-block + .idx-block{border-top:0;border-left:1px solid var(--board-line)}
#market-index .idx-cols{gap:30px}
#market-index .idx-col:first-child{padding-right:30px}
@media(max-width:700px){
  #market-index .idx{grid-template-columns:1fr}
  #market-index .idx-block{padding:18px 18px 20px}
  #market-index .idx-block + .idx-block{border-left:0;border-top:1px solid var(--board-line)}
  #market-index .idx-cols{gap:16px}
  #market-index .idx-col:first-child{padding-right:16px}
}

/* ---------- Sections ---------- */
section{padding:26px 0}
.sec-hd{margin-bottom:34px}
.sec-hd .eyebrow{color:var(--brand)}
[data-theme="dark"] .sec-hd .eyebrow{color:#5B8CE8}
.sec-hd h2{font-size:31px;letter-spacing:-.025em;margin:0 0 8px;font-weight:700}
.sec-hd p{color:var(--muted);margin:0;font-size:15.5px;max-width:60ch}

.market-title-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.market-title-row h2{margin:0}
.exch-switch{position:relative;display:inline-flex;flex-shrink:0;background:var(--surface-2);
  border:1px solid var(--line);border-radius:999px;padding:3px}
.exch-switch .exch-thumb{position:absolute;top:3px;left:3px;width:calc(50% - 3px);height:calc(100% - 6px);
  background:var(--brand);border-radius:999px;transition:transform .22s cubic-bezier(.4,0,.2,1)}
[data-theme="dark"] .exch-switch .exch-thumb{background:#5B8CE8}
.exch-switch.cse .exch-thumb{transform:translateX(100%)}
.exch-opt{position:relative;z-index:1;border:0;background:transparent;padding:7px 22px;
  font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.03em;color:var(--muted);
  cursor:pointer;border-radius:999px;transition:color .2s}
.exch-opt.active{color:#fff}

/* Movers */
.movers{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:5px;overflow:hidden;box-shadow:var(--shadow)}
.panel-hd{padding:13px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;
  align-items:center;background:var(--surface-2)}
.panel-hd h3{margin:0;font-size:13px;font-family:var(--mono);letter-spacing:.09em;text-transform:uppercase;font-weight:600}
.panel-hd .tag{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
table{width:100%;border-collapse:collapse}
th{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  text-align:right;padding:9px 18px;border-bottom:1px solid var(--line);font-weight:500}
th:first-child{text-align:left}
td{padding:4px 6px;border-bottom:1px solid var(--line-soft);font-family:var(--mono);font-size:13.5px;text-align:right}
td:first-child{text-align:left;font-weight:500}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
.skel{color:var(--muted)}
.row-link{cursor:pointer}
.ssd-company{color:var(--muted);font-size:13.5px;margin-top:4px}

/* Flash a row's background when a live SignalR tick updates its price. */
@keyframes spFlashUp{0%{background:rgba(27,164,91,.35)}100%{background:transparent}}
@keyframes spFlashDown{0%{background:rgba(192,57,43,.35)}100%{background:transparent}}
.sp-flash-up{animation:spFlashUp 900ms ease-out}
.sp-flash-down{animation:spFlashDown 900ms ease-out}

/* Compact, capped-height panels (dashboard Holdings + Watchlist) — these used
   to grow the whole page taller as rows loaded instead of scrolling within
   themselves. ~15 rows' worth, then scroll, with the header (and a footer,
   if the table has one) pinned in place. */
.dash-scroll-panel{overflow:auto}
.stock-panel{max-height:350px}
.stock-panel th{padding:5px 9px}
.stock-panel td{padding:4px 6px}
.stock-panel td:first-child{padding-left:12px}
.stock-panel td:last-child{padding-right:12px}
.trades-panel{max-height:450px}
.trades-panel td{padding:4px 6px}
.trades-panel td:first-child{padding-left:12px}
.trades-panel td:last-child{padding-right:12px}
/* Buy/sell marked by row background only — no colored text. */
.trades-panel tbody tr.trade-row-buy{background:rgba(16,163,74,.14)}
.trades-panel tbody tr.trade-row-sell{background:rgba(220,38,38,.14)}
.dash-scroll-panel thead th{position:sticky;top:0;background:var(--surface-2);z-index:1;white-space:normal;line-height:1.25}
.dash-scroll-panel tfoot th,.dash-scroll-panel tfoot td{position:sticky;bottom:0;background:var(--surface-2);z-index:1}
/* Holdings' "Total (N)" summary row is the tbody's own last row (not a real
   tfoot), so it needs its own sticky-bottom rule rather than the tfoot one. */
.stock-total-row td{position:sticky;bottom:0;background:var(--surface-2);z-index:1;font-weight:600}
.trades-total-row td{position:sticky;bottom:0;background:var(--surface-2);z-index:1;font-weight:600}

/* Stock details popup (Dashboard holdings → click a company) */
.ssd-popup{text-align:left}
.ssd-info-tbl{width:100%;border-collapse:collapse;margin-bottom:14px;border:1px solid var(--line)}
.ssd-info-tbl td{border:1px solid var(--line);padding:8px 14px;vertical-align:middle}
.ssd-info-co{text-align:left}
.ssd-popup-sym{font-size:20px;font-weight:700}
.ssd-popup-cat{color:var(--muted);font-weight:500;font-size:15px}
.ssd-popup-name{color:var(--muted);font-size:13px;margin-top:2px}
.ssd-info-baltitle{text-align:center;font-weight:700}
.ssd-info-sub{text-align:center;font-weight:700}
.ssd-info-val{text-align:center;font-size:20px;font-weight:700}
.ssd-info-quote{width:200px}
/* Two self-contained columns — LTP (label/value/change) always left, YCP
   (label/value) always right — instead of mixing a flex row with separate
   full-width blocks below it, which let the two drift out of alignment. */
.ssd-quote-grid{display:flex;justify-content:space-between;gap:10px}
.ssd-quote-col{display:flex;flex-direction:column}
.ssd-quote-left{text-align:left}
.ssd-quote-right{text-align:right}
.ssd-quote-lbl{font-size:11px;color:var(--muted)}
.ssd-quote-ltpval{font-size:30px;font-weight:700;line-height:1.3}
.ssd-quote-ycpval{font-size:20px;font-weight:700;color:var(--ink)}
.ssd-quote-chg{font-size:12.5px}
.ssd-popup-tbl-wrap{max-height:320px;overflow:auto;border:1px solid var(--line);border-radius:5px}
/* Self Reminder popup on dashboard login — reuses .hdr-widget-item (same
   header-dropdown row look) inside its own scrollable, bordered wrapper. */
.dash-reminder-list{text-align:left;max-height:360px;overflow-y:auto;border:1px solid var(--line);border-radius:5px}
.dash-reminder-list .hdr-widget-item:last-child{border-bottom:none}
.ssd-popup-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.ssd-popup-tbl th{position:sticky;top:0;background:var(--brand);color:#fff;padding:6px 8px;font-weight:600;white-space:nowrap}
.ssd-popup-tbl td{padding:5px 8px;border-bottom:1px solid var(--line-soft)}
.ssd-popup-tbl tfoot td{position:sticky;bottom:0;background:var(--surface-2);font-weight:700}
.ssd-row-buy{background:rgba(16,163,74,.14)}
.ssd-row-sell{background:rgba(220,38,38,.14)}

/* Watchlist table */
.watchlist-panel.dash-scroll-panel{max-height:680px}
.watchlist-table th,.watchlist-table td{font-size:15px}
.watchlist-table thead tr:first-child th{font-size:12px;padding-bottom:6px}
.watchlist-table thead tr:first-child th:not(:first-child){text-align:center;border-left:1px solid var(--line)}
.watchlist-table thead tr:last-child th{padding-top:6px;top:31px}
.watchlist-table th:nth-child(2),.watchlist-table td:nth-child(2),
.watchlist-table th:nth-child(8),.watchlist-table td:nth-child(8){border-left:1px solid var(--line)}
.watchlist-table td{font-weight:600}
.watchlist-table td.watchlist-sym{font-family:var(--sans);font-weight:700;font-size:15.5px;color:var(--ink)}

/* Mobile watchlist table: one row per exchange, Company + Exch pinned while the rest scrolls.
   The wide grouped-header table above is desktop-only; this replaces it under 700px. */
.watchlist-table-mobile{display:none}
@media(max-width:700px){
  .watchlist-table{display:none}
  /* table-layout:fixed + the <colgroup> below lock every column to its declared
     width regardless of content (a long company name can't push the column wider
     than CSS says) — the sticky "left" offsets below only stay aligned to the real
     column edges because of this; table-layout:auto silently broke that guarantee. */
  .watchlist-table-mobile{display:table;table-layout:fixed;width:610px}
}
.watchlist-table-mobile th,.watchlist-table-mobile td{font-size:13px;white-space:nowrap;padding:9px 11px;
  font-weight:600;overflow:hidden;text-overflow:ellipsis}
.watchlist-table-mobile .wlm-sticky{position:sticky;background:var(--surface);z-index:2}
.watchlist-table-mobile thead .wlm-sticky{z-index:3}
.watchlist-table-mobile .wlm-company{left:0;white-space:normal;overflow:visible;
  border-right:1px solid var(--line);vertical-align:top;padding-top:11px}
.watchlist-table-mobile .wlm-exch{left:118px;border-right:1px solid var(--line);font-weight:700}
.watchlist-table-mobile .wlm-company b{font-family:var(--sans);font-size:13.5px;color:var(--ink);font-weight:700}
.watchlist-table-mobile .wlm-sub{display:block;font-family:var(--sans);font-size:10.5px;color:var(--muted);
  font-weight:400;margin-top:2px;line-height:1.3;white-space:normal}
.watchlist-table-mobile .wl-remove{float:right;margin-left:4px;font-size:15px}
.watchlist-table-mobile tbody tr:nth-child(2n) td{border-bottom:1px solid var(--line)}

/* Watchlist manager: add-search + remove button */
.wl-search-wrap{position:relative;max-width:480px;margin-bottom:22px}
.wl-add-results{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--surface);
  border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow);max-height:320px;overflow-y:auto;z-index:20}
.wl-add-result{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;
  cursor:pointer;border-bottom:1px solid var(--line-soft)}
.wl-add-result:last-child{border-bottom:0}
.wl-add-result:hover{background:var(--surface-2)}
.wl-add-result .sym{font-weight:700;font-size:13.5px;color:var(--ink)}
.wl-add-result .name{font-size:12px;color:var(--muted)}
.wl-add-result .add-tag{font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--brand);
  background:rgba(37,71,163,.08);border-radius:999px;padding:3px 10px;flex-shrink:0}
[data-theme="dark"] .wl-add-result .add-tag{color:#5B8CE8;background:rgba(91,140,232,.14)}
.wl-remove{border:0;background:transparent;color:var(--down);font-size:17px;font-weight:700;cursor:pointer;
  margin-left:8px;line-height:1;padding:2px 6px;border-radius:4px;vertical-align:middle}

/* Generic stock combobox — type to filter, click to select. Same visual
   language as the watchlist add-search above, generalized for reuse
   wherever a page needs the user to pick a stock. */
.stock-combo{position:relative}
.stock-combo-results{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--surface);
  border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow);max-height:280px;overflow-y:auto;z-index:20}
.stock-combo-result{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;
  cursor:pointer;border-bottom:1px solid var(--line-soft);font-size:13.5px}
.stock-combo-result:last-child{border-bottom:0}
.stock-combo-result:hover,.stock-combo-result.active{background:var(--surface-2)}
.stock-combo-result .sym{font-weight:700;color:var(--ink)}
.stock-combo-result .name{display:block;font-size:12px;color:var(--muted);font-weight:400}
.stock-combo-sub{font-size:12px;color:var(--muted);flex-shrink:0}
.wl-remove:hover{background:rgba(192,57,43,.1)}
[data-theme="dark"] .wl-remove:hover{background:rgba(240,112,94,.14)}
.wl-remove:disabled{opacity:.4;cursor:default}

/* News */
.news-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:800px){.news-grid{grid-template-columns:1fr}}
.news-item{display:block;padding:14px 18px;border-bottom:1px solid var(--line-soft);
  text-decoration:none;color:inherit;cursor:pointer}
.news-item:last-child{border-bottom:0}
.news-item:hover{background:var(--surface-2)}
.news-item time{display:block;font-family:var(--mono);font-size:11px;color:var(--muted);margin-bottom:4px}
.news-item h4{margin:0;font-size:14px;font-weight:600;line-height:1.4}
.news-item:hover h4{color:var(--brand)}
[data-theme="dark"] .news-item:hover h4{color:#5B8CE8}
.news-tag{display:inline-block;font-family:var(--mono);font-size:10px;font-weight:600;color:var(--brand);
  background:rgba(37,71,163,.08);border-radius:3px;padding:2px 6px;margin-right:8px}
[data-theme="dark"] .news-tag{color:#5B8CE8;background:rgba(91,140,232,.12)}

/* Market Information tiles (home page) */
.mkt-info{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-radius:6px;overflow:hidden;box-shadow:var(--shadow)}
.mkt-info-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:34px 18px;color:#fff;text-decoration:none;text-align:center;transition:filter .15s}
.mkt-info-tile:hover{filter:brightness(1.08)}
.mkt-info-tile svg{width:30px;height:30px;flex-shrink:0}
.mkt-info-tile span{font-size:16px;font-weight:600;line-height:1.25}
.mkt-info-tile:nth-child(1){background:var(--brand-700)}
.mkt-info-tile:nth-child(2){background:var(--brand-600)}
.mkt-info-tile:nth-child(3){background:var(--brand)}
.mkt-info-tile:nth-child(4){background:#1B66F0}
@media(max-width:700px){.mkt-info{grid-template-columns:1fr 1fr}}

/* Segmented tabs (Dividends, IPO) */
.seg-tabs{display:inline-flex;flex-wrap:wrap;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:3px;gap:2px;max-width:100%}
.seg-tabs button{border:0;background:transparent;padding:8px 20px;border-radius:6px;font-family:var(--mono);
  font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--muted);cursor:pointer;white-space:nowrap}
.seg-tabs button.active{background:var(--brand);color:#fff}
[data-theme="dark"] .seg-tabs button.active{background:#5B8CE8}
@media(max-width:480px){.seg-tabs button{padding:8px 12px}}

/* Text-heavy tables (Dividends, Right Shares) — override the numeric right-align default */
.text-left-table th,.text-left-table td{text-align:left}

/* About us (home page) — highlighted like the hero, marks where the company-info sections begin */
#about{background:var(--hero-bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#about .sec-hd .eyebrow{color:var(--green)}
#about .sec-hd h2{color:var(--hero-ink)}
#about .sec-hd p,#about > .wrap > div > p{color:var(--hero-ink)}
.about-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:start}
@media(max-width:800px){.about-grid{grid-template-columns:1fr;gap:32px}}
.about-stats{display:grid;grid-template-columns:1fr 1fr;gap:24px 28px}
@media(max-width:500px){.about-stats{grid-template-columns:1fr}}
.about-stat{padding-top:16px;border-top:1px solid var(--board-line)}
.about-stat b{display:block;font-family:var(--mono);font-size:25px;color:var(--hero-ink);font-weight:600;margin-bottom:5px}
.about-stat span{font-family:var(--mono);font-size:11px;color:var(--board-sub);letter-spacing:.06em}

/* Index performance chart (Home + Dashboard) */
.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:800px){.chart-grid{grid-template-columns:1fr}}
.chart-container{position:relative;height:320px;padding:8px 4px 4px}
.panel-hd.chart-panel-hd{flex-wrap:wrap;row-gap:8px}
.panel-hd.chart-panel-hd .seg-tabs{padding:2px;gap:1px}
.panel-hd.chart-panel-hd .seg-tabs button{padding:6px 11px;font-size:11px}
.chart-container[data-empty="true"]::after{
  content:'No data for this period.';
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:13.5px;pointer-events:none}

/* Toolbar row: search + exchange switch (Share Price) */
.toolbar-row{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.search-input{padding:9px 14px;border:1px solid var(--line);border-radius:6px;font-family:var(--sans);
  font-size:14px;color:var(--ink);background:var(--surface);min-width:240px}
.search-input:focus{outline:none;border-color:var(--brand)}

/* IPO cards */
.ipo-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}

/* Share price table: bigger than the site default for readability at a glance */
#share-price td{font-size:17.5px}
#share-price th{font-size:12.5px}

/* Fixed-height scrollable table body — long lists scroll in place instead of growing the page */
.table-scroll{max-height:600px;overflow-y:auto;overflow-x:auto}
.table-scroll thead th{position:sticky;top:0;background:var(--surface);z-index:1}

/* SweetAlert2 popups (notice / news detail): red close (x) button, top-right */
.swal2-close{color:var(--down)!important;font-size:38px!important;font-weight:600;width:1.4em!important;height:1.4em!important}
.swal2-close:hover{color:var(--down)!important;background:rgba(192,57,43,.1)!important}
[data-theme="dark"] .swal2-close:hover{background:rgba(240,112,94,.14)!important}

/* Payment methods teaser (home page) */
.pay-methods{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:26px}
@media(max-width:700px){.pay-methods{grid-template-columns:repeat(2,1fr)}}
.pay-method{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:22px 14px;
  display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center;box-shadow:var(--shadow)}
.pay-method svg{width:26px;height:26px;color:var(--brand);flex-shrink:0}
[data-theme="dark"] .pay-method svg{color:#5B8CE8}
.pay-method span{font-size:13px;font-weight:600;color:var(--ink)}

/* Services */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc-card{background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:26px 24px;box-shadow:var(--shadow)}
.svc-card .k{font-family:var(--mono);font-size:11px;color:var(--green);letter-spacing:.14em;margin-bottom:13px;font-weight:600}
.svc-card h3{margin:0 0 9px;font-size:18px;letter-spacing:-.015em}
.svc-card p{margin:0;color:var(--muted);font-size:14.5px}
.svc-card p a{color:var(--brand);text-decoration:none}
.svc-card p a:hover{text-decoration:underline}
[data-theme="dark"] .svc-card p a{color:#5B8CE8}

/* Board / team */
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:700px){.team-grid{grid-template-columns:1fr}}
.team-card{background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden;box-shadow:var(--shadow)}
.team-card img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top;display:block}
.team-card-body{padding:24px 26px}
.team-card h3{margin:0 0 6px;font-size:19px;letter-spacing:-.015em}
.team-card .k{font-family:var(--mono);font-size:11px;color:var(--green);letter-spacing:.14em;margin-bottom:12px;font-weight:600}
.team-email{margin:0 0 14px}
.team-email a{color:var(--brand);text-decoration:none;font-size:13.5px}
.team-email a:hover{text-decoration:underline}
[data-theme="dark"] .team-email a{color:#5B8CE8}
.team-card-body p:last-child{margin:0;color:var(--muted);font-size:14.5px;line-height:1.65}

/* Social links / check list */
.social-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.social-links a{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:3px;
  padding:9px 16px;font-family:var(--mono);font-size:13px;text-decoration:none;color:var(--ink);
  transition:border-color .15s,color .15s}
.social-links svg{width:17px;height:17px;flex-shrink:0}
.social-links a:hover{border-color:var(--brand);color:var(--brand)}
[data-theme="dark"] .social-links a:hover{border-color:#5B8CE8;color:#5B8CE8}
.social-links a.sl-fb:hover{border-color:#1877F2;color:#1877F2}
.social-links a.sl-tw:hover{border-color:#1DA1F2;color:#1DA1F2}
.social-links a.sl-li:hover{border-color:#0A66C2;color:#0A66C2}
.social-links a.sl-ig:hover{border-color:#E1306C;color:#E1306C}
.social-links a.sl-pin:hover{border-color:#E60023;color:#E60023}
.social-links a.sl-yt:hover{border-color:#FF0000;color:#FF0000}
.store-badges{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:34px}
.store-badges img{height:44px;width:auto;display:block}
.store-badges .badge-dark{display:none}
[data-theme="dark"] .store-badges .badge-light{display:none}
[data-theme="dark"] .store-badges .badge-dark{display:block}
.check-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.check-list li{position:relative;padding-left:24px;color:var(--ink);font-size:14.5px}
.check-list li::before{content:'✓';position:absolute;left:0;color:var(--green);font-weight:700}

/* Notices */
.notices{display:grid;grid-template-columns:2fr 1fr;gap:26px}
.notice{display:flex;gap:18px;padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none}
.notice:last-child{border-bottom:0}
.notice time{font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap;padding-top:2px;min-width:82px}
.notice h4{margin:0 0 3px;font-size:15.5px;font-weight:600}
.notice p{margin:0;color:var(--muted);font-size:13.5px}
.notice:hover h4{color:var(--brand)}
[data-theme="dark"] .notice:hover h4{color:#5B8CE8}
.aside{background:var(--hero-bg);color:#fff;border-radius:5px;padding:26px 24px;align-self:start;
  border:1px solid var(--board-line)}
.aside h3{margin:0 0 8px;font-size:18px}
.aside p{color:var(--hero-sub);font-size:14px;margin:0 0 18px}
.aside ul{margin:0 0 20px;padding-left:17px;color:var(--hero-sub);font-size:14px}
.aside li{margin-bottom:6px}

/* Blog */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.blog-grid{grid-template-columns:1fr}}
.blog-card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:6px;
  overflow:hidden;box-shadow:var(--shadow);text-decoration:none;transition:border-color .15s}
.blog-card:hover{border-color:var(--brand)}
[data-theme="dark"] .blog-card:hover{border-color:#5B8CE8}
.blog-card-img{height:170px;background-size:cover;background-position:center;background-color:var(--surface-2)}
.blog-card-img-empty{background:linear-gradient(135deg,var(--surface-2),var(--surface))}
.blog-card-body{padding:18px 20px}
.blog-card-meta{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted);margin-bottom:8px}
.blog-card h3{margin:0 0 10px;font-size:16.5px;line-height:1.35;color:var(--ink)}
.blog-tags{display:flex;flex-wrap:wrap;gap:6px}
.blog-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;color:var(--brand);
  background:rgba(37,71,163,.08);border-radius:3px;padding:3px 8px}
[data-theme="dark"] .blog-tag{color:#5B8CE8;background:rgba(91,140,232,.12)}

.blog-back{display:inline-block;margin-bottom:24px;font-size:13.5px;color:var(--brand);text-decoration:none}
.blog-back:hover{text-decoration:underline}
[data-theme="dark"] .blog-back{color:#5B8CE8}
#blog-post .wrap{max-width:760px}
#blog-post-content h1{font-size:30px;letter-spacing:-.02em;margin:6px 0 20px;line-height:1.25}
.blog-post-hero{width:100%;border-radius:6px;margin-bottom:20px;display:block}
.blog-post-details{color:var(--ink);font-size:15.5px;line-height:1.7;margin-top:20px}
.blog-post-details p{margin:0 0 18px;text-align:justify}
.blog-post-details h2{font-size:22px;letter-spacing:-.01em;margin:32px 0 14px}
.blog-post-details h3{font-size:18px;margin:26px 0 12px}
.blog-post-details ul,.blog-post-details ol{margin:0 0 18px;padding-left:22px}
.blog-post-details li{margin-bottom:6px}
.blog-post-details blockquote{margin:0 0 18px;padding:4px 18px;border-left:3px solid var(--brand);color:var(--muted)}
[data-theme="dark"] .blog-post-details blockquote{border-left-color:#5B8CE8}
.blog-post-details a{color:var(--brand)}
[data-theme="dark"] .blog-post-details a{color:#5B8CE8}
.blog-post-details img{max-width:100%;border-radius:6px}

/* Generic content pages (Privacy, Error, etc.) */
.page-hd{padding:48px 0 8px}
.page-hd h1{font-size:31px;letter-spacing:-.025em;margin:0 0 8px;font-weight:700}
.page-body{padding-bottom:66px}
.page-body p{color:var(--muted);font-size:15.5px}

/* Footer */
footer{background:var(--foot-bg);color:var(--foot-ink);padding:52px 0 0;font-size:14px}
.f-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;padding-bottom:38px}
footer h4{color:#fff;font-size:12px;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px;font-weight:500}
footer a{text-decoration:none;display:block;margin-bottom:8px}
footer a:hover{color:var(--green)}
.f-bot{border-top:1px solid var(--board-line);padding:18px 0;font-family:var(--mono);font-size:11.5px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.risk{background:var(--risk-bg);color:var(--risk-ink);font-size:12.5px;padding:15px 0;line-height:1.5}

:focus-visible{outline:2px solid var(--green);outline-offset:2px}

@media(max-width:940px){
  .hero-grid,.movers,.notices,.svc,.check-list{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr}
  .hero h1{font-size:35px}
  #nav{display:none}
  .menu-btn{display:block}
  #nav.open{display:flex;position:absolute;top:68px;left:0;right:0;background:var(--header);
    flex-direction:column;padding:16px 24px;gap:2px;border-bottom:1px solid var(--board-line);
    box-shadow:0 12px 24px rgba(0,0,0,.35)}
  #nav.open a{padding:11px 0;border-bottom:1px solid var(--board-line)}
  .trust{gap:22px;flex-wrap:wrap}
  .hide-sm{display:none}
}
@media(max-width:480px){
  header .wrap{gap:4px}
  .brand-wm{display:none}
  .brand-logo{height:32px}
  .actions{gap:6px}
  .btn-ghost{padding:8px 10px;font-size:13px}
  .header-btn{padding:8px 10px}
  .nav-app-link span{display:none}
  .toggle{width:30px;height:30px;font-size:14px}
  .menu-btn{font-size:21px}
}
.nav-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:45}
.nav-backdrop.show{display:block}

@media(max-width:480px){
  .f-grid{grid-template-columns:1fr;gap:30px}
  .f-bot{flex-direction:column;align-items:flex-start;gap:6px}
  .idx-block-name{font-size:18px}
  .idx-block-chg{font-size:13px}
  .idx-col:first-child{padding-right:10px}
  .idx-cols{gap:10px}
  .idx-col-hd{font-size:10.5px}
  .idx-val{font-size:21px;margin-bottom:3px}
  .idx-chgline{font-size:12.5px;margin-bottom:6px}
  .idx-turnover{font-size:11.5px;margin-bottom:6px}
  .idx-adv{font-size:11px}
}

/* Auth (login / forgot password) */
#login{padding:64px 0}
.auth-wrap{display:flex;justify-content:center}
.auth-card{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--line);
  border-radius:6px;padding:36px 32px;box-shadow:var(--shadow)}
.auth-card h1{font-size:24px;margin:6px 0 6px;letter-spacing:-.02em}
.auth-sub{color:var(--muted);font-size:14px;margin:0 0 24px;line-height:1.5}
.field{display:block;margin-bottom:16px}
.field span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:4px;
  font-family:var(--sans);font-size:14.5px;color:var(--ink);background:var(--surface);
  transition:border-color .15s}
.field textarea{resize:vertical;min-height:100px}
.field input[type="file"]{padding:9px 12px;cursor:pointer}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand)}
/* Site-wide: a locked field should look locked everywhere, not just on the
   handful of pages (.it-fld, .it-frow, .pa-criterion-fields) that happened
   to style their own disabled/readonly state — the much more common plain
   .field input/select/textarea had no such rule at all, so a disabled
   field there rendered identically to an editable one. */
input:disabled:not([type="checkbox"]):not([type="radio"]),
select:disabled,
textarea:disabled,
input[readonly]:not([type="checkbox"]):not([type="radio"]),
textarea[readonly]{
  background:var(--surface-2);color:var(--muted);-webkit-text-fill-color:var(--muted);
  opacity:1;cursor:not-allowed}
.password-field{position:relative}
.password-field input{padding-right:42px}
.password-toggle{position:absolute;right:2px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  background:none;border:none;border-radius:4px;color:var(--muted);cursor:pointer}
.password-toggle:hover{color:var(--ink)}
.password-toggle svg{width:18px;height:18px}
.password-toggle .icon-eye-off{display:none}
.password-toggle.showing .icon-eye{display:none}
.password-toggle.showing .icon-eye-off{display:block}
.feedback-form-wrap{max-width:640px}
.field-optional{text-transform:none;letter-spacing:0;font-weight:400}
.field-hint{display:block;font-size:12px;color:var(--muted);margin-top:6px}
.auth-card-wide{max-width:640px}
.field-row{display:block}
.field-row-2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:520px){.field-row-2{grid-template-columns:1fr}}
.field-row-title-name{display:grid;grid-template-columns:110px 1fr;gap:0 16px}
@media(max-width:520px){.field-row-title-name{grid-template-columns:1fr}}
.field span.required-mark,.checkbox-field .required-mark{display:inline;text-transform:none;letter-spacing:0;color:var(--down);margin-left:2px}
.form-attention{color:var(--down);font-size:13px;line-height:1.6;margin:0 0 20px;padding:12px 16px;
  background:var(--surface-2);border-radius:4px;border:1px solid var(--line)}
.form-attention ol{margin:4px 0 0;padding-left:18px}
.mobile-input{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:4px;
  overflow:hidden;background:var(--surface);transition:border-color .15s}
.mobile-input:focus-within{border-color:var(--brand)}
/* Higher-specificity than ".field span" (the field-label styling) — the
   prefix chip is a <span> inside a .field too, so without this it silently
   inherited that rule's display:block, font-size, and margin-bottom instead
   of flexing/centering against the input next to it. */
.field span.mobile-prefix{display:flex;align-items:center;padding:0 10px;font-family:var(--mono);font-size:13.5px;
  letter-spacing:normal;text-transform:none;color:var(--muted);background:var(--surface-2);
  border-right:1px solid var(--line);flex-shrink:0;margin-bottom:0}
/* Same problem, three more shapes of it — a <span class="radio-row">/.boa-hint/
   .boa-ocr-hint/.boa-required nested in a .field (BO Account Opening's radio
   groups and hints, now also the pre-existing Payment step's radio-row) all
   silently inherited the field-label look instead of their own. */
.field span.radio-row{display:flex;gap:20px;flex-wrap:wrap;margin-top:2px;margin-bottom:0;
  font-family:var(--sans);font-size:inherit;letter-spacing:normal;text-transform:none;color:inherit}
.field span.boa-hint{display:block;font-family:var(--sans);font-size:11.5px;letter-spacing:normal;
  text-transform:none;color:var(--green-600);margin-bottom:0}
.field span.boa-hint-red{color:var(--down)}
.field span.boa-ocr-hint{display:block;font-family:var(--sans);font-size:11.5px;letter-spacing:normal;
  text-transform:none;color:var(--muted);margin-bottom:0}
.field span.boa-ocr-hint.boa-ocr-done{color:var(--green-600)}
.field span.boa-required{display:inline;font-family:var(--sans);font-size:inherit;letter-spacing:normal;
  text-transform:none;color:var(--down);margin:0 2px}
.mobile-input input{border:0;border-radius:0}
.mobile-input input:focus{outline:none}
.checkbox-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:8px 16px;margin:-6px 0 18px}
.checkbox-field{display:flex;align-items:center;gap:8px;font-size:13.5px;
  color:var(--muted);cursor:pointer;user-select:none}
.checkbox-field input{width:15px;height:15px;accent-color:var(--brand);cursor:pointer;flex-shrink:0}
.form-msg{font-size:13px;padding:10px 12px;border-radius:4px;margin-bottom:16px;line-height:1.4}
.form-msg.error{background:rgba(192,57,43,.1);color:var(--down)}
.form-msg.success{background:rgba(27,164,91,.1);color:var(--green-600)}

/* Generic radio-button row (BO Account Opening's BoType/Sex/IdType/etc —
   a plain flex row, reusable anywhere a form needs a small exclusive
   choice without the weight of a full select). */
.radio-row{display:flex;gap:20px;flex-wrap:wrap;margin-top:2px}
.radio-row label{display:flex;align-items:center;gap:6px;cursor:pointer;font-weight:500;color:var(--ink);font-size:14px}
.radio-row input{width:15px;height:15px;accent-color:var(--brand);cursor:pointer}

/* BO Account Opening — guided step-by-step wizard. */
.boa-stepper{list-style:none;display:flex;flex-wrap:wrap;gap:0;margin:0 0 22px;padding:0}
.boa-step-dot{display:flex;align-items:center;gap:8px;padding:8px 16px 8px 0;cursor:pointer;flex:none}
.boa-step-dot[aria-disabled]{cursor:default;opacity:.55}
.boa-step-dot:not(:last-child)::after{content:"";width:24px;height:2px;background:var(--line);margin-left:8px;flex:none}
.boa-step-circle{width:24px;height:24px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;background:var(--surface-2);border:1px solid var(--line);color:var(--muted)}
.boa-step-dot.current .boa-step-circle{background:var(--brand);border-color:var(--brand);color:#fff}
.boa-step-dot.done .boa-step-circle{background:var(--green-600);border-color:var(--green-600);color:#fff}
.boa-step-label{font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.boa-step-dot.current .boa-step-label{color:var(--ink)}
.boa-step{display:block}
.boa-step[hidden]{display:none}
.boa-step-title{margin:0 0 6px;font-size:19px;font-weight:700}
.boa-step-note{color:var(--muted);font-size:13.5px;margin:0 0 18px}
/* Sub-headings that break a long step (First Applicant, Joint, Nominee)
   into Personal/Address/Identification/Contact/Other groups — same idea
   as .boa-step-title but one size down, with a rule to separate it from
   the section above instead of starting a whole new step. */
.boa-section-title{margin:30px 0 14px;padding-bottom:8px;font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--brand);border-bottom:1px solid var(--line)}
.boa-section-title:first-of-type{margin-top:22px}
.boa-subhead{margin:26px 0 12px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  padding-top:14px;border-top:1px solid var(--line)}
.boa-step>.boa-subhead:first-of-type{border-top:0;padding-top:0;margin-top:4px}
.boa-file-link{display:block;margin-top:6px;font-size:12.5px;color:var(--brand);text-decoration:none}
.boa-file-link:hover{text-decoration:underline}

/* BO Account Opening — now the same stacked .field layout used everywhere
   else in the app (label above control, no visible cell borders) instead
   of the old-site-style bordered label|control table it used to be. The
   handful of BO-specific layout helpers below (sub-grid, dob-grid, etc.)
   are plain grid/flex components with no table dependency, so they carry
   over unchanged — only the outer label|control|label|control rows did. */
.boa-hint{display:block;font-size:11.5px;margin-top:4px;color:var(--green-600)}
.boa-hint-red{color:var(--down)}
/* Puts a field's "Same As Contact"-style checkbox on the same line as its
   label instead of its own row — Contact/Permanent Address sit side by
   side in .boa-2col, so the extra line was pushing Permanent Address's
   textarea (and everything below it) out of alignment with Contact
   Address's. */
.boa-field-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px;flex-wrap:wrap}
.boa-field-head>span{margin-bottom:0}
.boa-inline-check{display:inline-flex;align-items:center;gap:6px;margin:0}
.boa-inline-check input{width:15px;height:15px}
/* Two columns, used two ways:
   - wrap each column's fields in its own <div> for an independent flow —
     the right column can run shorter/longer than the left without forcing
     matching row heights (fields with no natural partner).
   - list .field elements directly as children (.boa-2col-paired) to put
     deliberately-related fields (Father's/Mother's Name, Nationality/
     Residency, etc) in a shared grid row, so the row's height matches the
     taller side and both stay aligned even when one has an extra hint
     line the other doesn't. */
.boa-2col{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;align-items:start}
@media(max-width:800px){.boa-2col{grid-template-columns:1fr}}
/* Three short fields (e.g. passport issuing authority + its two dates)
   that would otherwise each take a full row for no reason — same idea as
   .boa-sub-grid but as its own field row, not a sub-grid under one label. */
.boa-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 10px}
.boa-sub-grid{display:grid;grid-template-columns:1fr 1fr 1fr 90px;gap:8px;margin-top:8px}
.boa-sub-grid>div{display:flex;flex-direction:column}
.boa-sub-label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:4px}
/* Contact/Permanent Address (textarea + country/state/city/postcode) reads
   like a form within the form when it stretches the full panel width on a
   wide screen. Matching it to exactly one .boa-2col column (same 50%/32px
   gap math) keeps its edge lined up with the column above/below it instead
   of stopping at an arbitrary width that lines up with nothing. */
.boa-addr-field{max-width:calc(50% - 16px)}
@media(max-width:800px){.boa-addr-field{max-width:none}}
.boa-dob-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.boa-inline-2{display:grid;grid-template-columns:64px 1fr;gap:6px}
.boa-title-name{display:grid;grid-template-columns:100px 1fr;gap:6px}
.boa-attach-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-top:10px}
.boa-attach-item label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:5px}
.boa-ocr-hint{display:block;font-size:11.5px;margin-top:5px;color:var(--muted)}
.boa-ocr-hint.boa-ocr-done{color:var(--green-600)}
.boa-poa-row{display:flex;gap:10px;align-items:flex-start}
.boa-poa-row input{flex:1}
.boa-field-error{outline:2px solid var(--down);outline-offset:2px;border-radius:4px}
/* The field we highlight is also focus()ed right after, so the page's own
   ".field input:focus{outline:none}" rule (higher specificity — two
   classes beat one) was silently erasing this red ring the instant the
   user looked at it. */
.field .boa-field-error:focus{outline:2px solid var(--down);border-color:var(--down)}
.boa-required{color:var(--down);margin:0 2px}
.boa-lbl-error-msg{display:block;color:var(--down);font-size:11.5px;font-weight:500;margin-top:4px;line-height:1.35}

/* Small-data controls (a date, a 4-digit BO number, a percentage, a post
   code) shouldn't stretch to fill their .field's full width the way a
   free-text field does — they just sit left-aligned at a width that fits
   what they hold. */
.boa-ctl-sm{max-width:140px}

/* Back / Save & Next footer, every step — both right-aligned together. */
.boa-step-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}

/* Centered "Uploading…" / "Reading document…" overlay — a small inline hint
   next to one file input is easy to miss; this is the unmissable version,
   shown for both an OCR read and a step save that includes attachments. */
.boa-busy-overlay{position:fixed;inset:0;background:rgba(15,27,51,.45);display:flex;
  align-items:center;justify-content:center;z-index:200;opacity:0;pointer-events:none;transition:opacity .15s}
.boa-busy-overlay.show{opacity:1;pointer-events:auto}
.boa-busy-box{background:var(--surface);border-radius:10px;padding:28px 36px;display:flex;
  flex-direction:column;align-items:center;gap:14px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.boa-busy-spinner{width:32px;height:32px;border-radius:50%;border:3px solid var(--line);
  border-top-color:var(--brand);animation:boa-spin .8s linear infinite}
.boa-busy-text{font-size:14px;font-weight:600;color:var(--ink)}
@keyframes boa-spin{to{transform:rotate(360deg)}}

@media (max-width:800px){
  .boa-sub-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .boa-stepper{gap:4px 0}
  .boa-step-dot{padding:6px 10px 6px 0}
  .boa-step-label{display:none}
  .boa-step-dot.current .boa-step-label{display:inline;white-space:normal}
}
.auth-link{display:block;text-align:center;margin-top:18px;font-size:13.5px;color:var(--brand);text-decoration:none}
.auth-link:hover{text-decoration:underline}
.auth-link-inline{display:inline;margin-top:0}
[data-theme="dark"] .auth-link{color:#5B8CE8}
.forgot-panel{display:none;margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.forgot-panel.open{display:block}

/* ---------- Dashboard (authenticated) chrome ---------- */
.dash-header{background:var(--header);color:var(--header-ink);position:sticky;top:0;z-index:80;
  border-bottom:1px solid var(--board-line)}
.dash-header-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 24px;
  flex-wrap:wrap;position:relative;z-index:75}
.dash-user{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.dash-user:hover .dash-user-name{text-decoration:underline}
.dash-avatar{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.dash-avatar-img{object-fit:cover}
.dash-user-id{font-family:var(--mono);font-size:11px;color:var(--header-sub)}
.dash-user-name{font-weight:600;font-size:14.5px}
.dash-pm{text-align:right;font-size:12.5px;color:var(--header-sub);line-height:1.5}
.dash-pm-who{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:1px}
.dash-pm-avatar{width:20px;height:20px;border-radius:50%;object-fit:cover;flex-shrink:0}
.dash-pm-name{color:var(--header-ink);font-weight:600}
.dash-actions{display:flex;align-items:center;gap:10px}

/* Header widgets — Self Reminder / Notifications dropdowns, old-site
   features that lived in the header rather than their own page. */
.hdr-widget{position:relative}
.hdr-widget-btn{position:relative}
.hdr-badge{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:var(--down);color:#fff;font-size:10px;font-weight:700;
  line-height:16px;text-align:center}
.hdr-widget-panel{position:absolute;top:calc(100% + 10px);right:0;width:320px;max-width:calc(100vw - 32px);
  max-height:420px;display:none;flex-direction:column;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);z-index:60;overflow:hidden}
.hdr-widget.open .hdr-widget-panel{display:flex}
.hdr-widget-hd{padding:12px 14px;font-weight:700;font-size:13.5px;border-bottom:1px solid var(--line-soft);flex-shrink:0}
.hdr-widget-add{display:flex;gap:6px;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid var(--line-soft);flex-shrink:0}
.hdr-widget-add input[type="date"]{width:120px;padding:6px;border:1px solid var(--line);border-radius:4px;
  background:var(--surface);color:var(--ink);font-size:12.5px}
.hdr-widget-add input[type="text"]{flex:1;min-width:110px;padding:6px 8px;border:1px solid var(--line);
  border-radius:4px;background:var(--surface);color:var(--ink);font-size:12.5px}
.hdr-widget-list{overflow-y:auto}
.hdr-widget-empty{padding:18px 14px;color:var(--muted);font-size:12.5px;text-align:center}
.hdr-widget-item{padding:10px 14px;border-bottom:1px solid var(--line-soft);font-size:12.5px}
.hdr-widget-item:last-child{border-bottom:none}
.hdr-item-date{color:var(--muted);font-size:11px;margin-bottom:3px}
.hdr-item-row{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.hdr-item-text{flex:1;line-height:1.4;word-break:break-word}
.hdr-item-del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:15px;padding:0;line-height:1;flex-shrink:0}
.hdr-item-del:hover{color:var(--down)}
.hdr-widget-item.unread{background:var(--surface-2)}
.hdr-item-title{font-weight:600;margin-bottom:2px}
.hdr-item-title::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--brand);margin-right:6px;vertical-align:middle}
.hdr-widget-item:not(.unread) .hdr-item-title::before{display:none}
@media(max-width:640px){.hdr-widget-panel{right:-40px}}
.dash-nav{background:var(--util-bg);border-top:1px solid var(--board-line);border-bottom:1px solid var(--board-line)}
.dash-nav-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 24px}
.dash-nav-row a{color:var(--header-sub);text-decoration:none;font-size:13.5px;font-weight:500;
  padding:12px 0;border-bottom:2px solid transparent;display:inline-block;white-space:nowrap}
.dash-nav-row a:hover,.dash-nav-row a.on{color:#fff;border-color:var(--green)}
.dash-phone-strip{background:var(--foot-bg);color:var(--foot-ink);font-family:var(--mono);
  font-size:12px;text-align:center;padding:8px 24px}

/* Mobile-only dashboard chrome: hidden on desktop, shown ≤600px below */
.dash-menu-btn,.dash-profile-btn,.dash-userinfo{display:none}
.dash-menu-btn{background:none;border:0;color:var(--header-ink);align-items:center;gap:6px;
  cursor:pointer;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;padding:6px}
.dash-menu-icon{font-size:18px;line-height:1}
.dash-profile-btn{background:none;border:0;padding:0;cursor:pointer;width:36px;height:36px;
  border-radius:50%;overflow:hidden;flex-shrink:0;align-items:center;justify-content:center;
  background:rgba(255,255,255,.12)}
.dash-avatar-sm-img{width:100%;height:100%;object-fit:cover;display:block}
.dash-avatar-sm-icon{font-size:17px}
.dash-userinfo{justify-content:space-between;align-items:flex-start;width:100%;padding-top:2px}
.dash-userinfo-name{font-weight:700;font-size:15px}
.dash-userinfo-detail{font-size:12.5px;color:var(--header-sub);margin-top:2px}
.dash-userinfo-id{font-size:12.5px;color:var(--header-sub);white-space:nowrap}
.dash-userinfo-id b{color:var(--header-ink)}
.dash-nav-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:45}
.dash-nav-backdrop.show{display:block}

/* Drawer profile card: built inside #dash-nav so the side drawer is fully
   self-contained (mobile only — desktop shows this info in the header bar). */
.dash-drawer-top{display:none}
.dash-drawer-footer{display:none}

/* Bottom tab bar: mobile only */
.dash-tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:55;background:var(--surface);
  border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(0,0,0,.08);padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  transform:translateZ(0);will-change:transform;backface-visibility:hidden}
.dash-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;
  text-decoration:none;color:var(--muted);font-size:10.5px;font-weight:500;border-radius:8px}
.dash-tab svg{width:22px;height:22px;pointer-events:none;flex-shrink:0}
.dash-tab.active{color:var(--brand)}
[data-theme="dark"] .dash-tab.active{color:#5B8CE8}
.dash-tab:focus-visible{outline:none;background:var(--surface-2)}

/* Dashboard nav dropdowns */
.nav-dropdown{position:relative;flex-shrink:0}
.nav-dropdown-toggle{background:none;border:0;color:var(--header-sub);font-size:13.5px;font-weight:500;
  padding:12px 0;cursor:pointer;font-family:var(--sans);display:flex;align-items:center;gap:4px;
  border-bottom:2px solid transparent;white-space:nowrap}
.nav-dropdown-toggle:hover,.nav-dropdown.open .nav-dropdown-toggle{color:#fff;border-color:var(--green)}
.nav-caret{font-size:9px}
.nav-dropdown-menu{display:none;position:absolute;top:100%;left:0;min-width:280px;max-width:90vw;
  max-height:70vh;overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-radius:5px;
  box-shadow:0 16px 32px rgba(0,0,0,.35);padding:8px 16px;z-index:60}
.nav-dropdown.open .nav-dropdown-menu,.nav-dropdown:hover .nav-dropdown-menu{display:block}
.nav-dropdown-menu a{display:block;padding:8px 16px;font-size:13.5px;color:var(--ink);
  text-decoration:none;white-space:normal;border-bottom:0}
.nav-dropdown-menu a:hover{background:var(--surface-2);color:var(--brand)}
[data-theme="dark"] .nav-dropdown-menu a:hover{color:#5B8CE8}
.nav-divider{height:1px;background:var(--line);margin:6px 0}

/* .nav-dropdown-toggle/.nav-dropdown-menu were sized to match
   .dash-nav-row a (13.5px, 12px vertical padding) — the public header's
   #nav a is 14.5px/6px, and #nav's own id selector otherwise outweighs
   .nav-dropdown-menu a's class selector and wins the color, leaving its
   links a near-invisible header-sub-on-white. Re-match both here instead
   of changing the shared rules the dashboard nav still relies on. */
#nav .nav-dropdown-toggle{font-size:14.5px;padding:7px 0}
#nav .nav-dropdown-menu a{color:var(--ink)}
.nav-group-label{padding:8px 16px 4px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.nav-badge{background:var(--green);color:#fff;font-size:9px;padding:1px 5px;border-radius:3px;
  margin-left:4px;font-family:var(--mono);vertical-align:middle}
/* Desktop dropdown bar and the mobile drawer's flat list are two separate
   markup blocks now (see _DashboardLayout.cshtml) so they can diverge in
   content — only one of the two is ever shown, by viewport width. */
@media(min-width:601px){.mobile-only-nav-row{display:none}}

.dash-cards{display:grid;grid-template-columns:1.3fr 1fr;gap:20px}
.dash-card{background:var(--surface);border:1px solid var(--line);border-radius:6px;
  padding:22px 24px;box-shadow:var(--shadow)}
.dash-card h3{margin:0 0 14px;font-size:13px;font-family:var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.dash-stat-row{display:flex;justify-content:space-between;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--line-soft)}
.dash-stat-row:last-child{border-bottom:0}
.dash-stat-row .lbl{font-size:13.5px;color:var(--muted)}
.dash-stat-row .val{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--ink)}
.dash-stat-row.total .val{font-size:19px;color:var(--brand)}
[data-theme="dark"] .dash-stat-row.total .val{color:#5B8CE8}

.portfolio-hero-value{font-family:var(--mono);font-size:34px;font-weight:700;color:var(--ink);
  margin-bottom:16px;line-height:1.1}
.pf-sub{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.pf-sub.up{color:var(--up)}.pf-sub.down{color:var(--down)}
.pf-company.shariah{color:var(--up)}
.pf-lbp{color:var(--brand)}
[data-theme="dark"] .pf-lbp{color:#5B8CE8}
.pf-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

/* Live SignalR tick flash — briefly tints a holdings row when a matching
   price update lands, fading back out over ~1.1s. */
@keyframes tick-flash-up{0%{background:rgba(16,163,74,.28)}100%{background:transparent}}
@keyframes tick-flash-down{0%{background:rgba(220,38,38,.28)}100%{background:transparent}}
tr.tick-flash-up{animation:tick-flash-up 1.1s ease-out}
tr.tick-flash-down{animation:tick-flash-down 1.1s ease-out}

.pf-dividend-item{border:1px solid var(--line);border-radius:4px;margin-bottom:8px;overflow:hidden}
.pf-dividend-item summary{display:flex;justify-content:space-between;align-items:center;
  padding:12px 16px;cursor:pointer;font-size:13.5px;list-style:none}
.pf-dividend-item summary::-webkit-details-marker{display:none}
.pf-dividend-item summary::after{content:'▾';color:var(--muted);transition:transform .15s}
.pf-dividend-item[open] summary::after{transform:rotate(180deg)}
.pf-dividend-item .pf-dividend-body{padding:0 16px 14px;font-size:13px;color:var(--muted)}
.pf-dividend-footer{display:flex;justify-content:space-between;padding:12px 16px;
  font-family:var(--mono);font-size:13px;font-weight:600;background:var(--surface-2);border-radius:4px}
/* Inside a scrollable holdings panel (Portfolio), this totals bar would
   otherwise scroll away with the rows above it — pin it to the bottom
   instead, same as the Dashboard holdings table's own Total row. */
.stock-panel .pf-dividend-footer{position:sticky;bottom:0;z-index:1;border-radius:0}
.pf-dividend-panel{max-height:520px;padding:14px}
.pf-dividend-panel .pf-dividend-item:last-child{margin-bottom:0}
.pf-dividend-panel .pf-dividend-footer{position:sticky;bottom:-14px;margin:8px -14px -14px;z-index:1;border-radius:0}

.stock-toggle{display:inline-flex;border:1px solid var(--line);border-radius:4px;overflow:hidden;margin-bottom:16px}
.stock-toggle button{background:var(--surface);border:0;padding:8px 16px;font-family:var(--mono);
  font-size:12px;cursor:pointer;color:var(--muted)}
.stock-toggle button.active{background:var(--brand);color:#fff}

.stocks-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.stocks-grid-title{margin:0 0 10px;font-size:14px;font-weight:600;color:var(--muted)}
.stocks-grid-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.stocks-grid-title-row .stocks-grid-title{margin-bottom:0}
.link-btn{background:none;border:0;padding:0;color:var(--brand);text-decoration:underline;font-size:13px;cursor:pointer}
.link-btn:hover{color:var(--brand-700)}
@media (max-width:980px){.stocks-grid{grid-template-columns:minmax(0,1fr)}}

.trades-filter{display:flex;gap:16px;align-items:flex-end;margin-bottom:16px;flex-wrap:wrap}
.trades-filter .field{width:auto}
.trades-filter input{padding:9px 12px;border:1px solid var(--line);border-radius:4px;
  font-family:var(--sans);font-size:14px;color:var(--ink);background:var(--surface)}
.trades-filter .btn{padding:10px 20px}

/* Desktop table vs. mobile card list — same data, two layouts (mirrors the
   watchlist-table / watchlist-table-mobile split above). */
.pls-cards{display:none}
.pls-cards .dash-card{margin-bottom:14px}
.pls-card-hd{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px}
.pls-card-hd b{font-size:19px}
.pls-card-hd span{font-family:var(--mono);font-size:19px;font-weight:700}
@media(max-width:760px){
  .pls-table-wrap{display:none}
  .pls-cards{display:block}
}

@media(max-width:940px){
  .dash-cards{grid-template-columns:1fr}
  .dash-pm{display:none}
}
@media(max-width:600px){
  body{padding-bottom:64px}
  .dash-header-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 0;padding:12px 16px}
  .dash-menu-btn{display:flex;order:1}
  .dash-header-row .dash-brand{order:2;align-self:center}
  .dash-profile-btn{display:flex;order:3;position:relative}
  .dash-user{display:none}
  .dash-userinfo{display:none}
  .dash-pm{display:none}
  .dash-actions{display:none;order:5;position:absolute;top:100%;right:16px;margin-top:8px;
    background:var(--surface);border:1px solid var(--line);border-radius:6px;box-shadow:0 16px 32px rgba(0,0,0,.35);
    padding:14px;flex-direction:column;align-items:stretch;gap:10px;z-index:60;width:180px}
  .dash-actions.open{display:flex}
  .dash-actions .btn{width:100%;text-align:center}

  /* Side drawer: partial-width panel sliding in from the left, over a dark
     scrim (#dash-nav-backdrop) — kept at display:block always on mobile so
     the transform transition can animate; visibility/pointer-events gate
     interaction while closed instead. It's a fixed-header / scrollable-
     middle / fixed-footer sandwich (flex column): the profile card and the
     version footer stay put, only the nav list in between scrolls. */
  .dash-nav{display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;
    width:82%;max-width:320px;z-index:90;overflow:hidden;background:var(--surface);border:0;
    box-shadow:0 0 40px rgba(0,0,0,.35);transform:translateX(-100%);transition:transform .25s ease;
    visibility:hidden;pointer-events:none}
  .dash-nav.open{transform:translateX(0);visibility:visible;pointer-events:auto}

  .dash-drawer-top{display:block;position:relative;flex-shrink:0;background:var(--brand-tint,rgba(22,87,208,.06));
    padding:22px 20px 16px}
  [data-theme="dark"] .dash-drawer-top{background:rgba(91,140,232,.08)}
  .dash-drawer-close{position:absolute;top:10px;right:12px;background:none;border:0;font-size:30px;
    line-height:1;color:var(--down);cursor:pointer;padding:4px;font-weight:800}
  .dash-drawer-close:hover{opacity:.75}
  .dash-drawer-head{display:flex;align-items:center;gap:12px}
  .dash-drawer-avatar{width:60px;height:60px;border-radius:50%;object-fit:cover;display:block;flex:none;
    border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line)}
  .dash-drawer-avatar-fallback{display:flex;align-items:center;justify-content:center;font-size:24px;
    background:var(--surface)}
  .dash-drawer-info{min-width:0}
  .dash-drawer-id{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--brand)}
  [data-theme="dark"] .dash-drawer-id{color:#5B8CE8}
  .dash-drawer-name{font-weight:700;font-size:15.5px;color:var(--brand);margin-top:2px;letter-spacing:.01em}
  [data-theme="dark"] .dash-drawer-name{color:#5B8CE8}
  .dash-drawer-phone{font-family:var(--mono);font-size:12.5px;color:var(--brand);margin-top:3px;opacity:.85}
  [data-theme="dark"] .dash-drawer-phone{color:#5B8CE8}
  .dash-drawer-profile-link{display:block;text-align:center;margin-top:16px;padding:10px 0;
    border:0;border-radius:22px;font-size:13px;font-weight:700;color:var(--brand);
    text-decoration:none;background:var(--surface);box-shadow:0 1px 3px rgba(15,27,51,.12)}
  [data-theme="dark"] .dash-drawer-profile-link{color:#5B8CE8;background:var(--surface-2);box-shadow:none}
  .dash-drawer-profile-link:hover{background:var(--surface-2)}
  .dash-drawer-quick{display:flex;margin-top:16px;border-top:1px solid var(--line);
    border-bottom:1px solid var(--line)}
  .dash-drawer-quick-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;
    background:none;border:0;color:var(--ink);font-size:12.5px;font-weight:700;text-decoration:none;
    cursor:pointer;font-family:var(--sans);padding:16px 0 12px}
  .dash-drawer-quick-item svg{width:21px;height:21px;stroke-width:2.2}
  .dash-drawer-logout{color:var(--down)}

  .dash-drawer-footer{display:block;flex-shrink:0;text-align:center;padding:9px 0;font-family:var(--mono);
    font-size:10.5px;color:var(--muted);border-top:1px solid var(--line);background:var(--surface)}

  .dash-nav > .wrap.dash-nav-row{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;min-height:0}
  /* flex-wrap:wrap is inherited from the desktop rule — with flex-direction:
     column and a height-bounded container (flex:1 1 auto above), that combo
     makes flexbox open a new COLUMN once content is taller than the box
     instead of just scrolling, which is the "scrolling horizontally" bug. */
  /* .dash-nav-row is also .wrap, whose margin:0 auto centers it at its
     fit-content width instead of letting align-items:stretch fill the
     drawer — that's what was pushing every item off to the right. */
  .dash-nav-row{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;
    margin:0;max-width:none;width:100%;padding:4px 20px 24px}
  .dash-nav-row a{padding:13px 0;border-bottom:1px solid var(--board-line);color:var(--ink)}
  .dash-nav-row a:hover,.dash-nav-row a.on{color:var(--brand);border-color:var(--board-line)}
  [data-theme="dark"] .dash-nav-row a:hover,[data-theme="dark"] .dash-nav-row a.on{color:#5B8CE8}

  /* Flatten the dropdown groups into one scrollable list: no more tap-to-
     expand — the toggle label/caret just disappears and its border-top
     stands in as the divider between groups, matching a plain flat menu.
     The desktop dropdown rule caps .nav-dropdown-menu at max-height:70vh
     with its own overflow-y:auto — left alone, every group becomes its own
     independently-scrolling box nested inside the drawer's scroll, which is
     exactly the "two different scrolls" feeling. Both must be cleared here. */
  .nav-dropdown{width:100%;border-top:1px solid var(--board-line);margin-top:2px}
  .nav-dropdown:first-of-type{border-top:0;margin-top:0}
  .nav-dropdown-toggle{display:none}
  .nav-dropdown-menu{display:block;position:static;box-shadow:none;border:0;border-radius:0;
    background:transparent;min-width:0;max-width:none;max-height:none;overflow-y:visible;padding:0}
  .nav-dropdown-menu a{padding:13px 0;color:var(--ink);border-bottom:1px solid var(--board-line);
    white-space:normal;word-break:break-word}
  .nav-dropdown-menu a:hover{background:transparent;color:var(--brand)}
  [data-theme="dark"] .nav-dropdown-menu a:hover{color:#5B8CE8}
  .dash-nav-row a.desktop-only-nav{display:none}
  .desktop-only-nav-row{display:none}

  .dash-phone-strip{font-size:10.5px;padding:8px 12px;line-height:1.5}
  .dash-tabbar{display:flex}
  body:has(.dash-tabbar) .back-to-top{bottom:calc(66px + env(safe-area-inset-bottom))}
}

/* Back-to-top button — injected by chrome.ts on every page, shared layout */
.back-to-top{position:fixed;right:20px;bottom:24px;width:44px;height:44px;border-radius:50%;
  background:var(--brand);color:#fff;border:0;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow);cursor:pointer;z-index:40;opacity:0;visibility:hidden;
  transform:translateY(12px);transition:opacity .2s,transform .2s,visibility .2s}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{background:var(--brand-600)}
.back-to-top svg{width:20px;height:20px}
body.embed .back-to-top{display:none}

/* Schedule of Charges */
.charges-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.charges-panel{width:60%;margin:0 auto;overflow-x:auto}
.charges-table{min-width:600px}
.charges-table td{font-family:var(--sans);font-size:14px;text-align:left;font-weight:400;
  vertical-align:top;color:var(--ink)}
.charges-table td:first-child{width:34%;font-weight:600;color:var(--brand);white-space:nowrap}
[data-theme="dark"] .charges-table td:first-child{color:#5B8CE8}
.charges-notes{width:60%;margin:24px auto 0;color:var(--muted);font-size:14px;line-height:1.6}
.charges-notes p{margin:0 0 10px}
.charges-notes p:first-child{color:var(--ink);font-size:15px}
@media(max-width:900px){
  .charges-panel,.charges-notes{width:100%}
}
@media print{
  .dash-header,.dash-nav,.dash-phone-strip,.no-print{display:none !important}
  body{background:#fff !important;color:#000 !important}
  #charges{padding:24px 0}
  .charges-panel,.charges-notes{width:100% !important}
  .panel{box-shadow:none !important;border:1px solid #ccc !important}
  .charges-table td{color:#000 !important}
  .charges-table td:first-child{color:#000 !important}
  .sec-hd p,.charges-notes{color:#444 !important}
}

/* Printable statement documents (Tax Certificate letter / Portfolio /
   Realized P&L) — a fixed light "paper" look regardless of site theme,
   since these represent an official document, not themed UI. */
.doc-toolbar{display:flex;justify-content:flex-end;gap:10px;margin-bottom:16px}
.doc-sheet{max-width:860px;margin:0 auto;background:#fff;padding:44px 52px;
  box-shadow:0 1px 4px rgba(0,0,0,.1);color:#111;font-family:var(--sans);border-radius:4px}
.doc-letterhead{display:flex;justify-content:space-between;align-items:flex-start;
  border-bottom:2px solid #1657D0;padding-bottom:16px;margin-bottom:24px;gap:16px}
.doc-letterhead img{height:52px}
.doc-company{text-align:right;font-size:12px;line-height:1.6;color:#333}
.doc-company b{display:block;font-size:19px;color:#1657D0;margin-bottom:2px}
.doc-title{text-align:center;font-weight:700;font-size:15px;letter-spacing:.04em;
  text-transform:uppercase;border-bottom:1px solid #111;padding-bottom:10px;margin-bottom:22px}
.doc-intro{font-size:13.5px;line-height:1.7;color:#222;margin-bottom:20px}
.doc-meta{display:grid;grid-template-columns:170px 1fr;row-gap:7px;font-size:13.5px;margin-bottom:22px}
.doc-meta dt{color:#555}
.doc-meta dd{margin:0;font-weight:600;color:#111}
/* A single 4-column table (label/value/label/value) with a borderless spacer
   column between the two halves — reads as two side-by-side boxes like a
   grid of two <table>s would, but since every row is one real <tr>, the two
   halves are always exactly the same height row-for-row (a wrapped label on
   one side grows both cells beside it together, not just its own column). */
.doc-figures-wrap{overflow-x:auto;margin-bottom:22px}
.doc-figures{width:100%;border-collapse:collapse;font-size:13px}
.doc-figures td{padding:7px 10px}
.doc-figures td.fig-label,.doc-figures td.fig-value{border:1px solid #111}
.doc-figures td.fig-label{color:#333;width:26%;text-align:left}
.doc-figures td.fig-value{text-align:right;font-family:var(--mono);font-weight:600;width:20%}
.doc-figures td.fig-gap{border:0;padding:0;width:24px}
.doc-figures tr.total td.fig-label,.doc-figures tr.total td.fig-value{font-weight:700}
.doc-table{width:100%;border-collapse:collapse;margin-bottom:18px;font-size:13px}
.doc-table th,.doc-table td{border:1px solid #111;padding:7px 10px}
.doc-table th{background:#f5f5f7;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em}
.doc-table td:not(:first-child){text-align:right;font-family:var(--mono)}
.doc-table tbody td:first-child{text-align:left}
.doc-table tfoot td{font-weight:700}
.doc-up{color:#0F7B54}
.doc-down{color:#C0392B}
.doc-note{font-size:12px;color:#444;margin-top:18px;line-height:1.6}
.doc-footer-note{text-align:center;font-size:11.5px;color:#666;margin-top:44px}
@media print{
  /* Chrome's own print header/footer (date/title/URL/page number) — on by
     default in the print dialog — eats into this same margin band and isn't
     something CSS can switch off; the trims below leave enough slack that
     the certificate still fits one page with that header/footer showing.
     (Unchecking "Headers and footers" in the print dialog reclaims that
     band entirely, for an even cleaner page.) */
  @page{margin:8mm}
  section{padding:0}
  .doc-toolbar{display:none}
  .doc-sheet{box-shadow:none;padding:0;max-width:none;border-radius:0;font-size:12.5px}
  .doc-letterhead{margin-bottom:8px;padding-bottom:6px}
  .doc-letterhead img{height:42px}
  .doc-intro{margin-bottom:10px}
  .doc-meta{margin-bottom:8px;row-gap:4px}
  .doc-figures-wrap{margin-bottom:8px}
  .doc-figures td{padding:4px 8px}
  .doc-table{margin-bottom:6px}
  .doc-table th,.doc-table td{padding:4px 8px}
  .doc-note{margin-top:6px}
  .doc-footer-note{margin-top:8px}
}

/* Market page */
.mkt-status-box{display:flex;gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:14px}
.mkt-status-cell{flex:1;padding:14px 20px;text-align:center}
.mkt-status-cell+.mkt-status-cell{border-left:1px solid var(--line)}
.mkt-status-lbl{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.mkt-status-val{display:block;font-family:var(--mono);font-size:22px;font-weight:700;color:var(--ink)}
.mkt-status-val.up{color:var(--up)}.mkt-status-val.down{color:var(--down)}

.spm-list-scroll{max-height:340px;overflow-y:auto}

.mkt-idx-row{display:grid;grid-template-columns:1fr}
.mkt-idx-card{margin-bottom:14px}
@media(min-width:1000px){
  .mkt-idx-row{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:24px;align-items:stretch}
  .mkt-idx-row .mkt-idx-card{margin-bottom:0;display:flex;flex-direction:column;justify-content:center}
  .mkt-idx-row .panel{margin:0}
}
.mkt-idx-hd{display:flex;align-items:center;justify-content:space-between;
  font-family:var(--mono);font-size:20px;font-weight:700;color:var(--ink);margin-bottom:12px}
.mkt-idx-title span{color:var(--green)}
.mkt-idx-refresh{border:0;background:transparent;color:var(--muted);cursor:pointer;padding:4px;
  display:flex;align-items:center;border-radius:50%;flex-shrink:0}
.mkt-idx-refresh:hover{color:var(--brand);background:var(--surface-2)}
.mkt-idx-refresh svg{width:18px;height:18px}
.mkt-idx-days{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:8px;overflow:hidden}
.mkt-idx-day{background:var(--surface);padding:18px 20px;text-align:center}
.mkt-idx-date{font-weight:700;font-size:15px;color:var(--ink);line-height:1.4;margin-bottom:12px}
.mkt-idx-price{font-family:var(--mono);font-size:28px;font-weight:700;margin-bottom:6px}
.mkt-idx-price.up{color:var(--up)}.mkt-idx-price.down{color:var(--down)}
.mkt-idx-chg{font-family:var(--mono);font-size:14px;line-height:1.5;margin-bottom:14px}
.mkt-idx-chg.up{color:var(--up)}.mkt-idx-chg.down{color:var(--down)}
.mkt-idx-turnover{font-size:13px;color:var(--muted);margin-bottom:10px}
.mkt-idx-turnover span{display:block;margin-bottom:2px}
.mkt-idx-turnover b{color:var(--ink);font-size:15px}
.mkt-idx-history{font-family:var(--mono);font-size:12px;color:var(--brand);text-decoration:none}
.mkt-idx-history:hover{text-decoration:underline}
@media(max-width:560px){
  .mkt-idx-row{margin-bottom:6px}
  .mkt-idx-hd{font-size:16px;margin-bottom:8px}
  .mkt-idx-day{padding:10px 8px}
  .mkt-idx-date{font-size:12px;margin-bottom:6px}
  .mkt-idx-price{font-size:18px;margin-bottom:3px}
  .mkt-idx-chg{font-size:11px;line-height:1.35;margin-bottom:6px}
  .mkt-idx-turnover{font-size:10.5px;margin-bottom:4px}
  .mkt-idx-turnover b{font-size:12px}
  .mkt-idx-history{font-size:10.5px}
  .mkt-idx-row .panel .panel-hd.chart-panel-hd{padding:8px 10px 0}
  .mkt-idx-row .panel .panel-hd.chart-panel-hd h3{display:none}
  .mkt-idx-row .panel .chart-container{height:220px}
}

.up-title{color:var(--up)}.down-title{color:var(--down)}
.halted-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:800px){.halted-grid{grid-template-columns:1fr}}

.spm-cat-wrap{position:relative;flex-shrink:0}
.spm-cat-btn{width:40px;height:40px;border:1px solid var(--line);border-radius:6px;background:var(--surface);
  color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer}
.spm-cat-btn:hover{border-color:var(--brand)}
.spm-cat-btn svg{width:19px;height:19px}
.spm-cat-menu{display:none;position:absolute;right:0;top:calc(100% + 6px);background:var(--surface);
  border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:10px 14px;
  min-width:160px;max-height:260px;overflow-y:auto;z-index:5}
.spm-cat-menu.open{display:block}
.spm-cat-item{display:flex;align-items:center;gap:8px;font-size:13.5px;padding:5px 0;color:var(--ink);cursor:pointer}
.spm-row{display:flex;align-items:center;gap:14px;padding:12px 20px;border-bottom:1px solid var(--line)}
.spm-row:last-child{border-bottom:0}
.spm-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.spm-main b{font-family:var(--sans);font-size:14px;color:var(--ink);font-weight:700}
.spm-cat{color:var(--muted);font-weight:400;font-size:12px}
.spm-company{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spm-price{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-family:var(--mono);
  font-size:13.5px;flex-shrink:0}
.spm-price .up{color:var(--up)}.spm-price .down{color:var(--down)}.spm-price .unch{color:var(--muted)}
.spm-info{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:var(--surface);
  color:var(--muted);font-family:var(--mono);font-style:italic;font-size:12px;cursor:pointer;flex-shrink:0}
.spm-info:hover{border-color:var(--brand);color:var(--brand)}

/* Money deposit — one-open-at-a-time accordion cards, stacked on mobile
   (matches the old mobile site) and 2-up on desktop for a nicer layout;
   same interaction either way. A CSS grid row stretches every cell in that
   row to the tallest one, so a collapsed card next to an expanded one left
   a big empty gap — a multi-column flow avoids that: cards pack top-to-
   bottom per column at their own height, no shared row to stretch to. */
.dep-grid{column-gap:16px}
@media(min-width:860px){.dep-grid{column-count:2}}

.dep-card{background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden;
  break-inside:avoid;margin-bottom:16px}
.dep-card:last-child{margin-bottom:0}
.dep-card-hd{width:100%;display:flex;align-items:center;gap:10px;padding:16px 18px;background:var(--surface-2);
  border:0;cursor:pointer;font-family:var(--sans);font-size:15px;font-weight:700;color:var(--ink);text-align:left}
.dep-card-icon{font-size:18px}
.dep-card-title{flex:1}
.dep-card-caret{font-size:12px;color:var(--muted);transition:transform .2s}
.dep-card.open .dep-card-caret{transform:rotate(180deg)}
.dep-card-body{display:none;padding:18px}
.dep-card.open .dep-card-body{display:block}

.dep-hint{font-size:13px;color:var(--muted);margin:0 0 14px}
.dep-hint-small{font-size:11.5px;color:var(--muted);margin:-6px 0 12px}

.dep-radio-row{display:flex;gap:20px;margin-bottom:14px;font-size:13.5px}
.dep-radio-row label{display:flex;align-items:center;gap:6px;cursor:pointer;font-weight:500;color:var(--ink)}

.dep-readonly{background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:9px 12px;
  margin-bottom:14px;font-size:13.5px;font-weight:600;color:var(--ink)}

/* ---------- Price Alert Service ---------- */
.btn-sm{padding:5px 10px;font-size:12px}
.pa-status-tag{background:var(--green);color:#fff;font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.06em;padding:3px 9px;border-radius:12px}
.pa-service-includes{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.pa-service-label{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:8px}
.pa-contact-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;padding:5px 0}
.pa-ltp-box{display:flex;flex-direction:column;justify-content:center;gap:4px;font-size:13.5px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:9px 12px;margin-bottom:16px}
.pa-criteria{margin-bottom:16px}
.pa-criterion-row{border:1px solid var(--line);border-radius:5px;padding:10px 12px;margin-bottom:8px}
.pa-criterion-fields{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--muted);
  margin-top:8px;padding-left:23px}
.pa-criterion-fields input{padding:5px 8px;border:1px solid var(--line);border-radius:4px;background:var(--surface);
  color:var(--ink);font:inherit}
.pa-criterion-fields input:disabled{background:var(--surface-2);color:var(--muted)}
.pa-price{width:90px;text-align:right}
.pa-terms{font-size:12.5px;color:var(--muted);line-height:1.7;margin:0 0 18px;padding-left:20px}
.pa-footer-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:16px}
.pa-pending-badge{display:inline-block;background:#B7791F;color:#fff;font-size:10px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;padding:2px 6px;border-radius:9px;margin-left:4px}
.pa-row-actions{white-space:nowrap}
.pa-row-actions button{background:none;border:0;cursor:pointer;font-size:12.5px;font-weight:600;padding:2px 6px}
.pa-row-actions .pa-edit-btn{color:var(--brand)}
.pa-row-actions .pa-delete-btn{color:var(--down)}
.pa-balance-line{font-size:14px;font-weight:600}
.pa-confirm-col{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
@media(max-width:620px){.pa-footer-row{flex-direction:column}.pa-confirm-col{align-items:flex-start;width:100%}.pa-confirm-col .btn{width:100%}}

/* ---------- Multiple ID Management Service ---------- */
.mid-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:start}
@media(max-width:900px){.mid-grid{grid-template-columns:minmax(0,1fr)}}
.mid-mother-info{padding:14px 16px;border-bottom:1px solid var(--line);font-size:13px;line-height:1.9}
.mid-child-scroll{max-height:320px;overflow-y:auto}
.mid-child-footer{display:flex;justify-content:space-between;padding:10px 16px;border-top:1px solid var(--line);
  font-size:13px;background:var(--surface-2)}
.mid-pay-modes{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.mid-pay-option{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:6px;
  padding:9px 14px;cursor:pointer;font-size:13.5px;background:var(--surface)}
.mid-pay-option input{accent-color:var(--brand);cursor:pointer}
.mid-pay-option.selected{border-color:var(--brand);background:rgba(22,87,208,.08)}
.mid-pay-option.disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.mid-quote-row{display:flex;justify-content:space-between;padding:4px 0;font-size:13.5px}
.mid-quote-row b{font-weight:700}

/* ---------- Group Trade — fused from iTrade's ticket/depth components (it-*
   classes, reused as-is below) and the old group-trade page's multi-child
   selection + submit flow (gt-* classes, further down this file). ---------- */
.gt-grid{display:grid;grid-template-columns:320px minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start;margin-bottom:18px}
@media(max-width:1180px){.gt-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:760px){.gt-grid{grid-template-columns:minmax(0,1fr)}}
.gt-qty-input{width:90px;text-align:right;padding:5px 8px;border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--ink);font:inherit}
.gt-cancel-btn{color:var(--down)}
.gt-progress{position:relative;height:16px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.gt-progress-fill{height:100%;background:var(--brand);transition:width .3s}
.gt-progress-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--ink);text-shadow:0 1px 2px rgba(255,255,255,.6)}
[data-theme="dark"] .gt-progress-label{text-shadow:0 1px 2px rgba(0,0,0,.45)}

.dep-total-panel{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;margin-bottom:18px;font-weight:700}
.dep-total-val{font-family:var(--mono);font-size:20px;color:var(--brand)}
[data-theme="dark"] .dep-total-val{color:#5B8CE8}

.dep-hist-card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:16px 18px;margin-bottom:12px}
.dep-hist-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line-soft);font-size:13.5px}
.dep-hist-row:last-child{border-bottom:0}
.dep-hist-row .lbl{color:var(--muted)}
.dep-hist-row .val{font-weight:600;color:var(--ink)}
.dep-hist-row .val.status-pending{color:var(--brand)}
[data-theme="dark"] .dep-hist-row .val.status-pending{color:#5B8CE8}
.dep-hist-row .val.status-cancelled{color:var(--down)}
.dep-hist-row .val.status-posted{color:var(--up)}
/* Same three status colors, unscoped — for a plain table cell rather than
   a .dep-hist-row .val (e.g. Money Withdrawal's desktop status table). */
.status-pending{color:var(--brand);font-weight:600}
[data-theme="dark"] .status-pending{color:#5B8CE8}
.status-cancelled{color:var(--down);font-weight:600}
.status-posted{color:var(--up);font-weight:600}
.dep-hist-delete{margin-top:10px;width:100%;background:var(--down);color:#fff;border:0;border-radius:5px;
  padding:9px;font-weight:600;cursor:pointer;font-family:var(--sans)}
.dep-hist-delete:hover{opacity:.9}

/* Payment gateway return page */
.paystatus-card{max-width:460px;margin:60px auto;padding:44px 32px;text-align:center;
  background:var(--surface);border:1px solid var(--line);border-radius:12px}
.paystatus-icon{width:64px;height:64px;margin:0 auto 20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center}
.paystatus-icon svg{width:34px;height:34px}
.paystatus-card h2{margin:0 0 8px;font-size:20px}
.paystatus-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.paystatus-pending .paystatus-icon{background:rgba(22,87,208,.1);color:var(--brand)}
[data-theme="dark"] .paystatus-pending .paystatus-icon{background:rgba(91,140,232,.14);color:#5B8CE8}
.paystatus-success .paystatus-icon{background:rgba(27,164,91,.12);color:var(--up)}
.paystatus-failed .paystatus-icon,.paystatus-error .paystatus-icon{background:rgba(192,57,43,.1);color:var(--down)}
.paystatus-detail{margin:20px 0 4px;padding:14px 16px;background:var(--surface-2);border-radius:8px;
  font-family:var(--mono);font-size:12.5px;color:var(--ink);text-align:left;line-height:1.8}
.paystatus-actions{display:flex;gap:10px;margin-top:24px}
.paystatus-actions .btn{flex:1}
@media(max-width:520px){.paystatus-card{margin:30px auto;padding:32px 22px}.paystatus-actions{flex-direction:column}}

/* Market page: live tick-by-tick wall (SignalR), shown instead of the tape
   ticker while the market is open — an exchange-logo cell pinned to the
   left of each row, tiles butted edge-to-edge with no gaps (divider lines
   only), matching the old site's ticker strip. */
.tickwall{background:#0F1B33;border-bottom:2px solid #000}
.tickwall-ex{display:flex;align-items:stretch}
.tickwall-ex+.tickwall-ex{border-top:1px solid rgba(255,255,255,.08)}
.tickwall-logo{flex:0 0 auto;width:38px;display:flex;align-items:center;justify-content:center;
  background:#fff}
.tickwall-logo img{width:24px;height:24px;display:block}
.tickwall-grid{display:flex;flex-wrap:nowrap;flex:1 1 auto;min-width:0}
.tktile{flex:1 1 0;min-width:0;min-height:38px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;padding:0px 1px;color:#fff;
  text-align:center;cursor:default;border-right:1px solid rgba(0,0,0,.25)}
.tktile:nth-child(n+4){display:none}
.tktile:empty{background:rgba(255,255,255,.04);border-right-color:rgba(255,255,255,.08)}
.tktile-nam{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tktile-val{font-family:var(--mono);font-size:10px;margin-top:1px;opacity:.95;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tktile.bgGreen{background-image:url('/images/GreenBar.png');background-color:var(--up-bright);background-size:cover}
.tktile.bgRed{background-image:url('/images/RedBar.png');background-color:var(--down-bright);background-size:cover}
.tktile.bgBlue{background-image:url('/images/BlueBar.png');background-color:#3B6FD6;background-size:cover}
@media(min-width:900px){.tickwall-logo{width:44px}.tickwall-logo img{width:28px;height:28px}
  .tktile:nth-child(n+4){display:flex}.tktile-nam{font-size:12px}.tktile-val{font-size:10.5px}}

/* App download page */
.app-dl-hd{text-align:center;max-width:640px;margin:0 auto 40px}
.app-dl-hd .eyebrow{color:var(--brand);margin-bottom:10px}
[data-theme="dark"] .app-dl-hd .eyebrow{color:#5B8CE8}
.app-dl-hd h2{font-size:34px;letter-spacing:-.025em;margin:0 0 14px;font-weight:700}
.app-dl-hd p{color:var(--muted);font-size:15.5px;margin:0}
.app-dl-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:760px;margin:0 auto}
@media(max-width:680px){.app-dl-grid{grid-template-columns:1fr}}
.app-dl-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:36px 28px}
.app-dl-icon{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;color:#fff}
.app-dl-icon svg{width:28px;height:28px}
.app-dl-icon-android{background:#3DDC84}
.app-dl-icon-ios{background:#111}
[data-theme="dark"] .app-dl-icon-ios{background:#E7ECF5;color:#0F1B33}
.app-dl-card h3{margin:0 0 4px;font-size:19px;font-weight:700}
.app-dl-sub{color:var(--muted);font-size:13.5px;margin:0 0 20px}
.app-dl-qr{width:160px;height:160px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:8px;
  display:flex;align-items:center;justify-content:center}
.app-dl-qr svg{width:100%;height:100%;display:block}
.app-dl-scan{color:var(--muted);font-size:12.5px;margin:16px 0 18px}
.app-dl-badge{display:inline-flex;line-height:0;border-radius:4px;overflow:hidden}
.app-dl-badge img{height:44px;width:auto;display:block}
.nav-app-link{display:inline-flex;align-items:center;gap:6px}
.nav-app-link svg{width:16px;height:16px}

/* Financial statement */
.fin-summary-box{margin-bottom:20px}
@media(max-width:560px){
  .fin-summary-box{flex-wrap:wrap}
  .fin-summary-box .mkt-status-cell{flex:1 1 50%;min-width:0;box-sizing:border-box}
  .fin-summary-box .mkt-status-cell:nth-child(3){border-left:none;border-top:1px solid var(--line)}
  .fin-summary-box .mkt-status-cell:nth-child(4){border-top:1px solid var(--line)}
}
.fin-table-wrap{max-height:min(65vh,640px);overflow:auto;border:1px solid var(--line);border-radius:5px;
  background:var(--surface)}
.fin-table-wrap table{width:100%;min-width:760px;border-collapse:separate;border-spacing:0}
.fin-table-wrap th,.fin-table-wrap td{padding:5px 18px;border-right:1px solid rgba(255,255,255,.4)}
.fin-table-wrap th:last-child,.fin-table-wrap td:last-child{border-right:0}
.fin-table-wrap thead th{position:sticky;top:0;z-index:2;background:var(--surface-2);border-bottom:1px solid var(--line)}
.fin-table-wrap tfoot td{position:sticky;bottom:-1px;z-index:2;background:var(--surface-2);
  font-weight:700;border-top:1px solid var(--line);border-bottom:0}
.fin-table-wrap tbody tr:last-child td{border-bottom:0}
/* Row background tint by transaction type (Buy/Sale) — mirrors the old
   site's row highlighting, kept on hover so it doesn't get masked by the
   generic tbody-row hover background. Only runs through Commission (the
   first 7 columns) — Debit/Credit/Balance are reset back to the normal
   surface so the tint doesn't reach the actual money columns. */
.fin-row-buy,.fin-row-buy:hover{background:rgba(47,212,138,.75)}
.fin-row-sell,.fin-row-sell:hover{background:rgba(240,112,94,.75)}
.fin-row-buy td:nth-child(n+8),.fin-row-sell td:nth-child(n+8){background:var(--surface)}
/* Balance only calls out negative figures, as a badge behind the text
   itself rather than the whole cell — positive balances stay plain. */
.fin-bal-badge{background:var(--surface);color:var(--down);font-weight:700;padding:2px 8px;border-radius:4px;display:inline-block}
.fin-actions{display:flex;gap:10px;flex-shrink:0}
.fin-header-actions{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.fin-filter-inline{margin-bottom:0}
.fin-range-tabs{margin-bottom:20px}
#fin-statement .sec-hd{margin-bottom:5px}
@media(max-width:680px){
  /* Fixed pixel widths (not %) so no column can get squeezed toward zero by
     the auto-layout algorithm — the table just grows past the viewport and
     the wrapper's horizontal scroll takes over, same as a spreadsheet. */
  .fin-table-wrap table{width:auto;min-width:0;table-layout:fixed}
  .fin-col-type,.fin-col-qty,.fin-col-rate,.fin-col-amount,.fin-col-commission,.fin-col-balance{display:none}
  .fin-table-wrap th,.fin-table-wrap td{font-size:12px;white-space:nowrap}
  .fin-table-wrap th:first-child,.fin-table-wrap td:first-child{width:112px}
  .fin-table-wrap th:nth-child(3),.fin-table-wrap td:nth-child(3){width:170px;white-space:normal}
  .fin-table-wrap th:nth-child(8),.fin-table-wrap td:nth-child(8){width:112px}
  .fin-table-wrap th:nth-child(9),.fin-table-wrap td:nth-child(9){width:112px}
  .fin-table-wrap .fin-cur{display:none}
}

/* Account profile */
.profile-panel{margin-bottom:20px;overflow:hidden}
.profile-hd{padding:14px 24px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.profile-hd h3{margin:0;font-size:15px;font-weight:700}
.profile-grid{margin:0;display:grid;grid-template-columns:1fr 1fr}
.profile-row{padding:14px 24px;border-bottom:1px solid var(--line-soft);display:flex;flex-direction:column;gap:3px}
.profile-row:nth-last-child(-n+2){border-bottom:0}
.profile-row dt{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.profile-row dd{margin:0;font-size:14.5px;color:var(--ink);font-weight:500;word-break:break-word}
@media(max-width:680px){
  .profile-grid{grid-template-columns:1fr}
  .profile-row:nth-last-child(-n+2){border-bottom:1px solid var(--line-soft)}
  .profile-row:last-child{border-bottom:0}
}

/* Company Information */
.ci-header{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.ci-header-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0;
  margin-left:auto;align-self:flex-start;margin-top:2px}
.ci-header-right .field{margin-bottom:0;width:240px}
.ci-header-right .stock-combo-sub{font-family:var(--mono);font-size:14.5px}
.ci-logo-wrap{width:110px;height:110px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.ci-logo{width:100%;height:100%;object-fit:contain}
.ci-header-main{flex:1;min-width:220px}
.ci-header-main h1{margin:0 0 8px;font-size:37.5px;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.ci-header-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:17.5px;color:var(--muted);margin-bottom:10px}
.ci-meta-dot{opacity:.5}
.ci-badge{font-family:var(--mono);font-size:14px;font-weight:700;padding:2px 9px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line);color:var(--muted)}
.ci-badge.shariah{color:var(--up);border-color:var(--up)}
.ci-price-row{display:flex;align-items:baseline;gap:12px}
.ci-price-block{display:flex;align-items:baseline;gap:5px}
.ci-price{font-family:var(--mono);font-size:45px;font-weight:800;color:var(--ink);line-height:1}
.ci-price-exch{align-self:flex-start;margin-top:2px;font-family:var(--mono);font-size:14px;font-weight:700;color:#C77A1F}
[data-theme="dark"] .ci-price-exch{color:#E0A857}
.ci-currency{font-size:17px;color:var(--muted);font-weight:600}
.ci-change{font-family:var(--mono);font-size:20px;font-weight:600}

/* Sticky compact header — shown once the real header scrolls out of view,
   sitting just below the dashboard's own sticky top bar (that height is read
   at runtime in JS, since it isn't a fixed constant across breakpoints). */
.ci-mini-header{display:none;align-items:center;gap:10px;position:sticky;z-index:40;
  background:var(--bg);border-bottom:1px solid var(--line);padding:10px 24px;box-shadow:var(--shadow)}
.ci-mini-header.visible{display:flex}
.ci-mini-logo{width:26px;height:26px;border-radius:50%;object-fit:contain;background:var(--surface-2);flex-shrink:0}
.ci-mini-symbol{font-weight:700;font-size:17.5px}
.ci-mini-price{font-family:var(--mono);font-weight:700;font-size:17.5px}
.ci-mini-change{font-family:var(--mono);font-size:15.5px;font-weight:600}

/* Chart period tabs — each button is a two-line pill (period + that period's
   % change), rather than the plain text-only .seg-tabs used elsewhere, so it
   doubles as a quick performance readout like the reference site's own. */
.ci-period-tabs{display:flex;flex-wrap:wrap;gap:2px;margin-top:12px}
.ci-period-tabs button{display:flex;flex:1 1 64px;flex-direction:column;align-items:center;gap:4px;cursor:pointer;
  border:0;background:transparent;border-radius:8px;padding:10px 16px;min-width:64px;transition:background .12s}
.ci-period-tabs button:hover{background:var(--surface-2)}
.ci-period-tabs button.active{background:#E4E7EE}
[data-theme="dark"] .ci-period-tabs button.active{background:#2A3A5C}
.ci-period-lbl{font-family:var(--mono);font-size:14.5px;font-weight:700;color:var(--ink)}
.ci-period-chg{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--muted)}
.ci-period-chg.up{color:var(--up)}
.ci-period-chg.down{color:var(--down)}
.ci-asof{font-size:11.5px;color:var(--muted);margin-top:5px}

.ci-stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px 20px}
.ci-stat .lbl{display:block;font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.ci-stat .val{font-family:var(--mono);font-weight:600;color:var(--ink);font-size:17.5px;word-break:break-word}

.ci-chart{height:320px;margin-bottom:14px}

/* Sector-peer comparison cards — a horizontally scrollable row rather than a
   grid, since the peer list can run to 20+ names and there's no useful way
   to wrap that many cards without the section growing very tall. */
.ci-peers-wrap{position:relative;display:flex;align-items:center;gap:8px}
.ci-peers-row{display:flex;gap:14px;overflow-x:auto;scroll-behavior:smooth;padding-bottom:4px;flex:1;scrollbar-width:none}
.ci-peers-row::-webkit-scrollbar{display:none}
.ci-peer-card{flex:0 0 180px;display:block;padding:13px;border:1px solid var(--line);border-radius:8px;
  background:var(--surface);text-decoration:none;color:inherit;transition:border-color .15s}
.ci-peer-card:hover{border-color:var(--brand)}
.ci-peer-top{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.ci-peer-logo{width:30px;height:30px;border-radius:50%;object-fit:contain;background:var(--surface-2);flex-shrink:0}
.ci-peer-id{min-width:0}
.ci-peer-symbol{display:block;font-family:var(--mono);font-weight:700;font-size:16.5px;color:var(--ink)}
.ci-peer-name{display:block;font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-peer-price{font-family:var(--mono);font-weight:700;font-size:19px;color:var(--ink)}
.ci-peer-price .ci-peer-currency{font-size:13px;font-weight:600;color:var(--muted);margin-left:4px}
.ci-peer-change{font-family:var(--mono);font-size:15px;font-weight:600;margin-top:2px}
.ci-peer-change.up{color:var(--up)}
.ci-peer-change.down{color:var(--down)}
.ci-peers-nav{flex-shrink:0;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--surface);
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:22.5px;color:var(--ink);line-height:1}
.ci-peers-nav:hover{background:var(--surface-2)}

.ci-signal-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:20px}
.ci-signal-card{text-align:center;padding:13px 10px 16px;border-radius:6px;background:var(--surface);border:1px solid var(--line)}
.ci-signal-card .lbl{font-family:var(--mono);font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.ci-gauge{width:100%;max-width:200px;height:auto;margin:0 auto;display:block}
.ci-gauge-zone{font-size:12px;font-weight:600;fill:var(--muted)}
.ci-gauge-val{font-size:21.5px;font-weight:700}
.ci-gauge-val.buy{fill:#3B6FE0}
.ci-gauge-val.sell{fill:#E5484D}
.ci-gauge-val.neutral{fill:var(--muted)}
[data-theme="dark"] .ci-gauge-val.buy{fill:#6C93F0}
[data-theme="dark"] .ci-gauge-val.sell{fill:#F0705E}

.ci-seasonal-legend{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:13px;font-size:15.5px}
.ci-seasonal-legend span{display:inline-flex;align-items:center;gap:6px}
.ci-seasonal-legend i{display:inline-block;width:14px;height:3px;border-radius:2px}

.ci-seasonal-chart-wrap{position:relative;cursor:crosshair}
.ci-seasonal-crosshair{stroke:var(--muted);stroke-width:1;pointer-events:none}
.ci-seasonal-dot{pointer-events:none}
.ci-seasonal-tooltip{position:absolute;top:0;left:0;display:none;pointer-events:none;z-index:10;
  background:#24272E;color:#fff;border-radius:8px;padding:10px 14px;font-family:var(--mono);
  font-size:12.5px;white-space:nowrap;box-shadow:0 10px 28px rgba(0,0,0,.4)}
.ci-seasonal-tooltip .row{display:flex;align-items:center;gap:8px;padding:2px 0}
.ci-seasonal-tooltip .row i{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ci-seasonal-tooltip .row .yr{flex:1;font-weight:600}
.ci-seasonal-tooltip .row .val{font-weight:700;margin-left:18px}
.ci-seasonal-tooltip .foot{margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.15);
  text-align:center;color:rgba(255,255,255,.6);font-size:11px}

/* This page reuses several sitewide components (.dash-card, .panel tables,
   .seg-tabs) that default to a roomier density elsewhere in the site; scoped
   here to match the tighter, data-dense layout this page needs. */
#company-info .dash-card{padding:18px 20px}
#company-info .dash-card h3{margin-bottom:12px;font-size:16.5px}
#company-info .seg-tabs button{padding:7px 16px;font-size:12.5px}
#company-info .market-title-row h3{letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
#company-info table th{padding:8px 16px;font-size:13px}
#company-info table td{padding:9px 16px;font-size:17px}

@media(max-width:600px){
  .ci-header{flex-direction:column;align-items:flex-start}
  .ci-logo-wrap{width:80px;height:80px}
  .ci-header-main h1{font-size:30px}
  .ci-price{font-size:35px}
  .ci-header-right{align-items:stretch;width:100%;margin-left:0}
  .ci-header-right .stock-combo{width:100%}
  .ci-tech-grid{grid-template-columns:1fr !important}
  .ci-peer-card{flex-basis:160px}
  .ci-peers-nav{display:none}
}

/* Dashboard: BO account opening steps (accounts without a BO ID) */
.bo-steps-card{max-width:760px}
.bo-intro,.bo-help{font-size:14px;color:var(--muted);line-height:1.6;margin:0 0 16px}
.bo-help{margin:16px 0 0}
.bo-steps{list-style:none;margin:0;padding:0}
.bo-steps li{display:flex;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.bo-steps li:last-child{border-bottom:0}
.bo-step-no{flex:none;width:28px;height:28px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;font-weight:600;color:var(--muted)}
.bo-steps li.done .bo-step-no{background:var(--green);border-color:var(--green);color:#fff}
.bo-step-body{flex:1;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.bo-step-body .btn{padding:8px 16px;font-size:13px}
.bo-step-body a:not(.btn){font-size:13px;color:var(--brand)}
.bo-by{font-size:12.5px;color:var(--muted)}

/* Desktop: lay the BO steps out as a horizontal tracker across the full width */
@media (min-width:901px){
  .bo-steps-card{max-width:none;padding:28px 32px}
  .bo-intro,.bo-help{max-width:820px}
  .bo-intro{margin-bottom:28px}
  .bo-steps{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin:0 0 4px}
  .bo-help{max-width:none;margin-top:28px;padding-top:16px;border-top:1px solid var(--line)}
  .bo-steps li{position:relative;flex-direction:column;align-items:flex-start;gap:14px;padding:0;border-bottom:0}
  .bo-steps li:not(:last-child)::after{content:"";position:absolute;top:14px;left:40px;right:-12px;height:2px;background:var(--line)}
  .bo-steps li.done:not(:last-child)::after{background:var(--green)}
  .bo-step-body{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:10px}
  .bo-step-body strong{font-size:14.5px;line-height:1.35}
}

/* ?embed=1 — page framed inside the iTrade terminal: hide the site chrome */
body.embed .dash-header,body.embed .dash-phone-strip,body.embed .dash-tabbar,body.embed .dash-nav-backdrop{display:none}
body.embed main{padding-top:0}
/* Same flag under the public _Layout (e.g. Login, reached when an embedded
   page's session has expired) — hide its own header/ticker/footer instead. */
body.embed .util,body.embed header,body.embed .nav-backdrop,body.embed .ribbon,body.embed .risk,body.embed footer{display:none}

/* =====================================================================
   iTrade terminal (Pages/ITrade.cshtml, ts/itrade.ts)
   ===================================================================== */
/* --sans/--mono are Roboto site-wide now (see :root above), so this no
   longer needs its own font override — kept only for its background/color/
   margin. */
.it-body{background:var(--bg);color:var(--ink);font-family:var(--sans);margin:0}
.it [hidden]{display:none!important}
.it-hdr{background:var(--header);color:var(--header-ink);position:sticky;top:0;z-index:60;box-shadow:0 1px 0 rgba(0,0,0,.25)}
.it-hdr-row{display:flex;align-items:center;gap:18px;padding:8px 16px;flex-wrap:wrap}
.it-brand img{height:38px;display:block;border-radius:4px;background:#fff}
.it-grow{flex:1}
.it-user-id{font-family:var(--mono);font-size:11.5px;color:var(--header-sub)}
.it-user-name{font-weight:600;font-size:14px;line-height:1.2}
.it-child-switch{display:flex;flex-direction:column;gap:2px;margin-left:18px;padding-left:18px;/*border-left:1px solid rgba(255,255,255,.18)*/}
.it-child-switch-lbl{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--header-sub)}
.it-child-switch select{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:5px;padding:4px 8px;font-size:12.5px;font-family:inherit;max-width:230px}
.it-child-switch select:focus{outline:none;border-color:#fff}
.it-child-switch select option{color:#0F1B33}
.it-child-switch-mobile{border-left:0;padding-left:0;margin:10px 0 0;align-items:center}
.it-child-switch-mobile select{color:var(--ink);background:var(--surface);border-color:var(--line);max-width:none;width:100%}
.it-child-switch-mobile .it-child-switch-lbl{color:var(--muted)}
.it-idx{display:flex;align-items:center;gap:8px;padding:0 4px}
.it-idx img{height:22px;width:auto;border-radius:3px}
.it-idx-top{display:flex;align-items:baseline;gap:8px}
.it-idx-val{font-family:var(--mono);font-size:16px;font-weight:600}
.it-idx-chg{font-size:12px}
.it-idx-adv{font-size:11.5px;display:flex;gap:8px;color:var(--header-sub)}
.it-idx-adv .unch{color:var(--header-sub)}
.it-idx-vol{margin-left:4px}
.it-idx-history{align-self:flex-start;margin-top:2px;font-size:11px;font-family:inherit;color:var(--header-sub);background:none;
  border:1px solid currentColor;border-radius:4px;padding:3px 8px;cursor:pointer;opacity:.85;white-space:nowrap}
.it-idx-history:hover{opacity:1;color:#fff;border-color:#fff}
.it-hdr .up{color:#5BE3A6}.it-hdr .down{color:#FF8F80}
.it-mkt{text-align:center;line-height:1.25}
.it-mkt-cap{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--header-sub)}
.it-mkt-status{font-weight:700;font-size:15px}
.it-mkt-time{font-family:var(--mono);font-size:11px;color:var(--header-sub)}
.it-pm{text-align:right;line-height:1.3}
.it-pm-cap{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--header-sub)}
.it-pm-name{font-weight:600;font-size:13px}.it-pm-mob{font-family:var(--mono);font-size:11.5px;color:var(--header-sub)}
.it-actions{display:flex;align-items:center;gap:8px}
.it-hbtn{display:inline-block;color:var(--header-ink);text-decoration:none;font-weight:600;font-size:13px;padding:7px 14px;border-radius:5px;
  border:1px solid rgba(255,255,255,.3);background:transparent;cursor:pointer;font-family:var(--sans)}
.it-hbtn:hover{background:rgba(255,255,255,.1)}
.it-hbtn-solid{background:var(--brand);border-color:var(--brand)}
.it-hbtn-solid:hover{background:var(--brand-600)}
.it-hbtn-icon{padding:0;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center}
.it-hbtn-icon svg{width:18px;height:18px;flex:none}
.it-tickers{background:#000;border-top:1px solid rgba(255,255,255,.08)}
.it-tick-row{display:flex;align-items:center;gap:10px;padding:2px 10px;border-bottom:1px solid rgba(255,255,255,.06);height:26px}
.it-tick-row img{height:16px;width:auto;flex:none}
.it-tick-track{overflow:hidden;flex:1;white-space:nowrap}
.it-tick-inner{display:inline-block;animation:it-marquee 200s linear infinite;will-change:transform}
.it-tick-track:hover .it-tick-inner{animation-play-state:paused}
.it-tick{display:inline-block;margin-right:26px;font-size:12.5px;color:#DDE6F7;cursor:pointer;font-family:var(--mono)}
.it-tick b{color:#fff}.it-tick .up{color:#5BE3A6}.it-tick .down{color:#FF8F80}
.it-tick-wait{display:inline-block;font-size:12px;color:rgba(255,255,255,.55);font-style:italic}
@keyframes it-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.it-tick-inner{animation:none}}

/* Live ticker (market open) — fixed row of slots that shift as ticks arrive;
   see pushLiveTick in ts/itrade.ts. No scroll animation here, just the flash
   on whichever slot just received the newest tick. */
/* Right-aligned so that before all 12 slots have ticked at least once, the
   filled ones hug the right edge — each new tick visibly enters from the
   right and pushes the rest left, instead of the row's still-empty slots
   (which reserve no space at all, being display:none) leaving the first
   handful of ticks stranded looking centered. */
/* row-reverse + default (flex-start) justification, not flex-end: an
   overflowing flex-end row has no dependable cross-browser overflow
   direction, so the newest tick (which must stay fully visible) could get
   clipped instead of the oldest. See pushLiveTick in ts/itrade.ts. */
.it-tick-live{display:flex;flex-direction:row-reverse;align-items:center;height:100%;gap:0}
.it-tick-empty{display:none}
.it-tick-flash{animation:it-tick-flash .6s ease-out}
@keyframes it-tick-flash{from{background:rgba(255,255,255,.3)}to{background:transparent}}
@media (prefers-reduced-motion:reduce){.it-tick-flash{animation:none}}

.it{padding:12px 16px 40px;max-width:none}
.it-symbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:8px 12px;margin-bottom:12px;box-shadow:var(--shadow)}
.it-symbar-left{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1;min-width:0}
/* Company search — a Code/Sector/Category grid with its own per-column
   filters, ported from the old terminal's AG Grid scrip picker (see
   pushLiveTick-adjacent code in ts/itrade.ts for the rest of the port). The
   main input matches the Code column only, from the start of the symbol —
   never the company name, which this data doesn't even carry. */
.it-scrip-combo{position:relative;width:190px}
.it-scrip-combo input{width:100%;height:36px;padding:0 10px;border:2px solid var(--line);border-radius:5px;background:var(--surface);color:var(--ink);font:600 14px var(--sans);text-transform:uppercase;box-sizing:border-box}
.it-scrip-combo input:focus{outline:none;border-color:var(--brand)}
.it-scrip-drop{position:absolute;top:calc(100% + 4px);left:0;width:460px;max-width:min(90vw,460px);max-height:340px;
  overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow);z-index:120}
.it-scrip-tbl{width:100%;border-collapse:collapse;font-size:12.5px;table-layout:fixed}
.it-scrip-tbl thead th{position:sticky;background:var(--surface);text-align:left;padding:6px 8px;font-weight:700;
  border-bottom:1px solid var(--line);color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;top:0}
.it-scrip-filters th{top:27px;padding:4px 6px}
.it-scrip-filters input{width:100%;box-sizing:border-box;padding:4px 6px;border:1px solid var(--line);border-radius:3px;
  font:500 11.5px var(--sans);text-transform:none;background:var(--surface-2);color:var(--ink)}
.it-scrip-tbl tbody td{padding:6px 8px;border-bottom:1px solid var(--line-soft);cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.it-scrip-tbl tbody tr:hover,.it-scrip-tbl tbody tr.active{background:var(--surface-2)}
.it-scrip-tbl tbody td.it-scrip-empty{color:var(--muted);font-weight:500;cursor:default;text-align:center}
.it-scrip-tbl tbody tr:hover td.it-scrip-empty{background:transparent}
.it-symbar-prices{display:flex;gap:14px}
.it-px{display:flex;align-items:center;gap:8px;padding-left:12px;border-left:1px solid var(--line)}
.it-px img{height:20px;width:auto}
.it-px-ltp{font-family:var(--mono);font-weight:700;font-size:16px;min-width:24px}
.it-px-chg{font-size:12px;font-weight:600}
.it-btn{display:inline-block;background:var(--brand);color:#fff;border:0;border-radius:5px;font:600 13px var(--sans);padding:9px 16px;cursor:pointer;white-space:nowrap;flex:none}
.it-btn:hover{background:var(--brand-600)}
.it-btn:disabled{opacity:.5;cursor:not-allowed}
.it-btn-ghost{background:transparent;color:var(--brand);border:1px solid var(--line)}
.it-btn-ghost:hover{background:var(--surface-2)}
[data-theme="dark"] .it-btn-ghost{color:#8FB0F5}
.it-icon-btn{background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:5px;width:34px;height:34px;cursor:pointer;font-size:16px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.it-icon-btn:hover{background:var(--surface-2)}
.it-icon-btn svg{width:17px;height:17px;flex:none}
.it-card-hd .it-icon-btn{border-color:rgba(255,255,255,.3);color:#fff;width:28px;height:28px;font-size:14px}
.it-card-hd .it-icon-btn:hover{background:rgba(255,255,255,.14)}
.it-card-hd .it-icon-btn svg{width:15px;height:15px}
/* Fundamental button — wide enough for an icon + label instead of the plain
   square icon-only buttons (refresh, etc.) this class is normally used for. */
.it-icon-btn-labeled,.it-card-hd .it-icon-btn-labeled{width:auto;height:28px;padding:0 10px;gap:5px;font-size:12px;font-weight:600}
.it-icon-btn-labeled span{white-space:nowrap}

/* Depth-levels toggle (5/10 rows per side) shown in each depth card's header. */
.it-levels{display:flex;background:rgba(255,255,255,.12);border-radius:5px;padding:2px}
.it-levels button{background:none;border:0;color:rgba(255,255,255,.75);font:600 11px var(--sans);padding:4px 9px;border-radius:4px;cursor:pointer}
.it-levels button.active{background:#fff;color:var(--brand-700)}
[data-theme="dark"] .it-levels button.active{color:#16305F}

.it-tabs{display:flex;gap:1px;flex-wrap:wrap;margin-left:auto}
.it-tabs button{background:transparent;border:1px solid transparent;color:var(--muted);font:600 13px var(--sans);padding:6px 10px;border-radius:5px;cursor:pointer}
.it-tabs button:hover{background:var(--surface-2);color:var(--ink)}
.it-tabs button.active{background:var(--brand);color:#fff}

.it-pane{display:none;padding:0}
.it-pane.active{display:block}
.it-msub-pane{display:none}
.it-msub-pane.active{display:block}
.it-pps-sortable{cursor:pointer;user-select:none;white-space:nowrap}
.it-pps-sortable:hover{color:var(--ink)}
.it-pps-sortable .it-pps-arrow{display:inline-block;margin-left:3px;opacity:.5;font-size:9px}
.it-pps-sortable.active .it-pps-arrow{opacity:1}
#pps-rows tr{cursor:pointer}
.it-grid{display:grid;grid-template-columns:340px minmax(0,1fr) minmax(0,1fr);gap:12px;margin-bottom:12px;align-items:start}
.it-grid-2{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.it-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.it-card{background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden;box-shadow:var(--shadow)}
.it-card-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 12px;background:var(--brand-700);color:#fff;font-weight:600;font-size:13.5px}
[data-theme="dark"] .it-card-hd{background:#16305F}
.it-card-hd-wrap{flex-wrap:wrap}
/* Tabs living inside a dark card header (e.g. Orders: Order History / Trade
   Summary) instead of a separate light tab-strip row underneath it. */
.it-hd-tabs{display:flex;gap:18px}
.it-hd-tabs button{background:transparent;border:0;border-bottom:2px solid transparent;color:rgba(255,255,255,.6);
  font:700 14px var(--sans);padding:2px 0 4px;cursor:pointer}
.it-hd-tabs button:hover:not(.active){color:rgba(255,255,255,.85)}
.it-hd-tabs button.active{color:#fff;border-bottom-color:#fff}
.it-exch-title{display:flex;align-items:center;gap:8px}
.it-exch-title img{height:18px;width:auto;border-radius:2px;background:#fff}
.it-card-bd{padding:12px}
.it-card-bd.it-flush{padding:0}
.it-card-ft{padding:8px 12px;border-top:1px solid var(--line);text-align:right;font-size:13px;color:var(--muted)}
.it-card-ft b{color:var(--ink)}

/* A text input living inside a dark card header (News tab's symbol/keyword
   filter) — styled like the header itself rather than a plain light input. */
.it-card-hd input[type="text"]{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);
  color:#fff;border-radius:5px;padding:5px 9px;font:500 12.5px var(--sans);width:220px}
.it-card-hd input[type="text"]::placeholder{color:rgba(255,255,255,.6)}
.it-card-hd input[type="text"]:focus{outline:none;background:rgba(255,255,255,.18)}
@media (max-width:760px){.it-card-hd input[type="text"]{width:140px}}

/* News tab: a scrolling list on the left, the selected item's full text on
   the right — mirrors the reference design (list rows tagged by
   symbol/source, detail pane with a "Filed <date>" line and an "Open
   <SYMBOL>" shortcut back into Trade). */
.it-news-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;align-items:start}
@media (max-width:980px){.it-news-grid{grid-template-columns:1fr}}
.it-news-list{max-height:640px;overflow-y:auto}
.it-news-item{display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line-soft);cursor:pointer}
.it-news-item:hover{background:var(--bg)}
.it-news-item.active{background:var(--bg);box-shadow:inset 3px 0 0 var(--brand)}
.it-news-tag{flex:none;width:32px;height:32px;border-radius:6px;background:var(--bg);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font:700 11px var(--sans);color:var(--muted)}
.it-news-meta{font-size:11px;color:var(--muted)}
.it-news-head{font-size:13px;font-weight:600;color:var(--ink);margin-top:2px}
.it-news-detail-card{position:sticky;top:12px}
.it-news-filed{font-size:11px;color:var(--muted)}
.it-news-sym{font-size:21px;font-weight:800;letter-spacing:.01em;margin-top:6px}
.it-news-sym-name{font-size:12px;color:var(--muted);font-weight:500;margin-left:8px}
.it-news-detail-head{font-size:14.5px;font-weight:700;color:var(--ink);margin-top:14px}
.it-news-detail-body{font-size:13px;line-height:1.6;color:var(--ink);margin-top:8px}
.it-news-detail-actions{display:flex;justify-content:flex-end;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft)}

/* Floating order ticket — opens over the page, draggable by its header, like the
   old terminal's tradeCard (ITrade.makeFloatDraggable in ts/itrade.ts). */
.it-float{position:fixed;top:50%;left:16px;transform:translateY(-50%);width:380px;max-width:92vw;
  z-index:200;box-shadow:0 16px 40px rgba(0,0,0,.35);max-height:88vh;overflow-y:auto}
.it-drag-header{cursor:move;user-select:none}
.it-float-hd-actions{display:flex;align-items:center;gap:2px}
.it-float-close{background:transparent;border:0;color:#fff;font-size:22px;line-height:1;cursor:pointer;padding:2px 6px;border-radius:4px}
.it-float-close:hover{background:rgba(255,255,255,.14)}
@media (max-width:760px){
  .it-float{left:50%;transform:translate(-50%,-50%)}
}

/* Trade calculator */
.it-calc-float{width:360px;left:auto;right:16px}
@media (max-width:760px){.it-calc-float{left:50%;right:auto}}
.it-calc-fld{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:10px}
/* min-width:0 overrides the grid item's default min-width:auto — without it,
   a text input refuses to shrink below its browser-intrinsic width (~190px)
   inside the two-column Buy/Sell grid, overflows its own column by ~35px, and
   gets silently clipped by the floating panel's overflow — cutting off the
   Sell Rate placeholder/value ("Enter se…"). */
.it-calc-fld input{width:100%;min-width:0;box-sizing:border-box;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--ink);font:600 14px var(--mono);text-align:right}
.it-calc-fld input:focus{outline:2px solid var(--brand);outline-offset:-1px}
.it-calc-fld small{font-size:11px;color:var(--muted);font-weight:500;line-height:1.4}
.it-calc-fld small b{color:var(--ink);font-family:var(--mono)}
.it-calc-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.it-calc-actions{display:flex;align-items:center;gap:8px;margin:4px 0 12px;padding-top:10px;border-top:1px solid var(--line)}
.it-btn-sm{padding:7px 14px;font-size:12.5px}
.it-calc-result{margin-left:auto;font-size:13px;font-weight:700}
.it-neutral{color:var(--muted)}
.it-tbl-calc th,.it-tbl-calc td{text-align:right;font-size:11.5px;padding:5px 6px}
.it-tbl-calc th:first-child,.it-tbl-calc td:first-child{text-align:left}
.it-tbl-calc tfoot th{background:var(--surface-2);font-weight:700}
.it-tbl-calc .it-x{font-size:15px;padding:0 4px}
.it-pad{padding:14px}
.it-scroll{overflow:auto}

/* Ticket */
.it-bs{display:flex;gap:10px;justify-content:center;margin-bottom:12px}
.it-bs-in-trade{margin:0;padding:14px 12px;border-top:1px solid var(--line)}
#it-company-card tr:first-child td{border-top:0}
.it-bs-btn{flex:1;max-width:140px;padding:11px 0;font:700 15px var(--sans);border-radius:6px;cursor:pointer;background:transparent;border:2px solid var(--line);color:var(--muted)}
.it-bs-buy{border-color:var(--green);color:var(--green)}
.it-bs-sell{border-color:#D64545;color:#D64545}
.it-bs-buy.active{background:var(--green);border-color:var(--green);color:#fff}
.it-bs-sell.active{background:#D64545;border-color:#D64545;color:#fff}
.it-bs-btn:not(.active):hover{background:var(--surface-2)}
/* In the floating ticket, Buy/Sell sits next to Regular/Block in one row —
   shrink the buttons so both fit without wrapping. */
.it-ticket-bs-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.it-ticket-bs-row .it-bs{margin-bottom:0}
.it-ticket-bs-row .it-bs-btn{max-width:60px;padding:3px 10px}
.it-ticket-bs-row .it-seg{margin-bottom:0}
.it-seg{display:flex;gap:16px;margin:0 0 10px;font-size:13px}
.it-seg label,.it-exch label,.it-radio,.it-check{cursor:pointer;display:flex;align-items:center;gap:6px}
.it-line{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;font-size:13.5px;color:var(--muted)}
.it-line b{color:var(--ink);font-family:var(--mono);font-size:15px}
.it-line-total{border-top:1px dashed var(--line);margin-top:8px;padding-top:10px}
.it-line-total b{font-size:17px;color:var(--brand)}
[data-theme="dark"] .it-line-total b{color:#8FB0F5}
.it-frow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0 2px}
.it-frow label{flex:0 0 96px;font-size:13px;font-weight:600;border:1px solid var(--line);border-radius:4px;padding:6px 10px;background:var(--surface-2)}
.it-frow input{flex:1;min-width:0;text-align:right;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--ink);font:600 14px var(--mono)}
.it-frow input:focus{outline:2px solid var(--brand);outline-offset:-1px}
.it-frow input[readonly]{background:var(--surface-2);color:var(--muted)}
.it-frow-inline{margin-top:10px}
.it-chips{display:flex;gap:6px;justify-content:flex-end;margin:4px 0}
.it-chips button{background:var(--surface-2);border:1px solid var(--line);color:var(--ink);border-radius:12px;font:600 11.5px var(--sans);padding:3px 10px;cursor:pointer}
.it-chips button:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.it-check{font-size:12.5px;justify-content:flex-end;margin:4px 0;color:var(--muted)}
.it-gtc-row{margin:10px 0 0;font-size:13.5px}
.it-gtc-hint{text-align:right;font-size:11px;color:var(--muted);margin-top:2px}
.it-adv{margin-top:8px;border:1px solid var(--line);border-radius:5px}
.it-adv summary{padding:8px 10px;cursor:pointer;font-weight:600;font-size:13px;color:var(--brand)}
[data-theme="dark"] .it-adv summary{color:#8FB0F5}
.it-adv-bd{padding:4px 10px 10px;display:flex;flex-direction:column;gap:8px;font-size:13px}
.it-radio small{display:block;color:var(--muted);font-size:11px}
.it-radio input:disabled+span{opacity:.45}
.it-submit-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.it-exch{display:flex;gap:14px;font-size:13px;font-weight:600}
.it-submit{min-width:110px;padding:11px 18px;font-size:14px;background:var(--muted)}
.it-submit-buy{background:var(--green)}.it-submit-buy:hover{background:var(--green-600)}
.it-submit-sell{background:#D64545}.it-submit-sell:hover{background:#B93838}

/* Tables */
.it-kv{width:100%;border-collapse:collapse;font-size:13px}
.it-kv td{padding:8px 12px;border-top:1px solid var(--line-soft)}
/* Label column: fixed to its own content width and never wraps. Without this,
   table-layout:auto shares one column width across every row, so a long value
   in one row (e.g. a company's full name) steals width from the label column
   and wraps unrelated, short labels in other rows ("Settle type" -> "Settle"
   / "type") even though there's plenty of room overall. */
.it-kv td:nth-child(odd){width:1%;white-space:nowrap}
.it-kv td:nth-child(even){text-align:right;font-family:var(--mono);font-weight:600;white-space:normal;word-break:break-word}
.it-kv-2 td:nth-child(odd){color:var(--muted)}
.it-kv td:nth-child(odd){font-family:var(--sans)}
.it-kv-2 td:nth-child(even){text-align:right}
.it-kv-2 td:nth-child(3){text-align:left;padding-left:16px}
.it-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.it-tbl th{position:sticky;top:0;background:var(--surface-2);text-align:right;font-weight:600;color:var(--muted);padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.it-tbl td{padding:6px 10px;border-bottom:1px solid var(--line-soft);text-align:right;white-space:nowrap}
.it-tbl th:first-child,.it-tbl td:first-child{text-align:left}
.it-dc{display:inline-block;font-size:14px;line-height:1.3;color:var(--muted);text-align:left}
.it-tbl .it-dc-cell{text-align:center}
.it-tbl-orders th,.it-tbl-orders td{text-align:center}
.it-tbl-orders th:first-child,.it-tbl-orders td:first-child{text-align:left}

/* Portfolio tab */
.it-ptabs button{flex:none;padding:9px 18px}
.it-tbl-pf th,.it-tbl-pf td{border-right:1px solid var(--line-soft)}
.it-tbl-pf th:last-child,.it-tbl-pf td:last-child{border-right:0}
.it-pf-perf-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.it-pf-perf-grid>div:first-child{border-right:1px solid var(--line)}
@media (max-width:700px){.it-pf-perf-grid{grid-template-columns:1fr}.it-pf-perf-grid>div:first-child{border-right:0;border-bottom:1px solid var(--line)}}
.it-small{font-size:11px;color:var(--muted)}
.it-link{background:none;border:0;padding:0;color:var(--brand);font:600 12.5px var(--sans);cursor:pointer}
.it-link:hover{text-decoration:underline}
[data-theme="dark"] .it-link{color:#8FB0F5}
.it-x{background:none;border:0;color:var(--down);font-size:18px;cursor:pointer;line-height:1}.it-x:hover{opacity:.75}
/* .it-tbl td{text-align:right} by default, left only for :first-child — the
   watchlist's Exch cell is first-child on the DSE row (no rowspan'd Company
   cell there) but not on the CSE row, so the two ended up misaligned.
   Matching specificity to the :first-child rule (not just the plain .it-tbl
   td one) so this wins on both rows regardless of position. */
.it-tbl td.it-watch-exch{text-align:left}
.it-mini{font:600 11.5px var(--sans);padding:3px 9px;border-radius:4px;border:0;background:#3a3f4b;color:#fff;cursor:pointer}
.it-mini-info{background:var(--brand)}
/* Order row highlights — ported from the old terminal's procOrder(): every
   other status (submitted, pending, rejected, expired, replaced, valid, a
   partial fill) just uses the plain up/down B/S color set in renderOrders(). */
.it-st-bought,.it-st-sold,.it-st-cancelled{color:#fff}
.it-st-bought td,.it-st-sold td,.it-st-cancelled td{color:#fff!important}
/* The company name is a button (.it-link), not plain cell text — its own
   explicit color:var(--brand) doesn't inherit the td's white above, so it
   stayed the default blue link color even on these colored rows. */
.it-st-bought .it-link,.it-st-sold .it-link,.it-st-cancelled .it-link{color:#fff!important}
.it-st-bought{background:var(--green)}
.it-st-sold{background:#D64545}
.it-st-cancelled{background:#3a3a3a}
/* GTC marker — solid color + white text always, so it stays legible whether
   the row is plain or one of the bought/sold/cancelled highlight colors above. */
.it-gtc-badge{display:inline-block;background:#6B46C1;color:#fff;font:700 9.5px var(--sans);letter-spacing:.04em;padding:1px 5px;border-radius:3px;margin-left:4px;vertical-align:middle}
/* A site-wide tbody tr:hover{background:var(--surface-2)} (two elements +
   :hover) otherwise outranks these single-class rules on hover, swapping the
   status color for light gray while the text above stays forced white —
   the washed-out, illegible-on-hover look. Same colors again here, now with
   enough specificity (two classes) to win instead. */
.it-st-bought:hover{background:var(--green)}
.it-st-sold:hover{background:#D64545}
.it-st-cancelled:hover{background:#3a3a3a}
.it-remark{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px}
.it-filters{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.it-filters select,.it-filters input{height:28px;border-radius:4px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;font:500 12px var(--sans);padding:0 6px}
.it-filters select option{color:#0F1B33}
.it-filters input::placeholder{color:rgba(255,255,255,.7)}
.it-summary-hd{padding:7px 12px;font-weight:600;font-size:12.5px;background:var(--surface-2);border-top:1px solid var(--line)}

/* Depth */
.it-dtabs{display:flex;background:var(--surface-2);border-bottom:1px solid var(--line);overflow-x:auto}
.it-dtabs button{flex:1;background:none;border:0;border-bottom:2px solid transparent;padding:8px 6px;font:600 12px var(--sans);color:var(--muted);cursor:pointer;white-space:nowrap}
.it-dtabs button.active{color:var(--brand);border-bottom-color:var(--brand);background:var(--surface)}
/* Depth tab bar: an icon per tab, always visible; the label text only shows for
   the active tab (see Pages/ITrade.cshtml) — five full labels never fit this
   narrow a column, so the rest fall back to their icon + a hover tooltip. */
.it-dtab-btn{display:flex;align-items:center;justify-content:center;gap:6px}
.it-dtab-btn svg{width:15px;height:15px;flex:none}
.it-dtab-btn .it-dlabel{display:none}
.it-dtab-btn.active .it-dlabel{display:inline}
[data-theme="dark"] .it-dtabs button.active{color:#8FB0F5;border-bottom-color:#8FB0F5}
.it-dpane{display:none}.it-dpane.active{display:block}

/* Two compact header/value tables — LTP/LTQ/volume/value/trades/YCP, then
   circuit/range/change/52wk-range/last-trade-time. */
.it-summtbl-wrap:empty{display:none}
.it-summtbl-wrap{border-bottom:1px solid var(--line-soft)}
.it-summtbl{width:100%;border-collapse:collapse;table-layout:fixed}
.it-shd th{background:var(--brand-700);color:#fff;font:700 10px var(--sans);letter-spacing:.03em;text-transform:uppercase;padding:5px 4px;text-align:center}
[data-theme="dark"] .it-shd th{background:#16305F}
/* overflow-wrap: a heavily-traded DSE stock's T.Vol/T.Val can be a long,
   comma-grouped number ("12,27,23,79,600") with no natural break point — in
   this table-layout:fixed table that overflowed its fixed-width column and
   visibly spilled into the next cell instead of wrapping. This lets it wrap
   onto a second line within its own cell instead. */
.it-sval td{padding:6px 4px;text-align:center;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink);overflow-wrap:break-word;word-break:break-word}
/* T.Vol/T.Val values: shortened to K/M/B/T, full precision one hover away via
   the title attribute — the dotted underline + help cursor (same convention
   as an <abbr>) is the hint that there's more to see than what's printed. */
.it-compact{cursor:help;border-bottom:1px dotted var(--muted)}
/* .it-sval td's own color:var(--ink) otherwise beats the plain .up/.down
   classes (same specificity, but this rule is more specific by one element
   selector) — this is what was making the Chng cell always render in the
   default ink color instead of green/red. */
.it-sval td.up{color:var(--up)}
.it-sval td.down{color:var(--down)}

/* Buyer/seller pressure bar. */
.it-summ{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:11.5px;font-weight:600;border-bottom:1px solid var(--line-soft)}
.it-summ .up,.it-summ .down{flex:none;white-space:nowrap}
/* Buy/sell pressure bar — solid green for the buy share, solid red (not a
   neutral track) for the rest, so the whole bar reads as buy-vs-sell rather
   than buy-vs-empty. */
.it-pbar{position:relative;flex:1;height:14px;min-width:40px;border-radius:7px;background:var(--down);border:1px solid var(--line);overflow:hidden}
.it-pbar-fill{height:100%;background:var(--up);transition:width .3s}
[data-theme="dark"] .it-pbar-fill{background:var(--up-bright)}
.it-pbar-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.it-depth-tbl{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:13px}
.it-depth-tbl th{font:600 11.5px var(--sans);color:var(--muted);padding:6px 8px;text-align:right;border-bottom:1px solid var(--line)}
.it-depth-tbl td{padding:7px 8px;text-align:right;border-bottom:1px solid var(--line-soft)}
.it-depth-tbl td.up{background:rgba(27,164,91,.08)}.it-depth-tbl td.down{background:rgba(214,69,69,.08)}
.it-bdr{border-right:2px solid var(--line)}
.it-click{cursor:pointer;font-weight:700}.it-click:hover{text-decoration:underline}
.it-dpane .it-scroll{max-height:380px}
.it-chart{width:100%;height:340px}

/* Framed tabs */
.it-frame-full{width:100%;height:calc(100vh - 240px);min-height:560px;border:1px solid var(--line);border-radius:6px;background:var(--surface);display:block}
.it-frame-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.it-frame-grid iframe{width:100%;height:calc(100vh - 240px);min-height:560px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}

/* Modify dialog (SweetAlert) */
.it-mod{text-align:left;display:flex;flex-direction:column;gap:10px}
.it-mod-hd{font-weight:700}.it-mod-avail{font-size:13px;color:var(--muted)}
.it-mod label{display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:600;font-size:14px}
.it-mod input{width:55%;text-align:right;height:36px;padding:0 10px;border:1px solid #c8cfdd;border-radius:4px;font:600 15px var(--mono);background:transparent;color:inherit}
.it-mod-total{font-size:14px}

@media (max-width:1180px){
  .it-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .it-col-ticket{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .it-grid-2{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .it-grid,.it-col-ticket{grid-template-columns:minmax(0,1fr)}
  .it-frame-grid{grid-template-columns:1fr}
  .it-hdr-row{gap:10px}
  .it-pm{display:none}
  .it-combo{width:100%}
  .it-symbar-prices{width:100%;justify-content:space-between}
  .it-tabs{margin-left:0;width:100%}
  .it{padding:8px 8px 40px}
}

/* iTrade — Robot Trade tab */
.it-hd-link{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:5px;font:600 12px var(--sans);padding:4px 12px;cursor:pointer}
.it-hd-link:hover{background:rgba(255,255,255,.14)}
.it-rb-note{font-size:14px;margin-bottom:12px}
.it-rb-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.it-fld{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--muted)}
.it-fld select,.it-fld input{height:36px;padding:0 10px;border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--ink);font:600 13.5px var(--sans);width:100%;box-sizing:border-box}
.it-fld input{font-family:var(--mono);text-align:right}
.it-fld input:disabled,.it-fld input[readonly]{background:var(--surface-2);color:var(--muted)}
.it-fld-inline{display:flex;align-items:center;gap:8px}
.it-fld-inline b{font-size:13px;color:var(--muted);min-width:18px}
.it-rb-info{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px;font-size:13px;color:var(--muted)}
.it-rb-info b{color:var(--ink)}
.it-rb-total{font-weight:700;color:var(--ink)}
.it-rb-actions{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:14px;flex-wrap:wrap}
.it-check-left{justify-content:flex-start;margin:0}
.it-rb-filters{display:flex;gap:8px;padding:10px 12px;flex-wrap:wrap;border-bottom:1px solid var(--line-soft)}
.it-rb-filters select{height:34px;padding:0 10px;border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--ink);font:600 13px var(--sans)}
.it-doc{text-align:left;font-size:13.5px;line-height:1.6;max-height:60vh;overflow-y:auto}
.it-doc ul,.it-doc ol{padding-left:22px}
@media (max-width:1000px){.it-rb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.it-rb-grid{grid-template-columns:minmax(0,1fr)}}

/* =====================================================================
   iTrade — mobile Trade view (phone widths). A purpose-built single-column
   layout for #it-pane-trade, separate from the desktop grid (see
   Pages/ITrade.cshtml's .it-mobile-trade block and renderMobileTrade() in
   itrade.ts) — hidden above the breakpoint, and hides the desktop grid
   below it.
   ===================================================================== */
.it-mobile-trade{display:none}
@media (max-width:760px){
  #it-pane-trade > .it-grid{display:none}
  .it-mobile-trade{display:block}
  .it-main{padding-bottom:76px}
  /* The Trade/Market/Heatmap/Company/News/Robot Trade/Portfolio tab row —
     redundant with the bottom nav bar's own Trade icon on mobile (which
     resets to this page's default Trade tab), and this page doesn't have a
     mobile-built layout for the other tabs to switch into anyway. */
  #it-tabs{display:none}
  #it-watch-add{display:none}
  /* Every text input/select in here is under 16px (13.5-14px) — below that
     threshold, iOS/Android browsers auto-zoom the whole page in on focus
     to make the text readable, which is the "page zooms in" complaint.
     Forcing 16px minimum here is the standard fix (not maximum-scale=1 on
     the viewport meta tag, which would also block the user's own pinch-zoom
     everywhere, an accessibility regression this avoids). */
  #itrade input,#itrade select,#itrade textarea{font-size:16px}
  /* Company search: Code only, no Sector/Category columns — those stay
     desktop-only, where there's room for the filter-by-column grid. */
  .it-scrip-tbl th:nth-child(2),.it-scrip-tbl th:nth-child(3),
  .it-scrip-tbl td:nth-child(2),.it-scrip-tbl td:nth-child(3){display:none}
  .it-scrip-tbl th:first-child,.it-scrip-tbl td:first-child{width:100%}
  /* The "Code" header + its own Filter box are redundant here too — the
     main input already filters this list as you type (startsWith on the
     Code column), so on mobile the dropdown is just a plain script list. */
  .it-scrip-tbl thead{display:none}
  /* Redundant with the mobile Trade view's own "Last Trade Price" card
     below, which shows the same DSE/CSE LTP+change more prominently. */
  .it-symbar-prices{display:none}
  /* The floating order ticket becomes a bottom sheet here instead of a small
     draggable box — same element, same validation/submit logic (see
     ts/itrade.ts's ticket module), just repositioned. */
  #it-ticket-float{position:fixed;left:0;right:0;top:auto;bottom:0;transform:none;
    width:100%;max-width:none;max-height:85vh;border-radius:12px 12px 0 0}
  #it-calc-float{left:50%;right:auto;transform:translate(-50%,-50%)}
}

.it-m-price-card .it-card-bd{padding:14px}
.it-m-price-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:center}
.it-m-price-lbl{font:700 11px var(--sans);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.it-m-price-val{font:800 22px var(--mono);color:var(--ink);margin-top:2px}
.it-m-price-chg{font:600 12.5px var(--mono);margin-top:2px}
.it-m-price-chg.up{color:var(--up)}.it-m-price-chg.down{color:var(--down)}
.it-m-spark{height:44px;margin-top:6px}
.it-m-spark svg{width:100%;height:100%;display:block}
.it-m-spark svg polyline.up{stroke:var(--up)}
.it-m-spark svg polyline.down{stroke:var(--down)}

.it-m-bs{display:flex;gap:10px;margin:14px 0}
.it-m-bs-btn{flex:1;border:0;border-radius:24px;padding:13px 0;font:800 15px var(--sans);color:#fff;cursor:pointer;letter-spacing:.03em}
.it-m-bs-buy{background:var(--up)}
.it-m-bs-sell{background:var(--down)}

.it-m-depth-links{display:flex;gap:8px;flex-wrap:wrap}
.it-m-link-btn{background:rgba(255,255,255,.14);color:#fff;border:0;border-radius:14px;padding:4px 10px;
  font:600 11px var(--sans);cursor:pointer;text-decoration:none;white-space:nowrap}
.it-m-link-btn:hover{background:rgba(255,255,255,.24)}

/* Buyer/seller summary bar — same idea as the desktop .it-pbar (green buy
   share, red sell share, white % label) but with the buyer/seller
   counts+units and cash in/out lines built in above/below it, matching the
   reference design instead of sitting in a separate .it-summ row. */
.it-m-bsbar{padding:12px 14px 10px;border-bottom:1px solid var(--line-soft)}
.it-m-bsbar-top{display:flex;justify-content:space-between;font:700 14.5px var(--sans);margin-bottom:6px}
.it-m-bsbar-top .up,.it-m-bsbar-top .down{white-space:nowrap}
.it-m-bsbar-cash{display:flex;justify-content:space-between;font:600 13px var(--mono);margin-top:6px}
.it-m-bsbar-cash .up{color:var(--up)}.it-m-bsbar-cash .down{color:var(--down)}

.it-m-depth-tbl{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:16px;table-layout:fixed}
.it-m-depth-tbl th{font:700 13px var(--sans);color:var(--muted);padding:6px 4px;text-align:center;border-bottom:1px solid var(--line-soft)}
.it-m-depth-tbl td{padding:5px 4px;text-align:center;font-size:16px}
.it-m-depth-tbl td:nth-child(1),.it-m-depth-tbl td:nth-child(2),.it-m-depth-tbl td:nth-child(3){color:var(--up)}
.it-m-depth-tbl td:nth-child(4),.it-m-depth-tbl td:nth-child(5),.it-m-depth-tbl td:nth-child(6){color:var(--down)}

/* Today's All Trade popup (intraday rows) — plain table, no depth-book
   column coloring; Change is colored per row by its own up/down class. */
.it-m-alltrade-tbl{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:16px;table-layout:fixed}
.it-m-alltrade-tbl th{font:700 13px var(--sans);color:var(--muted);padding:6px 4px;text-align:center;border-bottom:1px solid var(--line-soft)}
.it-m-alltrade-tbl td{padding:5px 4px;text-align:center;color:var(--ink);font-size:16px}
.it-m-alltrade-tbl td.up{color:var(--up)}
.it-m-alltrade-tbl td.down{color:var(--down)}

/* Four stats per row (LTP/Open/High/Low, then Close/Last Qty/Total Volume/
   Total Value) instead of two — Circuit alone still spans the full width. */
.it-m-ohlc{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 8px;padding:12px 14px;font-size:14.5px}
.it-m-ohlc-row-full{grid-column:1/-1}
.it-m-ohlc .lbl{color:var(--muted);display:block;font-size:13px}
.it-m-ohlc .val{font-family:var(--mono);font-weight:600;color:var(--ink)}
.it-m-ohlc .val.up{color:var(--up)}
.it-m-ohlc .val.down{color:var(--down)}

.it-m-order-filters{display:flex;gap:8px;padding:12px 14px;flex-wrap:wrap;border-bottom:1px solid var(--line-soft)}
.it-m-order-filters button{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:5px 12px;
  font:600 11.5px var(--sans);color:var(--muted);cursor:pointer}
.it-m-order-filters button.active{background:var(--brand);border-color:var(--brand);color:#fff}
.it-m-order-item{padding:10px 14px;border-bottom:1px solid var(--line-soft);font-size:12.5px}
.it-m-order-item:last-child{border-bottom:0}
.it-m-order-top{display:flex;justify-content:space-between;font-weight:700}
.it-m-order-detail{display:flex;justify-content:space-between;color:var(--muted);margin-top:3px;font-family:var(--mono);font-size:11.5px}

.it-m-details-card .it-card-bd{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;font-size:16px}
.it-m-details-card .lbl{color:var(--muted);display:block;font-size:12px}
.it-m-details-card .val{font-weight:600;color:var(--ink)}

.it-m-div-tbl{width:100%;border-collapse:collapse;font-size:11.5px}
.it-m-div-tbl th{background:var(--surface-2);color:var(--muted);font:700 10px var(--sans);text-transform:uppercase;padding:6px 4px;text-align:center;border-bottom:1px solid var(--line)}
.it-m-div-tbl td{padding:6px 4px;text-align:center;border-bottom:1px solid var(--line-soft);font-family:var(--mono)}

.it-m-news-item{display:block;padding:16px 14px;border-bottom:1px solid var(--line-soft)}
.it-m-news-item:last-child{border-bottom:0}
.it-m-news-src{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;color:var(--muted)}
.it-m-news-src-left{display:flex;align-items:center;gap:6px;min-width:0}
.it-m-news-date{font:700 13px var(--sans);color:var(--muted);flex:none;white-space:nowrap}
.it-m-news-logo{width:22px;height:22px;border-radius:50%;object-fit:contain;flex:none;background:#fff;border:1px solid var(--line)}
.it-m-news-head{font-size:15px;color:var(--ink);margin-top:10px;line-height:1.5}
/* Inline right after the headline text (wraps onto its own line naturally
   once the paragraph fills the width) instead of a separate centered row
   below with a gap. */
.it-m-news-details-btn{display:inline-block;vertical-align:middle;margin-left:6px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:16px;padding:4px 16px;font:600 13px var(--sans);color:var(--ink);cursor:pointer}

.it-m-dummy-tag{font-size:11px;color:var(--muted);font-style:italic;margin:0 0 10px}
.it-m-reco-row{padding:10px 0;border-top:1px solid var(--line-soft)}
.it-m-reco-row:first-of-type{border-top:0}
.it-m-reco-head{font-weight:700;font-size:13px;display:flex;align-items:center;gap:8px}
.it-m-reco-head .up,.it-m-reco-head .down{font-size:11px;font-weight:800;padding:1px 8px;border-radius:10px;background:var(--surface-2)}
.it-m-reco-row p{font-size:12.5px;color:var(--muted);margin:4px 0 0}

/* iTrade's own mobile header — the standard dashboard hamburger/brand/
   profile row+drawer (see _TerminalLayout.cshtml), shown only in place of
   this page's desktop .it-hdr at phone widths; that header is dense enough
   (indices, ticker, portfolio manager, action icons) that reflowing it down
   isn't the right call, unlike most other mobile breakpoints in this file.
   Deliberately kept at the site's usual ≤600px breakpoint rather than this
   file's other, wider 760px iTrade-mobile breakpoint: the dashboard header's
   hamburger/profile/drawer machinery (menu-btn, profile-btn, dash-nav's
   slide-in, dash-drawer-*) is all itself only styled inside the existing
   @media(max-width:600px) block above — scoping all of that to activate 160px
   earlier just for this one header would mean re-declaring most of that
   block a second time. Between 600-760px this page's own desktop header
   stays up a little longer than the mobile Trade cards below it start —
   a narrow, uncommon range, and the same kind of breakpoint mismatch this
   codebase already has elsewhere (.dash-tabbar shows at 760px while this
   same header switch happens at 600px). */
.it-mobile-header{display:none}
.it-tickers-mobile{display:none}
@media (max-width:600px){
  .it-hdr{display:none}
  .it-mobile-header{display:block}
  .it-tickers-mobile{display:block}
}

/* =====================================================================
   ag-Grid "screener" pages — Advanced Filter, Technical Indicators.
   Ported from oldSite/matrix-aggrid.aspx's #matrixApp styling, swapped
   onto this theme's own color/surface variables (incl. dark mode) instead
   of its hardcoded palette. See ts/ag-screener.ts for the grid engine.
   ===================================================================== */
.ag-screener-app *{box-sizing:border-box}
.ag-screener-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.ag-screener-head h2{margin:0 0 6px}
.ag-screener-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ag-screener-status{font-size:12px;color:var(--muted);font-family:var(--mono)}

.ag-screener-wrap{display:flex;align-items:stretch;height:calc(100vh - 260px);min-height:480px}
.ag-screener-wrap #ag-screener-grid{flex:1;min-width:0}

.ag-col-panel{width:230px;border:1px solid var(--line);border-left:none;border-radius:0 6px 6px 0;background:var(--surface-2);overflow-y:auto;font-size:12.5px;display:none}
.ag-col-panel.open{display:block}
.ag-col-panel .group{border-bottom:1px solid var(--line)}
.ag-col-panel .group-title{display:flex;align-items:center;gap:6px;padding:8px 10px;font-weight:500;cursor:pointer;user-select:none;background:var(--surface)}
.ag-col-panel .group-title .caret{display:inline-block;transition:transform .15s;font-size:10px;color:var(--muted)}
.ag-col-panel .group.collapsed .caret{transform:rotate(-90deg)}
.ag-col-panel .group.collapsed .group-items{display:none}
.ag-col-panel label{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 26px;cursor:pointer;color:var(--ink)}
.ag-col-panel label:hover{background:var(--surface)}
.ag-col-panel input[type=checkbox]{accent-color:var(--brand);margin:0}

.ag-panel-tab{writing-mode:vertical-rl;border:1px solid var(--line);border-left:none;border-radius:0 6px 6px 0;background:var(--surface);color:var(--muted);padding:12px 4px;font-size:12px;cursor:pointer;align-self:flex-start}
.ag-panel-tab.active{color:var(--brand);border-color:var(--brand)}

.ag-screener-app .ag-theme-quartz{
  --ag-font-family:var(--sans);--ag-font-size:12.5px;
  --ag-background-color:var(--surface);--ag-foreground-color:var(--ink);
  --ag-header-background-color:var(--surface);--ag-header-foreground-color:var(--muted);
  --ag-border-color:var(--line);--ag-row-hover-color:var(--surface-2);
  --ag-odd-row-background-color:var(--surface-2);--ag-row-border-color:var(--line-soft);
  --ag-header-column-separator-display:block;--ag-header-column-separator-color:var(--line);
  --ag-header-column-separator-height:60%;--ag-wrapper-border-radius:6px;--ag-icon-size:13px;
  --ag-modal-overlay-background-color:rgba(0,0,0,.3);--ag-input-border-color:var(--line);
  --ag-input-focus-border-color:var(--brand);
}
.ag-screener-app .ag-theme-quartz .ag-header-cell-label{font-weight:400}
.ag-screener-app .ag-theme-quartz .ag-header-group-cell-label{font-weight:500}
.ag-screener-app .ag-theme-quartz .ag-floating-filter-input .ag-input-field-input{border:1px solid var(--line);border-radius:4px;height:26px;min-height:26px;padding:0 8px;background:var(--surface);color:var(--ink);font-size:12px}
.ag-screener-app .ag-theme-quartz .ag-floating-filter-input .ag-input-field-input:focus{border-color:var(--brand);box-shadow:0 0 0 2px rgba(22,87,208,.15);outline:none}
.ag-screener-app .ag-theme-quartz .ag-floating-filter-button{margin-left:6px;color:var(--muted)}
.ag-screener-app .ag-theme-quartz .ag-floating-filter-button:hover{color:var(--brand)}
.ag-screener-app .ag-theme-quartz .ag-icon svg{display:block}
.ag-screener-app .num-neg{color:var(--down)}
.ag-screener-app .num-pos{color:var(--up)}

@media(max-width:900px){
  .ag-screener-wrap{flex-direction:column;height:auto}
  .ag-screener-wrap #ag-screener-grid{height:70vh}
  .ag-col-panel{display:block;width:100%;max-height:260px;border-left:1px solid var(--line);border-radius:0 0 6px 6px}
  .ag-panel-tab{display:none}
}

/* ============================================================
   Mobile app-shell (Pages/MobileHome.cshtml) — a self-contained
   pre-login landing page mirroring the native app's own shell
   (top bar + slide-out drawer + bottom tabs). Not loaded under
   _Layout/_DashboardLayout, so these rules aren't scoped behind
   a max-width breakpoint — the page is phone-width by design,
   but still usable (just centered, with a max content width) if
   opened on a wider screen.
============================================================ */
.mh-body{background:var(--bg);margin:0;padding-bottom:76px;overflow-x:hidden}
.mh-topbar{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  background:var(--header);color:var(--header-ink);padding:10px 14px;box-shadow:var(--shadow)}
.mh-menu-btn,.mh-support-btn{background:none;border:0;color:var(--header-ink);padding:6px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;border-radius:6px}
.mh-menu-btn:hover,.mh-support-btn:hover{background:rgba(255,255,255,.12)}
.mh-menu-btn svg,.mh-support-btn svg{width:23px;height:23px}
.mh-logo{display:flex;align-items:center;text-decoration:none;background:none;border:0;padding:0;cursor:pointer}
.mh-logo img{height:32px;display:block;border-radius:4px}

.mh-drawer-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:90}
.mh-drawer-backdrop.open{display:block}
.mh-drawer{position:fixed;top:0;left:0;bottom:0;width:82%;max-width:320px;background:var(--surface);
  z-index:95;transform:translateX(-100%);transition:transform .25s ease;overflow-y:auto;box-shadow:var(--shadow);
  display:flex;flex-direction:column}
.mh-drawer.open{transform:translateX(0)}
.mh-drawer-hd{display:flex;align-items:center;gap:10px;padding:18px 44px 18px 16px;border-bottom:1px solid var(--line);
  position:relative;flex:none}
.mh-drawer-logo{height:30px;border-radius:4px}
.mh-drawer-title{font-weight:700;font-size:14.5px;color:var(--brand)}
[data-theme="dark"] .mh-drawer-title{color:#5B8CE8}
.mh-drawer-close{position:absolute;top:10px;right:10px;background:none;border:0;font-size:28px;font-weight:800;
  color:var(--down);cursor:pointer;padding:4px;line-height:1}
.mh-drawer-close:hover{opacity:.75}
.mh-drawer-nav{display:flex;flex-direction:column;padding:8px 0}
.mh-drawer-nav a,.mh-drawer-nav button{display:block;width:100%;box-sizing:border-box;padding:13px 18px;
  color:var(--ink);text-decoration:none;font-size:14.5px;background:none;border:0;text-align:left;
  font-family:inherit;cursor:pointer}
.mh-drawer-nav a:hover,.mh-drawer-nav button:hover{background:var(--surface-2)}
.mh-link-btn{background:none;border:0;padding:0;font:inherit;cursor:pointer;width:100%}
.mh-drawer-divider{height:1px;background:var(--line);margin:8px 0}
.mh-drawer-footer{padding:14px 18px;color:var(--muted);font-size:12px;border-top:1px solid var(--line);margin-top:auto;flex:none}

.mh-main{min-height:60vh;max-width:560px;margin:0 auto}
.mh-view{display:none}
.mh-view.active{display:block}

.mh-promo{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-700) 100%);color:#fff;padding:30px 20px;text-align:center}
.mh-promo img{height:38px;margin-bottom:12px;border-radius:6px;background:#fff;padding:4px}
.mh-promo h2{margin:0 0 6px;font-size:17px;font-weight:700}
.mh-promo p{margin:0;font-size:12.5px;opacity:.92}

.mh-login-wrap{padding:0 16px 24px}
.mh-login-wrap .auth-card{max-width:none;margin:-26px auto 0;position:relative;box-shadow:var(--shadow)}

.mh-section-pad{padding:16px}
.mh-view .sec-hd{padding:16px 16px 0}

.mh-intl-table{width:100%;border-collapse:collapse;font-size:13px;background:var(--surface)}
.mh-intl-table th{text-align:right;padding:10px 12px;background:var(--surface-2);font-size:11.5px;
  text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.mh-intl-table th:first-child{text-align:left}
.mh-intl-table td{padding:10px 12px;text-align:right;border-top:1px solid var(--line)}
.mh-intl-table td:first-child{text-align:left;font-weight:700}

.mh-tabbar{display:flex}
/* .dash-tab is normally an <a> everywhere else it's used (no browser default
   chrome to fight); this page's tabs are <button>s instead, which otherwise
   pick up the browser's own border/background on top of .dash-tab's own
   styling — reset just that here rather than touching the shared base rule. */
.mh-tabbar .dash-tab{background:none;border:0;font:inherit;appearance:none}

/* #sp-search's shared .search-input rule has a 240px min-width, sized for
   SharePrice.cshtml's full desktop/tablet toolbar-row — on this page's phone
   width that plus the DSE/CSE toggle doesn't fit on one line, and overflowed
   past the viewport edge instead of wrapping (the search box's min-width
   floor wins over .toolbar-row's own flex-wrap). Stack them instead of
   trying to fit both on one row at any width. */
#mh-view-price .toolbar-row{flex-direction:column;align-items:stretch}
#mh-view-price .search-input{min-width:0;width:100%;box-sizing:border-box}
#mh-view-price .exch-switch{align-self:flex-start}

/* .about-stat (the number tiles on Index.cshtml's own About section) uses
   --hero-ink/--board-sub/--board-line — white text + a near-transparent
   white border, meant for the dark hero gradient those tiles normally sit
   on. This page's About view is a plain card, so those tokens render as
   near-invisible white-on-light instead; same content, normal-contrast
   colors for this context. */
.mh-about-stats{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.mh-about-stat{padding-top:14px;border-top:1px solid var(--line)}
.mh-about-stat b{display:block;font-family:var(--mono);font-size:22px;color:var(--brand);font-weight:600;margin-bottom:4px}
[data-theme="dark"] .mh-about-stat b{color:#5B8CE8}
.mh-about-stat span{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.06em}

@media(min-width:561px){
  .mh-drawer{max-width:360px}
}