/* themes.css - Rahmad Shop Global Theme System
 * Developer: Rahmad Tenpoles
 * CSS structural overrides per tema (warna via JS inline style di global-theme.js).
 */

/* ===================================================================
   BASE THEME RESET — Sinkronkan variabel Bootstrap dan umum
=================================================================== */
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;
}

/* ===================================================================
   1. PIXEL RETRO — 8-bit green, monospace
=================================================================== */
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;
}

/* ===================================================================
   2. BATTLE ROYALE — Military orange
=================================================================== */
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;
}

/* ===================================================================
   3. MOBA WARRIOR — Blue & purple gradient accents
=================================================================== */
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;
}

/* ===================================================================
   4. DARK FANTASY — Gold medieval
=================================================================== */
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;
}

/* ===================================================================
   5. ANIME KAWAII — Pink & purple cute
=================================================================== */
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;
}

/* ===================================================================
   6. FANTASY CELESTIAL — Indigo & starfield
=================================================================== */
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;
}

/* ===================================================================
   7. TACTICAL SHOOTER — Red FPS
=================================================================== */
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;
}

/* ===================================================================
   8. GLASSMORPHISM — Frosted glass
=================================================================== */
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;
}

/* ===================================================================
   9. MODERN MINIMALIST — Clean neon green
=================================================================== */
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;
}

/* ===================================================================
   10. BLURPLE MODERN — Discord-inspired
=================================================================== */
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;
}

/* ===================================================================
   11. LO-FI CHILL — Soft pastel purple
=================================================================== */
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;
}

/* ===================================================================
   12. BIRU KORPORAT — Professional clean
=================================================================== */
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;
}

/* ===================================================================
   13. HIJAU SEGAR — Nature green
=================================================================== */
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;
}

/* ===================================================================
   14. ORANYE ENERGIK — Energy fire
=================================================================== */
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;
}

/* ===================================================================
   15. ESPORTS ARENA — High contrast competitive
=================================================================== */
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;
}

/* ===================================================================
   16. SAKURA NIGHT — Japanese cherry blossom night
=================================================================== */
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;
}

/* ===================================================================
   17. NEON SYNTHWAVE — 80s retro neon purple & magenta
=================================================================== */
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;
}

/* ===================================================================
   18. DEEP OCEAN — Teal underwater depth
=================================================================== */
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;
}

/* ===================================================================
   19. RUST STEAMPUNK — Bronze industrial
=================================================================== */
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;
}

/* ===================================================================
   20. MIDNIGHT RED — Dark crimson noir
=================================================================== */
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;
}

/* ===================================================================
   21. FOREST DRUID — Deep emerald nature
=================================================================== */
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;
}

/* ===================================================================
   22. ARCTIC FROST — Cold icy blue
=================================================================== */
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;
}

/* ===================================================================
   23. LAVA FLOW — Volcanic fiery dark
=================================================================== */
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;
}

/* ===================================================================
   24. NEBULA SPACE — Cosmic purple deep space
=================================================================== */
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;
}

/* ===================================================================
   25. GOLDEN LUXURY — Rich black & gold opulence
=================================================================== */
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;
}

/* ===================================================================
   26. CYBER HACKER — Terminal green-cyan on black
=================================================================== */
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;
}

/* ===================================================================
   27. VIOLET DUSK — Twilight purple evening
=================================================================== */
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;
}

/* ===================================================================
   28. SAND DESERT — Warm amber sahara
=================================================================== */
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;
}

/* ===================================================================
   29. TOXIC LIME — Electric lime acid
=================================================================== */
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;
}

/* ===================================================================
   30. ROSE GOLD — Elegant charcoal & rose gold
=================================================================== */
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;
}