:root{--c:#5fe3ff;--g:#ffd166;--ok:#62f0a8;--warn:#ffc86b;--mute:#7d8aa8;--ink:#eaf2ff;--panel:rgba(8,14,28,.72);--line:rgba(120,200,255,.22)}
*{box-sizing:border-box;margin:0}
html,body{height:100%;overflow:hidden;background:#03050c;color:var(--ink);font:15px/1.45 "Avenir Next","Helvetica Neue",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block}
#vig{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,8,.55) 100%)}
#fade{position:fixed;inset:0;background:#02040a;opacity:0;pointer-events:none;z-index:20}
.bar{position:fixed;left:0;right:0;height:0;background:#000;z-index:15;transition:height .7s cubic-bezier(.6,0,.2,1)}
#bar1{top:0}#bar2{bottom:0}
body.cine .bar{height:7.5vh}

/* label 3D */
#labels{position:fixed;inset:0;pointer-events:none;overflow:hidden}
#labels div{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;transition:opacity .35s;will-change:transform}
#labels .lt{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:#bfeaff;text-shadow:0 0 12px #000,0 0 4px #000;padding-right:14px}
#labels .lt b{display:block;font-size:10px;color:var(--mute);letter-spacing:.3em;font-weight:600}
#labels .st{margin-left:-80px;width:160px;text-align:center;white-space:normal}
#labels .st b{display:inline-block;padding:3px 11px 3px 9px;border-radius:99px;background:rgba(6,12,24,.78);border:1px solid var(--line);font-size:13px;font-weight:600;backdrop-filter:blur(6px)}
#labels .st i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:var(--mute);vertical-align:1px}
#labels .st.l1 i{background:var(--warn)}#labels .st.l2 i{background:var(--ok);box-shadow:0 0 8px var(--ok)}
#labels .st span{display:block;margin:5px auto 0;font-size:11.5px;line-height:1.3;color:#cfe0f5;text-shadow:0 0 8px #000,0 0 3px #000;max-width:150px}
#labels .rn b{border-color:rgba(255,255,255,.5)}

/* bilah atas */
#top{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;padding:16px 22px;z-index:10;transition:opacity .5s,transform .5s}
.brand{display:flex;align-items:center;gap:10px;color:var(--c)}
.brand svg{width:34px;height:34px;filter:drop-shadow(0 0 8px rgba(95,227,255,.6))}
.brand b{display:block;font-size:15px;letter-spacing:.28em;color:#fff}.brand small{display:block;font-size:11px;letter-spacing:.2em;color:var(--mute);text-transform:uppercase}
.badge{margin-left:8px;padding:4px 12px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.18em;border:1px solid var(--line);background:var(--panel);color:var(--g)}
.badge.live{color:#ff6b6b;border-color:rgba(255,107,107,.5)}.badge.live:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#ff6b6b;margin-right:7px;animation:pu 1.4s infinite}
@keyframes pu{50%{opacity:.25}}
#crumb{margin-left:14px;font-size:13px;color:var(--mute);letter-spacing:.06em}#crumb b{color:#fff;font-weight:600}
.sp{flex:1}
.btn{font:inherit;font-size:13px;font-weight:600;color:#dff6ff;padding:8px 15px;border-radius:99px;border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(10px);cursor:pointer;text-decoration:none;transition:background .2s,border-color .2s,transform .15s}
.btn:hover{background:rgba(95,227,255,.18);border-color:var(--c)}.btn:active{transform:scale(.97)}
.btn.alur{color:var(--g)}
.btn.big{font-size:16px;padding:14px 28px;background:var(--c);color:#04121c;border-color:var(--c);box-shadow:0 0 34px rgba(95,227,255,.45)}.btn.big:hover{background:#b6f3ff}
.btn.big.ghost{background:transparent;color:#dff6ff;box-shadow:none;border-color:var(--line)}
body.cine #top .btn,body.intro #top .btn,body.intro #crumb{opacity:0;pointer-events:none}
body.nolive #bMode{display:none}

/* panel HUD */
#hud{position:fixed;top:74px;right:22px;bottom:22px;width:400px;padding:6px 18px 18px;border-radius:18px;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(14px);overflow:auto;z-index:9;transform:translateX(440px);opacity:0;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s;scrollbar-width:none}
#hud::-webkit-scrollbar{display:none}
body.hud #hud{transform:none;opacity:1}
#hud h2{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--c);margin:16px 0 9px;font-weight:700}#hud h2 small{color:var(--mute);letter-spacing:.08em;text-transform:none;font-weight:500;margin-left:6px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tiles div{padding:10px 4px 8px;border-radius:12px;background:rgba(95,227,255,.07);border:1px solid rgba(95,227,255,.16);text-align:center;font-size:10.5px;color:var(--mute);letter-spacing:.04em}
.tiles b{display:block;font-size:26px;line-height:1.1;color:#fff;font-weight:700}
#hud ul{list-style:none;padding:0}
#daftar li{display:grid;grid-template-columns:14px 62px 1fr;gap:8px;align-items:center;padding:5px 8px;border-radius:9px;cursor:pointer;font-size:13px}
#daftar li:hover,#daftar li.on{background:rgba(95,227,255,.12)}
#daftar i,.dot{width:9px;height:9px;border-radius:50%;background:#3a4560;display:inline-block}
.l1 i,.dot.l1{background:var(--warn)!important}.l2 i,.dot.l2{background:var(--ok)!important;box-shadow:0 0 8px var(--ok)}
#daftar b{font-weight:600}#daftar span{color:var(--mute);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#daftar li.l2 span{color:#cfe0f5}
#logp li,#kep li{padding:7px 9px;border-radius:9px;background:rgba(255,255,255,.04);margin-bottom:5px;font-size:12.5px;line-height:1.35}
#logp time{color:var(--mute);font-size:11px;margin-right:6px}#logp b{color:#fff}#logp em{color:var(--c);font-style:normal}
#logp span{display:block;color:#b9c6dc;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#kep li{color:#b9c6dc;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* kartu staf */
#kartu{position:fixed;left:22px;bottom:22px;width:430px;padding:16px 18px;border-radius:18px;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(14px);z-index:9;opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity .4s,transform .4s}
#kartu.on{opacity:1;transform:none;pointer-events:auto}
#kartu h3{font-size:30px;line-height:1;font-weight:700;display:flex;align-items:center;gap:12px}
#kartu .pill{font-size:11px;font-weight:700;letter-spacing:.14em;padding:4px 11px;border-radius:99px;background:#3a4560;color:#0a1220}
#kartu .pill.l1{background:var(--warn)}#kartu .pill.l2{background:var(--ok)}#kartu .pill.l0{color:#cfd8ea}
#kartu .r{color:var(--k,var(--c));font-size:13.5px;margin:5px 0 10px;font-weight:600}
#kartu h4{font-size:10.5px;letter-spacing:.24em;color:var(--mute);margin:10px 0 3px;font-weight:700}
#kartu p{font-size:14px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#kartu p.log{color:#b9c6dc;font-size:13px}
#kartu .al{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}#kartu .tl span{border-color:var(--k,var(--c));color:#fff}#kartu .tl .j-subagent{border-color:var(--g);color:var(--g)}#kartu .tl .j-skill{border-color:#c9b6ff;color:#c9b6ff}#kartu .al span{font-size:11.5px;padding:3px 10px;border-radius:99px;border:1px solid var(--line);color:#cfe0f5}
body.cine #kartu{bottom:calc(7.5vh + 16px)}

/* teks sinematik */
#cap{position:fixed;left:0;right:0;bottom:calc(7.5vh + 26px);text-align:center;z-index:16;opacity:0;transform:translateY(10px);transition:opacity .45s,transform .45s;pointer-events:none;padding:0 20vw}
#cap.on{opacity:1;transform:none}
#cap b{display:block;font-size:30px;font-weight:700;letter-spacing:.01em;text-shadow:0 2px 24px #000,0 0 6px #000}
#cap span{display:block;margin-top:4px;font-size:18px;color:#cfe6f5;text-shadow:0 2px 16px #000,0 0 5px #000}
#hint{position:fixed;left:0;right:0;bottom:20px;text-align:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#9fc4d8;text-shadow:0 0 8px #000;pointer-events:none;transition:opacity .4s;z-index:8}
body.cine #hint,body.intro #hint,body.rekam #hint{opacity:0}
#toast{position:fixed;top:78px;left:50%;transform:translate(-50%,-10px);padding:9px 18px;border-radius:99px;background:var(--panel);border:1px solid var(--line);font-size:13px;opacity:0;transition:.35s;z-index:30;pointer-events:none}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* pembuka */
#intro{position:fixed;left:7vw;bottom:13vh;max-width:760px;z-index:12;transition:opacity .8s,transform .8s}
#intro .tag{font-size:13px;letter-spacing:.34em;text-transform:uppercase;color:var(--c);margin-bottom:14px}
#intro h1{font-size:76px;line-height:1.02;font-weight:700;letter-spacing:-.015em;text-shadow:0 0 50px rgba(95,227,255,.35)}
#intro p{font-size:19px;color:#cfe0f5;margin:18px 0 26px;max-width:600px}
#intro .row{display:flex;gap:12px}
body:not(.intro) #intro{opacity:0;transform:translateY(20px);pointer-events:none}

/* mode rekam: tanpa kursor, tanpa tombol */
body.rekam,body.rekam *{cursor:none!important}
body.rekam #top .btn,body.rekam #intro .row{display:none}