/* Dilarang keras menghapus credits 
Devoleper : Rahmad Tenpoles
WhatsApp : wa.me/6285764735713
Instagram : instagram.com/rahmad_tenpoles
Telegram : t.me/rahmad_tenpoles
Dilarang keras menghapus credits */


/* =========================================================================
   RAHMADSHOP DESIGN TOKENS — "Clean corporate" (Zinc)
   -------------------------------------------------------------------------
   Satu sumber kebenaran untuk warna, radius, spacing, tipografi, shadow &
   motion. Light mode = default (:root). Dark mode = html.dark-mode
   (dipasang oleh RSMode di /js/global-theme.js).
   Aturan pakai:
   - Warna aksen HANYA --rs-accent (light #848484 / dark zinc-50). Tidak ada gradient.
   - Warna status (success / warning / danger) hanya untuk status, bukan hiasan.
   - Radius  : xs 6 · sm 8 · md 12 · lg 16 · full (pill/dot/avatar)
   - Spacing : 4 · 8 · 12 · 16 · 24 · 32
   - Shadow  : xs · sm · md · lg (tipis, tanpa glow berwarna)
   ========================================================================= */
:root {
  /* Zinc primitives */
  --zinc-50:  #fafafa;
  --zinc-100: #f4f4f5;
  --zinc-200: #e4e4e7;
  --zinc-300: #d4d4d8;
  --zinc-400: #a1a1aa;
  --zinc-500: #71717a;
  --zinc-600: #52525b;
  --zinc-700: #3f3f46;
  --zinc-800: #27272a;
  --zinc-900: #18181b;
  --zinc-950: #09090b;

  /* Typography */
  --rs-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --rs-font-mono: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --rs-fs-2xs: 0.625rem;   /* 10px — badge di kartu kecil */
  --rs-fs-xs:  0.6875rem;  /* 11px — label, meta */
  --rs-fs-sm:  0.75rem;    /* 12px — teks sekunder */
  --rs-fs-md:  0.8125rem;  /* 13px — teks UI padat */
  --rs-fs-base: 0.875rem;  /* 14px — teks utama */
  --rs-fs-lg:  1rem;       /* 16px — judul section */
  --rs-fs-xl:  1.125rem;   /* 18px — judul kartu besar */
  --rs-fs-2xl: 1.375rem;   /* 22px — judul halaman */
  --rs-fw-regular: 400;
  --rs-fw-medium: 500;
  --rs-fw-semibold: 600;
  --rs-fw-bold: 700;
  --rs-tracking-tight: -0.01em;
  --rs-tracking-caps: 0.04em;

  /* Radius */
  --rs-radius-xs: 6px;
  --rs-radius-sm: 8px;
  --rs-radius-md: 12px;
  --rs-radius-lg: 16px;
  --rs-radius-full: 999px;

  /* Spacing */
  --rs-space-1: 4px;
  --rs-space-2: 8px;
  --rs-space-3: 12px;
  --rs-space-4: 16px;
  --rs-space-5: 24px;
  --rs-space-6: 32px;

  /* Motion — hanya transisi halus, tanpa efek dekoratif */
  --rs-ease: cubic-bezier(0.2, 0, 0, 1);
  --rs-dur-fast: 120ms;
  --rs-dur: 180ms;

  /* ---- Semantic (LIGHT, default) ---- */
  --rs-bg: var(--zinc-50);
  --rs-surface: #ffffff;
  --rs-surface-2: var(--zinc-100);
  --rs-surface-hover: var(--zinc-100);
  --rs-border: var(--zinc-200);
  --rs-border-strong: var(--zinc-300);
  --rs-text: var(--zinc-950);
  --rs-text-2: var(--zinc-600);
  --rs-text-3: var(--zinc-500);

  /* Aksen brand light mode (ditentukan owner): #848484 */
  --rs-accent: #848484;
  --rs-accent-hover: #6e6e6e;
  --rs-accent-fg: #ffffff;
  --rs-accent-subtle: #f1f1f1;

  --rs-inverse-bg: var(--zinc-900);
  --rs-inverse-fg: var(--zinc-50);
  --rs-inverse-fg-2: var(--zinc-400);
  --rs-inverse-border: var(--zinc-900);

  --rs-success: #15803d;
  --rs-success-bg: #f0fdf4;
  --rs-success-border: #bbf7d0;
  --rs-success-solid: #16a34a;
  --rs-warning: #b45309;
  --rs-warning-bg: #fffbeb;
  --rs-warning-border: #fde68a;
  --rs-warning-solid: #d97706;
  --rs-danger: #b91c1c;
  --rs-danger-bg: #fef2f2;
  --rs-danger-border: #fecaca;
  --rs-danger-solid: #dc2626;
  --rs-star: #f59e0b;

  /* Warna ikon status: mid-tone, tetap terbaca di halaman terang & gelap */
  --rs-ico-success: #16a34a;
  --rs-ico-warning: #d97706;
  --rs-ico-danger: #dc2626;
  --rs-ico-muted: #71717a;

  --rs-overlay: rgba(9, 9, 11, 0.45);
  --rs-nav-glass: rgba(255, 255, 255, 0.88);
  --rs-focus-ring: 0 0 0 3px rgba(132, 132, 132, 0.28);

  --rs-shadow-xs: 0 1px 2px rgba(9, 9, 11, 0.04);
  --rs-shadow-sm: 0 1px 2px rgba(9, 9, 11, 0.04), 0 1px 3px rgba(9, 9, 11, 0.06);
  --rs-shadow-md: 0 4px 12px -2px rgba(9, 9, 11, 0.08), 0 2px 4px -2px rgba(9, 9, 11, 0.04);
  --rs-shadow-lg: 0 16px 40px -12px rgba(9, 9, 11, 0.22), 0 2px 6px -2px rgba(9, 9, 11, 0.06);

  --rs-chart-grid: rgba(9, 9, 11, 0.06);
  --rs-chart-fill: rgba(132, 132, 132, 0.14);
}

