/* ============================================================
   PANEL TOKO — Tema "Cockpit Modern"
   Dasar navy dalam berlapis, aksen kuning V-fin, kartu elevasi
   halus, tipografi mono untuk angka/data. Semua nama class lama
   dipertahankan — hanya tampilannya yang dimodernkan.
   ============================================================ */

:root {
  /* Palet — navy berlapis + V-fin yellow */
  --bg: #0a101f;
  --bg-rgb: 10, 16, 31;
  --surface: #111a30;
  --surface-rgb: 17, 26, 48;
  --surface-2: #1a2440;
  --surface-2-rgb: 26, 36, 64;
  --surface-3: #223052;
  --border: #24314f;
  --border-strong: #34425f;
  --text: #eaeffa;
  --text-muted: #97a4c6;
  --text-faint: #64738f;

  --accent: #ffc20e;          /* V-fin yellow */
  --accent-strong: #ffd34d;
  --accent-soft: rgba(255, 194, 14, 0.13);
  --gundam-blue: #2b5fd9;
  --gundam-red: #d8232a;
  --success: #2ed573;
  --success-soft: rgba(46, 213, 115, 0.13);
  --danger: #e05b5b;
  --danger-soft: rgba(224, 91, 91, 0.12);
  --info: #4d7ff2;
  --info-soft: rgba(77, 127, 242, 0.14);

  --font-display: 'Orbitron', 'Space Grotesk', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  --radius: 14px;
  --radius-sm: 9px;

  /* Elevasi & fokus */
  --shadow-1: 0 1px 2px rgba(3, 8, 20, .35), 0 4px 14px rgba(3, 8, 20, .22);
  --shadow-2: 0 6px 18px rgba(3, 8, 20, .38), 0 14px 34px rgba(3, 8, 20, .26);
  --ring: 0 0 0 3px rgba(255, 194, 14, .28);

  /* Alias — beberapa bagian UI memakai nama lama ini; tanpa alias warnanya jatuh ke default */
  --muted: var(--text-muted);
  --text-2: var(--text-muted);
  --warning: #f5a623;

  /* Input bawaan browser (date picker, dsb) ikut gelap */
  color-scheme: dark;

  /* Tinggi header topbar mobile — dipakai untuk scroll-padding-top supaya
     anchor/pergantian halaman tidak pernah start di belakang header sticky. */
  --mobile-header-height: 58px;
}

/* ============================================================
   TEMA TERANG — palet lembut (bukan putih polos) biar tidak
   silau/sakit mata, tetap kontras cukup di HP maupun desktop.
   Nama variabel SAMA seperti tema gelap, jadi semua komponen
   yang sudah pakai var(--...) otomatis ikut berubah tanpa
   perlu disentuh satu-satu.
   ============================================================ */
:root[data-theme="light"] {
  --bg: #e8eaf1;
  --bg-rgb: 232, 234, 241;
  --surface: #f7f8fb;
  --surface-rgb: 247, 248, 251;
  --surface-2: #eceef5;
  --surface-2-rgb: 236, 238, 245;
  --surface-3: #dfe3ee;
  --border: #d5dae7;
  --border-strong: #c0c7da;
  --text: #262c3f;
  --text-muted: #636d8c;
  --text-faint: #8a92ab;

  --accent: #c17f00;
  --accent-strong: #a56b00;
  --accent-soft: rgba(193, 127, 0, 0.11);
  --gundam-blue: #2b5fd9;
  --gundam-red: #d8232a;
  --success: #16884c;
  --success-soft: rgba(22, 136, 76, 0.11);
  --danger: #c74444;
  --danger-soft: rgba(199, 68, 68, 0.09);
  --info: #3465d1;
  --info-soft: rgba(52, 101, 209, 0.11);

  --shadow-1: 0 1px 2px rgba(30,34,50,.05), 0 3px 10px rgba(30,34,50,.04);
  --shadow-2: 0 4px 14px rgba(30,34,50,.06), 0 10px 26px rgba(30,34,50,.05);
  --ring: 0 0 0 3px rgba(193,127,0,.2);

  --muted: var(--text-muted);
  --text-2: var(--text-muted);
  --warning: #c67c00;

  color-scheme: light;
}

/* ══ Tombol ganti tema (dipasang di topbar & halaman login) ══ */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted);
  cursor: pointer; font-size: 15px; line-height: 1; transition: all .15s ease;
}
.theme-toggle:hover { color: var(--text); border-color: var(--accent); }

* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-padding-top: var(--mobile-header-height); }
body {
  margin: 0;
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(43, 95, 217, 0.10), transparent 60%),
    radial-gradient(900px 480px at -10% 110%, rgba(255, 194, 14, 0.05), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); }
::selection { background: rgba(255, 194, 14, .3); color: #fff; }
code {
  font-family: var(--font-mono);
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 12px;
}

/* Scrollbar halus (desktop) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* Fokus keyboard terlihat jelas */
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ===================== LOGIN ===================== */
.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 18% 15%, rgba(255, 194, 14, 0.07), transparent 45%),
    radial-gradient(circle at 82% 85%, rgba(43, 95, 217, 0.09), transparent 45%),
    var(--bg);
  padding: 20px;
}
.login-card {
  width: 100%;
  max-width: 400px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  padding: 34px 30px;
  box-shadow: var(--shadow-2);
}
.login-mark { display: flex; align-items: center; gap: 8px; margin-bottom: 26px; }
.login-mark-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); }
.login-mark-text { font-family: var(--font-mono); letter-spacing: 0.22em; font-size: 12px; color: var(--text-muted); }
.login-title { font-family: var(--font-display); font-size: 23px; font-weight: 700; margin: 0 0 8px; letter-spacing: .01em; }
.login-sub { color: var(--text-muted); font-size: 14.5px; font-weight: 500; margin: 0 0 24px; line-height: 1.55; }
.login-error { color: var(--danger); font-size: 13px; min-height: 18px; margin: 10px 0 0; }
.login-foot { color: var(--text-faint); font-size: 13px; font-weight: 500; margin: 22px 0 0; }

/* ===================== LAYOUT ===================== */
.app {
  display: grid;
  grid-template-columns: 236px 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}
.sidebar {
  background: linear-gradient(180deg, var(--surface), rgba(var(--surface-rgb), .96));
  border-right: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-image: linear-gradient(180deg, var(--gundam-blue) 0%, var(--gundam-blue) 33%, var(--gundam-red) 33%, var(--gundam-red) 66%, var(--accent) 66%, var(--accent) 100%) 1;
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  scrollbar-width: thin;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 18px;
}
.brand-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); flex-shrink: 0; }
.brand-text { font-family: var(--font-display); font-weight: 800; font-size: 14px; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; }
.brand-sub { font-family: var(--font-mono); font-size: 10px; color: var(--accent); letter-spacing: 0.14em; opacity: 0.85; }

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.14s ease, color 0.14s ease;
  border: none;
  background: none;
  text-align: left;
  width: 100%;
}
.nav-item::before {
  content: "";
  position: absolute;
  left: 0; top: 22%; bottom: 22%;
  width: 3px;
  border-radius: 999px;
  background: var(--accent);
  opacity: 0;
  transition: opacity .14s ease;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-item.active::before { opacity: 1; }
.nav-item .ic { width: 18px; text-align: center; font-size: 14px; }

.nav-group-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 16px 12px 6px;
}
.nav-group-label:first-of-type { padding-top: 4px; }

.sidebar-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }

.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(var(--bg-rgb), 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.topbar-title { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: .01em; }
.topbar-status { display: flex; gap: 8px; flex-wrap: wrap; }

.content { padding: 24px 28px 60px; animation: page-in .22s ease-out; }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ===================== TOGGLES (status pills) ===================== */
.toggle-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.toggle-pill:hover { transform: translateY(-1px); border-color: var(--border-strong); }
.toggle-pill:active { transform: translateY(0) scale(.97); }
.toggle-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); }
.toggle-pill.on { color: var(--success); border-color: rgba(46,213,115,0.35); background: rgba(46,213,115,0.07); }
.toggle-pill.on .dot { background: var(--success); box-shadow: 0 0 8px var(--success); }
.toggle-pill.off { color: var(--danger); border-color: rgba(224,91,91,0.35); background: rgba(224,91,91,0.06); }
.toggle-pill.off .dot { background: var(--danger); box-shadow: 0 0 8px var(--danger); }
.toggle-pill.warn { color: var(--accent); border-color: rgba(255,194,14,0.35); background: rgba(255,194,14,0.06); }
.toggle-pill.warn .dot { background: var(--accent); box-shadow: 0 0 8px var(--accent); }

/* ===================== CARDS / GRID ===================== */
.grid { display: grid; gap: 16px; }
/* Kartu sebaris = tinggi seimbang. Wrapper flex lama (halaman Broadcast) memakai
   align-items:flex-start inline — di-stretch supaya kartu kiri-kanan sama tinggi */
.content > div[style*="align-items:flex-start"] { align-items: stretch !important; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }

/* Marketplace Reseller grid — tetap 6 kolom (bukan auto-fill) supaya konsisten 6x4 = 24/halaman */
.mkt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
@media (max-width: 1300px) { .mkt-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { .mkt-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .mkt-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } }
@media (max-width: 400px)  { .mkt-grid { grid-template-columns: 1fr; } }

.card {
  background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0)), var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-1);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-2);
}
.card-title { font-size: 12.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; margin: 0 0 8px; font-weight: 600; }
.card-value { font-family: var(--font-mono); font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.card-note { font-size: 12px; color: var(--text-faint); margin-top: 4px; }

.section-title { font-family: var(--font-display); font-size: 16px; font-weight: 700; margin: 30px 0 14px; letter-spacing: .01em; }
.section-title:first-child { margin-top: 0; }

/* ===================== LISENSI SEWA BOT ===================== */
/* 3 paket (7/14/30 hari) sejajar di desktop; checkbox+nama+harga terlihat satu kelompok. */
.lic-tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
.lic-tier-box { height: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.lic-tier-check { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.lic-tier-check input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; }
/* Paket Durasi Khusus dibuat jelas terpisah dari 2 grid di atas. */
.lic-custom-box { height: auto; margin-top: 16px; padding: 14px; background: var(--surface-2); border: 1px dashed var(--border-strong, var(--border)); border-radius: var(--radius-sm); }
/* Form Buat Lisensi Baru: input ambil ruang utama, tombol di kanan. */
.lic-gen-row { display: flex; gap: 10px; margin-top: 10px; }
.lic-gen-row .field-input { flex: 1; min-width: 0; }
.lic-gen-row .btn { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 760px) {
  .lic-tier-grid { grid-template-columns: repeat(2, 1fr); }
  .lic-gen-row { flex-direction: column; }
  .lic-gen-row .btn { width: 100%; min-height: 44px; }
}
@media (max-width: 480px) {
  .lic-tier-grid { grid-template-columns: 1fr; }
}

/* ===================== RECEIPT (signature element) ===================== */
.receipt {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0)), var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px 26px;
  font-family: var(--font-mono);
  box-shadow: var(--shadow-1);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.receipt:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-2);
}
.receipt::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px; height: 10px;
  background:
    linear-gradient(135deg, var(--bg) 50%, transparent 50%) 0 100% / 16px 16px repeat-x,
    linear-gradient(45deg, var(--bg) 50%, transparent 50%) 0 100% / 16px 16px repeat-x;
}
.receipt-head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px dashed var(--border-strong); padding-bottom: 10px; margin-bottom: 10px;
  font-family: var(--font-display);
}
.receipt-head .store-name { font-weight: 700; font-size: 15px; letter-spacing: 0.02em; }
.receipt-head .store-date { font-size: 11px; color: var(--text-faint); }
.receipt-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.receipt-row .label { color: var(--text-muted); }
.receipt-row .value { font-weight: 600; }
.receipt-row.total { border-top: 1px dashed var(--border-strong); margin-top: 6px; padding-top: 10px; font-size: 15px; }
.receipt-row.total .value { color: var(--accent); }

