
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#090909;--bg2:#0f0f0f;--bg3:#141414;--bg4:#1a1a1a;--bg5:#202020;
  --b1:#1e1e1e;--b2:#282828;--b3:#333;
  --t1:#f0f0f0;--t2:#c8c8c8;--t3:#666;--t4:#444;--t5:#2a2a2a;
  --grn:#00d084;--grn2:#00a865;--grn-d:rgba(0,208,132,.12);
  --red:#ff3b5c;--red2:#cc2244;--red-d:rgba(255,59,92,.12);
  --bl:#4d9fff;--bl-d:rgba(77,159,255,.12);
  --am:#f5c518;--am-d:rgba(245,197,24,.12);
  --pu:#a855f7;--or:#f97316;
  --chart-bg:#07070a;--chart-grid:#0f0f15;--chart-cross:#00a8e8;--chart-text:#50505f;--chart-brd:#1e1e25;--chart-up:#00cc66;--chart-dn:#ff3344;--chart-vol:rgba(0,168,232,0.2);
  --sans:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'Helvetica Neue',Helvetica,Arial,sans-serif;
}
:root[data-theme="light"]{
  --bg:#eef2f7;--bg2:#f8fafc;--bg3:#ffffff;--bg4:#edf2f7;--bg5:#e2e8f0;
  --b1:#d7dee8;--b2:#c4cedb;--b3:#aeb9c8;
  --t1:#0f172a;--t2:#334155;--t3:#64748b;--t4:#94a3b8;--t5:#dbe4ef;
  --grn:#0f9f66;--grn2:#0b7d50;--grn-d:rgba(15,159,102,.12);
  --red:#d92d4c;--red2:#b3223e;--red-d:rgba(217,45,76,.12);
  --bl:#2563eb;--bl-d:rgba(37,99,235,.12);
  --am:#b77900;--am-d:rgba(183,121,0,.12);
  --pu:#7c3aed;--or:#ea580c;
  --chart-bg:#ffffff;--chart-grid:#e2e8f0;--chart-cross:#2563eb;--chart-text:#64748b;--chart-brd:#cbd5e1;--chart-up:#0f9f66;--chart-dn:#d92d4c;--chart-vol:rgba(37,99,235,.18);
}
html,body{height:100%;background:var(--bg);color:var(--t1);font-family:var(--sans);font-size:11px;overflow:hidden}
.app{display:flex;flex-direction:column;height:100vh;width:100vw;max-width:100vw;overflow:hidden}

/* ── SCROLLBARS ── */
::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--b3)}

/* ── TOPBAR ── */
.titlebar{
  height:34px;background:var(--bg2);border-bottom:1px solid var(--b2);
  display:flex;align-items:center;padding:0 14px;gap:12px;flex-shrink:0;
}
.td-logo{display:flex;align-items:center;gap:0;flex:0 0 228px;min-width:228px}
.td-logo-img{display:block;height:34px;width:220px;object-fit:contain;object-position:left center}
.td-logo-light{display:none}
[data-theme="light"] .td-logo-dark{display:none}
[data-theme="light"] .td-logo-light{display:block}
.td-badge{
  font-family:var(--sans);font-size:13px;font-weight:700;
  color:var(--grn);letter-spacing:2px;padding-right:12px;
  border-right:1px solid var(--b3);
}
.td-sub{
  font-family:var(--sans);font-size:9px;font-weight:600;
  color:var(--t4);letter-spacing:1.5px;text-transform:uppercase;
  padding-left:12px;
}
.mkt-pill{
  display:flex;align-items:center;gap:4px;
  padding:2px 8px;border:1px solid var(--b3);
  font-size:9px;font-weight:600;letter-spacing:.5px;color:var(--t3);
}
.dot{width:5px;height:5px;border-radius:50%}
.dot-live{background:var(--grn);box-shadow:0 0 5px var(--grn);animation:pulse 1.5s infinite}
.dot-conn{width:7px;height:7px;background:var(--red);box-shadow:none}
.mkt-pill.connected .dot-conn{background:var(--grn)}
.mkt-pill.connected{border-color:color-mix(in srgb,var(--grn) 45%,var(--b3) 55%);color:var(--grn)}
.dot-del{background:var(--t4)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.idx-bar{display:flex;gap:14px;margin-left:6px;min-width:0;overflow:hidden;flex:1 1 auto}
.mkt-tape-track{display:flex;align-items:center;gap:0;min-width:max-content;animation:mkt-tape-scroll 38s linear infinite}
.mkt-tape-track:hover{animation-play-state:paused}
@keyframes mkt-tape-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.idx{display:flex;gap:4px;align-items:baseline;font-size:10px}
.idx-n{color:var(--t3);font-weight:500}
.idx-p{color:var(--t1);font-weight:600;font-family:var(--mono)}
.up{color:var(--grn);font-family:var(--mono);font-weight:500}
.dn{color:var(--red);font-family:var(--mono);font-weight:500}
.neu{color:var(--t3);font-family:var(--mono)}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:10px;color:var(--t3)}
.tb-clock{font-family:var(--mono);color:var(--t1)}
.key-area{display:flex;align-items:center;gap:6px;padding:0 8px;margin-left:auto}
.key-lbl{font-size:9px;font-weight:700;letter-spacing:.8px;color:var(--t4);text-transform:uppercase}
input.key-inp{
  background:transparent;border:none;border-bottom:1px solid var(--b2);
  color:var(--t2);font-family:var(--mono);font-size:10px;
  padding:2px 4px;width:240px;outline:none;letter-spacing:.04em;
  transition:border-color .12s;
  display:none;
}
input.key-inp:focus{border-bottom-color:var(--grn);color:var(--t1)}
.conn-btn{
  background:linear-gradient(180deg,#1fd37b 0%,#0fb164 100%);border:1px solid rgba(7,40,24,.28);color:#03150c;
  font-family:var(--sans);font-size:10px;font-weight:800;
  letter-spacing:.9px;padding:6px 16px;text-transform:uppercase;border-radius:999px;
  cursor:pointer;transition:transform .12s,box-shadow .12s,filter .12s;line-height:1;
  box-shadow:0 8px 22px rgba(15,177,100,.22);
}
.conn-btn:hover{transform:translateY(-1px);filter:brightness(1.03)}
.theme-btn{
  width:28px;height:24px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--b2);color:var(--t2);
  font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:0;
  padding:0;text-transform:none;cursor:pointer;transition:all .12s;border-radius:999px;
}
.theme-btn:hover{border-color:var(--t2);color:var(--t1);background:var(--bg4)}
.term-user{display:flex;align-items:center;gap:8px;margin-left:8px;flex-shrink:0}
.term-user-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 9px;border:1px solid var(--b2);background:var(--bg3);
  color:var(--t2);font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
}
.term-user-chip #term-user-label{font-family:var(--sans);font-weight:800}
.term-user-dot{width:6px;height:6px;border-radius:50%;background:var(--t4);box-shadow:none}
.term-user-chip.signed-in .term-user-dot{background:var(--grn);box-shadow:0 0 6px rgba(0,208,132,.45)}
.term-user-chip.signed-in{border-color:color-mix(in srgb,var(--grn) 45%,var(--b2) 55%);color:var(--t1)}
.term-close-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:3px 8px;border:1px solid var(--b2);background:var(--bg4);
  color:var(--t1);font-size:9px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  text-decoration:none;transition:all .12s;
}
.term-close-btn:hover{border-color:var(--t2);background:var(--bg5)}
#conn-st{font-family:var(--mono);font-size:9px;color:var(--t4)}
#conn-st.ok{color:var(--grn)}
#conn-st.err{color:var(--red)}
#live-clock{font-family:var(--mono);font-size:10px;color:var(--t2)}

