/* ═════════════════════════════════════════════════════════
   ISANBLAST — app.css

   Berkas ini punya DUA lapisan, dan urutannya penting:

     1. FONDASI  — tata letak: .app jadi kolom+isi, lebar
        sidebar, tautan tanpa garis bawah, wajah huruf dasar.
        Tanpa bagian ini semuanya menumpuk dan tampil seperti
        halaman tanpa gaya.

     2. TEMA     — warna, cahaya, dan hiasan. Menimpa fondasi,
        TIDAK menggantikannya.

   Kalau nanti temanya diganti lagi, ganti bagian 2 saja.
   Membuang bagian 1 akan merusak tata letak seluruh aplikasi.
   ═════════════════════════════════════════════════════════ */

/* @lapisan:fondasi — JANGAN DIBUANG. Tanpa ini tata letak ambruk. */
html,body{height:100%}
body{
  font-family:"Inter",-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--ink);font-size:14px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue-600);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── layout ─────────────────────────────────────────── */
.app{display:flex;min-height:100vh}
.sidebar{
  width:var(--sidebar);flex-shrink:0;
  background:linear-gradient(178deg,var(--blue-800),var(--blue-900));
  color:#fff;display:flex;flex-direction:column;
  position:fixed;inset:0 auto 0 0;z-index:40;
}
.brand{padding:24px 22px 20px;display:flex;gap:12px;align-items:flex-start}
.brand-mark{
  width:40px;height:40px;border-radius:50%;background:#fff;flex-shrink:0;
  display:grid;place-items:center;color:var(--blue-700);
}
.brand-name{font-size:22px;font-weight:800;letter-spacing:-.5px;line-height:1.1}
.brand-name span{color:#7dd3fc}
.brand-sub{font-size:11px;color:#b6c6f5;margin-top:4px;line-height:1.4}
.nav{padding:8px 12px;flex:1;overflow-y:auto}
.nav a{
  display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;
  color:#c7d5fb;font-weight:500;margin-bottom:2px;transition:background .15s,color .15s;
}
.nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.nav a.active{background:var(--blue-600);color:#fff;font-weight:600}
.nav svg{width:19px;height:19px;flex-shrink:0}
.plan-card{margin:12px;padding:18px 16px;border-radius:var(--r);text-align:center;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12)}
.plan-card .crown{font-size:22px}
.plan-card h4{font-size:11px;color:#b6c6f5;font-weight:600;letter-spacing:.4px;margin-top:6px}
.plan-card .tier{font-size:24px;font-weight:800;letter-spacing:.5px;margin:2px 0}
.plan-card .rate{font-size:11px;color:#b6c6f5}
.plan-card button{
  width:100%;margin-top:12px;padding:9px;border:0;border-radius:9px;
  background:var(--blue-600);color:#fff;font-weight:600;cursor:pointer;font-size:13px}
.plan-card button:hover{background:var(--blue-500)}

.main{flex:1;margin-left:var(--sidebar);min-width:0;display:flex;flex-direction:column}
.topbar{
  background:var(--card);border-bottom:1px solid var(--line);
  padding:14px 26px;display:flex;align-items:center;gap:16px;
  position:sticky;top:0;z-index:30}
.hamburger{display:none;background:0;border:0;cursor:pointer;padding:6px}
.greet h1{font-size:17px;font-weight:700}
.greet p{font-size:12.5px;color:var(--ink-3)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.bell{position:relative;background:0;border:0;cursor:pointer;padding:8px;border-radius:9px}
.bell:hover{background:var(--bg)}
.badge{
  position:absolute;top:2px;right:2px;min-width:17px;height:17px;padding:0 4px;
  background:var(--red);color:#fff;border-radius:9px;font-size:10px;font-weight:700;
  display:grid;place-items:center}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--blue-600);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:14px}
.who strong{display:block;font-size:13.5px;font-weight:600;line-height:1.3}
.who span{font-size:11.5px;color:var(--ink-3)}
.content{padding:22px 26px 40px;flex:1}

/* ── komponen ───────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card-head{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.card-head h3{font-size:15px;font-weight:700}
.card-head .link{margin-left:auto;font-size:12.5px;color:var(--blue-600);font-weight:600;cursor:pointer}
.card-body{padding:18px 20px}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:18px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px;box-shadow:var(--shadow);display:flex;gap:14px;align-items:flex-start}
.stat-txt{min-width:0}
.stat-label{font-size:12.5px;color:var(--ink-2);font-weight:500}
.stat-value{font-size:29px;font-weight:800;letter-spacing:-1px;line-height:1.15;margin:2px 0}
.stat-note{font-size:11.5px;color:var(--ink-3)}
.stat-icon{margin-left:auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex-shrink:0}
.ic-blue{background:var(--blue-600);color:#fff}
.ic-green{background:var(--green);color:#fff}
.ic-red{background:var(--red);color:#fff}
.ic-soft{background:var(--blue-50);color:var(--blue-600)}

.grid-3{display:grid;grid-template-columns:1.15fr 1fr .95fr;gap:16px;align-items:start}
@media(max-width:1180px){.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:820px){.grid-3{grid-template-columns:1fr}}

.num-row{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line)}
.num-row:last-child{border-bottom:0}
.num-dot{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;flex-shrink:0}
.num-main{min-width:0;flex:1}
.num-phone{font-weight:600;font-size:13.5px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.tag{font-size:9.5px;font-weight:700;padding:2px 6px;border-radius:4px;
  border:1px solid var(--blue-600);color:var(--blue-600);letter-spacing:.3px}
.pill{font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;white-space:nowrap}
.pill.on{background:var(--green-50);color:#15803d}
.pill.off{background:var(--red-50);color:#b91c1c}
.pill.wait{background:#fffbeb;color:#b45309}
.num-time{font-size:11px;color:var(--ink-3);text-align:right;white-space:nowrap}

.step{display:flex;gap:11px;margin-bottom:15px}
.step-no{width:22px;height:22px;border-radius:50%;background:var(--blue-600);color:#fff;
  font-size:11.5px;font-weight:700;display:grid;place-items:center;flex-shrink:0;margin-top:1px}
.step-body{flex:1;min-width:0}
.step-body label{display:block;font-weight:600;font-size:13px;margin-bottom:7px}

.field{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;
  background:#fff;font-size:13.5px}
.field:focus{border-color:var(--blue-600);outline:0;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
textarea.field{resize:vertical;min-height:104px;line-height:1.6}
.counter{text-align:right;font-size:11px;color:var(--ink-3);margin-top:4px}

.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tier{border:1.5px solid var(--line);border-radius:10px;padding:9px 4px;text-align:center;
  cursor:pointer;background:#fff;transition:border-color .15s,background .15s}
.tier:hover:not(:disabled){border-color:var(--blue-500)}
.tier.sel{border-color:var(--blue-600);background:var(--blue-50)}
.tier:disabled{opacity:.42;cursor:not-allowed}
.tier b{display:block;font-size:12px;font-weight:700}
.tier span{font-size:10.5px;color:var(--ink-3)}

.btn{padding:11px 18px;border:0;border-radius:10px;background:var(--blue-600);color:#fff;
  font-weight:600;cursor:pointer;font-size:13.5px;display:inline-flex;align-items:center;
  justify-content:center;gap:8px;transition:background .15s}
.btn:hover:not(:disabled){background:var(--blue-700)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-block{width:100%;padding:13px}
.btn-ghost{background:#fff;color:var(--ink-2);border:1px solid var(--line)}
.btn-ghost:hover:not(:disabled){background:var(--bg)}
.btn-danger{background:var(--red)}
.btn-danger:hover:not(:disabled){background:#dc2626}
.btn-sm{padding:7px 12px;font-size:12.5px;border-radius:8px}

.notif{display:flex;gap:11px;padding:12px;border-radius:10px;margin-bottom:9px}
.notif.success{background:var(--green-50)}
.notif.error{background:var(--red-50)}
.notif.info{background:var(--blue-50)}
.notif-ic{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;flex-shrink:0;font-size:13px}
.notif.success .notif-ic{background:var(--green)}
.notif.error .notif-ic{background:var(--red)}
.notif.info .notif-ic{background:var(--blue-600)}
.notif b{display:block;font-size:12.5px;font-weight:600}
.notif p{font-size:11.5px;color:var(--ink-2)}
.notif time{font-size:10.5px;color:var(--ink-3)}

table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11.5px;font-weight:600;color:var(--ink-3);
  padding:10px 20px;border-bottom:1px solid var(--line);text-transform:uppercase;letter-spacing:.4px}
td{padding:12px 20px;border-bottom:1px solid var(--line);font-size:13px}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:#fafbfc}

.donut{display:flex;align-items:center;gap:18px}
.legend{font-size:12.5px;flex:1}
.legend div{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.legend i{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.legend b{margin-left:auto;font-weight:600}

.empty{padding:40px 20px;text-align:center;color:var(--ink-3)}
.empty p{font-size:13px;margin-top:6px}

.modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.55);display:grid;place-items:center;
  z-index:80;padding:20px}
.modal{background:#fff;border-radius:16px;width:100%;max-width:440px;max-height:90vh;overflow:auto}
.modal-head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center}
.modal-head h3{font-size:16px;font-weight:700}
.modal-head button{margin-left:auto;background:0;border:0;font-size:22px;cursor:pointer;color:var(--ink-3);line-height:1}
.modal-body{padding:22px}
.form-row{margin-bottom:15px}
.form-row label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px}
.hint{font-size:11.5px;color:var(--ink-3);margin-top:5px}

.pair-code{font-size:31px;font-weight:800;letter-spacing:5px;text-align:center;
  padding:18px;background:var(--blue-50);border-radius:12px;color:var(--blue-700);
  font-family:ui-monospace,"SF Mono",Menlo,monospace}
.qr-box{text-align:center;padding:10px}
.qr-box img{width:250px;height:250px;border:1px solid var(--line);border-radius:12px}

.alert{padding:11px 14px;border-radius:10px;font-size:12.5px;margin-bottom:14px;display:flex;gap:9px}
.alert.warn{background:#fffbeb;color:#92400e}
.alert.err{background:var(--red-50);color:#991b1b}
.alert.ok{background:var(--green-50);color:#166534}

.toast-wrap{position:fixed;bottom:22px;right:22px;z-index:99;display:flex;flex-direction:column;gap:9px}
.toast{background:var(--ink);color:#fff;padding:12px 17px;border-radius:11px;font-size:13px;
  box-shadow:0 8px 24px rgba(15,23,42,.25);max-width:340px;animation:slide .22s ease}
.toast.ok{background:#15803d}.toast.err{background:#b91c1c}
@keyframes slide{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}

.bar{height:7px;background:var(--line);border-radius:20px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--blue-600);border-radius:20px;transition:width .4s}
.spin{width:15px;height:15px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  border-radius:50%;animation:sp .7s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
.page-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.page-head h2{font-size:20px;font-weight:700}
.page-head .btn{margin-left:auto}
.muted{color:var(--ink-3)}
.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:12.5px}

@media(max-width:860px){
  .sidebar{transform:translateX(-100%);transition:transform .22s}
  .sidebar.open{transform:none}
  .main{margin-left:0}
  .hamburger{display:block}
  .content{padding:16px}
  .topbar{padding:12px 16px}
  .tiers{grid-template-columns:repeat(2,1fr)}
  .who{display:none}
}

/* ══ Tombol pesan & pratinjau WhatsApp ═══════════════════════════
   Warna diambil dari WhatsApp asli, bukan dari palet aplikasi ini.
   Tujuannya supaya pemilik toko melihat persis apa yang akan muncul
   di layar pelanggannya — pratinjau yang "mirip-mirip" justru bikin
   orang menekan Blast lalu menyesal. */
.wa-prev{background:#efe7de;border-radius:12px;padding:20px 16px;min-height:120px}
.wa-bubble{position:relative;background:#fff;border-radius:8px;border-top-left-radius:0;
  max-width:330px;padding:8px 9px 7px;font-size:13.5px;line-height:1.45;color:#111b21;
  box-shadow:0 1px .5px rgba(11,20,26,.13);word-break:break-word}
.wa-bubble::before{content:'';position:absolute;top:0;left:-8px;width:8px;height:13px;
  background:#fff;clip-path:polygon(100% 0,0 0,100% 100%)}
.wa-title{font-weight:700;margin-bottom:3px}
.wa-body{white-space:pre-wrap}
.wa-foot{color:#667781;font-size:11.5px;margin-top:5px}
.wa-meta{text-align:right;font-size:10.5px;color:#667781;margin-top:3px}
.wa-btns{margin:7px -9px -7px;border-top:1px solid #e9edef}
.wa-btn{display:flex;align-items:center;justify-content:center;gap:7px;padding:10px 8px;
  color:#027eb5;font-weight:500;font-size:13.5px;border-bottom:1px solid #e9edef;text-align:center}
.wa-btn:last-child{border-bottom:0}
.wa-btn svg{flex:none}
.wa-empty{color:#667781;font-style:italic}

/* baris penyunting tombol */
.tb-row{display:grid;grid-template-columns:118px 1fr 1.3fr 34px;gap:7px;
  align-items:center;margin-bottom:9px}
.tb-row .field{padding:8px 10px;font-size:12.5px}
.tb-del{width:34px;height:34px;border:1px solid var(--line);background:#fff;border-radius:8px;
  color:var(--red);cursor:pointer;font-size:16px;line-height:1;display:grid;place-items:center}
.tb-del:hover{background:var(--red-50)}
.tb-add{width:100%;padding:9px;border:1px dashed var(--line);background:#fff;border-radius:9px;
  color:var(--blue-600);font-weight:600;font-size:12.5px;cursor:pointer}
.tb-add:hover:not(:disabled){background:var(--blue-50)}
.tb-add:disabled{opacity:.5;cursor:not-allowed}

/* lencana jenis akun */
.pill.ver{background:var(--blue-50);color:var(--blue-700)}
.pill.biz{background:#f0fdf4;color:#15803d}

@media(max-width:760px){
  .tb-row{grid-template-columns:1fr 34px;grid-template-areas:'j h' 't t' 'n n';gap:6px;
    padding-bottom:11px;border-bottom:1px solid var(--line);margin-bottom:11px}
  .tb-row>:nth-child(1){grid-area:j}
  .tb-row>:nth-child(2){grid-area:t}
  .tb-row>:nth-child(3){grid-area:n}
  .tb-row>:nth-child(4){grid-area:h}
}

/* dua kolom: penyunting pesan + pratinjau. Pratinjau turun ke bawah di
   layar sempit supaya isian tidak terjepit jadi selebar dua jari. */
.grid-msg{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;align-items:start}
@media(max-width:1000px){.grid-msg{grid-template-columns:1fr}}

/* ── media gambar ─────────────────────────────────────── */
.wa-img{display:block;width:100%;border-radius:7px;margin-bottom:7px;object-fit:cover;max-height:190px}
.img-row{display:flex;gap:11px;align-items:flex-start;margin-bottom:9px}
.img-thumb{width:82px;height:82px;object-fit:cover;border-radius:8px;border:1px solid var(--line);flex:none}
.img-act{display:flex;flex-direction:column;gap:7px;padding-top:2px}

/* ══════════════════════════════════════════════════════════════════
   LAPISAN MOBILE
   ══════════════════════════════════════════════════════════════════
   Ditulis terpisah di bawah supaya aturan lama tidak perlu diubah —
   kalau nanti bermasalah, blok ini bisa dihapus utuh tanpa merusak
   tampilan desktop.

   Elemen khasnya: CENTANG DUA. Di aplikasi ini "terkirim" dan
   "sampai" bukan hal yang sama — hadiah baru dibayar setelah tanda
   terima datang. Jadi tanda centang dipakai sebagai bahasa visual,
   bukan hiasan: abu-abu = baru terkirim, biru = terbukti sampai.
   Warnanya diambil dari tanda terima WhatsApp asli, bukan dikarang. */

:root{
  --tick:#34b7f1;          /* biru tanda terima WhatsApp */
  --tick-soft:#e8f7fe;
  --wa-on:#25d366;         /* hijau "tersambung" */
  --tab-h:62px;
}

/* Angka data memakai lebar digit tetap. Nilai di dasbor berubah sendiri
   lewat SSE; tanpa ini angkanya bergoyang setiap kali diperbarui. */
.stat-value,.tier,.big-num,.wallet-amt,.stat b{font-variant-numeric:tabular-nums}

/* ── bilah bawah ───────────────────────────────────────────────── */
.tabbar{display:none}

@media(max-width:860px){
  .tabbar{
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    position:fixed;inset:auto 0 0 0;z-index:45;
    background:rgba(255,255,255,.94);
    backdrop-filter:saturate(160%) blur(12px);
    border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -1px 14px rgba(15,23,42,.07);
  }
  .tab{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;height:var(--tab-h);color:var(--ink-3);
    font-size:10.5px;font-weight:600;letter-spacing:.1px;
    position:relative;-webkit-tap-highlight-color:transparent;
  }
  .tab svg{width:22px;height:22px;stroke-width:1.9}
  .tab.active{color:var(--blue-600)}
  /* Penanda halaman aktif: garis pendek di atas ikon, bukan latar penuh —
     latar penuh membuat bilah terlihat berat di layar kecil. */
  .tab.active::before{
    content:'';position:absolute;top:0;width:26px;height:3px;border-radius:0 0 3px 3px;
    background:var(--blue-600);
  }
  .tab:active{background:var(--blue-50)}

  /* Ruang supaya isi halaman tidak tertutup bilah. */
  .content{padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 18px)}

  /* Hamburger tetap ada untuk menu yang tidak muat di bilah. */
  .sidebar{padding-bottom:calc(var(--tab-h) + 12px)}
}

/* ── kepala halaman yang menempel ──────────────────────────────── */
@media(max-width:860px){
  .topbar{
    position:sticky;top:0;z-index:30;
    background:rgba(255,255,255,.93);
    backdrop-filter:saturate(160%) blur(10px);
    padding:10px 14px;gap:10px;
  }
  .greet h1{font-size:17px;letter-spacing:-.3px}
  .greet p{font-size:11.5px}
  /* Tombol Keluar dipindah ke halaman Profil — di bilah atas ia cuma
     merebut ruang dan gampang tertekan tidak sengaja. */
  #btnLogout{display:none}
  #langPick{max-width:104px}
}

/* ── kartu statistik ───────────────────────────────────────────── */
@media(max-width:860px){
  .grid-4,.stats{grid-template-columns:1fr 1fr!important;gap:11px}
  .grid-3{grid-template-columns:1fr!important;gap:11px}
  .card{border-radius:16px}
  .stat{padding:15px 14px}
  .stat-label{font-size:11px;letter-spacing:.3px;text-transform:uppercase;color:var(--ink-3)}
  .stat-value{font-size:26px;font-weight:800;letter-spacing:-1px;line-height:1.15}
  .stat-foot{font-size:11px}
  /* Kartu yang perlu perhatian penuh tetap selebar layar. */
  .card.wide,.grid-3>.card.wide{grid-column:1/-1}
}

/* ── tanda centang: elemen khas ────────────────────────────────── */
.tick{display:inline-flex;align-items:center;gap:3px;font-weight:700;letter-spacing:-1px}
.tick.sent{color:var(--ink-3)}         /* diterima server, belum tentu sampai */
.tick.done{color:var(--tick)}          /* terbukti sampai di ponsel penerima */
.tick-note{font-size:11px;color:var(--ink-3);font-weight:500;letter-spacing:0}

/* ── sasaran sentuh ────────────────────────────────────────────── */
@media(max-width:860px){
  .btn{min-height:44px;padding:11px 16px;border-radius:12px;font-size:14px}
  .btn-sm{min-height:38px}
  .btn-block{width:100%}
  .field{min-height:46px;border-radius:12px;font-size:15px}   /* 15px+ mencegah
         Safari iOS menzum otomatis saat kolom disentuh */
  select.field{font-size:15px}
  .nav a{padding:13px 18px}
}

/* ── tabel jadi kartu ──────────────────────────────────────────── */
@media(max-width:700px){
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* Tabel dibuat bisa digeser DI DALAM kartunya, bukan menyeret
     seluruh halaman. Markup tidak membungkusnya dengan .table-wrap,
     jadi kartunya sendiri yang dijadikan wadah geser. */
  .card:has(> table),.card-body:has(> table){overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:520px}
}

/* ── kartu saldo ───────────────────────────────────────────────── */
@media(max-width:860px){
  .wallet-hero{padding:20px 18px;border-radius:18px}
  .wallet-amt{font-size:32px;letter-spacing:-1.4px}
}

/* ── Halaman Blast sederhana ──────────────────────────────
   Pengguna hanya perlu dua hal: melihat apa yang akan dikirim
   dari nomornya, lalu menekan satu tombol. Tidak ada form. */

.blast-simple { display: flex; flex-direction: column; gap: 0; }

.bs-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line);
}
.bs-label { font-size: 13px; color: var(--ink-3); font-weight: 500; }
.bs-val   { font-size: 15px; font-weight: 650; }

.bs-msg { padding: 16px 0 4px; }
.bs-msg-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 9px; flex-wrap: wrap;
}
.bs-ro {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3);
  background: var(--bg); border: 1px solid var(--line);
  padding: 3px 8px; border-radius: 999px;
}

.btn-lg {
  padding: 16px; font-size: 16px; font-weight: 700;
  letter-spacing: .03em; margin-top: 18px;
}

@media (max-width: 640px) {
  .bs-row { padding: 12px 0; }
  .btn-lg { padding: 17px; font-size: 17px; }
}


/* @lapisan:tema — warna & hiasan. Menimpa fondasi, bukan menggantikan. */
/* IsanBlast — palet diturunkan dari rancangan:
   sidebar biru tua, kartu putih, aksen biru, hijau/merah untuk status. */
/* ─────────────────────────────────────────────────────────
   ISANBLAST — tema gelap "terminal neon"

   Arahnya diambil dari dunia subjeknya sendiri: ini alat kirim
   yang dijalankan sambil berdiri, sering malam hari, di layar
   ponsel. Jadi dasarnya hitam pekat kebiruan seperti terminal,
   dengan satu warna hidup — hijau limau — yang HANYA dipakai
   untuk hal yang benar-benar berarti: saldo, tombol utama,
   dan status tersambung.

   Tanda khasnya: cincin bercahaya (halo) di sekeliling angka
   dan tombol utama. Itu satu-satunya kemewahan; sisanya sengaja
   tenang supaya cahayanya tetap berarti.
   ───────────────────────────────────────────────────────── */
:root{
  /* Tema terang IsanBlast (hijau + putih) */
  --blue-900:#0d2818; --blue-800:#1b4332; --blue-700:#2d6a4f;
  --blue-600:#2d6a4f; --blue-500:#40916c; --blue-50:#e8f5e9;

  --green:#2d6a4f;  --green-50:#e8f5e9;
  --red:#e63946;    --red-50:#fdecea;
  --amber:#f4a261;

  --ink:#1a2e28;    --ink-2:#4a5c56;  --ink-3:#7a8a84;
  --line:#e5ebe8;   --bg:#f7f9f8;     --card:#ffffff;

  --r:16px;
  --shadow:0 1px 3px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.03);
  --sidebar:248px;

  --neon:#2d6a4f;
  --neon-soft:rgba(45,106,79,.08);
  --neon-line:rgba(45,106,79,.22);
  --halo:0 0 0 1px rgba(45,106,79,.18), 0 4px 14px rgba(45,106,79,.12);
  --surface-2:#f0f4f2;
}
:root{
  --tick:#38bdf8;
  --tick-soft:#0b1d26;
  --wa-on:#4ade80;
  --tab-h:64px;
}

/* Angka data memakai lebar digit tetap. Nilai di dasbor berubah sendiri
   lewat SSE; tanpa ini angkanya bergoyang setiap kali diperbarui. */
.stat-value,.tier,.big-num,.wallet-amt,.stat b{font-variant-numeric:tabular-nums}

/* ── bilah bawah ───────────────────────────────────────────────── */
.tabbar{display:none}

@media(max-width:860px){
  .tabbar{
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    position:fixed;inset:auto 0 0 0;z-index:45;
    background:rgba(255,255,255,.94);
    backdrop-filter:saturate(160%) blur(12px);
    border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -1px 14px rgba(15,23,42,.07);
  }
  .tab{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;height:var(--tab-h);color:var(--ink-3);
    font-size:10.5px;font-weight:600;letter-spacing:.1px;
    position:relative;-webkit-tap-highlight-color:transparent;
  }
  .tab svg{width:22px;height:22px;stroke-width:1.9}
  .tab.active{color:var(--blue-600)}
  /* Penanda halaman aktif: garis pendek di atas ikon, bukan latar penuh —
     latar penuh membuat bilah terlihat berat di layar kecil. */
  .tab.active::before{
    content:'';position:absolute;top:0;width:26px;height:3px;border-radius:0 0 3px 3px;
    background:var(--blue-600);
  }
  .tab:active{background:var(--blue-50)}

  /* Ruang supaya isi halaman tidak tertutup bilah. */
  .content{padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 18px)}

  /* Hamburger tetap ada untuk menu yang tidak muat di bilah. */
  .sidebar{padding-bottom:calc(var(--tab-h) + 12px)}
}

/* ── kepala halaman yang menempel ──────────────────────────────── */
@media(max-width:860px){
  .topbar{
    position:sticky;top:0;z-index:30;
    background:rgba(255,255,255,.93);
    backdrop-filter:saturate(160%) blur(10px);
    padding:10px 14px;gap:10px;
  }
  .greet h1{font-size:17px;letter-spacing:-.3px}
  .greet p{font-size:11.5px}
  /* Tombol Keluar dipindah ke halaman Profil — di bilah atas ia cuma
     merebut ruang dan gampang tertekan tidak sengaja. */
  #btnLogout{display:none}
  #langPick{max-width:104px}
}

/* ── kartu statistik ───────────────────────────────────────────── */
@media(max-width:860px){
  .grid-4,.stats{grid-template-columns:1fr 1fr!important;gap:11px}
  .grid-3{grid-template-columns:1fr!important;gap:11px}
  .card{border-radius:16px}
  .stat{padding:15px 14px}
  .stat-label{font-size:11px;letter-spacing:.3px;text-transform:uppercase;color:var(--ink-3)}
  .stat-value{font-size:26px;font-weight:800;letter-spacing:-1px;line-height:1.15}
  .stat-foot{font-size:11px}
  /* Kartu yang perlu perhatian penuh tetap selebar layar. */
  .card.wide,.grid-3>.card.wide{grid-column:1/-1}
}

/* ── tanda centang: elemen khas ────────────────────────────────── */
.tick{display:inline-flex;align-items:center;gap:3px;font-weight:700;letter-spacing:-1px}
.tick.sent{color:var(--ink-3)}         /* diterima server, belum tentu sampai */
.tick.done{color:var(--tick)}          /* terbukti sampai di ponsel penerima */
.tick-note{font-size:11px;color:var(--ink-3);font-weight:500;letter-spacing:0}

/* ── sasaran sentuh ────────────────────────────────────────────── */
@media(max-width:860px){
  .btn{min-height:44px;padding:11px 16px;border-radius:12px;font-size:14px}
  .btn-sm{min-height:38px}
  .btn-block{width:100%}
  .field{min-height:46px;border-radius:12px;font-size:15px}   /* 15px+ mencegah
         Safari iOS menzum otomatis saat kolom disentuh */
  select.field{font-size:15px}
  .nav a{padding:13px 18px}
}

/* ── tabel jadi kartu ──────────────────────────────────────────── */
@media(max-width:700px){
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* Tabel dibuat bisa digeser DI DALAM kartunya, bukan menyeret
     seluruh halaman. Markup tidak membungkusnya dengan .table-wrap,
     jadi kartunya sendiri yang dijadikan wadah geser. */
  .card:has(> table),.card-body:has(> table){overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:520px}
}

/* ── kartu saldo ───────────────────────────────────────────────── */
@media(max-width:860px){
  .wallet-hero{padding:20px 18px;border-radius:18px}
  .wallet-amt{font-size:32px;letter-spacing:-1.4px}
}

/* ── Halaman Blast sederhana ──────────────────────────────
   Pengguna hanya perlu dua hal: melihat apa yang akan dikirim
   dari nomornya, lalu menekan satu tombol. Tidak ada form. */

.blast-simple { display: flex; flex-direction: column; gap: 0; }

.bs-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line);
}
.bs-label { font-size: 13px; color: var(--ink-3); font-weight: 500; }
.bs-val   { font-size: 15px; font-weight: 650; }

.bs-msg { padding: 16px 0 4px; }
.bs-msg-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 9px; flex-wrap: wrap;
}
.bs-ro {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3);
  background: var(--bg); border: 1px solid var(--line);
  padding: 3px 8px; border-radius: 999px;
}

.btn-lg {
  padding: 16px; font-size: 16px; font-weight: 700;
  letter-spacing: .03em; margin-top: 18px;
}

@media (max-width: 640px) {
  .bs-row { padding: 12px 0; }
  .btn-lg { padding: 17px; font-size: 17px; }
}

/* ═════════════════════════════════════════════════════════
   LAPISAN TEMA GELAP
   Ditulis di akhir berkas dengan sengaja: aturan di sini
   menimpa gaya dasar tanpa perlu mengubahnya satu per satu,
   jadi kalau tema ini perlu dicabut cukup buang blok ini.
   ═════════════════════════════════════════════════════════ */

/* ── Dasar ─────────────────────────────────────────────── */
body{
  background:var(--bg);
  color:var(--ink);
  /* Cahaya redup di dua sudut supaya latar hitam tidak terasa mati.
     Sangat halus — kalau terlihat jelas, berarti terlalu kuat. */
  background-image:
    radial-gradient(900px 500px at 12% -10%, rgba(163,230,53,.055), transparent 60%),
    radial-gradient(700px 420px at 105% 8%, rgba(56,189,248,.04), transparent 60%);
  background-attachment:fixed;
}

/* Angka dan judul memakai wajah huruf terpisah: bentuknya lebih
   tegas dan sedikit teknis, cocok untuk layar gelap dan untuk
   data yang harus terbaca cepat sekilas. */
h1,h2,h3,h4,
.stat-val,.wallet-amt,.tier,.bs-val,.mono{
  font-family:'Space Grotesk','Inter',system-ui,sans-serif;
  letter-spacing:-.01em;
}

/* ── Kartu ─────────────────────────────────────────────── */
.card,.stat,.plan-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,0) 42%),
    var(--card);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.card-head{border-bottom-color:var(--line)}