/* ===================== TABLE ===================== */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; min-width: 600px; }
/* Sudut tabel ngepas dengan wadah bulat — latar header & baris terakhir ikut melengkung */
thead th:first-child { border-top-left-radius: calc(var(--radius) - 1px); }
thead th:last-child { border-top-right-radius: calc(var(--radius) - 1px); }
tbody tr:last-child td:first-child { border-bottom-left-radius: calc(var(--radius) - 1px); }
tbody tr:last-child td:last-child { border-bottom-right-radius: calc(var(--radius) - 1px); }
thead th {
  text-align: center; padding: 12px 20px; background: var(--surface-2);
  color: var(--text-muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border); white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
tbody td { text-align: left; padding: 12px 20px; border-bottom: 1px solid var(--border); vertical-align: middle; font-variant-numeric: tabular-nums; }
/* tfoot tidak ikut aturan "tbody td" di atas — disamakan manual di sini,
   sebelumnya baris TOTAL kehilangan padding sehingga terlihat kecil & mepet. */
tfoot td { text-align: left; padding: 12px 20px; vertical-align: middle; font-variant-numeric: tabular-nums; }
/* Teks rata kiri (asli), angka .text-right tetap rata kanan — hanya isi grid
   (badge & tombol) yang disamakan lebarnya lalu diambil tengah */
tbody td .badge, tbody td .btn { vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody td { transition: background .1s ease; }
tbody tr:nth-child(even) td { background: rgba(255,255,255,0.014); } /* zebra halus — di td, bukan tr, supaya ikut terpotong sudut bulat */
tbody tr:hover td { background: rgba(255,255,255,0.035); }

/* Isi sel campuran (badge + tombol) — jarak simetris, pas untuk rata tengah */
tbody td .badge { margin: 2px 3px; vertical-align: middle; }
tbody td .btn { margin: 2px 3px; vertical-align: middle; }

/* Samakan lebar isi grid — patokan elemen TERPANJANG di halaman itu, isi di tengah,
   sehingga tepi tiap kolom tombol/badge lurus dari atas ke bawah */
tbody td .badge { min-width: 64px; justify-content: center; white-space: nowrap; } /* patokan umum: badge pendek/angka — pil tidak melar untuk isi 1-2 digit */
tbody td .btn-sm { min-width: 96px; } /* patokan umum: tombol pendek (Edit/Stok/Hapus) — cukup 96px, tabel tidak melar */
/* Halaman Kategori punya teks terpanjang ("Sebagian (2/4)", "Nonaktifkan Semua") — patokan naik khusus tabel itu */
.table-wrap:has([data-toggle-cat]) tbody td .badge { min-width: 126px; }
.table-wrap:has([data-toggle-cat]) tbody td .btn-sm { min-width: 162px; }

/* Input polos di dalam tabel (tanggal sewa, domain, dll) — ikut tema gelap,
   bukan kotak putih bawaan browser */
tbody td input:not([type="checkbox"]):not([type="radio"]):not(.field-input),
tbody td select:not(.field-select) {
  background: rgba(var(--bg-rgb), .65);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: 7px;
  padding: 6px 9px;
  font-size: 12.5px;
  font-family: var(--font-body);
  max-width: 100%;
  transition: border-color .12s ease, box-shadow .12s ease;
}
tbody td input:not([type="checkbox"]):not([type="radio"]):focus,
tbody td select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.nowrap { white-space: nowrap; }

/* ===================== BADGES ===================== */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  font-family: var(--font-mono);
  border: 1px solid transparent;
}
.badge-success { background: var(--success-soft); color: var(--success); border-color: rgba(46,213,115,.22); }
.badge-danger { background: var(--danger-soft); color: var(--danger); border-color: rgba(224,91,91,.22); }
.badge-warn { background: var(--accent-soft); color: var(--accent); border-color: rgba(255,194,14,.22); }
.badge-info { background: var(--info-soft); color: var(--info); border-color: rgba(77,127,242,.22); }
.badge-muted { background: var(--surface-2); color: var(--text-muted); border-color: var(--border); }

/* Badge kolom Gateway — tiap metode pembayaran punya warna sendiri supaya langsung
   terbaca sekilas. "Saldo" dan "Kredit" ikut di sini karena keduanya juga metode bayar
   (saldo pelanggan / kredit reseller), cuma memang tidak lewat gateway. */
.gwb { font-weight: 700; }
.gwb-tripay    { background: rgba(34,197,94,.14);  color: #22c55e; border-color: rgba(34,197,94,.3); }
.gwb-pakasir   { background: rgba(245,158,11,.14); color: #f59e0b; border-color: rgba(245,158,11,.3); }
.gwb-xpay      { background: rgba(168,85,247,.16); color: #a855f7; border-color: rgba(168,85,247,.32); }
.gwb-klikqris  { background: rgba(56,189,248,.14); color: #38bdf8; border-color: rgba(56,189,248,.3); }
.gwb-wijayapay { background: rgba(244,114,182,.15); color: #f472b6; border-color: rgba(244,114,182,.32); }
.gwb-saldo     { background: rgba(45,212,191,.14); color: #2dd4bf; border-color: rgba(45,212,191,.3); }
.gwb-kredit    { background: rgba(129,140,248,.16); color: #818cf8; border-color: rgba(129,140,248,.32); }
/* Tema terang: warna dituakan supaya kontras teksnya tetap cukup di atas latar putih. */
:root[data-theme="light"] .gwb-tripay    { color: #15803d; background: rgba(34,197,94,.12); }
:root[data-theme="light"] .gwb-pakasir   { color: #b45309; background: rgba(245,158,11,.14); }
:root[data-theme="light"] .gwb-xpay      { color: #7e22ce; background: rgba(168,85,247,.12); }
:root[data-theme="light"] .gwb-klikqris  { color: #0369a1; background: rgba(56,189,248,.14); }
:root[data-theme="light"] .gwb-wijayapay { color: #be185d; background: rgba(244,114,182,.13); }
:root[data-theme="light"] .gwb-saldo     { color: #0f766e; background: rgba(45,212,191,.14); }
:root[data-theme="light"] .gwb-kredit    { color: #4338ca; background: rgba(129,140,248,.13); }
/* Status tidak dibedakan hanya lewat warna — ikon + teks selalu ikut */
.badge i { font-size: .92em; line-height: 1; }

/* ===================== BUTTONS ===================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; padding: 9px 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600;
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text);
  cursor: pointer; font-family: var(--font-body); text-decoration: none; white-space: nowrap;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease, opacity .2s ease, border-color .2s ease;
}
/* Hover hanya di perangkat yang benar-benar punya hover — di HP tidak ada state nyangkut */
@media (hover: hover) {
  .btn:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(3,8,20,.3); }
}
.btn:active { filter: brightness(0.95); transform: translateY(0); box-shadow: none; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled, .btn[disabled], .btn.is-disabled {
  opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; filter: grayscale(.3);
}
/* State memuat — dipakai withLoading() */
.btn .fa-spinner { opacity: .9; }

.btn-primary {
  background: linear-gradient(180deg, var(--accent-strong), var(--accent));
  border-color: var(--accent); color: #221a02;
  box-shadow: 0 2px 10px rgba(255,194,14,.22);
}
@media (hover: hover) { .btn-primary:hover { box-shadow: 0 4px 16px rgba(255,194,14,.32); } }
.btn-secondary { background: var(--surface-3); border-color: var(--border-strong); color: var(--text); }
.btn-success { background: var(--success); border-color: var(--success); color: #04220f; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #2a0d0d; }
.btn-ghost { background: transparent; border-color: var(--border); }
.btn-sm { min-height: 34px; padding: 6px 12px; font-size: 12px; }
.btn-block { width: 100%; margin-top: 18px; }
/* Tombol khusus ikon — tetap persegi & cukup besar untuk disentuh */
.btn-icon { padding: 9px; min-width: 40px; }

/* ===================== FORMS ===================== */
.field { margin-bottom: 14px; }
.field-label { display: block; font-size: 13.5px; color: var(--text); margin-bottom: 6px; font-weight: 700; }
.field-input, .field-select, .field-textarea {
  width: 100%; min-height: 42px; padding: 10px 13px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: rgba(var(--bg-rgb), .6); color: var(--text);
  font-size: 13.5px; font-family: var(--font-body);
  transition: border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.field-input:focus, .field-select:focus, .field-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}
.field-input::placeholder, .field-textarea::placeholder { color: var(--text-faint); }
/* Nonaktif terlihat jelas, tidak sekadar redup sedikit */
.field-input:disabled, .field-select:disabled, .field-textarea:disabled {
  opacity: .5; cursor: not-allowed; background: var(--surface-2);
}
/* Input bermasalah — dipakai bersama .field-error di bawahnya */
.field-input.is-invalid, .field-select.is-invalid, .field-textarea.is-invalid { border-color: var(--danger); }
.field-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(224,91,91,.22); }
.field-error { font-size: 12px; color: var(--danger); margin-top: 5px; display: flex; align-items: center; gap: 6px; }
.field-textarea { font-family: var(--font-mono); resize: vertical; min-height: 90px; }
.field-hint { font-size: 11.5px; font-style: italic; color: var(--text-faint); margin-top: 5px; line-height: 1.5; }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }
/* Baris berisi 3 isian (mis. modal Pre-order): kolomnya sempit, jadi satu label yang
   sedikit lebih panjang bisa membungkus 2 baris dan mendorong kotak isiannya turun —
   ketiganya jadi tidak sejajar. Sisakan tinggi 2 baris untuk label, dengan teks
   ditempel ke bawah supaya jarak label ke kotak isian tetap rapat. Di bawah 900px
   .field-row sudah menumpuk jadi satu kolom, jadi aturan ini tidak berlaku di sana.
   Kalau :has() tidak didukung peramban, aturan diabaikan dan tampilannya kembali
   seperti semula — tidak ada yang rusak. */
@media (min-width: 901px) {
  .field-row:has(> .field:nth-child(3)) > .field > .field-label {
    min-height: 2.4em; display: flex; align-items: flex-end;
  }
}
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); }

/* Daftar produk + toggle aktif di dalam modal Edit Kategori. Kotak sendiri (bukan
   .switch-row biasa) supaya bisa digulir kalau produknya banyak — modal tidak boleh
   memanjang tak terbatas ke bawah. */
.cat-prod-list { max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.cat-prod-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--border); }
.cat-prod-row:last-child { border-bottom: none; }
.cat-prod-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.switch-row:last-child { border-bottom: none; }
.switch-row .label { font-weight: 600; font-size: 13.5px; }
.switch-row .desc { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.5; }

.switch { position: relative; display: inline-block; vertical-align: middle; width: 48px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; margin: 0; }
.switch .track {
  position: absolute; inset: 0; background: var(--surface-3); border: 1px solid var(--border-strong);
  border-radius: 999px; cursor: pointer; transition: background 0.18s ease, border-color .18s ease;
}
.switch .track::before {
  content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 2.5px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
  transition: transform 0.18s ease, background .18s ease;
}
/* ON: hijau vivid tanpa border kelihatan, thumb bulat gelap (gaya modern bersih) */
.switch input:checked + .track { background: #2ecb5b; border-color: #2ecb5b; }
.switch input:checked + .track::before { transform: translateX(22px); background: #063a1f; }
.switch input:focus-visible + .track { box-shadow: var(--ring); }

/* ===================== TOOLBAR / SEARCH ===================== */
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; justify-content: space-between; }
.toolbar-left { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sl-actions { display: flex; gap: 8px; }
/* Riwayat Penjualan di HP: kolom-kolomnya kalau dibiarkan flex-wrap akan menumpuk
   satu per satu di tengah dengan lebar berbeda-beda. Ditata jadi grid supaya
   pencarian & status penuh selebar layar, dua tanggal berdampingan, dan kedua
   tombol sama lebar — bukan sekadar dibungkus ke baris berikutnya. */
@media (max-width: 700px) {
  .toolbar:has(.sl-actions) { display: block; }
  .toolbar:has(.sl-actions) .toolbar-left {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }
  .toolbar:has(.sl-actions) .search-input,
  .toolbar:has(.sl-actions) .sl-status,
  .toolbar:has(.sl-actions) .sl-month { grid-column: 1 / -1; width: 100% !important; }
  .toolbar:has(.sl-actions) .sl-date { width: 100% !important; min-width: 0; }
  .sl-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
  .sl-actions .btn { width: 100%; min-height: 44px; justify-content: center; text-align: center; }
}
@media (max-width: 420px) {
  .sl-actions { grid-template-columns: 1fr; }
}
.search-input { min-width: 230px; }

.mkt-filter-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.mkt-filter-row .search-input { min-width: 0; }
@media (max-width: 900px) {
  .mkt-filter-row { grid-template-columns: 1fr 1fr; }
  .mkt-filter-row .search-input { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .mkt-filter-row { grid-template-columns: 1fr; }
}

/* ===================== MODAL ===================== */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(4, 8, 18, 0.62);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 130;
}
.modal-overlay.hidden { display: none; }
.modal-overlay:not(.hidden) { animation: overlay-in .15s ease-out; }
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border-strong); border-radius: 16px;
  width: 100%; max-width: 480px; max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain; padding: 24px;
  box-shadow: var(--shadow-2);
  animation: modal-in .18s ease-out;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-wide { max-width: 640px; }
.modal-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; margin: 0 0 16px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
/* Latar tidak ikut ter-scroll selagi modal terbuka */
body.modal-open { overflow: hidden; }

/* ===================== EMPTY / LOADING ===================== */
.empty-state { text-align: center; padding: 44px 20px; color: var(--text-faint); }
.empty-state .ic { font-size: 30px; margin-bottom: 10px; }
/* Empty state baku: ikon Font Awesome + judul singkat + satu kalimat */
.empty-state > i:first-child { font-size: 30px; opacity: .45; display: block; margin-bottom: 12px; }
.empty-title { font-size: 14.5px; font-weight: 700; color: var(--text-muted); line-height: 1.4; }
.empty-desc  { font-size: 13px; color: var(--text-faint); margin: 6px auto 0; max-width: 380px; line-height: 1.6; }
.empty-hint  { font-size: 12px; color: var(--text-faint); margin: 8px 0 0; opacity: .8; }
.empty-error > i:first-child { color: var(--danger); opacity: .65; }
.empty-error .empty-desc { color: var(--danger); opacity: .85; overflow-wrap: anywhere; }
.loading-row { text-align: center; padding: 26px; color: var(--text-faint); font-family: var(--font-mono); font-size: 12px; }

/* ===================== TOAST ===================== */
.toast-wrap {
  position: fixed; bottom: 20px; right: 20px; z-index: 200;
  display: flex; flex-direction: column; gap: 8px;
  max-width: min(380px, calc(100vw - 32px));
}
.toast {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(var(--surface-2-rgb), .95);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-strong); border-left-width: 3px; border-radius: 12px;
  padding: 12px 16px; font-size: 13px; font-weight: 500; line-height: 1.5;
  box-shadow: var(--shadow-2);
  animation: toast-in 0.2s ease-out;
}
.toast-ic { font-size: 14px; margin-top: 1px; flex-shrink: 0; }
/* Pesan boleh membungkus — jangan dipotong */
.toast-msg { min-width: 0; overflow-wrap: anywhere; color: var(--text); }
.toast.success { border-left-color: var(--success); }
.toast.success .toast-ic { color: var(--success); }
.toast.error   { border-left-color: var(--danger); }
.toast.error   .toast-ic { color: var(--danger); }
.toast.warn    { border-left-color: var(--accent); }
.toast.warn    .toast-ic { color: var(--accent); }
.toast.info    { border-left-color: var(--info); }
.toast.info    .toast-ic { color: var(--info); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ===================== UTILS ===================== */
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-8 { gap: 8px; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-left { text-align: left; }
th.text-center, td.text-center { text-align: center; }
th.text-left, td.text-left { text-align: left; }
th.text-right, td.text-right { text-align: right; }
/* Kolom Tindakan/Aksi — tombol rata tengah dalam sel */
td.col-action { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.w-full { width: 100%; }
.hidden { display: none !important; }

/* ===================== SETTINGS PAGE — lebih ringkas (tetap grid-2) ===================== */
#setWrap .card { padding: 16px 18px; }
#setWrap .switch-row { padding: 8px 0; }
#setWrap .field { margin-bottom: 10px; }
#setWrap .card-title { margin-bottom: 6px; }
#setWrap .desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; }

/* ===================== OPTION CARDS (tema, gateway QRIS, biaya layanan) ===================== */
.web-theme-card {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 12px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
@media (hover: hover) {
  .web-theme-card:not(.disabled):hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 8px 20px rgba(3,8,20,.4);
  }
}
.web-theme-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.web-theme-card:not(.disabled):active { transform: translateY(-1px) scale(.97); }
.web-theme-card.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent) inset;
  animation: opt-pop .25s ease;
}
.web-theme-card.disabled { cursor: not-allowed; opacity: .45; filter: grayscale(.35); }
.web-theme-card.exclusive-locked:not(.active) { border-color: rgba(255,138,30,.4); }
@keyframes opt-pop { 0% { transform: scale(.94); } 55% { transform: scale(1.04); } 100% { transform: scale(1); } }

/* Badge stok di pojok gambar produk — latar SOLID (bukan transparan/blur) supaya
   tetap terbaca jelas di atas gambar apa pun (terang, gelap, ramai warna). */
.mkt-stok-badge {
  position: absolute; top: 7px; right: 7px; z-index: 1;
  padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.12);
  white-space: nowrap;
}
.mkt-stok-ok  { background: #0d3a20; color: #4ade80; }
.mkt-stok-out { background: #3a0d0d; color: #f87171; }

/* Kartu produk marketplace supplier — hover halus, tanpa efek "aktif" (bukan pilihan on/off) */
.mkt-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  height: 100%;
  min-width: 0;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
@media (hover: hover) {
  .mkt-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 8px 20px rgba(3,8,20,.4);
  }
}
@media (max-width: 600px) {
  .mkt-card button.btn { width: 100%; min-height: 40px; }
}

/* ── Kredit Marketplace: grid kartu supplier — max 3/baris desktop, turun bertahap ── */
.kre-sup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 20px; }
@media (min-width: 1024px) { .kre-sup-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .kre-sup-grid { grid-template-columns: 1fr; } }
.kre-sup-card { min-width: 0; height: auto; }

/* Tabel Kredit Marketplace/Daftar Reseller di desktop: nominal rata kanan, status rata tengah,
   ID pakai monospace, header sticky kalau tabelnya discroll. */
/* :not(...) supaya kelas alignment eksplisit (text-left/center/right) di HTML tetap menang —
   tanpa ini header dan isi kolom bisa beda arah, mis. ID Pengguna atau Kredit. */
.data-table td.mono:not(.text-left):not(.text-center):not(.text-right),
.data-table td[data-label="Jumlah"]:not(.text-left):not(.text-center):not(.text-right),
.data-table td[data-label="Kredit"]:not(.text-left):not(.text-center):not(.text-right) { text-align: right; }
.data-table td.mono { font-variant-numeric: tabular-nums; }
.data-table td:has(> .badge):not(.text-left):not(.text-center):not(.text-right) { text-align: center; }
.table-wrap table thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }

/* Panel lipat "Opsi Lanjutan" di modal edit produk — biar form tidak panjang menjulang */
.adv-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 10px 14px;
  margin: 10px 0;
}
.adv-section summary {
  cursor: pointer; font-weight: 600; font-size: 13px; user-select: none;
  list-style: none; display: flex; align-items: center; gap: 6px;
}
.adv-section summary::-webkit-details-marker { display: none; }
.adv-section summary::before { content: '▸'; color: var(--text-muted); transition: transform .15s ease; }
.adv-section[open] summary::before { transform: rotate(90deg); }
.adv-section summary:hover { color: var(--accent); }

/* Sub-panel (grid di dalam grid) untuk memisahkan fitur berbeda dalam satu kartu */
.qris-section {
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 14px 16px;
  transition: border-color .16s ease, background .16s ease;
}
.qris-section:hover { border-color: var(--accent); background: var(--surface-3); }

/* Kartu statistik Laporan — angka rapat & tidak patah baris (seragam tinggi) */
.stat-cards .card { padding: 14px 16px; display: flex; flex-direction: column; }
.stat-cards .card-title { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-cards .card-value { font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }

/* ===================== MOBILE (≤720px) ===================== */
/* 900px, bukan 720px: HP landscape (~800px) dulu jatuh di celah antara blok ini
   dan blok "muat layar" di bawah — sidebar masih versi desktop tapi isinya sudah
   dipaksa 1 kolom, jadi konten terperas dan terlihat mengecil saat HP diputar.
   Kedua blok sekarang dipatok di ambang yang sama. */
@media (max-width: 900px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .app { grid-template-columns: 1fr; }

  /* Card daftar (Dashboard, Domain Web) tidak boleh punya scroll vertikal
     internal sendiri di HP — satu-satunya scroll utama adalah halaman itu
     sendiri (body/html), supaya tidak ada nested scrolling / 2 scrollbar. */
  .dash-table, .wd-table-wrap { max-height: none; overflow: visible; border: none; }
  .dash-table thead th, .wd-table-wrap thead th { position: static; }

  /* Sidebar jadi nav bar horizontal melayang di bawah (aman untuk iPhone notch) */
  .sidebar {
    position: fixed;
    bottom: 0; left: 0; right: 0; top: auto;
    height: auto;
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none;
    border-top: 1px solid var(--border-strong);
    border-image: none;
    border-left: none;
    background: rgba(var(--bg-rgb), .92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    gap: 4px;
    z-index: 50;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    box-shadow: 0 -6px 20px rgba(3,8,20,.4);
  }
  .sidebar::-webkit-scrollbar { display: none; }
  .brand, .sidebar-foot, .nav-group-label { display: none; }

  .nav-item {
    flex-direction: column;
    gap: 3px;
    padding: 7px 9px;
    font-size: 10px;
    white-space: nowrap;
    width: auto; /* batalkan width:100% milik mode desktop — di sini item selebar isinya saja */
    min-width: 58px;
    min-height: 46px; /* target sentuh nyaman */
    justify-content: center;
    flex-shrink: 0; /* PENTING: tanpa ini item menyusut & label saling menimpa — biarkan scroll ke samping */
    text-align: center;
    border-radius: 10px;
  }
  .nav-item::before { display: none; }
  .nav-item .ic { width: auto; font-size: 18px; margin: 0; }

  /* Main mendapat padding bawah agar tidak tertutup nav bar */
  .main { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  .content { padding: 14px 12px calc(84px + env(safe-area-inset-bottom, 0px)); }

  .topbar {
    padding: 10px 12px;
    gap: 8px;
  }
  .topbar-title { font-size: 15px; }
  .topbar-status { gap: 6px; }
  .toggle-pill { font-size: 10.5px; padding: 5px 9px; }

  /* Tabel responsif — kolom tetap utuh (jangan patah per huruf), tabel lebar
     digeser halus ke samping DI DALAM kotaknya, bukan seluruh halaman */
  .table-wrap { border-radius: var(--radius-sm); -webkit-overflow-scrolling: touch; }
  table { min-width: 480px; }
  thead th, tbody td { padding: 7px 9px; font-size: 11.5px; }
  thead th { letter-spacing: 0; }
  .badge { font-size: 10px; padding: 2px 7px; }
  .btn-sm { padding: 5px 8px; font-size: 11px; }

  /* Grid kartu pilihan (gateway, fee, tema) — lebih rapat di layar sempit */
  #qrisModeGrid, #qrisFeeGrid, #botThemeGrid, #webThemeGrid {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)) !important;
    gap: 8px !important;
  }
  .web-theme-card { padding: 10px 8px; }
  .qris-section { padding: 12px 12px; }

  /* Modal jadi lembar dari bawah (bottom sheet) di HP */
  .modal-overlay { padding: 0 10px; align-items: flex-end; }
  .modal {
    max-width: 100%;
    max-height: 88dvh;
    border-radius: 18px 18px 0 0;
    padding: 20px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  }

  /* Tombol di modal — susun vertikal, mudah dijangkau jempol */
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .btn { width: 100%; padding: 11px 15px; }

  /* Area sentuh minimal 44px (bagian 26 aksesibilitas) */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 40px; }
  .btn-icon { min-width: 44px; min-height: 44px; }
  .theme-toggle { width: 44px; height: 44px; }
  .field-input, .field-select, .field-textarea { min-height: 46px; }

  /* Toast di HP: melebar penuh dan berada DI ATAS navigasi bawah, tidak tertutup */
  .toast-wrap {
    left: 12px; right: 12px; max-width: none;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }

  /* Form row jadi column */
  .field-row { flex-direction: column; gap: 0; }
  .field-input, .field-select, .field-textarea { font-size: 16px; } /* cegah zoom otomatis iOS saat fokus input */

  /* Toolbar wrap */
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar-left { flex-direction: column; }
  .search-input { min-width: 0; width: 100%; }

  /* Card value lebih kecil */
  .card-value { font-size: 21px; }
  .card { padding: 14px 14px; }
  .card-title { font-size: 11px; }

  /* Chart container di mobile lebih compact */
  .chart-wrap-main { height: 180px !important; }
  .chart-wrap-sm { height: 140px !important; }

  /* Toast di atas agar tidak tertutup nav */
  .toast-wrap { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); right: 10px; left: 10px; }
  .toast { text-align: center; }

  /* Login card */
  .login-card { padding: 24px 18px; }
}

/* ===================== HALAMAN SEWA — kartu per-bot ===================== */
/* 4 kartu/baris desktop, 2 tablet, 1 HP — align-items:start supaya kartu yang isinya
   lebih pendek (mis. owner tanpa footer domain/masa aktif) tidak dipaksa setinggi
   kartu tetangganya. */
.rental-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  align-items: start;
}
@media (max-width: 1180px) { .rental-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .rental-grid { grid-template-columns: 1fr; } }
.rental-card {
  height: auto;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)), var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-1);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.rental-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.rental-card.is-owner { border-color: rgba(255,194,14,.35); }
.rental-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding-bottom: 10px; margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.rental-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rental-name { font-size: 12.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rental-since { font-size: 11px; color: var(--text-faint, var(--text-muted)); white-space: nowrap; }
.rental-status { flex-shrink: 0; }

/* Baris toggle ringkas: label + switch satu baris, keterangan kecil di bawahnya.
   Spasi antar-baris 8-12px, TANPA garis pemisah per baris (beda dari halaman lain
   yang pakai divider) supaya kartu terasa ringan meski ada 5 baris pengaturan. */
.rental-rows2 { display: flex; flex-direction: column; gap: 9px; }
.rental-row2-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rental-row2-label { font-size: 12.5px; color: var(--text); font-weight: 600; }
.rental-row2-switch { flex-shrink: 0; }
.rental-row2-switch .badge { min-width: 90px; justify-content: center; white-space: nowrap; margin: 0; }
.rental-row2-switch .btn-sm { padding: 4px 9px; font-size: 11px; min-width: 84px; margin: 0; }
.rental-row2-help { font-size: 10.5px; color: var(--text-faint); margin-top: 2px; line-height: 1.4; }
.rental-row2-extra { font-style: italic; opacity: .85; }

.rental-foot { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border-strong); display: flex; flex-direction: column; gap: 10px; }
.rental-field label { display: block; font-size: 11px; color: var(--text-muted); font-weight: 600; margin-bottom: 5px; text-transform: uppercase; letter-spacing: .05em; }
.rental-inline { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rental-inline input {
  flex: 1; min-width: 140px;
  background: rgba(var(--bg-rgb), .65);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 12.5px;
  font-family: var(--font-body);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.rental-inline input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }

/* Filter di atas daftar: sejajar di desktop, satu kolom di HP. */
.rental-filter-row { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.rental-filter-row .search-input { flex: 1; min-width: 200px; }
.rental-filter-row #rentalBotFilter { min-width: 210px; }
@media (max-width: 700px) {
  .rental-filter-row { flex-direction: column; }
  .rental-filter-row .search-input, .rental-filter-row #rentalBotFilter { width: 100%; min-width: 0; }
  /* Tombol tanggal/+30 Hari/Simpan jadi grid 2 kolom di HP; Simpan (primary) melebar
     penuh di barisnya sendiri supaya tetap gampang dijangkau tanpa tombol jadi sempit. */
  .rental-foot .rental-inline { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .rental-foot .rental-inline input[type="date"], .rental-foot .rental-inline input[type="text"] { grid-column: 1 / -1; min-height: 44px; }
  .rental-foot .rental-inline .btn { min-height: 44px; }
  .rental-foot .rental-inline .btn-primary { grid-column: 1 / -1; }
}

/* ===================== SEL IZINKAN (whitelist reseller) ===================== */
/* JANGAN pakai display:flex di sini — ini elemen <td>, dan mengubah display-nya
   merusak perhitungan lebar kolom tabel (pernah terjadi di halaman Kategori).
   Tombolnya dibuat inline dengan lebar tetap supaya lurus antar baris. */
.rsl-action-cell { white-space: nowrap; }
.rsl-action-cell .btn { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.rsl-action-cell .btn + .btn { margin-left: 6px; }
.rsl-action-cell .btn-primary { width: 118px; }
.rsl-action-cell .btn:not(.btn-primary):not(.btn-danger) { width: 104px; }
.rsl-action-cell .btn-danger { width: 40px; }
.izin-cell { display: inline-flex; align-items: center; gap: 9px; }
.izin-state { font-size: 12px; font-weight: 600; color: var(--success); white-space: nowrap; }
.izin-state.off { color: var(--danger); }

/* ===================== KOTAK INFO / PENJELASAN ===================== */
.info-note {
  margin-bottom: 16px;
  padding: 12px 15px;
  border-radius: var(--radius-sm);
  background: var(--info-soft);
  border: 1px solid rgba(77,127,242,.28);
  border-left: 3px solid var(--info);
  border-top-left-radius: 0; border-bottom-left-radius: 0;
}
.info-note-title { font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.info-note-body { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }
.info-note-body strong { color: var(--text); font-weight: 600; }
.info-note.warn { background: rgba(245,166,35,.12); border-color: rgba(245,166,35,.32); border-left-color: var(--warning); }
.info-note.warn .info-note-title { color: var(--warning); }

/* ===================== SETTINGS SECTIONS (halaman Pengaturan, dikelompokkan per fungsi) ===================== */
.settings-section { margin-bottom: 30px; padding-top: 22px; border-top: 1px solid var(--border); }
.settings-section:first-child { padding-top: 0; border-top: none; }
.settings-section-head { margin-bottom: 14px; }
.settings-section-head h3 {
  font-family: var(--font-display); font-size: 15px; font-weight: 700; margin: 0 0 3px;
  letter-spacing: .02em; display: flex; align-items: center; gap: 8px;
}
.settings-section-head p { font-size: 12.5px; color: var(--text-muted); margin: 0; max-width: 640px; line-height: 1.5; }

/* Kartu Pengaturan tidak dipaksa sama tinggi — kartu isi sedikit (mis. "Wajib
   Memiliki Username") jangan ikut meregang mengikuti kartu tetangga yang lebih
   panjang (mis. "Wajib Bergabung ke Channel"), tinggi cukup ikut isinya sendiri. */
.settings-section .grid-2 { align-items: start; }
/* Deskripsi switch bisa panjang — pastikan teksnya membungkus dan tidak
   mendorong saklar keluar (saklar tetap sejajar kanan).
   Untuk halaman Pengaturan, aturan yang sama di-scope ke #setWrap (lihat blok
   ".set-cols" di bawah) karena pembungkus layoutnya bisa berubah sewaktu-waktu. */
.settings-section .switch-row > div:first-child { flex: 1 1 0%; min-width: 0; }
.settings-section .switch-row .desc { overflow-wrap: anywhere; }

/* ===== Kartu Keamanan (Wajib Bergabung ke Channel / Wajib Memiliki Username) ===== */
/* Satu kolom grid yang isinya lebih dari satu kartu — dipakai di Pengaturan → Toko
   supaya "Pengingat Masa Aktif Produk" menempel di bawah "Tampilan Produk" dalam
   kolom yang sama, bukan melompat ke kolom sebelahnya. */
.sec-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sec-col > .card { margin: 0; }

/* ===== Pengaturan: dua kolom yang mengalir sendiri-sendiri ===== */
/* Bukan grid per baris. Tiap kolom adalah flex column terpisah, jadi kartu
   berikutnya langsung naik begitu kartu di atasnya selesai — tidak menunggu tinggi
   kartu di kolom sebelah, dan tidak ada kartu yang diregangkan biar sama tinggi. */
.set-cols { display: flex; gap: 16px; align-items: flex-start; }
.set-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.set-col:nth-child(1) { flex: 0 0 45%; }
.set-col:nth-child(2) { flex: 1 1 55%; }
.set-col > .card { margin: 0; height: auto; }

/* Aksen kuning pada kartu Pengaturan. Mengikuti pola .qris-section yang sudah dipakai
   di halaman Tampilan (garis kiri accent + transisi saat disentuh), bukan gaya baru —
   supaya kedua halaman terasa satu bahasa. Judul kartu ikut kuning biar batas antar
   kartu langsung kebaca saat menggulir. */
.set-col > .card {
  border-left: 3px solid var(--accent);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.set-col > .card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 18px rgba(255, 194, 14, .10), var(--shadow-1);
}
.set-col > .card > .card-title { color: var(--accent); }
/* Garis kiri menyala pelan sekali saat halaman dibuka — sekadar penanda bahwa
   kartunya bisa diutak-atik, bukan animasi berulang yang mengganggu. */
.set-col > .card { animation: setCardIn .45s ease both; }
@keyframes setCardIn {
  from { border-left-color: var(--border); opacity: .82; }
  to   { border-left-color: var(--accent); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .set-col > .card { animation: none; }
}

/* Teks bantuan & pengait lain di halaman ini di-scope ke #setWrap, bukan ke nama
   pembungkus layout. Sebelumnya aturan-aturan ini terikat ke .settings-section lalu
   diam-diam mati saat pembungkusnya diganti — #setWrap tetap ada apa pun layoutnya. */
#setWrap .switch-row > div:first-child { flex: 1 1 0%; min-width: 0; }
#setWrap .switch-row .desc { overflow-wrap: anywhere; }
/* Contoh alamat panjang (mis. https://wa.me/62812xxxx) dibungkus <code> yang tidak
   bisa dipenggal — di kolom sempit itu memaksa halaman bergeser mendatar. */
#setWrap .field-hint, #setWrap .sec-desc,
#setWrap .field-hint code, #setWrap .sec-desc code { overflow-wrap: anywhere; }

/* Tablet ke bawah: satu kolom. Kedua pembungkus kolom dijadikan display:contents
   supaya kedelapan kartu jadi anak langsung .set-cols — barulah order bisa menata
   ulang lintas kolom sesuai urutan baca yang diminta. Angka nth-child mengikuti
   urutan kartu di renderSettings(); ubah keduanya bersamaan kalau ada perubahan. */
@media (max-width: 1100px) {
  .set-cols { flex-direction: column; }
  .set-col { display: contents; }
  .set-col:nth-child(1) > *:nth-child(1) { order: 1; }  /* Tujuan Laporan Transaksi */
  .set-col:nth-child(2) > *:nth-child(1) { order: 2; }  /* Informasi Toko             */
  .set-col:nth-child(2) > *:nth-child(2) { order: 3; }  /* Pengingat Masa Aktif       */
  .set-col:nth-child(2) > *:nth-child(3) { order: 4; }  /* Kalkulator Refund Pelanggan*/
  .set-col:nth-child(2) > *:nth-child(4) { order: 5; }  /* Tampilan Menu Utama Bot    */
  .set-col:nth-child(1) > *:nth-child(2) { order: 6; }  /* Wajib Bergabung Channel    */
  .set-col:nth-child(2) > *:nth-child(5) { order: 7; }  /* Wajib Memiliki Username    */
  .set-col:nth-child(1) > *:nth-child(3) { order: 8; }  /* Operasional & Pembayaran   */
  .set-col:nth-child(2) > *:nth-child(6) { order: 9; }  /* Akun Pemilik               */
}

/* Catatan: pembatas lebar 820px dulu datang dari pembungkus .acc-wrap. Pembungkus
   itu sudah tidak dipakai lagi di halaman ini, jadi kartu Akun Pemilik otomatis
   memenuhi lebar kolomnya tanpa aturan tambahan. */
.sec-card { display: flex; flex-direction: column; gap: 14px; }
.sec-card > .card-title { margin-bottom: 0; }
.sec-desc { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin: 0; }
.sec-toggle-row { margin: 0; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.sec-toggle-desc { color: var(--text-muted); font-size: 13px; margin-top: 2px; line-height: 1.6; }
.sec-alert {
  display: flex; align-items: flex-start; gap: 8px;
  background: var(--accent-soft); border: 1px solid var(--accent); color: var(--accent);
  border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; line-height: 1.6;
}
.sec-alert i { margin-top: 2px; flex-shrink: 0; }
/* Petunjuk jadi baris-baris pendek (list), bukan satu paragraf panjang — lebih
   nyaman dibaca terutama di HP yang lebar layarnya sempit. */
.sec-hint-list { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text-muted); line-height: 1.8; }
.sec-hint-list li { margin-bottom: 6px; }
.sec-hint-list li:last-child { margin-bottom: 0; }
.sec-hint-list code { font-size: 12px; }
.sec-save-btn { align-self: flex-start; }

@media (max-width: 767px) {
  .sec-save-btn { align-self: stretch; width: 100%; min-height: 44px; }
  .sec-card { gap: 12px; }
}

/* ===== Kartu Akun Pemilik ===== */
.acc-wrap { max-width: 820px; }
.acc-card { padding: 20px 22px; }
.acc-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; padding: 4px 0 14px; }
.acc-info { min-width: 0; flex: 1 1 260px; }
.acc-email-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acc-email { font-weight: 700; font-size: 14.5px; overflow-wrap: anywhere; }
.acc-badge { font-size: 11px; white-space: nowrap; }
.acc-date { margin-top: 4px; font-size: 13px; white-space: nowrap; }
.acc-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; }
.acc-btn { white-space: nowrap; }
.acc-inline-form { margin-top: 10px; padding: 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; }
.acc-inline-row { gap: 8px; flex-wrap: wrap; }
.acc-inline-row input { flex: 1 1 170px; min-width: 0; }

@media (max-width: 767px) {
  .acc-wrap { max-width: 100%; }
  .acc-card { padding: 16px; }
  .acc-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .acc-date { white-space: normal; overflow-wrap: anywhere; }
  .acc-btns { flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .acc-btn { width: 100%; min-height: 44px; }
  .acc-inline-row { flex-direction: column; }
  .acc-inline-row input, .acc-inline-row .btn { width: 100%; }
}

@media (max-width: 767px) {
  .settings-section .btn-primary,
  #setWrap .btn-primary { width: 100%; }
  /* Satu gateway per baris di HP, bukan 2 kolom sempit berdempetan */
  #qrisModeGrid { grid-template-columns: 1fr !important; }
}

/* ===================== MODULE HEADER (dipakai modul Reseller: Marketplace/Kredit/Whitelist) ===================== */
.module-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.module-header-main { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.module-header-icon {
  width: 40px; height: 40px; border-radius: var(--radius-sm); flex-shrink: 0;
  background: var(--surface-2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  transition: border-color .16s ease, background .16s ease;
}
.module-header-text h2 {
  font-family: var(--font-display); font-size: 17px; font-weight: 700; margin: 0 0 2px;
  letter-spacing: .01em;
}
.module-header-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; max-width: 620px; }
/* Baris keterangan tambahan di bawah deskripsi utama — dipisah agar kalimat panjang
   tidak menyambung jadi satu paragraf yang berat dibaca. */
.module-header-note { margin-top: 6px; }
/* Panduan bernomor di halaman Domain Web (tampilan owner). */
.wd-guide { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; }
.wd-guide li { font-size: 12.5px; line-height: 1.6; color: var(--text-muted); }
.wd-guide li strong { color: var(--text); font-weight: 600; }
.wd-guide code { font-family: var(--font-mono); font-size: 12px; overflow-wrap: anywhere; }
.module-header-actions { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }

/* ===================== BROADCAST BOT-KE-BOT (livelier) ===================== */
@keyframes bc-icon-float { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-3px) rotate(4deg); } }
.bc-all-card {
  position: relative;
  border: 1px solid rgba(167, 139, 250, .35);
  background: linear-gradient(160deg, rgba(167, 139, 250, .10), var(--surface) 55%);
  overflow: hidden;
}
.bc-all-card::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, #a78bfa, #f472b6, #60a5fa, #a78bfa);
  background-size: 300% 100%;
  animation: bc-gradient-shift 6s linear infinite;
}
@keyframes bc-gradient-shift { from { background-position: 0% 0; } to { background-position: 300% 0; } }
.bc-all-header { display: flex; align-items: center; gap: 12px; }
.bc-all-icon {
  font-size: 26px; line-height: 1;
  filter: drop-shadow(0 0 8px rgba(167, 139, 250, .55));
  animation: bc-icon-float 3.2s ease-in-out infinite;
}
.bc-all-safe-note {
  background: rgba(167, 139, 250, .10);
  border: 1px solid rgba(167, 139, 250, .25);
  border-radius: 8px; padding: 8px 10px; margin-bottom: 12px;
  font-size: 11.5px; color: var(--text-muted); line-height: 1.5;
}
.bc-all-send-btn {
  background: linear-gradient(135deg, #a78bfa, #8b5cf6);
  border-color: #8b5cf6;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.bc-all-send-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(139, 92, 246, .35); filter: brightness(1.05); }
.bc-all-send-btn:active { transform: translateY(0); }

/* ===================== AKSESIBILITAS ===================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =====================================================================
   PANEL DI LAYAR KECIL — cegah konten terpotong ke samping
   ---------------------------------------------------------------------
   Melengkapi blok @media (max-width:720px) di atas, yang sudah mengurus
   tata letak & mengubah sidebar jadi nav bar bawah. Blok ini KHUSUS
   menangani konten yang meluber melebihi lebar layar lalu terpotong.
   Sidebar sengaja TIDAK disembunyikan — di dalamnya seluruh navigasi
   (.nav-item), dan tanpa itu panel tidak bisa dipakai di HP.
   ===================================================================== */
/* Penjaga overflow BERLAKU DI SEMUA LEBAR — sengaja di luar media query.
   Sebelumnya hanya aktif di <=900px, jadi HP landscape (yang lebar CSS-nya
   di atas ambang itu) tetap bisa digeser ke samping: halaman menggeser dan
   teks tabel terpotong di sisi KIRI. Tabel lebar tetap aman karena
   .table-wrap punya scroll sendiri di dalam kotaknya. */
html, body { max-width: 100%; overflow-x: hidden; }
.app, .main, .content { min-width: 0; max-width: 100%; }
.card, .grid > * { min-width: 0; }

@media (max-width: 900px) {

  /* Penyebab tersering "kepotong": anak grid/flex defaultnya min-width:auto,
     jadi kolom menolak menyusut di bawah lebar isinya dan mendorong halaman. */
  .grid > *, .card, .field-row > *, .toolbar > * { min-width: 0; }

  /* Teks panjang (domain, URL, catatan admin) dipatahkan, bukan meluber. */
  .card { overflow-wrap: anywhere; }

  /* ---- TABEL: menyesuaikan lebar layar, bukan digeser ----
     Lebarnya dulu dikunci berlapis: min-width tabel 600px, lalu badge 64px /
     tombol 96px di dalam sel (tabel Kategori malah 126px/162px). Akibatnya
     kolom terakhir selalu terpotong di HP. Semua patokan itu dilepas di sini
     supaya kolom boleh menyusut dan teksnya membungkus.
     .table-wrap tetap bisa digeser sebagai jaring pengaman untuk tabel
     berkolom sangat banyak yang tetap tidak muat. */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 0 !important; width: 100% !important; table-layout: auto; }
  thead th, tbody td {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  tbody td .badge,
  .table-wrap:has([data-toggle-cat]) tbody td .badge,
  .rental-val .badge { min-width: 0 !important; white-space: normal !important; }
  tbody td .btn-sm,
  .table-wrap:has([data-toggle-cat]) tbody td .btn-sm,
  .rental-val .btn-sm { min-width: 0 !important; }
  /* Kolom aksi sering berisi 2-3 tombol — susun turun kalau sempit. */
  tbody td .row-actions, tbody td .table-actions { flex-wrap: wrap !important; gap: 4px !important; }

  /* Input & tombol jangan lebih lebar dari kartunya. */
  .field-input, .field-select, .field-textarea,
  input, select, textarea, .btn, button { max-width: 100%; box-sizing: border-box; }
  .w-full { width: 100% !important; }

  /* Gambar/preview ikut menyusut. */
  img, canvas, svg, video { max-width: 100%; height: auto; }

  /* Baris kode (IP server, nama domain) tidak memaksa halaman melebar. */
  code, pre { overflow-wrap: anywhere; white-space: pre-wrap; }

  /* ---- Halaman Sewa ---- kartu minmax(370px) baru melipat di 480px, jadi
     di antara 481-900px ia lebih lebar dari layar. Paksa satu kolom. */
  .rental-grid { grid-template-columns: 1fr !important; }
  .rental-grid > *, .rental-card { min-width: 0; }

  /* ---- Label yang dipotong ellipsis ----
     Dulu dikunci satu baris + text-overflow, jadi angka & nama panjang
     terpenggal ("Rp 89.847..."). Di layar sempit lebih baik membungkus. */
  .stat-cards .card-title, .stat-cards .card-value,
  .rental-name, .rental-label, .rental-label-stack .lbl,
  .rental-label-stack .cap, .izin-state {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .rental-val { min-width: 0; flex-wrap: wrap; }

  /* Topbar: judul panjang membungkus, bukan mendorong halaman. */
  .topbar { flex-wrap: wrap; }
  .topbar-title { white-space: normal; min-width: 0; }

  /* ---- GAYA INLINE di app.js ----
     Lebar tetap yang ditulis langsung di atribut style tidak bisa ditimpa
     media query biasa (inline selalu menang), jadi dilepas lewat pencocokan
     atribut. Ini yang menyisakan potongan di Broadcast, Tampilan, dan
     beberapa halaman lain meski CSS di atas sudah benar. */
  [style*="min-width:320px"],
  [style*="min-width:210px"],
  [style*="min-width:200px"],
  [style*="min-width:170px"] { min-width: 100% !important; }

  [style*="min-width:150px"],
  [style*="min-width:130px"],
  [style*="min-width:80px"] { min-width: 0 !important; }

  [style*="max-width:560px"],
  [style*="max-width:190px"],
  [style*="max-width:140px"] { max-width: 100% !important; }

  [style*="width:220px"] { max-width: 100% !important; height: auto !important; }
  [style*="width:110px"] { width: auto !important; max-width: 100% !important; }

  /* Grid inline: yang paling lebar (360px) melebihi layar HP — jadikan 1 kolom.
     Grid pilihan tema/menu (120-160px) dibiarkan, ukurannya sudah muat. */
  [style*="minmax(360px"] { grid-template-columns: 1fr !important; }
  [style*="minmax(160px,220px)"] { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important; }

  /* Semua flex container di halaman boleh melipat, jangan memaksa satu baris. */
  .card > div[style*="display:flex"], .card div[style*="gap:"] { flex-wrap: wrap; }
}

/* Layar sangat sempit — tabel dan padding dirapatkan lagi. */
@media (max-width: 600px) {
  thead th, tbody td { padding: 7px 5px; font-size: 11px; line-height: 1.35; }
  thead th { font-size: 10px; letter-spacing: 0; }
  tbody td .badge { font-size: 9.5px; padding: 2px 5px; }
  tbody td .btn-sm { font-size: 10.5px; padding: 4px 6px; }
  .content { padding-left: 10px; padding-right: 10px; }
  /* Kartu ringkasan angka (Total Omset dll) — 2 kolom, bukan berjejal 4. */
  .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
}

/* =====================================================================
   TAMPILAN KHUSUS HP — baris tabel jadi kartu bertumpuk
   ---------------------------------------------------------------------
   Sengaja BERBEDA dari tampilan web. Tabel 7-8 kolom (Kategori, Pengguna,
   Transaksi) mustahil terbaca di layar ~360px. Di sini tiap baris jadi
   satu kartu berisi pasangan "LABEL : nilai", label diambil otomatis dari
   <thead> oleh skrip di akhir app.js (atribut data-label).
   Ambang 700px: HP landscape (~800px) masih cukup lega untuk tabel biasa.
   ===================================================================== */
@media (max-width: 700px) {
  /* Wadah tidak perlu scroll lagi — tapi HANYA kalau tabel di dalamnya benar
     sudah jadi kartu. Tabel tanpa <thead> tidak dapat label, jadi wadahnya
     harus tetap bisa digeser supaya tidak meluber keluar layar. */
  .table-wrap:has(table.has-labels) {
    overflow-x: visible !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  /* width:auto, BUKAN 100%. Blok dengan width:auto mengisi induknya dan
     padding/border-nya dihitung otomatis — mustahil meluber. Dengan 100%,
     lebar dihitung dari induk lalu padding ditambahkan di atasnya pada
     sebagian kondisi, dan kartunya kelebihan ~26px ke kanan. */
  table.has-labels,
  table.has-labels tbody,
  table.has-labels tr,
  table.has-labels td {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  table.has-labels thead { display: none !important; }

  table.has-labels tr {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 10px;
    padding: 4px 12px;
    box-shadow: var(--shadow-1);
  }

  /* Label DI ATAS nilai, layout blok biasa — sengaja bukan flex.
     Dengan flex, isi sel (gambar + nama) jadi satu anonymous flex item yang
     default-nya min-width:auto: ia menolak menyusut di bawah lebar
     min-content dan meluber keluar layar, dan item itu tidak punya selector
     sehingga tidak bisa diperbaiki dari CSS. Layout blok tidak punya masalah
     itu — teks membungkus dengan sendirinya. */
  table.has-labels td {
    display: block !important;
    padding: 8px 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
    text-align: left !important;
    font-size: 13px;
    white-space: normal !important;
    overflow-wrap: anywhere;
    max-width: 100%;
  }
  table.has-labels tr td:last-child { border-bottom: none !important; }

  /* Beberapa sel memakai style inline white-space:nowrap — dipaksa membungkus. */
  table.has-labels td * { white-space: normal !important; max-width: 100%; }

  table.has-labels td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  /* Sel aksi — tombol memenuhi lebar, mudah ditekan jempol. */
  table.has-labels td .btn,
  table.has-labels td .btn-sm {
    min-width: 0 !important;
    margin: 3px 3px 0 0;
  }
  table.has-labels td[data-label="Aksi"] .btn-sm { min-width: 30% !important; }
  /* Daftar Reseller: Isi Kredit + Riwayat berdampingan 2 kolom, Hapus penuh di bawahnya */
  table.has-labels td[data-label="Tindakan"] .rsl-action-cell {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 2px;
  }
  table.has-labels td[data-label="Tindakan"] .rsl-action-cell .btn,
  table.has-labels td[data-label="Tindakan"] .rsl-action-cell .btn-sm {
    width: 100% !important;
    min-height: 44px;
    margin: 0 !important;
  }
  table.has-labels td[data-label="Tindakan"] .rsl-action-cell .btn-danger {
    grid-column: 1 / -1;
  }

  /* Gambar produk sejajar rapi di atas namanya. */
  table.has-labels td img { vertical-align: middle; margin-right: 8px; }

  /* Sel kosong tidak perlu memakan baris. */
  table.has-labels td:empty { display: none !important; }
  /* Baris "belum ada data" (satu sel colspan) tetap tampil polos di tengah. */
  table.has-labels td[colspan] { text-align: center !important; color: var(--text-muted); }
  table.has-labels td[colspan]::before { display: none !important; }
}

/* ===== DIALOG SENDIRI (bubble di TENGAH) — pengganti confirm/prompt/alert ===== */
.ui-dlg-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(4, 8, 18, 0.62);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: overlay-in .15s ease-out;
}
.ui-dlg {
  width: 100%; max-width: 380px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border-strong); border-radius: 16px;
  padding: 20px; box-shadow: var(--shadow-2);
  animation: modal-in .18s ease-out;
}
.ui-dlg-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.ui-dlg-body { font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.ui-dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
/* Di HP: tombol susun penuh, gampang dijangkau jempol (selaras modal lain) */
@media (max-width: 700px) {
  .ui-dlg-actions { flex-direction: column-reverse; }
  .ui-dlg-actions .btn { width: 100%; min-height: 42px; }
}

/* =====================================================================
   NAVIGASI HP ala SELLER CENTER — 4 tab bawah + grid "Semua Menu"
   Menggantikan sidebar-jadi-bar-horizontal yang harus digeser.
   ===================================================================== */
.mtab, .msheet { display: none; }

@media (max-width: 900px) {
  /* Sidebar lama disembunyikan — SELURUH menunya tetap terjangkau lewat
     tombol Menu di tab bar (grid dibangun dari sidebar ini), jadi tidak ada
     navigasi yang hilang. */
  .sidebar { display: none !important; }

  .mtab {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 120;
    background: rgba(var(--bg-rgb), .96);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--border-strong);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -6px 20px rgba(3, 8, 20, .4);
  }
  .mtab-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 8px 4px; min-height: 56px;
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 10.5px; font-weight: 600;
  }
  .mtab-ic { font-size: 19px; line-height: 1; }
  .mtab-item.active { color: var(--accent); }

  /* Ruang bawah supaya isi halaman tidak tertutup tab bar — 88px beri jarak
     aman di atas tinggi .mtab (~72px) supaya data/tombol terakhir tidak mepet. */
  .content { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important; }
  /* Tombol simpan sticky (Template QRIS, Tampilan) — jarak dari nav bawah
     berlaku di SELURUH rentang <=900px, bukan cuma <=430, karena .mtab tampil
     mulai <=900px. */
  .qt-sticky-actions, .thm-sticky-save { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

  /* ── Grid "Semua Menu" ── */
  .msheet {
    display: block; position: fixed; inset: 0; z-index: 119;
    background: var(--bg); overflow-y: auto;
    padding: 16px 12px calc(80px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%); opacity: 0; pointer-events: none;
    transition: transform .22s cubic-bezier(.2,.8,.3,1), opacity .18s;
  }
  .msheet.open { transform: none; opacity: 1; pointer-events: auto; }
  .msheet-head { font-family: var(--font-display); font-size: 17px; font-weight: 700; margin: 4px 4px 16px; }
  .msheet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .msheet-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 7px; padding: 14px 4px; min-height: 84px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    color: var(--text-muted); font-size: 10.5px; font-weight: 600; line-height: 1.25;
    text-align: center; cursor: pointer; transition: transform .12s, border-color .12s;
  }
  .msheet-item:active { transform: scale(.95); border-color: var(--accent); }
  .msheet-ic { font-size: 24px; line-height: 1; }
}

/* ===================== TEMPLATE QRIS — editor modern ===================== */
.qt-banner {
  display: flex; align-items: center; gap: 10px;
  background: var(--info-soft); border: 1px solid var(--info); color: var(--info);
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 18px; font-weight: 600; font-size: 13.5px;
}
.qt-layout { display: grid; grid-template-columns: 65% 35%; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .qt-layout { grid-template-columns: 1fr; } }

.qt-preview-card { padding: 20px; }
.qt-preview-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.qt-preview-title { font-weight: 700; font-size: 14.5px; display: flex; align-items: center; gap: 8px; }
.qt-zoom-bar { display: flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px; }
.qt-zoom-btn {
  border: none; background: transparent; color: var(--text-muted); font-size: 12px; font-weight: 600;
  padding: 6px 12px; border-radius: 999px; cursor: pointer; transition: all .2s ease;
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-body);
}
.qt-zoom-btn:hover { color: var(--text); }
.qt-zoom-btn.active { background: linear-gradient(180deg, var(--accent-strong), var(--accent)); color: #221a02; }

.qt-canvas {
  position: relative; overflow: auto; background: var(--surface-2);
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  min-height: 420px; max-height: 70vh; max-height: 70dvh;
}
.qt-canvas-img { display: block; max-width: 100%; user-select: none; }
.qt-grid-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 24px 24px;
}
.qt-guide { position: absolute; background: var(--accent); opacity: 0; transition: opacity .12s ease; pointer-events: none; z-index: 3; }
.qt-guide-v { top: 0; bottom: 0; width: 1px; left: 50%; }
.qt-guide-h { left: 0; right: 0; height: 1px; top: 50%; }
.qt-guide.show { opacity: .55; }

.qt-box {
  position: absolute; border: 2px dashed #fff; box-sizing: border-box; cursor: move;
  mix-blend-mode: difference;
  background-image:
    linear-gradient(to top right, transparent calc(50% - 1.5px), #fff calc(50% - 1.5px), #fff calc(50% + 1.5px), transparent calc(50% + 1.5px)),
    linear-gradient(to top left, transparent calc(50% - 1.5px), #fff calc(50% - 1.5px), #fff calc(50% + 1.5px), transparent calc(50% + 1.5px));
}
.qt-handle {
  position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px;
  background: var(--accent); border-radius: 50%; cursor: nwse-resize; border: 2px solid #fff; mix-blend-mode: normal;
  box-shadow: 0 0 0 4px rgba(255,194,14,.18);
}

.qt-empty { padding: 70px 20px; text-align: center; color: var(--text-faint); }
.qt-empty i { font-size: 34px; margin-bottom: 12px; opacity: .6; display: block; }
.qt-empty p { font-size: 13.5px; line-height: 1.7; margin: 0; }

.qt-sidebar { display: flex; flex-direction: column; gap: 16px; }
.qt-card { padding: 18px 20px; }
.qt-chip {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; color: var(--text-muted);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px;
}
.qt-quickbtns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.qt-quickbtns .btn { flex: 1; min-width: 100px; }
.qt-color-swatch { width: 40px; height: 38px; padding: 2px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; }

.qt-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 8px; padding: 26px 16px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface-2); cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.qt-dropzone:hover { border-color: var(--accent); background: var(--accent-soft); }
.qt-dropzone.qt-drag-over { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.01); }
.qt-dropzone i { font-size: 22px; color: var(--text-muted); }
.qt-dropzone-text { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }
.qt-dropzone-text span { color: var(--text-faint); font-size: 11.5px; }
.qt-bg-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 8px; flex-wrap: wrap; }

.qt-sticky-actions { position: sticky; bottom: 16px; z-index: 5; }
.qt-actions-card { box-shadow: var(--shadow-2); }

@media (max-width: 720px) {
  .qt-layout { gap: 14px; }
  .qt-preview-card, .qt-card { padding: 14px 16px; }
  .qt-quickbtns .btn { min-width: 0; }
}

/* Peringkat Top Sultan — angka bergaya, pengganti emoji medali */
/* ===== Top Sultan: filter periode & tabel peringkat ===== */
.topsultan-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.topsultan-tabs .btn { min-height: 40px; }
@media (max-width: 900px) {
  .topsultan-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .topsultan-tabs .btn { min-height: 44px; padding: 8px 6px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 340px) {
  .topsultan-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ===== Transaksi: search + filter grid ===== */
.trx-search { width: 100%; min-height: 48px; font-size: 16px; margin-bottom: 12px; }
.trx-filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.trx-filter-grid .field-select, .trx-filter-grid .field-input { width: 100%; min-height: 46px; }
.trx-filter-full { grid-column: 1 / -1; }
@media (max-width: 389px) {
  .trx-filter-grid { grid-template-columns: 1fr; }
}
.trx-source-note { font-size: 13px; }
/* Klem 3-baris nama produk HANYA di tampilan kartu mobile (has-labels) — di
   tabel desktop, sel tetap display:table-cell (pakai .trx-cell ellipsis 1-baris
   yang sudah ada) supaya border antar-baris tetap lurus, tidak dipotong pendek
   oleh display:-webkit-box. */
@media (max-width: 700px) {
  table.has-labels td.trx-prod {
    display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden !important; overflow-wrap: anywhere; white-space: normal !important; line-height: 1.45;
  }
}
@media (max-width: 900px) {
  .trx-search { min-height: 48px; }
}

/* ===== Produk & Stok: search/filter/tombol =====
   Satu baris di layar lebar (pencarian + 4 filter + 2 tombol). Pakai flex-wrap, BUKAN
   grid kolom tetap, supaya di layar sempit ia melipat sendiri secara bertahap tanpa
   perlu breakpoint bertingkat. Sebelumnya dipecah jadi 3 baris (search / 2x2 filter /
   2 tombol) sehingga menumpuk tinggi padahal ruang mendatar masih lega. */
.prod-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.prod-toolbar .prod-search { flex: 2 1 240px; min-width: 200px; min-height: 46px; font-size: 15px; margin-bottom: 0; }
.prod-toolbar .field-select { flex: 1 1 150px; min-width: 140px; width: auto; min-height: 46px; }
.prod-toolbar .btn { flex: 0 0 auto; min-height: 46px; white-space: nowrap; }

/* Layar sedang: tombol didorong penuh ke baris bawah supaya tidak terpotong tanggung. */
@media (max-width: 1100px) {
  .prod-toolbar .btn { flex: 1 1 160px; }
}
/* HP: semuanya satu per baris, tetap nyaman disentuh (tinggi 46px). */
@media (max-width: 560px) {
  .prod-toolbar { gap: 8px; }
  .prod-toolbar .prod-search,
  .prod-toolbar .field-select,
  .prod-toolbar .btn { flex: 1 1 100%; min-width: 0; width: 100%; }
  .prod-toolbar .prod-search { font-size: 16px; }
}

/* Toolbar format pesan (B/I/{}) — SELALU sebaris, tidak ikut aturan .field-row
   yang di HP jadi kolom (itu untuk pasangan input form, bukan toolbar tombol). */
.fmt-toolbar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.fmt-toolbar .btn-sm { min-width: 44px; }

/* Kategori (desktop): lebar tombol tetap per kolom, supaya "Ubah / Aktifkan
   Semua Produk / Hapus" sejajar lurus antar-baris meski teksnya beda panjang
   ("Aktifkan" vs "Nonaktifkan Semua Produk"). */
.cat-btn-ubah, .cat-btn-hapus { width: 88px; margin-right: 8px; white-space: nowrap; }
.cat-btn-toggle { width: 200px; margin-right: 8px; white-space: nowrap; }
@media (max-width: 900px) {
  .cat-btn-ubah, .cat-btn-toggle, .cat-btn-hapus { width: auto; margin-right: 0; }
}

/* Tabel Transaksi Baru — kolom terakhir (Tanggal) dapat sedikit padding kanan
   ekstra, diterapkan simetris ke header DAN isi, supaya tidak mepet ke tepi tabel. */
.newtrans-table th:last-child, .newtrans-table td:last-child { padding-right: 24px; }

/* ===== Gateway Pembayaran ===== */
.gw-qris-card { margin-bottom: 16px; height: auto; }
/* Isi #qrisModeGrid = DUA baris (.qris-gw-row): baris gateway biasa, lalu baris
   VA/Retail. Keduanya harus BERTUMPUK ke bawah. Sebelumnya wadah ini flex-wrap
   dengan flex-basis, jadi kedua baris malah berjajar ke samping dan di HP baris
   kedua terpotong keluar layar. Perataan antar-kartu diurus oleh grid tiap baris
   itu sendiri, bukan di sini. */
.gw-qris-grid { display: flex; flex-direction: column; gap: 12px; }
.gw-qris-grid > * { min-width: 0; }
.qris-gw-row > * { min-width: 0; }
@media (max-width: 700px) {
  /* Lebar kolom di HTML ditulis inline, jadi butuh !important untuk ditimpa. */
  .qris-gw-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .qris-gw-row-groups { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 380px) {
  .qris-gw-row { grid-template-columns: minmax(0, 1fr) !important; }
}
/* stretch (bukan start) supaya semua kartu setinggi kartu tertinggi di barisnya —
   isi tiap gateway beda panjang, kalau dibiarkan grid-nya jadi bergerigi. */
.gw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 1180px) { .gw-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .gw-grid { grid-template-columns: 1fr; } }
.gw-card { height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; }
.gw-card .desc { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin: 4px 0 0; }
.gw-input-row { display: flex; gap: 6px; }
.gw-input-row .field-input { flex: 1; min-width: 0; }
.gw-input-row .btn-sm { flex-shrink: 0; min-width: 44px; }
.gw-save-btn { margin-top: 12px; align-self: flex-start; }
/* Ditulis setelah .gw-save-btn supaya menang tanpa !important. */
.gw-card .gw-save-btn { margin-top: auto; }
.gw-copy-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; margin: 2px 0 12px; }
.gw-copy-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--border); }
.gw-copy-row:last-child { border-bottom: none; }
.gw-copy-row > div { min-width: 0; }
.gw-copy-label { display: block; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.gw-copy-val { display: block; font-family: var(--font-mono); font-size: 12.5px; color: var(--text); overflow-wrap: anywhere; word-break: break-word; }
.gw-copy-row .btn-sm { flex-shrink: 0; min-width: 38px; }
@media (max-width: 760px) {
  .gw-save-btn { align-self: stretch; width: 100%; min-height: 44px; }
  .gw-input-row .btn-sm { min-height: 44px; min-width: 44px; }
  .gw-copy-row .btn-sm { min-height: 40px; min-width: 44px; }
  .gw-card { padding: 16px; }
}

/* ===== Compact mobile card — pengganti pola "table.has-labels" yang terlalu
   tinggi (satu field = satu baris + garis pembatas). Dipakai lewat markup
   KHUSUS mobile yang di-generate berdampingan dengan <table> desktop, ditukar
   tampil/sembunyi via media query (bukan duplikasi via CSS transform tabel). ===== */
.cpt-list { display: none; }
@media (max-width: 700px) {
  .table-wrap:has(+ .cpt-list), .table-wrap.cpt-has-mobile { display: none; }
  .cpt-list { display: flex; flex-direction: column; gap: 10px; }
}
.cpt-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cpt-head { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.cpt-thumb { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; border: 1px solid var(--border); background: var(--surface-2); flex-shrink: 0; }
.cpt-thumb-ph { width: 48px; height: 48px; border-radius: 10px; border: 1px dashed var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: 18px; flex-shrink: 0; background: var(--surface-2); }
.cpt-title-wrap { flex: 1; min-width: 0; }
.cpt-title { font-size: 14px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cpt-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; overflow-wrap: anywhere; }
.cpt-badge-slot { flex-shrink: 0; }
.cpt-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 10px; }
.cpt-kv-item { min-width: 0; display: flex; align-items: baseline; gap: 5px; font-size: 13px; overflow-wrap: anywhere; }
.cpt-kv-item .cpt-kv-label { color: var(--text-faint); font-size: 11px; flex-shrink: 0; }
.cpt-kv-item .cpt-kv-val { font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; min-width: 0; }
.cpt-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cpt-actions .btn, .cpt-actions .btn-sm { min-height: 44px; width: 100%; }
.cpt-actions-3 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cpt-actions-3 > :last-child { grid-column: 1 / -1; }
.cpt-actions-3 .btn, .cpt-actions-3 .btn-sm { min-height: 44px; width: 100%; }
@media (max-width: 900px) {
  /* Pasangan input pendek (Posisi X/Y, Lebar/Tinggi) tetap 2 kolom di HP —
     beda dari .field-row biasa yang sengaja jadi 1 kolom untuk field panjang. */
  .field-row.field-row-2col { flex-direction: row; gap: 10px; }
  .field-row.field-row-2col .field { flex: 1; min-width: 0; }
  .qt-quickbtns.cpt-actions-3 { flex-direction: unset; }
}
.cpt-detail { border-top: 1px solid var(--border); margin-top: 2px; padding-top: 8px; }
.cpt-detail summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-muted); list-style: none; display: flex; align-items: center; gap: 6px; min-height: 28px; }
.cpt-detail summary::-webkit-details-marker { display: none; }
.cpt-detail summary::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 10px; margin-left: auto; transition: transform .2s ease; }
.cpt-detail[open] summary::after { transform: rotate(180deg); }
.cpt-detail-body { padding-top: 8px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text-muted); }
.cpt-detail-body .cpt-kv-item { font-size: 12.5px; }

.rank-medal, .rank-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted);
}
.rank-1 { background: rgba(245,197,66,.16); color: #f5c542; border-color: rgba(245,197,66,.45); }
.rank-2 { background: rgba(203,213,225,.14); color: #cbd5e1; border-color: rgba(203,213,225,.38); }
.rank-3 { background: rgba(205,127,50,.16);  color: #d08a4a; border-color: rgba(205,127,50,.42); }

/* Format Akun di tabel Produk & Stok — dibatasi lebarnya, sebagian isian
   ("Disney+ Token (Profile|NoLogin|LinkOTP|Email|Token)") jauh lebih panjang
   dari yang lain ("Email | Pass") dan memaksa kolomnya melebar tanpa perlu.
   Teks lengkapnya tetap ada lewat title="" (muncul saat hover). */
.prod-fmt { max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }

/* Sel tabel isian bebas (nama produk transaksi, deskripsi kategori, dst) yang
   kadang jauh lebih panjang dari isi baris lain dan memaksa kolom Aksi
   terdorong keluar layar. Dibatasi, minimal 1-2 kata awal tetap kelihatan;
   teks lengkapnya ada di title="" (muncul saat hover / tekan-tahan di HP). */
.trx-cell { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
@media (max-width: 480px) { .trx-cell { max-width: 140px; } }

/* ===================== LAPORAN & ANALITIK ===================== */
.an-page { display: flex; flex-direction: column; gap: 28px; }
/* Wadah ini diisi ulang lewat innerHTML tiap ganti periode/refresh — jadi butuh
   gap sendiri, terpisah dari .an-page, supaya grid statistik, grafik, dan
   tabel di dalamnya tidak menempel satu sama lain. */
#analyticsWrap { display: flex; flex-direction: column; gap: 28px; }
.content:has(.an-page) { padding-top: 14px; }

/* Kepala halaman */
.an-head { display: flex; flex-direction: column; gap: 6px; }
.an-crumb { font-size: 12px; color: var(--text-faint); font-weight: 600; }
.an-crumb span { margin: 0 5px; opacity: .55; }
.an-h1 { font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 32px); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; margin: 0; }
.an-lead { font-size: 15px; color: var(--text-muted); line-height: 1.6; margin: 0; max-width: 680px; }

/* Filter periode */
.an-filter {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0)), var(--surface);
  border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; box-shadow: var(--shadow-1);
}
.an-filter-field { display: flex; flex-direction: column; gap: 7px; min-width: 220px; }
.an-filter-label { font-size: 12px; font-weight: 700; color: var(--text-muted); letter-spacing: .04em; text-transform: uppercase; }
.an-filter .field-select { min-height: 42px; }

/* Kartu ringkasan — tinggi seragam.
   Jumlah kolom ditentukan oleh lebar yang benar-benar cukup untuk menampilkan
   nominal penuh satu baris: 6 sebaris hanya dari 1700px ke atas (di bawah itu
   kartu jadi ~127px dan angka 9 digit harus mengecil sampai 16px agar muat). */
.an-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (min-width: 1200px) { .an-stats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1700px) { .an-stats { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 700px)  { .an-stats { grid-template-columns: 1fr; gap: 14px; } }
.an-stat {
  display: flex; flex-direction: column; min-height: 186px;
  background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0)), var(--surface);
  border: 1px solid var(--border); border-radius: 16px; padding: 24px; box-shadow: var(--shadow-1);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  container-type: inline-size;   /* dasar penentuan format ringkas di bawah */
}
.an-stat:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-2); }
/* Baris judul — tinggi tetap supaya judul 1 baris & 2 baris tetap sejajar antar-kartu */
.an-stat-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; min-height: 38px; }
.an-ic { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.an-stat-label { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.3; }

/* Nominal — selalu satu baris, tidak pernah dipotong ke baris berikutnya.
   Ukuran font disetel per jumlah kolom, dihitung dari lebar kartu sebenarnya
   supaya angka 9 digit selalu utuh tanpa terpotong. */
.an-stat-value {
  display: flex; align-items: baseline; gap: 6px;
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.15; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; min-width: 0; min-height: 46px;
}
@media (min-width: 1200px) { .an-stat-value { font-size: clamp(24px, 2.1vw, 36px); } }
@media (min-width: 1700px) { .an-stat-value { font-size: clamp(20px, 1.25vw, 30px); } }
@media (max-width: 700px)  { .an-stat-value { font-size: clamp(26px, 7vw, 34px); } }
.an-cur { font-size: .52em; font-weight: 600; opacity: .72; flex-shrink: 0; letter-spacing: 0; }
.an-amt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-amt-short { display: none; }

/* Pengaman terakhir: kalau kartunya benar-benar sempit (mis. angka belasan digit),
   tukar ke format ringkas "Rp 221,1 jt" — bukan memotong angka. Memakai lebar
   kartu, bukan lebar layar, jadi selalu tepat berapa pun jumlah kolomnya.
   Browser tanpa dukungan container query tetap aman: angka penuh + ellipsis. */
@container (max-width: 228px) {
  .an-amt-full  { display: none; }
  .an-amt-short { display: inline; }
}

/* Deskripsi tinggi tetap 2 baris — tidak menggeser posisi nominal antar-kartu */
.an-stat-desc { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-top: 8px; min-height: 36px; }
.an-stat-foot { margin-top: auto; padding-top: 10px; font-size: 11.5px; color: var(--text-faint); min-height: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.an-tone-green  .an-ic { background: rgba(34,197,94,.14);  color: #22c55e; }
.an-tone-green  .an-stat-value { color: #22c55e; }
.an-tone-gold   .an-ic { background: rgba(245,197,66,.14); color: #f5c542; }
.an-tone-gold   .an-stat-value { color: #f5c542; }
.an-tone-purple .an-ic { background: rgba(167,139,250,.14); color: #a78bfa; }
.an-tone-purple .an-stat-value { color: #a78bfa; }
.an-tone-blue   .an-ic { background: rgba(59,130,246,.14); color: #3b82f6; }
.an-tone-blue   .an-stat-value { color: #6ea8fb; }
.an-tone-plain  .an-ic { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); }

/* Panel grafik & tabel */
.an-panel { padding: 24px; border-radius: 16px; }
.an-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.an-panel-title { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 9px; }
.an-panel-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }
.an-panel-note { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; }
.an-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; }

.an-chart-main { position: relative; height: 300px; }
.an-chart-sm { position: relative; height: 170px; margin-top: 14px; }
.an-chart-topprod { position: relative; height: 260px; margin-top: 14px; }
.an-chart-donut { position: relative; height: 270px; margin: 14px auto 0; max-width: 620px; }
.an-chart-catbar { position: relative; height: 340px; margin-top: 14px; }

/* Tombol legend — bisa sembunyikan/tampilkan garis */
.an-legend { display: flex; gap: 6px; flex-wrap: wrap; }
.an-leg {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted);
  font-size: 12px; font-weight: 600; padding: 7px 13px; border-radius: 999px; cursor: pointer;
  font-family: var(--font-body); white-space: nowrap; transition: all .2s ease;
}
.an-leg:hover { color: var(--text); border-color: var(--border-strong); }
.an-leg.active { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
.an-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.an-dot-all { background: linear-gradient(135deg, #f5c542 33%, #22c55e 33% 66%, #a78bfa 66%); }

/* Tabel harian */
.an-table { max-height: 380px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.an-table table { width: 100%; }
.an-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); font-size: 11.5px; white-space: nowrap; }
.an-table tbody tr { transition: background .2s ease; }
.an-table tbody tr:nth-child(even) { background: rgba(var(--surface-2-rgb), .3); }
.an-table tbody tr:hover { background: rgba(var(--surface-2-rgb), .72); }
.an-row-today { background: rgba(34,197,94,.07) !important; }
.an-row-today .an-tgl-rel { color: #22c55e; }
.ta-l { text-align: left; }
.ta-r { text-align: right; }
.ta-c { text-align: center; }
.an-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.an-tgl { white-space: nowrap; }
.an-tgl-rel { display: block; font-weight: 600; font-size: 13px; }
.an-tgl-abs { display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); margin-top: 2px; }
.an-kosong { color: var(--text-faint); font-weight: 400; }

/* Warna kolom sesuai skema */
.an-c-gold   { color: #f5c542; }
.an-c-green  { color: #22c55e; }
.an-c-purple { color: #a78bfa; }
.an-c-blue   { color: #6ea8fb; }
.an-c-cyan   { color: #22d3ee; }
.an-c-plain  { color: var(--text); }

/* Baris total — <tfoot> di tabel yang sama, jadi lebar kolomnya otomatis
   pas dengan header di atasnya (bukan grid terpisah yang gampang meleset). */
/* Menempel di bawah area scroll tabel — supaya total selalu kelihatan tanpa
   perlu digeser dulu ke paling bawah, sama seperti header yang menempel di atas. */
.an-total-row td {
  position: sticky; bottom: 0; z-index: 2; font-size: 14px;
  border-top: 2px solid var(--border-strong); border-bottom: none; background: var(--surface-2); font-weight: 700;
}
.an-total-label { color: var(--text-muted); font-weight: 700; text-transform: uppercase; font-size: 11.5px; letter-spacing: .05em; }

.an-sk-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 24px; min-height: 186px; }

/* Tablet */
@media (max-width: 1024px) {
  .an-panel, .an-filter { padding: 18px; }
  .an-stat { padding: 18px; min-height: 170px; }
}

/* HP */
@media (max-width: 700px) {
  .an-page { gap: 16px; }
  .an-stat { min-height: 0; padding: 16px; }
  .an-panel, .an-filter { padding: 16px; }
  .an-filter { align-items: stretch; }
  .an-filter-field { min-width: 0; }
  .an-filter .btn { width: 100%; }
  .an-h1 { font-size: 26px; }
  .an-lead { font-size: 14px; }
  .an-chart-main { height: 290px; }
  .an-grid-2 { grid-template-columns: 1fr; gap: 14px; }
  .an-panel-head { flex-direction: column; align-items: stretch; }
  /* Legend digeser ke samping, tidak membungkus jadi banyak baris */
  .an-legend { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .an-legend::-webkit-scrollbar { display: none; }
  .an-leg { flex-shrink: 0; min-height: 38px; }
  /* Tabel jadi daftar kartu — label dipisah dari nominal, tanpa geser ke samping */
  .an-table { max-height: none; overflow: visible; border: none; }
  .an-table table { min-width: 0; }
  .an-table thead th { position: static; }
  .an-table .ta-r, .an-table .ta-c, .an-table .ta-l { text-align: right !important; }
  .an-table td .an-tgl-rel, .an-table td .an-tgl-abs { display: inline-block; }
  .an-table td .an-tgl-abs { margin: 0 0 0 7px; }
}

/* ===================== TAMPILAN — pemilih tema premium ===================== */
.thm-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 14px 0 4px; }
.thm-search { position: relative; flex: 1; min-width: 190px; }
.thm-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-faint); font-size: 12.5px; pointer-events: none; }
.thm-search .field-input { padding-left: 34px; }
.thm-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.thm-filter {
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted);
  font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  font-family: var(--font-body); transition: all .2s ease;
}
.thm-filter:hover { color: var(--text); border-color: var(--border-strong); }
.thm-filter.active { background: linear-gradient(180deg, var(--accent-strong), var(--accent)); border-color: var(--accent); color: #221a02; }

/* Pola grid aman — minmax(min(100%,Npx),1fr) supaya kartu tidak pernah lebih
   lebar dari viewport bahkan di layar yang lebih sempit dari nilai minimum. */
.thm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 14px; }
.thm-grid-lg { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
#webThemeGrid.thm-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 125px), 1fr)); }
/* Layar sangat lebar — batasi supaya kartu tidak beranak-pinak berlebihan */
@media (min-width: 1700px) {
  .thm-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .thm-grid-lg { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  #webThemeGrid.thm-grid { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); }
}

/* Header ringkas halaman Tampilan */
.app-head { margin-bottom: 16px; }
.app-lead { font-size: 14px; color: var(--text-muted); margin: 0; line-height: 1.6; }

/* Badge kecil "KHUSUS PEMILIK PREMIUM" — tidak boleh terlalu besar */
.thm-badge-small {
  font-size: 9.5px; color: var(--accent); border: 1px solid var(--accent);
  border-radius: 6px; padding: 1px 6px; margin-left: 4px; font-weight: 700; letter-spacing: .02em;
  white-space: nowrap; display: inline-block; vertical-align: middle;
}

/* Tombol Menu Utama (65%) + Warna Tombol (35%) — tinggi masing-masing ikut isi,
   tidak dipaksa sama (align-items:start), keduanya mulai di baris atas yang sama. */
.thm-menu-color-grid { grid-template-columns: 65% 1fr; align-items: start; gap: 14px; }
@media (max-width: 1100px) { .thm-menu-color-grid { grid-template-columns: 1fr; } }

/* Kartu satu baris menu (checklist + tombol panah) */
.mnu-row-card { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; }
.mnu-arrow-btn {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); color: var(--text);
  cursor: pointer; font-size: 11px; transition: border-color .2s ease, background .2s ease;
}
.mnu-arrow-btn:disabled { opacity: .35; cursor: not-allowed; }
@media (hover: hover) { .mnu-arrow-btn:not(:disabled):hover { border-color: var(--accent); background: var(--accent-soft); } }
@media (max-width: 767px) { .mnu-arrow-btn { width: 44px; height: 44px; font-size: 13px; } }
.thm-hidden { display: none !important; }
.thm-noresult { grid-column: 1 / -1; text-align: center; padding: 26px; color: var(--text-faint); font-size: 13px; }
.thm-noresult i { margin-right: 7px; opacity: .6; }

/* Kartu tema — dasar dipakai bersama, .web-theme-card lama tetap berlaku untuk klik/aktif */
.thm-card {
  padding: 14px; border-radius: 14px; text-align: left; min-width: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)), var(--surface);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
/* overflow:hidden sengaja TIDAK dipakai di sini — supaya focus ring keyboard
   dan badge (Premium/gembok) tidak terpotong di tepi kartu. */
@media (hover: hover) {
  .thm-card:not(.disabled):hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--accent); }
}
.thm-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.thm-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset, 0 0 18px rgba(255,194,14,.18);
}
.thm-swatch { height: 56px; border-radius: 10px; margin-bottom: 11px; border: 1px solid rgba(255,255,255,.06); }
/* Tema warna: pratinjau menempati porsi terbesar kartu */
.thm-card-color .thm-swatch { height: 92px; }
.thm-swatch-sym { display: flex; align-items: center; justify-content: center; font-size: 22px; }
.thm-name {
  font-weight: 700; font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Deskripsi maksimal 3 baris — kartu tidak melar mengikuti teks panjang */
.thm-desc {
  font-size: 11.5px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.thm-hint { font-size: 11px; color: var(--text-faint); margin-top: 6px; }
.thm-active { font-size: 11.5px; color: var(--accent); margin-top: 6px; font-weight: 700; display: flex; align-items: center; gap: 5px; }
.thm-excl { font-size: 10.5px; color: #ff8a1e; margin-top: 5px; font-weight: 700; }
.thm-lock { position: absolute; top: 8px; right: 10px; font-size: 12px; color: #ff8a1e; z-index: 2; }
.thm-premium {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  background: linear-gradient(135deg, #4338ca, #9333ea); color: #fff;
  font-size: 9.5px; font-weight: 800; letter-spacing: .03em;
  padding: 3px 8px; border-radius: 999px; box-shadow: 0 2px 8px rgba(67,56,202,.4);
}

/* Pratinjau tombol Telegram — muncul saat hover kartu tema bot */
.thm-tgpreview {
  display: flex; gap: 4px; flex-wrap: wrap; margin-top: 10px;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .2s ease, opacity .2s ease, margin-top .2s ease;
}
.thm-card-bot:hover .thm-tgpreview, .thm-card-bot.active .thm-tgpreview { max-height: 70px; opacity: 1; }
.thm-tgpreview span {
  background: #2b5278; color: #e7f0f8; border-radius: 7px;
  font-size: 10px; font-weight: 600; padding: 5px 8px; white-space: nowrap;
  flex: 1; text-align: center; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}

/* Pratinjau mini situs untuk layout web store */
.thm-mini {
  height: 100px; border-radius: 10px; margin-bottom: 11px; padding: 7px;
  background: var(--mini-grad); display: flex; flex-direction: column; gap: 6px;
  border: 1px solid rgba(255,255,255,.08); overflow: hidden;
}
.thm-mini-bar { display: flex; gap: 3px; align-items: center; }
.thm-mini-bar i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.55); }
.thm-mini-bar i:first-child { width: 18px; border-radius: 3px; }
.thm-mini-hero { height: 26px; border-radius: 5px; background: rgba(255,255,255,.22); }
.thm-mini-row { display: flex; gap: 5px; flex: 1; }
.thm-mini-row span { flex: 1; border-radius: 5px; background: rgba(255,255,255,.16); }

/* Tombol simpan menu — melekat di bawah bagiannya */
.thm-sticky-save { position: sticky; bottom: 12px; margin-top: 12px; z-index: 4; }
.thm-sticky-save .btn { box-shadow: var(--shadow-2); }

@media (max-width: 430px) {
  .thm-toolbar { gap: 9px; }
  .thm-filters { width: 100%; }
  .thm-filter { flex: 1; min-height: 38px; font-size: 13px; padding: 8px 10px; }
  .thm-grid, .thm-grid-lg { grid-template-columns: 1fr 1fr; gap: 10px; }
  .thm-card { padding: 11px; }
  .thm-card-color .thm-swatch { height: 74px; }
  .thm-name { font-size: 13px; }
  .thm-desc { font-size: 12px; }
}
@media (max-width: 365px) {
  .thm-grid, .thm-grid-lg { grid-template-columns: 1fr; }
}

/* ===================== DASHBOARD — kartu statistik modern ===================== */
.dash-page { display: flex; flex-direction: column; gap: 22px; }
/* Rapatkan jarak atas — judul halaman sudah ada di dalam konten */
.content:has(.dash-page) { padding-top: 24px; }
.dash-page { scroll-margin-top: 80px; }

/* Banner masa aktif sewa */
.dash-banner {
  display: flex; align-items: flex-start; gap: 11px;
  border-radius: 16px; padding: 14px 17px; margin-bottom: 18px;
  font-size: 14px; font-weight: 600; line-height: 1.6; border: 1px solid transparent;
}
.dash-banner i { font-size: 15px; margin-top: 2px; flex-shrink: 0; }
.dash-banner-danger { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.dash-banner-warn   { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.dash-banner-info   { background: var(--info-soft);   border-color: var(--info);   color: var(--info); }

/* Kepala halaman: breadcrumb + judul + deskripsi */
.dash-head { display: flex; flex-direction: column; gap: 6px; }
.dash-crumb { font-size: 12px; color: var(--text-faint); font-weight: 600; letter-spacing: .01em; }
.dash-crumb span { margin: 0 5px; opacity: .55; }
.dash-h1 {
  font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 32px); font-weight: 700;
  letter-spacing: -.01em; line-height: 1.2; margin: 0;
}
.dash-lead { font-size: 15px; color: var(--text-muted); line-height: 1.6; margin: 0; max-width: 640px; }
.dash-h2 { font-family: var(--font-display); font-size: 17px; font-weight: 700; margin: 0; letter-spacing: .01em; }
.dash-sub { font-size: 13.5px; color: var(--text-muted); margin: 4px 0 0; line-height: 1.55; }
.dash-section { display: flex; flex-direction: column; gap: 14px; }
.dash-section-head { display: flex; flex-direction: column; }

/* Hero — Total Penjualan */
.dash-hero {
  display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: stretch;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(255,194,14,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)), var(--surface);
  border: 1px solid var(--border); border-radius: 16px; padding: 24px 26px; box-shadow: var(--shadow-1);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.dash-hero:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); }
@media (max-width: 860px) { .dash-hero { grid-template-columns: 1fr; padding: 18px; } }
.dash-hero-main { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.dash-hero-label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.dash-hero-value {
  font-family: var(--font-mono); font-size: clamp(28px, 4.2vw, 44px); font-weight: 600;
  letter-spacing: -.02em; margin: 10px 0 14px; font-variant-numeric: tabular-nums; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-hero-sub { display: flex; flex-wrap: wrap; gap: 8px; }
.dash-hero-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; color: var(--text-muted);
}
/* Alamat toko web di Dashboard — sengaja dibuat baris sendiri (bukan chip biasa) karena
   URL bisa panjang dan perlu ruang untuk tombol Salin & Buka. Aksen kuning dipakai supaya
   langsung ketemu mata saat owner buru-buru mencari link untuk dibagikan ke pembeli.
   Ditampilkan di panel web DAN di kartu Dashboard bot Telegram — dua tempat itu dipakai
   di situasi berbeda (panel saat mengelola, Telegram saat sedang membalas chat pembeli). */
.dash-store-url {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px;
  background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 10px; padding: 9px 12px;
}
.dash-store-url-label { font-size: 11.5px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .05em; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dash-store-url code {
  font-size: 12.5px; background: transparent; border: none; padding: 0; color: var(--text);
  overflow-wrap: anywhere; min-width: 0; flex: 1 1 200px;
}
.dash-store-url-hint { font-size: 11.5px; color: var(--text-faint); margin-top: 6px; }
@media (max-width: 600px) {
  .dash-store-url { gap: 6px; }
  .dash-store-url code { flex: 1 1 100%; }
}

.dash-hero-today {
  background: rgba(var(--surface-2-rgb), .6); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; backdrop-filter: blur(6px);
}
.dash-hero-today-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); font-weight: 700; }
.dash-hero-today-value { font-family: var(--font-mono); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dash-hero-today-foot { font-size: 11px; color: var(--text-faint); }
.dash-spark-wrap { color: var(--accent); margin: 4px 0 2px; }
.dash-spark { width: 100%; height: 34px; display: block; }

/* Indikator naik/turun */
.dash-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; }
.dash-delta-up   { color: var(--success); }
.dash-delta-down { color: var(--danger); }
.dash-delta-flat { color: var(--text-faint); font-weight: 600; }
.dash-delta-warn { color: var(--accent); }

/* Grid 6 kartu — tinggi seragam */
.dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (min-width: 1500px) { .dash-stats { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 780px)  { .dash-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
.dash-stat {
  display: flex; flex-direction: column; min-height: 172px;
  background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0)), var(--surface);
  border: 1px solid var(--border); border-radius: 16px; padding: 20px; box-shadow: var(--shadow-1);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.dash-stat:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.dash-stat-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; min-height: 38px; }
.dash-ic {
  width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.dash-stat-label { font-size: 14px; color: var(--text); font-weight: 700; line-height: 1.35; }
.dash-stat-value {
  font-family: var(--font-mono); font-size: clamp(28px, 3.2vw, 38px); font-weight: 600; line-height: 1.1;
  font-variant-numeric: tabular-nums; letter-spacing: -.025em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 42px;
}
.dash-of { font-size: 18px; color: var(--text-faint); font-weight: 500; }
/* Tinggi tetap 2 baris — deskripsi tidak menggeser posisi nominal antar-kartu */
.dash-stat-desc { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-top: 7px; min-height: 36px; }
.dash-stat-foot { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.dash-bar { height: 4px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.dash-bar-fill { height: 100%; border-radius: 999px; transition: width .5s ease; }

/* Ringkasan cepat — kartu horizontal ikon + nominal menonjol */
.dash-quicks { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
@media (max-width: 1300px) { .dash-quicks { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .dash-quicks { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
.dash-quick {
  display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 68px;
  background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0)), var(--surface);
  border: 1px solid var(--border); border-radius: 16px; padding: 16px 17px; box-shadow: var(--shadow-1);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.dash-quick:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.dash-quick-ic {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
  background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border);
}
.dash-quick-body { min-width: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.dash-quick-value {
  font-family: var(--font-mono); font-size: 19px; font-weight: 600; line-height: 1.15;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-quick-label { font-size: 12px; color: var(--text-muted); margin-top: 3px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Aksen warna per kartu — lembut, bukan mencolok */
.dash-tone-blue  .dash-ic { background: rgba(77,127,242,.14);  color: #6f97f5; }
.dash-tone-green .dash-ic { background: rgba(46,213,115,.14);  color: #46d989; }
.dash-tone-teal  .dash-ic { background: rgba(20,184,166,.14);  color: #2dd4bf; }
.dash-tone-amber .dash-ic { background: rgba(255,194,14,.14);  color: var(--accent); }
.dash-tone-red   .dash-ic { background: rgba(224,91,91,.14);   color: var(--danger); }
.dash-tone-green .dash-bar-fill { background: var(--success); }
.dash-tone-blue  .dash-bar-fill { background: var(--info); }
.dash-tone-teal  .dash-bar-fill { background: #2dd4bf; }
.dash-tone-amber .dash-bar-fill { background: var(--accent); }
.dash-tone-red   .dash-bar-fill { background: var(--danger); }

/* Panel tabel */
.dash-tables { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
@media (max-width: 1180px) { .dash-tables { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .dash-tables { grid-template-columns: 1fr; } }
.dash-tables .dash-panel { display: flex; flex-direction: column; }
.dash-tables .dash-panel .table-wrap { flex: 1; }
.dash-panel { padding: 20px 22px; border-radius: 16px; }
.dash-panel-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  flex-wrap: wrap; margin-bottom: 16px; min-height: 46px;
}
/* Blok judul menyusut & teksnya membungkus sendiri — supaya deskripsi panjang
   tidak mendorong tombol "Lihat Semua" ke baris berikutnya di kartu sebelah.
   flex-basis 0 (bukan auto) penting: dengan "auto", lebar alami deskripsi yang
   belum membungkus tetap dipakai browser untuk memutuskan perlu wrap atau
   tidak, jadi tombol tetap terdorong turun walau min-width:0 sudah diberi. */
.dash-panel-head > div:first-child { flex: 1 1 0%; min-width: 0; }
.dash-panel-title { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 9px; }
.dash-panel-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }
.dash-more { white-space: nowrap; flex-shrink: 0; }
.dash-num { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.dash-uname { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); }
/* Hanya scroll VERTIKAL — tabel tidak boleh bisa digeser ke samping.
   Kolom dibiarkan menyesuaikan lebar panel, nama produk panjang membungkus. */
.dash-table { max-height: 340px; overflow-y: auto; overflow-x: hidden; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.dash-table table { width: 100%; min-width: 0; table-layout: auto; }
.dash-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); white-space: nowrap; }
.dash-table td, .dash-table th { min-width: 0; }
.dash-table tbody td { height: 58px; vertical-align: middle; }
.dash-table thead th { height: 42px; }
/* Nama produk boleh membungkus maksimal 2 baris, sisanya dipotong halus */
.dash-prod {
  white-space: normal; overflow-wrap: anywhere; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dash-table tbody tr { transition: background .2s ease; }
.dash-table tbody tr:nth-child(even) { background: rgba(var(--surface-2-rgb), .32); }
.dash-table tbody tr:hover { background: rgba(var(--surface-2-rgb), .7); }

/* Badge stok bertingkat */
.stock-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; font-family: var(--font-mono); border: 1px solid transparent; white-space: nowrap;
}
.stock-out  { background: rgba(224,91,91,.15);  color: #f08a8a; border-color: rgba(224,91,91,.3); }
.stock-crit { background: rgba(249,115,22,.15); color: #fb923c; border-color: rgba(249,115,22,.3); }
.stock-low  { background: rgba(255,194,14,.14); color: var(--accent); border-color: rgba(255,194,14,.3); }
.stock-ok   { background: rgba(46,213,115,.13); color: var(--success); border-color: rgba(46,213,115,.26); }

/* Avatar inisial pengguna baru */
.dash-user { display: flex; align-items: center; gap: 10px; }
.dash-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
}
.dash-user-txt { min-width: 0; }
.dash-user-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Empty state berilustrasi */
.dash-empty { padding: 34px 20px; }
.dash-empty i { font-size: 28px; opacity: .45; display: block; margin-bottom: 10px; }
.dash-empty div { font-weight: 600; color: var(--text-muted); font-size: 13.5px; }
.dash-empty p { font-size: 12px; color: var(--text-faint); margin: 5px 0 0; }

.dash-sync { font-size: 11.5px; color: var(--text-faint); display: flex; align-items: center; gap: 7px; justify-content: flex-end; }

/* Skeleton loading */
.sk { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: sk-shimmer 1.3s ease-in-out infinite; border-radius: 8px; }
@keyframes sk-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.sk-line { height: 11px; margin-bottom: 12px; }
.sk-big { height: 30px; width: 70%; margin-bottom: 12px; }
.sk-hero { height: 64px; }
.dash-sk-hero { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 24px 26px; }
.dash-sk-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 17px; min-height: 148px; }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }

/* ===================== DOMAIN WEB — layout modern ===================== */
.wd-banner {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--info-soft); border: 1px solid var(--info); color: var(--info);
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 18px; font-weight: 600; font-size: 13.5px; line-height: 1.6;
}
.wd-layout { display: grid; grid-template-columns: 40% 60%; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .wd-layout { grid-template-columns: 1fr; } }
.wd-col-left, .wd-col-right { display: flex; flex-direction: column; gap: 16px; }
.wd-card { padding: 20px 22px; }

.wd-status-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 14px; }
.wd-domain-name { font-size: 21px; font-weight: 700; word-break: break-all; }
.wd-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700; border: 1px solid transparent; white-space: nowrap;
}
.wd-badge-ok     { background: var(--success-soft); color: var(--success); border-color: rgba(46,213,115,.28); }
.wd-badge-warn   { background: var(--accent-soft);  color: var(--accent);  border-color: rgba(255,194,14,.28); }
.wd-badge-danger { background: var(--danger-soft);  color: var(--danger);  border-color: rgba(224,91,91,.28); }
.wd-badge-idle   { background: var(--surface-2);    color: var(--text-muted); border-color: var(--border); }

.wd-progress { margin-bottom: 14px; }
.wd-progress-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); font-weight: 600; margin-bottom: 6px; }
.wd-progress-track { height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
.wd-progress-bar { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); border-radius: 999px; transition: width .4s ease; }

.wd-note {
  background: var(--surface-2); border-left: 3px solid var(--text-muted);
  border-radius: var(--radius-sm); padding: 11px 13px; font-size: 13px; line-height: 1.65;
}
.wd-note-installed { border-left-color: var(--success); }
.wd-note-pending   { border-left-color: var(--accent); }
.wd-note-rejected  { border-left-color: var(--danger); }

.wd-checklist { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.wd-check {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 9px 12px; font-size: 12.5px; font-weight: 600; transition: border-color .2s ease;
}
.wd-check:hover { border-color: var(--border-strong); }
.wd-check-ok   { color: var(--success); }
.wd-check-wait { color: var(--accent); }
.wd-check-off  { color: var(--text-faint); }
.wd-check span:first-child { color: var(--text); font-weight: 600; }

.wd-admin-note { background: var(--surface-2); border-radius: var(--radius-sm); padding: 11px 13px; margin-top: 12px; font-size: 13px; line-height: 1.6; }
.wd-meta { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; font-size: 12.5px; }
.wd-meta div { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--border); }
.wd-meta div:last-child { border-bottom: none; }
.wd-meta span { color: var(--text-muted); }
.wd-meta b { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; }

.wd-form { margin-top: 16px; }
.wd-input-wrap { position: relative; }
.wd-input-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-faint); font-size: 13px; pointer-events: none; }
.wd-input { padding-left: 34px !important; transition: border-color .2s ease, box-shadow .2s ease; }
.wd-input.is-valid   { border-color: var(--success); }
.wd-input.is-invalid { border-color: var(--danger); }
.wd-validate { font-size: 12px; font-weight: 600; margin-top: 6px; min-height: 16px; }
.wd-validate.ok  { color: var(--success); }
.wd-validate.bad { color: var(--danger); }
.wd-submit-btn { margin-top: 10px; }
.wd-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.wd-verify-msg { margin-top: 12px; font-size: 13px; }

/* Timeline vertikal langkah pemasangan */
.wd-timeline { margin-top: 16px; position: relative; }
.wd-tl-item { display: flex; gap: 14px; padding-bottom: 20px; position: relative; }
.wd-tl-item:last-child { padding-bottom: 4px; }
.wd-tl-item::before {
  content: ''; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--border);
}
.wd-tl-item:last-child::before { display: none; }
.wd-tl-marker {
  flex: 0 0 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: #fff; z-index: 1;
  background: var(--surface-3); border: 2px solid var(--border-strong); color: var(--text-muted);
  transition: all .2s ease;
}
.wd-tl-done .wd-tl-marker   { background: var(--success); border-color: var(--success); color: #04220f; }
.wd-tl-active .wd-tl-marker { background: var(--info); border-color: var(--info); color: #fff; box-shadow: 0 0 0 4px rgba(77,127,242,.16); }
.wd-tl-done::before  { background: var(--success); opacity: .45; }
.wd-tl-body { flex: 1; min-width: 0; }
.wd-tl-title { font-weight: 700; margin-bottom: 5px; font-size: 14px; }
.wd-tl-todo .wd-tl-title, .wd-tl-todo .wd-tl-desc { opacity: .7; }
.wd-tl-desc { font-size: 13px; color: var(--text-muted); line-height: 1.75; }

/* Kartu record DNS */
.wd-dns-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin: 12px 0; }
.wd-dns-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--border); }
.wd-dns-row:last-of-type { border-bottom: none; }
.wd-dns-key { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.wd-dns-val { font-family: var(--font-mono); font-size: 12.5px; color: var(--text); word-break: break-all; }
.wd-dns-copy { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.wd-dns-copy .btn { flex: 1; min-width: 88px; }
.wd-subnote { font-size: 12.5px; color: var(--text-muted); line-height: 1.7; }

.wd-alert {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 8px;
  background: var(--accent-soft); border: 1px solid rgba(255,194,14,.4); border-radius: var(--radius-sm);
  padding: 12px 14px; font-size: 12.5px; line-height: 1.65; color: var(--text);
}
.wd-alert i { color: var(--accent); font-size: 15px; margin-top: 1px; }

/* FAQ ringkas */
.wd-faq { border-bottom: 1px solid var(--border); }
.wd-faq:last-of-type { border-bottom: none; }
.wd-faq summary {
  cursor: pointer; padding: 12px 0; font-size: 13.5px; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 10px; transition: color .2s ease;
}
.wd-faq summary::-webkit-details-marker { display: none; }
.wd-faq summary::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 11px; color: var(--text-muted); transition: transform .2s ease; }
.wd-faq[open] summary::after { transform: rotate(180deg); }
.wd-faq summary:hover { color: var(--accent); }
.wd-faq p { font-size: 12.5px; color: var(--text-muted); line-height: 1.75; margin: 0 0 12px; }

/* Tabel pengajuan (panel owner) */
.wd-table-wrap { overflow: auto; max-height: 460px; margin-top: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.wd-table-wrap thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); }
.wd-table-wrap tbody tr { transition: background .2s ease; }
.wd-table-wrap tbody tr:hover { background: rgba(var(--surface-2-rgb), .55); }

@media (max-width: 720px) {
  .wd-card { padding: 15px 16px; }
  .wd-dns-copy .btn { min-width: 0; }
  .wd-domain-name { font-size: 18px; }
}

/* Layar sangat sempit — 3 kolom biar label tidak terpotong */
@media (max-width: 380px) {
  .msheet-grid { grid-template-columns: repeat(3, 1fr); }
}

/* =====================================================================
   HP 360-430px — pengerasan akhir
   ---------------------------------------------------------------------
   Ditaruh paling bawah supaya menang atas blok mobile lama tanpa harus
   mengubahnya. Sasaran: teks tidak meluber keluar kartu, badge membungkus
   (bukan bertumpuk), sasaran sentuh >=40px, dan ukuran font isi minimal
   14px — termasuk di tabel yang di layar ini sudah berubah jadi kartu.
   ===================================================================== */
@media (max-width: 430px) {

  /* ── Dasar: cegah luber horizontal di semua elemen ── */
  .content { padding-left: 16px; padding-right: 16px; }
  .content:has(.dash-page) { padding-top: 16px; }
  .dash-page { gap: 18px; }
  /* Tabel dashboard ikut jadi kartu bertumpuk — tidak ada geser ke samping */
  .dash-table table { min-width: 0; }
  .dash-panel-head { flex-direction: column; align-items: stretch; }
  .dash-head { gap: 5px; }
  .dash-h1 { font-size: 26px; }
  .dash-lead { font-size: 14px; }
  .dash-h2 { font-size: 16px; }
  .card, .dash-stat, .dash-hero, .dash-panel, .qt-card, .wd-card, .dash-sk-card { overflow-wrap: anywhere; }
  code, .mono, .dash-dns-val, .wd-dns-val { overflow-wrap: anywhere; word-break: break-word; }

  /* ── Font isi minimal 14px ── */
  body, .field-label, .switch-row .label, .switch-row .desc,
  .dash-user-name, .wd-tl-desc, .wd-subnote, .wd-faq p, .wd-note,
  .qt-dropzone-text, .dash-quick-label, .dash-stat-desc, .dash-panel-sub { font-size: 14px; line-height: 1.55; }
  .field-hint, .dash-stat-note, .dash-bar-note, .dash-hero-today-foot,
  .dash-sync, .faint { font-size: 12.5px; }
  /* Baris tabel sudah jadi kartu di lebar ini — kembalikan ke ukuran terbaca */
  tbody td, thead th { font-size: 14px !important; line-height: 1.5 !important; }
  tbody td .badge, tbody td .btn-sm { font-size: 12.5px !important; }

  /* ── Sasaran sentuh ── */
  .btn { min-height: 42px; padding: 10px 14px; font-size: 14px; }
  .btn-sm { min-height: 38px; padding: 8px 12px; }
  .field-input, .field-select, .field-textarea { min-height: 44px; }
  .qt-zoom-btn { min-height: 38px; padding: 8px 12px; font-size: 13px; }
  .wd-faq summary { padding: 14px 0; font-size: 14px; }

  /* ── Badge & pill: membungkus rapi, tidak saling tumpuk ── */
  .badge, .stock-pill, .wd-badge, .qt-chip, .dash-hero-chip {
    white-space: normal; max-width: 100%; line-height: 1.35;
  }
  .dash-hero-sub, .wd-actions, .qt-quickbtns, .wd-dns-copy, .dash-panel-head { gap: 8px; }
  tbody td { white-space: normal !important; }
  .nowrap { white-space: normal !important; }

  /* ── Dashboard ── */
  .dash-page { gap: 14px; }
  .dash-hero { grid-template-columns: 1fr; padding: 18px 16px; border-radius: 14px; }
  .dash-hero-value { font-size: 30px; }
  .dash-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dash-stat { min-height: 0; padding: 14px; border-radius: 14px; }
  .dash-stat-value { font-size: 24px; }
  .dash-of { font-size: 14px; }
  .dash-stat-label { font-size: 11.5px; }
  .dash-quicks { grid-template-columns: 1fr; gap: 10px; }
  .dash-quick { padding: 14px 15px; border-radius: 14px; }
  .dash-quick-value { font-size: 18px; }
  .dash-quick-label { font-size: 12.5px; }
  .dash-tables { grid-template-columns: 1fr; gap: 12px; }
  .dash-panel { padding: 15px 16px; }
  .dash-more { width: 100%; justify-content: center; }
  /* Tabel sudah jadi kartu bertumpuk — batas tinggi & sticky header tidak berlaku lagi */
  .dash-table { max-height: none; overflow: visible; border: none; }
  .dash-table thead th { position: static; }
  .dash-avatar { width: 36px; height: 36px; font-size: 13px; }
  .dash-sync { justify-content: flex-start; }

  /* ── Template QRIS ── */
  .qt-layout { grid-template-columns: 1fr; gap: 12px; }
  .qt-preview-head { flex-direction: column; align-items: stretch; }
  .qt-zoom-bar { justify-content: space-between; }
  .qt-zoom-btn { flex: 1; justify-content: center; }
  .qt-canvas { min-height: 260px; max-height: 56vh; max-height: 56dvh; }
  .qt-quickbtns { flex-direction: column; }
  .qt-quickbtns .btn { width: 100%; }
  .qt-bg-meta { flex-direction: column; align-items: flex-start; gap: 5px; }

  /* ── Domain Web ── */
  .wd-layout { grid-template-columns: 1fr; gap: 12px; }
  .wd-status-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .wd-domain-name { font-size: 17px; }
  .wd-dns-row { flex-direction: column; align-items: flex-start; gap: 3px; }
  .wd-dns-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .wd-dns-copy .btn { width: 100%; min-width: 0; min-height: 44px; }
  .wd-actions .btn { width: 100%; }
  .wd-meta div { flex-direction: column; align-items: flex-start; gap: 2px; }
  .wd-tl-item { gap: 11px; }
  .wd-table-wrap { max-height: none; overflow: visible; border: none; }
  .wd-table-wrap thead th { position: static; }
  .wd-check { flex-direction: row; flex-wrap: wrap; }
}

/* 360px — paling sempit, kartu statistik jadi satu kolom penuh */
@media (max-width: 365px) {
  .dash-stats, .dash-quicks { grid-template-columns: 1fr; }
  .dash-stat-value { font-size: 26px; }
  .content { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 389px) {
  .wd-dns-copy { grid-template-columns: 1fr; }
}

/* ===================== TOPBAR: pencarian global & lonceng notifikasi (Fase 1) ===================== */
.topbar-search { flex: 1 1 260px; min-width: 160px; max-width: 420px; }
.topbar-search input {
  width: 100%; box-sizing: border-box; padding: 9px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font-size: 13.5px; outline: none; transition: border-color .15s ease;
}
.topbar-search input:focus { border-color: var(--accent); }
#globalSearchResults {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-height: 420px;
  overflow-y: auto; background: var(--surface-1, var(--bg)); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.35); z-index: 60; padding: 6px;
}
#globalSearchResults.hidden { display: none; }
.gsr-group-title { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); padding: 8px 10px 4px; }
.gsr-item { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; border: none; background: transparent; color: var(--text); cursor: pointer; font-size: 13px; }
.gsr-item:hover { background: var(--surface-2); }
.gsr-item .gsr-sub { color: var(--text-muted); font-size: 12px; }
.gsr-empty { padding: 14px 10px; color: var(--text-muted); font-size: 13px; text-align: center; }

.notif-bell {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-muted); cursor: pointer; flex: none;
}
.notif-bell:hover { color: var(--text); border-color: var(--accent); }
.notif-dot {
  position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%;
  background: #ff4d4f; border: 1.5px solid var(--bg);
}
.notif-dot.hidden { display: none; }
#notifDropdown {
  position: absolute; top: 64px; right: 24px; width: 320px; max-width: calc(100vw - 32px); max-height: 420px; overflow-y: auto;
  background: var(--surface-1, var(--bg)); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.35); z-index: 60; padding: 6px;
}
#notifDropdown.hidden { display: none; }
@media (max-width: 400px) {
  #notifDropdown { right: 12px; }
}
.ndrop-item { display: block; width: 100%; text-align: left; padding: 10px; border-radius: 8px; border: none; background: transparent; color: var(--text); cursor: pointer; font-size: 13px; }
.ndrop-item:hover { background: var(--surface-2); }
.ndrop-empty { padding: 16px 10px; color: var(--text-muted); font-size: 13px; text-align: center; }
.ndrop-time { color: var(--text-muted); font-size: 11px; }
.ndrop-tabs {
  position: sticky; top: 0; z-index: 1; display: flex; gap: 4px; padding: 4px 4px 8px;
  background: var(--surface-1, var(--bg)); border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.ndrop-tab {
  flex: 1; text-align: center; padding: 7px 6px; border-radius: 8px; border: none; background: transparent;
  color: var(--text-muted); cursor: pointer; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.ndrop-tab:hover { background: var(--surface-2); color: var(--text); }
.ndrop-tab.active { background: var(--accent-soft, var(--surface-2)); color: var(--accent); }
.ndrop-tab-badge {
  display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 999px; background: #ff4d4f;
  color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
.ndrop-footer-link {
  display: block; width: 100%; text-align: center; padding: 10px; margin-top: 4px;
  border: none; border-top: 1px solid var(--border); background: transparent;
  color: var(--accent); cursor: pointer; font-size: 12px; font-weight: 600;
}
.ndrop-footer-link:hover { background: var(--surface-2); }

@media (max-width: 640px) {
  .topbar-search { order: 3; flex-basis: 100%; max-width: none; }
}

/* ===================== TIMELINE TRANSAKSI (Fase 1) ===================== */
.tx-timeline { display: flex; flex-direction: column; gap: 0; padding: 8px 0 0; }
.tx-timeline-item { display: flex; gap: 12px; position: relative; padding-bottom: 20px; }
.tx-timeline-item:last-child { padding-bottom: 0; }
.tx-timeline-item::before {
  content: ''; position: absolute; left: 5px; top: 16px; bottom: 0; width: 1px; background: var(--border);
}
.tx-timeline-item:last-child::before { display: none; }
.tx-timeline-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); margin-top: 3px; flex: none; }
.tx-timeline-dot-ok { background: #4ade80; }
.tx-timeline-dot-bad { background: #ff6b6b; }
.tx-timeline-dot-warn { background: #ffc20e; }
.tx-timeline-title { font-weight: 600; font-size: 13.5px; }
.tx-timeline-note { font-size: 12.5px; margin-top: 2px; }
.tx-timeline-date { font-size: 11.5px; margin-top: 2px; }

/* ===================== RINGKASAN PEMBAYARAN/PENGIRIMAN (Fase 6) ===================== */
.tx-summary-row { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 0 14px; }
.tx-summary-pill { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.tx-summary-ok { background: rgba(74,222,128,0.15); color: #4ade80; }
.tx-summary-bad { background: rgba(255,107,107,0.15); color: #ff6b6b; }
.tx-summary-warn { background: rgba(255,194,14,0.15); color: #ffc20e; }

/* ===================== ACTION ITEMS & HEALTH (Fase 1) ===================== */
.dash-action-items { padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.dash-action-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px;
  border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  cursor: pointer; font-size: 13px;
}
.dash-action-item:hover { border-color: var(--accent); }
.dash-action-urgent i { color: #ff6b6b; }
.dash-action-warn i { color: #ffc20e; }
.dash-action-info i { color: #60a5fa; }
.dash-action-item-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.dash-action-item-label { font-weight: 600; }
.dash-action-item-detail { font-size: 12px; }
.dash-action-item-count {
  min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: var(--accent-soft);
  color: var(--accent); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center;
}

.dash-health-row { display: flex; gap: 10px; flex-wrap: wrap; padding: 4px 0 0; }
.health-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); font-size: 12.5px;
}
.health-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); }
.health-ok .health-dot { background: #4ade80; }
.health-bad .health-dot { background: #ff6b6b; }
.health-bad { color: #ff6b6b; }

/* ===================== WARRANTY RATE / SUPPLIER PERFORMANCE (Fase 1) ===================== */
.an-extra-card { padding: 18px; margin-top: 20px; }
.an-extra-title { font-weight: 700; font-size: 14.5px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }