*{box-sizing:border-box;margin:0;padding:0}
:root{
  /* ══════════════════════════════════════════════
     YAHOO FINANCE THEME & DESIGN SYSTEM TOKENS (DARK MODE - PURE BLACK)
     ══════════════════════════════════════════════ */

  --bg:#000000;
  --bg2:#0A0A0A;
  --bg3:#141414;
  --bg4:#1A1A1A;
  --bg5:#262626;

  --card-shadow:0 6px 24px rgba(0,0,0,0.85);

  --text:#FFFFFF;
  --text2:#D2D8DF;
  --text3:#8F9AA6;
  --text-main:#FFFFFF;

  --border-subtle:rgba(255,255,255,0.08);

  --border:#273440;
  --border2:#354453;

  /* Modern 2026 blue identity (replaces the old purple brand color).
     --accent is for bare text/icons sitting directly on the page
     background: a brighter blue (#5B8DEF) so it stays readable on
     near-black, unlike pure #0000FF which nearly disappears there.
     --brand-primary/--accent2 are for FILLED backgrounds (buttons,
     active pills, badges) and are always paired with white text. */
  --brand-primary:#0000FF;

  --brand-soft:rgba(0,0,255,0.20);
  --accent:#5B8DEF;

  --accent-blue:#38BDF8;
  --accent-fg:#FFFFFF;

  --green:#00C805;
  --red:#FF333A;
  --amber:#FF9E00;
  --purple:#8B3DFF;
  --blue:#0F69FF;

  --cyan-electric:#00c8ff;

  --table-header-bg:#141C22;
  --table-header-text:#8F9AA6;

  --table-row-hover:rgba(0,0,255,0.08);

  --radius-md:6px;
  --radius-lg:8px;
  --radius-xl:12px;
  --radius:8px;

  --bb-grid:rgba(0,0,255,0.06);
  --tv-sell:#FF333A;--tv-blue:#0F69FF;

  --spring:.18s cubic-bezier(.34,1.56,.64,1);
  --font-display:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-mono:'Fira Code','Public Sans',ui-monospace,monospace;
}

