/* ═══════════════════════════════════════════
   JOURNAL — VOID SILVER
   Pure black · flat · monochromatic · zero decoration
═══════════════════════════════════════════ */
:root {
  --bg:   #000000;
  --s1:   #080808;
  --s2:   #0A0A0A;
  --s3:   #0E0E0E;
  --s4:   #121212;
  --s5:   #181818;
  --b1: rgba(255,255,255,.055);
  --b2: rgba(255,255,255,.09);
  --b3: rgba(255,255,255,.14);
  --fg-rgb: 255,255,255;
  --fg2-rgb: 184,188,200;
  --t1: #E8EAED;
  --t2: #B0B4BC;
  --t3: #6B7280;
  --ac:  #B8BCC8;
  --ac2: rgba(184,188,200,.07);
  --ac3: rgba(184,188,200,.13);
  --g:  #34D399;
  --g2: rgba(52,211,153,.06);
  --g3: rgba(52,211,153,.12);
  --r:  #F87171;
  --r2: rgba(248,113,113,.06);
  --r3: rgba(248,113,113,.12);
  --a:  #FBBF24;
  --a2: rgba(251,191,36,.06);
  --a3: rgba(251,191,36,.12);
  --p:  #A78BFA;
  --p2: rgba(167,139,250,.06);
  --tl:  #6EE7B7;
  --tl2: rgba(110,231,183,.06);
  --bl:  #93C5FD;
  --bl2: rgba(147,197,253,.06);
  --bl3: rgba(147,197,253,.12);
  --fn: 'Geist', sans-serif;
  --mo: 'Geist Mono', monospace;
  --r1:  4px;
  --r2x: 6px;
  --r3x: 8px;
  --sw: 210px;
  --ease: cubic-bezier(.16,1,.3,1);
  --ease2: cubic-bezier(.4,0,.2,1);
  --sh1: 0 1px 2px rgba(0,0,0,.4);
  --sh2: 0 4px 12px rgba(0,0,0,.5);
  --sh3: 0 8px 28px rgba(0,0,0,.65);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body { background: var(--bg); color: var(--t1); font-family: var(--fn); font-size: 13px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
/* ── Smooth realtime update — no flicker ── */
.sv { transition: color 0.3s ease; }
.stat { transition: background 0.2s ease; }
@keyframes _valPop { 0%{opacity:.4;transform:translateY(-2px);} 100%{opacity:1;transform:translateY(0);} }
._val-updated { animation: _valPop 0.25s ease forwards; }
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(var(--fg-rgb),.08); border-radius: 2px; }

.app { display: flex; height: 100vh; overflow: hidden; }

/* SIDEBAR */
.main { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; min-width: 0; }
.sb { width: var(--sw); min-width: var(--sw); background: var(--s1); border-right: 1px solid var(--b1); display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; flex-shrink: 0; scrollbar-width: none; }
.sb::-webkit-scrollbar { display: none; }
.sb-top { padding: 14px 10px 8px; }
.brand { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--b1); }
.bm { width: 30px; height: 30px; background: none; border: none; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bm:hover { border-color: rgba(var(--fg2-rgb),.4); }
.bn { font-size: 11px; font-weight: 700; letter-spacing: .01em; color: var(--t1); }
.bv { font-size: 7px; color: var(--t3); font-family: var(--mo); letter-spacing: .08em; margin-top: 1px; text-transform: uppercase; }
.cw { border: 1px solid var(--b1); border-radius: var(--r2x); padding: 10px 11px; margin-bottom: 10px; }
.cw-l { font-size: 9px; color: var(--t3); font-family: var(--mo); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 3px; }
.cw-v { font-size: 17px; font-weight: 700; font-family: var(--mo); letter-spacing: -.3px; color: var(--t1); }
.cw-e { font-size: 10px; color: var(--t2); margin-top: 1px; font-family: var(--mo); }
.cw-bw { height: 1px; background: var(--b1); border-radius: 1px; overflow: hidden; margin-top: 7px; }
.cw-bf { height: 100%; border-radius: 1px; transition: width .6s var(--ease), background .4s; }
.ns { font-size: 9px; color: var(--t3); font-family: var(--mo); text-transform: uppercase; letter-spacing: .1em; padding: 10px 10px 3px; }
.ns-hd { display:flex; justify-content:space-between; align-items:center; padding:10px 10px 4px; font-size:9px; font-family:var(--mo); color:var(--t3); letter-spacing:.1em; text-transform:uppercase; cursor:pointer; user-select:none; transition:color .15s; margin-top:4px; }
.ns-hd:hover { color:var(--t2); }
.ns-arr { display:flex; align-items:center; opacity:.5; transition:opacity .15s; }
.ns-body { overflow:hidden; }
.ni { display: flex; align-items: center; gap: 9px; padding: 8px 10px; margin: 2px 3px; width: calc(100% - 6px); cursor: pointer; color: var(--t2); font-size: 12px; font-weight: 500; transition: color .13s; position: relative; user-select: none; border: none; background: none; text-align: left; font-family: var(--fn); border-radius: var(--r2x); letter-spacing: .005em; }
.ni:hover { color: var(--t1); }
.ni.on { color: var(--t1); font-weight: 600; }
.ni.on::before { content: ''; position: absolute; left: 0; top: 5px; bottom: 5px; width: 2px; background: rgba(232,234,237,.4); border-radius: 0 2px 2px 0; }
.ni svg { width: 15px; height: 15px; flex-shrink: 0; opacity: .4; transition: opacity .13s; }
.ni:hover svg { opacity: .65; }
.ni.on svg { opacity: 1; color: var(--t1); }
.nb { margin-left: auto; font-size: 9px; font-family: var(--mo); color: var(--t3); padding: 0 4px; }
.ni.on .nb { color: var(--t1); }
.sb-ft { margin-top: auto; padding: 10px 12px; border-top: 1px solid var(--b1); font-size: 9px; color: var(--t3); font-family: var(--mo); letter-spacing: .04em; }
.sb-social { display: inline-flex; align-items: center; justify-content: center; color: var(--t3); opacity: .65; transition: opacity .15s, color .15s; }
.sb-social:hover { opacity: 1; color: var(--t2); }

/* ALERTS */
.aa { padding: 0 20px; flex-shrink: 0; }
.ab { display: none; margin-top: 7px; padding: 7px 11px; border-radius: var(--r1); border: 1px solid; font-size: 11px; font-weight: 500; }

/* PAGES */
.pg { display: none; padding: 20px 24px; flex-direction: column; width: 100%; box-sizing: border-box; }
.pg.on { display: flex; animation: pgIn .16s var(--ease); }
@keyframes pgIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══ FUTURISTIC ANIMATIONS ═══ */
@keyframes glowPulse { 0%,100%{box-shadow:0 0 6px currentColor,0 0 12px currentColor;opacity:1;} 50%{box-shadow:0 0 18px currentColor,0 0 36px currentColor;opacity:.7;} }
@keyframes glowPulseR { 0%,100%{box-shadow:0 0 4px rgba(248,113,113,.4),0 0 10px rgba(248,113,113,.2);} 50%{box-shadow:0 0 10px rgba(248,113,113,.6),0 0 20px rgba(248,113,113,.3);} }
@keyframes glowPulseP { 0%,100%{box-shadow:0 0 5px rgba(167,139,250,.45),0 0 10px rgba(167,139,250,.2);} 50%{box-shadow:0 0 10px rgba(167,139,250,.7),0 0 20px rgba(167,139,250,.35);} }
@keyframes scanline { 0%{transform:translateY(-100%);} 100%{transform:translateY(100vh);} }
@keyframes countUp { from{transform:translateY(8px);opacity:0;} to{transform:translateY(0);opacity:1;} }
@keyframes flickerIn { 0%{opacity:0;} 10%{opacity:.8;} 20%{opacity:.2;} 30%{opacity:.9;} 40%{opacity:.4;} 60%{opacity:1;} 100%{opacity:1;} }
@keyframes lockShake { 0%,100%{transform:translateX(0);} 15%{transform:translateX(-8px);} 30%{transform:translateX(8px);} 45%{transform:translateX(-6px);} 60%{transform:translateX(6px);} 75%{transform:translateX(-3px);} 90%{transform:translateX(3px);} }
@keyframes lockEntrance { 0%{opacity:0;transform:scale(1.08);filter:blur(8px);} 60%{opacity:1;transform:scale(.98);filter:blur(0);} 100%{transform:scale(1);} }
@keyframes borderGlow { 0%,100%{border-color:rgba(240,82,82,.3);} 50%{border-color:rgba(240,82,82,.8);} }
@keyframes textGlitch { 0%,100%{text-shadow:0 0 8px rgba(240,82,82,.5);} 30%{text-shadow:2px 0 8px rgba(240,82,82,.6),-2px 0 6px rgba(75,142,245,.3);} 60%{text-shadow:0 0 12px rgba(240,82,82,.7);} }
@keyframes slideInLeft { from{opacity:0;transform:translateX(-16px);} to{opacity:1;transform:translateX(0);} }
@keyframes fadeUp { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} }
@keyframes rippleOut { 0%{transform:scale(1);opacity:.6;} 100%{transform:scale(2.2);opacity:0;} }

/* Stat card entrance */
.stat { animation: fadeUp .3s var(--ease) both; }
.stat:nth-child(1){animation-delay:.04s;} .stat:nth-child(2){animation-delay:.08s;}
.stat:nth-child(3){animation-delay:.12s;} .stat:nth-child(4){animation-delay:.16s;}

/* Card hover glow */
.card { transition: border-color .2s, box-shadow .2s; }
.card:hover { border-color: var(--b3); box-shadow: 0 0 0 1px var(--b2), 0 4px 20px rgba(0,0,0,.5); }

/* Sidebar nav item */
.ni { transition: color .15s, background .15s; border-radius: var(--r2x); }
.ni:hover { background: var(--s2); }
.ni.on { background: var(--ac2); }

