/* ═══════════════════════════════════════════════════════════════════
   X1 SPARK — Design System (Ajaib-style fintech)
   Terorganisir: TOKEN → BASE → UTIL → LOGIN → BUTTON → LAYOUT →
   CARDS → HERO → TICKER → FLEET → AKUN → TOGGLE → POPUP(sheet/modal/
   toast) → SIGNAL → POSISI → LEDGER → TUNING → FORM → AUDIT → LOG →
   TIMELINE XAU → NEWS GUARD → RESPONSIVE
   Mobile-first: gaya dasar = ponsel; @media(min-width:...) menaikkan.
   ═══════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────── TOKEN ───────────────────────────────── */
:root{
  --bg:#F2F5FA; --card:#FFFFFF; --ink:#0E1B33; --mut:#6B7A99; --faint:#9AA8C2;
  --line:#E5EAF3; --blue:#1B4DFF; --blue-deep:#0B2A6B; --blue-soft:#EDF2FF;
  --green:#0FA958; --green-soft:#E7F7EF; --red:#E23A3A; --red-soft:#FDECEC;
  --amber:#F59E0B; --amber-soft:#FEF4E2; --purple:#7C3AED;
  --grad-hero:linear-gradient(135deg,#0B2A6B 0%,#153FA8 55%,#1B4DFF 100%);
  --grad-gold:linear-gradient(135deg,#7A4E00,#C99A2E);
  --r-lg:22px; --r-md:16px; --r-sm:12px;
  --sh:0 10px 30px rgba(14,27,51,.07); --sh-sm:0 4px 14px rgba(14,27,51,.06);
  --nav-h:64px;
  --mono:'JetBrains Mono',monospace;
  --font:'Inter',-apple-system,'Segoe UI',sans-serif;
}

/* ───────────────────────────────── BASE ────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:15px}
body{font-family:var(--font);background:var(--bg);color:var(--ink);min-height:100vh}
body.no-scroll{overflow:hidden}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select{font-family:inherit;font-size:1rem}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-thumb{background:#C9D4E8;border-radius:3px}

/* ───────────────────────────────── UTIL ────────────────────────────────── */
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.hidden{display:none!important}

/* ───────────────────────────────── LOGIN ───────────────────────────────── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;position:relative;overflow:hidden}
.login-bg{position:fixed;inset:0;background:var(--grad-hero);z-index:-1}
.login-bg::after{content:'';position:absolute;width:520px;height:520px;border-radius:50%;background:rgba(255,255,255,.06);top:-180px;right:-120px}
.login-bg::before{content:'';position:absolute;width:380px;height:380px;border-radius:50%;background:rgba(255,255,255,.05);bottom:-140px;left:-100px}
.login-card{background:#fff;border-radius:var(--r-lg);padding:36px 30px;width:100%;max-width:400px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.login-logo{display:flex;align-items:center;gap:14px;margin-bottom:28px}
.logo-badge{width:52px;height:52px;border-radius:15px;background:var(--grad-hero);color:#fff;font-weight:800;font-size:1.25rem;display:flex;align-items:center;justify-content:center;letter-spacing:-.5px;box-shadow:0 6px 16px rgba(27,77,255,.35)}
.logo-badge.sm{width:38px;height:38px;font-size:1rem;border-radius:11px}
.login-logo h1{font-size:1.35rem;font-weight:800;letter-spacing:-.4px}
.login-logo p{font-size:.8rem;color:var(--mut)}
.login-card label{display:block;font-size:.78rem;font-weight:600;color:var(--mut);margin:14px 0 6px;text-transform:uppercase;letter-spacing:.6px}
.login-card input{width:100%;padding:13px 16px;border:1.5px solid var(--line);border-radius:var(--r-sm);font-size:1rem;transition:.2s}
.login-card input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(27,77,255,.1)}
.login-err{color:var(--red);font-size:.83rem;margin-top:12px;min-height:1.2em}
.login-foot{text-align:center;color:var(--faint);font-size:.75rem;margin-top:22px}

/* ──────────────────────────────── BUTTON ───────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 18px;border-radius:var(--r-sm);font-weight:600;font-size:.9rem;transition:.18s}
.btn:active{transform:scale(.97)}
.btn-block{width:100%}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 5px 14px rgba(27,77,255,.3)}
.btn-primary:hover{background:#123CD8}
.btn-danger{background:var(--red);color:#fff}
.btn-danger:hover{background:#C42F2F}
.btn-soft{background:var(--blue-soft);color:var(--blue)}
.btn-soft-danger{background:var(--red-soft);color:var(--red)}
.btn-ghost{background:transparent;color:var(--mut);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--faint)}
.btn-sm{padding:7px 12px;font-size:.8rem;border-radius:10px}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ──────────────────────────────── LAYOUT ───────────────────────────────── */
.app{display:flex;min-height:100vh}
.sidebar{display:none;width:250px;background:#fff;border-right:1px solid var(--line);position:fixed;inset:0 auto 0 0;flex-direction:column;z-index:50}
.side-brand{margin:24px 22px 10px}
#sideNav{display:flex;flex-direction:column;gap:4px;padding:10px 14px;flex:1}
.nav-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--r-sm);font-weight:600;color:var(--mut);font-size:.92rem;text-align:left;transition:.15s}
.nav-item:hover{background:var(--bg)}
.nav-item.active{background:var(--blue-soft);color:var(--blue)}
.nav-ic{font-size:1.05rem}
.side-foot{padding:18px 22px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.content{flex:1;min-width:0;padding-bottom:calc(var(--nav-h) + 24px);max-width:1200px;margin:0 auto;width:100%}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 4px;padding-top:calc(16px + env(safe-area-inset-top))}
.top-brand{margin:0}
.top-brand h1{font-size:1.1rem}

/* bottom nav (mobile) */
.bottomnav{position:fixed;bottom:0;left:0;right:0;height:var(--nav-h);background:#fff;border-top:1px solid var(--line);display:flex;z-index:60;padding:4px 8px calc(4px + env(safe-area-inset-bottom))}
.bn-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:.68rem;font-weight:600;color:var(--faint);border-radius:14px;transition:.15s}
.bn-ic{font-size:1.3rem;filter:grayscale(1) opacity(.55)}
.bn-item.active{color:var(--blue)}
.bn-item.active .bn-ic{filter:none}

.view{padding:14px 18px 10px;display:flex;flex-direction:column;gap:16px;animation:fadein .25s ease}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ─────────────────────────── CARDS & CHIPS ─────────────────────────────── */
.card{background:var(--card);border-radius:var(--r-lg);padding:20px;box-shadow:var(--sh-sm);border:1px solid rgba(229,234,243,.8)}
.card h3{font-size:.78rem;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.8px;margin-bottom:14px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;font-size:.72rem;font-weight:700;letter-spacing:.3px}
.chip-green{background:var(--green-soft);color:var(--green)}
.chip-red{background:var(--red-soft);color:var(--red)}
.chip-blue{background:var(--blue-soft);color:var(--blue)}
.chip-amber{background:var(--amber-soft);color:#B97A00}
.chip-gray{background:#EEF1F7;color:var(--mut)}
.chip-gold{background:linear-gradient(135deg,#FDF3DC,#F7E5B8);color:#7A4E00}
.pill-live{display:inline-flex;align-items:center;gap:6px}
.live-dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(15,169,88,.5);animation:pulse 2s infinite}
.live-dot.off{background:var(--red);animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(15,169,88,.45)}70%{box-shadow:0 0 0 8px rgba(15,169,88,0)}100%{box-shadow:0 0 0 0 rgba(15,169,88,0)}}
.live-dot-wrap{font-size:.78rem;color:var(--mut);font-weight:600;display:flex;align-items:center;gap:7px}

/* ───────────────────────────── HERO (Beranda) ──────────────────────────── */
.hero{background:var(--grad-hero);border-radius:var(--r-lg);padding:24px 22px 20px;color:#fff;position:relative;overflow:hidden;box-shadow:0 16px 40px rgba(11,42,107,.35)}
.hero::after{content:'';position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.06);top:-120px;right:-80px}
.hero-label{font-size:.78rem;font-weight:600;opacity:.75;letter-spacing:.5px;text-transform:uppercase}
.hero-eq{font-size:2.6rem;font-weight:800;letter-spacing:-1px;margin:6px 0 2px;font-variant-numeric:tabular-nums}
.hero-cur{font-size:.9rem;opacity:.7;font-weight:600}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.hero-stat{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);padding:12px 14px;backdrop-filter:blur(6px);min-width:0}
.hero-stat .v{font-size:1.15rem;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-stat .l{font-size:.68rem;opacity:.75;margin-top:3px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-note{font-size:.68rem;opacity:.55;margin-top:12px}
.spark-wrap{margin-top:14px;height:56px}
.spark-wrap svg{width:100%;height:56px;display:block}
.spark-empty{height:56px;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:600;color:rgba(255,255,255,.45);letter-spacing:.3px}

/* ──────────────────────────────── TICKER ───────────────────────────────── */
.ticker-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tick-card{background:#fff;border-radius:var(--r-md);padding:14px;box-shadow:var(--sh-sm);border:1px solid rgba(229,234,243,.8);text-align:center;min-width:0}
.tick-sym{font-size:.72rem;font-weight:700;color:var(--mut);letter-spacing:.6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tick-px{font-size:1.2rem;font-weight:800;font-variant-numeric:tabular-nums;margin-top:4px;transition:color .5s;white-space:nowrap}
.tick-px.up{color:var(--green)}.tick-px.dn{color:var(--red)}
.tick-sp{font-size:.66rem;color:var(--faint);margin-top:2px}
.gold-ic{color:#C99A2E}

/* ────────────────────────── GRID & FLEET HEALTH ────────────────────────── */
.sec-title{font-size:.82rem;font-weight:700;color:var(--mut);letter-spacing:.6px;text-transform:uppercase;display:flex;align-items:center;justify-content:space-between}
.grid2{display:grid;grid-template-columns:1fr;gap:14px}
.health-row{display:flex;gap:10px;flex-wrap:wrap}
.h-badge{flex:1;min-width:140px;background:#fff;border-radius:var(--r-md);padding:13px 14px;box-shadow:var(--sh-sm);border:1px solid rgba(229,234,243,.8)}
.h-badge .l{font-size:.68rem;color:var(--mut);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.h-badge .v{font-size:1rem;font-weight:800;margin-top:3px}
.loadbar{height:6px;background:var(--line);border-radius:3px;margin-top:8px;overflow:hidden}
.loadbar>div{height:100%;border-radius:3px;background:var(--green);transition:width .5s}
.loadbar>div.warn{background:var(--amber)}.loadbar>div.bad{background:var(--red)}

/* job pill */
.job-pill{position:fixed;bottom:calc(var(--nav-h) + 16px);left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 20px;border-radius:99px;font-size:.8rem;font-weight:600;display:flex;align-items:center;gap:9px;z-index:70;box-shadow:0 10px 30px rgba(0,0,0,.3);max-width:92vw}
.job-pill .spin{width:14px;height:14px;border:2.5px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:rot 1s linear infinite;flex-shrink:0}
@keyframes rot{to{transform:rotate(360deg)}}

/* ──────────────────────────── ACCOUNT CARDS ────────────────────────────── */
.acc-grid{display:flex;flex-direction:column;gap:14px}
.acc-card{background:#fff;border-radius:var(--r-lg);padding:20px;box-shadow:var(--sh-sm);border:1px solid rgba(229,234,243,.8);display:flex;flex-direction:column;gap:14px;cursor:pointer;transition:.18s;position:relative;overflow:hidden}
.acc-card:hover{box-shadow:var(--sh);transform:translateY(-2px)}
.acc-card.real::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad-gold)}
.acc-card.demo::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#6B7A99,#9AA8C2)}
.acc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;flex-wrap:wrap}
.acc-name{font-weight:800;font-size:1.02rem;letter-spacing:-.2px}
.acc-sub{font-size:.72rem;color:var(--faint);margin-top:3px}
.acc-nums{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.acc-num .l{font-size:.68rem;color:var(--mut);font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.acc-num .v{font-size:1.25rem;font-weight:800;font-variant-numeric:tabular-nums;margin-top:2px}
.acc-num .v.green{color:var(--green)}.acc-num .v.red{color:var(--red)}
.acc-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.units-row{display:flex;gap:6px;flex-wrap:wrap}
.unit-dot{display:flex;align-items:center;gap:5px;font-size:.68rem;font-weight:700;color:var(--faint);background:#F2F5FA;padding:4px 9px;border-radius:8px}
.unit-dot .d{width:7px;height:7px;border-radius:50%;background:#C9D4E8}
.unit-dot.on{color:var(--green);background:var(--green-soft)}
.unit-dot.on .d{background:var(--green)}
.unit-dot.off{color:var(--red);background:var(--red-soft)}
.unit-dot.off .d{background:var(--red)}

/* toggle */
.toggle{position:relative;width:48px;height:28px;flex-shrink:0}
.toggle input{opacity:0;width:100%;height:100%;position:absolute;z-index:2;cursor:pointer;margin:0}
.toggle .tr{position:absolute;inset:0;background:#D5DDEB;border-radius:99px;transition:.2s}
.toggle .th{position:absolute;width:22px;height:22px;background:#fff;border-radius:50%;top:3px;left:3px;transition:.2s;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.toggle input:checked + .tr{background:var(--green)}
.toggle input:checked + .tr .th{left:23px}
.toggle.armr input:checked + .tr{background:var(--blue)}

/* ═════════════════ POPUP LAYER: SHEET · MODAL · TOAST ═════════════════ */
.sheet-wrap{position:fixed;inset:0;z-index:100}
.sheet-backdrop{position:absolute;inset:0;background:rgba(10,20,45,.55);backdrop-filter:blur(3px);animation:fadein .2s}
.sheet{position:absolute;left:0;right:0;bottom:0;top:3.5vh;background:var(--bg);border-radius:24px 24px 0 0;max-width:860px;margin:0 auto;overflow-y:auto;overscroll-behavior:contain;animation:slideup .28s cubic-bezier(.2,.8,.25,1);padding-bottom:calc(24px + env(safe-area-inset-bottom))}
@keyframes slideup{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
.sheet-grab{width:44px;height:22px;display:flex;align-items:center;justify-content:center;margin:6px auto 0;cursor:pointer}
.sheet-grab::after{content:'';width:44px;height:5px;background:#C9D4E8;border-radius:3px}
.sheet-x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--mut);font-size:1rem;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-sm);z-index:6;transition:.15s}
.sheet-x:hover{color:var(--red);border-color:var(--red-soft);background:var(--red-soft)}
.sheet-head{padding:14px 56px 0 20px}
.sheet-tabs{display:flex;gap:6px;padding:14px 18px 4px;position:sticky;top:0;background:var(--bg);z-index:5;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sheet-tabs::-webkit-scrollbar{display:none}
.stab{padding:9px 14px;border-radius:99px;font-size:.8rem;font-weight:700;color:var(--mut);background:#fff;border:1px solid var(--line);transition:.15s;white-space:nowrap;flex:none}
.stab.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.sheet-body{padding:16px 18px 30px;display:flex;flex-direction:column;gap:14px}

/* modal konfirmasi */
.modal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border-radius:var(--r-lg);padding:26px;width:calc(100vw - 48px);max-width:400px;max-height:calc(100vh - 64px);overflow-y:auto;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.modal h3{font-size:1.05rem;font-weight:800;margin-bottom:8px}
.modal p{font-size:.85rem;color:var(--mut);line-height:1.5}
.modal-actions{display:flex;gap:10px;margin-top:20px}
.modal-actions .btn{flex:1}

/* toast */
.toasts{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;width:calc(100vw - 32px);max-width:380px}
.toast{background:var(--ink);color:#fff;padding:13px 18px;border-radius:var(--r-md);font-size:.82rem;font-weight:600;box-shadow:0 12px 32px rgba(0,0,0,.3);display:flex;gap:9px;align-items:flex-start;animation:slideup .25s ease}
.toast.ok{background:#0C7A42}.toast.err{background:#B32626}
.toast .tic{flex-shrink:0}

/* ──────────────────────── SIGNAL / MULTI-EYE ───────────────────────────── */
.sym-card{background:#fff;border-radius:var(--r-lg);padding:18px;box-shadow:var(--sh-sm);border:1px solid rgba(229,234,243,.8);display:flex;flex-direction:column;gap:14px}
.sym-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.sym-name{font-weight:800;font-size:1.05rem;display:flex;align-items:center;gap:8px}
.eyes-row{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.eye{background:#F5F7FC;border-radius:var(--r-sm);padding:9px 6px;text-align:center;border:1.5px solid transparent;min-width:0}
.eye.on{background:var(--green-soft);border-color:rgba(15,169,88,.25)}
.eye.veto{background:var(--red-soft);border-color:rgba(226,58,58,.25)}
.eye .en{font-size:.64rem;font-weight:800;color:var(--mut);letter-spacing:.4px}
.eye.on .en{color:var(--green)}.eye.veto .en{color:var(--red)}
.eye .ew{font-size:.66rem;color:var(--faint);font-weight:600}
.eye .ev{font-size:1rem;font-weight:800;margin-top:2px}
.vote-verdict{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.8rem;color:var(--mut);font-weight:600}
.kv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:9px}
.kv{background:#F5F7FC;border-radius:var(--r-sm);padding:10px 12px;min-width:0}
.kv .l{font-size:.64rem;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.4px}
.kv .v{font-size:.95rem;font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums}

/* ladder viz */
.ladder-wrap{display:flex;flex-direction:column;gap:3px}
.ladder-side{display:flex;align-items:center;gap:8px}
.ladder-side .lbl{width:38px;font-size:.66rem;font-weight:800;color:var(--mut)}
.ladder-side .lbl.b{color:var(--green)}.ladder-side .lbl.s{color:var(--red)}
.ladder-bar{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.rung{display:flex;align-items:center;gap:8px;font-size:.68rem}
.rung .lv{width:62px;text-align:right;color:var(--mut);font-variant-numeric:tabular-nums;flex:none}
.rung .bar{height:13px;border-radius:4px;background:var(--line);position:relative;overflow:hidden;min-width:30px;flex:1}
.rung .bar>i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:#C9D4E8}
.rung.done .bar>i{background:linear-gradient(90deg,var(--green),#3DC97E)}
.rung.sell-side.done .bar>i{background:linear-gradient(90deg,#E23A3A,#F07070)}
.rung .lot{width:46px;font-variant-numeric:tabular-nums;color:var(--faint);font-weight:600;flex:none}
.rung.done .lot{color:var(--ink);font-weight:800}

/* ────────────────────────── POSISI & LEDGER ────────────────────────────── */
.pos-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:8px;align-items:center;background:#fff;border-radius:var(--r-md);padding:13px 14px;box-shadow:var(--sh-sm);border:1px solid rgba(229,234,243,.8)}
.pos-side{padding:5px 9px;border-radius:8px;font-size:.68rem;font-weight:800}
.pos-side.buy{background:var(--green-soft);color:var(--green)}
.pos-side.sell{background:var(--red-soft);color:var(--red)}
.pos-main{min-width:0}
.pos-main .p1{font-weight:700;font-size:.9rem}
.pos-main .p2{font-size:.72rem;color:var(--faint);font-variant-numeric:tabular-nums}
.pos-pnl{font-weight:800;font-variant-numeric:tabular-nums;text-align:right}
.pos-pnl.green{color:var(--green)}.pos-pnl.red{color:var(--red)}

.led-row{display:grid;grid-template-columns:60px auto 1fr auto;gap:10px;align-items:center;background:#fff;border-radius:var(--r-md);padding:11px 14px;border:1px solid rgba(229,234,243,.8);font-size:.8rem}
.led-t{color:var(--faint);font-size:.68rem;font-weight:700;font-variant-numeric:tabular-nums}
.led-ev{font-size:.66rem;font-weight:800;padding:4px 8px;border-radius:7px;white-space:nowrap}
.led-net{font-weight:800;font-variant-numeric:tabular-nums;text-align:right}
.ev-tp_broker{background:var(--green-soft);color:var(--green)}
.ev-tp_instant{background:var(--blue-soft);color:var(--blue)}
.ev-seed{background:#F3EEFF;color:var(--purple)}
.ev-flatten{background:var(--red-soft);color:var(--red)}
.ev-sekring{background:var(--amber-soft);color:#B97A00}
.ev-default{background:#EEF1F7;color:var(--mut)}
.filter-row{display:flex;gap:6px;flex-wrap:wrap}
.fchip{padding:6px 12px;border-radius:99px;font-size:.72rem;font-weight:700;background:#fff;border:1px solid var(--line);color:var(--mut);transition:.15s}
.fchip.active{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ──────────────────────── TUNING & FORM (Sistem) ───────────────────────── */
.pgroup{background:#fff;border-radius:var(--r-lg);padding:18px;box-shadow:var(--sh-sm);border:1px solid rgba(229,234,243,.8)}
.pgroup h4{font-size:.72rem;color:var(--blue);font-weight:800;letter-spacing:.8px;text-transform:uppercase;margin-bottom:12px}
.prow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line)}
.prow:last-child{border-bottom:none}
.prow .pl{flex:1;min-width:0}
.prow .pn{font-weight:700;font-size:.83rem;font-family:var(--mono)}
.prow .pd{font-size:.7rem;color:var(--faint);margin-top:2px}
.prow input[type=number]{width:96px;padding:9px 10px;border:1.5px solid var(--line);border-radius:10px;font-size:.85rem;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.prow input[type=number]:focus{outline:none;border-color:var(--blue)}
.prow .papply{padding:8px 11px;font-size:.74rem;border-radius:9px}
.sym-chips{display:flex;gap:8px;flex-wrap:wrap}
.sym-chip{padding:9px 16px;border-radius:99px;font-weight:700;font-size:.82rem;background:#fff;border:1.5px solid var(--line);color:var(--mut)}
.sym-chip.active{background:var(--blue-soft);border-color:var(--blue);color:var(--blue)}

.form-grid{display:grid;grid-template-columns:1fr;gap:12px}
.form-grid label{font-size:.72rem;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:5px}
.form-grid input,.form-grid select{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-sm);font-size:.92rem;background:#fff}
.form-grid input:focus,.form-grid select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(27,77,255,.08)}
.time-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ────────────────────── AUDIT & LOG (kompak) ───────────────────────────── */
.audit-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.audit-row{display:flex;justify-content:space-between;gap:10px;font-size:.74rem;padding:9px 0;border-bottom:1px dashed var(--line);color:var(--mut)}
.audit-row b{color:var(--ink);font-weight:700}
.audit-row .t{color:var(--faint);font-size:.68rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.audit-row .a-det{color:var(--mut);font-size:.68rem}
.audit-list .audit-row{padding:6px 0;font-size:.72rem}
.more-btn{background:#fff;border:1px solid var(--line);border-radius:8px;padding:5px 12px;font-size:.68rem;font-weight:700;color:var(--mut);cursor:pointer;transition:.15s}
.more-btn:hover{border-color:#B8C4F7;color:var(--blue);background:#F6F8FF}
.led-list{display:flex;flex-direction:column;gap:6px}
.led-row.compact{padding:7px 11px;font-size:.74rem;grid-template-columns:56px auto auto 1fr auto;gap:8px}
.led-row.solo{grid-template-columns:56px auto 1fr auto}
.led-row.compact .led-ev{font-size:.6rem;padding:3px 7px}
.led-row.compact .led-t{font-size:.64rem}
.led-det{font-size:.7rem;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logbox{background:#0E1B33;color:#C9D8F5;border-radius:var(--r-md);padding:14px;font-family:var(--mono);font-size:.68rem;line-height:1.65;max-height:340px;overflow-y:auto;white-space:pre-wrap;word-break:break-all}

/* ─────────────────────── EMPTY & SKELETON ──────────────────────────────── */
.empty{padding:36px 20px;text-align:center;color:var(--faint);font-size:.85rem}
.empty .e-ic{font-size:2rem;margin-bottom:8px}
.skel{background:linear-gradient(90deg,#EDF1F8 25%,#F7F9FD 50%,#EDF1F8 75%);background-size:200% 100%;animation:sk 1.4s infinite;border-radius:var(--r-md)}
@keyframes sk{to{background-position:-200% 0}}

/* ═════════════════ XAU 24H TIMELINE — PRO ═════════════════ */
.tl-card{grid-column:1/-1}
.tl-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.tl-head-l{display:flex;align-items:center;gap:12px}
.tl-ic{width:38px;height:38px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:11px;background:linear-gradient(150deg,#EEF3FF,#E2EAFF);font-size:1.05rem}
.tl-head h4{margin:0;font-size:.82rem}
.tl-sub{display:block;font-size:.66rem;font-weight:600;color:var(--faint);margin-top:2px;letter-spacing:.3px}
.tl-state{display:inline-block;font-size:.6rem;font-weight:800;padding:3px 9px;border-radius:99px;background:#E4F4EA;color:#0C8A50;letter-spacing:.5px;margin-top:7px}
.tl-state.off{background:#FDF0E6;color:#B97A00}
.tl-tgl-cap{font-size:.68rem;font-weight:700;color:var(--mut);margin-right:8px}

/* banner status pasar */
.mkt-banner{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;font-size:.78rem;margin-bottom:14px;border:1px solid;background:#fff;flex-wrap:wrap}
.mkt-banner.open{border-color:rgba(15,169,88,.28);background:linear-gradient(0deg,rgba(15,169,88,.045),rgba(15,169,88,.045)),#fff}
.mkt-banner.closed{border-color:rgba(226,72,87,.28);background:linear-gradient(0deg,rgba(226,72,87,.045),rgba(226,72,87,.045)),#fff}
.mkt-banner .mb-dot{width:8px;height:8px;border-radius:50%;flex:none}
.mkt-banner.open .mb-dot{background:var(--green);box-shadow:0 0 0 3px rgba(15,169,88,.14);animation:pulse 2s infinite}
.mkt-banner.closed .mb-dot{background:var(--red);box-shadow:0 0 0 3px rgba(226,72,87,.14)}
.mkt-banner .mb-t{font-weight:800;letter-spacing:.2px}
.mkt-banner.open .mb-t{color:#0C8A50}
.mkt-banner.closed .mb-t{color:#C93A4B}
.mkt-banner .mb-s{color:var(--mut);font-weight:600}
.mkt-banner .mb-s::before{content:"·";margin:0 9px;color:var(--faint)}

/* timeline 24 jam */
.tl-wrap{position:relative;padding-top:26px;margin:2px 0 0}
.tl-bar{display:grid;grid-template-columns:repeat(24,1fr);gap:3px}
.tl-cell{position:relative;height:36px;border-radius:5px;cursor:pointer;border:1px solid transparent;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease;min-width:0}
.tl-cell.s-sep{background:#F2F4F8;border-color:#E9ECF2}
.tl-cell.s-asia{background:#E9F0FD;border-color:#D8E4FA}
.tl-cell.s-lon{background:linear-gradient(180deg,#FFFBEF,#FFF6DA);border-color:#F0E3B4}
.tl-cell.s-peak{background:linear-gradient(180deg,#FFEDAF,#FFE08C);border-color:#E9CB72}
.tl-cell.s-ny{background:linear-gradient(180deg,#FFFBEF,#FFF6DA);border-color:#F0E3B4}
.tl-cell:hover{transform:translateY(-2px);border-color:var(--blue);box-shadow:0 3px 8px rgba(27,77,255,.14);z-index:3}
.tl-cell.now{border-color:var(--red);box-shadow:0 0 0 1.5px rgba(226,72,87,.35);z-index:2}
.tl-win{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;margin-top:4px}
.tl-win i{height:6px;border-radius:3px;background:#ECEFF4}
.tl-win i.on{background:var(--blue)}
.tl-marker{position:absolute;top:0;bottom:18px;width:1.5px;background:var(--red);z-index:5;pointer-events:none}
.tl-marker span{position:absolute;top:-2px;left:50%;transform:translateX(-50%);font-size:.62rem;font-weight:800;color:#fff;background:var(--red);padding:2px 8px;border-radius:6px;white-space:nowrap;font-family:var(--mono);letter-spacing:.6px;box-shadow:0 1px 4px rgba(226,72,87,.3)}
.tl-labels{display:flex;justify-content:space-between;font-size:.6rem;color:#A6AFC2;font-family:var(--mono);margin-top:7px;font-weight:600;letter-spacing:.4px}

/* legend */
.tl-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:14px 0 0;padding-top:13px;border-top:1px dashed #E7EAF1}
.tl-lg{display:inline-flex;align-items:center;gap:6px;font-size:.66rem;font-weight:700;color:#7A8699;letter-spacing:.3px}
.tl-lg .sw{width:11px;height:11px;border-radius:3.5px;display:inline-block;border:1px solid rgba(16,24,40,.05)}
.sw.s-sep{background:#F2F4F8;border-color:#E2E6EE}
.sw.s-asia{background:#E9F0FD}
.sw.s-lon{background:linear-gradient(180deg,#FFFBEF,#FFF6DA)}
.sw.s-peak{background:linear-gradient(180deg,#FFEDAF,#FFE08C);border-color:#E9CB72}
.sw.s-ny{background:linear-gradient(180deg,#FFFBEF,#FFF6DA)}
.sw.s-win{width:14px;height:6px;border-radius:3px;background:var(--blue)}

/* kontrol: segmented + preset */
.tl-controls{display:flex;flex-direction:column;gap:11px;margin:16px 0 0}
.tl-modes{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tl-mode-cap{font-size:.62rem;font-weight:800;color:#9AA5B8;letter-spacing:.9px;text-transform:uppercase}
.tl-seg{display:inline-flex;background:#F1F3F8;border:1px solid #E4E8F0;border-radius:9px;padding:3px;gap:2px;max-width:100%;overflow-x:auto}
.tl-seg .tl-chip{border:none;background:transparent;color:var(--mut);font-size:.72rem;font-weight:700;padding:5px 14px;border-radius:6px;cursor:pointer;font-family:inherit;transition:all .12s;white-space:nowrap}
.tl-seg .tl-chip:hover{color:var(--blue)}
.tl-seg .tl-chip.sel{background:#fff;color:var(--blue);box-shadow:0 1px 3px rgba(16,24,40,.12)}
.tl-presets{display:flex;gap:8px;flex-wrap:wrap}
.tl-presets .tl-chip{border:1px solid #E4E8F0;background:#fff;color:#5D6B82;font-size:.72rem;font-weight:700;padding:6px 14px;border-radius:99px;cursor:pointer;font-family:inherit;transition:all .12s}
.tl-presets .tl-chip:hover{border-color:var(--blue);color:var(--blue);background:#F5F8FF}

/* status bar + catatan */
.tl-status{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:.73rem;color:var(--mut);margin-top:14px;padding:10px 13px;background:#F8FAFD;border-radius:9px;border:1px solid #EEF1F6;font-weight:600}
.tl-status b{font-weight:800}
.tl-status .ok{color:#0C8A50}
.tl-status .warn{color:#B97A00}
.tl-status .bad{color:#C93A4B}
.tl-status .ts-dot{width:7px;height:7px;border-radius:50%;background:#C6CEDD;flex:none}
.tl-status .ts-dot.ok{background:var(--green)}
.tl-status .ts-dot.warn{background:var(--amber)}
.tl-status .ts-dot.bad{background:var(--red)}
.tl-status .ts-sep{color:#D4DAE4}
.tl-note{font-size:.68rem;color:#8B95A7;margin-top:10px;line-height:1.6}

/* input konsisten di kartu timeline */
.tl-card input[type="time"],.tl-card input[type="number"]{border:1.5px solid #E4E8F0;border-radius:9px;padding:8px 10px;font-family:inherit;font-size:.8rem;font-weight:600;color:#1B2437;background:#fff;outline:none;transition:border-color .12s,box-shadow .12s;box-shadow:none}
.tl-card input[type="time"]:focus,.tl-card input[type="number"]:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(27,77,255,.09)}
.tl-card .time-row input{width:100%}
.tl-card input[type="number"]{width:100%}

/* ═════════════════ NEWS GUARD CARD ═════════════════ */
.nw-card .nw-head{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.nw-card .nw-ic{width:38px;height:38px;border-radius:11px;background:linear-gradient(180deg,#FFF1F1,#FFE3E3);border:1px solid #F6D3D3;display:flex;align-items:center;justify-content:center;font-size:1.05rem;flex:none}
.nw-card .nw-head-t{flex:1;min-width:0}
.nw-card .nw-head-t h4{margin:0}
.nw-card .nw-sub{display:block;font-size:.68rem;color:#8B95A7;font-weight:600;margin-top:2px}
.nw-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.nw-field label{display:block;font-size:.68rem;color:var(--mut);font-weight:700;margin-bottom:6px;letter-spacing:.2px}
.nw-inp{display:flex;align-items:center;border:1.5px solid #E4E8F0;border-radius:9px;background:#fff;transition:border-color .12s,box-shadow .12s}
.nw-inp:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(27,77,255,.09)}
.nw-inp input{flex:1;min-width:0;border:none;outline:none;background:transparent;padding:8px 4px 8px 10px;font-family:inherit;font-size:.82rem;font-weight:700;color:#1B2437;-moz-appearance:textfield}
.nw-inp input::-webkit-outer-spin-button,.nw-inp input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.nw-inp span{padding:0 10px;font-size:.68rem;color:#98A2B3;font-weight:700;border-left:1px solid #EEF1F7;align-self:stretch;display:flex;align-items:center;background:#FAFBFD;border-radius:0 7px 7px 0}
.nw-list-head{display:flex;align-items:center;gap:10px;margin-top:18px}
.nw-count{font-size:.66rem;font-weight:800;color:var(--blue);background:rgba(27,77,255,.07);border:1px solid rgba(27,77,255,.16);border-radius:99px;padding:3px 10px;flex:none}
.nw-ev{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px dashed #E9ECF2;font-size:.76rem}
.nw-ev:last-child{border-bottom:none}
.nw-ev-cur{flex:none;font-size:.62rem;font-weight:800;color:#3D4A5C;background:#EEF1F7;border-radius:6px;padding:3px 7px;letter-spacing:.3px}
.nw-ev-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.nw-ev-t b{font-weight:700;color:#1B2437;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nw-ev-w{font-size:.64rem;color:#98A2B3;font-weight:600}
.nw-ev-d{flex:none;font-size:.68rem;color:var(--mut);font-weight:700;font-variant-numeric:tabular-nums}

/* ═════════════════ RESPONSIVE ═════════════════ */
/* ponsel kecil */
@media (max-width:520px){
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .hero-stat:last-child{grid-column:1/-1}
  .hero-stat{padding:10px 12px}
  .hero-stat .v{font-size:.95rem}
}
@media (max-width:420px){
  .hero-eq{font-size:2.2rem}
  .view{padding:12px 12px 8px}
  .nw-grid{grid-template-columns:1fr}
  .login-card{padding:28px 20px}
  .eyes-row{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
  .eye{padding:9px 3px}
  .tick-px{font-size:1.05rem}
  .h-badge{min-width:calc(50% - 10px)}
}

/* tablet & phablet */
@media (max-width:899px){
  .pos-row{grid-template-columns:auto 1fr auto}
  .pos-row > .btn{grid-column:2/-1;justify-self:end;margin-top:4px}
}

/* desktop */
@media (min-width:900px){
  .sidebar{display:flex}
  .bottomnav{display:none}
  .content{padding-bottom:30px;margin-left:250px}
  .topbar{display:none}
  .view{padding:26px 30px}
  .grid2{grid-template-columns:1fr 1fr}
  .acc-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .ticker-row{grid-template-columns:repeat(3,1fr)}
  .form-grid{grid-template-columns:1fr 1fr}
  .form-grid .full{grid-column:1/-1}
  .time-row{grid-template-columns:200px 200px}
  .hero-eq{font-size:3rem}
  .sheet{top:6vh;border-radius:24px 24px 0 0}
}

/* hormati preferensi gerak minim */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}