/* ==========================================================
   AETHERIA PAYGATE - COMBINED NIDALOPBOT STYLES
   ========================================================== */
/* ==============================================
   AUTO ORDER DIGITAL STORE
   Modern SaaS Dashboard UI — Dark/Light Theme
   Palette: near-black base + electric blue accent only
   ============================================== */

:root {
  --bg: #08090d;
  --bg-soft: #0d0f14;
  --surface: rgba(18, 20, 27, 0.75);
  --surface-solid: #13151c;
  --border: rgba(255, 255, 255, 0.08);
  --accent: #2f6fed;
  --accent-2: #38bdf8;
  --accent-soft: rgba(47, 111, 237, 0.14);
  --accent-glow: rgba(47, 111, 237, 0.45);
  --gradient: linear-gradient(135deg, #1d4ed8 0%, #2f6fed 60%, #38bdf8 100%);
  --text: #f2f0fb;
  --text-dim: #948fb0;
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.14);
  --success: #34d399;
  --success-soft: rgba(52, 211, 153, 0.14);
  --warning: #fbbf24;
  --warning-soft: rgba(251, 191, 36, 0.14);
  --radius: 28px;
  --radius-lg: 32px;
  --radius-sm: 16px;
  --radius-xs: 12px;
  --font-display: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --shadow-card: 0 10px 34px rgba(10, 6, 25, 0.35);
  --page-glow: rgba(47, 111, 237, 0.13);
  --grid-line: rgba(56, 130, 246, 0.07);
  color-scheme: dark;
}

/* ---------- Permanent Dark Mode Enforcement (No light mode) ---------- */
.theme-toggle {
  display: none !important;
}

/* ---------- Animasi masuk (entrance animations) ----------
   Dipasang otomatis lewat initPage() di common.js (fungsi animateEntrance()).
   Variasi arah: naik dari bawah, turun dari atas, geser kiri, geser kanan, scale-in.
   Delay per elemen diatur lewat CSS var --stagger-delay biar bisa staggered (satu-satu). */
@keyframes enterUp    { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes enterDown  { from { opacity: 0; transform: translateY(-22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes enterLeft  { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: translateX(0); } }
@keyframes enterRight { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: translateX(0); } }
@keyframes enterScale { from { opacity: 0; transform: scale(.92) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.anim-up, .anim-down, .anim-left, .anim-right, .anim-scale {
  animation-duration: .6s;
  animation-timing-function: cubic-bezier(.16, .8, .24, 1);
  animation-fill-mode: both;
  animation-delay: var(--stagger-delay, 0s);
}
.anim-up    { animation-name: enterUp; }
.anim-down  { animation-name: enterDown; animation-duration: .5s; }
.anim-left  { animation-name: enterLeft; }
.anim-right { animation-name: enterRight; }
.anim-scale { animation-name: enterScale; animation-duration: .5s; }

@media (prefers-reduced-motion: reduce) {
  .anim-up, .anim-down, .anim-left, .anim-right, .anim-scale {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
}

/* ---------- Custom Cursor ---------- */
html, body {
  cursor: url('/public/img/cursor-arrow.svg') 3 2, auto;
}
a, button, .btn, input[type="checkbox"], input[type="radio"], .switch, [role="button"], .clickable {
  cursor: url('/public/img/cursor-arrow.svg') 3 2, pointer;
}

body {
  margin: 0;
  /* 16 Okt: glow + grid cuma di BAGIAN ATAS halaman dan ikut ke-scroll (bukan
     fixed) -- kayak landing: pas scroll ke bawah efeknya naik & hilang, sisanya
     polos. */
  background-color: var(--bg);
  background-image: radial-gradient(900px 480px at 75% -8%, var(--page-glow), transparent 62%);
  background-repeat: no-repeat;
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Grid tipis di atas halaman (absolute -> ikut scroll), memudar ke bawah.
   z-index:-1 -> selalu di belakang konten, gak nutupin klik. */
body::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 620px; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%),
                      radial-gradient(ellipse at 50% 0%, #000 30%, transparent 90%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to bottom, #000 0%, transparent 100%),
                      radial-gradient(ellipse at 50% 0%, #000 30%, transparent 90%);
          mask-composite: intersect;
}

a { color: inherit; text-decoration: none; }

/* ---------- Layout ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 252px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--surface-solid) 78%, transparent);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border-right: 1px solid var(--border);
  padding: 24px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  /* FIX: menu makin panjang (Reseller, Website Auto, GoPay/NPay Pribadi,
     Casaku Monitor, dll) jadi kepotong & gak kejangkau di laptop/desktop
     Chrome karena tingginya dipatok 100vh tanpa overflow -- sekarang bisa
     di-scroll sendiri di dalam sidebar-nya. */
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar .brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  letter-spacing: 0.2px;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}
.sidebar .brand span:last-child {
  overflow: hidden;
  min-width: 0;
}
#sidebar-brand-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* FITUR SELLER & RESELLER — wrapper nama + badge pill di bawahnya (dipakai
   di sidebar brand & mobile app-bar brand, gantiin span teks polos). */
.brand-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
  min-width: 0;
}
.role-pill-row { display: flex; gap: 4px; }
.role-pill-row:empty { display: none; }
.role-pill {
  display: inline-flex;
  align-items: center;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 1px 7px;
  border-radius: 999px;
  line-height: 1.5;
}
.role-pill-seller { background: rgba(56, 189, 248, 0.16); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.35); }
.role-pill-reseller { background: rgba(34, 197, 94, 0.16); color: #22c55e; border: 1px solid rgba(34, 197, 94, 0.35); }

/* Avatar bulat: foto profil kalau ada, kalau tidak tampil inisial username
   atau ikon default. Dipakai di sidebar brand & mobile app-bar brand. */
.brand-avatar {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  overflow: hidden;
  box-shadow: 0 4px 12px var(--accent-glow);
}
.brand-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mobile-appbar-brand .brand-avatar { width: 42px; height: 42px; font-size: 15px; }

.sidebar nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-xs);
  background: var(--bg-soft);
  border: 1px solid transparent;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  transition: all 0.15s ease;
}

.sidebar nav a:hover { background: var(--accent-soft); color: var(--text); border-color: var(--accent-glow); }
.sidebar nav a.active {
  background: var(--gradient);
  color: #fff;
  box-shadow: 0 6px 18px var(--accent-glow);
}

.sidebar .logout-link { margin-top: 24px; color: var(--danger); }

/* MASA SEWA — tab "Setting Telegram" dikunci (merah + ikon gembok) kalau
   masa sewa admin sudah habis. */
.sidebar nav a.nav-expired-lock {
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
  border-color: var(--danger) !important;
  cursor: not-allowed;
}
.sidebar nav a.nav-expired-lock.active { background: var(--danger-soft) !important; box-shadow: none; }
.nav-lock-icon { margin-left: auto; display: inline-flex; }

/* FITUR: menu "Bot WhatsApp" dikunci (merah + ikon gembok) kalau owner belum
   buka akses admin ini lewat toggle di halaman Kelola Admin. */
.sidebar nav a.nav-whatsapp-lock {
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
  border-color: var(--danger) !important;
  cursor: not-allowed;
}
.sidebar nav a.nav-whatsapp-lock.active { background: var(--danger-soft) !important; box-shadow: none; }

.role-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: center;
}

.theme-toggle {
  display: none !important;
}

.main {
  flex: 1;
  padding: 28px 32px;
  max-width: 100%;
  overflow-x: hidden;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.topbar > div:first-child { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
.topbar h1 { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.2px; margin: 0; }
.topbar .subtitle { flex: 1 0 100%; color: var(--text-dim); font-size: 13px; margin-top: 0; }

/* ---------- Glass cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-card);
}

.grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }

/* FITUR: Statistik Kunjungan — 2 kolom di layar lebar, 1 kolom di mobile (media query grid-stats di bawah udah nangani breakpoint-nya juga). */
.grid-2col { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) {
  .grid-2col { grid-template-columns: 1fr; }
}
.empty-hint { text-align: center; color: var(--text-dim); font-size: 13px; padding: 20px 10px; }

.stat-card { padding: 18px 20px; position: relative; overflow: hidden; }
.stat-card .label { color: var(--text-dim); font-size: 13px; margin-bottom: 6px; font-weight: 500; position: relative; z-index: 1; }
.stat-card .value { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--text); position: relative; z-index: 1; }
.stat-card .value .status-text-value { font-size: 16px; font-weight: 600; vertical-align: middle; }
.stat-card .card-icon {
  position: absolute;
  top: 8px; right: -8px;
  width: 76px; height: 76px;
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
  color: var(--accent);
}
/* Warna ikon samar mengikuti makna (rev v6.0): pojok KANAN ATAS, bukan tengah. */
.stat-card .card-icon[data-icon="clock"], .stat-card .card-icon[data-icon="box"] { color: #f59e0b; }
.stat-card .card-icon[data-icon="check"], .stat-card .card-icon[data-icon="bank"], .stat-card .card-icon[data-icon="trending-up"] { color: #22c55e; }
.stat-card .card-icon[data-icon="user"] { color: #a78bfa; }
.stat-card .card-icon[data-icon="heart"] { color: #f472b6; }
.stat-card .card-icon svg { width: 100%; height: 100%; stroke-width: 1.5; }

@media (max-width: 700px) {
  .grid-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-card { padding: 14px 12px; }
  .stat-card .value { font-size: 19px; }
  .stat-card .label { font-size: 11px; }
  .stat-card .card-icon { width: 52px; height: 52px; top: 6px; right: -6px; }
}

/* Kartu yang harus selalu memanjang satu baris penuh (bukan setengah), meskipun
   ada di dalam grid 2-kolom pada layar kecil — mis. Status Bot, Total Transaksi. */
.stat-card-wide { grid-column: 1 / -1; }

/* ---------- Balance bar (saldo akun / pencairan / jam WIB) ---------- */
.balance-bar {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 16px;
  margin-bottom: 20px;
  align-items: center;
}
.balance-item { padding: 16px 20px; display: flex; align-items: center; gap: 14px; }
.balance-item .card-icon-static {
  width: 42px; height: 42px; flex: none;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent);
}
.balance-item.pencairan .card-icon-static { background: var(--success-soft); color: var(--success); }
.balance-item .label { color: var(--text-dim); font-size: 12.5px; font-weight: 500; margin-bottom: 3px; }
.balance-item .value { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--text); }
.balance-item.clock-item { justify-content: center; text-align: center; flex-direction: column; gap: 4px; min-width: 150px; }
.balance-item.clock-item .value { font-size: 22px; letter-spacing: 0.5px; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  .balance-bar { grid-template-columns: 1fr 1fr; gap: 10px; }
  .balance-item { padding: 12px 14px; gap: 10px; }
  .balance-item .card-icon-static { width: 36px; height: 36px; }
  .balance-item .label { font-size: 11px; }
  .balance-item .value { font-size: 16px; }
  .balance-item.clock-item {
    grid-column: 1 / -1;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    min-width: 0;
  }
  .balance-item.clock-item .label { font-size: 12px; }
  .balance-item.clock-item .value { font-size: 21px; }
}

/* ---------- Revenue / buyers chart ---------- */
.chart-card { margin-bottom: 24px; }
.chart-legend { display: flex; gap: 18px; align-items: center; }
.chart-legend .dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-dim); }
.chart-legend .dot::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--dot-color, var(--accent));
}
.chart-legend .dot.buyers::before { --dot-color: var(--success); }
.chart-wrap { position: relative; height: 260px; margin-top: 8px; }
.chart-wrap canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }
.chart-tooltip {
  display: none;
  position: absolute;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text);
  pointer-events: none;
  box-shadow: var(--shadow-card);
  white-space: nowrap;
  z-index: 2;
}
.chart-tooltip .tt-date { font-weight: 600; margin-bottom: 4px; color: var(--text-dim); font-size: 11px; }
.chart-tooltip .tt-row { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.chart-tooltip .tt-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
@media (max-width: 700px) {
  .chart-wrap { height: 220px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn:hover { box-shadow: 0 0 0 1px var(--accent-glow), 0 0 18px var(--accent-glow); transform: translateY(-1px); }
.btn-primary { background: var(--gradient); color: #fff; border-color: transparent; box-shadow: 0 6px 16px var(--accent-glow); }
.btn-primary:hover { filter: brightness(1.08); }

/* Tombol "teks doang" warna biru, tanpa kotak/background/border -- dipake
   buat aksi Copy yang gak perlu keliatan "berat" kayak tombol biasa. */
.btn-copy-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.btn-copy-text:hover { filter: brightness(1.15); text-decoration: underline; }
.btn-copy-text svg, .btn-copy-text [data-icon] { color: var(--accent); }

/* ==========================================================
   Gateway picker — "Gateway QRIS Saya" di halaman Profil, admin
   milih sendiri mau pake gateway shared/NPay Pribadi/GoPay Pribadi.
   Segmented option cards, bukan <select> polos, biar status tiap
   opsi (aktif/kepilih/kekunci) langsung keliatan tanpa buka dropdown.
   ========================================================== */
.gateway-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gateway-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--surface-solid);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.gateway-option:hover:not(.is-locked) { border-color: var(--accent); transform: translateY(-1px); }
.gateway-option.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.gateway-option.is-locked {
  cursor: not-allowed;
  opacity: 0.5;
}
.gateway-option-dot {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease;
}
.gateway-option.is-selected .gateway-option-dot { border-color: var(--accent); background: var(--gradient); }
.gateway-option-dot::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform 0.15s ease;
}
.gateway-option.is-selected .gateway-option-dot::after { transform: scale(1); }
.gateway-option-body { flex: 1; min-width: 0; }
.gateway-option-title { font-weight: 600; font-size: 14.5px; display: flex; align-items: center; gap: 8px; }
.gateway-option-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.gateway-option-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
}
.gateway-option-badge.active { background: var(--success-soft); color: var(--success); }
.gateway-option-badge.locked { background: var(--warning-soft); color: var(--warning); }
.btn-danger { background: var(--danger-soft); color: var(--danger); border-color: rgba(248,113,113,0.3); }
.btn-ghost { background: transparent; color: var(--text-dim); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.wa-action-row { display: flex; gap: 10px; }
/* FITUR: tombol "Run" (▶) khusus start bot WhatsApp -- ijo, lebar penuh,
   ikon segitiga ke kanan + teks di tengah. */
.wa-run-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(34, 197, 94, 0.35);
  margin-bottom: 16px;
}
.wa-run-btn:hover { filter: brightness(1.08); }
.wa-run-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  flex-shrink: 0;
}