/* ── NAV TABS ── */
.tabs{
  width:48px;background:var(--bg3);border-right:1px solid var(--b1);
  display:flex;flex-direction:column;align-items:stretch;flex-shrink:0;overflow-y:auto;overflow-x:hidden;
  transition:width .18s ease;position:relative;
}
.tabs.collapsed{
  width:12px;
}
.tab{
  padding:10px 6px;display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:500;color:var(--t3);
  cursor:pointer;border-bottom:1px solid var(--b1);
  letter-spacing:.3px;transition:all .12s;position:relative;
  white-space:nowrap;user-select:none;min-height:50px;
}
.tab-icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;color:currentColor}
.tab-icon svg{width:22px;height:22px;display:block}
.nav-toggle{
  position:absolute;top:50%;right:-10px;transform:translateY(-50%);
  width:10px;height:60px;display:flex;align-items:center;justify-content:center;
  color:var(--t4);background:var(--bg2);border:1px solid var(--b1);border-left:none;
  cursor:pointer;user-select:none;font-size:9px;font-family:var(--mono);letter-spacing:.08em;z-index:20;
}
.nav-toggle:hover{color:var(--t1);background:var(--bg4)}
.tabs.collapsed .tab{
  opacity:0;pointer-events:none;min-height:0;height:0;padding:0;border-bottom:none;
}
.tab:hover{color:var(--t2);background:var(--bg4)}
.tab.active{color:var(--t1);background:var(--bg)}
.tab.active::after{
  content:'';position:absolute;top:0;bottom:0;right:0;
  width:2px;background:var(--grn);
}

.shell{display:flex;flex:1;min-height:0;min-width:0}
.page-stack{flex:1;display:flex;min-height:0;min-width:0}

/* ── PAGES ── */
.page{display:none;flex:1;flex-direction:column;min-height:0;min-width:0;overflow:hidden;width:100%}
.page.active{display:flex}

/* ── MARKET STATUS BAR ── */
.mkt-bar{
  background:var(--bg2);border-bottom:1px solid var(--b1);
  padding:0;display:flex;align-items:center;flex-shrink:0;height:28px;overflow:hidden;
}
.mkt-bar .idx-bar{width:100%;margin-left:0}
.mkt-item{
  display:flex;align-items:center;gap:5px;padding:0 12px;
  border-right:1px solid var(--b1);height:100%;cursor:pointer;
  transition:background .08s;flex-shrink:0;
}
.mkt-item:hover{background:var(--bg3)}
.mkt-sym{font-family:var(--sans);font-size:9px;font-weight:600;color:var(--t3);letter-spacing:.04em}
.mkt-price{font-family:var(--mono);font-size:10px;color:var(--t1)}
.mkt-chg{font-family:var(--mono);font-size:9px}
.mkt-chg.up{color:var(--grn)}.mkt-chg.dn{color:var(--red)}
.mkt-state{margin-left:auto;display:flex;align-items:center;gap:10px;padding:0 12px}
.mkt-session{
  font-size:8px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  padding:1px 6px;border:1px solid;
}