/* ---- Semantic (DARK) ---- */
html.dark-mode {
  --rs-bg: var(--zinc-950);
  --rs-surface: var(--zinc-900);
  --rs-surface-2: var(--zinc-800);
  --rs-surface-hover: var(--zinc-800);
  --rs-border: var(--zinc-800);
  --rs-border-strong: var(--zinc-700);
  --rs-text: var(--zinc-50);
  --rs-text-2: var(--zinc-400);
  --rs-text-3: var(--zinc-500);

  --rs-accent: var(--zinc-50);
  --rs-accent-hover: var(--zinc-300);
  --rs-accent-fg: var(--zinc-900);
  --rs-accent-subtle: var(--zinc-800);

  --rs-inverse-bg: var(--zinc-900);
  --rs-inverse-fg: var(--zinc-50);
  --rs-inverse-fg-2: var(--zinc-400);
  --rs-inverse-border: var(--zinc-800);

  --rs-success: #4ade80;
  --rs-success-bg: rgba(34, 197, 94, 0.12);
  --rs-success-border: rgba(34, 197, 94, 0.28);
  --rs-success-solid: #22c55e;
  --rs-warning: #fbbf24;
  --rs-warning-bg: rgba(245, 158, 11, 0.12);
  --rs-warning-border: rgba(245, 158, 11, 0.28);
  --rs-warning-solid: #f59e0b;
  --rs-danger: #f87171;
  --rs-danger-bg: rgba(239, 68, 68, 0.12);
  --rs-danger-border: rgba(239, 68, 68, 0.28);
  --rs-danger-solid: #dc2626;

  --rs-ico-success: #22c55e;
  --rs-ico-warning: #f59e0b;
  --rs-ico-danger: #ef4444;
  --rs-ico-muted: #a1a1aa;

  --rs-overlay: rgba(0, 0, 0, 0.6);
  --rs-nav-glass: rgba(9, 9, 11, 0.85);
  --rs-focus-ring: 0 0 0 3px rgba(250, 250, 250, 0.14);

  --rs-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --rs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
  --rs-shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --rs-shadow-lg: 0 16px 40px -12px rgba(0, 0, 0, 0.65), 0 2px 6px -2px rgba(0, 0, 0, 0.35);

  --rs-chart-grid: rgba(250, 250, 250, 0.06);
  --rs-chart-fill: rgba(250, 250, 250, 0.08);
  color-scheme: dark;
}
html.light-mode { color-scheme: light; }

/* ---- Icon font (Bootstrap Icons) ----
   Ikon mengikuti ukuran & warna teks di sekitarnya (currentColor).
   Modifier warna hanya untuk ikon yang membawa arti status. */