/* ---------- Forms ---------- */
input, select, textarea {
  width: 100%;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font-body);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
label { font-size: 12px; color: var(--text-dim); margin-bottom: 6px; display: block; }
.form-group { margin-bottom: 14px; }

/* ---------- Toggle switch (ganti checkbox polos) ---------- */
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  margin-bottom: 14px;
  padding: 11px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.switch-row span:first-child { font-size: 13px; color: var(--text); }
.switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch .slider {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.switch .slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 2px;
  top: 2px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease;
}
.switch input:checked + .slider { background: var(--gradient); border-color: transparent; }
.switch input:checked + .slider::before { transform: translateX(18px); }
.switch input:focus-visible + .slider { box-shadow: 0 0 0 3px var(--accent-soft); }

/* FITUR SELLER & RESELLER — versi mini switch dipakai di kolom tabel Kelola
   Admin (Role & Verifikasi), lebih kompak dari .switch-row biasa yang
   dirancang buat card setting full-width. */
.mini-switch-row {
  margin-bottom: 0;
  padding: 4px 8px;
  gap: 8px;
}
.mini-switch-row span:first-child { font-size: 11px; white-space: nowrap; }
.mini-switch { width: 32px; height: 18px; }
.mini-switch .slider::before { width: 13px; height: 13px; left: 2px; top: 1.5px; }
.mini-switch input:checked + .slider::before { transform: translateX(14px); }

/* FITUR SELLER & RESELLER — badge status ringkas Seller/Reseller di kolom
   tabel Kelola Admin (2 badge independen bisa muncul bareng). */
.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 600;
}
.role-badge-seller { background: rgba(56,189,248,0.14); color: #38bdf8; border: 1px solid rgba(56,189,248,0.35); }
.role-badge-reseller { background: rgba(139,92,246,0.14); color: #a78bfa; border: 1px solid rgba(139,92,246,0.35); }

/* ---------- Upload box (banner / gambar broadcast) ---------- */
.upload-box {
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  overflow: hidden;
}
.upload-box-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 26px 16px;
  cursor: pointer;
  color: var(--text-dim);
  text-align: center;
  transition: all 0.15s ease;
}
.upload-box-empty:hover { color: var(--accent); background: var(--accent-soft); }
.upload-box-empty .upload-label { font-size: 13px; font-weight: 600; }
.upload-box-empty .upload-hint { font-size: 11px; opacity: 0.75; }
.upload-box-preview { position: relative; line-height: 0; }
.upload-box-preview img { display: block; width: 100%; max-height: 180px; object-fit: cover; }
.upload-remove-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(10, 8, 20, 0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: all 0.15s ease;
}
.upload-remove-btn:hover { background: var(--danger); border-color: var(--danger); }
.upload-preview-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 8px;
}
.upload-preview-actions .upload-remove-btn { position: static; }

/* ---------- Custom Background QR: D-pad (posisi) + zoom (ukuran) ----------
   Ganti 3 slider % lama -> tombol nudge (tiap klik geser QRBG_STEP_PCT%),
   lihat setupQrBgInput()/nudgeQrBgValue() di views/profile.html. */
.qrbg-round-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.qrbg-round-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.qrbg-round-btn:active { transform: scale(0.92); }
.qrbg-zoom-pad { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.qrbg-zoom-pad .qrbg-zoom-label { font-size: 11.5px; color: var(--text-dim); min-width: 32px; text-align: center; }

.qrbg-dpad {
  display: grid;
  grid-template-columns: 40px 40px 40px;
  grid-template-rows: 40px 40px 40px;
  gap: 4px;
  flex-shrink: 0;
}
.qrbg-dpad-btn {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}
.qrbg-dpad-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.qrbg-dpad-btn:active { transform: scale(0.92); }
.qrbg-dpad-up { grid-column: 2; grid-row: 1; }
.qrbg-dpad-left { grid-column: 1; grid-row: 2; }
.qrbg-dpad-right { grid-column: 3; grid-row: 2; }
.qrbg-dpad-down { grid-column: 2; grid-row: 3; }
/* Label X/Y non-interaktif di tengah D-pad (ganti tombol "tengahkan" lama --
   fungsi reset-nya dipindah ke tombol "Tengah" kecil di bawah D-pad). */
.qrbg-dpad-center {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 8.5px;
  line-height: 1.35;
  color: var(--text-dim);
  font-weight: 600;
  letter-spacing: 0.2px;
  pointer-events: none;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border);
}

/* ---------- Crop modal (broadcast image) ---------- */
.crop-stage {
  position: relative;
  display: inline-block;
  max-width: 100%;
  max-height: 68vh;
  overflow: visible;
  border-radius: var(--radius-sm);
  background: #000;
  touch-action: none;
  user-select: none;
  line-height: 0;
}
.crop-stage img { display: block; max-width: 100%; max-height: 68vh; pointer-events: none; border-radius: var(--radius-sm); }
/* 4 kotak gelap di sekeliling crop-box (ganti trik box-shadow lama) — dipakai
   supaya .crop-stage bisa overflow:visible, jadi handle di pojok gak kepotong
   lagi pas crop-box-nya nempel di tepi gambar. Posisi/ukuran di-set lewat JS. */
.crop-dim { position: absolute; background: rgba(0, 0, 0, 0.6); pointer-events: none; }
.crop-box {
  position: absolute;
  border: 2px solid var(--accent, #7c5cff);
  cursor: move;
  touch-action: none;
  box-sizing: border-box;
}
/* Garis bantu rule-of-thirds (3x3), murni visual biar enak diliat & gampang nge-align */
.crop-grid-line { position: absolute; background: rgba(255, 255, 255, 0.55); pointer-events: none; }
.crop-grid-line.v1 { left: 33.333%; top: 0; width: 1px; height: 100%; }
.crop-grid-line.v2 { left: 66.666%; top: 0; width: 1px; height: 100%; }
.crop-grid-line.h1 { top: 33.333%; left: 0; width: 100%; height: 1px; }
.crop-grid-line.h2 { top: 66.666%; left: 0; width: 100%; height: 1px; }
.crop-handle {
  position: absolute;
  width: 22px;
  height: 22px;
  margin: -11px;
  background: var(--accent, #7c5cff);
  border: 2px solid #fff;
  border-radius: 50%;
  touch-action: none;
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.15);
}
.crop-handle.nw { top: 0; left: 0; cursor: nwse-resize; }
.crop-handle.ne { top: 0; right: 0; left: auto; margin-left: 0; cursor: nesw-resize; }
.crop-handle.sw { bottom: 0; left: 0; top: auto; margin-top: 0; cursor: nesw-resize; }
.crop-handle.se { bottom: 0; right: 0; top: auto; left: auto; margin-top: 0; margin-left: 0; cursor: nwse-resize; }

/* ---------- Fix: baris nominal withdraw keluar jalur di layar sempit ---------- */
.withdraw-row { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.withdraw-row input { flex: 1 1 160px; min-width: 0; height: 42px; }
.withdraw-row .btn { flex-shrink: 0; }
@media (max-width: 480px) {
  .withdraw-row { flex-direction: column; }
  .withdraw-row input { flex: 0 0 auto; width: 100%; }
  .withdraw-row .btn { width: 100%; justify-content: center; }
}

/* ---------- Table ---------- */
#table-wrap, .scroll-table-wrap, .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
#table-wrap table, .scroll-table-wrap table, .table-wrap table { min-width: 560px; }
#table-wrap table.products-table { min-width: 880px; }
@media (max-width: 700px) {
  #table-wrap, .scroll-table-wrap, .table-wrap {
    margin: 0;
    padding: 0;
  }
}
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  text-align: left;
  color: var(--text-dim);
  font-weight: 600;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
tbody td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
tbody tr:hover { background: var(--accent-soft); }

.badge { padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-active { background: var(--success-soft); color: var(--success); }
.badge-inactive { background: var(--danger-soft); color: var(--danger); }
.badge-telegram { background: var(--accent-soft); color: var(--accent); }
.badge-website { background: var(--danger-soft); color: var(--danger); }

/* ---------- Tabel Transaksi Terbaru (dashboard) ---------- */
.price-cell { color: var(--success); font-weight: 700; font-variant-numeric: tabular-nums; }
.badge-metode {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  background: var(--accent-soft);
  color: var(--accent-2);
  border: 1px solid rgba(56, 189, 248, 0.25);
}
.badge-metode.saldo { background: var(--accent-soft); color: var(--accent-2); }
.badge-metode.qris { background: var(--accent-soft); color: var(--accent); }
.badge-id-tele {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.2px;
  background: rgba(167, 139, 250, 0.14);
  color: #a78bfa;
  border: 1px solid rgba(167, 139, 250, 0.3);
}

/* ---------- Tabel Riwayat Transaksi ---------- */
.price-cell-yellow { color: var(--warning); font-weight: 700; font-variant-numeric: tabular-nums; }
.id-tele-value { color: #a78bfa; font-weight: 600; }
.btn-sm { padding: 6px 12px; font-size: 12px; }

/* ---------- Icon-only square buttons (aksi tabel: hapus/perpanjang/saldo) ---------- */
.table-actions { display: flex; gap: 6px; }
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--accent-soft);
  color: var(--accent);
  cursor: pointer;
  transition: all 0.15s ease;
}
.icon-btn:hover { box-shadow: 0 0 0 1px var(--accent-glow), 0 0 14px var(--accent-glow); transform: translateY(-1px); }
.icon-btn.danger { background: var(--danger-soft); color: var(--danger); border-color: rgba(248, 113, 113, 0.3); }
.icon-btn.danger:hover { box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.4), 0 0 14px rgba(248, 113, 113, 0.35); }
/* Versi kecil & bulat -- dipake buat tombol Copy per-baris tabel (mis. All
   Transaksi) yang sebelumnya cuma ikon polos tanpa kotak/lingkaran sama
   sekali, keliatan terlalu "nempel"/polos di antara teks lain. */
.icon-btn.sm { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; }

/* Tombol toggle akses Bot WhatsApp per-admin di kolom Aksi (Kelola Admin):
   ijo = sudah dibuka owner, abu-abu = masih terkunci. */
.icon-btn.wa-access-on { background: rgba(74, 222, 128, 0.12); color: #4ade80; border-color: rgba(74, 222, 128, 0.3); }
.icon-btn.wa-access-on:hover { box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.4), 0 0 14px rgba(74, 222, 128, 0.35); }
.icon-btn.wa-access-off { background: rgba(148, 163, 184, 0.1); color: #94a3b8; border-color: rgba(148, 163, 184, 0.25); }

/* Grup tombol "Akses" (WA | Website) di kolom Aksi halaman Kelola Admin —
   dua toggle kunci/buka ditaruh bersebelahan di bawah satu judul kecil. */
.akses-group { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.akses-group-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); }
.akses-group-buttons { display: flex; align-items: center; gap: 4px; }

/* FITUR: shell "terkunci" -- gembok gede merah transparan di tengah, isi
   card (form/pesan status) tetep keliatan samar di baliknya, gak
   disable/ketutup total (murni dekorasi visual nunjukin "belum aktif"). */
.locked-shell { position: relative; border: 1px solid rgba(239, 68, 68, 0.35); border-radius: 14px; overflow: hidden; }
.locked-shell-content { position: relative; z-index: 0; padding: 20px 16px; opacity: 0.45; filter: blur(0.3px); }
.locked-shell-overlay {
  position: absolute;
  inset: 0;
  background: rgba(239, 68, 68, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  cursor: not-allowed;
}
.locked-shell-badge {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}.status-payment-bar {
  background: var(--success-soft);
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 20px;
}
.status-payment-main { color: var(--success); font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.status-payment-sub {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(34, 197, 94, 0.25);
  color: #60a5fa;
  font-size: 12.5px;
  font-weight: 500;
}

/* ---------- Tabel All Transaksi ---------- */
/* ID pending (reff_id) — ungu, dipakai ulang warna yang sama kayak .badge-id-tele */
.badge-ref {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.2px;
  background: rgba(167, 139, 250, 0.14);
  color: #a78bfa;
  border: 1px solid rgba(167, 139, 250, 0.3);
  white-space: nowrap;
}
/* ---------- Halaman Withdraw: badge Tujuan (ewallet & QRIS) — ungu, dipencet buka detail ---------- */
.badge-tujuan {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  background: rgba(167, 139, 250, 0.14);
  color: #a78bfa;
  border: 1px solid rgba(167, 139, 250, 0.3);
  white-space: nowrap;
}
button.badge-tujuan { cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; }
button.badge-tujuan:hover { box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.4), 0 0 12px rgba(167, 139, 250, 0.3); transform: translateY(-1px); }
/* Withdraw yang udah diproses (disetujui/ditolak) -> badge Tujuan dikunci abu-abu,
   gak bisa dipencet lagi oleh siapapun (owner maupun admin pemilik), karena foto
   QRIS-nya sudah dihapus dari server begitu diproses (lihat withdrawal.controller.js). */
.badge-tujuan-disabled {
  background: rgba(148, 163, 184, 0.14);
  color: #94a3b8;
  border-color: rgba(148, 163, 184, 0.3);
  cursor: not-allowed;
}
.withdraw-note-sub { color: var(--text-dim); font-size: 11px; display: block; margin-top: 2px; }

/* ---------- Lightbox foto QRIS tujuan (halaman Withdraw) ---------- */
#qris-lightbox-img {
  border: 2px solid var(--accent-2);
  border-radius: 10px;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.15), 0 20px 50px rgba(0,0,0,0.4);
}

/* ---------- Modal detail withdraw e-wallet (text) ---------- */
.wd-detail-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }
.wd-detail-row:last-child { border-bottom: none; }
.wd-detail-row .label { color: var(--text-dim); }
.wd-detail-row .value { font-weight: 600; text-align: right; }
.wd-detail-copy-wrap { display: flex; align-items: center; gap: 8px; }
.wd-detail-copy-wrap .value { word-break: break-word; }

