@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ══════════════════════════════════════════════════════════════════
   DESAIN ULANG v1.5 — permintaan pemilik web: "tidak ada yang berubah,
   saya mau update semuanya harus berubah tampilannya semenarik
   mungkin". Palet & komponen dirombak total (lebih hidup, gradasi lebih
   berani, shadow lebih lembut, animasi hover halus) TAPI seluruh nama
   class dipertahankan 100% sama seperti sebelumnya — supaya ke-37 file
   .ejs otomatis ikut ter-upgrade tanpa perlu disentuh satu-satu, dan
   supaya update berikutnya tetap kompatibel dengan stylesheet ini.
   ══════════════════════════════════════════════════════════════════ */
:root {
  --bg: #f3f4fb;
  --bg-alt: #eef1fb;
  --surface: #ffffff;
  --ink: #181c2e;
  --ink-muted: #6b7290;
  --primary: #5b5bf0;
  --primary-dark: #3f3fd6;
  --primary-light: #eef0ff;
  --secondary: #7c3aed;
  --accent: #ff9d2e;
  --accent-dark: #e6800f;
  --success: #17b26a;
  --success-bg: #e7f9ef;
  --danger: #f0453e;
  --danger-bg: #fdecec;
  --warn-bg: #fff4e5;
  --border: #e6e8f5;
  --radius: 16px;
  --radius-lg: 22px;
  --shadow: 0 1px 2px rgba(30, 30, 80, 0.04), 0 8px 24px rgba(30, 30, 80, 0.07);
  --shadow-lg: 0 12px 32px rgba(40, 40, 110, 0.14);
  --shadow-glow: 0 6px 20px rgba(91, 91, 240, 0.28);
  --grad-primary: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  --grad-accent: linear-gradient(135deg, #ffb648 0%, var(--accent) 100%);

  /* ── Permintaan "lebih modern & colorful" — token warna tambahan +
     gradient per status, dipakai bareng token di atas (tidak menimpa
     apa pun), supaya seluruh halaman yang pakai .stat-card/.badge/dll
     otomatis kebagian variasi warna tanpa perlu diseragamkan manual. */
  --info: #0ea5e9;
  --info-dark: #0284c7;
  --info-bg: #e6f6fe;
  --pink: #ec4899;
  --pink-bg: #fdecf5;
  --teal: #14b8a6;
  --teal-bg: #e6faf6;
  --grad-success: linear-gradient(135deg, #22c55e 0%, var(--success) 100%);
  --grad-danger: linear-gradient(135deg, #fb7185 0%, var(--danger) 100%);
  --grad-warn: linear-gradient(135deg, #ffb648 0%, var(--accent-dark) 100%);
  --grad-info: linear-gradient(135deg, #38bdf8 0%, var(--info-dark) 100%);
  --grad-pink: linear-gradient(135deg, #f472b6 0%, var(--pink) 100%);
  --shadow-glow-success: 0 6px 20px rgba(34, 197, 94, 0.28);
  --shadow-glow-danger: 0 6px 20px rgba(240, 69, 62, 0.28);
  --shadow-glow-warn: 0 6px 20px rgba(255, 157, 46, 0.3);
  --shadow-glow-info: 0 6px 20px rgba(14, 165, 233, 0.3);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  color-scheme: light;
}

/* ══════════════════════════════════════════════════════════════════
   MODE GELAP (saran: "dark mode buat admin yang buka panel malam-malam")
   — dua jalur, sama-sama valid, seperti biasa buat theming yang benar:
   1) ikut preferensi sistem OTOMATIS kalau user belum pernah pilih manual
      (media query di bawah, dijaga :not([data-theme="light"]) supaya
      tidak menimpa pilihan manual "Terang").
   2) TOGGLE manual (tombol 🌙/☀️ di navbar customer & sidebar admin, lihat
      partials/head.ejs buat script simpan pilihannya ke localStorage) —
      SELALU menang di kedua arah lewat [data-theme="dark"]/[data-theme=
      "light"] di bawah, apa pun preferensi sistemnya.
   Semua token warna yang sama persis dipakai ulang (--bg, --surface, dst)
   — TIDAK ada class/komponen baru, jadi seluruh 45+ halaman yang sudah
   pakai var(--...) otomatis ikut gelap tanpa disentuh satu-satu, sama
   filosofinya dengan penyegaran visual v2 di atas. ══════════════════ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1117; --bg-alt: #161925; --surface: #1b1e2b;
    --ink: #eef0fa; --ink-muted: #9297b3;
    --primary: #8888ff; --primary-dark: #b3b3ff; --primary-light: #262a45;
    --secondary: #a06bff; --accent: #ffb648; --accent-dark: #ffcf8a;
    --success: #34d399; --success-bg: rgba(52,211,153,0.16);
    --danger: #f87171; --danger-bg: rgba(248,113,113,0.16);
    --warn-bg: rgba(255,182,72,0.16);
    --border: #2a2e40;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.45);
    --info: #38bdf8; --info-dark: #7dd3fc; --info-bg: rgba(56,189,248,0.16);
    --pink: #f472b6; --pink-bg: rgba(244,114,182,0.16);
    --teal: #2dd4bf; --teal-bg: rgba(45,212,191,0.16);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1117; --bg-alt: #161925; --surface: #1b1e2b;
  --ink: #eef0fa; --ink-muted: #9297b3;
  --primary: #8888ff; --primary-dark: #b3b3ff; --primary-light: #262a45;
  --secondary: #a06bff; --accent: #ffb648; --accent-dark: #ffcf8a;
  --success: #34d399; --success-bg: rgba(52,211,153,0.16);
  --danger: #f87171; --danger-bg: rgba(248,113,113,0.16);
  --warn-bg: rgba(255,182,72,0.16);
  --border: #2a2e40;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.45);
  --info: #38bdf8; --info-dark: #7dd3fc; --info-bg: rgba(56,189,248,0.16);
  --pink: #f472b6; --pink-bg: rgba(244,114,182,0.16);
  --teal: #2dd4bf; --teal-bg: rgba(45,212,191,0.16);
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

/* Tombol toggle tema — bulat kecil, dipasang di brand bar customer &
   sidebar admin (lihat views/partials/customer-nav.ejs & admin-nav.ejs). */
.theme-toggle-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--border); background: var(--surface); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; cursor: pointer; flex-shrink: 0;
  transition: transform 0.15s var(--ease-bounce), border-color 0.15s;
}
.theme-toggle-btn:hover { border-color: var(--primary); transform: scale(1.08); }
/* Varian dipakai di admin-sidebar (SELALU gelap terlepas dari tema situs,
   lihat catatan .admin-sidebar) — pola sama persis dengan .sidebar-logout-btn
   di atas supaya kontras tetap terjaga di kedua tema. */
.theme-toggle-btn.sidebar-theme-toggle {
  background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.25);
}
.theme-toggle-btn.sidebar-theme-toggle:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.45); }

/* ─── Toast notification (saran: pesan sukses/gagal jangan full-page
   banner, tapi notifikasi kecil muncul-hilang) — lihat script di
   partials/head.ejs: alert yang DIJAMIN transient (ditandai server-side
   dengan data-flash="1", cuma alert hasil redirect ?error=/?saved=, BUKAN
   banner persisten macam "saldo Bert Store menipis"/pengumuman toko yang
   sengaja tetap dibiarkan tampil inline seperti sebelumnya) dipindah ke
   sini otomatis & hilang sendiri. ──────────────────────────────────── */
.toast-stack {
  position: fixed;
  top: 16px; right: 16px;
  z-index: 500;
  display: flex; flex-direction: column; gap: 10px;
  width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}
.toast-stack .alert {
  margin-bottom: 0;
  box-shadow: var(--shadow-lg);
  position: relative;
  padding-right: 36px;
  pointer-events: auto;
  animation: toastIn 0.3s var(--ease-bounce);
}
.toast-stack .alert.toast-leaving { animation: toastOut 0.25s ease forwards; }
.toast-close-btn {
  position: absolute; top: 10px; right: 10px;
  background: none; border: none; cursor: pointer;
  font-size: 15px; line-height: 1; color: inherit; opacity: 0.55; padding: 2px;
}
.toast-close-btn:hover { opacity: 1; }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(40px) scale(0.96); } }
@media (max-width: 480px) {
  .toast-stack { left: 16px; right: 16px; top: 12px; width: auto; }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(720px 360px at 100% -10%, rgba(124, 58, 237, 0.07), transparent 60%),
    radial-gradient(640px 320px at -10% 0%, rgba(91, 91, 240, 0.08), transparent 55%),
    radial-gradient(560px 300px at 90% 100%, rgba(20, 184, 166, 0.05), transparent 60%),
    var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--primary); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cfd3ee; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

