/* Infinite Replayability - 2026 Restorative Design System */
/* Implementing APCA-compliant contrast, muted foundations, and eye-comfort standards */

/* ============================================
   COLOR PALETTE & DESIGN TOKENS - 2026 VISION
   Cloud Dancer neutrals + Electric Cyan accents
   Halation-mitigated dark mode + Glassmorphism
   ============================================ */

:root {
    /* =============================================
       DARK MODE - "Sophisticated Mood" Theme
       True Charcoal foundation with Surface hierarchy
       APCA-optimized for reduced eye strain
       ============================================= */
    
    /* Background Colors - Charcoal Hierarchy (NO pure black) */
    --bg-primary: #0B0D10;      /* True Charcoal - base level */
    --bg-secondary: #151A21;    /* Surface Grey - mid level (cards) */
    --bg-tertiary: #1C1F26;     /* Elevated surface */
    --surface: #151A21;         /* Cards, containers */
    --surface-elevated: #1E2229; /* Modals, tooltips */
    
    /* Accent Colors - Electric Cyan + Phygital Jewel Tones */
    --accent-primary: #40E0FF;  /* Electric Cyan - primary CTA */
    --accent-primary-hover: #5CE8FF;
    --accent-primary-active: #33B8D4;
    --accent-secondary: #00D4AA; /* Plasma Teal */
    --accent-crimson: #E07A5F;  /* Vibrant Terracotta */
    --accent-orange: #FF6A3D;   /* Ember/Neon Shock */
    --accent-gold: #D4A017;     /* Royal Gold/Brass */
    --accent-silver: #9CA3AF;
    --accent-purple: #B9A7FF;   /* Holo Lilac */
    --accent-indigo: #6366F1;
    --accent-teal: #00D4AA;
    --accent-hover: #5CE8FF;
    --accent-emerald: #004D61;  /* Deep Emerald */
    --accent-copper: #B87333;
    
    /* Text Colors - Halation-mitigated (NO pure white) */
    --text-primary: #E9EEF5;    /* Off-white - reduced luminosity */
    --text-secondary: #B8C0CC;
    --text-muted: #6B7280;
    
    /* Border & Effects - Hairline treatments */
    --border-color: #273140;    /* Subtle definition */
    --border-glass: rgba(255, 255, 255, 0.08);
    --glow-primary: rgba(64, 224, 255, 0.25);
    --glow-gold: rgba(212, 160, 23, 0.35);
    
    /* Multi-layer Micro-Shadows - Natural environmental light */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.03);
    --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05);
    --shadow-glow: 0 0 30px rgba(64, 224, 255, 0.15), 0 0 60px rgba(64, 224, 255, 0.05);
    
    /* Map & Dungeon Domain Colors */
    --map-preview-bg: #95a5a6;
    --map-title-color: #4A3F5C;
    --map-subtitle-color: #666666;
    --map-footer-color: #999999;
    --map-footer-border: #e0e0e0;
    --map-parchment: #f5f5dc;
    --map-wall-dungeon: #8b4513;
    --map-wall-cave: #696969;
    --map-wall-temple: #daa520;
    --map-door: #a0522d;
    --map-treasure: #ffd700;
    --map-trap: #ff4500;
    --map-trap-crimson: #dc143c;
    --map-entrance: #2ecc71;
    --map-lair: #e67e22;
    --map-puzzle: #9b59b6;
    --map-rest: #3498db;
    --map-stairs: #4a4a4a;
    --map-floor: #BBBBBB;
    --map-corridor: #d4c0a0;
    --map-floor-gradient-start: #f0dcc0;
    --map-floor-gradient-end: #d4b890;
    --map-wall-dark: #2a2a2a;
    --map-wall-dark-end: #0d0d0d;
    --map-wall-iso: #555555;
    --map-iso-stairs: #CCCCCC;
    --map-iso-trap: #990000;
    
    /* Map Container Colors */
    --map-container-bg: #f8f9fa;
    --map-container-border: #dddddd;
    --map-info-border-square: #28a745;
    --map-info-border-iso: #1e88e5;
    --map-theme-temple: #800080;
    --map-theme-dungeon: #444444;
    
    /* Generator Card Theme Colors - 2026 Palette */
    --gen-plot-hooks: #0891B2;
    --gen-plot-hooks-end: #40E0FF;
    --gen-npc: #059669;
    --gen-npc-end: #34D399;
    --gen-dungeon: #B45309;
    --gen-dungeon-end: #F59E0B;
    --gen-tactical: #7C3AED;
    --gen-tactical-end: #A78BFA;
    --gen-poi: #DC2626;
    --gen-poi-end: #F87171;
    --gen-location: #0D9488;
    --gen-location-end: #5EEAD4;
    --gen-character: #1E3A5F;
    --gen-character-end: #3B82F6;
    
    /* UI Element Colors */
    --input-bg: rgba(50, 50, 50, 0.5);
    --input-bg-focus: rgba(50, 50, 50, 0.7);
    --input-border: #444444;
    --label-color: #cccccc;
    --footer-text: #888888;
    
    /* Glass Morphism - Liquid Glass 2026 */
    --glass-bg: rgba(21, 26, 33, 0.75);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-blur: 20px;
    --glass-refraction: rgba(64, 224, 255, 0.03);
    
    /* Spacing (8px baseline grid) */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    
    /* Typography Scale - 2026 Grotesque + Editorial Serif Pairing */
    --font-heading: 'Work Sans', 'Inter', system-ui, sans-serif;  /* Grotesque for UI */
    --font-body: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;  /* Editorial Serif */
    --font-ui: 'Work Sans', 'Inter', system-ui, sans-serif;  /* Navigation & components */
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    
    /* APCA-optimized type scale */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 2.5rem;
    
    /* Dark mode typography adjustments for halation mitigation */
    --font-weight-body: 350;      /* Lighter weight in dark mode */
    --letter-spacing-body: 0.015em;  /* Slight tracking increase */
    --line-height-body: 1.7;
    
    /* Transition timing - smooth, purposeful */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================
   LIGHT MODE - "Cloud Dancer" Theme (2026)
   Restorative neutrals with warm undertones
   APCA-optimized for reduced glare and eye comfort
   ============================================= */
