/* ==========================================================================
   PlayArcade Pro - 16 Handcrafted High-Contrast Themes
   Airtight Text Visibility, Zero White Bleed & Responsive Play
   ========================================================================== */

/* Universal Component Variable Hooks */
body {
    background-color: var(--bg-main) !important;
    color: var(--text-main) !important;
    transition: background-color 0.25s ease, color 0.25s ease;
}

body .bg-mesh-glow {
    background: radial-gradient(circle, var(--mesh-glow-1, rgba(2, 132, 199, 0.07)) 0%, transparent 70%) !important;
}
body .bg-mesh-glow-2 {
    background: radial-gradient(circle, var(--mesh-glow-2, rgba(6, 182, 212, 0.05)) 0%, transparent 70%) !important;
}

/* Header & Brand Identity */
body .site-header {
    background: var(--bg-surface-trans, var(--bg-surface)) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}
body .header-top-accent {
    background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%) !important;
}
body .brand-text-wrap .brand-text {
    -webkit-text-fill-color: initial !important;
    background: none !important;
    color: var(--text-main) !important;
}
body .brand-text-wrap .brand-subtext {
    color: var(--primary) !important;
}
body .logo-icon-wrap .logo-icon {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%) !important;
    color: #ffffff !important;
}
body .logo-pulse-dot {
    background: var(--accent-emerald, #10b981) !important;
    border-color: var(--bg-surface) !important;
}

/* Universal Typography & Headings High Contrast */
body h1, body h2, body h3, body h4, body h5, body h6,
body .section-title,
body .hero-title,
body .game-card-title,
body .tb-title,
body .widget-title,
body .footer-title,
body .faq-question,
body .drawer-title,
body .cat-menu-header,
body .suggestion-title,
body .ci-details strong,
body .specs-list strong,
body .trending-title,
body .game-detail-title,
body .seo-article-body h2,
body .seo-article-body h3,
body .seo-article-body h4,
body .legal-document-card h2,
body .legal-document-card h3,
body .legal-document-card h4,
body .game-guide-body h2,
body .game-guide-body h3,
body .game-guide-body h4,
body .game-controls-card h3,
body .typography-content h2,
body .typography-content h3,
body .typography-content h4 {
    color: var(--text-main) !important;
}

body p,
body li,
body .hero-desc,
body .footer-desc,
body .faq-answer,
body .suggestion-cat,
body .game-guide-body,
body .game-guide-body p,
body .game-guide-body li,
body .legal-document-card p,
body .legal-document-card li,
body .seo-article-body p,
body .seo-article-body li,
body .typography-content,
body .typography-content p,
body .typography-content li,
body .game-controls-card p,
body .specs-list span,
body .trending-views,
body .footer-links a,
body .footer-bottom p,
body .game-breadcrumbs a,
body .drawer-cat-link,
body .cat-menu-item {
    color: var(--text-muted) !important;
}

body .section-subtitle,
body .game-card-info,
body .game-card-category,
body .meta-tag,
body .game-breadcrumbs .bc-sep,
body .drawer-section-title,
body .cat-menu-header small,
body .cat-count,
body .cat-hero-count,
body .breadcrumb-item {
    color: var(--text-subtle) !important;
}

/* Universal Card & Surface Containers */
body .game-card,
body .game-guide-card,
body .sidebar-widget,
body .static-page-card,
body .seo-article-card,
body .legal-document-card,
body .contact-form-card,
body .contact-info-card,
body .modal-dialog,
body .empty-state-card,
body .category-hero-card,
body .search-header-card,
body .footer-feature-item,
body .cookie-banner,
body .hero-card,
body .game-stage-container,
body .game-action-toolbar,
body .game-meta-panel {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: var(--shadow-card) !important;
    color: var(--text-main) !important;
}

body .game-card:hover {
    border-color: var(--primary) !important;
    box-shadow: var(--shadow-hover) !important;
}

/* Universal Nested Sub-Containers */
body .seo-block,
body .faq-item,
body .game-controls-card,
body .contact-sub-box,
body .tb-btn,
body .game-tag-pill,
body .meta-tag,
body .cat-count,
body .cat-hero-count,
body .trending-item {
    background: var(--bg-card-hover) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-muted) !important;
}

