/* ═══════════════════════════════════════════════
   PayQRIS — E-Wallet Style CSS
   Base font: 13px | Professional & clean
   ═══════════════════════════════════════════════ */

:root {
  --primary:        #2563eb;
  --primary-dark:   #1d4ed8;
  --primary-light:  #eff6ff;
  --success:        #16a34a;
  --success-light:  #f0fdf4;
  --danger:         #dc2626;
  --danger-light:   #fef2f2;
  --warning:        #d97706;
  --warning-light:  #fffbeb;
  --info:           #0284c7;
  --info-light:     #f0f9ff;
  --text:           #111827;
  --text-muted:     #6b7280;
  --border:         #e5e7eb;
  --bg:             #f9fafb;
  --bg-white:       #ffffff;
  --sidebar-w:      220px;
  --header-h:       54px;
  --radius:         10px;
  --shadow:         0 1px 4px rgba(0,0,0,.08);
  --shadow-md:      0 4px 16px rgba(0,0,0,.10);
}

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

html { font-size: 13px; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  font-size: 13px;
  line-height: 1.5;
  overflow-x: hidden;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

/* ── Layout ─────────────────────────────────────── */
.layout {
  display: flex;
  min-height: 100vh;
  overflow: hidden;
}

.main-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin-left: var(--sidebar-w);
  min-height: 100vh;
}

.page-content {
  flex: 1;
  padding: 20px;
  max-width: 100%;
  overflow-x: hidden;
}

/* ── Sidebar ────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: #1e293b;
  color: #cbd5e1;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: transform .25s ease;
  overflow: hidden;
}

.sidebar-brand {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.sidebar-brand a { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.sidebar-brand-icon { width: 32px; height: 32px; background: var(--primary); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-size: 14px; flex-shrink: 0; }
.sidebar-brand-text { font-weight: 700; font-size: 13px; color: white; }
.sidebar-brand-sub  { font-size: 10px; color: #64748b; }

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 4px; }

.nav-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: #475569; padding: 8px 8px 4px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 8px;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all .15s;
  position: relative;
  cursor: pointer;
}
.nav-item i { width: 16px; font-size: 13px; flex-shrink: 0; }
.nav-item:hover { background: rgba(255,255,255,.06); color: #e2e8f0; text-decoration: none; }
.nav-item.active { background: var(--primary); color: white; }

.nav-badge {
  margin-left: auto;
  background: #ef4444;
  color: white;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
}

.sidebar-footer {
  padding: 10px 12px;
  border-top: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.sidebar-user { display: flex; align-items: center; gap: 8px; }
.sidebar-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 12px; flex-shrink: 0; }
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name { font-size: 12px; font-weight: 600; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { font-size: 10px; color: #64748b; }
.sidebar-logout { color: #64748b; padding: 4px; border-radius: 6px; flex-shrink: 0; }
.sidebar-logout:hover { color: #ef4444; text-decoration: none; }

/* ── Topbar ─────────────────────────────────────── */
.topbar {
  height: var(--header-h);
  background: white;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 50;
  flex-shrink: 0;
}
.topbar-title { font-size: 14px; font-weight: 700; }
.hamburger { display: none; background: none; border: none; font-size: 18px; cursor: pointer; padding: 6px; color: var(--text); border-radius: 8px; }
.hamburger:hover { background: var(--bg); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.topbar-balance { background: var(--primary-light); color: var(--primary); padding: 5px 10px; border-radius: 8px; font-weight: 700; font-size: 12px; }
.topbar-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 12px; }