[data-theme="light"] {
    /* Background Colors - Cloud Dancer foundation */
    --bg-primary: #F0EEE9;      /* Cloud Dancer - Pantone 2026 */
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #F7F3EE;     /* Warm Paper */
    --surface: #FFFFFF;
    --surface-elevated: #FDFCFA;
    
    /* Text Colors - Slate UI for APCA Lc 75+ body text */
    --text-primary: #2B2F36;    /* Slate UI - high readability */
    --text-secondary: #4A5568;
    --text-muted: #718096;
    
    /* Accent Colors - Deeper Electric Cyan for light mode */
    --accent-primary: #0891B2;  /* Darker cyan for light backgrounds */
    --accent-primary-hover: #0E7490;
    --accent-primary-active: #155E75;
    --accent-secondary: #0D9488; /* Teal variant */
    --accent-emerald: #059669;
    --accent-copper: #B87333;
    
    /* Border & Effects - Subtle warm borders */
    --border-color: rgba(43, 47, 54, 0.12);
    --border-glass: rgba(43, 47, 54, 0.06);
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(43, 47, 54, 0.08);
    --glass-blur: 16px;
    --glow-primary: rgba(8, 145, 178, 0.15);
    --glow-gold: rgba(212, 160, 23, 0.2);
    
    /* Shadows - Warm-tinted for cohesion */
    --shadow-sm: 0 1px 3px rgba(43, 47, 54, 0.06), 0 1px 2px rgba(43, 47, 54, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(43, 47, 54, 0.08), 0 2px 4px -1px rgba(43, 47, 54, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(43, 47, 54, 0.1), 0 4px 6px -2px rgba(43, 47, 54, 0.06);
    --shadow-glow: 0 0 25px rgba(8, 145, 178, 0.12);
    
    /* Input Elements */
    --input-bg: rgba(255, 255, 255, 0.95);
    --input-bg-focus: rgba(255, 255, 255, 1);
    --input-border: #E2E8F0;
    --label-color: #4A5568;
    
    /* Light mode typography - slightly heavier for better contrast */
    --font-weight-body: 400;
    --letter-spacing-body: 0.01em;
    --line-height-body: 1.65;
}

/* ============================================
   GLOBAL STYLES
   ============================================ */

* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--font-weight-body);
    letter-spacing: var(--letter-spacing-body);
    line-height: var(--line-height-body);
    color: var(--text-primary);
    background: var(--bg-primary);
    margin: 0;
    padding: 0;
    transition: background-color var(--transition-base), color var(--transition-base);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Subtle parchment texture overlay */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" /></filter><rect width="100" height="100" filter="url(%23noise)" opacity="0.03"/></svg>');
    opacity: 0.03;
    pointer-events: none;
    z-index: -1;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: var(--space-md);
    color: var(--text-primary);
}

h1 {
    font-size: var(--text-4xl);
    font-weight: 800;
    letter-spacing: -0.02em;
}

