* { box-sizing: border-box; }
body { margin:0; font-family: 'Segoe UI', Arial, sans-serif; background:#0f1117; color:#e6e8ee; }
.screen { min-height:100vh; }

/* ---- AUTH ---- */
#authScreen { display:flex; align-items:center; justify-content:center; }
.auth-card { background:#171a22; padding:32px; border-radius:14px; width:360px; max-width:92vw; box-shadow:0 10px 40px rgba(0,0,0,.4); }
.auth-card h1 { text-align:center; margin:0 0 20px; color:#6ea8fe; }
.tabs { display:flex; margin-bottom:18px; border-radius:8px; overflow:hidden; border:1px solid #2a2f3b; }
.tab-btn { flex:1; padding:10px; background:#1b1f29; color:#aab; border:none; cursor:pointer; }
.tab-btn.active { background:#6ea8fe; color:#0f1117; font-weight:600; }
.auth-form input { width:100%; padding:11px 12px; margin-bottom:10px; border-radius:8px; border:1px solid #2a2f3b; background:#0f1117; color:#fff; }
.ts-box { display:none; }
.ts-box.on { display:flex; justify-content:center; min-height:65px; margin:2px 0 10px; }
.auth-form button { width:100%; padding:11px; border:none; border-radius:8px; background:#6ea8fe; color:#0f1117; font-weight:700; cursor:pointer; }
.msg { color:#ff8585; min-height:18px; font-size:13px; margin-top:6px; }
.reg-otp { margin-bottom:10px; }
.reg-otp-info { font-size:13px; line-height:1.45; color:#9fc3ff; margin:0 0 8px; word-break:break-word; }
.auth-form #regOtp { text-align:center; letter-spacing:6px; font-size:18px; font-weight:700; }
.auth-form #regOtp::placeholder { letter-spacing:normal; font-size:14px; font-weight:400; }
.auth-form button.reg-otp-resend { width:auto; padding:4px 0; margin:0; background:none; color:#6ea8fe; font-weight:600; font-size:13px; }
.auth-form button.reg-otp-resend:disabled { color:#7a8294; cursor:default; }
html[data-theme="light"] .reg-otp-info { color:#2f6fe4; }

/* ---- APP LAYOUT ---- */
.topbar { display:flex; align-items:center; gap:14px; padding:12px 18px; background:#171a22; border-bottom:1px solid #262b36; position:sticky; top:0; z-index:10; }
.brand { font-weight:800; color:#6ea8fe; }
.balance-box { margin-left:auto; font-weight:600; background:#0f1117; padding:8px 34px; min-width:150px; text-align:center; border-radius:20px; border:1px solid #262b36; cursor:pointer; }
.balance-box:active { background:#171a22; }
.balance-box .sep { color:#555; margin:0 6px; }
.btn-ghost { background:transparent; border:1px solid #333; color:#ddd; padding:7px 14px; border-radius:8px; cursor:pointer; }

.navtabs { display:flex; gap:6px; padding:10px 18px; background:#12141c; overflow-x:auto; }
.nav-btn { background:#1b1f29; border:1px solid #262b36; color:#ccc; padding:8px 16px; border-radius:20px; cursor:pointer; white-space:nowrap; }
.nav-btn.active { background:#6ea8fe; color:#0f1117; font-weight:700; border-color:#6ea8fe; }

main { padding:18px; max-width:900px; margin:0 auto; }
.view { display:none; }
.view.active { display:block; }

.server-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.server-tabs button { background:#1b1f29; border:1px solid #262b36; color:#ccc; padding:8px 16px; border-radius:8px; cursor:pointer; }
.server-tabs button.active { background:#22c55e; color:#06240f; font-weight:700; border-color:#22c55e; }

.card { background:#171a22; border:1px solid #262b36; border-radius:12px; padding:18px; margin-bottom:16px; }
.card h3 { margin-top:0; }
.field-row { margin-bottom:12px; }
.field-row label { display:block; margin-bottom:5px; font-size:13px; color:#9aa; }
select, input[type=number], input[type=text], input[type=email] { width:100%; padding:9px 10px; border-radius:8px; border:1px solid #2a2f3b; background:#0f1117; color:#fff; }
.price-box { background:#0f1117; border:1px solid #262b36; padding:10px 14px; border-radius:8px; margin-bottom:12px; }
.btn-primary { background:#6ea8fe; color:#0f1117; border:none; padding:11px 20px; border-radius:8px; font-weight:700; cursor:pointer; }
.btn-primary:disabled { opacity:.45; cursor:not-allowed; }
.btn-sm { padding:6px 10px; font-size:12px; border-radius:6px; border:1px solid #333; background:#1b1f29; color:#ddd; cursor:pointer; }
.btn-danger { background:#3a1620; color:#ff8585; border-color:#5a2230; }

.table { width:100%; border-collapse:collapse; margin-top:10px; font-size:13px; }
.table th, .table td { padding:8px 10px; border-bottom:1px solid #262b36; text-align:left; }
.table th { color:#9aa; font-weight:600; }

.badge { padding:3px 9px; border-radius:20px; font-size:11px; font-weight:700; }
.badge.pending { background:#3a331a; color:#ffd166; }
.badge.received, .badge.success { background:#123a22; color:#22c55e; }
.badge.cancelled, .badge.expired { background:#3a1620; color:#ff6b6b; }

.admin-tabs { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.admin-tab-btn { background:#1b1f29; border:1px solid #262b36; color:#ccc; padding:8px 14px; border-radius:8px; cursor:pointer; }
.admin-tab-btn.active { background:#f97316; color:#2a1400; font-weight:700; border-color:#f97316; }
.admin-tab-content { display:none; }
.admin-tab-content.active { display:block; }

.qr-box { text-align:center; }
.qr-box img { max-width:220px; background:#fff; padding:10px; border-radius:10px; }
.otp-box { background:#0f1117; border:2px dashed #22c55e; padding:16px; border-radius:10px; text-align:center; font-size:22px; font-weight:800; color:#22c55e; margin-top:10px; }

/* ===== Grid pilih layanan/negara/operator (chip grid, mengganti dropdown) ===== */
.chip-section { margin-bottom:16px; }
.chip-section .sec-label { font-size:12px; color:#9aa; margin-bottom:8px; display:flex; justify-content:space-between; }
.chip-grid { display:flex; flex-wrap:wrap; gap:8px; max-height:260px; overflow-y:auto; padding:2px; }
.chip { background:#1b1f29; border:1px solid #262b36; color:#ddd; padding:10px 16px; border-radius:22px; cursor:pointer; font-size:13px; display:flex; align-items:center; gap:7px; transition:.15s; box-shadow:0 1px 2px rgba(0,0,0,.25); }
.chip:hover { border-color:#3a4150; }
.chip.selected { background:rgba(110,168,254,.15); border-color:#6ea8fe; color:#6ea8fe; font-weight:700; box-shadow:0 0 0 1px #6ea8fe inset; }
.chip .flag { font-size:16px; }
.chip .chip-sub { font-size:10px; color:#22c55e; font-weight:700; margin-left:2px; }
.price-tile.soldout { opacity:.45; cursor:not-allowed; }
.chip-search { width:100%; margin-bottom:8px; padding:8px 10px; border-radius:8px; border:1px solid #2a2f3b; background:#0f1117; color:#fff; font-size:13px; }

/* Grid harga/stok — 3 kolom biar tidak jadi daftar panjang ke bawah */
.price-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; max-height:300px; overflow-y:auto; padding:2px; }
@media (max-width:480px) { .price-grid { grid-template-columns:repeat(2, 1fr); } }
.price-tile { background:#1b1f29; border:1px solid #262b36; border-radius:16px; padding:10px 8px; text-align:center; cursor:pointer; transition:.15s; box-shadow:0 1px 2px rgba(0,0,0,.25); }
.price-tile:hover { border-color:#3a4150; }
.price-tile.selected { background:rgba(34,197,94,.12); border-color:#22c55e; }
.price-tile .pt-price { font-weight:800; color:#22c55e; font-size:14px; }
.price-tile .pt-stock { font-size:10px; color:#9aa; margin-top:3px; }

.qty-row { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.qty-btn { width:34px; height:34px; border-radius:8px; border:1px solid #2a2f3b; background:#1b1f29; color:#fff; font-size:18px; cursor:pointer; }
.qty-val { min-width:36px; text-align:center; font-weight:700; }

/* ===== Kartu Order Aktif (gaya seperti panel OTP: ID, status, timer, copy) ===== */
.order-card { background:#111522; border:1px solid #22314a; border-radius:14px; padding:18px; position:relative; overflow:hidden; }
.order-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#22c55e,#6ea8fe); }
.order-card-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.order-id { font-weight:800; font-size:18px; color:#6ea8fe; }
.order-timer { font-weight:700; color:#9aa; font-variant-numeric:tabular-nums; }
.order-row { margin-bottom:14px; }
.order-row .orl-label { font-size:11px; color:#9aa; letter-spacing:.05em; margin-bottom:4px; }
.order-val-copy { display:flex; align-items:center; gap:10px; }
.order-val-copy .val { font-size:18px; font-weight:800; }
.copy-btn { background:#1b1f29; border:1px solid #2a2f3b; color:#9aa; width:30px; height:30px; border-radius:7px; cursor:pointer; flex-shrink:0; }
.copy-btn:active { background:#262b36; }
.otp-waiting { color:#9aa; font-style:italic; font-size:14px; }
.sms-text { font-size:12px; color:#8a93a3; margin-top:8px; line-height:1.5; }
.order-actions { display:flex; gap:8px; border-top:1px solid #1e2330; margin-top:16px; padding-top:14px; }
.order-actions button { flex:1; background:transparent; border:none; color:#9aa; padding:8px; font-size:12px; font-weight:700; cursor:pointer; border-radius:8px; }
.order-actions button.oa-done { color:#22c55e; }
.order-actions button.oa-cancel { color:#ff6b6b; }
.order-actions button.oa-resend { color:#6ea8fe; }
.order-actions button:disabled { opacity:.35; cursor:not-allowed; }

/* ===== Generator Kunci Akun (angka besar + tombol acak ulang, tanpa ngetik) ===== */
.lock-generator { background:#0f1117; border:1px solid #262b36; border-radius:14px; padding:22px 16px; text-align:center; margin-bottom:16px; }
.lock-code-display { font-size:40px; font-weight:800; letter-spacing:14px; color:#fff; margin-bottom:12px; }
.lock-shuffle-btn { background:transparent; border:none; color:#6ea8fe; font-size:14px; font-weight:600; cursor:pointer; padding:6px; }
.lock-shuffle-btn:hover { text-decoration:underline; }

/* ===== Banner info kunci akun ===== */
.lock-notice { background:#171a22; border:1px solid #6ea8fe; border-radius:12px; padding:14px 16px; margin-bottom:16px; }
.lock-notice p { margin:0 0 12px; font-size:14px; line-height:1.5; color:#dfe6f3; }
.lock-notice-actions { display:flex; gap:8px; flex-wrap:wrap; }
.lock-notice-actions .btn-primary { padding:8px 14px; font-size:13px; }
.lock-notice-actions .btn-sm { padding:8px 14px; font-size:13px; }

/* ===== Dokumentasi API ===== */
.doc-p { color:#9aa; font-size:13px; line-height:1.6; margin:6px 0 14px; }
.doc-p code, .doc-ep code { background:#0f1117; border:1px solid #262b36; border-radius:5px; padding:1px 6px; color:#dfe6f3; font-size:12px; }
.doc-label { font-size:13px; color:#9aa; margin:14px 0 6px; font-weight:700; }
.doc-copy { display:flex; gap:8px; align-items:center; }
.doc-copy code { flex:1; background:#0f1117; border:1px solid #262b36; border-radius:8px; padding:10px; font-size:12px; color:#dfe6f3; word-break:break-all; }
.doc-ep { display:flex; gap:8px; align-items:center; margin-top:18px; flex-wrap:wrap; }
.doc-ep:first-of-type { margin-top:4px; }
.doc-m { font-size:11px; font-weight:800; padding:3px 8px; border-radius:6px; color:#0f1117; }
.doc-m.get { background:#22c55e; }
.doc-m.post { background:#6ea8fe; }
.doc-code { background:#0f1117; border:1px solid #262b36; border-radius:8px; padding:12px; font-size:12px; line-height:1.5; color:#dfe6f3; overflow-x:auto; white-space:pre; margin:6px 0 12px; }

.api-key-new-btn { color:#6ea8fe !important; -webkit-text-fill-color:#6ea8fe; opacity:1 !important; }

/* Warna biru tua: angka kunci akun & kode API key di menu Akun */
.hl-blue, .hl-blue b, #akunApiKey { color:#4a86e8; }

/* Warna statistik akun */
.stat-ok { color:#22c55e; }
.stat-fail { color:#ff6b6b; }
.stat-deposit { color:#facc15; }

/* Top-Up: hitung mundur & tombol batal */
.topup-timer { color:#facc15; font-size:14px; margin:4px 0 10px; }
.topup-actions { display:flex; gap:8px; justify-content:center; }
.btn-cancel { color:#ff6b6b; border-color:#ff6b6b; }
.topup-expired { color:#ff6b6b; font-weight:700; font-size:15px; }

.topup-paid { color:#22c55e; font-weight:700; font-size:15px; }

/* Popup info tengah layar (setiap daftar & login) */
.info-popup { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; padding:20px; z-index:1000; }
.info-popup-card { background:#171a22; border:1px solid #6ea8fe; border-radius:14px; padding:20px; max-width:380px; width:100%; text-align:center; }
.info-popup-card p { margin:0 0 16px; font-size:15px; line-height:1.6; color:#dfe6f3; word-break:break-word; }
.info-popup-card a { color:#6ea8fe; }

/* Halaman Bantuan */
.help-card p { margin:0 0 16px; font-size:15px; line-height:1.6; word-break:break-word; }
.help-card p:last-child { margin-bottom:0; }
.help-card a { color:inherit; }
.help-title { color:#fff; }
.help-red { color:#ff4d4f; }
.help-green { color:#2ecc71; }
.help-yellow { color:#ffd43b; }

/* Latar animasi (bg.js): konten harus di atas canvas */
.screen { position:relative; z-index:1; }
.navtabs { background:transparent; }

/* Menu ala iPhone: gelembung meluncur (transform saja = ringan) */
.navtabs { position:relative; -webkit-overflow-scrolling:touch; scrollbar-width:none; overscroll-behavior-x:contain; }
.navtabs::-webkit-scrollbar { display:none; }
.nav-btn { position:relative; z-index:1; background:transparent; transition:color .25s ease; -webkit-tap-highlight-color:transparent; }
.nav-btn.active { background:transparent; border-color:transparent; }
.nav-ind { position:absolute; left:0; top:0; z-index:0; width:100px; height:0; opacity:0; pointer-events:none; transform-origin:0 0; will-change:transform;
  transition:transform .42s cubic-bezier(.32,.72,0,1); --sx:1; }
.nav-ind i { position:absolute; inset:0; background:#6ea8fe;
  border-radius:calc(20px / var(--sx)) / 20px; /* radius tetap bulat walau di-scale */ }
@media (prefers-reduced-motion: reduce) { .nav-ind { transition:none; } }

/* Saldo di tengah ala Dynamic Island: pil saldo (besar) + lingkaran merah (kecil) TERPISAH.
   Di menu Wallet lingkaran muncul di kanan dan pil saldo otomatis bergeser ke kiri. Hanya transform/opacity. */
.topbar { display:grid; grid-template-columns:1fr auto 1fr; gap:8px; padding:12px 12px; }
.topbar .brand { justify-self:start; font-size:16px; }
.topbar .btn-ghost { justify-self:end; padding:6px 10px; }
.bal-capsule { position:relative; display:flex; align-items:center; justify-content:center; background:none; border:0; padding:0; }
.bal-capsule .balance-box { margin-left:0; min-width:104px; padding:8px 18px; border-radius:999px; background:#050506; border:1px solid #262b36;
  transition:transform .42s cubic-bezier(.32,.72,0,1); will-change:transform; }
body.on-wallet .bal-capsule .balance-box { transform:translate3d(-19px,0,0); }
.bal-side { position:absolute; top:50%; left:calc(100% - 11px); width:30px; height:30px; margin:-15px 0 0; padding:0; border-radius:50%;
  background:#050506; border:1px solid #2a2d36; opacity:0; transform:scale(.3); transform-origin:0 50%; pointer-events:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:opacity .25s ease, transform .42s cubic-bezier(.32,.72,0,1); }
/* titik merah berkedip seperti indikator kamera iPhone */
.bal-cancel::after { content:''; position:absolute; left:50%; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%;
  background:#ff3b30; box-shadow:0 0 8px rgba(255,59,48,.85); animation:redBlink 1.1s ease-in-out infinite; }
.bal-cancel.idle::after { background:#6b2b2b; box-shadow:none; animation:none; }
@keyframes redBlink { 0%,100% { opacity:1; } 50% { opacity:.2; } }
body.on-wallet .bal-side { opacity:1; transform:scale(1); pointer-events:auto; }
@media (prefers-reduced-motion: reduce) { .bal-cancel::after { animation:none; } .bal-capsule .balance-box, .bal-side { transition:none; } }

/* Anti "keluar layar": halaman tidak boleh melebar/geser samping di HP maupun mode desktop */
html, body { max-width:100%; overflow-x:hidden; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
.screen { max-width:100%; overflow-x:hidden; }
@supports (overflow:clip) { .screen { overflow-x:clip; } } /* clip tidak merusak topbar sticky */
main { position:relative; min-width:0; }
.view { min-width:0; max-width:100%; }
.card { max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; } /* tabel lebar scroll DI DALAM card */
.card .table { min-width:max-content; }
.topbar { min-width:0; }
.topbar .brand, .topbar .btn-ghost { white-space:nowrap; }

/* Informasi Akun: nama & email merah */
.akun-red, .akun-red b { color:#ff4d4f; }

/* ===== Tombol tema (terang/gelap) di sebelah Bantuan ===== */
.nav-sep { flex:none; width:1px; height:22px; align-self:center; margin:0 4px 0 6px; background:#2a2f3b; }
.theme-btn { flex:none; position:relative; width:40px; height:36px; align-self:center; border-radius:20px; border:1px solid #262b36; background:transparent; color:#cfd6e8;
  cursor:pointer; padding:0; -webkit-tap-highlight-color:transparent; overflow:hidden; }
.theme-btn svg { position:absolute; left:50%; top:50%; margin:-10px 0 0 -10px; transition:transform .45s cubic-bezier(.32,.72,0,1), opacity .25s ease; }
.theme-btn .ic-sun { opacity:0; transform:rotate(-90deg) scale(.4); }
.theme-btn .ic-moon { opacity:1; transform:rotate(0) scale(1); }
html[data-theme="light"] .theme-btn .ic-sun { opacity:1; transform:rotate(0) scale(1); }
html[data-theme="light"] .theme-btn .ic-moon { opacity:0; transform:rotate(90deg) scale(.4); }
.theme-btn:active { transform:scale(.92); }
/* Ganti tema: semua transisi dimatikan sesaat -> warna langsung berganti di semua elemen sekaligus (kecuali ikon tombol tema). */
html.theme-switch *:not(.ic-sun):not(.ic-moon), html.theme-switch *::before, html.theme-switch *::after { transition:none !important; }

/* ===== Mata di atas kartu login/daftar ===== */
.auth-card { position:relative; margin-top:34px; }
.eyes { position:absolute; top:-26px; left:50%; transform:translateX(-50%); display:flex; gap:14px; padding:8px 10px; z-index:2; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.eye { position:relative; width:38px; height:38px; border-radius:50%; background:#fff; overflow:hidden; transform-origin:50% 55%;
  box-shadow:0 0 0 2px #0b0d12, 0 4px 14px rgba(0,0,0,.35); transition:transform .12s ease, background-color .2s ease, box-shadow .2s ease; }
.eye i { position:absolute; left:50%; top:50%; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; background:#0b0d12;
  transform:translate3d(var(--px,0px),var(--py,0px),0) scale(var(--ps,1)); transition:transform .09s linear; }
.eye i::after { content:''; position:absolute; left:3px; top:3px; width:4px; height:4px; border-radius:50%; background:#fff; opacity:.9; }
.eyes.blink .eye { transform:scaleY(.08); }
.eyes.closed .eye { transform:scaleY(.08); transition-duration:.2s; }
.eyes.red .eye { background:#ff2d2d; box-shadow:0 0 0 2px #0b0d12, 0 0 18px rgba(255,45,45,.85); }
.eyes.red .eye i { --ps:.75; }

/* ===== TEMA TERANG ===== */
html[data-theme="light"] { color-scheme:light; background:#e9edfb; }
html[data-theme="light"] body { background:linear-gradient(180deg,#f0f3ff 0%,#e3e9fc 100%); color:#1d2433; }
html[data-theme="light"] .auth-card, html[data-theme="light"] .topbar, html[data-theme="light"] .card,
html[data-theme="light"] .lock-notice, html[data-theme="light"] .info-popup-card { background:#fff; border-color:#d9deec; }
html[data-theme="light"] .auth-card { box-shadow:0 10px 40px rgba(60,80,140,.18); }
html[data-theme="light"] .auth-card h1, html[data-theme="light"] .brand { color:#2f6fe4; }
html[data-theme="light"] .tabs { border-color:#d4daea; }
html[data-theme="light"] .tab-btn { background:#f1f3fa; color:#6b7488; }
html[data-theme="light"] .tab-btn.active { background:#6ea8fe; color:#0f1117; }
html[data-theme="light"] .auth-form input, html[data-theme="light"] select, html[data-theme="light"] input[type=number],
html[data-theme="light"] input[type=text], html[data-theme="light"] input[type=email], html[data-theme="light"] .chip-search,
html[data-theme="light"] .price-box, html[data-theme="light"] .lock-generator { background:#f4f6fd; border-color:#cfd6e8; color:#1d2433; }
html[data-theme="light"] .btn-ghost { border-color:#cfd6e8; color:#3a4256; }
html[data-theme="light"] .nav-btn { border-color:#d4daea; color:#4a5368; }
html[data-theme="light"] .nav-btn.active { color:#0f1117; border-color:transparent; }
html[data-theme="light"] .nav-sep { background:#cfd6e8; }
html[data-theme="light"] .theme-btn { border-color:#d4daea; color:#e8a400; background:#fff; }
html[data-theme="light"] .balance-box { color:#fff; }
html[data-theme="light"] .server-tabs button, html[data-theme="light"] .admin-tab-btn, html[data-theme="light"] .chip,
html[data-theme="light"] .price-tile, html[data-theme="light"] .qty-btn, html[data-theme="light"] .btn-sm,
html[data-theme="light"] .copy-btn { background:#f1f3fa; color:#3a4256; border-color:#d4daea; }
html[data-theme="light"] .server-tabs button.active { background:#22c55e; color:#06240f; border-color:#22c55e; }
html[data-theme="light"] .admin-tab-btn.active { background:#f97316; color:#2a1400; border-color:#f97316; }
html[data-theme="light"] .chip.selected { background:rgba(110,168,254,.18); color:#2f6fe4; border-color:#6ea8fe; }
html[data-theme="light"] .price-tile.selected { background:rgba(34,197,94,.12); border-color:#22c55e; }
html[data-theme="light"] .field-row label, html[data-theme="light"] .doc-p, html[data-theme="light"] .doc-label,
html[data-theme="light"] .table th, html[data-theme="light"] .order-timer, html[data-theme="light"] .order-row .orl-label,
html[data-theme="light"] .otp-waiting, html[data-theme="light"] .chip-section .sec-label, html[data-theme="light"] .price-tile .pt-stock,
html[data-theme="light"] .order-actions button, html[data-theme="light"] .sms-text, html[data-theme="light"] .copy-btn,
html[data-theme="light"] [style*="color:#9aa"] { color:#6b7488 !important; }
html[data-theme="light"] .order-actions button.oa-done { color:#15803d !important; }
html[data-theme="light"] .order-actions button.oa-cancel { color:#d6293b !important; }
html[data-theme="light"] .order-actions button.oa-resend { color:#1d4ed8 !important; }
html[data-theme="light"] .table th, html[data-theme="light"] .table td { border-bottom-color:#e1e5f0; }
html[data-theme="light"] .order-card { background:#f5f8ff; border-color:#c9d8f2; }
html[data-theme="light"] .order-actions { border-top-color:#e1e5f0; }
html[data-theme="light"] .otp-box { background:#f2fbf5; }
html[data-theme="light"] .lock-code-display, html[data-theme="light"] .help-title { color:#1d2433; }
html[data-theme="light"] .doc-p code, html[data-theme="light"] .doc-ep code, html[data-theme="light"] .doc-copy code,
html[data-theme="light"] .doc-code { background:#f4f6fd; border-color:#d9deec; color:#1d2433; }
html[data-theme="light"] .lock-notice p, html[data-theme="light"] .info-popup-card p { color:#1d2433; }
html[data-theme="light"] .info-popup { background:rgba(30,40,70,.45); }
html[data-theme="light"] .info-popup-card a, html[data-theme="light"] .lock-shuffle-btn { color:#2f6fe4; }
html[data-theme="light"] .msg { color:#e0343c; }
html[data-theme="light"] .badge.pending { background:#fff3cf; color:#a87a00; }
html[data-theme="light"] .badge.received, html[data-theme="light"] .badge.success { background:#dcf7e6; color:#15803d; }
html[data-theme="light"] .badge.cancelled, html[data-theme="light"] .badge.expired { background:#ffe3e6; color:#d6293b; }
html[data-theme="light"] .btn-danger { background:#ffe3e6; color:#d6293b; border-color:#f2b8c0; }
html[data-theme="light"] .stat-deposit, html[data-theme="light"] .topup-timer, html[data-theme="light"] .help-yellow { color:#c99700; }
html[data-theme="light"] .help-green { color:#1faa59; }
html[data-theme="light"] .stat-ok, html[data-theme="light"] .topup-paid { color:#15a04a; }
/* ---- NOTIF (dynamic-island) ---- */
.toast { position:fixed; top:max(12px, env(safe-area-inset-top)); left:50%; width:min(94vw, 460px); min-height:58px;
  display:flex; align-items:center; gap:12px; padding:12px 20px 12px 14px; border-radius:30px;
  background:rgba(14,16,22,.96); color:#fff; border:1px solid rgba(255,255,255,.1);
  box-shadow:0 14px 40px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  opacity:0; pointer-events:none; z-index:9999; text-align:left; font-size:14.5px; line-height:1.35; font-weight:500;
  transform:translateX(-50%) translateY(-24px) scale(.35); transform-origin:top center;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1), opacity .2s ease, border-radius .5s cubic-bezier(.34,1.56,.64,1); }
.toast.show { opacity:1; pointer-events:auto; touch-action:none; cursor:grab;
  transform:translateX(calc(-50% + var(--dx,0px))) translateY(var(--dy,0px)) scale(1); }
.toast.dragging { transition:none !important; cursor:grabbing; user-select:none; -webkit-user-select:none; }
.toast.swiped { opacity:0; transition:transform .2s ease-out, opacity .2s ease-out !important; }
.toast:not(.show) { transition:transform .22s ease-in, opacity .18s ease-in; }
.toast .toast-ic { flex:none; width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#5b8cff,#7c5cff);
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 0 rgba(91,140,255,.55); }
.toast.show .toast-ic { animation:toastPulse 1.1s ease-out .15s 1; }
.toast .toast-ic i { width:8px; height:8px; border-radius:50%; background:#fff; }
.toast .toast-txt { flex:1; min-width:0; word-break:break-word; }
@keyframes toastPulse { 0%{box-shadow:0 0 0 0 rgba(91,140,255,.6);} 100%{box-shadow:0 0 0 14px rgba(91,140,255,0);} }

/* ---- PAGER (Sebelumnya / Selanjutnya) ---- */
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-scroll .table { min-width:max-content; }
.pager { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; }
.pager-btn { background:#1b1f29; border:1px solid #2f3646; color:#dfe6f3; padding:9px 14px; border-radius:20px; font-size:13px; font-weight:600; cursor:pointer; transition:.15s; }
.pager-btn:hover:not(:disabled) { border-color:#6ea8fe; color:#6ea8fe; }
.pager-btn:disabled { opacity:.35; cursor:not-allowed; }
.pager-info { font-size:12px; color:#9aa; text-align:center; flex:1; }
.pager-note { margin:10px 0 0; font-size:11px; color:#7d8696; text-align:center; }
html[data-theme="light"] .pager-btn { background:#f4f6fd; border-color:#cfd6e8; color:#1d2433; }
html[data-theme="light"] .pager-btn:hover:not(:disabled) { border-color:#2f6fe4; color:#2f6fe4; }

/* ---- GELEMBUNG WARNA ala iPhone di tepi kartu Negara / Harga / Order ---- */
.bub-host { position:relative; overflow:hidden; }
#priceSection.bub-host {
  padding:14px; border-radius:18px; border:1px solid rgba(120,150,255,.22);
  background:linear-gradient(160deg, rgba(10,132,255,.07), rgba(191,90,242,.05) 55%, rgba(48,209,88,.05)); }
.bub-host > *:not(.bubbles) { position:relative; z-index:1; }
.bubbles { position:absolute; inset:0; pointer-events:none; z-index:0; }
.bubbles .b { position:absolute; border-radius:50%; opacity:.82; will-change:transform;
  background:radial-gradient(circle at 30% 26%, rgba(255,255,255,.9) 0 7%, var(--c1) 8% 52%, var(--c2) 100%);
  box-shadow:inset -3px -5px 9px rgba(0,0,0,.2), inset 2px 3px 6px rgba(255,255,255,.35), 0 0 18px var(--glow);
  animation:none; } /* diam: hemat baterai/CPU HP jadul */
.bubbles .b1 { width:46px; height:46px; top:-16px;  left:-14px;  --c1:#0a84ff; --c2:#64d2ff; --glow:rgba(10,132,255,.55); }
.bubbles .b2 { width:36px; height:36px; top:16%;    right:-15px; --c1:#ff375f; --c2:#ff9fb2; --glow:rgba(255,55,95,.5); }
.bubbles .b3 { width:32px; height:32px; bottom:-12px; left:24%;  --c1:#30d158; --c2:#a6f0b9; --glow:rgba(48,209,88,.5); }
.bubbles .b4 { width:28px; height:28px; bottom:14%; right:-11px; --c1:#bf5af2; --c2:#e0b4ff; --glow:rgba(191,90,242,.5); }
.bubbles .b5 { width:22px; height:22px; top:-9px;   right:28%;   --c1:#ff9f0a; --c2:#ffd60a; --glow:rgba(255,159,10,.5); }
.bubbles .b6 { width:24px; height:24px; bottom:32%; left:-10px;  --c1:#5e5ce6; --c2:#8e8cff; --glow:rgba(94,92,230,.5); }
@keyframes bubFloat {
  0%   { transform:translate3d(0,0,0) scale(1); }
  50%  { transform:translate3d(3px,-7px,0) scale(1.07); }
  100% { transform:translate3d(-3px,5px,0) scale(.96); }
}
@media (prefers-reduced-motion:reduce) { .bubbles .b { animation:none; } }
html[data-theme="light"] .bubbles .b { opacity:.7; }
html[data-theme="light"] #priceSection.bub-host { border-color:rgba(10,132,255,.25); }

/* ---- BULATAN MERAH JUMLAH ORDER AKTIF (menu Beli Nomor) — saldo bergeser ke kiri seperti di menu Wallet ---- */
.bal-orders { position:absolute; top:50%; left:calc(100% + 8px - var(--s, 19px)); width:30px; height:30px; margin-top:-15px; padding:0;
  border-radius:999px; border:1px solid rgba(255,255,255,.25); background:linear-gradient(180deg,#ff5a4f,#ff3b30); color:#fff;
  font-size:12px; font-weight:800; line-height:28px; text-align:center; letter-spacing:.2px; white-space:nowrap; cursor:pointer;
  opacity:0; transform:scale(.3); transform-origin:0 50%; pointer-events:none; -webkit-tap-highlight-color:transparent;
  transition:opacity .25s ease, transform .42s cubic-bezier(.32,.72,0,1), left .42s cubic-bezier(.32,.72,0,1), width .3s ease;
  animation:ordPulse 1.2s ease-in-out infinite; }
body.on-order.has-orders .bal-orders { opacity:1; transform:scale(1); pointer-events:auto; }
body.on-order.has-orders .bal-capsule .balance-box { transform:translate3d(calc(var(--s, 19px) * -1),0,0); }
.bal-orders.bump { animation:ordPulse 1.2s ease-in-out infinite, ordBump .38s cubic-bezier(.32,.72,0,1); }
@keyframes ordPulse { 0%,100% { box-shadow:0 0 5px rgba(255,59,48,.55); } 50% { box-shadow:0 0 15px 2px rgba(255,59,48,.95); } }
@keyframes ordBump { 0% { transform:scale(1); } 45% { transform:scale(1.28); } 100% { transform:scale(1); } }
@media (prefers-reduced-motion: reduce) { .bal-orders, .bal-orders.bump { animation:none; transition:none; } }




/* Informasi Akun: baris Nama/Email/statistik dirapatkan (jarak antar baris tidak lebar lagi). */
.akun-card h3 { margin:0 0 8px; }
.akun-card p { margin:0 0 4px; line-height:1.35; }
.akun-card #akunName, .akun-card #akunEmail { word-break:break-all; }
.akun-card .api-key-new-btn { margin-top:2px; margin-bottom:8px !important; }
.akun-card br { display:none; }
.akun-card .btn-primary { margin-top:6px; }

/* Backup admin */
.bk-note { font-size:13px; opacity:.75; margin:0 0 12px; }
.bk-status { font-size:13px; margin:12px 0 0; min-height:18px; }
.bk-status.ok { color:#22c55e; } .bk-status.err { color:#f87171; } .bk-status.run { color:#6ea8fe; }
.bk-list { font-size:13px; }
.bk-row { display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid rgba(127,127,127,.18); word-break:break-all; }
.bk-row:last-child { border-bottom:none; }
.bk-row small { opacity:.7; white-space:nowrap; }

/* Kartu INFORMASI (Bantuan) & INFORMASI AKUN: latar biru, tulisan tetap jelas */
.help-card, .akun-card,
html[data-theme="light"] .help-card, html[data-theme="light"] .akun-card {
  background:linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%) !important;
  border:1px solid #3b82f6 !important;
  color:#fff;
}
.help-card .help-title, .help-card .help-title b, .akun-card h3,
html[data-theme="light"] .help-card .help-title b, html[data-theme="light"] .akun-card h3 { color:#fff !important; }
.help-card .help-red, .akun-card .stat-fail, html[data-theme="light"] .help-card .help-red, html[data-theme="light"] .akun-card .stat-fail { color:#ffb3b3 !important; }
.help-card .help-green, .akun-card .stat-ok, html[data-theme="light"] .help-card .help-green, html[data-theme="light"] .akun-card .stat-ok { color:#86efac !important; }
.help-card .help-yellow, .akun-card .stat-deposit, html[data-theme="light"] .help-card .help-yellow, html[data-theme="light"] .akun-card .stat-deposit { color:#fde68a !important; }
.akun-card .hl-blue, html[data-theme="light"] .akun-card .hl-blue { color:#bfdbfe !important; }
.akun-card .api-key-new-btn, html[data-theme="light"] .akun-card .api-key-new-btn { color:#dbeafe !important; }
/* Nama & email: teks putih */
.akun-card .akun-red, .akun-card .akun-red b, .akun-card #akunName, .akun-card #akunEmail,
html[data-theme="light"] .akun-card .akun-red, html[data-theme="light"] .akun-card .akun-red b { color:#fff !important; }
.akun-card #akunEmail a { color:#fff !important; }
.akun-card .btn-primary, .help-card .btn-primary { background:#fff !important; color:#1e3a8a !important; }
/* INFORMASI AKUN: Nama, Email, Sukses, Gagal, Deposit = teks hitam (API Key tetap biru) */
.akun-card .akun-red, .akun-card .akun-red b, .akun-card #akunName, .akun-card #akunEmail, .akun-card #akunEmail a,
.akun-card .stat-ok, .akun-card .stat-ok b, .akun-card .stat-fail, .akun-card .stat-fail b,
.akun-card .stat-deposit, .akun-card .stat-deposit b,
html[data-theme="light"] .akun-card .akun-red, html[data-theme="light"] .akun-card .akun-red b,
html[data-theme="light"] .akun-card .stat-ok, html[data-theme="light"] .akun-card .stat-fail, html[data-theme="light"] .akun-card .stat-deposit { color:#000 !important; }
/* 4 baris Bantuan rapat tanpa jarak */
.help-card .help-list p { margin:0 !important; line-height:1.55; }
.help-card .help-title { margin-bottom:10px !important; }

/* Admin: tabel bisa digeser di HP, pager, filter, detail user */
.table-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-wrap .table { min-width:560px; }
.pager { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; font-size:13px; }
.pager button:disabled { opacity:.4; cursor:not-allowed; }
.dep-filter { display:flex; gap:8px; flex-wrap:wrap; }
.dep-filter select, .dep-filter input { flex:1 1 160px; }
.dep-acc { display:flex; gap:6px; align-items:center; }
.dep-acc input { width:110px; margin:0 !important; padding:6px 8px !important; }
.badge.sukses { background:#14532d; color:#86efac; }
.badge.gagal { background:#3f1d1d; color:#fca5a5; }
.badge.pending { background:#3b2f0b; color:#fde68a; }
.ud-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:10px; margin:10px 0; }
.ud-box { background:rgba(127,127,127,.08); border:1px solid rgba(127,127,127,.2); border-radius:10px; padding:10px; }
.ud-box small { display:block; opacity:.7; font-size:12px; }
.ud-box b { font-size:16px; }
.ud-key { display:flex; gap:8px; align-items:center; flex-wrap:wrap; word-break:break-all; font-size:13px; margin:8px 0; }
.ud-add { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.ud-add input { flex:1 1 140px; margin:0 !important; }
.copy-key-btn { margin-left:6px; vertical-align:middle; }
.user-row-click { cursor:pointer; }
.user-row-click:hover td { background:rgba(110,168,254,.08); }
.manual-note { display:block; font-size:12px; color:#86efac; margin-top:2px; }
@media (max-width: 600px) {
  .admin-tabs { display:flex; flex-wrap:wrap; gap:6px; }
  .card { padding:14px; }
}

/* ===== Dokumentasi API per server ===== */
.doc-steps { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 4px; }
.doc-steps span { display:inline-flex; align-items:center; gap:6px; background:#0f1117; border:1px solid #262b36; border-radius:10px; padding:6px 10px; font-size:12px; color:#dfe6f3; }
.doc-steps i { font-style:normal; font-weight:800; font-size:11px; width:20px; height:20px; border-radius:50%; background:#6ea8fe; color:#0f1117; display:inline-flex; align-items:center; justify-content:center; }
.doc-tabs { display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.doc-tab { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; text-align:left; background:#0f1117; border:1px solid #262b36; color:#dfe6f3; border-radius:10px; padding:11px 14px; font-size:14px; cursor:pointer; }
.doc-tab small { color:#9aa; font-size:12px; }
.doc-tab.active { background:#6ea8fe; border-color:#6ea8fe; color:#0f1117; }
.doc-tab.active small { color:#1e293b; }
.doc-srv { display:inline-block; font-size:12px; font-weight:800; padding:2px 9px; border-radius:6px; margin-right:6px; vertical-align:middle; }
.doc-srv.sms { background:#3a2a14; color:#fdba74; }
.doc-srv.wa { background:#12372c; color:#6ee7b7; }
.doc-det { border:1px solid #262b36; border-radius:10px; margin-top:8px; background:#0f1117; overflow:hidden; }
.doc-det summary { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 12px; cursor:pointer; list-style:none; }
.doc-det summary::-webkit-details-marker { display:none; }
.doc-det summary code { background:transparent; border:0; padding:0; color:#dfe6f3; font-size:12px; word-break:break-all; }
.doc-det summary em { font-style:normal; color:#9aa; font-size:12px; margin-left:auto; }
.doc-det[open] summary { border-bottom:1px solid #262b36; }
.doc-det-body { padding:6px 12px 10px; }
.doc-codewrap { margin:6px 0 12px; }
.doc-codebar { display:flex; align-items:center; justify-content:space-between; background:#171b24; border:1px solid #262b36; border-bottom:0; border-radius:8px 8px 0 0; padding:5px 10px; font-size:12px; color:#9aa; }
.doc-codewrap .doc-code { margin:0; border-radius:0 0 8px 8px; }
.doc-tablewrap { overflow-x:auto; margin-top:6px; }
.doc-table { width:100%; border-collapse:collapse; font-size:12px; min-width:520px; }
.doc-table th { text-align:left; color:#9aa; font-weight:700; padding:8px; background:#0f1117; }
.doc-table td { padding:8px; border-top:1px solid #262b36; color:#dfe6f3; vertical-align:top; }
.doc-table td code { background:transparent; border:0; padding:0; color:#6ee7b7; word-break:break-word; }
.doc-links > div { margin-bottom:10px; font-size:12px; }
.doc-links b { display:block; color:#6ee7b7; margin-bottom:2px; }
.doc-links a { color:#6ea8fe; word-break:break-all; }
html[data-theme="light"] .doc-steps span, html[data-theme="light"] .doc-tab, html[data-theme="light"] .doc-det,
html[data-theme="light"] .doc-table th { background:#f4f6fd; border-color:#d9deec; color:#1d2433; }
html[data-theme="light"] .doc-tab.active { background:#4a86e8; border-color:#4a86e8; color:#fff; }
html[data-theme="light"] .doc-tab.active small { color:#e0ecff; }
html[data-theme="light"] .doc-codebar { background:#e9edf8; border-color:#d9deec; }
html[data-theme="light"] .doc-det summary code, html[data-theme="light"] .doc-table td { color:#1d2433; }
html[data-theme="light"] .doc-table td code { color:#047857; }
html[data-theme="light"] .doc-det[open] summary, html[data-theme="light"] .doc-table td { border-color:#d9deec; }

/* ===== Statistik admin ===== */
.stat-title { margin:18px 0 8px; font-size:14px; color:#9aa; font-weight:700; }
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:10px; }
.stat-card { background:#0f1117; border:1px solid #262b36; border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:3px; }
.stat-card small { color:#9aa; font-size:12px; }
.stat-card b { font-size:18px; color:#dfe6f3; word-break:break-word; }
.stat-card span { color:#9aa; font-size:11px; }
.stat-note { color:#9aa; font-size:12px; margin:10px 0 0; }
#statsBox td.num, #statsBox th.num { text-align:right; white-space:nowrap; }
#statsBox td small { color:#9aa; font-size:11px; word-break:break-all; }
html[data-theme="light"] .stat-card { background:#f4f6fd; border-color:#d9deec; }
html[data-theme="light"] .stat-card b { color:#1d2433; }

/* ---- Fee deposit ---- */
.topup-fee-info { margin:-4px 0 12px; padding:9px 12px; border-radius:10px; font-size:13px; line-height:1.45;
  background:rgba(110,168,254,.10); border:1px solid rgba(110,168,254,.28); color:#cfe0ff; }
html[data-theme="light"] .topup-fee-info { color:#1d3f7a; background:rgba(47,111,228,.07); border-color:rgba(47,111,228,.25); }
.topup-pay { font-size:17px; margin:6px 0 2px; }
.topup-fee-note { font-size:12.5px; opacity:.75; margin:0 0 6px; }

/* ===== INFORMASI AKUN (versi baru): label biru muda kecil, isi putih bold, tombol putih teks biru tua ===== */
.akun-card.akun-v2, html[data-theme="light"] .akun-card.akun-v2 {
  background:linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%) !important; border:1px solid #3b82f6 !important; color:#fff !important; }
.akun-card.akun-v2 h3, html[data-theme="light"] .akun-card.akun-v2 h3 {
  color:#fff !important; font-size:21px; font-weight:800; letter-spacing:.3px; margin:0 0 16px !important; }
.akun-v2 .ak-row { display:flex; flex-direction:column; gap:3px; margin:0 0 14px; }
.akun-v2 .ak-label, html[data-theme="light"] .akun-v2 .ak-label {
  color:#93c5fd !important; font-size:12.5px; font-weight:400; letter-spacing:.3px; text-transform:none; }
.akun-v2 .ak-val, .akun-v2 .ak-val b, .akun-v2 #akunName, .akun-v2 #akunEmail, .akun-v2 #akunEmail a,
.akun-v2 #statOk, .akun-v2 #statFail, .akun-v2 #statDeposit, .akun-v2 #akunApiKey,
html[data-theme="light"] .akun-v2 .ak-val, html[data-theme="light"] .akun-v2 .ak-val b,
html[data-theme="light"] .akun-v2 #akunEmail a, html[data-theme="light"] .akun-v2 #akunApiKey {
  color:#fff !important; font-weight:700; text-decoration:none !important; }
.akun-v2 .ak-val { font-size:16px; line-height:1.35; word-break:break-all; }
.akun-v2 .ak-stats { font-size:15px; word-break:normal; }
.akun-v2 .ak-sep { font-style:normal; color:#93c5fd; opacity:.7; margin:0 10px; font-weight:400; }
.akun-v2 .ak-key { font-size:13.5px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.2px; }
.akun-v2 .ak-actions { display:flex; gap:12px; flex-wrap:wrap; margin:4px 0 12px; }
.akun-v2 .ak-btn, html[data-theme="light"] .akun-v2 .ak-btn {
  flex:1 1 0; min-width:120px; background:#fff !important; color:#1e3a8a !important; border:none; border-radius:12px;
  padding:12px 16px; font-size:15px; font-weight:700; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.18);
  -webkit-tap-highlight-color:transparent; transition:transform .1s ease, opacity .15s ease; }
.akun-v2 .ak-btn:active { transform:scale(.97); opacity:.9; }
.akun-v2 .ak-link, html[data-theme="light"] .akun-v2 .ak-link {
  background:none; border:none; padding:0; color:#bfdbfe !important; font-size:13px; font-weight:500;
  text-decoration:underline; text-underline-offset:3px; cursor:pointer; }

/* ===== SCROLL MULUS (naik/turun tidak patah-patah) ===== */
/* 1) Hanya body yang memotong sisi samping; html dibiarkan normal -> halaman tetap memakai scroll bawaan
      browser (momentum iPhone/Android utuh). Dulu html+body sama-sama overflow hidden -> scroll tersendat. */
html { overflow-x:visible; }
body { overflow-x:hidden; }
/* 2) Kartu tidak lagi jadi "kotak scroll" sendiri (dulu tiap kartu bisa digeser -> jari "nyangkut" di kartu).
      Tabel lebar tetap bisa digeser di dalam pembungkusnya masing-masing. */
.card { overflow-x:visible; -webkit-overflow-scrolling:auto; }
.table-wrap, .table-scroll, .doc-tablewrap { overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain; touch-action:pan-x pan-y; max-width:100%; }
.table-wrap .table, .table-scroll .table { min-width:max-content; }
/* 3) Notifikasi yang tersembunyi tidak memakai efek blur (blur di elemen fixed bikin berat tiap frame scroll). */
.toast:not(.show) { -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; }
/* 4) Gelembung hiasan diam -> tidak perlu layer GPU sendiri (hemat memori HP). */
.bubbles .b { will-change:auto; }
/* 5) Bar atas sticky di layer GPU sendiri -> tidak digambar ulang tiap frame scroll. */
.topbar { transform:translateZ(0); backface-visibility:hidden; }

/* ===== DAFTAR APLIKASI / NEGARA / HARGA: scroll & pilih mulus ===== */
.chip[hidden], .price-tile[hidden] { display:none !important; }
/* Kotak daftar jadi lapisan GPU sendiri + scroll momentum; begitu mentok, tidak "menyeret" halaman (patah). */
.chip-grid, .price-grid {
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-y;
  transform:translateZ(0); will-change:scroll-position; contain:content;
  scrollbar-width:thin;
}
/* Animasi hanya warna/garis (dulu "transition: semua" -> tiap sentuhan menghitung ulang bayangan). */
.chip, .price-tile { transition:background-color .15s ease, border-color .15s ease, color .15s ease; -webkit-tap-highlight-color:transparent; }
/* Bayangan per kotak dihapus di dalam daftar yang bisa di-scroll: ratusan bayangan = berat saat scroll di HP. */
.chip-grid .chip, .price-grid .price-tile { box-shadow:none; }
.chip-grid .chip.selected { box-shadow:0 0 0 1px #6ea8fe inset; }
/* Klik terasa langsung (tanpa jeda 300ms) */
.chip, .price-tile, .nav-btn, .admin-tab-btn, .btn-sm, button { touch-action:manipulation; }

/* ── Cek ShopeePay (nokos Shopee) ── */
.ew-btn { background:#1b2a22; border:1px solid #2f5a43; color:#4ade80; height:30px; padding:0 10px; border-radius:7px; font-size:12px; font-weight:700; cursor:pointer; flex-shrink:0; white-space:nowrap; touch-action:manipulation; }
.ew-btn:active { background:#22382c; }
.ew-btn:disabled { opacity:.6; cursor:default; }
.ew-res { margin-top:6px; font-size:13px; line-height:1.4; word-break:break-word; cursor:pointer; }
.ew-res.ok { color:#4ade80; } .ew-res.no { color:#f87171; } .ew-res.err { color:#fbbf24; }
.ew-popup { z-index:1100; }
.ew-card .ew-title { font-size:16px; font-weight:800; margin-bottom:8px; color:#dfe6f3; }
.ew-card .ew-phone { font-size:18px; font-weight:800; letter-spacing:.02em; margin-bottom:10px; color:#dfe6f3; word-break:break-all; }
.ew-card .ew-status { font-size:15px; font-weight:700; margin-bottom:6px; }
.ew-card .ew-status.ok { color:#22c55e; } .ew-card .ew-status.no { color:#f87171; } .ew-card .ew-status.err { color:#fbbf24; }
.ew-card .ew-name { font-size:15px; font-weight:700; color:#dfe6f3; margin-bottom:6px; word-break:break-word; }
.ew-card .ew-note { font-size:12.5px !important; font-style:italic; opacity:.8; margin:12px 0 14px !important; }
.ew-card .ew-note:empty { display:none; }
html[data-theme="light"] .ew-btn { background:#e9f8ef; border-color:#b7e4c7; color:#15803d; }
html[data-theme="light"] .ew-res.ok { color:#15803d; } html[data-theme="light"] .ew-res.err { color:#b45309; }
html[data-theme="light"] .ew-card .ew-title, html[data-theme="light"] .ew-card .ew-phone, html[data-theme="light"] .ew-card .ew-name { color:#1d2433; }
html[data-theme="light"] .ew-card .ew-status.err { color:#b45309; }

/* Nama aplikasi yang di-order, di samping label NOMOR */
.app-pill { display:inline-block; vertical-align:middle; margin-left:8px; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.02em;
  text-transform:none; background:rgba(110,168,254,.15); color:#6ea8fe; border:1px solid rgba(110,168,254,.35); max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[data-theme="light"] .app-pill { background:#e8f0ff; color:#2f6fe4; border-color:#c7d8fb; }

/* Cek manual nomor ShopeePay (admin) */
.ew-manual { display:flex; gap:8px; align-items:center; }
.ew-manual input { flex:1; min-width:0; }
.ew-manual .btn-primary { flex-shrink:0; white-space:nowrap; }
.ew-manual-res { margin-top:12px; font-size:14px; font-weight:700; min-height:20px; word-break:break-word; }
.ew-manual-res.ok { color:#22c55e; } .ew-manual-res.no { color:#f87171; } .ew-manual-res.err { color:#fbbf24; } .ew-manual-res.run { color:#6ea8fe; font-weight:500; }
html[data-theme="light"] .ew-manual-res.ok { color:#15803d; } html[data-theme="light"] .ew-manual-res.err { color:#b45309; }

/* Riwayat Cek ShopeePay (admin) */
.ew-h-list { font-size:13px; transition:opacity .15s; }
.ew-h-list.loading { opacity:.5; }
.ew-h-row { padding:10px 0; border-bottom:1px solid rgba(127,127,127,.18); }
.ew-h-row:last-child { border-bottom:none; }
.ew-h-top { display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.ew-h-phone { font-weight:800; font-size:14px; word-break:break-all; }
.ew-h-top small { opacity:.65; white-space:nowrap; }
.ew-h-mid { margin-top:3px; word-break:break-word; }
.ew-h-st.ok { color:#22c55e; font-weight:700; } .ew-h-st.no { color:#f87171; font-weight:700; } .ew-h-st.err { color:#fbbf24; font-weight:700; }
.ew-h-who { margin-top:2px; font-size:12px; opacity:.6; word-break:break-all; }
.ew-h-empty { opacity:.7; padding:8px 0; }
.ew-h-nav { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:12px; }
.ew-h-nav small { opacity:.7; text-align:center; font-size:11.5px; }
.ew-h-nav .btn-sm:disabled { opacity:.45; cursor:default; }
html[data-theme="light"] .ew-h-st.ok { color:#15803d; } html[data-theme="light"] .ew-h-st.err { color:#b45309; }
/* Kartu order: slot hasil cek tidak menggeser layout secara kasar */
.ew-slot:empty { display:none; }

/* Admin > Email kode verifikasi */
.adm-badge { display:inline-block; min-width:18px; padding:1px 6px; margin-left:4px; border-radius:10px; background:#ef4444; color:#fff; font-size:11px; font-weight:700; line-height:16px; text-align:center; }
.eml-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; }
.eml-box { background:#0f1117; border:1px solid #262b36; border-radius:10px; padding:10px 12px; }
.eml-box small { display:block; opacity:.7; font-size:12px; word-break:break-all; }
.eml-box b { font-size:18px; }
.eml-code { font-family:ui-monospace,Menlo,Consolas,monospace; font-weight:700; letter-spacing:1px; }
.badge.eml-terkirim { background:#3b2f0b; color:#fde68a; }
.badge.eml-terverifikasi { background:#14532d; color:#86efac; }
.badge.eml-gagal { background:#3f1d1d; color:#fca5a5; }
html[data-theme="light"] .eml-box { background:#f6f8fc; border-color:#dde3ee; }

/* ===== Lancar (saduotro): animasi berkedip hanya jalan saat TERLIHAT, dan hanya mengubah opacity ===== */
/* Dulu bulatan merah order menganimasikan box-shadow terus-menerus (walau tersembunyi) -> layar digambar ulang
   tiap frame di semua menu -> patah-patah. Sekarang cahayanya lapisan terpisah yang hanya berkedip (opacity). */
.bal-orders, .bal-orders.bump { animation:none; box-shadow:0 0 6px rgba(255,59,48,.6); }
.bal-orders::before { content:''; position:absolute; inset:-3px; border-radius:inherit; box-shadow:0 0 14px 3px rgba(255,59,48,.9);
  opacity:0; pointer-events:none; }
body.on-order.has-orders .bal-orders::before { animation:ordGlow 1.2s ease-in-out infinite; }
body.on-order.has-orders .bal-orders.bump { animation:ordBump .38s cubic-bezier(.32,.72,0,1); }
@keyframes ordGlow { 0%,100% { opacity:0; } 50% { opacity:1; } }
.bal-cancel::after { animation:none; }
body.on-wallet .bal-cancel:not(.idle)::after { animation:redBlink 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { body.on-order.has-orders .bal-orders::before, body.on-wallet .bal-cancel::after { animation:none; } }
/* Tombol daftar/masuk: tanpa jeda sentuh & langsung kelihatan sedang diproses */
.auth-form button { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.auth-form button:disabled { opacity:.75; cursor:progress; }

/* Harga order: di kanan baris "KODE OTP TERAKHIR" (kartu order aktif) */
.order-row.otp-row { position:relative; }
.order-row.otp-row .order-price { position:absolute; right:0; top:14px;
  font-size:16px; font-weight:800; color:#fde68a; letter-spacing:.2px; white-space:nowrap; }
.order-row.otp-row .orl-label, .order-row.otp-row .otp-waiting { padding-right:96px; }
html[data-theme="light"] .order-row.otp-row .order-price { color:#a16207; }
.order-actions button { white-space:nowrap; }

/* ===== NOTIF TAJAM (gapwqqq) =====
   Dulu: blur latar (backdrop-filter) dinyala-matikan tiap notif muncul/hilang + posisi translateX(-50%) + perbesar
   dari 35% -> di HP (terutama iPhone) notif kadang "buram/blur nyangkut" sampai refresh.
   Sekarang: tanpa backdrop-filter (latarnya memang sudah hampir pekat), posisi tengah pakai margin (bukan geser
   -50% yang jatuh di pecahan piksel), dan saat diam transform = none -> teks selalu tajam. */
.toast { left:0; right:0; margin-left:auto; margin-right:auto;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  background:#0e1016; visibility:hidden;
  transform:translate3d(0,-18px,0); opacity:0;
  transition:opacity .18s ease, transform .22s ease, visibility 0s linear .22s; }
.toast:not(.show) { transition:opacity .18s ease, transform .22s ease, visibility 0s linear .22s; }
.toast.show { visibility:visible; opacity:1; transform:none;
  transition:opacity .18s ease, transform .25s cubic-bezier(.22,1,.36,1), visibility 0s;
  animation:toastIn .42s cubic-bezier(.22,1,.36,1) backwards; }
@keyframes toastIn {
  0%   { opacity:0; transform:translate3d(0,-22px,0) scale(.94); }
  60%  { opacity:1; transform:translate3d(0,2px,0) scale(1.01); }
  100% { opacity:1; transform:none; }
}
/* Digeser jari: ikut jari; dilepas: kembali halus ke tempat (transform none = tajam lagi). */
.toast.show.dragging { animation:none; transform:translate3d(var(--dx,0px), var(--dy,0px), 0); }
.toast.show.swiped { animation:none; opacity:0; transform:translate3d(var(--dx,0px), var(--dy,0px), 0);
  transition:transform .2s ease-out, opacity .2s ease-out !important; }
.toast.show:not(.dragging):not(.swiped)[style*="--dx"] { transform:translate3d(var(--dx,0px), var(--dy,0px), 0); }
html[data-theme="light"] .toast { -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
@media (prefers-reduced-motion: reduce) { .toast.show { animation:none; } }

/* ===== Scroll mulus (ahabqiw) =====
   Animasi berkedip pada pseudo-element (::before/::after) TIDAK bisa dikerjakan GPU di Chrome -> selama ada order
   aktif, browser menghitung ulang gaya ±20x/detik termasuk saat scroll -> patah-patah. Cahaya dibuat tetap (statis). */
body.on-order.has-orders .bal-orders::before { animation:none !important; opacity:.75; }
body.on-wallet .bal-cancel:not(.idle)::after { animation:none !important; opacity:1; }
.bal-orders { box-shadow:0 0 10px rgba(255,59,48,.75); }
/* Pengatur waktu order (berubah tiap detik) tidak memicu hitung ulang tata letak seluruh halaman. */
.order-timer { display:inline-block; min-width:4.6ch; text-align:right; font-variant-numeric:tabular-nums; contain:layout paint style; }

/* ── Lupa kunci akun (WhatsApp) ── */
.auth-form button.link-btn, .link-btn { width:auto; display:block; margin:10px auto 0; padding:4px 6px; background:none; border:none; color:#6ea8fe; font-weight:600; font-size:13px; cursor:pointer; }
.forgot-title { margin:0 0 6px; font-weight:700; font-size:16px; color:#dfe6f3; text-align:center; }
.auth-form #forgotOtp, .wa-input.wa-otp { text-align:center; letter-spacing:6px; font-size:18px; font-weight:700; }
.auth-form #forgotOtp::placeholder, .wa-input.wa-otp::placeholder { letter-spacing:normal; font-size:14px; font-weight:400; }
.wa-desc { color:#9aa; font-size:13px; margin:-6px 0 12px; }
.wa-input { width:100%; padding:10px 12px; margin-bottom:10px; border-radius:8px; border:1px solid #2a2f3b; background:#0f1117; color:#fff; font-size:15px; }
.wa-card .link-btn.wa-resend { margin:-4px 0 10px; padding:2px 0; }
.wa-card .link-btn:disabled { color:#7a8294; cursor:default; }
.wa-linked { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:14px; margin-bottom:6px; }
.wa-linked-btns { display:flex; gap:8px; }
.fp-code { font-size:20px; letter-spacing:3px; }
.fp-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.fp-actions .btn-sm { padding:9px 16px; font-size:13px; }
.fp-actions .fp-primary { background:#6ea8fe; border-color:#6ea8fe; color:#0f1117; font-weight:700; }
html[data-theme="light"] .forgot-title { color:#1d2433; }
html[data-theme="light"] .wa-input { background:#fff; border-color:#d9deec; color:#1d2433; }
html[data-theme="light"] .link-btn { color:#2f6fe4; }

.wa-number { font-size:20px; font-weight:700; letter-spacing:1px; margin:2px 0 8px; }
.wa-card .wa-desc { margin:0; }

.auth-form button.reg-otp-resend.fg-email { display:block; margin-top:2px; }

.bk-total { font-size:12px; opacity:.75; margin-bottom:6px; }

/* ── Referral ── */
.ref-intro { color:#9aa; font-size:14px; line-height:1.6; }
.ref-linkbox { margin:12px 0 10px; padding:12px; border-radius:10px; border:1px dashed #3b4a66; background:#0f1117; color:#dfe6f3; font-weight:600; font-size:14px; word-break:break-all; }
.ref-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.ref-actions .btn-sm { padding:10px 16px; font-size:13px; }
.ref-code { margin:12px 0 4px; font-size:14px; color:#9aa; }
.ref-code b { color:#dfe6f3; letter-spacing:2px; margin-right:6px; }
.ref-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.ref-stat { padding:12px; border-radius:10px; border:1px solid #2a2f3b; background:#11141b; }
.ref-stat small { display:block; color:#9aa; font-size:12px; margin-bottom:4px; }
.ref-stat b { font-size:18px; color:#dfe6f3; }
.ref-by { margin:12px 0 0; font-size:13px; color:#9aa; }
.ref-history .ref-row { display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid #222838; font-size:13px; }
.ref-history .ref-row:last-child { border-bottom:none; }
.ref-history .ref-row small { display:block; color:#8a93a6; font-size:12px; margin-top:2px; }
.ref-history .ref-plus { color:#22c55e; font-weight:700; white-space:nowrap; text-align:right; }
.ref-empty { color:#8a93a6; font-size:13px; padding:6px 0; }
.ref-rules { margin:0; padding-left:18px; color:#9aa; font-size:13px; line-height:1.7; }
.ref-note { margin:-2px 0 10px; font-size:13px; line-height:1.45; color:#9fc3ff; }
html[data-theme="light"] .ref-linkbox { background:#f5f8ff; border-color:#b9c8e8; color:#1d2433; }
html[data-theme="light"] .ref-stat { background:#fff; border-color:#d9deec; }
html[data-theme="light"] .ref-stat b, html[data-theme="light"] .ref-code b { color:#1d2433; }
html[data-theme="light"] .ref-history .ref-row { border-color:#e5e9f2; }
html[data-theme="light"] .ref-note { color:#2f6fe4; }

.ref-set { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ref-set input { width:90px; text-align:center; font-size:18px; font-weight:700; padding:9px 10px; border-radius:8px; border:1px solid #2a2f3b; background:#0f1117; color:#fff; }
.ref-set-unit { font-size:18px; font-weight:700; margin-right:6px; }
html[data-theme="light"] .ref-set input { background:#fff; border-color:#d9deec; color:#1d2433; }

/* ── Tampilan di Google (admin) ── */
.seo-preview { border:1px solid #2a2f3b; border-radius:12px; padding:14px; background:#fff; margin:6px 0 12px; }
.seo-head { display:flex; align-items:center; gap:10px; }
.seo-head b { display:block; color:#202124; font-size:14px; font-weight:500; }
.seo-head small { display:block; color:#4d5156; font-size:12px; }
.seo-icon { width:28px; height:28px; border-radius:50%; background:#f1f3f4; object-fit:cover; border:1px solid #e3e3e3; }
.seo-title { color:#1a0dab; font-size:18px; line-height:1.3; margin:8px 0 4px; }
.seo-desc { color:#4d5156; font-size:13px; line-height:1.5; }
.seo-icon-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:8px 0 12px; }
.seo-label { display:block; font-size:13px; color:#9aa; margin:6px 0 4px; }
.seo-input { width:100%; padding:10px 12px; border-radius:8px; border:1px solid #2a2f3b; background:#0f1117; color:#fff; font:inherit; font-size:14px; resize:vertical; }
html[data-theme="light"] .seo-input { background:#fff; border-color:#d9deec; color:#1d2433; }

/* ===== Pindah menu & scroll halus (gasquw) =====
   1) Lebar halaman tidak berubah walau halaman pendek/panjang (desktop: scrollbar tidak muncul-hilang -> tidak geser kiri-kanan).
   2) Isi menu minimal setinggi layar -> saat data masih dimuat halaman tidak "kempis" lalu memanjang (bar alamat HP tidak naik-turun).
   3) Menu baru muncul dengan pudar singkat (hanya opacity, dikerjakan GPU) -> tidak terasa "kedip" kasar.
   4) Tombol tanpa jeda sentuh (tidak menunggu deteksi ketuk-dua-kali). */
html { scrollbar-gutter:stable; }
main { min-height:calc(100vh - 120px); }
@supports (height:100svh) { main { min-height:calc(100svh - 120px); } }
/* Pindah menu LANGSUNG tanpa efek pudar (seperti tab bar iPhone). Efek pudar pada halaman panjang membuat
   iPhone menggambar ulang seluruh halaman -> terasa kedip/getar. */
button, .nav-btn, .admin-tab-btn, .tab-btn, .chip, .price-tile, a { touch-action:manipulation; }
/* Lebar tombol menu tetap (sudah memperhitungkan teks tebal saat aktif) -> bar menu tidak bergeser saat pindah menu. */
.nav-btn[data-label], .admin-tab-btn[data-label] { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; }
.nav-btn[data-label]::after, .admin-tab-btn[data-label]::after { content:attr(data-label); font-weight:700; height:0; overflow:hidden;
  visibility:hidden; pointer-events:none; user-select:none; -webkit-user-select:none; speak:never; }

/* ===== Bar atas (logo + saldo + Keluar) DIAM saat scroll / pindah menu (hslwnw) =====
   Dulu bar atas "sticky". Di iPhone (Safari) bar sticky yang punya lapisan GPU sendiri ikut bergetar saat scroll
   momentum & saat posisi halaman berubah (pindah menu). Sekarang bar atas "fixed" (menempel di layar, tidak ikut
   dihitung ulang tiap scroll) dan halaman diberi ruang setinggi bar itu di atasnya. */
.topbar { position:fixed; top:0; left:0; right:0; z-index:50; -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0);
  contain:layout style; }
#appScreen { padding-top:var(--tb-h, 62px); }
html { scroll-padding-top:calc(var(--tb-h, 62px) + 8px); }
/* Pilihan server 1 baris lurus: S1 S2 S3 S4 S5 S6 (server yang dimatikan admin otomatis tidak tampil). */
.server-tabs { flex-wrap:nowrap; gap:8px; }
.server-tabs button { flex:1 1 0; min-width:0; max-width:110px; padding:10px 0; text-align:center; font-weight:600;
  white-space:nowrap; letter-spacing:.3px; }
.server-tabs:has(.otp-waiting) { flex-wrap:wrap; }
.server-tabs button.btn-sm { flex:0 0 auto; max-width:none; padding:6px 12px; }
/* Keterangan kecil "OTP via WA" di bawah S5/S6; semua tombol server tingginya sama. */
.server-tabs { align-items:stretch; }
.server-tabs button { display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.15; min-height:44px; padding:6px 2px; }
.server-tabs .srv-sub { display:block; margin-top:2px; font-size:8.5px; font-weight:600; letter-spacing:0; white-space:nowrap; opacity:.8; }
.server-tabs button.active .srv-sub { opacity:.95; }
@media (max-width:375px) { .server-tabs { gap:6px; } .server-tabs .srv-sub { font-size:7.5px; } }
.server-tabs .srv-sub { max-width:100%; overflow:hidden; text-overflow:clip; }

/* ===== Pilihan aplikasi / negara lebih ringkas (gasqoie) =====
   Dulu tiap tombol lebar (padding besar) -> selalu 2 per baris sampai bawah. Sekarang lebih ringkas, jadi
   ikut panjang nama: ada baris berisi 3, ada yang 2 (nama pendek muat 3, nama panjang 2). */
.chip-grid { gap:7px 5px; }
.chip-grid .chip { padding:8px 9px; gap:4px; font-size:12.5px; line-height:1.2; border-radius:20px; letter-spacing:-.1px; }
.chip-grid .chip .chip-sub { margin-left:0; font-size:9.5px; letter-spacing:-.2px; }
.chip-grid .chip .flag { font-size:15px; }
.help-card a { overflow-wrap:anywhere; word-break:break-word; }
.info-popup-card p.ip-title { margin-bottom:8px; font-size:17px; }
.info-popup-card p.ip-title + p { margin-bottom:10px; }
.ref-keep-note { margin:-4px 0 10px; font-size:12px; color:#8a93a6; }
html[data-theme="light"] .ref-keep-note { color:#5b6478; }
.lock-notice p.lock-default { margin-top:-4px; }

/* ===== Menu utama ala "Modern Navbar" (gskwb) =====
   Bar menu jadi satu kapsul kaca bergaris tipis; tombol tanpa kotak; menu aktif ditandai kapsul toska bercahaya
   yang bergerak seperti cairan (memanjang -> menyusut -> membal). Tanpa blur (blur berat di iPhone saat scroll). */
.navtabs { width:max-content; max-width:calc(100% - 24px); margin:12px auto 6px; padding:5px; gap:2px; align-items:center;
  border-radius:999px; background:rgba(255,255,255,.05); border:.5px solid rgba(204,204,204,.55);
  box-shadow:0 15px 35px rgba(0,0,0,.5); }
.nav-btn, html[data-theme="light"] .nav-btn { border:0; background:transparent; color:#e6e8ee; padding:9px 16px; border-radius:999px;
  font-size:14px; font-weight:500; letter-spacing:.1px;
  transition:color .3s ease, transform .18s cubic-bezier(.34,1.56,.64,1); }
.nav-btn:active { transform:scale(.92); }
.nav-btn.active, html[data-theme="light"] .nav-btn.active { color:#03252b; font-weight:700; border:0; background:transparent; }
.nav-ind { transition:none; transform-origin:0 50%; }
.nav-ind i { background:linear-gradient(90deg,#14b8a6 0%,#2dd4bf 45%,#22d3ee 100%);
  border-radius:calc(var(--r,18px) / var(--sx)) / var(--r,18px);
  box-shadow:0 0 16px rgba(34,211,238,.45), inset 0 1px 0 rgba(255,255,255,.35); }
.nav-sep { background:rgba(204,204,204,.3); height:20px; }
.theme-btn { border:0; background:rgba(255,255,255,.06); width:38px; height:36px; }
html[data-theme="light"] .navtabs { background:rgba(255,255,255,.8); border-color:rgba(15,23,42,.14); box-shadow:0 10px 26px rgba(30,41,59,.14); }
html[data-theme="light"] .nav-btn { color:#334155; }
html[data-theme="light"] .nav-btn.active { color:#03252b; }
html[data-theme="light"] .nav-ind i { box-shadow:0 0 14px rgba(20,184,166,.35), inset 0 1px 0 rgba(255,255,255,.45); }
html[data-theme="light"] .theme-btn { border:0; background:rgba(15,23,42,.05); }
@media (prefers-reduced-motion: reduce) { .nav-btn { transition:none; } .nav-btn:active { transform:none; } }

/* ===== Animasi memuat: 3 bola memantul + bayangan (vasqib) — hanya transform/opacity ===== */
.bn-loader { position:relative; display:block; width:96px; height:44px; margin:16px auto; }
.bn-loader .bl-c { position:absolute; top:0; width:14px; height:14px; margin-left:-7px; border-radius:50%;
  background:linear-gradient(135deg,#2dd4bf,#22d3ee); box-shadow:0 0 10px rgba(34,211,238,.35);
  transform-origin:50% 100%; animation:blBounce .5s cubic-bezier(.5,0,.5,1) infinite alternate; will-change:transform; }
.bn-loader .bl-s { position:absolute; top:38px; width:14px; height:4px; margin-left:-7px; border-radius:50%;
  background:rgba(34,211,238,.28); animation:blShadow .5s cubic-bezier(.5,0,.5,1) infinite alternate; will-change:transform; }
.bn-loader .bl-c:nth-child(1), .bn-loader .bl-s:nth-child(4) { left:18%; }
.bn-loader .bl-c:nth-child(2), .bn-loader .bl-s:nth-child(5) { left:50%; animation-delay:.2s; }
.bn-loader .bl-c:nth-child(3), .bn-loader .bl-s:nth-child(6) { left:82%; animation-delay:.3s; }
@keyframes blBounce {
  0%   { transform:translateY(25px) scale(1.7,.35); }
  40%  { transform:translateY(23px) scale(1,1); }
  100% { transform:translateY(0) scale(1,1); }
}
@keyframes blShadow {
  0%   { transform:scaleX(1.5); opacity:1; }
  40%  { transform:scaleX(1); opacity:.75; }
  100% { transform:scaleX(.25); opacity:.35; }
}
html[data-theme="light"] .bn-loader .bl-c { background:linear-gradient(135deg,#0d9488,#06b6d4); box-shadow:0 0 8px rgba(6,182,212,.3); }
html[data-theme="light"] .bn-loader .bl-s { background:rgba(15,23,42,.22); }
.chip-grid .bn-loader, .price-grid .bn-loader { flex:0 0 96px; margin:16px auto; }
.qr-box.qr-loading { text-align:center; }
.qr-box.qr-loading p { margin:0 0 6px; font-size:13px; opacity:.8; }
/* titik kecil di tombol (mis. "Memproses ...") */
.bn-dots { display:inline-flex; gap:3px; vertical-align:middle; margin-left:4px; }
.bn-dots i { width:5px; height:5px; border-radius:50%; background:currentColor; animation:bnDot .5s ease-in-out infinite alternate; }
.bn-dots i:nth-child(2) { animation-delay:.15s; } .bn-dots i:nth-child(3) { animation-delay:.3s; }
@keyframes bnDot { from { transform:translateY(2px); opacity:.5; } to { transform:translateY(-3px); opacity:1; } }
@media (prefers-reduced-motion: reduce) { .bn-loader .bl-c, .bn-loader .bl-s, .bn-dots i { animation-duration:1.4s; } }

/* ===== Pilihan server S1–S6 "cair" (vasqib): satu kapsul, penanda hijau bergerak seperti cairan ===== */
.server-tabs { position:relative; padding:5px; gap:4px; border-radius:16px; background:rgba(255,255,255,.04);
  border:.5px solid rgba(204,204,204,.4); box-shadow:0 10px 26px rgba(0,0,0,.35); }
.server-tabs button, html[data-theme="light"] .server-tabs button,
.server-tabs button.active, html[data-theme="light"] .server-tabs button.active {
  position:relative; z-index:1; background:transparent; border:0; border-radius:12px; color:#dfe6f3;
  transition:color .3s ease, transform .18s cubic-bezier(.34,1.56,.64,1); -webkit-tap-highlight-color:transparent; }
.server-tabs button:active { transform:scale(.92); }
.server-tabs button.active, html[data-theme="light"] .server-tabs button.active { color:#052e16; font-weight:800; }
html[data-theme="light"] .server-tabs button:not(.active) { color:#334155; }
.server-tabs button.btn-sm { border:1px solid rgba(204,204,204,.45); border-radius:10px; }
.srv-ind { position:absolute; left:0; top:0; z-index:0; width:100px; height:0; opacity:0; pointer-events:none;
  transform-origin:0 50%; will-change:transform; --sx:1; }
.srv-ind i { position:absolute; inset:0; background:linear-gradient(135deg,#22c55e 0%,#4ade80 100%);
  border-radius:calc(var(--r,12px) / var(--sx)) / var(--r,12px);
  box-shadow:0 0 14px rgba(34,197,94,.45), inset 0 1px 0 rgba(255,255,255,.35); }
html[data-theme="light"] .server-tabs { background:rgba(255,255,255,.8); border-color:rgba(15,23,42,.14); box-shadow:0 8px 22px rgba(30,41,59,.12); }
@media (prefers-reduced-motion: reduce) { .server-tabs button { transition:none; } .server-tabs button:active { transform:none; } }

/* ===== Scroll mulus walau order banyak (haiqn) =====
   - Kartu order yang di luar layar tidak digambar sama sekali (content-visibility), ukurannya tetap dipesan.
   - Isi kartu dikurung (contain) -> perubahan hitung mundur tidak membuat halaman dihitung ulang.
   - Gelembung di kartu order tanpa bayangan berlapis (bayangan = paling berat digambar di HP). */
/* (content-visibility dilepas: di iPhone membuat kartu digambar saat scroll -> tersendat & tinggi halaman berubah) */
.order-card { contain:layout paint style; }
.order-card .bubbles .b { box-shadow:none; }
#activeOrderCard { contain:layout style; }

/* ===== Tombol "cair" (haiqn): membal seperti jeli + warna menyebar dari titik sentuh ===== */
/* Pemotong efek hanya dipasang SAAT disentuh (.liq-on), bukan permanen di ratusan tombol -> scroll tetap ringan. */
.chip-grid .chip, .price-grid .price-tile, #btnOrder, .order-actions button, .btn-primary, .btn-sm { position:relative; }
.liq-on { overflow:hidden; isolation:isolate; }
.liq-ripple { position:absolute; border-radius:50%; pointer-events:none; z-index:-1;
  background:radial-gradient(circle, rgba(45,212,191,.55) 0%, rgba(34,211,238,.3) 45%, rgba(34,211,238,0) 70%);
  transform:scale(0); opacity:1; animation:liqRipple .6s cubic-bezier(.2,.8,.25,1) forwards; }
.btn-primary .liq-ripple, #btnOrder .liq-ripple { background:radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(255,255,255,.25) 45%, rgba(255,255,255,0) 70%); }
.order-actions .liq-ripple { background:radial-gradient(circle, currentColor 0%, transparent 70%); opacity:.35; }
@keyframes liqRipple { to { transform:scale(1); opacity:0; } }
.jelly { animation:jelly .6s cubic-bezier(.3,.7,.4,1.4); }
@keyframes jelly {
  0%   { transform:scale(1,1); }
  25%  { transform:scale(.9,1.1); }
  45%  { transform:scale(1.08,.92); }
  65%  { transform:scale(.97,1.03); }
  80%  { transform:scale(1.02,.98); }
  100% { transform:scale(1,1); }
}
.chip-grid .chip:active, .price-grid .price-tile:active, #btnOrder:not(:disabled):active, .btn-primary:not(:disabled):active { transform:scale(.94); }
.chip-grid .chip, .price-grid .price-tile, #btnOrder, .btn-primary { transition:transform .18s cubic-bezier(.34,1.56,.64,1), background-color .15s ease, border-color .15s ease, color .15s ease; }
/* Tombol Pesan Nomor: kapsul toska cair (serasi dengan menu) */
#btnOrder { border-radius:999px; background:linear-gradient(90deg,#14b8a6,#2dd4bf 50%,#22d3ee); color:#03252b; box-shadow:0 6px 18px rgba(34,211,238,.3); }
#btnOrder:disabled { background:linear-gradient(90deg,#14b8a6,#22d3ee); opacity:.4; box-shadow:none; }
@media (prefers-reduced-motion: reduce) { .jelly, .liq-ripple { animation:none; } }

/* ===== Wallet / QRIS mulus + tombol cair (kwnaws) ===== */
/* Hitung mundur QRIS berubah tiap detik: dikurung supaya tidak membuat seluruh halaman dihitung ulang. */
#topupCountdown { font-variant-numeric:tabular-nums; } /* angka lebar tetap -> tidak menggeser teks tiap detik */
.qr-box { contain:layout style; }
.qr-box img { width:220px; height:auto; aspect-ratio:1/1; }
/* Tombol Cek Status / Download QR / Batalkan: kapsul cair */
.topup-actions { gap:6px; flex-wrap:nowrap; }
.topup-actions .btn-sm { border-radius:999px; padding:9px 12px; font-size:12.5px; font-weight:600; white-space:nowrap; flex:0 1 auto; min-width:0;
  border:.5px solid rgba(204,204,204,.45); background:rgba(255,255,255,.05);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), background-color .15s ease; }
.topup-actions .btn-sm:active { transform:scale(.92); }
.topup-actions .btn-cancel { color:#ff6b6b; border-color:rgba(255,107,107,.6); background:rgba(255,107,107,.08); }
html[data-theme="light"] .topup-actions .btn-sm { background:rgba(255,255,255,.85); border-color:rgba(15,23,42,.16); }
html[data-theme="light"] .topup-actions .btn-cancel { color:#d6293b; border-color:rgba(214,41,59,.45); background:rgba(214,41,59,.06); }
.btn-cancel .liq-ripple { background:radial-gradient(circle, rgba(255,107,107,.5) 0%, rgba(255,107,107,0) 70%); }
.btn-sm { transition:transform .18s cubic-bezier(.34,1.56,.64,1), background-color .15s ease, border-color .15s ease; }
.btn-sm:not(:disabled):active { transform:scale(.93); }
/* Tidak ada efek "ditekan" (:active) di tombol yang berada di area scroll: di iPhone, jari yang sedang scroll
   ikut memicu efek tekan -> tombol mengecil-membesar saat scroll = terasa getar. Efek cair hanya saat diklik. */
.chip-grid .chip:active, .price-grid .price-tile:active, #btnOrder:not(:disabled):active, .btn-primary:not(:disabled):active,
.btn-sm:not(:disabled):active, .topup-actions .btn-sm:active, .nav-btn:active, .server-tabs button:active, .order-actions button:active { transform:none; }

/* ===== Menu Bantuan: "Pusat Informasi" (iwjwbk) ===== */
.help-hub { padding:20px 16px; }
.help-hub .hh-title { margin:0 0 6px; font-size:22px; font-weight:700; color:#f1f5f9; }
.help-hub .hh-sub { margin:0 0 16px; font-size:14px; color:#94a3b8; }
.help-items { display:flex; flex-direction:column; gap:12px; }
.help-item { position:relative; display:flex; align-items:center; gap:14px; padding:16px 14px; border-radius:16px;
  background:rgba(255,255,255,.04); border:.5px solid rgba(148,163,184,.18); color:inherit; text-decoration:none;
  -webkit-tap-highlight-color:transparent; transition:background-color .2s ease, border-color .2s ease; }
.help-item:hover { background:rgba(255,255,255,.07); border-color:rgba(34,211,238,.35); }
.help-item .hi-ic { flex:none; width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:rgba(96,165,250,.14); color:#93c5fd; }
.help-item .hi-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.help-item .hi-txt b { font-size:16px; font-weight:600; color:#f1f5f9; }
.help-item .hi-txt small { font-size:13.5px; line-height:1.4; color:#94a3b8; }
.help-item .hi-arrow { flex:none; color:#60a5fa; transition:transform .25s cubic-bezier(.34,1.56,.64,1); }
.help-item:hover .hi-arrow { transform:translate(2px,-2px); }
.help-item .liq-ripple { background:radial-gradient(circle, rgba(96,165,250,.35) 0%, rgba(34,211,238,.18) 45%, rgba(34,211,238,0) 70%); }
html[data-theme="light"] .help-hub .hh-title { color:#0f172a; }
html[data-theme="light"] .help-hub .hh-sub, html[data-theme="light"] .help-item .hi-txt small { color:#64748b; }
html[data-theme="light"] .help-item { background:#f8fafc; border-color:rgba(15,23,42,.1); }
html[data-theme="light"] .help-item .hi-txt b { color:#0f172a; }
html[data-theme="light"] .help-item .hi-ic { background:rgba(59,130,246,.1); color:#2563eb; }
html[data-theme="light"] .help-item .hi-arrow { color:#2563eb; }

/* ===== Semua tombol cair (cairsemua) ===== */
/* Warna efek sesuai jenis tombol; tombol utama berbentuk kapsul seperti tombol Pesan Nomor. */
.btn-primary { border-radius:999px; }
.btn-primary .liq-ripple { background:radial-gradient(circle, rgba(255,255,255,.6) 0%, rgba(255,255,255,.25) 45%, rgba(255,255,255,0) 70%); }
.ak-btn .liq-ripple, .tab-btn .liq-ripple { background:radial-gradient(circle, rgba(59,130,246,.35) 0%, rgba(59,130,246,0) 70%); }
.oa-cancel .liq-ripple, .btn-danger .liq-ripple { background:radial-gradient(circle, rgba(255,107,107,.5) 0%, rgba(255,107,107,0) 70%); }
.oa-done .liq-ripple { background:radial-gradient(circle, rgba(34,197,94,.45) 0%, rgba(34,197,94,0) 70%); }

/* ===== Tampilan rapi & serasi (iwaoneb) — terutama tema terang =====
   Warna pilihan aktif disamakan dengan menu (toska). Bayangan diperkecil (bayangan besar berat digambar di HP). */
.navtabs { box-shadow:0 6px 16px rgba(0,0,0,.35); }
.server-tabs { box-shadow:0 4px 12px rgba(0,0,0,.25); }
#btnOrder { box-shadow:0 4px 10px rgba(34,211,238,.25); }
.nav-ind i, .srv-ind i { box-shadow:0 0 10px rgba(34,211,238,.35), inset 0 1px 0 rgba(255,255,255,.35); }
.srv-ind i { box-shadow:0 0 10px rgba(34,197,94,.35), inset 0 1px 0 rgba(255,255,255,.35); }

/* Pilihan aplikasi / negara / operator: kapsul rapi, terpilih = toska */
.chip-grid .chip { border-radius:999px; }
.chip-grid .chip.selected { background:rgba(45,212,191,.14); border-color:#2dd4bf; color:#5eead4; box-shadow:0 0 0 1px #2dd4bf inset; }
.price-grid .price-tile.selected { background:rgba(45,212,191,.12); border-color:#2dd4bf; box-shadow:0 0 0 1px #2dd4bf inset; }
.chip-search { border-radius:12px; }

html[data-theme="light"] .card { border-color:#e3e8f2; box-shadow:0 1px 3px rgba(15,23,42,.06); border-radius:16px; }
html[data-theme="light"] .chip-section .sec-label { color:#475569 !important; font-weight:600; }
html[data-theme="light"] .chip-search, html[data-theme="light"] input[type=text], html[data-theme="light"] input[type=email],
html[data-theme="light"] input[type=number], html[data-theme="light"] select {
  background:#f8fafc; border-color:#e2e8f0; color:#0f172a; }
html[data-theme="light"] .chip-search:focus, html[data-theme="light"] input:focus, html[data-theme="light"] select:focus {
  outline:none; border-color:#14b8a6; box-shadow:0 0 0 3px rgba(20,184,166,.15); }
html[data-theme="light"] .chip-grid .chip { background:#fff; border-color:#e2e8f0; color:#334155; }
html[data-theme="light"] .chip-grid .chip .chip-sub { color:#16a34a; }
html[data-theme="light"] .chip-grid .chip.selected { background:#ccfbf1; border-color:#14b8a6; color:#0f766e; box-shadow:0 0 0 1px #14b8a6 inset; }
html[data-theme="light"] .chip-grid .chip.selected .chip-sub { color:#0f766e; }
html[data-theme="light"] .price-grid .price-tile { background:#fff; border-color:#e2e8f0; }
html[data-theme="light"] .price-grid .price-tile .pt-price { color:#16a34a; }
html[data-theme="light"] .price-grid .price-tile.selected { background:#ccfbf1; border-color:#14b8a6; box-shadow:0 0 0 1px #14b8a6 inset; }
html[data-theme="light"] #priceSection.bub-host { background:linear-gradient(160deg,#f0fdfa,#f8fafc 60%,#eff6ff); border-color:#ccfbf1; }
html[data-theme="light"] .btn-sm { background:#fff; border-color:#e2e8f0; color:#334155; border-radius:999px; }
html[data-theme="light"] .btn-sm:hover { border-color:#14b8a6; color:#0f766e; }
html[data-theme="light"] .order-card { background:#fff; border-color:#e3e8f2; box-shadow:0 1px 3px rgba(15,23,42,.06); }
html[data-theme="light"] .order-card .order-id { color:#0f766e; }
html[data-theme="light"] .app-pill { background:#ccfbf1; color:#0f766e; border-color:#99f6e4; }
html[data-theme="light"] .copy-btn { background:#f8fafc; border-color:#e2e8f0; }
html[data-theme="light"] .table th { color:#64748b !important; }
html[data-theme="light"] .topbar { background:rgba(255,255,255,.96); border-bottom-color:#e3e8f2; }
html[data-theme="light"] .navtabs { box-shadow:0 4px 12px rgba(15,23,42,.08); }
html[data-theme="light"] .server-tabs { box-shadow:0 2px 8px rgba(15,23,42,.06); }
html[data-theme="light"] .tab-btn.active { background:linear-gradient(90deg,#14b8a6,#22d3ee); color:#03252b; }
html[data-theme="light"] .btn-primary:not(#btnOrder) { background:linear-gradient(90deg,#14b8a6,#2dd4bf 50%,#22d3ee); color:#03252b; }
html[data-theme="light"] .btn-primary:disabled { opacity:.45; }
.btn-primary:not(#btnOrder) { background:linear-gradient(90deg,#14b8a6,#2dd4bf 50%,#22d3ee); color:#03252b; }
.btn-primary:disabled { opacity:.45; }
.tab-btn.active { background:linear-gradient(90deg,#14b8a6,#22d3ee); color:#03252b; }

/* ===== Halaman Masuk / Daftar tetap BIRU (iwjwbuqb) — tidak ada warna hijau/toska di sini ===== */
#authScreen .tab-btn.active, html[data-theme="light"] #authScreen .tab-btn.active { background:#6ea8fe; color:#0f1117; }
#authScreen .btn-primary, html[data-theme="light"] #authScreen .btn-primary,
#authScreen .auth-form button:not(.reg-otp-resend):not(.btn-link):not(.link-btn):not(.g-btn) { background:#6ea8fe; color:#0f1117; }
#authScreen input:focus, #authScreen .chip-search:focus,
html[data-theme="light"] #authScreen input:focus { outline:none; border-color:#6ea8fe; box-shadow:0 0 0 3px rgba(110,168,254,.2); }
#authScreen .liq-ripple { background:radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(110,168,254,.25) 45%, rgba(110,168,254,0) 70%); }

/* ===== Pindah menu instan (kahwhina) =====
   Dulu menu yang tidak aktif disembunyikan dengan display:none -> setiap pindah menu browser membangun ulang
   tata letak seluruh menu (ratusan pilihan aplikasi/negara) dari nol = patah-patah. Sekarang menu tidak aktif
   hanya "tidak digambar" (content-visibility:hidden): tata letaknya disimpan, jadi kembali ke menu itu langsung
   tampil. Browser lama yang belum mendukung tetap memakai cara lama (display:none). */
@supports (content-visibility: hidden) {
  .view { display:block; }
  .view:not(.active) { content-visibility:hidden; height:0; overflow:hidden; margin:0 !important; padding:0 !important; border:0 !important; }
}

/* ===== HP layar sempit (iPhone dll): semua menu & pilihan muat lengkap seperti di Android (kwnajnalba) =====
   iPhone memakai huruf yang sedikit lebih lebar -> menu Bantuan & tombol tema terdorong keluar layar dan pilihan
   aplikasi hanya muat sedikit per baris. Ukuran sekarang menyesuaikan lebar layar. */
@media (max-width: 440px) {
  main { padding:12px 10px; }
  .card { padding:13px 12px; }
  .navtabs { max-width:calc(100% - 16px); margin:10px auto 6px; padding:4px; gap:0; }
  .nav-btn, html[data-theme="light"] .nav-btn { padding:8px clamp(5px, 2vw, 12px); font-size:clamp(11.5px, 3.05vw, 14px); }
  .nav-sep { margin:0 2px; height:18px; }
  .theme-btn { width:32px; height:32px; }
  .theme-btn svg { width:17px; height:17px; margin:-8.5px 0 0 -8.5px; }
  .server-tabs { padding:4px; gap:2px; }
  .chip-grid { gap:6px 5px; }
  .chip-grid .chip { padding:7px 9px; font-size:12px; }
  .chip-grid .chip .chip-sub { font-size:9.5px; }
  .chip-section .sec-label { font-size:12px; }
  .topbar { padding:10px 10px; }
}
@media (max-width: 360px) {
  .nav-btn, html[data-theme="light"] .nav-btn { padding:7px 5px; font-size:11px; }
  .chip-grid .chip { padding:6px 8px; font-size:11.5px; }
}

/* ===== kauwhiwhboh: scroll super mulus =====
   - Animasi loading di menu yang tidak dibuka dihentikan (dulu tetap jalan di latar & memakan tenaga tiap frame).
   - Kartu order: isi diisolasi (perubahan teks di dalam kartu tidak memaksa browser menghitung ulang seluruh halaman).
   - Penghitung waktu lebar tetap -> angka berganti tanpa menggeser apa pun. */
.view:not(.active) .bn-loader span { animation:none !important; }
.order-card { contain:layout style; }
.order-timer { display:inline-block; min-width:4.6ch; text-align:right; font-variant-numeric:tabular-nums; }
@media (prefers-reduced-motion: reduce) { .bn-loader span { animation-duration:1.4s; } }

/* ===== jgaiqn: anti zoom sendiri di HP =====
   iPhone (Safari) otomatis memperbesar layar kalau kolom isian hurufnya < 16px (email, kunci, kode, cari),
   lalu tampilan tetap ter-zoom setelah login/daftar. Di layar sentuh semua kolom isian minimal 16px,
   dan ketuk dua kali tidak lagi memperbesar layar (geser & scroll tetap normal). */
html { touch-action:manipulation; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
@media (pointer:coarse), (max-width:820px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size:16px !important; }
  .auth-form #regOtp, .auth-form #forgotOtp, .wa-input.wa-otp { font-size:18px !important; }
}

/* ── Tombol Masuk / Daftar dengan Google ── */
#authScreen .auth-form button.g-btn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:12px 14px; margin:0;
  border-radius:999px; border:1px solid #3a3f4b; background:#1f1f1f; color:#e8eaed; font-weight:600; font-size:15px; letter-spacing:.1px; }
#authScreen .auth-form button.g-btn:hover { background:#2a2a2a; }
#authScreen .auth-form button.g-btn:active { transform:scale(.985); }
#authScreen .auth-form button.g-btn:disabled { opacity:.7; }
.g-btn .g-logo { width:20px; height:20px; flex:0 0 20px; }
.g-or { display:flex; align-items:center; gap:10px; margin:14px 0 12px; color:#7a8294; font-size:12px; }
.g-or::before, .g-or::after { content:""; flex:1; height:1px; background:#2a2f3b; }
html[data-theme="light"] #authScreen .auth-form button.g-btn { background:#fff; color:#1f1f1f; border-color:#dadce0; }
html[data-theme="light"] #authScreen .auth-form button.g-btn:hover { background:#f6f8fa; }
html[data-theme="light"] .g-or::before, html[data-theme="light"] .g-or::after { background:#dadce0; }
.legal-links { text-align:center; margin:16px 0 0; font-size:12px; color:#7a8294; }
.legal-links a { color:inherit; text-decoration:underline; }

/* Total akun & login (Admin > Email) */
.eml-box .eml-split { display:block; margin-top:4px; opacity:.75; font-size:12px; }
.eml-box.eml-total b { color:#2dd4bf; }
html[data-theme="light"] .eml-box.eml-total b { color:#0d9488; }
.eml-box .eml-split span { white-space:nowrap; }