/* ══════════════════════════════════════════════════════════════
   theme.css — tema FLAT hitam/putih untuk /app.
   Dimuat PALING AKHIR (setelah style.css & enhancements.css).
   Neumorphism (bayangan timbul/tertekan ganda) sudah dihapus total —
   permukaan sekarang rata, dibedakan lewat garis tepi 1px tipis
   (bukan bayangan). Semua aksen warna (biru verified, merah/emas role,
   merah danger, oranye warning, panah hijau dropdown) dinetralkan jadi
   abu netral supaya seluruh antarmuka murni hitam/abu/putih. Hanya
   SATU mode — tidak ada lagi sakelar pagi/malam. Struktur HTML dan
   semua id/onclick di app.js tidak disentuh.
   ══════════════════════════════════════════════════════════════ */

/* ─────────────── 1. token ─────────────── */
:root {
  /* ── hitam/putih murni: bukan lagi tangga abu-abu ──
     Sebelumnya "netral" di sini masih berupa deretan abu bertahap
     (#5c5c62, #807f86, dst) yang secara visual terlihat abu-abu, bukan
     hitam-putih. Sekarang cuma dua warna dasar — #000 dan #fff — dan
     hierarki dibuat lewat opacity putih di atas hitam, bukan lewat hue
     abu yang berdiri sendiri. */
  --g-050: #ffffff;
  --g-100: #ffffff;
  --g-200: rgba(255, 255, 255, .82);
  --g-300: rgba(255, 255, 255, .62);
  --g-400: rgba(255, 255, 255, .46);
  --g-500: rgba(255, 255, 255, .34);
  --g-600: rgba(255, 255, 255, .24);
  --g-700: rgba(255, 255, 255, .16);
  --g-800: #0a0a0a;
  --g-900: #000000;
  --g-950: #000000;

  /* Aksen = putih murni, dipakai hemat untuk teks penting & fokus. */
  --accent-rgb: 255, 255, 255;
  --on-accent: #000000;

  --void: #000000;
  --bg-dark: #000000;
  --bg-darker: #000000;

  --primary: #ffffff;
  --primary-soft: #ffffff;
  --primary-deep: rgba(255, 255, 255, .82);
  --primary-glow: rgba(var(--accent-rgb), .18);
  --aqua: rgba(255, 255, 255, .62);
  /* Verified tetap netral. Warna role sengaja DIKEMBALIKAN berwarna
     (bukan abu semua) supaya tingkatan role langsung kebaca sekilas:
     user = abu, premium = emas, developer = merah. */
  --verified: #ffffff;
  --success: #ffffff;

  --role-color-developer: #ef4444;
  --role-color-premium: #d4af37;
  --role-color-user: #9ca3ab;
  --danger: #ffffff;
  --warning: rgba(255, 255, 255, .82);
  --status-online-color: #ffffff;

  /* nama lama dipertahankan supaya style.css lama tetap jalan */
  --nebula-violet: #ffffff;
  --nebula-magenta: rgba(255, 255, 255, .82);
  --nebula-cyan: rgba(255, 255, 255, .62);

  /* dulu "awan" di belakang kaca; sekarang tidak dipakai (latar rata) */
  --cloud-1: rgba(255, 255, 255, 0);
  --cloud-2: rgba(255, 255, 255, 0);
  --cloud-3: rgba(255, 255, 255, 0);
  --cloud-4: rgba(255, 255, 255, 0);

  /* ── material FLAT: permukaan rata + garis tepi 1px ──
     Dulu neumorphic (dua bayangan gelap/terang mensimulasikan
     timbul/tertekan). Sekarang tidak ada bayangan sama sekali —
     "raised" dan "pressed" cuma beda warna garis tepinya (putih
     transparan di atas hitam), supaya kartu & input tetap bisa
     dibedakan tanpa efek 3D apa pun dan tanpa garis abu solid. */
  --surf: var(--void);
  --surf-raised: 0 0 0 1px var(--g-700);
  --surf-raised-sm: 0 0 0 1px var(--g-700);
  --surf-pressed: inset 0 0 0 1px var(--g-600);
  --surf-pressed-sm: inset 0 0 0 1px var(--g-600);

  /* nama lama ("kaca") dipertahankan dan dipetakan ke material baru,
     supaya setiap selector di bawah & di style.css yang masih
     memakainya otomatis ikut jadi flat tanpa perlu diburu satu-
     satu. */
  --glass-bg: var(--surf);
  --glass-bg-strong: var(--g-900);
  --glass-border: transparent;
  --glass-border-hi: transparent;
  --glass-sheen: rgba(255, 255, 255, .05);
  --border-color: transparent;
  --nav-bg: var(--surf);
  --input-bg: var(--surf);
  --row-bg: var(--surf);
  --accent-bg: rgba(var(--accent-rgb), .10);
  --accent-text: #000000;

  --text-main: #ffffff;
  --text-primary: #ffffff;
  --text-muted: rgba(255, 255, 255, .64);
  --text-secondary: rgba(255, 255, 255, .64);
  --text-faint: rgba(255, 255, 255, .42);

  --font-display: 'Sora', 'Space Grotesk', sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Manrope', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --r-sm: 14px;
  --r-md: 18px;
  --r-lg: 24px;

  color-scheme: dark;
}