h2 {
    font-size: var(--text-3xl);
    font-weight: 700;
}

h3 {
    font-size: var(--text-2xl);
    font-weight: 700;
}

h4 {
    font-size: var(--text-xl);
    font-weight: 600;
}

p {
    margin-bottom: var(--space-sm);
    color: var(--text-secondary);
}

a {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--accent-primary-hover);
}

code, .code {
    font-family: var(--font-mono);
    background: var(--bg-tertiary);
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-size: 0.9em;
}

/* Bootstrap Text Utility Overrides for Proper Contrast */
.text-primary {
    color: var(--accent-primary) !important;
}

.text-secondary {
    color: var(--text-secondary) !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

.text-light {
    color: var(--text-primary) !important;
}

.lead {
    color: var(--text-secondary);
    font-size: 1.15rem;
    font-weight: 400;
}

/* Ensure headings in dark containers have proper contrast */
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.modal h1, .modal h2, .modal h3, .modal h4, .modal h5, .modal h6,
.offcanvas h1, .offcanvas h2, .offcanvas h3, .offcanvas h4, .offcanvas h5, .offcanvas h6 {
    color: var(--text-primary);
}

/* Ensure body text in containers has proper contrast */
.card p, .modal p, .offcanvas p {
    color: var(--text-secondary);
}

/* ============================================
   GM PROFILE BANNER
   ============================================ */

.gm-banner {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary-active) 100%);
    padding: 0.75rem 0;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 1050;
}

.gm-banner-link {
    color: #ffffff !important;
    font-weight: 500;
    font-size: var(--text-sm);
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-block;
}

.gm-banner-link:hover {
    color: var(--accent-gold) !important;
    transform: translateY(-1px);
}

.gm-banner-link i {
    transition: transform 0.3s ease;
}

.gm-banner-link:hover i {
    transform: rotate(360deg);
}

@media (max-width: 768px) {
    .gm-banner {
        padding: 0.6rem 0;
    }
    
    .gm-banner-link {
        font-size: 0.8rem;
    }
}

/* ============================================
   NAVIGATION
   ============================================ */

.navbar {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    position: relative;
    z-index: 1040;
}

.navbar-brand {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: var(--text-xl);
    color: var(--text-primary) !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: transform 0.3s ease;
}

.navbar-brand:hover {
    transform: translateY(-2px);
}

.navbar-brand img {
    transition: transform 0.3s ease, filter 0.3s ease;
}

.navbar-brand:hover img {
    transform: rotate(-5deg) scale(1.05);
    filter: drop-shadow(0 0 8px var(--accent-gold));
}

.navbar-nav .nav-link {
    font-family: var(--font-ui);
    color: var(--text-secondary) !important;
    font-weight: 500;
    font-size: var(--text-sm);
    padding: 0.5rem 1rem !important;
    border-radius: 8px;
    transition: all var(--transition-fast);
    position: relative;
    letter-spacing: 0.01em;
}

.navbar-nav .nav-link:hover {
    color: var(--text-primary) !important;
    background: rgba(64, 224, 255, 0.08);
}

.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--accent-primary);
    transform: translateX(-50%);
    transition: width 0.3s ease;
}

.navbar-nav .nav-link:hover::after {
    width: 80%;
}