/* Page transition improved */
.pg.on { animation: pgIn .22s var(--ease); }
@keyframes pgIn { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }

/* ARMED badge pulse */
#enf-status-badge.armed-glow { border-radius: 4px; }

/* LOCKED badge intense pulse */
#enf-status-badge.locked-glow { animation: glowPulseR 1.2s infinite; border-radius: 4px; }

/* Guardian badge */
#grd-status-badge { transition: all .3s; }

/* Full Lock overlay — dramatic */
.enf-lock-overlay.show { animation: lockEntrance .5s var(--ease) forwards !important; }

/* Scanline effect on lock overlay */
.enf-lock-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(var(--fg2-rgb),.008) 3px, rgba(var(--fg2-rgb),.008) 6px);
  pointer-events: none;
  z-index: 0;
}
.enf-lock-overlay::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--fg2-rgb),.1), transparent);
  animation: scanline 3s linear infinite;
  pointer-events: none;
}

/* FULL LOCK text glitch */
.enf-lock-title { animation: textGlitch 3s infinite, lockShake .4s ease .3s; }

/* PnL number count-up feel */
.sv { transition: color .4s; }
.sv.updated { animation: countUp .3s var(--ease); }

/* Log rows slide in */
.grd-log-row { animation: slideInLeft .18s var(--ease) both; }

/* Button press effect */
.btn:active { transform: scale(.97); }
.btn.pri:active { transform: scale(.97); filter: brightness(.95); }

/* Toggle switch glow */
#enf-toggle-wrap, #grd-toggle-wrap { transition: background .3s, box-shadow .3s; }

/* Banner pulse */
.enf-banner.show { animation: pgIn .25s var(--ease); border-bottom: 1px solid rgba(240,82,82,.6); }

/* Ripple on nav click */
@keyframes ripple { to{transform:scale(3);opacity:0;} }

/* PAGE HEADER */
.ph { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 0; flex-shrink: 0; padding-bottom: 14px; border-bottom: 1px solid rgba(var(--fg-rgb),.045); margin-bottom: 18px; }
.ph-t { font-size: 16px; font-weight: 600; letter-spacing: -.2px; color: var(--t1); display: flex; align-items: center; gap: 8px; }
.ph-s { font-size: 10px; color: var(--t3); font-family: var(--mo); margin-top: 4px; letter-spacing: .01em; line-height: 1.5; }
.ph-a { display: flex; gap: 6px; align-items: center; flex-shrink: 0; margin-top: 3px; }

/* RISK STRIP */
.rs { border: 1px solid var(--b1); border-radius: var(--r2x); padding: 11px 14px; margin-bottom: 12px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 14px; flex-shrink: 0; }
.rs-l { font-size: 9px; color: var(--t3); font-family: var(--mo); text-transform: uppercase; letter-spacing: .06em; display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.rs-v { font-size: 10px; font-weight: 600; font-family: var(--mo); }
.rs-t { height: 1px; background: var(--b1); border-radius: 1px; overflow: hidden; }
.rs-f { height: 100%; border-radius: 1px; transition: width .6s var(--ease), background .4s; }

/* GRIDS */
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.g4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 7px; }
.g32 { display: grid; grid-template-columns: 3fr 1.4fr; gap: 10px; }
.r2g { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* CARD */
.card { border: 1px solid var(--b1); border-radius: var(--r2x); padding: 12px 14px; flex-shrink: 0; transition: border-color .13s; }
.card:hover { border-color: var(--b2); }
.ch2 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.ct { font-size: 9px; color: var(--t3); font-family: var(--mo); text-transform: uppercase; letter-spacing: .09em; font-weight: 500; }

/* STAT CARDS */
.stat { border: 1px solid var(--b1); border-radius: var(--r2x); padding: 11px 13px; transition: border-color .13s; cursor: default; }
.stat:hover { border-color: var(--b2); }
.sl { font-size: 9px; color: var(--t3); font-family: var(--mo); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 4px; }
.sv { font-size: 20px; font-weight: 700; font-family: var(--mo); letter-spacing: -.4px; line-height: 1.1; }
.ss { font-size: 10px; color: var(--t2); margin-top: 2px; font-family: var(--mo); }
.sv.pos { color: var(--g); }
.sv.neg { color: var(--r); }
.sv.warn { color: var(--a); }
.sv.info { color: var(--bl); }
.sv.pur { color: var(--p); }

/* INFO BOXES */
.ins { padding: 8px 11px; border-left: 1px solid; margin: 5px 0; font-size: 11px; line-height: 1.6; color: var(--t2); border-radius: 0 var(--r1) var(--r1) 0; }
.ins.ok { border-color: var(--g); background: var(--g2); }
.ins.warn { border-color: var(--a); background: var(--a2); }
.ins.danger { border-color: var(--r); background: var(--r2); }
.ins.info { border-color: var(--bl); background: var(--bl2); }

/* TABS */
.tabs { display: flex; border-bottom: 1px solid var(--b1); margin-bottom: 12px; gap: 0; flex-shrink: 0; overflow-x: auto; scrollbar-width: none; position: relative; }
.tabs::-webkit-scrollbar { display: none; }
.tabs-wrap { position: relative; flex-shrink: 0; }
.tabs-wrap::after { content: ''; position: absolute; right: 0; top: 0; bottom: 1px; width: 40px; background: linear-gradient(to right, transparent, var(--bg)); pointer-events: none; z-index: 2; }
.tab { padding: 7px 13px; border: none; background: none; color: var(--t3); font-size: 11px; font-weight: 500; cursor: pointer; font-family: var(--fn); border-bottom: 1px solid transparent; margin-bottom: -1px; transition: color .13s, border-color .13s; letter-spacing: .005em; white-space: nowrap; }
.tab:hover { color: var(--t2); }
.tab.on { color: var(--t1); border-bottom-color: rgba(var(--fg2-rgb),.5); }

/* BUTTONS */
.btn { padding: 6px 13px; border-radius: var(--r1); border: 1px solid var(--b2); background: transparent; color: var(--t2); font-size: 11px; font-weight: 500; cursor: pointer; font-family: var(--fn); transition: color .13s, border-color .13s; letter-spacing: .005em; white-space: nowrap; }
.btn:hover { color: var(--t1); border-color: var(--b3); }
.btn.pri { background: var(--ac); border-color: var(--ac); color: #fff; font-weight: 600; }
.btn.pri:hover { background: rgba(var(--fg-rgb),.07); border-color: rgba(var(--fg2-rgb),.55); }
.btn.sm { padding: 4px 9px; font-size: 10px; }
.btn.xs { padding: 2px 7px; font-size: 9px; }

/* FORM */
.fld { display: flex; flex-direction: column; gap: 4px; }
.fld label { font-size: 9px; color: var(--t3); font-family: var(--mo); text-transform: uppercase; letter-spacing: .07em; }
.fld input, .fld select, .fld textarea { background: var(--s3); border: 1px solid var(--b1); border-radius: var(--r1); color: var(--t1); font-size: 11px; padding: 6px 8px; outline: none; font-family: var(--mo); transition: border-color .13s; width: 100%; }
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--b3); }
.fld textarea { resize: none; min-height: 40px; font-family: var(--fn); font-size: 11px; }
.fg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.fg3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; }
.fg4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 7px; }
.cbox { border: 1px solid var(--b1); border-radius: var(--r2x); padding: 10px 14px; margin-top: 8px; background: var(--s2); }
.crow { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--b1); }
.crow:last-child { border: none; }
.cll { font-size: 11px; color: var(--t2); font-family: var(--fn); font-weight: 500; }
.cv { font-size: 13px; font-weight: 700; font-family: var(--mo); color: var(--t1); letter-spacing: -0.3px; }

/* TABLE */
.sa { flex: 1; overflow: visible; }
.tw table { width: 100%; border-collapse: collapse; font-family: var(--mo); font-size: 10px; }
.tw thead th { background: var(--bg); padding: 6px 8px; text-align: left; color: var(--t3); font-weight: 500; font-size: 9px; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--b1); white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.tw tbody tr { border-bottom: 1px solid var(--b1); transition: background .1s; }
.tw tbody tr:hover { background: var(--s2); }
.tw tbody td { padding: 6px 8px; color: var(--t1); vertical-align: middle; }
.te { text-align: center; color: var(--t3); padding: 28px; font-family: var(--mo); font-size: 11px; }

/* BADGES */
.bdg { font-size: 9px; font-weight: 600; font-family: var(--mo); padding: 2px 5px; border-radius: 3px; letter-spacing: .03em; }
.b-l { background: var(--g2); color: var(--g); border: 1px solid var(--g3); }
.b-s { background: var(--r2); color: var(--r); border: 1px solid var(--r3); }
.b-w { background: var(--g2); color: var(--g); border: 1px solid var(--g3); }
.b-lo { background: var(--r2); color: var(--r); border: 1px solid var(--r3); }
.b-o { background: var(--a2); color: var(--a); border: 1px solid var(--a3); }
.pill { font-size: 9px; padding: 2px 5px; border-radius: 3px; font-family: var(--mo); }
.pill.ok { background: var(--g2); color: var(--g); }
.pill.info { background: var(--bl2); color: var(--bl); }
.pill.warn { background: var(--a2); color: var(--a); }
.pill.danger { background: var(--r2); color: var(--r); border: 1px solid var(--r3); }