/* ─────────────── 2. latar ─────────────── */
/* Neumorphism butuh permukaan RATA satu warna supaya bayangan
   timbul/tertekannya yang jadi fokus — awan & bintang lama dimatikan. */
.app-container::before { display: none !important; }
.app-container::after { display: none !important; }
.app-container { box-shadow: none; background: var(--void); }

/* ─────────────── 3. bingkai & tata letak ─────────────── */
@media (min-width: 640px) {
  body { padding: 28px 20px; }
  .app-container {
    width: 100%;
    max-width: 540px;
    min-height: 760px;
    max-height: min(940px, calc(100vh - 56px));
    border-radius: 26px;
    border: none;
    box-shadow: var(--surf-raised), 0 40px 100px rgba(0, 0, 0, .5);
  }
}

/* Layar lebar: dasbor jadi dua kolom, bukan satu pita sempit. */
@media (min-width: 1100px) {
  .app-container { max-width: 1080px; max-height: min(980px, calc(100vh - 56px)); }

  .dashboard-content { max-width: 980px; padding: 26px 32px 44px; gap: 14px; }

  .dashboard-stack {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    align-items: start;
    gap: 14px;
  }
  .dashboard-stack .terminal-card { grid-column: 1 / -1; }
  .dashboard-stack .terminal-body { max-height: 260px; }

  /* Panel koneksi berdampingan dengan kartu status, bukan menumpuk. */
  #dashboard-content > .glass-card.action-card,
  #dashboard-content > .glass-card.pairing-card { max-width: 560px; margin-inline: auto; }

  /* ── Bot Config dua kolom ── */
  #config-content { max-width: 980px; }
  #config-content .form-row { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
  #cfg-features-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 12px;
  }
  #cfg-features-container .cfg-group { margin: 0; }
  .config-actions { flex-direction: row; }
}

/* Efek arahkan-kursor hanya untuk perangkat yang punya penunjuk asli;
   di layar sentuh, hover menempel setelah disentuh. */
@media (hover: hover) and (pointer: fine) {
  .glass-card { transition: box-shadow .25s ease, transform .25s ease; }
  .glass-card:hover { box-shadow: var(--surf-raised); }
}

/* ══════════════════════════════════════════════════════════════
   UKURAN LINTAS PERANGKAT
   Sebelumnya hanya ada dua keadaan: lebar penuh (ponsel) dan bingkai
   540px, lalu melompat ke 1080px di 1100px. Akibatnya di laptop kecil
   (900-1100px) panel tetap 540px -- terlihat sempit -- dan halaman
   login menampilkan kartu 450px di tengah bingkai 1080px yang kosong.
   Blok ini mengisi jenjang yang hilang itu.
   ══════════════════════════════════════════════════════════════ */

/* ── tablet & laptop kecil: jangan tertahan di 540px ── */
@media (min-width: 900px) {
  .app-container { max-width: 760px; max-height: min(900px, calc(100vh - 56px)); }
  .dashboard-content { max-width: 700px; padding: 24px 28px 40px; }
}