body.theme-light {
  /* ══════════════════════════════════════════════
     YAHOO FINANCE THEME & DESIGN SYSTEM TOKENS (LIGHT MODE)
     ══════════════════════════════════════════════ */

  --bg:#F5F7FA;
  --bg2:#FFFFFF;
  --bg3:#EDF1F5;
  --bg4:#E0E4E9;
  --bg5:#CBD1D8;

  --card-shadow:0 1px 3px 0 rgba(0,0,0,0.06), 0 1px 2px -1px rgba(0,0,0,0.04);

  --text:#1D252C;
  --text2:#354453;
  --text3:#727B83;
  --text-main:#1D252C;

  /* NOTE: was #E0E4E9 here, but a second (now-removed) duplicate
     `body.theme-light {}` block further down the file redefined this same
     variable to rgba(0,0,0,0.06) and — being later in source order at
     identical specificity — silently won the cascade, so rgba(0,0,0,0.06)
     is what actually rendered. Kept that value here after consolidating
     into this single block, to avoid any visual change. */
  --border-subtle:rgba(0,0,0,0.06);

  --border:#E0E4E9;
  --border2:#CBD1D8;

  --brand-primary:#0000FF;

  --brand-soft:#E6ECFF;
  --accent:#0000FF;

  --accent-blue:#0F69FF;
  --accent-fg:#FFFFFF;

  --green:#00873C;
  --red:#D0163A;
  --amber:#B56900;
  --purple:#6001D2;
  --blue:#0F69FF;
  --cyan-electric:#0284C7;

  --table-header-bg:#EDF1F5;
  --table-header-text:#4A5560;

  --table-row-hover:#F5F7FA;

  /* Merged in from a second, now-removed duplicate `body.theme-light {}`
     block ("COMPREHENSIVE LIGHT THEME ENGINE") further down this file —
     redundant with `html,body{background:var(--bg);color:var(--text)}`
     above (var(--bg)/var(--text) already resolve to these exact values in
     this theme) since nothing more specific competes for body's
     background/color, but kept as-is (including !important) rather than
     dropped, to avoid any behavior change from this cleanup. */
  background:#F5F7FA !important;
  color:#1D252C !important;
}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,sans-serif;font-size:12.5px;overflow:hidden;-webkit-font-smoothing:antialiased}
body{background:var(--bg)}
body::before{content:'';position:fixed;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(37,99,235,.6) 40%,rgba(139,92,246,.5) 60%,transparent 100%);z-index:9999;pointer-events:none;display:block}
body::after{display:none}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#1E293B;border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:#3B82F6}
::selection{background:rgba(37,99,235,.35);color:#fff}
/* TICKER TAPE */
.ticker-wrap{background:#0D121D;border-bottom:1px solid var(--border);height:26px;overflow:hidden;display:flex;align-items:center;flex-shrink:0;position:relative}
.ticker-wrap::before,.ticker-wrap::after{content:'';position:absolute;top:0;bottom:0;width:40px;z-index:2;pointer-events:none}
.ticker-wrap::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.ticker-wrap::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.ticker-inner{display:flex;gap:0;white-space:nowrap;animation:ticker 60s linear infinite}
.ticker-inner:hover{animation-play-state:paused}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.tick-item{display:inline-flex;align-items:center;gap:5px;padding:0 14px;font-family:'Inter',sans-serif;font-size:11px;border-right:1px solid var(--border)}
.tick-sym{color:var(--text2);font-weight:700;letter-spacing:.3px}
.tick-val{color:var(--text);font-weight:600;font-family:var(--font-mono)}
.tick-chg{font-weight:700;font-family:var(--font-mono)}
.app{display:flex;flex-direction:column;height:100vh}

/* CUSTOM CHART.JS TOOLTIP (#mw-tooltip, built by customChartTooltip() in
   03-engine.js) — this element previously had NO css at all anywhere in
   the app: it was appended to <body> and positioned via inline left/top,
   but without position:fixed/absolute those are no-ops, so it just
   rendered as a plain static block at the very bottom of the page,
   invisible below the fold on every chart in the app (reported by user:
   hovering any chart showed no numbers). */
#mw-tooltip{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;opacity:0;transition:opacity .12s ease;background:var(--bg2);border:1px solid var(--border2);border-radius:8px;padding:8px 10px;font-size:11px;line-height:1.5;box-shadow:0 8px 24px rgba(0,0,0,.35);max-width:260px;color:var(--text)}
#mw-tooltip .mw-tt-title{font-weight:700;color:var(--text);margin-bottom:3px;white-space:nowrap}
#mw-tooltip .mw-tt-body{display:flex;align-items:center;gap:6px;color:var(--text2);white-space:nowrap}
#mw-tooltip .mw-tt-indicator{width:8px;height:8px;border-radius:2px;flex-shrink:0;forced-color-adjust:none}
body.theme-light #mw-tooltip{background:#fff;border-color:#E2E8F0;color:#0F172A;box-shadow:0 8px 24px rgba(0,0,0,.12)}
body.theme-light #mw-tooltip .mw-tt-title{color:#0F172A}
body.theme-light #mw-tooltip .mw-tt-body{color:#354453}

/* TOPBAR — StockMaster PRO Command Bar Style */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 14px;height:44px;background:#0E131F;border-bottom:1px solid var(--border);flex-shrink:0;z-index:100;gap:12px;position:relative}

/* BOTTOM TOOLBAR — status/jam/pengaturan/akun, dipindah dari topbar agar
   tidak menumpuk di layar sempit. Flex child biasa dari .app (bukan
   position:fixed) sehingga .main-row otomatis menyusut untuk memberi
   ruang, tanpa menutupi konten halaman. */
.bottom-toolbar{display:flex;align-items:center;justify-content:space-between;padding:0 14px;height:32px;background:#0E131F;border-top:1px solid var(--border);flex-shrink:0;gap:12px;overflow-x:auto}
body.theme-light .bottom-toolbar{background:#FFFFFF!important;border-top:1px solid #E2E8F0!important;box-shadow:0 -1px 3px rgba(0,0,0,0.05)}
.topbar::after{display:none}
.logo{font-size:15px;font-weight:800;color:#fff;letter-spacing:-0.02em;font-family:var(--font-display);flex-shrink:0;text-transform:none;text-shadow:none;display:flex;align-items:center;gap:6px}
.logo span{color:var(--accent)}

/* Toolbar icons styling matching font color in both themes */
.topbar i,
.topbar .tb-logo-icon,
.topbar button i {
  color: inherit;
}
.topbar-right button {
  color: var(--text2);
}
.topbar-right button:hover {
  color: var(--text);
}
.topbar-right button i {
  color: var(--text2);
}
.topbar-right button:hover i {
  color: var(--text);
}
.topbar .logo .tb-logo-icon {
  color: var(--accent);
}
#topbar-sync-icon {
  color: var(--text2) !important;
}
#topbar-last-sync-badge:hover #topbar-sync-icon {
  color: var(--accent) !important;
}
#btn-settings-hub {
  color: var(--text) !important;
}
#btn-settings-hub i {
  color: var(--text) !important;
}
.topbar .ti-search {
  color: var(--text3) !important;
}
.nav-wrap{flex:1;min-width:0;padding:2px 0;position:static}
.nav-wrap::-webkit-scrollbar{height:2px}
.nav-wrap::-webkit-scrollbar-thumb{background:var(--bg5)}
.nav{display:flex;gap:2px;background:transparent;padding:2px;overflow-x:auto;overflow-y:visible}
.nav button{padding:5px 11px;border-radius:6px;font-size:11.5px;font-weight:600;cursor:pointer;color:var(--text3);background:none;border:none;font-family:'Inter',sans-serif;letter-spacing:0;text-transform:none;transition:all var(--spring);white-space:nowrap}
.nav button:hover{color:#fff;background:rgba(37,99,235,.12)}
.nav button.on{background:var(--brand-primary);color:#fff;font-weight:700}
.topbar-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.live{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--green);font-family:'Inter',sans-serif;letter-spacing:.5px;font-weight:700}
.dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:blink 1.5s infinite}
@keyframes blink{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(16,185,129,.5)}50%{opacity:.5;box-shadow:0 0 0 4px rgba(16,185,129,0)}}
.ihsg-bar{display:flex;align-items:center;gap:6px;background:#080B10;border:1px solid var(--border);border-radius:6px;padding:3px 8px}
.ibar-val{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--text)}
.ibar-chg{font-family:var(--font-mono);font-size:10.5px;font-weight:700}
.rdn-bar{display:flex;align-items:center;gap:6px;background:#080B10;border:1px solid var(--border);border-radius:6px;padding:3px 8px}
.rdn-label{font-size:9px;color:var(--text3);font-family:'Inter',sans-serif;letter-spacing:.5px;text-transform:uppercase;font-weight:700}
.rdn-val{font-family:var(--font-mono);font-size:11.5px;font-weight:700;color:var(--text)}
.clock{font-family:var(--font-mono);font-size:10.5px;color:var(--text3);letter-spacing:.5px}
@media (max-width:768px){.hide-mobile{display:none!important}}

/* SETTINGS & DATA HUB TABS */
.sh-tab{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:8px;font-size:12px;font-weight:600;color:var(--text2);background:transparent;border:1px solid transparent;cursor:pointer;width:100%;text-align:left;transition:all .15s ease}
.sh-tab:hover{background:rgba(59,130,246,.08);color:#fff;border-color:rgba(59,130,246,.2)}
.sh-tab.on{background:rgba(59,130,246,.18);color:#fff;border-color:rgba(59,130,246,.45);font-weight:700}
.sh-tab i{font-size:15px;flex-shrink:0}

/* PAGES & VIEW TRANSITIONS */
.pages{flex:1;overflow:hidden;position:relative}
.page{display:none;height:100%;overflow-y:auto;padding:20px 24px;position:absolute;inset:0;background:var(--bg)}
.page.on{
  display:block;
  animation:mwViewTransition 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change:opacity, transform;
}
#page-transaksi.on{
  display:flex;
  animation:mwViewTransition 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change:opacity, transform;
}

@keyframes mwViewTransition{
  0%{
    opacity:0;
    transform:translateY(8px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}

@media (prefers-reduced-motion:reduce){
  .page.on,
  #page-transaksi.on,
  .sm-tab-panel.active,
  .v7-view.active,
  #sh-content{
    animation:none!important;
    transform:none!important;
  }
}
.ptitle{font-size:18px;font-weight:800;margin-bottom:14px;font-family:var(--font-display);letter-spacing:-.01em;color:var(--text)}
/* Page subtitle/description lines — mostly restated the obvious (what the
   title already said) across ~100 pages, adding visual clutter without
   new information. Hidden rather than deleted from markup so any specific
   one can be brought back later by scoping a `display:` override. */
.psub{display:none}

/* GRID & MASONRY */
.row4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
.row5{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:18px}
.g2{display:grid;grid-template-columns:1fr 280px;gap:16px;margin-bottom:18px}
.g2b{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;margin-bottom:18px}
/* FIX (2026-09-11, user-submitted deep-dive review — "fixed canvas
   height vs dynamic container"): .g2c and .g3 host card grids whose
   charts (e.g. #divYearChart, #perfEquityChart) use a fixed pixel
   height (185px-220px) but no width cap at all — on a genuinely
   ultrawide monitor each column stretches proportionally with the full
   viewport width while the chart height stays fixed, turning a normal
   chart into an extremely flat, hard-to-read one. max-width caps this
   at a value close to a normal 1920px viewport's content area (after
   the sidebar), so typical laptop/desktop widths are unaffected and
   only genuinely ultrawide viewports are constrained. */
.g2c{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px;max-width:1600px;margin-left:auto;margin-right:auto}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:18px;max-width:1600px;margin-left:auto;margin-right:auto}

/* ── MASONRY DASHBOARD GRID ── */
.dash-masonry-container{display:flex;flex-direction:column;gap:16px;width:100%}
.dash-masonry-columns{column-count:2;column-gap:16px;width:100%}
.dash-masonry-columns.cols-3{column-count:3;column-gap:16px}
@media (max-width:1100px){
  .dash-masonry-columns.cols-3{column-count:2}
}
@media (max-width:768px){
  .dash-masonry-columns,
  .dash-masonry-columns.cols-3{column-count:1}
  .row4{grid-template-columns:repeat(2,1fr)}
  .row5{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
  .row4,.row5{grid-template-columns:1fr}
}
.dash-masonry-item{
  break-inside:avoid-column;
  page-break-inside:avoid;
  -webkit-column-break-inside:avoid;
  margin-bottom:16px;
  display:inline-block;
  width:100%;
  vertical-align:top;
}

/* Analytics row: the two content-heavy cards (Volatilitas & Risiko,
   Komposisi & Alokasi Aset) side by side, equal-height via grid. */
.dash-analytics-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  align-items:stretch;
}
.dash-analytics-row .dash-masonry-item{margin-bottom:0}
.dash-analytics-row .dash-masonry-item > div{height:100%}

/* Asset-class row: Saham/Crypto/Reksa Dana/ETF share one compact template,
   so a plain equal-width grid packs them with no leftover space. */
.dash-assetclass-row{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
  align-items:stretch;
}
.dash-assetclass-row .dash-masonry-item{margin-bottom:0}
.dash-assetclass-row .dash-masonry-item > div{height:100%}

@media (max-width:1100px){
  .dash-assetclass-row{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width:768px){
  .dash-analytics-row{grid-template-columns:1fr}
  .dash-assetclass-row{grid-template-columns:1fr}
}
@supports (grid-template-rows: masonry){
  .dash-masonry-grid-native{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
    grid-template-rows:masonry;
    gap:16px;
    align-items:start;
  }
}

/* METRIC & CARD (BLOOMBERG / TRADINGVIEW TERMINAL) */
.metric{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 16px;
  position:relative;
  transition:all .18s ease;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
}
.metric:hover{
  border-color:rgba(37,99,235,.45);
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(0,0,0,.45);
}
.metric::before{display:none}
.mlabel{
  font-size:10px;
  color:var(--text3);
  letter-spacing:.06em;
  font-family:var(--font-display);
  margin-bottom:6px;
  font-weight:700;
  text-transform:uppercase;
}
.mval{
  font-size:19px;
  font-weight:800;
  font-family:var(--font-mono);
  line-height:1.2;
  color:#F8FAFC;
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1, "zero" 1;
}
.mval.lg{font-size:24px}
.msub{
  font-size:10.5px;
  margin-top:5px;
  font-family:'Inter',sans-serif;
  color:var(--text3);
}
.up{color:var(--green)!important;font-variant-numeric:tabular-nums}.dn{color:var(--red)!important;font-variant-numeric:tabular-nums}.neu{color:var(--text2)!important}.amb{color:var(--amber)!important;font-variant-numeric:tabular-nums}

.card{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px 18px;
  backdrop-filter:none;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
  margin-bottom:14px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.card:hover{
  border-color:rgba(37,99,235,.35);
}

/* FIX (2026-09-13, Tahap 2 standardisasi shadow card — user-reported):
   4 card shortcut Dashboard (Saham/Crypto/Reksadana/ETF, class asset-card
   + card-blue/green/purple/red di index.html) sebelumnya mengandalkan
   onmouseover/onmouseout INLINE JS untuk efek hover (glow warna + geser
   border-color) — bukan CSS :hover. Di tema gelap ini terlihat jalan
   normal, TAPI di tema terang efeknya MATI TOTAL: body.theme-light
   .asset-card{box-shadow:...!important} (ditambahkan Tahap 1 untuk
   menyamakan shadow resting-state dengan .card lain) otomatis menimpa
   box-shadow apapun yang di-set inline lewat JS juga, termasuk shadow
   hover — bukan cuma kosmetik beda, tapi hover feedback beneran hilang.
   Solusinya BUKAN melonggarkan aturan Tahap 1 (itu masih benar untuk
   resting state), tapi memindahkan hover ke rule CSS :hover di sini,
   yang spesifisitasnya (3 class-level selector) otomatis mengalahkan
   body.theme-light .asset-card (2 class + 1 elemen) — dipertegas dengan
   !important eksplisit supaya tidak ambigu. onmouseover/onmouseout di
   index.html dihapus (redundant sekarang, dan itulah sumber bug-nya). */
.asset-card:hover{ transform:translateY(-2px); }
.asset-card.card-blue:hover{ box-shadow:0 8px 24px rgba(37,99,235,.25)!important; border-color:var(--accent)!important; }
.asset-card.card-green:hover{ box-shadow:0 8px 24px rgba(0,245,155,.25)!important; border-color:var(--green)!important; }
.asset-card.card-purple:hover{ box-shadow:0 8px 24px rgba(192,132,252,.25)!important; border-color:var(--purple)!important; }
.asset-card.card-red:hover{ box-shadow:0 8px 24px rgba(255,59,92,.25)!important; border-color:var(--red)!important; }

.ctitle{
  font-size:12.5px;
  color:var(--text);
  letter-spacing:0;
  font-family:var(--font-display);
  font-weight:700;
  display:flex;
  align-items:center;
  gap:6px;
}
.cheader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
  padding-bottom:10px;
  border-bottom:1px solid var(--border);
}

/* BTN */
.btn{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:6px;font-size:11.5px;font-weight:700;cursor:pointer;border:1px solid var(--border);font-family:'Inter',sans-serif;letter-spacing:0;text-transform:none;transition:all var(--spring);background:#151C2C;color:var(--text2)}
.btn:hover{filter:brightness(1.15);transform:translateY(-1px);border-color:#3B82F6;color:#fff}
.btn:active{transform:scale(.97)}
.btn-blue{background:var(--brand-primary);color:#fff;border-color:var(--brand-primary);box-shadow:none;font-weight:700}
.btn-blue:hover{background:#1D4ED8;filter:none}
.btn-green{background:rgba(0,245,155,.15);color:var(--green);border-color:rgba(0,245,155,.35)}
.btn-red{background:rgba(255,59,92,.15);color:var(--red);border-color:rgba(255,59,92,.35)}
.btn-amber{background:rgba(255,184,0,.15);color:var(--amber);border-color:rgba(255,184,0,.35)}
.btn-purple{background:rgba(192,132,252,.15);color:var(--purple);border-color:rgba(192,132,252,.35)}
.btn-ghost{background:transparent;color:var(--text2);border-color:var(--border)}
.btn-ghost:hover{background:rgba(255,255,255,.06);color:var(--text)}
.btn-sm{padding:4px 9px;font-size:10.5px}
.btn-xs{padding:2px 7px;font-size:9.5px}
.btn-bb{background:rgba(37,99,235,.15);color:var(--accent-blue);border-color:rgba(37,99,235,.35)}
.btn-bb:hover{background:rgba(37,99,235,.25)}

/* ══════════════════════════════════════════════
   INSTITUTIONAL SIGNAL BADGES & MARKET STATES
   ══════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.b-up {
  background: rgba(0, 245, 155, 0.14);
  color: #00F59B;
  border: 1px solid rgba(0, 245, 155, 0.35);
  box-shadow: 0 0 10px rgba(0, 245, 155, 0.08);
}
.b-dn {
  background: rgba(255, 59, 92, 0.14);
  color: #FF3B5C;
  border: 1px solid rgba(255, 59, 92, 0.35);
  box-shadow: 0 0 10px rgba(255, 59, 92, 0.08);
}
.b-neu {
  background: rgba(0, 212, 255, 0.14);
  color: #00D4FF;
  border: 1px solid rgba(0, 212, 255, 0.35);
}
.b-amb {
  background: rgba(255, 184, 0, 0.14);
  color: #FFB800;
  border: 1px solid rgba(255, 184, 0, 0.35);
}
.b-pur {
  background: rgba(192, 132, 252, 0.14);
  color: #C084FC;
  border: 1px solid rgba(192, 132, 252, 0.35);
}
.b-accent {
  /* Soft blue tint background with the icon-safe accent blue as text
     (var(--accent): #5B8DEF dark / #0000FF light) rather than the raw
     brand blue, which is too dark to read at this size on a tinted
     background of itself. Small badge text (COCKPIT/RADAR/PRO tags). */
  background: rgba(0, 0, 255, 0.16);
  color: var(--accent);
  border: 1px solid rgba(0, 0, 255, 0.45);
}
.b-teal {
  background: rgba(20, 184, 166, 0.14);
  color: #2DD4BF;
  border: 1px solid rgba(20, 184, 166, 0.35);
}
.b-gray {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text2);
  border: 1px solid var(--border);
}

body.theme-light .b-up {
  background: #ECFDF5;
  color: #047857;
  border-color: #A7F3D0;
}
body.theme-light .b-dn {
  background: #FEF2F2;
  color: #B91C1C;
  border-color: #FECACA;
}
body.theme-light .b-neu {
  background: #F0F9FF;
  color: #0369A1;
  border-color: #BAE6FD;
}
body.theme-light .b-amb {
  background: #FFFBEB;
  color: #B45309;
  border-color: #FDE68A;
}

/* Institutional Signal Labels */
.sig {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: all 0.16s ease;
  white-space: nowrap;
}

.sig-buy {
  background: rgba(0, 245, 155, 0.16);
  color: #00F59B;
  border: 1px solid rgba(0, 245, 155, 0.45);
  box-shadow: 0 0 12px rgba(0, 245, 155, 0.18);
}
.sig-sell {
  background: rgba(255, 59, 92, 0.16);
  color: #FF3B5C;
  border: 1px solid rgba(255, 59, 92, 0.45);
  box-shadow: 0 0 12px rgba(255, 59, 92, 0.18);
}
.sig-hold {
  background: rgba(255, 184, 0, 0.16);
  color: #FFB800;
  border: 1px solid rgba(255, 184, 0, 0.45);
  box-shadow: 0 0 10px rgba(255, 184, 0, 0.12);
}
.sig-breakout {
  background: rgba(255, 136, 0, 0.2);
  color: #FF9800;
  border: 1px solid rgba(255, 136, 0, 0.5);
  box-shadow: 0 0 14px rgba(255, 136, 0, 0.25);
}
.sig-whale, .sig-accumulation {
  background: rgba(0, 245, 155, 0.2);
  color: #00F59B;
  border: 1px solid rgba(0, 245, 155, 0.5);
  box-shadow: 0 0 14px rgba(0, 245, 155, 0.25);
}
.sig-strong-buy {
  background: rgba(0, 212, 255, 0.2);
  color: #00D4FF;
  border: 1px solid rgba(0, 212, 255, 0.5);
  box-shadow: 0 0 14px rgba(0, 212, 255, 0.25);
}
.sig-oversold {
  background: rgba(192, 132, 252, 0.2);
  color: #D8B4FE;
  border: 1px solid rgba(192, 132, 252, 0.5);
  box-shadow: 0 0 12px rgba(192, 132, 252, 0.2);
}
.sig-squeeze {
  background: rgba(255, 184, 0, 0.2);
  color: #FCD34D;
  border: 1px solid rgba(255, 184, 0, 0.5);
}
.sig-breakdown, .sig-distribution {
  background: rgba(255, 59, 92, 0.2);
  color: #FF4D6D;
  border: 1px solid rgba(255, 59, 92, 0.5);
  box-shadow: 0 0 14px rgba(255, 59, 92, 0.25);
}

.sig:hover {
  filter: brightness(1.2);
  transform: translateY(-1px);
}

body.theme-light .sig-buy {
  background: #ECFDF5;
  color: #065F46;
  border-color: #6EE7B7;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
body.theme-light .sig-sell {
  background: #FEF2F2;
  color: #991B1B;
  border-color: #FCA5A5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
body.theme-light .sig-hold {
  background: #FFFBEB;
  color: #92400E;
  border-color: #FCD34D;
}
body.theme-light .sig-strong-buy {
  background: #F0F9FF;
  color: #075985;
  border-color: #7DD3FC;
}

@keyframes cryptoPulseRing {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}
.crypto-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  animation: cryptoPulseRing 1.8s infinite ease-in-out;
}

/* ══════════════════════════════════════════════
   FINANCIAL DATA TABLES (INSTITUTIONAL PRECISION)
   ══════════════════════════════════════════════ */
.tbl-wrap,
.table-container,
.tbl-responsive {
  position: relative;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg2);
  scrollbar-width: thin;
  scrollbar-color: #1E293B var(--bg);
}

.tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
}

.tbl thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

.tbl th {
  font-size: 10px;
  color: var(--text3);
  letter-spacing: 0.06em;
  font-family: var(--font-display);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border2);
  text-align: left;
  font-weight: 700;
  white-space: nowrap;
  background: var(--table-header-bg, #141C22);
  color: var(--table-header-text, var(--text3));
  text-transform: uppercase;
  user-select: none;
  position: sticky;
  top: 0;
  z-index: 5;
  box-shadow: 0 1px 0 var(--border);
}

body.theme-light .tbl th {
  background: var(--table-header-bg, #EDF1F5);
  color: var(--table-header-text, #4A5560);
  box-shadow: 0 1px 0 var(--border);
}

.tbl td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.04));
  font-size: 12px;
  vertical-align: middle;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text);
  transition: background 0.12s ease;
}

body.theme-light .tbl td {
  border-bottom: 1px solid var(--border-subtle, #E0E4E9);
}

.tbl tbody tr {
  transition: all 0.12s ease;
}

.tbl tbody tr:last-child td {
  border-bottom: none;
}

.tbl tbody tr:hover td {
  background: var(--table-row-hover, rgba(0, 0, 255, 0.08));
}

body.theme-light .tbl tbody tr:hover td {
  background: var(--table-row-hover, #F5F7FA);
}

/* Halaman Harga Wajar: layout 2 kolom (input kiri, panel hasil kanan).
   Kolom kanan sebelumnya fixed 340px inline — terlalu sempit untuk tabel
   2D Sensitivity Matrix (4 kolom), dilebarkan + dipindah ke class supaya
   bisa collapse ke 1 kolom di layar sempit tanpa !important hack. */
.hw-result-layout{display:grid;grid-template-columns:1fr 380px}
/* FIX (2026-09-12): classic CSS Grid "min-width:auto blowout" — tabel data
   keuangan historis 7-kolom di kolom kiri sudah dibungkus overflow-x:auto
   sendiri, tapi tanpa min-width:0 di sini, grid item kiri tetap memakai
   min-content BAWAAN (lebar penuh tabel, ~995px) sebagai lantai minimum
   kolom "1fr" — memaksa seluruh grid (termasuk kolom kanan 380px, tempat
   kartu 2D Sensitivity Matrix) meluber jauh melewati viewport dan
   ter-clip di luar layar. Ini akar masalah SEBENARNYA di balik keluhan
   "card kurang besar, rincian terpotong" — bukan cuma tabel matriks yang
   sempit di dalam kartunya sendiri. */
.hw-result-layout > :first-child{min-width:0}
@media (max-width:900px){
  .hw-result-layout{grid-template-columns:1fr}
}

/* ── .tbl-tight — tabel padat untuk kontainer sempit (modal, panel sidebar
   340px) ── .tbl th/.tbl td default: padding 8px 12px + white-space:nowrap.
   Itu pas untuk tabel data lebar biasa, tapi memaksa kolom yang isinya
   kalimat/label deskriptif (mis. "Dasar Pengenaan/Rumus", "Bear (18.8x)")
   tetap satu baris — kontainer sempit jadi meluber & konten kepotong
   (lihat INCIDENT_LOG.md 2026-09-12: modal Rincian Kalkulasi Transaksi &
   kartu 2D Sensitivity Matrix). Kelas ini mengizinkan wrap + memperkecil
   padding, TANPA mengubah tabel `.tbl` lain di app yang tidak diberi
   kelas ini secara eksplisit. */
.tbl-tight th,
.tbl-tight td {
  padding: 5px 6px !important;
  white-space: normal !important;
}

/* Monospaced Numeric & Text Alignment Utilities */
.tbl th.text-right,
.tbl td.text-right,
.tbl th.num,
.tbl td.num,
.tbl-num-right {
  text-align: right !important;
}

.tbl th.text-center,
.tbl td.text-center,
.tbl-center {
  text-align: center !important;
}

.tbl th.text-left,
.tbl td.text-left {
  text-align: left !important;
}

.mono, .tbl td.mono, .tbl td.num, .tbl .mono, .tbl-num, .tick-val, .mval, .rdn-val, .ibar-val, .taxrow, .tp {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
}

/* Sticky Ticker Column (Freeze Left) */
.tbl-freeze-col th:first-child,
.tbl-freeze-col td:first-child,
.tbl th.tbl-sticky-left,
.tbl td.tbl-sticky-left {
  position: sticky;
  left: 0;
  z-index: 6;
  background: #0D121D;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.35);
}

body.theme-light .tbl-freeze-col th:first-child,
body.theme-light .tbl-freeze-col td:first-child,
body.theme-light .tbl th.tbl-sticky-left,
body.theme-light .tbl td.tbl-sticky-left {
  background: #FFFFFF;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.06);
}

.tbl-freeze-col tbody tr:hover td:first-child,
.tbl tbody tr:hover td.tbl-sticky-left {
  background: #131A2B !important;
}

body.theme-light .tbl-freeze-col tbody tr:hover td:first-child,
body.theme-light .tbl tbody tr:hover td.tbl-sticky-left {
  background: #F8FAFC !important;
}

/* Sticky Action Column (Freeze Right) — mirrors .tbl-sticky-left above.
   Added for the "Aksi" icon-button column in Riwayat Transaksi Saham and
   Mutasi RDN tables (found via deep-dive review, 2026-09-11, not a
   user-reported bug): on a horizontally scrolled table at medium screen
   widths, the edit/delete/detail buttons in the rightmost column used to
   scroll out of view along with the rest of the row, forcing the user to
   scroll right just to reach them and then back left to see which row
   they were acting on. */
.tbl th.tbl-sticky-right,
.tbl td.tbl-sticky-right {
  position: sticky;
  right: 0;
  z-index: 6;
  background: #0D121D;
  box-shadow: -2px 0 6px rgba(0, 0, 0, 0.35);
}

body.theme-light .tbl th.tbl-sticky-right,
body.theme-light .tbl td.tbl-sticky-right {
  background: #FFFFFF;
  box-shadow: -2px 0 6px rgba(0, 0, 0, 0.06);
}

.tbl tbody tr:hover td.tbl-sticky-right {
  background: #131A2B !important;
}

body.theme-light .tbl tbody tr:hover td.tbl-sticky-right {
  background: #F8FAFC !important;
}

/* Portfolio table "Alert" button, reveal-on-row-hover (found via
   deep-dive review, 2026-09-11, not a user-reported bug) — the Portfolio
   table (#porto-tbody) has no dedicated Aksi column, so this button sits
   inline inside the sticky-left ticker cell alongside the logo and
   ticker symbol, permanently widening that pinned column and crowding
   the ticker on every row even when the user has no intent to set an
   alert. Collapsed to zero width by default and revealed on row hover —
   scoped to `@media (hover: hover)` (devices with an actual pointer that
   can hover, i.e. mouse/trackpad) so touch devices, which have no hover
   state to reveal it with, keep the button always visible exactly as
   before this change. Uses opacity+width, NOT display:none/visibility:
   hidden — both of those also remove an element from the keyboard tab
   order, which would make this unreachable without a mouse; opacity/width
   keep it focusable, so Tab still reaches it and :focus-visible reveals
   it, same as a mouse hover does. */
@media (hover: hover) {
  .tbl tbody tr .porto-alert-btn {
    display: inline-flex;
    width: 0;
    padding: 1px 0;
    border-width: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
  }
  .tbl tbody tr:hover .porto-alert-btn,
  .tbl tbody tr .porto-alert-btn:focus-visible {
    width: auto;
    padding: 1px 4px;
    opacity: 1;
    overflow: visible;
    pointer-events: auto;
  }
}

/* Micro Data Bars & Allocation Heatmaps */
.tbl-alloc-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 80px;
}
.tbl-alloc-bar {
  height: 4px;
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.tbl-alloc-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.35s ease;
}

/* Compact Table Variant */
.tbl-dense th {
  padding: 6px 8px;
  font-size: 9.5px;
}
.tbl-dense td {
  padding: 5px 8px;
  font-size: 11px;
}

/* FORM */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fg{display:flex;flex-direction:column;gap:5px}
.flabel{font-size:10px;color:var(--text3);font-family:'Inter',sans-serif;letter-spacing:0.04em;font-weight:700;text-transform:uppercase}
.finput{background:#080B10;border:1px solid var(--border);border-radius:6px;padding:7px 10px;color:#fff;font-family:'Inter',sans-serif;font-size:12px;outline:none;transition:border .15s;width:100%}
.finput:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(37,99,235,.2)}
.finput option{background:#101522;color:#fff}
.fsel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23787b86' d='M5 6L0 0h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;-webkit-appearance:none;appearance:none}
.ffull{grid-column:1/-1}
.ftri{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}

/* ══════════════════════════════════════════════
   GLOBAL INLINE SEARCH & FILTER TOOLBAR
   ══════════════════════════════════════════════ */
.filter-toolbar,
.tbl-filter-bar,
.filter-bar-inline {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 12px;
}

.filter-toolbar input.finput,
.tbl-filter-bar input.finput,
.filter-bar-inline input.finput {
  width: auto;
  min-width: 150px;
  max-width: 260px;
  flex: 1 1 180px;
  padding: 5px 10px;
  font-size: 11.5px;
  border-radius: 7px;
}

.filter-toolbar select.finput,
.tbl-filter-bar select.finput,
.filter-bar-inline select.finput {
  width: auto;
  min-width: 120px;
  max-width: 200px;
  flex: 0 0 auto;
  padding: 5px 26px 5px 9px;
  font-size: 11.5px;
  border-radius: 7px;
}

.filter-toolbar .btn,
.tbl-filter-bar .btn,
.filter-bar-inline .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.filter-toolbar .filter-count,
.tbl-filter-bar .filter-count,
.filter-bar-inline .filter-count {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--text3);
  white-space: nowrap;
}

@media (max-width: 768px) {
  .filter-toolbar,
  .tbl-filter-bar,
  .filter-bar-inline {
    flex-wrap: wrap;
    gap: 6px;
  }
  .filter-toolbar input.finput,
  .tbl-filter-bar input.finput,
  .filter-bar-inline input.finput {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    flex: 1 1 100%;
  }
  .filter-toolbar select.finput,
  .tbl-filter-bar select.finput,
  .filter-bar-inline select.finput {
    flex: 1 1 calc(50% - 6px);
    min-width: 120px;
  }
}

/* ══════════════════════════════════════════════
   INSTITUTIONAL MODAL & DRAWER SUITE
   ══════════════════════════════════════════════ */
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(4, 7, 15, 0.82);
  z-index: 999;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 16px;
}
.overlay.on {
  display: flex;
}

.modal {
  background: #0E1424;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(0, 212, 255, 0.22);
  border-radius: 14px;
  padding: 22px 26px;
  width: 560px;
  max-width: 96vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.06);
  animation: mwModalIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform-origin: center center;
}