/* CALENDAR */
.cal { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }
.pcg { display: grid; grid-template-columns: repeat(7,1fr); gap: 5px; }
.pch { text-align: center; font-size: 10px; color: var(--t2); font-family: var(--mo); text-transform: uppercase; letter-spacing: .06em; padding: 4px 0 8px; font-weight: 600; }
.pcd { min-height: 72px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; border-radius: 6px; cursor: pointer; border: 1px solid rgba(var(--fg-rgb),.05); transition: all .15s; padding: 8px 9px 7px; background: var(--s2); position: relative; }
.pcd:hover { border-color: rgba(var(--fg-rgb),.15); filter: brightness(1.15); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.pcd.emp { opacity: 0; pointer-events: none; min-height: 72px; }
.pcd.tod { border-color: var(--ac) !important; box-shadow: inset 0 0 0 1px var(--ac); }
.pcd-d { font-size: 11px; font-weight: 700; font-family: var(--mo); color: var(--t3); line-height: 1; }
.pcd.has-data .pcd-d { color: var(--t1); }
.pcd-p { font-size: 13px; font-weight: 800; font-family: var(--mo); letter-spacing: -.5px; margin-top: 6px; line-height: 1; }
.pcd-tc { font-size: 9px; font-family: var(--mo); opacity: .7; margin-top: 4px; font-weight: 500; }

/* DISTRIBUTION BARS */
.dbar { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; }
.dbar-l { width: 40px; text-align: right; color: var(--t3); font-family: var(--mo); font-size: 9px; flex-shrink: 0; }
.dbar-t { flex: 1; height: 12px; background: var(--s3); border-radius: 2px; overflow: hidden; }
.dbar-f { height: 100%; border-radius: 2px; display: flex; align-items: center; padding-left: 5px; font-size: 9px; font-family: var(--mo); transition: width .4s var(--ease); }

/* WATCHLIST */
.wrow { display: grid; grid-template-columns: 92px 1fr 72px 58px 52px 58px 62px; align-items: center; padding: 7px 10px; border-bottom: 1px solid var(--b1); font-size: 10px; }
.wrow:last-child { border: none; }
.whdr { display: grid; grid-template-columns: 92px 1fr 72px 58px 52px 58px 62px; padding: 5px 10px; }
.wbg { height: 2px; background: var(--s5); border-radius: 1px; overflow: hidden; }
.wbf { height: 100%; border-radius: 1px; transition: width .5s var(--ease); }

/* HABITS */
.hcard { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border: 1px solid var(--b1); border-radius: var(--r1); cursor: pointer; transition: border-color .13s; user-select: none; margin-bottom: 4px; }
.hcard:hover { border-color: var(--b2); }
.hcard.on { border-color: rgba(45,206,137,.18); background: var(--g2); }
.hcirc { width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--b2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .13s; font-size: 8px; color: #000; }
.hcard.on .hcirc { background: var(--g); border-color: var(--g); }
.hchk { opacity: 0; transition: opacity .1s; }
.hcard.on .hchk { opacity: 1; }
.hn { font-size: 11px; font-weight: 500; color: var(--t1); }
.hcard.on .hn { color: var(--g); }
.hw { font-size: 9px; color: var(--t3); font-family: var(--mo); }

/* BIAS BUTTONS */
.stkrow { display: flex; gap: 4px; margin-bottom: 11px; }
.stkd { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; }
.stkdot { width: 22px; height: 22px; border-radius: 3px; border: 1px solid var(--b1); display: flex; align-items: center; justify-content: center; font-size: 9px; color: var(--t3); transition: all .13s; }
.stkd.on .stkdot { background: var(--ac); border-color: var(--ac); color: #fff; }
.stklbl { font-size: 9px; color: var(--t3); font-family: var(--mo); }
.bbtns { display: flex; gap: 5px; }
.bbtn { flex: 1; padding: 6px 5px; border-radius: var(--r1); border: 1px solid var(--b1); background: transparent; color: var(--t2); cursor: pointer; font-family: var(--mo); font-size: 11px; font-weight: 600; text-align: center; transition: all .13s; letter-spacing: .04em; }
.bbtn.aL { background: var(--g2); border-color: rgba(45,206,137,.18); color: var(--g); }
.bbtn.aS { background: var(--r2); border-color: rgba(240,82,82,.18); color: var(--r); }
.bbtn.aN { background: var(--a2); border-color: rgba(227,160,8,.18); color: var(--a); }

/* PSIKO */
.pcard { border: 1px solid var(--b1); border-radius: var(--r1); padding: 7px 9px; }
.plbl { font-size: 9px; color: var(--t3); font-family: var(--mo); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 3px; }
.pinp { background: transparent; border: none; color: var(--t1); font-family: var(--mo); font-size: 11px; outline: none; width: 100%; }
.pinp::placeholder { color: var(--t3); }
.evbox { border: 1px solid var(--b1); border-radius: var(--r1); padding: 8px 11px; margin: 6px 0; }
.evl { font-size: 9px; color: var(--t3); font-family: var(--mo); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
.evv { font-size: 15px; font-weight: 700; font-family: var(--mo); }
.gmet { border: 1px solid var(--b1); border-radius: var(--r2x); padding: 10px 12px; }
.gmet-l { font-size: 9px; color: var(--t3); font-family: var(--mo); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 3px; }
.gmet-v { font-size: 16px; font-weight: 700; font-family: var(--mo); letter-spacing: -.3px; }
.gmet-b { height: 1px; background: var(--b1); border-radius: 1px; overflow: hidden; margin-top: 4px; }
.gmet-f { height: 100%; border-radius: 1px; transition: width .5s var(--ease); }
.gmet-n { font-size: 10px; color: var(--t2); line-height: 1.6; margin-top: 4px; }

.del { background: none; border: none; cursor: pointer; color: var(--t3); padding: 2px 4px; border-radius: 3px; font-size: 10px; transition: color .13s; }
.del:hover { color: var(--r); }
.pos { color: var(--g); } .neg { color: var(--r); } .warn { color: var(--a); } .info { color: var(--bl); } .muted { color: var(--t2); }

/* ── MARKET OVERVIEW ── */
.mkt-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 12px; }
@media(max-width:600px) { .mkt-grid { grid-template-columns: repeat(2,1fr); } }
.mkt-card { border: 1px solid var(--b1); border-radius: var(--r2x); padding: 12px 13px; transition: border-color .13s; }
.mkt-card:hover { border-color: var(--b2); }
.mkt-card-pair { font-size: 10px; font-weight: 700; color: var(--t2); font-family: var(--mo); margin-bottom: 5px; display: flex; align-items: center; gap: 5px; }
.mkt-card-price { font-size: 16px; font-weight: 700; color: var(--t1); font-family: var(--mo); letter-spacing: -.3px; margin-bottom: 5px; }
.mkt-card-price.loading { color: var(--t3); font-size: 11px; font-weight: 400; }
.mkt-row { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.mkt-chg { font-size: 10px; font-weight: 600; font-family: var(--mo); padding: 1px 6px; border-radius: 3px; }
.mkt-chg.pos { background: var(--g2); color: var(--g); }
.mkt-chg.neg { background: var(--r2); color: var(--r); }
.mkt-fr { font-size: 9px; color: var(--t3); font-family: var(--mo); }
.mkt-fr.warn { color: var(--a); }
.mkt-fr.danger { color: var(--r); font-weight: 700; }
.mkt-oi { font-size: 9px; color: var(--t3); font-family: var(--mo); margin-top: 3px; }
.mkt-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--t3); animation: pulse 2s infinite; }
.mkt-dot.live { background: var(--g); }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.3; } }
.mkt-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mkt-hdr-t { font-size: 12px; font-weight: 600; color: var(--t1); display: flex; align-items: center; gap: 6px; }
.mkt-hdr-r { font-size: 10px; color: var(--t3); font-family: var(--mo); cursor: pointer; padding: 3px 9px; border: 1px solid var(--b1); border-radius: var(--r1); background: transparent; transition: all .13s; }
.mkt-hdr-r:hover { color: var(--t2); border-color: var(--b2); }
.fr-alert { border-radius: var(--r1); padding: 7px 11px; font-size: 11px; font-family: var(--mo); display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.fr-alert.warn { background: var(--a2); border: 1px solid rgba(227,160,8,.18); color: var(--a); }
.fr-alert.danger { background: var(--r2); border: 1px solid rgba(240,82,82,.18); color: var(--r); }
.fr-alert.ok { background: var(--g2); border: 1px solid rgba(45,206,137,.18); color: var(--g); }
.live-price-bar { display: flex; align-items: center; gap: 9px; border: 1px solid var(--b1); border-radius: var(--r2x); padding: 8px 12px; margin-bottom: 8px; font-family: var(--mo); }
.live-price-lbl { font-size: 10px; color: var(--t3); flex: 1; }
.live-price-val { font-size: 14px; font-weight: 700; color: var(--t1); letter-spacing: -.3px; }
.live-price-btn { font-size: 10px; color: var(--ac); cursor: pointer; border: 1px solid rgba(75,142,245,.2); border-radius: var(--r1); padding: 3px 9px; background: var(--ac2); transition: all .13s; font-family: var(--mo); }
.live-price-btn:hover { background: var(--ac); color: #fff; }

/* ── PRE-ENTRY GATE ── */
.gate-wrap { border: 1px solid var(--b1); border-radius: var(--r2x); padding: 13px 15px; margin-bottom: 12px; }
.gate-title { font-size: 11px; font-weight: 600; color: var(--t1); margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
.gate-steps { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.gate-step { display: flex; align-items: center; gap: 11px; padding: 7px 11px; border-radius: var(--r1); border: 1px solid var(--b1); cursor: pointer; transition: border-color .13s; user-select: none; }
.gate-step:hover { border-color: var(--b2); }
.gate-step.done { border-color: rgba(45,206,137,.2); background: var(--g2); }
.gate-step.done .gchk { background: var(--g); border-color: var(--g); color: #000; }
.gchk { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--b2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 9px; font-weight: 700; transition: all .13s; }
.gate-step.done .gchk::after { content: 'v'; }
.gate-lbl { font-size: 11px; color: var(--t2); font-family: var(--fn); flex: 1; }
.gate-step.done .gate-lbl { color: var(--t1); }
.gate-num { font-size: 9px; color: var(--t3); font-family: var(--mo); flex-shrink: 0; }
.gate-bar-wrap { height: 1px; background: var(--b1); border-radius: 1px; overflow: hidden; margin-bottom: 7px; }
.gate-bar { height: 100%; border-radius: 1px; background: rgba(var(--fg2-rgb),.5); transition: width .3s var(--ease); }
.gate-status { font-size: 10px; font-family: var(--mo); text-align: center; color: var(--t3); }
.gate-locked { opacity: .35; pointer-events: none; user-select: none; }

/* ── STREAK BANNER ── */
.streak-banner { border-radius: var(--r2x); padding: 9px 13px; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; border: 1px solid; }
.streak-w { border-color: rgba(45,206,137,.2); background: var(--g2); color: var(--g); }
.streak-l { border-color: rgba(240,82,82,.2); background: var(--r2); color: var(--r); }
.streak-ico { font-size: 18px; }

/* ── SCREENSHOT ── */
.ss-drop { border: 1px dashed var(--b2); border-radius: var(--r2x); padding: 14px; text-align: center; cursor: pointer; transition: border-color .13s; position: relative; }
.ss-drop:hover, .ss-drop.drag { border-color: var(--ac); }
.ss-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.ss-icon { font-size: 20px; margin-bottom: 4px; }
.ss-lbl { font-size: 11px; color: var(--t2); font-family: var(--mo); }
.ss-sub { font-size: 10px; color: var(--t3); font-family: var(--mo); margin-top: 2px; }
.ss-preview { position: relative; border-radius: var(--r2x); overflow: hidden; margin-top: 7px; border: 1px solid var(--b1); }
.ss-preview img { width: 100%; max-height: 200px; object-fit: contain; display: block; }
.ss-remove { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.75); border: 1px solid var(--r); color: var(--r); border-radius: 4px; padding: 2px 8px; font-size: 10px; cursor: pointer; font-family: var(--mo); transition: all .13s; }
.ss-remove:hover { background: var(--r); color: #fff; }
.ss-thumb { width: 26px; height: 26px; border-radius: 3px; object-fit: cover; border: 1px solid var(--b1); cursor: pointer; vertical-align: middle; }

/* ── MODAL CONFIRM ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.8); backdrop-filter: blur(8px); z-index: 9999; display: flex; align-items: center; justify-content: center; animation: fadeIn .13s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.modal-box { background: var(--s2); border: 1px solid var(--b2); border-radius: var(--r3x); padding: 22px 24px; min-width: 300px; max-width: 380px; box-shadow: var(--sh3); animation: slideUp .18s var(--ease); }
.modal-icon { font-size: 28px; margin-bottom: 10px; text-align: center; }
.modal-title { font-size: 14px; font-weight: 700; color: var(--t1); text-align: center; margin-bottom: 6px; }
.modal-msg { font-size: 11px; color: var(--t2); text-align: center; line-height: 1.65; margin-bottom: 18px; font-family: var(--mo); }
.modal-btns { display: flex; gap: 8px; }
.modal-btns button { flex: 1; padding: 9px; border-radius: var(--r1); font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--fn); border: 1px solid; transition: all .13s; }
.modal-cancel { background: transparent; border-color: var(--b2); color: var(--t2); }
.modal-cancel:hover { color: var(--t1); border-color: var(--b3); }
.modal-danger { background: var(--r2); border-color: rgba(240,82,82,.25); color: var(--r); }
.modal-danger:hover { background: var(--r); color: #fff; }
.modal-ok { background: var(--ac2); border-color: rgba(75,142,245,.25); color: var(--ac); }
.modal-ok:hover { background: var(--ac); color: #fff; }

/* ── EDIT TRADE MODAL ── */
.edit-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.85); backdrop-filter: blur(10px); z-index: 9997; display: flex; align-items: center; justify-content: center; animation: fadeIn .13s ease; padding: 14px; }
.edit-box { background: var(--s1); border: 1px solid var(--b2); border-radius: var(--r3x); width: min(680px,98vw); max-height: 92vh; overflow-y: auto; box-shadow: var(--sh3); animation: slideUp .18s var(--ease); }
.edit-hd { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--b1); position: sticky; top: 0; background: var(--s1); z-index: 2; }
.edit-title { font-size: 13px; font-weight: 700; color: var(--t1); }
.edit-close { color: var(--t3); cursor: pointer; font-size: 18px; line-height: 1; padding: 4px 8px; border-radius: 4px; transition: color .13s; }
.edit-close:hover { color: var(--t1); }
.edit-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.edit-ss-preview { border-radius: var(--r2x); overflow: hidden; border: 1px solid var(--b1); position: relative; margin-top: 5px; }
.edit-ss-preview img { width: 100%; max-height: 180px; object-fit: contain; display: block; }

/* ── CHECKLIST EDITOR ── */
.chke-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.85); backdrop-filter: blur(10px); z-index: 9996; display: flex; align-items: center; justify-content: center; animation: fadeIn .13s ease; padding: 14px; }
.chke-box { background: var(--s1); border: 1px solid var(--b2); border-radius: var(--r3x); width: min(660px,98vw); max-height: 92vh; overflow-y: auto; box-shadow: var(--sh3); animation: slideUp .18s var(--ease); }
.chke-hd { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--b1); position: sticky; top: 0; background: var(--s1); z-index: 2; }
.chke-item { display: flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid var(--b1); border-radius: var(--r1); margin-bottom: 4px; }
.chke-item input[type=text] { flex: 1; background: var(--s3); border: 1px solid var(--b1); border-radius: 3px; color: var(--t1); font-size: 11px; padding: 4px 7px; outline: none; font-family: var(--fn); }
.chke-item input[type=number] { width: 38px; background: var(--s3); border: 1px solid var(--b1); border-radius: 3px; color: var(--t1); font-size: 11px; padding: 4px 5px; outline: none; text-align: center; font-family: var(--mo); }
.chke-del { background: transparent; border: 1px solid var(--r3); color: var(--r); border-radius: 3px; font-size: 10px; padding: 2px 6px; cursor: pointer; flex-shrink: 0; font-family: var(--mo); transition: all .13s; }
.chke-del:hover { background: var(--r); color: #fff; }
.chke-add { display: flex; gap: 5px; margin-top: 5px; }
.chke-add input { flex: 1; background: var(--s3); border: 1px solid var(--b1); border-radius: var(--r1); color: var(--t1); font-size: 11px; padding: 5px 8px; outline: none; font-family: var(--fn); }
.chke-sec { font-size: 9px; font-weight: 700; font-family: var(--mo); text-transform: uppercase; letter-spacing: .08em; padding: 9px 0 4px; }
.chke-mand { font-size: 8px; color: var(--a); font-family: var(--mo); margin-left: 6px; }

/* ── LIGHTBOX ── */
.lb-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.96); z-index: 10000; display: flex; align-items: center; justify-content: center; cursor: zoom-out; animation: fadeIn .13s ease; }
.lb-overlay img { max-width: 92vw; max-height: 92vh; object-fit: contain; border-radius: var(--r2x); }