/* ── desktop: pakai lebar layar yang tersedia, bukan angka mati ──
   min() menjaga agar di layar sempit tetap ada napas di tepi, dan di
   layar lebar tidak melar sampai baris teks jadi sulit dibaca. */
@media (min-width: 1100px) {
  .app-container {
    max-width: min(1180px, calc(100vw - 64px));
    max-height: calc(100vh - 48px);
  }
  /* Wajib dinyatakan ulang di sini: blok 900px di atas berada SETELAH
     blok 1100px asli, jadi tanpa baris ini nilai 700px dari blok 900px
     yang menang di layar desktop dan isi dasbor jadi sempit lagi. */
  .dashboard-content { max-width: 1040px; padding: 26px 32px 44px; }
  #config-content { max-width: 1040px; }
}
@media (min-width: 1500px) {
  .app-container {
    max-width: min(1360px, calc(100vw - 96px));
    max-height: calc(100vh - 56px);
  }
  .dashboard-content { max-width: 1180px; padding: 32px 44px 56px; }
  #config-content { max-width: 1180px; }
}

/* ══ halaman login di layar lebar ══
   Kartu 450px di tengah bingkai selebar 1080px membuat halaman terasa
   kosong. Di desktop halaman dipecah dua: panel penjelasan di kiri,
   formulir di kanan. Panel kiri TIDAK dirender di ponsel. */
.auth-aside { display: none; }

@media (min-width: 1000px) {
  #auth-screen {
    display: grid;
    /* Kolom diberi ukuran pasti lalu seluruh gridnya yang dipusatkan
       lewat justify-content. Ini penting: #auth-screen memakai
       position:absolute (dari .screen), sehingga max-width +
       margin:auto tidak akan memusatkannya. */
    grid-template-columns: minmax(0, 480px) minmax(380px, 430px);
    justify-content: center;
    align-content: center;
    gap: 56px;
    padding: 40px 48px;
    overflow-y: auto;
  }

  .auth-aside {
    display: block;
    min-width: 0;
  }
  .auth-aside-mark {
    width: 58px; height: 58px;
    border-radius: 18px;
    display: grid; place-items: center;
    background: var(--surf);
    box-shadow: var(--surf-raised-sm);
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: 26px;
  }
  .auth-aside h2 {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 2.6vw, 2.6rem);
    line-height: 1.12;
    letter-spacing: -.025em;
    max-width: 13ch;
  }
  .auth-aside p {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.6;
    margin-top: 16px;
    max-width: 42ch;
  }
  .auth-aside-list {
    list-style: none;
    margin-top: 28px;
    display: grid;
    gap: 11px;
  }
  .auth-aside-list li {
    position: relative;
    padding-left: 24px;
    color: var(--text-secondary);
    font-size: .92rem;
  }
  .auth-aside-list li::before {
    content: "";
    position: absolute;
    left: 3px; top: .45em;
    width: 10px; height: 5px;
    border-left: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    transform: rotate(-45deg);
  }

  /* Kartu formulir tidak lagi dipaksa ke tengah; ia mengisi kolom
     kanan, jadi ukurannya terasa sepadan dengan panel kiri. */
  .auth-card { max-width: none; }

  /* Bingkai halaman login dibuat sedikit lebih sempit dari dasbor;
     tingginya sengaja TIDAK diubah, karena isi satu-satunya
     (#auth-screen) diposisikan absolut -- kalau min-height dilepas,
     bingkainya kolaps. */
  .app-container:has(#auth-screen) { max-width: 1120px; }
}

/* ══ pemilih bahasa di topbar dasbor ══
   Sakelar pagi/malam sudah dihapus total — hanya satu tema neumorphic
   yang tersisa, jadi topbar sekarang cuma berisi tombol bahasa. */
.topbar-actions { display: flex; align-items: center; gap: 10px; }