/* ── Wallet Card ─────────────────────────────────── */
.wallet-card {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  border-radius: 16px;
  color: white;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 8px 32px rgba(37,99,235,.3);
}
.wallet-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.wallet-card-bottom { display: flex; justify-content: space-between; align-items: flex-end; }
.wallet-label { font-size: 11px; opacity: .8; margin-bottom: 2px; }
.wallet-balance { font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.wallet-logo { width: 44px; height: 44px; background: rgba(255,255,255,.15); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.wallet-accnum { font-size: 16px; font-weight: 700; letter-spacing: 3px; display: flex; align-items: center; gap: 8px; }
.copy-btn-white { background: rgba(255,255,255,.2); border: none; color: white; cursor: pointer; border-radius: 6px; padding: 3px 6px; font-size: 11px; }
.copy-btn-white:hover { background: rgba(255,255,255,.3); }

/* Mini wallet strip */
.wallet-mini {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  border-radius: 12px;
  color: white;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  box-shadow: 0 4px 16px rgba(37,99,235,.25);
}

/* ── Quick Actions ───────────────────────────────── */
.quick-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.quick-action-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; flex: 1; min-width: 60px; }
.quick-action-btn:hover { text-decoration: none; }
.qa-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.quick-action-btn span { font-size: 11px; font-weight: 600; color: var(--text); }

/* ── Transfer Layout ─────────────────────────────── */
.transfer-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

/* ── Profile Grid ────────────────────────────────── */
.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

/* ── Stats Grid ──────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.stat-card {
  background: white;
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  min-width: 0;
}
.stat-icon {
  width: 38px; height: 38px;
  background: var(--primary-light);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--primary); font-size: 15px; flex-shrink: 0;
}
.stat-icon.success { background: var(--success-light); color: var(--success); }
.stat-icon.warning { background: var(--warning-light); color: var(--warning); }
.stat-value { font-size: 18px; font-weight: 800; color: var(--text); line-height: 1; }
.stat-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ── Card ────────────────────────────────────────── */
.card {
  background: white;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: white;
  gap: 8px;
  flex-wrap: wrap;
}
.card-title { font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.card-title i { color: var(--primary); }
.card-body { padding: 16px; }
.mb-3 { margin-bottom: 12px; }

/* ── Tables ──────────────────────────────────────── */
.table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
thead th { background: var(--bg); padding: 9px 12px; font-weight: 600; font-size: 11px; color: var(--text-muted); text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
tbody td { padding: 10px 12px; border-bottom: 1px solid #f3f4f6; vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--bg); }

/* ── Forms ───────────────────────────────────────── */
.form-group { margin-bottom: 14px; }
.form-label { display: block; font-weight: 600; font-size: 12px; margin-bottom: 5px; color: var(--text); }
.form-label.required::after { content: ' *'; color: var(--danger); }
.form-control {
  width: 100%; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; color: var(--text);
  background: white;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.form-control::placeholder { color: #9ca3af; }
.form-control:disabled { background: var(--bg); color: var(--text-muted); cursor: not-allowed; }

/* ── Buttons ─────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 600;
  cursor: pointer; border: none;
  text-decoration: none; line-height: 1.4;
  transition: all .15s; white-space: nowrap;
}
.btn:hover { text-decoration: none; opacity: .9; }
.btn-primary   { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-success   { background: var(--success); color: white; }
.btn-danger    { background: var(--danger); color: white; }
.btn-outline   { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-outline:hover { background: var(--bg); }
.btn-ghost     { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--bg); color: var(--text); }
.btn-block     { width: 100%; justify-content: center; }
.btn-sm        { padding: 5px 10px; font-size: 12px; }
.btn-xs        { padding: 3px 7px; font-size: 11px; border-radius: 6px; }

/* ── Alerts ──────────────────────────────────────── */
.alert { padding: 10px 14px; border-radius: 8px; font-size: 12px; margin-bottom: 14px; display: flex; align-items: flex-start; gap: 8px; }
.alert i { flex-shrink: 0; margin-top: 1px; }
.alert-success { background: var(--success-light); color: #166534; border: 1px solid #bbf7d0; }
.alert-error   { background: var(--danger-light);  color: #991b1b; border: 1px solid #fecaca; }
.alert-warning { background: var(--warning-light); color: #92400e; border: 1px solid #fde68a; }
.alert-info    { background: var(--info-light);    color: #075985; border: 1px solid #bae6fd; }

/* ── Badges ──────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 600; }
.badge-sukses  { background: #dcfce7; color: #166534; }
.badge-pending { background: #fef9c3; color: #854d0e; }
.badge-gagal   { background: #fee2e2; color: #991b1b; }
.badge-blue    { background: #dbeafe; color: #1e40af; }
.badge-dibatalkan { background: #f3f4f6; color: #6b7280; }

/* ── Page header ─────────────────────────────────── */
.page-header { margin-bottom: 18px; }
.page-header h1 { font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.page-header p { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ── Divider ─────────────────────────────────────── */
.divider { height: 1px; background: var(--border); margin: 8px 0; }

/* ── Copy button ─────────────────────────────────── */
.copy-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 3px 5px; border-radius: 4px; font-size: 12px; }
.copy-btn:hover { color: var(--primary); background: var(--primary-light); }

/* ── Auth Pages ──────────────────────────────────── */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); }
.auth-card { background: white; border-radius: 16px; padding: 32px; width: 100%; max-width: 380px; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.auth-logo { text-align: center; margin-bottom: 24px; }
.auth-logo-icon { width: 56px; height: 56px; background: linear-gradient(135deg, var(--primary), #7c3aed); border-radius: 16px; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; margin: 0 auto 12px; }
.auth-logo h1 { font-size: 20px; font-weight: 800; color: var(--text); }
.auth-logo p { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.auth-divider { text-align: center; color: var(--text-muted); font-size: 12px; margin: 16px 0; position: relative; }
.auth-divider::before,.auth-divider::after { content: ''; position: absolute; top: 50%; width: 38%; height: 1px; background: var(--border); }
.auth-divider::before { left: 0; }
.auth-divider::after  { right: 0; }

/* ── Utility ─────────────────────────────────────── */
.text-xs     { font-size: 11px; }
.text-sm     { font-size: 12px; }
.text-muted  { color: var(--text-muted); }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-green  { color: var(--success); }
.text-red    { color: var(--danger); }
.font-bold   { font-weight: 700; }
.font-mono   { font-family: 'Courier New', monospace; }
.flex        { display: flex; }
.items-center{ align-items: center; }
.gap-2       { gap: 8px; }
.mb-3        { margin-bottom: 12px; }

/* ── Mobile Nav ──────────────────────────────────── */
.mobile-nav { display: none; }

/* ── Mobile Overlay ──────────────────────────────── */
@media (max-width: 768px) {
  .main-content { margin-left: 0; }
  .hamburger { display: flex; }

  .sidebar {
    transform: translateX(-100%);
    width: 240px;
  }
  .sidebar.open { transform: translateX(0); }

  .mobile-nav {
    display: block;
    position: fixed; bottom: 0; left: 0; right: 0;
    background: white;
    border-top: 1px solid var(--border);
    z-index: 90;
    box-shadow: 0 -4px 20px rgba(0,0,0,.08);
  }
  .mobile-nav-inner { display: flex; }
  .mobile-nav-item {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    padding: 8px 4px 10px; gap: 3px;
    color: var(--text-muted); font-size: 10px; text-decoration: none;
    transition: color .15s;
    border-top: 2px solid transparent;
  }
  .mobile-nav-item i { font-size: 18px; }
  .mobile-nav-item.active { color: var(--primary); border-top-color: var(--primary); }

  .page-content { padding: 14px; padding-bottom: 72px; }

  .stats-grid { grid-template-columns: 1fr 1fr; }
  .profile-grid { grid-template-columns: 1fr; }
  .transfer-layout { grid-template-columns: 1fr; }

  .wallet-card { border-radius: 12px; padding: 16px; }
  .wallet-balance { font-size: 22px; }

  .quick-actions { gap: 8px; }
  .qa-icon { width: 44px; height: 44px; font-size: 16px; }

  table { font-size: 11px; }
  thead th { padding: 7px 8px; }
  tbody td { padding: 8px; }

  .card-header { padding: 10px 12px; }
  .card-body { padding: 12px; }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .wallet-accnum { font-size: 13px; letter-spacing: 2px; }
  .topbar { padding: 0 12px; }
  .page-header h1 { font-size: 16px; }
}

/* ── Grid 2 cols ─────────────────────────────────── */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ── Form Hint ───────────────────────────────────── */
.form-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; line-height: 1.4; }

/* ── Spinner ─────────────────────────────────────── */
.spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: white; border-radius: 50%;
  animation: spin .6s linear infinite; vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Landing Page ────────────────────────────────── */
:root { --primary-mid: #93c5fd; }
.landing {
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg-white);
}
.landing-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 32px; border-bottom: 1px solid var(--border);
  background: white; position: sticky; top: 0; z-index: 10;
}
.landing-nav-brand { display: flex; align-items: center; gap: 10px; }
.landing-nav-brand img { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; }
.landing-nav-links { display: flex; gap: 8px; align-items: center; }
.landing-hero {
  text-align: center; padding: 64px 20px 48px;
  background: linear-gradient(135deg, #eff6ff 0%, #f5f3ff 100%);
  flex: 0;
}
.landing-hero h1 {
  font-size: 38px; font-weight: 900; color: var(--text);
  line-height: 1.2; margin-bottom: 16px;
}
.landing-hero h1 span { color: var(--primary); }
.landing-hero p { font-size: 15px; color: var(--text-muted); max-width: 520px; margin: 0 auto 28px; line-height: 1.7; }
.hero-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.landing-features { padding: 56px 32px; max-width: 1000px; margin: 0 auto; width: 100%; }
.landing-features h2 { font-size: 26px; font-weight: 800; text-align: center; margin-bottom: 32px; }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature-card {
  background: white; border: 1px solid var(--border); border-radius: 14px;
  padding: 22px 18px; text-align: center;
  transition: box-shadow .2s, transform .2s;
}
.feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.feature-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--primary-light); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; margin: 0 auto 12px;
}
.feature-card h3 { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.feature-card p { font-size: 12px; color: var(--text-muted); line-height: 1.6; }
.landing-footer {
  text-align: center; padding: 24px 20px;
  font-size: 12px; color: var(--text-muted);
  border-top: 1px solid var(--border); margin-top: auto;
}

/* ── Chat Layout ─────────────────────────────────── */
.chat-layout {
  display: flex; min-height: 420px; border-top: 1px solid var(--border);
}
.chat-users-list {
  width: 240px; border-right: 1px solid var(--border);
  overflow-y: auto; flex-shrink: 0;
  background: var(--bg);
}
.chat-user-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  transition: background .15s; cursor: pointer;
}
.chat-user-item:hover { background: var(--primary-light); }
.chat-user-item.active { background: var(--primary-light); border-left: 3px solid var(--primary); }
.chat-user-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--primary); color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.chat-user-meta { flex: 1; min-width: 0; }
.chat-user-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-user-last { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-header {
  padding: 12px 16px; font-weight: 600; font-size: 13px;
  border-bottom: 1px solid var(--border); background: white; flex-shrink: 0;
}
.chat-scroll {
  flex: 1; overflow-y: auto; padding: 16px; display: flex;
  flex-direction: column; gap: 10px; min-height: 280px; max-height: 460px;
}
.chat-form {
  padding: 12px 16px; border-top: 1px solid var(--border);
  background: white; display: flex; align-items: center; flex-shrink: 0;
}
/* User chat window */
.chat-window { display: flex; flex-direction: column; }
.chat-messages {
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
  min-height: 300px; max-height: 480px; overflow-y: auto;
}
.chat-input-bar {
  padding: 12px 16px; border-top: 1px solid var(--border);
  background: white; display: flex; align-items: center;
}
/* Chat Bubbles */
.chat-bubble {
  max-width: 68%; padding: 9px 13px; border-radius: 14px;
  font-size: 13px; line-height: 1.5; word-break: break-word;
}
.chat-bubble.user {
  background: var(--primary); color: white;
  border-bottom-right-radius: 4px;
}
.chat-bubble.admin {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  border-bottom-left-radius: 4px;
}
.chat-bubble-sender { font-size: 10px; font-weight: 700; opacity: .75; margin-bottom: 3px; }
.chat-bubble-time { font-size: 10px; opacity: .6; margin-top: 4px; text-align: right; }

/* ── QRIS Container ──────────────────────────────── */
.qris-container { text-align: center; padding: 8px 0; }
.qris-img-wrapper { display: inline-block; background: white; border: 2px solid var(--border); border-radius: 16px; padding: 12px; margin-bottom: 12px; }
.qris-img-wrapper img { width: 200px; height: 200px; display: block; }
.qris-amount { font-size: 22px; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.qris-trxid { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; font-family: monospace; color: var(--text-muted); margin-bottom: 6px; }
.qris-expired { font-size: 12px; color: var(--warning); }

/* ── Success Overlay ─────────────────────────────── */
.success-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center; z-index: 9999;
}
.success-box {
  background: white; border-radius: 20px; padding: 36px 28px;
  text-align: center; max-width: 340px; width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.success-icon-anim { font-size: 52px; margin-bottom: 12px; }
.success-title { font-size: 20px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.success-sub { font-size: 13px; color: var(--text-muted); }

/* ── Responsive fixes ────────────────────────────── */
@media (max-width: 768px) {
  .grid-2 { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr 1fr; }
  .landing-hero h1 { font-size: 26px; }
  .landing-features { padding: 36px 16px; }
  .landing-nav { padding: 12px 16px; }
  .chat-users-list { width: 180px; }
}
@media (max-width: 480px) {
  .features-grid { grid-template-columns: 1fr; }
  .chat-layout { flex-direction: column; }
  .chat-users-list { width: 100%; border-right: none; border-bottom: 1px solid var(--border); max-height: 180px; }
}

/* ── Info Post & Reactions ───────────────────────── */
.info-post { transition: box-shadow .2s; }
.info-post:hover { box-shadow: var(--shadow-md); }
.reaction-btn:hover { transform: scale(1.08); }
.reaction-btn.active { font-weight: 700; }


/* ── Admin Mobile Nav ─────────────────────────────── */
.admin-mobile-nav { display: none; }

@media (max-width: 768px) {
  .admin-mobile-nav {
    display: block;
    position: fixed; bottom: 0; left: 0; right: 0;
    background: #1e293b;
    border-top: 1px solid rgba(255,255,255,.07);
    z-index: 90;
    box-shadow: 0 -4px 20px rgba(0,0,0,.25);
  }
  .admin-mobile-nav-inner { display: flex; }
  .admin-nav-item {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    padding: 8px 4px 10px; gap: 3px;
    color: #64748b; font-size: 10px; font-weight: 600;
    text-decoration: none; transition: color .15s;
    border-top: 2px solid transparent; position: relative;
  }
  .admin-nav-item i { font-size: 18px; }
  .admin-nav-item.active { color: #60a5fa; border-top-color: #60a5fa; }
  .admin-nav-badge {
    position: absolute; top: 4px; left: 50%; margin-left: 4px;
    background: #ef4444; color: white; font-size: 9px; font-weight: 800;
    border-radius: 99px; min-width: 15px; height: 15px;
    display: flex; align-items: center; justify-content: center; padding: 0 3px;
  }

  /* Admin dashboard uses its own full-width layout on mobile */
  .adm-wrap { padding-bottom: 90px; }
}


/* ══════════════════════════════════════════════════
   WebView Compact Override — all sizes reduced
   ══════════════════════════════════════════════════ */
html { font-size: 11px !important; -webkit-text-size-adjust: 100%; }

/* Buttons */
.btn            { padding: 6px 12px !important; font-size: 11px !important; }
.btn-sm         { padding: 4px 9px  !important; font-size: 10px !important; }
.btn-xs         { padding: 2px 6px  !important; font-size: 10px !important; }
.btn-block      { padding: 9px 12px !important; font-size: 12px !important; }

/* Forms */
.form-control   { padding: 7px 10px !important; font-size: 11px !important; }
.form-label     { font-size: 11px   !important; margin-bottom: 4px !important; }
.form-hint      { font-size: 10px   !important; }

/* Cards */
.card-body      { padding: 12px     !important; }
.card-header    { padding: 8px 12px !important; }
.card-title     { font-size: 12px   !important; }

/* Page content */
.page-content   { padding: 10px 10px 72px !important; }

/* Page header */
.page-header h1 { font-size: 14px   !important; }
.page-header p  { font-size: 11px   !important; }

/* Topbar */
.topbar         { height: 46px      !important; padding: 0 12px !important; }
.topbar-title   { font-size: 13px   !important; }

/* Wallet card */
.wallet-balance { font-size: 20px   !important; }
.wallet-accnum  { font-size: 13px   !important; letter-spacing: 2px !important; }
.wallet-card    { padding: 14px     !important; border-radius: 12px !important; }

/* Quick actions */
.qa-icon        { width: 40px !important; height: 40px !important; font-size: 16px !important; }
.quick-action-btn span { font-size: 10px !important; }

/* Stats */
.stat-card      { padding: 10px 11px !important; gap: 9px !important; }
.stat-icon      { width: 32px !important; height: 32px !important; font-size: 13px !important; }
.stat-value     { font-size: 15px   !important; }
.stat-label     { font-size: 10px   !important; }

/* Tables */
thead th        { padding: 7px 9px  !important; font-size: 10px !important; }
tbody td        { padding: 8px 9px  !important; font-size: 11px !important; }

/* Alert */
.alert          { padding: 8px 11px !important; font-size: 11px !important; }

/* Badge */
.badge          { font-size: 9px    !important; padding: 2px 6px !important; }

/* Sidebar */
.nav-item       { padding: 7px 9px  !important; font-size: 11px !important; }
.nav-label      { font-size: 9px    !important; }

/* Mobile nav */
.mobile-nav-item { padding: 6px 4px 8px !important; font-size: 9px !important; }
.mobile-nav-item i { font-size: 17px !important; }

/* Chat bubbles */
.chat-bubble    { font-size: 11px   !important; padding: 7px 11px !important; }

/* Auth card */
.auth-card      { padding: 22px     !important; }
.auth-logo h1   { font-size: 17px   !important; }
.auth-logo p    { font-size: 11px   !important; }
.auth-logo-icon { width: 46px !important; height: 46px !important; font-size: 20px !important; }

/* Admin dashboard (adm-*) */
.adm-wrap          { padding: 10px 10px 80px !important; }
.adm-header        { padding: 12px 13px 11px !important; border-radius: 14px !important; }
.adm-header-name   { font-size: 14px !important; }
.adm-header-title  { font-size: 10px !important; }
.adm-stat          { padding: 11px 11px !important; border-radius: 11px !important; }
.adm-stat-val      { font-size: 14px !important; }
.adm-stat-lbl      { font-size: 9px  !important; }
.adm-stat-icon     { width: 32px !important; height: 32px !important; font-size: 14px !important; }
.adm-qa-btn        { padding: 11px 6px !important; border-radius: 11px !important; }
.adm-qa-icon       { width: 38px !important; height: 38px !important; font-size: 16px !important; }
.adm-qa-label      { font-size: 10px !important; }
.adm-list-row      { padding: 9px 11px !important; }
.adm-list-name     { font-size: 11px !important; }
.adm-list-sub      { font-size: 9px  !important; }
.adm-list-avatar   { width: 28px !important; height: 28px !important; font-size: 11px !important; }
.adm-list-header   { padding: 9px 11px !important; }
.adm-list-header-title { font-size: 11px !important; }
.adm-alert         { padding: 9px 11px !important; border-radius: 10px !important; }
.adm-alert-icon    { width: 30px !important; height: 30px !important; font-size: 13px !important; }
.adm-alert-text strong { font-size: 11px !important; }
.adm-alert-text span   { font-size: 10px !important; }
.adm-section-title { font-size: 10px !important; margin: 12px 0 8px !important; }
.adm-empty         { padding: 20px  !important; font-size: 11px !important; }

/* ══════════════════════════════════════════════════════════════════
   DARK THEME — berlaku di SEMUA halaman
   Toggle: toggleTheme() → localStorage 'paym-theme' = 'dark'/'light'
   ══════════════════════════════════════════════════════════════════ */

/* ── Root background ───────────────────────────────────── */
html[data-theme="dark"],
html[data-theme="dark"] body  { background:#09090f!important;color:#e2e8f0!important; }
html[data-theme="dark"] .layout { background:#09090f!important; }
html[data-theme="dark"] .main-content { background:#09090f!important; }
html[data-theme="dark"] .page-content  { background:#09090f!important; }

/* ── Topbar ────────────────────────────────────────────── */
html[data-theme="dark"] .topbar           { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .topbar-title     { color:#e2e8f0!important; }
html[data-theme="dark"] .topbar-balance   { color:#94a3b8!important; }
html[data-theme="dark"] .topbar-avatar    { background:#1e2535!important;color:#60a5fa!important; }

/* ── Sidebar ───────────────────────────────────────────── */
html[data-theme="dark"] .sidebar              { background:#07070d!important;border-color:#1e2535!important; }
html[data-theme="dark"] .sidebar-brand        { border-color:#1e2535!important; }
html[data-theme="dark"] .sidebar-brand-text   { color:#e2e8f0!important; }
html[data-theme="dark"] .sidebar-brand-sub    { color:#6b7280!important; }
html[data-theme="dark"] .sidebar-user         { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .sidebar-user-name    { color:#e2e8f0!important; }
html[data-theme="dark"] .sidebar-user-role    { color:#6b7280!important; }
html[data-theme="dark"] .sidebar-nav a        { color:#94a3b8!important; }
html[data-theme="dark"] .sidebar-nav a:hover,
html[data-theme="dark"] .sidebar-nav a.active { background:#1e3a8a22!important;color:#60a5fa!important; }
html[data-theme="dark"] .sidebar-footer       { border-color:#1e2535!important; }
html[data-theme="dark"] .sidebar-logout       { color:#f87171!important; }

/* ── Mobile nav (user) ─────────────────────────────────── */
html[data-theme="dark"] .mobile-nav           { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .mobile-nav-item      { color:#475569!important; }
html[data-theme="dark"] .mobile-nav-item.active { color:#3b82f6!important; }
html[data-theme="dark"] .mobile-nav-item .mobile-nav-label { color:inherit!important; }

/* ── Cards ─────────────────────────────────────────────── */
html[data-theme="dark"] .card           { background:#0f1117!important;border-color:#1e2535!important;box-shadow:none!important; }
html[data-theme="dark"] .card-header    { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .card-title     { color:#e2e8f0!important; }
html[data-theme="dark"] .card-body      { color:#e2e8f0!important; }
html[data-theme="dark"] .card-footer    { background:#0f1117!important;border-color:#1e2535!important; }

/* ── Stats ─────────────────────────────────────────────── */
html[data-theme="dark"] .stat-card      { background:#0f1117!important;border-color:#1e2535!important;box-shadow:none!important; }
html[data-theme="dark"] .stat-value     { color:#e2e8f0!important; }
html[data-theme="dark"] .stat-label     { color:#6b7280!important; }
html[data-theme="dark"] .stats-grid .stat-card { background:#0f1117!important; }

/* ── Wallet card (neon blue — tetap, hanya border) ─────── */
html[data-theme="dark"] .wallet-mini    { background:#0f1117!important;border-color:#1e2535!important; }

/* ── Forms ─────────────────────────────────────────────── */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select    { background:#161b28!important;border-color:#1e2535!important;color:#e2e8f0!important; }
html[data-theme="dark"] .form-control:focus { border-color:#3b82f6!important;background:#1a2038!important; }
html[data-theme="dark"] .form-label     { color:#94a3b8!important; }
html[data-theme="dark"] .form-hint      { color:#475569!important; }
html[data-theme="dark"] .form-group     { color:#e2e8f0!important; }
html[data-theme="dark"] .input-group-text { background:#161b28!important;border-color:#1e2535!important;color:#94a3b8!important; }
html[data-theme="dark"] textarea.form-control { background:#161b28!important;color:#e2e8f0!important; }
html[data-theme="dark"] select option   { background:#161b28;color:#e2e8f0; }

/* ── Tables ─────────────────────────────────────────────── */
html[data-theme="dark"] table           { color:#e2e8f0!important; }
html[data-theme="dark"] thead th        { background:#161b28!important;border-color:#1e2535!important;color:#6b7280!important; }
html[data-theme="dark"] tbody td        { border-color:#1e2535!important;color:#e2e8f0!important; }
html[data-theme="dark"] tbody tr:hover  { background:#161b28!important; }
html[data-theme="dark"] .table-striped tbody tr:nth-child(odd) { background:#0f1117!important; }

/* ── Buttons — hanya light/ghost/outline yg berubah ────── */
html[data-theme="dark"] .btn-ghost      { background:#161b28!important;color:#94a3b8!important;border-color:#1e2535!important; }
html[data-theme="dark"] .btn-outline    { border-color:#1e2535!important;color:#94a3b8!important; }
html[data-theme="dark"] .btn-xs,
html[data-theme="dark"] .btn-sm         { /* inherit color from parent class */ }

/* ── Auth pages ─────────────────────────────────────────── */
html[data-theme="dark"] .auth-page      { background:#09090f!important; }
html[data-theme="dark"] .auth-card      { background:#0f1117!important;border-color:#1e2535!important;box-shadow:none!important; }
html[data-theme="dark"] .auth-logo      { color:#e2e8f0!important; }
html[data-theme="dark"] .auth-logo-icon { background:#1e3a8a!important; }
html[data-theme="dark"] .auth-divider   { color:#475569!important; }
html[data-theme="dark"] .auth-divider::before,
html[data-theme="dark"] .auth-divider::after { background:#1e2535!important; }

/* ── Alerts / badges ─────────────────────────────────────── */
html[data-theme="dark"] .alert          { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .alert-success  { border-color:#14532d!important;color:#4ade80!important; }
html[data-theme="dark"] .alert-danger   { border-color:#7f1d1d!important;color:#f87171!important; }
html[data-theme="dark"] .alert-warning  { border-color:#78350f!important;color:#fbbf24!important; }
html[data-theme="dark"] .alert-info     { border-color:#1e3a8a!important;color:#60a5fa!important; }
html[data-theme="dark"] .badge-sukses   { background:#052e16!important;color:#4ade80!important; }
html[data-theme="dark"] .badge-pending  { background:#1c1400!important;color:#fbbf24!important; }
html[data-theme="dark"] .badge-gagal    { background:#1c0202!important;color:#f87171!important; }
html[data-theme="dark"] .badge          { background:#1e2535!important;color:#94a3b8!important; }

/* ── Admin: .adm-* ───────────────────────────────────────── */
html[data-theme="dark"] .adm-wrap       { background:#09090f!important; }
html[data-theme="dark"] .adm-stat       { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .adm-stat-val   { color:#e2e8f0!important; }
html[data-theme="dark"] .adm-stat-lbl   { color:#6b7280!important; }
html[data-theme="dark"] .adm-list-card  { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .adm-list-header { background:#161b28!important;border-color:#1e2535!important;color:#6b7280!important; }
html[data-theme="dark"] .adm-list-row   { border-color:#1e2535!important; }
html[data-theme="dark"] .adm-list-row:hover { background:#161b28!important; }
html[data-theme="dark"] .adm-list-name  { color:#e2e8f0!important; }
html[data-theme="dark"] .adm-list-sub   { color:#6b7280!important; }
html[data-theme="dark"] .adm-list-val   { color:#e2e8f0!important; }
html[data-theme="dark"] .adm-qa-btn     { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .adm-qa-icon    { background:#161b28!important; }
html[data-theme="dark"] .adm-qa-label   { color:#94a3b8!important; }
html[data-theme="dark"] .adm-alert      { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .adm-section-title { color:#475569!important; }
html[data-theme="dark"] .adm-empty      { color:#475569!important; }
html[data-theme="dark"] .adm-mobile-nav { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .adm-mnb        { color:#475569!important; }
html[data-theme="dark"] .adm-mnb.active { color:#3b82f6!important; }
html[data-theme="dark"] .adm-mobile-nav a { color:#475569!important; }
html[data-theme="dark"] .adm-mobile-nav a.active { color:#3b82f6!important; }

/* ── Shop pages: .sh-*, .prod-*, etc. ───────────────────── */
html[data-theme="dark"] .sh-header      { /* neon blue — tetap */ }
html[data-theme="dark"] .sh-nav-strip   { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .sh-nav-item    { color:#94a3b8!important; }
html[data-theme="dark"] .sh-nav-item.active { color:#3b82f6!important; }
html[data-theme="dark"] .sh-nav-lbl     { color:#94a3b8!important; }
html[data-theme="dark"] .sh-mobile-nav  { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .sh-mnb         { color:#475569!important; }
html[data-theme="dark"] .sh-mnb.active  { color:#f97316!important; }
html[data-theme="dark"] .sh-section-head { background:#0f1117!important;border-color:#1e2535!important;color:#e2e8f0!important; }
html[data-theme="dark"] .sh-section-head span { color:#94a3b8!important; }
html[data-theme="dark"] .prod-card      { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .prod-name      { color:#e2e8f0!important; }
html[data-theme="dark"] .prod-seller    { color:#6b7280!important; }
html[data-theme="dark"] .prod-desc      { color:#6b7280!important; }
html[data-theme="dark"] .banner-slider  { background:#161b28!important; }
html[data-theme="dark"] .sec-title      { background:#09090f!important;border-color:#1e2535!important;color:#e2e8f0!important; }
html[data-theme="dark"] .sec-title span { color:#6b7280!important; }
html[data-theme="dark"] .mobile-shop-nav { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .mobile-shop-nav a { color:#475569!important; }
html[data-theme="dark"] .mobile-shop-nav a.active { color:#f97316!important; }

/* ── Order / invoice cards ────────────────────────────────── */
html[data-theme="dark"] .order-card     { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .order-card-head { background:#161b28!important;border-color:#1e2535!important; }
html[data-theme="dark"] .order-card-body { color:#e2e8f0!important; }
html[data-theme="dark"] .checkout-bar   { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .cart-item      { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .cart-name      { color:#e2e8f0!important; }

/* ── Topup / PPOB pages ────────────────────────────────────── */
html[data-theme="dark"] .topup-cat-grid a { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .topup-cat-grid span { color:#94a3b8!important; }
html[data-theme="dark"] .product-btn    { background:#0f1117!important;border-color:#1e2535!important;color:#e2e8f0!important; }
html[data-theme="dark"] .product-btn.selected { background:#1e3a8a!important;border-color:#3b82f6!important; }
html[data-theme="dark"] .product-btn:hover { background:#161b28!important; }

/* ── Mutasi / history ─────────────────────────────────────── */
html[data-theme="dark"] .mutasi-row     { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .mutasi-name    { color:#e2e8f0!important; }
html[data-theme="dark"] .mutasi-date    { color:#6b7280!important; }
html[data-theme="dark"] .list-item      { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .list-item-title { color:#e2e8f0!important; }
html[data-theme="dark"] .list-item-sub  { color:#6b7280!important; }

/* ── Text utilities ────────────────────────────────────────── */
html[data-theme="dark"] .text-muted     { color:#6b7280!important; }
html[data-theme="dark"] .text-dark      { color:#e2e8f0!important; }
html[data-theme="dark"] h1,html[data-theme="dark"] h2,
html[data-theme="dark"] h3,html[data-theme="dark"] h4,
html[data-theme="dark"] h5,html[data-theme="dark"] h6 { color:#e2e8f0!important; }
html[data-theme="dark"] p               { color:#94a3b8!important; }
html[data-theme="dark"] label           { color:#94a3b8!important; }
html[data-theme="dark"] small           { color:#6b7280!important; }
html[data-theme="dark"] hr              { border-color:#1e2535!important; }
html[data-theme="dark"] a:not(.btn):not([class*="btn"]) { color:#60a5fa!important; }
html[data-theme="dark"] a:not(.btn):not([class*="btn"]):hover { color:#93c5fd!important; }

/* ── Modals / overlays ─────────────────────────────────────── */
html[data-theme="dark"] .modal-content  { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .modal-header   { background:#0f1117!important;border-color:#1e2535!important;color:#e2e8f0!important; }
html[data-theme="dark"] .modal-body     { background:#0f1117!important;color:#e2e8f0!important; }
html[data-theme="dark"] .modal-footer   { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .sidebar-overlay { background:rgba(0,0,0,.7)!important; }

/* ── Specific inline bg whites ─────────────────────────────── */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"]    { background:#0f1117!important; }
html[data-theme="dark"] [style*="background:#f3f4f6"],
html[data-theme="dark"] [style*="background:#f0f4f8"],
html[data-theme="dark"] [style*="background:#f9fafb"]        { background:#09090f!important; }
html[data-theme="dark"] [style*="color:#111"],
html[data-theme="dark"] [style*="color:#374151"],
html[data-theme="dark"] [style*="color:#1f2937"]             { color:#e2e8f0!important; }
html[data-theme="dark"] [style*="color:#6b7280"],
html[data-theme="dark"] [style*="color:#9ca3af"]             { color:#6b7280!important; }
html[data-theme="dark"] [style*="border-color:#e5e7eb"],
html[data-theme="dark"] [style*="border:1px solid #e5e7eb"]  { border-color:#1e2535!important; }

/* ── Landing page ────────────────────────────────────────── */
html[data-theme="dark"] .landing-hero   { background:linear-gradient(135deg,#000000,#0f172a,#1e3a8a)!important; }
html[data-theme="dark"] .landing-section { background:#0f1117!important; }
html[data-theme="dark"] .landing-feature-card { background:#0f1117!important;border-color:#1e2535!important; }

/* ── Error page ──────────────────────────────────────────── */
html[data-theme="dark"] .error-page     { background:#09090f!important; }


/* ══════════════════════════════════════════════════════════════════
   DARK THEME FIX — CSS Variables override & missing components
   ══════════════════════════════════════════════════════════════════ */

/* ── Override CSS variables for dark mode ──────────────────────── */
html[data-theme="dark"] {
  --bg:           #0f1117!important;
  --bg-white:     #0f1117!important;
  --bg-hover:     #161b28!important;
  --border:       #1e2535!important;
  --text:         #e2e8f0!important;
  --text-muted:   #6b7280!important;
  --primary-light:#1e3a8a22!important;
}

/* ── Inbox items ────────────────────────────────────────────────── */
html[data-theme="dark"] .inbox-item              { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .inbox-item.unread       { background:#0f172a!important;border-color:#1e3a8a!important; }
html[data-theme="dark"] .inbox-item.unread .inbox-title { color:#e2e8f0!important; }
html[data-theme="dark"] .inbox-title             { color:#e2e8f0!important; }
html[data-theme="dark"] .inbox-msg               { color:#94a3b8!important; }
html[data-theme="dark"] .inbox-meta              { color:#475569!important; }
html[data-theme="dark"] .connect-request-item    { background:#1a0f2e!important;border-color:#4c1d95!important; }

/* ── Shop dashboard ─────────────────────────────────────────────── */
html[data-theme="dark"] .empty-state            { background:#0f1117!important;color:#475569!important; }
html[data-theme="dark"] .empty-state div        { color:#94a3b8!important; }
html[data-theme="dark"] .empty-state p          { color:#475569!important; }
html[data-theme="dark"] .sh-nav-strip           { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .sh-nav-lbl             { color:#94a3b8!important; }
html[data-theme="dark"] .sec-title              { background:#0f1117!important;color:#e2e8f0!important;border-color:#1e2535!important; }
html[data-theme="dark"] .sec-title span         { color:#6b7280!important; }
html[data-theme="dark"] .search-info            { background:#0f1117!important;border-color:#1e2535!important;color:#e2e8f0!important; }
html[data-theme="dark"] .prod-grid              { background:#0f1117!important; }
html[data-theme="dark"] .prod-card              { background:#0f1117!important;color:#e2e8f0!important; }
html[data-theme="dark"] .prod-card:active       { background:#161b28!important; }
html[data-theme="dark"] .prod-name              { color:#e2e8f0!important; }
html[data-theme="dark"] .prod-seller            { color:#6b7280!important; }
html[data-theme="dark"] .prod-desc              { color:#6b7280!important; }
html[data-theme="dark"] .prod-shop              { color:#475569!important; }
html[data-theme="dark"] .prod-meta              { color:#475569!important; }
html[data-theme="dark"] .prod-img-ph            { background:linear-gradient(135deg,rgba(29,78,216,.2),rgba(109,40,217,.2))!important; }
html[data-theme="dark"] .sh-mobile-nav          { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .sh-mnb                 { color:#475569!important; }
html[data-theme="dark"] .sh-mnb.active          { color:#2563eb!important; }
html[data-theme="dark"] .sh-mnb.active i        { color:#2563eb!important; }

/* ── Shop profile page custom classes ───────────────────────────── */
html[data-theme="dark"] .hdr                    { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .hdr a, html[data-theme="dark"] .hdr div { color:#e2e8f0!important; }
html[data-theme="dark"] .form-card              { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .form-card div          { color:#e2e8f0!important; }
html[data-theme="dark"] .fi                     { background:#161b28!important;border-color:#1e2535!important;color:#e2e8f0!important; }
html[data-theme="dark"] .fi::placeholder        { color:#475569!important; }
html[data-theme="dark"] .fl                     { color:#94a3b8!important; }
html[data-theme="dark"] .fh                     { color:#475569!important; }
html[data-theme="dark"] .stats                  { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .stat                   { border-color:#1e2535!important; }
html[data-theme="dark"] .stat-n                 { color:#e2e8f0!important; }
html[data-theme="dark"] .stat-l                 { color:#6b7280!important; }
html[data-theme="dark"] .pc                     { background:#0f1117!important;color:#e2e8f0!important; }
html[data-theme="dark"] .mnb                    { color:#475569!important; }
html[data-theme="dark"] .mnb.active             { color:#f97316!important; }

/* ── Shop profile — info/background divs with background:#fff ───── */
html[data-theme="dark"] [style*="background:#fff;padding-bottom"]  { background:#0f1117!important; }
html[data-theme="dark"] [style*="background:#fff;margin"] { background:#0f1117!important; }
html[data-theme="dark"] [style*="border:1.5px solid #e5e7eb"] { border-color:#1e2535!important; }
html[data-theme="dark"] [style*="background:#fff;border-top"] { background:#0f1117!important; }
html[data-theme="dark"] [style*="font-size:14px;font-weight:800;color:#111"] { color:#e2e8f0!important; }
html[data-theme="dark"] [style*="font-size:12px;font-weight:700;color:#111"] { color:#e2e8f0!important; }
html[data-theme="dark"] [style*="font-size:11px;color:#6b7280"] { color:#6b7280!important; }
html[data-theme="dark"] [style*="font-size:11px;font-weight:600;color:#111"] { color:#e2e8f0!important; }

/* ── Shop cart / order / checkout pages ─────────────────────────── */
html[data-theme="dark"] .order-list-item        { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .cart-item              { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .cart-name              { color:#e2e8f0!important; }
html[data-theme="dark"] .checkout-bar           { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .seller-profile-hdr     { background:#0f1117!important; }
html[data-theme="dark"] .seller-stats           { background:#0f1117!important;border-color:#1e2535!important; }

/* ── Mobile nav (user & shop) — bg:white catch-all ──────────────── */
html[data-theme="dark"] .mobile-nav             { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .mobile-nav-item        { color:#475569!important; }
html[data-theme="dark"] .mobile-nav-item.active { color:#2563eb!important;border-color:#2563eb!important; }

/* ── Catch-all: inline background:#ffffff & #f3f4f6 ─────────────── */
html[data-theme="dark"] [style*="background:#ffffff"]             { background:#0f1117!important; }
html[data-theme="dark"] [style*="background: #ffffff"]            { background:#0f1117!important; }
html[data-theme="dark"] [style*="background:#f3f4f6"]             { background:#09090f!important; }
html[data-theme="dark"] [style*="background: #f3f4f6"]            { background:#09090f!important; }
html[data-theme="dark"] [style*="border-bottom:1px solid #f3f4f6"] { border-color:#1e2535!important; }
html[data-theme="dark"] [style*="border-bottom:6px solid #f3f4f6"] { border-color:#0f1117!important; }
html[data-theme="dark"] [style*="color:#9ca3af"]                  { color:#6b7280!important; }
html[data-theme="dark"] [style*="color: #9ca3af"]                 { color:#6b7280!important; }

/* ── Topup / PPOB pages ─────────────────────────────────────────── */
html[data-theme="dark"] .topup-wrap             { background:#09090f!important; }
html[data-theme="dark"] .topup-header           { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .topup-product-card     { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .topup-product-card:hover { background:#161b28!important; }

/* ── Rating card inline styles ──────────────────────────────────── */
html[data-theme="dark"] [style*="background:#dcfce7;border:1px solid #bbf7d0"] { background:#052e16!important;border-color:#14532d!important; }
html[data-theme="dark"] [style*="border-top:1px solid #dbeafe"]  { border-color:#1e2535!important; }
html[data-theme="dark"] [style*="color:#1e3a8a"]                 { color:#60a5fa!important; }

/* ── Info post page ─────────────────────────────────────────────── */
html[data-theme="dark"] .info-post              { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .info-post-head         { background:#161b28!important;border-color:#1e2535!important; }
html[data-theme="dark"] .reaction-btn           { background:#161b28!important;border-color:#1e2535!important;color:#94a3b8!important; }
html[data-theme="dark"] .reaction-btn.active    { color:#e2e8f0!important; }

/* ══════════════════════════════════════════════════════════════════
   DARK THEME — COMPREHENSIVE FIX — Semua halaman views/
   ══════════════════════════════════════════════════════════════════ */

/* ── Topup / PPOB product cards ─────────────────────────────────── */
html[data-theme="dark"] .item-card-list        { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .item-card-list:hover,
html[data-theme="dark"] .item-card-list.sel    { border-color:var(--primary)!important;background:#0a0f1a!important; }
html[data-theme="dark"] .item-card-grid        { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .item-card-grid:hover,
html[data-theme="dark"] .item-card-grid.sel    { border-color:var(--primary)!important; }
html[data-theme="dark"] .icl-name             { color:#e2e8f0!important; }
html[data-theme="dark"] .icl-desc             { color:#6b7280!important; }
html[data-theme="dark"] .icl-price            { color:var(--primary)!important; }
html[data-theme="dark"] .icg-name             { color:#e2e8f0!important; }
html[data-theme="dark"] .vpill                { background:#161b28!important;border-color:var(--primary)!important;color:var(--primary)!important; }
html[data-theme="dark"] .vpill.active         { background:var(--primary)!important;color:#fff!important; }
html[data-theme="dark"] .prod-search-wrap input{ background:#161b28!important;border-color:#1e2535!important;color:#e2e8f0!important; }
html[data-theme="dark"] .prod-row             { border-color:#1e2535!important; }
html[data-theme="dark"] .prod-row:active      { background:#161b28!important; }
html[data-theme="dark"] .prod-row-name        { color:#e2e8f0!important; }
html[data-theme="dark"] .prod-row-img         { background:#161b28!important;border-color:#1e2535!important; }
html[data-theme="dark"] .step-dot             { background:#161b28!important;border-color:#1e2535!important; }
html[data-theme="dark"] .step-dot.active      { background:var(--primary)!important;border-color:var(--primary)!important; }
html[data-theme="dark"] .step-dot.done        { background:#22c55e!important;border-color:#22c55e!important; }
html[data-theme="dark"] .step-label           { color:#475569!important; }
html[data-theme="dark"] .step-label.active    { color:var(--primary)!important; }
html[data-theme="dark"] .step-line            { background:#1e2535!important; }
html[data-theme="dark"] .step-line.done       { background:#22c55e!important; }
html[data-theme="dark"] .id-card              { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .id-label             { color:#94a3b8!important; }
html[data-theme="dark"] .id-field             { color:#e2e8f0!important; }
html[data-theme="dark"] .id-hint              { color:#475569!important; }
html[data-theme="dark"] .rincian-body         { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .rr                   { border-color:#1e2535!important; }
html[data-theme="dark"] .rl                   { color:#6b7280!important; }
html[data-theme="dark"] .rv                   { color:#e2e8f0!important; }
html[data-theme="dark"] .pay-method           { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .pm-name              { color:#e2e8f0!important; }
html[data-theme="dark"] .pm-sub               { color:#6b7280!important; }
html[data-theme="dark"] .pm-icon              { background:#1e3a8a33!important; }
html[data-theme="dark"] .buy-bar              { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .buy-price small      { color:#6b7280!important; }
html[data-theme="dark"] .struk-box            { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .struk-details        { border-color:#1e2535!important; }
html[data-theme="dark"] .srow                 { border-color:#1e2535!important; }
html[data-theme="dark"] .srow:last-child      { background:rgba(99,102,241,.08)!important; }
html[data-theme="dark"] .srow span:first-child{ color:#6b7280!important; }
html[data-theme="dark"] .badge-promo          { background:#451a03!important;color:#fb923c!important; }
html[data-theme="dark"] .badge-pop            { background:#2e1065!important;color:#c084fc!important; }
html[data-theme="dark"] .list-title           { color:#e2e8f0!important; }
html[data-theme="dark"] .vbtn                 { background:#161b28!important;border-color:#1e2535!important;color:#94a3b8!important; }
html[data-theme="dark"] .vbtn.active          { background:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important; }
html[data-theme="dark"] .back-link            { color:#94a3b8!important; }

/* ── API Docs page ───────────────────────────────────────────────── */
html[data-theme="dark"] .endpoint-card        { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .endpoint-header      { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .endpoint-header:hover{ background:#161b28!important; }
html[data-theme="dark"] .endpoint-path        { color:#e2e8f0!important; }
html[data-theme="dark"] .endpoint-body        { background:#0f1117!important; }
html[data-theme="dark"] .param-table th       { background:#161b28!important;border-color:#1e2535!important; }
html[data-theme="dark"] .param-table td       { border-color:#1e2535!important;color:#e2e8f0!important; }
html[data-theme="dark"] .optional-badge       { background:#1e2535!important;color:#94a3b8!important; }
html[data-theme="dark"] .type-badge           { background:#1e3a8a33!important;color:#60a5fa!important; }
html[data-theme="dark"] .tester-section       { background:#052e16!important;border-color:#14532d!important; }

/* ── QRIS page ───────────────────────────────────────────────────── */
html[data-theme="dark"] .qcard                { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .qcard.bordered       { border-color:var(--primary)!important; }
html[data-theme="dark"] .qcard-head           { border-color:#1e2535!important;color:#e2e8f0!important; }
html[data-theme="dark"] .qcard-body           { background:#0f1117!important; }
html[data-theme="dark"] .amt-input            { background:#161b28!important;border-color:#1e2535!important;color:#e2e8f0!important; }
html[data-theme="dark"] .amt-input:focus      { border-color:var(--primary)!important; }
html[data-theme="dark"] .hist-row             { border-color:#1e2535!important; }
html[data-theme="dark"] .hist-trxid           { color:#475569!important; }
html[data-theme="dark"] .qris-sub             { color:#6b7280!important; }

/* ── Admin shop-dashboard ────────────────────────────────────────── */
html[data-theme="dark"] .stat-box             { background:#0f1117!important; }
html[data-theme="dark"] .stat-val             { color:#e2e8f0!important; }
html[data-theme="dark"] .stat-lbl             { color:#6b7280!important; }
html[data-theme="dark"] .menu-item            { background:#0f1117!important;color:#e2e8f0!important; }
html[data-theme="dark"] .menu-title           { color:#e2e8f0!important; }
html[data-theme="dark"] .menu-sub             { color:#6b7280!important; }
html[data-theme="dark"] .order-item           { background:#0f1117!important; }
html[data-theme="dark"] .oi-name              { color:#e2e8f0!important; }
html[data-theme="dark"] .oi-meta              { color:#6b7280!important; }
html[data-theme="dark"] .oi-img               { background:#161b28!important; }
html[data-theme="dark"] .s-cancelled          { background:#1e2535!important;color:#94a3b8!important; }
html[data-theme="dark"] .s-pending            { background:#431407!important;color:#fb923c!important; }
html[data-theme="dark"] .s-paid,.s-completed  { background:#052e16!important;color:#4ade80!important; }

/* ── Admin main dashboard ────────────────────────────────────────── */
html[data-theme="dark"] .adm-alert            { background:#0f1117!important;border-left-color:#d97706!important; }
html[data-theme="dark"] .adm-alert.blue       { border-left-color:#3b82f6!important; }
html[data-theme="dark"] .adm-alert.green      { border-left-color:#16a34a!important; }
html[data-theme="dark"] .adm-alert-icon.orange{ background:#431407!important; }
html[data-theme="dark"] .adm-alert-icon.blue  { background:#1e3a8a22!important; }
html[data-theme="dark"] .adm-alert-icon.green { background:#052e16!important; }
html[data-theme="dark"] .adm-alert-text strong{ color:#e2e8f0!important; }
html[data-theme="dark"] .adm-stat             { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .adm-stat-val         { color:#e2e8f0!important; }
html[data-theme="dark"] .adm-stat-lbl         { color:#6b7280!important; }
html[data-theme="dark"] .adm-qa-btn           { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .adm-qa-btn:hover     { border-color:var(--primary)!important; }
html[data-theme="dark"] .adm-qa-label         { color:#e2e8f0!important; }
html[data-theme="dark"] .adm-list-card        { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .adm-list-header      { border-color:#1e2535!important; }
html[data-theme="dark"] .adm-list-header-title{ color:#e2e8f0!important; }
html[data-theme="dark"] .adm-list-row         { border-color:#1e2535!important; }
html[data-theme="dark"] .adm-list-name        { color:#e2e8f0!important; }
html[data-theme="dark"] .adm-list-sub         { color:#6b7280!important; }
html[data-theme="dark"] .adm-section-title    { color:#475569!important; }
html[data-theme="dark"] .adm-rating-bar       { background:#1e2535!important; }
html[data-theme="dark"] .adm-empty            { color:#475569!important; }

/* ── Shop — shared page-header (cart, checkout, orders, sell, order-detail, my-products) */
html[data-theme="dark"] .page-header          { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .page-header a        { color:#94a3b8!important; }
html[data-theme="dark"] .page-header div      { color:#e2e8f0!important; }

/* ── Shop cart ───────────────────────────────────────────────────── */
html[data-theme="dark"] .cart-item            { background:#0f1117!important; }
html[data-theme="dark"] .ci-name              { color:#e2e8f0!important; }
html[data-theme="dark"] .ci-variant           { color:#6b7280!important; }
html[data-theme="dark"] .ci-img               { background:#161b28!important; }
html[data-theme="dark"] .checkout-bar         { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .total-row            { color:#e2e8f0!important; }

/* ── Shop checkout ───────────────────────────────────────────────── */
html[data-theme="dark"] .section-card         { background:#0f1117!important; }
html[data-theme="dark"] .section-card-header  { border-color:#1e2535!important;color:#94a3b8!important; }
html[data-theme="dark"] .section-card-body    { background:#0f1117!important; }
html[data-theme="dark"] .op-name              { color:#e2e8f0!important; }
html[data-theme="dark"] .op-variant           { color:#6b7280!important; }
html[data-theme="dark"] .summary-row          { color:#e2e8f0!important; }
html[data-theme="dark"] .summary-row .label   { color:#6b7280!important; }
html[data-theme="dark"] .summary-row.total    { border-color:#1e2535!important; }
html[data-theme="dark"] .summary-row.total .label { color:#e2e8f0!important; }
html[data-theme="dark"] .payment-option       { border-color:#1e2535!important; }
html[data-theme="dark"] .payment-option:hover { border-color:#f97316!important; }
html[data-theme="dark"] .po-title             { color:#e2e8f0!important; }
html[data-theme="dark"] .po-desc              { color:#6b7280!important; }
html[data-theme="dark"] .saldo-info           { background:#052e16!important;border-color:#14532d!important;color:#4ade80!important; }

/* ── Shop order-detail ───────────────────────────────────────────── */
html[data-theme="dark"] .sc-head              { border-color:#1e2535!important;color:#94a3b8!important; }
html[data-theme="dark"] .sc-body              { background:#0f1117!important; }
html[data-theme="dark"] .info-row             { border-color:#1e2535!important; }
html[data-theme="dark"] .info-row .lbl        { color:#6b7280!important; }
html[data-theme="dark"] .info-row .val        { color:#e2e8f0!important; }
html[data-theme="dark"] .action-bar           { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .tl-line::after       { background:#1e2535!important; }
html[data-theme="dark"] .chat-other           { background:#161b28!important;color:#e2e8f0!important; }
html[data-theme="dark"] .chat-sender          { color:#475569!important; }

/* ── Shop product detail ─────────────────────────────────────────── */
html[data-theme="dark"] .prod-header          { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .prod-gallery         { background:#0f1117!important; }
html[data-theme="dark"] .gallery-thumbs       { background:#0f1117!important; }
html[data-theme="dark"] .gallery-thumb.active { border-color:#f97316!important; }
html[data-theme="dark"] .prod-info            { background:#0f1117!important; }
html[data-theme="dark"] .prod-title           { color:#e2e8f0!important; }
html[data-theme="dark"] .prod-price-big       { color:#f97316!important; }
html[data-theme="dark"] .prod-rating-row      { border-color:#1e2535!important; }
html[data-theme="dark"] .shop-info-box        { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .prod-desc            { background:#0f1117!important;color:#94a3b8!important; }
html[data-theme="dark"] .ratings-section      { background:#0f1117!important; }
html[data-theme="dark"] .rating-item          { border-color:#1e2535!important; }
html[data-theme="dark"] .similar-section      { background:#0f1117!important; }
html[data-theme="dark"] .sim-img              { background:#161b28!important; }
html[data-theme="dark"] .bottom-action-bar    { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .btn-cart             { background:#0f1117!important;border-color:#f97316!important;color:#f97316!important; }
html[data-theme="dark"] .btn-chat             { background:#0f1117!important;border-color:#1e2535!important;color:#94a3b8!important; }
html[data-theme="dark"] .bs                   { background:#0f1117!important; }
html[data-theme="dark"] .bs-handle            { background:#1e2535!important; }
html[data-theme="dark"] .bs-prod-row          { border-color:#1e2535!important; }
html[data-theme="dark"] .bs-prod-price        { color:#f97316!important; }
html[data-theme="dark"] .vc-chip              { background:#161b28!important;border-color:#1e2535!important;color:#94a3b8!important; }
html[data-theme="dark"] .vc-chip.active       { border-color:#f97316!important;background:#431407!important;color:#f97316!important; }
html[data-theme="dark"] .qty-btn              { background:#161b28!important;border-color:#1e2535!important;color:#e2e8f0!important; }

/* ── Shop sell/edit product ──────────────────────────────────────── */
html[data-theme="dark"] .form-input           { background:#161b28!important;border-color:#1e2535!important;color:#e2e8f0!important; }
html[data-theme="dark"] .form-input:focus     { border-color:#f97316!important; }
html[data-theme="dark"] .form-label           { color:#94a3b8!important; }
html[data-theme="dark"] .variant-row          { background:#161b28!important; }
html[data-theme="dark"] .btn-add-variant      { background:#161b28!important;border-color:#1e2535!important;color:#6b7280!important; }
html[data-theme="dark"] .btn-add-variant:hover{ border-color:#f97316!important;color:#f97316!important; }
html[data-theme="dark"] .hint                 { color:#475569!important; }

/* ── Shop orders list ────────────────────────────────────────────── */
html[data-theme="dark"] .tab-row              { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .tab-btn              { color:#6b7280!important; }
html[data-theme="dark"] .tab-btn.active       { color:#f97316!important;border-bottom-color:#f97316!important; }
html[data-theme="dark"] .order-card           { background:#0f1117!important; }
html[data-theme="dark"] .oc-header            { border-color:#1e2535!important; }
html[data-theme="dark"] .oc-shop              { color:#94a3b8!important; }
html[data-theme="dark"] .oc-name              { color:#e2e8f0!important; }
html[data-theme="dark"] .oc-variant           { color:#6b7280!important; }
html[data-theme="dark"] .oc-footer            { border-color:#1e2535!important; }
html[data-theme="dark"] .oc-img               { background:#161b28!important; }
html[data-theme="dark"] .mobile-shop-nav      { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .msn-btn              { color:#475569!important; }
html[data-theme="dark"] .msn-btn.active       { color:#f97316!important; }
html[data-theme="dark"] .status-cancelled     { background:#1e2535!important;color:#94a3b8!important; }
html[data-theme="dark"] .status-pending_payment{ background:#431407!important;color:#fb923c!important; }
html[data-theme="dark"] .status-paid,
html[data-theme="dark"] .status-completed     { background:#052e16!important;color:#4ade80!important; }

/* ── Shop my-products ────────────────────────────────────────────── */
html[data-theme="dark"] .prod-item            { background:#0f1117!important; }
html[data-theme="dark"] .del-box              { background:#0f1117!important; }
html[data-theme="dark"] .chip-pending         { background:#431407!important;color:#fb923c!important; }

/* ── Shop seller-profile ─────────────────────────────────────────── */
html[data-theme="dark"] .follow-btn.off       { background:#0f1117!important;color:#f97316!important; }

/* ── Admin app-tokens / app-connections ─────────────────────────── */
html[data-theme="dark"] .token-card           { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .modal-box            { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .filter-tab           { background:#0f1117!important;border-color:#1e2535!important;color:#94a3b8!important; }
html[data-theme="dark"] .filter-tab.active    { background:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important; }

/* ── Admin orderkuota-profile ────────────────────────────────────── */
html[data-theme="dark"] .ok-card              { background:#0f1117!important;border-color:#1e2535!important; }

/* ── Admin ppob forms ────────────────────────────────────────────── */
html[data-theme="dark"] .varian-block         { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .varian-header-bar input { background:#161b28!important;border-color:#1e2535!important;color:#e2e8f0!important; }
html[data-theme="dark"] .item-table input,
html[data-theme="dark"] .item-table select    { background:#161b28!important;border-color:#1e2535!important;color:#e2e8f0!important; }
html[data-theme="dark"] .tab-btn              { background:#0f1117!important;color:#94a3b8!important; }

/* ── Admin shop-banners ──────────────────────────────────────────── */
html[data-theme="dark"] .add-card             { background:#0f1117!important; }
html[data-theme="dark"] .banner-card          { background:#0f1117!important; }

/* ── Admin shop-products filter tabs ────────────────────────────── */
html[data-theme="dark"] .filter-tabs          { background:#0f1117!important;border-color:#1e2535!important; }

/* ── Admin shop-shops / shop-orders ─────────────────────────────── */
html[data-theme="dark"] .shop-card            { background:#0f1117!important; }
html[data-theme="dark"] .s-pending_payment    { background:#431407!important;color:#fb923c!important; }

/* ── Admin mobile nav (admin dashboard mobile) ───────────────────── */
html[data-theme="dark"] .admin-mobile-nav     { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .admin-mnb            { color:#475569!important; }
html[data-theme="dark"] .admin-mnb.active     { color:var(--primary)!important; }

/* ── Chat page (user) ────────────────────────────────────────────── */
html[data-theme="dark"] .chat-app             { background:#09090f!important; }
html[data-theme="dark"] .msg-bubble.other-bubble { background:#161b28!important;color:#e2e8f0!important; }

/* ── Store builder / subscription / connected-apps ──────────────── */
html[data-theme="dark"] .plan-card            { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .plan-card.active     { border-color:var(--primary)!important; }
html[data-theme="dark"] .connected-app-card   { background:#0f1117!important;border-color:#1e2535!important; }
html[data-theme="dark"] .store-section        { background:#0f1117!important;border-color:#1e2535!important; }

/* ── Broad inline-style text color fix ───────────────────────────── */
html[data-theme="dark"] [style*="color:#111;"]     { color:#e2e8f0!important; }
html[data-theme="dark"] [style*="color: #111;"]    { color:#e2e8f0!important; }
html[data-theme="dark"] [style*="color:#374151"]   { color:#94a3b8!important; }
html[data-theme="dark"] [style*="color: #374151"]  { color:#94a3b8!important; }
html[data-theme="dark"] [style*="color:#6b7280"]   { color:#6b7280!important; }
html[data-theme="dark"] [style*="color:#9ca3af"]   { color:#475569!important; }

/* ── Broad inline-style border fix ──────────────────────────────── */
html[data-theme="dark"] [style*="border-bottom:1px solid #f3f4f6"] { border-color:#1e2535!important; }
html[data-theme="dark"] [style*="border-top:1px solid #f3f4f6"]    { border-color:#1e2535!important; }
html[data-theme="dark"] [style*="border:1px solid #f3f4f6"]        { border-color:#1e2535!important; }
html[data-theme="dark"] [style*="border:2px solid #e5e7eb"]        { border-color:#1e2535!important; }
html[data-theme="dark"] [style*="border-top:1px solid #e5e7eb"]    { border-color:#1e2535!important; }

/* ── admin/chat unread badge visibility in dark mode ────────────── */
html[data-theme="dark"] .cu-badge             { background:#ef4444!important;color:#fff!important; }
html[data-theme="dark"] .cu-item              { border-color:#1e2535!important; }
html[data-theme="dark"] .cu-item:active       { background:#161b28!important; }

/* ════════════════════════════════════════════════
   Global Page-Loading Spinner Overlay
   ════════════════════════════════════════════════ */
#pageLoader{
  display:none;position:fixed;inset:0;z-index:99999;
  background:rgba(0,0,0,.38);backdrop-filter:blur(2px);
  align-items:center;justify-content:center;
}
#pageLoader.show{display:flex;}
.pl-spinner{
  width:52px;height:52px;border-radius:50%;
  border:4px solid rgba(255,255,255,.18);
  border-top-color:#6366f1;
  animation:plSpin .7s linear infinite;
}
@keyframes plSpin{to{transform:rotate(360deg);}}
html[data-theme="dark"] #pageLoader{background:rgba(0,0,0,.55);}

/* ── Struk dark card ─────────────────────────────────── */
.struk-dark{
  background:#0f1623;border-radius:20px 20px 0 0;
  color:#e2e8f0;max-width:400px;margin:0 auto;
  box-shadow:0 8px 40px rgba(0,0,0,.45);
  font-family:'Segoe UI',system-ui,sans-serif;
  position:relative;
}
.struk-dark-top{
  background:linear-gradient(135deg,#0f1623 0%,#1a2540 100%);
  border-radius:20px 20px 0 0;padding:24px 22px 18px;text-align:center;
  border-bottom:none;
}
.struk-logo-ring{
  width:62px;height:62px;border-radius:50%;
  background:linear-gradient(135deg,#0d9488,#14b8a6);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;
  box-shadow:0 4px 18px rgba(20,184,166,.4);
  font-size:26px;color:#fff;
}
.struk-dark-status{font-size:17px;font-weight:800;color:#f1f5f9;margin-bottom:2px;}
.struk-dark-sub{font-size:11px;color:#64748b;margin-bottom:10px;}
.struk-dark-amount{font-size:28px;font-weight:900;color:#14b8a6;letter-spacing:-1px;margin-bottom:16px;}
/* Perforated divider */
.struk-perf{
  display:flex;align-items:center;margin:0 -1px;
  position:relative;overflow:hidden;
}
.struk-perf-line{
  flex:1;border-top:2px dashed #1e2d45;height:0;
}
.struk-perf-circle{
  width:22px;height:22px;border-radius:50%;
  background:#0a0f1a;flex-shrink:0;margin:0 -11px;z-index:1;
}
.struk-dark-body{
  background:#111827;padding:18px 22px 14px;
}
.struk-dark-row{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:7px 0;border-bottom:1px solid #1e2d45;font-size:12px;gap:10px;
}
.struk-dark-row:last-child{border-bottom:none;}
.struk-dark-row-lbl{color:#64748b;flex-shrink:0;}
.struk-dark-row-val{text-align:right;font-weight:600;color:#cbd5e1;word-break:break-all;}
.struk-dark-row.total-row .struk-dark-row-lbl{color:#e2e8f0;font-weight:700;font-size:13px;}
.struk-dark-row.total-row .struk-dark-row-val{color:#14b8a6;font-weight:800;font-size:14px;}
/* Zigzag bottom edge */
.struk-zigzag{
  background:#111827;
  -webkit-mask-image:radial-gradient(circle at 10px 0,transparent 12px,black 13px);
  mask-image:radial-gradient(circle at 10px 0,transparent 12px,black 13px);
  -webkit-mask-size:20px 100%;mask-size:20px 100%;
  height:18px;
}
.struk-dark-footer{
  background:#111827;border-radius:0 0 20px 20px;
  padding:6px 22px 20px;
}
.struk-cetak-btn{
  width:100%;padding:12px;
  background:linear-gradient(135deg,#0d9488,#14b8a6);
  border:none;border-radius:10px;color:#fff;
  font-size:13px;font-weight:700;cursor:pointer;
  box-shadow:0 4px 14px rgba(20,184,166,.35);
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:filter .15s;
}
.struk-cetak-btn:hover{filter:brightness(1.08);}

/* ── Profile elegant cards ───────────────────────────── */
.prof-hero{
  background:linear-gradient(135deg,#0f172a 0%,#1e3a8a 60%,#2563eb 100%);
  border-radius:18px;padding:20px 18px 16px;color:#fff;
  margin-bottom:14px;box-shadow:0 8px 24px rgba(37,99,235,.3);
  position:relative;overflow:hidden;
}
.prof-hero::before{content:'';position:absolute;top:-25px;right:-25px;width:100px;height:100px;border-radius:50%;background:rgba(96,165,250,.15);}
.prof-hero-avatar{
  width:64px;height:64px;border-radius:50%;
  border:3px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:800;color:#fff;
  flex-shrink:0;overflow:hidden;margin-bottom:12px;
  box-shadow:0 4px 14px rgba(0,0,0,.3);
}
.prof-hero-name{font-size:18px;font-weight:800;margin-bottom:2px;}
.prof-hero-email{font-size:11px;opacity:.75;margin-bottom:8px;}
.prof-hero-badges{display:flex;gap:6px;flex-wrap:wrap;}
.prof-hero-badge{background:rgba(255,255,255,.15);border-radius:20px;padding:3px 10px;font-size:10px;font-weight:700;}

.prof-card{background:var(--card);border-radius:14px;border:1px solid var(--border);margin-bottom:12px;overflow:hidden;}
.prof-card-hdr{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--border);}
.prof-card-hdr-title{font-size:13px;font-weight:700;display:flex;align-items:center;gap:7px;}
.prof-card-body{padding:16px;}

.apikey-row{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border);}
.apikey-row:last-child{border-bottom:none;}
.apikey-name{font-size:12px;font-weight:700;color:var(--text);}
.apikey-val{font-family:monospace;font-size:10px;color:var(--text-muted);word-break:break-all;margin-top:2px;}
.apikey-actions{display:flex;gap:4px;flex-shrink:0;margin-left:auto;}

/* ── Balance eye toggle ──────────────────────────────── */
.bal-eye{background:none;border:none;color:rgba(255,255,255,.6);cursor:pointer;padding:0 4px;font-size:14px;vertical-align:middle;touch-action:manipulation;}

/* ── Topup item animation ────────────────────────────── */
@keyframes itemFadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.item-card-list,.item-card-grid{animation:itemFadeIn .18s ease both;}
.item-card-list:nth-child(1),.item-card-grid:nth-child(1){animation-delay:.02s;}
.item-card-list:nth-child(2),.item-card-grid:nth-child(2){animation-delay:.04s;}
.item-card-list:nth-child(3),.item-card-grid:nth-child(3){animation-delay:.06s;}
.item-card-list:nth-child(4),.item-card-grid:nth-child(4){animation-delay:.08s;}
.item-card-list:nth-child(5),.item-card-grid:nth-child(5){animation-delay:.10s;}

/* Group-switch animation */
@keyframes grpSlideIn{from{opacity:0;transform:translateX(10px);}to{opacity:1;transform:translateX(0);}}
.grp-anim{animation:grpSlideIn .2s ease both;}

/* ── Admin dashboard mobile wider ───────────────────── */
@media(min-width:601px){.adm-wrap{max-width:820px!important;}}