/* ── REPLAY OVERLAY ── */
.replay-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.88); backdrop-filter: blur(12px); z-index: 9998; display: flex; align-items: center; justify-content: center; padding: 16px; animation: fadeIn .13s ease; }
.replay-box { background: var(--s1); border: 1px solid var(--b2); border-radius: var(--r3x); width: min(780px,98vw); max-height: 92vh; overflow-y: auto; box-shadow: var(--sh3); animation: slideUp .18s var(--ease); }
.replay-hd { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; border-bottom: 1px solid var(--b1); position: sticky; top: 0; background: var(--s1); z-index: 2; }
.replay-title { font-size: 13px; font-weight: 700; color: var(--t1); font-family: var(--mo); display: flex; align-items: center; gap: 10px; }
.replay-body { padding: 16px 18px; }
.replay-chart { border-radius: var(--r2x); overflow: hidden; border: 1px solid var(--b1); background: var(--s3); margin-bottom: 13px; min-height: 200px; display: flex; align-items: center; justify-content: center; }
.replay-chart img { width: 100%; max-height: 380px; object-fit: contain; display: block; }
.replay-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin-bottom: 13px; }
.replay-stat { border: 1px solid var(--b1); border-radius: var(--r1); padding: 9px 11px; }
.replay-btn { background: transparent; border: 1px solid var(--b2); border-radius: var(--r1); color: var(--t2); padding: 6px 12px; font-size: 10px; cursor: pointer; font-family: var(--mo); transition: color .13s, border-color .13s; }
.replay-btn:hover { color: var(--t1); border-color: var(--b3); }
.notes-box { background: var(--s3); border: 1px solid var(--b1); border-radius: var(--r1); padding: 10px 12px; font-size: 11px; color: var(--t2); line-height: 1.65; font-family: var(--fn); white-space: pre-wrap; }