body.theme-light .modal {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

@keyframes mwModalIn {
  0% {
    opacity: 0;
    transform: scale(0.96) translateY(12px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.mhead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  gap: 12px;
}

.mtitle {
  font-size: 15px;
  font-weight: 800;
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.01em;
  color: #F8FAFC;
  display: flex;
  align-items: center;
  gap: 8px;
}

body.theme-light .mtitle {
  color: #0F172A;
}

.mclose {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--text3);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 7px;
  font-family: inherit;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mclose:hover {
  color: #FFFFFF;
  background: rgba(239, 68, 68, 0.2);
  border-color: #EF4444;
  transform: scale(1.05);
}

/* Institutional Side-Drawer Panel */
.drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(4, 7, 15, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9998;
  justify-content: flex-end;
}

.drawer-overlay.on {
  display: flex;
}

.drawer-panel {
  width: 520px;
  max-width: 94vw;
  height: 100vh;
  background: #0E1424;
  border-left: 1px solid rgba(0, 212, 255, 0.25);
  box-shadow: -12px 0 50px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  animation: mwDrawerSlideIn 0.24s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

body.theme-light .drawer-panel {
  background: #FFFFFF;
  border-left: 1px solid #CBD5E1;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.12);
}

@keyframes mwDrawerSlideIn {
  0% { transform: translateX(100%); }
  100% { transform: translateX(0); }
}

.drawer-head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.drawer-body {
  padding: 20px 22px;
  flex: 1;
  overflow-y: auto;
}

.drawer-foot {
  padding: 16px 22px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  background: var(--bg3);
  flex-shrink: 0;
}

/* TAX BOX */
.taxbox{background:var(--bg3);border:1px solid var(--border);border-radius:5px;padding:10px;margin-top:10px}
.taxrow{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;padding:3px 0;color:var(--text2)}
.taxrow.tot{border-top:1px solid var(--border2);margin-top:5px;padding-top:7px;font-weight:700;font-size:12px;color:var(--text)}

/* TP & STOCK LOGO */
.tp{display:inline-flex;align-items:center;background:var(--bg4);border:1px solid rgba(41,98,255,.25);border-radius:3px;padding:2px 8px;font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--blue);letter-spacing:.3px}
.stock-cell{display:inline-flex;align-items:center;gap:6px}
.stock-logo-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;background:#ffffff;border:1px solid rgba(255,255,255,.14);border-radius:4px;overflow:hidden;flex-shrink:0;box-shadow:0 1px 2px rgba(0,0,0,.25);vertical-align:middle}
.stock-logo-img{width:100%;height:100%;object-fit:contain;padding:1.5px;display:block;background:#ffffff;border-radius:3px}
.stock-logo-fallback{display:none;width:100%;height:100%;align-items:center;justify-content:center;font-size:8.5px;font-weight:800;color:#0f172a;background:#cbd5e1;font-family:var(--font-mono);letter-spacing:-.3px;line-height:1;border-radius:3px}

/* PROGRESS */
.prog{height:4px;background:var(--bg5);border-radius:2px;overflow:hidden;margin-top:4px}
.progf{height:100%;border-radius:2px;transition:width .5s}

/* CHART */
.cw{position:relative}
.cdset{display:flex;flex-direction:column;gap:3px}.cdset span{font-size:10px;color:var(--text3);letter-spacing:0;font-family:'Inter',sans-serif}.cdset input{background:var(--bg3);border:1px solid var(--border2);border-radius:4px;padding:5px 8px;color:var(--text);font-family:'Inter',sans-serif;font-size:12px;outline:none}.cdset input:focus{border-color:var(--blue)}

/* PBTN */
.pbtn{padding:3px 10px;border-radius:4px;font-size:11px;cursor:pointer;color:var(--text3);border:1px solid var(--border);background:transparent;font-family:'Inter',sans-serif;letter-spacing:0;transition:all .12s}
.pbtn:hover{color:var(--text);border-color:var(--border2)}
.pbtn.on{background:rgba(41,98,255,.15);color:var(--blue);border-color:rgba(41,98,255,.4)}

/* ALERT */
.alert{padding:10px 14px;border-radius:5px;font-size:12px;margin-bottom:10px;border:1px solid;font-family:'Inter',sans-serif}
.alert-info{background:rgba(41,98,255,.06);border-color:rgba(41,98,255,.2);color:#7aa8ff}
.alert-warn{background:rgba(247,166,0,.06);border-color:rgba(247,166,0,.2);color:var(--amber)}
.alert-ok{background:rgba(8,153,129,.06);border-color:rgba(8,153,129,.2);color:var(--green)}

/* LOADING BANNER — status pengambilan harga live (dipakai Dashboard & Portofolio) */
.load-banner{display:none;align-items:center;gap:9px;padding:8px 14px;border-radius:7px;font-size:11.5px;margin-bottom:11px;border:1px solid}
.load-banner.on{display:flex}
.load-banner.st-loading{background:rgba(255,193,7,.07);border-color:rgba(255,193,7,.22);color:var(--amber)}
.load-banner.st-error{background:rgba(255,61,90,.07);border-color:rgba(255,61,90,.22);color:var(--red)}
.load-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0;animation:load-pulse 1.1s ease-in-out infinite}
@keyframes load-pulse{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){
  .load-dot{animation:none}
}

/* RISK GAUGE */
.gauge-wrap{display:flex;flex-direction:column;align-items:center;padding:8px 0}
.gauge-label{font-size:10px;font-family:var(--font-mono);margin-top:6px;font-weight:700}

/* RDN ITEM */
.rdn-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--border)}
.rdn-row:last-child{border-bottom:none}

/* SECTOR BADGE */
.sec-dot{width:7px;height:7px;border-radius:1px;flex-shrink:0;display:inline-block}

/* SEPARATOR */
.sep{height:1px;background:var(--border);margin:10px 0}
/* Nav Dropdown */
.nav-dropdown{position:relative;display:inline-flex;align-items:center}
.nav-dd-btn{padding:6px 13px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;color:var(--text3);background:none;border:none;font-family:'Inter',sans-serif;letter-spacing:0;text-transform:none;transition:all var(--spring);white-space:nowrap}
.nav-dd-btn:hover{color:var(--text);background:rgba(255,255,255,.06)}
.nav-dd-btn.on{background:rgba(47,106,243,.15);color:var(--accent)}
.nav-dd-menu{display:none;position:fixed;top:52px;background:var(--bg3);backdrop-filter:blur(20px);border:1px solid var(--border2);border-radius:10px;padding:5px;min-width:170px;z-index:9999;box-shadow:0 8px 40px rgba(0,0,0,.6),0 0 0 1px rgba(47,106,243,.08)}
.nav-dd-menu.open{display:flex;flex-direction:column}
.nav-dd-menu button{padding:8px 13px;border-radius:9px;font-size:12px;font-weight:400;cursor:pointer;color:var(--text2);background:none;border:none;font-family:'Inter',sans-serif;text-align:left;transition:all .12s;white-space:nowrap;width:100%;letter-spacing:0}
.nav-dd-menu button:hover{background:rgba(47,106,243,.1);color:var(--text)}

.tab{padding:6px 14px;font-size:12px;font-weight:500;cursor:pointer;color:var(--text3);border:none;border-bottom:2px solid transparent;background:none;font-family:'Inter',sans-serif;white-space:nowrap;transition:all .12s;letter-spacing:0}
.tab:hover:not(.on){color:var(--text2)}
.tab.on{color:var(--accent);border-bottom-color:var(--accent)}
/* FlowScan heatmap cell */
.fs-hm-cell{border-radius:6px;padding:11px 9px;cursor:pointer;transition:transform .12s;border:1px solid transparent}
.fs-hm-cell:hover{transform:translateY(-2px)}
.fs-hm-acc{background:rgba(8,153,129,.1);border-color:rgba(8,153,129,.25)}
.fs-hm-dist{background:rgba(242,54,69,.1);border-color:rgba(242,54,69,.25)}
.fs-hm-neut{background:var(--bg2);border-color:var(--border)}
/* FlowScan alert item */
.al-item{display:flex;gap:10px;padding:10px 12px;background:var(--bg3);border-radius:5px;border:1px solid var(--border);align-items:flex-start}
.al-ico{width:26px;height:26px;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px}
.al-a{background:rgba(8,153,129,.12);color:var(--green)}
.al-d{background:rgba(242,54,69,.12);color:var(--red)}
.al-n{background:rgba(41,98,255,.12);color:var(--blue)}
/* WL item */
.wl-chip{padding:4px 10px;border-radius:4px;font-size:11px;background:var(--bg3);border:1px solid var(--border);color:var(--text2);cursor:pointer;font-family:'Inter',sans-serif;transition:all .12s;letter-spacing:0}
.wl-chip:hover{border-color:rgba(41,98,255,.4);color:var(--blue)}

/* ══════════════ AUTH SYSTEM ══════════════ */
#auth-overlay{position:fixed;inset:0;z-index:9999;background:
    radial-gradient(ellipse 800px 500px at 85% -5%, rgba(47,106,243,.1) 0%, transparent 60%),
    radial-gradient(ellipse 600px 400px at -5% 100%, rgba(128,112,210,.08) 0%, transparent 55%),
    var(--bg);display:flex;align-items:center;justify-content:center;flex-direction:column}
#auth-overlay.hidden{display:none}
.auth-box{background:var(--bg3);backdrop-filter:blur(20px);border:1px solid var(--border2);border-radius:14px;padding:36px 40px;width:380px;max-width:92vw;box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 1px rgba(47,106,243,.08)}
.auth-logo{font-size:22px;font-weight:700;color:var(--text);letter-spacing:-.01em;font-family:var(--font-display);text-align:center;margin-bottom:4px;text-shadow:none}
.auth-logo span{color:var(--text3)}
.auth-sub{text-align:center;font-size:12px;color:var(--text3);font-family:'Inter',sans-serif;margin-bottom:28px}
.auth-field{margin-bottom:14px}
.auth-field label{display:block;font-size:11px;font-weight:500;color:var(--text2);margin-bottom:6px;font-family:'Inter',sans-serif}
.auth-field input{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--border2);border-radius:9px;padding:10px 13px;color:var(--text);font-family:'Inter',sans-serif;font-size:13px;outline:none;box-sizing:border-box;transition:border-color .15s}
.auth-field input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(47,106,243,.15)}
.auth-btn{width:100%;padding:11px;background:var(--brand-primary);border:none;border-radius:var(--radius);color:var(--accent-fg);font-weight:600;font-size:13px;font-family:'Inter',sans-serif;cursor:pointer;transition:all var(--spring);margin-top:6px;letter-spacing:0;box-shadow:none}
.auth-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.auth-btn:disabled{opacity:.4;cursor:not-allowed}
.auth-err{background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.25);border-radius:9px;padding:8px 11px;font-size:12px;color:var(--red);margin-bottom:12px;display:none;font-family:'Inter',sans-serif}
.auth-info{text-align:center;font-size:11px;color:var(--text3);margin-top:16px;line-height:1.6;font-family:'Inter',sans-serif}
.auth-lock{text-align:center;padding:12px;background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.2);border-radius:9px;color:var(--red);font-size:12px;margin-bottom:14px;display:none;font-family:'Inter',sans-serif}
/* Session info in topbar */
#session-info{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text3);font-family:'Inter',sans-serif}
#session-user{color:var(--accent);font-weight:600}
.auth-timeout-bar{height:2px;background:var(--bg3);border-radius:0;margin-top:8px;overflow:hidden}
.auth-timeout-fill{height:100%;background:var(--brand-primary);border-radius:0;transition:width 1s linear}

/* ── SIDEBAR NAV (Institutional Terminal Style) ── */
.main-row{flex:1;display:flex;min-height:0;overflow:hidden}
.side-nav{
  width:250px;
  min-width:250px;
  max-width:250px;
  flex-shrink:0;
  background:var(--bg2);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  padding:0;
  overflow-x:hidden;
  user-select:none;
  transition:width .22s cubic-bezier(0.16, 1, 0.3, 1), background .2s ease;
  z-index: 20;
}
.side-nav button{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  text-align:left;
  padding:7px 10px;
  border-radius:6px;
  font-size:11.5px;
  font-weight:600;
  cursor:pointer;
  color:var(--text2);
  background:none;
  border:1px solid transparent;
  font-family:'Inter',sans-serif;
  transition:all var(--spring);
  white-space:nowrap;
  overflow:visible;
  position: relative;
}
.side-nav button i.ti{
  font-size:15px;
  flex-shrink:0;
  width:18px;
  text-align:center;
  color:#FFFFFF;
  transition:color var(--spring), transform var(--spring);
}
.side-label{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex:1;
  min-width:0;
}
.side-nav button .badge{
  margin-left:auto;
  flex-shrink:0;
  white-space:nowrap;
}
.side-nav button:hover{
  color:var(--text);
  background:var(--brand-soft);
  border-color:rgba(0,0,255,.3);
}
.side-nav button:hover i.ti{
  color: #FFFFFF;
  transform:scale(1.08);
}
/* Active — solid / highlighted card with indicator */
.side-nav button.on{
  background:var(--brand-soft);
  color:var(--text);
  font-weight:700;
  border-color:var(--accent);
  box-shadow:inset 3px 0 0 var(--accent);
}
.side-nav button.on i.ti{
  color: #FFFFFF;
}
.nav-due-badge{
  margin-left:auto;
  flex-shrink:0;
  background:var(--red);
  color:#fff;
  font-size:8.5px;
  font-weight:700;
  line-height:1;
  padding:2px 5px;
  border-radius:10px;
  font-family:var(--font-mono);
  min-width:14px;
  text-align:center;
}
.side-nav .badge{
  flex-shrink:0;
  white-space:nowrap;
  margin-left:auto;
  font-size:8.5px;
  padding:1px 6px;
}

/* ── Toolbar sidebar: tombol ciutkan + kolom cari ── */
.side-toolbar{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  flex-shrink:0;
  background:var(--bg3);
  border-bottom:1px solid var(--border);
}
/* FIX: `.side-nav button{width:100%;...}` (below) has HIGHER specificity
   (one class + one element, 0-1-1) than `.side-collapse-btn` alone (one
   class, 0-1-0) — and .side-collapse-btn IS a <button> inside .side-nav,
   so that generic rule (meant for the actual nav item buttons like
   "Market Pulse") was winning and stretching this icon-only button to
   width:100% of the toolbar (measured ~229px instead of the intended
   28px), squeezing the search input next to it down to ~18px — visually
   just an icon + text cursor with the "Cari fitur (Ctrl+K)..." placeholder
   and Ctrl-K badge invisible. Scoped selector below (.side-toolbar
   .side-collapse-btn = 0-2-0) now reliably outranks .side-nav button
   regardless of source order. */
.side-toolbar .side-collapse-btn{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:6px;
  background:var(--bg2);
  border:1px solid var(--border);
  color:var(--text3);
  cursor:pointer;
  font-size:14px;
  transition:all .15s;
}
.side-toolbar .side-collapse-btn:hover{
  color:var(--text);
  background:var(--bg4);
  border-color:var(--accent);
}
.side-search-wrap{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:6px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:6px;
  padding:4px 8px;
  overflow:hidden;
}
.side-search-wrap i.ti{
  font-size:12px;
  color:var(--text3);
  flex-shrink:0;
}
.side-search-input{
  flex:1;
  min-width:0;
  background:none;
  border:none;
  outline:none;
  color:var(--text);
  font-size:11px;
  font-family:'Inter',sans-serif;
}
.side-search-input::placeholder{
  color:var(--text3);
}
.side-kbd{
  flex-shrink:0;
  font-size:8.5px;
  font-family:var(--font-mono);
  color:var(--text3);
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:3px;
  padding:1px 4px;
  letter-spacing:.02em;
}

/* ── Area scroll (daftar menu) ── */
.side-nav-scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:8px 8px 24px;
}
.side-nav-scroll::-webkit-scrollbar{
  width:3px;
}

/* ── Sidebar groups ── */
.side-group{
  margin-top:4px;
}
.side-sec-toggle{
  display:flex!important;
  align-items:center;
  gap:7px;
  width:100%;
  padding:6px 8px!important;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text3)!important;
  background:none;
  border:none;
  cursor:pointer;
  border-radius:6px;
  user-select:none;
  transition:all .15s ease;
}
.side-sec-toggle:hover{
  color:var(--text2)!important;
  background:rgba(255,255,255,.04);
}
.side-sec-toggle i.ti{
  font-size:13px;
  width:16px;
  text-align:center;
  flex-shrink:0;
  pointer-events:none;
}
.side-sec-toggle .side-label{
  flex:1;
  text-align:left;
  pointer-events:none;
}
.side-chevron{
  font-size:8.5px;
  transition:transform .2s ease;
  color:var(--text3);
  margin-left:auto;
  flex-shrink:0;
  pointer-events:none;
}
.side-group.open .side-chevron{
  transform:rotate(180deg);
}
.side-group-items{
  display:none;
  margin-left:8px;
  padding-left:6px;
  border-left:1px solid rgba(255,255,255,0.07);
}
.side-group.open .side-group-items{
  display:block;
}
.side-group.has-active .side-sec-toggle{
  color:var(--accent)!important;
}
.side-group.has-active .side-sec-toggle i.ti{
  color:var(--accent);
}

/* ── Ciutkan sidebar (desktop) ── */
.side-nav.collapsed{
  width:56px;
  min-width:56px;
  max-width:56px;
}
.side-nav.collapsed .side-label,
.side-nav.collapsed .side-chevron,
.side-nav.collapsed .side-search-wrap,
.side-nav.collapsed .nav-due-badge,
.side-nav.collapsed .badge{
  display:none;
}
.side-nav.collapsed .side-toolbar{
  justify-content:center;
  padding:8px 4px;
}
.side-nav.collapsed .side-group-items{
  margin-left:0;
  padding-left:0;
  border-left:none;
}
.side-nav.collapsed .side-nav button{
  justify-content:center;
  padding:8px 4px;
}
.side-nav.collapsed .side-sec-toggle{
  justify-content:center;
  padding:8px 4px!important;
}

/* ── Filter pencarian sidebar ── */
.side-nav button.side-hit-hidden{
  display:none!important;
}

@media(max-width:900px){
  .side-nav:not(.collapsed){width:52px;min-width:52px;max-width:52px}
  .side-nav:not(.collapsed) .side-label,.side-nav:not(.collapsed) .side-chevron,.side-nav:not(.collapsed) .side-search-wrap,.side-nav:not(.collapsed) .nav-due-badge,.side-nav:not(.collapsed) .badge{display:none}
  .side-nav:not(.collapsed) .side-toolbar{justify-content:center}
  .side-nav:not(.collapsed) .side-group-items{max-height:none!important;margin-left:0;padding-left:0;border-left:none}
  .side-nav:not(.collapsed) .side-nav button{justify-content:center;padding:7px 4px}
  .side-nav:not(.collapsed) .side-sec-toggle{justify-content:center;padding:7px 4px!important}
}

/* ══════════════════════════════════════════════
   READABILITY OVERRIDES — Inter & Fira Code
   ══════════════════════════════════════════════ */
html,body{font-size:12.5px}
.btn{font-size:11.5px;padding:6px 12px}
.btn-sm{font-size:10.5px;padding:4px 9px}
.btn-xs{font-size:9.5px;padding:3px 7px}
/* FIX (2026-09-11, found via deep-dive review, not a user-reported bug):
   .badge is reused for both plain-text labels (e.g. "BUY", "RADAR",
   sector names) and live-updating numeric content (e.g. #vol-risk-badge's
   volatility percentage in 05-assets.js). It inherits the page's default
   proportional 'Inter' font with no digit-width normalization, so a
   badge showing a live percentage would visually shift width as its
   digits changed (e.g. "9.5%" -> "10.2%"). tabular-nums only affects
   how numeral glyphs are shaped/spaced — it has zero visual effect on
   non-numeric text, so this is safe to apply to every badge, not just
   the numeric ones. */
.badge{font-size:10px;padding:2px 7px;font-variant-numeric:tabular-nums}
.tbl th{font-size:10px;padding:7px 10px}
.tbl td{font-size:12px;padding:8px 10px}
.finput{font-size:12px;padding:7px 10px}
.tick-item{font-size:11px;padding:0 14px}
.ticker-wrap{height:26px}
.clock{font-size:11px}
.rdn-val{font-size:11.5px}
.ibar-val{font-size:12px}
.ibar-chg{font-size:11.5px}
.side-nav button{font-size:12px;padding:7px 10px}
.side-sec-toggle{font-size:10px!important}
.side-group-items button{padding-left:10px!important}
.pbtn{font-size:12px;padding:4px 12px}