/* ── SHARED TOOLBAR ── */
.toolbar{
  height:28px;background:var(--bg3);border-bottom:1px solid var(--b1);
  display:flex;align-items:center;padding:0 8px;gap:6px;flex-shrink:0;overflow-x:auto;
}
#page-scanner .toolbar{
  height:auto;min-height:36px;flex-wrap:wrap;overflow-x:visible;row-gap:4px;padding:4px 8px;
}
#page-chart .toolbar{
  height:auto;min-height:36px;flex-wrap:wrap;overflow-x:visible;row-gap:4px;padding:4px 8px;
}
#page-chart .toolbar .lbl{font-size:8px}
#page-chart .toolbar .sep{font-size:12px;margin:0 1px}
#page-chart .toolbar .ghost,
#page-chart .toolbar .go-btn{font-size:8px;height:18px;padding:2px 6px}
#page-chart .toolbar .sel{font-size:9px;height:18px;padding:1px 4px}
#page-chart .toolbar .sym{font-size:11px;width:74px}
#c-watch-btn{min-width:22px;padding:2px 0;font-size:11px;font-weight:700}
.lbl{
  font-size:9px;font-weight:700;color:var(--t4);
  white-space:nowrap;letter-spacing:.8px;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:6px;
}
.toolbar .lbl::before,.earn-cal-top .lbl::before,.filter-row label::before{
  content:'';display:inline-block;width:9px;height:9px;border-radius:50%;
  border:1px solid var(--b3);box-shadow:inset 0 0 0 2px var(--bg3);opacity:.9;
}
.sep{color:var(--b2);font-size:16px;margin:0 2px;align-self:center;flex-shrink:0}
input.sym{
  background:transparent;border:none;border-bottom:1px solid var(--b2);
  color:var(--am);font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:.08em;padding:1px 4px;width:90px;
  text-transform:uppercase;outline:none;transition:border-color .12s;
}
input.sym:focus{border-bottom-color:var(--grn)}
input.txt-inp{
  background:var(--bg4);border:1px solid var(--b2);color:var(--t1);
  font-family:var(--mono);font-size:10px;padding:2px 6px;
  outline:none;transition:border-color .12s;
}
input.txt-inp:focus{border-color:var(--grn)}
input.date-inp{
  background:var(--bg4);border:1px solid var(--b2);color:var(--t1);
  font-family:var(--mono);font-size:10px;padding:2px 6px;width:120px;outline:none;
}
input.date-inp:focus{border-color:var(--grn)}
select.sel{
  background:linear-gradient(180deg,color-mix(in srgb,var(--bg4) 88%,#fff 12%),var(--bg4));border:1px solid var(--b2);color:var(--t1);
  font-family:var(--sans);font-size:10px;padding:2px 5px;
  outline:none;cursor:pointer;height:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.35);
  border-radius:8px;
}
select.sel:focus{border-color:var(--grn)}
.toolbar .txt-inp,.toolbar .date-inp,.toolbar .sym,.toolbar .sel{
  border-radius:8px;
}
select.sel option{
  background:var(--bg3);
  color:var(--t1);
}
.filter-row select,.sl-filter{
  border-radius:8px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--bg4) 88%,#fff 12%),var(--bg4));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.35);
}
.go-btn{
  background:var(--t1);border:1px solid color-mix(in srgb, var(--t1) 60%, var(--b2) 40%);color:var(--bg);
  font-family:var(--sans);font-size:9px;font-weight:700;
  letter-spacing:.8px;padding:3px 10px;height:20px;
  text-transform:uppercase;cursor:pointer;transition:background .12s,border-color .12s,color .12s;
  white-space:nowrap;flex-shrink:0;border-radius:8px;
}
.go-btn:hover{background:var(--t2);border-color:var(--t2)}.go-btn:disabled{opacity:.4;cursor:not-allowed}
.ghost{
  background:var(--bg4);border:1px solid var(--b2);color:var(--t1);
  font-family:var(--sans);font-size:9px;font-weight:600;
  letter-spacing:.5px;padding:2px 8px;height:20px;
  text-transform:uppercase;cursor:pointer;transition:all .12s;white-space:nowrap;
}
.ghost:hover{border-color:var(--t2);color:var(--t1);background:var(--bg5)}
.ghost.active{background:#000;border-color:#000;color:#fff}

/* ── PAGE BODY ── */
.page-body{flex:1;overflow-y:auto;padding:10px 12px;min-height:0}
.empty{
  color:var(--t4);font-family:var(--sans);font-size:12px;
  text-align:center;padding:50px 20px;line-height:2.5;
}
.empty strong{color:var(--t3)}
.err-box{
  color:var(--red);font-family:var(--mono);font-size:10px;
  padding:10px 12px;background:var(--red-d);border:1px solid rgba(255,59,92,.2);
  margin:8px;
}
.spinner{
  display:inline-block;width:10px;height:10px;
  border:1.5px solid var(--b3);border-top-color:var(--grn);
  border-radius:50%;animation:spin .6s linear infinite;
  margin-right:5px;vertical-align:middle;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── STATUS BAR ── */
.statusbar{
  height:18px;background:var(--bg2);border-top:1px solid var(--b1);
  padding:0 10px;display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:9px;color:var(--t4);flex-shrink:0;gap:12px;
}
.ok{color:var(--grn)}.er{color:var(--red)}.inf{color:var(--bl)}.wn{color:var(--am)}

/* ── SUB-TABS ── */
.subtabs{
  height:24px;background:var(--bg3);border-bottom:1px solid var(--b1);
  display:flex;align-items:stretch;flex-shrink:0;overflow-x:auto;
}
.stab{
  padding:0 12px;font-size:9px;font-weight:600;color:var(--t4);
  cursor:pointer;border-right:1px solid var(--b1);
  letter-spacing:.5px;text-transform:uppercase;transition:all .12s;
  white-space:nowrap;display:flex;align-items:center;position:relative;
}
.stab:hover{color:var(--t2);background:var(--bg4)}
.stab.active{color:var(--grn);background:var(--bg)}
.stab.active::after{
  content:'';position:absolute;bottom:0;left:0;right:0;
  height:2px;background:var(--grn);
}

/* ── TABLES ── */
.tbl{width:100%;border-collapse:collapse;font-size:10px}
.tbl th{
  background:var(--bg3);font-family:var(--sans);font-size:8px;font-weight:700;
  color:var(--t4);letter-spacing:.8px;text-transform:uppercase;
  padding:5px 8px;border-bottom:1px solid var(--b1);text-align:left;
  position:sticky;top:0;white-space:nowrap;z-index:1;
}
.tbl td{
  font-family:var(--mono);font-size:10px;padding:5px 8px;
  border-bottom:1px solid rgba(30,30,30,.8);color:var(--t1);vertical-align:middle;
  white-space:nowrap;
}
.tbl tr{transition:background .07s;cursor:default}
.tbl tr:hover td{background:rgba(255,255,255,.02)}
.tbl tr.clickable{cursor:pointer}
.tbl td.sym{color:var(--am);font-weight:600}
.tbl td.up{color:var(--grn)}.tbl td.dn{color:var(--red)}.tbl td.am{color:var(--am)}
.tbl td.bl{color:var(--bl)}.tbl td.pu{color:var(--pu)}.tbl td.muted{color:var(--t4)}
.tbl-wrap{overflow-x:auto}

/* ── BADGES ── */
.bdg{
  font-family:var(--sans);font-size:8px;font-weight:700;
  padding:1px 5px;border:1px solid;text-transform:uppercase;
  letter-spacing:.5px;white-space:nowrap;display:inline-block;border-radius:1px;
}
.bdg.up{background:var(--grn-d);color:var(--grn);border-color:rgba(0,208,132,.3)}
.bdg.dn{background:var(--red-d);color:var(--red);border-color:rgba(255,59,92,.3)}
.bdg.am{background:var(--am-d);color:var(--am);border-color:rgba(245,197,24,.3)}
.bdg.bl{background:var(--bl-d);color:var(--bl);border-color:rgba(77,159,255,.3)}
.bdg.pu{background:rgba(168,85,247,.1);color:var(--pu);border-color:rgba(168,85,247,.3)}
.bdg.neu{background:rgba(80,80,80,.1);color:var(--t4);border-color:var(--b2)}
.mx-bdg{font-family:var(--sans);font-size:7px;font-weight:700;letter-spacing:.4px;border-radius:999px;padding:2px 8px}
.mx-bdg-large{font-size:10px;padding:6px 12px;letter-spacing:.3px}

/* ── KV CARDS ── */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1px;background:var(--b1);margin-bottom:12px;border:1px solid var(--b1)}
.kv-card{background:var(--bg2);padding:8px 10px}
.kv-card .k{
  font-family:var(--sans);font-size:8px;font-weight:700;
  color:var(--t4);letter-spacing:.8px;text-transform:uppercase;
  display:block;margin-bottom:2px;
}
.kv-card .v{font-family:var(--sans);font-size:13px;color:var(--t1);display:block;font-weight:700}
.kv-card .v.up{color:var(--grn)}.kv-card .v.dn{color:var(--red)}
.kv-card .v.am{color:var(--am)}.kv-card .v.bl{color:var(--bl)}
.section-title{
  font-family:var(--sans);font-size:9px;font-weight:700;
  color:var(--t4);letter-spacing:1px;text-transform:uppercase;
  margin:12px 0 5px;padding-bottom:3px;border-bottom:1px solid var(--b1);
}

/* ── CHART PAGE ── */
.chart-layout{flex:1;display:flex;min-height:0;min-width:0;overflow:hidden}
.chart-left{flex:1;display:flex;flex-direction:column;min-height:0;min-width:0}
.chart-stack{flex:1;display:flex;flex-direction:column;min-height:0}
.chart-stack.hidden{display:none}
.chart-grid{
  flex:1;display:none;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(220px,1fr);
  gap:8px;padding:8px;min-height:0;background:var(--bg)
}
.chart-grid.visible{display:grid}
.chart-grid.one{grid-template-columns:1fr}
.chart-grid.two{grid-template-columns:1fr 1fr}
.chart-slot{
  background:var(--bg2);border:1px solid var(--b1);display:flex;flex-direction:column;min-height:0
}
.chart-slot-head{
  height:22px;background:var(--bg3);border-bottom:1px solid var(--b1);display:flex;align-items:center;justify-content:space-between;padding:0 8px
}
.chart-slot-title{font-family:var(--mono);font-size:10px;color:var(--am)}
.chart-slot-body{flex:1;min-height:0}
.chart-dash-panels{display:flex;gap:8px;padding:8px;border-top:1px solid var(--b1);background:var(--bg2);flex-shrink:0;align-items:stretch}
.chart-dash-panels.hidden{display:none}
.chart-dash-shell{display:flex;flex-direction:column;flex-shrink:0;resize:vertical;overflow:auto;min-height:148px;max-height:42vh;height:220px}
.chart-dash-master{height:18px;display:flex;align-items:center;justify-content:center;background:var(--bg3);border-top:1px solid var(--b1);cursor:pointer;font-size:10px;color:var(--t3)}
.chart-dash-master:hover{color:var(--t1)}
.chart-dash-card{flex:1;min-width:0;border:1px solid var(--b1);background:var(--bg);min-height:0;display:flex;flex-direction:column}
.chart-dash-head{min-height:26px;background:var(--bg3);border-bottom:1px solid var(--b1);display:flex;align-items:center;justify-content:space-between;padding:3px 8px;gap:8px}
.chart-dash-title{font-size:9px;font-weight:700;color:var(--t4);letter-spacing:.8px;text-transform:uppercase}
.chart-dash-body{padding:8px;overflow:auto}
.chart-dash-card.collapsed .chart-dash-body{display:none}
.chart-dash-toggle{background:var(--bg4);border:1px solid var(--b2);color:var(--t1);font-size:11px;cursor:pointer;min-width:22px;min-height:20px}
.chart-dash-actions{display:flex;align-items:center;gap:4px;margin-left:auto}
.chart-dash-btn{background:var(--bg4);border:1px solid var(--b2);color:var(--t1);font-size:8px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 5px;cursor:pointer}
.chart-dash-btn:hover{color:var(--t1);border-color:var(--t2);background:var(--bg5)}
.chart-dash-btn.active{background:#000;border-color:#000;color:#fff}
.chart-sector-technology{color:#4d9fff!important}
.chart-sector-financial-services{color:#f5c518!important}
.chart-sector-healthcare{color:#00d084!important}
.chart-sector-consumer-cyclical{color:#ff7b54!important}
.chart-sector-consumer-defensive{color:#7dd3fc!important}
.chart-sector-energy{color:#fb7185!important}
.chart-sector-industrials{color:#a78bfa!important}
.chart-sector-communication-services{color:#34d399!important}
.chart-sector-basic-materials{color:#f97316!important}
.chart-sector-real-estate{color:#94a3b8!important}
.chart-sector-utilities{color:#67e8f9!important}
.chart-sector-funds{color:#eab308!important}
.chart-sector-crypto{color:#f7931a!important}
.chart-sector-fx{color:#c084fc!important}
.chart-sector-unclassified{color:var(--t2)!important}
.interval-pop{
  position:fixed;left:50%;top:120px;transform:translateX(-50%);z-index:9999;
  background:var(--bg2);border:1px solid var(--grn);padding:12px 14px;display:none;min-width:220px
}
.interval-pop.open{display:block}
.interval-pop input{width:100%;background:var(--bg4);border:1px solid var(--b2);color:var(--t1);font-family:var(--mono);font-size:14px;padding:8px 10px;outline:none}
.interval-help{font-size:9px;color:var(--t4);margin-top:8px;line-height:1.5}
.dash-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dash-subtitle{font-size:8px;font-weight:700;color:var(--t4);letter-spacing:.7px;text-transform:uppercase;margin-bottom:5px}
.dash-row{display:flex;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.04);font-family:var(--mono);font-size:10px}
.dash-row:last-child{border-bottom:none}
.dash-gap-list{display:grid;grid-template-columns:1fr;gap:0}
.dash-col{display:flex;flex-direction:column;gap:1px}
.dash-sub{font-size:8px;color:var(--t4);font-family:var(--sans)}
.ticker-link{background:transparent;border:none;color:var(--am);font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.04em;cursor:pointer;padding:0;text-align:left}
.ticker-link:hover{color:var(--t1)}
.tbl td.sym{color:var(--am);cursor:pointer}
.tbl td.sym:hover{color:var(--t1)}
.press-list{display:flex;flex-direction:column;gap:8px;padding:0 2px 12px}
.press-item{border:1px solid var(--b1);background:var(--bg2);padding:8px}
.press-date{font-family:var(--mono);font-size:9px;color:var(--t4);margin-bottom:4px}
.press-link{display:block;color:var(--t1);font-size:10px;font-weight:600;line-height:1.5;text-decoration:none;cursor:pointer}
.press-link:hover{color:var(--am)}
.news-btn{width:100%;background:transparent;border:none;padding:0;text-align:left;cursor:pointer}
#c-news-card .chart-dash-body{max-height:220px;overflow:auto}
.calc-shell{display:flex;flex-direction:column;gap:12px}
.calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.calc-card{background:var(--bg2);border:1px solid var(--b1);padding:14px}
.calc-card label{display:flex;flex-direction:column;gap:4px;font-size:9px;font-weight:700;color:var(--t4);letter-spacing:.7px;text-transform:uppercase}
.calc-card input{background:var(--bg4);border:1px solid var(--b2);color:var(--t1);font-family:var(--mono);font-size:12px;padding:8px 10px;outline:none}
.calc-card input:focus{border-color:var(--grn)}
.calc-card .sel{height:34px;font-size:11px}
.calc-rate-row{display:flex;align-items:center;gap:10px}
.calc-rate-row input[type="range"]{flex:1;padding:0}
.calc-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.calc-out-banner{grid-column:1 / -1;border:1px solid var(--b1);padding:14px 16px;background:var(--bg3);display:flex;align-items:center;justify-content:space-between;gap:14px}
.calc-out-banner.up{border-color:rgba(0,208,132,.35);background:linear-gradient(90deg,rgba(0,208,132,.12),rgba(0,208,132,.04))}
.calc-out-banner.dn{border-color:rgba(245,197,24,.28);background:linear-gradient(90deg,rgba(245,197,24,.12),rgba(245,197,24,.04))}
.calc-out-banner .k{display:block;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--t4)}
.calc-out-banner .v{display:block;margin-top:4px;font-size:18px;font-weight:700;color:var(--t1)}
.calc-out-banner .s{display:block;font-size:11px;color:var(--t2);margin-top:4px;line-height:1.5}
.calc-big{font-size:12px}
.calc-iconline{display:flex;align-items:center;gap:8px;margin-bottom:10px;color:var(--am);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.calc-metal{display:inline-flex;align-items:center;gap:10px}
.calc-metal-icn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--b2);border-radius:50%;font-size:13px;color:var(--t1);background:var(--bg4);font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 8px rgba(0,0,0,.16)}
.calc-metal.gold .calc-metal-icn{border-color:#8d6a11;color:#f5c518;background:linear-gradient(180deg,rgba(245,197,24,.18),rgba(141,106,17,.16))}
.calc-metal.silver .calc-metal-icn{border-color:#6d7b8d;color:#d8e4ef;background:linear-gradient(180deg,rgba(216,228,239,.18),rgba(109,123,141,.16))}
.calc-metal-label{display:flex;flex-direction:column;gap:1px}
.calc-metal-label strong{font-size:11px;letter-spacing:.04em}
.calc-metal-label span{font-size:9px;color:var(--t4);text-transform:uppercase;letter-spacing:.08em}
#zakat-live-top .kv-card{padding:14px 14px}
#zakat-live-top .kv-card .v{font-size:15px}
.calc-out .kv-card{min-height:82px}
#calc-zakat .calc-grid{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
#calc-zakat .calc-card{padding:16px}
#calc-zakat .calc-card .section-title{margin-bottom:12px}
#calc-zakat .calc-card label{font-size:10px}
.calc-table-wrap{border:1px solid var(--b1);background:var(--bg2);overflow:auto}
.calc-table{width:100%;border-collapse:collapse}
.calc-table th,.calc-table td{padding:8px 10px;border-bottom:1px solid var(--b1);font-size:10px;text-align:left}
.calc-table th{background:var(--bg3);color:var(--t4);letter-spacing:.08em;text-transform:uppercase}
.fin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.fin-card{background:var(--bg2);border:1px solid var(--b1);padding:12px;min-width:0}
.fin-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.fin-title{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.fin-title.income{color:var(--grn)}
.fin-title.balance{color:var(--am)}
.fin-title.cashflow{color:var(--bl)}
.fin-chart{width:100%;min-height:168px;background:var(--bg3);border:1px solid var(--b1);margin-bottom:10px;padding:10px 8px 8px;display:flex;align-items:flex-end;gap:8px}
.fin-bar{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px}
.fin-bar-value{font-size:9px;color:var(--t2);font-family:var(--mono);line-height:1.2;text-align:center;word-break:break-word}
.fin-bar-col{width:100%;border-radius:6px 6px 0 0;min-height:4px}
.fin-bar-label{font-size:8px;color:var(--t4);font-family:var(--sans);letter-spacing:.05em;text-transform:uppercase;text-align:center}
.fin-mini-table{width:100%;border-collapse:collapse}
.fin-mini-table th,.fin-mini-table td{padding:6px 4px;border-bottom:1px solid var(--b1);font-size:10px;text-align:left}
.fin-mini-table th{font-size:8px;color:var(--t4);letter-spacing:.06em;text-transform:uppercase}
.earn-cal-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.earn-cal-month{font-size:12px;font-weight:700;color:var(--t1);letter-spacing:.04em;min-width:170px}
.earn-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;height:calc(100vh - 182px);min-height:0}
.earn-cal-head{background:var(--bg3);border:1px solid var(--b1);padding:4px 6px;font-size:8px;font-weight:700;color:var(--t4);letter-spacing:.08em;text-transform:uppercase}
.earn-cal-cell{background:var(--bg2);border:1px solid var(--b1);min-height:0;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.earn-cal-cell.muted{opacity:.4}
.earn-cal-day{padding:3px 6px;border-bottom:1px solid var(--b1);font-family:var(--mono);font-size:9px;color:var(--am)}
.earn-cal-list{padding:4px;display:flex;flex-direction:column;gap:3px;overflow:hidden;min-height:0}
.earn-cal-item{background:var(--bg3);border:1px solid var(--b1);padding:3px 5px;font-size:8px;line-height:1.25;overflow:hidden;text-overflow:ellipsis}
.earn-cal-item .ticker-link{font-size:8px}
.earn-cal-meta{display:block;color:var(--t4);font-size:7px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* statsbar */
.chart-statsbar{
  display:flex;background:var(--bg3);border-bottom:1px solid var(--b1);
  flex-shrink:0;overflow-x:auto;height:44px;
}
.chart-cell{padding:4px 12px;border-right:1px solid var(--b1);flex-shrink:0;display:flex;flex-direction:column;justify-content:center}
.chart-compliance-cell{padding:4px 14px;margin-left:auto;border-left:1px solid var(--b1);flex-shrink:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-end}
.chart-cell .k{
  font-family:var(--sans);font-size:8px;font-weight:700;
  color:var(--t4);letter-spacing:.8px;text-transform:uppercase;
  display:block;margin-bottom:1px;
}
.chart-cell .v{font-family:var(--mono);font-size:12px;color:var(--t1);display:block}
.chart-compliance-cell .k{font-family:var(--sans);font-size:8px;font-weight:700;color:var(--t4);letter-spacing:.8px;text-transform:uppercase;display:block;margin-bottom:3px}
.chart-compliance-cell .v{font-family:var(--sans);font-size:12px;color:var(--t1);display:block}
.chart-compliance-cell .mx-bdg-large{font-size:12px;padding:8px 18px;border-radius:999px}
.chart-cell .v.up{color:var(--grn)}.chart-cell .v.dn{color:var(--red)}
.chart-cell .v.sym{color:var(--am);font-size:14px;font-weight:700}
#c-main{flex:1;min-height:0}
.vol-strip{height:56px;border-top:1px solid var(--b1);flex-shrink:0}
.ind-strip{height:72px;border-top:1px solid var(--b1);flex-shrink:0;display:none}
.ind-strip.visible{display:block}

/* right info panel */
.chart-right{
  width:220px;flex-shrink:0;border-left:1px solid var(--b1);
  background:var(--bg2);display:flex;flex-direction:column;
  overflow:hidden;transition:width .2s;
}
.chart-right.collapsed{width:12px;border-left:none;background:transparent;overflow:visible}
.chart-right.collapsed .rp-header,
.chart-right.collapsed .rp-body{display:none}
.chart-right.collapsed .panel-toggle{
  left:0;right:auto;border-right:1px solid var(--b1);border-left:none
}
.panel-toggle{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  z-index:10;background:var(--bg3);border:1px solid var(--b1);border-right:none;
  width:12px;height:36px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--t4);font-size:7px;transition:color .1s;
}
.panel-toggle:hover{color:var(--grn)}
.rp-header{
  height:22px;background:var(--bg3);border-bottom:1px solid var(--b1);
  display:flex;align-items:center;padding:0 8px;justify-content:space-between;flex-shrink:0;
}
.rp-title{font-family:var(--sans);font-size:9px;font-weight:700;color:var(--t4);letter-spacing:.8px;text-transform:uppercase}
.rp-body{flex:1;overflow-y:auto;padding:8px 10px}
.draw-hint-bar{
  display:none;position:absolute;top:6px;left:50%;transform:translateX(-50%);
  background:rgba(255,59,92,.9);color:#fff;font-family:var(--sans);
  font-size:9px;font-weight:700;padding:3px 10px;z-index:10;
  white-space:nowrap;text-transform:uppercase;letter-spacing:.5px;
}

/* ── SCANNER ── */
.scanner-layout{flex:1;display:flex;min-height:0;min-width:0;overflow:hidden}
.scanner-left{
  width:320px;flex-shrink:0;border-right:1px solid var(--b1);
  overflow-y:auto;background:var(--bg2);order:1;
}
.scanner-right{flex:1;overflow-y:auto;padding:8px;min-height:0;min-width:0;background:var(--bg);order:2}
.scanner-title{
  height:20px;background:var(--bg3);border-bottom:1px solid var(--b1);
  display:flex;align-items:center;padding:0 8px;
  font-size:8px;font-weight:700;letter-spacing:.8px;color:var(--t4);text-transform:uppercase;
  flex-shrink:0;
}
.filter-group{padding:6px 8px;border-bottom:1px solid var(--b1)}
.filter-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:4px;margin-bottom:4px;
}
.filter-row label{
  font-size:9px;font-weight:600;color:var(--t4);
  letter-spacing:.3px;flex:1;
}
.filter-row select,.filter-row input{
  font-size:10px;padding:1px 4px;height:18px;
  background:var(--bg4);border:1px solid var(--b2);color:var(--t1);
  font-family:var(--sans);outline:none;
}
.filter-row select:focus,.filter-row input:focus{border-color:var(--grn)}
.scan-preset{
  display:block;width:100%;
  background:transparent;border:none;border-bottom:1px solid var(--b1);
  color:var(--t3);font-family:var(--sans);font-size:10px;font-weight:500;
  padding:6px 10px;cursor:pointer;text-align:left;transition:all .1s;
}
.scan-preset:hover{color:var(--t1);background:var(--bg4)}
.scanner-grid{display:grid;grid-template-columns:repeat(var(--scanner-cols,4),minmax(0,1fr));gap:10px}
.scan-card{
  background:var(--bg2);border:1px solid var(--b1);
  display:flex;flex-direction:column;cursor:pointer;overflow:hidden;
  transition:border-color .12s,box-shadow .12s,transform .08s;min-height:188px;
}
.scan-card:hover{border-color:var(--b3);box-shadow:0 4px 20px rgba(0,0,0,.5);transform:translateY(-1px)}
.scan-card-lite{min-height:128px}
.scan-head{
  padding:6px 8px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--b1);background:var(--bg3);flex-shrink:0;
  gap:8px;
}
.scan-title-wrap{display:flex;align-items:baseline;gap:7px;min-width:0}
.scan-sym{font-family:var(--sans);font-size:12px;color:var(--t1);font-weight:700;letter-spacing:.3px}
.scan-chg{font-family:var(--mono);font-size:11px}
.scan-chg.up{color:var(--grn)}.scan-chg.dn{color:var(--red)}
.scan-compliance{margin-left:auto;flex-shrink:0}
.scan-chart{height:104px;flex-shrink:0}
.scan-chart-mini{height:108px;background:linear-gradient(180deg,rgba(255,255,255,.015),transparent);border-bottom:1px solid var(--b1)}
.scan-chart-empty{height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:9px;color:var(--t4);text-transform:uppercase;letter-spacing:.5px}
.scan-metrics{
  padding:5px 8px;display:grid;gap:6px 10px;grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:start;background:var(--bg3);flex-shrink:0;
}
.scan-stat{display:flex;flex-direction:column;gap:0}
.scan-stat .sk{font-size:7px;font-weight:700;color:var(--t4);letter-spacing:.5px;text-transform:uppercase}
.scan-stat .sv{font-family:var(--mono);font-size:10px;color:var(--t1)}
.scan-stat .sv.up{color:var(--grn)}.scan-stat .sv.dn{color:var(--red)}.scan-stat .sv.am{color:var(--am)}
#page-scanner .toolbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 10px 8px;height:auto;align-items:end;overflow:visible;background:transparent;border-bottom:1px solid var(--b1)}
#page-scanner .toolbar .sep{display:none}
#page-scanner .toolbar .lbl{font-size:8px}
#page-scanner .toolbar .go-btn{width:100%;justify-self:stretch}
#page-scanner .toolbar .sel,
#page-scanner .toolbar .txt-inp{width:100%!important}
#page-scanner .toolbar #sc-count,
#page-scanner .toolbar #sc-universe-info{grid-column:1 / -1;margin-left:0}
#c-news-card .chart-dash-body{max-height:220px;overflow:auto}

/* ── QUOTE ── */
.q-card{
  background:var(--bg2);border:1px solid var(--b1);
  border-left:2px solid var(--b2);
  padding:10px 14px;margin-bottom:6px;
}
.q-card.up-card{border-left-color:var(--grn)}
.q-card.dn-card{border-left-color:var(--red)}
.q-hdr{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.q-sym{font-family:var(--sans);font-size:14px;font-weight:700;color:var(--t1);letter-spacing:.3px}
.q-name{font-family:var(--sans);font-size:10px;color:var(--t4);flex:1}
.q-px{font-family:var(--mono);font-size:20px;font-weight:700;color:var(--t1)}
.q-chg{font-family:var(--mono);font-size:12px;font-weight:600}

/* ── FX CARDS ── */
.fx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1px;background:var(--b1);border:1px solid var(--b1)}
.fx-card{background:var(--bg2);padding:10px 12px;cursor:pointer;transition:background .1s}
.fx-card:hover{background:var(--bg3)}
.fx-pair{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--am);display:block;margin-bottom:2px;letter-spacing:.06em}
.fx-price{font-family:var(--mono);font-size:18px;font-weight:700;color:var(--t1);display:block;margin-bottom:1px}
.fx-chg{font-family:var(--mono);font-size:11px;display:block}
.fx-chg.up{color:var(--grn)}.fx-chg.dn{color:var(--red)}
.fx-sub{font-family:var(--sans);font-size:9px;color:var(--t4);display:block;margin-top:3px}

/* ── ETF ── */
.fund-layout{flex:1;display:flex;min-height:0;min-width:0;overflow:hidden}
.fund-sidebar{width:180px;flex-shrink:0;border-right:1px solid var(--b1);overflow-y:auto;background:var(--bg2)}
.fund-nav-item{
  padding:7px 10px;font-family:var(--sans);font-size:10px;font-weight:500;
  color:var(--t4);cursor:pointer;border-bottom:1px solid var(--b1);
  transition:all .1s;
}
.fund-nav-item:hover{color:var(--t1);background:var(--bg3)}
.fund-nav-item.active{color:var(--grn);background:var(--bg3);border-left:2px solid var(--grn)}
.fund-content{flex:1;overflow-y:auto;padding:10px 12px;min-width:0}

/* ── KEY TESTER ── */
.test-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1px;background:var(--b1);border:1px solid var(--b1)}
.test-card{background:var(--bg2);padding:8px 10px;display:flex;align-items:center;justify-content:space-between}
.test-name{font-family:var(--sans);font-size:11px;font-weight:600;color:var(--t1)}
.test-ep{font-family:var(--mono);font-size:8px;color:var(--t4);margin-top:1px}
.test-st{font-family:var(--sans);font-size:9px;font-weight:700;padding:2px 7px;border:1px solid;letter-spacing:.3px}
.test-st.testing{color:var(--am);border-color:rgba(245,197,24,.35);background:var(--am-d)}
.test-st.ok{color:var(--grn);border-color:rgba(0,208,132,.35);background:var(--grn-d)}
.test-st.fail{color:var(--red);border-color:rgba(255,59,92,.35);background:var(--red-d)}
.scanner-cache-diag{border-bottom:1px solid var(--b1);background:var(--bg2);padding:10px 12px}
.scanner-cache-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-family:var(--sans);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--t2)}
.scanner-cache-head span:last-child{font-family:var(--mono);font-size:9px;color:var(--t4);text-transform:none;letter-spacing:.2px}
.scanner-cache-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1px;background:var(--b1);border:1px solid var(--b1)}
.scanner-cache-card{background:var(--bg);padding:9px 10px;display:flex;flex-direction:column;gap:7px;min-height:86px}
.scanner-cache-title{display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:var(--sans);font-size:10px;font-weight:700;color:var(--t1)}
.scanner-cache-badge{font-size:8px;padding:2px 6px;border:1px solid var(--b2);color:var(--t4);background:var(--s2);text-transform:uppercase;letter-spacing:.4px}
.scanner-cache-badge.running{color:var(--am);border-color:rgba(245,197,24,.35);background:var(--am-d)}
.scanner-cache-badge.ready{color:var(--grn);border-color:rgba(0,208,132,.35);background:var(--grn-d)}
.scanner-cache-badge.partial{color:var(--td);border-color:rgba(77,159,255,.35);background:rgba(77,159,255,.08)}
.scanner-cache-badge:not(.running):not(.ready):not(.partial){color:var(--t4);border-color:var(--b2);background:var(--s2)}
.scanner-cache-metrics{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--b1)}
.scanner-cache-metric{background:var(--bg2);padding:5px 6px}
.scanner-cache-metric span{display:block;font-family:var(--mono);font-size:8px;color:var(--t4);text-transform:uppercase}
.scanner-cache-metric strong{display:block;font-family:var(--sans);font-size:12px;color:var(--t1);margin-top:2px}
.scanner-cache-progress{height:4px;background:var(--s2);border:1px solid var(--b1);overflow:hidden}
.scanner-cache-progress i{display:block;height:100%;background:var(--grn);width:0}

/* â”€â”€ PORTFOLIO â”€â”€ */
.portfolio-shell{display:flex;flex-direction:column;gap:12px}
.portfolio-top{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:12px;min-height:360px}
.portfolio-card{background:var(--bg2);border:1px solid var(--b1);padding:12px}
.portfolio-form{display:flex;flex-direction:column;gap:10px}
.portfolio-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.portfolio-grid .full{grid-column:1 / -1}
.portfolio-form label{display:flex;flex-direction:column;gap:4px;font-size:9px;font-weight:700;color:var(--t4);letter-spacing:.7px;text-transform:uppercase}
.portfolio-form input{background:var(--bg4);border:1px solid var(--b2);color:var(--t1);font-family:var(--mono);font-size:11px;padding:6px 8px;outline:none}
.portfolio-form input:focus{border-color:var(--grn)}
.portfolio-form select{background:var(--bg4);border:1px solid var(--b2);color:var(--t1);font-family:var(--sans);font-size:11px;padding:6px 8px;outline:none;height:32px}
.portfolio-form select:focus{border-color:var(--grn)}
.portfolio-hide{display:none!important}
.portfolio-note{font-size:10px;color:var(--t4);line-height:1.6}
.portfolio-chart-card{display:flex;flex-direction:column;min-height:0}
.portfolio-chart-wrap{display:flex;align-items:center;justify-content:center;flex:1;min-height:260px;position:relative}
.portfolio-chart-wrap svg{width:min(100%,420px);height:auto;display:block}
.portfolio-hover{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none}
.portfolio-hover .k{display:block;font-size:9px;color:var(--t4);text-transform:uppercase;letter-spacing:.8px}
.portfolio-hover .v{display:block;font-family:var(--mono);font-size:17px;color:var(--t1);margin-top:4px}
.portfolio-hover .s{display:block;font-size:10px;color:var(--am);margin-top:4px}
.portfolio-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:6px;margin-top:10px}
.portfolio-legend-item{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--t2)}
.portfolio-legend-swatch{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.portfolio-screen-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--b1);border:1px solid var(--b1);margin-top:10px}
.portfolio-screen-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px;margin-top:12px}
.portfolio-screen-item{background:var(--bg3);border:1px solid var(--b1);padding:10px}
.portfolio-screen-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.portfolio-screen-sym{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--am)}
.portfolio-screen-name{font-size:10px;color:var(--t2);margin-top:2px;line-height:1.4}
.portfolio-screen-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px}
.portfolio-screen-ratios{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.portfolio-ratio{background:var(--bg2);border:1px solid var(--b1);padding:8px}
.portfolio-ratio .k{display:block;font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t4)}
.portfolio-ratio .v{display:block;margin-top:4px;font-family:var(--mono);font-size:12px;color:var(--t1)}
.portfolio-screen-notes{margin-top:10px;font-size:10px;line-height:1.55;color:var(--t2)}
.portfolio-screen-notes strong{color:var(--t1)}
.portfolio-screen-empty{padding:18px 12px;text-align:center;color:var(--t4);font-size:11px;border:1px solid var(--b1);background:var(--bg3);margin-top:12px}
.watchlist-shell{display:flex;flex-direction:column;gap:12px}
.watchlist-card{background:var(--bg2);border:1px solid var(--b1);padding:12px}
.watchlist-summary{min-height:46px}
.watchlist-pill-wrap{display:flex;flex-wrap:wrap;gap:8px}
.watchlist-pill{
  background:var(--bg4);border:1px solid var(--b2);color:var(--am);
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;
  padding:6px 10px;cursor:pointer;transition:all .12s;
}
.watchlist-pill:hover{border-color:var(--t2);color:var(--t1);background:var(--bg5)}
.asset-chip{display:inline-flex;align-items:center;gap:6px}
.asset-icn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:1px solid var(--b2);border-radius:50%;font-size:10px;color:var(--t2);background:var(--bg3);flex-shrink:0}
.shariah-shell{display:flex;flex-direction:column;gap:12px}
.shariah-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;background:var(--bg2);border:1px solid var(--b1);padding:14px}
.shariah-name{font-family:var(--sans);font-size:18px;font-weight:700;color:var(--t1)}
.shariah-meta{font-size:10px;color:var(--t4);margin-top:4px}
.shariah-market-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--b1);border:1px solid var(--b1)}
.shariah-market-grid .kv-card{margin:0;border:none;background:var(--bg2)}
.shariah-standards{display:grid;grid-template-columns:repeat(5,minmax(110px,1fr));gap:10px}
.shariah-standard{background:var(--bg2);border:1px solid var(--b1);padding:12px;text-align:center}
.shariah-standard .k{display:block;font-size:9px;font-weight:700;color:var(--t4);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.shariah-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);gap:12px}
.shariah-card{background:var(--bg2);border:1px solid var(--b1);padding:14px}
.shariah-table{width:100%;border-collapse:collapse}
.shariah-table th,.shariah-table td{border:1px solid var(--b1);padding:8px 9px;font-size:10px;text-align:left;vertical-align:top}
.shariah-table th{background:var(--bg3);color:var(--t4);text-transform:uppercase;letter-spacing:.07em}
.shariah-metric{display:flex;flex-direction:column;gap:2px}
.shariah-metric strong{font-family:var(--mono);font-size:11px;color:var(--t1)}
.shariah-metric span{font-size:8px;color:var(--t4)}
.shariah-income-row{display:flex;justify-content:space-between;border-bottom:1px solid var(--b1);padding:8px 0;font-size:11px}
.shariah-income-row:last-child{border-bottom:none;font-weight:700}
.shariah-calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.shariah-calc-grid input,.shariah-calc-grid select{width:100%;background:var(--bg4);border:1px solid var(--b2);color:var(--t1);font-family:var(--mono);font-size:11px;padding:7px 8px;outline:none}
.shariah-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}
.filter-section{margin-top:8px;border:1px solid var(--b1);background:var(--bg2)}
.filter-section-head{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;font-size:9px;font-weight:700;color:var(--t4);letter-spacing:.7px;text-transform:uppercase;cursor:pointer;background:var(--bg3)}
.filter-section-body{padding:8px}
.filter-section.collapsed .filter-section-body{display:none}
.filter-toggle{font-family:var(--mono);font-size:11px;color:var(--t2)}