.dropdown-menu {
    background: var(--surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    padding: 0.5rem;
    backdrop-filter: blur(12px);
    z-index: 1045;
    overflow: visible;
}

.dropdown-item {
    font-family: var(--font-ui);
    color: var(--text-primary);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.dropdown-item:hover {
    background: rgba(64, 224, 255, 0.08);
    color: var(--text-primary);
    transform: translateX(4px);
}

.dropdown-item i {
    margin-right: 0.5rem;
    color: var(--accent-primary);
}

/* Theme Toggle Button */
.theme-toggle {
    background: rgba(64, 224, 255, 0.08);
    border: 1px solid var(--accent-primary);
    border-radius: 6px;
    padding: 0.5rem 1rem;
    color: var(--text-primary) !important;
    font-weight: 500;
    transition: all 0.2s ease;
}

.theme-toggle:hover {
    background: var(--accent-primary);
    box-shadow: 0 0 12px var(--glow-primary);
    transform: translateY(-2px);
}

/* Offcanvas Hamburger Menu */
.offcanvas {
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
}

.offcanvas-header {
    background: var(--surface-elevated);
    border-bottom: 1px solid var(--border-color);
    padding: 1.5rem;
}

.offcanvas-title {
    color: var(--text-primary);
    font-size: var(--text-xl);
}

.offcanvas-body {
    padding: 1.5rem;
}

.offcanvas-body .nav-link {
    font-family: var(--font-ui);
    color: var(--text-secondary) !important;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    transition: all var(--transition-fast);
    font-weight: 500;
    letter-spacing: 0.01em;
}

.offcanvas-body .nav-link:hover {
    background: rgba(64, 224, 255, 0.08);
    color: var(--text-primary) !important;
    transform: translateX(4px);
}

.offcanvas-body .nav-link i {
    color: var(--accent-primary);
    width: 20px;
}

.offcanvas-body h6 {
    font-family: var(--font-ui);
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.08em;
    margin-top: 1rem;
    text-transform: uppercase;
    font-size: 0.7rem;
}

.offcanvas-body hr {
    border-color: var(--border-color);
    opacity: 0.3;
}

.offcanvas .btn-close {
    filter: invert(1);
    opacity: 0.7;
}

.offcanvas .btn-close:hover {
    opacity: 1;
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
    font-family: var(--font-ui);
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    border: none;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    letter-spacing: 0.01em;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.btn:hover::before {
    left: 100%;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-active)) !important;
    color: white !important;
    border: 1px solid rgba(64, 224, 255, 0.2) !important;
    box-shadow: var(--shadow-sm), 0 0 0 0 var(--glow-primary) !important;
}

.btn-primary:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: var(--shadow-md), 0 0 20px var(--glow-primary) !important;
    background: linear-gradient(135deg, var(--accent-primary-hover), var(--accent-primary)) !important;
}

.btn-success {
    background: linear-gradient(135deg, #059669, #047857) !important;
    color: white !important;
    border: 1px solid rgba(5, 150, 105, 0.3) !important;
}

.btn-success:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: var(--shadow-md), 0 0 20px rgba(5, 150, 105, 0.5) !important;
}

