/* ========================================
   PROFESSIONAL THEME SYSTEM - 10 TEMPLATES
   ======================================== */

/* THEME 1: CORPORATE - Professional Lines & Grid */
body.theme-corporate {
    background: linear-gradient(to right, #f8fafc 0%, #e2e8f0 100%);
    position: relative;
}

body.theme-corporate::before {
    content: '';
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(0deg, transparent 24%, rgba(37, 99, 235, 0.03) 25%, rgba(37, 99, 235, 0.03) 26%, transparent 27%, transparent 74%, rgba(37, 99, 235, 0.03) 75%, rgba(37, 99, 235, 0.03) 76%, transparent 77%, transparent),
        linear-gradient(90deg, transparent 24%, rgba(37, 99, 235, 0.03) 25%, rgba(37, 99, 235, 0.03) 26%, transparent 27%, transparent 74%, rgba(37, 99, 235, 0.03) 75%, rgba(37, 99, 235, 0.03) 76%, transparent 77%, transparent);
    background-size: 50px 50px;
    pointer-events: none;
    z-index: 0;
}

body.theme-corporate .modern-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-left: 4px solid #2563eb;
}

/* THEME 2: MODERN - Gradient Waves */
body.theme-modern {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
}

body.theme-modern::before {
    content: '';
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='0.05' d='M0,96L48,112C96,128,192,160,288,181.3C384,203,480,213,576,197.3C672,181,768,139,864,128C960,117,1056,139,1152,154.7C1248,171,1344,181,1392,186.7L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
    background-size: cover;
    background-repeat: repeat-y;
    pointer-events: none;
    z-index: 0;
}

body.theme-modern .modern-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    box-shadow: 0 20px 60px rgba(102, 126, 234, 0.2);
}

body.theme-modern .modern-card h4,
body.theme-modern .modern-card h3,
body.theme-modern .modern-card h2 {
    color: #ffffff !important;
}