/* Nama toko — ijo, biar gampang bedain transaksi punya toko mana pas semua admin lihat semua transaksi */
.store-name-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--success-soft);
  color: var(--success);
  border: 1px solid rgba(34, 197, 94, 0.3);
  white-space: nowrap;
}
.badge-status { padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.badge-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-status.pending { background: var(--warning-soft); color: var(--warning); }
.badge-status.success { background: var(--success-soft); color: var(--success); }
.badge-status.expired, .badge-status.failed, .badge-status.cancelled { background: var(--danger-soft); color: var(--danger); }
/* dot pending berkedip pelan, biar kerasa "lagi jalan/nunggu" pas real-time */
.badge-status.pending::before { animation: badgeStatusPulse 1.4s ease-in-out infinite; }
@keyframes badgeStatusPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
/* baris yang baru berubah status (abis polling) kena highlight flash sebentar */
tbody tr.row-flash { animation: rowFlash 1.2s ease; }
@keyframes rowFlash { 0% { background: var(--accent-soft); } 100% { background: transparent; } }

/* ---------- Modal "Cek Akun" close-X ---------- */
.modal-close-x {
  position: absolute; top: 16px; right: 16px;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); border: 1px solid var(--border);
  color: var(--text-dim); cursor: pointer; transition: 0.15s;
}
.modal-close-x:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.modal-box { position: relative; }
.mono { font-family: 'Courier New', monospace; font-size: 11.5px; color: var(--text-dim); }

/* ---------- Saldo control widget (modal: tambah/kurang saldo) ---------- */
.saldo-widget {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  padding: 18px;
  margin-bottom: 18px;
}
.saldo-widget .saldo-target {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 2px;
}
.saldo-widget .saldo-current {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 16px;
}
.saldo-widget .saldo-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 4px 4px 14px;
  margin-bottom: 12px;
}
.saldo-widget .saldo-input-row span { color: var(--text-dim); font-size: 14px; font-weight: 600; }
.saldo-widget .saldo-input-row input {
  border: none;
  background: transparent;
  padding: 10px 6px;
  font-size: 16px;
  font-weight: 600;
}
.saldo-widget .saldo-input-row input:focus { box-shadow: none; }
.saldo-widget .saldo-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.saldo-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.saldo-btn.add { background: var(--gradient); color: #fff; box-shadow: 0 6px 16px var(--accent-glow); }
.saldo-btn.add:hover { filter: brightness(1.08); transform: translateY(-1px); }
.saldo-btn.sub { background: var(--danger-soft); color: var(--danger); border-color: rgba(248,113,113,0.3); }
.saldo-btn.sub:hover { background: rgba(248,113,113,0.2); transform: translateY(-1px); }
.saldo-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.saldo-widget .saldo-hint { font-size: 11.5px; color: var(--text-dim); margin-top: 10px; line-height: 1.5; }

/* ---------- Backup download progress ring ---------- */
.backup-progress-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
}
.backup-progress-ring { position: relative; width: 56px; height: 56px; flex-shrink: 0; }
.backup-progress-ring svg { width: 56px; height: 56px; transform: rotate(-90deg); }
.backup-progress-ring circle {
  fill: none;
  stroke-width: 5;
}
.backup-progress-ring .track { stroke: var(--border); }
.backup-progress-ring .fill {
  stroke: var(--accent-2);
  stroke-linecap: round;
  stroke-dasharray: 176;
  stroke-dashoffset: 176;
  transition: stroke-dashoffset 0.2s ease;
  filter: drop-shadow(0 0 4px var(--accent-glow));
}
.backup-progress-ring span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.backup-progress-label { font-size: 13px; color: var(--text-dim); }

/* ---------- Penyimpanan Database (Kelola Admin) ---------- */
.db-usage-wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 20px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  flex-wrap: nowrap;
}
.db-usage-ring { position: relative; width: 108px; height: 108px; flex-shrink: 0; }
.db-usage-ring svg { width: 108px; height: 108px; transform: rotate(-90deg); }
.db-usage-ring circle { fill: none; stroke-width: 9; }
.db-usage-ring .track { stroke: var(--border); }
.db-usage-ring .fill {
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 0.4s ease, stroke 0.4s ease;
}
.db-usage-ring .pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}
.db-usage-info { flex: 1; min-width: 0; }
.db-usage-info .project-name { font-size: 17px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.db-usage-info .plan-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: var(--accent-soft);
  color: var(--accent-2);
  border: 1px solid rgba(56, 189, 248, 0.25);
}
.db-usage-info .usage-line { margin-top: 8px; font-size: 14px; color: var(--text-dim); }
.db-usage-info .usage-line strong { color: var(--text); font-family: var(--font-display); }
.db-usage-info .usage-note { margin-top: 6px; font-size: 11.5px; color: var(--text-dim); }
@media (max-width: 480px) {
  .db-usage-wrap { padding: 14px; gap: 14px; }
  .db-usage-ring { width: 72px; height: 72px; }
  .db-usage-ring svg { width: 72px; height: 72px; }
  .db-usage-ring .pct { font-size: 15px; }
  .db-usage-info .project-name { font-size: 14px; }
  .db-usage-info .usage-line { font-size: 12.5px; }
  .db-usage-info .usage-note { font-size: 10.5px; }
}

/* Fitur "Sampah Data Pembeli" — animasi loading pas manual hapus lagi
   jalan (dipanggil dari views/admins.html -> runTrashDelete). Ring merah
   muter + ikon tong sampah pulsing di tengah, biar kerasa "kece" & beda
   dari loading-overlay biasa. */
.trash-delete-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 34px 20px; }
.trash-delete-loading .trash-spin-ring { position: relative; width: 64px; height: 64px; }
.trash-delete-loading .trash-spin-ring svg { width: 64px; height: 64px; animation: trashRingSpin 1.1s linear infinite; }
.trash-delete-loading .trash-spin-ring circle { fill: none; stroke: var(--danger); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 122 41; }
.trash-delete-loading .trash-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--danger); animation: trashPulse 1s ease-in-out infinite; }
.trash-delete-loading .trash-delete-label { font-size: 13px; color: var(--text-dim); font-weight: 600; }
@keyframes trashRingSpin { to { transform: rotate(360deg); } }
@keyframes trashPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.8); opacity: 0.55; } }

/* ---------- Toast ---------- */
#toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; }
.toast {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  min-width: 240px;
  box-shadow: var(--shadow-card);
  animation: slideIn 0.25s ease;
  color: var(--text);
}
.toast.error { border-left-color: var(--danger); }
.toast.success { border-left-color: var(--success); }
@keyframes slideIn { from { transform: translateX(30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(10,6,20,0.6);
  display: none; align-items: center; justify-content: center; z-index: 1000;
  backdrop-filter: blur(4px);
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  width: 420px;
  max-width: 92vw;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.modal-box h2 { margin-top: 0; font-family: var(--font-display); font-size: 17px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* FITUR: animasi Verifikasi Wajah (dipakai bareng di login.html & profile.html) —
   border berdenyut + garis scan nyapu naik-turun selama proses deteksi,
   plus centang hijau muncul pas berhasil. */
.face-scan-wrap {
  position: relative;
  margin: 0 auto 12px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.face-scan-wrap video { width: 100%; display: block; transform: scaleX(-1); background: #000; }
.face-scan-wrap.scanning {
  border-color: var(--accent);
  animation: faceScanPulse 1.6s ease-in-out infinite;
}
@keyframes faceScanPulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--accent-soft); }
  50% { box-shadow: 0 0 0 7px var(--accent-soft); }
}
.face-scan-line {
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0; pointer-events: none;
}
.face-scan-wrap.scanning .face-scan-line {
  opacity: 1;
  animation: faceScanSweep 1.6s ease-in-out infinite;
}
@keyframes faceScanSweep {
  0% { top: 0; }
  50% { top: calc(100% - 3px); }
  100% { top: 0; }
}
.face-scan-success-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(34, 197, 94, 0.22);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s;
}
.face-scan-wrap.success .face-scan-success-overlay { opacity: 1; }
.face-scan-success-overlay svg {
  width: 62px; height: 62px;
  filter: drop-shadow(0 2px 8px rgba(34, 197, 94, 0.6));
  transform: scale(0);
}
.face-scan-wrap.success .face-scan-success-overlay svg {
  animation: faceCheckPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes faceCheckPop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.face-scan-wrap.error { animation: faceScanShake 0.4s ease-in-out; }
@keyframes faceScanShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* FITUR: tombol "buku" kecil di sebelah judul card -- klik buka modal isinya
   penjelasan lengkap (gantiin paragraf .subtitle yang dulu selalu keliatan). */
.info-book-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-solid);
  color: var(--text-dim);
  cursor: pointer;
  flex-shrink: 0;
}
.info-book-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- Loading ---------- */
.spinner {
  width: 18px; height: 18px; border: 2px solid var(--accent-soft);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin 0.7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 0.8s linear infinite; display: inline-block; }
.loading-overlay { display: flex; align-items: center; justify-content: center; padding: 40px; color: var(--text-dim); gap: 10px; flex-wrap: wrap; text-align: center; }
.spinner-lg { width: 38px; height: 38px; border-width: 3px; }

/* ---------- Tombol X buat nutup modal (dipake Generate Bot Otomatis) --
   REUSE .modal-overlay/.modal-box/.open yang UDAH ADA (lihat blok "Modal"
   di atas) -- JANGAN pernah bikin rule .modal-overlay baru lagi di sini,
   itu bakal NABRAK & bikin SEMUA modal di seluruh web (Anggota, Orders,
   Products, Profile, Transactions, Users, dst -- 13 halaman pake class
   yang sama) jadi stuck kebuka terus/gak bisa ditutup, karena display:flex
   bakal menang di cascade atas .modal-overlay.open toggle-nya. Bug ini
   PERNAH KEJADIAN 28 Sep gara-gara ada duplikat rule .modal-overlay di
   sini, udah dihapus & jangan diulang. ---------- */
.modal-close-btn {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--text-dim);
  font-size: 20px; line-height: 1; cursor: pointer; border-radius: 8px;
}
.modal-close-btn:hover { color: var(--text); background: var(--accent-soft); }

/* ---------- Skeleton Loading (ganti spinner muter) ---------- */
@keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

.skeleton-block { background: var(--accent-soft); border-radius: 8px; animation: skeleton-pulse 1.4s ease-in-out infinite; }

/* Varian 1: baris data (list/tabel) — avatar bulat + 2 bar teks + dot pojok */
.skeleton-row-group { display: flex; flex-direction: column; gap: 4px; }
.skeleton-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 4px; }
.skeleton-row .skeleton-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.skeleton-row .skeleton-lines { flex: 1; min-width: 0; }
.skeleton-row .skeleton-line-1 { height: 14px; width: 55%; margin-bottom: 8px; }
.skeleton-row .skeleton-line-2 { height: 12px; width: 85%; }
.skeleton-row .skeleton-dot { position: absolute; bottom: 12px; right: 8px; width: 10px; height: 10px; border-radius: 50%; }

/* Varian 2: card dengan gambar (banner/preview) — blok gambar besar + bar teks */
.skeleton-card-group { display: flex; gap: 14px; flex-wrap: wrap; }
.skeleton-card { display: flex; flex-direction: column; width: 100%; max-width: 220px; gap: 12px; padding: 14px; border-radius: var(--radius, 14px); background: var(--surface, transparent); }
.skeleton-card .skeleton-thumb { width: 100%; height: 110px; border-radius: 10px; }
.skeleton-card .skeleton-text-lines { display: flex; flex-direction: column; gap: 8px; }
.skeleton-card .skeleton-text-lines .skeleton-block { height: 12px; }
.skeleton-card .skeleton-text-lines .skeleton-block:nth-child(1) { width: 100%; }
.skeleton-card .skeleton-text-lines .skeleton-block:nth-child(2) { width: 80%; }
.skeleton-card .skeleton-text-lines .skeleton-block:nth-child(3) { width: 100%; }
.skeleton-card .skeleton-text-lines .skeleton-block:nth-child(4) { width: 50%; }

/* ---------- Search / Pagination ---------- */
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.search-box { max-width: 280px; }
.search-wrap { position: relative; max-width: 280px; flex: 1; }
.search-wrap .search-box { max-width: none; width: 100%; padding-left: 40px; }
.search-wrap-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-dim); pointer-events: none; }
.pagination { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; }
.pagination button {
  width: 32px; height: 32px; border-radius: var(--radius-xs); border: 1px solid var(--border);
  background: var(--bg-soft); color: var(--text-dim); cursor: pointer; font-size: 13px;
  flex: 0 0 auto;
}
.pagination button.active { background: var(--gradient); color: #fff; border-color: transparent; }
@media (max-width: 480px) {
  /* Di HP, tombol nomor halaman kalau kebanyakan (contoh: 20 halaman) bisa
     bikin baris jadi kepanjangan meluber keluar card kalau dipaksa 1 baris.
     Di layar sempit, rata tengah biar rapi & gak nabrak sisi card. */
  .pagination { justify-content: center; gap: 5px; }
  .pagination button { width: 30px; height: 30px; font-size: 12px; }
}

/* ---------- Console (Setting Telegram) ---------- */
.console-box {
  background: #050608;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  font-family: 'Courier New', monospace;
  font-size: 12.5px;
  color: #8ec5ff;
  height: 220px;
  overflow-y: auto;
  white-space: pre-wrap;
}
.status-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.status-dot.on { background: var(--success); box-shadow: 0 0 8px var(--success); }
.status-dot.off { background: var(--danger); box-shadow: 0 0 8px var(--danger); }

/* ---------- Login page ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card { width: 380px; max-width: 100%; padding: 32px 28px; }
.login-card .brand {
  text-align: center; font-family: var(--font-display); font-size: 22px; font-weight: 700; margin-bottom: 4px;
  background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.login-card .tagline { text-align: center; color: var(--text-dim); font-size: 13px; margin-bottom: 24px; }
.login-card .btn-primary { width: 100%; justify-content: center; padding: 11px; margin-top: 6px; }
.login-error { color: var(--danger); font-size: 13px; margin-top: 10px; text-align: center; display: none; }

@media (max-width: 860px) {
  .sidebar {
    position: fixed;
    left: 50%;
    top: 84px;
    width: min(94vw, 380px);
    max-height: calc(100vh - 110px);
    height: auto;
    overflow-y: auto;
    z-index: 999;
    border-radius: var(--radius-lg);
    box-shadow: 0 26px 60px rgba(0,0,0,0.5);
    transform: translate(-50%, -10px) scale(0.97);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .sidebar.open { opacity: 1; pointer-events: auto; transform: translate(-50%, 0) scale(1); }
  .sidebar { border: 1px solid var(--border); }
  .sidebar .brand { display: none; } /* judul brand udah ada di mobile app-bar */
  .main { padding: 20px; }
  .two-col { grid-template-columns: 1fr !important; }
}