/* Kontrol ukuran tampilan (A− / A / A+) */
.zoom-ctl{display:flex;gap:2px;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:2px}
.zoom-ctl button{background:none;border:none;color:var(--text2);cursor:pointer;font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;font-family:'Inter',sans-serif;line-height:1.3}
.zoom-ctl button:hover{background:var(--brand-soft);color:var(--accent)}

/* ══════════════════════════════════════════════
   RESPONSIVE — mobile (≤640px)
   Sidebar jadi drawer off-canvas + grid ditumpuk 1 kolom.
   ══════════════════════════════════════════════ */
.hamburger-btn{display:none;background:none;border:none;color:var(--text2);cursor:pointer;font-size:18px;padding:4px 8px;line-height:1;border-radius:6px}
.hamburger-btn:hover{background:rgba(255,255,255,.06);color:var(--text)}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:199}
.sidebar-backdrop.on{display:block}

@media(max-width:640px){
  .hamburger-btn{display:inline-flex;align-items:center}
  .logo span[style*="font-size:11px"]{display:none} /* sembunyikan "PRO" biar logo muat */
  .topbar-right>*:not(#session-info):not(.hamburger-btn){display:none}
  #session-info{display:flex!important}
  #session-info span#session-user{display:none} /* hemat ruang, cukup tombol Keluar */
  .ticker-wrap{display:none} /* ticker tape memakan ruang vertikal berharga di layar kecil */

  .main-row{position:relative}
  .side-nav{position:fixed;top:0;left:0;bottom:0;z-index:200;transform:translateX(-100%);transition:transform .25s ease;box-shadow:4px 0 24px rgba(0,0,0,.4);width:240px!important}
  .side-nav.open{transform:translateX(0)}
  .side-nav button{font-size:14px!important;padding:10px 11px!important}

  /* Tumpuk semua grid multi-kolom reusable jadi 1 kolom */
  .row3,.row4,.row5,.g2,.g2b,.g2c,.g3,.fgrid,.w-frow{grid-template-columns:1fr!important}

  /* Grid Dashboard yang dibuat lewat inline style (perlu class penanda + !important utk override) */
  .dash-hero-row,.dash-asset-row,.dash-chart-row,.dash-table-row,.dash-bottom-row{grid-template-columns:1fr!important}

  .ptitle{font-size:17px!important}
  .mval.lg{font-size:22px!important}
  .card{padding:12px!important}
  .metric{padding:11px 12px!important}
}

/* ══════════════════════════════════════════════
   EXECUTIVE VIEW & PRO TERMINAL TOGGLE
   ══════════════════════════════════════════════ */
.view-mode-toggle{display:inline-flex;align-items:center;background:var(--bg);border:1px solid var(--border2);border-radius:8px;padding:2px;gap:2px}
.view-mode-toggle button{background:transparent;border:none;color:var(--text3);font-size:11px;padding:3px 9px;border-radius:6px;cursor:pointer;font-weight:600;font-family:'Inter',sans-serif;transition:all .15s}
.view-mode-toggle button.on{background:var(--brand-primary);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2)}

/* Sembunyikan elemen terlalu teknis di mode executive */
body.mode-executive .dash-chart-row,
body.mode-executive #hw-steps-card,
body.mode-executive #hw-chart-card-eps,
body.mode-executive #hw-chart-card-eq,
body.mode-executive #hw-multimodel-card,
body.mode-executive #dash-ai-section {
  display: none !important;
}

body.mode-executive .metric .mval {
  font-size: 24px;
}

/* ══════════════════════════════════════════════
   CETAK / SIMPAN PDF — dipakai halaman Pajak & PPh
   serta Investor Tear Sheet (window.print())
   ══════════════════════════════════════════════ */
