:root{
  --bg:#040b20; --bg2:#071537; --panel:rgba(18,40,96,.55); --panel2:#0d2154; --line:rgba(95,212,255,.18);
  --txt:#e8f2ff; --mut:#8fa8d6; --cyan:#5fd4ff; --blue:#3fa9ff; --deep:#1557e0;
  --up:#2fe39a; --down:#ff6b81; --gold:#ffc94d; --dayu:#f6a020; --tyo:#3fb8ff; --yuli:#13b88a;
  --r:16px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:var(--bg);color:var(--txt);font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:14px}
body{min-height:100vh;padding-bottom:84px;
  background:radial-gradient(120% 60% at 50% -10%,#123a8f 0%,#071537 55%,#040b20 100%) fixed}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
header.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;background:rgba(4,11,32,.78);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{display:flex;gap:10px;align-items:center}
.brand .gem{width:30px;height:30px;filter:drop-shadow(0 0 8px #3fb8ff)}
.brand b{display:block;font-size:17px;letter-spacing:.3px}
.brand small{color:var(--mut);font-size:11.5px}
.mode{font-size:11px;font-weight:800;letter-spacing:1px;padding:6px 10px;border-radius:99px;border:1px solid}
.mode.sim{color:var(--gold);border-color:rgba(255,201,77,.5);background:rgba(255,201,77,.08)}
.mode.live{color:var(--up);border-color:rgba(47,227,154,.5);background:rgba(47,227,154,.08);animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(47,227,154,0)}0%{box-shadow:0 0 0 0 rgba(47,227,154,.45)}}
main{padding:14px 14px 0}
.tab{display:none;animation:fade .25s ease}
.tab.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1}}
h2{font-size:13px;letter-spacing:1.4px;text-transform:uppercase;color:var(--mut);margin:18px 2px 10px}

/* papan kinerja */
.board{border-radius:var(--r);padding:14px;background:linear-gradient(160deg,rgba(31,79,184,.55),rgba(8,24,70,.75));
  border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06)}
.board-h{display:flex;justify-content:space-between;font-size:11.5px;font-weight:800;letter-spacing:1.4px;color:#b9d3ff}
.live{color:var(--up)} .live.off{color:var(--down)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 8px;margin-top:12px}
.kpi small{display:block;color:var(--mut);font-size:11px;margin-bottom:3px}
.kpi b{font-size:18px;font-weight:800;letter-spacing:-.3px}
.kpi i{display:block;font-style:normal;color:var(--mut);font-size:10.5px;margin-top:1px}
.up{color:var(--up)} .down{color:var(--down)}

/* kantor */
.scene-wrap{position:relative;margin-top:14px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  box-shadow:0 14px 40px rgba(0,0,0,.45)}
#scene svg{display:block;width:100%;height:auto}
.bubble{position:absolute;max-width:30%;font-size:10px;font-weight:700;line-height:1.25;padding:6px 8px;border-radius:10px;
  background:rgba(255,255,255,.95);color:#0a1a44;box-shadow:0 6px 16px rgba(0,0,0,.35);transform:translateX(-50%);
  text-align:center;transition:opacity .3s}
.bubble:after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-6px;border:6px solid transparent;border-bottom:0;border-top-color:rgba(255,255,255,.95)}
.bubble:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:1px;background:currentColor}
.b-dayu{left:18%;bottom:50%} .b-dayu:before{background:var(--dayu)}
.b-tyo{left:50%;bottom:52%} .b-tyo:before{background:var(--tyo)}
.b-yuli{left:82%;bottom:50%} .b-yuli:before{background:var(--yuli)}
.bubble.new{animation:pop .4s ease}
@keyframes pop{0%{transform:translateX(-50%) scale(.7);opacity:0}100%{transform:translateX(-50%) scale(1);opacity:1}}