/* ---------- Halaman Profil ---------- */
.profile-head {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.profile-avatar-upload {
  position: relative;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
}
.profile-avatar-upload .avatar-big {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  overflow: hidden;
  border: 3px solid var(--surface-solid);
  box-shadow: 0 8px 22px var(--accent-glow);
}
.profile-avatar-upload .avatar-big img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar-upload .avatar-edit-btn {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--surface-solid);
  cursor: pointer;
  box-shadow: 0 4px 10px var(--accent-glow);
}
.profile-avatar-upload .avatar-edit-btn:hover { filter: brightness(1.1); }
.profile-head-info { min-width: 200px; }
.profile-head-info .p-username { font-family: var(--font-display); font-size: 19px; font-weight: 700; }
.profile-head-info .p-email { color: var(--text-dim); font-size: 13px; margin-top: 2px; }
.profile-avatar-remove {
  font-size: 12px;
  color: var(--danger);
  cursor: pointer;
  margin-top: 8px;
  display: inline-block;
}

.contact-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-xs);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  margin-bottom: 12px;
}
.contact-row .contact-icon {
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-row .contact-body { flex: 1; min-width: 0; }
.contact-row .contact-body input {
  border: none; background: transparent; padding: 0; color: var(--text); font-size: 14px; font-weight: 500;
  width: 100%;
}
.contact-row .contact-body input:focus { box-shadow: none; }
.contact-row .contact-label { font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 8px; }

/* ---------- Kartu Anggota (Kelola Admin, ganti tabel di layar kecil) ---------- */
.admin-list { display: flex; flex-direction: column; gap: 14px; }
.admin-card {
  border: 1px solid var(--border);
  background: var(--bg-soft);
  border-radius: var(--radius-xs);
  padding: 0;
  overflow: hidden;
}
.admin-card-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 14px 16px;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--border);
}
.admin-card-id { display: flex; align-items: flex-start; gap: 12px; }
.admin-card-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--gradient); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; flex-shrink: 0; overflow: hidden;
}
.admin-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.admin-card-name { font-weight: 700; font-size: 15px; color: var(--text); }
.admin-card-email { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.admin-card-actions { display: flex; gap: 6px; flex-shrink: 0; }
.admin-card-actions .btn { padding: 6px 8px; }
.admin-card-gap { height: 16px; }
.admin-card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; padding: 0 16px; }
.admin-card-stat { background: var(--surface-solid); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.admin-card-stat .label { font-size: 11px; color: var(--text-dim); margin-bottom: 3px; }
.admin-card-stat .value { font-size: 15px; font-weight: 700; }
.admin-card-contact { display: flex; gap: 10px; padding: 0 16px 16px; }
.admin-card-contact a.btn, .admin-card-contact span.btn { flex: 1; justify-content: center; text-decoration: none; }
.admin-card-contact .btn[disabled] { opacity: 0.4; pointer-events: none; }
.payment-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 16px; border-top: 1px solid var(--border); margin-top: -1px; }
.payment-row-label { font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 5px; }
.payment-row-label b { color: var(--text); font-weight: 600; }
.payment-gear-btn { width: 28px; height: 28px; }

/* ---------- Mobile app-bar (judul brand di paling atas, gaya "header pill" ala referensi) ---------- */
.mobile-appbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 18px;
  position: sticky;
  top: 10px;
  z-index: 500;
  box-shadow: var(--shadow-card);
}
.mobile-appbar-brand {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  color: var(--text);
  min-width: 0;
}
.mobile-appbar-brand span:last-child {
  overflow: hidden;
  min-width: 0;
  max-width: 46vw;
}
#mobile-appbar-brand-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mobile-appbar .hamburger { display: inline-flex; }
.mobile-appbar-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
@media (max-width: 860px) { .mobile-appbar { display: flex; } }

/* ---------- Lonceng notifikasi (pojok kanan atas topbar tiap halaman) ---------- */
/* Wrapper buat gabungin tombol aksi topbar yang udah ada (mis. "+ Tambah
   Produk") bareng lonceng notif di kanan atas, biar gak berantakan spacing-nya. */
.topbar-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.notif-bell-wrap { position: relative; }
.notif-bell-btn {
  position: relative;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  color: var(--text);
  width: 40px; height: 40px;
  border-radius: var(--radius-xs);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}
.notif-bell-btn:hover { background: var(--accent-soft); border-color: var(--accent-glow); }
.notif-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px;
  background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--surface-solid);
}
/* position:fixed + z-index setinggi mungkin -> selalu paling depan, gak akan
   ketutup card/elemen manapun di halaman manapun. Posisi persis (top/left)
   dihitung di JS (positionNotifDropdown) tiap kali dibuka. */