body .tb-btn:hover,
body .game-tag-pill:hover,
body .trending-item:hover {
    background: var(--bg-surface) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

/* Form Controls & Inputs */
body .form-control,
body .search-form input,
body .search-inpage-form input,
body .share-copy-box input {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-subtle) !important;
}
body .form-control:focus,
body .search-form input:focus,
body .search-inpage-form input:focus {
    background: var(--bg-surface) !important;
    border-color: var(--primary) !important;
    color: var(--text-main) !important;
}
body .search-form {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
}
body .search-suggestions {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: var(--shadow-hover) !important;
}
body .search-suggestion-item {
    color: var(--text-main) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}
body .search-suggestion-item:hover {
    background: var(--bg-card-hover) !important;
}

/* Buttons & Navigation Pills */
body .btn-secondary,
body .btn-action,
body .btn-refresh-picks,
body .mobile-menu-btn,
body .cat-pill,
body .social-btn,
body .back-to-top,
body .pagination-btn {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-main) !important;
}
body .btn-secondary:hover,
body .btn-action:hover,
body .btn-refresh-picks:hover,
body .mobile-menu-btn:hover,
body .cat-pill:hover,
body .social-btn:hover,
body .back-to-top:hover,
body .pagination-btn:hover {
    background: var(--bg-card-hover) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

body .btn-primary,
body .pagination-btn.active,
body .cat-pill.active {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%) !important;
    border-color: var(--primary-hover) !important;
    color: #ffffff !important;
}

body .btn-home.active {
    background: var(--bg-card-hover) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

body .btn-random {
    background: var(--bg-card) !important;
    border-color: var(--border-subtle) !important;
    color: var(--secondary) !important;
}
body .btn-random:hover {
    background: var(--bg-card-hover) !important;
    border-color: var(--secondary) !important;
    color: var(--secondary-hover) !important;
}

/* Section Icons & Badges */
body .section-icon,
body .cat-icon-badge,
body .ci-icon {
    background: var(--bg-card-hover) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--primary) !important;
}
body .icon-popular {
    color: var(--secondary) !important;
}
body .icon-new {
    color: var(--accent-emerald) !important;
}
body .badge-featured {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%) !important;
    color: #ffffff !important;
}
body .hero-badge {
    background: var(--bg-card-hover) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--primary) !important;
}

/* Mobile Navigation Drawer */
body .mobile-drawer {
    background: var(--bg-surface) !important;
    border-right: 1px solid var(--border-subtle) !important;
}
body .mobile-drawer-header {
    border-bottom: 1px solid var(--border-subtle) !important;
}
body .mobile-nav-link {
    color: var(--text-main) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}
body .mobile-nav-link:hover {
    background: var(--bg-card-hover) !important;
    color: var(--primary) !important;
}
body .dropdown-menu {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: var(--shadow-hover) !important;
}
body .cat-menu-item {
    border-bottom: 1px solid var(--border-subtle) !important;
}
body .cat-menu-item:hover {
    background: var(--bg-card-hover) !important;
    color: var(--primary) !important;
}

/* Footer Section */
body .site-footer {
    background: var(--bg-footer) !important;
    border-top: 1px solid var(--border-subtle) !important;
}
body .footer-links a:hover {
    color: var(--primary) !important;
}
body .footer-bottom {
    border-top: 1px solid var(--border-subtle) !important;
}