.lang-btn {
  display: flex; align-items: center; gap: 6px; flex: none;
  height: 32px; padding: 0 10px 0 8px; border-radius: 999px;
  border: none;
  background: var(--surf);
  box-shadow: var(--surf-raised-sm);
  color: var(--text-muted); cursor: pointer; font: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: color .25s ease, box-shadow .18s ease;
}
.lang-btn:hover { color: var(--text-main); }
.lang-btn:active { box-shadow: var(--surf-pressed-sm); }
.lang-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.lang-btn svg {
  width: 15px; height: 15px; flex: none; fill: none;
  stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.lang-code {
  font-family: var(--font-mono); font-size: .7rem;
  font-weight: 500; letter-spacing: .04em; line-height: 1;
}
@media (max-width: 380px) {
  .lang-btn { height: 29px; padding: 0 8px 0 7px; gap: 4px; }
  .lang-code { font-size: .66rem; }
}

/* ─────────────── 4. tipografi ─────────────── */
body { font-family: var(--font-body); letter-spacing: -.005em; }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -.02em; }
.glass-card h3 { font-size: .98rem; font-weight: 600; line-height: 1.35; }
.subtitle { font-size: .84rem; line-height: 1.6; color: var(--text-muted); margin: 6px 0 16px; }
.form-group label { font-size: .78rem; font-weight: 500; color: var(--text-muted); }
code, kbd, .pairing-code, .terminal-body, .cfg-json-editor { font-family: var(--font-mono); }

/* ─────────────── 5. kartu neumorphic ─────────────── */
/* Dulu "kartu kaca" (transparan + blur). Sekarang permukaan RATA
   berwarna sama dengan latarnya, timbul hanya lewat sepasang bayangan
   — gelap di kanan-bawah, terang tipis di kiri-atas. */
.glass-card {
  background: var(--surf);
  border: none;
  border-radius: var(--r-lg);
  padding: 20px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--surf-raised);
  transition: box-shadow .22s ease, transform .22s ease;
}

/* Garis cahaya tipis di tepi atas dimatikan — neumorphism dibaca dari
   bayangannya, garis tambahan justru mengaburkan efek timbulnya. */
.glass-card::before { display: none; }

/* Kartu "menekan sedikit" saat disentuh alih-alih menyala di tepi —
   konsisten dengan bahasa timbul/tertekan neumorphism. */
.glass-card:hover {
  transform: none;
  box-shadow: var(--surf-raised);
}

.card-quiet { background: var(--g-900); box-shadow: var(--surf-pressed-sm); }
.dashboard-content { padding: 20px 18px 36px; gap: 12px; }
.dashboard-stack { gap: 12px; }
.dashboard-stack .stack-item { padding: 16px; }
.dashboard-stack .stack-item h3 { font-size: .9rem; }

/* ─────────────── 6. label bagian ─────────────── */
.section-label {
  margin-top: 26px;
  margin-bottom: 4px;
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--text-faint);
}
.section-label i { color: var(--primary); opacity: .85; }
.section-label::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, .06), transparent);
}

/* ─────────────── 7. topbar ─────────────── */
.topbar {
  padding: 14px 18px;
  background: var(--surf);
  border-bottom: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.avatar {
  width: 40px; height: 40px;
  border-radius: 13px;
  background: var(--surf);
  color: var(--primary);
  font-size: 1.1rem;
  box-shadow: var(--surf-raised-sm);
}
#display-username { font-size: .95rem; font-weight: 600; }

.hamburger-btn { border-radius: 12px; border: none; background: var(--surf); box-shadow: var(--surf-raised-sm); }
.hamburger-btn:hover { box-shadow: var(--surf-pressed-sm); }
.hamburger-menu {
  border-radius: var(--r-md);
  border: none;
  background: var(--g-900);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--surf-raised);
}
.hamburger-menu a { border-radius: var(--r-sm); font-size: .88rem; }
.hamburger-menu a i { color: var(--text-muted); width: 18px; text-align: center; }
.hamburger-menu a:hover i { color: var(--primary); }
.hamburger-menu a.danger:hover i { color: var(--danger); }

/* ─────────────── 8. tombol ─────────────── */
/* Primary (termasuk tombol Login/Register/Connect) = putih solid,
   tanpa gradien, tanpa neumorphism — hanya garis tepi 1px. */