body.theme-modern .modern-card p,
body.theme-modern .modern-card .text-muted,
body.theme-modern .modern-card .text-secondary {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* THEME 3: TECH - Circuit Board Pattern */
body.theme-tech {
    background: #0f172a;
    position: relative;
}

body.theme-tech::before {
    content: '';
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #0f172a;
    background-image:
        linear-gradient(rgba(6, 182, 212, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(6, 182, 212, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
    z-index: 0;
}

body.theme-tech .modern-card {
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(6, 182, 212, 0.4);
    color: #e2e8f0;
}

body.theme-tech .modern-card h4,
body.theme-tech .modern-card h3,
body.theme-tech .modern-card h2 {
    color: #06b6d4 !important;
}

body.theme-tech .modern-card p,
body.theme-tech .modern-card .text-muted {
    color: #cbd5e1 !important;
}

body.theme-tech .section-title,
body.theme-tech h1,
body.theme-tech h2,
body.theme-tech h3,
body.theme-tech h4 {
    color: #06b6d4 !important;
}

body.theme-tech {
    color: #cbd5e1;
}

/* THEME 4: MINIMAL - Clean Dots */
body.theme-minimal {
    background: #ffffff;
    position: relative;
}

body.theme-minimal::before {
    content: '';
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle, #e5e7eb 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
    z-index: 0;
}

body.theme-minimal .modern-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* THEME 5: CREATIVE - Colorful Shapes */
body.theme-creative {
    background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
    position: relative;
}

body.theme-creative::before {
    content: '';
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

body.theme-creative .modern-card {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 24px;
    color: #ffffff;
    box-shadow: 0 25px 50px rgba(236, 72, 153, 0.2);
}

/* THEME 6: ELEGANT - Subtle Luxury */
body.theme-elegant {
    background: linear-gradient(to bottom, #faf5ff 0%, #f3e8ff 100%);
    position: relative;
}

body.theme-elegant::before {
    content: '';
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23a855f7' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

body.theme-elegant .modern-card {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 40px rgba(168, 85, 247, 0.15);
    border-top: 3px solid #a855f7;
}

/* THEME 7: DYNAMIC - Energy Lines */
body.theme-dynamic {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #ea580c 100%);
    position: relative;
}

body.theme-dynamic::before {
    content: '';
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.1) 10px, rgba(255, 255, 255, 0.1) 20px),
        repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.05) 10px, rgba(255, 255, 255, 0.05) 20px);
    pointer-events: none;
    z-index: 0;
}

body.theme-dynamic .modern-card {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transform-style: preserve-3d;
    color: #ffffff;
    box-shadow: 0 20px 50px rgba(245, 158, 11, 0.3);
}

/* THEME 8: NATURE - Organic Patterns */
body.theme-nature {
    background: linear-gradient(to bottom, #d1fae5 0%, #a7f3d0 100%);
    position: relative;
}

body.theme-nature::before {
    content: '';
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2310b981' fill-opacity='0.1'%3E%3Cpath d='M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 10c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10S0 25.523 0 20s4.477-10 10-10zm10 8c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm40 40c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

body.theme-nature .modern-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.2);
}

/* THEME 9: INDUSTRIAL - Metal Grid */
body.theme-industrial {
    background: #1f2937;
    position: relative;
}

body.theme-industrial::before {
    content: '';
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(107, 114, 128, 0.3) 2px, transparent 2px),
        linear-gradient(90deg, rgba(107, 114, 128, 0.3) 2px, transparent 2px),
        linear-gradient(rgba(107, 114, 128, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(107, 114, 128, 0.1) 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    pointer-events: none;
    z-index: 0;
}

body.theme-industrial .modern-card {
    background: rgba(31, 41, 55, 0.9);
    backdrop-filter: blur(10px);
    border: 2px solid #6b7280;
    color: #e5e7eb;
}

body.theme-industrial .modern-card h4,
body.theme-industrial .modern-card h3,
body.theme-industrial .modern-card h2 {
    color: #9ca3af !important;
}

body.theme-industrial .modern-card p,
body.theme-industrial .modern-card .text-muted {
    color: #d1d5db !important;
}

body.theme-industrial .section-title,
body.theme-industrial h1,
body.theme-industrial h2,
body.theme-industrial h3,
body.theme-industrial h4 {
    color: #9ca3af !important;
}

body.theme-industrial {
    color: #d1d5db;
}

/* THEME 10: STARTUP - Fresh & Young */
body.theme-startup {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #7dd3fc 100%);
    position: relative;
}

body.theme-startup::before {
    content: '';
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(147, 197, 253, 0.1) 0%, transparent 50%),
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%233b82f6' fill-opacity='0.08' fill-rule='evenodd'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

body.theme-startup .modern-card {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(59, 130, 246, 0.2);
    border-bottom: 4px solid #3b82f6;
}

/* ========================================
   COMPREHENSIVE THEME ADJUSTMENTS
   ======================================== */

/* Common Enhancements for All Themes */
body[class*="theme-"] main {
    position: relative;
    z-index: 1;
}

body[class*="theme-"] .navbar {
    position: relative;
    z-index: 100;
}

/* Ensure cards stay above patterns */
body[class*="theme-"] .modern-card,
body[class*="theme-"] .card {
    position: relative;
    z-index: 2;
}

/* ========================================
   THEME 1: CORPORATE - Navbar & Text
   ======================================== */
body.theme-corporate .navbar {
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%) !important;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.3);
}

body.theme-corporate .navbar-brand,
body.theme-corporate .nav-link {
    color: #ffffff !important;
}

body.theme-corporate .nav-link:hover {
    color: #bfdbfe !important;
}

/* ========================================
   THEME 2: MODERN - Navbar & Text
   ======================================== */
body.theme-modern .navbar {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    box-shadow: 0 4px 20px rgba(118, 75, 162, 0.4);
}

body.theme-modern .navbar-brand,
body.theme-modern .nav-link {
    color: #ffffff !important;
}

body.theme-modern .nav-link:hover {
    color: #e9d5ff !important;
}

body.theme-modern,
body.theme-modern .section-title,
body.theme-modern h1,
body.theme-modern h2,
body.theme-modern h3,
body.theme-modern h4,
body.theme-modern p,
body.theme-modern .lead {
    color: #ffffff !important;
}

body.theme-modern .modern-card {
    color: #1e293b;
}

/* ========================================
   THEME 3: TECH - Navbar & Text (DARK)
   ======================================== */
body.theme-tech .navbar {
    background: rgba(15, 23, 42, 0.98) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(6, 182, 212, 0.3);
}

body.theme-tech .navbar-brand,
body.theme-tech .nav-link {
    color: #06b6d4 !important;
}

body.theme-tech .nav-link:hover {
    color: #67e8f9 !important;
}

body.theme-tech,
body.theme-tech p,
body.theme-tech .lead,
body.theme-tech .text-secondary,
body.theme-tech .text-muted {
    color: #cbd5e1 !important;
}

body.theme-tech footer {
    background: rgba(15, 23, 42, 0.95);
    color: #94a3b8;
}

/* ========================================
   THEME 4: MINIMAL - Navbar & Text
   ======================================== */
body.theme-minimal .navbar {
    background: #ffffff !important;
    border-bottom: 2px solid #e5e7eb;
}

body.theme-minimal .navbar-brand {
    color: #1f2937 !important;
}

body.theme-minimal .nav-link {
    color: #4b5563 !important;
}

body.theme-minimal .nav-link:hover {
    color: #1f2937 !important;
}

/* ========================================
   THEME 5: CREATIVE - Navbar & Text
   ======================================== */
body.theme-creative .navbar {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
    box-shadow: 0 4px 20px rgba(236, 72, 153, 0.4);
}

body.theme-creative .navbar-brand,
body.theme-creative .nav-link {
    color: #ffffff !important;
}

body.theme-creative .nav-link:hover {
    color: #fce7f3 !important;
}

body.theme-creative,
body.theme-creative .section-title,
body.theme-creative h1,
body.theme-creative h2,
body.theme-creative h3,
body.theme-creative h4,
body.theme-creative p,
body.theme-creative .lead {
    color: #ffffff !important;
}

body.theme-creative .modern-card {
    color: #1e293b;
}

/* ========================================
   THEME 6: ELEGANT - Navbar & Text
   ======================================== */
body.theme-elegant .navbar {
    background: linear-gradient(135deg, #a855f7 0%, #c084fc 100%) !important;
    box-shadow: 0 4px 20px rgba(168, 85, 247, 0.3);
}

body.theme-elegant .navbar-brand,
body.theme-elegant .nav-link {
    color: #ffffff !important;
}

body.theme-elegant .nav-link:hover {
    color: #f3e8ff !important;
}

body.theme-elegant footer {
    background: #faf5ff;
    color: #7c3aed;
}

/* ========================================
   THEME 7: DYNAMIC - Navbar & Text
   ======================================== */
body.theme-dynamic .navbar {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%) !important;
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.4);
}

body.theme-dynamic .navbar-brand,
body.theme-dynamic .nav-link {
    color: #ffffff !important;
}

body.theme-dynamic .nav-link:hover {
    color: #fed7aa !important;
}

body.theme-dynamic,
body.theme-dynamic .section-title,
body.theme-dynamic h1,
body.theme-dynamic h2,
body.theme-dynamic h3,
body.theme-dynamic h4,
body.theme-dynamic p,
body.theme-dynamic .lead {
    color: #ffffff !important;
}

body.theme-dynamic .modern-card {
    color: #1e293b;
}

/* ========================================
   THEME 8: NATURE - Navbar & Text
   ======================================== */
body.theme-nature .navbar {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3);
}