/* Game Detail Page Specifics */
body .specs-list li {
    border-bottom: 1px solid var(--border-subtle) !important;
}
body .game-breadcrumbs {
    color: var(--text-subtle) !important;
}
body .game-breadcrumbs a {
    color: var(--text-muted) !important;
}
body .game-breadcrumbs a:hover {
    color: var(--primary) !important;
}
body .game-breadcrumbs .bc-current {
    color: var(--text-main) !important;
}
body .badge-free {
    color: var(--accent-emerald, #10b981) !important;
}

/* Modal Windows */
body .modal-dialog {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
}
body .modal-header {
    border-bottom: 1px solid var(--border-subtle) !important;
}
body .modal-close {
    color: var(--text-subtle) !important;
}
body .modal-close:hover {
    color: var(--text-main) !important;
}
body .copy-success-msg {
    color: var(--accent-emerald, #10b981) !important;
}


/* --------------------------------------------------------------------------
   Theme: light_modern (Light)
   -------------------------------------------------------------------------- */
body[data-theme="light_modern"],
body.theme-light_modern {
    --bg-main: #f8fafc;
    --bg-surface: #ffffff;
    --bg-surface-trans: rgba(255, 255, 255, 0.96);
    --bg-card: #ffffff;
    --bg-card-hover: #f1f5f9;
    --bg-footer: linear-gradient(180deg, #ffffff 0%, #f8fafc 40%, #f1f5f9 100%);
    --border-subtle: #e2e8f0;
    --border-strong: #cbd5e1;
    --border-glow: rgba(2, 132, 199, 0.25);
    --primary: #0284c7;
    --primary-hover: #0369a1;
    --primary-glow: rgba(2, 132, 199, 0.22);
    --secondary: #e11d48;
    --secondary-hover: #be123c;
    --accent-emerald: #059669;
    --accent-amber: #d97706;
    --accent-cyan: #0284c7;
    --text-main: #0f172a;
    --text-muted: #334155;
    --text-subtle: #64748b;
    --shadow-card: 0 4px 16px -1px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
    --shadow-hover: 0 16px 32px -4px rgba(2, 132, 199, 0.15), 0 8px 16px -2px rgba(15, 23, 42, 0.06);
    --mesh-glow-1: rgba(2, 132, 199, 0.07);
    --mesh-glow-2: rgba(6, 182, 212, 0.05);
}

/* --------------------------------------------------------------------------
   Theme: cyberpunk_neon (Dark)
   -------------------------------------------------------------------------- */
body[data-theme="cyberpunk_neon"],
body.theme-cyberpunk_neon {
    --bg-main: #080811;
    --bg-surface: #101026;
    --bg-surface-trans: rgba(16, 16, 38, 0.95);
    --bg-card: #161633;
    --bg-card-hover: #212148;
    --bg-footer: linear-gradient(180deg, #101026 0%, #080811 100%);
    --border-subtle: #2e2e60;
    --border-strong: #484896;
    --border-glow: rgba(0, 240, 255, 0.35);
    --primary: #00f0ff;
    --primary-hover: #00c7d4;
    --primary-glow: rgba(0, 240, 255, 0.35);
    --secondary: #ff007f;
    --secondary-hover: #d9006c;
    --accent-emerald: #00ff88;
    --accent-amber: #ffe600;
    --accent-cyan: #00f0ff;
    --text-main: #ffffff;
    --text-muted: #e2e8f0;
    --text-subtle: #94a3b8;
    --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.5), 0 0 15px -3px rgba(0, 240, 255, 0.1);
    --shadow-hover: 0 16px 36px -4px rgba(0, 240, 255, 0.25), 0 0 25px 2px rgba(255, 0, 127, 0.2);
    --mesh-glow-1: rgba(0, 240, 255, 0.12);
    --mesh-glow-2: rgba(255, 0, 127, 0.1);
}

/* --------------------------------------------------------------------------
   Theme: retro_arcade (Dark)
   -------------------------------------------------------------------------- */
body[data-theme="retro_arcade"],
body.theme-retro_arcade {
    --bg-main: #0d0221;
    --bg-surface: #1b053a;
    --bg-surface-trans: rgba(27, 5, 58, 0.95);
    --bg-card: #260852;
    --bg-card-hover: #380c74;
    --bg-footer: linear-gradient(180deg, #1b053a 0%, #0d0221 100%);
    --border-subtle: #4f17a0;
    --border-strong: #711de4;
    --border-glow: rgba(255, 0, 85, 0.35);
    --primary: #ff0055;
    --primary-hover: #e0004c;
    --primary-glow: rgba(255, 0, 85, 0.3);
    --secondary: #7928ca;
    --secondary-hover: #651eb1;
    --accent-emerald: #00f5d4;
    --accent-amber: #ffbb00;
    --accent-cyan: #7928ca;
    --text-main: #ffffff;
    --text-muted: #f1ebfc;
    --text-subtle: #cbb7e8;
    --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.55), 0 0 12px -2px rgba(255, 0, 85, 0.12);
    --shadow-hover: 0 16px 36px -4px rgba(255, 0, 85, 0.25), 0 0 22px 2px rgba(121, 40, 202, 0.22);
    --mesh-glow-1: rgba(255, 0, 85, 0.12);
    --mesh-glow-2: rgba(121, 40, 202, 0.12);
}

/* --------------------------------------------------------------------------
   Theme: emerald_forest (Dark)
   -------------------------------------------------------------------------- */
body[data-theme="emerald_forest"],
body.theme-emerald_forest {
    --bg-main: #062419;
    --bg-surface: #0a3827;
    --bg-surface-trans: rgba(10, 56, 39, 0.95);
    --bg-card: #0e4a34;
    --bg-card-hover: #146346;
    --bg-footer: linear-gradient(180deg, #0a3827 0%, #062419 100%);
    --border-subtle: #1f7956;
    --border-strong: #2ba475;
    --border-glow: rgba(16, 185, 129, 0.35);
    --primary: #10b981;
    --primary-hover: #059669;
    --primary-glow: rgba(16, 185, 129, 0.28);
    --secondary: #f59e0b;
    --secondary-hover: #d97706;
    --accent-emerald: #34d399;
    --accent-amber: #fbbf24;
    --accent-cyan: #06b6d4;
    --text-main: #ffffff;
    --text-muted: #d1fae5;
    --text-subtle: #a7f3d0;
    --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.5), 0 0 12px -2px rgba(16, 185, 129, 0.1);
    --shadow-hover: 0 16px 36px -4px rgba(16, 185, 129, 0.25), 0 0 20px 2px rgba(5, 150, 105, 0.2);
    --mesh-glow-1: rgba(16, 185, 129, 0.12);
    --mesh-glow-2: rgba(52, 211, 153, 0.08);
}

/* --------------------------------------------------------------------------
   Theme: midnight_amoled (Dark)
   -------------------------------------------------------------------------- */
body[data-theme="midnight_amoled"],
body.theme-midnight_amoled {
    --bg-main: #000000;
    --bg-surface: #0d0d0d;
    --bg-surface-trans: rgba(13, 13, 13, 0.96);
    --bg-card: #171717;
    --bg-card-hover: #262626;
    --bg-footer: linear-gradient(180deg, #0d0d0d 0%, #000000 100%);
    --border-subtle: #333333;
    --border-strong: #525252;
    --border-glow: rgba(59, 130, 246, 0.35);
    --primary: #3b82f6;
    --primary-hover: #2563eb;
    --primary-glow: rgba(59, 130, 246, 0.3);
    --secondary: #06b6d4;
    --secondary-hover: #0891b2;
    --accent-emerald: #10b981;
    --accent-amber: #f59e0b;
    --accent-cyan: #38bdf8;
    --text-main: #ffffff;
    --text-muted: #e5e5e5;
    --text-subtle: #a3a3a3;
    --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.8), 0 0 10px -2px rgba(59, 130, 246, 0.12);
    --shadow-hover: 0 16px 36px -4px rgba(59, 130, 246, 0.25), 0 0 20px 2px rgba(59, 130, 246, 0.2);
    --mesh-glow-1: rgba(59, 130, 246, 0.1);
    --mesh-glow-2: rgba(6, 182, 212, 0.08);
}

/* --------------------------------------------------------------------------
   Theme: sunset_horizon (Dark)
   -------------------------------------------------------------------------- */
body[data-theme="sunset_horizon"],
body.theme-sunset_horizon {
    --bg-main: #1a0b1e;
    --bg-surface: #281130;
    --bg-surface-trans: rgba(40, 17, 48, 0.95);
    --bg-card: #391845;
    --bg-card-hover: #4f2260;
    --bg-footer: linear-gradient(180deg, #281130 0%, #1a0b1e 100%);
    --border-subtle: #5e2672;
    --border-strong: #83369f;
    --border-glow: rgba(234, 88, 12, 0.35);
    --primary: #ea580c;
    --primary-hover: #c2410c;
    --primary-glow: rgba(234, 88, 12, 0.3);
    --secondary: #db2777;
    --secondary-hover: #be185d;
    --accent-emerald: #10b981;
    --accent-amber: #fbbf24;
    --accent-cyan: #f43f5e;
    --text-main: #ffffff;
    --text-muted: #ffe4e6;
    --text-subtle: #fecdd3;
    --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.55), 0 0 12px -2px rgba(234, 88, 12, 0.12);
    --shadow-hover: 0 16px 36px -4px rgba(234, 88, 12, 0.25), 0 0 22px 2px rgba(219, 39, 119, 0.2);
    --mesh-glow-1: rgba(234, 88, 12, 0.12);
    --mesh-glow-2: rgba(219, 39, 119, 0.1);
}

/* --------------------------------------------------------------------------
   Theme: royal_violet (Dark)
   -------------------------------------------------------------------------- */
body[data-theme="royal_violet"],
body.theme-royal_violet {
    --bg-main: #0b0616;
    --bg-surface: #150c2b;
    --bg-surface-trans: rgba(21, 12, 43, 0.95);
    --bg-card: #201242;
    --bg-card-hover: #301b63;
    --bg-footer: linear-gradient(180deg, #150c2b 0%, #0b0616 100%);
    --border-subtle: #45278c;
    --border-strong: #6639ce;
    --border-glow: rgba(139, 92, 246, 0.35);
    --primary: #8b5cf6;
    --primary-hover: #7c3aed;
    --primary-glow: rgba(139, 92, 246, 0.3);
    --secondary: #ec4899;
    --secondary-hover: #db2777;
    --accent-emerald: #10b981;
    --accent-amber: #fbbf24;
    --accent-cyan: #a855f7;
    --text-main: #ffffff;
    --text-muted: #f3e8ff;
    --text-subtle: #d8b4fe;
    --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.55), 0 0 12px -2px rgba(139, 92, 246, 0.12);
    --shadow-hover: 0 16px 36px -4px rgba(139, 92, 246, 0.25), 0 0 22px 2px rgba(236, 72, 153, 0.2);
    --mesh-glow-1: rgba(139, 92, 246, 0.12);
    --mesh-glow-2: rgba(236, 72, 153, 0.1);
}

/* --------------------------------------------------------------------------
   Theme: nordic_frost (Light)
   -------------------------------------------------------------------------- */
body[data-theme="nordic_frost"],
body.theme-nordic_frost {
    --bg-main: #f0f9ff;
    --bg-surface: #ffffff;
    --bg-surface-trans: rgba(255, 255, 255, 0.96);
    --bg-card: #ffffff;
    --bg-card-hover: #e0f2fe;
    --bg-footer: linear-gradient(180deg, #ffffff 0%, #f0f9ff 50%, #e0f2fe 100%);
    --border-subtle: #bae6fd;
    --border-strong: #7dd3fc;
    --border-glow: rgba(2, 132, 199, 0.25);
    --primary: #0284c7;
    --primary-hover: #0369a1;
    --primary-glow: rgba(2, 132, 199, 0.22);
    --secondary: #0d9488;
    --secondary-hover: #0f766e;
    --accent-emerald: #0d9488;
    --accent-amber: #d97706;
    --accent-cyan: #38bdf8;
    --text-main: #0c4a6e;
    --text-muted: #0369a1;
    --text-subtle: #0284c7;
    --shadow-card: 0 4px 16px -1px rgba(12, 74, 110, 0.08), 0 2px 6px -1px rgba(12, 74, 110, 0.04);
    --shadow-hover: 0 16px 32px -4px rgba(2, 132, 199, 0.18), 0 8px 16px -2px rgba(12, 74, 110, 0.06);
    --mesh-glow-1: rgba(2, 132, 199, 0.08);
    --mesh-glow-2: rgba(13, 148, 136, 0.06);
}

/* --------------------------------------------------------------------------
   Theme: crimson_velvet (Dark)
   -------------------------------------------------------------------------- */
body[data-theme="crimson_velvet"],
body.theme-crimson_velvet {
    --bg-main: #120509;
    --bg-surface: #220a12;
    --bg-surface-trans: rgba(34, 10, 18, 0.95);
    --bg-card: #330f1c;
    --bg-card-hover: #4a1629;
    --bg-footer: linear-gradient(180deg, #220a12 0%, #120509 100%);
    --border-subtle: #631c36;
    --border-strong: #8d284d;
    --border-glow: rgba(225, 29, 72, 0.35);
    --primary: #e11d48;
    --primary-hover: #be123c;
    --primary-glow: rgba(225, 29, 72, 0.3);
    --secondary: #fbbf24;
    --secondary-hover: #f59e0b;
    --accent-emerald: #10b981;
    --accent-amber: #fbbf24;
    --accent-cyan: #f43f5e;
    --text-main: #ffffff;
    --text-muted: #ffe4e6;
    --text-subtle: #fda4af;
    --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.55), 0 0 12px -2px rgba(225, 29, 72, 0.12);
    --shadow-hover: 0 16px 36px -4px rgba(225, 29, 72, 0.25), 0 0 22px 2px rgba(251, 191, 36, 0.2);
    --mesh-glow-1: rgba(225, 29, 72, 0.12);
    --mesh-glow-2: rgba(244, 63, 94, 0.08);
}

/* --------------------------------------------------------------------------
   Theme: sakura_blossom (Light)
   -------------------------------------------------------------------------- */
body[data-theme="sakura_blossom"],
body.theme-sakura_blossom {
    --bg-main: #fdf2f8;
    --bg-surface: #ffffff;
    --bg-surface-trans: rgba(255, 255, 255, 0.96);
    --bg-card: #ffffff;
    --bg-card-hover: #fce7f3;
    --bg-footer: linear-gradient(180deg, #ffffff 0%, #fdf2f8 50%, #fce7f3 100%);
    --border-subtle: #fbcfe8;
    --border-strong: #f472b6;
    --border-glow: rgba(236, 72, 153, 0.25);
    --primary: #ec4899;
    --primary-hover: #db2777;
    --primary-glow: rgba(236, 72, 153, 0.22);
    --secondary: #8b5cf6;
    --secondary-hover: #7c3aed;
    --accent-emerald: #10b981;
    --accent-amber: #f59e0b;
    --accent-cyan: #f472b6;
    --text-main: #500724;
    --text-muted: #831843;
    --text-subtle: #9d174d;
    --shadow-card: 0 4px 16px -1px rgba(131, 24, 67, 0.08), 0 2px 6px -1px rgba(131, 24, 67, 0.04);
    --shadow-hover: 0 16px 32px -4px rgba(236, 72, 153, 0.18), 0 8px 16px -2px rgba(131, 24, 67, 0.06);
    --mesh-glow-1: rgba(236, 72, 153, 0.08);
    --mesh-glow-2: rgba(139, 92, 246, 0.06);
}

/* --------------------------------------------------------------------------
   Theme: electric_ocean (Dark)
   -------------------------------------------------------------------------- */
body[data-theme="electric_ocean"],
body.theme-electric_ocean {
    --bg-main: #031525;
    --bg-surface: #06233d;
    --bg-surface-trans: rgba(6, 35, 61, 0.95);
    --bg-card: #0a3256;
    --bg-card-hover: #104675;
    --bg-footer: linear-gradient(180deg, #06233d 0%, #031525 100%);
    --border-subtle: #165c9c;
    --border-strong: #1f7ecd;
    --border-glow: rgba(6, 182, 212, 0.35);
    --primary: #06b6d4;
    --primary-hover: #0891b2;
    --primary-glow: rgba(6, 182, 212, 0.3);
    --secondary: #3b82f6;
    --secondary-hover: #2563eb;
    --accent-emerald: #10b981;
    --accent-amber: #f59e0b;
    --accent-cyan: #38bdf8;
    --text-main: #ffffff;
    --text-muted: #e0f2fe;
    --text-subtle: #bae6fd;
    --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.55), 0 0 12px -2px rgba(6, 182, 212, 0.12);
    --shadow-hover: 0 16px 36px -4px rgba(6, 182, 212, 0.25), 0 0 22px 2px rgba(59, 130, 246, 0.2);
    --mesh-glow-1: rgba(6, 182, 212, 0.12);
    --mesh-glow-2: rgba(59, 130, 246, 0.1);
}

/* --------------------------------------------------------------------------
   Theme: golden_luxury (Dark)
   -------------------------------------------------------------------------- */
body[data-theme="golden_luxury"],
body.theme-golden_luxury {
    --bg-main: #0f0e0c;
    --bg-surface: #1c1914;
    --bg-surface-trans: rgba(28, 25, 20, 0.95);
    --bg-card: #29241b;
    --bg-card-hover: #3d3628;
    --bg-footer: linear-gradient(180deg, #1c1914 0%, #0f0e0c 100%);
    --border-subtle: #574b37;
    --border-strong: #7c6b4e;
    --border-glow: rgba(217, 119, 6, 0.35);
    --primary: #d97706;
    --primary-hover: #b45309;
    --primary-glow: rgba(217, 119, 6, 0.3);
    --secondary: #fbbf24;
    --secondary-hover: #f59e0b;
    --accent-emerald: #10b981;
    --accent-amber: #fbbf24;
    --accent-cyan: #eab308;
    --text-main: #ffffff;
    --text-muted: #fef3c7;
    --text-subtle: #fde68a;
    --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.6), 0 0 12px -2px rgba(217, 119, 6, 0.12);
    --shadow-hover: 0 16px 36px -4px rgba(217, 119, 6, 0.25), 0 0 22px 2px rgba(251, 191, 36, 0.2);
    --mesh-glow-1: rgba(217, 119, 6, 0.12);
    --mesh-glow-2: rgba(251, 191, 36, 0.08);
}

/* --------------------------------------------------------------------------
   Theme: vintage_coffee (Dark)
   -------------------------------------------------------------------------- */
body[data-theme="vintage_coffee"],
body.theme-vintage_coffee {
    --bg-main: #17120e;
    --bg-surface: #261e17;
    --bg-surface-trans: rgba(38, 30, 23, 0.95);
    --bg-card: #382c22;
    --bg-card-hover: #524032;
    --bg-footer: linear-gradient(180deg, #261e17 0%, #17120e 100%);
    --border-subtle: #6e5441;
    --border-strong: #937157;
    --border-glow: rgba(180, 83, 9, 0.35);
    --primary: #b45309;
    --primary-hover: #92400e;
    --primary-glow: rgba(180, 83, 9, 0.3);
    --secondary: #d97706;
    --secondary-hover: #b45309;
    --accent-emerald: #10b981;
    --accent-amber: #ca8a04;
    --accent-cyan: #d97706;
    --text-main: #ffffff;
    --text-muted: #fef3c7;
    --text-subtle: #fde68a;
    --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.55), 0 0 12px -2px rgba(180, 83, 9, 0.12);
    --shadow-hover: 0 16px 36px -4px rgba(180, 83, 9, 0.25), 0 0 22px 2px rgba(217, 119, 6, 0.2);
    --mesh-glow-1: rgba(180, 83, 9, 0.12);
    --mesh-glow-2: rgba(217, 119, 6, 0.08);
}

/* --------------------------------------------------------------------------
   Theme: toxic_biohazard (Dark)
   -------------------------------------------------------------------------- */
body[data-theme="toxic_biohazard"],
body.theme-toxic_biohazard {
    --bg-main: #091104;
    --bg-surface: #102008;
    --bg-surface-trans: rgba(16, 32, 8, 0.95);
    --bg-card: #17300c;
    --bg-card-hover: #244b13;
    --bg-footer: linear-gradient(180deg, #102008 0%, #091104 100%);
    --border-subtle: #346b1b;
    --border-strong: #4e9f29;
    --border-glow: rgba(132, 204, 22, 0.35);
    --primary: #84cc16;
    --primary-hover: #65a30d;
    --primary-glow: rgba(132, 204, 22, 0.3);
    --secondary: #eab308;
    --secondary-hover: #ca8a04;
    --accent-emerald: #22c55e;
    --accent-amber: #eab308;
    --accent-cyan: #84cc16;
    --text-main: #ffffff;
    --text-muted: #ecfccb;
    --text-subtle: #bef264;
    --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.6), 0 0 12px -2px rgba(132, 204, 22, 0.12);
    --shadow-hover: 0 16px 36px -4px rgba(132, 204, 22, 0.25), 0 0 22px 2px rgba(234, 179, 8, 0.2);
    --mesh-glow-1: rgba(132, 204, 22, 0.12);
    --mesh-glow-2: rgba(34, 197, 94, 0.08);
}

/* --------------------------------------------------------------------------
   Theme: dracula_twilight (Dark)
   -------------------------------------------------------------------------- */
body[data-theme="dracula_twilight"],
body.theme-dracula_twilight {
    --bg-main: #1e1f29;
    --bg-surface: #282a36;
    --bg-surface-trans: rgba(40, 42, 54, 0.95);
    --bg-card: #343746;
    --bg-card-hover: #474a5e;
    --bg-footer: linear-gradient(180deg, #282a36 0%, #1e1f29 100%);
    --border-subtle: #575b73;
    --border-strong: #797f9f;
    --border-glow: rgba(189, 147, 249, 0.35);
    --primary: #bd93f9;
    --primary-hover: #a36df7;
    --primary-glow: rgba(189, 147, 249, 0.3);
    --secondary: #ff79c6;
    --secondary-hover: #e058a5;
    --accent-emerald: #50fa7b;
    --accent-amber: #f1fa8c;
    --accent-cyan: #8be9fd;
    --text-main: #ffffff;
    --text-muted: #f8f8f2;
    --text-subtle: #c8c8d0;
    --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.55), 0 0 12px -2px rgba(189, 147, 249, 0.12);
    --shadow-hover: 0 16px 36px -4px rgba(189, 147, 249, 0.25), 0 0 22px 2px rgba(255, 121, 198, 0.2);
    --mesh-glow-1: rgba(189, 147, 249, 0.12);
    --mesh-glow-2: rgba(255, 121, 198, 0.08);
}

/* --------------------------------------------------------------------------
   Theme: minimalist_slate (Dark)
   -------------------------------------------------------------------------- */
body[data-theme="minimalist_slate"],
body.theme-minimalist_slate {
    --bg-main: #0f172a;
    --bg-surface: #1e293b;
    --bg-surface-trans: rgba(30, 41, 59, 0.95);
    --bg-card: #334155;
    --bg-card-hover: #475569;
    --bg-footer: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    --border-subtle: #475569;
    --border-strong: #64748b;
    --border-glow: rgba(14, 165, 233, 0.35);
    --primary: #0ea5e9;
    --primary-hover: #0284c7;
    --primary-glow: rgba(14, 165, 233, 0.3);
    --secondary: #94a3b8;
    --secondary-hover: #64748b;
    --accent-emerald: #10b981;
    --accent-amber: #f59e0b;
    --accent-cyan: #38bdf8;
    --text-main: #ffffff;
    --text-muted: #f1f5f9;
    --text-subtle: #cbd5e1;
    --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.55), 0 0 12px -2px rgba(14, 165, 233, 0.12);
    --shadow-hover: 0 16px 36px -4px rgba(14, 165, 233, 0.25), 0 0 22px 2px rgba(148, 163, 184, 0.2);
    --mesh-glow-1: rgba(14, 165, 233, 0.1);
    --mesh-glow-2: rgba(148, 163, 184, 0.06);
}