h1, h2, .brand-name, .stat-value, .wallet-chip .amount {
  font-family: 'Sora', 'Inter', sans-serif;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
h1 { font-size: 1.9rem; }
h2 { font-size: 1.35rem; }
h3 {
  font-family: 'Sora', 'Inter', sans-serif;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

a { color: var(--primary); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--primary-dark); text-decoration: underline; }

.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.container-narrow { max-width: 480px; margin: 0 auto; padding: 0 20px; }

/* ─── Top nav (customer storefront) ─────────────────────────────── */
.topnav {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topnav-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 34px; width: 34px; border-radius: 10px; object-fit: cover; box-shadow: var(--shadow); }
.brand .brand-name { font-size: 18px; margin: 0; background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  color: var(--ink-muted);
  font-weight: 600;
  font-size: 14px;
  padding: 9px 16px;
  border-radius: 999px;
  transition: background 0.18s, color 0.18s, transform 0.15s;
}
.nav-links a:hover { background: var(--primary-light); color: var(--primary-dark); text-decoration: none; }
.nav-links a.active { background: var(--grad-primary); color: #fff; text-decoration: none; font-weight: 700; box-shadow: var(--shadow-glow); }

/* ─── Admin sidebar + topbar (mobile hamburger, PRD §2.2) ───────── */
.admin-layout { display: flex; min-height: 100vh; }
.admin-sidebar {
  width: 232px;
  flex-shrink: 0;
  background: linear-gradient(185deg, #23234a 0%, #1a1a38 55%, #14142b 100%);
  color: #fff;
  padding: 26px 16px;
  position: relative;
}
.admin-sidebar::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 220px;
  background: radial-gradient(220px 140px at 20% 0%, rgba(124, 58, 237, 0.35), transparent 70%);
  pointer-events: none;
}
.admin-sidebar .brand-name { color: #fff; font-size: 16px; margin-bottom: 26px; position: relative; -webkit-text-fill-color: #fff; background: none; }
.admin-sidebar a {
  display: block;
  color: rgba(255,255,255,0.68);
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 3px;
  position: relative;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.admin-sidebar a:hover { background: rgba(255,255,255,0.08); color: #fff; text-decoration: none; transform: translateX(2px); }
.admin-sidebar a.active {
  background: linear-gradient(135deg, rgba(91,91,240,0.9), rgba(124,58,237,0.9));
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(91,91,240,0.35);
}
.admin-main { flex: 1; padding: 32px; max-width: 1040px; }

.admin-topbar { display: none; }
.hamburger-btn {
  display: none;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  border: none;
  border-radius: 10px;
  width: 40px;
  height: 40px;
  font-size: 20px;
  cursor: pointer;
  box-shadow: var(--shadow-glow);
}

@media (max-width: 860px) {
  .admin-layout { flex-direction: column; }
  .admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: linear-gradient(120deg, #23234a, #1a1a38);
  }
  .admin-topbar .brand-name { color: #fff; margin: 0; font-size: 15px; -webkit-text-fill-color: #fff; background: none; }
  .hamburger-btn { display: inline-flex; align-items: center; justify-content: center; }
  .admin-sidebar { display: none; padding-top: 0; }
  .admin-sidebar.open { display: block; }
  .admin-main { padding: 20px; max-width: 100%; }
}

/* ─── Kartu statistik (dashboard, PRD §2.2/§6) ──────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  position: relative;
  overflow: hidden;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.stat-card .stat-icon {
  font-size: 20px; margin-bottom: 10px;
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-light);
}
.stat-card .stat-value { font-size: 1.65rem; margin: 0; }
.stat-card .stat-label { color: var(--ink-muted); font-size: 13px; margin-top: 3px; font-weight: 500; }
.stat-card.stat-highlight { border-color: transparent; background: var(--grad-accent); }
.stat-card.stat-highlight .stat-icon { background: rgba(255,255,255,0.35); }
.stat-card.stat-highlight .stat-value, .stat-card.stat-highlight .stat-label { color: #fff; }

/* ─── Wallet chip (signature element) ───────────────────────────── */
.wallet-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--grad-primary);
  color: #fff;
  border-radius: 20px;
  padding: 22px 26px;
  box-shadow: var(--shadow-glow);
  position: relative;
  overflow: hidden;
}
.wallet-chip::after {
  content: "";
  position: absolute; top: -50px; right: -50px;
  width: 180px; height: 180px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
}
.wallet-chip .coin {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--grad-accent);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Sora', sans-serif; font-weight: 700; color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  position: relative; z-index: 1;
}
.wallet-chip .label { font-size: 12px; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.05em; position: relative; z-index: 1; }
.wallet-chip .amount { font-family: 'Sora', sans-serif; font-size: 25px; font-weight: 700; position: relative; z-index: 1; }

/* ─── Cards / tables / forms ─────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
.grid { display: grid; gap: 16px; }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.product-card {
  display: flex; flex-direction: column; gap: 8px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(91,91,240,0.25); }
.product-card .cat {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--primary-dark);
  font-weight: 700; background: var(--primary-light); display: inline-block; padding: 3px 9px; border-radius: 999px;
  width: fit-content;
}
.product-card .name {
  font-weight: 700; font-size: 15px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-card .desc {
  font-size: 12px; color: var(--ink-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-card .price { font-family: 'Sora', sans-serif; font-weight: 700; color: var(--primary-dark); font-size: 18px; margin-top: auto; }
.product-card .stock { font-size: 12px; color: var(--ink-muted); font-weight: 500; }

/* ─── Gambar produk (saran fitur tambahan: katalog sebelumnya teks doang) —
   opsional (admin isi URL lewat Kelola Produk); kosong/gagal load jatuh ke
   placeholder ikon gradient, warnanya ikut cycling yang sama dengan .cat
   di bawah supaya grid katalog konsisten "colorful"-nya. ────────────── */
.product-img {
  margin: -22px -22px 10px;
  height: 120px;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}
.product-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-img-placeholder {
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
  background: var(--grad-primary);
}
.product-card:nth-of-type(5n+2) .product-img-placeholder { background: var(--grad-info); }
.product-card:nth-of-type(5n+3) .product-img-placeholder { background: var(--grad-pink); }
.product-card:nth-of-type(5n+4) .product-img-placeholder { background: var(--grad-warn); }
.product-card:nth-of-type(5n+5) .product-img-placeholder { background: var(--grad-success); }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); padding: 11px 14px; border-bottom: 2px solid var(--border); font-weight: 700; }
td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background 0.12s; }
tbody tr:hover { background: var(--bg-alt); }
.mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 13px; color: var(--ink-muted); }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-warn { background: var(--warn-bg); color: var(--accent-dark); }
.badge-muted { background: var(--bg-alt); color: var(--ink-muted); }
.badge-info { background: var(--primary-light); color: var(--primary-dark); }