.btn-primary,
.btn-connect,
button.primary {
  background: var(--surf);
  color: #fff;
  border: none;
  border-radius: 13px;
  font-family: var(--font-body);
  font-weight: 600;
  box-shadow: var(--surf-raised-sm);
  transition: box-shadow .18s ease, transform .18s ease, color .18s ease;
}
.btn-primary:hover,
.btn-connect:hover,
button.primary:hover {
  transform: translateY(-1px);
  color: #fff;
}
.btn-primary:active,
.btn-connect:active,
button.primary:active { transform: translateY(0); box-shadow: var(--surf-pressed-sm); }
.btn-primary:disabled { opacity: .5; box-shadow: none; cursor: not-allowed; filter: none; }

.btn-ghost {
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 500;
  border-radius: 12px;
  padding: 10px 18px;
  color: var(--text-main);
  border: none;
  background: var(--surf);
  box-shadow: var(--surf-pressed-sm);
}
.btn-ghost:hover { color: var(--primary); }
.btn-ghost:active { box-shadow: var(--surf-pressed-sm); }
.btn-ghost.danger { color: var(--danger); }
.btn-ghost.danger:hover { color: var(--danger); }

.btn-danger {
  background: var(--surf);
  color: var(--danger);
  border: none;
  border-radius: 13px;
  font-family: var(--font-body);
  font-weight: 600;
  box-shadow: var(--surf-raised-sm);
}
.btn-danger:hover { box-shadow: var(--surf-pressed-sm); }

.btn-icon { border-radius: 10px; color: var(--text-muted); background: transparent; }
.btn-icon:hover { color: var(--primary); background: var(--surf); box-shadow: var(--surf-pressed-sm); }

/* ─────────────── 9. input ─────────────── */
/* Input "terukir" ke dalam permukaan (bayangan inset) — kebalikan
   dari tombol yang timbul, supaya area yang bisa diketik terasa
   seperti lekukan, bukan tombol yang bisa ditekan. */
.cfg-input,
.session-select,
.admin-user-search-input,
.cfg-search-group input,
.phone-input input,
.input-group input {
  border-radius: 12px;
  border: none;
  background: var(--surf);
  box-shadow: var(--surf-pressed-sm);
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: .88rem;
  transition: box-shadow .18s ease;
}
input:focus, textarea:focus, select:focus, .cfg-input:focus {
  box-shadow: var(--surf-pressed-sm), 0 0 0 2px rgba(var(--accent-rgb), .35);
  background: var(--surf);
}
::placeholder { color: var(--text-faint); }
textarea.cfg-input { line-height: 1.6; resize: vertical; }

/* Panah dropdown sendiri, karena appearance:none menghapus bawaan. */
select.cfg-input,
.session-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a6a7ac' stroke-width='2.2' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 15px;
  padding-right: 40px;
}
.phone-input .country-code {
  border-radius: 12px;
  border: none;
  background: var(--surf);
  box-shadow: var(--surf-pressed-sm);
  color: var(--primary);
}
.cfg-search-group i { color: var(--primary); opacity: .7; }

/* ─────────────── 10. sakelar ─────────────── */
/* Track tetap terukir (pressed); begitu dinyalakan, "thumb"-nya yang
   timbul (raised), bukan track-nya yang berubah warna terang. */
.switch .slider { background-color: var(--surf); box-shadow: var(--surf-pressed-sm); }
.switch .slider:before { box-shadow: var(--surf-raised-sm); }
.switch input:checked + .slider {
  background: var(--surf);
  border-color: transparent;
  box-shadow: var(--surf-pressed-sm), 0 0 0 2px rgba(var(--accent-rgb), .3);
}
.toggle-row { border-radius: 10px; font-size: .86rem; padding: 12px 8px; }
.toggle-row:hover { background: var(--surf); box-shadow: var(--surf-pressed-sm); }
.toggle-row.is-on { box-shadow: inset 2px 0 0 var(--primary); }
.toggle-state-text { font-family: var(--font-body); font-size: .7rem; color: var(--text-faint); }
.toggle-row.is-on .toggle-state-text { color: var(--primary); }

/* ─────────────── 11. status & sesi ─────────────── */
.session-row {
  font-family: var(--font-body);
  font-size: .86rem;
  padding: 12px 0;
  border-bottom-color: rgba(0, 0, 0, .35);
}
.session-row span { color: var(--text-muted); }
.session-row strong { font-family: var(--font-mono); font-size: .84rem; font-weight: 500; }
.status-online { text-shadow: none; }

