/* ============================================================
   LOTTO TOBANGA — Agent Panel
   Tema: konsol admin yang padat & tenang.
   Flat surfaces, radius kecil, warna semantik, angka tabular.
   Hanya selector kelas yang dipakai panel.js / index.html.
   ============================================================ */

* {
  box-sizing: border-box;
}

:root {
  /* Permukaan. Panel ini sekarang gelap, dan gelapnya datang dari banner
     jackpot: emas di atas hitam pekat. Hitamnyaforecast hangat (#0a0907),
     bukan #000 atau abu-abu netral — hitam murni membuat emas terlihat
     kekuningan, dan operator membukanya berjam-jam, bukan sekali-sekali. */
  /* Permukaan. Yang membedakan tema ini dari tema gelap biasa bukan
     warnanya, tapi rapatnya: kartu hanya satu sampai dua tingkat dari
     latar, bukan lima. Hitamnya mendekati #000 dan netral, supaya aksen
     kuning berdiri sebagai satu-satunya warna di panel — seperti yang
     dilakukan GameXaGlobal dengan hijau limau-nya. */
  --bg: #070707;
  --bg2: #0b0b0a;
  --card: #111110;
  --card2: #191917;
  --border: #242422;
  --border-strong: #34342f;
  --text: #f2f2f0;
  --muted: #a8a8a3;
  /* Dipakai untuk ikon menu dan label kecil yang tetap harus terbaca, jadi
    nilainya ditahan di atas ambang 4.5:1, bukan "abu redup". */
  --faint: #8e8e88;

  /* Aurora. Dua blob besar berblur lembut di belakang konten — inilah ciri
     yang membuat tema ini terbaca "menyala", bukan sekadar gelap. Nilainya
     naik dari 0.10 pada percobaan pertama karena pada alpha segitu blobnya
     hilang total di layar terang; 0.17 masih di bawah ambang yang membuat
     teks di atasnya jadi sulit dibaca. */
  --aurora-1: rgba(255, 191, 39, 0.17);
  --aurora-2: rgba(255, 191, 39, 0.1);

  /* Chakra Petch untuk judul dan wordmark; JetBrains Mono untuk isi panel.
     Angka tetap tabular supaya kolom uang tidak bergeser saat nilainya berubah. */
  --font-display: 'Chakra Petch', 'JetBrains Mono', ui-monospace, Consolas,
    monospace;
  --font-ui: 'JetBrains Mono', ui-monospace, Consolas, 'Liberation Mono',
    monospace;

  /* Aksen. Nilai bakunya sama dengan DEFAULT_SETTINGS.web_primary_color, dan
     panel.js menimpanya dengan warna yang operator pilih di Pengaturan Web
     setiap kali branding dimuat — jadi tema ini tidak pernah diam di emas. */
  /* Nilai bakunya sama dengan web_primary_color di app_settings, jadi tampilan
     bawaan dan hasil override panel.js tidak berbeda selama operator tidak
     mengubah apa pun. */
  --accent: #ffbf27;
  --accent2: #ffd75e;
  /* Tinta di atas permukaan aksen. Hitung ulang di panel.js dari luminansi
     warna terpilih: warna terang butuh tinta gelap, warna gelap butuh putih. */
  --accent-ink: #16120a;

  /* Semantik. Warna-warna ini bukan hiasan: masing-masing menandai status yang
     benar-benar ada (menunggu, disetujui, ditolak, peran agent). Kuning
     sengaja tidak dipakai di sini — kalau badge "menunggu" sama kuning dengan
     tombol MASUK, mata berhenti membedakan keduanya. Semua rona di bawah
     dipilih supaya lolos AA di atas --card, dicek dengan contrast-check. */
  --green: #3ddc84;
  --red: #ff6b6b;
  --yellow: #fbbf24;
  --purple: #b08cff;
  --blue: #5ea8ff;

  /* Isian tombol merah harus jauh lebih gelap dari --red. --red dipakai sebagai
     teks di atas permukaan gelap dan lolos 6.6:1; dipakai sebagai latar
     dengan teks putih, warna yang sama hanya menghasilkan 2.8:1. Dua tugas,
     dua nilai. */
  --red-fill: #b32020;
  --red-fill-hover: #cc2a2a;

  /* Dua nilai radius dengan tugas berbeda: kontrol (6) dan wadah (8). Radius
     yang sama untuk tombol, kartu, dan input membuat ketiganya jadi satu
     bentuk dan hierarkinya hilang. */
  --radius: 6px;
  --radius-lg: 8px;
  /* Bayangan hanya untuk yang benar-benar melayang di atas halaman: modal dan
     toast. Di atas dasar gelap, bayangan hampir tak terlihat — yang membuat
     permukaan "naik" justru garis 1px, jadi sisanya tetap pakai garis. */
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

body {
  margin: 0;
  /* Bukan Inter. Font web harus diunduh dulu, dan panel ini sering dibuka di
     koneksi seluler; system stack sudah dirender OS dengan benar dan tersedia
     di perangkat mana pun tanpa menunggu. */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  background: var(--bg);
  /* Aurora diletakkan sebagai lapisan latar pada body, bukan pseudo-element:
     begitu tidak ada z-index yang perlu direkayasa, dan blur-nya bake ke
     dalam gradien sehingga tidak memakai filter sama sekali. Terlihat di
     celah antar kartu, hilang di bawah teks. */
  background-image: radial-gradient(900px 600px at 12% -5%, var(--aurora-1), transparent 70%),
    radial-gradient(760px 520px at 92% 88%, var(--aurora-2), transparent 70%);
  background-attachment: fixed;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  /* Tanpa ini, scrollbar, checkbox bawaan, dan daftar dari peramban masih
     digambar terang di atas dasar gelap. */
  color-scheme: dark;
}

a {
  color: var(--accent2);
}

.hidden {
  display: none !important;
}

/* ---------- login ----------
   Split 50/50: artwork di kiri, formulir di kanan. Pola diambil dari
   GameXaGlobal, dan alasan memotong gambar 16:9 jadi panel vertikal bisa
   dipakai ada di sana: teks besarnya adalah elemen DOM yang melayang di atas
   artwork, bukan bagian dari gambarnya. Jadi artwork yang terpotong tetap
   terbaca sebagai tekstur, dan wordmark yang sebenarnya tidak ikut terpotong. */
.login-wrap {
  position: relative;
  min-height: 100vh;
  display: grid;
  /* minmax(0, …), bukan 1fr polos: track 1fr punya min-width auto, jadi
     ia tidak mau menyusut di bawah lebar isi. Di 320px itu membuat satu
     kata pada baris status menentukan lebar seluruh halaman. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--bg);
  /* Widget Turnstile membuat konten internalnya 300px di dalam wadah yang
     bisa hanya 276px di layar 320px. Situnya ada di shadow DOM Cloudflare,
     tidak bisa digaya dari sini; tanpa baris ini halaman bisa digeser dua
     piksel ke samping. Dipasang di login saja, bukan di body, supaya tidak
     ikut mengubah perilaku position:sticky panel yang sudah terbuka. */
  overflow-x: hidden;
}

/* ---- panel kiri: artwork ---- */
.login-aside {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 26px 30px;
  border-right: 1px solid var(--border);
  background-color: #06060a;
  background-image: url('/assets/img/login-bg.webp');
  /* Potongannya diambil dari tengah gambar: mahkota, bola 8, dan panggung
     emas tetap utuh. Yang terpotong hanya wordmark di dalam gambarnya. */
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
}
/* Tirai agar teks putih di atas emas tetap terbaca. Gradien vertikal,
   bukan radial: artwork-nya sudah punya titik terang sendiri di tengah,
   jadi tirai radial hanya akan menambah satu sumber cahaya. Nilainya
   deliberately tidak monoton — paling gelap di atas dan bawah, paling
   terang di 30% (mahkotanya), lalu gelap lagi tepat di pita tempat
   wordmark DOM berdiri. */
.login-aside::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(4, 4, 8, 0.84) 0%,
    rgba(4, 4, 8, 0.4) 30%,
    rgba(4, 4, 8, 0.68) 47%,
    rgba(4, 4, 8, 0.72) 62%,
    rgba(4, 4, 8, 0.92) 100%
  );
}
.login-aside > * {
  position: relative;
  z-index: 1;
}
.logo-mark {
  display: flex;
  align-items: center;
}
.logo-mark img {
  display: block;
  /* Logo yang diunggah operator formatnya banner, bukan kotak. Dibatasi tinggi
     saja supaya operator melihat logonya utuh, bukan potongan tipis seperti
     ketika dipaksakan masuk kotak persegi. */
  max-width: 100%;
  max-height: 44px;
}
.login-aside h1 {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
/* Wordmark besar. "LOTTO" digariskan (transparent fill + stroke) supaya yang
  solid di bawahnya tetap menjadi satu blok dan bukan dua kata yang bersaing. */
.art-words {
  margin: auto 0;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
}
.art-words .hollow {
  font-size: clamp(46px, 5.6vw, 82px);
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.55);
}
.art-words .solid {
  font-size: clamp(52px, 6.4vw, 94px);
  color: var(--accent);
  /* Bayangan teks tipis, bukan glow: yang dibutuhkan cuma memisahkan huruf
     dari sinar emas di belakangnya, bukan membuat hurufnya menyala. */
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
.art-foot {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
/* Titik koneksi. Statusnya nyata: panel.js yang mengisinya dari
   navigator.onLine, jadi tidak pernah mengklaim ada koneksi saat offline. */
.art-foot .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 0 3px rgba(61, 220, 132, 0.18);
  flex: 0 0 7px;
}
.art-foot .dot.off {
  background: var(--red);
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.18);
}
.art-foot .sep {
  color: rgba(255, 255, 255, 0.3);
}
.art-foot .mono {
  color: rgba(255, 255, 255, 0.62);
}