.print-only{display:none}
@media print{
  body{background:#fff!important}
  body::before,body::after{display:none!important}
  .topbar,.ticker-wrap,.side-nav,.hamburger-btn,.sidebar-backdrop,.load-banner,#schema-warn-banner,.no-print,button,.btn{display:none!important}
  .print-only{display:block!important}
  .app{height:auto!important;display:block!important}
  .main-row{display:block!important}
  .pages{overflow:visible!important;position:static!important}
  .page{position:static!important;display:none!important;overflow:visible!important;height:auto!important;padding:0!important}
  .page.on{display:block!important}
  .modal{border:none!important;box-shadow:none!important;background:#fff!important;max-width:100%!important;width:100%!important;padding:0!important}
  .overlay{position:static!important;background:#fff!important;display:block!important;padding:0!important}
  .mhead,.mclose{display:none!important}
  .tear-sheet-container{padding:0!important;border:none!important;width:100%!important}
  .card{background:#fff!important;border:1px solid #ccc!important;backdrop-filter:none!important;break-inside:avoid;page-break-inside:avoid}
  .metric{background:#f7f7f9!important;border:1px solid #ddd!important}
  .row4{display:grid!important;grid-template-columns:repeat(4,1fr)!important}
  .ptitle,.psub,h1{color:#111!important}
  .mlabel,.msub,.ctitle{color:#555!important}
  .mval{color:#111!important}
  .up{color:#0a7a44!important}
  .dn{color:#c0392b!important}
  .amb{color:#a5720e!important}
  .tbl{color:#111!important}
  .tbl th{color:#555!important;background:#f0f0f2!important;border-bottom:1px solid #ccc!important}
  .tbl td{border-bottom:1px solid #eee!important}
  .badge{background:#eee!important;color:#333!important;border:1px solid #ccc!important}
}

/* ══════════════════════════════════════════════
   STOCKMASTER PRO: INTEGRATED FUNDAMENTAL & TEKNIKAL
   Palette & Layout inspired by StockMaster PRO reference
   ══════════════════════════════════════════════ */
.sm-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: calc(100vh - 120px);
  background: #0B0F19;
  color: #F1F5F9;
  border-radius: 12px;
  border: 1px solid #232F4D;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  margin-bottom: 20px;
}
.sm-suite-header {
  background: #131B2E;
  border-bottom: 1px solid #232F4D;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.sm-suite-brand {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.3px;
}
.sm-suite-brand span { color: #fff; }
.sm-suite-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sm-aside {
  display: none;
}
.sm-brand {
  display: none;
}
.sm-nav-cat {
  display: none;
}
.sm-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  color: #94A3B8;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
}
.sm-nav-item:hover {
  background: rgba(59, 130, 246, 0.15);
  color: #fff;
  border-color: rgba(59, 130, 246, 0.35);
  transform: translateY(-1px);
}
.sm-nav-item.active,
.sm-nav-item.active-tech {
  background: var(--brand-primary);
  color: #fff;
  font-weight: 700;
  border-color: var(--accent);
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.35);
}

.sm-main {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: #0B0F19;
}
.sm-top-bar {
  background: #131B2E;
  border: 1px solid #232F4D;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.sm-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sm-input-group label {
  font-size: 10px;
  font-weight: 700;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sm-input {
  background: #0B0F19;
  border: 1px solid #232F4D;
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  outline: none;
  text-transform: uppercase;
  font-weight: 700;
  width: 180px;
  font-family: 'Fira Code', monospace;
  transition: border-color 0.2s;
}
.sm-input:focus { border-color: #3B82F6; }

.sm-btn {
  background: #3B82F6;
  border: none;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: 0.2s;
  font-family: 'Inter', sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sm-btn:hover { filter: brightness(1.15); transform: translateY(-1px); }
.sm-btn.btn-tech { background: var(--brand-primary); }

.sm-chip {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: #CBD5E1;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.sm-chip:hover {
  background: rgba(59, 130, 246, 0.2);
  color: #fff;
  border-color: #3B82F6;
}

.sm-tab-panel {
  display: none;
  animation: smFadeIn 0.3s ease;
  flex: 1;
  flex-direction: column;
}
.sm-tab-panel.active { display: flex; }
@keyframes smFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.sm-card {
  background: #131B2E;
  border: 1px solid #232F4D;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}
.sm-card-fill {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 520px;
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid #232F4D;
}
.sm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sm-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sm-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

.sm-stat-box {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 14px;
  border-radius: 8px;
  text-align: center;
}
.sm-stat-label {
  font-size: 10px;
  color: #94A3B8;
  text-transform: uppercase;
  margin-bottom: 5px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.sm-stat-val {
  font-size: 19px;
  font-weight: 800;
  font-family: 'Fira Code', monospace;
  color: #F1F5F9;
}
.sm-text-green { color: #10B981 !important; }
.sm-text-red { color: #EF4444 !important; }
.sm-text-blue { color: #3B82F6 !important; }
.sm-text-yellow { color: #F59E0B !important; }
.sm-text-purple { color: var(--accent) !important; }

.sm-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 12px; }
.sm-table th, .sm-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #232F4D; }
/* FIX (2026-09-11, found via deep-dive review, not a user-reported bug):
   the only uppercase table-header rule in this file with zero
   letter-spacing at all — every other table header (.tbl th) uses
   0.06em, and every other 10px all-caps label in this file (.kpi-label,
   .health-score-label) uses 0.05em, so bare uppercase text here (e.g.
   "Metrik Risiko Fundamental" in the Quantitative Red Flag Detector
   table) reads visibly more cramped than its siblings. */
.sm-table th { color: #94A3B8; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 10px; background: rgba(0,0,0,0.2); }

.sm-badge { display: inline-block; padding: 4px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; font-family: 'Inter', sans-serif; }
.sm-bg-green { background: rgba(16, 185, 129, 0.15); color: #10B981; border: 1px solid rgba(16, 185, 129, 0.3); }
.sm-bg-red { background: rgba(239, 68, 68, 0.15); color: #EF4444; border: 1px solid rgba(239, 68, 68, 0.3); }
.sm-bg-yellow { background: rgba(245, 158, 11, 0.15); color: #F59E0B; border: 1px solid rgba(245, 158, 11, 0.3); }

.sm-check-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(0,0,0,0.25);
  margin-bottom: 8px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.04);
}
.sm-check-icon { font-size: 16px; }

@media (max-width: 900px) {
  .sm-container { flex-direction: column; }
  .sm-aside { width: 100%; border-right: none; border-bottom: 1px solid #232F4D; }
  .sm-grid-2, .sm-grid-3, .sm-grid-4 { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   MONEY WATCH PRO V6: PERSONAL INVESTMENT OPERATING SYSTEM
   ══════════════════════════════════════════════════════════ */
/* Command Center Header */
.command-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.command-greeting {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text3);
  margin-bottom: 2px;
}
.command-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.command-title {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
}
.command-os-badge {
  background: linear-gradient(135deg, rgba(0, 200, 255, 0.2), rgba(59, 130, 246, 0.2));
  border: 1px solid rgba(0, 200, 255, 0.4);
  color: #00c8ff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.05em;
}
.command-subtitle {
  font-size: 12px;
  color: var(--text2);
  margin-top: 4px;
}
.command-header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Data Trust Pill */
.data-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 20, 29, 0.9);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.data-trust-pill:hover {
  border-color: var(--cyan-electric);
  background: rgba(0, 200, 255, 0.06);
}
.trust-status-text {
  font-weight: 700;
  color: #fff;
}
.trust-sep {
  color: var(--text3);
}
.trust-freshness {
  color: var(--text3);
  font-family: var(--font-mono);
  font-size: 10.5px;
}

/* Density Switcher */
.density-switch-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.density-label {
  font-size: 11px;
  color: var(--text3);
  font-weight: 600;
}
.density-switch {
  display: flex;
  background: #131B2E;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
}
.density-btn {
  background: none;
  border: none;
  color: var(--text3);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.density-btn:hover {
  color: #fff;
}
.density-btn.active {
  background: #3B82F6;
  color: #fff;
  font-weight: 700;
}

/* Executive 5 KPIs Grid */
.kpi-executive-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
@media (max-width: 1100px) {
  .kpi-executive-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .kpi-executive-grid { grid-template-columns: 1fr; }
}

.kpi-exec-card {
  background: #131B2E;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  position: relative;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.kpi-exec-card:hover {
  border-color: rgba(0, 200, 255, 0.35);
  transform: translateY(-1px);
}
.kpi-exec-card.kpi-aum {
  background: linear-gradient(135deg, #101a33 0%, #132244 100%);
  border-color: rgba(0, 200, 255, 0.3);
}
.kpi-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.kpi-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--text3);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.kpi-value-lg {
  font-size: 26px;
  font-weight: 800;
  font-family: var(--font-mono);
  color: #00c8ff;
  line-height: 1.15;
}
.kpi-value {
  font-size: 20px;
  font-weight: 800;
  font-family: var(--font-mono);
  color: #fff;
  line-height: 1.15;
}
.kpi-sub {
  font-size: 11px;
  font-family: var(--font-mono);
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.kpi-dim {
  color: var(--text3);
  font-size: 10px;
}

/* Command Split Row */
.command-split-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 900px) {
  .command-split-row { grid-template-columns: 1fr; }
}

.command-card {
  background: #131B2E;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 16px;
}
.card-head-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.card-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-title {
  font-size: 12.5px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Health Radial & Pillars */
.health-body {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  align-items: center;
}
.health-radial-box {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 16px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.health-score-number {
  font-size: 34px;
  font-weight: 900;
  font-family: var(--font-mono);
  line-height: 1;
}
.health-score-max {
  font-size: 11px;
  color: var(--text3);
  font-family: var(--font-mono);
}
.health-score-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  margin-top: 6px;
  letter-spacing: 0.05em;
}
.health-pillars-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.pillar-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pillar-header {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--text2);
  font-weight: 600;
}
.pillar-bar {
  height: 6px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  overflow: hidden;
}
.pillar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

/* Market Regime Card */
.regime-strategy-banner {
  background: rgba(0, 200, 255, 0.04);
  border: 1px solid rgba(0, 200, 255, 0.2);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}
.strategy-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.strategy-tag {
  font-size: 9px;
  font-weight: 700;
  color: var(--text3);
  letter-spacing: 0.05em;
}
.strategy-name {
  font-size: 14px;
  font-weight: 800;
  color: #00c8ff;
}
.strategy-alloc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.alloc-box {
  background: rgba(0, 0, 0, 0.25);
  padding: 6px 10px;
  border-radius: 6px;
}
.alloc-lbl {
  font-size: 9.5px;
  color: var(--text3);
  display: block;
}
.alloc-val {
  font-size: 14px;
  font-weight: 800;
  font-family: var(--font-mono);
}
.regime-metrics-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.reg-stat {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  padding: 8px;
  text-align: center;
}
.reg-k {
  font-size: 9px;
  color: var(--text3);
  margin-bottom: 2px;
}
.reg-v {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: #fff;
}

/* AI Action Center Cards */
.action-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}
.action-card {
  background: #0E1524;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}
.action-card.action-high {
  border-left: 4px solid var(--red);
}
.action-card.action-opportunity {
  border-left: 4px solid var(--green);
}
.action-card.action-info {
  border-left: 4px solid var(--amber);
}
.action-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.action-confidence {
  font-size: 10px;
  color: var(--text3);
  font-family: var(--font-mono);
}
.action-confidence strong {
  color: #00c8ff;
}
.action-rec-badge {
  text-align: right;
}
.rec-label {
  font-size: 9px;
  color: var(--text3);
  display: block;
}
.rec-action {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}
.action-reason {
  font-size: 11.5px;
  color: var(--text2);
  line-height: 1.5;
}
.action-metrics-row {
  display: flex;
  gap: 10px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  padding: 6px 10px;
  flex-wrap: wrap;
}
.act-metric {
  font-size: 10.5px;
  font-family: var(--font-mono);
}
.m-k { color: var(--text3); }
.m-v { color: var(--text); }
.explain-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.exp-pill {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 9.5px;
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--text3);
  font-family: var(--font-mono);
}
.exp-total {
  font-size: 9.5px;
  font-weight: 700;
  color: #00c8ff;
  font-family: var(--font-mono);
  margin-left: auto;
}
.action-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.action-meta {
  font-size: 10px;
  color: var(--text3);
}

/* Opportunity Radar Preview */
.radar-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 800px) {
  .radar-preview-grid { grid-template-columns: 1fr 1fr; }
}
.radar-mini-card {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.radar-mini-card:hover {
  border-color: #00c8ff;
  transform: translateY(-2px);
}
.rmc-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.rmc-ticker {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}
.rmc-score-wrap {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 6px;
}
.rmc-score-val {
  font-size: 22px;
  font-weight: 900;
  color: #00c8ff;
  font-family: var(--font-mono);
}
.rmc-score-max {
  font-size: 10px;
  color: var(--text3);
  font-family: var(--font-mono);
}
.rmc-stats {
  font-size: 10.5px;
  display: flex;
  justify-content: space-between;
  color: var(--text3);
  margin-bottom: 6px;
}
.rmc-verdict {
  font-size: 10px;
  font-weight: 700;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Stock Intelligence Cockpit Header */
.stock-intel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #131B2E;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 18px;
  gap: 16px;
  flex-wrap: wrap;
}
.sih-left {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.sih-select-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sih-label {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text3);
  letter-spacing: 0.05em;
}
.sih-select {
  background: #0B0F19;
  border: 1px solid var(--border);
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-mono);
  outline: none;
}
.sih-select:focus {
  border-color: #00c8ff;
}
.sih-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sih-ticker {
  font-size: 26px;
  font-weight: 900;
  color: #fff;
}
.sih-fullname {
  font-size: 13px;
  color: var(--text2);
  font-weight: 600;
}
.sih-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
}
.sih-price {
  font-size: 20px;
  font-weight: 800;
  font-family: var(--font-mono);
  color: #fff;
}
.sih-chg {
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-mono);
}
.intel-overall-badge {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 18px;
  text-align: center;
}
.iob-score-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}
.iob-num {
  font-size: 28px;
  font-weight: 900;
  font-family: var(--font-mono);
}
.iob-denom {
  font-size: 12px;
  color: var(--text3);
  font-family: var(--font-mono);
}
.iob-label {
  font-size: 9px;
  font-weight: 800;
  color: var(--text3);
  letter-spacing: 0.05em;
}

/* Copilot Chat */
.copilot-bubble {
  padding: 12px 16px;
  border-radius: 10px;
  max-width: 85%;
  line-height: 1.5;
  font-size: 12.5px;
}
.bubble-assistant {
  background: #131B2E;
  border: 1px solid var(--border);
  color: var(--text);
  align-self: flex-start;
}
.bubble-user {
  background: var(--brand-primary);
  color: #fff;
  align-self: flex-end;
}
.cb-head {
  font-size: 10px;
  font-weight: 700;
  margin-bottom: 4px;
  opacity: 0.8;
}

/* Density Modifier Classes */
body.density-executive .dash-chart-row,
body.density-executive .dash-table-row {
  display: none !important;
}
body.density-compact .page {
  padding: 12px 14px;
}
body.density-compact .metric,
body.density-compact .card,
body.density-compact .kpi-exec-card {
  padding: 10px 12px;
  margin-bottom: 10px;
}

/* ══════════════════════════════════════════════════════════
   INSTITUTIONAL FINTECH TERMINAL THEME & DENSITY ENHANCEMENT
   ══════════════════════════════════════════════════════════ */
/* Tabular numbers for all financial metrics and tables */
.tbl td, .tbl th, .mono, .mval, .sih-price, .sih-chg, .tick-val, .tick-chg, .rdn-val, .ibar-val {
  font-feature-settings: 'tnum' on, 'zero' on, 'ss01' on;
  -webkit-font-feature-settings: 'tnum' on, 'zero' on, 'ss01' on;
}

/* Professional Table Density Levels */
.tbl-density-compact th {
  padding: 5px 8px !important;
  font-size: 10px !important;
  letter-spacing: 0.05em !important;
}
.tbl-density-compact td {
  padding: 4px 8px !important;
  font-size: 11px !important;
  height: 28px !important;
  line-height: 1.2 !important;
}
.tbl-density-standard th {
  padding: 8px 12px !important;
  font-size: 10.5px !important;
}
.tbl-density-standard td {
  padding: 8px 12px !important;
  font-size: 12.5px !important;
}
.tbl-density-pro th {
  padding: 10px 14px !important;
  font-size: 11px !important;
}
.tbl-density-pro td {
  padding: 10px 14px !important;
  font-size: 13px !important;
}

/* Density Switcher Button Group */
.density-toggle-group {
  display: inline-flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}
.density-toggle-btn {
  background: none;
  border: none;
  color: var(--text3);
  padding: 3px 8px;
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.density-toggle-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}
.density-toggle-btn.active {
  background: var(--bg3);
  color: var(--accent);
  border: 1px solid var(--border2);
  font-weight: 700;
}

/* Mini Sparkline SVG */
.sparkline-svg {
  display: inline-block;
  vertical-align: middle;
  overflow: visible;
}
.sparkline-svg path {
  vector-effect: non-scaling-stroke;
}

/* ══════════════════════════════════════════════════════════
   GLOBAL QUICK KEYBOARD COMMAND PALETTE (CMD+K / /)
   ══════════════════════════════════════════════════════════ */
#cmd-palette-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(7, 11, 20, 0.78);
  backdrop-filter: blur(10px);
  z-index: 10005;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
}
#cmd-palette-overlay.open {
  display: flex;
}
.cmd-palette-container {
  background: #0F172A;
  border: 1px solid #334155;
  border-radius: 12px;
  width: 620px;
  max-width: 94vw;
  max-height: 75vh;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(56, 189, 248, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: cmdPalIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cmdPalIn {
  from { opacity: 0; transform: scale(0.96) translateY(-8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.cmd-search-header {
  display: flex;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
  background: #131E31;
}
.cmd-search-header i.ti {
  font-size: 18px;
  color: var(--accent);
}
.cmd-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: #fff;
  font-size: 15px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
}
.cmd-search-input::placeholder {
  color: #64748B;
  font-size: 14px;
}
.cmd-kbd-badge {
  font-size: 10px;
  font-family: var(--font-mono);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 2px 6px;
  color: var(--text3);
}
.cmd-results-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px 14px;
}
.cmd-results-list::-webkit-scrollbar {
  width: 4px;
}
.cmd-category-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text3);
  padding: 8px 10px 4px;
  margin-top: 4px;
}
.cmd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: all 0.1s ease;
  margin-bottom: 2px;
}
.cmd-item:hover, .cmd-item.active {
  background: rgba(56, 189, 248, 0.12);
  border-left-color: var(--accent);
}
.cmd-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.cmd-item-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--accent);
  flex-shrink: 0;
}
.cmd-item-title {
  font-size: 13px;
  font-weight: 600;
  color: #F8FAFC;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmd-item-sub {
  font-size: 11px;
  color: #94A3B8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmd-item-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.cmd-footer {
  padding: 8px 16px;
  background: #0B101D;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text3);
}

/* ── Price Alerts & Notification Styles ── */
.tb-alert-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 15px;
  height: 15px;
  border-radius: 10px;
  background: var(--brand-primary);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
  box-shadow: 0 0 6px rgba(0,0,0,0.5);
}

.pulsing-alert {
  animation: alertPulse 1.5s infinite;
}

@keyframes alertPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ══════════════════════════════════════════════════════════════
   COMPREHENSIVE LIGHT THEME ENGINE (MoneyWatch Pro V6 - Yahoo Finance Theme)
   ══════════════════════════════════════════════════════════════
   The `body.theme-light {}` custom-property block that used to be here
   was a full duplicate of the one declared near the top of this file
   (search "YAHOO FINANCE THEME & DESIGN SYSTEM TOKENS (LIGHT MODE)") —
   same selector, so identical specificity, so this later block silently
   won the cascade for every variable it redeclared. One of them
   (--border-subtle) actually had a DIFFERENT value in each block
   (#E0E4E9 vs rgba(0,0,0,0.06)), with no visual indication anywhere that
   two competing definitions existed — the exact same class of bug fixed
   in INCIDENT_LOG.md #14 (a duplicate light-theme CSS rule silently
   overriding another). Consolidated into the single block up top; see
   the comment there for the resolved --border-subtle value. ── */

/* Force light style on any element with dark hardcoded background or inline style in theme-light */
body.theme-light [style*="background: #131B2E"],
body.theme-light [style*="background:#131B2E"],
body.theme-light [style*="background: #101726"],
body.theme-light [style*="background:#101726"],
body.theme-light [style*="background: #0B0F19"],
body.theme-light [style*="background:#0B0F19"],
body.theme-light [style*="background:var(--bg2)"],
body.theme-light [style*="background:var(--bg3)"],
body.theme-light [style*="background: rgba(0,0,0"],
body.theme-light [style*="background:rgba(0,0,0"] {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border-color: #CBD5E1 !important;
}

/* ── CASH WIDGETS (Portofolio, Crypto, ETF, Reksa Dana) ── */
body.theme-light .cash-sync-banner {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

body.theme-light #cash-saham-banner,
body.theme-light .cash-sync-banner.cash-saham {
  background: #ECFDF5 !important;
  border: 1px solid #A7F3D0 !important;
}
body.theme-light #cash-saham-banner > span:first-child,
body.theme-light .cash-sync-banner.cash-saham > span:first-child {
  color: #065F46 !important;
  font-weight: 800 !important;
}
body.theme-light #cash-saham-disp {
  color: #047857 !important;
  font-weight: 800 !important;
}
body.theme-light #cash-saham-banner .btn-ghost {
  background: #FFFFFF !important;
  border-color: #A7F3D0 !important;
  color: #047857 !important;
}

body.theme-light #cash-crypto-banner,
body.theme-light .cash-sync-banner.cash-crypto {
  background: #FFFBEB !important;
  border: 1px solid #FDE68A !important;
}
body.theme-light #cash-crypto-banner > span:first-child,
body.theme-light .cash-sync-banner.cash-crypto > span:first-child {
  color: #92400E !important;
  font-weight: 800 !important;
}
body.theme-light #cash-crypto-disp {
  color: #B45309 !important;
  font-weight: 800 !important;
}
body.theme-light #cash-crypto-banner .btn-ghost {
  background: #FFFFFF !important;
  border-color: #FDE68A !important;
  color: #B45309 !important;
}

body.theme-light #cash-etf-banner,
body.theme-light .cash-sync-banner.cash-etf {
  background: #F0F9FF !important;
  border: 1px solid #BAE6FD !important;
}
body.theme-light #cash-etf-banner > span:first-child,
body.theme-light .cash-sync-banner.cash-etf > span:first-child {
  color: #075985 !important;
  font-weight: 800 !important;
}
body.theme-light #cash-etf-disp {
  color: #0284C7 !important;
  font-weight: 800 !important;
}
body.theme-light #cash-etf-banner .btn-ghost {
  background: #FFFFFF !important;
  border-color: #BAE6FD !important;
  color: #0284C7 !important;
}

body.theme-light #cash-rd-banner,
body.theme-light .cash-sync-banner.cash-rd {
  background: #FAF5FF !important;
  border: 1px solid #E9D5FF !important;
}
body.theme-light #cash-rd-banner > span:first-child,
body.theme-light .cash-sync-banner.cash-rd > span:first-child {
  color: #6B21A8 !important;
  font-weight: 800 !important;
}
body.theme-light #cash-reksadana-disp {
  color: #7E22CE !important;
  font-weight: 800 !important;
}
body.theme-light #cash-rd-banner .btn-ghost {
  background: #FFFFFF !important;
  border-color: #E9D5FF !important;
  color: #7E22CE !important;
}

body.theme-light .cash-sync-banner span[style*="var(--text3)"] {
  color: #475569 !important;
}

/* Base Body & App Container */
body.theme-light .app {
  background: #F1F5F9 !important;
  color: #0F172A !important;
}

body.theme-light .main-row {
  background: #F1F5F9 !important;
}

body.theme-light .page {
  background: #F1F5F9 !important;
  color: #0F172A !important;
}

/* TOPBAR & TICKER TAPE */
body.theme-light .topbar {
  background: #FFFFFF !important;
  border-bottom: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

body.theme-light .topbar i,
body.theme-light .topbar .tb-logo-icon,
body.theme-light .topbar button i {
  color: #354453 !important;
}

body.theme-light .topbar-right button {
  color: #354453 !important;
}

body.theme-light .topbar-right button:hover i,
body.theme-light .topbar-right button:hover {
  color: #1D252C !important;
}

body.theme-light .topbar .logo .tb-logo-icon {
  color: var(--accent) !important;
}

body.theme-light .topbar .logo {
  color: #0F172A !important;
}

body.theme-light .ihsg-bar {
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

body.theme-light .ibar-val {
  color: #0F172A !important;
}

body.theme-light .rdn-bar {
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

body.theme-light .rdn-label {
  color: #64748B !important;
}

body.theme-light .rdn-val {
  color: #0F172A !important;
}

body.theme-light #btn-settings-hub {
  background: #EFF6FF !important;
  border-color: #BFDBFE !important;
  color: #1D4ED8 !important;
}

body.theme-light #session-info {
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  color: #334155 !important;
}

body.theme-light #session-user {
  color: #0F172A !important;
}

body.theme-light #clock {
  color: #64748B !important;
}

body.theme-light .ticker-wrap {
  background: #F8FAFC !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

body.theme-light .ticker-wrap::before {
  background: linear-gradient(90deg, #F8FAFC, transparent) !important;
}

body.theme-light .ticker-wrap::after {
  background: linear-gradient(270deg, #F8FAFC, transparent) !important;
}

body.theme-light .tick-item {
  border-right: 1px solid #E2E8F0 !important;
}

body.theme-light .tick-sym {
  color: #0F172A !important;
}

body.theme-light .tick-val {
  color: #334155 !important;
}

/* SIDEBAR & NAVIGATION */
body.theme-light .sidebar,
body.theme-light .side-nav {
  background: #FFFFFF !important;
  border-right: 1px solid #E2E8F0 !important;
}

body.theme-light .side-toolbar {
  background: #F8FAFC !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

body.theme-light .side-collapse-btn {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #475569 !important;
}

body.theme-light .side-collapse-btn:hover {
  background: #F1F5F9 !important;
  color: #0F172A !important;
  border-color: #0000FF !important;
}

body.theme-light .side-search-wrap {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
}

body.theme-light .side-search-wrap i.ti {
  color: #64748B !important;
}

body.theme-light .side-kbd {
  background: #F1F5F9 !important;
  border-color: #E2E8F0 !important;
  color: #64748B !important;
}

body.theme-light .side-sec-toggle {
  color: #64748B !important;
}

body.theme-light .side-sec-toggle:hover {
  color: #0F172A !important;
  background: #F1F5F9 !important;
}

body.theme-light .side-chevron {
  color: #94A3B8 !important;
}

body.theme-light .side-group-items {
  border-left-color: #E2E8F0 !important;
}

body.theme-light .side-nav button {
  color: #354453 !important;
}

body.theme-light .side-nav button i.ti {
  color: #64748B !important;
}

body.theme-light .side-nav button:hover {
  background: #F5F7FA !important;
  color: #1D252C !important;
}

body.theme-light .side-nav button:hover i.ti {
  color: #0000FF !important;
}

body.theme-light .side-nav button.on {
  background: #E6ECFF !important;
  color: #0000FF !important;
  font-weight: 700 !important;
  border-color: #B3C2FF !important;
}

body.theme-light .side-nav button.on i.ti {
  color: #0000FF !important;
}

body.theme-light .side-label {
  color: #334155 !important;
}

body.theme-light .side-search-input {
  background: transparent !important;
  border: none !important;
  color: #0F172A !important;
}

body.theme-light .side-cat-head {
  color: #64748B !important;
}

/* HERO CARD & DONUT CHART */
body.theme-light .hero-balance p { color: #64748B !important; }
body.theme-light .hero-balance h2 { color: #0F172A !important; }
body.theme-light .card-title { color: #0F172A !important; }
body.theme-light .card-amount { color: #0F172A !important; }

body.theme-light .donut-inner,
body.theme-light #hub-donut .donut-inner {
  background: #FFFFFF !important;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.06) !important;
}

body.theme-light .donut-chart,
body.theme-light #hub-donut {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

body.theme-light .legend {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

body.theme-light .legend-item {
  color: #0F172A !important;
}

/* CARDS & PANELS */
body.theme-light .card,
body.theme-light .metric,
body.theme-light .kpi-exec-card,
body.theme-light .glass-panel,
body.theme-light .asset-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

body.theme-light .card *,
body.theme-light .metric *,
body.theme-light .glass-panel * {
  text-shadow: none !important;
}

body.theme-light .ctitle,
body.theme-light .card-title {
  color: #0F172A !important;
}

body.theme-light .cheader {
  background: #F8FAFC !important;
  border-bottom: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
}

body.theme-light .mlabel {
  color: #64748B !important;
}

body.theme-light .mval {
  color: #0F172A !important;
}

body.theme-light .mval[style*="--green"],
body.theme-light .mval[style*="#41f3a7"],
body.theme-light .mval[style*="rgb(65, 243, 167)"],
body.theme-light .mval.up,
body.theme-light .mval.positive,
body.theme-light .mval .up,
body.theme-light .mval.b-up,
body.theme-light .up,
body.theme-light span.up,
body.theme-light div.up,
body.theme-light td.up {
  color: #15803D !important; /* Deep Emerald 7:1 Contrast */
}

body.theme-light .mval[style*="--red"],
body.theme-light .mval[style*="#ff4d4d"],
body.theme-light .mval[style*="rgb(255, 77, 77)"],
body.theme-light .mval.dn,
body.theme-light .mval.down,
body.theme-light .mval.negative,
body.theme-light .mval .dn,
body.theme-light .mval.b-dn,
body.theme-light .dn,
body.theme-light span.dn,
body.theme-light div.dn,
body.theme-light td.dn {
  color: #DC2626 !important; /* Deep Rose Red 7:1 Contrast */
}

body.theme-light .mval.neu,
body.theme-light .neu {
  color: #64748B !important;
}

body.theme-light .mval.amb,
body.theme-light .amb {
  color: #B45309 !important;
}

body.theme-light .msub {
  color: #64748B !important;
}

body.theme-light .msub[style*="--green"],
body.theme-light .msub[style*="#41f3a7"],
body.theme-light .msub.up,
body.theme-light .msub.positive {
  color: #15803D !important;
}

body.theme-light .msub[style*="--red"],
body.theme-light .msub[style*="#ff4d4d"],
body.theme-light .msub.dn,
body.theme-light .msub.negative {
  color: #DC2626 !important;
}

/* Donut Chart Legend in Portfolio */
body.theme-light #porto-donut-legend > div {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
}

body.theme-light #porto-donut-legend span {
  color: #1E293B !important;
}

body.theme-light #porto-donut-legend .mono {
  color: #0F172A !important;
  font-weight: 700 !important;
}

body.theme-light .ptitle {
  color: #0F172A !important;
}

body.theme-light .psub {
  color: #64748B !important;
}

/* ALL BUTTONS - COMPREHENSIVE CONTRAST & VISIBILITY */
body.theme-light .btn {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

body.theme-light .btn:hover {
  background: #F1F5F9 !important;
  color: #0F172A !important;
  border-color: #94A3B8 !important;
}

body.theme-light .btn-outline {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
}

body.theme-light .btn-outline:hover {
  background: #F1F5F9 !important;
  border-color: #94A3B8 !important;
}

body.theme-light .btn-primary,
body.theme-light .btn-blue {
  background: #0000FF !important;
  color: #FFFFFF !important;
  border: 1px solid #0000FF !important;
  box-shadow: 0 2px 4px rgba(0, 0, 255, 0.2) !important;
}

body.theme-light .btn-primary:hover,
body.theme-light .btn-blue:hover {
  background: #0000CC !important;
  color: #FFFFFF !important;
  border-color: #0000CC !important;
}

body.theme-light .btn-ghost {
  background: transparent !important;
  color: #334155 !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: none !important;
}

/* Active/selected tab state (class "on", used by e.g. the AI Trading tab
   bar) — without this, the light-theme .btn-ghost rule above's !important
   flattens every tab to the same gray, so the currently-open tab was
   visually indistinguishable from the rest. Matches the app's existing
   light-theme blue accent palette (see .b-accent above). */
body.theme-light .btn-ghost.on {
  background: #EFF6FF !important;
  color: #2563EB !important;
  border: 1px solid #BFDBFE !important;
}

body.theme-light .btn-ghost:hover {
  background: #F1F5F9 !important;
  color: #0F172A !important;
}

/* Keep the active tab's blue tint while hovering it, instead of the hover
   rule above briefly flashing it gray. */
body.theme-light .btn-ghost.on:hover {
  background: #DBEAFE !important;
  color: #2563EB !important;
}

body.theme-light .btn-secondary {
  background: #F1F5F9 !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
}

body.theme-light .btn-secondary:hover {
  background: #E2E8F0 !important;
}

body.theme-light .btn-bb {
  background: #EFF6FF !important;
  color: #2563EB !important;
  border: 1px solid #BFDBFE !important;
}

body.theme-light .btn-bb:hover {
  background: #DBEAFE !important;
}

body.theme-light .btn-green {
  background: #DCFCE7 !important;
  color: #15803D !important;
  border: 1px solid #86EFAC !important;
}

body.theme-light .btn-green:hover {
  background: #BBF7D0 !important;
}

body.theme-light .btn-red {
  background: #FEE2E2 !important;
  color: #B91C1C !important;
  border: 1px solid #FCA5A5 !important;
}

body.theme-light .btn-red:hover {
  background: #FECACA !important;
}

body.theme-light .btn-amber {
  background: #FEF3C7 !important;
  color: #B45309 !important;
  border: 1px solid #FCD34D !important;
}

body.theme-light .btn-amber:hover {
  background: #FDE68A !important;
}

body.theme-light .btn-purple {
  background: #F3E8FF !important;
  color: #7E22CE !important;
  border: 1px solid #D8B4FE !important;
}

body.theme-light .btn-purple:hover {
  background: #E9D5FF !important;
}

body.theme-light .pbtn {
  background: #F1F5F9 !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
}

body.theme-light .pbtn.on {
  background: #0000FF !important;
  color: #FFFFFF !important;
  border-color: #0000FF !important;
}

/* FORMS, INPUTS, SELECTS */
body.theme-light input,
body.theme-light select,
body.theme-light textarea,
body.theme-light .fin,
body.theme-light .finput {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

body.theme-light input:focus,
body.theme-light select:focus,
body.theme-light textarea:focus,
body.theme-light .fin:focus,
body.theme-light .finput:focus {
  border-color: #0000FF !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 255, 0.15) !important;
}

body.theme-light input::placeholder,
body.theme-light textarea::placeholder,
body.theme-light .fin::placeholder,
body.theme-light .finput::placeholder {
  color: #94A3B8 !important;
}

body.theme-light select option {
  background: #FFFFFF !important;
  color: #0F172A !important;
}

body.theme-light .flabel {
  color: #334155 !important;
}

body.theme-light .fhint {
  color: #64748B !important;
}

/* TABLES & LISTS */
body.theme-light .table,
body.theme-light .tbl,
body.theme-light table {
  color: #0F172A !important;
}

body.theme-light .table th,
body.theme-light .tbl th,
body.theme-light table th {
  background: #F1F5F9 !important;
  color: #0F172A !important;
  border-bottom: 1px solid #CBD5E1 !important;
}

body.theme-light .table td,
body.theme-light .tbl td,
body.theme-light table td {
  border-bottom: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
}

body.theme-light .table tbody tr:hover,
body.theme-light .tbl tbody tr:hover {
  background: #F8FAFC !important;
}

body.theme-light .table-wrap,
body.theme-light .table-responsive {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 8px;
}

/* AI COPILOT & CHAT */
body.theme-light .copilot-container {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

body.theme-light .copilot-history {
  background: #F8FAFC !important;
}

body.theme-light .copilot-bubble {
  color: #0F172A !important;
}

body.theme-light .bubble-assistant {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

body.theme-light .bubble-assistant .cb-role {
  color: #2563EB !important;
  font-weight: 700 !important;
}

body.theme-light .bubble-assistant table {
  color: #0F172A !important;
}

body.theme-light .bubble-assistant th {
  background: #F1F5F9 !important;
  color: #0F172A !important;
  border-bottom: 1px solid #CBD5E1 !important;
}

body.theme-light .bubble-assistant td {
  border-bottom: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
}

body.theme-light .bubble-assistant strong,
body.theme-light .bubble-assistant b {
  color: #0F172A !important;
}

body.theme-light .bubble-assistant code {
  background: #E2E8F0 !important;
  color: #0F172A !important;
  border-radius: 4px;
  padding: 2px 5px;
}

body.theme-light .bubble-user {
  background: #2563EB !important;
  color: #FFFFFF !important;
}

body.theme-light .copilot-chips-wrap {
  background: #FFFFFF !important;
  border-top: 1px solid #E2E8F0 !important;
}

body.theme-light .copilot-input-bar {
  background: #FFFFFF !important;
  border-top: 1px solid #E2E8F0 !important;
}

/* STOCKMASTER PRO & TECHNICAL PRO */
body.theme-light .sm-container {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

body.theme-light .sm-suite-header {
  background: #F8FAFC !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

body.theme-light .sm-suite-brand {
  color: #0F172A !important;
}

body.theme-light .sm-suite-brand > span {
  color: #0F172A !important;
}

body.theme-light .sm-nav-item {
  color: #334155 !important;
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
}

body.theme-light .sm-nav-item:hover {
  background: #E2E8F0 !important;
  color: #0F172A !important;
  border-color: #94A3B8 !important;
}

body.theme-light .sm-nav-item.active,
body.theme-light .sm-nav-item.active-tech {
  background: #0000FF !important;
  color: #FFFFFF !important;
  border-color: #0000FF !important;
  box-shadow: 0 2px 8px rgba(0, 0, 255, 0.25) !important;
}

body.theme-light .sm-main {
  background: #FFFFFF !important;
}

body.theme-light .sm-top-bar {
  background: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
}

body.theme-light .sm-input-group label {
  color: #64748B !important;
}

body.theme-light .sm-input {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

body.theme-light .sm-chip {
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  color: #334155 !important;
}

body.theme-light .sm-chip:hover {
  background: #EFF6FF !important;
  color: #2563EB !important;
  border-color: #2563EB !important;
}

body.theme-light .sm-card {
  background: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

body.theme-light .sm-card-fill {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
}

body.theme-light .sm-stat-box {
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
}

body.theme-light .sm-stat-label {
  color: #64748B !important;
}

body.theme-light .sm-stat-val {
  color: #0F172A !important;
}

body.theme-light .sm-table th {
  background: #F1F5F9 !important;
  color: #0F172A !important;
  border-bottom: 1px solid #CBD5E1 !important;
}

body.theme-light .sm-table td {
  border-bottom: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

body.theme-light .sm-check-item {
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

body.theme-light #sm-tv-chart-container > div:first-child {
  background: #F8FAFC !important;
  border-bottom: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

body.theme-light #sm-tv-chart-container > div:last-child {
  background: #FFFFFF !important;
}

body.theme-light #sm-tv-gauge-container {
  background: #FFFFFF !important;
}

/* SETTINGS HUB & MODALS */
body.theme-light #settings-hub-modal > div {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

body.theme-light #settings-hub-modal > div > div:first-child {
  background: #F8FAFC !important;
  border-bottom: 1px solid #CBD5E1 !important;
}

body.theme-light #sh-tabs {
  background: #F8FAFC !important;
  border-right: 1px solid #CBD5E1 !important;
}

body.theme-light #sh-content {
  background: #FFFFFF !important;
}

body.theme-light .modal {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

body.theme-light .mhead {
  background: #F8FAFC !important;
  border-bottom: 1px solid #CBD5E1 !important;
}

body.theme-light .mtitle {
  color: #0F172A !important;
}

body.theme-light .mbody {
  background: #FFFFFF !important;
}

body.theme-light .mfoot {
  background: #F8FAFC !important;
  border-top: 1px solid #CBD5E1 !important;
}

body.theme-light .modal-box {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

/* COMMAND PALETTE */
body.theme-light #cmd-palette-overlay {
  background: rgba(15, 23, 42, 0.45) !important;
}

body.theme-light .cmd-palette-container {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.15) !important;
  color: #0F172A !important;
}

body.theme-light .cmd-search-header {
  background: #F8FAFC !important;
  border-bottom: 1px solid #CBD5E1 !important;
}

body.theme-light .cmd-search-input {
  color: #0F172A !important;
}

body.theme-light .cmd-search-input::placeholder {
  color: #94A3B8 !important;
}

body.theme-light .cmd-kbd-badge {
  background: #E2E8F0 !important;
  border: 1px solid #CBD5E1 !important;
  color: #334155 !important;
}

body.theme-light .cmd-item:hover,
body.theme-light .cmd-item.active {
  background: #EFF6FF !important;
}

body.theme-light .cmd-item-icon {
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
}

body.theme-light .cmd-item-title {
  color: #0F172A !important;
}

body.theme-light .cmd-item-sub {
  color: #64748B !important;
}

body.theme-light .cmd-footer {
  background: #F8FAFC !important;
  border-top: 1px solid #CBD5E1 !important;
  color: #64748B !important;
}

/* WEALTH & INSIGHTS */
body.theme-light .w-insight {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

body.theme-light .w-mini {
  border-bottom: 1px solid #E2E8F0 !important;
}

body.theme-light .w-bank-card {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

/* BADGES */
body.theme-light .badge {
  font-weight: 700 !important;
}

body.theme-light .b-up {
  background: #DCFCE7 !important;
  color: #15803D !important;
  border: 1px solid #86EFAC !important;
}

body.theme-light .b-dn {
  background: #FEE2E2 !important;
  color: #B91C1C !important;
  border: 1px solid #FCA5A5 !important;
}

body.theme-light .b-amb {
  background: #FEF3C7 !important;
  color: #B45309 !important;
  border: 1px solid #FCD34D !important;
}

body.theme-light .b-neu {
  background: #F1F5F9 !important;
  color: #334155 !important;
  border: 1px solid #CBD5E1 !important;
}

body.theme-light .b-accent {
  background: #EFF6FF !important;
  color: #2563EB !important;
  border: 1px solid #BFDBFE !important;
}

/* HARGA WAJAR & METRIC CARDS */
body.theme-light .hw-card,
body.theme-light .hw-panel {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
}

body.theme-light .hw-metric-box {
  background: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
}

/* STOCKCHAT & BANDARMOLOGY COCKPIT ENHANCEMENTS */
#page-stockchat, #page-bandarmology {
  background: var(--bg);
  min-height: 100%;
  width: 100%;
}

.stockchat-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.broker-badge-f {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.3);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
}

.broker-badge-d {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.3);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
}

/* ── Comprehensive Light Theme for Bandarmology Cockpit & StockChat AI ── */
/* ── Comprehensive High-Contrast Light Theme for Bandarmology, StockChat & Master Modes ── */
body.theme-light #page-stockchat,
body.theme-light #page-bandarmology,
body.theme-light #page-stockintel,
body.theme-light #page-flowscan {
  background: #F8FAFC !important;
  color: #0F172A !important;
}

/* Card Containers & Glassmorphism Panels: Reset dark slate & gradients to crisp white cards */
body.theme-light [class*="from-slate-900"],
body.theme-light [class*="from-slate-950"],
body.theme-light [class*="via-slate-900"],
body.theme-light [class*="to-slate-950"],
body.theme-light [class*="bg-slate-900"],
body.theme-light [class*="bg-slate-950"],
body.theme-light #page-bandarmology [class*="bg-slate-900"],
body.theme-light #page-stockchat [class*="bg-slate-900"],
body.theme-light #page-bandarmology [class*="bg-slate-950"],
body.theme-light #page-stockchat [class*="bg-slate-950"],
body.theme-light .stockchat-card {
  background-color: #FFFFFF !important;
  background-image: none !important;
  border-color: #E2E8F0 !important;
  color: #0F172A !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05) !important;
}

/* Nested inner panels, sub-wells, and metric cells inside cards */
body.theme-light [class*="bg-slate-950/80"],
body.theme-light [class*="bg-slate-950/90"],
body.theme-light [class*="bg-slate-950/70"],
body.theme-light [class*="bg-slate-900/40"],
body.theme-light [class*="bg-slate-900/60"],
body.theme-light [class*="bg-slate-900/80"],
body.theme-light [class*="bg-slate-900/90"],
body.theme-light div:has(> button[onclick*="setStockChatTableLimit"]),
body.theme-light div:has(> button[onclick*="setStockChatBrokerFilter"]),
body.theme-light div:has(> button[onclick*="setStockChatTimeframe"]) {
  background-color: #F8FAFC !important;
  background-image: none !important;
  border-color: #E2E8F0 !important;
  color: #0F172A !important;
}

/* Dual Sortable Table Subheaders (Top Buyers & Top Sellers) */
body.theme-light [class*="from-emerald-950"] {
  background-color: #ECFDF5 !important;
  background-image: none !important;
  border-color: #A7F3D0 !important;
}
body.theme-light [class*="from-emerald-950"] span.text-emerald-400 {
  color: #065F46 !important;
  font-weight: 800 !important;
}
body.theme-light [class*="from-rose-950"] {
  background-color: #FEF2F2 !important;
  background-image: none !important;
  border-color: #FECACA !important;
}
body.theme-light [class*="from-rose-950"] span.text-rose-400 {
  color: #991B1B !important;
  font-weight: 800 !important;
}

/* Broker code badges (Fixes solid black boxes in 1-Year Database and Cockpit tables) */
body.theme-light span.bg-slate-800,
body.theme-light span[class*="bg-slate-800"],
body.theme-light .badge.bg-slate-800,
body.theme-light div:not(button)[class*="bg-slate-800"] {
  background: #F1F5F9 !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
  font-weight: 800 !important;
}
body.theme-light span.bg-slate-800.text-white,
body.theme-light span[class*="bg-slate-800"] {
  color: #0F172A !important;
}
body.theme-light span.bg-slate-800.text-slate-400 {
  background: #F1F5F9 !important;
  color: #475569 !important;
  border-color: #CBD5E1 !important;
  font-weight: 700 !important;
}

/* Typography & Headings */
body.theme-light h1,
body.theme-light h2,
body.theme-light h3,
body.theme-light h4,
body.theme-light #page-bandarmology h1,
body.theme-light #page-bandarmology h2,
body.theme-light #page-bandarmology h3,
body.theme-light #page-bandarmology h4,
body.theme-light #page-stockchat h1,
body.theme-light #page-stockchat h2,
body.theme-light #page-stockchat h3,
body.theme-light #page-stockchat h4,
body.theme-light .text-white,
body.theme-light #page-bandarmology .text-white,
body.theme-light #page-stockchat .text-white {
  color: #0F172A !important;
  font-weight: 800;
}

body.theme-light p,
body.theme-light #page-bandarmology p,
body.theme-light #page-stockchat p {
  color: #334155 !important;
}

/* Body & Subtitle Text Contrast */
body.theme-light .text-slate-200,
body.theme-light #page-bandarmology .text-slate-200,
body.theme-light #page-stockchat .text-slate-200,
body.theme-light .text-slate-300,
body.theme-light #page-bandarmology .text-slate-300,
body.theme-light #page-stockchat .text-slate-300 {
  color: #1E293B !important;
  font-weight: 600;
}

body.theme-light .text-slate-400,
body.theme-light #page-bandarmology .text-slate-400,
body.theme-light #page-stockchat .text-slate-400,
body.theme-light .text-slate-500,
body.theme-light #page-bandarmology .text-slate-500,
body.theme-light #page-stockchat .text-slate-500 {
  color: #475569 !important;
  font-weight: 500;
}

/* High-Contrast Color Accents (Never Pale in Light Mode) */
body.theme-light .text-emerald-300,
body.theme-light .text-emerald-400,
body.theme-light #page-bandarmology .text-emerald-400 {
  color: #047857 !important; /* Deep Emerald (7:1 Contrast) */
  font-weight: 700 !important;
}

body.theme-light .text-rose-300,
body.theme-light .text-rose-400,
body.theme-light #page-bandarmology .text-rose-400 {
  color: #B91C1C !important; /* Deep Rose Red (7:1 Contrast) */
  font-weight: 700 !important;
}

body.theme-light .text-amber-300,
body.theme-light .text-amber-400,
body.theme-light #page-bandarmology .text-amber-300 {
  color: #B45309 !important; /* Deep Amber */
  font-weight: 700 !important;
}

body.theme-light .text-sky-300,
body.theme-light .text-sky-400,
body.theme-light .text-blue-300,
body.theme-light .text-blue-400,
body.theme-light #page-bandarmology .text-sky-400 {
  color: #0284C7 !important; /* Deep Sky Blue */
  font-weight: 700 !important;
}

body.theme-light .text-indigo-300,
body.theme-light .text-indigo-400 {
  color: #4338CA !important;
  font-weight: 700 !important;
}

/* Badges, Pills & Status Tags */
body.theme-light [class*="bg-emerald-500/20"],
body.theme-light [class*="bg-emerald-950"],
body.theme-light #stockchat-flow-tab-content .bg-emerald-950\/40,
body.theme-light #page-bandarmology .bg-emerald-950\/40 {
  background: #DCFCE7 !important;
  border-color: #86EFAC !important;
  color: #065F46 !important;
  font-weight: 700 !important;
}

body.theme-light [class*="bg-rose-500/20"],
body.theme-light [class*="bg-rose-950"],
body.theme-light #stockchat-flow-tab-content .bg-rose-950\/40,
body.theme-light #page-bandarmology .bg-rose-950\/40 {
  background: #FEE2E2 !important;
  border-color: #FCA5A5 !important;
  color: #991B1B !important;
  font-weight: 700 !important;
}

body.theme-light [class*="bg-amber-500/20"],
body.theme-light [class*="bg-amber-950"],
body.theme-light #page-bandarmology .bg-amber-950\/80,
body.theme-light #page-stockchat .bg-amber-950\/80 {
  background: #FEF3C7 !important;
  border-color: #FCD34D !important;
  color: #92400E !important;
  font-weight: 700 !important;
}

body.theme-light [class*="bg-sky-500/20"],
body.theme-light [class*="bg-sky-950"],
body.theme-light [class*="bg-blue-600/20"] {
  background: #E0F2FE !important;
  border-color: #BAE6FD !important;
  color: #0369A1 !important;
  font-weight: 700 !important;
}

/* Master Mode Switcher Buttons */
body.theme-light button.bg-gradient-to-r.from-sky-600,
body.theme-light button[class*="from-sky-600"] {
  background: linear-gradient(135deg, #0284C7, #0369A1) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3) !important;
}

body.theme-light button.bg-gradient-to-r.from-emerald-600,
body.theme-light button[class*="from-emerald-600"] {
  background: linear-gradient(135deg, #059669, #047857) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3) !important;
}

/* ============================================================
   BANDARMOLOGY & SMART MONEY - LIGHT THEME BUTTON STANDARDIZATION
   Guarantees clean, high-contrast, professional styling in Light Mode
   ============================================================ */

/* 1. Mode Switcher (Analisis Full Emiten vs Analisis Full Market) */
body.theme-light #page-bandarmology .bandar-master-toolbar,
body.theme-light #page-bandarmology [class*="bg-slate-900\/90"][class*="rounded-2xl"] {
  background: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

body.theme-light #page-bandarmology .bandar-mode-btn:not(.active),
body.theme-light #page-bandarmology button[onclick*="setBandarmologyMode"]:not([class*="from-"]):not(.active) {
  background: #FFFFFF !important;
  color: #475569 !important;
  border: 1px solid #CBD5E1 !important;
}
body.theme-light #page-bandarmology .bandar-mode-btn:not(.active):hover,
body.theme-light #page-bandarmology button[onclick*="setBandarmologyMode"]:not([class*="from-"]):not(.active):hover {
  background: #F1F5F9 !important;
  color: #0F172A !important;
  border-color: #94A3B8 !important;
}

body.theme-light #page-bandarmology .bandar-mode-btn.active,
body.theme-light #page-bandarmology button[onclick*="setBandarmologyMode"].active,
body.theme-light #page-bandarmology button[onclick*="setBandarmologyMode"][class*="from-emerald"],
body.theme-light #page-bandarmology button[onclick*="setBandarmologyMode"][class*="from-sky"] {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

/* 2. Emiten Ticker Chips & Custom Input */
body.theme-light #page-bandarmology .bandar-ticker-bar {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}
body.theme-light #page-bandarmology .bandar-label {
  color: #475569 !important;
}
body.theme-light #page-bandarmology .bandar-ticker-btn:not(.active),
body.theme-light #page-bandarmology button[onclick*="selectStockChatTicker"]:not([class*="bg-emerald"]):not([class*="bg-blue"]):not(.active) {
  background: #FFFFFF !important;
  color: #334155 !important;
  border: 1px solid #CBD5E1 !important;
}
body.theme-light #page-bandarmology .bandar-ticker-btn:not(.active):hover,
body.theme-light #page-bandarmology button[onclick*="selectStockChatTicker"]:not([class*="bg-emerald"]):not([class*="bg-blue"]):not(.active):hover {
  background: #F1F5F9 !important;
  color: #0F172A !important;
  border-color: #94A3B8 !important;
}
body.theme-light #page-bandarmology .bandar-ticker-btn.active,
body.theme-light #page-bandarmology button[onclick*="selectStockChatTicker"].active,
body.theme-light #page-bandarmology button[onclick*="selectStockChatTicker"].bg-emerald-600 {
  background: #059669 !important;
  color: #FFFFFF !important;
  border: 1px solid #047857 !important;
}