/* ── CHECKLIST ITEMS ── */
.ci { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border: 1px solid var(--b1); border-radius: var(--r1); cursor: pointer; transition: border-color .13s; user-select: none; margin-bottom: 4px; }
.ci:hover { border-color: var(--b2); }
.ci.ck { border-color: rgba(45,206,137,.2); background: var(--g2); }
.ci.pt { border-color: rgba(227,160,8,.2); background: var(--a2); }
.ci.iv { border-color: rgba(240,82,82,.15); background: var(--r2); }
.cb2 { width: 15px; height: 15px; border-radius: 4px; border: 1px solid var(--b2); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; flex-shrink: 0; transition: all .13s; }
.ci.ck .cb2 { background: var(--g); border-color: var(--g); color: #000; }
.ci.pt .cb2 { background: var(--a); border-color: var(--a); color: #000; }
.ci.iv .cb2 { background: var(--r); border-color: var(--r); color: #fff; }
.cn { font-size: 11px; color: var(--t1); font-weight: 500; }
.cd { font-size: 9px; color: var(--t3); font-family: var(--mo); margin-top: 1px; }
.ci.ck .cn { color: var(--g); }
.ci.pt .cn { color: var(--a); }
.ci.iv .cn { color: var(--r); }

/* ── PANEL ── */
.panel { display: none; }
.panel.on { display: block; animation: pgIn .14s var(--ease); }


/* ── DEPOSIT/WITHDRAW ── */
.dw-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--b1); font-size: 10px; }
.dw-row:last-child { border: none; }
.dw-dep { background: var(--g2); color: var(--g); border: 1px solid var(--g3); }
.dw-wit { background: var(--r2); color: var(--r); border: 1px solid var(--r3); }

/* ── DRILL-DOWN MODAL ── */
.drill-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.82); backdrop-filter: blur(10px); z-index: 9997; display: flex; align-items: center; justify-content: center; padding: 16px; animation: fadeIn .13s ease; }
.drill-box { background: var(--s1); border: 1px solid var(--b2); border-radius: var(--r3x); width: min(700px,97vw); max-height: 88vh; overflow-y: auto; box-shadow: var(--sh3); animation: slideUp .18s var(--ease); }
.drill-hd { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; border-bottom: 1px solid var(--b1); position: sticky; top: 0; background: var(--s1); z-index: 2; }
.drill-title { font-size: 13px; font-weight: 700; color: var(--t1); }
.drill-body { padding: 14px 18px; }
.drill-trade { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--b1); border-radius: var(--r1); font-size: 10px; font-family: var(--mo); margin-bottom: 4px; }
.drill-trade:hover { background: var(--s2); }

/* ── LIVE CLOCK ── */
.sess-card-active { border-color: rgba(45,206,137,.3) !important; }

/* ── REALTIME STATUS ── */
.mkt-dot.stale { background: var(--a) !important; animation: pulse 0.8s infinite !important; }
@keyframes rt_blink { 0%,100%{opacity:1} 50%{opacity:.3} }
#_rt_live_bar { animation: none; transition: color .4s; }

/* ── v24: Worker realtime stats display ── */
.worker-stat-row { display:flex; align-items:center; justify-content:space-between; padding:4px 0; border-bottom:1px solid var(--b1); font-size:10px; }
.worker-stat-row:last-child { border:none; }
.worker-stat-lbl { color:var(--t3); font-family:var(--mo); font-size:9px; text-transform:uppercase; letter-spacing:.05em; }
.worker-stat-val { font-family:var(--mo); font-weight:600; font-size:11px; color:var(--t1); }

/* ── MM FIX ── */
.mm-section { display: flex; flex-direction: column; gap: 10px; }

/* ── DATE INPUT ── */
input[type=date]::-webkit-calendar-picker-indicator { filter: invert(.4); cursor: pointer; }

/* ── SELECT ARROW ── */
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(var(--fg-rgb),.2)'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; padding-right: 22px !important; }

/* ── CHECKLIST SECTIONS ── */
.chk-sec { margin-bottom: 14px; }
.chk-sec-hd { font-size: 9px; color: var(--t3); font-family: var(--mo); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; padding-bottom: 5px; border-bottom: 1px solid var(--b1); }
.chk-sec-hd::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: var(--t3); flex-shrink: 0; }

/* ── SIDEBAR DATE ── */
.sb-date { font-size: 9px; color: var(--t3); font-family: var(--mo); margin-bottom: 8px; letter-spacing: .02em; }

/* ── MODE TOGGLE (Live / Manual) ── */
.mode-toggle { position: relative; margin: 0 10px 10px; }
.mode-dropdown-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 6px 10px; background: transparent; border: none; border-radius: var(--r1); cursor: pointer; font-family: var(--fn); font-size: 12px; font-weight: 600; color: var(--t1); transition: background .13s; }
.mode-dropdown-btn:hover { background: var(--s2); }
.mode-dropdown-btn .mode-label { display: flex; align-items: center; gap: 7px; }
.mode-dropdown-btn .mode-chevron { font-size: 10px; color: var(--t3); transition: transform .2s var(--ease); }
.mode-dropdown-btn.open .mode-chevron { transform: rotate(180deg); }
.mode-dot-sm { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.mode-dot-sm.live { background: var(--g); animation: pulse 1.6s infinite; }
.mode-dot-sm.manual { background: var(--p); }
.mode-dropdown-menu { display: none; position: absolute; top: calc(100% + 2px); left: 0; right: 0; background: var(--s2); border: 1px solid var(--b2); border-radius: var(--r2x); overflow: hidden; z-index: 200; box-shadow: var(--sh2); }
.mode-dropdown-menu.open { display: block; animation: pgIn .12s var(--ease); }
.mode-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 11px; background: none; border: none; cursor: pointer; font-family: var(--fn); font-size: 11px; font-weight: 500; color: var(--t2); transition: background .1s, color .1s; text-align: left; }
.mode-menu-item:hover { background: var(--s3); color: var(--t1); }
.mode-menu-item.active { color: var(--t1); }
.mode-menu-item.active.live { color: var(--g); }
.mode-menu-item.active.manual { color: var(--p); }
.mode-btn { flex: 1; padding: 5px 6px; border: none; border-radius: 4px; font-size: 10px; font-weight: 600; cursor: pointer; font-family: var(--fn); letter-spacing: .01em; transition: all .18s var(--ease2); color: var(--t3); background: transparent; }
.mode-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 3px; font-size: 9px; font-weight: 700; font-family: var(--mo); letter-spacing: .05em; margin-left: 6px; flex-shrink: 0; }
.mode-badge.live { background: rgba(52,211,153,.07); color: var(--g); border: 1px solid rgba(52,211,153,.15); }
.mode-badge.manual { background: rgba(167,139,250,.07); color: var(--p); border: 1px solid rgba(167,139,250,.18); }
.mode-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.mode-badge.live .mode-dot { background: var(--g); animation: pulse 1.6s infinite; }
.mode-badge.manual .mode-dot { background: var(--p); }
@keyframes pulse { 0%,100%{opacity:1;}50%{opacity:.3;} }
.bt-banner { display: none; }
.bt-banner.show { display: flex; align-items: center; gap: 10px; padding: 8px 14px; margin: 6px 20px 0; border-radius: var(--r2x); border: 1px solid rgba(155,127,232,.25); background: var(--p2); color: var(--p); font-size: 11px; font-weight: 600; }
/* API Connect panel (Live mode) */
.api-panel { border: 1px solid var(--b2); border-radius: var(--r3x); padding: 18px 20px; margin-bottom: 12px; background: var(--s2); }
.api-panel-hd { font-size: 9px; color: var(--t3); font-family: var(--mo); text-transform: uppercase; letter-spacing: .09em; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--b1); }
.api-status { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; font-family: var(--mo); font-weight: 600; padding: 3px 8px; border-radius: 99px; background: var(--s4); border: 1px solid var(--b2); }
.api-status.connected { color: var(--g); background: var(--g2); border-color: var(--g3); }
.api-status.disconnected { color: var(--t3); }
.api-status-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.api-status.connected .api-status-dot { animation: pulse 1.6s infinite; }
.api-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 8px; }
.api-notice { padding: 8px 11px; border-left: 2px solid rgba(var(--fg2-rgb),.3); background: rgba(var(--fg2-rgb),.04); border-radius: 0 var(--r1) var(--r1) 0; font-size: 10px; color: var(--t2); line-height: 1.6; margin-top: 8px; }

/* ══ SETTINGS — Sub-section tabs ══ */
/* Layout dua kolom: daftar nav vertikal + panel isi.
   Menggantikan tab horizontal — dengan 6 bagian, tab membungkus ke baris kedua
   di layar sempit dan menyisakan "Danger Zone" sendirian di sana. */
.set-layout { display: grid; grid-template-columns: 208px 1fr; gap: 14px; align-items: start; }
.set-nav { display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--s2); border: 1px solid var(--b1); border-radius: var(--r3x); position: sticky; top: 0; }
.set-tab { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; background: transparent; border: none; border-radius: var(--r1); cursor: pointer; font-family: var(--fn); font-size: 12px; font-weight: 500; color: var(--t2); text-align: left; transition: background .13s, color .13s; }
.set-tab:hover { color: var(--t1); background: var(--s3); }
.set-tab.on { background: var(--s4); color: var(--t1); font-weight: 600; }
.set-tab svg { width: 15px; height: 15px; flex-shrink: 0; opacity: .75; }
.set-tab.on svg { opacity: 1; }
/* Danger Zone dipisah garis, seperti "Logout" di panel settings pada umumnya */
.set-nav-sep { height: 1px; background: var(--b1); margin: 7px 4px; }
.set-tab.danger { color: var(--r); }
.set-tab.danger:hover { background: rgba(248,113,113,.06); color: var(--r); }
.set-tab.danger.on { background: rgba(248,113,113,.1); color: var(--r); }
.set-help { margin-top: 10px; padding: 11px 12px; background: var(--s3); border: 1px solid var(--b1); border-radius: var(--r2x); }
.set-help-t { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--t1); margin-bottom: 5px; }
.set-help-b { font-size: 10px; color: var(--t3); line-height: 1.55; }
.set-content { min-width: 0; padding: 16px 18px; background: var(--s2); border: 1px solid var(--b1); border-radius: var(--r3x); }
.set-content-hd { font-size: 15px; font-weight: 700; color: var(--t1); letter-spacing: -.2px; padding-bottom: 11px; margin-bottom: 14px; border-bottom: 1px solid var(--b1); }
.set-panel { display: none; animation: pgIn .14s var(--ease); }
.set-panel.on { display: block; }
.set-sec-title { font-size: 10px; font-family: var(--mo); color: var(--t3); text-transform: uppercase; letter-spacing: .09em; font-weight: 700; margin: 0 0 10px; }
.set-danger-wrap { margin-top: 4px; padding-top: 16px; border-top: 1px dashed rgba(248,113,113,.35); }
.set-danger-card { border: 1px solid rgba(248,113,113,.3); border-radius: var(--r3x); background: rgba(248,113,113,.03); padding: 14px 16px; }