/* ---- panel kanan: formulir ---- */
.login-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--bg);
  padding: 48px 56px;
}
/* Kurung sudut di empat sudut, digambar dengan dua border pada satu
   elemen. Penanda ini yang membuat panel kanan terasa seperti terminal dan
   bukan sekadar kolom form di tengah layar. */
.login-panel::before,
.login-panel::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
  border-color: var(--accent);
  opacity: 0.55;
}
.login-panel::before {
  top: 22px;
  left: 22px;
  border-top: 1px solid;
  border-left: 1px solid;
}
.login-panel::after {
  bottom: 22px;
  right: 22px;
  border-bottom: 1px solid;
  border-right: 1px solid;
}
.login-main {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}
.login-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
/* Garis miring di depan kicker. */
.login-kicker::before {
  content: '//';
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0;
}
.login-main h2 {
  margin: 0 0 30px;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.2vw, 42px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
  display: flex;
  flex-direction: column;
}
.login-main h2 .accent {
  color: var(--accent);
}

.field {
  margin-bottom: 20px;
}
.field-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}
.field-top label,
.lbl-static {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Nomor urut. Yang distinguishes field ini dari sekadar label: bentuk isian
   sudah seragam, jadi yang perlu dibaca operator adalah urutan dan mana yang
   sudah terisi. */
.field-top b,
.lbl-static b {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.field-hint {
  font-size: 11px;
  color: var(--faint);
}

input,
select,
textarea {
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
input::placeholder {
  color: var(--faint);
}
input:focus,
select:focus,
textarea:focus {
  border-bottom-color: var(--accent);
  /* Cincin fokus mengikuti warna aksen, bukan hitam transparan seperti di atas
     dasar putih — di dasar gelap cincin hitam tidak terlihat sama sekali. */
  box-shadow: 0 1px 0 0 var(--accent);
}
select,
textarea {
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg2);
}

.login-main .hint {
  margin-top: 6px;
  font-size: 11.5px;
}
.login-foot {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.login-foot .sep {
  color: var(--border-strong);
}

/* ---- kontak Telegram ----
 *
 * Alasan baris ini ada: ini satu-satunya jalan keluar untuk operator yang
 * terkunci (akun belum aktif, sandi lupa, pendaftaran ditolak), jadi
 * tempatnya bukan di dalam baris kaki yang sudah penuh, tapi baris sendiri
 * di bawahnya.
 *
 * Bentuknya sengaja bukan kotak. Kotak dengan garis akan bersaing dengan
 * tombol MASUK, yang harus tetap satu-satunya bidang besar berlapis warna
 * aksen di halaman ini. Baris ini melanjutkan bahasa baris kaki:
 * teks kecil, tanpa bayangan, tanpa radius baru.
 *
 * Warnanya juga tidak menambah warna baru: label memakai warna teks biasa,
 * handle memakai warna tautan yang sudah dipakai panel (--accent2), dan
 * ikon Telegram memakai garis yang sama seperti ikon menu di sidebar. */
.tg-link {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 14px;
  /* Target sentuh 44px tanpa membesarakan teks: area yang bisa diklik lebih
     tinggi dari yang kelihatan, supaya mudah diklik dengan jempol di ponsel. */
  min-height: 44px;
  padding: 10px 0;
  color: var(--text);
  text-decoration: none;
  transition: color 0.12s;
}
.tg-ico {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--faint);
  transition: color 0.12s;
}
.tg-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tg-handle {
  color: var(--accent2);
}
.tg-link:hover .tg-label {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tg-link:hover .tg-ico {
  color: var(--accent2);
}
/* Cincin fokus mengikuti tombol lain di panel: emas dengan jarak 2px, supaya
   kelihatan di atas dasar gelap dan tidak hilang di dalam teks. */
.tg-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}

@media (max-width: 900px) {
  /* Di bawah ini panel artwork tidak lagi Layak setinggi viewport: isinya cuma
     mahkota dan logo, sedangkan yang dicari operator adalah form. Dibiarkan
     penuh, form-nya terdorong ke bawah lipatan. */
  .login-wrap {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Pita pendek dengan logo dan namaYA sejajar di atas, baris status di
     bawah — seperti yang mereka lakukan. Wordmark besar disembunyikan, bukan
     diperkecil: di pita setinggi 165px isinya hanya akan bertabrakan dengan
     logo, dan logo sudah membawa identitasnya sendiri. */
  .login-aside {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: 'logo name' 'foot foot';
    align-items: center;
    gap: 6px 12px;
    min-height: 165px;
    padding: 18px 20px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    background-size: cover;
    background-position: center 32%;
  }
  .logo-mark {
    grid-area: logo;
  }
  .logo-mark img {
    max-height: 34px;
  }
  .login-aside h1 {
    grid-area: name;
    margin: 0;
    font-size: 13px;
  }
  .art-words {
    display: none;
  }
  .art-foot {
    grid-area: foot;
    margin-top: 4px;
    /* Di 320px nama host dan jam tidak muat dalam satu baris bersama
       nama situs, jadi host disembunyikan lebih dulu — yang penting status
       koneksinya tetap kelihatan. */
    flex-wrap: wrap;
  }
  .art-foot #lgHost {
    display: none;
  }
  .login-panel {
    padding: 34px 22px 40px;
  }
  .login-main h2 {
    font-size: 30px;
    margin-bottom: 24px;
  }
  .login-panel::before {
    top: 14px;
    left: 14px;
  }
  .login-panel::after {
    bottom: 14px;
    right: 14px;
  }
}

/* ---------- tombol ---------- */
/* Tombol utama memakai emas solid: satu-satunya bidang besar berlapis warna
   aksen di panel, jadi "tindakan utama" terbaca tanpa harus membaca teksnya
   dulu. Sisanya tetap netral — kalau semua tombol emas, tidak ada satu pun
   yang berarti. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: var(--accent);
  color: var(--accent-ink);
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.btn:hover {
  background: var(--accent2);
}
/* Tombol mati harus TERLIHAT mati — tanpa ini tombol nonaktif di Billing
   terbaca-active padahal tidak bereaksi, dan diamnyaIa terasa seperti bug. */
.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--card2);
  color: var(--faint);
}
.btn.secondary {
  background: var(--card2);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn.secondary:hover {
  background: #262218;
  border-color: var(--border-strong);
}
.btn.danger {
  background: var(--red-fill);
  color: #ffffff;
}
.btn.danger:hover {
  background: var(--red-fill-hover);
}
.btn.small {
  padding: 5px 10px;
  font-size: 12px;
}
.btn.wide {
  width: 100%;
  padding: 11px;
}
.err {
  color: var(--red);
  font-size: 12.5px;
  margin-top: 10px;
  text-align: center;
  min-height: 18px;
}

/* ---------- layout ---------- */
/* Shell dikunci setinggi viewport dan tidak ikut bergulir. Yang bergulir
   hanya dua area di dalamnya: daftar menu dan isi halaman. Dengan begitu
   topbar dan sidebar tidak pernah hilang ke atas, dan satu panel yang
   dipakai berjam-jam tidak memaksa operator menggulir ke atas hanya untuk
   mencari lagi judul halaman. */
.layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
}
/* Sidebar memakai permukaan paling gelap dari semua bidang, satu tingkat di
   bawah konten. Di atas dasar gelap, batas antarbidang harus datang dari
   perbedaan suhu warna, bukan dari bayangan — bayangan tidak terlihat di
   hitam. */