.status-badge { font-family: var(--font-body); font-size: .72rem; font-weight: 600; background: var(--surf); box-shadow: var(--surf-pressed-sm); }
.status-badge.online { color: var(--primary); }

.session-tabs-counter {
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--text-faint);
  padding: 3px 10px;
  border-radius: 99px;
  border: none;
  background: var(--surf);
  box-shadow: var(--surf-pressed-sm);
}

/* ─────────────── 12. terminal ─────────────── */
/* Tinggi terminal dikunci permanen — kotaknya tidak ikut memanjang atau
   memendek saat log bertambah/dibersihkan, jadi kartu di bawahnya tidak
   pernah bergeser. Isinya yang menggulir di dalam. Kotaknya sendiri
   terukir ke dalam kartu, seperti layar tertanam. */
.terminal-body,
.dashboard-stack .terminal-body {
  height: 240px;
  min-height: 240px;
  max-height: 240px;
  overflow-y: auto;
  overflow-x: hidden;
  resize: none;
  border-radius: 13px;
  background: var(--g-950);
  border: none;
  box-shadow: var(--surf-pressed);
}
.terminal-card { flex: none; }
.terminal-output {
  font-family: var(--font-mono);
  font-size: .74rem;
  line-height: 1.7;
  color: #ffffff;
}
.terminal-live-dot { box-shadow: 0 0 8px var(--primary); }

/* ─────────────── 13. pairing & QR ─────────────── */
.pairing-card {
  background: var(--surf);
  border: none;
  box-shadow: var(--surf-raised);
}
.pairing-code {
  background: none;
  color: #fff;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: initial;
  filter: none;
  font-size: 2.1rem;
  font-weight: 600;
  letter-spacing: 7px;
}
.instruction { font-size: .8rem; color: var(--text-faint); }
.qr-code-wrap img { border-radius: 14px; padding: 12px; background: #fff; box-shadow: var(--surf-raised-sm); }
.loader { border-top-color: #fff; }

/* ─────────────── 14. Bot Config ─────────────── */
/* Tombol simpan/reset menempel di atas saat menggulir daftar setting
   yang panjang — tidak perlu scroll balik ke atas untuk menyimpan. */
.config-actions {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 10px 4px;
  margin: -4px -4px 0;
  background: var(--surf);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: var(--r-sm);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .35);
}

.config-back-btn { border-radius: 12px; font-size: .84rem; color: var(--text-muted); }
.config-back-btn:hover { color: var(--primary); }

.cfg-group {
  /* app.js menyuntik --cfg-group-hue; lightness dinaikkan supaya semua
     warna kategori keluar sebagai nada muda, bukan tua. */
  --group-color: hsl(var(--cfg-group-hue, 146), 85%, 70%);
  border-radius: var(--r-md);
  background: var(--surf);
  border: none;
  box-shadow: var(--surf-raised-sm);
}
.cfg-group summary.cfg-group-label { padding: 14px 15px; }
.cfg-group-title { font-family: var(--font-display); font-size: .87rem; font-weight: 600; }
.cfg-group-count {
  font-family: var(--font-mono);
  background: var(--surf);
  color: var(--primary);
  border: none;
  box-shadow: var(--surf-pressed-sm);
}
.cfg-group-body { padding: 4px 15px 12px; }
.cfg-group-label { color: var(--text-faint); font-size: .68rem; letter-spacing: .14em; }

.cfg-features-toolbar {
  padding: 10px 2px 4px;
  border-bottom: 1px solid rgba(0, 0, 0, .35);
  margin-bottom: 8px;
}
.cfg-features-toolbar-summary { font-family: var(--font-mono); font-size: .72rem; color: var(--text-faint); }
.cfg-toolbar-btn {
  border-radius: 9px;
  font-size: .73rem;
  background: var(--surf);
  border: none;
  box-shadow: var(--surf-raised-sm);
}
.cfg-toolbar-btn:hover { color: var(--primary); box-shadow: var(--surf-pressed-sm); }

.cfg-allowedgroup-list { border-radius: var(--r-sm); }
.cfg-json-editor { border-radius: 12px; font-size: .76rem; background: var(--g-950); color: #ffffff; box-shadow: var(--surf-pressed-sm); }

/* ─────────────── 15. modal ─────────────── */
.modal-overlay { background: rgba(0, 0, 0, .6); backdrop-filter: none; }
.modal-card {
  border-radius: 22px;
  border: none;
  background: var(--g-900);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--surf-raised);
}
.modal-header { padding-bottom: 12px; border-bottom: 1px solid rgba(0, 0, 0, .35); }
.modal-header h3 { font-size: 1rem; }
.modal-header h3 i { color: var(--primary); margin-right: 6px; }
.accordion-toggle { border-radius: 11px; font-size: .88rem; }
.info-cell {
  border-radius: 13px;
  background: var(--surf);
  border: none;
  box-shadow: var(--surf-pressed-sm);
}
.info-cell i { color: var(--primary); opacity: .8; }
.info-label { color: var(--text-faint); font-size: .68rem; letter-spacing: .06em; }
.info-value { font-size: .84rem; }
.info-value-mono { font-family: var(--font-mono); font-size: .74rem; }
.profile-avatar { box-shadow: var(--surf-raised); }

/* ─────────────── 16. daftar user & admin ─────────────── */
.user-name-chip,
.admin-user-row,
.role-session-limit-row {
  border-radius: 13px;
  border: none;
  background: var(--surf);
  box-shadow: var(--surf-pressed-sm);
  transition: box-shadow .2s ease;
}
.user-name-chip:hover,
.admin-user-row:hover { box-shadow: var(--surf-raised-sm); }
.role-badge, .role-toggle-chip { border-radius: 99px; font-size: .68rem; letter-spacing: .04em; }

/* Centang terverifikasi — dulu biru bercahaya, sekarang putih abu netral
   polos tanpa glow warna, konsisten dengan seluruh tema hitam/putih. */
.verified-badge,
.user-name-chip .verified-badge,
#profile-username .verified-badge {
  color: var(--verified);
  filter: none;
}

