/* ============================================================
   APRESIA — sistem desain: malam, krem, dan satu tinta emas.

   Dirombak dari tema terang. Alasannya bukan selera: Apresia dipakai saat
   orang sedang siaran malam, overlay-nya hidup di atas video gelap, dan
   papan perolehannya tampil di layar panggung. Tema gelap bukan gaya di sini,
   melainkan keadaan tempat produk ini benar-benar dipakai.

   Tiga tinta, dan hanya tiga:

   • KREM — seluruh teks. Bukan putih: putih murni di atas latar gelap terbaca
     menyilaukan dan membuat huruf tampak lebih tipis daripada seharusnya.
   • EMAS — uang. Dipakai sangat hemat; begitu ia muncul di mana-mana, ia
     berhenti berarti apa-apa. Aturannya: emas hanya untuk angka rupiah,
     tindakan utama, dan penanda bagian.
   • UNGU — merek. Dinaikkan terangnya dari ungu terang lama, karena warna
     yang pas di atas kertas putih akan tenggelam di atas malam.

   Nama token lama dipetakan ke tinta baru di bawah, jadi lima puluh halaman
   aplikasi ikut berganti tanpa satu pun disentuh.
   ============================================================ */
:root{
  /* ---- dasar: violet-hitam hangat, bukan abu netral ---- */
  --malam:#0C0918; --malam-2:#120F22; --malam-3:#1A1430; --malam-4:#241C42;
  --tepi:#2A2148; --tepi-2:#3A2F63; --tepi-3:#4C3F80;

  /* ---- tinta ---- */
  --krem:#F3EDE1; --krem-2:#BDB3CE; --krem-3:#8A80A3;

  /* ---- aksen ---- */
  --emas:#E9BC55; --emas-2:#C89A33; --emas-mud:#2E2312;
  --ungu:#9B8BFF; --ungu-mud:#241D4C;
  --hijau:#4FD494; --hijau-mud:#123528;
  --merah:#F47C7C; --merah-mud:#3A1B1F;
  --kuningT:#E9B44C; --kuning-mud:#33280F;

  /* ---- tinta gambar: palet untuk ilustrasi tangan di _gambar.blade.php ----
     Gambarnya dulu tinta gelap di atas kertas terang. Di tema malam urutannya
     dibalik: garisnya jadi krem, kertasnya jadi bidang gelap yang terangkat.
     Warna aksennya dinaikkan terangnya supaya tetap terbaca di atas malam. */
  --tinta:var(--krem); --tinta-3:var(--krem-3);
  --kertas:var(--malam-3); --kertas-2:var(--malam-4); --kertas-3:var(--tepi);
  --biru:#6C74E8; --biru-mud:var(--tepi);
  --jingga:#E2894E; --kuning:var(--emas);

  /* ---- nama lama dipetakan ke tinta baru ----
     Inilah yang membuat seluruh aplikasi ikut berganti: satu berkas yang
     menentukan rupanya, bukan lima puluh. */
  --bg:var(--malam); --shell:var(--malam-2); --card:var(--malam-3);
  --card2:var(--malam-4); --raised:var(--malam-4);
  --line:var(--tepi); --line2:var(--tepi-2); --line3:var(--tepi-3);
  --txt:var(--krem); --mut:var(--krem-2); --dim:var(--krem-3);
  --cy:var(--ungu); --cy-deep:var(--ungu-mud);
  --gn:var(--hijau); --am:var(--kuningT); --rd:var(--merah);
  --pk:#F07BB5; --vi:#B49BFF;
  --field:#171229; --inset:#171229;
  --grad:linear-gradient(135deg,#8B7BF0,#5D8BE8);

  /* ---- huruf ----
     Tiga peran, tiga rupa. Archivo memikul judul; Instrument Serif miring
     membawa separuh kalimat judul — pergantian rupa di tengah kalimat itulah
     yang membuat judulnya punya suara, bukan sekadar besar. Plus Jakarta Sans
     (Tokotype, dibuat untuk identitas Jakarta) memikul teks isi. */
  --sans:"Plus Jakarta Sans","Segoe UI",Arial,sans-serif;
  --tampil:"Archivo","Plus Jakarta Sans",Arial,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;

  --r-sm:9px; --r:13px; --r-lg:18px;
  /* Di atas latar gelap, bayangan hampir tak terlihat. Yang memisahkan
     bidang di sini cahaya tepi, bukan bayangan. */
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 18px 40px -18px rgba(0,0,0,.7);
  --sh-3:0 28px 60px -24px rgba(0,0,0,.8);
  --kilau:inset 0 1px 0 rgba(255,255,255,.055);
  --ring:0 0 0 3px rgba(155,139,255,.35);
  /* Permukaan buram: bilah navigasi yang mengambang di atas isi. */
  --kaca:rgba(18,15,34,.86);
  --sorot:rgba(255,255,255,.05);
  --lapis-tinta:linear-gradient(180deg,rgba(36,28,66,.55),rgba(12,9,24,0));
  --lam-1:rgba(155,139,255,.16);
  --lam-2:rgba(233,188,85,.09);
  /* Mengikat kendali bawaan peramban — kotak centang, bilah gulir,
     pemilih tanggal — ke tema yang dipilih, bukan ke setelan sistem. */
  /* Emas punya dua pekerjaan yang tidak bisa dirangkap satu nilai:
     sebagai TEKS ia harus cukup gelap untuk terbaca, sebagai BIDANG ia
     harus cukup terang untuk terlihat emas. Di tema malam keduanya
     kebetulan sama; di tema terang tidak, dan di situlah pasangan ini
     mulai berguna. */
  --emas-isi:var(--emas); --emas-isi-2:#F3CB72; --emas-atas:var(--malam);
  color-scheme:dark;
}

/* ============================================================
   TEMA TERANG

   Hanya token dasar yang ditulis ulang di sini. Seluruh nama turunan
   (--bg, --card, --txt, --tinta, --kertas, dan kawan-kawan) sudah menunjuk
   ke token dasar lewat var(), jadi mereka ikut berpindah sendiri. Itulah
   sebabnya blok ini pendek: temanya ditentukan di satu tempat, bukan lima
   puluh halaman.

   Satu keputusan yang tidak bisa dibalik begitu saja: emas. Emas malam
   (#E9BC55) di atas kertas putih hanya punya kontras 1,8:1 — terbaca sebagai
   kuning pudar, bukan sebagai uang. Jadi di tema terang emasnya diturunkan
   nadanya sampai gelap, dan perannya tetap sama persis: hanya untuk angka
   rupiah, tindakan utama, dan penanda bagian.

   Temanya dipasang sebagai atribut, bukan lewat prefers-color-scheme saja,
   supaya pilihan orangnya menang atas setelan sistem. Berkas ini tidak
   memilih; skrip kecil di <head> yang memutuskan sebelum cat pertama.
   ============================================================ */
:root[data-theme="light"]{
  /* ---- dasar ---- */
  --malam:#F5F6FB; --malam-2:#FFFFFF; --malam-3:#FFFFFF; --malam-4:#F1F3F9;
  --tepi:#E7EAF3; --tepi-2:#D9DEEC; --tepi-3:#C2C9DE;

  /* ---- tinta ---- */
  /* Nada paling redup dinaikkan dari #79829C: ia dipakai untuk metadata
     mono 10-11px, dan pada ukuran itu 3,8:1 di atas kertas putih terlalu
     tipis untuk dibaca. #646C88 membawanya ke 5,2:1. */
  --krem:#161A2C; --krem-2:#5A6480; --krem-3:#646C88;

  /* ---- aksen ---- */
  --emas:#8C6209; --emas-2:#6B4A05; --emas-mud:#FBF1D9;
  --ungu:#5B4DE0; --ungu-mud:#EEEBFC;
  --hijau:#047857; --hijau-mud:#DCFCE7;
  --merah:#DC2626; --merah-mud:#FEE2E2;
  --kuningT:#B45309; --kuning-mud:#FEF3C7;

  /* ---- tinta gambar: kembali ke urutan aslinya, tinta gelap di atas kertas ---- */
  --biru:#4F7FE8; --biru-mud:#E7EEFC;
  --jingga:#7C3AED;

  /* ---- nama lama yang ditulis harfiah ---- */
  --pk:#DB2777; --vi:#7C3AED;
  --field:#FBFCFE; --inset:#F4F6FB;
  --grad:linear-gradient(135deg,#7C3AED,#4F7FE8);

  /* Di atas kertas, yang memisahkan bidang adalah bayangan — bukan cahaya
     tepi. Jadi kilaunya dimatikan dan bayangannya dihidupkan kembali. */
  --sh-1:0 1px 2px rgba(20,26,48,.06), 0 1px 1px rgba(20,26,48,.04);
  --sh-2:0 14px 34px -14px rgba(24,30,64,.22);
  --sh-3:0 22px 48px -22px rgba(24,30,64,.30);
  --kilau:none;
  --ring:0 0 0 3px rgba(91,77,224,.22);
  --kaca:rgba(255,255,255,.86);
  --sorot:rgba(22,26,44,.05);
  --lapis-tinta:linear-gradient(180deg,rgba(124,58,237,.07),rgba(245,246,251,0));
  --lam-1:rgba(124,58,237,.10);
  --lam-2:rgba(140,98,9,.06);
  --emas-isi:#C8961F; --emas-isi-2:#B5851A; --emas-atas:#1A1206;
  color-scheme:light;
}

/* ============================================================
   PERMUKAAN YANG SELALU GELAP

   Apa pun yang menumpang di atas video siaran tidak boleh ikut berganti
   tema: overlay OBS, papan perolehan suara di layar panggung, dan layar
   siaran di peragaan halaman muka. Kalau ikut terang, teksnya hilang di
   siaran orang — dan yang menonton siaran itu tidak pernah memilih tema.

   Caranya sama seperti tema: token dasarnya dipatok di sini, dan seluruh
   isinya ikut tanpa satu pun selektor anak perlu ditulis ulang.
   ============================================================ */
.layar-gelap{
  --malam:#0C0918; --malam-2:#120F22; --malam-3:#1A1430; --malam-4:#241C42;
  --tepi:#2A2148; --tepi-2:#3A2F63; --tepi-3:#4C3F80;
  --krem:#F3EDE1; --krem-2:#BDB3CE; --krem-3:#8A80A3;
  --emas:#E9BC55; --emas-2:#C89A33; --ungu:#9B8BFF;
  --hijau:#4FD494; --merah:#F47C7C;
  --txt:var(--krem); --mut:var(--krem-2); --dim:var(--krem-3);
  --bg:var(--malam); --card:var(--malam-3); --card2:var(--malam-4); --raised:var(--malam-4);
  --line:var(--tepi); --line2:var(--tepi-2); --line3:var(--tepi-3);
  --cy:var(--ungu); --gn:var(--hijau); --rd:var(--merah);
  color:var(--krem);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--malam);color:var(--krem);font-family:var(--sans);
  font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--emas-isi);color:var(--emas-atas)}