body.theme-nature .navbar-brand,
body.theme-nature .nav-link {
    color: #ffffff !important;
}

body.theme-nature .nav-link:hover {
    color: #d1fae5 !important;
}

/* ========================================
   THEME 9: INDUSTRIAL - Navbar & Text (DARK)
   ======================================== */
body.theme-industrial .navbar {
    background: rgba(31, 41, 55, 0.98) !important;
    backdrop-filter: blur(10px);
    border-bottom: 2px solid #4b5563;
}

body.theme-industrial .navbar-brand,
body.theme-industrial .nav-link {
    color: #9ca3af !important;
}

body.theme-industrial .nav-link:hover {
    color: #e5e7eb !important;
}

body.theme-industrial,
body.theme-industrial p,
body.theme-industrial .lead,
body.theme-industrial .text-secondary,
body.theme-industrial .text-muted {
    color: #d1d5db !important;
}

body.theme-industrial footer {
    background: rgba(31, 41, 55, 0.95);
    color: #9ca3af;
}

/* ========================================
   THEME 10: STARTUP - Navbar & Text
   ======================================== */
body.theme-startup .navbar {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
}

body.theme-startup .navbar-brand,
body.theme-startup .nav-link {
    color: #ffffff !important;
}

body.theme-startup .nav-link:hover {
    color: #dbeafe !important;
}