/* ─── Hero banner — kartu besar gradient untuk halaman "🏦 Bert Store
   Saya", varian lebih lega dari .wallet-chip ─────────────────────── */
.hero-banner {
  background: var(--grad-primary);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 30px 30px 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-glow);
}
.hero-banner::after {
  content: "";
  position: absolute;
  top: -70px; right: -70px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
}
.hero-banner::before {
  content: "";
  position: absolute;
  bottom: -90px; left: 10%;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
}
.hero-banner .hero-main { position: relative; z-index: 1; }
.hero-banner .hero-label { font-size: 12px; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; font-weight: 600; }
.hero-banner .hero-amount { font-family: 'Sora', sans-serif; font-size: 36px; font-weight: 800; line-height: 1.1; }
.hero-banner .hero-sub { font-size: 13px; opacity: 0.88; margin-top: 6px; }
.hero-stats { display: flex; gap: 28px; flex-wrap: wrap; position: relative; z-index: 1; }
.hero-stats .hero-stat-value { font-family: 'Sora', sans-serif; font-size: 20px; font-weight: 700; }
.hero-stats .hero-stat-label { font-size: 11px; opacity: 0.78; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
.hero-banner .btn-accent { flex-shrink: 0; }

/* ─── Detail grid (label/value) ─────────────────────────────────── */
.detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 20px; }
.detail-item .detail-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); margin-bottom: 3px; font-weight: 600; }
.detail-item .detail-value { font-weight: 700; font-size: 14.5px; word-break: break-word; }