.btn-warning {
    background: linear-gradient(135deg, var(--accent-orange), #d97706) !important;
    color: white !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

.btn-warning:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: var(--shadow-md), 0 0 20px rgba(245, 158, 11, 0.5) !important;
}

.btn-danger {
    background: linear-gradient(135deg, #dc2626, #991b1b) !important;
    color: white !important;
}

.btn-secondary {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.btn-secondary:hover {
    transform: translateY(-2px) scale(1.02);
    background: var(--surface-elevated) !important;
}

.btn-outline-light {
    background: transparent !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.btn-outline-light:hover {
    background: var(--glass-bg) !important;
    border-color: var(--accent-primary) !important;
    transform: translateY(-2px);
}

/* Button Groups */
.btn-group .btn {
    border-radius: 0;
}

.btn-group .btn:first-child {
    border-radius: 8px 0 0 8px;
}

.btn-group .btn:last-child {
    border-radius: 0 8px 8px 0;
}

/* Themed Campaign Setting Buttons */
.btn-themed {
    font-weight: 600;
    color: white !important;
    border: none;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}

.btn-themed:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.sword-coast-btn {
    background: linear-gradient(135deg, #d97706, #f59e0b) !important;
    color: white !important;
}

.sword-coast-btn:hover {
    background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4) !important;
}

.planar-btn {
    background: linear-gradient(135deg, #3b82f6, #60a5fa) !important;
    color: white !important;
}

.planar-btn:hover {
    background: linear-gradient(135deg, #60a5fa, #93c5fd) !important;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4) !important;
}

.dark-destinies-btn {
    background: linear-gradient(135deg, #6b21a8, #9333ea) !important;
    color: white !important;
}

.dark-destinies-btn:hover {
    background: linear-gradient(135deg, #9333ea, #a855f7) !important;
    box-shadow: 0 4px 16px rgba(147, 51, 234, 0.4) !important;
}

.classics-btn {
    background: linear-gradient(135deg, #dc2626, #ef4444) !important;
    color: white !important;
}

.classics-btn:hover {
    background: linear-gradient(135deg, #ef4444, #f87171) !important;
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.4) !important;
}

/* ============================================
   MODALS
   ============================================ */

/* Style Bootstrap modals to match dark theme */
.modal {
    z-index: 1055 !important;
}

.modal-backdrop {
    z-index: 1050 !important;
}

.modal-dialog {
    z-index: 1056 !important;
    pointer-events: auto !important;
}

.modal-content {
    background: var(--surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    pointer-events: auto !important;
}

.modal-header {
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    border-radius: 12px 12px 0 0;
    pointer-events: auto !important;
}

.modal-title {
    color: var(--text-primary);
    font-family: var(--font-heading);
}

.modal-body {
    color: var(--text-primary);
    pointer-events: auto !important;
}

.modal-body input,
.modal-body textarea,
.modal-body select,
.modal-body button {
    pointer-events: auto !important;
}

.modal-footer {
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 12px 12px;
    pointer-events: auto !important;
}

.modal-footer .btn {
    pointer-events: auto !important;
    position: relative;
    z-index: 1060;
}


/* ============================================
   CARDS & CONTAINERS
   ============================================ */

.card, .fantasy-card {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    overflow: visible;
    transition: all 0.3s ease;
    margin-bottom: var(--space-md);
}

.card:hover, .fantasy-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg), 0 0 24px rgba(64, 224, 255, 0.15);
    border-color: rgba(64, 224, 255, 0.2);
}

.card-header {
    background: linear-gradient(135deg, var(--surface-elevated), var(--bg-tertiary));
    border-bottom: 1px solid var(--border-color);
    padding: var(--space-md);
    position: relative;
    overflow: visible;
    border-radius: 12px 12px 0 0;
}

.card-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary), var(--accent-gold));
}

.card-header h1, 
.card-header h2, 
.card-header h3, 
.card-header h4,
.card-header h5,
.card-header h6,
.card-header .h1,
.card-header .h2,
.card-header .h3,
.card-header .h4,
.card-header .h5,
.card-header .h6 {
    margin-bottom: 0;
    color: var(--text-primary);
}

/* Card Header Color Variants */
.card-header-primary {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-active));
    color: white;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.card-header-primary h1, 
.card-header-primary h2, 
.card-header-primary h3, 
.card-header-primary h4,
.card-header-primary h5,
.card-header-primary h6 {
    color: white;
}

/* Legacy support for old crimson class */
.card-header-crimson {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-active));
    color: white;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.card-header-crimson h1, 
.card-header-crimson h2, 
.card-header-crimson h3, 
.card-header-crimson h4,
.card-header-crimson h5,
.card-header-crimson h6 {
    color: white;
}

.card-header-orange {
    background: linear-gradient(135deg, var(--accent-orange), #d97706);
    color: white;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.card-header-orange h1, 
.card-header-orange h2, 
.card-header-orange h3, 
.card-header-orange h4,
.card-header-orange h5,
.card-header-orange h6 {
    color: white;
}

.card-header-gold {
    background: linear-gradient(135deg, var(--accent-gold), #b8932b);
    color: white;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.card-header-gold h1, 
.card-header-gold h2, 
.card-header-gold h3, 
.card-header-gold h4,
.card-header-gold h5,
.card-header-gold h6 {
    color: white;
}

.card-body {
    padding: var(--space-md);
    background: var(--surface);
    color: var(--text-primary);
    border-radius: 0 0 12px 12px;
}

/* Ensure form labels have proper contrast */
.card-body .form-label {
    font-family: var(--font-ui);
    color: var(--text-secondary);
    font-weight: 500;
}

/* Ensure form text helpers have good contrast */
.form-text {
    color: var(--text-secondary) !important;
    opacity: 0.9;
}

/* Fix contrast for light background cards */
.bg-light,
.card-body.bg-light {
    background-color: #f8f9fa !important;
    color: #1e293b !important;
}

.bg-light .form-label,
.card-body.bg-light .form-label,
.bg-light label,
.card-body.bg-light label {
    color: #1e293b !important;
    font-weight: 600 !important;
}

.bg-light .input-group-text {
    background-color: #e9ecef !important;
    color: #1e293b !important;
    border-color: #ced4da !important;
}

.bg-light .form-control {
    background-color: #ffffff !important;
    color: #1e293b !important;
    border-color: #ced4da !important;
}

.bg-light small,
.bg-light .small {
    color: #475569 !important;
}

/* Glowing Card Effect for Generated Content */
.generated-content-card {
    border: 1px solid var(--accent-gold);
    box-shadow: var(--shadow-md), 0 0 30px rgba(212, 175, 55, 0.3);
    position: relative;
}

.generated-content-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary), var(--accent-gold));
    border-radius: 12px;
    z-index: -1;
    opacity: 0.5;
    filter: blur(8px);
    animation: glow-pulse 3s ease-in-out infinite;
}

@keyframes glow-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}

/* Parchment Background Effect */
.parchment-bg {
    background: var(--surface);
    position: relative;
    border-radius: 8px;
    padding: var(--space-md);
    z-index: 1;
}

.parchment-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><filter id="paper"><feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="5" /></filter><rect width="200" height="200" filter="url(%23paper)" opacity="0.02"/></svg>');
    opacity: 0.03;
    border-radius: 8px;
    pointer-events: none;
}

/* Generator Cards - Compact 3-Column Grid */
.generator-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: var(--surface);
    border: 1px solid var(--border-color);
}

.generator-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3) !important;
}