.notif-dropdown {
  display: none;
  position: fixed;
  width: 320px; max-width: calc(100vw - 20px);
  max-height: 380px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  z-index: 99999;
  overflow: hidden;
  flex-direction: column;
}
.notif-dropdown.open { display: flex; }
.notif-dropdown-head {
  padding: 12px 14px;
  font-weight: 700; font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.notif-dropdown-body { overflow-y: auto; max-height: 330px; }
.notif-empty { padding: 28px 14px; text-align: center; color: var(--text-dim); font-size: 12.5px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.notif-item { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.notif-item:last-child { border-bottom: none; }
.notif-item-title { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.notif-item-msg { font-size: 12.5px; color: var(--text-dim); white-space: pre-wrap; word-break: break-word; }
.notif-item-time { font-size: 11px; color: var(--text-dim); opacity: 0.75; margin-top: 4px; }
.notif-item.notif-item-danger { background: var(--danger-soft); }
.notif-item.notif-item-danger .notif-item-title { color: var(--danger); display: flex; align-items: center; gap: 6px; }

.quick-duration-row { display: flex; gap: 8px; }
.quick-duration-btn { flex: 1; padding: 9px 6px; font-size: 12.5px; }
.quick-duration-btn.active { background: var(--gradient); color: #fff; border-color: transparent; }

/* ---------- FITUR: Perpanjang Sewa Sendiri (halaman Profil) ---------- */
.renewal-pkg-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.renewal-pkg-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 8px; border-radius: var(--radius-sm); border: 1.5px solid var(--border);
  background: var(--surface-solid); cursor: pointer; text-align: center; position: relative;
  transition: border-color .15s, transform .15s;
}
.renewal-pkg-btn:hover { transform: translateY(-1px); }
.renewal-pkg-btn.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.renewal-pkg-btn .pkg-months { font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.renewal-pkg-btn .pkg-price { font-size: 12.5px; color: var(--text-dim); font-weight: 600; }
.renewal-pkg-btn .pkg-discount {
  position: absolute; top: -8px; right: -6px; background: var(--success-soft); color: var(--success);
  font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 999px;
}
.renewal-preview {
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; margin-bottom: 16px; font-size: 13px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.renewal-preview .label { color: var(--text-dim); }
.renewal-preview .value { font-weight: 700; color: var(--text); }
.renewal-method-row { display: flex; gap: 8px; margin-bottom: 16px; }
.renewal-method-btn { flex: 1; padding: 10px; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.renewal-method-btn.active { background: var(--gradient); color: #fff; border-color: transparent; }
.renewal-method-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.filter-status.active { background: var(--gradient); color: #fff; border-color: transparent; }

/* ---------- MASA SEWA — overlay kunci halaman Setting Telegram ---------- */
/* MASA SEWA — ikon gembok di menu "Setting Telegram" yang dikunci. Bisa
   diklik (biar terasa responsif) tapi dicegat di JS (lihat listener
   nav-expired-lock di common.js) jadi gak pindah halaman — cuma mainin
   animasi kebuka lalu ketutup lagi. */
.nav-lock-icon {
  transition: transform 0.28s ease, color 0.28s ease;
}
/* "Kebuka" — gembok membesar dikit pas diklik, lalu balik normal ("ketutup") lewat transition di atas */
.nav-lock-icon.lock-open {
  transform: scale(1.35) rotate(-8deg);
}

/* ---------- Daftar notif terkirim di Kelola Admin (owner) ---------- */
.notif-admin-item {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.notif-admin-item:last-child { border-bottom: none; }
.notif-admin-item-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ---------- Header "Menu" + tombol X di dalam panel (cuma tampil mobile) ---------- */
.sidebar-mobile-head {
  display: none;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
}
.menu-close-btn {
  width: 32px; height: 32px;
  border-radius: var(--radius-xs);
  border: 1px solid rgba(248,113,113,0.35);
  background: var(--danger-soft);
  color: var(--danger);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
@media (max-width: 860px) { .sidebar-mobile-head { display: flex; } }
.hamburger {
  display: none;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  color: var(--text);
  width: 40px; height: 40px;
  border-radius: var(--radius-xs);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.hamburger:hover { background: var(--accent-soft); border-color: var(--accent-glow); }
.hamburger svg { width: 20px; height: 20px; }
.topbar .hamburger { display: none !important; } /* diganti tombol hamburger di mobile app-bar */

/* ---------- Backdrop pas sidebar mobile kebuka ---------- */
.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(6, 4, 14, 0.55);
  backdrop-filter: blur(2px);
  z-index: 998;
}
.sidebar-backdrop.open { display: block; }

/* ---------- Icon SVG reusable ---------- */
.svg-icon { width: 18px; height: 18px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.svg-icon.sm { width: 14px; height: 14px; }
.svg-icon.lg { width: 24px; height: 24px; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--radius-xs);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.15s ease;
}
.icon-btn:hover { color: var(--text); border-color: var(--accent-glow); background: var(--accent-soft); }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ---------- Bot WhatsApp ---------- */
.wa-connect-card { position: relative; overflow: hidden; }
.wa-connect-glow {
  position: absolute; top: -60px; right: -60px; width: 180px; height: 180px;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  pointer-events: none; opacity: 0; display: none;
}
.wa-phone-input {
  display: flex; align-items: stretch; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border); transition: border-color 0.2s, box-shadow 0.2s;
}
.wa-phone-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.wa-phone-prefix {
  display: flex; align-items: center; padding: 0 12px;
  background: var(--bg-soft); color: var(--text-dim); font-size: 13px; font-weight: 600;
  border-right: 1px solid var(--border);
}
.wa-phone-input input {
  border: none; border-radius: 0; background: transparent; flex: 1;
}
.wa-phone-input input:focus { box-shadow: none; }
.wa-pairing-box {
  margin-top: 18px; text-align: center; padding: 20px 18px; border-radius: 12px;
  position: relative; background: var(--bg-soft);
  border: 1px solid var(--border);
  box-shadow: none;
}
.wa-pairing-code {
  font-size: 28px; font-weight: 700; letter-spacing: 4px; margin-bottom: 12px;
  color: var(--text); text-shadow: none;
}
.wa-method-btn { flex: 1; }
.wa-method-btn.active { background: var(--gradient); color: #fff; border-color: transparent; }

/* ---------- Produk & Stok (merged page) ---------- */
.code-badge {
  display: inline-block;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: var(--radius-xs);
}

.modal-box-lg { width: 620px; }

.tier-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.tier-row .tier-remove {
  width: 34px; height: 34px; border-radius: var(--radius-xs); border: 1px solid rgba(248,113,113,0.3);
  background: var(--danger-soft); color: var(--danger); cursor: pointer; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.tier-empty-hint { color: var(--text-dim); font-size: 12px; margin-bottom: 8px; }

/* Header kartu produk di dalam modal Kelola Stok — pengganti <select> polos */
.stock-modal-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(47,111,237,0.16), rgba(56,189,248,0.05));
  border: 1px solid var(--accent-glow);
}
.stock-modal-header .icon {
  width: 46px; height: 46px; border-radius: var(--radius-xs); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; background: var(--gradient); color: #fff;
}
.stock-modal-header .name { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.stock-modal-header .meta { font-size: 12px; color: var(--text-dim); margin-top: 3px; display: flex; gap: 10px; flex-wrap: wrap; }

.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.mini-stats .mini-card {
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; text-align: center;
}
.mini-stats .mini-card .num { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--accent); }
.mini-stats .mini-card .lbl { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

/* ---------- Kelola Admin ---------- */
.role-tag { padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--accent-soft); color: var(--accent); }

/* ---------- Animasi "Login Berhasil" + Welcome (muncul di Dashboard,
   full-screen, tepat sesudah redirect dari halaman Login) ---------- */
.login-welcome-overlay {
  position: fixed; inset: 0; z-index: 999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: var(--bg-soft);
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.login-welcome-overlay.show { opacity: 1; pointer-events: auto; }
.lw-ring { position: relative; width: 96px; height: 96px; }
.lw-ring-spin {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(47,111,237,0) 0deg, rgba(47,111,237,.15) 120deg, #2f6fed 340deg, #38bdf8 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  animation: lwSpin 0.95s linear infinite;
}
.lw-ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--bg-soft); border: 1px solid var(--border); }
.lw-ring img { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; border-radius: 12px; transform: translate(-50%, -50%); object-fit: contain; }
@keyframes lwSpin { to { transform: rotate(360deg); } }
.login-welcome-text {
  font-weight: 700; font-size: 15px; color: var(--text);
  opacity: 0; transform: translateY(6px); transition: opacity .3s ease .15s, transform .3s ease .15s;
  text-align: center;
}
.login-welcome-overlay.show .login-welcome-text { opacity: 1; transform: translateY(0); }
.login-welcome-sub {
  font-size: 13px; color: var(--text-dim);
  opacity: 0; transform: translateY(6px); transition: opacity .3s ease .25s, transform .3s ease .25s;
  text-align: center;
}
.login-welcome-overlay.show .login-welcome-sub { opacity: 1; transform: translateY(0); }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-glow); }

/* ---------- Profil: hero + KPI (v3.8) ---------- */
.pf-hero { padding: 0 !important; overflow: hidden; }
.pf-cover { height: 88px; background: linear-gradient(120deg, rgba(47,111,237,.55), rgba(56,189,248,.22)); }
.pf-hero .profile-head { padding: 0 22px 22px; margin-top: -36px; }
.pf-hero .profile-head-info { padding-top: 38px; }
.pf-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.pf-kpi { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-solid); padding: 14px 16px; min-width: 0; }
.pf-kpi small { display: flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: 12px; }
.pf-kpi b { display: block; margin-top: 6px; font-family: var(--font-display); font-size: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-kpi em { display: block; font-style: normal; font-size: 11.5px; color: var(--text-dim); margin-top: 2px; min-height: 14px; }
@media (max-width: 640px) { .pf-kpis { grid-template-columns: 1fr; } .pf-hero .profile-head { padding: 0 16px 18px; } }

/* ---------- Kelola Admin: kartu (v3.8) ---------- */
.ad-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.ad-stat { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-solid); padding: 13px 16px; }
.ad-stat small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); }
.ad-stat b { display: block; margin-top: 4px; font-family: var(--font-display); font-size: 22px; }
.ad-stat.ok b { color: var(--success); } .ad-stat.warn b { color: #f59e0b; } .ad-stat.bad b { color: var(--danger); }
.ad-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ad-chips button { border: 1px solid var(--border); background: transparent; color: var(--text-dim); border-radius: 999px; padding: 7px 13px; font-size: 12px; font-weight: 700; cursor: pointer; }
.ad-chips button.on { background: var(--accent); border-color: transparent; color: #fff; }
.ad-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .ad-grid { grid-template-columns: 1fr; } .ad-stats { grid-template-columns: repeat(2, 1fr); } }
.ad-card { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-soft); }
.ad-head { display: flex; gap: 12px; align-items: flex-start; padding: 16px 16px 12px; }
.ad-av { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; color: #fff; background: var(--gradient); flex-shrink: 0; }
.ad-id { flex: 1; min-width: 0; }
.ad-id b { display: block; font-size: 15px; }
.ad-id small { display: block; color: var(--text-dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.ad-pill { font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-dim); }
.ad-pill.seller { color: #38bdf8; border-color: rgba(56,189,248,.4); background: rgba(56,189,248,.08); }
.ad-pill.reseller { color: var(--success); border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.08); }
.ad-more { position: relative; }
.ad-ib { height: 34px; min-width: 34px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.ad-ib:hover { background: var(--surface-solid); }
.ad-menu { display: none; position: absolute; right: 0; top: 40px; z-index: 20; min-width: 200px; padding: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-solid); box-shadow: 0 14px 36px rgba(0,0,0,.35); }
.ad-menu.open { display: block; }
.ad-menu button { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 13px; padding: 9px 10px; border-radius: 8px; cursor: pointer; text-align: left; }
.ad-menu button:hover { background: var(--bg-soft); }
.ad-menu button.danger { color: var(--danger); }
.ad-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 16px 14px; }
@media (min-width: 1500px) { .ad-info { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ad-cell { border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; min-width: 0; }
.ad-cell small { display: block; font-size: 10.5px; color: var(--text-dim); margin-bottom: 2px; }
.ad-cell b { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-cell em { display: block; font-style: normal; font-size: 11px; color: var(--text-dim); }
.ad-cell.ok b, .ad-cell b.ok { color: var(--success); } .ad-cell.warn b { color: #f59e0b; } .ad-cell.off b, .ad-cell b.bad { color: var(--danger); } .ad-cell b.dim { color: var(--text-dim); font-weight: 500; }
.ad-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--border); }
.ad-akses { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ad-akses > span { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); font-weight: 700; margin-right: 2px; }
.ad-tg { height: 32px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text-dim); font: inherit; font-size: 12px; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.ad-tg.on { color: var(--success); border-color: rgba(34,197,94,.45); background: rgba(34,197,94,.08); }
.ad-acts { display: flex; gap: 6px; }
@media (max-width: 480px) { .ad-ib.txt span { display: none; } }
.ad-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 26px; }
.ad-tabs button { border: 1px solid var(--border); background: transparent; color: var(--text-dim); border-radius: 999px; padding: 9px 15px; font-size: 13px; font-weight: 700; display: inline-flex; gap: 7px; align-items: center; cursor: pointer; }
.ad-tabs button.on { color: var(--text); background: var(--surface-solid); }

/* Penanda menu khusus owner (rev v6.0, opsi B) */
.sidebar nav .own-sec { display:flex; align-items:center; gap:6px; margin:12px 10px 4px; padding-top:10px; border-top:1px dashed var(--border); font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#a78bfa; }
.sidebar nav .own-sec svg { width:12px; height:12px; }
.sidebar nav a.own-it { box-shadow: inset 3px 0 0 #8b5cf6; }
.sidebar nav a.own-it.active { box-shadow: inset 3px 0 0 #a78bfa; }
.sidebar nav .own-end { height:1px; margin:8px 10px 6px; background:var(--border); }

/* All Transaksi (rev v6.0): tabel ramping + baris detail yang bisa dibuka */
#table-wrap table.trx-table { min-width: 0; width: 100%; }
.trx-table .trx-row { cursor: pointer; }
.trx-table .trx-prod { font-weight: 600; }
.trx-table .trx-sub { font-size: 11.5px; opacity: .6; margin-top: 2px; }
.trx-table .c-sub-time { display: none; }
.trx-table .trx-note { font-size: 11px; color: var(--text-dim); margin-top: 4px; display: inline-flex; align-items: center; gap: 4px; }
.trx-table .trx-note.ok { color: var(--success, #22c55e); }
.trx-table .trx-chev { display: inline-block; width: 16px; height: 16px; opacity: .55; transition: transform .2s; }
.trx-table .trx-row.open .trx-chev { transform: rotate(180deg); }
.trx-table .trx-detail { display: none; }
.trx-table .trx-detail.open { display: table-row; }
.trx-table .trx-detail > td { background: rgba(127,127,127,.06); padding: 14px 16px; }
.trx-dgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 18px; }
.trx-dgrid > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.trx-dgrid span:first-child { font-size: 11px; opacity: .6; }
.trx-dgrid b { font-weight: 600; font-size: 13px; word-break: break-all; }
.trx-dgrid small { opacity: .6; font-size: 10px; }
.trx-dact { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.trx-dact:empty { display: none; }
@media (max-width: 700px) {
  .trx-table .c-qty, .trx-table .c-waktu, .trx-table .c-toko { display: none; }
  .trx-table .c-sub-time { display: inline; }
  .trx-table th, .trx-table td { padding: 10px 8px; }
  .trx-dgrid { grid-template-columns: repeat(2, 1fr); }
}

/* Riwayat Transaksi (rev v6.0) */
#table-wrap table.ord-table { min-width: 0; width: 100%; }
.ord-table .ord-prod { font-weight: 600; }
.ord-table .ord-sub { font-size: 11.5px; opacity: .6; margin-top: 2px; }
.ord-table tr.ord-day td { background: rgba(127,127,127,.08); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .85; padding: 6px 12px; }
@media (max-width: 700px) {
  .ord-table .ord-id, .ord-table .ord-src { display: none; }
  .ord-table th, .ord-table td { padding: 10px 8px; }
}
@media (max-width: 700px) {
  .trx-table .trx-row td:first-child { width: 100%; }
  .trx-table .trx-row td:not(:first-child) { white-space: nowrap; }
  .trx-table .trx-prod { font-size: 13px; }
  .trx-table .trx-sub { font-size: 10.5px; }
  .trx-table .price-cell { font-size: 12.5px; }
  .trx-table .badge-status { font-size: 11px; padding: 3px 8px; }
  .trx-table th:last-child, .trx-table td:last-child { padding-left: 0; padding-right: 4px; }
  .trx-table .trx-detail > td { padding: 12px; }
}
@media (max-width: 700px) {
  .trx-table .trx-row td:first-child { max-width: 0; }
  .trx-table .trx-prod, .trx-table .trx-sub { white-space: normal; overflow-wrap: anywhere; }
  .trx-table .c-sub-time { display: block; }
}

/* Withdraw: kartu saldo biru + watermark bank (rev v6.1) */
.wd-hero { position: relative; overflow: hidden; border-radius: 20px; padding: 22px 24px; margin-bottom: 16px; color: #fff; background: linear-gradient(135deg, #1d4ed8, #3b82f6 70%, #60a5fa); box-shadow: 0 10px 30px rgba(37,99,235,.28); }
.wd-hero-ic { position: absolute; top: 10px; right: -6px; width: 96px; height: 96px; opacity: .22; color: #fff; pointer-events: none; }
.wd-hero-ic svg { width: 100%; height: 100%; stroke-width: 1.4; }
.wd-hero-label { font-size: 13px; opacity: .85; font-weight: 500; }
.wd-hero-val { font-family: var(--font-display); font-size: 30px; font-weight: 700; margin: 4px 0 2px; position: relative; }
.wd-hero-sub { font-size: 12px; opacity: .75; position: relative; }
.wd-mini { grid-template-columns: 1fr 1fr; margin-bottom: 16px; }
@media (max-width: 700px) { .wd-hero { padding: 16px 18px; } .wd-hero-val { font-size: 24px; } .wd-hero-ic { width: 72px; height: 72px; } }

/* Dashboard: chip ikon saldo jadi watermark kanan atas (rev v6.1) */
.balance-item { position: relative; overflow: hidden; }
.balance-item .card-icon-static { position: absolute; top: 6px; right: -6px; width: 64px; height: 64px; border-radius: 0; background: transparent !important; opacity: .16; pointer-events: none; }
.balance-item .card-icon-static svg { width: 100%; height: 100%; stroke-width: 1.5; }
.balance-item.saldo .card-icon-static { color: #3b82f6; }
.balance-item.pencairan .card-icon-static { color: #22c55e; }
@media (max-width: 700px) { .balance-item .card-icon-static { width: 46px; height: 46px; top: 4px; } }

/* Modal Buat Voucher (rev v6.1) */
#vc-modal .vc-sec { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); margin: 16px 0 8px; }
#vc-modal .vc-sec:first-of-type { margin-top: 4px; }
#vc-modal .vc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#vc-modal .vc-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#vc-modal .vc-seg-opt { text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-solid, transparent); color: var(--text); cursor: pointer; display: flex; flex-direction: column; gap: 3px; font-family: inherit; }
#vc-modal .vc-seg-opt b { font-size: 13.5px; }
#vc-modal .vc-seg-opt span { font-size: 11.5px; color: var(--text-dim); }
#vc-modal .vc-seg-opt.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
#vc-modal .vc-actions { position: sticky; bottom: 0; background: var(--surface-solid, var(--bg)); padding-top: 12px; }
@media (max-width: 700px) { #vc-modal .vc-grid, #vc-modal .vc-seg { grid-template-columns: 1fr; } }

/* Ganti Password (rev v6.2) */
.pw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pw-meter { height: 5px; border-radius: 99px; background: rgba(127,127,127,.2); margin-top: 8px; overflow: hidden; }
.pw-meter span { display: block; height: 100%; width: 0; border-radius: 99px; transition: width .2s, background .2s; }
.pw-actions { display: flex; justify-content: flex-end; }
@media (max-width: 700px) { .pw-grid { grid-template-columns: 1fr; } .pw-actions .btn { width: 100%; justify-content: center; } }

/* Chip Absen di Dashboard + tab HP lebih rapat (rev v6.2) */
#absen-chip-wrap:not(:empty) { margin-bottom: 16px; }
.absen-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface-solid, transparent); color: var(--text); font-size: 13px; font-weight: 700; text-decoration: none; }
.absen-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; }
.absen-chip .dot.ok { background: #22c55e; }
.absen-chip .sub { font-weight: 500; color: var(--text-dim); font-size: 12px; }
@media (max-width: 900px) { .dk-tab { flex: 1 0 auto; padding: 9px 10px; font-size: 12.5px; } }

/* Banner wajib ganti password (rev v6.3) */
.pw-banner { display: block; margin-bottom: 16px; padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(245,158,11,.4); background: rgba(245,158,11,.1); color: var(--text); font-size: 13px; line-height: 1.5; text-decoration: none; }
.pw-banner span { display: inline-block; margin-left: 6px; font-weight: 700; color: #f59e0b; }

/* ===== Dashboard redesign (rev v6.5) ===== */
.topbar { align-items: flex-start; gap: 12px; }
.dash-pill { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface-solid, transparent); font-size: 13.5px; font-weight: 600; white-space: nowrap; flex: 0 0 auto; }
.dash-pill .status-text-value { font-size: 13.5px; font-weight: 600; }
.dash-hero { position: relative; overflow: hidden; border-radius: 22px; padding: 22px 24px; margin-bottom: 14px; color: #fff; cursor: pointer; border: 1px solid rgba(96,165,250,.28); background: linear-gradient(135deg, rgba(29,78,216,.55), rgba(15,23,42,.65) 75%); box-shadow: 0 10px 30px rgba(37,99,235,.18); }
.dash-hero-ic { position: absolute; right: 20px; top: 54px; width: 110px; height: 110px; opacity: .18; color: #60a5fa; pointer-events: none; }
.dash-hero-ic svg { width: 100%; height: 100%; stroke-width: 1.4; }
.dash-hero-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.dash-hero-label { font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255,255,255,.7); font-weight: 600; }
.dash-hero-val { font-family: var(--font-display); font-size: 34px; font-weight: 800; margin: 6px 0 4px; }
.dash-hero-sub { font-size: 12.5px; color: rgba(255,255,255,.62); }
.dash-wd-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 99px; color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; background: linear-gradient(135deg, #2563eb, #38bdf8); box-shadow: 0 8px 22px rgba(56,189,248,.35); }
.dash-hero-mini { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.dh-mini { position: relative; overflow: hidden; border-radius: 16px; padding: 14px 16px; background: rgba(8,10,16,.55); border: 1px solid rgba(255,255,255,.1); }
.dh-mini-label { font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase; color: rgba(255,255,255,.6); font-weight: 600; }
.dh-mini-val { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin-top: 6px; }
.dh-mini-ic { position: absolute; right: 8px; top: 6px; width: 46px; height: 46px; opacity: .3; }
.dh-mini-ic svg { width: 100%; height: 100%; stroke-width: 1.5; }
.dh-mini-ic.ok { color: #22c55e; } .dh-mini-ic.warn { color: #f59e0b; }
.manual-orders-slot .mo-row { margin: 0 0 14px; }
.manual-orders-slot .mo-row.has { border-color: rgba(245,158,11,.45); background: linear-gradient(135deg, rgba(245,158,11,.14), rgba(245,158,11,.05)); }
.manual-orders-slot .mo-row.has .mo-go { color: #f59e0b; font-weight: 700; font-size: 15px; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.kpi-grid .stat-card .value.warn { color: #f59e0b; }
.kpi-delta { position: relative; z-index: 1; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: #22c55e; min-height: 16px; }
.kpi-delta.down { color: #ef4444; } .kpi-delta.flat { color: var(--text-dim); }
#kpi-stok-d { color: var(--text-dim); font-weight: 500; }
.dash-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.dash-chips:empty { display: none; }
.dash-chips-in { display: contents; }
.dash-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 99px; font-size: 14px; font-weight: 700; text-decoration: none; border: 1px solid var(--border); }
.dash-chip.seller { color: #38bdf8; border-color: rgba(56,189,248,.4); background: rgba(56,189,248,.09); }
.dash-chip.reseller, .dash-chip.absen { color: #22c55e; border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.09); }
.dash-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; } .dash-chip .dot.ok { background: #22c55e; }
.range-tabs { display: inline-flex; padding: 4px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface-solid, transparent); }
.range-tabs button { border: 0; background: transparent; color: var(--text-dim); font-weight: 600; font-size: 13px; padding: 7px 16px; border-radius: 99px; cursor: pointer; }
.range-tabs button.on { background: #2563eb; color: #fff; }
.own-head { font-size: 15px; margin: 4px 0 12px; }
.dash-absen { border-radius: 22px; padding: 18px; margin-bottom: 14px; border: 1px solid rgba(34,197,94,.3); background: linear-gradient(135deg, rgba(21,128,61,.18), rgba(8,10,16,.4)); }
.da-head { display: flex; align-items: center; gap: 12px; }
.da-head > div { flex: 1; min-width: 0; } .da-head b { display: block; font-size: 16px; } .da-head span:not(.da-ic) { display: block; font-size: 12.5px; color: var(--text-dim); }
.da-ic { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--border); display: grid; place-items: center; color: #22c55e; flex: 0 0 40px; }
.da-head em { font-style: normal; font-weight: 700; font-size: 13px; color: #22c55e; border: 1px solid rgba(34,197,94,.4); background: rgba(34,197,94,.1); padding: 6px 12px; border-radius: 99px; }
.da-days { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 16px 0 14px; }
.ab-day { border-radius: 14px; border: 1px solid var(--border); padding: 10px 0; text-align: center; color: var(--text-dim); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ab-day b { font-size: 12.5px; } .ab-day i { width: 24px; height: 24px; border-radius: 50%; border: 1.5px dashed var(--border); }
.ab-day.done { border-color: rgba(34,197,94,.5); background: rgba(34,197,94,.14); color: #fff; } .ab-day.done svg { color: #22c55e; }
.ab-day.today { border-color: #38bdf8; color: #38bdf8; } .ab-day.today i { border: 1.5px solid #38bdf8; }
.da-bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; } .da-bar i { display: block; height: 100%; background: linear-gradient(90deg, #22c55e, #38bdf8); }
.da-meta { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-dim); margin: 8px 0 14px; } .da-meta b { color: var(--text); }
.dash-absen-btn { width: 100%; display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 14px; border: 0; border-radius: 99px; color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; background: linear-gradient(135deg, #2563eb, #38bdf8); }
@media (max-width: 700px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .dash-hero { padding: 18px; } .dash-hero-val { font-size: 28px; }
  .dash-hero-ic { top: 70px; right: 14px; width: 96px; height: 96px; }
  .dash-pill { padding: 7px 12px; font-size: 12.5px; }
}

/* ===== Dashboard layout 2 kolom (rev v6.5) ===== */
.db-pills { display: flex; gap: 8px; align-items: center; }
.db-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 14px; align-items: start; margin-bottom: 18px; }
.db-grid > * { min-width: 0; }
.db-plat-wrap { grid-column: 1 / -1; }
.db-left { grid-column: 1; display: grid; gap: 14px; }
.db-side { grid-column: 2; display: grid; gap: 14px; align-content: start; }
.db-left .kpi-grid, .db-left .chart-card, .db-side .dash-hero, .db-side .dash-chips { margin-bottom: 0; }
.db-side .manual-orders-slot .mo-row { margin: 0; }
.db-side .dash-chips { margin: 0; }
.db-left .kpi-grid { gap: 10px; }
.kpi-grid .stat-card { padding: 14px 14px 12px; }
.kpi-grid .stat-card .label { font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 700; }
.kpi-grid .stat-card .value { font-size: 20px; }
.kpi-grid .stat-card .card-icon { width: 58px; height: 58px; top: 8px; right: -6px; }
.db-lab { font-size: 11px; letter-spacing: 1.4px; font-weight: 700; color: #a78bfa; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.db-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.db-plat { position: relative; overflow: hidden; border: 1px solid rgba(139,92,246,.35); background: linear-gradient(135deg, rgba(139,92,246,.12), rgba(139,92,246,.03)); border-radius: 14px; padding: 12px 14px; }
.db-plat small { display: block; font-size: 10.5px; letter-spacing: 1.2px; color: var(--text-dim); font-weight: 700; position: relative; z-index: 1; }
.db-plat b { display: block; font-family: var(--font-display); font-size: 18px; margin-top: 4px; position: relative; z-index: 1; }
.db-plat b.warn { color: #f59e0b; }
.db-plat-ic { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; opacity: .22; color: #a78bfa; pointer-events: none; }
.db-plat-ic.warn { color: #f59e0b; } .db-plat-ic.ok { color: #22c55e; }
.db-plat-ic svg { width: 100%; height: 100%; stroke-width: 1.5; }
.db-tx-card { margin-bottom: 0; }
.db-tx-card .toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.db-link { font-size: 12.5px; color: #38bdf8; font-weight: 700; text-decoration: none; }
.db-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.db-tbl th { text-align: left; font-size: 11px; letter-spacing: 1.1px; color: var(--text-dim); padding: 9px 10px; border-bottom: 1px solid var(--border); }
.db-tbl td { padding: 11px 10px; border-bottom: 1px solid rgba(128,128,128,.12); }
.db-row-click { cursor: pointer; }
.db-tbl tr.db-row-click:hover td { background: rgba(128,128,128,.06); }
.db-txl { display: none; }
.db-txl .r { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(128,128,128,.14); }
.db-txl .r:last-child { border-bottom: 0; }
.db-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; background: rgba(47,111,237,.14); color: #38bdf8; }
.db-txl .t { flex: 1; min-width: 0; }
.db-txl .t b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-txl .t span { font-size: 11.5px; color: var(--text-dim); }
.db-txl .a { text-align: right; }
.db-txl .a b { display: block; font-size: 13.5px; }
.db-st { font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; display: inline-block; margin-top: 3px; }
.db-tbl .db-st { margin-top: 0; }
.s-o { background: rgba(34,197,94,.14); color: #22c55e; } .s-p { background: rgba(245,158,11,.14); color: #f59e0b; } .s-x { background: rgba(239,68,68,.14); color: #ef4444; }
.db-res .db-txl { display: block; }
.db-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin: -4px 0 6px; }
.db-tab { white-space: nowrap; padding: 8px 12px; font-size: 13px; font-weight: 700; color: var(--text-dim); border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer; }
.db-tab.on { color: #38bdf8; border-bottom-color: #38bdf8; }
.hide-d { display: none; }
@media (max-width: 760px) {
  .hide-m { display: none; }
  .db-grid { grid-template-columns: 1fr; }
  .db-left, .db-side { display: contents; }
  .db-side .dash-hero { order: 1; } .db-side .manual-orders-slot { order: 2; } .db-side #absen-card-wrap { order: 2; }
  .db-left .kpi-grid { order: 3; } .db-side .dash-chips { order: 4; } .db-plat-wrap { order: 5; }
  .db-left .chart-card { order: 6; } .db-left .db-tx-card { order: 7; } .db-side #purchases-wrap { order: 8; }
  .db-strip { grid-template-columns: 1fr 1fr; }
  .db-tbl-d { display: none; } .db-txl { display: block; }
}
/* penyesuaian v6.5 */
.dh-mini { min-width: 0; padding: 12px 14px; }
.dh-mini-val { font-size: 17px; white-space: nowrap; }
.dh-mini-label { position: relative; z-index: 1; padding-right: 30px; }
.dh-mini-ic { width: 36px; height: 36px; right: 8px; top: 8px; }
.dash-hero-mini { gap: 10px; }
.manual-orders-slot .mo-row .mo-go { white-space: nowrap; flex: 0 0 auto; }
.manual-orders-slot .mo-row > div:nth-child(2) { min-width: 0; flex: 1 1 auto; }

/* ===== Withdraw redesign (rev v6.5) ===== */
.wd2-hero { position: relative; overflow: hidden; border-radius: 22px; padding: 20px 24px; margin-bottom: 16px; color: #fff; border: 1px solid rgba(96,165,250,.28); background: linear-gradient(135deg, rgba(29,78,216,.5), rgba(15,23,42,.65) 75%); display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.wd2-hero .wd-hero-ic { right: 16px; top: auto; bottom: 8px; width: 96px; height: 96px; opacity: .2; color: #60a5fa; }
.wd2-hero-main, .wd2-mini { position: relative; z-index: 1; }
.wd2-label { font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.7); font-weight: 700; }
.wd2-val { font-family: var(--font-display); font-size: 32px; font-weight: 800; margin: 4px 0 12px; }
.wd2-open { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; padding: 11px 20px; border-radius: 99px; color: #fff; font-weight: 700; font-size: 14.5px; background: linear-gradient(135deg, #2563eb, #38bdf8); box-shadow: 0 8px 22px rgba(56,189,248,.3); }
.wd2-mini { display: flex; gap: 10px; }
.wd2-m { position: relative; overflow: hidden; min-width: 230px; border-radius: 16px; padding: 14px 16px; background: rgba(8,10,16,.55); border: 1px solid rgba(255,255,255,.1); }
.wd2-m-l { font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase; color: rgba(255,255,255,.65); font-weight: 700; display: flex; align-items: center; gap: 7px; }
.wd2-m-l .dot, .wd2-pill i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot.warn { background: #f59e0b; } .dot.ok { background: #22c55e; }
.wd2-m-v { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin-top: 6px; white-space: nowrap; }
.wd2-m-ic { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; opacity: .3; }
.wd2-m-ic.warn { color: #f59e0b; } .wd2-m-ic.ok { color: #22c55e; } .wd2-m-ic svg { width: 100%; height: 100%; stroke-width: 1.5; }
.wd2-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.wd2-tab { border: 0; background: transparent; color: var(--text-dim); font-weight: 700; font-size: 14px; padding: 11px 14px; border-bottom: 2px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.wd2-tab.on { color: #38bdf8; border-bottom-color: #38bdf8; }
.wd2-count { background: #f59e0b; color: #1a1205; font-size: 11px; font-weight: 800; min-width: 20px; padding: 1px 6px; border-radius: 99px; text-align: center; }
.wd2-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.wd2-s { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; background: var(--surface-solid, transparent); }
.wd2-s-l { font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--text-dim); font-weight: 700; }
.wd2-s-v { font-family: var(--font-display); font-size: 21px; font-weight: 700; margin-top: 6px; } .wd2-s-v.warn { color: #f59e0b; }
.wd2-s-ic { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; opacity: .22; color: #38bdf8; } .wd2-s-ic.warn { color: #f59e0b; } .wd2-s-ic svg { width: 100%; height: 100%; stroke-width: 1.5; }
.wd2-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.wd2-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.wd2-chip { border: 1px solid var(--border); background: transparent; color: var(--text-dim); font-weight: 600; font-size: 13px; padding: 7px 14px; border-radius: 99px; cursor: pointer; }
.wd2-chip.on { color: #38bdf8; border-color: #2f6fed; background: rgba(47,111,237,.12); }
.wd2-search { flex: 1 1 220px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 99px; padding: 0 14px; color: var(--text-dim); }
.wd2-search input { flex: 1; border: 0; background: transparent; color: var(--text); padding: 9px 0; outline: none; font-size: 13.5px; min-width: 0; }
.wd2-note { font-size: 12.5px; color: var(--text-dim); margin-bottom: 10px; }
.wd2-card { border: 1px solid var(--border); border-radius: 18px; background: var(--surface-solid, transparent); overflow: hidden; }
.wd2-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.wd2-tbl th { text-align: left; font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-dim); padding: 12px 14px; border-bottom: 1px solid var(--border); }
.wd2-tbl td { padding: 12px 14px; border-bottom: 1px solid rgba(128,128,128,.12); }
.wd2-tbl tr:last-child td { border-bottom: 0; }
.wd2-dim { color: var(--text-dim); font-size: 12px; }
.wd2-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; padding: 3px 10px; border-radius: 99px; }
.wd2-pill.p { background: rgba(245,158,11,.14); color: #f59e0b; } .wd2-pill.p i { background: #f59e0b; }
.wd2-pill.a { background: rgba(34,197,94,.14); color: #22c55e; } .wd2-pill.a i { background: #22c55e; }
.wd2-pill.r { background: rgba(239,68,68,.14); color: #ef4444; } .wd2-pill.r i { background: #ef4444; }
.wd2-cards { display: none; gap: 12px; }
.wd2-c { border: 1px solid var(--border); border-radius: 18px; padding: 14px 16px; background: var(--surface-solid, transparent); }
.wd2-c-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.wd2-c-who { display: flex; align-items: center; gap: 10px; min-width: 0; } .wd2-c-who b { display: block; font-size: 15px; } .wd2-c-who > div > span, .wd2-c-d { display: block; font-size: 12.5px; color: var(--text-dim); }
.wd2-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, #2563eb, #38bdf8); flex: 0 0 38px; }
.wd2-c-amt { font-family: var(--font-display); font-size: 19px; font-weight: 800; display: block; }
.wd2-c-mid { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 8px 0 10px; font-size: 13px; color: var(--text-dim); }
.wd2-c-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px dashed var(--border); padding-top: 10px; }
.wd2-c-grid span { display: block; font-size: 11.5px; color: var(--text-dim); } .wd2-c-grid b { display: block; font-size: 14px; margin-top: 2px; }
.wd2-c-act { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 12px; } .wd2-c-act .btn { justify-content: center; padding: 11px; border-radius: 99px; }
.wd2-pg { display: flex; justify-content: center; gap: 6px; margin: 14px 0 4px; }
.wd2-pg button { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; font-weight: 700; } .wd2-pg button.on { background: #2f6fed; border-color: #2f6fed; color: #fff; }
/* popup form */
.wd2-sheet { width: 460px; max-width: 94vw; padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: 92vh; }
.wd2-sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.wd2-sheet-head h2 { margin: 0; font-size: 18px; }
.wd2-sheet-btns { display: inline-flex; gap: 8px; }
.wd2-sheet-body { padding: 18px 22px; overflow-y: auto; display: grid; gap: 12px; }
.wd2-sheet-foot { margin: 0; padding: 14px 22px; border-top: 1px solid var(--border); display: grid; grid-template-columns: 1fr 1.6fr; gap: 12px; }
.wd2-sheet-foot .btn { justify-content: center; padding: 12px; border-radius: 99px; }
.wd2-fl { font-size: 13px; color: var(--text-dim); }
.wd2-amt { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 16px; padding: 10px 16px; background: rgba(0,0,0,.18); }
.wd2-amt span { color: var(--text-dim); font-weight: 700; font-size: 17px; }
.wd2-amt input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font-family: var(--font-display); font-size: 28px; font-weight: 800; outline: none; padding: 4px 0; }
.wd2-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border: 1px solid var(--border); border-radius: 14px; gap: 4px; }
.wd2-seg button { border: 0; background: transparent; color: var(--text-dim); font-weight: 700; padding: 10px; border-radius: 10px; cursor: pointer; } .wd2-seg button.on { background: #2f6fed; color: #fff; }
.wd2-row { display: flex; gap: 8px; } .wd2-row input, .wd2-in { flex: 1; min-width: 0; width: 100%; }
.wd2-net { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; background: rgba(15,23,42,.5); display: none; }
.wd2-net-r { display: flex; justify-content: space-between; padding: 3px 0; font-size: 14px; } .wd2-net-r.tot { color: #22c55e; font-weight: 800; }
@media (max-width: 700px) {
  .wd2-hero { padding: 18px; } .wd2-val { font-size: 28px; }
  .wd2-mini { width: 100%; } .wd2-m { min-width: 0; flex: 1; } .wd2-m-v { font-size: 17px; }
  .wd2-sum { grid-template-columns: repeat(3, 1fr); gap: 8px; } .wd2-s { padding: 10px 12px; } .wd2-s-v { font-size: 15px; } .wd2-s-l { font-size: 10px; letter-spacing: .8px; }
  .wd2-tab { flex: 1; justify-content: center; }
  .wd2-tbl-d { display: none; } .wd2-cards { display: grid; }
  #wd-form-modal { align-items: flex-end; }
  #wd-form-modal .wd2-sheet { width: 100%; max-width: 100%; border-radius: 24px 24px 0 0; max-height: 94vh; }
}

@media (max-width: 700px) { .wd2-hero .wd-hero-ic { display: none; } }

/* ===== Modal Buat Voucher: pratinjau tiket (rev v6.5) ===== */
#vc-modal .vc-sheet { width: 540px; max-width: 94vw; padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: 92vh; }
#vc-modal .vc-sheet form { display: flex; flex-direction: column; min-height: 0; max-height: 92vh; }
#vc-modal .vc-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--border); }
#vc-modal .vc-head h2 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 18px; }
#vc-modal .vc-ticket { margin: 14px 18px 4px; padding: 14px 18px; border-radius: 16px; border: 1.5px dashed rgba(56,189,248,.55); background: linear-gradient(135deg, rgba(29,78,216,.28), rgba(15,23,42,.5)); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
#vc-modal .vc-t-l small { display: block; font-size: 11px; letter-spacing: 1.5px; color: var(--text-dim); font-weight: 700; }
#vc-modal .vc-t-l b { display: block; font-family: ui-monospace, Menlo, monospace; font-size: 19px; letter-spacing: 1px; margin: 4px 0; word-break: break-all; }
#vc-modal .vc-t-l span { font-size: 12.5px; color: var(--text-dim); }
#vc-modal .vc-t-r { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: #38bdf8; text-align: right; }
#vc-modal .vc-body { padding: 0 22px 8px; overflow-y: auto; min-height: 0; }
#vc-modal .vc-dseg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border: 1px solid var(--border); border-radius: 14px; gap: 4px; margin-bottom: 10px; }
#vc-modal .vc-dseg button { border: 0; background: transparent; color: var(--text-dim); font-weight: 700; padding: 10px; border-radius: 10px; cursor: pointer; }
#vc-modal .vc-dseg button.on { background: #2f6fed; color: #fff; }
#vc-modal .vc-big { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 16px; padding: 8px 18px; background: rgba(0,0,0,.18); }
#vc-modal .vc-big input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font-family: var(--font-display); font-size: 30px; font-weight: 800; outline: none; padding: 4px 0; box-shadow: none; }
#vc-modal .vc-big span { color: var(--text-dim); font-weight: 700; font-size: 18px; }
#vc-modal .vc-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 12px; }
#vc-modal .vc-chip { border: 1px solid var(--border); background: transparent; color: var(--text-dim); font-weight: 600; font-size: 13px; padding: 7px 14px; border-radius: 99px; cursor: pointer; }
#vc-modal .vc-chip.on { color: #38bdf8; border-color: #2f6fed; background: rgba(47,111,237,.12); }
#vc-modal .vc-actions { margin: 0; padding: 14px 22px; border-top: 1px solid var(--border); display: grid; grid-template-columns: 1fr 1.6fr; gap: 12px; }
#vc-modal .vc-actions .btn { justify-content: center; padding: 12px; border-radius: 99px; }
@media (max-width: 700px) {
  #vc-modal .vc-grid { grid-template-columns: 1fr 1fr; }
  #vc-modal .vc-seg { grid-template-columns: 1fr 1fr; }
  #vc-modal { align-items: flex-end; }
  #vc-modal .vc-sheet { width: 100%; max-width: 100%; border-radius: 24px 24px 0 0; max-height: 94vh; }
}

/* ===== rev v6.7: legend grafik + banner pesanan manual ===== */
.chart-legend .dot.revenue::before { --dot-color: #38bdf8; }
.chart-wrap canvas { cursor: crosshair; }
body .mo-row .mo-ico { background: rgba(239,68,68,.16); color: #ef4444; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; font-size: 0; }
body .mo-row .mo-ico::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #ef4444; }
body .mo-row:not(.has) .mo-ico { background: rgba(148,143,176,.16); }
body .mo-row:not(.has) .mo-ico::before { background: #948fb0; }
body .mo-row.has .mo-ico::before { animation: mo2Pulse 1.6s ease-in-out infinite; }
.mo-row .mo-dot, .mo-row.has .mo-dot { display: none !important; }
@keyframes mo2Pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.55); } 50% { box-shadow: 0 0 0 8px rgba(239,68,68,0); } }
.mo-row .mo-value { font-size: 14.5px; }

/* ===== rev v6.7: kartu Absen Hari Ini (owner) ===== */
.owner-absen { border: 1px solid rgba(34,197,94,.35); background: linear-gradient(135deg, rgba(34,197,94,.10), rgba(34,197,94,.03)); border-radius: 20px; padding: 16px; }
.owner-absen .oa-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.owner-absen .oa-ic { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid rgba(34,197,94,.5); color: #22c55e; display: flex; align-items: center; justify-content: center; flex: 0 0 38px; }
.owner-absen .oa-head > div { flex: 1; min-width: 0; }
.owner-absen .oa-head b { display: block; font-size: 15px; }
.owner-absen .oa-head span { font-size: 12px; color: var(--text-dim); }
.owner-absen .oa-head em { font-style: normal; font-weight: 800; font-family: var(--font-display); font-size: 20px; color: #22c55e; }
.owner-absen .oa-lbl { margin: 12px 0 6px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; }
.owner-absen .oa-list { display: flex; flex-wrap: wrap; gap: 6px; }
.owner-absen .oa-chip { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-dim); background: var(--bg-soft); }
.owner-absen .oa-chip.ok { color: #22c55e; border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.10); }
.owner-absen .oa-none { font-size: 12.5px; color: var(--text-dim); }
.owner-absen .oa-more { display: inline-flex; align-items: center; gap: 4px; margin-top: 14px; font-size: 12.5px; font-weight: 700; color: var(--accent-2, #38bdf8); text-decoration: none; }
.db-side #owner-absen-wrap { order: 5; }

/* ===== rev v6.8: All Transaksi tabel kartu per baris (ikut tema) ===== */
.filter-sep { width: 1px; background: var(--border); margin: 2px 4px; }
.filter-wrap .btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
#table-wrap table.trx-table { border-collapse: separate; border-spacing: 0 8px; }
.trx-table thead th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; border: 0; background: transparent; padding: 4px 14px; }
.trx-table tr.trx-row > td { background: rgba(127,127,127,.06); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 13px 14px; }
.trx-table tr.trx-row > td:first-child { border-left: 1px solid var(--border); border-radius: 14px 0 0 14px; position: relative; padding-left: 18px; }
.trx-table tr.trx-row > td:last-child { border-right: 1px solid var(--border); border-radius: 0 14px 14px 0; }
.trx-table tr.trx-row > td:first-child::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--warning, #f59e0b); }
.trx-table tr.trx-s-success > td:first-child::before { background: var(--success, #22c55e); }
.trx-table tr.trx-s-expired > td:first-child::before, .trx-table tr.trx-s-failed > td:first-child::before { background: var(--danger, #ef4444); }
.trx-table tr.trx-row:hover > td { background: var(--accent-soft, rgba(56,189,248,.08)); }
.trx-table tr.trx-row.open > td { border-bottom-color: transparent; border-radius: 0; }
.trx-table tr.trx-row.open > td:first-child { border-radius: 14px 0 0 0; }
.trx-table tr.trx-row.open > td:last-child { border-radius: 0 14px 0 0; }
.trx-table tr.trx-detail.open > td { margin: 0; padding: 16px 18px; background: var(--accent-soft, rgba(56,189,248,.06)); border: 1px solid var(--border); border-top: 0; border-radius: 0 0 14px 14px; }
.trx-table .price-cell { font-weight: 800; }
.trx-table .c-sub-ref { display: none; }
.trx-src { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-dim); }
.trx-src i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.trx-src i.wa { background: #22c55e; } .trx-src i.web { background: #a78bfa; }
@media (min-width: 701px) { .trx-table .c-sub-time { display: none; } }
@media (max-width: 700px) {
  .trx-table .c-id, .trx-table .c-user, .trx-table .c-src { display: none; }
  .trx-table .c-sub-ref { display: inline; }
  .trx-table tr.trx-row > td { padding: 11px 9px; }
  .trx-table tr.trx-row > td:first-child { padding-left: 14px; }
  .trx-table thead { display: none; }
}
.trx-table .trx-toko-m { display: none; }
.trx-table .d-toko { display: none; }
@media (max-width: 700px) {
  .trx-table .trx-toko-m { display: block; font-size: 11px; font-weight: 700; color: var(--accent); margin-bottom: 2px; }
  .trx-table .d-toko { display: flex; }
}


/* --- SITE CHROME --- */
/* ==============================================
   CHROME PUBLIK (16 Okt): pill profil di top bar + footer ala NPay.
   Dipakai landing (index.html) & halaman Harga (pricing.html).
   Pakai token SC (--surface-solid, --border, --accent, dst) -> dark/light ikut jalan.
   ============================================== */

/* ---------- Pill profil (muncul kalau udah login, gantiin tombol LOGIN) ---------- */
.nav-profile { position: relative; }
.nav-profile-btn {
  display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 5px;
  border-radius: 999px; border: 1px solid var(--border); background: var(--accent-soft);
  color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.nav-profile-btn:hover { border-color: var(--accent); }
.nav-profile-av {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--gradient); color: #fff; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; text-transform: uppercase;
}
.nav-profile-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-profile-badge {
  font-size: 9.5px; font-weight: 800; letter-spacing: .8px; padding: 2px 7px; border-radius: 99px;
  color: var(--success); background: var(--success-soft);
}
.nav-profile-badge.exp { color: var(--danger); background: var(--danger-soft); }
.nav-profile-caret { display: inline-flex; color: var(--text-dim); transition: transform .2s; }
.nav-profile.open .nav-profile-caret { transform: rotate(180deg); }
.nav-profile-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 10px); min-width: 210px; z-index: 70;
  padding: 6px; border-radius: 16px; border: 1px solid var(--border);
  background: var(--surface-solid); box-shadow: var(--shadow-card);
}
.nav-profile.open .nav-profile-menu { display: block; }
.nav-profile-info { padding: 10px 12px 8px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.nav-profile-info b { display: block; font-size: 13px; }
.nav-profile-info span { display: block; font-size: 11.5px; color: var(--text-dim); margin-top: 2px; word-break: break-all; }
.nav-profile-menu a, .nav-profile-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; background: none;
  border-radius: 10px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text); cursor: pointer; text-align: left;
}
.nav-profile-menu a:hover, .nav-profile-menu button:hover { background: var(--accent-soft); }
.nav-profile-menu .out { color: var(--danger); }
.nav-profile-menu .out:hover { background: var(--danger-soft); }
@media (max-width: 560px) { .nav-profile-badge { display: none; } .nav-profile-name { max-width: 70px; } }
@media (max-width: 420px) { .nav-profile-name { display: none; } .nav-profile-btn { padding: 0 9px 0 5px; } }

/* ---------- Footer ala NPay: logo + keterangan, kolom menu, kondisi server ---------- */
.site-footer {
  position: relative; z-index: 1; max-width: 1120px; margin: 56px auto 0; padding: 36px 24px 28px;
  border-top: 1px solid var(--border);
  /* .landing-footer lama (center, kecil) ditimpa */
  text-align: left; color: var(--text-dim); font-size: 13px;
}
.site-footer-grid { display: grid; gap: 30px; grid-template-columns: 1fr; }
@media (min-width: 761px) { .site-footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; } }
.site-footer-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--text); }
.site-footer-brand img { width: 32px; height: 32px; border-radius: 10px; display: block; }
.site-footer-about { margin: 12px 0 0; max-width: 340px; line-height: 1.7; font-size: 13px; }
.site-footer-col h4 { margin: 0 0 14px; font-size: 11px; letter-spacing: 1.6px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; opacity: .8; }
.site-footer-col a { display: block; margin-bottom: 11px; font-size: 14px; font-weight: 600; color: var(--text); transition: color .2s; }
.site-footer-col a:hover { color: var(--accent); }
.site-footer-status { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--text); }
.site-footer-status i { width: 9px; height: 9px; border-radius: 50%; background: var(--success); box-shadow: 0 0 10px var(--success); flex-shrink: 0; }
.site-footer-status.down i { background: var(--danger); box-shadow: 0 0 10px var(--danger); }
.site-footer-copy { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-dim); }
/* biar copyright gak nabrak tombol scroll-up di kanan-bawah */
.site-footer { padding-bottom: 84px; }

/* ---------- HP: akun masuk menu garis 3, pill profil disembunyiin ---------- */
.nav-acct { display: none; }
@media (max-width: 760px) {
  .nav-profile { display: none; }
  .nav-links.open .nav-acct { display: block; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
  .nav-acct-info { display: flex; align-items: center; gap: 10px; padding: 8px 14px 10px; }
  .nav-acct-info > div { min-width: 0; }
  .nav-acct-info b { display: inline; font-size: 14px; margin-right: 6px; }
  .nav-acct-info small { display: block; font-size: 11.5px; color: var(--text-dim); word-break: break-all; margin-top: 2px; }
  .nav-acct a, .nav-acct button {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 0; background: none;
    border-radius: 12px; font: inherit; font-size: 14px; font-weight: 600; color: var(--text-dim); cursor: pointer; text-align: left;
  }
  .nav-acct a:hover, .nav-acct button:hover { background: var(--accent-soft); color: var(--text); }
  .nav-acct .out { color: var(--danger); }
}


/* --- LANDING NPAY --- */
/* ==============================================
   LANDING SC — gaya ala landing NPay (15 Okt)
   Dipasang SETELAH <style> inline di views/index.html biar menang urutan.
   Isi: background grid + glow, bentuk tombol, nav pill, loading screen.
   Warna tetap pakai token SC (--bg, --accent, dll) jadi dark/light ikut jalan.
   TIDAK menyentuh .modal-overlay / .modal-box (sistem modal sitewide).
   ============================================== */

:root {
  --lp-grid: rgba(56, 130, 246, 0.09);
  --lp-glow: rgba(47, 111, 237, 0.16);
}

/* ---------- Background: grid tipis + glow biru + vignette ---------- */
body {
  background: var(--bg);
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 480px at 75% 12%, var(--lp-glow), transparent 62%),
    linear-gradient(var(--lp-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--lp-grid) 1px, transparent 1px);
  background-size: auto, 44px 44px, 44px 44px;
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 20%, transparent 30%, var(--bg) 92%);
}
main, .landing-footer { position: relative; z-index: 1; }

/* ---------- Nav: pill melayang, blur, radius gede kayak topbar NPay ---------- */
.landing-nav-wrap { padding-top: 12px; }
.landing-nav {
  background: color-mix(in srgb, var(--surface-solid) 85%, transparent);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border-radius: 24px;
  padding: 8px 12px;
}

/* ---------- Tombol: radius 12, primary gradien datar, ghost kalem ---------- */
.landing-nav .btn,
main .btn,
.cta-banner .btn {
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: 0;
}
.landing-nav .btn-primary,
main .btn-primary {
  background: var(--gradient);
  box-shadow: none;
  border-color: transparent;
}
.landing-nav .btn-primary:hover,
main .btn-primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 18px var(--accent-glow);
}
.landing-nav .btn-ghost,
main .btn-ghost {
  background: var(--accent-soft);
  color: var(--text);
  border: 1px solid var(--border);
}
.landing-nav .btn-ghost:hover,
main .btn-ghost:hover {
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: none;
}
.hero .cta-row .btn { padding: 12px 22px; }

/* Eyebrow hero: pil kecil dengan titik hijau, sama kayak NPay */
.hero .eyebrow {
  border-radius: 20px;
  background: var(--accent-soft);
  border: 1px solid var(--border);
}

/* ---------- Loading screen: cincin gradien muter + logo ---------- */
#pageLoader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: var(--bg);
  transition: opacity 0.35s ease;
}
#pageLoader.hidden { opacity: 0; pointer-events: none; }
.sc-ring { position: relative; width: 96px; height: 96px; }
.sc-ring-spin {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(47,111,237,0) 0deg, rgba(47,111,237,.15) 120deg, #2f6fed 340deg, #38bdf8 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  animation: scSpin 0.95s linear infinite;
  will-change: transform;
}
.sc-ring::before {
  content: ""; position: absolute; inset: 8px; border-radius: 50%;
  background: var(--bg-soft); border: 1px solid var(--border);
}
.sc-ring img {
  position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; border-radius: 12px;
  transform: translate(-50%, -50%); object-fit: contain;
}
.sc-loader-text { font-size: 13px; color: var(--text-dim); letter-spacing: .02em; }
@keyframes scSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sc-ring-spin { animation-duration: 3s; } }

/* ==============================================
   v2 (15 Okt): menu NPay, animasi bot di hero, ikon kartu, CTA, panduan, stats
   ============================================== */

/* ---------- Nav: logo kiri, LOGIN + tema + ☰ kanan ---------- */
.landing-nav {
  position: relative;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px 8px 14px;
}
.nav-brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; min-width: 0;
  font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text); }
.nav-brand img { border-radius: 9px; display: block; }
.nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nav-actions .btn { padding: 8px 16px; font-size: 13px; }
.nav-menu-btn {
  width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; cursor: pointer; padding: 0;
}
.nav-links { display: none; }
.nav-links.open {
  display: flex; flex-direction: column; gap: 2px;
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 60;
  padding: 8px; border-radius: 20px; border: 1px solid var(--border);
  background: var(--surface-solid); box-shadow: var(--shadow-card);
}
.nav-links a {
  position: relative; padding: 12px 14px; border-radius: 12px;
  font-size: 14px; font-weight: 600; color: var(--text-dim); transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--text); background: var(--accent-soft); }
.nav-links a.active { color: var(--accent); background: var(--accent-soft); }
@media (max-width: 359px) { .nav-brand span { display: none; } }
@media (min-width: 761px) {
  .nav-links, .nav-links.open {
    display: flex; flex-direction: row; position: static; flex: 1; justify-content: center; gap: 2px;
    padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0;
  }
  .nav-links a { padding: 8px 14px; }
  .nav-menu-btn { display: none; }
}

/* ---------- Hero: animasi bot Telegram (ganti mockup dashboard) ---------- */
.hero .dashboard-preview-wrap { display: flex; justify-content: center; }
.bot-stage { display: flex; flex-direction: column; align-items: center; gap: 18px; margin: 12px auto 8px; }
.bot-phone {
  position: relative; width: 280px; height: 540px; border-radius: 44px; background: #05080f;
  padding: 10px; border: 1px solid var(--border); box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 60px var(--lp-glow);
}
.bot-phone::before { content: ""; position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  width: 84px; height: 22px; border-radius: 14px; background: #000; z-index: 5; }
.bot-screen { width: 100%; height: 100%; border-radius: 34px; overflow: hidden; background: #0e1621; display: flex; flex-direction: column; position: relative; color: #f2f0fb; text-align: left; }
.bot-head { padding: 42px 14px 10px; display: flex; align-items: center; gap: 10px; background: #17212b; border-bottom: 1px solid rgba(255,255,255,.05); }
.bot-av { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg,#1d4ed8,#38bdf8); display: grid; place-items: center; color: #fff; }
.bot-head b { font-size: 13px; display: block; } .bot-head small { font-size: 10.5px; color: #34d399; }
.bot-chat { flex: 1; padding: 12px 10px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; justify-content: flex-end; }
.bot-msg { max-width: 90%; padding: 8px 10px; border-radius: 14px; font-size: 11.5px; line-height: 1.45; opacity: 0; transform: translateY(10px) scale(.97); transition: opacity .35s, transform .35s; }
.bot-msg.show { opacity: 1; transform: none; }
.bot-msg.me { align-self: flex-end; background: #2b5278; border-bottom-right-radius: 4px; }
.bot-msg.bot { align-self: flex-start; background: #182533; border-bottom-left-radius: 4px; }
.bot-kb { display: flex; flex-direction: column; gap: 4px; margin-top: 7px; }
.bot-kb .row { display: flex; gap: 4px; }
.bot-kb span { flex: 1; text-align: center; font-size: 10.5px; font-weight: 600; color: #cfe3ff; background: rgba(47,111,237,.22); border-radius: 8px; padding: 7px 4px; transition: background .2s, transform .15s; }
.bot-kb span.tap { background: #2f6fed; color: #fff; transform: scale(.95); }
.bot-qr { width: 96px; height: 96px; background: #fff; border-radius: 10px; padding: 7px; margin: 2px 0 6px; }
.bot-qr svg { width: 100%; height: 100%; fill: #0b1b3f; display: block; }
.bot-paid { align-self: center; font-size: 10.5px; font-weight: 700; padding: 6px 12px; border-radius: 99px; background: rgba(52,211,153,.16); color: #34d399; opacity: 0; transform: scale(.8); transition: .35s; }
.bot-paid.show { opacity: 1; transform: none; }
.bot-toast { position: absolute; left: 10px; right: 10px; top: 46px; z-index: 6; background: #fff; color: #0b1b3f; border-radius: 14px; padding: 9px 11px; font-size: 11px; box-shadow: 0 8px 20px rgba(0,0,0,.4); transform: translateY(-130px); transition: transform .5s cubic-bezier(.2,1.2,.4,1); display: flex; gap: 9px; align-items: center; }
.bot-toast.show { transform: none; }
.bot-toast > i { width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(135deg,#1d4ed8,#38bdf8); display: grid; place-items: center; color: #fff; font-style: normal; flex-shrink: 0; }
.bot-toast b { display: block; font-size: 11.5px; } .bot-toast span { color: #52607a; }
.bot-steps { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 360px; }
.bot-steps div { font-size: 12px; font-weight: 600; padding: 7px 11px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface-solid); color: var(--text-dim); transition: .3s; }
.bot-steps div.on { background: var(--gradient); color: #fff; border-color: transparent; transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .bot-msg, .bot-paid, .bot-toast { transition: none; } }

/* ---------- Kartu fitur: ikon besar samar di pojok (gaya NPay) ---------- */
.feature-card, .bot-feature-compact, .bot-feature-wide, .guide-card {
  position: relative; overflow: hidden; border-radius: 20px; text-align: left;
}
.feature-card .card-icon, .bot-feature-compact .card-icon, .bot-feature-wide .card-icon, .guide-icon {
  position: absolute; right: -10px; top: -10px; width: 104px; height: 104px; margin: 0;
  background: none; border: 0; border-radius: 0; color: var(--accent); opacity: .14;
  transform: rotate(-8deg); display: block; pointer-events: none;
}
.feature-card .card-icon svg, .bot-feature-compact .card-icon svg, .bot-feature-wide .card-icon svg, .guide-icon svg {
  width: 104px; height: 104px; stroke-width: 1.5;
}
.feature-card h3, .bot-feature-compact h3, .bot-feature-wide h3,
.feature-card p, .bot-feature-compact p, .bot-feature-wide p { position: relative; }
.feature-card h3, .bot-feature-compact h3, .bot-feature-wide h3 { margin-top: 44px; font-size: 15.5px; }
.bot-feature-compact p { font-size: 12.5px; }

/* ---------- Kartu panduan bot ---------- */
.guide-card {
  max-width: 720px; margin: 28px auto 0; padding: 26px 24px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card);
}
.guide-card h3 { position: relative; margin: 0 0 8px; font-family: var(--font-display); font-size: 17px; font-weight: 700; }
.guide-card p { position: relative; margin: 0 0 18px; max-width: 460px; color: var(--text-dim); font-size: 13.5px; line-height: 1.6; }
.guide-card .btn { position: relative; }

/* ---------- Statistik jadi 3 kartu ---------- */
.stats-plain { gap: 12px; max-width: 760px; }
.stats-plain .stat-plain-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
  padding: 18px 8px; box-shadow: var(--shadow-card);
}
.stats-plain .stat-plain-item + .stat-plain-item { border-left: 1px solid var(--border); }

/* ---------- Banner CTA: kartu bertema, bukan blok biru solid ---------- */
.cta-banner-inner {
  position: relative; overflow: hidden;
  background: radial-gradient(620px 240px at 50% 0, var(--lp-glow), transparent 70%), var(--surface);
  border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow-card);
}
.cta-banner-inner h2 { color: var(--text); }
.cta-banner-inner p { color: var(--text-dim); }
.cta-banner .btn-primary { background: var(--gradient); color: #fff; border-color: transparent; }
.cta-banner .btn-ghost { background: var(--accent-soft); color: var(--text); border: 1px solid var(--border); }
.cta-banner .btn-ghost:hover { color: var(--accent); border-color: var(--accent); }
.cta-contact-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
@media (max-width: 480px) { .cta-contact-row { display: grid; grid-template-columns: 1fr 1fr; } .cta-contact-row .btn { justify-content: center; } }

/* ---------- Perbaikan kecil v2.1 ---------- */
.tw-nowrap { white-space: nowrap; }
@media (max-width: 420px) {
  .nav-brand span { display: none; }
  .cta-banner-inner { padding: 32px 16px; }
}
.cta-contact-row .btn { white-space: nowrap; padding: 9px 14px; }
@media (max-width: 480px) { .cta-contact-row { display: flex; } }

/* ==============================================
   v3 (16 Okt): angka langkah 01-04 gede + teaser harga
   ============================================== */
.step-card { align-items: center; gap: 20px; }
.step-card .step-num {
  width: auto; height: auto; min-width: 60px; border-radius: 0; background: none; box-shadow: none;
  font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -1px;
  background-image: var(--gradient); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  padding-right: 20px; border-right: 1px solid var(--border); font-variant-numeric: tabular-nums;
}
@media (max-width: 480px) {
  .step-card { gap: 14px; padding: 18px 16px; }
  .step-card .step-num { font-size: 32px; min-width: 48px; padding-right: 14px; }
}

.price-teaser { max-width: 520px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.price-teaser-box {
  border: 1px solid var(--border); background: var(--surface-solid); border-radius: 18px; padding: 16px 18px; text-align: left;
}
.price-teaser-box.main { border-color: var(--accent-glow); background: linear-gradient(135deg, var(--accent-soft), transparent), var(--surface-solid); }
.price-teaser-box small { display: block; font-size: 11px; letter-spacing: 1.3px; font-weight: 700; color: var(--text-dim); margin-bottom: 6px; }
.price-teaser-box b { font-family: var(--font-display); font-size: clamp(22px, 5.5vw, 30px); font-weight: 800; }
.price-teaser-btn { grid-column: 1 / -1; justify-content: center; padding: 13px; font-size: 14px; }