a{color:var(--ungu);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
button{font-family:var(--sans)}
input[type=checkbox],input[type=radio],progress{accent-color:var(--cy)}
.mono{font-family:var(--mono)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
/* Angka rupiah selalu emas. Satu aturan, berlaku di mana pun ia muncul. */
.rp{color:var(--emas);font-family:var(--mono);font-variant-numeric:tabular-nums}
:is(a,button,[role="button"],input,select,textarea,.switch):focus-visible{
  outline:none;box-shadow:var(--ring);border-radius:8px
}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001s !important;transition-duration:.001s !important;scroll-behavior:auto !important} }

/* icon SVG */
.ic{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-3px}
.ic.lg{width:22px;height:22px}
.ic.sm{width:15px;height:15px}

@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rise{animation:rise .32s ease both}

/* Penanda kecil: pil lembut mengikuti tema. */
.cap{
  display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:99px;
  background:var(--ungu-mud);border:1px solid var(--tepi-2);color:var(--vi);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;font-weight:600;
}

/* ============ APP CHROME (topbar) ============ */
.appbar{
  display:flex;align-items:center;gap:16px;height:56px;padding:0 20px;
  background:var(--kaca);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60;
}
.brandlink{display:flex;align-items:center;gap:9px;color:var(--txt);font-weight:800;font-size:15px;letter-spacing:-.01em}
.brandlink:hover{text-decoration:none}
.logo{width:30px;height:30px;display:flex;align-items:center;justify-content:center;flex:none}
.logo svg{width:100%;height:100%;display:block}
.crumb{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--dim);min-width:0;white-space:nowrap;overflow:hidden}
.crumb b{color:var(--mut);font-weight:600}
.crumb .sep{opacity:.5}
.abar-sp{flex:1}
.gsearch{display:flex;align-items:center;gap:8px;background:var(--field);border:1px solid var(--line);border-radius:10px;padding:7px 12px;min-width:230px;color:var(--dim);font-size:12.5px;cursor:text}
.gsearch:hover{border-color:var(--line2)}
/* Kotak carinya kini borang sungguhan, jadi input-nya perlu dibuat menyatu
   dengan kotaknya alih-alih membawa bingkai bawaan peramban. */
.gsearch input{flex:1;min-width:0;background:none;border:0;outline:none;padding:0;
  font-family:var(--sans);font-size:12.5px;color:var(--txt)}
.gsearch input::placeholder{color:var(--dim)}
.gsearch:focus-within{border-color:var(--cy)}
.gsearch kbd{margin-left:auto;font-family:var(--mono);font-size:9.5px;border:1px solid var(--line2);border-radius:5px;padding:1px 5px;color:var(--dim)}
.iconbtn{position:relative;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;border:1px solid transparent;background:none;color:var(--mut);cursor:pointer;transition:.18s}
.iconbtn:hover{background:var(--card);color:var(--txt);border-color:var(--line)}
.iconbtn .dot{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--rd);border:2px solid var(--shell)}
.avabtn{display:flex;align-items:center;gap:9px;background:none;border:1px solid transparent;border-radius:99px;padding:3px 10px 3px 3px;cursor:pointer;color:var(--txt);transition:.18s}
.avabtn:hover{background:var(--card);border-color:var(--line)}
.avabtn .nm{font-size:12.5px;font-weight:700}
.avabtn .rl{display:block;font-size:9.5px;color:var(--dim);font-weight:500;text-align:left}
.ava{width:32px;height:32px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:var(--malam);flex:none}
.ava.lg{width:64px;height:64px;font-size:22px}
.ava.md{width:44px;height:44px;font-size:15px}
.ava.biz{background:linear-gradient(135deg,#34D399,#0E7490)}
/* dropdown */
.dd{position:relative}
.dd-menu{
  position:absolute;right:0;top:calc(100% + 8px);min-width:230px;background:var(--card2);
  border:1px solid var(--line2);border-radius:14px;box-shadow:var(--sh-2);padding:6px;z-index:80;
  display:none;
}
.dd.open .dd-menu{display:block;animation:rise .18s ease}
.dd-menu .mi{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;color:var(--txt);font-size:12.5px;font-weight:600;padding:9px 11px;border-radius:9px;cursor:pointer}
.dd-menu .mi:hover{background:var(--raised);text-decoration:none}
.dd-menu .mi .ic{color:var(--mut)}
.dd-menu .mi.danger,.dd-menu .mi.danger .ic{color:var(--rd)}
.dd-menu .sep{height:1px;background:var(--line);margin:5px 8px}
.dd-menu .hd{padding:9px 11px 7px;font-size:11px;color:var(--dim)}
.dd-menu .hd b{display:block;color:var(--txt);font-size:12.5px}
.notif{display:flex;gap:10px;padding:10px 11px;border-radius:9px;font-size:12px;color:var(--mut);align-items:flex-start}
.notif:hover{background:var(--raised)}
.notif .ic{margin-top:1px}
.notif b{color:var(--txt);display:block;font-size:12px}
.notif time{display:block;margin-top:3px;font-size:10px;color:var(--dim)}

/* env chip kecil (pengganti pill MOCKUP yang mencolok) */
.env{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;color:var(--am);border:1px solid var(--tepi-2);background:var(--kuning-mud);border-radius:99px;padding:2px 8px;font-weight:600}

/* ============ SIDEBAR (Merchant Center) ============ */
.app{display:flex;min-height:100vh}
aside.nav{width:238px;flex:none;background:var(--shell);border-right:1px solid var(--line);padding:14px 12px;position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 16px}
.brand .logo{width:34px;height:34px;border-radius:10px}
.brand b{font-size:15.5px;letter-spacing:-.01em;line-height:1.15}
.brand small{display:block;font-size:10px;color:var(--dim);font-weight:600}
.nav .grp{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--dim);margin:14px 10px 6px}
.nav button.item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;color:var(--mut);padding:9px 11px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;transition:.15s}
.nav button.item .ic{color:var(--dim);transition:.15s}
.nav button.item:hover{background:var(--card);color:var(--txt)}
.nav button.item:hover .ic{color:var(--mut)}
.nav button.item.on{background:var(--ungu-mud);color:var(--vi);box-shadow:inset 2px 0 0 var(--ungu)}
.nav button.item.on .ic{color:var(--cy)}
.nav .navfoot{margin-top:auto;padding:12px 8px 4px;border-top:1px solid var(--line)}
main.stage{flex:1;min-width:0;background:var(--bg)}
.screen{display:none;padding:26px 30px 70px;max-width:1180px;margin:0 auto}
.screen.on{display:block;animation:rise .3s ease}
.wrap{max-width:1180px;margin:0 auto;padding:26px 30px 70px}