/* ── COMMAND PALETTE ── */
#spotlight-overlay{
  display:none;position:fixed;inset:0;z-index:99999;
  background:rgba(0,0,0,.8);backdrop-filter:blur(4px);
  align-items:flex-start;justify-content:center;padding-top:100px;
}
#spotlight-overlay.open{display:flex}
#spotlight-box{
  width:560px;max-width:95vw;
  background:var(--bg2);border:1px solid var(--grn);
  box-shadow:0 24px 80px rgba(0,208,132,.1);overflow:hidden;
}
#spotlight-input-wrap{
  display:flex;align-items:center;padding:0 14px;
  border-bottom:1px solid var(--b1);height:46px;gap:8px;
}
#spotlight-input-wrap .sl-icon{color:var(--grn);font-size:14px;flex-shrink:0}
#spotlight-inp{
  flex:1;background:transparent;border:none;outline:none;
  color:var(--t1);font-family:var(--mono);font-size:14px;
  letter-spacing:.06em;text-transform:uppercase;
}
#spotlight-inp::placeholder{color:var(--t4);text-transform:none;font-size:11px}
.sl-filter{
  background:var(--bg4);border:1px solid var(--b2);color:var(--t1);
  font-family:var(--sans);font-size:10px;padding:3px 8px;height:24px;outline:none;cursor:pointer
}
.sl-kbd{
  font-size:8px;color:var(--t4);background:var(--bg3);
  border:1px solid var(--b2);padding:1px 5px;font-family:var(--mono);
}
#spotlight-results{max-height:360px;overflow-y:auto}
.sl-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 14px;cursor:pointer;border-bottom:1px solid var(--b1);
  transition:background .08s;
}
.sl-item:hover,.sl-item.sl-active{background:var(--bg3)}
.sl-item-left{display:flex;flex-direction:column;gap:1px}
.sl-sym{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--t1);letter-spacing:.04em}
.sl-name{font-size:9px;color:var(--t4)}
.sl-item-right{text-align:right}
.sl-px{font-family:var(--mono);font-size:11px;color:var(--t1)}
.sl-chg{font-family:var(--mono);font-size:10px}
.sl-chg.up{color:var(--grn)}.sl-chg.dn{color:var(--red)}
.sl-footer{
  padding:5px 14px;display:flex;align-items:center;gap:12px;
  border-top:1px solid var(--b1);background:var(--bg2);
}
.sl-hint{font-size:8px;color:var(--t4);display:flex;align-items:center;gap:3px}
#spotlight-status{font-size:9px;color:var(--t4);font-family:var(--mono);margin-left:auto}