/* ── Tombol ────────────────────────────────────────────── */
.btn{
  background:var(--neon);
  color:#0a1207;
  border:1px solid transparent;
  font-weight:700;
  transition:transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover:not(:disabled){
  filter:brightness(1.07);
  box-shadow:0 0 24px rgba(163,230,53,.3);
}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{
  background:var(--surface-2); color:var(--ink-3);
  border-color:var(--line); filter:none; box-shadow:none;
}

.btn-ghost{
  background:transparent; color:var(--ink);
  border:1px solid var(--line);
}
.btn-ghost:hover:not(:disabled){
  border-color:var(--neon-line);
  background:var(--neon-soft);
  color:var(--ink);
  box-shadow:none;
}
.btn-danger{background:var(--red); color:#1a0b0b}

/* Tombol utama halaman Blast: inilah tanda khas temanya —
   satu cincin bercahaya, dipakai sekali saja per layar. */
.btn-lg{
  border-radius:14px;
  box-shadow:var(--halo);
  text-transform:uppercase;
}
.btn-lg:disabled{box-shadow:none}

/* ── Isian ─────────────────────────────────────────────── */
.field{
  background:var(--surface-2);
  border:1px solid var(--line);
  color:var(--ink);
}
.field::placeholder{color:var(--ink-3)}
.field:focus{
  outline:none;
  border-color:var(--neon-line);
  box-shadow:0 0 0 3px var(--neon-soft);
}
select.field{
  /* Panah bawaan menghilang di latar gelap pada sebagian peramban. */
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
                   linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 19px) 51%, calc(100% - 14px) 51%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:38px;
}
textarea.field{background:var(--surface-2)}

/* ── Sisi kiri & navigasi ──────────────────────────────── */
.sidebar{
  background:linear-gradient(180deg,#0a100d, #070a09);
  border-right:1px solid var(--line);
}
.nav a{color:var(--ink-2); border-radius:11px}
.nav a:hover{background:var(--surface-2); color:var(--ink)}
.nav a.active{
  background:var(--neon-soft);
  color:var(--neon);
  /* Garis penanda di tepi kiri: menandai posisi tanpa menambah warna. */
  box-shadow:inset 3px 0 0 var(--neon);
}

.tabbar{
  background:rgba(7,10,9,.92);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
}
.tab{color:var(--ink-3)}
.tab.active{color:var(--neon)}
.tab.active svg{filter:drop-shadow(0 0 7px rgba(163,230,53,.55))}

/* ── Angka & status ────────────────────────────────────── */
.stat-val{color:var(--ink)}
.wallet-hero{
  background:
    radial-gradient(420px 220px at 88% 12%, rgba(163,230,53,.14), transparent 62%),
    var(--card);
  border:1px solid var(--neon-line);
}
.wallet-amt{color:var(--neon); text-shadow:0 0 26px rgba(163,230,53,.28)}

.pill{border:1px solid var(--line); background:var(--surface-2)}
.pill.on{background:rgba(74,222,128,.13); color:var(--green); border-color:rgba(74,222,128,.32)}
.pill.off{background:rgba(248,113,113,.12); color:var(--red); border-color:rgba(248,113,113,.3)}
.pill.wait{background:rgba(251,191,36,.12); color:var(--amber); border-color:rgba(251,191,36,.3)}

.alert{background:var(--surface-2); border:1px solid var(--line); color:var(--ink)}
.alert.ok{background:rgba(74,222,128,.1); border-color:rgba(74,222,128,.3)}
.alert.err{background:rgba(248,113,113,.1); border-color:rgba(248,113,113,.3)}
.alert.warn{background:rgba(251,191,36,.1); border-color:rgba(251,191,36,.3)}

table th{color:var(--ink-3); border-bottom-color:var(--line)}
table td{border-bottom-color:var(--line)}
table tbody tr:hover{background:var(--surface-2)}

.empty{color:var(--ink-3)}
.hint{color:var(--ink-3)}
.muted{color:var(--ink-3)}

/* Ikon lingkaran pada kartu angka: cincin tipis, bukan blok warna. */
.stat-ic{border:1px solid var(--line); background:var(--surface-2)}
.ic-blue{color:var(--tick); border-color:rgba(56,189,248,.3)}
.ic-green{color:var(--green); border-color:rgba(74,222,128,.3)}
.ic-red{color:var(--red); border-color:rgba(248,113,113,.3)}
.ic-soft{color:var(--neon); border-color:var(--neon-line)}

/* ── Halaman Blast ─────────────────────────────────────── */
.bs-row{border-bottom-color:var(--line)}
.bs-val{color:var(--ink)}
.bs-ro{background:var(--surface-2); border-color:var(--line)}
.bs-msg{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:14px;
  padding:15px;
  margin-top:16px;
}

/* ── Layar lebar ───────────────────────────────────────── */
@media(min-width:1100px){
  .main{max-width:1180px; margin:0 auto}
  .stats{gap:15px}
}

/* ── Aksesibilitas ─────────────────────────────────────── */
:focus-visible{outline:2px solid var(--neon); outline-offset:2px}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}

/* ── Logo ──────────────────────────────────────────────────
   Logonya sendiri sudah bercahaya di atas hitam, jadi tidak
   diberi bingkai, bayangan, atau latar tambahan — cukup
   dibiarkan duduk di atas sisi kiri yang gelap. */
.brand{
  padding:20px 18px 16px;
  display:block;
  border-bottom:1px solid var(--line);
  margin-bottom:10px;
}
.brand-logo{
  display:block;
  width:100%;
  max-width:190px;
  height:auto;
}
.brand .brand-sub{
  font-size:10.5px;
  color:var(--ink-3);
  margin-top:9px;
  line-height:1.45;
  letter-spacing:.02em;
}

.topbar-logo{display:none}
.topbar-logo img{display:block;height:38px;width:auto}

@media(max-width:900px){
  /* Nama sapaan menyusut supaya logo dan lonceng tetap muat sebaris. */
  .topbar-logo{display:block;flex:0 0 auto}
  .greet h1{font-size:16px}
  .greet p{display:none}
}
@media(max-width:420px){
  .topbar-logo img{height:32px}
  .greet{min-width:0}
  .greet h1{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* ═══════════════════════════════════════════════════════════════
   ISANBLAST PREMIUM WEB3 UI — visual-only override
   Semua aturan di bawah hanya mengubah tampilan. Tidak mengubah
   HTML, JavaScript, endpoint, data, route, atau fitur aplikasi.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#050806;
  --card:#0b100d;
  --surface-2:#0f1512;
  --line:rgba(163,230,53,.16);
  --line-strong:rgba(163,230,53,.34);
  --ink:#f2f6f1;
  --ink-2:#b5c0b8;
  --ink-3:#718078;
  --neon:#9cff00;
  --neon-2:#5dff00;
  --blue-600:#45a7ff;
  --shadow:0 18px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.035);
}

*{box-sizing:border-box}
html{background:#050806}
body{
  min-height:100vh;
  background:
    radial-gradient(900px 520px at 8% -8%,rgba(126,255,0,.10),transparent 62%),
    radial-gradient(700px 520px at 100% 0%,rgba(31,112,255,.06),transparent 62%),
    linear-gradient(145deg,#030504 0%,#070b08 52%,#030504 100%);
  color:var(--ink);
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,black,transparent 78%);
}

.app{min-height:100vh;background:transparent}
.main{background:transparent;min-width:0}
.content{padding:28px 28px 42px;max-width:1380px;margin:0 auto}

/* Sidebar / brand */
.sidebar{
  background:linear-gradient(180deg,rgba(5,9,7,.98),rgba(3,6,5,.98));
  border-right:1px solid rgba(163,230,53,.12);
  box-shadow:18px 0 50px rgba(0,0,0,.28);
}
.brand{padding:22px 18px 18px;border-bottom:1px solid rgba(163,230,53,.10)}
.brand-logo{filter:drop-shadow(0 0 16px rgba(163,230,53,.16));max-width:185px}
.brand-sub{color:#748078!important}
.nav a{color:#aeb9b1;border:1px solid transparent;transition:.2s ease}
.nav a:hover{background:rgba(163,230,53,.07);border-color:rgba(163,230,53,.12);color:#fff;transform:translateX(2px)}
.nav a.active{background:linear-gradient(90deg,rgba(163,230,53,.14),rgba(163,230,53,.035));border-color:rgba(163,230,53,.20);box-shadow:inset 3px 0 0 var(--neon),0 0 24px rgba(163,230,53,.06);color:var(--neon)}
.plan-card{
  margin:18px 12px;padding:18px 14px;border:1px solid rgba(163,230,53,.18)!important;
  background:linear-gradient(145deg,rgba(163,230,53,.08),rgba(7,12,9,.9))!important;
  box-shadow:0 12px 40px rgba(0,0,0,.3),0 0 30px rgba(163,230,53,.04)!important;
}
.plan-card button{background:var(--neon);color:#081006;border:0;border-radius:10px;font-weight:800;box-shadow:0 0 22px rgba(163,230,53,.18)}

/* Topbar */
.topbar{
  background:rgba(5,8,6,.76)!important;
  border-bottom:1px solid rgba(163,230,53,.10)!important;
  backdrop-filter:blur(18px) saturate(135%);
  box-shadow:0 10px 35px rgba(0,0,0,.18);
}
.hamburger,.bell{color:#d8e1da!important;background:rgba(255,255,255,.025)!important;border:1px solid rgba(255,255,255,.07)!important;border-radius:12px}
.hamburger:hover,.bell:hover{border-color:rgba(163,230,53,.30)!important;color:var(--neon)!important;background:rgba(163,230,53,.07)!important}
.greet h1{color:#f5f8f5}
.greet p{color:#7e8d84}
.avatar{background:radial-gradient(circle at 35% 25%,#182316,#070b08)!important;border:1px solid rgba(163,230,53,.45)!important;color:var(--neon)!important;box-shadow:0 0 22px rgba(163,230,53,.12)}
.who strong{color:#f5f8f5}.who span{color:#748078!important}

/* General cards */
.card,.stat,.plan-card{
  position:relative;overflow:hidden;
  background:linear-gradient(145deg,rgba(20,29,23,.82),rgba(7,11,9,.96))!important;
  border:1px solid rgba(163,230,53,.14)!important;
  border-radius:18px!important;
  box-shadow:var(--shadow)!important;
}
.card:before,.stat:before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(163,230,53,.38),transparent);opacity:.65;
}
.card-head{padding:18px 20px!important;border-bottom:1px solid rgba(255,255,255,.055)!important}
.card-head h3,.page-head h2,.page-head h1{color:#f5f8f5}
.card-body{padding:18px 20px!important}
.link{color:var(--neon)!important}
.link:hover{text-shadow:0 0 12px rgba(163,230,53,.35)}

/* Stats */
.stats{gap:14px}
.stat{padding:17px!important;min-height:132px}
.stat-label{color:#8c9b92!important;font-weight:700}
.stat-value{color:#f7faf7!important;font-size:30px!important;text-shadow:0 0 18px rgba(255,255,255,.05)}
.stat-note{color:var(--neon)!important}
.stat-icon{border-color:rgba(163,230,53,.20)!important;background:rgba(163,230,53,.07)!important;box-shadow:0 0 18px rgba(163,230,53,.06)}
.ic-blue{color:#4da9ff!important;border-color:rgba(77,169,255,.28)!important;background:rgba(77,169,255,.07)!important}
.ic-red{color:#ff4545!important;border-color:rgba(255,69,69,.25)!important;background:rgba(255,69,69,.06)!important}

/* Forms */
.field{background:rgba(4,8,6,.78)!important;border-color:rgba(255,255,255,.09)!important;color:#f1f5f2!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.field:hover{border-color:rgba(163,230,53,.22)!important}
.field:focus{border-color:rgba(163,230,53,.62)!important;box-shadow:0 0 0 3px rgba(163,230,53,.08),0 0 24px rgba(163,230,53,.08)!important}
.btn{border-radius:12px!important;box-shadow:0 8px 24px rgba(0,0,0,.22)}
.btn:not(.btn-ghost):not(.btn-danger){background:linear-gradient(135deg,#b7ff27,#6bdf00)!important;color:#071004!important}
.btn:not(.btn-ghost):not(.btn-danger):hover{box-shadow:0 0 28px rgba(163,230,53,.28)!important}
.btn-ghost{background:rgba(255,255,255,.025)!important;color:#eaf0eb!important;border-color:rgba(255,255,255,.10)!important}
.btn-ghost:hover{background:rgba(163,230,53,.07)!important;border-color:rgba(163,230,53,.32)!important;color:var(--neon)!important}
.btn-danger{background:linear-gradient(135deg,#ff4b4b,#d81e35)!important;color:#fff!important}
.btn-lg{box-shadow:0 0 0 1px rgba(163,230,53,.32),0 0 32px rgba(163,230,53,.16)!important}

/* Status / notices */
.pill{background:rgba(255,255,255,.035)!important;border-color:rgba(255,255,255,.09)!important}
.pill.on{color:#aaff3b!important;background:rgba(92,255,0,.08)!important;border-color:rgba(92,255,0,.25)!important}
.pill.off{color:#ff6767!important;background:rgba(255,55,55,.08)!important;border-color:rgba(255,55,55,.24)!important}
.pill.wait{color:#ffc94d!important;background:rgba(255,193,7,.08)!important;border-color:rgba(255,193,7,.22)!important}
.alert{background:rgba(255,255,255,.025)!important;border-color:rgba(255,255,255,.08)!important}
.alert.ok{background:rgba(92,255,0,.07)!important;border-color:rgba(92,255,0,.20)!important}
.alert.err{background:rgba(255,55,55,.07)!important;border-color:rgba(255,55,55,.20)!important}
.alert.warn{background:rgba(255,193,7,.07)!important;border-color:rgba(255,193,7,.20)!important}

/* WhatsApp / nomor / blast */
.num-row,.bs-row{border-bottom-color:rgba(255,255,255,.06)!important}
.num-row:hover{background:rgba(163,230,53,.035)!important}
.num-dot{box-shadow:0 0 12px currentColor}
.bs-msg{background:linear-gradient(145deg,rgba(16,23,18,.96),rgba(6,10,8,.96))!important;border-color:rgba(163,230,53,.15)!important}
.bs-ro{background:rgba(255,255,255,.035)!important;border-color:rgba(255,255,255,.08)!important;color:#849188!important}
.bar{background:rgba(255,255,255,.06)!important;border-radius:99px;overflow:hidden}
.bar i{background:linear-gradient(90deg,#7eff00,#b7ff36)!important;box-shadow:0 0 12px rgba(163,230,53,.4)}

/* Notifikasi */
.notif{background:linear-gradient(145deg,rgba(17,24,19,.92),rgba(7,11,9,.96))!important;border:1px solid rgba(255,255,255,.06)!important;border-radius:14px!important;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.notif:hover{border-color:rgba(163,230,53,.18)!important;transform:translateY(-1px)}
.notif-ic{background:rgba(163,230,53,.09)!important;color:var(--neon)!important}

/* Tabel */
table{color:#eaf0eb}
table th{background:rgba(255,255,255,.02);color:#77867d!important}
table td{border-bottom-color:rgba(255,255,255,.06)!important}
table tbody tr:hover{background:rgba(163,230,53,.035)!important}

/* Grafik / ringkasan */
.donut{filter:drop-shadow(0 0 16px rgba(37,99,235,.08))}
.legend{color:#9aa69e}

/* Modal, toast, dropdown */
.modal-bg{background:rgba(0,0,0,.72)!important;backdrop-filter:blur(8px)}
.modal{background:linear-gradient(145deg,#111812,#070b08)!important;border:1px solid rgba(163,230,53,.22)!important;box-shadow:0 30px 100px rgba(0,0,0,.65),0 0 50px rgba(163,230,53,.06)!important;border-radius:20px!important}
.modal-head{border-bottom-color:rgba(255,255,255,.06)!important}
.toast{background:#101712!important;border:1px solid rgba(163,230,53,.24)!important;color:#edf4ee!important;box-shadow:0 16px 45px rgba(0,0,0,.45),0 0 24px rgba(163,230,53,.08)!important}

/* Scrollbar */
*{scrollbar-width:thin;scrollbar-color:rgba(163,230,53,.28) transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(163,230,53,.24);border-radius:999px}
*::-webkit-scrollbar-thumb:hover{background:rgba(163,230,53,.42)}

/* Mobile: rasa aplikasi premium, bukan sekadar desktop yang diperkecil */
@media(max-width:860px){
  .content{padding:18px 13px calc(var(--tab-h) + 26px)}
  .topbar{padding:9px 12px!important;min-height:60px}
  .topbar-logo img{height:34px!important;filter:drop-shadow(0 0 10px rgba(163,230,53,.18))}
  .greet{display:none}
  .topbar-right{margin-left:auto}
  .who{display:none}
  .topbar .btn-ghost{display:none}
  .topbar .field{display:none}
  .avatar{width:38px!important;height:38px!important}
  .grid-3,.grid-4,.stats{gap:10px!important}
  .stat{min-height:116px;padding:13px!important;border-radius:15px!important}
  .stat-value{font-size:24px!important}
  .card{border-radius:16px!important}
  .card-head{padding:15px 15px!important}
  .card-body{padding:15px!important}
  .tabbar{background:rgba(5,8,6,.94)!important;border-top-color:rgba(163,230,53,.12)!important;box-shadow:0 -14px 40px rgba(0,0,0,.45)!important}
  .tab{color:#78857e!important;font-weight:700}
  .tab.active{color:var(--neon)!important;text-shadow:0 0 12px rgba(163,230,53,.25)}
  .tab.active::before{background:var(--neon)!important;box-shadow:0 0 12px rgba(163,230,53,.35)}
}
@media(max-width:520px){
  .content{padding-left:10px;padding-right:10px}
  .grid-4,.stats{grid-template-columns:1fr 1fr!important}
  .grid-3{grid-template-columns:1fr!important}
  .stat{min-height:108px}
  .stat-value{font-size:22px!important}
  .stat-note{font-size:10px}
}


/* ═════════════════════════════════════════════════════════
   NAVIGASI BAWAH — rasa aplikasi di iOS & Android
   Ditulis paling akhir supaya menimpa aturan tabbar terdahulu.
   ═════════════════════════════════════════════════════════ */
@media(max-width:860px){

  .tabbar{
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    position:fixed;inset:auto 0 0 0;z-index:45;

    /* Kaca gelap, bukan panel padat: isi halaman samar terlihat
       lewat bawahnya sehingga bilah ini terasa mengambang. */
    background:rgba(6,10,8,.86);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    backdrop-filter:saturate(180%) blur(20px);
    border-top:1px solid rgba(163,230,53,.12);
    box-shadow:0 -12px 34px rgba(0,0,0,.55);

    /* Ruang aman iPhone: tanpa ini label tertimpa garis geser
       di bawah layar. Perlu viewport-fit=cover di meta viewport. */
    padding-bottom:max(env(safe-area-inset-bottom), 6px);
    padding-top:5px;
  }

  .tab{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:4px;
    min-height:52px;                 /* target sentuh nyaman satu ibu jari */
    position:relative;
    color:var(--ink-3);
    font-size:10.5px;font-weight:600;letter-spacing:.01em;
    text-decoration:none;
    -webkit-tap-highlight-color:transparent;   /* buang kotak biru Android */
    -webkit-touch-callout:none;
    user-select:none;
    transition:color .16s ease;
  }
  .tab svg{width:22px;height:22px;transition:transform .16s ease}

  /* Ditekan: menyusut sedikit — umpan balik seketika, tanpa menunggu
     halaman berganti. Inilah yang membedakan rasanya dari situs web. */
  .tab:active svg{transform:scale(.88)}

  .tab.active{color:var(--neon)}
  .tab.active svg{filter:drop-shadow(0 0 9px rgba(163,230,53,.5))}

  /* Garis penanda di ATAS tab yang aktif, seperti pada rancangan. */
  .tab.active::before{
    content:"";position:absolute;top:-5px;
    width:26px;height:3px;border-radius:0 0 3px 3px;
    background:var(--neon);
    box-shadow:0 0 12px rgba(163,230,53,.75);
  }

  /* Isi halaman diberi ruang agar kartu terakhir tidak tertutup bilah. */
  .content{padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 26px)}
}

/* Layar sangat sempit: label mengecil, ikon tetap. */
@media(max-width:360px){
  .tab{font-size:9.5px;gap:3px}
  .tab svg{width:20px;height:20px}
}

/* Ponsel dimiringkan: bilah menipis supaya tidak memakan tinggi layar. */
@media(max-width:860px) and (orientation:landscape) and (max-height:460px){
  .tabbar{padding-top:2px}
  .tab{min-height:42px;font-size:9.5px}
  .tab svg{width:18px;height:18px}
}

/* ═════════════════════════════════════════════════════════
   TATA LETAK ISI — menumpuk ke bawah, tidak melebar

   Sebelumnya beberapa halaman menulis grid dua kolom sebagai
   gaya SEBARIS di HTML. Gaya sebaris tidak bisa ditimpa media
   query, jadi di layar 360px pun tetap dipaksa dua kolom lalu
   isinya meluber ke samping. Sekarang semuanya lewat kelas.
   ═════════════════════════════════════════════════════════ */

/* Dua kolom di layar lega, satu kolom penuh di ponsel. */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.duo-rapat{gap:12px}
.tumpuk{display:grid;gap:16px;align-items:start}

/* Kartu yang menyesuaikan sendiri. minmax dengan min 0 mencegah
   kolom melebar melewati layar saat isinya panjang. */
.kartu-auto{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr));
}
.kartu-kecil{grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:12px}

/* Anak grid/flex bawaannya menolak menyusut lebih kecil dari isinya.
   Tanpa ini, satu angka atau tautan panjang saja bisa melebarkan
   seluruh halaman dan memunculkan geser ke samping. */
.duo>*,.tumpuk>*,.kartu-auto>*,.grid-3>*,.grid-4>*,.stats>*{min-width:0}
.card,.stat{min-width:0}

/* Isian teks panjang (tautan undangan, nomor rekening) dipotong rapi
   alih-alih mendorong lebar halaman. */
.field{max-width:100%}
.wallet-amt,.stat-val{overflow-wrap:anywhere}

@media(max-width:860px){
  /* Semua susunan berdampingan jadi menumpuk ke bawah. */
  .duo,.tumpuk{grid-template-columns:1fr;gap:13px}
  .kartu-auto{gap:11px}

  /* Halaman tidak boleh bisa digeser ke samping sama sekali. */
  html,body{overflow-x:hidden}
  .main,.content,.view{max-width:100%}

  /* Tabel tetap boleh digeser, TAPI di dalam kotaknya sendiri —
     bukan menggeser seluruh halaman. */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
}

/* Cadangan untuk peramban tanpa :has() — kartu apa pun tidak boleh
   melebihi lebar layar, apa pun isinya. */
@media(max-width:860px){
  .card{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .card>.card-head,.card>.card-body{min-width:0}
}

/* ═══════════════════════════════════════════════════════════════
   ISANBLAST — PREMIUM BLUE / WHITE REDESIGN
   Visual-only layer. Backend, routes, API and data flow are untouched.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#f4f8ff;
  --card:#ffffff;
  --surface-2:#eef4ff;
  --line:#e3eaf5;
  --line-strong:#c9d8ef;
  --ink:#0f1f3d;
  --ink-2:#53627a;
  --ink-3:#8b98ad;
  --blue-900:#0b1f46;
  --blue-800:#12336e;
  --blue-700:#1d4ed8;
  --blue-600:#2563eb;
  --blue-500:#3b82f6;
  --blue-50:#eff6ff;
  --neon:#2563eb;
  --neon-2:#60a5fa;
  --neon-soft:rgba(37,99,235,.10);
  --neon-line:rgba(37,99,235,.20);
  --green:#16a34a;
  --green-50:#ecfdf3;
  --red:#dc2626;
  --red-50:#fef2f2;
  --amber:#d97706;
  --shadow:0 18px 55px rgba(27,64,122,.10),0 2px 8px rgba(27,64,122,.04);
  --sidebar:0px;
  --r:18px;
  --tab-h:68px;
}

html{background:var(--bg)}
body{
  background:
    radial-gradient(900px 480px at 8% -12%,rgba(59,130,246,.12),transparent 62%),
    radial-gradient(720px 420px at 100% 0%,rgba(147,197,253,.16),transparent 62%),
    linear-gradient(180deg,#f8fbff 0%,#f3f7fd 100%);
  color:var(--ink);
}
body:before{opacity:.24;background-image:linear-gradient(rgba(37,99,235,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.035) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,black,transparent 70%)}

.sidebar{display:none}
.main{margin-left:0;background:transparent}
.content{max-width:1320px;width:100%;margin:0 auto;padding:28px 28px calc(var(--tab-h) + 48px)}

.topbar{
  position:sticky;top:0;z-index:50;
  min-height:76px;padding:12px 28px;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid rgba(219,228,242,.92);
  box-shadow:0 8px 28px rgba(30,64,120,.06);
}
.topbar-brand{display:flex;align-items:center;gap:11px;min-width:max-content;text-decoration:none}
.topbar-brand-mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;font:800 12px/1 "Space Grotesk",sans-serif;letter-spacing:-.6px;background:linear-gradient(145deg,#2563eb,#60a5fa);box-shadow:0 8px 20px rgba(37,99,235,.24)}
.topbar-brand-name{font:800 19px/1 "Space Grotesk",sans-serif;letter-spacing:-.7px;color:#10244b}
.topbar-brand-name span{color:var(--blue-600)}
.topbar-brand-sub{font-size:9px;font-weight:700;letter-spacing:1.3px;color:#8a99af;margin-top:3px;text-transform:uppercase}
.greet{display:none}
.topbar-right{margin-left:auto;gap:8px}
.today-date{font-size:12px;font-weight:700;color:#50627e;white-space:nowrap;padding:9px 12px;border:1px solid var(--line);background:#fff;border-radius:12px}
.topbar-control{height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#fff;border-radius:12px;color:#53627a;cursor:pointer;transition:.18s ease}
.topbar-control:hover{border-color:#bfd0ea;color:var(--blue-600);background:var(--blue-50);transform:translateY(-1px)}
.topbar-control.icon-only{width:40px;padding:0}
#langPick{height:40px!important;border-radius:12px!important;border:1px solid var(--line)!important;background:#fff!important;color:#53627a!important;padding:0 10px!important;font-size:12px!important}
#btnLogout{height:40px!important;width:40px;padding:0!important;border-radius:12px!important;border:1px solid #dbe4f2!important;background:#fff!important;color:#53627a!important;font-size:0!important}
#btnLogout:before{content:'↪';font-size:21px;line-height:1;transform:rotate(180deg);display:block}
#btnLogout:hover{color:var(--red)!important;background:#fff5f5!important;border-color:#fecaca!important}
.avatar,.who,.bell{display:none}
.topbar-logo{display:none}

.card{border-color:var(--line);box-shadow:var(--shadow);border-radius:18px}
.card-head{padding:17px 20px;border-bottom-color:var(--line)}
.card-body{padding:20px}
.stat{border-color:var(--line);box-shadow:var(--shadow);border-radius:18px;background:rgba(255,255,255,.96)}
.stat-icon{border-radius:13px}
.ic-blue{background:var(--blue-600)}
.ic-soft{background:var(--blue-50);color:var(--blue-600)}
.btn{background:linear-gradient(135deg,#2563eb,#3b82f6);border-radius:12px;box-shadow:0 9px 20px rgba(37,99,235,.16)}
.btn:hover:not(:disabled){background:linear-gradient(135deg,#1d4ed8,#2563eb);transform:translateY(-1px)}
.btn-ghost{background:#fff;color:#38506f;border-color:var(--line);box-shadow:none}
.btn-ghost:hover:not(:disabled){background:var(--blue-50);color:var(--blue-600)}
.field{border-color:#dbe4f0;background:#fff;border-radius:12px}
.field:focus{border-color:var(--blue-500);box-shadow:0 0 0 4px rgba(37,99,235,.10)}
.page-head h2{font-size:23px;letter-spacing:-.5px}

/* Four-icon navigation: Home, Saldo, Blast, Referral */
.tabbar{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
  width:min(430px,calc(100vw - 28px));height:68px;z-index:70;
  padding:7px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(214,225,240,.96);
  border-radius:22px;
  box-shadow:0 20px 45px rgba(25,59,112,.16),0 5px 15px rgba(25,59,112,.08);
}
.tab{height:54px;display:flex;align-items:center;justify-content:center;color:#8290a5;position:relative;border-radius:16px;-webkit-tap-highlight-color:transparent}
.tab span{display:none}
.tab svg{width:22px;height:22px;stroke-width:1.9}
.tab.active{color:var(--blue-600);background:var(--blue-50)}
.tab.active::before{content:'';position:absolute;top:6px;width:18px;height:3px;border-radius:5px;background:var(--blue-600)}
.tab:active{transform:scale(.96)}

/* Floating official support channel */
.cs-float{position:fixed;right:20px;bottom:104px;width:54px;height:54px;border-radius:50%;z-index:69;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#2563eb,#3b82f6);box-shadow:0 14px 30px rgba(37,99,235,.28),0 0 0 5px rgba(255,255,255,.72);transition:.18s ease}
.cs-float:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 17px 34px rgba(37,99,235,.34),0 0 0 5px rgba(255,255,255,.86)}
.cs-float svg{width:24px;height:24px}

/* Make the existing profile/settings page read as one premium settings surface. */
.duo{gap:18px}
.wallet-hero{border-radius:22px!important}

@media(max-width:860px){
  .content{padding:18px 14px calc(var(--tab-h) + 42px)}
  .topbar{padding:10px 14px;min-height:68px}
  .topbar-brand-mark{width:34px;height:34px;border-radius:10px;font-size:10px}
  .topbar-brand-name{font-size:17px}
  .topbar-brand-sub{font-size:7px;letter-spacing:1px}
  .today-date{display:none}
  #langPick{width:54px!important;max-width:54px!important;padding:0 6px!important;font-size:11px!important}
  .topbar-right{gap:6px}
  .topbar-control.icon-only,#btnLogout{width:38px!important;height:38px!important}
  .cs-float{right:14px;bottom:102px;width:52px;height:52px}
  .tabbar{bottom:12px;width:calc(100vw - 24px);height:66px;border-radius:21px}
  .tab{height:52px}
  .grid-4,.stats{gap:10px!important}
}

@media(min-width:861px){
  .tabbar{bottom:22px}
  .cs-float{right:28px;bottom:108px}
}

.delay-option input:checked + .delay-chip {
  border-color: var(--blue-600);
  background: rgba(37, 99, 235, .08);
  color: var(--blue-600);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .10);
}
@media (max-width: 520px) {
  .delay-picker > div[style*="grid-template-columns"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* ═══════════════════════════════════════════════════════════════
   ISANBLAST — COFFEE AESTHETIC THEME
   Visual-only layer. Warm ivory, espresso and caramel accents.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#f6f1e9;
  --card:#fffdf9;
  --surface-2:#f1e8dc;
  --line:#e7dccf;
  --line-strong:#d6c5b2;
  --ink:#2b211b;
  --ink-2:#6e5a4b;
  --ink-3:#9a8777;
  --blue-900:#3b2519;
  --blue-800:#4a2d1d;
  --blue-700:#6f4328;
  --blue-600:#8b572f;
  --blue-500:#a86c3c;
  --blue-50:#f7eee5;
  --neon:#8b572f;
  --neon-2:#c28a59;
  --neon-soft:rgba(139,87,47,.11);
  --neon-line:rgba(139,87,47,.22);
  --green:#3d7b58;
  --green-50:#edf5ef;
  --red:#b94a3a;
  --red-50:#fff0ed;
  --amber:#a86b24;
  --shadow:0 18px 55px rgba(86,57,35,.10),0 2px 8px rgba(86,57,35,.045);
  --r:20px;
}

html{background:var(--bg)}
body{
  background:
    radial-gradient(620px 360px at 92% -8%,rgba(194,138,89,.18),transparent 64%),
    radial-gradient(720px 420px at -8% 4%,rgba(139,87,47,.10),transparent 64%),
    linear-gradient(180deg,#fbf8f3 0%,#f5efe7 100%);
  color:var(--ink);
}
body:before{
  opacity:.20;
  background-image:
    radial-gradient(circle at 20% 20%,rgba(111,67,40,.055) 0 1px,transparent 1.5px),
    radial-gradient(circle at 70% 65%,rgba(111,67,40,.04) 0 1px,transparent 1.5px);
  background-size:34px 34px,47px 47px;
  mask-image:linear-gradient(to bottom,black,transparent 75%);
}

.topbar{
  background:rgba(255,253,249,.90);
  border-bottom-color:rgba(231,220,207,.95);
  box-shadow:0 8px 28px rgba(86,57,35,.07);
}
.topbar-brand-mark{
  background:linear-gradient(145deg,#6f4328,#a86c3c);
  box-shadow:0 8px 20px rgba(111,67,40,.22);
}
.topbar-brand-name{color:#38261b}
.topbar-brand-name span{color:#8b572f}
.topbar-brand-sub{color:#9a8777}
.today-date,.topbar-control,#langPick,#btnLogout{
  border-color:var(--line)!important;
  background:#fffdf9!important;
  color:var(--ink-2)!important;
}
.topbar-control:hover{border-color:#cdb59e!important;color:#8b572f!important;background:#f7eee5!important}

.card,.stat{
  background:rgba(255,253,249,.96);
  border-color:var(--line);
  box-shadow:var(--shadow);
}
.card-head{border-bottom-color:var(--line)}
.stat-icon{border-radius:14px}
.ic-blue{background:linear-gradient(145deg,#6f4328,#a86c3c)!important;color:#fff}
.ic-soft{background:#f7eee5!important;color:#8b572f!important}

.btn{
  background:linear-gradient(135deg,#7a4929,#a86c3c);
  box-shadow:0 9px 20px rgba(111,67,40,.16);
}
.btn:hover:not(:disabled){background:linear-gradient(135deg,#62381f,#8b572f)}
.btn-ghost{
  background:#fffdf9;
  color:#5f4838;
  border-color:var(--line);
  box-shadow:none;
}
.btn-ghost:hover:not(:disabled){background:#f7eee5;color:#8b572f}
.field{border-color:#e1d4c5;background:#fffdf9}
.field:focus{border-color:#a86c3c;box-shadow:0 0 0 4px rgba(168,108,60,.11)}

/* Warm coffee accent for headings and links */
.card-head .link,.tb-add,.bs-val{color:#8b572f}
.page-head h2{color:#39271d}

/* Four-icon floating navigation */
.tabbar{
  background:rgba(255,253,249,.94);
  border-color:rgba(224,211,198,.98);
  box-shadow:0 20px 45px rgba(86,57,35,.16),0 5px 15px rgba(86,57,35,.08);
}
.tab{color:#9b8b7d}
.tab.active{color:#8b572f;background:#f7eee5}
.tab.active::before{background:#8b572f}

/* Official CS button — keep Telegram behavior, restyle only */
.cs-float{
  background:linear-gradient(145deg,#6f4328,#a86c3c);
  box-shadow:0 14px 30px rgba(111,67,40,.28),0 0 0 5px rgba(255,253,249,.82);
}
.cs-float:hover{
  box-shadow:0 17px 34px rgba(111,67,40,.34),0 0 0 5px rgba(255,253,249,.92);
}

/* Blast delay selector: 1s / 3s / 15s / 30s / 60s */
.delay-option .delay-chip{
  border-color:var(--line)!important;
  background:#fffdf9!important;
  color:#5f4838;
}
.delay-option:hover .delay-chip{border-color:#c7aa90!important;background:#faf3eb!important}
.delay-option input:checked + .delay-chip{
  border-color:#8b572f!important;
  background:#f3e5d7!important;
  color:#6f4328!important;
  box-shadow:0 0 0 2px rgba(139,87,47,.11),0 7px 18px rgba(111,67,40,.08);
}

/* Coffee-inspired decorative cards */
.wallet-hero{
  background:
    radial-gradient(180px 140px at 92% 18%,rgba(194,138,89,.17),transparent 70%),
    linear-gradient(135deg,#fffdf9,#f7eee5)!important;
}
.referral-card,.promo-card{background:linear-gradient(135deg,#fffdf9,#f4e8dc)}

@media(max-width:860px){
  .content{padding-left:14px;padding-right:14px}
  .tabbar{background:rgba(255,253,249,.96)}
}

/* ═══════════════════════════════════════════════════════════════
   ISANBLAST V5 — PREMIUM COFFEE DASHBOARD
   ═══════════════════════════════════════════════════════════════ */
:root{
  --coffee-deep:#3a2418;
  --coffee:#7a4929;
  --coffee-mid:#a86c3c;
  --coffee-light:#ead8c4;
  --cream:#fffaf4;
  --cream-2:#f3e8da;
}

/* Desktop navigation: icon-only, compact and premium. */
@media(min-width:861px){
  .sidebar{width:82px;background:rgba(255,253,249,.88)!important;border-right:1px solid var(--line)!important;backdrop-filter:blur(18px);padding:14px 9px;}
  .brand{padding:4px 0 12px;display:flex;justify-content:center;}
  .brand-sub,.brand picture img{display:none!important}
  .brand:after{content:'B7';display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:linear-gradient(145deg,var(--coffee-deep),var(--coffee-mid));color:#fff;font:800 14px/1 'Space Grotesk';box-shadow:0 10px 24px rgba(91,55,31,.18)}
  .nav{padding:12px 0}
  .nav a{width:54px;height:54px;margin:7px auto;display:grid!important;place-items:center;position:relative;padding:0!important;border-radius:16px!important;color:#8d7b6d!important}
  .nav a span{position:absolute;left:66px;top:50%;transform:translateY(-50%);background:var(--coffee-deep);color:#fff;padding:7px 10px;border-radius:9px;font-size:11px;white-space:nowrap;opacity:0;pointer-events:none;transition:.15s;box-shadow:0 8px 22px rgba(58,36,24,.18);z-index:20}
  .nav a:hover span{opacity:1}
  .nav a.active{background:var(--neon-soft)!important;color:var(--coffee)!important;box-shadow:0 8px 20px rgba(122,73,41,.10), inset 0 0 0 1px var(--neon-line)!important}
  .nav a:last-child{display:none!important}
  .main{min-width:0}
}

.lang-pick{width:auto!important;min-width:108px;padding:9px 12px!important;font-size:12px!important;font-weight:700!important;border-radius:12px!important}

.hero-coffee{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:30px;border:1px solid var(--line);border-radius:28px;background:radial-gradient(circle at 82% 40%,rgba(194,138,89,.20),transparent 28%),linear-gradient(135deg,#fffdf9,#f2e5d7);box-shadow:var(--shadow);margin-bottom:16px}
.hero-coffee:after{content:'';position:absolute;width:220px;height:220px;border-radius:50%;right:-70px;top:-80px;background:rgba(168,108,60,.08)}
.hero-coffee h2{margin:6px 0 8px;font:800 32px/1.08 'Space Grotesk';color:var(--coffee-deep)}
.hero-coffee p{max-width:640px;color:var(--ink-2);margin:0;font-size:14px}
.eyebrow{font-size:10px;font-weight:800;letter-spacing:1.5px;color:var(--coffee-mid);text-transform:uppercase}
.hero-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.hero-meta>span{padding:8px 11px;border-radius:11px;background:rgba(255,255,255,.7);border:1px solid var(--line);font-size:12px;color:var(--ink-2)}
.status-dot:before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;background:var(--red)}
.status-dot.on:before{background:var(--green);box-shadow:0 0 0 4px rgba(61,123,88,.10)}
.hero-cup{font-size:82px;filter:drop-shadow(0 16px 18px rgba(91,55,31,.16));z-index:1}
.dashboard-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:16px}
.dashboard-two{display:grid;grid-template-columns:1.25fr .9fr;gap:16px;margin-bottom:16px}
.premium-stat{padding:20px;min-height:125px}
.stat-kicker{font-size:10px;letter-spacing:1.3px;font-weight:800;color:var(--ink-3)}
.premium-number{font:800 27px/1.1 'Space Grotesk';color:var(--coffee-deep);margin:8px 0 5px}
.premium-number small{font-size:12px;font-weight:700}
.page-sub{margin:4px 0 0;color:var(--ink-3);font-size:13px}
.admin-board-body{display:grid;grid-template-columns:170px 1fr;gap:18px;align-items:center;padding:18px}
.admin-board-image{width:100%;height:120px;object-fit:cover;border-radius:16px;border:1px solid var(--line)}
.admin-board-copy{font-size:13.5px;line-height:1.8;color:var(--ink-2)}
.activity-card .card-body{padding-top:12px}
.activity-card .notif{border-bottom:1px solid var(--line);padding:10px 0}
.referral-home-main{display:flex;justify-content:space-between;gap:20px;padding:20px}
.referral-home-main strong{display:block;font:800 28px 'Space Grotesk';color:var(--coffee)}
.referral-home-main p{margin:5px 0 0;color:var(--ink-3);font-size:12.5px;max-width:450px}
.referral-mini{display:grid;grid-template-columns:auto auto;gap:3px 15px;min-width:150px;font-size:11px;color:var(--ink-3);align-content:center}
.referral-mini b{color:var(--coffee-deep);font-size:14px}
.balance-big{font:800 31px 'Space Grotesk';color:var(--coffee-deep);padding:18px 20px 5px}

.blast-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.75fr);gap:16px}
.blast-main{display:flex;flex-direction:column;gap:16px}
.blast-side{display:flex;flex-direction:column;gap:16px}
.sticky-card{position:sticky;top:16px}
.device-row,.status-list-row,.running-row,.history-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.device-row:last-child,.status-list-row:last-child,.running-row:last-child,.history-row:last-child{border-bottom:0}
.device-icon{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--cream-2);color:var(--coffee);font-weight:900}
.device-row .pill,.status-list-row .pill,.running-row .btn{margin-left:auto}
.performance-grid{display:grid;grid-template-columns:repeat(4,1fr);padding:18px;gap:1px;background:var(--line)}
.performance-grid>div{background:var(--card);padding:16px}
.performance-grid span{display:block;color:var(--ink-3);font-size:11px;margin-bottom:7px}
.performance-grid b{font:800 22px 'Space Grotesk';color:var(--coffee-deep)}
.success-text{color:var(--green)!important}.danger-text{color:var(--red)!important}

.withdrawal-hours{display:flex;gap:14px;align-items:center;padding:18px 20px;border:1px solid #e5d3bd;border-radius:18px;background:linear-gradient(135deg,#fffaf4,#f5e9db);margin-bottom:16px;box-shadow:0 10px 30px rgba(86,57,35,.06)}
.clock-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:#ead8c4;color:var(--coffee);font-size:27px}
.withdrawal-hours b,.withdrawal-hours strong,.withdrawal-hours span{display:block}.withdrawal-hours strong{font:800 19px 'Space Grotesk';color:var(--coffee-deep);margin-top:2px}.withdrawal-hours span{font-size:12px;color:var(--ink-3);margin-top:3px}
.amount-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.amount-grid label{cursor:pointer}.amount-grid input{position:absolute;opacity:0}.amount-grid span{display:flex;justify-content:center;align-items:center;min-height:48px;border:1px solid var(--line);border-radius:12px;background:#fffdf9;font-size:12px;font-weight:800;color:var(--ink-2)}.amount-grid input:checked+span{border-color:var(--coffee);background:#f1dfcf;color:var(--coffee-deep);box-shadow:0 0 0 2px rgba(139,87,47,.08)}
.payout-preview{padding:14px 15px;border-radius:14px;background:#f7eee5;border:1px solid var(--line);margin-bottom:15px}.payout-preview span,.payout-preview b,.payout-preview small{display:block}.payout-preview span{font-size:10px;font-weight:800;letter-spacing:1px;color:var(--coffee)}.payout-preview b{font-size:15px;margin-top:4px}.payout-preview small{color:var(--ink-3);margin-top:2px}
.bonus-highlight{padding:18px;border-radius:16px;background:linear-gradient(135deg,#f3e5d7,#fffaf4);border:1px solid var(--line)}.bonus-highlight b{font:800 27px 'Space Grotesk';display:block;color:var(--coffee)}.bonus-highlight span{font-size:12px;color:var(--ink-2)}
.history-tabs{display:flex;gap:5px;flex-wrap:wrap}.history-tabs button{border:1px solid var(--line);background:#fffdf9;color:var(--ink-3);border-radius:9px;padding:6px 9px;font-size:10.5px;font-weight:700;cursor:pointer}.history-tabs button.active{background:#f1dfcf;color:var(--coffee);border-color:#cdb59e}
.history-row>div:first-child{display:grid;gap:2px}.history-row>div:first-child span{font-size:11px;color:var(--ink-3)}
.link-btn{border:0;background:none;padding:0;color:var(--coffee);font-weight:800;cursor:pointer}

.referral-hero{display:flex;justify-content:space-between;align-items:center;padding:26px 30px;border-radius:25px;background:linear-gradient(135deg,#3a2418,#7a4929 60%,#a86c3c);color:#fff;box-shadow:0 20px 45px rgba(58,36,24,.18);margin-bottom:16px}.referral-hero .eyebrow{color:#ead8c4}.referral-hero strong{display:block;font:800 36px 'Space Grotesk';margin:6px 0}.referral-hero p{margin:0;color:#f4e7db;max-width:650px;font-size:13px}.coffee-beans{font-size:68px;filter:grayscale(1) brightness(5);opacity:.85}.ref-code-box{padding:18px;border-radius:16px;background:linear-gradient(135deg,#3a2418,#8b572f);color:#fff;margin-bottom:15px}.ref-code-box span,.ref-code-box b,.ref-code-box small{display:block}.ref-code-box span{font-size:10px;letter-spacing:1.4px;color:#ead8c4}.ref-code-box b{font:800 30px 'Space Grotesk';letter-spacing:2px;margin:3px 0}.ref-code-box small{color:#f2e6db;font-size:11.5px}.ref-history-head,.ref-history-row{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);font-size:12px}.ref-history-head{font-size:10px;font-weight:800;letter-spacing:1px;color:var(--ink-3)}
.payout-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}

@media(max-width:980px){.dashboard-grid{grid-template-columns:1fr 1fr}.dashboard-two,.blast-layout{grid-template-columns:1fr}.sticky-card{position:static}.performance-grid{grid-template-columns:1fr 1fr}.payout-grid{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.hero-coffee{padding:22px}.hero-coffee h2{font-size:25px}.hero-cup{font-size:58px}.dashboard-grid{grid-template-columns:1fr}.admin-board-body{grid-template-columns:1fr}.admin-board-image{height:150px}.referral-home-main{flex-direction:column}.amount-grid{grid-template-columns:repeat(2,1fr)}.performance-grid{grid-template-columns:1fr 1fr}.payout-grid{grid-template-columns:1fr}.history-tabs{margin-top:7px}.ref-history-head{display:none}.ref-history-row{grid-template-columns:1fr auto;gap:6px}.ref-history-row span:last-child{grid-column:1/-1;color:var(--ink-3);font-size:10.5px}.topbar-right .who,.topbar-right .avatar{display:none}.lang-pick{min-width:92px}}

.delay-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
@media(max-width:680px){.delay-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Header compact mode: exactly the requested controls. */
.topbar-right .bell,.topbar-right .avatar,.topbar-right .who{display:none!important}


/* ═══════════════════════════════════════════════════════════════
   ISANBLAST V7 — SIGNATURE COFFEE PREMIUM
   Visual-only override. No routes, API, data, timers, blast logic,
   auth logic, or navigation behavior are changed.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --bg:#f7f1e8;
  --card:#fffdf9;
  --surface-2:#f5ece2;
  --line:#e6d8ca;
  --line-strong:#d2bda8;
  --ink:#2f2119;
  --ink-2:#6f5a4b;
  --ink-3:#9a8574;
  --blue-900:#3a2418;
  --blue-800:#4a2d1d;
  --blue-700:#6f4328;
  --blue-600:#8b572f;
  --blue-500:#a86c3c;
  --blue-50:#f7eee5;
  --neon:#8b572f;
  --neon-2:#c28a59;
  --neon-soft:rgba(139,87,47,.10);
  --neon-line:rgba(139,87,47,.22);
  --green:#3d7b58;
  --green-50:#edf5ef;
  --red:#b94a3a;
  --red-50:#fff0ed;
  --amber:#a86b24;
  --coffee-deep:#3a2418;
  --coffee:#7a4929;
  --coffee-mid:#a86c3c;
  --coffee-light:#ead8c4;
  --cream:#fffaf4;
  --cream-2:#f3e8da;
  --shadow:0 18px 50px rgba(86,57,35,.10),0 2px 10px rgba(86,57,35,.045);
  --r:20px;
  --sidebar:0px;
  --tab-h:68px;
}

*{box-sizing:border-box}
html{background:var(--bg)}
body{
  min-height:100vh;
  background:
    radial-gradient(760px 430px at 96% -8%,rgba(194,138,89,.17),transparent 65%),
    radial-gradient(720px 430px at -8% 4%,rgba(139,87,47,.09),transparent 65%),
    linear-gradient(180deg,#fbf8f3 0%,#f5eee6 100%);
  color:var(--ink);
}
body:before{
  opacity:.18!important;
  background-image:
    radial-gradient(circle at 20% 20%,rgba(111,67,40,.05) 0 1px,transparent 1.5px),
    radial-gradient(circle at 70% 65%,rgba(111,67,40,.035) 0 1px,transparent 1.5px)!important;
  background-size:34px 34px,47px 47px!important;
}

.app{min-height:100vh;background:transparent}
.sidebar{display:none!important}
.main{margin-left:0!important;min-width:0;width:100%;background:transparent}
.content{
  width:100%;
  max-width:1420px!important;
  margin:0 auto!important;
  padding:28px 34px 128px!important;
}

/* Premium top bar: logo + date + language + settings + logout */
.topbar{
  position:sticky!important;
  top:0!important;
  z-index:50!important;
  min-height:72px;
  padding:12px 34px!important;
  background:rgba(255,253,249,.88)!important;
  border-bottom:1px solid rgba(230,216,202,.95)!important;
  box-shadow:0 8px 30px rgba(86,57,35,.07)!important;
  backdrop-filter:blur(18px) saturate(135%);
}
.topbar-brand{display:flex!important;align-items:center;gap:10px;flex-shrink:0}
.topbar-brand-mark{
  width:38px!important;height:38px!important;border-radius:12px!important;
  display:grid!important;place-items:center!important;
  background:linear-gradient(145deg,#5b341f,#a86c3c)!important;
  color:#fff!important;font:900 25px/1 "Space Grotesk",sans-serif!important;
  box-shadow:0 8px 20px rgba(91,52,31,.20)!important;
}
.topbar-brand-name{
  color:#352219!important;font:800 22px/1 "Space Grotesk","Inter",sans-serif!important;
  letter-spacing:-1.2px!important;
}
.topbar-brand-name span{color:#a86c3c!important}
.topbar-brand-sub{
  display:block!important;color:#9a8574!important;
  font-size:8px!important;letter-spacing:1.25px!important;
  margin-top:3px!important;text-transform:uppercase;
}
.hamburger,.topbar-logo,.greet,.bell,.avatar,.who{display:none!important}
.topbar-right{margin-left:auto;display:flex!important;align-items:center;gap:9px!important}
.today-date,.topbar-control,#langPick,#btnLogout{
  min-height:40px!important;
  border:1px solid var(--line)!important;
  background:rgba(255,253,249,.96)!important;
  color:var(--ink-2)!important;
  border-radius:12px!important;
  box-shadow:0 4px 14px rgba(86,57,35,.04);
}
.today-date{display:flex;align-items:center;padding:0 13px;font-size:12px;font-weight:700}
#langPick{width:auto!important;min-width:108px!important;padding:0 12px!important;font-size:12px!important;font-weight:700!important}
.topbar-control.icon-only{width:40px!important;height:40px!important;padding:0!important}
#btnLogout{padding:0 14px!important;font-weight:800!important;cursor:pointer}
.today-date:hover,.topbar-control:hover,#langPick:hover,#btnLogout:hover{
  border-color:#cdb59e!important;color:#6f4328!important;background:#f8efe6!important;
}

/* Cards: clean ivory surfaces, espresso typography, soft café shadows */
.card,.stat,.plan-card{
  background:rgba(255,253,249,.96)!important;
  border:1px solid var(--line)!important;
  border-radius:20px!important;
  box-shadow:var(--shadow)!important;
}
.card:before,.stat:before{display:none!important}
.card-head{
  padding:18px 20px!important;
  border-bottom:1px solid var(--line)!important;
}
.card-head h3,.page-head h2,.page-head h1{color:var(--coffee-deep)!important}
.card-body{padding:18px 20px!important}
.page-head{margin-bottom:18px}
.page-head h2{font-size:24px!important;letter-spacing:-.5px}
.muted,.page-sub,.hint{color:var(--ink-3)!important}

.btn{
  border-radius:13px!important;
  background:linear-gradient(135deg,#6f4328,#a86c3c)!important;
  color:#fff!important;
  border:1px solid transparent!important;
  box-shadow:0 9px 22px rgba(111,67,40,.16)!important;
}
.btn:hover:not(:disabled){
  background:linear-gradient(135deg,#5b341f,#8b572f)!important;
  box-shadow:0 12px 28px rgba(111,67,40,.21)!important;
}
.btn-ghost{
  background:#fffdf9!important;
  color:#6f5a4b!important;
  border:1px solid var(--line)!important;
  box-shadow:none!important;
}
.btn-ghost:hover:not(:disabled){background:#f7eee5!important;color:#6f4328!important}
.btn-danger{background:#b94a3a!important;color:#fff!important}

.field{
  background:#fffdf9!important;
  color:var(--ink)!important;
  border:1px solid #e2d4c6!important;
  border-radius:12px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8)!important;
}
.field::placeholder{color:#ad9988!important}
.field:focus{
  border-color:#a86c3c!important;
  box-shadow:0 0 0 4px rgba(168,108,60,.10)!important;
}
textarea.field{background:#fffdf9!important}
select.field{
  background-color:#fffdf9!important;
  color:#6f5a4b!important;
}

/* Dashboard hero — real coffee photo, soft overlay, no emoji */
.hero-coffee{
  min-height:260px;
  padding:34px!important;
  border:1px solid #e5d6c7!important;
  border-radius:26px!important;
  background:
    linear-gradient(90deg,rgba(255,253,249,.98) 0%,rgba(255,253,249,.95) 48%,rgba(255,253,249,.22) 78%,rgba(255,253,249,.06) 100%),
    url("/img/coffee-hero.jpg") 76% 53%/cover no-repeat!important;
  box-shadow:0 20px 55px rgba(86,57,35,.10)!important;
}
.hero-coffee:after{display:none!important}
.hero-coffee h2{
  color:var(--coffee-deep)!important;
  font-size:34px!important;
  letter-spacing:-1.1px!important;
}
.hero-coffee p{color:#6f5a4b!important;max-width:610px}
.hero-cup{display:none!important}
.hero-meta>span{
  background:rgba(255,253,249,.84)!important;
  color:#6f5a4b!important;
  border-color:#e5d6c7!important;
  box-shadow:0 4px 14px rgba(86,57,35,.04);
}

.eyebrow,.stat-kicker{color:#a06b43!important}
.status-dot.on:before{background:#3d7b58!important}
.status-dot.off:before{background:#b94a3a!important}

.dashboard-grid{gap:16px!important}
.dashboard-two{gap:16px!important}
.premium-stat{padding:22px!important;min-height:132px}
.premium-number{color:var(--coffee-deep)!important;font-size:29px!important}
.stat-kicker{letter-spacing:1.15px!important}
.stat-note,.premium-stat .muted{color:#8b7564!important}

.admin-board-body{background:linear-gradient(135deg,#fffaf4,#f8eee4)}
.admin-board-image{box-shadow:0 8px 20px rgba(86,57,35,.08)}
.admin-board-copy{color:#6f5a4b!important}
.referral-home-main{background:linear-gradient(135deg,#fffaf4,#f5e9dc)}
.referral-home-main strong,.referral-mini b,.balance-big{color:var(--coffee-deep)!important}

.wallet-hero{
  background:
    radial-gradient(220px 150px at 88% 12%,rgba(194,138,89,.20),transparent 70%),
    linear-gradient(135deg,#fffdf9,#f5e9dc)!important;
  border:1px solid #e4d2c0!important;
}
.wallet-amt{color:var(--coffee-deep)!important;text-shadow:none!important}
.referral-hero{
  background:linear-gradient(135deg,#3a2418,#6f4328 62%,#a86c3c)!important;
  box-shadow:0 20px 45px rgba(58,36,24,.17)!important;
}
.ref-code-box{background:linear-gradient(135deg,#4a2d1d,#8b572f)!important}
.bonus-highlight,.payout-preview{
  background:linear-gradient(135deg,#f4e5d5,#fffaf4)!important;
  border-color:#e5d3bd!important;
}
.withdrawal-hours{
  background:linear-gradient(135deg,#fffaf4,#f5e9db)!important;
  border-color:#e5d3bd!important;
  box-shadow:0 10px 30px rgba(86,57,35,.06)!important;
}
.amount-grid span,.history-tabs button{background:#fffdf9!important;border-color:var(--line)!important;color:#7a6454!important}
.amount-grid input:checked+span,.history-tabs button.active{
  background:#f1dfcf!important;border-color:#8b572f!important;color:#6f4328!important;
}

.device-icon{background:#f3e8da!important;color:#7a4929!important}
.pill{border:1px solid var(--line)!important}
.pill.on{background:#edf5ef!important;color:#2f744e!important;border-color:#cfe3d5!important}
.pill.off{background:#fff0ed!important;color:#a63e32!important;border-color:#efc8c0!important}
.pill.wait{background:#fff7e9!important;color:#a86b24!important;border-color:#ead6af!important}

.delay-option .delay-chip{
  background:#fffdf9!important;
  color:#6f5a4b!important;
  border-color:var(--line)!important;
}
.delay-option input:checked + .delay-chip{
  border-color:#8b572f!important;
  background:#f1dfcf!important;
  color:#6f4328!important;
  box-shadow:0 0 0 2px rgba(139,87,47,.09),0 8px 18px rgba(111,67,40,.08)!important;
}

.performance-grid{background:var(--line)!important}
.performance-grid>div{background:#fffdf9!important}
.performance-grid b{color:var(--coffee-deep)!important}

.notif.success{background:#edf5ef!important}
.notif.error{background:#fff0ed!important}
.notif.info{background:#f7eee5!important}
.notif.success .notif-ic{background:#3d7b58!important}
.notif.error .notif-ic{background:#b94a3a!important}
.notif.info .notif-ic{background:#8b572f!important}

table th{color:#9a8574!important;border-bottom-color:var(--line)!important}
table td{border-bottom-color:var(--line)!important}
table tbody tr:hover{background:#fbf6f0!important}

.bar{background:#eadfd3!important}
.bar i{background:linear-gradient(90deg,#6f4328,#c28a59)!important}

/* Four-icon floating navbar — always visible, desktop and mobile */
.tabbar{
  display:grid!important;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  position:fixed!important;
  left:50%!important;
  bottom:18px!important;
  transform:translateX(-50%)!important;
  width:min(560px,calc(100vw - 34px))!important;
  height:70px!important;
  padding:8px!important;
  gap:5px!important;
  z-index:70!important;
  background:rgba(255,253,249,.93)!important;
  border:1px solid rgba(230,216,202,.98)!important;
  border-radius:24px!important;
  box-shadow:0 20px 55px rgba(86,57,35,.17),0 6px 18px rgba(86,57,35,.07)!important;
  backdrop-filter:blur(18px) saturate(135%);
}
.tab{
  height:52px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#9a8574!important;
  border-radius:17px!important;
  position:relative!important;
  transition:transform .16s ease,background .16s ease,color .16s ease;
}
.tab span{display:none!important}
.tab svg{width:23px!important;height:23px!important;stroke-width:1.8!important}
.tab.active{
  color:#fff!important;
  background:linear-gradient(145deg,#5b341f,#8b572f)!important;
  box-shadow:0 8px 18px rgba(91,52,31,.20)!important;
}
.tab.active::before{display:none!important}
.tab:active{transform:scale(.96)!important;background:#f3e8da!important}

.content{padding-bottom:130px!important}
.cs-float{
  background:linear-gradient(145deg,#6f4328,#a86c3c)!important;
  box-shadow:0 14px 30px rgba(111,67,40,.25),0 0 0 5px rgba(255,253,249,.86)!important;
}
.cs-float:hover{box-shadow:0 17px 34px rgba(111,67,40,.30),0 0 0 5px rgba(255,253,249,.94)!important}

.topbar-right .bell,.topbar-right .avatar,.topbar-right .who{display:none!important}

@media(max-width:860px){
  .topbar{padding:10px 14px!important;min-height:64px!important}
  .topbar-brand-mark{width:34px!important;height:34px!important;font-size:22px!important}
  .topbar-brand-name{font-size:18px!important}
  .topbar-brand-sub{display:none!important}
  .today-date{display:none!important}
  #langPick{min-width:92px!important;width:92px!important;height:38px!important}
  .topbar-right{gap:6px!important}
  .topbar-control.icon-only,#btnLogout{width:38px!important;height:38px!important}
  #btnLogout{padding:0 9px!important;font-size:11px!important}
  .content{padding:18px 14px 126px!important}
  .hero-coffee{
    min-height:300px!important;
    padding:24px!important;
    background:
      linear-gradient(180deg,rgba(255,253,249,.96) 0%,rgba(255,253,249,.92) 48%,rgba(255,253,249,.36) 100%),
      url("/img/coffee-hero.jpg") center/cover no-repeat!important;
  }
  .hero-coffee h2{font-size:28px!important}
  .dashboard-grid{grid-template-columns:1fr 1fr!important}
  .dashboard-two{grid-template-columns:1fr!important}
  .premium-stat{min-height:122px!important}
  .tabbar{bottom:12px!important;width:calc(100vw - 24px)!important;height:66px!important;border-radius:22px!important}
  .tab{height:50px!important}
  .cs-float{right:14px!important;bottom:96px!important;width:50px!important;height:50px!important}
}
@media(max-width:560px){
  .dashboard-grid{grid-template-columns:1fr!important}
  .hero-coffee{min-height:330px!important}
  .premium-number{font-size:27px!important}
  .page-head h2{font-size:22px!important}
  .topbar-brand-name{font-size:17px!important}
}


/* ═════════════════════════════════════════════════════════
   LAPISAN RAPI — hanya tampilan

   Ditulis paling akhir supaya menimpa aturan sebelumnya tanpa
   satu pun perlu disunting. Kalau lapisan ini dibuang, tampilan
   kembali persis seperti sebelumnya.
   ═════════════════════════════════════════════════════════ */

/* ── 1. Tombol Keluar terlihat di ponsel ────────────────────
   Sebelumnya disembunyikan di layar sempit, padahal bentuk
   ikonnya sudah disiapkan. Akibatnya tidak ada jalan keluar
   dari akun selain menutup peramban. */
@media(max-width:900px){
  #btnLogout{
    display:inline-flex!important;
    align-items:center;justify-content:center;
    flex-shrink:0;
  }
}

/* ── 2. Isi tidak tertutup navigasi mengambang ──────────────
   Navigasinya setinggi 68px dan melayang 18px dari bawah, jadi
   ruang yang dibutuhkan 86px + ruang aman iPhone. Angka lama
   (62px) menyisakan kartu terakhir tertutup separuh. */
:root{ --nav-mengambang: 86px; }

@media(max-width:900px){
  .content,.isi{
    padding-bottom:calc(var(--nav-mengambang) + env(safe-area-inset-bottom) + 22px)!important;
  }
}
@media(min-width:901px){
  /* Navigasi ini melayang di desktop juga, jadi ruangnya tetap perlu. */
  .content{padding-bottom:calc(var(--nav-mengambang) + 28px)}
}

/* ── 3. Teks tidak keluar dari papannya ─────────────────────
   Anak grid dan flex bawaannya menolak menyusut lebih kecil
   dari isinya. Satu kata panjang — email, tautan referral,
   nominal — cukup untuk mendorong kartu melewati tepinya. */
.card,.stat,.kartu,.panel,.plan-card{min-width:0}
.card>*,.stat>*,.kartu>*{min-width:0}
[class*="grid"]>*,[style*="display:grid"]>*,[style*="display:flex"]>*{min-width:0}

/* Kata panjang dipotong di batas kartu, bukan melebarkannya. */
.card,.stat,.kartu,.panel,
.card p,.card span,.card div,.card b,.card strong,
.stat-val,.wallet-amt,.ledger-besar,.hint,.muted,.eyebrow{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Isian teks tidak boleh melebihi kartunya. */
input,select,textarea,.field{max-width:100%;box-sizing:border-box}

/* Tautan panjang (link referral, URL tombol) dipotong dengan elipsis
   alih-alih memaksa kartu melebar. */
.mono,code,.link-panjang{overflow-wrap:anywhere}

/* ── 4. Halaman tidak bisa digeser ke samping ───────────────
   Garis tipis di tepi kanan pada tangkapan layar adalah tanda
   ada satu elemen yang melewati lebar layar. */
html,body{overflow-x:hidden;max-width:100%}
.main,.content,.isi,.view{max-width:100%}

/* Tabel tetap boleh digeser, tapi DI DALAM kartunya sendiri. */
@media(max-width:900px){
  .card:has(table),.card-body:has(table){overflow-x:auto;-webkit-overflow-scrolling:touch}
  .card{overflow-x:auto}
}

/* ── 5. Tombol melayang tidak menutupi isi ──────────────────
   Sebelumnya duduk tepat di atas teks kartu terakhir. Dinaikkan
   ke atas navigasi dan diberi jarak dari tepi. */
.fab,.btn-fab,[class*="fab"]{
  bottom:calc(var(--nav-mengambang) + env(safe-area-inset-bottom) + 16px)!important;
  right:16px!important;
  z-index:60;
}

/* ── 6. Bar atas rapi di layar sempit ───────────────────────
   Kontrol dibiarkan menyusut daripada mendorong keluar layar. */
@media(max-width:900px){
  .topbar,.bar{gap:8px;flex-wrap:nowrap;overflow:hidden}
  .topbar>*,.bar>*{min-width:0}
  .today-date{display:none}          /* tanggal: paling tidak penting */
  #langPick{max-width:112px}
}
@media(max-width:400px){
  #langPick{max-width:52px}          /* bendera saja */
}

/* ── 7. Aksesibilitas dasar ─────────────────────────────────*/
:focus-visible{outline:2px solid currentColor;outline-offset:2px}
@media(max-width:900px){
  a,button{-webkit-tap-highlight-color:transparent}
}

/* ═══════════════════════════════════════════════════════════
   PERBAIKAN TAMPILAN — ditulis paling akhir dengan sengaja.
   Aturan di sini menimpa yang di atasnya tanpa perlu menyunting
   satu pun baris sebelumnya, jadi kalau perlu dicabut cukup
   buang blok ini. Tidak ada fungsi yang disentuh.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Tombol Keluar terlihat di ponsel ────────────────────
   Sebelumnya disembunyikan di layar sempit, jadi satu-satunya
   jalan keluar ada di halaman Profil. Dikembalikan sebagai
   tombol ikon supaya muat tanpa mendorong kontrol lain. */
@media(max-width:900px){
  #btnLogout{
    display:inline-flex!important;
    align-items:center;justify-content:center;
    width:38px;height:38px;flex-shrink:0;
    padding:0!important;
  }
  /* Ruang untuknya diambil dari elemen yang paling tidak penting. */
  .topbar-brand-sub,.today-date{display:none!important}
}

/* ── 2. Kartu tumbuh mengikuti isinya ───────────────────────
   Tinggi paksa + overflow tersembunyi memotong baris terakhir
   ("...terkonfirmasi." terpotong di tepi bawah kartu). Tinggi
   dijadikan batas minimum, bukan batas atas. */
.hero-coffee,.card,.stat,.kartu,.panel{
  height:auto!important;
  overflow:visible;
}
/* Lingkaran hiasan tetap dipotong — itu memang tugasnya —
   tapi lewat elemen semu, bukan dengan memotong isi kartu. */
.hero-coffee{position:relative}
.hero-coffee:after{
  overflow:hidden;
  pointer-events:none;
  max-width:100%;
}
.hero-coffee>*{position:relative;z-index:1}

/* Baris terakhir tidak terpotong oleh tepi kartu. */
.card,.kartu,.panel,.hero-coffee{padding-bottom:max(18px,1.15em)}
p,.hint,.muted{overflow:visible}

/* ── 3. Ruang bawah cukup untuk navigasi mengambang ─────────
   Navigasi setinggi 68px duduk 18px dari tepi. Isi terakhir
   sebelumnya masih tertutup, jadi jaraknya ditambah. */
:root{ --nav-mengambang:86px; }
@media(max-width:900px){
  .content,.isi,.view{
    padding-bottom:calc(var(--nav-mengambang) + env(safe-area-inset-bottom) + 34px)!important;
  }
}
@media(min-width:901px){
  .content{padding-bottom:calc(var(--nav-mengambang) + 34px)!important}
}

/* ── 4. Nominal panjang tidak mendorong kartu ───────────────
   "Rp 13.200" aman, tapi tujuh digit ke atas mulai melebar.
   Angka boleh mengecil daripada memaksa kartunya melebar. */
.stat-val,.wallet-amt,.ledger-besar,.hero-coffee h2{
  overflow-wrap:anywhere;
  max-width:100%;
}
@media(max-width:400px){
  .ledger-besar,.wallet-amt{font-size:clamp(24px,8vw,36px)}
  .hero-coffee h2{font-size:clamp(20px,6.5vw,25px)}
}

/* ── 5. Bar atas tidak berdesakan ───────────────────────────*/
@media(max-width:900px){
  .topbar,.bar{
    display:flex;align-items:center;gap:8px;
    flex-wrap:nowrap;overflow:visible;
  }
  .topbar-right{display:flex;align-items:center;gap:7px;flex-shrink:0}
}

/* ISANBLAST V8 MOBILE VISUAL-ONLY FIX */
@media (max-width:860px){
.topbar{width:100%!important;min-width:0!important;overflow:visible!important;padding:9px 12px!important}
.topbar-brand{min-width:0!important;flex:1 1 auto!important;overflow:hidden!important}
.topbar-brand-name{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.topbar-right{flex:0 0 auto!important;margin-left:auto!important;gap:6px!important;max-width:52%!important}
.topbar-control.icon-only{flex:0 0 40px!important;width:40px!important;min-width:40px!important;height:40px!important}
#btnLogout{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 auto!important;width:auto!important;min-width:66px!important;max-width:86px!important;height:40px!important;min-height:40px!important;padding:0 11px!important;margin:0!important;border-radius:12px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;font-size:12px!important;line-height:1!important}
.card,.card-body,.card-head,.device-card,.device-list,.device-table,.admin-panel,.panel,.table-wrap,.table-responsive,.table-scroll{max-width:100%!important;min-width:0!important}
.table-wrap,.table-responsive,.table-scroll{width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch!important;border-radius:14px!important}
table{width:100%!important;max-width:100%!important;table-layout:fixed!important}
table th,table td{max-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:break-word!important;line-height:1.35!important}
.device-row,.device-item,.device-list-item{min-width:0!important;width:100%!important;overflow:hidden!important}
.device-row>*,.device-item>*,.device-list-item>*{min-width:0!important;max-width:100%!important}
.device-number,.device-name,.device-meta,.device-info,.device-label,.device-status{min-width:0!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;overflow-wrap:anywhere!important;word-break:break-word!important}
.admin-board,.admin-board-card,.admin-info,.info-board,.info-panel,.form-card{min-width:0!important;max-width:100%!important;overflow:hidden!important}
.admin-board p,.admin-board label,.admin-board .muted,.admin-board .hint,.admin-info p,.info-board p{overflow-wrap:anywhere!important;word-break:break-word!important}
.field,textarea.field,input.field,select.field{width:100%!important;max-width:100%!important;min-width:0!important}
.card-head,.panel-head,.section-head{min-width:0!important;max-width:100%!important;gap:10px!important}
.card-head>*,.panel-head>*,.section-head>*{min-width:0!important}
}
@media(max-width:560px){
.topbar{padding-left:10px!important;padding-right:10px!important}
.topbar-brand-name{font-size:16px!important}.topbar-right{gap:5px!important;max-width:55%!important}
.topbar-control.icon-only{width:38px!important;min-width:38px!important;height:38px!important}
#btnLogout{min-width:60px!important;max-width:72px!important;width:72px!important;height:38px!important;min-height:38px!important;padding:0 8px!important;font-size:11px!important}
table{font-size:11px!important}table th,table td{padding:10px 7px!important}
}


/* ═══════════════════════════════════════════════════════════════
   ISANBLAST V8.1 — ADMIN MOBILE POLISH
   Visual-only: fixes the three admin areas reported on phones.
   No business logic, API, routes, data or features are changed.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 860px){

  /* HOME INFO — keep every heading, hint and field inside the card. */
  .admin-home-card,
  .admin-blast-card,
  .admin-users-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }

  .admin-home-card *,
  .admin-blast-card *,
  .admin-users-card *{
    box-sizing:border-box!important;
    min-width:0!important;
    max-width:100%;
  }

  .admin-home-card .card-head,
  .admin-blast-card .card-head{
    width:100%!important;
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:flex-start!important;
    overflow:hidden!important;
  }

  .admin-home-card .card-head h3,
  .admin-blast-card .card-head h3{
    flex:1 1 180px!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
    line-height:1.3!important;
  }

  .admin-home-card .card-head .pill,
  .admin-blast-card .card-head .muted{
    flex:0 1 auto!important;
    max-width:100%!important;
    margin-left:0!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

  .admin-home-card .hint,
  .admin-blast-card .hint,
  .admin-home-card p,
  .admin-blast-card p,
  .admin-home-card label,
  .admin-blast-card label{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
    line-height:1.55!important;
  }

  .admin-home-card .duo,
  .admin-blast-card .duo,
  .admin-home-card .form-row,
  .admin-blast-card .form-row{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  .admin-home-card .field,
  .admin-blast-card .field,
  .admin-home-card textarea,
  .admin-blast-card textarea{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  /* Keep long helper/error text from creating a wider card. */
  .admin-home-card .alert,
  .admin-blast-card .alert{
    width:100%!important;
    max-width:100%!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }

  /* ── DAFTAR PENGGUNA ───────────────────────────────────────
     On a narrow phone, a 7-column desktop table makes every word
     collapse letter-by-letter. Turn each row into a compact card.
     The desktop/table layout is untouched. */
  .admin-users-card{
    overflow:hidden!important;
  }

  .admin-users-card table,
  .admin-users-card thead,
  .admin-users-card tbody,
  .admin-users-card tr,
  .admin-users-card td{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  .admin-users-card table{
    table-layout:auto!important;
    border-collapse:separate!important;
    border-spacing:0!important;
  }

  .admin-users-card thead{
    display:none!important;
  }

  .admin-users-card tbody,
  .admin-users-card tr,
  .admin-users-card td{
    display:block!important;
  }

  .admin-users-card tr{
    padding:13px 16px!important;
    border-bottom:1px solid var(--line)!important;
    overflow:hidden!important;
  }

  .admin-users-card tr:last-child{
    border-bottom:0!important;
  }

  .admin-users-card td{
    display:grid!important;
    grid-template-columns:minmax(72px,30%) minmax(0,1fr)!important;
    gap:10px!important;
    align-items:start!important;
    padding:7px 0!important;
    margin:0!important;
    text-align:left!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
    line-height:1.4!important;
  }

  .admin-users-card td::before{
    color:var(--ink-3)!important;
    font-size:11px!important;
    font-weight:700!important;
    letter-spacing:.03em!important;
    text-transform:uppercase!important;
  }

  .admin-users-card td:nth-child(1)::before{content:"Nama";}
  .admin-users-card td:nth-child(2)::before{content:"Email";}
  .admin-users-card td:nth-child(3)::before{content:"Paket";}
  .admin-users-card td:nth-child(4)::before{content:"Nomor";}
  .admin-users-card td:nth-child(5)::before{content:"Terkirim";}
  .admin-users-card td:nth-child(6)::before{content:"Peran";}
  .admin-users-card td:nth-child(7)::before{content:"Aksi";}

  .admin-users-card td:nth-child(7){
    display:flex!important;
    flex-wrap:wrap!important;
    gap:7px!important;
    align-items:center!important;
    padding-top:10px!important;
  }

  .admin-users-card td:nth-child(7)::before{
    width:100%!important;
    flex:0 0 100%!important;
  }

  .admin-users-card td:nth-child(7) .btn{
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

  .admin-users-card .pill{
    display:inline-flex!important;
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
}

@media (max-width: 420px){
  .admin-home-card .card-head,
  .admin-blast-card .card-head{
    gap:8px!important;
  }

  .admin-home-card .card-head h3,
  .admin-blast-card .card-head h3{
    flex-basis:100%!important;
  }

  .admin-users-card tr{
    padding-left:12px!important;
    padding-right:12px!important;
  }

  .admin-users-card td{
    grid-template-columns:minmax(64px,28%) minmax(0,1fr)!important;
    gap:8px!important;
    font-size:12px!important;
  }
}



/* ═══════════════════════════════════════════════════════════════
   ISANBLAST V8.3 — ADMIN WITHDRAWAL CENTER
   Visual + admin UI addition. Existing business logic is untouched.
   ═══════════════════════════════════════════════════════════════ */

.admin-wd-summary{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-bottom:16px;
}
.admin-wd-summary .premium-stat{
  min-height:112px;
}
.admin-wd-toolbar{
  gap:14px;
  flex-wrap:wrap;
}
.admin-wd-toolbar > div:first-child{
  min-width:0;
}
.admin-wd-toolbar h3{
  margin-bottom:4px;
}
.admin-wd-filters{
  display:flex;
  gap:7px;
  margin-left:auto;
  flex-wrap:wrap;
}
.admin-wd-count{
  display:inline-grid;
  place-items:center;
  min-width:20px;
  height:20px;
  margin-left:5px;
  padding:0 5px;
  border-radius:99px;
  background:rgba(255,255,255,.25);
  font-size:10px;
}
.admin-withdrawals-list{
  display:grid;
  gap:12px;
}
.admin-withdrawal-item{
  min-width:0;
  overflow:hidden;
  padding:18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(145deg,#fffdf9,#fbf3ea);
  box-shadow:0 8px 24px rgba(86,57,35,.06);
}
.admin-wd-main{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  min-width:0;
}
.admin-wd-user{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.admin-wd-avatar{
  flex:0 0 40px;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:13px;
  color:#fff;
  background:linear-gradient(145deg,var(--coffee-deep),var(--coffee-mid));
  font-weight:800;
}
.admin-wd-user-copy{
  display:grid;
  gap:3px;
  min-width:0;
}
.admin-wd-user-copy strong,
.admin-wd-user-copy span{
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.admin-wd-user-copy span{
  color:var(--ink-3);
  font-size:12px;
}
.admin-wd-amount{
  margin:15px 0 13px;
  font:800 25px/1.1 'Space Grotesk';
  color:var(--coffee-deep);
  overflow-wrap:anywhere;
}
.admin-wd-details{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.admin-wd-details > div{
  min-width:0;
  padding:10px 11px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,253,249,.72);
}
.admin-wd-details span,
.admin-wd-details b{
  display:block;
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.admin-wd-details span{
  color:var(--ink-3);
  font-size:10px;
  margin-bottom:4px;
}
.admin-wd-details b{
  font-size:12px;
}
.admin-wd-note{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  background:#f5eadf;
  color:var(--ink-2);
  font-size:12px;
  line-height:1.5;
  overflow-wrap:anywhere;
}
.admin-wd-note span{
  display:block;
  margin-bottom:3px;
  font-size:10px;
  font-weight:800;
  color:var(--ink-3);
  text-transform:uppercase;
  letter-spacing:.05em;
}
.admin-wd-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:13px;
}
.admin-wd-processed{
  margin-top:12px;
  padding-top:11px;
  border-top:1px solid var(--line);
  color:var(--ink-3);
  font-size:11px;
  overflow-wrap:anywhere;
}
.admin-wd-empty{
  padding:46px 20px;
  text-align:center;
}
.admin-wd-empty-icon{
  width:58px;
  height:58px;
  margin:0 auto 12px;
  display:grid;
  place-items:center;
  border-radius:18px;
  color:var(--coffee);
  background:#f5e8da;
}
.admin-wd-empty h3,
.admin-wd-empty p{
  max-width:100%;
  overflow-wrap:anywhere;
}
.admin-wd-empty p{
  color:var(--ink-3);
  margin-top:5px;
}

@media(max-width:680px){
  .admin-wd-summary{
    grid-template-columns:1fr;
  }
  .admin-wd-toolbar{
    align-items:flex-start!important;
  }
  .admin-wd-toolbar > div{
    width:100%;
    min-width:0;
  }
  .admin-wd-filters{
    margin-left:0;
    width:100%;
  }
  .admin-wd-filters .btn{
    flex:1 1 0;
    min-width:0;
  }
  .admin-withdrawal-item{
    padding:14px;
    border-radius:16px;
  }
  .admin-wd-main{
    gap:8px;
  }
  .admin-wd-details{
    grid-template-columns:1fr;
  }
  .admin-wd-actions{
    grid-template-columns:1fr;
  }
}

@media(max-width:420px){
  .admin-wd-head .btn{
    width:100%;
  }
  .admin-wd-user-copy strong{
    font-size:13px;
  }
  .admin-wd-amount{
    font-size:23px;
  }
}


/* ISANBLAST — final targeted admin mobile fix.
   Scope: admin Home Info, Isi Blast/Uji Varian, and Daftar Nomor only.
   No layout/business logic outside these admin sections is changed. */
@media (max-width: 860px){
  .admin-home-card,
  .admin-blast-card,
  .admin-numbers-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    padding-left:16px!important;
    padding-right:16px!important;
  }

  .admin-home-card .card-head,
  .admin-blast-card .card-head,
  .admin-numbers-card .card-head{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    gap:8px!important;
  }

  .admin-home-card .card-head h3,
  .admin-blast-card .card-head h3,
  .admin-numbers-card .card-head h3,
  .admin-home-card p,
  .admin-blast-card p,
  .admin-home-card label,
  .admin-blast-card label,
  .admin-home-card .hint,
  .admin-blast-card .hint{
    max-width:100%!important;
    min-width:0!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
    line-height:1.5!important;
  }

  .admin-home-card .duo,
  .admin-blast-card .duo{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  .admin-home-card .form-row,
  .admin-blast-card .form-row{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  .admin-home-card input,
  .admin-home-card textarea,
  .admin-blast-card input,
  .admin-blast-card textarea,
  .admin-blast-card select,
  .admin-blast-card .field{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  /* Daftar Nomor: turn the wide table into readable mobile rows. */
  .admin-numbers-card{
    overflow:hidden!important;
  }
  .admin-numbers-card table,
  .admin-numbers-card thead,
  .admin-numbers-card tbody,
  .admin-numbers-card tr,
  .admin-numbers-card td{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .admin-numbers-card table{
    table-layout:auto!important;
    border-collapse:separate!important;
    border-spacing:0!important;
  }
  .admin-numbers-card thead{display:none!important;}
  .admin-numbers-card tbody,
  .admin-numbers-card tr,
  .admin-numbers-card td{display:block!important;}
  .admin-numbers-card tr{
    padding:12px 0!important;
    border-bottom:1px solid var(--line)!important;
    overflow:hidden!important;
  }
  .admin-numbers-card tr:last-child{border-bottom:0!important;}
  .admin-numbers-card td{
    display:grid!important;
    grid-template-columns:minmax(76px,30%) minmax(0,1fr)!important;
    gap:8px!important;
    align-items:start!important;
    padding:6px 0!important;
    margin:0!important;
    text-align:left!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
    line-height:1.4!important;
  }
  .admin-numbers-card td:nth-child(1)::before{content:"Nomor";}
  .admin-numbers-card td:nth-child(2)::before{content:"Pemilik";}
  .admin-numbers-card td:nth-child(3)::before{content:"Status";}
  .admin-numbers-card td:nth-child(4)::before{content:"Aktivitas";}
  .admin-numbers-card td::before{
    color:var(--ink-3)!important;
    font-size:10px!important;
    font-weight:700!important;
    letter-spacing:.03em!important;
    text-transform:uppercase!important;
  }
  .admin-numbers-card .mono{
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
  }
}

@media (max-width:420px){
  .admin-home-card,
  .admin-blast-card,
  .admin-numbers-card{
    padding-left:12px!important;
    padding-right:12px!important;
  }
  .admin-numbers-card td{
    grid-template-columns:minmax(64px,28%) minmax(0,1fr)!important;
    font-size:12px!important;
  }
}


/* ISANBLAST V8.5 — targeted mobile fix for Nomor WhatsApp.
   Only the Nomor WhatsApp list is changed; other tables keep their behavior. */
@media (max-width: 700px){
  .nomor-list-card{
    overflow:hidden!important;
    min-width:0!important;
    width:100%!important;
    box-sizing:border-box!important;
    padding-left:14px!important;
    padding-right:14px!important;
  }

  .nomor-list-card > table{
    min-width:0!important;
    width:100%!important;
    table-layout:auto!important;
    border-collapse:separate!important;
    border-spacing:0!important;
  }

  .nomor-list-card thead{display:none!important;}
  .nomor-list-card tbody,
  .nomor-list-card tbody tr,
  .nomor-list-card tbody td{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  .nomor-list-card tbody tr{
    padding:12px 0!important;
    border-bottom:1px solid var(--line)!important;
    overflow:hidden!important;
  }
  .nomor-list-card tbody tr:last-child{border-bottom:0!important;}

  .nomor-list-card tbody td{
    display:grid!important;
    grid-template-columns:minmax(82px,31%) minmax(0,1fr)!important;
    gap:9px!important;
    align-items:start!important;
    padding:6px 0!important;
    margin:0!important;
    text-align:left!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
    line-height:1.4!important;
  }

  .nomor-list-card tbody td::before{
    color:var(--ink-3)!important;
    font-size:10px!important;
    font-weight:700!important;
    letter-spacing:.04em!important;
    line-height:1.35!important;
    text-transform:uppercase!important;
  }
  .nomor-list-card tbody td:nth-child(1)::before{content:"Nomor";}
  .nomor-list-card tbody td:nth-child(2)::before{content:"Label";}
  .nomor-list-card tbody td:nth-child(3)::before{content:"Jenis akun";}
  .nomor-list-card tbody td:nth-child(4)::before{content:"Status";}
  .nomor-list-card tbody td:nth-child(5)::before{content:"Tombol";}
  .nomor-list-card tbody td:nth-child(6)::before{content:"Aksi";}

  .nomor-list-card tbody td:nth-child(6){
    display:flex!important;
    flex-wrap:wrap!important;
    gap:7px!important;
    padding-top:9px!important;
  }
  .nomor-list-card tbody td:nth-child(6)::before{
    width:100%!important;
    flex:0 0 100%!important;
  }
  .nomor-list-card tbody td:nth-child(6) .btn{
    max-width:100%!important;
    min-width:0!important;
    white-space:normal!important;
  }

  .nomor-list-card .mono{
    max-width:100%!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
  }
}

@media (max-width:420px){
  .nomor-list-card{
    padding-left:10px!important;
    padding-right:10px!important;
  }
  .nomor-list-card tbody td{
    grid-template-columns:minmax(72px,29%) minmax(0,1fr)!important;
    font-size:12px!important;
  }
}


/* ISANBLAST V8.7 — requested visual-only mobile refinements.
   Scope: visible brand, mobile text contrast, and user dashboard message board.
   No routes, API, withdrawal logic, blast logic, or navigation behavior changed. */
.aw-brand-mark{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}
.aw-brand-mark strong{
  font-family:"Space Grotesk","Inter",sans-serif;
  font-size:25px;
  line-height:1;
  letter-spacing:-.04em;
  color:var(--ink);
}
.aw-brand-mark strong span{color:var(--blue-600)}
.aw-brand-bolt{
  width:42px;
  height:42px;
  border-radius:13px;
  display:grid;
  place-items:center;
  flex:0 0 42px;
  background:linear-gradient(145deg,#8b572f,#6f4328);
  color:#fff;
  font-size:27px;
  font-weight:800;
  box-shadow:0 8px 20px rgba(86,57,35,.14);
}
@media(max-width:860px){
  /* Darker coffee text on phones; desktop palette remains untouched. */
  :root{
    --ink-2:#5d493b;
    --ink-3:#756254;
  }
  body{color:var(--ink)!important}
  .muted,.hint,.page-sub,.greet p,.who span,.stat-note,.stat-label,
  .notif p,.notif time,.empty,th,.history-row span{
    color:var(--ink-2)!important;
  }
  .premium-number,.stat-value,.balance-big,.wallet-amt,.ledger-besar{
    color:#3a2418!important;
    opacity:1!important;
  }
  .aw-brand-mark strong{font-size:20px}
  .aw-brand-bolt{
    width:38px;height:38px;flex-basis:38px;font-size:24px;border-radius:11px;
  }
}

/* Admin Excel export: keep the new action inside the panel on phones. */
@media (max-width: 680px){
  .admin-excel-btn{
    width:100%!important;
    margin-left:0!important;
  }
}

/* ═══════════════════════════════════════════════════════════
   ISANBLAST FINAL — Premium White + Green (override semua tema lama)
   ═══════════════════════════════════════════════════════════ */
:root {
  --blue-900:#0d2818 !important;
  --blue-800:#1b4332 !important;
  --blue-700:#2d6a4f !important;
  --blue-600:#2d6a4f !important;
  --blue-500:#40916c !important;
  --blue-50:#e8f5e9 !important;
  --green:#2d6a4f !important;
  --green-50:#e8f5e9 !important;
  --neon:#2d6a4f !important;
  --neon-soft:rgba(45,106,79,.10) !important;
  --neon-line:rgba(45,106,79,.22) !important;
  --ink:#1a2e28 !important;
  --ink-2:#4a5c56 !important;
  --ink-3:#7a8a84 !important;
  --line:#e5ebe8 !important;
  --bg:#f7f9f8 !important;
  --card:#ffffff !important;
  --surface-2:#f0f4f2 !important;
  --shadow:0 1px 3px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.03) !important;
  --halo:0 0 0 1px rgba(45,106,79,.15), 0 4px 14px rgba(45,106,79,.10) !important;
}

body {
  background: var(--bg) !important;
  color: var(--ink) !important;
}

.sidebar {
  background: #ffffff !important;
  border-right: 1px solid var(--line) !important;
  color: var(--ink) !important;
}

.nav a { color: var(--ink-2) !important; }
.nav a:hover { background: var(--surface-2) !important; color: var(--ink) !important; }
.nav a.active {
  background: var(--neon-soft) !important;
  color: var(--neon) !important;
  box-shadow: inset 3px 0 0 var(--neon) !important;
}

.topbar {
  background: rgba(255,255,255,.95) !important;
  border-bottom: 1px solid var(--line) !important;
}

.topbar-brand-mark,
.aw-brand-bolt {
  background: linear-gradient(145deg, #1b4332, #2d6a4f) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(45,106,79,.2) !important;
}

.topbar-brand-name,
.aw-brand-mark strong { color: var(--ink) !important; }
.topbar-brand-name span,
.aw-brand-mark strong span { color: #2d6a4f !important; }

.btn, .btn-block {
  background: linear-gradient(135deg, #1b4332, #2d6a4f) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(45,106,79,.18) !important;
}
.btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #0d2818, #1b4332) !important;
}

.wallet-hero {
  background: linear-gradient(135deg, #1b4332 0%, #2d6a4f 100%) !important;
  color: #fff !important;
  border: none !important;
}
.wallet-amt { color: #fff !important; text-shadow: none !important; }

.tabbar {
  background: rgba(255,255,255,.97) !important;
  border-top: 1px solid var(--line) !important;
}
.tab { color: var(--ink-3) !important; }
.tab.active { color: #2d6a4f !important; }
.tab.active::before { background: #2d6a4f !important; }

.card {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow) !important;
}

.stat-ic, .ic-soft, .ic-green {
  background: var(--green-50) !important;
  color: #2d6a4f !important;
  border-color: rgba(45,106,79,.2) !important;
}

.pill.on { background: var(--green-50) !important; color: #2d6a4f !important; }

/* ═══════════════════════════════════════════════════════════════
   ISANBLAST — WHITE + GREEN CONSISTENCY PASS (logo, color, overflow)

   Older layers above ("WEB3", "Blue redesign", "Coffee v1/v5/v7")
   left several elements on brown/espresso or dark accents that the
   FINAL block never reached, because they use variables of their
   own (--coffee-*, --cream*) or hardcoded hex colors instead of the
   shared theme variables. This block finishes the job: everything
   funnels into the same white + green palette, the QR/confirm modal
   and toasts get their readable light styling back, the brand mark
   uses the supplied logo image, and a few extra pages get the same
   "text can't push past the card edge" treatment already applied
   to the admin/number tables above.

   Visual-only. No HTML structure, route, or business logic changes.
   ═══════════════════════════════════════════════════════════════ */

/* 1) Re-point the leftover "coffee" palette at green/white. Dozens of
      selectors above (premium numbers, hero heading, referral figures,
      performance stats, payout/bonus cards, admin withdrawal avatars…)
      read colors from these four custom properties, so fixing them
      here fixes all of those at once without touching each rule. */
:root{
  --coffee-deep:#1b4332 !important;
  --coffee:#2d6a4f !important;
  --coffee-mid:#40916c !important;
  --coffee-light:#cfe8d4 !important;
  --cream:#ffffff !important;
  --cream-2:#eaf3ec !important;
}

/* 2) Dashboard hero: drop the coffee photo/eyebrow tint, keep the
      card but make it plain white with green text, matching the
      rest of the app. */
.hero-coffee{
  background: linear-gradient(135deg,#ffffff 0%,#eef6f0 100%) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow) !important;
}
.hero-coffee:after{ display:none !important; }
.hero-coffee h2{ color: var(--ink) !important; }
.hero-coffee p{ color: var(--ink-2) !important; }
.hero-cup{ display:none !important; }
.hero-meta>span{
  background: var(--surface-2) !important;
  color: var(--ink-2) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}
.eyebrow,.stat-kicker{ color: #2d6a4f !important; }
.status-dot.on:before{ background:#2d6a4f !important; }
.status-dot.off:before{ background:#e63946 !important; }

/* 3) Referral hero + code box: same dark-green gradient as the rest
      of the app's "hero" surfaces (wallet card, buttons) instead of
      espresso brown. */
.referral-hero{
  background: linear-gradient(135deg,#0d2818,#1b4332 60%,#2d6a4f) !important;
  box-shadow: 0 20px 45px rgba(13,40,24,.18) !important;
}
.referral-hero .eyebrow{ color:#d7ead9 !important; }
.referral-hero p{ color:#eaf5ec !important; }
.ref-code-box{ background: linear-gradient(135deg,#0d2818,#2d6a4f) !important; }
.ref-code-box span{ color:#cfe8d4 !important; }
.ref-code-box small{ color:#eaf5ec !important; }

/* 4) Bonus / payout / withdrawal-hours cards: cream-to-white instead
      of cream-to-tan, green figures instead of brown. */
.bonus-highlight,.payout-preview{
  background: linear-gradient(135deg,#eef6f0,#ffffff) !important;
  border-color: var(--line) !important;
}
.bonus-highlight b,.payout-preview span{ color:#2d6a4f !important; }
.withdrawal-hours{
  background: linear-gradient(135deg,#ffffff,#eef6f0) !important;
  border-color: var(--line) !important;
  box-shadow: 0 10px 30px rgba(45,106,79,.08) !important;
}
.admin-board-copy{ color: var(--ink-2) !important; }
.admin-board-body{ background: linear-gradient(135deg,#ffffff,#f2f8f4) !important; }
.referral-home-main{ background: linear-gradient(135deg,#ffffff,#eef6f0) !important; }

/* 5) Amount picker / history tabs / delay picker: selected state now
      reads green, not brown. */
.amount-grid span,.history-tabs button{
  background:#ffffff !important; border-color:var(--line) !important; color:var(--ink-2) !important;
}
.amount-grid input:checked+span,.history-tabs button.active{
  background:#e8f5e9 !important; border-color:#2d6a4f !important; color:#1b4332 !important;
  box-shadow:0 0 0 2px rgba(45,106,79,.08) !important;
}
.delay-option .delay-chip{
  background:#ffffff !important; color:var(--ink-2) !important; border-color:var(--line) !important;
}
.delay-option input:checked + .delay-chip{
  border-color:#2d6a4f !important;
  background:#e8f5e9 !important;
  color:#1b4332 !important;
  box-shadow:0 0 0 2px rgba(45,106,79,.10),0 8px 18px rgba(45,106,79,.10) !important;
}
.device-icon{ background:#e8f5e9 !important; color:#2d6a4f !important; }
.performance-grid>div{ background:#ffffff !important; }
.admin-wd-note{ background:#eef6f0 !important; }
.admin-wd-empty-icon{ background:#e8f5e9 !important; color:#2d6a4f !important; }

/* 6) "Info" notification/pill tint: blue instead of tan, so it reads
      as a distinct third status next to the green/red/amber set. */
.notif.info{ background:#eef4ff !important; }
.notif.info .notif-ic{ background:#2563eb !important; }

/* 7) Progress bars and the floating tab bar's active state. */
.bar{ background:#e5ebe8 !important; }
.bar i{ background: linear-gradient(90deg,#1b4332,#40916c) !important; }
.tab.active{
  color:#fff !important;
  background: linear-gradient(145deg,#1b4332,#2d6a4f) !important;
  box-shadow: 0 8px 18px rgba(27,67,50,.22) !important;
}
.tab:active{ background:#e8f5e9 !important; }
.cs-float{
  background: linear-gradient(145deg,#1b4332,#2d6a4f) !important;
  box-shadow: 0 14px 30px rgba(27,67,50,.28), 0 0 0 5px rgba(255,255,255,.9) !important;
}
.cs-float:hover{ box-shadow: 0 17px 34px rgba(27,67,50,.32), 0 0 0 5px rgba(255,255,255,.96) !important; }

/* 8) Table header labels: neutral gray instead of the leftover
      brownish-gray from the coffee theme. */
table th{ color: var(--ink-3) !important; }

/* 9) Avatar badge (kept for any context where it's shown): green,
      not the near-black radial gradient from the old dark theme. */
.avatar{
  background: linear-gradient(145deg,#1b4332,#2d6a4f) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* 10) Modal (QR pairing, confirm dialogs) and toast notifications
       were still on the old near-black "terminal" theme with nothing
       above ever repainting them — on a white+green app they showed
       up as a jarring black card. Back to a light, readable surface. */
.modal-bg{ background: rgba(15,23,42,.5) !important; backdrop-filter: blur(6px); }
.modal{
  background:#ffffff !important;
  border:1px solid var(--line) !important;
  box-shadow:0 24px 60px rgba(13,40,24,.22) !important;
  border-radius:20px !important;
}
.modal-head{ border-bottom-color:var(--line) !important; }
.modal-head h3{ color:var(--ink) !important; }
.modal-head button{ color:var(--ink-3) !important; }
.modal-body{ color:var(--ink) !important; }
.toast{
  background:#1b4332 !important;
  border:1px solid rgba(45,106,79,.32) !important;
  color:#fff !important;
  box-shadow:0 16px 40px rgba(13,40,24,.28) !important;
}
.toast.ok{ background:#2d6a4f !important; }
.toast.err{ background:#c0392b !important; }

/* 11) Brand mark: the supplied logo image drops into the same badge
       box the bolt glyph used to occupy, so no layout changes. */
.topbar-brand-mark,
.aw-brand-bolt,
.auth-logo .auth-bolt{
  overflow:hidden !important;
  padding:0 !important;
}
.topbar-brand-mark img,
.aw-brand-bolt img,
.auth-logo .auth-bolt img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:inherit;
}

/* 12) A few pages (Dompet, Referral, Statistik, Pesan, Riwayat,
       Admin Kontak/Penarikan) weren't in the earlier per-page
       overflow passes. Same fix, applied app-wide: long words wrap
       inside their card instead of pushing the card wider than the
       screen. */
.card,.stat,.kartu,.panel{ min-width:0; }
.card *,.stat *,.kartu *,.panel *{ min-width:0; }
.card p,.card span,.card div,.card b,.card strong,.card small,.card label,
.stat p,.stat span,.stat div,.stat b,.stat strong{
  overflow-wrap:anywhere;
  word-break:break-word;
}
img{ max-width:100%; height:auto; }

/* 13) A mobile-only rule from an earlier pass ("V8.7") hardcoded the
       big figures (premium stat number, wallet balance, referral
       balance) to brown on phones specifically, bypassing the
       --coffee-deep variable fixed in section 1. Only visible under
       860px, which is why it slipped past the desktop check. */
@media(max-width:860px){
  .premium-number,.stat-value,.balance-big,.wallet-amt,.ledger-besar{
    color:#1b4332 !important;
    opacity:1 !important;
  }
}


/* V9 targeted fixes: saldo card stays inside its board and admin database control. */
.quick-balance{min-width:0;overflow:hidden;}
.quick-balance .card-head{min-width:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.quick-balance .card-head h3{min-width:0;overflow-wrap:anywhere;word-break:break-word;}
.quick-balance .card-head .btn{margin-left:auto;flex:0 0 auto;}
.quick-balance .balance-big{min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:break-word;white-space:normal;}
.quick-balance .muted{min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:break-word;}
.admin-blast-control{border:1px solid var(--line);border-radius:16px;padding:16px 18px;background:var(--surface-2);margin-bottom:16px;}
.admin-blast-control-main{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0;}
.admin-blast-control-copy{min-width:0;}
.admin-blast-control-copy h3,.admin-blast-control-copy p{overflow-wrap:anywhere;word-break:break-word;}
.admin-blast-control-actions{display:flex;gap:8px;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end;}
.admin-blast-control-actions .active{box-shadow:0 0 0 2px var(--neon-line);}
@media(max-width:680px){.admin-blast-control-main{align-items:stretch;flex-direction:column}.admin-blast-control-actions{justify-content:flex-start}.admin-blast-control-actions .btn{flex:1 1 140px;}}


/* V11 — pengaturan blast per perangkat + desktop/mobile overflow fixes. */
.device-blast-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  min-width:0;
}
.device-blast-card{
  min-width:0;
  border:1px solid var(--line);
  border-radius:16px;
  padding:15px;
  background:var(--card);
  box-shadow:0 8px 22px rgba(13,40,24,.05);
}
.device-blast-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  min-width:0;
  margin-bottom:14px;
}
.device-blast-head>div{min-width:0;display:flex;flex-direction:column;gap:3px;}
.device-blast-head strong,.device-blast-head .muted{
  overflow-wrap:anywhere;
  word-break:break-word;
}
.device-blast-settings{display:grid;grid-template-columns:1fr;gap:10px;}
.form-row.compact{margin:0;min-width:0;}
.form-row.compact>span{display:block;font-size:12px;font-weight:700;margin-bottom:6px;overflow-wrap:anywhere;}
.device-blast-meta{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  margin:12px 0;padding:10px 11px;border-radius:10px;background:var(--surface-2);
  min-width:0;
}
.device-blast-meta>*{min-width:0;overflow-wrap:anywhere;word-break:break-word;}
.device-blast-actions{display:flex;gap:8px;flex-wrap:wrap;min-width:0;}
.device-blast-actions .btn{min-width:0;flex:1 1 120px;white-space:normal;}
.device-running-note{margin-top:10px;font-size:12px;overflow-wrap:anywhere;}
.admin-users-card,.admin-numbers-card{min-width:0;overflow:hidden;}
.admin-users-card table,.admin-numbers-card table{width:100%;max-width:100%;table-layout:auto;}
.admin-users-card th,.admin-users-card td,
.admin-numbers-card th,.admin-numbers-card td{
  overflow-wrap:anywhere;word-break:break-word;vertical-align:top;
}
.admin-users-card td:last-child{white-space:normal !important;}
.admin-users-card td:last-child .btn{white-space:normal;margin-bottom:4px;}
.admin-wd-head,.admin-wd-head>*{min-width:0;}
.admin-wd-head h2,.admin-wd-head p,.admin-wd-head span{overflow-wrap:anywhere;word-break:break-word;}
table{max-width:100%;}
th,td{overflow-wrap:anywhere;word-break:break-word;}
.pill,.btn,.field{max-width:100%;}
.btn{white-space:normal;}
.page-head,.card-head{min-width:0;}
.page-head>* ,.card-head>*{min-width:0;overflow-wrap:anywhere;word-break:break-word;}

@media(max-width:1100px){
  .device-blast-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:680px){
  .device-blast-grid{grid-template-columns:1fr;}
  .device-blast-card{padding:13px;}
  .device-blast-actions .btn{flex:1 1 100%;}
  .admin-users-card,.admin-numbers-card{overflow-x:auto;}
  .admin-users-card table,.admin-numbers-card table{min-width:620px;}
  .admin-users-card{overflow-x:auto;}
  .admin-users-card .card-head{position:relative;}
}

/* V12 — logo clarity + custom target setting. Visual-only, except the
   target input now makes the existing per-device custom setting explicit. */
.brand:after{
  content:''!important;
  width:46px!important;
  height:46px!important;
  border-radius:15px!important;
  background:#fff url('/img/logo-mark.png') center/contain no-repeat!important;
  border:1px solid #e7dccf!important;
  box-shadow:0 8px 20px rgba(58,36,24,.12)!important;
}
.topbar-brand-mark,
.aw-brand-bolt,
.auth-bolt{
  background:#fff!important;
  border:1px solid #e7dccf!important;
  box-shadow:0 6px 16px rgba(58,36,24,.10)!important;
}
.topbar-brand-mark img,
.aw-brand-bolt img,
.auth-bolt img{
  object-fit:contain!important;
  background:#fff!important;
}
.topbar-brand{
  flex:0 1 auto!important;
  min-width:150px!important;
  max-width:100%!important;
  overflow:visible!important;
}
.topbar-brand-name{
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
.topbar-brand-sub{white-space:nowrap!important;overflow:visible!important}
.device-target-hint{
  display:block;
  margin-top:5px;
  font-size:10.5px;
  line-height:1.35;
  color:var(--ink-3);
  overflow-wrap:anywhere;
}
@media(max-width:900px){
  .topbar-brand{min-width:140px!important;flex-shrink:1!important}
  .topbar-brand-mark{flex:0 0 34px!important}
  .topbar-brand-name{font-size:16px!important;letter-spacing:-.45px!important}
}
@media(max-width:420px){
  .topbar-brand{min-width:132px!important;gap:7px!important}
  .topbar-brand-mark{width:32px!important;height:32px!important;flex-basis:32px!important;border-radius:9px!important}
  .topbar-brand-name{font-size:15px!important;letter-spacing:-.35px!important}
  .topbar-right{gap:4px!important;max-width:none!important}
  #langPick{width:68px!important;min-width:68px!important;height:36px!important;padding:0 5px!important;font-size:10px!important}
  #btnLogout{width:38px!important;min-width:38px!important;max-width:38px!important;height:36px!important;padding:0!important;font-size:0!important}
  #btnLogout:before{font-size:20px!important}
}
@media(max-width:350px){
  .topbar-brand{min-width:122px!important}
  .topbar-brand-name{font-size:14px!important}
  #langPick{width:62px!important;min-width:62px!important;font-size:9.5px!important}
}

/* v13 — laporan global & video tutorial */
.global-report-board{margin-bottom:16px;overflow:hidden}
.global-report-board .card-head{align-items:flex-start}
.global-report-board .card-head h3{margin:3px 0 0;overflow-wrap:anywhere}
.global-report-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0 18px 18px}
.global-report-item{min-width:0;display:flex;align-items:center;gap:12px;padding:15px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg,#fff,#f5faf7)}
.global-report-icon{width:42px;height:42px;flex:0 0 42px;border-radius:13px;display:grid;place-items:center;background:#e9efff;color:#2856bf;font-weight:800}
.global-report-item>div:last-child{min-width:0}
.global-report-item span{display:block;color:var(--ink-3);font-size:12px;margin-bottom:4px;overflow-wrap:anywhere}
.global-report-item b{display:block;font-size:22px;line-height:1.15;color:var(--ink);overflow-wrap:anywhere;word-break:break-word}
.blast-tutorial-card{margin-bottom:16px;overflow:hidden}
.blast-tutorial-video{width:100%;border-radius:16px;overflow:hidden;background:#101412;border:1px solid var(--line)}
.blast-tutorial-video video{display:block;width:100%;max-height:520px;object-fit:contain;background:#101412}
.admin-tutorial-preview{min-width:0;overflow:hidden}
.admin-tutorial-preview video{display:block;width:100%;max-height:420px;border-radius:14px;background:#101412;border:1px solid var(--line)}
@media(max-width:680px){
  .global-report-grid{grid-template-columns:1fr;padding:0 12px 12px}
  .global-report-item{padding:13px}
  .global-report-item b{font-size:20px}
  .blast-tutorial-card .card-head{gap:8px;flex-wrap:wrap}
  .blast-tutorial-video video{max-height:360px}
}


/* V15 — Laporan Data Blast khusus admin + saldo lebih rapi. */
.quick-balance .balance-big{
  padding:18px 26px 6px !important;
  line-height:1.15;
}
.quick-balance .muted{padding:0 26px 18px;}
.admin-report-head,.admin-report-head>*{min-width:0;}
.admin-report-head{align-items:flex-start;}
.admin-report-head h2,.admin-report-head p{overflow-wrap:anywhere;word-break:break-word;}
.admin-report-actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end;}
.admin-report-card{min-width:0;overflow:hidden;}
.admin-report-card .card-head{gap:12px;flex-wrap:wrap;}
.admin-report-search{width:260px;max-width:100%;margin-left:auto;}
.admin-report-table{width:100%;table-layout:fixed;}
.admin-report-table th,.admin-report-table td{vertical-align:top;overflow-wrap:anywhere;word-break:break-word;}
.admin-report-table th:nth-child(1){width:64px;}
.admin-report-table th:nth-child(2),.admin-report-table th:nth-child(3){width:170px;}
.admin-report-table th:nth-child(5){width:110px;}
.report-message{white-space:pre-wrap;line-height:1.55;max-height:150px;overflow:auto;}
.admin-report-pager{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px;flex-wrap:wrap;}
/* Tombol aksi utama memakai kuning premium; status aktif/berhasil tetap hijau tema. */
:root{--premium-gold:#f5c542;--premium-gold-2:#ffd95a;}
.btn:not(.btn-ghost):not(.btn-danger):not(:disabled){
  background:linear-gradient(135deg,var(--premium-gold-2),var(--premium-gold)) !important;
  color:#3a2b00 !important;
  border-color:#e4b62e !important;
  box-shadow:0 5px 16px rgba(214,170,30,.20);
}
.btn:not(.btn-ghost):not(.btn-danger):hover:not(:disabled){
  filter:brightness(1.04) saturate(1.04);
  box-shadow:0 7px 20px rgba(214,170,30,.28);
}
.btn.device-start{background:var(--green)!important;color:#fff!important;border-color:var(--green)!important;box-shadow:0 5px 16px rgba(45,106,79,.18)!important;}
@media(max-width:680px){
  .admin-report-actions{width:100%;justify-content:stretch;}
  .admin-report-actions .btn{flex:1 1 180px;}
  .admin-report-search{width:100%;margin-left:0;}
  .admin-report-table{min-width:760px;}
  .quick-balance .balance-big{padding-left:22px!important;padding-right:22px!important;}
  .quick-balance .muted{padding-left:22px;padding-right:22px;}
}


/* ═══════════════════════════════════════════════════════════════
   ISANBLAST V16 — MOBILE HEADER + ADMIN DASHBOARD TYPOGRAPHY
   Visual-only refinement. Existing routes, API, data, timers,
   blast logic, auth, navigation and features are untouched.
   ═══════════════════════════════════════════════════════════════ */

/* Admin KPI cards: keep text comfortably inside the card and make
   the four key numbers immediately readable on desktop + mobile. */
.admin-blast-control ~ .stats .stat{
  padding:20px 22px!important;
  gap:12px!important;
  min-width:0!important;
}
.admin-blast-control ~ .stats .stat-txt{
  min-width:0!important;
  padding-right:8px!important;
}
.admin-blast-control ~ .stats .stat-label{
  color:#496154!important;
  font-weight:700!important;
  font-size:12px!important;
  line-height:1.35!important;
  letter-spacing:.15px!important;
}
.admin-blast-control ~ .stats .stat-value{
  color:#183b2a!important;
  font-size:30px!important;
  font-weight:850!important;
  line-height:1.15!important;
  letter-spacing:-.7px!important;
  margin:5px 0 4px!important;
}
.admin-blast-control ~ .stats .stat-note{
  color:#65776d!important;
  font-size:11.5px!important;
  line-height:1.4!important;
}
.admin-blast-control ~ .stats .stat-icon{
  flex:0 0 44px!important;
}

/* Admin cards/tables: add breathing room so labels and values do not
   sit against the panel edge. */
.admin-blast-control ~ .duo .admin-numbers-card,
.admin-blast-control ~ .duo .admin-users-card{
  overflow:hidden!important;
}
.admin-blast-control ~ .duo .admin-numbers-card .card-head,
.admin-blast-control ~ .duo .admin-users-card .card-head{
  padding:18px 22px!important;
}
.admin-blast-control ~ .duo .admin-numbers-card table,
.admin-blast-control ~ .duo .admin-users-card table{
  color:#263d32!important;
}
.admin-blast-control ~ .duo .admin-numbers-card th,
.admin-blast-control ~ .duo .admin-users-card th{
  color:#496154!important;
  font-size:11px!important;
  font-weight:800!important;
  line-height:1.35!important;
  padding:12px 16px!important;
  letter-spacing:.25px!important;
}
.admin-blast-control ~ .duo .admin-numbers-card td,
.admin-blast-control ~ .duo .admin-users-card td{
  color:#263d32!important;
  font-size:12.5px!important;
  line-height:1.45!important;
  padding:12px 16px!important;
}
.admin-blast-control ~ .duo .admin-numbers-card td.muted,
.admin-blast-control ~ .duo .admin-users-card td.muted{
  color:#5f7167!important;
}

/* Header controls must remain visible on phones: language + date. */
@media(max-width:860px){
  .topbar{
    padding:9px 12px!important;
    gap:6px!important;
    overflow:visible!important;
  }
  .topbar-brand{
    min-width:0!important;
    flex:1 1 auto!important;
    max-width:48%!important;
  }
  .topbar-brand-name{
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .topbar-right{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:5px!important;
    flex:0 0 auto!important;
    max-width:none!important;
    min-width:0!important;
  }
  .today-date{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 auto!important;
    width:92px!important;
    min-width:92px!important;
    max-width:92px!important;
    height:36px!important;
    min-height:36px!important;
    padding:0 6px!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
    color:#496154!important;
    font-size:10px!important;
    font-weight:800!important;
  }
  #langPick{
    display:block!important;
    flex:0 0 68px!important;
    width:68px!important;
    min-width:68px!important;
    max-width:68px!important;
    height:36px!important;
    min-height:36px!important;
    padding:0 5px!important;
    font-size:10px!important;
    font-weight:800!important;
    color:#496154!important;
  }

  /* Keep admin KPI text inset on smaller screens too. */
  .admin-blast-control ~ .stats .stat{
    padding:14px 14px!important;
  }
  .admin-blast-control ~ .stats .stat-txt{
    padding-right:4px!important;
  }
  .admin-blast-control ~ .stats .stat-label{
    font-size:10.5px!important;
  }
  .admin-blast-control ~ .stats .stat-value{
    font-size:22px!important;
    letter-spacing:-.45px!important;
  }
  .admin-blast-control ~ .stats .stat-note{
    font-size:10px!important;
  }

  .admin-blast-control ~ .duo .admin-numbers-card .card-head,
  .admin-blast-control ~ .duo .admin-users-card .card-head{
    padding:15px 16px!important;
  }
  .admin-blast-control ~ .duo .admin-numbers-card td,
  .admin-blast-control ~ .duo .admin-users-card td{
    color:#263d32!important;
    line-height:1.45!important;
  }
}

/* Very narrow phones: keep both controls visible without clipping. */
@media(max-width:380px){
  .topbar-brand{max-width:39%!important}
  .topbar-brand-name{font-size:14px!important;letter-spacing:-.3px!important}
  .today-date{
    width:86px!important;
    min-width:86px!important;
    max-width:86px!important;
    font-size:9.5px!important;
  }
  #langPick{
    width:64px!important;
    min-width:64px!important;
    max-width:64px!important;
    font-size:9.5px!important;
  }
}
@media(max-width:340px){
  .topbar-brand{max-width:35%!important}
  .today-date{
    width:82px!important;
    min-width:82px!important;
    max-width:82px!important;
    font-size:9px!important;
  }
  #langPick{
    width:60px!important;
    min-width:60px!important;
    max-width:60px!important;
  }
}