/* Custom Ticker Input & Set Button */
body.theme-light #page-bandarmology input.bandar-input,
body.theme-light #page-bandarmology #bandar-custom-ticker {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
}
body.theme-light #page-bandarmology button.bandar-btn-set,
body.theme-light #page-bandarmology button[onclick*="bandar-custom-ticker"] {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
}
body.theme-light #page-bandarmology button.bandar-btn-set:hover,
body.theme-light #page-bandarmology button[onclick*="bandar-custom-ticker"]:hover {
  background: #F1F5F9 !important;
  color: #0F172A !important;
  border-color: #94A3B8 !important;
}

/* 3. Broker Trail Buttons (YU, CC, RX, etc.) */
body.theme-light #page-bandarmology .bandar-broker-btn:not(.active),
body.theme-light #page-bandarmology button[onclick*="setBandarmologyBroker"]:not([class*="bg-emerald"]):not(.active) {
  background: #FFFFFF !important;
  color: #334155 !important;
  border: 1px solid #CBD5E1 !important;
}
body.theme-light #page-bandarmology .bandar-broker-btn:not(.active):hover,
body.theme-light #page-bandarmology button[onclick*="setBandarmologyBroker"]:not([class*="bg-emerald"]):not(.active):hover {
  background: #F1F5F9 !important;
  color: #0F172A !important;
  border-color: #94A3B8 !important;
}
body.theme-light #page-bandarmology .bandar-broker-btn.active,
body.theme-light #page-bandarmology button[onclick*="setBandarmologyBroker"].active,
body.theme-light #page-bandarmology button[onclick*="setBandarmologyBroker"].bg-emerald-600 {
  background: #059669 !important;
  color: #FFFFFF !important;
  border: 1px solid #047857 !important;
}