/* page head */
.phead{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.phead .grow{flex:1;min-width:240px}
h1.h{font-size:22px;font-weight:800;letter-spacing:-.015em;margin:0 0 4px;text-wrap:balance}
.sub{color:var(--mut);font-size:12.5px;margin:0}
.sub+*{margin-top:16px}

/* ============ PRIMITIVES ============ */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--sh-1),var(--kilau)}
.card.tight{padding:14px}
.card.pop{background:var(--card2);border-color:var(--line2)}
h3.sec{font-size:14px;font-weight:800;margin:0 0 12px;display:flex;align-items:center;gap:8px}
h3.sec .ic{color:var(--cy)}
.lbl{font-family:var(--mono);font-size:9px;letter-spacing:.15em;color:var(--dim);text-transform:uppercase;margin:0 0 8px}
.row{display:flex;gap:14px;flex-wrap:wrap}
.grow{flex:1;min-width:260px}
.hr{height:1px;background:var(--line);margin:14px 0;border:0}
.muted{color:var(--mut)} .dim{color:var(--dim)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;
  border:1px solid var(--line2);background:var(--card2);color:var(--txt);
  padding:9px 16px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;
  transition:transform .16s cubic-bezier(.2,.9,.3,1.1),border-color .18s,background .18s,box-shadow .18s;
}
.btn:hover{border-color:var(--line3);background:var(--raised);text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn.pri{background:var(--emas-isi);border-color:transparent;color:var(--emas-atas);font-weight:800}
.btn.pri:hover{background:var(--emas-isi-2)}
.btn.ok{background:var(--gn);border-color:transparent;color:var(--malam);font-weight:800}
.btn.ghost{background:none;border-color:transparent}
.btn.ghost:hover{background:var(--card);border-color:var(--line)}
.btn.sm{padding:6px 12px;font-size:11.5px;border-radius:8px;gap:6px}
.btn.sm .ic{width:14px;height:14px}
.btn.danger{color:var(--rd);border-color:var(--merah-mud)}
.btn.danger:hover{background:var(--merah-mud);border-color:var(--rd)}
.btn.blok{width:100%}

.badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:9.5px;padding:2.5px 9px;border-radius:99px;font-weight:600;letter-spacing:.03em;vertical-align:1px}
.badge i{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}
.b-cy{background:var(--ungu-mud);color:var(--vi)} .b-gn{background:var(--hijau-mud);color:var(--gn)}
.b-am{background:var(--kuning-mud);color:var(--am)} .b-rd{background:var(--merah-mud);color:var(--rd)}
.b-mut{background:var(--raised);color:var(--mut)} .b-pk{background:#3A1A2C;color:var(--pk)}
.b-vi{background:var(--ungu-mud);color:var(--vi)}

input.in,textarea.in,select.in{width:100%;background:var(--field);border:1px solid var(--line2);border-radius:10px;color:var(--txt);padding:10px 13px;font-size:13px;font-family:var(--sans);outline:none;transition:.15s}
input.in::placeholder,textarea.in::placeholder{color:var(--dim)}
input.in:hover,textarea.in:hover{border-color:var(--line3)}
input.in:focus,textarea.in:focus,select.in:focus{border-color:var(--cy);box-shadow:var(--ring)}
.field{margin-bottom:13px}
.field label{display:block;font-size:11.5px;font-weight:700;color:var(--mut);margin-bottom:6px}
.check{display:flex;gap:9px;align-items:flex-start;font-size:11.5px;color:var(--mut);cursor:pointer}
.check input{accent-color:var(--cy);margin-top:2px}

/* Sakelar ini hampir selalu diikuti label teks, tapi kotaknya dipatok 38px
   dan rel-nya dipasang inset:0 — jadi teksnya jatuh DI LUAR kotak dan menimpa
   sakelar di sebelahnya. Tidak terlihat selama labelnya pendek; begitu label
   Inggris yang lebih panjang masuk, tiga sakelar bertumpuk jadi satu gumpalan.
   Sekarang kotaknya ikut lebar labelnya, dan relnya jadi anak berukuran tetap. */
.switch{position:relative;display:inline-flex;align-items:center;gap:9px;
  min-height:21px;flex:none;cursor:pointer;font-size:12.5px;color:var(--mut)}
.switch input{position:absolute;left:0;top:0;opacity:0;width:38px;height:21px;margin:0;cursor:pointer}
.switch i{position:relative;flex:none;width:38px;height:21px;background:var(--tepi-2);
  border-radius:99px;transition:.18s;pointer-events:none}
.switch i:before{content:"";position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:var(--krem);transition:.18s}
.switch input:checked + i{background:var(--emas-isi)}
.switch input:checked + i:before{left:20px;background:var(--malam)}

.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(90px);z-index:300;opacity:0;background:var(--malam-4);border:1px solid var(--line2);color:var(--txt);border-radius:12px;padding:11px 18px;font-size:12.5px;font-weight:600;transition:.28s cubic-bezier(.2,.9,.3,1.2);max-width:min(560px,90vw);box-shadow:var(--sh-2);display:flex;gap:9px;align-items:center}
.toast .ic{color:var(--gn)}
.toast.on{transform:translateX(-50%) translateY(0);opacity:1}

.modal-back{position:fixed;inset:0;background:rgba(28,34,64,.38);backdrop-filter:blur(5px);z-index:100;display:none;align-items:center;justify-content:center;padding:20px}
.modal-back.on{display:flex}
.modal{background:var(--card2);border:1px solid var(--line2);border-radius:var(--r-lg);max-width:430px;width:100%;padding:24px;position:relative;box-shadow:var(--sh-2);animation:rise .22s ease}
.modal .x{position:absolute;top:12px;right:12px}

table.t{border-collapse:collapse;width:100%;font-size:12.5px}
table.t th{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--dim);text-align:left;padding:9px 10px;border-bottom:1px solid var(--line2);text-transform:uppercase;white-space:nowrap}
table.t td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
table.t tbody tr{transition:.12s}
table.t tbody tr:hover{background:var(--malam-4)}
table.t tr:last-child td{border-bottom:0}
.tblwrap{overflow-x:auto}

.kv{display:flex;justify-content:space-between;gap:12px;font-size:12px;padding:6px 0;border-bottom:1px dashed var(--line)}
.kv:last-child{border-bottom:0}
.kv b{font-family:var(--mono);font-weight:600;text-align:right}

