/* THEME v2: Share Tech Mono di mana pun, dialog/sheet datar (bukan neobrutalism), nav bawah pil kuning, toast nempel, mode ringkas, kartu musik. Dimuat paling akhir. Preview Telegram (.tg) tidak diubah. */
@font-face{font-family:'Share Tech Mono';src:url('/4ibwsv/2wulf7onog.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{--fb:#111;--navbg:#fff;--sheet:#fff;--coral:#ff4458;--pinkbox:#ffe3e7;--navh:78px;--mf:'Share Tech Mono',ui-monospace,Menlo,Consolas,monospace}
html.dark{--pinkbox:#3a2025}
body,body *:not(.tg):not(.tg *):not(svg *){font-family:var(--mf)!important}
body{font-weight:400}
h1,h2,h3,h4,b,strong,.st-t b,.ui-sh b,.ui-chh b,.tbt b,.pfs-card h3{font-weight:700}
input::placeholder,textarea::placeholder{font-family:var(--mf)!important}
#splash,#splash *{font-family:var(--mf)!important}

/* ===== kolom isian: gaya sheet (garis tipis, tanpa bayangan keras) ===== */
input:not(.tg *):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),textarea:not(.tg *):not(.edc *),select:not(.tg *){border:1.5px solid var(--fb)!important;border-radius:10px!important;box-shadow:none!important;background:var(--card,#fff)!important;font-weight:400!important;padding:13px 14px!important}
html:not(.dark) input:not(.tg *):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),html:not(.dark) textarea:not(.tg *):not(.edc *){background:#fff!important}
input:focus:not(.tg *):not([type=range]),textarea:focus:not(.tg *):not(.edc *),select:focus:not(.tg *){border-color:var(--coral)!important;box-shadow:none!important;background:var(--card,#fff)!important}
html:not(.dark) input:focus:not(.tg *):not([type=range]),html:not(.dark) textarea:focus:not(.tg *):not(.edc *){background:#fff!important}
input::placeholder,textarea::placeholder{color:var(--mute)!important;font-weight:400!important;opacity:.85}
label:not(.tg *):not(.tgl):not(.chk):not(.pfs-av):not(.fld>label){text-transform:none;letter-spacing:.02em;font-size:12.5px;font-weight:400;color:var(--mute)!important}
.csel .cs-t{border:1.5px solid var(--fb)!important;border-radius:10px!important;box-shadow:none!important;font-weight:400!important;background:var(--card,#fff)!important}
.csel .cs-t:active{translate:none!important;background:var(--card2,#fff)!important}
.csel .cs-c{border:0!important;background:transparent!important}

/* floating label (dipakai di sheet & dialog) */
.fld{position:relative;margin-top:10px}
.fld>label{position:absolute;left:12px;top:-9px;padding:0 5px;margin:0!important;background:var(--sheet);font-size:12.5px!important;color:var(--mute)!important;z-index:1;pointer-events:none;line-height:1.2}
.fld:focus-within>label{color:var(--coral)!important}
.fld>input,.fld>textarea{margin:0!important}
.fld>textarea{min-height:96px;resize:none}

/* ===== bottom sheet & dialog: datar, putih, sudut atas bulat ===== */
.ui-scrim{background:rgba(0,0,0,.5)}
.ui-sheet,.ui-sheet.plain,.ui-sheet.tall{background:var(--sheet)!important;border:0!important;border-radius:28px 28px 0 0!important;box-shadow:none!important;max-width:640px;padding-bottom:calc(env(safe-area-inset-bottom) + 10px)}
.ui-grab,.pfs-grab{background:#d4d4d4!important;width:76px!important;height:7px!important;margin-left:-38px!important;top:10px!important}
html.dark .ui-grab,html.dark .pfs-grab{background:#4a4533!important}
.ui-sh{padding:30px 18px 12px;border-bottom:1.5px solid var(--fb)}
.ui-sh b{font-size:19px}
.ui-x{border:0!important;border-radius:50%!important;box-shadow:none!important;background:rgba(127,127,127,.15)!important;width:34px;height:34px}
.ui-x:active{background:rgba(127,127,127,.3)!important;translate:none!important}
.ui-list{padding:0;gap:0}
.ui-opt{border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;min-height:58px;padding:12px 20px!important;font-weight:400;border-bottom:1px solid rgba(127,127,127,.2)!important}
.ui-opt:active{translate:none!important;background:rgba(127,127,127,.12)!important}
.ui-opt.on{background:transparent!important;font-weight:700}
.ui-opt i{border:0!important;background:transparent!important;width:26px;height:26px}
.ui-opt.on i{background:var(--coral)!important;color:#fff}
.ui-grp{font-size:12px;letter-spacing:.2em;padding:14px 20px 4px;color:var(--mute)}
.ui-row{border-bottom:0!important;padding:14px 20px!important}
.ui-row:active{background:rgba(127,127,127,.12)!important}
.ui-row.on{background:transparent!important}
.ui-lead{width:50px!important;height:42px!important;border:1.5px solid var(--fb);border-radius:12px;background:var(--pinkbox);color:var(--fb)}
html.dark .ui-lead{color:var(--ink)}
.ui-lead.av{width:46px!important;height:46px!important;border-radius:50%;box-shadow:none!important;background-color:var(--pinkbox)}
.ui-tx b{font-size:17px}
.ui-tx small{font-size:13.5px;font-weight:400}
.ui-sl .ui-tx small{font-weight:400;color:var(--mute)}
.ui-sl .ui-tx b{font-weight:700}
.ui-sl .ui-row+.ui-row{border-top:1.5px solid var(--fb)}
.ui-bd{border:0!important;background:var(--coral)!important;color:#fff!important}
.ui-chh{border-bottom:1.5px solid var(--fb)!important}
.ui-ch .ui-df{border-top:1.5px solid var(--fb)!important}
.ui-row.danger .ui-lead{background:#ffd9dd;color:var(--coral)}
.ui-pb .sc{background:transparent!important}
@media(min-width:700px){.ui-sheet,.ui-sheet.plain{border-radius:24px!important}}

.ui-dlg{background:var(--sheet)!important;border:0!important;border-radius:24px!important;box-shadow:none!important;max-width:360px}
.ui-dh,.ui-dh.danger,.ui-dh.ok{background:transparent!important;border-bottom:0!important;flex-direction:column;text-align:center;padding:22px 20px 0;gap:10px}
.ui-di{width:54px;height:54px;border:0!important;border-radius:50%;background:var(--pinkbox)!important;color:var(--coral)!important}
.ui-di svg{width:26px;height:26px}
.ui-dh b{font-size:19px}
.ui-db{text-align:center;padding:10px 22px 4px;font-weight:400;color:var(--mute)}
.ui-in{border:1.5px solid var(--fb)!important;border-radius:10px!important;box-shadow:none!important;font-weight:400!important;background:var(--card,#fff)!important}
.ui-in:focus{border-color:var(--coral)!important}
.ui-df{flex-direction:column-reverse;gap:10px;padding:14px 20px 20px}
.ui-b{width:100%;min-height:50px;border:0!important;border-radius:999px!important;box-shadow:none!important;font-weight:400;letter-spacing:.06em;font-size:15px}
.ui-b.main,.ui-b.danger{background:var(--coral)!important;color:#fff!important}
.ui-b.ghost{background:transparent!important;border:1.5px solid var(--fb)!important;color:var(--ink)!important}
.ui-b:active{translate:none!important;opacity:.85}
.ui-ch .ui-df .ui-b{flex:none}

/* ===== sheet edit profil ===== */
.pfs-bg{background:rgba(0,0,0,.5)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.pfs-card{background:var(--sheet)!important;border:0!important;border-radius:28px 28px 0 0!important;box-shadow:none!important;max-width:640px;padding:30px 20px calc(18px + env(safe-area-inset-bottom,0px))!important;display:grid;gap:0}
.pfs-grab{position:absolute;left:50%;top:10px}
.pfs-card h3{font-size:21px;margin:0 0 18px;letter-spacing:.06em}
.pfs-av{margin:0 0 22px!important;justify-self:center}
.pfs-ph{width:156px;height:156px;border-radius:50%;background:var(--coral) center/cover no-repeat;display:grid;place-items:center;color:#fff;position:relative}
.pfs-ph svg{width:56px;height:56px;stroke:#fff;fill:none;stroke-width:1.8}
.pfs-ph.has svg{display:none}
.pfs-ph.has::after{content:'';position:absolute;right:4px;bottom:4px;width:40px;height:40px;border-radius:50%;background:var(--coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h4l2-3h6l2 3h4v12H3z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") center/22px no-repeat;border:3px solid var(--sheet)}
.pfs-rm{margin:-10px 0 14px!important;font-weight:400!important}
.pfs-btns{display:block;margin-top:14px}
.pfs-btns .btn{width:100%;background:var(--coral)!important;color:#fff!important;border:0!important;border-radius:999px!important;box-shadow:none!important;min-height:52px;letter-spacing:.08em;font-weight:400}
.pfs-btns .ghost,.pfs-cnt,.pfs-card>label[for]{display:none!important}
.pfs-card .fld{margin-top:16px}
#pBio{margin-top:6px;font-size:13px;color:var(--mute);text-align:center;max-width:100%;word-break:break-word}
#pBio:empty{display:none}

/* ===== tombol, toggle, kartu: sedikit lebih flat di font mono ===== */
.btn:not(.tg *),.ghost:not(.tg *),.mini:not(.tg *),.go:not(.tg *),.halt:not(.tg *){font-weight:700}
.tgl i{border:2px solid #111!important;background:var(--card,#fff)}
.tgl input:checked+i{background:var(--acc)!important}
.tgl i::after{background:#111!important;box-shadow:none!important}
html.dark .tgl i{border-color:#000!important}

/* ===== navigasi bawah gaya pil kuning ===== */
@media(max-width:780px){
  html body #app>aside,html body #app aside{left:0!important;right:0!important;bottom:0!important;width:100%!important;max-width:none!important;height:auto!important;padding:10px 6px calc(8px + env(safe-area-inset-bottom,0px))!important;gap:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:var(--navbg)!important;z-index:20}
  html body #app aside .navind{display:none!important}
  html body #app aside .nav{display:flex!important;flex-direction:column!important;align-items:center!important;gap:5px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;font-weight:400!important;color:var(--ink)!important}
  html body #app aside .nav .i{width:64px;height:32px;border-radius:999px;display:grid!important;place-items:center;font-size:22px!important;transition:background .2s,transform .2s!important}
  html body #app aside .nav.on .i{background:var(--acc);color:#111;transform:none!important;animation:none!important}
  html body #app aside .nav.on .i svg{stroke:#111!important}
  html body #app aside .nav span{font-size:12px!important;letter-spacing:.02em!important;color:var(--ink)!important;line-height:1.1}
  html body #app aside .nav.on span{font-weight:700}
  main{padding-bottom:calc(var(--navh) + 24px + env(safe-area-inset-bottom,0px))!important}
}
@media(min-width:781px){
  aside .nav{border:0!important;box-shadow:none!important}
  aside .nav.on{background:var(--acc)!important;color:#111!important}
  aside .nav.on .i svg,aside .nav.on span{color:#111!important;stroke:#111!important}
}

/* ===== toast: nempel kiri-kanan di atas nav bawah, tanpa radius ===== */
html body #toast{position:fixed!important;left:0!important;right:0!important;bottom:calc(var(--navh) + env(safe-area-inset-bottom,0px))!important;width:100%!important;max-width:none!important;transform:none!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#000!important;color:#fff!important;padding:18px 20px!important;display:flex;align-items:center;z-index:900;opacity:0;pointer-events:none;translate:0 100%;transition:opacity .2s,translate .25s cubic-bezier(.2,.8,.2,1)}
html body #toast.on{opacity:1;translate:0 0;animation:none!important;pointer-events:auto}
html body #toast.out{opacity:0;animation:none!important}
html body #toast .ti,html body #toast .tp{display:none!important}
html body #toast .tt{color:#fff!important;font-size:15px;font-weight:400;letter-spacing:.03em}
@media(min-width:781px){html body #toast{bottom:0!important}}
html.dark body #toast{background:#f6efd8!important}
html.dark body #toast .tt{color:#111!important}

/* ===== kartu musik ===== */

/* ===== MODE RINGKAS (body.compact) ===== */
body.compact #vSet .st{gap:8px}
body.compact #vSet .st-c{padding:9px 14px!important;gap:12px!important;border-radius:16px!important;box-shadow:3px 3px 0 var(--sd)!important;border-width:2px!important}
body.compact #vSet .st-i{width:24px;height:24px;font-size:20px}
body.compact #vSet .st-t{gap:1px}
body.compact #vSet .st-t b{font-size:14.5px}
body.compact #vSet .st-t small{font-size:11px;line-height:1.3}
body.compact #vSet .st-l{margin:8px 0 -2px 6px;font-size:10.5px}
body.compact #vSet .st-pf{padding-bottom:12px;border-radius:18px;border-width:2px}
body.compact #vSet .st-bn{height:84px}
body.compact #vSet .st-av{margin-top:-34px!important}
body.compact #vSet .st-av .av{width:68px;height:68px;font-size:28px}
body.compact #vSet .st-nm{margin-top:8px}
body.compact #vSet .st-nm b{font-size:17px}
body.compact #vSet .st-btn,body.compact #vSet .st-pf .pw-up{height:40px;margin-top:8px;font-size:13px}
body.compact .panel,body.compact .step,body.compact .row,body.compact .sc,body.compact .card{padding:10px 12px!important}
body.compact #flowList{gap:8px}
body.compact #flowList>.row{padding:10px!important;gap:8px}
body.compact .bar{margin:8px 0}
body.compact .tb{padding-top:6px!important;padding-bottom:6px!important}
body.compact .btn,body.compact .ghost{min-height:38px!important}
body.compact input:not(.tg *),body.compact textarea:not(.tg *){padding:9px 12px!important}
body.compact label:not(.tg *){margin:8px 0 3px}
body.compact h2{font-size:18px}
body.compact #app aside .nav .i{height:26px}
body.compact #log{font-size:11.5px;line-height:1.5}

/* ===== TEMA GELAP: semua permukaan putih jadi satu palet ===== */
html.dark .sg,html.dark .seg2,html.dark .seg,html.dark .pcard,html.dark #aiRoot .axtabs,html.dark #aiRoot .axh,html.dark #aiRoot .axf,html.dark #aiRoot .axib,html.dark #aiRoot .axc,html.dark #aiRoot .axr.a .axb,html.dark #aiRoot .axlive .alp,html.dark #aiRoot .axlive .als i,html.dark #aiRoot .axlive .alm span,html.dark .tgfsbar .l,html.dark .tgl i,html.dark .chip,html.dark .st-c,html.dark .st-pf,html.dark .st-btn.x{background:var(--card)!important;color:var(--ink)!important}
html.dark #aiRoot .axm{background-color:var(--paper);background-image:radial-gradient(rgba(255,255,255,.07) 1.3px,transparent 1.4px)}
html.dark #aiRoot .axf.on{background:#3a3418!important}
html.dark #aiRoot .axr.err .axb{background:#3a1d1d!important}
html.dark body{background-image:radial-gradient(rgba(255,255,255,.05) 1.4px,transparent 1.5px)!important}
html.dark .btn,html.dark .nav.on .i,html.dark .seg button.on,html.dark .seg2 .th,html.dark .tag,html.dark .ui-opt.on i,html.dark .accr.on,html.dark .st-bi:active,html.dark #flowList>.row>div:last-child button:first-child,html.dark #aiRoot .axr.u .axb,html.dark #aiRoot .axfi,html.dark #aiRoot .axbg.up,html.dark #aiRoot .axtabs button.on,html.dark .mply .mcov{color:#111!important}
html.dark .btn *,html.dark .seg button.on *,html.dark .seg2 .th *,html.dark #aiRoot .axtabs button.on *,html.dark #aiRoot .axfi *,html.dark .mply .mcov *{color:#111!important;stroke:#111}
html.dark .ghost,html.dark .mini,html.dark .pill,html.dark .row.glass,html.dark .sc,html.dark .panel,html.dark .card,html.dark .sheet,html.dark .tile,html.dark .chrow{background:var(--card)!important;color:var(--ink)!important}
html.dark .tb,html.dark #app main .tb{background:#000!important}
html.dark .tb *,html.dark .tb b{color:var(--acc)}
html.dark #splash,html.dark .act{background:var(--paper)!important}
html.dark #vSet .st-av .av{border-color:#000;color:#ff5a6a}
html.dark code:not(.tg *),html.dark .mono:not(.tg *):not(#log):not(.srow *):not(.edc *):not(input):not(textarea){background:#000}
html body .ui-b.ghost:not(.tg *),html body .ui-b.main:not(.tg *),html body .ui-b.danger:not(.tg *),html body .pfs-btns .btn:not(.tg *){box-shadow:none!important;transform:none!important;border-radius:999px!important}
html body .ui-b.ghost:not(.tg *){background:transparent!important;border:1.5px solid var(--fb)!important}
html body .ui-b.main:not(.tg *),html body .ui-b.danger:not(.tg *){background:var(--coral)!important;color:#fff!important;border:0!important}
html.dark body .pfs-card input:not(.tg *),html.dark body .pfs-card textarea:not(.tg *):not(.edc *),html.dark body .ui-dlg .ui-in{background:transparent!important;border:1.5px solid var(--fb)!important;color:var(--ink)!important}
html.dark body .pfs-card input:focus:not(.tg *),html.dark body .pfs-card textarea:focus:not(.tg *):not(.edc *){border-color:var(--coral)!important}

/* ===== terminal: tombol power di bawah (gaya panel Pterodactyl), clear = ikon di dalam console ===== */
#vTerm .term{margin-top:12px}
#vTerm #log{height:max(260px,calc(100svh - 340px))}
.thead{align-items:center}
.thead .tclr{margin-left:auto;width:34px;height:34px;padding:0!important;display:grid;place-items:center;background:transparent!important;border:0!important;box-shadow:none!important;color:#bbb!important;border-radius:8px!important;min-height:0}
.thead .tclr .i{font-size:19px;margin:0}
.thead .tclr:active{background:rgba(255,255,255,.12)!important;transform:none!important}
.tpow{position:sticky;bottom:calc(var(--navh) + env(safe-area-inset-bottom,0px) + 12px);display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;z-index:6}
.tpow button{min-height:52px;font-size:15px;letter-spacing:.06em}
@media(min-width:781px){.tpow{bottom:14px;max-width:420px}}

/* splash & gerbang: teks terbaca di tema gelap */
html.dark #splash,html.dark .act,html.dark #splash *,html.dark .act *{--stx:#f6efd8;--smu:rgba(246,239,216,.72)}
html.dark #splash,html.dark #splash h1,html.dark #splash p,html.dark #splash span,html.dark #splash li,html.dark #splash small,html.dark #splash .sp-ah{color:var(--ink)!important}
html.dark #splash .sp-tag,html.dark #splash #spT,html.dark #splash li{color:var(--mute)!important}
html.dark #splash .sp-chip{color:#111!important}
html.dark .act h2,html.dark .act p,html.dark .act li,html.dark .act label,html.dark .act b{color:var(--ink)!important}

/* ===== v3: terminal rapi (tanpa scroll ganda), bottom sheet Tambah item datar ===== */
#vTerm>h2,#vTerm>.sub{display:none}
#vTerm:not(.hide){display:flex;flex-direction:column;height:calc(100svh - var(--tbh,96px) - var(--navh) - env(safe-area-inset-bottom,0px) - 56px);min-height:300px}
html:has(#vTerm:not(.hide)),html:has(#vTerm:not(.hide)) body{overflow:hidden;overscroll-behavior:none}
@media(min-width:781px){#vTerm:not(.hide){height:calc(100svh - var(--tbh,96px) - 60px)}}
html body #vTerm .term{flex:1;min-height:0;margin:0;display:flex;flex-direction:column;overflow:hidden;background:#0e0d09!important;border:0!important;border-radius:16px!important;box-shadow:none!important}
html body #vTerm .thead{flex:none;display:flex;align-items:center;gap:8px;padding:6px 8px 6px 16px;border-bottom:1px solid rgba(255,255,255,.1)!important}
html body #vTerm .thead>i{display:none}
html body #vTerm .thead .mono{margin:0!important;padding:0!important;background:transparent!important;color:#9a947c!important;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
html body #vTerm #log{flex:1;height:auto!important;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;padding:12px 16px;font-size:12.5px;line-height:1.6;color:#efe8cf}
html body #vTerm .tpow{position:static;flex:none;margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:none}
html body .tpow button:not(.tg *){min-height:52px;border:0!important;border-radius:999px!important;box-shadow:none!important;font-size:15px;letter-spacing:.08em;font-weight:700;transform:none!important}
html body .tpow .go:not(.tg *){background:var(--acc)!important;color:#111!important}
html body .tpow .halt:not(.tg *){background:var(--coral)!important;color:#fff!important}
html body .tpow button:disabled:not(.tg *){opacity:.35}
html body .tpow button:active:not(:disabled){opacity:.85}

#drawer{z-index:600!important;background:rgba(0,0,0,.5)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html body #drawer .sheet{position:absolute!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;width:auto!important;max-width:640px;margin:0 auto;height:auto!important;max-height:68dvh!important;padding:30px 16px calc(14px + env(safe-area-inset-bottom,0px))!important;background:var(--sheet)!important;border:0!important;border-radius:28px 28px 0 0!important;box-shadow:none!important}
#drawer .sheet::before{content:'';position:absolute;top:10px;left:50%;width:76px;height:7px;margin-left:-38px;border-radius:99px;background:#d4d4d4}
html.dark #drawer .sheet::before{background:#4a4533}
#drawer .sheet>div:first-child{margin-bottom:12px!important}
#drawer .sheet>div:first-child b{font-size:19px}
html body #dclose:not(.tg *){border:1.5px solid var(--fb)!important;border-radius:999px!important;box-shadow:none!important;background:transparent!important;color:var(--ink)!important;padding:6px 16px!important;min-height:0;font-weight:400}
html body #drawer .tile:not(.tg *){border:1.5px solid var(--fb)!important;border-radius:14px!important;box-shadow:none!important;background:transparent!important;transform:none!important}
html body #drawer .tile:active:not(.tg *){background:rgba(127,127,127,.15)!important}
#drawer .tile .i{color:var(--ink)!important}
#drawer .tile .i svg{stroke:currentColor!important}
#drawer .ch{color:var(--mute);letter-spacing:.2em;font-size:12px}
@media(min-width:901px){html body #drawer .sheet{max-height:72dvh!important}}

/* ===== v4: jarak terminal dari header ===== */
#vTerm:not(.hide){margin-top:14px;height:calc(100svh - var(--tbh,96px) - var(--navh) - env(safe-area-inset-bottom,0px) - 72px)}
@media(min-width:781px){#vTerm:not(.hide){height:calc(100svh - var(--tbh,96px) - 76px)}}
html.dark .mply .mcov{color:inherit}
#vSet .st-t small{word-break:normal!important;overflow-wrap:anywhere}

/* ===== v5: switch rapi (knob tepat di tengah) + toast pas di atas nav ===== */
html body .tgl{position:relative;display:block;flex:none;width:48px!important;height:28px!important;margin:0!important}
html body .tgl input{position:absolute;inset:0;width:100%!important;height:100%!important;margin:0!important;padding:0!important;opacity:0;z-index:2;cursor:pointer;border:0!important;box-shadow:none!important}
html body .tgl i{position:absolute;inset:0;box-sizing:border-box;border:2px solid #111!important;border-radius:999px!important;background:#fff!important;box-shadow:none!important;transition:background .2s}
html body .tgl i::after{content:'';position:absolute;top:50%;left:4px;width:16px;height:16px;margin:0;border-radius:50%;background:#111!important;box-shadow:none!important;transform:translate(0,-50%);transition:transform .2s cubic-bezier(.3,.9,.3,1)}
html body .tgl input:checked+i{background:var(--acc)!important}
html body .tgl input:checked+i::after{transform:translate(20px,-50%)}
html.dark body .tgl i{background:var(--card2)!important;border-color:var(--fb)!important}
html.dark body .tgl i::after{background:var(--fb)!important}
html.dark body .tgl input:checked+i{background:var(--acc)!important;border-color:var(--acc)!important}
html.dark body .tgl input:checked+i::after{background:#111!important}
@media(max-width:780px){html body #toast{bottom:var(--navfull,calc(var(--navh) + env(safe-area-inset-bottom,0px)))!important}}

/* ===== v6: terminal dikunci antara header dan nav (HP), tidak ikut posisi scroll halaman ===== */
@media(max-width:780px){
  html body #vTerm:not(.hide){position:fixed!important;left:12px;right:12px;top:var(--vtop,150px);bottom:var(--vbot,100px);height:auto!important;min-height:0!important;margin:0!important;z-index:1}
  html:has(#vTerm:not(.hide)) main{padding-bottom:0!important}
}

/* ===== v7: logo apa pun rasio gambarnya mengisi kotak (bukan pita kecil) ===== */
.sp-logo,.ab-logo,.mlogo{position:relative;overflow:hidden}
.sp-logo img,.ab-logo img,.mlogo img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover!important;display:block}

/* ===== v8: toast lebih ramping, animasi pop (bukan slide); tanpa nav bawah otomatis nempel ke dasar layar ===== */
html body #toast{transform-origin:50% 100%!important;translate:none!important;transform:scaleY(.55)!important;opacity:0;padding:10px 18px!important;min-height:0!important;line-height:1.3;transition:opacity .16s ease,transform .34s cubic-bezier(.34,1.5,.64,1)!important}
html body #toast.on{opacity:1;transform:scaleY(1)!important}
html body #toast.out{opacity:0;transform:scaleY(.8)!important;transition:opacity .16s ease,transform .16s ease!important}
html body #toast .tt{font-size:13.5px!important;letter-spacing:.02em;opacity:0;transition:opacity .2s ease .09s}
html body #toast.on .tt{opacity:1}
html.nonav body #toast{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))!important}

/* ===== sheet Tema 3D Premium ===== */
.pfs-card.t3{max-height:84dvh;overflow-y:auto;overscroll-behavior:contain;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))!important}
.t3-note{display:flex;gap:12px;align-items:center;padding:12px 14px;margin:0 0 14px;border:1.5px solid var(--fb);border-radius:14px;font-size:13.5px;line-height:1.45}
.t3-note svg{width:22px;height:22px;flex:none;stroke:var(--coral);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.t3r{display:flex;align-items:center;gap:14px;width:100%;padding:12px 4px;text-align:left;background:transparent!important;border:0!important;border-bottom:1px solid rgba(127,127,127,.22)!important;border-radius:0!important;box-shadow:none!important;color:var(--ink)!important;min-height:0}
.t3r:last-child{border-bottom:0!important}
.t3r:active{background:rgba(127,127,127,.12)!important;transform:none!important}
.t3pv{position:relative;width:72px;height:52px;border-radius:14px;flex:none;overflow:hidden;background:var(--p);box-shadow:inset 0 0 0 1.5px rgba(127,127,127,.35)}
.t3pv i{position:absolute;left:8px;right:8px;top:8px;height:26px;border-radius:8px;background:var(--c);box-shadow:inset 0 2px 0 rgba(255,255,255,.28),0 4px 0 rgba(0,0,0,.35)}
.t3pv b{position:absolute;left:14px;top:15px;width:26px;height:7px;border-radius:99px;background:var(--a);box-shadow:0 2px 0 rgba(0,0,0,.3)}
.t3pv u{position:absolute;left:8px;right:8px;bottom:6px;height:6px;border-radius:99px;background:var(--a);opacity:.9;text-decoration:none}
.t3t{flex:1;min-width:0}
.t3t b{display:block;font-size:16px;font-weight:700}
.t3t small{display:block;font-size:12.5px;color:var(--mute);line-height:1.35;margin-top:2px}
.t3st{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:50%}
.t3st svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.t3st.on{background:var(--coral);color:#fff}
.t3st.lock{color:var(--ink)}

/* toast selalu di atas sheet/dialog */
html body #toast{z-index:5000!important}

/* ===== v9: halaman masuk di tengah layar, tanpa langkah 1/2, kartu datar ===== */
html body #login:not(.hide){display:flex!important;align-items:center!important;justify-content:center!important;min-height:100dvh;padding:max(20px,env(safe-area-inset-top)) 18px max(20px,env(safe-area-inset-bottom))!important}
html body #login .lgwrap{margin:auto;width:100%;max-width:420px;gap:22px}
html body #login .lgbrand{flex-direction:column;gap:12px;text-align:center}
html body #login .lgbrand .logo{width:64px;height:64px;border-radius:20px;font-size:30px}
html body #login .lgbrand b{font-size:24px;letter-spacing:.06em}
html body #login .lgcard{background:var(--sheet)!important;border:0!important;border-radius:28px!important;box-shadow:0 24px 50px -24px rgba(0,0,0,.45)!important;padding:26px 22px 22px!important}
html body #login .lgh{text-align:center;font-size:21px;margin:0 0 6px}
html body #login .lgcard .sub{text-align:center;font-weight:400;color:var(--mute);margin:0 0 14px;font-size:13.5px}
html body #login .fld{margin-top:18px}
html body #login .fld>input{padding:15px 16px!important;font-size:15px}
html body #login input.otp{text-align:center;font-size:26px;letter-spacing:.5em;padding:16px 10px 16px 20px!important}
html body #login .lgtm{display:inline-block;margin-left:4px;font-weight:700;color:var(--coral)}
html body #login .btn.big{min-height:52px;border-radius:999px!important;box-shadow:none!important;font-size:15px;letter-spacing:.08em;margin-top:22px!important;background:var(--acc)!important;color:#111!important;border:0!important}
html body #login .btn.big:active{opacity:.85;transform:none!important}
html body #login .ghost{min-height:48px;border-radius:999px!important;box-shadow:none!important;background:transparent!important;border:1.5px solid var(--fb)!important;color:var(--ink)!important}
html body #login .lgrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
html body #login .lgrow .ghost{margin:0!important}
html body #login .lgcard .msg{text-align:center;margin:14px 0 0;font-weight:400}
html body #login .lgcard .hint{text-align:center;color:var(--mute);font-weight:400;margin-top:10px}
html body #login .fld>input{font-size:15px!important;line-height:1.3!important}

/* ===== v10: label gaya Material 3: di dalam kolom saat kosong, naik ke garis saat diklik atau terisi ===== */
.fld>label{position:absolute!important;left:14px!important;top:50%!important;transform:translateY(-50%);padding:0 5px;margin:0!important;background:transparent;font-size:15px!important;color:var(--mute)!important;z-index:1;pointer-events:none;line-height:1.2;white-space:nowrap;transition:top .18s ease,font-size .18s ease,color .18s ease,background-color .18s ease,left .18s ease}
.fld:has(>textarea)>label{top:24px!important}
.fld:focus-within>label,.fld:has(>input:not(:placeholder-shown))>label,.fld:has(>textarea:not(:placeholder-shown))>label{top:0!important;left:12px!important;font-size:12.5px!important;background:var(--sheet)}
.fld:focus-within>label{color:var(--coral)!important}
.fld>input::placeholder,.fld>textarea::placeholder{color:transparent!important}
.fld>input:focus::placeholder,.fld>textarea:focus::placeholder{color:var(--mute)!important;opacity:.85}

/* v10b: menang atas aturan label/placeholder lama */
html body .fld>label,html body #login .fld>label{text-transform:none!important;font-weight:400!important;letter-spacing:.02em!important;font-size:15px!important}
html body .fld:focus-within>label,html body .fld:has(>input:not(:placeholder-shown))>label,html body .fld:has(>textarea:not(:placeholder-shown))>label,html body #login .fld:focus-within>label,html body #login .fld:has(>input:not(:placeholder-shown))>label{font-size:12.5px!important;color:var(--mute)!important}
html body .fld:focus-within>label,html body #login .fld:focus-within>label{color:var(--coral)!important}
html body .fld>input::placeholder,html body #login .fld>input::placeholder,html body .fld>textarea::placeholder{color:transparent!important;opacity:1!important;-webkit-text-fill-color:transparent!important}
html body .fld>input:focus::placeholder,html body #login .fld>input:focus::placeholder,html body .fld>textarea:focus::placeholder{color:var(--mute)!important;-webkit-text-fill-color:var(--mute)!important;opacity:.85!important}
html body #login .fld>input{height:58px!important;box-sizing:border-box!important}html body #login input.otp{height:64px!important}

/* ===== ringkasan statistik terminal (tanpa geser samping); detail lengkap di sheet ===== */
.tstats{flex:none;margin-top:12px}
.tsm{display:block;width:100%;text-align:left;padding:10px 12px 12px;border-radius:16px;background:var(--card,#fff);border:1.5px solid var(--fb);color:var(--ink);box-shadow:none}
html:not(.dark) .tsm{background:#fff}
.tsm:active{opacity:.85;transform:none}
.tsh{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.tsh b{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);font-weight:400}
.tsh i{font-style:normal;font-size:12px;color:var(--coral)}
.tsg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.tsg>span{display:grid;gap:1px;text-align:center;min-width:0}
.tsg>span+span{border-left:1px solid rgba(127,127,127,.28)}
.tsg b{font-size:16px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tsg small{font-size:10.5px;color:var(--mute)}
.tsg .bad b{color:var(--coral)}
.str{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 4px;border-bottom:1px solid rgba(127,127,127,.22)}
.str:last-child{border-bottom:0}
.str span b{display:block;font-size:15px;font-weight:700}
.str small{display:block;font-size:12.5px;color:var(--mute);margin-top:2px}
.str .v{font-size:19px;font-weight:700;white-space:nowrap}
.str.bad .v{color:var(--coral)}

/* ===== v11: label Nama/ID/Token identik (hapus beda font .mono) ===== */
html body #login .fld>input,html body #login .fld>input.mono{font-family:var(--mf)!important;font-size:15px!important;letter-spacing:0!important;font-weight:400!important;text-indent:0!important;padding:0 16px!important;line-height:58px}
html body #login .fld>input.otp{letter-spacing:.5em!important;font-size:26px!important;line-height:64px;padding:0 10px 0 20px!important}
html body .fld>label,html body #login .fld>label{left:11px!important}
html body .fld:focus-within>label,html body .fld:has(>input:not(:placeholder-shown))>label,html body .fld:has(>textarea:not(:placeholder-shown))>label,html body #login .fld:focus-within>label,html body #login .fld:has(>input:not(:placeholder-shown))>label{left:12px!important}

/* ===== v12: stroke input Nama di tema gelap (samakan dengan Telegram ID & Bot Token) ===== */
/* Nama tidak punya class .mono, jadi jatuh ke border --fb (krem) sementara input lain memakai --bd. Paksa sama. */
html.dark body #login .fld>input:not(.tg *),html.dark body #login .fld>input:focus:not(.tg *){border-color:var(--bd)!important}
/* warna isi sama persis dengan Telegram ID & Bot Token (.mono): --card2, saat fokus --card3 */
html.dark body #login .fld>input:not(.tg *){background:var(--card2)!important}
html.dark body #login .fld>input:focus:not(.tg *){background:var(--card3)!important}

/* ===== v13: semua kolom isian lain memakai gaya label melayang seperti kolom Nama (Telegram ID tidak diubah) ===== */
.panel .fld,.sc .fld,#drawer .fld{--sheet:var(--card,#fff);margin-top:18px}
.bte .fld{--sheet:var(--card,#fff);margin-top:0}
#valBox .fld{margin-top:20px}
html body .panel .fld>input,html body .sc .fld>input,html body #drawer .fld>input{height:54px!important;box-sizing:border-box!important;width:100%;padding:0 16px!important;font-size:15px!important;line-height:normal!important;letter-spacing:0!important}
html body .panel .fld>textarea,html body .sc .fld>textarea{box-sizing:border-box!important;width:100%;padding:18px 16px 12px!important;font-size:15px!important;letter-spacing:0!important}
html body .bte .fld>input{height:42px!important;box-sizing:border-box!important;width:100%;padding:0 10px!important;font-size:13px!important;line-height:normal!important}
html body .bte .fld>label{font-size:13px!important}
html body .bte .fld:focus-within>label,html body .bte .fld:has(>input:not(:placeholder-shown))>label{font-size:12px!important}
html.dark body :is(.panel,.sc,#drawer,.bte,.pfs-card) .fld>:is(input,textarea):not(.tg *){border-color:var(--bd)!important;background:var(--card2)!important}
html.dark body :is(.panel,.sc,#drawer,.bte,.pfs-card) .fld>:is(input,textarea):focus:not(.tg *){border-color:var(--coral)!important;background:var(--card3)!important}

/* ===== v14: Statistik + tombol Start/Stop jadi satu blok kontrol yang nyambung ===== */
html body #vTerm .tctl{flex:none;margin-top:12px;border:1.5px solid var(--fb);border-radius:16px;overflow:hidden;background:var(--card,#fff);transition:border-color .25s}
html:not(.dark) body #vTerm .tctl{background:#fff}
html body #vTerm .tctl.on{border-color:var(--ok,#1f9d68)}
html body #vTerm .tctl .tstats{margin:0}
html body #vTerm .tctl .tsm{border:0;border-radius:0;background:transparent!important;padding:12px 14px 14px}
html body #vTerm .tctl .tpow{margin:0;gap:0;border-top:1.5px solid var(--fb);transition:border-color .25s}
html body #vTerm .tctl.on .tpow{border-top-color:var(--ok,#1f9d68)}
html body #vTerm .tctl .tpow button:not(.tg *){border-radius:0!important;min-height:54px;box-shadow:none!important;transform:none!important}
html body #vTerm .tctl .tpow .halt:not(.tg *){border-left:1.5px solid var(--fb)!important}
html body #vTerm .tctl.on .tpow .halt:not(.tg *){border-left-color:var(--ok,#1f9d68)!important}

/* ===== v15: blok kontrol terminal (Statistik + Start/Stop) satu gaya, tanpa stroke ===== */
html body #vTerm .tctl,html body #vTerm .tctl.on{border:0!important;box-shadow:none!important;border-radius:20px!important;padding:12px;display:grid;gap:12px;overflow:visible;background:var(--card,#fff)!important}
html body #vTerm .tctl .tsm{padding:2px 2px 0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:none!important}
html body #vTerm .tctl .tsh{margin-bottom:10px}
html body #vTerm .tctl .tsg{gap:8px}
html body #vTerm .tctl .tsg>span,html body #vTerm .tctl .tsg>span+span{border:0!important;padding:10px 4px 9px;border-radius:14px;background:rgba(127,127,127,.13)}
html body #vTerm .tctl.on .tsg [data-k="up"] b{color:var(--ok,#1f9d68)}
html body #vTerm .tctl .tpow,html body #vTerm .tctl.on .tpow{margin:0;gap:10px;border:0!important}
html body #vTerm .tctl .tpow button:not(.tg *),html body #vTerm .tctl .tpow .halt:not(.tg *),html body #vTerm .tctl.on .tpow .halt:not(.tg *){border:0!important;border-radius:14px!important;min-height:50px;box-shadow:none!important;transform:none!important;display:flex;align-items:center;justify-content:center;font-size:14.5px;letter-spacing:.06em}
html body #vTerm .tctl .tpow .go:not(.tg *){background:var(--acc)!important;color:#111!important}
html body #vTerm .tctl .tpow .halt:not(.tg *){background:var(--coral)!important;color:#fff!important}
html body #vTerm .tctl .tpow button:disabled:not(.tg *){opacity:.3}
html body #vTerm .tctl .tpow button:active:not(:disabled){opacity:.85}

/* ===== loader lingkaran di tengah (buka tab / buka alur) ===== */
#pgLoad{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:rgba(0,0,0,.28);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s,visibility 0s .18s}
#pgLoad.on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .18s}
#pgLoad svg{width:54px;height:54px;animation:pgSpin 1s linear infinite}
#pgLoad circle{fill:none;stroke-width:4.5;stroke-linecap:round}
#pgLoad .tk{stroke:rgba(255,255,255,.28)}
#pgLoad .ar{stroke:var(--acc,#ffd83d);stroke-dasharray:90 126;animation:pgDash 1.4s ease-in-out infinite}
@keyframes pgSpin{to{transform:rotate(360deg)}}
@keyframes pgDash{0%{stroke-dasharray:12 126}50%{stroke-dasharray:80 126}100%{stroke-dasharray:12 126}}


/* ===== TELEBUILD: logo gambar (bukan ikon petir) ===== */
.logo{position:relative;overflow:hidden}
.logo img.tbl{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}

/* ===== toast progres lingkaran (impor / unduh) ===== */
html body #toast .tr{position:relative;display:inline-grid;place-items:center;flex:none;width:32px;height:32px;margin-right:0}
html body #toast .tr svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
html body #toast .tr .b{fill:none;stroke:rgba(255,255,255,.22);stroke-width:3.4}
html body #toast .tr .f{fill:none;stroke:var(--acc,#ffd83d);stroke-width:3.4;stroke-linecap:round;transition:stroke-dashoffset .22s ease}
html body #toast .tr b{position:relative;font-size:9px;font-weight:700;letter-spacing:0;color:#fff}
html body #toast.ind .tr svg{animation:trSpin .9s linear infinite}
@keyframes trSpin{to{transform:rotate(270deg)}}
html body #toast.prog{display:flex!important;align-items:center}
html body #toast.prog .tt{opacity:1}
html.dark body #toast .tr .b{stroke:rgba(0,0,0,.2)}
html.dark body #toast .tr .f{stroke:#111}
html.dark body #toast .tr b{color:#111}


/* ===== centang biru rapat dengan nama ===== */
html body .gl-nm,html body .gp-nm{gap:0!important}
html body .gl-nm .vbadge,html body .gp-nm .vbadge,html body .gl-nm svg.vbadge{margin-left:5px!important;width:18px;height:18px;vertical-align:middle}
html body .gp-nm .gl-nm .vbadge{width:22px;height:22px}