/* 4. Action Buttons (Detail Broker, Buka Saham, Tanya AI) */
body.theme-light #page-bandarmology .bandar-action-btn,
body.theme-light #page-bandarmology button.bg-slate-800,
body.theme-light #page-bandarmology button[class*="bg-slate-800"],
body.theme-light #page-stockchat button.bg-slate-800,
body.theme-light #page-stockchat button[class*="bg-slate-800"] {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}
body.theme-light #page-bandarmology .bandar-action-btn:hover,
body.theme-light #page-bandarmology button.bg-slate-800:hover,
body.theme-light #page-bandarmology button[class*="bg-slate-800"]:hover,
body.theme-light #page-stockchat button.bg-slate-800:hover,
body.theme-light #page-stockchat button[class*="bg-slate-800"]:hover {
  background: #F1F5F9 !important;
  color: #0F172A !important;
  border-color: #94A3B8 !important;
}

/* Primary Action Buttons (Sky / Emerald) */
body.theme-light #page-bandarmology button.bg-sky-600,
body.theme-light #page-bandarmology button[class*="bg-sky-600"],
body.theme-light #page-stockchat button.bg-sky-600,
body.theme-light #page-stockchat button[class*="bg-sky-600"] {
  background: #0284C7 !important;
  color: #FFFFFF !important;
  border: 1px solid #0369A1 !important;
}
body.theme-light #page-bandarmology button.bg-sky-600:hover,
body.theme-light #page-bandarmology button[class*="bg-sky-600"]:hover,
body.theme-light #page-stockchat button.bg-sky-600:hover,
body.theme-light #page-stockchat button[class*="bg-sky-600"]:hover {
  background: #0369A1 !important;
  color: #FFFFFF !important;
}

body.theme-light #page-bandarmology button.bg-emerald-600,
body.theme-light #page-bandarmology button[class*="bg-emerald-600"],
body.theme-light #page-stockchat button.bg-emerald-600,
body.theme-light #page-stockchat button[class*="bg-emerald-600"] {
  background: #059669 !important;
  color: #FFFFFF !important;
  border: 1px solid #047857 !important;
}
body.theme-light #page-bandarmology button.bg-emerald-600:hover,
body.theme-light #page-bandarmology button[class*="bg-emerald-600"]:hover,
body.theme-light #page-stockchat button.bg-emerald-600:hover,
body.theme-light #page-stockchat button[class*="bg-emerald-600"]:hover {
  background: #047857 !important;
  color: #FFFFFF !important;
}

/* 5. Filter & Limit Controls (Top 5 / Top 10, Semua / Asing / Domestik) */
body.theme-light #page-bandarmology .bandar-filter-bar,
body.theme-light #page-bandarmology [class*="bg-slate-950"][class*="rounded-lg"] {
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
}
body.theme-light #page-bandarmology .bandar-filter-bar span,
body.theme-light #page-bandarmology [class*="bg-slate-950"][class*="rounded-lg"] span {
  color: #475569 !important;
}

body.theme-light #page-bandarmology .bandar-limit-btn:not(.active),
body.theme-light #page-bandarmology .bandar-filter-btn:not(.active),
body.theme-light #page-bandarmology button[onclick*="setStockChatTableLimit"]:not(.active):not([class*="bg-blue-600"]),
body.theme-light #page-bandarmology button[onclick*="setStockChatBrokerFilter"]:not(.active):not([class*="bg-"]):not([class*="text-white"]) {
  background: transparent !important;
  color: #475569 !important;
  border: none !important;
}
body.theme-light #page-bandarmology .bandar-limit-btn:not(.active):hover,
body.theme-light #page-bandarmology .bandar-filter-btn:not(.active):hover,
body.theme-light #page-bandarmology button[onclick*="setStockChatTableLimit"]:not(.active):not([class*="bg-blue-600"]):hover,
body.theme-light #page-bandarmology button[onclick*="setStockChatBrokerFilter"]:not(.active):not([class*="bg-"]):hover {
  background: #E2E8F0 !important;
  color: #0F172A !important;
}

/* Active Filter Pill Buttons */
body.theme-light #page-bandarmology .bandar-filter-btn.active.bg-slate-700,
body.theme-light #page-bandarmology button.bg-slate-700[onclick*="setStockChatBrokerFilter"],
body.theme-light #page-stockchat button.bg-slate-700[onclick*="setStockChatBrokerFilter"] {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}
body.theme-light #page-bandarmology .bandar-filter-btn.active.bg-amber-600,
body.theme-light #page-bandarmology button.bg-amber-600[onclick*="setStockChatBrokerFilter"],
body.theme-light #page-stockchat button.bg-amber-600[onclick*="setStockChatBrokerFilter"] {
  background: #D97706 !important;
  color: #FFFFFF !important;
  border: 1px solid #B45309 !important;
}
body.theme-light #page-bandarmology .bandar-filter-btn.active.bg-indigo-600,
body.theme-light #page-bandarmology button.bg-indigo-600[onclick*="setStockChatBrokerFilter"],
body.theme-light #page-stockchat button.bg-indigo-600[onclick*="setStockChatBrokerFilter"] {
  background: #4F46E5 !important;
  color: #FFFFFF !important;
  border: 1px solid #4338CA !important;
}

/* Broker Selector Chips & Buttons */
body.theme-light button[onclick*="selectBrokerTrail"] {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #1E293B !important;
}

body.theme-light button[onclick*="selectBrokerTrail"]:hover {
  background: #F1F5F9 !important;
  color: #0F172A !important;
}

body.theme-light button.bg-emerald-600[onclick*="selectBrokerTrail"],
body.theme-light button.bg-emerald-700[onclick*="selectBrokerTrail"] {
  background: #059669 !important;
  color: #FFFFFF !important;
  border-color: #059669 !important;
}

/* ============================================================
   SIDEBAR NAV & TOOLBAR UNIFIED COLOR NORMALIZATION
   Eliminates distracting rainbow toolbar icons and aligns to theme
   ============================================================ */
.side-nav button i.ti,
.side-sec-toggle i.ti {
  color: #FFFFFF !important;
  transition: color var(--spring);
}
.side-nav button:hover i.ti,
.side-sec-toggle:hover i.ti {
  color: #FFFFFF !important;
}
.side-nav button.on i.ti,
.side-group.has-active .side-sec-toggle i.ti {
  color: #FFFFFF !important;
}

.toolbar i.ti,
.toolbar svg,
.asset-toolbar i.ti,
.asset-toolbar svg,
.topbar i.ti,
.topbar svg {
  color: #FFFFFF !important;
}

body.theme-light .side-nav button i.ti,
body.theme-light .side-sec-toggle i.ti {
  color: #64748B !important;
}
body.theme-light .side-nav button:hover i.ti,
body.theme-light .side-sec-toggle:hover i.ti {
  color: #2563EB !important;
}
body.theme-light .side-nav button.on i.ti,
body.theme-light .side-group.has-active .side-sec-toggle i.ti {
  color: #2563EB !important;
}

/* ============================================================
   STANDARDIZED ASSET TOOLBAR & CASH SYNC BANNERS
   Unified styling across Saham, Crypto, ETF, and Reksa Dana
   ============================================================ */
.asset-toolbar {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 12px;
  margin-bottom: 14px;
}
body.theme-light .asset-toolbar {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.cash-sync-banner {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 9px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}
.cash-sync-banner > span:first-child {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text2) !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap !important;
}
.cash-sync-banner [id$="-disp"] {
  font-family: var(--font-mono) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
}
.cash-sync-banner button {
  border: 1px solid var(--border) !important;
  color: var(--text2) !important;
  border-radius: 6px !important;
}
.cash-sync-banner button:hover {
  background: var(--bg3) !important;
  color: var(--text) !important;
  border-color: var(--accent) !important;
}

body.theme-light .cash-sync-banner {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
body.theme-light .cash-sync-banner > span:first-child {
  color: #475569 !important;
}
body.theme-light .cash-sync-banner [id$="-disp"] {
  color: #0F172A !important;
}
body.theme-light .cash-sync-banner button {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #334155 !important;
}
body.theme-light .cash-sync-banner button:hover {
  background: #F1F5F9 !important;
  color: #0F172A !important;
  border-color: #94A3B8 !important;
}

/* Tables, Grid Headers & Rows */
body.theme-light table,
body.theme-light #page-bandarmology table,
body.theme-light #page-stockchat table {
  background: #FFFFFF !important;
  color: #0F172A !important;
}

body.theme-light thead,
body.theme-light thead[class*="bg-slate-"],
body.theme-light thead.bg-slate-950,
body.theme-light thead.bg-slate-900\/90,
body.theme-light #page-bandarmology thead,
body.theme-light #page-stockchat thead {
  background: #F8FAFC !important;
  color: #334155 !important;
  border-bottom: 2px solid #E2E8F0 !important;
}

body.theme-light thead th,
body.theme-light thead[class*="bg-slate-"] th,
body.theme-light thead.bg-slate-950 th,
body.theme-light thead.bg-slate-900\/90 th,
body.theme-light #page-bandarmology thead th,
body.theme-light #page-stockchat thead th {
  color: #475569 !important;
  font-weight: 700 !important;
}

body.theme-light tbody[class*="bg-slate-"] {
  background: #FFFFFF !important;
}

body.theme-light tbody tr,
body.theme-light #page-bandarmology tbody tr,
body.theme-light #page-stockchat tbody tr {
  border-color: #F1F5F9 !important;
  color: #0F172A !important;
}

body.theme-light tbody tr:hover,
body.theme-light tbody tr[class*="hover:bg-slate-800"]:hover,
body.theme-light #page-bandarmology tbody tr:hover,
body.theme-light #page-stockchat tbody tr:hover {
  background: #F8FAFC !important;
}

body.theme-light td .text-slate-200,
body.theme-light td.text-slate-200 {
  color: #0F172A !important;
}
body.theme-light td .text-slate-300,
body.theme-light td.text-slate-300 {
  color: #1E293B !important;
}
body.theme-light td .text-slate-400,
body.theme-light td.text-slate-400 {
  color: #475569 !important;
}

/* Inputs & Form Controls */
body.theme-light input,
body.theme-light #page-bandarmology input,
body.theme-light #page-stockchat input {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

body.theme-light input::placeholder,
body.theme-light #page-bandarmology input::placeholder,
body.theme-light #page-stockchat input::placeholder {
  color: #94A3B8 !important;
}

/* Progress Bar Tracks (No Black Bars in Light Mode) */
body.theme-light .w-full.bg-slate-950.h-2,
body.theme-light [class*="bg-slate-950"].h-2,
body.theme-light [class*="bg-slate-950"].h-1,
body.theme-light [class*="bg-slate-950"].h-1\.5,
body.theme-light [class*="bg-slate-900"].rounded-full.h-3 {
  background: #E2E8F0 !important;
}

/* Sector Heatmap Tiles (White Text on Vivid Color) */
body.theme-light [class*="bg-emerald-600"],
body.theme-light [class*="bg-emerald-700"],
body.theme-light [class*="bg-emerald-800"],
body.theme-light [class*="bg-emerald-900"] {
  color: #FFFFFF !important;
}

body.theme-light [class*="bg-rose-600"],
body.theme-light [class*="bg-rose-700"],
body.theme-light [class*="bg-rose-800"],
body.theme-light [class*="bg-rose-900"] {
  color: #FFFFFF !important;
}

/* Chat History & AI Dialogues */
body.theme-light #stockchat-history-box {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
}

body.theme-light #stockchat-history-box .bg-slate-900 {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
}

body.theme-light #stockchat-history-box strong {
  color: #0F172A !important;
}

/* ── 4 ASSET CLASS CASH WIDGETS (RDN, Crypto, US ETF, Reksa Dana) ── */
body.theme-light div[style*="border:1px solid #41f3a733"],
body.theme-light div[style*="border: 1px solid #41f3a733"],
body.theme-light div[style*="#41f3a733"] {
  background: #F0FDF4 !important;
  border: 1px solid #86EFAC !important;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.08) !important;
}
body.theme-light div[style*="#41f3a733"] span[style*="#41f3a7"],
body.theme-light #cash-saham-disp {
  color: #065F46 !important;
  font-weight: 800 !important;
}
body.theme-light div[style*="#41f3a733"] button {
  color: #065F46 !important;
  border-color: #86EFAC !important;
  background: #FFFFFF !important;
}
body.theme-light div[style*="#41f3a733"] button:hover {
  background: #DCFCE7 !important;
}
body.theme-light div[style*="#41f3a733"] span[style*="var(--text3)"] {
  color: #475569 !important;
}

body.theme-light div[style*="border:1px solid #f7931a33"],
body.theme-light div[style*="border: 1px solid #f7931a33"],
body.theme-light div[style*="#f7931a33"] {
  background: #FFFBEB !important;
  border: 1px solid #FCD34D !important;
  box-shadow: 0 1px 3px rgba(245, 158, 11, 0.08) !important;
}
body.theme-light div[style*="#f7931a33"] span[style*="#f7931a"] {
  color: #92400E !important;
  font-weight: 800 !important;
}
body.theme-light div[style*="#f7931a33"] button {
  color: #92400E !important;
  border-color: #FCD34D !important;
  background: #FFFFFF !important;
}

body.theme-light div[style*="border:1px solid #00c8ff33"],
body.theme-light div[style*="border: 1px solid #00c8ff33"],
body.theme-light div[style*="#00c8ff33"] {
  background: #F0F9FF !important;
  border: 1px solid #BAE6FD !important;
  box-shadow: 0 1px 3px rgba(14, 165, 233, 0.08) !important;
}
body.theme-light div[style*="#00c8ff33"] span[style*="#00c8ff"] {
  color: #0369A1 !important;
  font-weight: 800 !important;
}
body.theme-light div[style*="#00c8ff33"] button {
  color: #0369A1 !important;
  border-color: #BAE6FD !important;
  background: #FFFFFF !important;
}

body.theme-light div[style*="border:1px solid #8070d233"],
body.theme-light div[style*="border: 1px solid #8070d233"],
body.theme-light div[style*="#8070d233"] {
  background: #F5F3FF !important;
  border: 1px solid #DDD6FE !important;
  box-shadow: 0 1px 3px rgba(124, 58, 237, 0.08) !important;
}
body.theme-light div[style*="#8070d233"] span[style*="#8070d2"] {
  color: #5B21B6 !important;
  font-weight: 800 !important;
}
body.theme-light div[style*="#8070d233"] button {
  color: #5B21B6 !important;
  border-color: #DDD6FE !important;
  background: #FFFFFF !important;
}

/* ── PORTOFOLIO DONUT CHART & LEGEND ──
   FIX (2026-09-11, user report: "legend tidak ada indikator warna" in
   light theme): this rule used a plain descendant selector (`div`, no
   `>`), so besides the intended legend ROW container it also matched the
   tiny 10x10 color-swatch <div> nested inside each row (see
   04-render.js renderPortofolio()) — forcing every swatch to the same
   #F8FAFC row background regardless of its own inline sector/asset-class
   color, so the legend showed no color cue at all in light theme. Scoped
   to `> div` (direct children only, matching the identical, correctly
   scoped rule already above at "Donut Chart Legend in Portfolio") so it
   no longer reaches into the swatch. */
body.theme-light #porto-donut-legend > div {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}
body.theme-light #porto-donut-legend span[style*="var(--text2)"] {
  color: #1E293B !important;
  font-weight: 600 !important;
}
body.theme-light #porto-donut-legend span[style*="var(--text3)"] {
  color: #475569 !important;
  font-weight: 600 !important;
}

/* ── THEME TOGGLE FLOATING BUTTON ── */
#theme-toggle-btn {
  color: #FFFFFF !important;
}

/* ── CRYPTO RADAR & SIGNAL BANNER ── */
body.theme-light #cr-signal-radar-container > div {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}
body.theme-light #cr-signal-radar-container span[style*="#f8fafc"],
body.theme-light #cr-signal-radar-container span[style*="#fff"],
body.theme-light #cr-signal-radar-container span[style*="#ffffff"] {
  color: #0F172A !important;
}

/* ── BROKER CODE & TYPE BADGES IN LIGHT THEME ── */
body.theme-light span.bg-slate-800,
body.theme-light span[class*="bg-slate-800"],
body.theme-light div.bg-slate-800,
body.theme-light div[class*="bg-slate-800"]:not(button) {
  background: #F1F5F9 !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
}
body.theme-light span.bg-sky-500\/20,
body.theme-light span[class*="bg-sky-500"] {
  background: #E0F2FE !important;
  color: #0369A1 !important;
  border: 1px solid #BAE6FD !important;
}
body.theme-light span[class*="bg-slate-800/80"] {
  background: #F1F5F9 !important;
  color: #475569 !important;
  border: 1px solid #CBD5E1 !important;
}

/* ── TOP 5 BUYER & SELLER TABLE HEADERS & TOTALS ── */
body.theme-light [class*="from-emerald-950"] {
  background: #ECFDF5 !important;
  background-image: none !important;
  border-bottom: 1px solid #A7F3D0 !important;
  color: #065F46 !important;
}
body.theme-light [class*="from-rose-950"] {
  background: #FEF2F2 !important;
  background-image: none !important;
  border-bottom: 1px solid #FECACA !important;
  color: #991B1B !important;
}
body.theme-light [class*="bg-slate-950/90"],
body.theme-light [class*="bg-slate-950/80"],
body.theme-light [class*="bg-slate-950/70"],
body.theme-light [class*="bg-slate-950/60"] {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
  color: #0F172A !important;
}
body.theme-light [class*="bg-slate-950/90"] strong,
body.theme-light [class*="bg-slate-950/80"] strong {
  color: #0F172A !important;
}