/* ========================================
   GLOBAL TEXT FIXES FOR ALL THEMES
   ======================================== */

/* Ensure section backgrounds in dark themes */
body.theme-tech .container,
body.theme-industrial .container {
    position: relative;
    z-index: 2;
}

/* Fix carousel captions for dark themes */
body.theme-tech .carousel-caption,
body.theme-industrial .carousel-caption {
    color: #ffffff !important;
}

body.theme-tech .carousel-caption h2,
body.theme-tech .carousel-caption p,
body.theme-industrial .carousel-caption h2,
body.theme-industrial .carousel-caption p {
    color: #ffffff !important;
}

/* Ensure minimal theme footer */
body.theme-minimal footer {
    background: #f8fafc;
    color: #64748b;
    border-top: 2px solid #e5e7eb;
}

/* ========================================
   NEW THEMES (11-20)
   ======================================== */

/* THEME 11: CYBER BLACK - Neon & Dark */
body.theme-cyberblack {
    background: #050505;
    position: relative;
    color: #00ff41;
}

body.theme-cyberblack::before {
    content: '';
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(0, 255, 65, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 65, 0.1) 1px, transparent 1px);
    background-size: 30px 30px;
    z-index: 0;
    pointer-events: none;
}

body.theme-cyberblack .modern-card {
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #00ff41;
    box-shadow: 0 0 15px rgba(0, 255, 65, 0.2);
    color: #e0e0e0;
}

body.theme-cyberblack .section-title {
    color: #00ff41 !important;
    text-shadow: 0 0 10px rgba(0, 255, 65, 0.5);
}

/* THEME 12: WHATSAPP STYLE - Beige Chat Pattern */
body.theme-whatsapplike {
    background: #efe7dd;
    position: relative;
}

body.theme-whatsapplike::before {
    content: '';
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.4;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20,20 L30,20 L30,30 L20,30 Z M50,50 Circle r=5 M80,20 L90,30 M10,80 L20,90' stroke='%235c6b70' fill='none' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 150px 150px;
    z-index: 0;
    pointer-events: none;
}

body.theme-whatsapplike .modern-card {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

/* THEME 13: BLUE WAVE - Oceanic */
body.theme-bluewave {
    background: linear-gradient(180deg, #e0f2fe 0%, #0ea5e9 100%);
    position: relative;
}

body.theme-bluewave::before {
    content: '';
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-radial-gradient(circle at 0 0, transparent 0, #e0f2fe 10px), repeating-linear-gradient(#0ea5e955, #0ea5e9);
    opacity: 0.1;
    z-index: 0;
    pointer-events: none;
}

body.theme-bluewave .modern-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    border: none;
    box-shadow: 0 10px 30px rgba(14, 165, 233, 0.2);
}

/* THEME 14: RETRO GRID - Synthwave */
body.theme-retrogrid {
    background: #210038;
    position: relative;
    color: #ff00ff;
}

body.theme-retrogrid::before {
    content: '';
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(to bottom, transparent 50%, rgba(255, 0, 255, 0.2) 50%),
        linear-gradient(90deg, transparent 50%, rgba(0, 255, 255, 0.2) 50%);
    background-size: 50px 50px;
    transform: perspective(500px) rotateX(20deg);
    z-index: 0;
    pointer-events: none;
}

body.theme-retrogrid .modern-card {
    background: rgba(33, 0, 56, 0.9);
    border: 2px solid #00ffff;
    box-shadow: 5px 5px 0 #ff00ff;
    color: #ffffff;
}

/* THEME 15: GRADIENT MESH - Soft Aura */
body.theme-gradientmesh {
    background: #ff9a9e;
    background-image: linear-gradient(0deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
    position: relative;
}

body.theme-gradientmesh::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.4), transparent);
    z-index: 0;
    pointer-events: none;
}