/* animasi tokoh */
.tokoh .kepala{animation:bob 4s ease-in-out infinite;transform-origin:0 -40px}
.tyo .kepala{animation-delay:-1.3s} .yuli .kepala{animation-delay:-2.6s}
@keyframes bob{0%,100%{transform:rotate(0)}30%{transform:rotate(-2.5deg)}70%{transform:rotate(2deg)}}
.mata{animation:kedip 5s infinite}
.tyo .mata{animation-delay:-2s} .yuli .mata{animation-delay:-3.4s}
@keyframes kedip{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.kerja .ketik{animation:ketik .35s ease-in-out infinite alternate}
@keyframes ketik{to{transform:translateY(-1.2px)}}
.kilau{animation:kilau 2.4s ease-in-out infinite;transform-origin:14px -76px}
@keyframes kilau{50%{opacity:.55;transform:scale(.85)}}
.kuncir{animation:ayun 3s ease-in-out infinite;transform-origin:18px -84px}
@keyframes ayun{50%{transform:rotate(4deg)}}
.logoLaptop{animation:glow 2s ease-in-out infinite}
@keyframes glow{50%{opacity:.45}}
.floatgem{animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-6px)}}
.blink{animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
.scroll{animation:scroll 9s linear infinite}
@keyframes scroll{to{transform:translateX(-120px)}}
.neon{animation:neon 3.5s ease-in-out infinite}
@keyframes neon{0%,100%{opacity:1}48%{opacity:1}50%{opacity:.7}52%{opacity:1}}
.dust{animation:dust 8s linear infinite;opacity:.0}
@keyframes dust{0%{transform:translateY(0);opacity:0}20%{opacity:.8}100%{transform:translateY(-120px);opacity:0}}

/* kartu umum */
.card{border-radius:var(--r);padding:14px;background:var(--panel);border:1px solid var(--line);margin-bottom:10px;backdrop-filter:blur(8px)}
.card.mini{font-size:12px;color:var(--mut);margin-top:12px}
.row-btn{display:flex;gap:10px;margin-top:12px}
.btn{flex:1;border:0;border-radius:12px;padding:12px 14px;font:inherit;font-weight:800;color:#fff;cursor:pointer;
  background:linear-gradient(135deg,#3fb8ff,#1557e0);box-shadow:0 8px 20px rgba(21,87,224,.35)}
.btn.ghost{background:rgba(63,169,255,.1);border:1px solid rgba(63,169,255,.35);box-shadow:none;color:#cfe6ff}
.btn.red{background:linear-gradient(135deg,#ff6b81,#c81e45);box-shadow:0 8px 20px rgba(200,30,69,.3)}
.btn.green{background:linear-gradient(135deg,#2fe39a,#0b9a63)}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.5}

/* usulan */
.prop{border-radius:var(--r);padding:14px;margin-top:12px;border:1px solid rgba(255,201,77,.45);
  background:linear-gradient(160deg,rgba(255,201,77,.12),rgba(13,33,84,.8))}
.prop h3{font-size:15px;margin-bottom:4px}
.prop p{color:#c8d9f5;font-size:12.5px;line-height:1.45}
.prop .row-btn{margin-top:10px}
.timer{float:right;font-size:11px;color:var(--gold)}

/* posisi */
.pos{border-radius:var(--r);padding:14px;margin-bottom:12px;background:var(--panel);border:1px solid var(--line)}
.pos-h{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.pos-h b{font-size:16px}
.tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.6px;padding:3px 7px;border-radius:99px;margin:4px 4px 0 0;
  background:rgba(63,169,255,.14);color:#9fd8ff}
.tag.sim{background:rgba(255,201,77,.14);color:var(--gold)}
.tag.rh{background:rgba(204,255,0,.12);color:#d7ff5a}
.pnl{font-size:24px;font-weight:800;text-align:right;line-height:1}
.pnl small{display:block;font-size:11px;color:var(--mut);font-weight:600;margin-top:4px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.stats div small{display:block;color:var(--mut);font-size:10.5px}
.stats div b{font-size:13px}
.range{position:relative;height:28px;margin:6px 0 4px}
.range .bar{position:absolute;left:0;right:0;top:11px;height:6px;border-radius:6px;background:linear-gradient(90deg,#ff6b81,#3fb8ff 60%,#2fe39a)}
.range .pin{position:absolute;top:2px;width:3px;height:24px;border-radius:3px;background:#fff;box-shadow:0 0 10px #fff;transform:translateX(-50%)}
.range .lbl{display:flex;justify-content:space-between;font-size:10px;color:var(--mut);margin-top:30px}
.spark{width:100%;height:46px;display:block;margin-top:4px}
.why{font-size:11.5px;color:var(--mut);margin-top:8px;line-height:1.4}
.empty{text-align:center;color:var(--mut);padding:26px 10px;font-size:13px}
.empty .big{font-size:34px;display:block;margin-bottom:6px}
.cl{display:flex;justify-content:space-between;align-items:center;padding:11px 12px;border-radius:12px;background:rgba(13,33,84,.55);margin-bottom:8px;border:1px solid rgba(95,212,255,.08)}
.cl small{display:block;color:var(--mut);font-size:11px;margin-top:2px}
.cl b.v{font-size:14px}

/* aktivitas */
.filters{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px}
.chip{border:1px solid var(--line);background:rgba(13,33,84,.6);color:var(--txt);padding:7px 12px;border-radius:99px;font:inherit;font-size:12px;font-weight:700;white-space:nowrap}
.chip.on{background:linear-gradient(135deg,#3fb8ff,#1557e0);border-color:transparent}
.ev{display:flex;gap:10px;padding:10px 4px;border-bottom:1px solid rgba(95,212,255,.08)}
.ava{flex:0 0 34px;height:34px;border-radius:50%;overflow:hidden;background:#0d2154;border:2px solid var(--line)}
.ava svg{width:100%;height:100%;display:block}
.ev .t{font-size:13px;line-height:1.4}
.ev small{color:var(--mut);font-size:11px}
.ev.error .t{color:#ffb3c0} .ev.untung .t{color:#9ff5cf} .ev.rugi .t{color:#ffb3c0} .ev.usul .t{color:#ffe29a}

/* setelan */
.grp{border-radius:var(--r);padding:4px 14px;background:var(--panel);border:1px solid var(--line);margin-bottom:12px}
.grp h3{font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--cyan);padding:12px 0 6px}
.fld{padding:10px 0;border-top:1px solid rgba(95,212,255,.08)}
.fld:first-of-type{border-top:0}
.fld label{display:block;font-size:12.5px;color:#c8d9f5;margin-bottom:6px;font-weight:600}
.fld .help{display:block;font-size:11px;color:var(--mut);margin-top:5px;line-height:1.35}
.fld input[type=number]{width:100%;padding:11px 12px;border-radius:10px;border:1px solid rgba(95,212,255,.22);background:#081a45;color:#fff;font:inherit;font-size:15px;font-weight:700}
.fld input:focus{outline:2px solid var(--blue)}
.sw{display:flex;justify-content:space-between;align-items:center;gap:10px}
.sw label{margin:0}
.tg{position:relative;flex:0 0 48px;height:28px;border-radius:99px;background:#24345e;transition:.2s;cursor:pointer}
.tg:after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:.2s}
.tg.on{background:linear-gradient(135deg,#3fb8ff,#1557e0)} .tg.on:after{left:23px}
.tg.warn.on{background:linear-gradient(135deg,#ffc94d,#e08a00)}
.seg{display:flex;gap:6px}
.seg button{flex:1;padding:10px 6px;border-radius:10px;border:1px solid rgba(95,212,255,.22);background:#081a45;color:#cfe0ff;font:inherit;font-weight:700;font-size:12.5px}
.seg button.on{background:linear-gradient(135deg,#3fb8ff,#1557e0);color:#fff;border-color:transparent}
.fld.chg label:after{content:" •";color:var(--gold)}
.savebar{position:fixed;left:12px;right:12px;bottom:76px;z-index:30;display:none;align-items:center;gap:10px;padding:10px 10px 10px 14px;
  border-radius:14px;background:rgba(8,26,69,.96);border:1px solid rgba(255,201,77,.45);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.savebar.on{display:flex}
.savebar span{flex:1;font-size:12px;color:var(--gold);font-weight:700}
.savebar .btn{flex:0 0 auto;padding:10px 16px}
.note{font-size:11px;color:var(--mut);margin:6px 2px 20px}
.lesson{display:flex;gap:10px;align-items:center;justify-content:space-between}
.lesson p{font-size:12.5px;line-height:1.4}
.lesson .btn{flex:0 0 auto;padding:8px 12px;font-size:12px}
.blrow{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-top:1px solid rgba(95,212,255,.08);font-size:12.5px}
.blrow button{background:none;border:1px solid var(--line);color:#9fd8ff;border-radius:8px;padding:5px 9px;font:inherit;font-size:11px}

/* tab bawah */
nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:25;display:flex;padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  background:rgba(4,11,32,.9);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
nav.tabs button{flex:1;background:none;border:0;color:var(--mut);font:inherit;font-size:11px;font-weight:700;padding:6px 0;border-radius:12px}
nav.tabs button i{display:block;font-style:normal;font-size:19px;margin-bottom:2px;filter:grayscale(.6)}
nav.tabs button.on{color:#fff;background:linear-gradient(180deg,rgba(63,184,255,.22),rgba(21,87,224,.12))}
nav.tabs button.on i{filter:none}
#toast{position:fixed;left:50%;bottom:150px;transform:translateX(-50%);z-index:50;background:#fff;color:#0a1a44;font-weight:800;
  padding:10px 16px;border-radius:12px;font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:.25s;max-width:86%;text-align:center}
#toast.on{opacity:1}