/* ══ API CONNECT — Premium Layout ══ */
/* Warisan dari halaman API Connect lama. Dipertahankan untuk .sa polos, tapi
   JANGAN dipakai saat .sa juga membawa .set-layout — selector ID ini menang
   atas .set-layout dan membuat nav & isi menumpuk, bukan berdampingan. */
#pg-settings .sa:not(.set-layout) { display: flex; flex-direction: column; gap: 0; }

/* Collapsible section */
.api-sec { border: 1px solid var(--b1); border-radius: var(--r3x); margin-bottom: 8px; overflow: hidden; transition: border-color .2s; }
.api-sec:hover { border-color: var(--b2); }
.api-sec-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; cursor: pointer; user-select: none;
  background: var(--s2); transition: background .15s;
}
.api-sec-hd:hover { background: var(--s3); }
.api-sec-left { display: flex; align-items: center; gap: 10px; }
.api-sec-icon {
  width: 26px; height: 26px; border-radius: 5px;
  border: 1px solid var(--b2); background: var(--s4);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.api-sec-icon svg { width: 12px; height: 12px; color: var(--t2); opacity: .7; }
.api-sec-title { font-size: 11px; font-weight: 600; color: var(--t1); letter-spacing: .01em; }
.api-sec-sub { font-size: 9px; color: var(--t3); font-family: var(--mo); margin-top: 1px; letter-spacing: .03em; }
.api-sec-right { display: flex; align-items: center; gap: 8px; }
.api-sec-chevron { width: 14px; height: 14px; color: var(--t3); transition: transform .22s var(--ease); flex-shrink: 0; }
.api-sec.open .api-sec-chevron { transform: rotate(180deg); }
.api-sec-body { display: none; padding: 0 16px 16px; background: var(--s2); }
.api-sec.open .api-sec-body { display: block; }
.api-sec-divider { height: 1px; background: var(--b1); margin: 0 16px; }

/* Fields inside api sections */
#pg-settings .fld { margin-bottom: 10px; }
#pg-settings .fld:last-child { margin-bottom: 0; }
#pg-settings .fld label { font-size: 9px; color: var(--t3); font-family: var(--mo); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 5px; display: flex; align-items: center; gap: 5px; }
#pg-settings .fld label .fld-hint { font-size: 8px; color: var(--t3); font-family: var(--mo); text-transform: none; letter-spacing: 0; opacity: .7; }
#pg-settings .fld input {
  padding: 9px 11px; font-size: 11px; font-family: var(--mo);
  border-color: var(--b1); background: var(--s3);
  transition: border-color .13s, box-shadow .13s; border-radius: var(--r2x);
  width: 100%;
}
#pg-settings .fld input:focus { border-color: var(--b3); box-shadow: 0 0 0 2px rgba(var(--fg2-rgb),.07); }

/* Action buttons row */
.api-btn-row { display: flex; gap: 7px; margin-top: 14px; }
.api-btn-row .btn.pri { flex: 1; padding: 9px; font-size: 11px; letter-spacing: .01em; }
.api-btn-row .btn { padding: 9px 14px; font-size: 11px; }

/* Status badge */
.api-status { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; font-family: var(--mo); font-weight: 600; padding: 3px 9px; border-radius: 99px; background: var(--s4); border: 1px solid var(--b2); letter-spacing: .02em; }
.api-status.connected { color: var(--g); background: var(--g2); border-color: var(--g3); }
.api-status.disconnected { color: var(--t3); }
.api-status-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.api-status.connected .api-status-dot { animation: pulse 1.6s infinite; }

/* Notice */
.api-notice { padding: 9px 12px; border: 1px solid var(--b2); background: rgba(var(--fg2-rgb),.04); border-radius: var(--r2x); font-size: 10px; color: var(--t2); line-height: 1.65; margin-top: 10px; }
.api-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Rows inside cards */
#pg-settings .crow { padding: 7px 0; }
#pg-settings .cll { font-size: 11px; }
#pg-settings .cv { font-size: 12px; }

/* Mode buttons */
.api-mode-btn {
  flex: 1; padding: 8px 0; font-size: 9px; font-family: var(--mo);
  border-radius: var(--r2x); border: 1px solid var(--b2);
  background: var(--s3); color: var(--t2); cursor: pointer;
  letter-spacing: .04em; text-transform: uppercase; font-weight: 600;
  transition: all .15s;
}
.api-mode-btn:hover { background: var(--s4); color: var(--t1); }
.api-mode-btn.active { background: var(--s5); color: var(--t1); border-color: var(--b3); }
.api-mode-btn.active-warn { background: rgba(251,191,36,.08); color: var(--a); border-color: rgba(251,191,36,.2); }

/* CORS warning */
#api-cors-warn { border-radius: var(--r2x); border: 1px solid rgba(251,191,36,.2); background: var(--a2); padding: 11px 14px; margin-top: 10px; }

/* Guide steps */
.api-guide-step { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--b1); }
.api-guide-step:last-child { border: none; padding-bottom: 0; }
.api-guide-num { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--b2); background: var(--s4); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; font-family: var(--mo); color: var(--t2); flex-shrink: 0; margin-top: 1px; }
.api-guide-num.warn { border-color: rgba(251,191,36,.3); background: rgba(251,191,36,.07); color: var(--a); }
.api-guide-title { font-size: 11px; font-weight: 600; color: var(--t1); margin-bottom: 4px; }
.api-guide-body { font-size: 10px; color: var(--t2); line-height: 1.65; }

/* Multi-account list */
#ma-list .ma-account-row { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--b1); border-radius: var(--r2x); background: var(--s3); cursor: pointer; transition: border-color .13s, background .13s; }
#ma-list .ma-account-row:hover { border-color: var(--b3); background: var(--s4); }
#ma-list .ma-account-row.active { border-color: rgba(52,211,153,.25); background: var(--g2); }

/* Sync grid */
.api-sync-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 680px) { .api-sync-grid { grid-template-columns: 1fr; } }
.api-sync-card { border: 1px solid var(--b1); border-radius: var(--r2x); padding: 14px 16px; background: var(--s3); }
.api-sync-card-title { font-size: 9px; color: var(--t3); font-family: var(--mo); text-transform: uppercase; letter-spacing: .09em; margin-bottom: 10px; font-weight: 600; }
#pg-settings #api-proxy-url { padding: 8px 10px; font-size: 10px; margin-top: 6px; border-radius: var(--r2x); width: 100%; background: var(--s4); border: 1px solid var(--b1); color: var(--t1); outline: none; font-family: var(--mo); box-sizing: border-box; }
.live-sidebar-menu { display: none; }
.manual-sidebar-menu { display: none; }
/* ── ANNOTATE PAGE (Live) ── */
.ann-trade-card { border: 1px solid var(--b2); border-radius: var(--r2x); padding: 12px 14px; margin-bottom: 8px; cursor: pointer; transition: border-color .13s; }
.ann-trade-card:hover { border-color: var(--b3); }
.ann-trade-card.selected { border-color: rgba(var(--fg2-rgb),.25); background: rgba(var(--fg2-rgb),.05); }
.ann-trade-row { display: flex; align-items: center; gap: 10px; }
.ann-trade-info { flex: 1; }
.ann-trade-pair { font-size: 13px; font-weight: 700; font-family: var(--mo); color: var(--t1); letter-spacing: -.2px; }
.ann-trade-meta { font-size: 11px; color: var(--t2); font-family: var(--mo); margin-top: 3px; }
.ann-pnl { font-size: 14px; font-weight: 700; font-family: var(--mo); letter-spacing: -.3px; }
.ann-pnl.pos { color: var(--g); }
.ann-pnl.neg { color: var(--r); }
.ann-pnl.open { color: var(--bl); }
.ann-annotated { font-size: 9px; font-family: var(--mo); color: var(--g); background: var(--g2); border: 1px solid var(--g3); padding: 2px 6px; border-radius: 3px; flex-shrink: 0; }
.ann-form { border: 1px solid rgba(var(--fg2-rgb),.2); border-radius: var(--r2x); padding: 16px 18px; background: rgba(var(--fg2-rgb),.04); margin-top: 10px; }
.ann-form-hd { font-size: 12px; font-weight: 700; color: var(--t1); font-family: var(--mo); letter-spacing: .02em; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; }
.disc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 10px; }
.disc-item { border: 1px solid var(--b2); border-radius: var(--r1); padding: 9px 11px; cursor: pointer; transition: all .15s; user-select: none; background: var(--s2); }
.disc-item:hover { border-color: var(--b3); background: var(--s3); }
.disc-item.on { border-color: rgba(240,82,82,.35); background: rgba(240,82,82,.07); }
.disc-item.on.ok { border-color: rgba(45,206,137,.3); background: rgba(45,206,137,.06); }
.disc-lbl { font-size: 11px; font-weight: 600; color: var(--t1); transition: color .13s; }
.disc-item.on .disc-lbl { color: var(--r); }
.disc-item.on.ok .disc-lbl { color: var(--g); }
.disc-sub { font-size: 10px; color: var(--t2); margin-top: 3px; font-family: var(--mo); line-height: 1.5; }
.ann-score-bar { height: 3px; background: var(--b1); border-radius: 2px; overflow: hidden; margin: 8px 0; }
.ann-score-fill { height: 100%; border-radius: 2px; transition: width .5s var(--ease), background .3s; }
.ann-score-lbl { font-size: 9px; font-family: var(--mo); color: var(--t3); margin-bottom: 6px; display: flex; justify-content: space-between; }