.bi.rs-ico {
  display: inline-block;
  font-size: 1em;
  line-height: 1;
  vertical-align: -0.125em;
  color: inherit;
}
.bi.rs-ico--lg { font-size: 1.25em; }
.bi.rs-ico--muted   { color: var(--rs-ico-muted); }
.bi.rs-ico--success { color: var(--rs-ico-success); }
.bi.rs-ico--warning { color: var(--rs-ico-warning); }
.bi.rs-ico--danger  { color: var(--rs-ico-danger); }
.bi.rs-ico--dot { font-size: 0.5em; vertical-align: 0.2em; }

/* Tombol ganti mode terang/gelap (dipakai dashboard user & admin) */
.rs-mode-toggle {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rs-radius-sm);
  border: 1px solid var(--rs-border);
  background: var(--rs-surface);
  color: var(--rs-text-2);
  font-size: 0.95rem;
  cursor: pointer;
  transition: background-color var(--rs-dur) var(--rs-ease), color var(--rs-dur) var(--rs-ease), border-color var(--rs-dur) var(--rs-ease);
}
.rs-mode-toggle:hover { background: var(--rs-surface-hover); color: var(--rs-text); }
.rs-mode-toggle:focus-visible { outline: none; box-shadow: var(--rs-focus-ring); }
[data-rs-mode-toggle] .rs-mode-icon-light,
[data-rs-mode-toggle] .rs-mode-label-light { display: none; }
html.dark-mode [data-rs-mode-toggle] .rs-mode-icon-dark,
html.dark-mode [data-rs-mode-toggle] .rs-mode-label-dark { display: none; }
html.dark-mode [data-rs-mode-toggle] .rs-mode-icon-light { display: inline-block; }
html.dark-mode [data-rs-mode-toggle] .rs-mode-label-light { display: inline; }

@media (prefers-reduced-motion: reduce) {
  html.light-mode *, html.light-mode *::before, html.light-mode *::after,
  html.dark-mode *, html.dark-mode *::before, html.dark-mode *::after {
    transition-duration: 0.01ms !important;
  }
}