/* ─── Service picker cards ───────────────────────────────────────── */
.service-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.service-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; padding: 18px 10px; border-radius: var(--radius);
  border: 2px solid var(--border); background: var(--surface); cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s; user-select: none;
}
.service-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.service-card input { position: absolute; opacity: 0; pointer-events: none; }
.service-card .service-icon { font-size: 28px; }
.service-card .service-name { font-weight: 700; font-size: 13.5px; }
.service-card:has(input:checked) { border-color: var(--primary); background: var(--primary-light); box-shadow: var(--shadow); }

/* ─── Result panel ───────────────────────────────────────────────── */
.result-panel { border-radius: var(--radius); padding: 20px; margin-bottom: 20px; border: 1px solid var(--border); }
.result-panel-success { background: var(--success-bg); border-color: rgba(23,178,106,0.25); }
.result-panel-fail { background: var(--danger-bg); border-color: rgba(240,69,62,0.25); }
.result-panel .result-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.result-panel .result-icon { font-size: 22px; }
.result-panel .result-title { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 16px; }
.result-panel .result-message { font-size: 13.5px; color: var(--ink-muted); margin-bottom: 14px; }

.divider { border: none; border-top: 1px solid var(--border); margin: 24px 0; }

form.inline { display: inline; }
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--ink-muted); }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  background: var(--surface);
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(91,91,240,0.14);
}
.field { margin-bottom: 16px; }
.form-group { margin-bottom: 16px; }
.tab-btn.active { background: var(--grad-primary); color: #fff; border-color: transparent; box-shadow: var(--shadow-glow); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 20px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, filter 0.15s ease;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-primary { background: var(--grad-primary); color: #fff; box-shadow: 0 4px 14px rgba(91,91,240,0.32); }
.btn-primary:hover { filter: brightness(1.06); text-decoration: none; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(91,91,240,0.4); }
.btn-accent { background: var(--grad-accent); color: #fff; box-shadow: 0 4px 14px rgba(255,157,46,0.35); }
.btn-accent:hover { filter: brightness(1.05); text-decoration: none; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(255,157,46,0.42); }
.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-ghost { background: var(--surface); color: var(--primary-dark); border: 1.5px solid var(--border); box-shadow: none; }
.btn-ghost:hover { border-color: var(--primary); background: var(--primary-light); text-decoration: none; }
.btn-danger { background: var(--danger-bg); color: var(--danger); }
.btn-danger:hover { background: #fbdada; text-decoration: none; }
.btn-success { background: var(--success-bg); color: var(--success); }
.btn-success:hover { background: #d7f4e4; text-decoration: none; }
.btn-block { width: 100%; }

/* Bug: tombol "Keluar" di sidebar admin sebelumnya cuma di-override lewat
   inline style di admin-nav.ejs (color:#fff + border-color transparan)
   TANPA override background — jadi tetap mewarisi background putih dari
   .btn-ghost (var(--surface): #ffffff), hasilnya teks putih di atas
   background putih (tidak terbaca sama sekali, cuma kotak putih kosong
   yang masih bisa diklik). Class ini kasih background gelap transparan
   yang cocok dengan sidebar gelap, jadi teks & border-nya kelihatan. */
.sidebar-logout-btn {
  background: rgba(255,255,255,0.06);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.25);
}
.sidebar-logout-btn:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.45);
}

.alert { padding: 13px 16px; border-radius: 12px; font-size: 14px; margin-bottom: 16px; font-weight: 500; border: 1px solid transparent; }
.alert-danger { background: var(--danger-bg); color: var(--danger); border-color: rgba(240,69,62,0.18); }
.alert-success { background: var(--success-bg); color: var(--success); border-color: rgba(23,178,106,0.18); }
.alert-warn { background: var(--warn-bg); color: var(--accent-dark); border-color: rgba(255,157,46,0.22); }

.muted { color: var(--ink-muted); font-size: 13px; }
.section { margin-bottom: 32px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.empty-state { text-align: center; padding: 52px 20px; color: var(--ink-muted); }
.empty-state::before {
  content: "🗒️";
  display: block; font-size: 34px; margin-bottom: 10px; opacity: 0.7;
}
/* Dipakai saat sebuah empty-state sudah punya ikon/CTA sendiri di dalam
   markup-nya (mis. widget "Beli Lagi"/downline) — cegah dobel ikon dengan
   ::before generik di atas. */
.empty-state.has-custom-icon::before { content: none; margin-bottom: 0; }

.qr-box { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.qr-box img { width: 220px; height: 220px; border-radius: 14px; border: 1px solid var(--border); padding: 12px; background: #fff; box-shadow: var(--shadow); }

/* ─── Table overflow (mobile) ────────────────────────────────────── */
.card { overflow-x: auto; }
table { min-width: 100%; border-collapse: collapse; }

/* ─── Topnav customer — hamburger mobile ─────────────────────────── */
.topnav-hamburger { display: none; }

/* ─── Page fade-in (halus, tidak mengganggu) ─────────────────────── */
body { animation: fadeInPage 0.35s ease; }
@keyframes fadeInPage { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ─── Utilitas kecil dipakai halaman entry (login/register) ─────── */
.pill-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.glass-badge {
  padding: 8px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: rgba(255,255,255,0.16); color: #fff; backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.22);
}

/* ══════════════════════════════════════════════════════════════════
   PRD Child Panel v2 — Paket A: bottom tab bar (5 ikon) menggantikan
   topnav+hamburger lama untuk halaman CUSTOMER (admin tidak disentuh,
   FR-A3). Nama class BARU (tidak bentrok apa pun dari desain ulang v1.5)
   — tapi tetap pakai token warna/shadow yang SAMA (var(--primary) dkk)
   supaya konsisten dengan gradasi & shadow-glow yang sudah ada di sini,
   bukan palet baru yang menyimpang. ══════════════════════════════════ */
body { padding-bottom: 76px; }

.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 20px rgba(30, 30, 80, 0.08);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 9px 4px 10px;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 700;
  transition: color 0.15s, transform 0.15s;
}
.bottom-nav-item:hover { text-decoration: none; color: var(--primary-dark); }
.bottom-nav-item .bn-icon { font-size: 21px; line-height: 1; transition: transform 0.15s; }
.bottom-nav-item.active {
  color: var(--primary-dark);
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.bottom-nav-item.active .bn-icon { transform: translateY(-2px); filter: drop-shadow(0 2px 6px rgba(91,91,240,0.35)); -webkit-text-fill-color: initial; }

/* ─── Sub-tabs horizontal per grup (FR-A2) ──────────────────────────── */
.sub-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.sub-tab-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--ink-muted);
  font-weight: 700;
  font-size: 13.5px;
  transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.15s;
}
.sub-tab-btn:hover { text-decoration: none; border-color: var(--primary); color: var(--primary-dark); }
.sub-tab-btn.active { background: var(--grad-primary); color: #fff; border-color: transparent; box-shadow: var(--shadow-glow); }

@media (max-width: 480px) {
  .bottom-nav-item { font-size: 10px; }
  .bottom-nav-item .bn-icon { font-size: 19px; }
}

@media (max-width: 768px) {
  .topnav-inner { flex-wrap: wrap; padding: 12px 16px; }
  .topnav-hamburger { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
  .nav-links {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 2px;
    margin-top: 12px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { border-radius: 8px; padding: 10px 14px; }
  .nav-links a.active { border-radius: 8px; }
  .nav-links form.inline { width: 100%; }
  .nav-links .btn-block-mobile, .nav-links form.inline .btn { width: 100%; }

  .container, .container-narrow { padding: 0 16px; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .grid-3 { grid-template-columns: 1fr; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.2rem; }
  .hero-banner .hero-amount { font-size: 28px; }
}

/* ══════════════════════════════════════════════════════════════════
   PENYEGARAN VISUAL v2 — permintaan pemilik web: "tampilan tolong
   diperbagus lagi", arah: lebih modern & colorful, cakupan SEMUA
   halaman (customer + admin + bottom-nav/sub-tabs + halaman baru
   Transfer/Downline/Voucher). Sama seperti desain ulang v1.5 di atas,
   ini HANYA memperkaya class yang SUDAH dipakai di semua 45 file .ejs
   (card/btn/badge/stat-card/product-card/table/bottom-nav/sub-tabs),
   supaya seluruh halaman otomatis ikut ter-upgrade tanpa perlu
   disentuh satu-satu — tidak ada class lama yang diubah artinya,
   cuma ditambah variasi warna & animasi halus di atasnya.
   ══════════════════════════════════════════════════════════════════ */

/* ─── Kartu: aksen gradient tipis di atas saat hover — bikin grid
   produk/stat kelihatan lebih hidup tanpa ganggu keterbacaan ────── */
.card, .product-card, .stat-card, .service-card {
  position: relative;
}
.card::before, .product-card::before, .stat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 14px; right: 14px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: var(--grad-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease-bounce);
  pointer-events: none;
}
.card:hover::before, .product-card:hover::before, .stat-card:hover::before { transform: scaleX(1); }
.stat-card.stat-highlight::before { display: none; }

/* ─── Tombol: sapuan cahaya halus saat hover (bukan cuma brightness) ── */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: "";
  position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
  pointer-events: none;
}
.btn:hover::after { left: 120%; }
.btn-info { background: var(--grad-info); color: #fff; box-shadow: 0 4px 14px rgba(14,165,233,0.32); }
.btn-info:hover { filter: brightness(1.06); text-decoration: none; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(14,165,233,0.4); }

/* ─── Badge: sedikit lebih hidup dengan glow warna lembut ───────────── */
.badge-success { box-shadow: 0 0 0 1px rgba(23,178,106,0.12) inset; }
.badge-danger { box-shadow: 0 0 0 1px rgba(240,69,62,0.12) inset; }
.badge-warn { box-shadow: 0 0 0 1px rgba(255,157,46,0.14) inset; }
.badge-info { box-shadow: 0 0 0 1px rgba(91,91,240,0.12) inset; }

/* ─── Stat card: varian warna semantik (dipasang lewat class tambahan
   di kartu yang memang punya makna sukses/pending/gagal/info — kartu
   yang tidak diberi class tambahan tetap netral seperti sebelumnya) ── */
.stat-card--success .stat-icon { background: var(--success-bg); color: var(--success); }
.stat-card--success .stat-value { color: var(--success); }
.stat-card--danger .stat-icon { background: var(--danger-bg); color: var(--danger); }
.stat-card--danger .stat-value { color: var(--danger); }
.stat-card--warn .stat-icon { background: var(--warn-bg); color: var(--accent-dark); }
.stat-card--warn .stat-value { color: var(--accent-dark); }
.stat-card--info .stat-icon { background: var(--info-bg); color: var(--info-dark); }
.stat-card--info .stat-value { color: var(--info-dark); }
.stat-card--pink .stat-icon { background: var(--pink-bg); color: var(--pink); }
.stat-card--pink .stat-value { color: var(--pink); }

/* ─── Kategori produk: variasi warna chip biar grid katalog kelihatan
   lebih colorful — murni cyclical lewat urutan kartu, tidak bergantung
   isi kategori aslinya (jadi aman untuk kategori apa pun dari Bert
   Store/produk manual, tidak perlu daftar warna per nama kategori) ── */
.product-card:nth-of-type(5n+1) .cat { background: var(--primary-light); color: var(--primary-dark); }
.product-card:nth-of-type(5n+2) .cat { background: var(--teal-bg); color: var(--teal); }
.product-card:nth-of-type(5n+3) .cat { background: var(--pink-bg); color: var(--pink); }
.product-card:nth-of-type(5n+4) .cat { background: var(--warn-bg); color: var(--accent-dark); }
.product-card:nth-of-type(5n+5) .cat { background: var(--info-bg); color: var(--info-dark); }

/* ─── Wallet chip & hero banner: kilau halus bergerak — elemen andalan
   (saldo dompet, kode referral, saldo Bert Store) dibuat sedikit
   "hidup" tanpa mengganggu keterbacaan angka di dalamnya ──────────── */
.wallet-chip::before {
  content: "";
  position: absolute; top: 0; left: -30%;
  width: 30%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.16), transparent);
  transform: skewX(-20deg);
  animation: chipShine 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes chipShine {
  0%, 100% { left: -30%; }
  50% { left: 130%; }
}

/* ─── Bottom-nav: item aktif dapat "blob" warna lembut di belakang
   ikon (bukan cuma teks gradient) + pantulan halus saat pindah tab ── */
.bottom-nav-item { position: relative; }
.bottom-nav-item .bn-icon { position: relative; z-index: 1; }
.bottom-nav-item.active .bn-icon::before {
  content: "";
  position: absolute;
  inset: -8px -14px;
  background: var(--primary-light);
  border-radius: 14px;
  z-index: -1;
  animation: navBlobIn 0.3s var(--ease-bounce);
}
@keyframes navBlobIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.bottom-nav-item:active .bn-icon { transform: scale(0.88); }

/* Setiap tab dapat warna aktif berbeda (bukan cuma ungu semua) — Belanja
   teal, Wallet oranye (senada .coin di wallet-chip), Cek hijau (senada
   ikon ✅-nya sendiri), Pengaturan pink — Home tetap ungu (default). */
.bottom-nav-item:nth-child(2).active { background: var(--grad-info); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.bottom-nav-item:nth-child(2).active .bn-icon::before { background: var(--info-bg); }
.bottom-nav-item:nth-child(3).active { background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.bottom-nav-item:nth-child(3).active .bn-icon::before { background: var(--warn-bg); }
.bottom-nav-item:nth-child(4).active { background: var(--grad-success); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.bottom-nav-item:nth-child(4).active .bn-icon::before { background: var(--success-bg); }
.bottom-nav-item:nth-child(5).active { background: var(--grad-pink); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.bottom-nav-item:nth-child(5).active .bn-icon::before { background: var(--pink-bg); }

/* ─── Sub-tabs & tab kategori katalog: transisi lebih kenyal ───────── */
.sub-tab-btn, .tab-btn { transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.15s var(--ease-bounce); }
.sub-tab-btn.active, .tab-btn.active { transform: translateY(-1px); }

/* ─── Baris tabel: aksen warna kiri halus saat hover, biar tabel
   panjang (riwayat/orders/redemptions) enak dipindai matanya ──────── */
tbody tr { position: relative; }
tbody tr:hover { box-shadow: inset 3px 0 0 var(--primary); }

/* ─── Masuk halaman lebih hidup: grid produk/stat muncul bertahap
   (stagger), animasi ringan berbasis CSS murni (tanpa JS tambahan) ── */
.grid > *, .stat-grid > * {
  animation: cardRise 0.4s ease both;
}
.grid > *:nth-child(1), .stat-grid > *:nth-child(1) { animation-delay: 0.02s; }
.grid > *:nth-child(2), .stat-grid > *:nth-child(2) { animation-delay: 0.06s; }
.grid > *:nth-child(3), .stat-grid > *:nth-child(3) { animation-delay: 0.1s; }
.grid > *:nth-child(4), .stat-grid > *:nth-child(4) { animation-delay: 0.14s; }
.grid > *:nth-child(5), .stat-grid > *:nth-child(5) { animation-delay: 0.18s; }
.grid > *:nth-child(n+6), .stat-grid > *:nth-child(n+6) { animation-delay: 0.2s; }
@keyframes cardRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .grid > *, .stat-grid > *, .bottom-nav-item.active .bn-icon::before, .wallet-chip::before { animation: none; }
}