.generator-card .card-header {
    padding: 0.75rem 1rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.generator-card .card-body {
    padding: 1rem;
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
}

.generator-card .card-body p {
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    flex-grow: 1;
    line-height: 1.4;
}

.generator-card .btn-sm {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    font-weight: 600;
}

.generator-card .btn-outline-secondary {
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.generator-card .btn-outline-secondary:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* ============================================
   GENERATOR RESULT CARDS
   Unified styling for all generator output displays
   ============================================ */

/* Base result card - used by all generators */
.result-card,
.npc-card,
.poi-card,
.location-card,
.character-card,
.hook-card {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    margin-bottom: var(--space-md);
}

/* Result header - charcoal gradient with accent top border */
.result-header,
.npc-header,
.poi-header,
.location-header,
.character-header,
.hook-header {
    background: linear-gradient(135deg, var(--surface-elevated), var(--bg-tertiary));
    padding: var(--space-md);
    position: relative;
    border-bottom: 1px solid var(--border-color);
}

.result-header::before,
.npc-header::before,
.poi-header::before,
.location-header::before,
.character-header::before,
.hook-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary), var(--accent-gold));
}

.result-header h2,
.result-header h3,
.npc-header h2,
.npc-header h3,
.poi-header h2,
.poi-header h3,
.location-header h2,
.location-header h3,
.character-header h2,
.character-header h3,
.hook-header h2,
.hook-header h3 {
    color: var(--text-primary);
    margin-bottom: 0;
}

/* Result body - content area */
.result-body,
.npc-body,
.poi-body,
.location-body,
.character-body,
.hook-body {
    background: var(--bg-secondary);
    padding: var(--space-md);
}

.result-body h3,
.result-body h4,
.result-body h5,
.npc-body h3,
.npc-body h4,
.npc-body h5,
.poi-body h3,
.poi-body h4,
.poi-body h5,
.location-body h3,
.location-body h4,
.location-body h5,
.character-body h3,
.character-body h4,
.character-body h5,
.hook-body h3,
.hook-body h4,
.hook-body h5 {
    color: var(--accent-primary);
}

.result-body p,
.npc-body p,
.poi-body p,
.location-body p,
.character-body p,
.hook-body p {
    color: var(--text-primary);
}

/* Result footer - action buttons area */
.result-footer,
.npc-footer,
.poi-footer,
.location-footer,
.character-footer,
.hook-footer {
    background: var(--surface-elevated);
    padding: var(--space-sm) var(--space-md);
    border-top: 1px solid var(--border-color);
}

/* Old Homepage Cards - Deprecated */
.homepage-card {
    min-height: 420px;
    max-height: 420px;
    display: flex;
    flex-direction: column;
}

.homepage-card .card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.homepage-card .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.homepage-card .card-body p {
    flex-grow: 1;
}

/* ============================================
   FORMS & INPUTS
   ============================================ */

.form-control, .form-select {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    padding: 0.75rem 1rem;
    font-family: var(--font-ui);
    font-weight: 400;
    transition: all var(--transition-fast);
}

.form-control:focus, .form-select:focus {
    background: var(--surface-elevated);
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(64, 224, 255, 0.08), 0 0 12px var(--glow-primary);
    outline: none;
}

.form-control::placeholder {
    color: var(--text-muted);
}

.form-label {
    font-family: var(--font-ui);
    color: var(--text-secondary);
    font-weight: 500;
    margin-bottom: 0.5rem;
    font-size: var(--text-sm);
    letter-spacing: 0.02em;
}

.form-check-input {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

.form-check-input:checked {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.form-check-label {
    color: var(--text-secondary);
}

/* ============================================
   ALERTS & NOTIFICATIONS
   ============================================ */

.alert {
    border-radius: 8px;
    border: none;
    padding: 1rem 1.5rem;
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-sm);
}

.alert-success {
    background: rgba(5, 150, 105, 0.2);
    color: #6ee7b7;
    border-left: 4px solid #059669;
}

.alert-danger {
    background: rgba(220, 38, 38, 0.2);
    color: #fca5a5;
    border-left: 4px solid var(--accent-crimson);
}

.alert-warning {
    background: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
    border-left: 4px solid var(--accent-orange);
}

.alert-info {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
    border-left: 4px solid #3b82f6;
}

/* ============================================
   FOOTER
   ============================================ */

.footer {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--glass-border);
    padding: var(--space-lg) 0;
    margin-top: var(--space-xl);
}