.sidebar {
  width: 232px;
  flex: 0 0 232px;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* Tombol menu hanya hidup di bawah 860px, tempat sidebar berubah jadi laci. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
}
.nav-toggle svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}
.nav-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.nav-scrim {
  display: none;
}
button.nav-more {
  display: none;
}
.brand {
  display: block;
  padding: 18px 16px 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
}
.brand::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--accent);
  margin-right: 9px;
}
.brand:hover {
  color: var(--accent);
}
.brand.ada-logo::before {
  content: none;
}
.brand .brand-mark {
  display: inline-block;
  height: 18px;
  width: auto;
  max-width: 96px;
  border-radius: 4px;
  object-fit: contain;
  vertical-align: -4px;
  margin-right: 9px;
}
.brand small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.12em;
  margin-top: 3px;
}
/* Begitu logo benar-benar termuat (kelas .ada-logo dipasang panel.js setelah
   gambar berhasil, bukan saat gambar gagal), operator sudah punya identitas
   yang sama persis di logo — nama situs dan label "AGENT PANEL" jadi
   pengulangan yang tidak perlu. Kalau logo gagal dimuat, keduanya tetap tampil sebagai
   inisial teks, jadi tidak pernah ada sidebar tanpa identitas. */
.brand.ada-logo b,
.brand.ada-logo small {
  display: none;
}
.brand.ada-logo {
  padding: 14px 16px;
}
.brand.ada-logo .brand-mark {
  height: 28px;
  max-width: 150px;
  margin-right: 0;
  vertical-align: middle;
}
/* Halaman login: judul "LOTTO TOBANGA" disembunyikan hanya kalau logo sudah
   benar-benar termuat. Selector sibling dipakai supaya panel.js tidak perlu
   tahu soal halaman ini — cukup kelas .ada-logo yang sudah dipakainya untuk
   sidebar. Kalau logo gagal dimuat, judul tetap tampil sebagai teks. */
.logo-mark.ada-logo ~ h1 {
  display: none;
}
.nav {
  padding: 12px 8px;
  flex: 1;
  overflow-y: auto;
}
/* Empat bagian menu. Labelnya kecil dan redup supaya menandai batas bagian
 * tanpa bersaing dengan isi menunya. Jarak atas tiap bagian lebih besar dari
 * jarak antar-item supaya pengelompokannya terbaca, bukan sekadar spasi. */
.nav-group + .nav-group {
  margin-top: 14px;
}
.nav-group-label {
  padding: 0 10px;
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
/* Item aktif dibedakan tiga hal sekaligus: latar terangkat, teks jadi
   putih penuh, dan garis emas 2px di tepi kiri. Di panel gelap, perubahan
   warna teks saja terlalu halus untuk mata yang sudah menatap tabel angka
   seharian; garis tepinya yang terbaca dari jauh. */
.nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 13px;
  margin-bottom: 2px;
  border: 1px solid transparent;
}
.nav a:hover {
  background: var(--card);
  color: var(--text);
}
.nav a.active {
  background: var(--card2);
  color: var(--text);
  border-color: var(--border-strong);
  box-shadow: inset 2px 0 0 var(--accent);
  font-weight: 600;
}
.nav a.active .ico {
  color: var(--accent);
}
/* Ikonnya SVG garis inline (lihat index.html): stroke-nya diwarnai lewat CSS di
 * sini supaya dua belas ikonmenu hanya perlu viewBox di markup dan tidak
 * mengulang atribut presentasi yang sama. Warna mengikuti status item, jadi
 * ikon aktif ikut menyala bersama teksnya. */
.nav .ico {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--faint);
}
.nav a:hover .ico {
  color: var(--muted);
}
/* Ikon garis kecil di dalam isi halaman (tanda hasil tes gateway, pengenal
 * hierarki agen). Atribut gambarannya di sini, sama seperti ikon menu. */