/* ─────────────── 17. status pesan & detail ─────────────── */
.cfg-status { font-family: var(--font-body); font-size: .82rem; padding: 8px 5px 14px; }
.cfg-status.success { color: var(--primary); }
.cfg-status.error { color: var(--danger); }
.error-msg { font-size: .8rem; color: var(--danger); }
#toast-stack { z-index: 400; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--g-600); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--g-500); }
::selection { background: rgba(var(--accent-rgb), .3); color: var(--text-main); }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ─────────────── 18. hormati preferensi gerak minimal ─────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ─────────────── 19. netralisasi warna sisa (paksa hitam-putih) ───────────────
   Beberapa selector di style.css menulis warnanya langsung (bukan lewat
   var()), jadi tidak ikut berubah walau token di atas sudah dinetralkan.
   Overridenya diulang di sini — bagian pelangi role "lgbt" SENGAJA tidak
   disentuh, itu penanda identitas, bukan bagian dari palet tema. */
.btn-ghost.danger,
.btn-ghost.danger:hover,
.admin-delete-btn:hover,
.admin-session-delete-inactive-btn:hover {
  color: var(--g-050);
  border-color: var(--g-600);
  background: transparent;
}
.admin-verify-btn.active { color: var(--g-050); filter: none; }
.terminal-line.level-error { color: var(--g-050); }
.terminal-line.level-warn { color: var(--g-200); }

