: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:34px;height:32px}
.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:10px 12px;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:10px;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,minmax(0,1fr));gap:6px 8px;margin-top:6px}
.kpi small{display:block;color:var(--mut);font-size:9.5px;margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi b{font-size:14px;font-weight:800;letter-spacing:-.3px}
.kpi i{display:block;font-style:normal;color:var(--mut);font-size:9px;margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up{color:var(--up)} .down{color:var(--down)}

/* kantor */
.scene-wrap{position:relative;margin-top:10px;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:34%;font-size:9.5px;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:46%} .b-dayu:before{background:var(--dayu)}
.b-tyo{left:50%;bottom:47%} .b-tyo:before{background:var(--tyo)}
.b-yuli{left:82%;bottom:46%} .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;min-width:0;background:none;border:0;color:var(--mut);font:inherit;font-size:10.5px;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}

/* kalender pnl */
.kal-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:8px 2px 12px}
.kal-mode button{padding:7px 10px;font-size:11.5px}
.kal-nav{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.kal-nav b{font-size:20px;flex:1}
.kal-arrow{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:rgba(13,33,84,.7);color:#fff;font-size:20px;line-height:1}
.kal-today{order:3;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:rgba(63,169,255,.14);color:#cfe6ff;font:inherit;font-weight:800;font-size:12px}
.kal-nav b{order:1} .kal-arrow[data-kn="-1"]{order:0} .kal-arrow[data-kn="1"]{order:2}
.kal-sum{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.kal-sum span{color:var(--mut);font-size:12px}
.kal-sum b{font-size:20px}
.kal-wd{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:5px}
.kal-wd span{font-size:10.5px;color:var(--mut);text-align:center}
.kal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.kal-c{min-height:56px;border-radius:9px;padding:5px 5px 4px;background:rgba(255,255,255,.03);border:1px solid rgba(95,212,255,.06);display:flex;flex-direction:column;justify-content:space-between}
.kal-c .d{font-size:11.5px;font-weight:800;color:#c8d9f5}
.kal-c .v{font-size:9.5px;font-weight:800;letter-spacing:-.2px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kal-c.kpos{background:rgba(47,227,154,.12);border-color:rgba(47,227,154,.45);border-left:2px solid #2fe39a}
.kal-c.kpos .v{color:var(--up)}
.kal-c.kneg{background:rgba(255,107,129,.12);border-color:rgba(255,107,129,.45);border-left:2px solid #ff6b81}
.kal-c.kneg .v{color:var(--down)}
.kal-c.today .d{text-decoration:underline;text-decoration-color:var(--cyan);text-underline-offset:3px}
.kal-c.blank{background:none;border:0}
.kal-c .n{font-size:8.5px;color:var(--mut);font-weight:600}
.kal-year{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kal-year .kal-c{min-height:70px;padding:8px}
.kal-year .kal-c .d{font-size:13px}
.kal-year .kal-c .v{font-size:12px}
.kal-week .kal-c{flex-direction:row;align-items:center;min-height:48px;padding:10px 12px;margin-bottom:6px}
.kal-week .kal-c .d{font-size:13px}
.kal-week .kal-c .v{font-size:14px}
.kal-week .kal-c{gap:10px} .kal-week .kal-c .n{font-size:10.5px;min-width:52px;text-align:right}

/* branding kalender */
.kal-card{position:relative;overflow:hidden;background:linear-gradient(160deg,rgba(31,79,184,.5),rgba(8,24,70,.85))}
.kal-wm{position:absolute;right:-30px;bottom:-24px;width:190px;height:190px;opacity:.07;pointer-events:none}
.kal-brand{display:flex;align-items:center;gap:9px;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid rgba(95,212,255,.18)}
.kal-brand svg{width:28px;height:28px;filter:drop-shadow(0 0 7px #3fb8ff);flex:0 0 28px}
.kal-brand b{display:block;font-size:15px;font-weight:800;letter-spacing:2.2px;background:linear-gradient(90deg,#ffffff,#7fe3ff);-webkit-background-clip:text;color:transparent}
.kal-brand small{display:block;font-size:10.5px;color:var(--mut)}
.kal-brand div{flex:1}
.kal-bot{font-size:11px;font-weight:800;color:#0a1a44;background:linear-gradient(135deg,#7fe3ff,#3fb8ff);padding:5px 9px;border-radius:99px;white-space:nowrap}
.kal-bot:empty{display:none}
.kal-foot{margin-top:12px;padding-top:10px;border-top:1px solid rgba(95,212,255,.14);font-size:10.5px;color:var(--mut);text-align:center;line-height:1.5}
.kal-foot b{color:#cfe6ff}
.kal-foot span{display:block;color:var(--cyan);font-weight:800}
.kal-grid,.kal-wd{grid-template-columns:repeat(7,minmax(0,1fr))} .kal-sum b{text-align:right}
.kal-grid{gap:4px} .kal-wd{gap:4px} .kal-grid .kal-c{padding:5px 3px 4px 4px} .kal-grid .kal-c .v{font-size:9.2px;letter-spacing:-.4px;overflow:visible;text-overflow:clip}
.kal-brand .kal-logo{width:32px;height:30px;flex:0 0 32px} .kal-wm{opacity:.08}

/* ---------- Pasar: trending & cek kontrak ---------- */
.pasar-seg{margin-bottom:12px}
.tr-h{display:flex;justify-content:space-between;align-items:center;margin:2px 2px 10px}
.tr-h b{display:block;font-size:15px}
.tr-h small{color:var(--mut);font-size:11px}
#tab-pasar .filters{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:8px;scrollbar-width:none}
#tab-pasar .filters::-webkit-scrollbar{display:none}
.tr{display:grid;grid-template-columns:16px 32px minmax(0,1fr) auto;gap:8px;align-items:center;padding:12px;border-radius:14px;
  background:rgba(13,33,84,.55);border:1px solid rgba(95,212,255,.1);margin-bottom:8px}
.tr .rk{font-weight:800;color:var(--mut);font-size:13px;text-align:center}
.tr .rk.g{color:var(--gold)}
.ic{width:36px;height:36px;border-radius:50%;background:#0b2766;display:grid;place-items:center;font-weight:800;font-size:13px;color:#9fe6ff;overflow:hidden;border:1px solid var(--line)}
.ic img{width:100%;height:100%;object-fit:cover}
.tr .nm{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tr .nm b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pills{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.pill{font-size:10px;font-weight:700;padding:2px 6px;border-radius:7px;background:rgba(63,169,255,.12);color:#bfe3ff;border:1px solid rgba(63,169,255,.25);white-space:nowrap}
.pill.f{background:rgba(47,227,154,.1);color:#9ff5cf;border-color:rgba(47,227,154,.28)}
.pill.up{background:rgba(47,227,154,.12);color:var(--up);border-color:rgba(47,227,154,.3)}
.pill.down{background:rgba(255,107,129,.12);color:var(--down);border-color:rgba(255,107,129,.3)}
.verdict{font-size:10.5px;margin-top:5px;color:var(--mut);line-height:1.35}
.verdict b.ok{color:var(--up)} .verdict b.no{color:var(--down)}
.tr .act{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.mini-btn{border:0;border-radius:10px;padding:7px 9px;font:inherit;font-size:11.5px;font-weight:800;color:#fff;background:linear-gradient(135deg,#3fb8ff,#1557e0);white-space:nowrap}
.mini-btn.ghost{background:rgba(63,169,255,.1);border:1px solid rgba(63,169,255,.35);color:#cfe6ff}
.mini-btn[disabled]{opacity:.45}
.cek-l{display:block;font-size:12.5px;font-weight:700;color:#c8d9f5;margin-bottom:8px}
.cek-row{display:flex;gap:8px}
.cek-row input{flex:1;min-width:0;padding:12px;border-radius:10px;border:1px solid rgba(95,212,255,.25);background:#081a45;color:#fff;font:inherit;font-size:13px;font-family:"JetBrains Mono",ui-monospace,monospace}
.cek-row input:focus{outline:2px solid var(--blue)}
.cek-row .btn{flex:none;padding:12px 18px}
.cek-hint{display:block;color:var(--mut);font-size:11px;margin-top:8px;line-height:1.4}
.tok-h{display:flex;gap:12px;align-items:center}
.tok-h .ic{width:46px;height:46px;font-size:16px}
.tok-h b{font-size:18px}
.tok-h small{display:block;color:var(--mut);font-size:11px;word-break:break-all}
.banner{border-radius:12px;padding:11px 12px;font-size:12.5px;font-weight:700;margin:10px 0 0;line-height:1.4}
.banner.no{background:rgba(255,107,129,.12);color:#ffc2cc;border:1px solid rgba(255,107,129,.35)}
.banner.warn{background:rgba(255,201,77,.1);color:#ffe3a3;border:1px solid rgba(255,201,77,.35)}
.banner.ok{background:rgba(47,227,154,.1);color:#b4f7d9;border:1px solid rgba(47,227,154,.3)}
.rules{display:grid;gap:0;margin-top:6px}
.rule{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 0;border-top:1px solid rgba(95,212,255,.08);font-size:12.5px}
.rule:first-child{border-top:0}
.rule .s{color:var(--mut);font-size:11px;text-align:right}
.rule .s b{display:block;color:var(--txt);font-size:12.5px}
.rule.no .s b{color:var(--down)}
.sub-h{font-size:11px;letter-spacing:1.3px;text-transform:uppercase;color:var(--cyan);margin:4px 0 4px;font-weight:800}
.pc{border-radius:12px;padding:12px;background:rgba(8,26,69,.7);border:1px solid rgba(95,212,255,.12);margin-top:8px}
.pc-h{display:flex;justify-content:space-between;gap:8px;align-items:center}
.pc-h b{font-size:13.5px}
.pc details{margin-top:6px}
.pc summary{font-size:11.5px;color:var(--cyan);cursor:pointer}
.tag.man{background:rgba(255,155,60,.15);color:#ffb469}
/* lembar bawah buka LP */
.sheet-bg{position:fixed;inset:0;z-index:60;background:rgba(2,6,20,.6);backdrop-filter:blur(2px)}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;max-height:88vh;overflow-y:auto;border-radius:20px 20px 0 0;
  background:linear-gradient(180deg,#0d2154,#071537);border-top:1px solid var(--line);padding:16px 16px calc(18px + env(safe-area-inset-bottom));animation:up .25s ease}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.sheet h3{font-size:16px;margin-bottom:2px}
.sheet .sub{color:var(--mut);font-size:11.5px;margin-bottom:12px}
.sheet .fld input[type=number]{width:100%}
.sheet .fld input[type=range]{width:100%;accent-color:var(--blue)}
.qa{display:flex;gap:6px;margin-top:6px}
.qa button{flex:1;padding:7px 0;border-radius:8px;border:1px solid rgba(95,212,255,.22);background:#081a45;color:#cfe0ff;font:inherit;font-size:12px;font-weight:700}
.warnlist{margin:6px 0 0 16px;font-size:12px;color:#ffe3a3;line-height:1.5}
/* rekap sepanjang masa */
.rekap{position:relative;overflow:hidden;background:linear-gradient(150deg,rgba(31,79,184,.6),rgba(8,24,70,.85));border-color:rgba(95,212,255,.3)}
.rekap:before{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;background:url(logo.svg) center/contain no-repeat;opacity:.09}
.rk-h{display:flex;gap:8px;align-items:center}
.rk-h img{width:26px;height:26px}
.rk-h b{font-size:11px;letter-spacing:1.6px;color:var(--cyan)}
.rk-h small{display:block;color:var(--mut);font-size:10.5px;letter-spacing:0}
.rk-big{font-size:30px;font-weight:800;letter-spacing:-.8px;margin:8px 0 2px}
.rk-usd{color:var(--mut);font-size:12px}
.rk-chips{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0}
.rk-chips span{font-size:11px;font-weight:700;padding:4px 9px;border-radius:99px;border:1px solid rgba(95,212,255,.25);background:rgba(4,11,32,.35)}
.rk-split{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.rk-split div{border-radius:12px;padding:10px;background:rgba(4,11,32,.35);border:1px solid rgba(95,212,255,.12)}
.rk-split small{display:block;color:var(--mut);font-size:10.5px}
.rk-split b{font-size:15px}
.rk-split i{display:block;font-style:normal;color:var(--mut);font-size:10.5px;margin-top:2px}

.tr .ic{width:32px;height:32px;font-size:11px}
.top-r{display:flex;gap:8px;align-items:center}
.lang{font:inherit;font-size:11px;font-weight:800;letter-spacing:.8px;padding:6px 9px;border-radius:99px;border:1px solid rgba(95,212,255,.4);background:rgba(63,169,255,.12);color:#cfe6ff}
/* akun & gaya */
.akun .ak-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
.akun small{display:block;color:var(--mut);font-size:10.5px}
.akun b{font-size:14px}
.ak-w{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;align-items:center;margin-top:10px}
.ak-w small{grid-column:1/-1}
.ak-w code{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11.5px;word-break:break-all;color:#cfe6ff;background:#081a45;border:1px solid var(--line);border-radius:8px;padding:7px 8px}
.gaya{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:10px}
.gaya button{display:grid;gap:4px;justify-items:center;padding:12px 6px;border-radius:14px;border:1px solid var(--line);background:var(--panel);color:var(--txt);font:inherit}
.gaya button i{font-style:normal;font-size:22px}
.gaya button b{font-size:12.5px}
.gaya button.on{background:linear-gradient(135deg,rgba(63,184,255,.35),rgba(21,87,224,.35));border-color:rgba(95,212,255,.6);box-shadow:0 0 0 1px rgba(95,212,255,.3) inset}