.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:12px;margin-bottom:14px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh-1);transition:.18s}
.stat:hover{border-color:var(--line2);box-shadow:var(--sh-2);transform:translateY(-2px)}
.stat .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.stat .l{font-size:11px;color:var(--mut);font-weight:600}
.stat .icw{width:30px;height:30px;border-radius:9px;background:var(--cy-deep);display:flex;align-items:center;justify-content:center}
.stat .icw .ic{width:15px;height:15px;color:var(--cy)}
.stat .v{font-family:var(--mono);font-size:21px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.stat .d{font-family:var(--mono);font-size:10px;color:var(--gn);margin-top:3px;display:flex;align-items:center;gap:4px}
.stat .d .ic{width:11px;height:11px}


/* ============ HALAMAN PUBLIK (bersama) ============
   Dipakai halaman muka, jelajah, dan papan suara langsung. */
.lnav{
  display:flex;align-items:center;gap:22px;height:64px;
  padding:0 max(20px,calc(50vw - 620px));background:var(--kaca);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:60;
}
.lnav a.nl{color:var(--mut);font-size:13px;font-weight:600;white-space:nowrap}
.lnav a.nl:hover{color:var(--txt);text-decoration:none}
.lnav .nl.on{color:var(--cy);font-weight:700}

/* Kartu jelajah: satu petak per survey / event / program undian. */
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.fcard{
  position:relative;display:block;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:18px;color:var(--txt);box-shadow:var(--sh-1);
  transition:transform .2s cubic-bezier(.2,.9,.3,1),border-color .2s,box-shadow .2s;
}
.fcard:hover{transform:translateY(-3px);border-color:var(--line2);box-shadow:var(--sh-2);text-decoration:none}
.fcard .icw{
  width:38px;height:38px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;margin-bottom:12px;
}
.fcard b{display:block;font-size:14.5px;line-height:1.35;margin-bottom:6px;padding-right:26px}
.fcard p{margin:0;font-size:12.5px;line-height:1.6;color:var(--mut)}
/* Panah sudut: diam sampai kartunya disentuh, lalu bergeser sedikit keluar. */
.fcard .go{
  position:absolute;top:16px;right:16px;color:var(--dim);
  transition:transform .2s cubic-bezier(.2,.9,.3,1.3),color .2s;
}
.fcard:hover .go{color:var(--cy);transform:translate(3px,-3px)}

/* ============ DONASI PUBLIK ============ */
.creator-head{display:flex;gap:16px;align-items:center;margin-bottom:20px;flex-wrap:wrap}
.qa-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px}
.qa{background:var(--field);border:1px solid var(--line2);border-radius:10px;padding:10px 4px;text-align:center;font-weight:800;cursor:pointer;font-size:13px;transition:.15s}
.qa small{display:block;font-weight:600;color:var(--dim);font-size:9px}
.qa:hover{border-color:var(--line3)}
.qa.on{border-color:var(--emas);background:var(--emas-mud);color:var(--emas);box-shadow:inset 0 0 0 1px var(--emas)}
.pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pay{display:flex;align-items:center;gap:10px;background:var(--field);border:1px solid var(--line2);border-radius:11px;padding:10px 12px;cursor:pointer;transition:.15s}
.pay:hover{border-color:var(--line3)}
.pay.on{border-color:var(--ungu);background:var(--ungu-mud);box-shadow:inset 0 0 0 1px var(--ungu)}
.pay .pico{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:800;flex:none;color:var(--malam);font-family:var(--mono)}
.pay b{font-size:12.5px}
.pay small{display:block;color:var(--dim);font-size:10px}
.sumline{display:flex;justify-content:space-between;font-size:12.5px;color:var(--mut);padding:3px 0}
.sumline.tot{color:var(--txt);font-weight:800;font-size:15px;border-top:1px dashed var(--line2);margin-top:6px;padding-top:10px}
.gift-note{display:flex;gap:9px;align-items:center;background:var(--hijau-mud);border:1px solid var(--gn);border-radius:10px;padding:9px 13px;font-size:11.5px;color:var(--gn);margin-top:12px}
.feed{max-height:330px;overflow-y:auto}
.feed .f{display:flex;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.feed .f:last-child{border-bottom:0}
.feed .amt{font-family:var(--mono);font-weight:600;color:var(--gn);white-space:nowrap;font-size:12.5px}
.feed .who b{font-size:13px}
.feed .who p{margin:2px 0 0;color:var(--mut);font-size:12px}
.livechip{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:var(--rd);background:var(--merah-mud);border:1px solid var(--rd);border-radius:99px;padding:5px 12px}
.livechip .dot{width:7px;height:7px;border-radius:50%;background:var(--rd);animation:pulse 1.4s infinite}

/* Kotak QR sengaja tetap terang. Pemindai butuh modul gelap di atas dasar
   terang; membalikkannya membuat QR-nya tidak terbaca sebagian alat. */
.qrbox{width:196px;height:196px;background:#FFFFFF;border-radius:14px;margin:16px auto;padding:12px;display:grid;grid-template-columns:repeat(21,1fr);grid-template-rows:repeat(21,1fr);gap:1px;box-shadow:var(--sh-2)}
.qrbox i{background:#fff;border-radius:1px}
.qrbox i.d{background:#0B1220}
.paywait{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--am);font-size:12px;font-weight:600}
.paywait .dot{width:8px;height:8px;border-radius:50%;background:var(--am);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.25}}
.paid-ok{display:none;text-align:center}
.paid-ok .okc{width:56px;height:56px;border-radius:50%;background:rgba(52,211,153,.15);display:flex;align-items:center;justify-content:center;margin:4px auto 10px}
.paid-ok .okc .ic{width:28px;height:28px;color:var(--gn)}

/* ============ OVERLAY OBS ============ */
/* Token tampilan overlay. Nilai di sini adalah BAWAAN; kalau kreator sudah
   menyetel temanya, halaman overlay menimpanya lewat style di #obsStage.
   Warnanya harfiah dan tidak ikut tema terang/gelap aplikasi: overlay selalu
   digubah di atas gambar siaran, bukan di atas halaman Apresia. */
.obs{--ov-font:"Plus Jakarta Sans",Arial,sans-serif;--ov-teks:#F3EDE1;--ov-teks-2:#BDB3CE;
  --ov-aksen:#9B8BFF;--ov-panel:rgba(12,9,24,.88);--ov-tepi:#3A2F63;--ov-radius:12px;
  --ov-skala:1;--ov-bayang:0 1px 3px rgba(0,0,0,.85), 0 0 10px rgba(0,0,0,.55);
  font-family:var(--ov-font);
  position:relative;color:var(--ov-teks);border-radius:var(--r-lg);overflow:hidden;border:1px solid #3A2F63;height:520px;background:linear-gradient(160deg,#1A1430 0%,#0C0918 45%,#150F28 100%);box-shadow:var(--sh-2)}
.obs .game{position:absolute;inset:0;background:radial-gradient(circle at 70% 30%, rgba(129,140,248,.10), transparent 45%),radial-gradient(circle at 20% 80%, rgba(244,114,182,.08), transparent 40%)}
.obs .hud{position:absolute;left:14px;top:12px;font-family:var(--mono);font-size:10px;color:#8A80A3}
.obs .cam{position:absolute;right:16px;bottom:16px;width:150px;height:96px;border-radius:10px;border:1px solid #3A2F63;background:linear-gradient(135deg,#241C42,#150F28);display:flex;align-items:center;justify-content:center;color:#8A80A3;font-size:11px;gap:6px}
.ov-alert{position:absolute;left:50%;top:52px;transform:translateX(-50%) scale(.85);opacity:0;transition:.3s cubic-bezier(.2,.9,.3,1.25);z-index:5;background:var(--ov-panel);border:1.5px solid var(--ov-aksen);border-radius:calc(var(--ov-radius) + 4px);padding:16px 26px;text-align:center;min-width:330px;box-shadow:0 0 44px color-mix(in srgb, var(--ov-aksen) 35%, transparent)}
.ov-alert.show{opacity:1;transform:translateX(-50%) scale(1)}
.ov-alert .who{font-size:calc(17px * var(--ov-skala));font-weight:800;color:var(--ov-teks);text-shadow:var(--ov-bayang)}
.ov-alert .who span{color:var(--ov-aksen)}
.ov-alert .msg{color:var(--ov-teks-2);font-size:calc(12.5px * var(--ov-skala));margin-top:4px;text-shadow:var(--ov-bayang)}
.ov-alert .tts{margin-top:8px;font-family:var(--mono);font-size:9.5px;color:var(--gn)}
.ov-milestone{position:absolute;left:14px;bottom:64px;width:290px;background:rgba(12,9,24,.9);border:1px solid var(--line);border-radius:12px;padding:10px 12px;backdrop-filter:blur(4px)}
/* Di dalam panggung, tampilannya ikut tema milik kreator. Di luar panggung —
   halaman donasi publik memakai kelas yang sama untuk bilah milestone-nya —
   token --ov-* tidak ada, dan aturan yang memakainya akan batal diam-diam:
   bilah progresnya sempat menjadi transparan sepenuhnya karena ini. */
.obs .ov-milestone{background:var(--ov-panel);border-color:var(--ov-tepi);
  border-radius:var(--ov-radius);color:var(--ov-teks)}
.ov-milestone .bar{height:9px;border-radius:99px;background:var(--inset);margin-top:7px;overflow:hidden}
.obs .ov-milestone .bar{background:var(--ov-tepi)}
.ov-milestone .bar i{display:block;height:100%;width:68%;background:var(--grad);border-radius:99px}
.obs .ov-milestone .bar i{background:var(--ov-aksen)}
.ov-run{position:absolute;left:0;right:0;bottom:0;background:var(--ov-panel);border-top:1px solid var(--ov-tepi);padding:6px 0;overflow:hidden;white-space:nowrap}
.ov-run .track{display:inline-block;padding-left:100%;animation:marq 18s linear infinite;font-size:calc(11px * var(--ov-skala));color:var(--ov-aksen);text-shadow:var(--ov-bayang)}
@keyframes marq{to{transform:translateX(-100%)}}
.ov-lead{position:absolute;right:16px;top:52px;width:190px;background:rgba(12,9,24,.9);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:11.5px;backdrop-filter:blur(4px)}
.obs .ov-lead{background:var(--ov-panel);border-color:var(--ov-tepi);
  border-radius:var(--ov-radius);font-size:calc(11.5px * var(--ov-skala))}
.ov-lead .r{display:flex;justify-content:space-between;padding:3px 0;color:var(--mut)}
.obs .ov-lead .r{color:var(--ov-teks-2)}
.ov-lead .r b{color:var(--txt);font-weight:600}
.obs .ov-lead .r b{color:var(--ov-teks)}
.ov-media{position:absolute;left:50%;top:170px;transform:translateX(-50%);width:300px;display:none;background:#000;border:1.5px solid var(--ov-aksen);border-radius:var(--ov-radius);overflow:hidden;z-index:4;box-shadow:0 0 40px color-mix(in srgb, var(--ov-aksen) 28%, transparent)}
.ov-media .vid{height:150px;background:linear-gradient(135deg,#26192E,#0D1524);display:flex;align-items:center;justify-content:center}
.ov-media .vid .ic{width:40px;height:40px;color:var(--pk)}
.ov-media .cap{padding:7px 10px;font-size:calc(10.5px * var(--ov-skala));color:var(--ov-teks-2);background:var(--ov-panel)}
.obs-tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;align-items:center}
.conn{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;color:var(--gn)}
.conn .dot{width:7px;height:7px;border-radius:50%;background:var(--gn);animation:pulse 1.6s infinite}

.obs .lbl{color:var(--ov-teks-2);opacity:.75;font-family:var(--ov-font)}
.obs .muted,.obs .dim{color:var(--ov-teks-2)}

/* ============ DASHBOARD ============ */
.blur{filter:blur(9px)}
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.wg{background:var(--field);border:1px solid var(--line2);border-radius:12px;padding:13px;transition:.15s}
.wg:hover{border-color:var(--line3)}
.wg .top2{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}
.wg .wt{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700}
.wg .wt .ic{width:15px;height:15px;color:var(--cy)}
.wg small{color:var(--dim);font-size:10px;display:block;line-height:1.45}
svg.chart{width:100%;height:150px;display:block}
.codebox{font-family:var(--mono);font-size:11px;color:var(--mut);background:var(--inset);border:1px solid var(--line2);border-radius:9px;padding:9px 12px;overflow-x:auto;white-space:nowrap}

/* ============ TABS / SURVEY ============ */
.tabs{display:flex;gap:2px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.tabs button{display:flex;align-items:center;gap:7px;background:none;border:0;border-bottom:2px solid transparent;color:var(--mut);font-weight:700;font-size:13px;padding:9px 15px;cursor:pointer;transition:.15s;margin-bottom:-1px}
.tabs button:hover{color:var(--txt)}
.tabs button.on{color:var(--cy);border-bottom-color:var(--cy)}
.tabpane{display:none}.tabpane.on{display:block;animation:rise .25s ease}
.q{background:var(--field);border:1px solid var(--line2);border-radius:12px;padding:13px 15px;margin-bottom:10px;display:flex;gap:12px;align-items:flex-start;transition:.15s}
.q:hover{border-color:var(--line3)}
.q .no{font-family:var(--mono);color:var(--dim);font-size:11px;padding-top:2px}
.q b{font-size:13px}
.q .meta{margin-top:6px;display:flex;gap:6px;flex-wrap:wrap}
.bar-row{display:flex;align-items:center;gap:10px;margin:8px 0;font-size:12px}
.bar-row .cap{width:130px;color:var(--mut)}
.bar-row .bar{flex:1;height:9px;background:var(--inset);border-radius:99px;overflow:hidden}
.bar-row .bar i{display:block;height:100%;background:var(--grad);border-radius:99px}
.bar-row .pv{font-family:var(--mono);font-size:11px;width:42px;text-align:right}

/* ============ VOTING ============ */
.kand{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.kd{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 14px;text-align:center;transition:.18s}
.kd:hover{border-color:var(--line2);transform:translateY(-2px)}
.kd .kava{width:58px;height:58px;border-radius:50%;margin:0 auto 9px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:19px;color:var(--malam);box-shadow:var(--sh-1)}
.kd .votes{font-family:var(--mono);font-size:12px;color:var(--cy);margin:4px 0 10px}
.vpk{display:flex;gap:8px;flex-wrap:wrap}
.vp{flex:1;min-width:100px;background:var(--field);border:1px solid var(--line2);border-radius:12px;padding:11px;text-align:center;cursor:pointer;transition:.15s}
.vp:hover{border-color:var(--line3)}
.vp.on{border-color:var(--ungu);background:var(--ungu-mud);box-shadow:inset 0 0 0 1px var(--ungu)}
.vp b{font-size:16px}
.vp small{display:block;color:var(--dim);font-size:10px}
.vp .pr{font-family:var(--mono);font-size:11px;color:var(--gn);margin-top:4px}
.cdown{font-family:var(--mono);color:var(--am);font-size:12px}

/* ============ UNDIAN ============ */
.steps{display:flex;overflow-x:auto;padding-bottom:6px}
.stp{flex:1;min-width:102px;text-align:center;position:relative;padding-top:6px}
.stp .cir{width:28px;height:28px;border-radius:50%;margin:0 auto 7px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;background:var(--inset);color:var(--dim);border:1px solid var(--line2);position:relative;z-index:1}
.stp .cir .ic{width:13px;height:13px}
.stp.done .cir{background:var(--hijau-mud);color:var(--gn);border-color:var(--gn)}
.stp.now .cir{background:var(--cy-deep);color:var(--cy);border-color:var(--cy);box-shadow:0 0 0 4px rgba(91,77,224,.14)}
.stp:not(:first-child):before{content:"";position:absolute;top:19px;left:-50%;width:100%;height:1.5px;background:var(--line2)}
.stp.done:before{background:var(--gn)}
.stp small{font-size:9.8px;color:var(--mut);display:block;line-height:1.3}
.kupon{display:flex;gap:8px;flex-wrap:wrap}
.kp{font-family:var(--mono);font-size:11px;background:var(--field);border:1px dashed var(--line3);border-radius:8px;padding:6px 11px;color:var(--cy)}
.hashbox{font-family:var(--mono);font-size:10.5px;color:var(--mut);background:var(--inset);border:1px solid var(--line2);border-radius:10px;padding:10px 12px;word-break:break-all}

/* ============ OPS ============ */
.alertrow{display:flex;gap:12px;align-items:flex-start;background:var(--field);border:1px solid var(--line2);border-radius:12px;padding:13px;margin-bottom:10px;transition:.15s}
.alertrow:hover{border-color:var(--line3)}
.alertrow .sev{width:4px;border-radius:99px;align-self:stretch;flex:none}

@media (max-width:880px){
  aside.nav{display:none}
  .screen,.wrap{padding:18px 14px 60px}
  .qa-grid{grid-template-columns:repeat(3,1fr)}
  .gsearch{display:none}
  .crumb{display:none}
}

/* link sidebar (Laravel) meniru button.item */
aside.nav a.item{display:flex;align-items:center;gap:10px;width:100%;color:var(--mut);padding:9px 11px;border-radius:10px;font-size:13px;font-weight:600;transition:.15s}
aside.nav a.item .ic{color:var(--dim);transition:.15s}
aside.nav a.item:hover{background:var(--card);color:var(--txt);text-decoration:none}
aside.nav a.item:hover .ic{color:var(--mut)}
aside.nav a.item.on{background:var(--ungu-mud);color:var(--vi);box-shadow:inset 2px 0 0 var(--ungu)}
aside.nav a.item.on .ic{color:var(--cy)}
.appbar form{display:flex}

/* ============================================================
   POLISH PASS — kedalaman, hierarki, dan detail interaksi
   ============================================================ */

/* --- scrollbar: tipis & gelap, tidak lagi batang putih --- */
*{scrollbar-width:thin;scrollbar-color:var(--tepi-3) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--tepi-2);border-radius:99px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--tepi-3);background-clip:content-box}

/* --- kartu: kedalaman lebih kaya + angkat halus saat hover --- */
.card{transition:border-color .18s, transform .18s, box-shadow .18s}
.card:hover{border-color:var(--line2)}
.stat{position:relative;overflow:hidden}
.stat::after{                       /* garis merek tipis di tepi atas */
  content:"";position:absolute;inset:0 0 auto;height:2px;
  background:var(--grad);opacity:.55
}
.stat:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}

/* --- angka besar: hierarki lebih tegas --- */
.stat .v{font-size:23px;letter-spacing:-.02em;line-height:1.15}
.stat .l{letter-spacing:.005em}
h1.h{letter-spacing:-.02em}

/* --- progress bar: nilai kecil tetap terbaca + glow --- */
.ov-milestone .bar{box-shadow:inset 0 1px 2px rgba(20,26,48,.10)}
.obs .ov-milestone .bar{box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.ov-milestone .bar i{min-width:8px;box-shadow:0 0 10px rgba(124,58,237,.35);transition:width .6s cubic-bezier(.2,.9,.3,1)}

/* --- tombol: kedalaman & umpan balik tekan --- */
.btn{position:relative}
.btn.pri{box-shadow:0 10px 26px -12px rgba(233,188,85,.45)}
.btn.pri:hover{box-shadow:0 14px 32px -12px rgba(233,188,85,.55)}
.btn.pri:active{box-shadow:0 4px 12px -8px rgba(233,188,85,.4)}
.btn:disabled,.btn[disabled]{opacity:.42;cursor:not-allowed;filter:grayscale(.35)}
.btn:disabled:hover,.btn[disabled]:hover{border-color:var(--line2);background:var(--card2);transform:none}

/* --- empty state --- */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  padding:30px 18px;text-align:center;color:var(--dim)}
.empty .ew{width:42px;height:42px;border-radius:13px;background:var(--inset);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center}
.empty .ew .ic{width:19px;height:19px;color:var(--line3)}
.empty b{color:var(--mut);font-size:13px;font-weight:700}
.empty p{margin:0;font-size:11.5px;max-width:34ch;line-height:1.5}

/* --- grafik area --- */
.chartwrap{position:relative}
.chartwrap .gline{stroke:var(--line);stroke-width:1;stroke-dasharray:3 5}
.chartwrap .axis{font-family:var(--mono);font-size:9px;fill:var(--dim)}
.chartwrap .dot{transition:r .15s}
.chartwrap:hover .dot{r:4.5}

/* --- tabel: kepala lengket saat digulir --- */
.tblwrap{border-radius:10px}
table.t thead th{position:sticky;top:0;background:var(--card);z-index:1}
table.t td .badge{vertical-align:0}

/* --- daftar transaksi: garis waktu halus --- */
.feed .f{position:relative;padding-left:2px}
.feed .amt{font-size:13px;letter-spacing:-.01em}

/* --- kandidat voting: peringkat & interaksi --- */
.kd{position:relative}
.kd .rank{position:absolute;top:10px;left:12px;font-family:var(--mono);font-size:10px;
  color:var(--dim);border:1px solid var(--line2);border-radius:99px;padding:1px 7px}
.kd.lead{border-color:var(--emas);box-shadow:0 0 0 3px var(--emas-mud)}
.kd.lead .rank{color:var(--am);border-color:rgba(251,191,36,.5)}

/* --- panel overlay: petunjuk saat belum ada event --- */
.ov-hint{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);text-align:center;
  color:var(--ov-teks-2);opacity:.75;font-size:calc(12px * var(--ov-skala));pointer-events:none;transition:.3s}
.ov-hint .ic{width:26px;height:26px;color:var(--ov-aksen);opacity:.7;margin-bottom:7px}
.obs.live .ov-hint{opacity:0}


/* --- ringkasan angka pada kartu saldo --- */
.moneybig{font-family:var(--mono);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* --- pemisah bagian --- */
.sechead{display:flex;align-items:center;gap:10px;margin:26px 0 14px}
.sechead h2{font-size:15px;font-weight:800;margin:0;letter-spacing:-.01em;white-space:nowrap}
.sechead .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}

/* kartu tidak dipaksa setinggi tetangganya saat isinya sedikit */
.row.start{align-items:flex-start}

/* ---- utilitas panel dalam (dipakai kotak URL overlay, cuplikan kode, ringkasan biaya) ---- */
.inset{background:var(--inset);border:1px solid var(--line);border-radius:10px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  background:var(--raised);border:1px solid var(--line);font-size:11px;font-weight:600;color:var(--mut)}
.chip.on{background:var(--cy-deep);border-color:#CFC7F8;color:var(--cy)}

/* baris pembuat pertanyaan / kandidat / hadiah */
.builder{border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px;background:var(--card2)}
.builder .bh{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.builder .bn{width:26px;height:26px;border-radius:8px;background:var(--cy-deep);color:var(--cy);
  display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}

/* Bilah progres mandiri — sebelumnya hanya ada versi bersarang di .bar-row dan .obs,
   sehingga pemakaian langsung (mis. progres survey) tampil tanpa gaya. */
.bar{height:9px;background:var(--inset);border-radius:99px;overflow:hidden;margin:5px 0}
.bar>i{display:block;height:100%;background:var(--grad);border-radius:99px;transition:width .35s ease}

/* Tautan navigasi publik yang sedang aktif */
.lnav .nl.on{color:var(--cy);font-weight:700}

/* ============ PAPAN PEROLEHAN SUARA LANGSUNG ============ */
.lb{display:flex;gap:13px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);
  transition:background .3s}
.lb:last-child{border-bottom:0}
.lb .pos{font-family:var(--mono);font-size:12px;color:var(--dim);min-width:30px;text-align:right}
.lb .lbtop{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.lb .nm{font-size:14px}
.lb .sc{margin-left:auto;font-size:12.5px;color:var(--mut);white-space:nowrap}
.lb.lead .pos{color:var(--am);font-weight:700}
.lb.lead .nm{color:var(--cy)}
.lb.lead .bar i{background:linear-gradient(90deg,#F59E0B,#7C3AED)}
.lb .bar{height:11px}

/* overlay siaran untuk papan suara — gelap, ringkas, siap ditumpangkan di video */
.vlive{font-family:var(--sans);color:#F3EDE1;padding:18px;max-width:520px}
.vlive .hd{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.vlive .hd b{font-size:15px;letter-spacing:-.01em}
.vlive .hd .tot{margin-left:auto;font-family:var(--mono);font-size:12px;color:#BDB3CE}
.vlive .row2{display:flex;gap:11px;align-items:center;padding:9px 11px;border-radius:12px;
  background:rgba(12,18,32,.72);border:1px solid rgba(255,255,255,.09);margin-bottom:8px;
  backdrop-filter:blur(6px)}
.vlive .row2.lead{border-color:rgba(245,158,11,.55);box-shadow:0 0 0 1px rgba(245,158,11,.25)}
.vlive .row2 .p{font-family:var(--mono);font-size:12px;color:#8A80A3;min-width:22px}
.vlive .row2 .n{font-size:13.5px;font-weight:700}
.vlive .row2 .v{margin-left:auto;font-family:var(--mono);font-size:12.5px;color:#BDB3CE}
.vlive .row2 .b{height:6px;background:rgba(255,255,255,.12);border-radius:99px;overflow:hidden;margin-top:5px}
.vlive .row2 .b i{display:block;height:100%;background:linear-gradient(90deg,#7C3AED,#4F7FE8);
  border-radius:99px;transition:width .5s ease}
.vlive .row2.lead .b i{background:linear-gradient(90deg,#F59E0B,#7C3AED)}

/* Kendali simulator pada halaman pembayaran. Menyatu dengan kartu, tetapi
   keterangannya tetap jelas agar tidak dikira pembayaran sungguhan. */
.simblok{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.simblok small{display:block;margin-top:9px;font-size:10.5px;color:var(--dim);
  line-height:1.55;text-align:center}
/* ── penyaji survey (SurveyJS v3) ───────────────────────────────────────────
   SurveyJS v3 menurunkan hampir seluruh temanya dari segelintir token akar,
   dan mendefinisikannya lewat :where() sehingga bobotnya nol. Jadi cukup
   menimpa akarnya di sini: ketika palet Apresia berubah, penyaji ikut berubah
   tanpa satu pun selektor komponen perlu disentuh.

   Penimpaan harus ikut mengenai .sd-root-modern, bukan pembungkusnya saja:
   penyaji menulis ulang token yang sama di elemen akarnya sendiri, dan nilai
   dari elemen yang lebih dalam selalu menang berapa pun bobot selektornya. */
.sjs-wrap,.sjs-wrap .sd-root-modern{
  --sjs2-color-project-brand-600:var(--cy);
  --sjs2-palette-gray-000:var(--card);
  --sjs2-palette-gray-100:var(--inset);
  --sjs2-palette-gray-150:var(--raised);
  --sjs2-palette-gray-200:var(--line);
  --sjs2-palette-gray-250:var(--line2);
  --sjs2-palette-gray-300:var(--line2);
  --sjs2-palette-gray-900:var(--txt);
  --sjs2-palette-red-600:var(--rd);
  --sjs2-palette-green-600:var(--gn);
  --sjs2-palette-yellow-600:var(--am);
  --sjs2-typography-font-family-text:var(--sans);
  --sjs2-typography-font-family-code:var(--mono);
  --sjs2-base-unit-radius:7px;

  /* nama token lama masih dibaca sebagian komponen warisan */
  --sjs-primary-backcolor:var(--cy);
  --sjs-primary-forecolor:#fff;
  --sjs-general-backcolor:var(--card);
  --sjs-general-forecolor:var(--txt);
  --sjs-border-default:var(--line2);
  --sjs-font-family:var(--sans);
}
/* Penyaji sudah berada di dalam kartu Apresia — latar dan bayangannya sendiri
   membuat halaman terlihat bertumpuk tanpa menambah kejelasan. */
.sjs-wrap .sd-root-modern{background:transparent}
.sjs-wrap .sd-container-modern__title{background:transparent;box-shadow:none;padding-left:0;padding-right:0}
.sjs-wrap .sd-body{padding-left:0;padding-right:0}
.sjs-wrap .sd-element--with-frame{box-shadow:none;border:1px solid var(--line)}
.sjs-wrap .sd-action-bar{padding-left:0;padding-right:0}
.sjs-wrap .sd-progress__bar{background:var(--grad)}

/* ═══════════════════════════ SAKELAR TEMA ═══════════════════════════ */
/* Disembunyikan secara bawaan dan hanya dibuka kalau JavaScript hidup —
   sakelar mati di layar lebih buruk daripada tidak ada sakelar. Dipakai
   sebagai kelas, bukan atribut, supaya bilah aplikasi yang baru disusun
   JavaScript belakangan pun ikut terbuka tanpa perlu dicatat. */
.tema-b{display:none}
html.js .tema-b{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:34px;height:34px;padding:0;border-radius:10px;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--mut);
  transition:color .2s,background .2s,border-color .2s;
}
.tema-b:hover{color:var(--txt);background:var(--sorot);border-color:var(--line2)}
.tema-b svg{
  width:17px;height:17px;stroke:currentColor;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
/* Yang tampil adalah tujuannya: di tema malam ditawarkan matahari. */
.tema-b .tema-ke-gelap{display:none}
:root[data-theme="light"] .tema-b .tema-ke-terang{display:none}
:root[data-theme="light"] .tema-b .tema-ke-gelap{display:block}

/* Halaman masuk dan daftar tidak punya bilah apa pun, jadi sakelarnya
   berdiri sendiri di pojok. */
.tema-b.pojok{position:fixed;top:18px;right:18px;z-index:80;background:var(--card)}

/* ═══════════════════════════ PEMILIH BAHASA ═══════════════════════════ */
.bhs{
  display:inline-flex;align-items:center;gap:2px;flex:none;
  padding:3px;border-radius:9px;border:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
}
.bhs a,.bhs .bhs-on{
  padding:4px 7px;border-radius:6px;line-height:1;text-decoration:none;
  transition:color .18s,background .18s;
}
.bhs a{color:var(--dim)}
.bhs a:hover{color:var(--txt);background:var(--sorot);text-decoration:none}
.bhs .bhs-on{color:var(--emas);background:var(--emas-mud);font-weight:700}

/* Halaman masuk & daftar tidak punya bilah apa pun, jadi pemilih bahasa dan
   sakelar temanya berdiri berdampingan di pojok. */
.auth-pilih{position:fixed;top:18px;right:18px;z-index:80;display:flex;align-items:center;gap:8px}

/* ---- Grafik transaksi (ringkasan merchant) ------------------------------
   Sakelar rentang + batang dua arah. Warnanya diambil dari token tema,
   bukan ditulis harfiah, supaya grafiknya ikut berganti saat tema ditukar —
   grafik lama di Studio masih memakai heksadesimal dan itulah sebabnya ia
   terlihat asing di tema terang. */
.segmen{display:inline-flex;gap:2px;padding:2px;background:var(--inset);
  border:1px solid var(--line);border-radius:99px}
.segmen .seg{border:0;background:none;color:var(--mut);font:inherit;font-size:11.5px;
  font-weight:600;padding:5px 12px;border-radius:99px;cursor:pointer;transition:.15s}
.segmen .seg:hover{color:var(--txt)}
/* Pil aktif memakai warna merek, bukan sekadar lapisan yang lebih terang:
   --card2 dan --inset hampir sama gelapnya di kedua tema, jadi segmen yang
   sedang dipilih praktis tak terlihat. */
.segmen .seg.on{background:var(--cy-deep);color:var(--cy)}
.segmen .seg:focus-visible{outline:none;box-shadow:var(--ring)}

.grafik-angka{display:flex;flex-wrap:wrap;gap:22px;margin:10px 0 12px}
.grafik-angka .lbl{display:block;margin-bottom:1px}
.grafik-angka b{font-size:15px;font-weight:600}

svg.grafik{width:100%;height:190px;display:block}
svg.grafik .gl{stroke:var(--line);stroke-width:1;stroke-dasharray:3 5}
svg.grafik .gl.nol{stroke:var(--line2);stroke-dasharray:none}
svg.grafik .masuk{fill:var(--gn)}
svg.grafik .keluar{fill:var(--rd)}
svg.grafik .sorot{fill:transparent}
svg.grafik .btg:hover .sorot{fill:var(--sorot)}
svg.grafik .btg:hover .masuk,svg.grafik .btg:hover .keluar{filter:brightness(1.25)}

.grafik-kaki{display:flex;justify-content:space-between;font-family:var(--mono);
  font-size:10px;color:var(--dim);padding:0 4px;margin-top:2px}

/* ---- Overlay: main bareng ------------------------------------------------
   Dua elemen, dua tugas. Papan antrean diam di tepi kiri atas sepanjang
   siaran; kotak panggilan hanya muncul saat kreator memanggil seseorang.
   Warnanya harfiah, bukan token tema: overlay selalu digubah di atas gambar
   siaran yang gelap, dan ia tidak pernah ikut tema terang. */
.ov-antre{position:absolute;left:14px;top:14px;width:210px;z-index:4;
  background:var(--ov-panel);border:1px solid var(--ov-tepi);border-radius:var(--ov-radius);
  padding:10px 12px;backdrop-filter:blur(4px);color:var(--ov-teks);font-family:var(--ov-font)}
.ov-antre .kepala{display:flex;align-items:baseline;gap:8px;margin-bottom:7px}
.ov-antre .judul{flex:1;font-size:calc(10px * var(--ov-skala));letter-spacing:.05em;
  text-transform:uppercase;color:var(--ov-teks-2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ov-antre .cacah{font-size:calc(10px * var(--ov-skala));color:var(--ov-aksen);font-weight:700}
.ov-antre .main{margin-bottom:7px;padding-bottom:6px;border-bottom:1px solid var(--ov-tepi)}
.ov-antre .tag{font-size:calc(8.5px * var(--ov-skala));letter-spacing:.14em;
  color:var(--ov-aksen);margin-bottom:3px}
.ov-antre .r{display:flex;align-items:center;gap:7px;font-size:calc(12px * var(--ov-skala));
  padding:2px 0;text-shadow:var(--ov-bayang)}
.ov-antre .r .no{font-size:calc(10px * var(--ov-skala));color:var(--ov-teks-2);
  width:16px;text-align:right;opacity:.8;flex:none}
.ov-antre .r b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ov-antre .r.tunda b{opacity:.55;text-decoration:line-through}
.ov-antre .r.kosong b{font-weight:400;opacity:.6}
/* Titik kecil untuk yang sudah dipanggil tapi belum menyahut — kreator perlu
   tahu siapa yang sedang ditunggu tanpa membuka konsol. */
.ov-antre .r .pgl{color:var(--ov-aksen);font-size:8px;flex:none;animation:pulse 1.4s infinite}
.ov-antre .r .ft{font-size:calc(8.5px * var(--ov-skala));color:var(--ov-panel);
  background:var(--ov-aksen);border-radius:4px;padding:1px 4px;margin-left:auto;flex:none;
  font-weight:700;text-shadow:none}
.ov-antre .sisa{margin-top:5px;font-size:calc(9.5px * var(--ov-skala));
  color:var(--ov-teks-2);opacity:.75}

/* Papan besar: mengisi browser source-nya sendiri, jadi tidak lagi
   mengambang di sudut dan boleh bernapas. */
.obs-mabar{padding:12px;font-family:var(--ov-font)}
.ov-antre.besar{padding:16px 18px;border-radius:calc(var(--ov-radius) + 4px)}
.ov-antre.besar .kepala{margin-bottom:11px}
.ov-antre.besar .judul{font-size:calc(13px * var(--ov-skala))}
.ov-antre.besar .cacah{font-size:calc(13px * var(--ov-skala))}
.ov-antre.besar .r{font-size:calc(17px * var(--ov-skala));padding:5px 0;gap:10px}
.ov-antre.besar .r .no{font-size:calc(13px * var(--ov-skala));width:24px}
.ov-antre.besar .tag{font-size:calc(10px * var(--ov-skala));margin-bottom:5px}
.ov-antre.besar .r .ft{font-size:calc(10px * var(--ov-skala));padding:2px 6px}
.ov-antre.besar .r .pgl{font-size:11px}
.ov-antre.besar .sisa{margin-top:9px;font-size:calc(12px * var(--ov-skala))}

.ov-panggil{position:absolute;left:50%;top:52px;transform:translateX(-50%) scale(.85);
  opacity:0;transition:.3s cubic-bezier(.2,.9,.3,1.25);z-index:6;text-align:center;
  background:var(--ov-panel);border:1.5px solid var(--ov-aksen);border-radius:calc(var(--ov-radius) + 4px);
  padding:16px 30px;min-width:330px;box-shadow:0 0 44px color-mix(in srgb, var(--ov-aksen) 35%, transparent);color:var(--ov-teks)}
.ov-panggil.show{opacity:1;transform:translateX(-50%) scale(1)}
.ov-panggil .tag{font-size:calc(10px * var(--ov-skala));letter-spacing:.14em;color:var(--ov-aksen)}
.ov-panggil .nm{font-size:calc(19px * var(--ov-skala));font-weight:800;margin-top:3px;text-shadow:var(--ov-bayang)}
.ov-panggil .ak{font-size:calc(11px * var(--ov-skala));color:var(--ov-teks-2);margin-top:5px}

/* ---- Penggeser & pemilih warna -------------------------------------------
   Keduanya dipakai panel tampilan overlay. Kendali bawaan browser dipakai
   apa adanya sebelumnya, jadi penggesernya tampil biru terang — satu-satunya
   biru di seluruh aplikasi, di tengah layar yang emas dan ungu. */
.geser{display:flex;align-items:center;gap:10px}
.geser input[type=range]{-webkit-appearance:none;appearance:none;flex:1;min-width:80px;
  height:4px;border-radius:99px;background:var(--line2);outline:none;cursor:pointer}
.geser input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:15px;height:15px;border-radius:50%;background:var(--cy);
  border:2px solid var(--card);box-shadow:var(--sh-1);cursor:pointer;transition:transform .15s}
.geser input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.18)}
.geser input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;
  background:var(--cy);border:2px solid var(--card);cursor:pointer}
.geser input[type=range]:focus-visible{box-shadow:var(--ring)}
.geser .nilai{font-family:var(--mono);font-size:11px;color:var(--txt);
  min-width:42px;text-align:right;font-variant-numeric:tabular-nums}

.warna-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:12px}
.warna input[type=color]{-webkit-appearance:none;appearance:none;display:block;width:100%;
  height:30px;padding:0;border:1px solid var(--line);border-radius:9px;background:none;cursor:pointer}
.warna input[type=color]::-webkit-color-swatch-wrapper{padding:3px}
.warna input[type=color]::-webkit-color-swatch{border:0;border-radius:6px}
.warna input[type=color]::-moz-color-swatch{border:0;border-radius:6px}
.warna .hex{width:100%;margin-top:6px;font-family:var(--mono);font-size:11px;padding:6px 8px;
  text-transform:uppercase}
/* Tinggi keterangan dikunci supaya kelima kartunya berakhir pada garis yang
   sama walau ada yang keterangannya dua baris. */
.warna small{display:block;margin-top:5px;font-size:10px;line-height:1.45;
  color:var(--dim);min-height:28px}

/* Baris judul kelompok di dalam kartu pengaturan. */
.stel-judul{display:flex;align-items:center;gap:9px;margin:18px 0 10px}
.stel-judul:first-of-type{margin-top:4px}
.stel-judul span{font-family:var(--mono);font-size:9px;letter-spacing:.15em;
  color:var(--dim);text-transform:uppercase;white-space:nowrap}
.stel-judul i{flex:1;height:1px;background:var(--line);display:block}

/* ---- Seret widget overlay (hanya di pratinjau) ---------------------------- */
.bisa-seret{cursor:grab;touch-action:none}
.bisa-seret:hover{outline:1px dashed var(--ov-aksen);outline-offset:3px}
.bisa-seret.sedang-seret{cursor:grabbing;outline:1px solid var(--ov-aksen);
  outline-offset:3px;opacity:.92;transition:none}