html[data-global-theme] {
  color-scheme: dark;
}
html[data-global-theme] body {
  background-color: var(--bg-body, var(--bg-primary, #0f172a)) !important;
  color: var(--text-main, var(--text-primary, #e2e8f0)) !important;
  transition: background-color 0.35s ease, color 0.35s ease;
}
html[data-global-theme] .card,
html[data-global-theme] .settings-card,
html[data-global-theme] [class*="-card"] {
  background-color: var(--bg-card, var(--bg-surface, #1e293b)) !important;
  border-color: var(--border, var(--border-line, rgba(255,255,255,0.1))) !important;
  color: var(--text-main, var(--text-primary, #e2e8f0)) !important;
}
html[data-global-theme] .card-header,
html[data-global-theme] .card-footer {
  background-color: var(--bg-secondary, var(--bg-body, #0f172a)) !important;
  border-color: var(--border, var(--border-line, rgba(255,255,255,0.1))) !important;
}
html[data-global-theme] .form-control,
html[data-global-theme] .form-select,
html[data-global-theme] .pkg-input {
  background-color: var(--bg-secondary, var(--bg-surface, #1e293b)) !important;
  border-color: var(--border, var(--border-line, rgba(255,255,255,0.1))) !important;
  color: var(--text-main, var(--text-primary, #e2e8f0)) !important;
}
html[data-global-theme] .btn-primary,
html[data-global-theme] [class*="btn-save"],
html[data-global-theme] .deposit-btn {
  background-color: var(--accent-blue, var(--accent, #3b82f6)) !important;
  border-color: var(--accent-blue, var(--accent, #3b82f6)) !important;
}
html[data-global-theme] .btn-primary:hover {
  background-color: var(--accent-blue-hover, var(--accent-blue, #2563eb)) !important;
  border-color: var(--accent-blue-hover, #2563eb) !important;
}
html[data-global-theme] .text-primary,
html[data-global-theme] [style*="color:var(--accent)"],
html[data-global-theme] a.nav-link.active {
  color: var(--accent-blue, var(--accent, #3b82f6)) !important;
}
html[data-global-theme] .sidebar,
html[data-global-theme] .admin-sidebar,
html[data-global-theme] .top-header {
  background-color: var(--bg-secondary, var(--bg-surface, #0f172a)) !important;
  border-color: var(--border, var(--border-line, rgba(255,255,255,0.08))) !important;
}
html[data-global-theme] .navbar,
html[data-global-theme] nav[class*="navbar"] {
  background: var(--nav-glass, rgba(15,15,15,0.92)) !important;
  border-color: var(--border, rgba(255,255,255,0.08)) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
html[data-global-theme] .modal-content {
  background-color: var(--bg-card, #1e293b) !important;
  border-color: var(--border, rgba(255,255,255,0.1)) !important;
}
html[data-global-theme] .dropdown-menu {
  background-color: var(--bg-card, #1e293b) !important;
  border-color: var(--border, rgba(255,255,255,0.1)) !important;
}
html[data-global-theme] .dropdown-item {
  color: var(--text-main, #e2e8f0) !important;
}
html[data-global-theme] .dropdown-item:hover {
  background-color: var(--btn-hover, var(--bg-card-hover, #334155)) !important;
}
html[data-global-theme] .tab-btn.active {
  background-color: var(--accent-blue, var(--accent, #2563eb)) !important;
}


html[data-global-theme="pixel-retro"] body,
html[data-global-theme="pixel-retro"] .section-title,
html[data-global-theme="pixel-retro"] .page-title {
  font-family: 'Courier New', 'Consolas', 'Lucida Console', monospace !important;
}
html[data-global-theme="pixel-retro"] h1,
html[data-global-theme="pixel-retro"] h2,
html[data-global-theme="pixel-retro"] h3,
html[data-global-theme="pixel-retro"] .page-title {
  text-shadow: 0 0 8px rgba(0,255,65,0.7), 0 0 20px rgba(0,255,65,0.3) !important;
  letter-spacing: 0.04em;
}
html[data-global-theme="pixel-retro"] .card,
html[data-global-theme="pixel-retro"] .settings-card {
  box-shadow: 0 0 0 1px rgba(0,255,65,0.3), 0 0 12px rgba(0,255,65,0.08) !important;
}
html[data-global-theme="pixel-retro"]::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,255,65,0.02) 2px, rgba(0,255,65,0.02) 4px);
  pointer-events: none;
  z-index: 9999;
}


html[data-global-theme="battle-royale"] .card,
html[data-global-theme="battle-royale"] .settings-card {
  border-left: 2px solid rgba(249,115,22,0.4) !important;
}
html[data-global-theme="battle-royale"] h1,
html[data-global-theme="battle-royale"] h2,
html[data-global-theme="battle-royale"] .page-title {
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


html[data-global-theme="moba-warrior"] h1,
html[data-global-theme="moba-warrior"] h2,
html[data-global-theme="moba-warrior"] h3,
html[data-global-theme="moba-warrior"] .page-title {
  background: linear-gradient(135deg, #8b5cf6, #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html[data-global-theme="moba-warrior"] .card,
html[data-global-theme="moba-warrior"] .settings-card {
  background: linear-gradient(135deg, rgba(10,15,46,1) 0%, rgba(15,22,61,1) 100%) !important;
  box-shadow: 0 4px 20px rgba(139,92,246,0.15) !important;
}


html[data-global-theme="dark-fantasy"] h1,
html[data-global-theme="dark-fantasy"] h2,
html[data-global-theme="dark-fantasy"] h3,
html[data-global-theme="dark-fantasy"] .page-title {
  background: linear-gradient(135deg, #d4af37, #c89520, #ffe066);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none !important;
}
html[data-global-theme="dark-fantasy"] .card,
html[data-global-theme="dark-fantasy"] .settings-card {
  border-top: 2px solid rgba(212,175,55,0.4) !important;
  box-shadow: 0 4px 20px rgba(212,175,55,0.1) !important;
}


html[data-global-theme="anime-kawaii"] h1,
html[data-global-theme="anime-kawaii"] h2,
html[data-global-theme="anime-kawaii"] h3,
html[data-global-theme="anime-kawaii"] .page-title {
  background: linear-gradient(135deg, #f472b6, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html[data-global-theme="anime-kawaii"] .card,
html[data-global-theme="anime-kawaii"] .settings-card {
  border-radius: 20px !important;
  box-shadow: 0 4px 20px rgba(244,114,182,0.15) !important;
}
html[data-global-theme="anime-kawaii"] .btn-primary,
html[data-global-theme="anime-kawaii"] .btn-save {
  border-radius: 999px !important;
}


html[data-global-theme="fantasy-celestial"] body {
  background-image: radial-gradient(ellipse at 20% 20%, rgba(99,102,241,0.06) 0%, transparent 50%),
                    radial-gradient(ellipse at 80% 80%, rgba(212,175,55,0.04) 0%, transparent 50%) !important;
}
html[data-global-theme="fantasy-celestial"] h1,
html[data-global-theme="fantasy-celestial"] h2,
html[data-global-theme="fantasy-celestial"] .page-title {
  background: linear-gradient(135deg, #818cf8, #d4af37);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


html[data-global-theme="tactical-shooter"] .card,
html[data-global-theme="tactical-shooter"] .settings-card {
  border-left: 2px solid rgba(239,68,68,0.5) !important;
  box-shadow: 0 4px 20px rgba(239,68,68,0.1) !important;
}
html[data-global-theme="tactical-shooter"] h1,
html[data-global-theme="tactical-shooter"] h2,
html[data-global-theme="tactical-shooter"] .page-title {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


html[data-global-theme="glassmorphism"] body {
  background-image: radial-gradient(ellipse at 30% 30%, rgba(103,232,249,0.06) 0%, transparent 60%),
                    radial-gradient(ellipse at 70% 70%, rgba(129,140,248,0.05) 0%, transparent 60%) !important;
}
html[data-global-theme="glassmorphism"] .card,
html[data-global-theme="glassmorphism"] .settings-card,
html[data-global-theme="glassmorphism"] [class*="-card"] {
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
html[data-global-theme="glassmorphism"] .sidebar,
html[data-global-theme="glassmorphism"] .admin-sidebar,
html[data-global-theme="glassmorphism"] .top-header {
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  background: rgba(8,12,24,0.75) !important;
}


html[data-global-theme="modern-minimalist"] .card,
html[data-global-theme="modern-minimalist"] .settings-card {
  border: 1px solid #2a2a2a !important;
  box-shadow: none !important;
}
html[data-global-theme="modern-minimalist"] h1,
html[data-global-theme="modern-minimalist"] h2,
html[data-global-theme="modern-minimalist"] h3,
html[data-global-theme="modern-minimalist"] .page-title {
  font-weight: 800;
  letter-spacing: -0.02em;
}


html[data-global-theme="blurple-modern"] .card,
html[data-global-theme="blurple-modern"] .settings-card {
  box-shadow: 0 2px 10px rgba(88,101,242,0.12) !important;
}


html[data-global-theme="lofi-chill"] body {
  background-image: radial-gradient(ellipse at 50% 0%, rgba(192,132,252,0.08) 0%, transparent 60%) !important;
}
html[data-global-theme="lofi-chill"] .card,
html[data-global-theme="lofi-chill"] .settings-card {
  box-shadow: 0 4px 20px rgba(192,132,252,0.08), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}


html[data-global-theme="biru-korporat"] .card,
html[data-global-theme="biru-korporat"] .settings-card {
  border-top: 2px solid rgba(37,99,235,0.4) !important;
}
html[data-global-theme="biru-korporat"] h1,
html[data-global-theme="biru-korporat"] h2,
html[data-global-theme="biru-korporat"] .page-title {
  letter-spacing: 0.01em;
}


html[data-global-theme="hijau-segar"] body {
  background-image: radial-gradient(ellipse at 30% 50%, rgba(34,197,94,0.05) 0%, transparent 60%) !important;
}
html[data-global-theme="hijau-segar"] .card,
html[data-global-theme="hijau-segar"] .settings-card {
  box-shadow: 0 4px 20px rgba(34,197,94,0.08) !important;
}


html[data-global-theme="oranye-energik"] body {
  background-image: radial-gradient(ellipse at 50% 100%, rgba(251,146,60,0.07) 0%, transparent 60%) !important;
}
html[data-global-theme="oranye-energik"] h1,
html[data-global-theme="oranye-energik"] h2,
html[data-global-theme="oranye-energik"] .page-title {
  letter-spacing: 0.04em;
}


html[data-global-theme="esports-arena"] body {
  background-image: linear-gradient(180deg, rgba(6,182,212,0.03) 0%, transparent 20%) !important;
}
html[data-global-theme="esports-arena"] .card,
html[data-global-theme="esports-arena"] .settings-card {
  border-top: 2px solid rgba(6,182,212,0.5) !important;
  box-shadow: 0 0 0 1px rgba(6,182,212,0.1), 0 4px 20px rgba(0,0,0,0.6) !important;
}
html[data-global-theme="esports-arena"] h1,
html[data-global-theme="esports-arena"] h2,
html[data-global-theme="esports-arena"] h3,
html[data-global-theme="esports-arena"] .page-title {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-shadow: 0 0 10px rgba(6,182,212,0.5) !important;
}
html[data-global-theme="esports-arena"]::after {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #06b6d4, #f59e0b, transparent);
  z-index: 10000;
  pointer-events: none;
}


html[data-global-theme="sakura-night"] body {
  background-image: radial-gradient(ellipse at 50% 0%, rgba(255,128,171,0.07) 0%, transparent 55%),
                    radial-gradient(ellipse at 80% 100%, rgba(206,147,216,0.05) 0%, transparent 50%) !important;
}
html[data-global-theme="sakura-night"] h1,
html[data-global-theme="sakura-night"] h2,
html[data-global-theme="sakura-night"] h3,
html[data-global-theme="sakura-night"] .page-title {
  background: linear-gradient(135deg, #ff80ab, #ce93d8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html[data-global-theme="sakura-night"] .card,
html[data-global-theme="sakura-night"] .settings-card {
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(255,64,129,0.1) !important;
}


html[data-global-theme="neon-synthwave"] body {
  background-image:
    linear-gradient(180deg, rgba(255,0,255,0.04) 0%, transparent 30%),
    repeating-linear-gradient(90deg, transparent, transparent 60px, rgba(255,0,255,0.015) 60px, rgba(255,0,255,0.015) 61px),
    repeating-linear-gradient(0deg, transparent, transparent 40px, rgba(0,229,255,0.01) 40px, rgba(0,229,255,0.01) 41px) !important;
}
html[data-global-theme="neon-synthwave"] h1,
html[data-global-theme="neon-synthwave"] h2,
html[data-global-theme="neon-synthwave"] h3,
html[data-global-theme="neon-synthwave"] .page-title {
  background: linear-gradient(135deg, #ff00ff, #00e5ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none !important;
}
html[data-global-theme="neon-synthwave"] .card,
html[data-global-theme="neon-synthwave"] .settings-card {
  box-shadow: 0 0 0 1px rgba(255,0,255,0.2), 0 4px 20px rgba(255,0,255,0.1) !important;
}
html[data-global-theme="neon-synthwave"]::after {
  content: '';
  position: fixed;
  bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #ff00ff, #00e5ff, transparent);
  z-index: 10000;
  pointer-events: none;
}


html[data-global-theme="deep-ocean"] body {
  background-image: radial-gradient(ellipse at 50% 50%, rgba(0,188,212,0.05) 0%, transparent 60%),
                    radial-gradient(ellipse at 10% 90%, rgba(77,208,225,0.04) 0%, transparent 40%) !important;
}
html[data-global-theme="deep-ocean"] h1,
html[data-global-theme="deep-ocean"] h2,
html[data-global-theme="deep-ocean"] h3,
html[data-global-theme="deep-ocean"] .page-title {
  background: linear-gradient(135deg, #4dd0e1, #00bcd4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html[data-global-theme="deep-ocean"] .card,
html[data-global-theme="deep-ocean"] .settings-card {
  border-top: 1px solid rgba(0,188,212,0.2) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(0,188,212,0.08) !important;
}


html[data-global-theme="rust-steampunk"] body {
  background-image: radial-gradient(ellipse at 60% 40%, rgba(205,127,50,0.06) 0%, transparent 55%) !important;
}
html[data-global-theme="rust-steampunk"] h1,
html[data-global-theme="rust-steampunk"] h2,
html[data-global-theme="rust-steampunk"] h3,
html[data-global-theme="rust-steampunk"] .page-title {
  background: linear-gradient(135deg, #cd7f32, #e8d4b0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html[data-global-theme="rust-steampunk"] .card,
html[data-global-theme="rust-steampunk"] .settings-card {
  border: 1px solid rgba(205,127,50,0.25) !important;
  border-left: 3px solid rgba(205,127,50,0.5) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
}


html[data-global-theme="midnight-red"] body {
  background-image: radial-gradient(ellipse at 50% 100%, rgba(229,57,53,0.06) 0%, transparent 50%) !important;
}
html[data-global-theme="midnight-red"] h1,
html[data-global-theme="midnight-red"] h2,
html[data-global-theme="midnight-red"] h3,
html[data-global-theme="midnight-red"] .page-title {
  letter-spacing: 0.04em;
}
html[data-global-theme="midnight-red"] .card,
html[data-global-theme="midnight-red"] .settings-card {
  border-bottom: 2px solid rgba(229,57,53,0.3) !important;
  box-shadow: 0 4px 20px rgba(229,57,53,0.08) !important;
}


html[data-global-theme="forest-druid"] body {
  background-image: radial-gradient(ellipse at 30% 70%, rgba(102,187,106,0.06) 0%, transparent 55%),
                    radial-gradient(ellipse at 80% 20%, rgba(165,214,167,0.04) 0%, transparent 45%) !important;
}
html[data-global-theme="forest-druid"] h1,
html[data-global-theme="forest-druid"] h2,
html[data-global-theme="forest-druid"] h3,
html[data-global-theme="forest-druid"] .page-title {
  background: linear-gradient(135deg, #66bb6a, #a5d6a7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html[data-global-theme="forest-druid"] .card,
html[data-global-theme="forest-druid"] .settings-card {
  border-left: 2px solid rgba(102,187,106,0.3) !important;
  box-shadow: 0 4px 20px rgba(102,187,106,0.06) !important;
}


html[data-global-theme="arctic-frost"] body {
  background-image: radial-gradient(ellipse at 50% 0%, rgba(130,177,255,0.08) 0%, transparent 50%),
                    radial-gradient(ellipse at 20% 80%, rgba(232,244,255,0.04) 0%, transparent 40%) !important;
}
html[data-global-theme="arctic-frost"] h1,
html[data-global-theme="arctic-frost"] h2,
html[data-global-theme="arctic-frost"] h3,
html[data-global-theme="arctic-frost"] .page-title {
  background: linear-gradient(135deg, #82b1ff, #e8f4ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html[data-global-theme="arctic-frost"] .card,
html[data-global-theme="arctic-frost"] .settings-card {
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  border: 1px solid rgba(130,177,255,0.15) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(130,177,255,0.06) !important;
}


html[data-global-theme="lava-flow"] body {
  background-image: radial-gradient(ellipse at 50% 100%, rgba(255,87,34,0.1) 0%, transparent 50%),
                    radial-gradient(ellipse at 80% 60%, rgba(255,138,101,0.05) 0%, transparent 40%) !important;
}
html[data-global-theme="lava-flow"] h1,
html[data-global-theme="lava-flow"] h2,
html[data-global-theme="lava-flow"] h3,
html[data-global-theme="lava-flow"] .page-title {
  background: linear-gradient(135deg, #ff5722, #ff8a65);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html[data-global-theme="lava-flow"] .card,
html[data-global-theme="lava-flow"] .settings-card {
  border-bottom: 2px solid rgba(255,87,34,0.4) !important;
  box-shadow: 0 4px 20px rgba(255,87,34,0.12) !important;
}


html[data-global-theme="nebula-space"] body {
  background-image: radial-gradient(ellipse at 20% 30%, rgba(124,77,255,0.08) 0%, transparent 50%),
                    radial-gradient(ellipse at 80% 70%, rgba(64,196,255,0.05) 0%, transparent 45%),
                    radial-gradient(ellipse at 50% 50%, rgba(124,77,255,0.03) 0%, transparent 70%) !important;
}
html[data-global-theme="nebula-space"] h1,
html[data-global-theme="nebula-space"] h2,
html[data-global-theme="nebula-space"] h3,
html[data-global-theme="nebula-space"] .page-title {
  background: linear-gradient(135deg, #7c4dff, #40c4ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html[data-global-theme="nebula-space"] .card,
html[data-global-theme="nebula-space"] .settings-card {
  box-shadow: 0 0 0 1px rgba(124,77,255,0.15), 0 4px 24px rgba(124,77,255,0.1) !important;
}


html[data-global-theme="golden-luxury"] body {
  background-image: radial-gradient(ellipse at 50% 0%, rgba(255,215,0,0.06) 0%, transparent 50%),
                    radial-gradient(ellipse at 90% 90%, rgba(249,168,37,0.04) 0%, transparent 40%) !important;
}
html[data-global-theme="golden-luxury"] h1,
html[data-global-theme="golden-luxury"] h2,
html[data-global-theme="golden-luxury"] h3,
html[data-global-theme="golden-luxury"] .page-title {
  background: linear-gradient(135deg, #ffd700, #fff8e1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html[data-global-theme="golden-luxury"] .card,
html[data-global-theme="golden-luxury"] .settings-card {
  border: 1px solid rgba(255,215,0,0.18) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,215,0,0.06) !important;
}


html[data-global-theme="cyber-hacker"] body,
html[data-global-theme="cyber-hacker"] .section-title,
html[data-global-theme="cyber-hacker"] .page-title {
  font-family: 'Courier New', 'Consolas', monospace !important;
}
html[data-global-theme="cyber-hacker"] h1,
html[data-global-theme="cyber-hacker"] h2,
html[data-global-theme="cyber-hacker"] h3,
html[data-global-theme="cyber-hacker"] .page-title {
  text-shadow: 0 0 8px rgba(0,255,204,0.7), 0 0 20px rgba(0,255,204,0.3) !important;
  color: #00ffcc !important;
  -webkit-text-fill-color: #00ffcc !important;
}
html[data-global-theme="cyber-hacker"] .card,
html[data-global-theme="cyber-hacker"] .settings-card {
  box-shadow: 0 0 0 1px rgba(0,255,204,0.2), 0 0 12px rgba(0,255,204,0.06) !important;
}
html[data-global-theme="cyber-hacker"]::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,255,204,0.015) 3px, rgba(0,255,204,0.015) 4px);
  pointer-events: none;
  z-index: 9999;
}


html[data-global-theme="violet-dusk"] body {
  background-image: radial-gradient(ellipse at 40% 20%, rgba(156,39,176,0.08) 0%, transparent 50%),
                    radial-gradient(ellipse at 70% 80%, rgba(234,128,252,0.05) 0%, transparent 45%) !important;
}
html[data-global-theme="violet-dusk"] h1,
html[data-global-theme="violet-dusk"] h2,
html[data-global-theme="violet-dusk"] h3,
html[data-global-theme="violet-dusk"] .page-title {
  background: linear-gradient(135deg, #ce93d8, #ea80fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html[data-global-theme="violet-dusk"] .card,
html[data-global-theme="violet-dusk"] .settings-card {
  border-top: 1px solid rgba(156,39,176,0.3) !important;
  box-shadow: 0 4px 20px rgba(156,39,176,0.1) !important;
}


html[data-global-theme="sand-desert"] body {
  background-image: radial-gradient(ellipse at 60% 40%, rgba(230,184,74,0.07) 0%, transparent 55%) !important;
}
html[data-global-theme="sand-desert"] h1,
html[data-global-theme="sand-desert"] h2,
html[data-global-theme="sand-desert"] h3,
html[data-global-theme="sand-desert"] .page-title {
  background: linear-gradient(135deg, #e6b84a, #fff3cd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html[data-global-theme="sand-desert"] .card,
html[data-global-theme="sand-desert"] .settings-card {
  border: 1px solid rgba(230,184,74,0.2) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
}


html[data-global-theme="toxic-lime"] body {
  background-image: radial-gradient(ellipse at 50% 100%, rgba(204,255,0,0.07) 0%, transparent 45%) !important;
}
html[data-global-theme="toxic-lime"] h1,
html[data-global-theme="toxic-lime"] h2,
html[data-global-theme="toxic-lime"] h3,
html[data-global-theme="toxic-lime"] .page-title {
  text-shadow: 0 0 8px rgba(204,255,0,0.5) !important;
  color: #ccff00 !important;
  -webkit-text-fill-color: #ccff00 !important;
}
html[data-global-theme="toxic-lime"] .card,
html[data-global-theme="toxic-lime"] .settings-card {
  box-shadow: 0 0 0 1px rgba(204,255,0,0.15), 0 4px 20px rgba(204,255,0,0.06) !important;
}


html[data-global-theme="rose-gold"] body {
  background-image: radial-gradient(ellipse at 40% 30%, rgba(232,160,176,0.07) 0%, transparent 50%) !important;
}
html[data-global-theme="rose-gold"] h1,
html[data-global-theme="rose-gold"] h2,
html[data-global-theme="rose-gold"] h3,
html[data-global-theme="rose-gold"] .page-title {
  background: linear-gradient(135deg, #e8a0b0, #f8bbd0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html[data-global-theme="rose-gold"] .card,
html[data-global-theme="rose-gold"] .settings-card {
  border-radius: 14px !important;
  border: 1px solid rgba(232,160,176,0.2) !important;
  box-shadow: 0 4px 20px rgba(232,160,176,0.08) !important;
}