/* ============================================================
   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:#5E6B84;
  --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:11px 18px;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 0}
.stock-panel td:first-child{padding-left:12px}
.trades-panel{max-height:450px}
.trades-panel td{padding:4px 0}
.trades-panel td:first-child{padding-left: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}
.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)}
.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}
.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}
.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}

/* Old-site-style two-column label|control table — every BO Account Opening
   section is laid out this way (label cell, control cell, label cell,
   control cell per row), matching Default2_inv_BOAccount.aspx exactly
   instead of the stacked .field layout used elsewhere in the app. */
.boa-form-table{width:100%;border-collapse:collapse;margin-bottom:18px;table-layout:fixed}
.boa-form-table td{border:1px solid var(--line);padding:10px 14px;vertical-align:top;font-size:13.5px}
.boa-form-table td.boa-lbl{width:19%;font-weight:600;color:var(--ink);background:var(--surface-2)}
.boa-form-table td.boa-ctl{width:31%}
.boa-form-table td.boa-ctl-wide{width:auto}
.boa-form-table input[type="text"],.boa-form-table input[type="email"],.boa-form-table input[type="date"],
.boa-form-table input[type="file"],.boa-form-table select,.boa-form-table textarea{
  width:100%;box-sizing:border-box;padding:7px 10px;border:1px solid var(--line);border-radius:4px;
  background:var(--surface);color:var(--ink);font-size:13.5px;font-family:inherit}
.boa-form-table textarea{resize:vertical;min-height:64px}
.boa-form-table input:disabled,.boa-form-table select:disabled,.boa-form-table input[readonly]{
  background:var(--surface-2);color:var(--muted)}
.boa-form-table input:focus,.boa-form-table select:focus,.boa-form-table textarea:focus{outline:none;border-color:var(--brand)}
.boa-hint{display:block;font-size:11.5px;margin-top:4px;color:var(--green-600)}
.boa-hint-red{color:var(--down)}
.boa-sub-grid{display:grid;grid-template-columns:1fr 1fr 1fr 90px;gap:8px;margin-top:8px}
.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
   ":focus{outline:none}" rule (higher specificity — two classes beat one)
   was silently erasing this red ring the instant the user looked at it. */
.boa-form-table .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}
@media (max-width:800px){
  .boa-form-table,.boa-form-table tbody,.boa-form-table tr,.boa-form-table td{display:block;width:auto!important}
  .boa-form-table td{border:0;border-bottom:1px solid var(--line);padding:8px 0}
  .boa-form-table td.boa-lbl{background:transparent;padding-bottom:2px;border-bottom:0}
  .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}
.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 0;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-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:14px;right:14px;background:none;border:0;font-size:20px;
    line-height:1;color:var(--ink);cursor:pointer;padding:4px;font-weight:400}
  .dash-drawer-close:hover{color:var(--brand)}
  .dash-drawer-avatar{width:60px;height:60px;border-radius:50%;object-fit:cover;display:block;
    margin-bottom:12px;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-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}
}

/* 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 ---------- */
.gt-side-row{display:flex;gap:8px;max-width:220px}
.gt-side-btn{flex:1;padding:9px 0;font:700 14px var(--sans);border-radius:6px;cursor:pointer;
  background:transparent;border:2px solid var(--line);color:var(--muted)}
.gt-side-btn.gt-side-buy.active{background:var(--green);border-color:var(--green);color:#fff}
.gt-side-btn.gt-side-sell.active{background:var(--down);border-color:var(--down);color:#fff}
.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}

.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}

/* =====================================================================
   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-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}

/* 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-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(--muted);font-size:18px;cursor:pointer;line-height:1}.it-x:hover{color:var(--down)}
.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}
@media (max-width:600px){
  .it-hdr{display:none}
  .it-mobile-header{display:block}
}