/* ── PLAYBOOK ── */
.pb-panel { border:1px solid rgba(155,127,232,.25); border-radius:var(--r2x); background:var(--p2); padding:12px 14px; margin-bottom:10px; animation:pgIn .15s var(--ease); }
.pb-panel-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.pb-panel-title { font-size:10px; font-weight:700; color:var(--p); font-family:var(--mo); letter-spacing:.05em; text-transform:uppercase; display:flex; align-items:center; gap:6px; }
.pb-rule-row { display:flex; align-items:baseline; gap:7px; padding:3px 0; border-bottom:1px solid rgba(155,127,232,.1); }
.pb-rule-row:last-child { border:none; }
.pb-rule-lbl { font-size:9px; font-family:var(--mo); color:var(--p); min-width:38px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; flex-shrink:0; }
.pb-rule-val { font-size:10px; color:var(--t2); line-height:1.5; }
.pb-stats { display:grid; grid-template-columns:1fr 1fr 1fr; gap:5px; margin-top:8px; }
.pb-stat { background:rgba(155,127,232,.08); border-radius:var(--r1); padding:5px 7px; text-align:center; border:1px solid rgba(155,127,232,.12); }
.pb-stat-l { font-size:8px; color:var(--t3); font-family:var(--mo); margin-bottom:2px; text-transform:uppercase; letter-spacing:.05em; }
.pb-stat-v { font-size:12px; font-weight:700; font-family:var(--mo); }
.pb-no-match { font-size:10px; color:var(--t3); font-family:var(--mo); padding:6px 0; }
.pb-tag { font-size:9px; padding:2px 7px; border-radius:3px; font-family:var(--mo); border:1px solid rgba(155,127,232,.2); background:rgba(155,127,232,.06); color:var(--p); display:inline-block; margin:1px; }
/* Playbook manager overlay */
.pb-overlay { display:none; position:fixed; inset:0; z-index:9500; background:rgba(0,0,0,.7); align-items:center; justify-content:center; }
.pb-overlay.show { display:flex; }
.pb-box { background:var(--s1); border:1px solid var(--b2); border-radius:var(--r2x); width:640px; max-width:96vw; max-height:85vh; display:flex; flex-direction:column; overflow:hidden; }
.pb-box-hd { padding:14px 18px; border-bottom:1px solid var(--b1); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.pb-box-body { flex:1; overflow-y:auto; padding:14px 18px; }
.pb-card { border:1px solid var(--b1); border-radius:var(--r2x); padding:12px 14px; margin-bottom:8px; background:var(--s2); transition:border-color .13s; }
.pb-card:hover { border-color:var(--b2); }
.pb-card-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; gap:8px; }
.pb-card-name { font-size:12px; font-weight:700; color:var(--t1); font-family:var(--mo); }
.pb-card-btns { display:flex; gap:5px; flex-shrink:0; }
.pb-type-tag { font-size:9px; padding:2px 7px; border-radius:3px; font-family:var(--mo); font-weight:600; }
.pb-type-trend { background:var(--bl2); color:var(--bl); border:1px solid var(--bl3); }
.pb-type-rev { background:var(--a2); color:var(--a); border:1px solid var(--a3); }
.pb-type-scalp { background:var(--g2); color:var(--g); border:1px solid var(--g3); }
.pb-type-other { background:var(--p2); color:var(--p); border:1px solid rgba(155,127,232,.2); }
.pb-form-wrap { border:1px solid rgba(155,127,232,.3); border-radius:var(--r2x); padding:14px; background:rgba(155,127,232,.04); margin-bottom:12px; }

/* ── GUARDIAN ── */
.guardian-banner { display:none; position:fixed; top:0; left:0; right:0; z-index:99998; padding:10px 20px; background:rgba(240,82,82,.97); backdrop-filter:blur(8px); color:#fff; font-family:var(--mo); font-size:12px; font-weight:700; letter-spacing:.03em; align-items:center; gap:12px; box-shadow:0 4px 24px rgba(240,82,82,.5); }
.guardian-banner.show { display:flex; animation:pgIn .2s var(--ease); }
.guardian-timer { font-size:22px; font-weight:800; letter-spacing:-.5px; color:#fff; min-width:70px; }
.guardian-badge { padding:3px 9px; border-radius:3px; background:rgba(var(--fg-rgb),.18); font-size:10px; letter-spacing:.05em; }
.guardian-close { margin-left:auto; cursor:pointer; opacity:.7; font-size:18px; padding:0 6px; }
.guardian-close:hover { opacity:1; }
.grd-log { max-height:180px; overflow-y:auto; background:var(--s3); border:1px solid var(--b1); border-radius:var(--r1); padding:8px 10px; font-family:var(--mo); font-size:10px; }
.grd-log-row { display:flex; gap:8px; padding:3px 0; border-bottom:1px solid var(--b1); align-items:flex-start; }
.grd-log-row:last-child { border:none; }
.grd-log-time { color:var(--t3); flex-shrink:0; font-size:9px; padding-top:1px; }
.grd-log-msg { color:var(--t2); flex:1; line-height:1.5; }
.grd-log-msg.ok { color:var(--g); }
.grd-log-msg.err { color:var(--r); }
.grd-log-msg.warn { color:var(--a); }
.grd-slider-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.grd-slider-row label { font-size:9px; color:var(--t3); font-family:var(--mo); text-transform:uppercase; letter-spacing:.07em; min-width:130px; }
.grd-slider-row input[type=range] { flex:1; accent-color:var(--r); }
.grd-slider-val { font-size:11px; font-family:var(--mo); font-weight:700; color:var(--t1); min-width:48px; text-align:right; }
.grd-armed { border-color:rgba(240,82,82,.35) !important; background:var(--r2) !important; }
.grd-cooling { border-color:rgba(227,160,8,.35) !important; background:var(--a2) !important; }

/* ── AUTO ENFORCER ── */
.enf-locked { border-color:rgba(240,82,82,.5) !important; background:rgba(240,82,82,.04) !important; }
.enf-banner { display:none !important; }
.enf-lock-overlay { display:none; position:fixed; inset:0; z-index:99999; background:rgba(0,0,0,.96); backdrop-filter:blur(14px); flex-direction:column; align-items:center; justify-content:center; text-align:center; font-family:var(--mo); }
.enf-lock-overlay.show { display:flex; animation:fadeIn .2s ease; }

/* ═══ RISK MODELS — Void Silver Refinements ═══ */
#pg-riskmodels .stat {
  background: var(--s2);
  border: 1px solid rgba(var(--fg-rgb),.055);
  border-radius: 6px;
  padding: 10px 12px;
  transition: border-color .15s;
}
#pg-riskmodels .stat:hover { border-color: rgba(var(--fg2-rgb),.15); }
#pg-riskmodels .sl {
  font-size: 8.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--t3);
  font-family: var(--mo);
  margin-bottom: 5px;
}
#pg-riskmodels .sv {
  font-size: 17px;
  font-weight: 600;
  font-family: var(--mo);
  line-height: 1.1;
  letter-spacing: -.02em;
}
#pg-riskmodels .ss { font-size: 9px; color: var(--t3); margin-top: 3px; }
.fm {
  font-family: var(--mo);
  font-size: 10px;
  line-height: 1.9;
  color: var(--t2);
  padding: 10px 12px;
  background: rgba(var(--fg-rgb),.018);
  border-radius: 5px;
  border-left: 2px solid rgba(var(--fg2-rgb),.15);
  white-space: pre;
  overflow-x: auto;
}
#pg-riskmodels .card { background: var(--s2); border-color: rgba(var(--fg-rgb),.055); }
#pg-riskmodels .srow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(var(--fg-rgb),.025);
}
#pg-riskmodels .srow:last-child { border-bottom: none; }
#pg-riskmodels .slbl { font-size: 10px; color: var(--t2); min-width: 120px; flex-shrink: 0; }
#pg-riskmodels .sval { font-family: var(--mo); font-size: 10px; color: var(--t1); min-width: 36px; text-align: right; }
#pg-riskmodels input[type=range] { flex: 1; accent-color: rgba(var(--fg2-rgb),.6); height: 2px; }
#pg-riskmodels input[type=number] {
  flex: 1;
  background: var(--s3);
  border: 1px solid rgba(var(--fg-rgb),.07);
  border-radius: 4px;
  padding: 4px 7px;
  font-size: 10px;
  font-family: var(--mo);
  color: var(--t1);
  outline: none;
}
#pg-riskmodels input[type=number]:focus { border-color: rgba(var(--fg2-rgb),.25); }
#an-time table th { font-size: 8.5px; letter-spacing: .07em; }
#an-time table td { font-size: 10px; font-family: var(--mo); }
#an-time .pos { color: var(--g); }
#an-time .neg { color: var(--r); }
.ins.ok { background: rgba(52,211,153,.07); border-left-color: rgba(52,211,153,.5); color: rgba(52,211,153,.85); }
.ins.danger { background: rgba(248,113,113,.07); border-left-color: rgba(248,113,113,.5); color: rgba(248,113,113,.85); }
.ins.warn { background: rgba(251,191,36,.07); border-left-color: rgba(251,191,36,.5); color: rgba(251,191,36,.85); }

/* ═══ V3 POLISH PASS ═══ */

/* 1. btn.pri — ghost style (already patched but reinforce) */
.btn.pri {
  background: rgba(var(--fg-rgb),.04) !important;
  border-color: rgba(var(--fg2-rgb),.3) !important;
  color: var(--t1) !important;
  font-weight: 600;
}
.btn.pri:hover {
  background: rgba(var(--fg-rgb),.07) !important;
  border-color: rgba(var(--fg2-rgb),.5) !important;
}
.btn.pri:active { transform: scale(.97); }

/* 2. Page header bottom separator refinement */
.ph {
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(var(--fg-rgb),.042) !important;
  margin-bottom: 18px !important;
}