body.theme-gradientmesh .modern-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
}

/* THEME 16: DOTS PATTERN - Playful */
body.theme-dotspattern {
    background: #fdf2f8;
    position: relative;
}

body.theme-dotspattern::before {
    content: '';
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(#db2777 20%, transparent 20%);
    background-size: 20px 20px;
    opacity: 0.1;
    z-index: 0;
    pointer-events: none;
}

body.theme-dotspattern .modern-card {
    background: #ffffff;
    border: 2px dashed #db2777;
    border-radius: 15px;
}

/* THEME 17: PAPER TEXTURE - Clean */
body.theme-papertexture {
    background: #fffbef;
    position: relative;
    color: #4b5563;
}

body.theme-papertexture .modern-card {
    background: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #e5e7eb;
}

/* THEME 18: NIGHT CITY - Urban */
body.theme-nightcity {
    background: linear-gradient(to bottom, #0f2027, #203a43, #2c5364);
    position: relative;
    color: #fff;
}

body.theme-nightcity .modern-card {
    background: rgba(15, 32, 39, 0.8);
    backdrop-filter: blur(10px);
    border-top: 4px solid #f59e0b;
    color: #fff;
}

body.theme-nightcity .modern-card .text-muted {
    color: #cbd5e1 !important;
}

/* THEME 19: GEOMETRIC - Dark Shapes */
body.theme-geometric {
    background: #111827;
    position: relative;
    overflow-x: hidden;
}

body.theme-geometric::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(30deg, #1f2937 12%, transparent 12.5%, transparent 87%, #1f2937 87.5%, #1f2937),
        linear-gradient(150deg, #1f2937 12%, transparent 12.5%, transparent 87%, #1f2937 87.5%, #1f2937),
        linear-gradient(30deg, #1f2937 12%, transparent 12.5%, transparent 87%, #1f2937 87.5%, #1f2937),
        linear-gradient(150deg, #1f2937 12%, transparent 12.5%, transparent 87%, #1f2937 87.5%, #1f2937),
        linear-gradient(60deg, #374151 25%, transparent 25.5%, transparent 75%, #374151 75%, #374151),
        linear-gradient(60deg, #374151 25%, transparent 25.5%, transparent 75%, #374151 75%, #374151);
    background-size: 80px 140px;
    background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
    opacity: 0.1;
    z-index: 0;
    pointer-events: none;
}

body.theme-geometric .modern-card {
    background: rgba(31, 41, 55, 0.9);
    border: 1px solid #374151;
    color: #f3f4f6;
}

/* THEME 20: CIRCUIT BLUE - Professional Tech */
body.theme-circuitblue {
    background: #002b36;
    position: relative;
}

body.theme-circuitblue::before {
    content: '';
    position: fixed;
    width: 100%;
    height: 100%;
    top: 80px;
    background-image: radial-gradient(#2aa198 15%, transparent 16%),
        radial-gradient(#2aa198 15%, transparent 16%);
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px;
    opacity: 0.05;
    z-index: 0;
    pointer-events: none;
}

body.theme-circuitblue .modern-card {
    background: #073642;
    border: 1px solid #2aa198;
    color: #eee8d5;
}

body.theme-circuitblue h1,
body.theme-circuitblue h2,
body.theme-circuitblue h3 {
    color: #2aa198;
}