.mini-ico {
  width: 13px;
  height: 13px;
  display: inline-block;
  vertical-align: -2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Selalu menempel di dasar sidebar. Dua hal yang menjanjikannya: shell
 * dikunci setinggi viewport sehingga halaman tidak pernah bergulir, dan
 * flex: 0 0 auto yang mencegah bagian ini ikut tertekan kalau daftar
 * menunya panjang. Tanpa baris terakhir, tombol Keluar bisa tergencet jadi
 * setinggi sepotong teks saat operator punya banyak submenu. */
.side-foot {
  flex: 0 0 auto;
  border-top: 1px solid var(--border);
  padding: 12px 14px;
  font-size: 12px;
  color: var(--muted);
}
.side-foot b {
  color: var(--text);
  display: block;
  margin-bottom: 2px;
}
/* Baris logout: satu-satunya tempat warna merah dipakai di sidebar, karena
   satu-satunya tindakan di sana yang tidak bisa dibatalkan. */
.btn-logout {
  width: 100%;
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 107, 107, 0.32);
  background: rgba(255, 107, 107, 0.1);
  color: var(--red);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.btn-logout:hover {
  background: var(--red-fill-hover);
  border-color: var(--red-fill-hover);
  color: #ffffff;
}
.btn-logout:active {
  transform: translateY(1px);
}

.main {
  flex: 1;
  min-width: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Topbar adalah satu-satunya tempat glass di panel: dia benar-benar
   melayang di atas konten yang tergulir, jadi blur di belakangnya
   terlihat. Sidebar dan bilah menu bawah sengaja tidak — keduanya tidak
   menutupi apa pun, jadi backdrop-filter hanya menambah beban tanpa
   hasil. */
.topbar {
  height: 56px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: rgba(11, 11, 10, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  /* Tidak lagi sticky: shell-nya sudah dikunci setinggi viewport, jadi topbar
     tidak punya apa-apa untuk digulir keluar. */
  flex: 0 0 auto;
  z-index: 20;
}
.topbar h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.topbar .bal {
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 12.5px;
  color: var(--muted);
}
/* Saldo coin di topbar diberi warna hijau hanya karena nilainya uang yang
   dipakai operator untuk memutuskan lanjut atau berhenti. Ini satu-satunya
   angka di topbar yang berwarna. */
.topbar .bal b {
  color: var(--green);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
/* min-height: 0 itu wajib, bukan kosmetik: flex item punya min-height auto
   secara bawaan, jadi tanpa itu .content ikut demanding setinggi isinya dan
   overflow-y di sini tidak pernah berlaku. */
.content {
  padding: 20px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ---------- kartu & tabel ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
}
.card .lbl {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 6px;
}
.card .val {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Nama agent bukan angka: panjangnya tidak bisa ditebak, jadi ukurannya
 * diturunkan dan dibiarkan membungkus. Nama yang turun baris lebih baik
 * daripada nama yang meluber keluar kartunya. */
.card .val.ident-name {
  font-size: 17px;
  line-height: 1.3;
  word-break: break-word;
  font-variant-numeric: normal;
}
.card .val.green {
  color: var(--green);
}
.card .val.yellow {
  color: var(--yellow);
}
.card .val.purple {
  color: var(--purple);
}
.card .val.red {
  color: var(--red);
}

.nowrap {
  white-space: nowrap;
}
/* Kolom angka & uang disejajarkan kanan supaya digit satuan sejajar vertikal dan
 * mudah dibandingkan antarbaris. Manyanel panel.js memakai kelas ini sejak
 * awal, tapi aturannya belum pernah ada — semua kolom itu ikut rata kiri. */
.text-right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
table tfoot th {
  background: var(--card2);
  border-top: 2px solid var(--border);
  color: var(--text);
  font-weight: 700;
  position: sticky;
  bottom: 0;
}
.panel-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
  overflow: hidden;
}
.panel-box .head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.panel-box .head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.panel-box .body {
  padding: 14px 16px;
}
.toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.toolbar input,
.toolbar select {
  width: auto;
  min-width: 140px;
  padding: 7px 10px;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  vertical-align: middle;
}
th {
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
tr:hover td {
  background: var(--card2);
}
/* Warna baris menurut role — hanya di tabel Agen & Downline, hanya super admin.
 * Garis tepi kiri 3px adalah pembeda utamanya: cukup terlihat saat mata menyapu
 * tabel dari kiri tanpa membebani latar baris, dan tetap terbaca kalau suatu
 * saat warnanya dihilangkan. Tints di bawah dinaikkan dari 0.05 ke 0.07 karena
 * di atas dasar gelap alpha set kecil hampir hilang; sisanya diserahkan ke
 * garis tepi. */
tr.role-super_agent > td:first-child {
  box-shadow: inset 3px 0 0 var(--purple);
}
tr.role-head_agent > td:first-child {
  box-shadow: inset 3px 0 0 var(--blue);
}
tr.role-agent > td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}
tr.role-super_agent td {
  background: rgba(180, 140, 255, 0.07);
}
tr.role-head_agent td {
  background: rgba(94, 168, 255, 0.07);
}
tr.role-agent td {
  background: rgba(232, 167, 44, 0.08);
}
tr.role-super_agent:hover td,
tr.role-head_agent:hover td,
tr.role-agent:hover td {
  background: var(--card2);
}
.table-wrap {
  overflow-x: auto;
}

/* ---------- badge ---------- */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* Latar badge adalah warna status itu sendiri dengan alpha rendah, bukan abu
   netral — jadi warna teks dan latar masih satu keluarga, dan badge tetap
   terbaca sebagai "warna" bukan sekadar kotak. */
.badge.green {
  background: rgba(69, 209, 138, 0.14);
  color: var(--green);
}
.badge.red {
  background: rgba(255, 107, 107, 0.14);
  color: var(--red);
}
.badge.yellow {
  background: rgba(240, 192, 64, 0.14);
  color: var(--yellow);
}
.badge.blue {
  background: rgba(94, 168, 255, 0.14);
  color: var(--blue);
}
.badge.gray {
  background: rgba(167, 157, 137, 0.14);
  color: var(--muted);
}
.badge.purple {
  background: rgba(180, 140, 255, 0.14);
  color: var(--purple);
}

.empty {
  text-align: center;
  color: var(--muted);
  padding: 26px;
  font-size: 13px;
}
/* Kontrol halaman tabel. Ditempatkan di dalam panel-box, tepat di bawah
   area geser tabel, supaya tetap terlihat tanpa ikut tergulir mendatar. */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
}
.pager .pager-info b {
  color: var(--text);
}
.pager .btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
.mono {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.actions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.stat-line {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 13px;
}
.stat-line:last-child {
  border: 0;
}
.stat-line span:first-child {
  color: var(--muted);
}

/* ---------- pengaturan ---------- */
.group-title {
  margin: 20px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.group-title:first-child {
  margin-top: 0;
}

/* Saklar on/off tetap berlabel karena checkbox polos tidak cukup jelas
 * dibaca sebagai "aktif/mati" pada pengaturan yang berdampak uang. */
.switch-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--text);
  margin-bottom: 0;
}
.switch-row input[type='checkbox'] {
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.switch-row span {
  color: var(--text);
}
.color-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.color-row input[type='color'] {
  width: 52px;
  height: 38px;
  padding: 3px;
  flex: 0 0 auto;
  cursor: pointer;
}

/* ---------- modal ---------- */
/* Tirai modal hampir hitam, bukan abu transparan: di atas panel gelap, tirai
   abu tidak menurunkan kontras apa pun — yang tetap perlu ditegaskan hanyalah
   batas kartu modal terhadap isinya. */
.modal-back {
  position: fixed;
  inset: 0;
  background: rgba(4, 4, 3, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}
.modal {
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
}
.modal.wide {
  max-width: 760px;
}
.modal .m-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal .m-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: -0.005em;
}
.modal .m-body {
  padding: 16px 18px;
}
.modal .m-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.x-close {
  cursor: pointer;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  background: none;
  border: 0;
}
.x-close:hover {
  color: var(--red);
}

/* ---------- toast ---------- */
#toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast-item {
  background: var(--card2);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent);
  padding: 11px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  min-width: 240px;
  max-width: 360px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  /* Judul dan pesan adalah <b> dan <span> — keduanya inline bersebelahan
     tanpa spasi. Ditumpuk lalu diberi jarak supaya tidak menempel. */
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.toast-item b {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
}
.toast-item > span {
  color: var(--muted);
  line-height: 1.5;
  /* Pesan panjang boleh turun baris; yang tidak boleh adalah satu kata
     panjang tanpa spasi mendorong kotaknya melebar. */
  overflow-wrap: anywhere;
}
.toast-item.ok {
  border-left-color: var(--green);
}
.toast-item.err {
  border-left-color: var(--red);
}

/* ---------- isi misc ---------- */
.copy-box {
  background: var(--bg);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 9px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.copy-box .mono {
  word-break: break-all;
}
pre.code {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px;
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.55;
  font-family: 'JetBrains Mono', Consolas, monospace;
  color: var(--muted);
}
.tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.tabs button {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 7px 14px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
}
.tabs button.active {
  background: var(--card2);
  color: var(--text);
  border-color: var(--border-strong);
}
.pasaran-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 15px;
  margin-bottom: 10px;
  background: var(--card);
}
.pasaran-card .pc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.pasaran-card h4 {
  margin: 0 0 3px;
  font-size: 14px;
}
.pasaran-card .sub {
  color: var(--muted);
  font-size: 12px;
}
.countdown {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 19px;
  color: var(--yellow);
  font-weight: 700;
}
.countdown.closed {
  color: var(--red);
}
.hint {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
/* Peringatan yang menempel pada sebuah tindakan: dipakai saat saklar yang
 * hendak dinyalakan tidak akan berpengaruh karena syarat lain belum terpenuhi. */
.hint.warn {
  color: var(--yellow);
  background: rgba(240, 192, 64, 0.1);
  border: 1px solid rgba(240, 192, 64, 0.3);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.live-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.live-market {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
}
.live-market .lm-top {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.live-market .lm-name {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.live-market .lm-sub {
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 8px;
}
.live-market .lm-timer {
  font-size: 16px;
}

/* ---------- LAUNCH GAME ---------- */
/* Halaman ini tidak butuh tabel, form, atau filter: yang dicari operator cuma
 * "pasang yang mana", jadi setiap pasaran adalah satu kartu besar yang
 * sekaligus jadi tombolnya. */
.launch-blank {
  text-align: center;
  padding: 40px 20px;
}
.launch-blank .lb-judul {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
}
.launch-blank .hint {
  max-width: 460px;
  margin: 0 auto 18px;
}
.launch-ganti {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.lg-pick {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  border-radius: var(--radius);
  padding: 6px 10px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
.lg-pick.on {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--text);
  font-weight: 600;
}
.launch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}
.launch-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.launch-card:hover {
  border-color: var(--accent);
  background: var(--card2);
}
.launch-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.launch-card .lc-nama {
  font-weight: 700;
  font-size: 13.5px;
}
.launch-card .lc-sub {
  color: var(--muted);
  font-size: 11px;
}

/* ============================================================
   TAMPILAN PANEL — terminal / control room
   Warna permukaan diturunkan dari --accent (warna utama di Pengaturan Web),
   jadi operator yang mengganti warna situs ikut mengganti seluruh tema panel.
   Semua aturan di bawah hanya berlaku setelah login (.layout), kecuali modal
   dan toast yang dirender di luar shell.
   ============================================================ */
:root {
  --panel-bg: #060806;
  --panel-bg2: #080b08;
  --panel-card: #0b0f0a;
  --panel-card2: #10150e;
  --panel-line: #20271e;
  --panel-line2: #333d2d;
}
@supports (color: color-mix(in srgb, red 5%, black)) {
  :root {
    --panel-bg: color-mix(in srgb, var(--accent) 3%, #060806);
    --panel-bg2: color-mix(in srgb, var(--accent) 4%, #080b08);
    --panel-card: color-mix(in srgb, var(--accent) 6%, #0b0f0a);
    --panel-card2: color-mix(in srgb, var(--accent) 9%, #10150e);
    --panel-line: color-mix(in srgb, var(--accent) 14%, #20271e);
    --panel-line2: color-mix(in srgb, var(--accent) 28%, #333d2d);
  }
}

.layout {
  --bg: var(--panel-bg);
  --bg2: var(--panel-bg2);
  --card: var(--panel-card);
  --card2: var(--panel-card2);
  --border: var(--panel-line);
  --border-strong: var(--panel-line2);
  --radius: 2px;
  --radius-lg: 2px;
  font-family: var(--font-ui);
  font-size: 12px;
  background-color: var(--panel-bg);
  background-image: radial-gradient(
      900px 480px at 12% -8%,
      color-mix(in srgb, var(--accent) 8%, transparent),
      transparent 65%
    ),
    linear-gradient(color-mix(in srgb, var(--accent) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 4%, transparent) 1px, transparent 1px);
  background-size: auto, 44px 44px, 44px 44px;
}
.layout h1,
.layout h2,
.layout h3,
.layout h4,
.layout .brand,
.layout .card .val {
  font-family: var(--font-display);
}
.layout a {
  text-underline-offset: 3px;
}

/* ---------- sidebar ---------- */
.layout .sidebar {
  width: 248px;
  flex: 0 0 248px;
  background: var(--panel-bg2);
  border-right: 1px solid var(--panel-line);
}
.layout .brand {
  padding: 20px 18px 17px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--panel-line);
}
.layout .brand::before {
  width: 9px;
  height: 9px;
  border-radius: 0;
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent);
}
.layout .brand small {
  font-family: var(--font-ui);
  font-size: 8px;
  letter-spacing: 0.3em;
  color: color-mix(in srgb, var(--accent) 55%, var(--muted));
}
.layout .nav {
  padding: 14px 10px;
}
.layout .nav-group + .nav-group {
  margin-top: 18px;
}
.layout .nav-group-label {
  padding: 0 12px;
  margin-bottom: 6px;
  font-size: 8px;
  letter-spacing: 0.24em;
  color: var(--faint);
}
.layout .nav a {
  gap: 9px;
  padding: 9px 12px;
  margin-bottom: 1px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.layout .nav a:hover {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-left-color: var(--panel-line2);
  color: var(--text);
}
.layout .nav a.active {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 13%, transparent),
    transparent 80%
  );
  border-left-color: var(--accent);
  box-shadow: none;
  color: var(--accent);
}
.layout .nav a.active .ico {
  color: var(--accent);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 55%, transparent));
}
.layout .nav .ico {
  width: 15px;
  height: 15px;
  flex-basis: 15px;
  stroke-width: 1.6;
}
.layout .side-foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--panel-line);
}
.layout .side-foot b {
  margin: 0;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
}
.layout .side-foot b::before {
  content: '◈';
  margin-right: 8px;
  color: var(--accent);
}
.layout .btn-logout {
  margin-top: 0;
  padding: 8px 10px;
  border-radius: 0;
  border-color: color-mix(in srgb, var(--red) 32%, transparent);
  background: transparent;
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- topbar ---------- */
.layout .topbar {
  height: 62px;
  padding: 0 24px;
  border-bottom: 1px solid var(--panel-line);
  background: color-mix(in srgb, var(--panel-bg) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.layout .topbar h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.layout .topbar h2::before {
  content: '//';
  color: var(--accent);
  letter-spacing: -0.05em;
}
.layout .topbar .bal {
  gap: 0;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.layout .topbar .bal > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.layout .topbar .bal > span + span {
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid var(--panel-line);
}
.layout .topbar .bal b {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.layout .tb-clock {
  color: var(--muted);
  font-size: 9.5px;
  letter-spacing: 0.08em;
}
/* ---------- menu profil ---------- */
.profile {
  position: relative;
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid var(--panel-line);
}
.profile-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--text);
  font-family: var(--font-ui);
  cursor: pointer;
}
.profile-ava {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 1px solid var(--panel-line2);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
}
.profile-id {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 130px;
  line-height: 1.25;
  text-align: left;
}
.profile-id b {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}
.profile-id small {
  font-size: 7.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.profile .chev {
  width: 12px;
  height: 12px;
  color: var(--faint);
  transition: transform 0.15s ease, color 0.15s ease;
}
.profile-btn[aria-expanded='true'] .chev {
  transform: rotate(180deg);
  color: var(--accent);
}
.profile-btn:hover .chev {
  color: var(--accent);
}
.profile-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 120;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--panel-line2);
  background: var(--panel-card);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.6);
}
.profile-menu.hidden {
  display: none;
}
.profile-head {
  padding: 10px 10px 12px;
  margin-bottom: 5px;
  border-bottom: 1px solid var(--panel-line);
}
.profile-head b {
  display: block;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.profile-head small {
  display: block;
  margin-top: 3px;
  font-family: var(--font-ui);
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.profile-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  background: none;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.profile-item svg {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
}
.profile-item:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--text);
}
.profile-item.danger,
.profile-item.danger:hover {
  color: var(--red);
}
.profile-item.danger:hover {
  background: rgba(255, 107, 107, 0.08);
}
.layout .content {
  padding: 22px 26px 34px;
}

/* ---------- hero dashboard ---------- */
.dash-hero {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 14px;
  padding: 22px 24px;
  overflow: hidden;
  border: 1px solid var(--panel-line);
  background: linear-gradient(
    118deg,
    color-mix(in srgb, var(--accent) 10%, var(--panel-card)) 0%,
    var(--panel-card) 58%
  );
}
.dash-hero::before {
  content: '';
  position: absolute;
  left: -40px;
  bottom: -70px;
  width: 260px;
  height: 180px;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--accent) 20%, transparent),
    transparent
  );
  pointer-events: none;
}
.dash-hero::after {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 110px;
  height: 110px;
  border-top: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
  opacity: 0.35;
  pointer-events: none;
}
.hero-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.hero-kicker {
  margin-bottom: 9px;
  font-size: 8.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.hero-kicker::before {
  content: '●';
  margin-right: 7px;
  font-size: 7px;
  vertical-align: 1px;
}
.hero-copy h1 {
  margin: 0 0 13px;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.hero-copy h1 span {
  color: var(--accent);
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 20px;
  font-size: 8.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
}
.hero-meta b {
  margin-left: 7px;
  font-weight: 500;
  color: var(--text);
}
.hero-side {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.hero-balance {
  text-align: right;
}
.hero-balance .lbl {
  display: block;
  margin-bottom: 3px;
  font-size: 8.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
}
.hero-balance strong {
  display: block;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--accent);
  text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 30%, transparent);
}
.hero-balance .unit {
  font-size: 8px;
  letter-spacing: 0.24em;
  color: var(--faint);
}

/* ---------- kartu statistik ---------- */
.layout .cards {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.layout .card {
  position: relative;
  padding: 15px 16px 14px;
  overflow: hidden;
  background: var(--panel-card);
  border: 1px solid var(--panel-line);
  border-radius: 0;
}
.layout .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 2px;
  background: var(--accent);
}
.layout .card::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-top: 1px solid var(--panel-line2);
  border-right: 1px solid var(--panel-line2);
  pointer-events: none;
}
.layout .card:hover {
  background: var(--panel-card2);
  border-color: var(--panel-line2);
}
.layout .card .lbl {
  margin-bottom: 8px;
  font-size: 8.5px;
  letter-spacing: 0.18em;
  color: var(--faint);
}
.layout .card .val {
  font-size: clamp(20px, 2.1vw, 27px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.layout .card .hint {
  font-size: 9.5px;
  letter-spacing: 0.02em;
  color: var(--faint);
}
.stat-cards {
  counter-reset: stat;
}
.stat-cards .card {
  counter-increment: stat;
}
.stat-cards .card .lbl::before {
  content: counter(stat, decimal-leading-zero);
  margin-right: 7px;
  color: var(--accent);
}

/* ---------- panel & tabel ---------- */
.layout .panel-box {
  background: var(--panel-card);
  border: 1px solid var(--panel-line);
  border-radius: 0;
  margin-bottom: 14px;
}
.layout .panel-box .head {
  padding: 12px 15px;
  background: color-mix(in srgb, var(--accent) 3%, transparent);
  border-bottom: 1px solid var(--panel-line);
}
.layout .panel-box .head h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.layout .panel-box .head h3::before {
  content: '//';
  color: var(--accent);
  letter-spacing: -0.05em;
}
.layout .panel-box .body {
  padding: 15px 16px;
}
.layout table {
  font-size: 11px;
}
.layout th {
  padding: 9px 12px;
  background: color-mix(in srgb, var(--accent) 2%, transparent);
  border-bottom: 1px solid var(--panel-line2);
  font-size: 8px;
  letter-spacing: 0.16em;
  color: var(--faint);
}
.layout td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--panel-line);
}
/* Nominal uang tidak boleh pecah setelah "Rp"; tabelnya sudah bisa digeser
   mendatar di layar sempit lewat .table-wrap. */
.layout td.text-right,
.layout th.text-right {
  white-space: nowrap;
}
.layout tr:hover td {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.layout tr.role-agent td {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.layout tr.role-agent:hover td {
  background: var(--panel-card2);
}
.layout .group-title {
  margin: 22px 0 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--panel-line);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.layout .stat-line {
  border-bottom-style: solid;
  border-bottom-color: var(--panel-line);
  font-size: 11.5px;
}
.layout .empty {
  font-size: 11px;
  letter-spacing: 0.04em;
}
.layout .pager {
  padding: 11px 12px;
  border-top: 1px solid var(--panel-line);
  font-family: var(--font-ui);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.layout .pager .btn {
  padding: 7px 11px;
  font-size: 8px;
}
.layout .pager-info b {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--accent);
}

/* ---------- lencana, tombol, isian ---------- */
.layout .badge,
.modal .badge {
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
  border-radius: 0;
  background: color-mix(in srgb, currentColor 11%, transparent);
  font-family: var(--font-ui);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.layout .btn,
.modal .btn {
  border-radius: 0;
  padding: 9px 15px;
  font-family: var(--font-ui);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.layout a.btn {
  text-decoration: none;
}
.layout .btn.small,
.modal .btn.small {
  padding: 7px 11px;
  font-size: 9px;
}
.layout .btn.secondary,
.modal .btn.secondary {
  background: transparent;
  border-color: var(--panel-line2);
  color: var(--muted);
}
.layout .btn.secondary:hover,
.modal .btn.secondary:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: var(--accent);
  color: var(--accent);
}
.layout .btn:disabled,
.layout .btn[disabled],
.modal .btn:disabled,
.modal .btn[disabled] {
  opacity: 0.6;
  background: var(--panel-line);
  border-color: var(--panel-line);
  color: var(--faint);
}
.layout input:not([type='checkbox']):not([type='radio']):not([type='color']),
.layout select,
.layout textarea,
.modal input:not([type='checkbox']):not([type='radio']):not([type='color']),
.modal select,
.modal textarea {
  border: 1px solid var(--panel-line2);
  border-radius: 0;
  background: var(--panel-bg);
  padding: 9px 10px;
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--text);
}
.layout input:focus,
.layout select:focus,
.layout textarea:focus,
.modal input:focus,
.modal select:focus,
.modal textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent),
    0 0 18px color-mix(in srgb, var(--accent) 14%, transparent);
}
.layout input[type='color'] {
  border: 1px solid var(--panel-line2);
  border-radius: 0;
  background: var(--panel-bg);
  padding: 3px;
}
.layout .tabs button {
  border-radius: 0;
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.layout .tabs button.active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------- pasaran, launch, chart, API ---------- */
.layout .live-market,
.layout .pasaran-card,
.layout .launch-card,
.layout .stat-line {
  border-radius: 0;
}
.layout .live-market,
.layout .pasaran-card,
.layout .launch-card {
  background: var(--panel-bg2);
  border-color: var(--panel-line);
}
.layout .launch-card:hover {
  background: var(--panel-card2);
  border-color: var(--accent);
}
.layout .live-market .lm-name,
.layout .pasaran-card h4,
.layout .launch-card .lc-nama {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.layout .countdown {
  color: var(--accent);
  text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 35%, transparent);
}
.layout .countdown.closed {
  color: var(--red);
  text-shadow: none;
}
.layout .lg-pick {
  border-radius: 0;
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.layout .api-method {
  background: var(--panel-card);
  border-color: var(--panel-line);
}
.layout .api-method > summary:hover {
  background: var(--panel-card2);
}
.layout .api-method[open] > summary {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.layout .api-detail {
  border-top-color: var(--panel-line);
}
.layout .copy-box {
  border-radius: 0;
  background: var(--panel-bg);
  border-color: var(--panel-line2);
}
.layout pre.code {
  border-radius: 0;
  background: var(--panel-bg);
  border-color: var(--panel-line);
  color: var(--muted);
}
.chart-bar {
  fill: var(--panel-line2);
}
.chart-bar.hot {
  fill: url(#gradAccent);
}
.chart-stop-a {
  stop-color: var(--accent2);
}
.chart-stop-b {
  stop-color: var(--accent);
}
.chart-day {
  fill: var(--faint);
}
.chart-axis {
  stroke: var(--panel-line2);
}

/* ---------- modal & toast (di luar .layout) ---------- */
.modal {
  --card: var(--panel-card);
  --card2: var(--panel-card2);
  --border: var(--panel-line);
  --border-strong: var(--panel-line2);
  --radius: 2px;
  --radius-lg: 2px;
  background: var(--panel-card);
  border-color: var(--panel-line2);
  border-radius: 0;
  font-family: var(--font-ui);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 30px 80px rgba(0, 0, 0, 0.8);
}
.modal .m-head,
.modal .m-foot {
  border-color: var(--panel-line);
}
.modal .m-head h3 {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.modal .m-head h3::before {
  content: '// ';
  color: var(--accent);
}
.modal .m-body {
  font-size: 11.5px;
}
.toast-item {
  border-radius: 0;
  background: var(--panel-card2);
  border-color: var(--panel-line2);
  border-left-width: 2px;
  font-family: var(--font-ui);
}
.toast-item b {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.toast-item > span {
  font-size: 11px;
}

/* ---------- scrollbar ---------- */
.layout .content::-webkit-scrollbar,
.layout .nav::-webkit-scrollbar,
.layout .table-wrap::-webkit-scrollbar,
.modal::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.layout .content::-webkit-scrollbar-track,
.layout .nav::-webkit-scrollbar-track,
.layout .table-wrap::-webkit-scrollbar-track,
.modal::-webkit-scrollbar-track {
  background: var(--panel-bg);
}
.layout .content::-webkit-scrollbar-thumb,
.layout .nav::-webkit-scrollbar-thumb,
.layout .table-wrap::-webkit-scrollbar-thumb,
.modal::-webkit-scrollbar-thumb {
  background: var(--panel-line2);
}
.layout .content::-webkit-scrollbar-thumb:hover,
.layout .nav::-webkit-scrollbar-thumb:hover,
.layout .table-wrap::-webkit-scrollbar-thumb:hover,
.modal::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* ---------- responsif ---------- */
@media (max-width: 860px) {
  /* Di bawah ini sidebar tidak lagi menjadi daftar menu, melainkan kepala
     halaman: tombol menu, logo, lalu nama dan tombol keluar. Daftar menu
     pindah ke laci off-canvas — pola yang dipakai GameXaGlobal. Alasannya
     jumlah item: dua belas butir tidak muat di bilah bawah tanpa jadi
     bilah yang terus menggulir, dan operator tidak bisa tahu halaman mana
     yang sedang aktif karena tidak bisa melihat seluruh daftarnya. */
  .layout {
    flex-direction: column;
  }
  .sidebar {
    width: 100%;
    flex: none;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 8px 12px;
    /* Bukan glass, хотя header ini melayang di atas konten yang bergulir.
     * backdrop-filter membuat elemennya menjadi containing block untuk anak
     * position:fixed — dan laci navigasi adalah anak fixed dari sidebar ini.
     * Kalau sidebar jadi containing block, laci terkunci di kotak setinggi
     * header dan tidak pernah menutupi layar. Laci lebih penting dari
     * efek kaca, jadi header ini tetap pekat. */
    background: var(--bg2);
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .nav-toggle {
    display: inline-flex;
  }
  .brand,
  .brand.ada-logo {
    padding: 0;
    border-bottom: 0;
    flex: 1;
    min-width: 0;
  }
  .brand.ada-logo .brand-mark {
    height: 24px;
    max-width: 120px;
  }

  /* Laci. Tertutup di luar layar sampai body punya .nav-open. */
  .nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 60;
    width: 280px;
    max-width: 84vw;
    padding: 14px 8px calc(14px + env(safe-area-inset-bottom));
    background: var(--bg2);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-102%);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    /* pointer-events:none saat tertutup supaya menu di baliknya tidak bisa
       diklik walau masih terlihat sedikit selama animasi. */
    pointer-events: none;
  }
  body.nav-open .nav {
    transform: translateX(0);
    pointer-events: auto;
    box-shadow: 24px 0 60px rgba(0, 0, 0, 0.6);
  }
  /* Laci yang tertutup tidak boleh ikut dibaca pembaca layar sebagai menu
     yang sedang aktif. */
  .nav[aria-hidden='true'] {
    visibility: hidden;
  }
  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(4, 4, 3, 0.66);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s;
  }
  body.nav-open .nav-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  /* Di dalam laci menu kembali ke bentuk daftar vertikal dengan label
     bagiannya — laci punya tinggi penuh, jadi tidak perlu lagi hemat ruang
     seperti di bilah bawah. */
  .nav-group {
    display: block;
  }
  .nav-group-label {
    display: block;
  }
  .nav a {
    flex-direction: row;
    gap: 10px;
    padding: 9px 10px;
    font-size: 13px;
    font-weight: 500;
    white-space: normal;
    margin-bottom: 2px;
  }
  .nav .ico {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
  }
  .side-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 0;
    padding: 0;
    margin-left: auto;
  }
  .side-foot b {
    display: none;
  }
  .btn-logout {
    width: auto;
    margin-top: 0;
    padding: 7px 12px;
  }
  /* Ruang bawah ekstra sudah tidak perlu: tidak ada lagi bilah menu yang
     menempel di bawah, dan area kontennya sudah bergulir sendiri. */
  .content {
    padding: 14px 14px 28px;
  }
  .grid2 {
    grid-template-columns: 1fr;
  }
  .topbar .bal {
    gap: 10px;
    font-size: 12px;
  }
}
@media (max-width: 640px) {
  .topbar {
    height: auto;
    padding: 10px 14px;
    flex-wrap: wrap;
    gap: 6px;
  }
  .topbar h2 {
    font-size: 14px;
  }
  .topbar .bal {
    flex-wrap: wrap;
  }
  .content {
    padding: 10px 10px calc(88px + env(safe-area-inset-bottom));
  }
  .panel-box .head {
    padding: 12px;
  }
  .panel-box .body {
    padding: 12px;
  }
  .toolbar input,
  .toolbar select {
    min-width: 0;
    flex: 1 1 100%;
  }
  pre.code {
    white-space: pre-wrap;
    word-break: break-word;
  }
  .copy-box {
    flex-wrap: wrap;
  }
  .copy-box .mono {
    flex: 1 1 100%;
  }
  .modal .m-body {
    padding: 14px;
  }
  .modal .m-foot {
    flex-wrap: wrap;
    justify-content: stretch;
  }
  .modal .m-foot .btn {
    flex: 1;
    justify-content: center;
  }
  .table-wrap {
    -webkit-overflow-scrolling: touch;
  }
  #toast {
    left: 12px;
    right: 12px;
  }
  .toast-item {
    min-width: 0;
  }
}

/* ---------- Referensi API ----------
   Satu method = satu <details>. Yang terlihat sekaligus hanya nama, penanda
   sifatnya, dan ringkasan satu baris; rinciannya dibuka sesuai kebutuhan.
   Dua puluh lima kartu terbuka sekaligus membuat halaman ini tidak terbaca. */
.api-method {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  margin-bottom: 8px;
  overflow: hidden;
}
.api-method > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 13px;
  cursor: pointer;
  list-style: none;
}
/* Penanda buka-tutup digambar sendiri supaya tidak bergantung pada segitiga
   bawaan peramban, yang bentuknya berbeda-beda dan tidak bisa diberi warna. */
.api-method > summary::-webkit-details-marker {
  display: none;
}
.api-method > summary::before {
  content: '\25B8';
  color: var(--muted);
  font-size: 11px;
  transition: transform 0.12s;
}
.api-method[open] > summary::before {
  transform: rotate(90deg);
}
.api-method > summary:hover {
  background: var(--card2);
}
.api-method[open] > summary {
  border-bottom: 1px solid var(--border);
}
.api-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent2);
}
.api-ringkas {
  flex: 1 1 240px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Begitu dibuka, ringkasan boleh membungkus — dipotong lagi justru
   menyembunyikan keterangan yang sedang dibaca. Di layar sempit ini
   praktis selalu berlaku. */
.api-method[open] .api-ringkas {
  white-space: normal;
}
.api-flag {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--border);
  white-space: nowrap;
}
.api-flag.aman {
  color: var(--green);
  border-color: rgba(69, 209, 138, 0.34);
}
.api-flag.ubah {
  color: var(--yellow);
  border-color: rgba(240, 192, 64, 0.36);
}
.api-flag.role {
  color: var(--purple);
  border-color: rgba(180, 140, 255, 0.36);
}
.api-detail {
  padding: 13px;
}
.api-lbl {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.api-verb {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--card2);
  color: var(--muted);
  border: 1px solid var(--border);
}
.api-verb.v-get {
  color: var(--green);
}
.api-verb.v-post {
  color: var(--yellow);
}
.api-verb.v-put {
  color: var(--purple);
}
.api-verb.v-delete {
  color: var(--red);
}
/* Rujukan silang dari tabel REST ke rincian methodnya. Bukan tautan sungguhan,
   jadi bentuknya dibuat seperti istilah yang bisa diklik. */
.api-link {
  color: var(--accent2);
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.api-link:hover {
  color: var(--accent);
}

/* ---------- Referensi API & kartu: layar sempit ---------- */
/* Ringkasan method dipotong dua baris agar daftar tetap bisa dipindai; begitu
   dibuka, teksnya ditampilkan penuh. Tabel dan pre sudah punya scroll sendiri. */
@media (max-width: 640px) {
  .api-method > summary {
    gap: 6px 8px;
    padding: 10px;
  }
  .api-name {
    font-size: 13px;
  }
  .api-ringkas {
    flex: 1 1 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
  }
  .api-method[open] .api-ringkas {
    display: block;
    overflow: visible;
  }
  .api-detail {
    padding: 10px;
  }
  .api-detail pre.code {
    font-size: 11.5px;
  }
}
/* Dua kartu 190px masih muat di ponsel lebar, tetapi nilai rupiah yang panjang
   jadi terpotong. Di bawah 480px satu kartu per baris lebih terbaca. */
@media (max-width: 480px) {
  .cards {
    grid-template-columns: 1fr;
  }
  .card .val {
    font-size: 20px;
  }
}

/* ---------- Tampilan terminal: penyesuaian layar kecil ---------- */
@media (max-width: 860px) {
  /* Tabel lebar harus punya lebar minimum. Tanpa ini table { width:100% }
     akan mengecil dan membungkus teks, sehingga .table-wrap tidak pernah
     punya isi yang lebih lebar dari layar dan tidak bisa digeser. */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .table-wrap > table:has(th:nth-child(4)),
  .table-wrap > table:has(td:nth-child(4)) {
    min-width: 760px;
  }
  .table-wrap > table:has(th:nth-child(7)),
  .table-wrap > table:has(td:nth-child(7)) {
    min-width: 980px;
  }
  /* Aturan dasar di atas memakai .layout agar tidak menyentuh halaman login.
     Di titik ini sidebar berubah jadi kepala halaman, jadi properti tata
     letaknya harus dikembalikan dengan selector yang sama kuatnya. */
  .layout .sidebar {
    width: 100%;
    flex: none;
    height: auto;
    min-height: 53px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 8px 12px;
    background: var(--panel-bg2);
    border-right: 0;
    border-bottom: 1px solid var(--panel-line);
  }
  .layout .brand {
    flex: 1;
    min-width: 0;
    padding: 0;
    border-bottom: 0;
  }
  .layout .side-foot {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    padding: 0;
    border-top: 0;
  }
  .layout .btn-logout {
    width: auto;
    margin-top: 0;
    padding: 7px 10px;
  }
  .dash-hero {
    flex-direction: column;
    gap: 18px;
    padding: 18px 20px;
  }
  .hero-side {
    width: 100%;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  .hero-balance {
    text-align: left;
  }
  .hero-copy h1 {
    font-size: 25px;
  }
}
@media (max-width: 640px) {
  /* Di ponsel, tabel kecil pun tetap diberi lebar minimum supaya gestur
     geser mendatar selalu tersedia. Tabel 4+ kolom tetap memakai aturan
     yang lebih lebar di atas. */
  .table-wrap > table {
    min-width: 680px;
  }
  .layout .topbar {
    height: auto;
    padding: 10px 14px;
  }
  .layout .topbar h2 {
    font-size: 9.5px;
  }
  .layout .tb-clock {
    display: none;
  }
  .layout .topbar .bal > span + span {
    margin-left: 9px;
    padding-left: 9px;
  }
  .layout .topbar .bal b {
    font-size: 12px;
  }
  .layout .content {
    padding: 14px 12px 30px;
  }
  .dash-hero {
    gap: 16px;
    padding: 16px;
  }
  .hero-copy h1 {
    font-size: 21px;
    letter-spacing: 0.01em;
  }
  .hero-balance strong {
    font-size: 27px;
  }
  .hero-meta {
    gap: 6px 12px;
  }
  .hero-side {
    flex-wrap: wrap;
    gap: 10px;
  }
  .layout .card {
    padding: 13px 14px;
  }
  .layout .card .val {
    font-size: 21px;
  }
  .layout .group-title {
    margin-top: 18px;
  }
}
@media (min-width: 1100px) {
  /* Empat kartu per baris seperti papan kontrol: angka besar tetap terbaca
     dan baris tidak menjadi terlalu panjang untuk dipindai. */
  .layout .stat-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  /* Navigasi ponsel: tiga tombol saja — Dashboard, Top Up di tengah, dan
     Lainnya. Menu lain memakai markup sidebar yang sama; lembar Lainnya hanya
     menampilkannya kembali, jadi penyaringan role dan status aktif tidak perlu
     disalin. Top Up turun ke Launch Game kalau agent belum boleh top up, supaya
     bilah tetap berisi tiga tombol. */
  .layout .nav-toggle,
  .layout .nav-scrim {
    display: none;
  }
  .layout .nav {
    position: fixed;
    top: auto;
    left: 50%;
    bottom: calc(8px + env(safe-area-inset-bottom));
    z-index: 70;
    width: max-content;
    max-width: calc(100vw - 12px);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    padding: 5px;
    border: 1px solid var(--panel-line2);
    background: color-mix(in srgb, var(--panel-bg2) 94%, transparent);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    transform: translateX(-50%);
    transition: none;
    pointer-events: auto;
    visibility: visible;
  }
  body.nav-open .layout .nav {
    transform: translateX(-50%);
  }
  .layout .nav-group {
    display: contents;
  }
  .layout .nav-group-label {
    display: none;
  }
  .layout .nav a {
    display: none;
    flex: 0 0 58px;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    width: 58px;
    min-width: 58px;
    margin: 0;
    padding: 6px 4px;
    border: 0;
    border-left: 0;
    font-size: 7px;
    line-height: 1.15;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
  .layout .nav a.nav-main {
    display: flex;
  }
  .layout .nav a:hover {
    border-left-color: transparent;
  }
  .layout .nav a.active {
    border-left-color: transparent;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    box-shadow: inset 0 -2px 0 var(--accent);
    color: var(--accent);
  }
  .layout .nav .ico {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
  }
  .layout .nav-more {
    display: flex;
    flex: 0 0 58px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 58px;
    min-width: 58px;
    padding: 6px 4px;
    border: 0;
    background: none;
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: 7px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.15;
    text-transform: uppercase;
    cursor: pointer;
  }
  .layout .nav-more .ico {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
  }
  .layout .nav-more:hover,
  .layout .nav-more[aria-expanded='true'] {
    color: var(--accent);
  }
  /* Lembar Lainnya: bilah yang sama melebar ke atas, semua menu lama muncul
     dalam dua kolom. Tirai di belakangnya menutup lembar lewat ketukan di luar
     menu. */
  body.nav-more .layout .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(0, 0, 0, 0.6);
    opacity: 1;
    pointer-events: auto;
  }
  body.nav-more .layout .nav {
    width: calc(100vw - 16px);
    max-width: 440px;
    max-height: min(74vh, 600px);
    flex-wrap: wrap;
    align-content: flex-start;
    padding: 8px;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    background: var(--panel-bg2);
  }
  body.nav-more .layout .nav-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    width: 100%;
  }
  body.nav-more .layout .nav-group-label {
    display: block;
    grid-column: 1 / -1;
    padding: 10px 8px 4px;
    font-family: var(--font-ui);
    font-size: 8px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--faint);
  }
  body.nav-more .layout .nav a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: auto;
    min-width: 0;
    padding: 9px 8px;
    border: 0;
    font-size: 8px;
    line-height: 1.3;
    text-align: left;
    white-space: normal;
  }
  body.nav-more .layout .nav a.active {
    box-shadow: inset 2px 0 0 var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
  }
  body.nav-more .layout .nav .ico {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
  }
  body.nav-more .layout .nav-more {
    flex-direction: row;
    justify-content: center;
    width: 100%;
    margin-top: 6px;
    padding: 11px 8px 8px;
    border-top: 1px solid var(--panel-line);
    color: var(--accent);
  }
  .layout .content {
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }
}
@media (max-width: 640px) {
  .profile {
    margin-left: 8px;
    padding-left: 8px;
  }
  .profile-id {
    display: none;
  }
  .profile-btn {
    gap: 5px;
  }
  .layout .topbar .bal > #tbCode {
    display: none;
  }
  .layout .nav a,
  .layout .nav-more {
    flex-basis: 54px;
    width: 54px;
    min-width: 54px;
    padding: 6px 4px;
    font-size: 6.8px;
  }
  .layout .content {
    padding: 14px 12px calc(90px + env(safe-area-inset-bottom));
  }
  .profile-menu {
    right: -4px;
    min-width: 200px;
  }
}
@media (max-width: 480px) {
  .layout .cards {
    grid-template-columns: 1fr;
  }
  .hero-side {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 640px) {
  /* Topbar ponsel dikunci satu baris: judul di kiri, coin + profil di kanan.
     Sebelumnya jam ikut tampil karena selector lama lebih kuat, sehingga
     judul panjang memaksa bal turun ke baris kedua dan tombol profil
     berpindah. Tinggi tetap dan judul dipotong kalau sempit. */
  .layout .topbar {
    height: 56px;
    padding: 0 12px;
    flex-wrap: nowrap;
    gap: 8px;
  }
  .layout .topbar h2 {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 9.5px;
    white-space: nowrap;
  }
  .layout .topbar .bal {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 0;
  }
  .layout .topbar .bal > .tb-clock,
  .layout .topbar .bal > #tbCode {
    display: none;
  }
  .layout .topbar .bal > span + span {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }
  .profile {
    margin-left: 8px;
    padding-left: 8px;
  }
  .profile-menu {
    right: -4px;
    min-width: 200px;
  }
}

@media (max-width: 360px) {
  /* Di ponsel 320px judul panjang seperti "API DOCUMENTATION" tidak muat
     di samping coin + profil. Prefix dekoratif dilepas dan huruf dirapatkan
     supaya judul utuh, bukan terpotong di tengah kata. */
  .layout .topbar h2 {
    font-size: 9px;
    letter-spacing: 0.14em;
  }
  .layout .topbar h2::before {
    content: none;
  }
}