/* 3. ph-t: add subtle monospace version tag */
/* ph-t::after removed */

/* 4. Sidebar nav active — pure void */
.ni.on { background: var(--ac2) !important; }
.ni:hover { background: var(--s2) !important; }

/* 5. Tab active indicator — slightly brighter */
.tab.on {
  color: var(--t1) !important;
  border-bottom-color: rgba(232,234,237,.45) !important;
}

/* 6. Card hover — ultra-subtle in void context */
.card:hover {
  border-color: rgba(var(--fg-rgb),.09) !important;
  box-shadow: 0 0 0 1px rgba(var(--fg-rgb),.03), 0 4px 24px rgba(0,0,0,.6) !important;
}

/* 7. Stat card hover */
.stat:hover {
  border-color: rgba(var(--fg2-rgb),.12) !important;
  background: rgba(var(--fg-rgb),.012) !important;
}

/* 8. Page transition — snappier */
@keyframes pgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pg.on { animation: pgIn .18s cubic-bezier(.16,1,.3,1) both !important; }

/* 9. Table row hover */
.tw tbody tr:hover { background: rgba(var(--fg-rgb),.018) !important; }

/* 10. Scrollbar — even thinner, more void */
::-webkit-scrollbar { width: 2px !important; height: 2px !important; }
::-webkit-scrollbar-thumb { background: rgba(var(--fg2-rgb),.1) !important; }

/* 11. Input/select focus — silver glow */
.fld input:focus, .fld select:focus, .fld textarea:focus,
input:focus, select:focus {
  border-color: rgba(var(--fg2-rgb),.3) !important;
  box-shadow: 0 0 0 2px rgba(var(--fg2-rgb),.06) !important;
  outline: none !important;
}

/* 12. Badge refinement */
.bdg { letter-spacing: .04em !important; }

/* 13. Sidebar bottom border slightly more visible */
.brand { border-bottom-color: rgba(var(--fg-rgb),.055) !important; }
.ns { color: rgba(var(--fg-rgb),.18) !important; letter-spacing: .12em !important; font-size: 8.5px !important; }

/* 14. Risk strip bar — more refined */
.rs { border-color: rgba(var(--fg-rgb),.04) !important; background: rgba(var(--fg-rgb),.008); }

/* 15. Keyboard shortcut hint from JS — style consistency */

/* ═══════════════════════════════════════════
   TOPBAR
═══════════════════════════════════════════ */
.topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; background: var(--s1); border-bottom: 1px solid var(--b1); flex-shrink: 0; }
.topbar-id-name { font-size: 14px; font-weight: 700; letter-spacing: .01em; color: var(--t1); line-height: 1.15; }
.topbar-id-sub { font-size: 9px; color: var(--t3); font-family: var(--mo); margin-top: 1px; }
.topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.topbar-search { position: relative; display: flex; align-items: center; }
.topbar-search svg { position: absolute; left: 10px; width: 12px; height: 12px; color: var(--t3); pointer-events: none; }
.topbar-search input { width: 160px; background: var(--s2); border: 1px solid var(--b1); border-radius: var(--r2x); color: var(--t1); font-size: 11px; font-family: var(--fn); padding: 6px 10px 6px 28px; outline: none; transition: border-color .15s, background .15s, width .2s; }
.topbar-search input:focus { border-color: var(--b3); background: var(--s3); width: 200px; }
.topbar-icon-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--r2x); background: var(--s2); border: 1px solid var(--b1); color: var(--t2); cursor: pointer; transition: color .13s, background .13s, border-color .13s; }
.topbar-icon-btn:hover { color: var(--t1); background: var(--s3); border-color: var(--b2); }
.topbar-icon-btn svg { width: 13px; height: 13px; }
.topbar-icon-badge { position: absolute; top: -3px; right: -3px; min-width: 13px; height: 13px; padding: 0 3px; border-radius: 7px; background: var(--r); color: #fff; font-size: 8px; font-family: var(--mo); font-weight: 700; display: none; align-items: center; justify-content: center; border: 1px solid var(--bg); }
.topbar-settings-wrap { position: relative; display: flex; align-items: center; gap: 2px; }
.topbar-settings-chevron { display: flex; align-items: center; justify-content: center; width: 15px; height: 28px; color: var(--t3); cursor: pointer; transition: color .13s; }
.topbar-settings-chevron:hover { color: var(--t1); }
.topbar-settings-menu { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 160px; background: var(--s1); border: 1px solid var(--b2); border-radius: var(--r2x); box-shadow: var(--sh3); overflow: hidden; z-index: 60; }
.topbar-settings-menu.show { display: block; }
.topbar-settings-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 11px; background: none; border: none; color: var(--t2); font-size: 10px; font-family: var(--fn); text-align: left; cursor: pointer; transition: background .13s, color .13s; }
.topbar-settings-menu button:hover { background: var(--s3); color: var(--t1); }
.topbar-settings-menu button svg { width: 12px; height: 12px; opacity: .6; flex-shrink: 0; }
.ni.search-hide { display: none !important; }
.ni.search-match { outline: 1px solid var(--b3); }
@media (max-width: 860px) {
  .topbar { padding: 8px 12px 8px 52px; flex-wrap: wrap; }
  .topbar-search input { width: 120px; }
  .topbar-search input:focus { width: 140px; }
}

/* ═══════════════════════════════════════════
   RESPONSIVE / MOBILE
═══════════════════════════════════════════ */

/* Hamburger button — hidden on desktop */
#mobile-menu-btn {
  display: none;
  position: fixed; top: 10px; left: 10px; z-index: 10500;
  width: 34px; height: 34px; align-items: center; justify-content: center;
  background: var(--s3); border: 1px solid var(--b2); border-radius: var(--r2x);
  color: var(--t1); cursor: pointer; box-shadow: var(--sh2);
}
#mobile-menu-btn svg { width: 16px; height: 16px; }

/* Backdrop shown when mobile sidebar is open */
#sb-backdrop {
  display: none;
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9500;
}
#sb-backdrop.show { display: block; }

@media (max-width: 860px) {
  #mobile-menu-btn { display: flex; }

  .app { position: relative; }

  .sb {
    position: fixed; top: 0; left: 0; height: 100%; z-index: 10000;
    transform: translateX(-100%);
    transition: transform .25s var(--ease2);
    box-shadow: var(--sh3);
  }
  .sb.sb-open { transform: translateX(0); }

  .main { width: 100%; padding-top: 46px; }

  /* Collapse dense multi-column grids to fewer / single column */
  .rs { grid-template-columns: 1fr 1fr !important; }
  .g3, .g4, .fg3, .fg4, .replay-grid, .disc-grid { grid-template-columns: 1fr 1fr !important; }
  .g2, .g32, .r2g, .fg2, .api-field-row, .api-sync-grid, .pb-stats { grid-template-columns: 1fr !important; }

  /* Grid yang ditulis inline tanpa class tidak terjangkau selector di atas.
     Di Dashboard ini bikin kolom 2 & 3 meluber ke x=666px padahal viewport 375px,
     dan induknya tidak bisa di-scroll — jadi isinya HILANG, bukan sekadar terpotong.
     Heatmap repeat(7,1fr) & grid auto-fit sengaja tidak diikutkan: keduanya sudah benar. */
  .dash-row3 { grid-template-columns: 1fr !important; }

  /* Jangan biarkan elemen apa pun memaksa halaman lebih lebar dari layar */
  .pg, .pg .sa { max-width: 100%; }
  .pg .card { min-width: 0; }
  .pg canvas { max-width: 100% !important; }

  /* Settings: kolom nav 208px + isi tidak muat berdampingan di HP.
     Tumpuk, dan ubah nav jadi strip yang bisa digeser mendatar. */
  .set-layout { grid-template-columns: 1fr !important; gap: 10px; }
  .set-nav { position: static; flex-direction: row; overflow-x: auto; gap: 4px; -webkit-overflow-scrolling: touch; }
  .set-nav::-webkit-scrollbar { display: none; }
  .set-tab { width: auto; flex: 0 0 auto; white-space: nowrap; }
  .set-nav-sep { width: 1px; height: auto; margin: 4px 3px; align-self: stretch; }
  .set-help { display: none; }   /* kartu bantuan mengambil terlalu banyak ruang di HP */
  .set-content { padding: 13px 14px; }

  /* Item flex punya min-width:auto, jadi input tidak mau menyusut di bawah lebar
     intrinsiknya — diperparah aturan font-size:16px di atas (anti auto-zoom iOS).
     Di Risk Models ini bikin input meleset ~7px keluar layar. */
  #pg-riskmodels .srow { flex-wrap: wrap; }
  #pg-riskmodels .srow input,
  #pg-riskmodels .slbl { min-width: 0; }

  /* Weekly table rows: keep original column layout but allow horizontal scroll */
  .tw { overflow-x: auto; }
  .wrow, .whdr { min-width: 460px; }

  /* Prevent iOS Safari auto-zoom on focused inputs */
  input, select, textarea { font-size: 16px !important; }

  /* ...kecuali widget padat di sidebar. Sidebar hanya 210px dan dirancang untuk
     teks ~10px; dipaksa 16px, placeholder "SL Price" butuh 77px sementara ruang
     input cuma 67px sehingga terpotong jadi "SL Pric". Di sini keterbacaan label
     lebih penting daripada mencegah zoom-on-focus di field angka kecil. */
  .sb input, .sb select { font-size: 11px !important; }
  .sb input::placeholder { font-size: 10px; }

  /* Modals: use more of the viewport width on small screens */
  #hab-editor-overlay > div, #username-edit-overlay > div { max-width: calc(100% - 24px) !important; }
}

@media (max-width: 480px) {
  .g2, .g3, .g4, .fg2, .fg3, .fg4, .rs, .replay-grid, .disc-grid, .mkt-grid {
    grid-template-columns: 1fr !important;
  }
}