.footer a {
    color: var(--accent-gold);
    font-weight: 600;
    transition: all 0.2s ease;
}

.footer a:hover {
    color: var(--text-primary);
    text-shadow: 0 0 8px var(--glow-gold);
}

/* ============================================
   FEATURE LISTS
   ============================================ */

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-md) 0;
}

.feature-list li {
    display: flex;
    align-items: flex-start;
    padding: 0.5rem 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.feature-list li i {
    color: var(--accent-orange);
    margin-right: 0.75rem;
    margin-top: 0.25rem;
    font-size: 1rem;
}

.feature-list li:hover {
    color: var(--text-primary);
}

/* ============================================
   BADGES & TAGS
   ============================================ */

.badge {
    font-family: var(--font-mono);
    font-weight: 500;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-primary {
    background: var(--accent-primary);
    color: white;
}

.badge-secondary {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

/* ============================================
   TABLES
   ============================================ */

.table {
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.table thead {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.table thead th {
    border-bottom: 2px solid var(--accent-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: var(--text-sm);
}

.table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.table tbody tr:hover {
    background: rgba(64, 224, 255, 0.04);
}

/* ============================================
   MAP GENERATOR STYLES
   ============================================ */

.battle-map {
    display: inline-block;
    background: var(--surface);
    border: 3px solid var(--border-color);
    border-radius: 12px;
    padding: var(--space-lg);
    box-shadow: var(--shadow-lg), inset 0 0 40px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

/* Hex grid pattern overlay */
.battle-map::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        repeating-linear-gradient(
            60deg,
            transparent,
            transparent 24px,
            rgba(148, 163, 184, 0.03) 25px,
            rgba(148, 163, 184, 0.03) 26px
        );
    pointer-events: none;
}

.map-row {
    display: flex;
    height: 24px;
    margin-bottom: -6px;
}

.map-row:nth-child(even) {
    margin-left: 12px;
}

.map-tile {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    transition: all 0.2s ease;
    position: relative;
    cursor: pointer;
    border: 1px solid rgba(148, 163, 184, 0.1);
}

.map-tile:hover {
    transform: scale(1.3);
    z-index: 10;
    filter: brightness(1.4);
    box-shadow: 0 0 16px rgba(64, 224, 255, 0.5);
}

/* Tile Types */
.tile-wall {
    background: linear-gradient(135deg, #374151, #1f2937);
    color: #9ca3af;
}

.tile-floor {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
}

.tile-door {
    background: linear-gradient(135deg, #92400e, #78350f);
    color: #fef3c7;
    box-shadow: 0 0 12px rgba(146, 64, 14, 0.5);
}

.tile-chest {
    background: linear-gradient(135deg, var(--accent-gold), #b45309);
    color: #fef3c7;
    box-shadow: 0 0 16px var(--glow-gold);
}

.tile-trap {
    background: linear-gradient(135deg, #dc2626, #991b1b);
    color: white;
    box-shadow: 0 0 16px rgba(220, 38, 38, 0.5);
    animation: pulse-danger 2s ease-in-out infinite;
}

@keyframes pulse-danger {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Tooltip */
.map-tile-tooltip {
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.95);
    color: var(--text-primary);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: var(--text-xs);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 20;
    border: 1px solid var(--accent-primary);
    backdrop-filter: blur(8px);
}

.map-tile:hover .map-tile-tooltip {
    opacity: 1;
}

/* ============================================
   AFFILIATE & WIDGETS
   ============================================ */

.affiliate-section {
    margin: var(--space-xl) 0;
}

.affiliate-widgets-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
    max-width: 900px;
    margin: 0 auto;
}

.affiliate-title {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    font-size: 0.9rem;
    letter-spacing: 1px;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--accent-gold);
    position: relative;
}

.affiliate-title::before,
.affiliate-title::after {
    content: '★';
    color: var(--accent-gold);
    font-size: var(--text-xl);
    position: absolute;
    bottom: -12px;
    background: var(--bg-primary);
    padding: 0 var(--space-sm);
}

.affiliate-title::before {
    left: 20%;
}

.affiliate-title::after {
    right: 20%;
}

.dmsguild-widget {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
    max-width: 140px;
    flex: 0 0 auto;
    font-size: 0.75rem;
}

.dmsguild-widget:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent-gold);
}

.dmsguild-widget img {
    max-width: 100%;
    height: auto;
    max-height: 160px;
    object-fit: contain;
}

.dmsguild-widget table {
    width: 100%;
    margin: 0;
}

.dmsguild-widget td {
    padding: 0.5rem;
}

.affiliate-text {
    font-family: var(--font-ui);
    font-size: 0.65rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

.affiliate-text a {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.affiliate-text a:hover {
    color: var(--accent-primary-hover);
}

/* ============================================
   ANIMATIONS
   ============================================ */

.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.5s ease;
}

/* ============================================
   BREADCRUMBS
   ============================================ */

.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: var(--space-md);
}

.breadcrumb-item {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.breadcrumb-item a {
    color: var(--text-secondary);
}

.breadcrumb-item a:hover {
    color: var(--accent-orange);
}

.breadcrumb-item.active {
    color: var(--text-primary);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
    :root {
        --text-4xl: 2rem;
        --text-3xl: 1.75rem;
        --text-2xl: 1.5rem;
    }
    
    .navbar-brand {
        font-size: var(--text-lg);
    }
    
    .card, .fantasy-card {
        margin-bottom: var(--space-sm);
    }
    
    .homepage-card {
        min-height: auto;
        max-height: none;
    }
    
    .btn {
        padding: 0.625rem 1.25rem;
        font-size: var(--text-sm);
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Typography Utilities */
.medieval-font, .fantasy-header {
    font-family: var(--font-heading);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.text-gold {
    color: var(--accent-gold) !important;
}

.text-crimson {
    color: var(--accent-crimson) !important;
}

.text-orange {
    color: var(--accent-orange) !important;
}

.text-silver {
    color: var(--accent-silver) !important;
}

/* Display Classes */
.display-1 {
    font-size: var(--text-4xl);
    font-weight: 800;
    line-height: 1.1;
}

.display-2 {
    font-size: var(--text-3xl);
    font-weight: 800;
    line-height: 1.1;
}

.display-3 {
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1.2;
}

.display-4 {
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1.2;
}

.display-5 {
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.3;
}

/* Effect Utilities */
.text-glow {
    text-shadow: 0 0 12px var(--glow-primary);
}

.text-glow-gold {
    text-shadow: 0 0 12px var(--glow-gold);
}

.border-glow {
    box-shadow: 0 0 12px var(--glow-primary);
}

/* ============================================
   GLASSMORPHISM & LIQUID GLASS 2026
   Translucent layers with subtle refraction
   ============================================ */

.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 0.5px solid var(--glass-border);
    border-radius: 16px;
    padding: var(--space-md);
    box-shadow: var(--shadow-md);
}

.glass-card {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.02) 100%
    );
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 0.5px solid var(--border-glass);
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.glass-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

[data-theme="light"] .glass-card {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.7) 100%
    );
}

/* Hairline borders - whisper of definition */
.hairline-border {
    border: 0.5px solid var(--border-color);
}

.hairline-border-top {
    border-top: 0.5px solid var(--border-color);
}

.hairline-border-bottom {
    border-bottom: 0.5px solid var(--border-color);
}

/* ============================================
   MICRO-INTERACTIONS 2026
   Purpose-driven, shorter, lightweight
   ============================================ */

.micro-lift {
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.micro-lift:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.micro-scale {
    transition: transform var(--transition-fast);
}

.micro-scale:hover {
    transform: scale(1.02);
}

.micro-glow {
    transition: box-shadow var(--transition-base);
}

.micro-glow:hover {
    box-shadow: var(--shadow-glow);
}

/* Kinetic typography - subtle weight shift on hover */
.kinetic-text {
    transition: font-weight var(--transition-slow), letter-spacing var(--transition-slow);
}

.kinetic-text:hover {
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Smooth color transitions for interactive elements */
.color-transition {
    transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}

.stat-block {
    font-family: var(--font-mono);
    background: var(--bg-tertiary);
    padding: var(--space-md);
    border-radius: 8px;
    border-left: 4px solid var(--accent-primary);
}

.highlight-section {
    animation: highlight-pulse 1s ease;
}

@keyframes highlight-pulse {
    0%, 100% { background: transparent; }
    50% { background: rgba(64, 224, 255, 0.08); }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 6px;
    border: 2px solid var(--bg-secondary);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-primary);
}

/* Selection - Electric Cyan highlight */
::selection {
    background: rgba(64, 224, 255, 0.25);
    color: var(--text-primary);
}

::-moz-selection {
    background: rgba(64, 224, 255, 0.25);
    color: var(--text-primary);
}

[data-theme="light"] ::selection {
    background: rgba(8, 145, 178, 0.2);
}

[data-theme="light"] ::-moz-selection {
    background: rgba(8, 145, 178, 0.2);
}