/* ── TANYA AI BUTTONS IN TABLES ── */
body.theme-light table button[class*="bg-slate-800"],
body.theme-light table button.bg-slate-800 {
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  color: #334155 !important;
}
body.theme-light table button[class*="bg-slate-800"]:hover,
body.theme-light table button.bg-slate-800:hover {
  background: #059669 !important;
  color: #FFFFFF !important;
  border-color: #059669 !important;
}

/* ── ALUR MUTASI DANA BROKER CARD DETAILS ── */
body.theme-light [class*="bg-slate-950"].rounded-full.h-3 {
  background: #E2E8F0 !important;
  border-color: #CBD5E1 !important;
}
body.theme-light #page-bandarmology .border-dashed {
  border-color: #CBD5E1 !important;
}
body.theme-light #page-bandarmology [class*="from-slate-900"] {
  background: #FFFFFF !important;
  background-image: none !important;
  border-color: #E2E8F0 !important;
}
body.theme-light #page-stockchat [class*="from-slate-900"] {
  background: #FFFFFF !important;
  background-image: none !important;
  border-color: #E2E8F0 !important;
}

/* ══════════════════════════════════════════════════════════
   GLOBAL ANIMATIONS & SVG SAFETY CONSTRAINTS
   ══════════════════════════════════════════════════════════ */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animate-spin {
  animation: spin 1s linear infinite !important;
  display: inline-block;
  flex-shrink: 0;
}
svg {
  max-width: 100%;
  vertical-align: middle;
}

/* ══════════════════════════════════════════════════════════
   STOCKCHAT AI & BANDARMOLOGY COCKPIT CORE STYLES (DARK & LIGHT)
   ══════════════════════════════════════════════════════════ */
#page-stockchat,
#page-bandarmology {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Container & Spacing Fallbacks */
.stockchat-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 40px;
}

/* Header & Controls */
.stockchat-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  background: rgba(15, 23, 42, 0.85);
  padding: 16px 20px;
  border-radius: 16px;
  border: 1px solid #1E293B;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
}

.stockchat-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  background: #1E293B;
  color: #CBD5E1;
  border: 1px solid #334155;
  cursor: pointer;
  transition: all 0.2s ease;
}
.stockchat-action-btn:hover {
  background: #334155;
  color: #FFFFFF;
  border-color: #475569;
}

/* Subtabs bar */
.stockchat-subtabs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: rgba(15, 23, 42, 0.65);
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(30, 41, 59, 0.8);
}

.stockchat-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  color: #94A3B8;
  background: transparent;
  transition: all 0.15s ease;
}
.stockchat-tab-btn:hover {
  color: #E2E8F0;
  background: rgba(30, 41, 59, 0.6);
}
.stockchat-tab-btn.active {
  background: var(--brand-primary) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(0, 0, 255, 0.35);
}

/* Timeframe buttons */
.stockchat-tf-bar,
.bandar-tf-bar {
  display: inline-flex;
  background: #070A12;
  border: 1px solid #1E293B;
  border-radius: 8px;
  padding: 2px;
}
.stockchat-tf-btn,
.bandar-tf-btn {
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #94A3B8;
  cursor: pointer;
  transition: all 0.15s ease;
}
.stockchat-tf-btn:hover,
.bandar-tf-btn:hover {
  color: #FFFFFF;
}
.stockchat-tf-btn.active,
.bandar-tf-btn.active {
  background: var(--brand-primary) !important;
  color: #FFFFFF !important;
}

/* Ticker Bar */
.bandar-ticker-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(15, 23, 42, 0.65);
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(30, 41, 59, 0.8);
  overflow-x: auto;
  white-space: nowrap;
}
.bandar-ticker-btn {
  padding: 4px 9px;
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 700;
  border-radius: 6px;
  background: #1E293B;
  color: #94A3B8;
  border: 1px solid rgba(51, 65, 85, 0.6);
  cursor: pointer;
  transition: all 0.15s ease;
}
.bandar-ticker-btn:hover {
  color: #FFFFFF;
  background: #334155;
}
.bandar-ticker-btn.active {
  background: var(--brand-primary) !important;
  color: #FFFFFF !important;
  border-color: var(--brand-primary) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 255, 0.35);
}
.bandar-input {
  background: #070A12;
  border: 1px solid #334155;
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  outline: none;
  width: 70px;
  text-align: center;
}
.bandar-input:focus {
  border-color: var(--accent);
}
.bandar-btn-set {
  background: #1E293B;
  color: #CBD5E1;
  border: 1px solid #334155;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.bandar-btn-set:hover {
  background: #334155;
  color: #FFFFFF;
}

/* Preset Action Prompts */
.stockchat-presets-box {
  background: rgba(15, 23, 42, 0.65);
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(30, 41, 59, 0.8);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stockchat-preset-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(51, 65, 85, 0.6);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 0;
}
.stockchat-preset-btn:hover {
  background: rgba(51, 65, 85, 0.8);
  border-color: rgba(59, 130, 246, 0.5);
  transform: translateY(-1px);
}
.stockchat-preset-btn .preset-title {
  font-size: 11px;
  font-weight: 700;
  color: #E2E8F0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.stockchat-preset-btn .preset-desc {
  font-size: 10px;
  color: #94A3B8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  margin-top: 2px;
}

/* Chat History Box & Bubbles */
#stockchat-history-box {
  background: rgba(7, 10, 18, 0.85);
  border: 1px solid #1E293B;
  border-radius: 16px;
  padding: 18px;
  min-height: 420px;
  max-height: 600px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
}

.stockchat-avatar {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 11px;
  flex-shrink: 0;
}

.stockchat-input-form {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.stockchat-input-field {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid #334155;
  color: #F8FAFC;
  font-size: 12px;
  outline: none;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.stockchat-input-field:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--brand-soft);
}
.stockchat-send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 20px;
  border-radius: 12px;
  background: var(--brand-primary);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 255, 0.35);
}
.stockchat-send-btn:hover {
  filter: brightness(1.15);
}
.stockchat-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── LIGHT THEME OVERRIDES ── */
body.theme-light .stockchat-topbar {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}
body.theme-light .stockchat-topbar h1 {
  color: #0F172A !important;
}
body.theme-light .stockchat-topbar p {
  color: #64748B !important;
}

body.theme-light .stockchat-subtabs-bar,
body.theme-light .bandar-ticker-bar,
body.theme-light .stockchat-presets-box {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

/* ══════════════════════════════════════════════
   STOCKCHAT & BANDARMOLOGY WORKSTATION THEME ENGINE
   ══════════════════════════════════════════════ */
.stockchat-topbar {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  padding: 16px 20px;
  box-shadow: var(--card-shadow);
}
.stockchat-title {
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.3px;
}
.stockchat-sub {
  color: var(--text3);
  font-size: 12px;
  margin-top: 2px;
}
.stockchat-badge-live {
  background: rgba(16, 185, 129, 0.15);
  color: var(--green);
  border: 1px solid rgba(16, 185, 129, 0.35);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.5px;
}

.stockchat-subtabs-bar {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  padding: 8px 12px;
}
.stockchat-tab-btn {
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
  background: transparent;
  color: var(--text3);
}
.stockchat-tab-btn:hover {
  color: var(--text);
  background: var(--bg3);
}
.stockchat-tab-btn.active {
  background: var(--brand-primary, #3B82F6);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35);
}

.bandar-ticker-bar {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bandar-ticker-btn {
  padding: 4px 9px;
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text2);
  cursor: pointer;
  transition: all 0.12s;
}
.bandar-ticker-btn:hover {
  color: var(--text);
  border-color: var(--brand-primary);
  background: var(--bg4);
}
.bandar-ticker-btn.active {
  background: var(--brand-primary);
  color: #ffffff;
  border-color: var(--brand-primary);
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
}

/* CARDS & PANELS */
.bandar-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  padding: 16px;
  box-shadow: var(--card-shadow);
  color: var(--text);
}
.bandar-banner-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  padding: 18px 20px;
  box-shadow: var(--card-shadow);
}
.bandar-kpi-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bandar-kpi-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text3);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bandar-kpi-val {
  font-size: 17px;
  font-weight: 900;
  font-family: var(--font-mono);
  color: var(--text);
}
.bandar-kpi-sub {
  font-size: 11px;
  color: var(--text3);
}

/* SPECTRUM MUTATION */
.bandar-spectrum-box {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  padding: 14px;
}
.bandar-node-inst {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: var(--radius-md, 8px);
  padding: 10px 12px;
}
.bandar-node-retail {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: var(--radius-md, 8px);
  padding: 10px 12px;
}
.bandar-arrow-badge {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.bandar-arrow-badge.accum {
  background: rgba(16, 185, 129, 0.15);
  color: var(--green);
  border: 1px solid rgba(16, 185, 129, 0.4);
}
.bandar-arrow-badge.distrib {
  background: rgba(239, 68, 68, 0.15);
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, 0.4);
}

/* TABLES IN BANDARMOLOGY */
.bandar-table-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.bandar-table-head-buy {
  background: rgba(16, 185, 129, 0.12);
  border-bottom: 1px solid rgba(16, 185, 129, 0.3);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bandar-table-head-sell {
  background: rgba(239, 68, 68, 0.12);
  border-bottom: 1px solid rgba(239, 68, 68, 0.3);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bandar-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.bandar-table thead th {
  background: var(--bg3);
  color: var(--text3);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.bandar-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-sans);
}
.bandar-table tbody tr:hover {
  background: rgba(59, 130, 246, 0.05);
}
.bandar-table-foot {
  background: var(--bg3);
  border-top: 1px solid var(--border);
  padding: 10px 12px;
  font-size: 11px;
  color: var(--text2);
}

/* HISTORICAL 1-YEAR MATRIX */
.bandar-matrix-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  padding: 16px;
  box-shadow: var(--card-shadow);
}

/* STOCKCHAT AI INTERACTION & BUBBLES */
.stockchat-chat-container {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl, 16px);
  box-shadow: var(--card-shadow);
}
.stockchat-history-box {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
}
.stockchat-bubble-ai {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 14px;
  border-top-left-radius: 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.stockchat-bubble-user {
  background: var(--brand-primary);
  color: #FFFFFF;
  border-radius: 14px;
  border-top-right-radius: 2px;
  box-shadow: 0 2px 10px rgba(0, 0, 255, 0.25);
}
.stockchat-preset-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  transition: all 0.15s ease;
  cursor: pointer;
}
.stockchat-preset-card:hover {
  background: var(--bg3);
  border-color: #3B82F6;
  transform: translateY(-1px);
}
.stockchat-widget-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

/* LIGHT THEME OVERRIDES */
body.theme-light .bandar-card,
body.theme-light .bandar-banner-card,
body.theme-light .bandar-kpi-card,
body.theme-light .bandar-table-box,
body.theme-light .bandar-matrix-box,
body.theme-light .stockchat-topbar,
body.theme-light .stockchat-subtabs-bar,
body.theme-light .bandar-ticker-bar,
body.theme-light .stockchat-chat-container,
body.theme-light .stockchat-preset-card,
body.theme-light .stockchat-widget-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
body.theme-light .bandar-spectrum-box,
body.theme-light .bandar-table thead th,
body.theme-light .bandar-table-foot,
body.theme-light .stockchat-history-box,
body.theme-light #stockchat-history-box {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}
body.theme-light .stockchat-bubble-ai {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  color: #0F172A !important;
}
body.theme-light .bandar-ticker-btn {
  background: #F1F5F9 !important;
  color: #334155 !important;
  border-color: #CBD5E1 !important;
}
body.theme-light .bandar-ticker-btn:hover {
  background: #E2E8F0 !important;
  color: #0F172A !important;
}
body.theme-light .bandar-ticker-btn.active {
  background: #2563EB !important;
  color: #FFFFFF !important;
  border-color: #2563EB !important;
}
body.theme-light .stockchat-tab-btn:not(.active) {
  color: #475569 !important;
  background: transparent !important;
}
body.theme-light .stockchat-tab-btn:not(.active):hover {
  background: #F1F5F9 !important;
  color: #0F172A !important;
}
body.theme-light .stockchat-input-field {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}
body.theme-light .stockchat-input-field::placeholder {
  color: #94A3B8 !important;
}

/* ══════════════════════════════════════════════════════════
   FINTECH BENTO GRID & STOCK INTELLIGENCE STYLES
   ══════════════════════════════════════════════════════════ */
.intel-bento-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 960px) {
  .intel-bento-grid {
    grid-template-columns: 1fr;
  }
}
.intel-bento-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.intel-section-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

/* Circular Ring Score Gauge */
.intel-gauge-wrapper {
  position: relative;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.intel-gauge-svg {
  transform: rotate(-90deg);
  width: 96px;
  height: 96px;
}
.intel-gauge-bg {
  fill: none;
  stroke: var(--bg3);
  stroke-width: 8;
}
.intel-gauge-prog {
  fill: none;
  stroke: #10B981;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s ease;
}
.intel-gauge-text {
  position: absolute;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.intel-gauge-score {
  font-size: 18px;
  font-weight: 900;
  font-family: var(--font-mono);
  color: #10B981;
  line-height: 1;
}
.intel-gauge-denom {
  font-size: 10px;
  font-weight: 700;
  color: var(--text3);
  font-family: var(--font-mono);
}

/* 6-Grid Key Stats */
.intel-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.intel-stat-item {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.intel-stat-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text3);
  letter-spacing: 0.3px;
}
.intel-stat-val {
  font-size: 15px;
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.intel-stat-tag {
  font-size: 9.5px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  width: fit-content;
}

/* Trading Plan Grid */
.intel-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 10px 12px;
}
.intel-plan-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  padding: 3px 0;
}

/* Seasonality Heatmap */
.intel-season-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-family: var(--font-mono);
  text-align: center;
}
.intel-season-tbl th {
  padding: 6px 4px;
  color: var(--text3);
  font-weight: 700;
  border-bottom: 1px solid var(--border2);
  font-size: 10px;
}
.intel-season-tbl td {
  padding: 5px 3px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.heat-strong-up {
  background: rgba(16, 185, 129, 0.25);
  color: #34d399;
  font-weight: 700;
  border-radius: 4px;
}
.heat-soft-up {
  background: rgba(16, 185, 129, 0.12);
  color: #6ee7b7;
  border-radius: 4px;
}
.heat-soft-dn {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
  border-radius: 4px;
}
.heat-strong-dn {
  background: rgba(239, 68, 68, 0.25);
  color: #f87171;
  font-weight: 700;
  border-radius: 4px;
}

/* Structural Anomaly & ARA detector elements */
.anomaly-table-row {
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.anomaly-table-row:hover {
  background: rgba(59, 130, 246, 0.12) !important;
}
.ara-cand-card {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ara-cand-card:hover {
  background: var(--bg4);
  border-color: #38bdf8;
  transform: translateX(2px);
}

/* ══════════════════════════════════════════════
   SECTORAL INSIGHT FLOW & ROTATION STYLES
   ══════════════════════════════════════════════ */
@media (max-width: 900px) {
  .grid-flow-news {
    grid-template-columns: 1fr !important;
  }
}
.si-flow-row:hover {
  border-color: var(--accent) !important;
  background: var(--bg3) !important;
}
.si-tf-btn.on,
.si-view-btn.on {
  background: var(--accent) !important;
  color: #ffffff !important;
  font-weight: 700;
}

/* ── D3 SECTORAL CMF BAR CHART: ENTRANCE, HOVER & TOOLTIP POLISH ── */
.si-d3-row {
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity;
}
.si-d3-row-bg {
  transition: fill 0.18s ease, stroke 0.18s ease;
}
.si-d3-bar {
  transition: filter 0.22s ease, opacity 0.22s ease;
  will-change: transform, width, height, y;
}
.si-d3-row:hover .si-d3-bar.is-positive-bar {
  filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.45));
}
.si-d3-row:hover .si-d3-bar.is-negative-bar {
  filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.45));
}
.si-d3-label-group text {
  transition: fill 0.2s ease, font-weight 0.2s ease;
}
.si-d3-val-label {
  transition: fill 0.2s ease, font-size 0.2s ease;
}
#si-d3-tooltip {
  transition: opacity 0.16s ease, transform 0.16s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity, left, top;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
@keyframes siBarClickPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.025); }
  100% { transform: scale(1); }
}
.si-bar-clicked {
  animation: siBarClickPulse 0.28s ease-out;
}

/* ── Sectoral Cycle Matrix (4-Quadrant) ── */
.si-matrix-node {
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
  will-change: transform, opacity;
}
.si-matrix-node circle {
  transition: r 0.2s ease, filter 0.2s ease, stroke-width 0.2s ease;
}
.si-matrix-node:hover circle {
  filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.6));
}
.si-matrix-quad-card {
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.si-matrix-quad-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}
.si-matrix-sector-chip {
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.si-matrix-sector-chip:hover {
  transform: translateX(2px);
  border-color: var(--accent);
}
.si-matrix-quad-label {
  letter-spacing: 0.5px;
  font-weight: 700;
  text-transform: uppercase;
}

/* ── Sectoral Cycle Matrix - Legend Overlay & Summary ── */
.si-matrix-legend-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: rgba(11, 15, 25, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 8px;
  border: 1px solid rgba(59, 130, 246, 0.35);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  padding: 14px 16px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  transform: scale(0.985);
}
.si-matrix-legend-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
}
body.theme-light .si-matrix-legend-overlay {
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(0, 0, 255, 0.25);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.si-matrix-legend-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 10px 0;
  flex: 1;
}
@media (max-width: 640px) {
  .si-matrix-legend-grid {
    grid-template-columns: 1fr;
  }
}

.si-matrix-legend-card {
  border-radius: 7px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  font-size: 11px;
  line-height: 1.45;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.si-matrix-legend-card:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.si-matrix-legend-trigger-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 25;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  background: rgba(19, 27, 46, 0.88);
  border: 1px solid rgba(59, 130, 246, 0.35);
  color: #38bdf8;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.si-matrix-legend-trigger-btn:hover {
  background: rgba(59, 130, 246, 0.22);
  border-color: #38bdf8;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(56, 189, 248, 0.25);
}
body.theme-light .si-matrix-legend-trigger-btn {
  background: rgba(241, 245, 249, 0.94);
  border-color: rgba(0, 0, 255, 0.25);
  color: #0000ff;
}
body.theme-light .si-matrix-legend-trigger-btn:hover {
  background: rgba(0, 0, 255, 0.1);
  color: #0000ff;
  border-color: #0000ff;
}

/* Horizontal Strip Legend */
.si-matrix-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
@media (max-width: 768px) {
  .si-matrix-summary-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .si-matrix-summary-strip {
    grid-template-columns: 1fr;
  }
}

.si-matrix-strip-item {
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.si-matrix-strip-item:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ── Bandarmology Smart Money Flow: 4-chart grid, always exactly 2 per
   row on desktop/tablet (2x2), collapsing to 1 column only on narrow
   mobile viewports. A plain `repeat(auto-fit,minmax(Npx,1fr))` inline
   style can't express "always exactly 2" — on a wide enough container
   auto-fit still packs in a 3rd column before wrapping (reported by the
   user via screenshot: 3 charts on top, 1 alone on the second row,
   instead of the intended 2+2), and a fixed `repeat(2,1fr)` alone would
   never collapse to 1 column on phones. This class does both via a
   media query, which an inline style cannot do. ── */
.bandar-smart-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 760px) {
  .bandar-smart-chart-grid {
    grid-template-columns: 1fr;
  }
}