/* ══════════════════════════════════════════════════════════════
   20. GLASSMORPHISM DARK/WHITE + AKSEN WARNA
   Diletakkan paling akhir supaya menang atas aturan flat/netral di
   atas (aturan belakang menang kalau spesifisitasnya sama). Yang
   diubah cuma 4 hal sesuai permintaan:
   1) kartu balik jadi kaca (blur + transparan) di atas dasar gelap,
      bukan permukaan rata hitam/putih;
   2) logo/ikon WhatsApp jadi hijau;
   3) tombol Login/Register/Kode/QR jadi hijau (bukan abu-abu);
   4) centang verified balik jadi biru bercahaya.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Centang verified: biru bercahaya (bukan putih/abu netral lagi). */
  --verified: #3b82f6;

  /* Aksen hijau WhatsApp — dipakai tombol utama, logo, avatar, tab aktif. */
  --accent-rgb: 37, 211, 102;
  --accent-bg: linear-gradient(135deg, #25d366, #0eab6f);
  --accent-text: #ffffff;
  --wa-green: #25d366;

  /* Token kaca dikembalikan jadi transparan + blur (bukan rata). */
  --glass-bg: rgba(18, 20, 22, .55);
  --glass-bg-strong: rgba(12, 14, 16, .74);
  --glass-border: rgba(255, 255, 255, .14);
  --glass-border-hi: rgba(255, 255, 255, .24);
  --glass-sheen: rgba(255, 255, 255, .12);
  --border-color: rgba(255, 255, 255, .12);
  --nav-bg: rgba(10, 10, 12, .62);
  --input-bg: rgba(255, 255, 255, .05);
  --row-bg: rgba(255, 255, 255, .035);

  /* Awan lembut di belakang kaca: putih + secuil hijau, bukan pelangi. */
  --cloud-1: rgba(255, 255, 255, .10);
  --cloud-2: rgba(37, 211, 102, .10);
  --cloud-3: rgba(255, 255, 255, .07);
  --cloud-4: rgba(37, 211, 102, .07);
}

/* Nyalakan lagi awan blur di belakang panel (dimatikan di bagian 2 di
   atas) supaya ada sesuatu untuk "dikacakan" oleh backdrop-filter. */
.app-container::before,
.app-container::after { display: block !important; }
.app-container { background: var(--bg-dark); box-shadow: none; }

/* Kartu = kaca sungguhan: dasar gelap tembus pandang + blur + garis
   tepi putih tipis, bukan lagi permukaan rata bertekstur "timbul". */
.glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .45), inset 0 1px 0 var(--glass-sheen);
}
.glass-card:hover {
  border-color: var(--glass-border-hi);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5), inset 0 1px 0 var(--glass-sheen), 0 0 24px rgba(var(--accent-rgb), .12);
}
.card-quiet { background: var(--glass-bg-strong); box-shadow: inset 0 0 0 1px var(--glass-border); }

.topbar,
.hamburger-menu,
.modal-card,
.config-actions {
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--glass-border);
}
.modal-overlay { backdrop-filter: blur(4px); }

/* Tombol Login / Register / Get Pairing Code (Kode) / Get Scan QR /
   Connect — hijau WhatsApp, bukan abu-abu lagi. */
.btn-primary,
.btn-connect,
button.primary {
  background: var(--accent-bg);
  color: var(--accent-text);
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), .35);
}
.btn-primary:hover,
.btn-connect:hover,
button.primary:hover {
  color: var(--accent-text);
  box-shadow: 0 8px 26px rgba(var(--accent-rgb), .5);
}
.btn-primary:active,
.btn-connect:active,
button.primary:active { box-shadow: 0 4px 14px rgba(var(--accent-rgb), .35); }

/* Tab "Login/Register" & "Kode/QR" yang aktif ikut hijau bercahaya. */
.tab.active { box-shadow: 0 4px 16px rgba(var(--accent-rgb), .35); }

/* Logo & avatar WhatsApp (ikon fa-whatsapp) jadi hijau. */
.logo i,
.auth-aside-mark,
.avatar,
.profile-avatar,
.user-name-chip-avatar {
  background: var(--accent-bg);
  color: var(--accent-text);
  box-shadow: 0 0 24px rgba(var(--accent-rgb), .4);
}

/* Centang terverifikasi balik jadi biru bercahaya (bukan putih polos). */
.verified-badge,
.user-name-chip .verified-badge,
#profile-username .verified-badge {
  color: var(--verified);
  filter: drop-shadow(0 0 4px rgba(59, 130, 246, .55));
}

/* Kode pairing & bingkai QR disenadakan dengan hijau tombol di atasnya. */
.pairing-code { color: var(--wa-green); text-shadow: 0 0 18px rgba(var(--accent-rgb), .45); }
.qr-code-wrap img { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .3), var(--surf-raised-sm); }