/* OPTIMISATION ESPACE MAXIMUM - IMPACT VISUEL GARANTI */
        .sidebar-scrollable {
            padding: 0 !important;
            margin: 0 !important;
        }
        .sidebar-scrollable > .mb-6 {
            margin: 0 !important;
            padding: 0 2px !important;
        }
        .main-scrollable {
            padding-left: 6px !important;
            padding-right: 6px !important;
        }
        /* SUPPRESSION MAXIMALE DES ESPACES PERDUS */
        .sidebar-header {
            padding-left: 12px !important;
            padding-right: 12px !important;
        }
        .sidebar-footer {
            padding-left: 12px !important;
            padding-right: 12px !important;
        }
        /* UTILISATION MAXIMALE DE L'ÉCRAN */
        .bg-bg-card.border.border-border-color.rounded-lg {
            border-left: none !important;
            border-right: none !important;
            border-radius: 0 !important;
            margin: 0 -2px !important;
            width: calc(100% + 4px) !important;
        }
        
        /* DESIGN SYSTEM MODERNE ÉTENDU */
        :root {
            /* Couleurs de base (conservées) */
            --bg-main: #0D1117;
            --bg-sidebar: #010409;
            --bg-card: #161B22;
            --border-color: #30363D;
            --text-primary: #E6EDF3;
            --text-secondary: #A8B2BC;
            --accent-gold: #D29922;
            --accent-blue: #58A6FF;
            
            /* Nouvelles couleurs système */
            --bg-glass: rgba(22, 27, 34, 0.8);
            --bg-overlay: rgba(13, 17, 23, 0.95);
            --success: #28A745;
            --warning: #FFC107;
            --error: #DC3545;
            --info: #17A2B8;
            
            /* Gradients modernes */
            --gradient-gold: linear-gradient(135deg, #D29922 0%, #F4D03F 100%);
            --gradient-blue: linear-gradient(135deg, #58A6FF 0%, #79C0FF 100%);
            --gradient-card: linear-gradient(145deg, #161B22 0%, #1C2128 100%);
            
            /* Shadows */
            --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
            --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.15);
            --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.25);
            --shadow-glow: 0 0 20px rgba(210, 153, 34, 0.2);
            
            /* Spacings */
            --space-1: 0.25rem;
            --space-2: 0.5rem;
            --space-3: 0.75rem;
            --space-4: 1rem;
            --space-6: 1.5rem;
            --space-8: 2rem;
            --space-12: 3rem;
            --space-16: 4rem;
            
            /* SYSTÈME CARTOUCHES BITCOIN MODERNE */
            /* Variables couleurs thématique Bitcoin/Crypto */
            --bitcoin-orange: #F7931A;
            --bitcoin-gold: #D29922; 
            --bitcoin-gradient: linear-gradient(135deg, #F7931A 0%, #D29922 100%);
            --bitcoin-shadow: 0 2px 12px rgba(247, 147, 26, 0.25);
            --bitcoin-glow: 0 0 20px rgba(247, 147, 26, 0.15);
            
            /* Variables neutres pour états non-sélectionnés */
            --neutral-base: #30363D;
            --neutral-light: #4A5568;
            --neutral-bg: rgba(22, 27, 34, 0.7);
            --neutral-border: rgba(48, 54, 61, 0.8);
            --neutral-badge: var(--text-secondary);
            --neutral-hover-bg: rgba(48, 54, 61, 0.5);
            --neutral-hover-border: rgba(72, 85, 104, 0.8);
            
            /* Variables glassmorphism optimisées */
            --glass-blur: blur(8px);
            --glass-border: rgba(255, 255, 255, 0.1);
            --glass-highlight: rgba(255, 255, 255, 0.03);
        }

        body { 
            font-family: 'Inter', sans-serif; 
            background-color: var(--bg-main); 
            color: var(--text-primary);
        }

        /* ========== WECSATS MODERN PREMIUM HEADER DESIGN ========== */
        .wecsats-title {
            font-size: 1.75rem;
            font-weight: 700;
            font-family: 'Playfair Display', serif;
            letter-spacing: -0.02em;
            line-height: 1.1;
            color: #FFD700; /* Fallback for accessibility */
            background: linear-gradient(135deg, #D4AF37 0%, #FFD700 25%, #FFEC8B 50%, #FFD700 75%, #D4AF37 100%);
            background-size: 200% 200%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 0.5rem;
            position: relative;
            animation: shimmer 3s ease-in-out infinite;
            text-shadow: 0 0 20px rgba(212, 175, 55, 0.3),
                        0 0 40px rgba(212, 175, 55, 0.2),
                        0 0 60px rgba(212, 175, 55, 0.1);
            box-shadow: none !important;
        }

        /* Hover effect moderne et subtil */
        .wecsats-title:hover {
            transform: scale(1.02);
            transition: transform 0.3s ease;
        }

        /* Amélioration pour l'accessibilité - mode contraste élevé */
        @media (prefers-contrast: high) {
            .wecsats-title {
                color: #FFED4A;
                text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
                -webkit-text-fill-color: #FFED4A;
            }
        }

        /* Respect des préférences utilisateur pour les animations */
        @media (prefers-reduced-motion: reduce) {
            .wecsats-title, .wecsats-title-mobile {
                animation: none;
                transition: none;
                filter: none;
                transform: none;
            }
            .wecsats-title:hover, .wecsats-title-mobile:hover {
                transform: none;
                filter: none;
            }
            .wecsats-subtitle, .wecsats-subtitle-mobile {
                animation: none;
                opacity: 1;
            }
        }

        .wecsats-subtitle-container {
            position: relative;
            display: inline-block;
        }

        .wecsats-subtitle {
            font-size: 0.625rem; /* 10px pour ne pas dépasser */
            font-weight: 300;
            font-family: 'Inter', sans-serif;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: #D4AF37;
            position: relative;
            animation: fadeInUp 1.5s ease-out 0.5s both;
            opacity: 0;
        }

        .wecsats-subtitle:hover {
            opacity: 1;
        }

        /* Ligne décorative dorée */
        .wecsats-decorative-line {
            width: 6rem;
            height: 0.25rem;
            background: linear-gradient(to right, #D4AF37, transparent);
            margin: 0 auto;
            border-radius: 9999px;
            opacity: 0.6;
        }

        /* ========== TOP HEADER NAVIGATION ========== */
        .top-header {
            background: var(--bg-sidebar);
            border-bottom: 1px solid var(--border-color);
            z-index: 100;
        }

        .wecsats-title-header {
            font-size: 1.5rem;
            font-weight: 700;
            font-family: 'Playfair Display', serif;
            letter-spacing: -0.02em;
            line-height: 1.1;
            background: linear-gradient(135deg, #D4AF37 0%, #FFD700 25%, #FFEC8B 50%, #FFD700 75%, #D4AF37 100%);
            background-size: 200% 200%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: shimmer 3s ease-in-out infinite;
            text-shadow: 0 0 20px rgba(212, 175, 55, 0.3),
                        0 0 40px rgba(212, 175, 55, 0.2),
                        0 0 60px rgba(212, 175, 55, 0.1);
            box-shadow: none !important;
        }

        .wecsats-subtitle-header {
            font-size: 0.65rem;
            font-weight: 300;
            font-family: 'Inter', sans-serif;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: #D4AF37;
            white-space: nowrap;
        }

        .nav-menu-item {
            display: flex;
            align-items: center;
            padding: 0.5rem 1rem;
            background: transparent;
            border: none;
            color: var(--text-secondary);
            font-size: 0.875rem;
            font-weight: 500;
            border-radius: 0.5rem;
            cursor: pointer;
            transition: all 0.2s ease;
            white-space: nowrap;
            min-height: 48px;
        }

        .nav-menu-item img {
            width: 32px;
            height: 32px;
            object-fit: contain;
        }

        .nav-menu-item:hover {
            background: rgba(212, 175, 55, 0.1);
            color: var(--text-primary);
        }

        .nav-menu-item.active {
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(255, 215, 0, 0.1) 100%);
            color: #D4AF37;
            font-weight: 600;
            border: 1px solid rgba(212, 175, 55, 0.3);
        }

        /* Styles pour le menu déroulant donation */
        .donation-dropdown {
            position: relative;
        }

        .donation-dropdown-menu {
            animation: slideDown 0.2s ease-out;
        }

        .donation-dropdown-menu.hidden {
            display: none;
        }

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

        /* Effet de brillance moderne */
        .wecsats-subtitle::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(88, 166, 255, 0.1) 0%, transparent 50%);
            border-radius: inherit;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .wecsats-subtitle:hover::before {
            opacity: 1;
        }

        /* Améliorations d'accessibilité pour le sous-titre */
        @media (prefers-contrast: high) {
            .wecsats-subtitle {
                color: #B3D9FF;
                border-color: rgba(88, 166, 255, 0.6);
                background: rgba(88, 166, 255, 0.15);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .wecsats-subtitle {
                transition: none;
            }
            .wecsats-subtitle:hover {
                transform: none;
            }
        }

        /* ========== RESPONSIVE BREAKPOINTS ========== */
        @media (max-width: 1024px) {
            .wecsats-title {
                font-size: 1.5rem;
            }
            .wecsats-subtitle {
                font-size: 0.7rem;
                padding: 0.2rem 0.6rem;
            }
        }

        @media (max-width: 768px) {
            .wecsats-title {
                font-size: 1.25rem;
            }
            .wecsats-subtitle {
                font-size: 0.65rem;
                padding: 0.15rem 0.5rem;
            }
        }

        /* ========== MOBILE HEADER STYLES ========== */
        .wecsats-title-mobile {
            font-size: 1.125rem;
            font-weight: 700;
            font-family: 'Playfair Display', serif;
            letter-spacing: -0.02em;
            line-height: 1.2;
            background: linear-gradient(135deg, #D4AF37 0%, #FFD700 25%, #FFEC8B 50%, #FFD700 75%, #D4AF37 100%);
            background-size: 200% 200%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 0.1rem;
            animation: shimmer 3s ease-in-out infinite;
            text-shadow: 0 0 20px rgba(212, 175, 55, 0.3),
                        0 0 40px rgba(212, 175, 55, 0.2),
                        0 0 60px rgba(212, 175, 55, 0.1);
            box-shadow: none !important;
        }

        .wecsats-subtitle-mobile {
            font-size: 0.5rem; /* 8px pour mobile */
            font-weight: 300;
            font-family: 'Inter', sans-serif;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #D4AF37;
            animation: fadeInUp 1.5s ease-out 0.5s both;
            opacity: 0;
            white-space: nowrap;
        }

        /* ========== ANIMATIONS KEYFRAMES ========== */
        @keyframes shimmer {
            0% {
                background-position: -200% center;
            }
            50% {
                background-position: 200% center;
            }
            100% {
                background-position: -200% center;
            }
        }

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


        /* COMPOSANTS MODERNES */
        .card { 
            background: var(--gradient-card);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            box-shadow: var(--shadow-md);
            backdrop-filter: blur(10px);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .card-modern {
            background: var(--gradient-card);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: var(--space-6);
            box-shadow: var(--shadow-md);
            backdrop-filter: blur(10px);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .card:hover, .card-modern:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-lg);
            border-color: var(--accent-gold);
        }
        
        /* Filter Chips avec Icônes */
        .filter-chip {
            display: inline-flex;
            align-items: center;
            padding: var(--space-2) var(--space-4);
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            color: var(--text-secondary);
            font-size: 0.875rem;
            cursor: pointer;
            transition: all 0.2s ease;
            white-space: nowrap;
            min-height: 44px; /* Zone tactile conforme Loi de Fitts */
            min-width: 60px;  /* Largeur minimum tactile */
        }
        
        .filter-chip:hover {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
            transform: translateY(-1px);
        }
        
        .filter-chip.active {
            background: var(--gradient-gold);
            color: #000;
            border-color: var(--accent-gold);
            box-shadow: var(--shadow-glow);
        }
        
        .filter-chip img {
            width: 16px;
            height: 16px;
            margin-right: var(--space-2);
            object-fit: contain;
        }
        
        /* Système de Boutons */
        .btn-primary {
            background: var(--gradient-gold);
            color: #000;
            padding: var(--space-3) var(--space-6);
            border-radius: 8px;
            font-weight: 600;
            transition: all 0.2s ease;
            border: none;
            cursor: pointer;
        }
        
        .btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: var(--shadow-glow);
        }
        
        .btn-secondary {
            background: var(--bg-card);
            color: var(--text-primary);
            border: 1px solid var(--border-color);
            padding: var(--space-2) var(--space-4);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .btn-secondary:hover {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }
        .stat-count { color: var(--text-secondary); font-size: 0.8rem; margin-left: auto; padding-left: 0.5rem; }
        
        /* Styles pour les indicateurs de chargement */
        .spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(210, 153, 34, 0.3);
            border-radius: 50%;
            border-top-color: var(--accent-gold);
            animation: spin 1s ease-in-out infinite;
        }
        
        .spinner-large {
            width: 40px;
            height: 40px;
            border-width: 4px;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        .progress-bar-container {
            width: 100%;
            height: 4px;
            background-color: var(--border-color);
            border-radius: 2px;
            overflow: hidden;
            margin: 1rem 0;
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, var(--accent-gold), var(--accent-blue));
            border-radius: 2px;
            transition: width 0.3s ease;
            animation: shimmer 2s ease-in-out infinite;
        }
        
        @keyframes shimmer {
            0% { opacity: 0.8; }
            50% { opacity: 1; }
            100% { opacity: 0.8; }
        }
        
        .loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(13, 17, 23, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 100;
            backdrop-filter: blur(2px);
        }
        
        .loading-message {
            text-align: center;
            color: var(--text-primary);
        }
        
        .skeleton-loader {
            background: linear-gradient(90deg, var(--bg-card) 25%, rgba(210, 153, 34, 0.1) 50%, var(--bg-card) 75%);
            background-size: 200% 100%;
            animation: loading 1.5s infinite;
        }
        
        @keyframes loading {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

        /* Animation de pulsation douce pour la jauge miné */
        .mined-pulse {
            animation: minedPulse 3s ease-in-out infinite;
        }

        @keyframes minedPulse {
            0%, 100% {
                opacity: 1;
                box-shadow: 0 0 5px rgba(6, 182, 212, 0.3);
            }
            50% {
                opacity: 0.85;
                box-shadow: 0 0 15px rgba(6, 182, 212, 0.6);
            }
        }

        /* Styles pour les boutons filtres de métrique */
        .metric-filter-btn {
            background: linear-gradient(135deg, rgba(251, 191, 36, 0.05), rgba(245, 158, 11, 0.05));
            border-color: rgba(251, 191, 36, 0.2);
            color: var(--text-secondary);
        }

        .metric-filter-btn:hover {
            border-color: rgba(251, 191, 36, 0.5);
            background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(245, 158, 11, 0.1));
        }

        .metric-filter-btn.active {
            background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.15));
            border-color: rgba(251, 191, 36, 0.6);
            color: #fbbf24;
            box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
        }

        .sub-category-container { 
            display: none; 
            margin-left: var(--space-6);
            margin-top: var(--space-3);
            padding-left: var(--space-4);
            border-left: 2px solid var(--border-color);
        }
        
        /* Affichage des sous-catégories uniquement quand le radio correspondant est coché */
        .sub-category-container {
            display: none;
        }
        
        input[type="radio"]:checked + label + .sub-category-container { 
            display: block; 
        }
        
        /* ===============================================
           SYSTÈME CARTOUCHES BITCOIN MODERNE 
           =============================================== */
        
        .main-cat-label { 
            /* Layout et dimensions */
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.5rem 0.75rem;
            border-radius: 12px;
            margin-bottom: var(--space-2);
            
            /* Typographie optimisée */
            font-size: 0.65rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            white-space: nowrap;
            
            /* Style de base neutre (état non-sélectionné) */
            background: var(--neutral-bg);
            border: 1px solid var(--neutral-border);
            color: var(--neutral-badge);
            
            /* Glassmorphism moderne */
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            box-shadow: inset 0 1px 0 var(--glass-highlight);
            
            /* Animations et interactivité */
            position: relative;
            cursor: pointer;
            transform: translateZ(0);
            will-change: transform, background, border-color;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .sub-cat-label {
            /* Layout et dimensions */
            display: flex;
            align-items: center;
            padding: 0.6rem var(--space-4);
            margin-bottom: var(--space-1);
            border-radius: 8px;
            
            /* Typographie sous-catégories */
            font-size: 0.65rem; /* Cohérent avec main-cat-label */
            font-weight: 500;
            letter-spacing: 0.025em;
            
            /* Style de base neutre (cohérent avec main-cat-label) */
            background: var(--neutral-bg);
            border: 1px solid transparent;
            border-left: 3px solid transparent;
            color: var(--neutral-badge);
            
            /* Glassmorphism cohérent */
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            
            /* Animations */
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            will-change: transform, background, border-color;
        }
        
        /* États HOVER - Subtils et cohérents */
        .main-cat-label:hover {
            background: var(--neutral-hover-bg);
            border-color: var(--neutral-hover-border);
            transform: translateY(-1px) translateZ(0);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 
                        0 2px 8px rgba(0, 0, 0, 0.15);
        }
        
        /* Masquer les checkboxes HTML traditionnelles pour style unifié */
        .sub-cat-label input[type="checkbox"] {
            position: absolute;
            opacity: 0;
            pointer-events: none;
            width: 0;
            height: 0;
        }

        .sub-cat-label:hover {
            background: var(--neutral-hover-bg);
            border-left-color: var(--neutral-light);
            transform: translateX(2px) translateZ(0);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
        }
        
        /* États SÉLECTIONNÉS - Orange Bitcoin exclusif */
        input[type="radio"]:checked + label.main-cat-label,
        input[type="checkbox"]:checked + label.main-cat-label { 
            /* Gradient Bitcoin authentique */
            background: var(--bitcoin-gradient);
            border: 1px solid var(--bitcoin-orange);
            color: #000; /* Texte noir pour contraste optimal */
            
            /* Effets visuels Bitcoin */
            box-shadow: var(--bitcoin-shadow), 
                        inset 0 1px 0 rgba(255, 255, 255, 0.2);
            font-weight: 700;
            
            /* Indicateur non-couleur pour accessibilité */
            position: relative;
        }
        
        input[type="radio"]:checked + label.main-cat-label::before,
        input[type="checkbox"]:checked + label.main-cat-label::before {
            content: '';
            position: absolute;
            left: -2px;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 60%;
            background: var(--bitcoin-orange);
            border-radius: 0 2px 2px 0;
        }
        
        label.sub-cat-label:has(input[type="radio"]:checked),
        label.sub-cat-label:has(input[type="checkbox"]:checked) {
            /* IDENTIQUE aux catégories principales - utilisation des mêmes variables */
            background: var(--bitcoin-gradient) !important;
            border: 1px solid var(--bitcoin-orange) !important;
            border-left: 3px solid var(--bitcoin-orange) !important;
            color: #000 !important; /* Texte noir pour contraste optimal sur orange */
            
            /* Effets visuels Bitcoin identiques aux catégories */
            box-shadow: var(--bitcoin-shadow),
                        inset 0 1px 0 rgba(255, 255, 255, 0.2);
            font-weight: 700; /* Même poids que les catégories principales */
            
            /* Transform harmonisé avec les catégories */
            transform: translateX(4px) translateZ(0);
        }
        
        /* OPTIMISATIONS RESPONSIVE ET ACCESSIBILITÉ */
        
        /* Focus states pour accessibilité clavier */
        .main-cat-label:focus,
        .sub-cat-label:focus {
            outline: 2px solid var(--bitcoin-orange);
            outline-offset: 2px;
            z-index: 10;
        }
        
        /* États disabled pour cohérence */
        .main-cat-label:disabled,
        .sub-cat-label:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }
        
        /* Optimisations mobile */
        @media (max-width: 768px) {
            .main-cat-label,
            .sub-cat-label {
                /* Zones tactiles plus grandes sur mobile */
                padding: var(--space-3) var(--space-4);
                font-size: 0.7rem; /* Légèrement plus grand sur mobile */
                
                /* Réduction des effets sur mobile pour performance */
                backdrop-filter: blur(4px);
                -webkit-backdrop-filter: blur(4px);
            }
            
            /* Réduction des transforms pour économiser batterie */
            .main-cat-label:hover,
            .sub-cat-label:hover {
                transform: none;
            }
            
            /* Désactiver TOUS les effets hover sur les catégories mobiles */
            .mobile-category-content:hover,
            .mobile-category-content:active,
            .mobile-category-content:focus {
                background-color: var(--bg-secondary) !important;
                transform: none !important;
                box-shadow: none !important;
            }
            
            .mobile-subcat-item:hover,
            .mobile-subcat-item:active,
            .mobile-subcat-item:focus {
                background-color: var(--bg-secondary) !important;
                transform: none !important;
            }
            
            /* CORRECTION CRITIQUE : Forcer le fond stable du conteneur des catégories */
            .mobile-layout main,
            .mobile-layout section,
            #mobile-fixed-categories {
                background-color: var(--bg-main) !important;
                background: var(--bg-main) !important;
            }
            
            /* Maintien des transforms sur sélection pour feedback visuel */
            input[type="radio"]:checked + label.sub-cat-label,
            input[type="checkbox"]:checked + label.sub-cat-label {
                transform: translateX(2px) translateZ(0);
            }
        }
        
        /* Optimisations haute densité (Retina) */
        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
            .main-cat-label,
            .sub-cat-label {
                /* Bordures plus fines sur écrans haute densité */
                border-width: 0.5px;
            }
            
            .sub-cat-label {
                border-left-width: 2px;
            }
            
            input[type="radio"]:checked + label.sub-cat-label,
            input[type="checkbox"]:checked + label.sub-cat-label {
                border-left-width: 2px;
            }
        }
        
        /* Support motion réduite pour accessibilité */
        @media (prefers-reduced-motion: reduce) {
            .main-cat-label,
            .sub-cat-label {
                transition: background-color 0.2s ease, 
                           border-color 0.2s ease,
                           color 0.2s ease;
            }
            
            .main-cat-label:hover,
            .sub-cat-label:hover,
            input[type="radio"]:checked + label,
            input[type="checkbox"]:checked + label {
                transform: none;
            }
        }
        .copy-btn .fa-copy { display: inline-block; } .copy-btn .fa-check { display: none; } .copy-btn.copied .fa-copy { display: none; } .copy-btn.copied .fa-check { display: inline-block; }
        .chart-container { position: relative; height: 300px; width: 100%; }
        .rarity-gauge { position: relative; width: 150px; height: 150px; border-radius: 50%; background: conic-gradient(var(--rarity-color) calc(var(--rarity-percent) * 1%), var(--border-color) 0); display: flex; align-items: center; justify-content: center; transition: background 0.5s ease-in-out; }
        .rarity-gauge-inner { width: 85%; height: 85%; background: var(--bg-card); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
        .table-percent { font-size: 0.75rem; color: var(--text-secondary); margin-left: 4px; }
        
        body.modal-open { overflow: hidden; }

        #info-modal {
            display: none; position: fixed; inset: 0; z-index: 50;
            background-color: rgba(0, 0, 0, 0.8);
            align-items: center; justify-content: center; padding: 1rem;
        }
        #info-modal.show { display: flex; }
        .modal-content-wrapper {
            background-color: var(--bg-card); border: 1px solid var(--border-color);
            border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
            width: 100%; max-width: 42rem; max-height: 85vh;
            display: flex; flex-direction: column; overflow: hidden;
        }
        .modal-header {
            flex-shrink: 0; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color);
            display: flex; justify-content: space-between; align-items: center;
        }
        #modal-body {
            flex-grow: 1; overflow-y: auto; min-height: 0; padding: 1.5rem; scroll-behavior: smooth;
        }
        #modal-body h4 { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--text-primary); }
        #modal-body p { margin-bottom: 1rem; color: var(--text-secondary); }
        #modal-body ul { list-style-type: disc; padding-left: 1.5rem; margin-top: 0.5rem; margin-bottom: 0.5rem; }
        #modal-body li { margin-bottom: 0.25rem; }
        #modal-body a { color: var(--accent-gold); }
        #modal-body a:hover { text-decoration: underline; }
        #modal-body strong { font-weight: 700; color: var(--text-primary); }
        #modal-body .summary-box {
             margin-top: 1rem; padding: 0.75rem;
             background-color: var(--bg-main);
             border-radius: 0.5rem;
        }
        /* Styles pour les tableaux - Design Tab04 */
        .overflow-x-auto {
            border-radius: 12px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
            background: #1A1A1A;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
        }

        /* Table à 2 colonnes (Position) - largeur limitée */
        table.position-table {
            width: auto;
            max-width: 600px;
        }

        table.position-table th,
        table.position-table td {
            padding: 18px 30px;
        }

        th, td {
            padding: 18px 20px;
            text-align: left;
            border-bottom: 1px solid rgba(212, 175, 55, 0.2);
        }

        /* En-tête du tableau */
        thead {
            background: linear-gradient(135deg, #D4AF37, #B8860B);
            color: #121212;
        }

        th {
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* Corps du tableau */
        tbody tr {
            transition: all 0.3s ease;
        }

        tbody tr:hover {
            background-color: rgba(212, 175, 55, 0.1);
            box-shadow: 0 4px 20px rgba(212, 175, 55, 0.15);
        }

        /* Pied de page (Total) */
        tfoot {
            background-color: #151515;
            border-top: 2px solid #D4AF37;
        }

        tfoot td {
            font-weight: 700;
            color: #FFFFFF;
        }

        .total-label {
            text-align: right;
            padding-right: 30px;
            font-size: 1.1em;
            text-transform: uppercase;
        }

        .total-value {
            color: #D4AF37;
            font-size: 1.4em;
            letter-spacing: 1px;
        }

        /* Alignement colonnes numériques */
        .numeric-column {
            text-align: right;
        }

        /* Classes d'accent pour compatibilité */
        .table-header-accent {
            color: #121212;
        }
        .table-footer-accent {
            color: #D4AF37;
        }
        .table-year-accent {
            color: var(--accent-blue);
        }
        /* Correction pour le sélecteur de langue */
        select, select option {
            background-color: var(--bg-main);
            color: var(--text-primary);
            border-color: var(--border-color);
        }
        /* Amélioration de l'espacement général */
        .sidebar .mb-6 {
            margin-bottom: var(--space-8);
        }
        
        /* Styles pour une meilleure hiérarchie visuelle */
        .categories-section {
            padding: var(--space-6);
            background: var(--bg-card);
            border-radius: 12px;
            border: 1px solid var(--border-color);
        }
        
        .category-group {
            margin-bottom: var(--space-6);
            padding: var(--space-2);
            border-radius: 8px;
            transition: all 0.2s ease;
        }
        
        .category-group:hover {
            background: rgba(22, 27, 34, 0.3);
        }
        
        /* Amélioration des stats count */
        .stat-count {
            background: rgba(210, 153, 34, 0.1);
            border-radius: 12px;
            padding: var(--space-1) var(--space-2);
            font-size: 0.875rem; /* 14px minimum pour WCAG */
            font-weight: 600;
            color: var(--accent-gold);
        }
        
        /* MICRO-INTERACTIONS */
        .hover-lift {
            transition: transform 0.2s ease;
        }
        .hover-lift:hover {
            transform: translateY(-2px);
        }
        
        /* Loading Animations */
        .loading-shimmer {
            background: linear-gradient(90deg, 
                var(--bg-card) 25%, 
                var(--border-color) 50%, 
                var(--bg-card) 75%);
            background-size: 200% 100%;
            animation: shimmer 2s infinite;
        }
        
        /* SCROLL SYNCHRONIZATION SYSTEM */
        .sidebar {
            min-height: 0;
        }

        .sidebar-scrollable {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: var(--border-color) transparent;
            scrollbar-gutter: stable;
        }

        .sidebar-scrollable::-webkit-scrollbar {
            width: 6px;
        }

        .sidebar-scrollable::-webkit-scrollbar-track {
            background: transparent;
        }

        .sidebar-scrollable::-webkit-scrollbar-thumb {
            background-color: var(--border-color);
            border-radius: 3px;
        }

        .sidebar-scrollable::-webkit-scrollbar-thumb:hover {
            background-color: var(--accent-gold);
        }


        /* RESPONSIVE SYSTEM */
        .mobile-only { display: block; }
        .desktop-only { display: none; }
        .tablet-up { display: none; }
        
        /* Mobile Bottom Navigation */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--bg-card);
            border-top: 1px solid var(--border-color);
            z-index: 40;
            backdrop-filter: blur(10px);
        }
        
        .nav-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0.5rem 0.25rem;
            color: var(--text-secondary);
            transition: all 0.2s ease;
            cursor: pointer;
        }

        .nav-item img {
            width: 40px;
            height: 40px;
            object-fit: contain;
        }
        
        .nav-item:hover, .nav-item.active {
            color: var(--accent-gold);
        }
        
        .nav-item.active {
            background: rgba(210, 153, 34, 0.1);
            position: relative;
        }
        
        .nav-item.active::after {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60%;
            height: 3px;
            background: linear-gradient(135deg, var(--bitcoin-orange), var(--accent-gold));
            border-radius: 0 0 4px 4px;
        }

        /* ========== SYSTÈME DE CARTOUCHES BITCOIN MODERNES ========== */
        
        /* Variables couleurs thématique Bitcoin */
        :root {
            /* Couleurs principales Bitcoin */
            --bitcoin-orange: #F7931A;
            --bitcoin-gold: #D29922;
            --bitcoin-silver: #C0C5CC;
            --bitcoin-copper: #B87333;
            
            /* Variables neutres pour cartouches inactives */
            --neutral-bg: rgba(168, 178, 188, 0.08);
            --neutral-border: rgba(168, 178, 188, 0.15);
            --neutral-text: #8B949E;
            --neutral-hover-bg: rgba(168, 178, 188, 0.12);
            --neutral-hover-border: rgba(168, 178, 188, 0.25);
            
            /* Glassmorphism pour cartouches */
            --cartouche-blur: blur(8px);
            --cartouche-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.15);
            --cartouche-shadow-active: 0 4px 16px rgba(247, 147, 26, 0.25);
        }
        
        /* Hamburger Menu Styles */
        .hamburger {
            width: 30px;
            height: 24px;
            position: relative;
            cursor: pointer;
            z-index: 1001;
        }

        .hamburger span {
            display: block;
            position: absolute;
            height: 3px;
            width: 100%;
            background: var(--accent-gold);
            border-radius: 3px;
            opacity: 1;
            left: 0;
            transform: rotate(0deg);
            transition: all 0.25s ease-in-out;
        }

        .hamburger span:nth-child(1) {
            top: 0px;
        }

        .hamburger span:nth-child(2) {
            top: 10px;
        }

        .hamburger span:nth-child(3) {
            top: 20px;
        }

        .hamburger.active span:nth-child(1) {
            top: 10px;
            transform: rotate(135deg);
        }

        .hamburger.active span:nth-child(2) {
            opacity: 0;
            left: -60px;
        }

        .hamburger.active span:nth-child(3) {
            top: 10px;
            transform: rotate(-135deg);
        }

        .menu-overlay-right {
            position: fixed;
            top: 0;
            left: -100%;
            width: 80%;
            max-width: 280px;
            height: 100vh;
            background: linear-gradient(135deg, rgba(26, 26, 26, 0.98) 0%, rgba(13, 17, 23, 0.98) 100%);
            backdrop-filter: blur(20px);
            transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 1000;
            overflow-y: auto;
            box-shadow: 10px 0 40px rgba(212, 175, 55, 0.15);
        }

        .menu-overlay-right.active {
            left: 0;
        }

        .menu-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: rgba(0, 0, 0, 0.7);
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            z-index: 999;
        }

        .menu-backdrop.active {
            opacity: 1;
            visibility: visible;
        }

        .sidebar-menu-item {
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
            border-radius: 8px;
        }

        .sidebar-menu-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
            transition: left 0.5s ease;
        }

        .sidebar-menu-item:hover::before {
            left: 100%;
        }

        .sidebar-menu-item:active {
            background: rgba(212, 175, 55, 0.1);
            transform: scale(0.98);
        }

        .menu-overlay-right::-webkit-scrollbar {
            width: 6px;
        }

        .menu-overlay-right::-webkit-scrollbar-track {
            background: var(--bg-main);
        }

        .menu-overlay-right::-webkit-scrollbar-thumb {
            background: var(--accent-gold);
            border-radius: 3px;
        }

        /* Mobile Header */
        .mobile-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: var(--bg-main);
            border-bottom: 1px solid var(--border-color);
            z-index: 50;
            backdrop-filter: blur(10px);
        }
        
        .hamburger-menu {
            background: none;
            border: none;
            color: var(--text-primary);
            font-size: 1.5rem;
            cursor: pointer;
        }
        
        /* Quick Filters Horizontal Scroll */
        .quick-filters {
            display: flex;
            overflow-x: auto;
            gap: var(--space-3);
            padding-bottom: var(--space-2);
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        
        .quick-filters::-webkit-scrollbar {
            display: none;
        }
        
        .filter-chip.flex-shrink-0 {
            flex-shrink: 0;
        }
        
        /* Mobile Category Cards */
        .mobile-category-card {
            display: block;
            width: 100%;
        }
        
        .mobile-category-content {
            transition: all 0.2s ease;
            min-height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* Hover effect removed - using desktop-style selection only */
        
        /* État sélectionné */
        .mobile-category-radio:checked + .mobile-category-content {
            border-color: var(--accent-gold);
            background: transparent;
            box-shadow: 0 0 0 1px var(--accent-gold);
        }
        
        .mobile-category-radio:checked + .mobile-category-content .text-text-primary {
            color: var(--accent-gold);
        }
        
        /* Pas d'animation de fond - feedback visuel par bordure uniquement */
        
        /* Mobile Subcategory Items */
        .mobile-subcat-item {
            transition: all 0.2s ease;
            position: relative;
        }

        .mobile-subcat-item:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .mobile-subcat-item.selected {
            background: var(--bitcoin-gradient) !important;
            border: 1px solid var(--bitcoin-orange) !important;
            border-left: 3px solid var(--bitcoin-orange) !important;
            color: #000 !important;
        }

        .mobile-subcat-item.selected .text-text-primary,
        .mobile-subcat-item.selected .stat-count {
            color: #000 !important;
        }

        /* Style uniforme pour les compteurs Supply */
        .mobile-subcat-item .stat-count {
            background: rgba(210, 153, 34, 0.1);
            border-radius: 12px;
            padding: var(--space-1) var(--space-2);
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--accent-gold);
            flex-shrink: 0;
        }

        /* Ajustements mobiles pour mobile-subcat-item */
        @media (max-width: 768px) {
            .mobile-subcat-item .mobile-subcat-name {
                max-width: calc(100vw - 200px);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .mobile-subcat-item .stat-count {
                font-size: 0.75rem;
                padding: 0.25rem 0.5rem;
            }
        }

        /* ==========================================
           UNCOMMON INFO MODAL - DARK GOLD MODERNE
           ========================================== */

        /* Bouton icône info inline dans la cartouche desktop */
        .uncommon-info-icon {
            background: transparent;
            border: none;
            color: var(--accent-gold);
            font-size: 1.125rem;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-left: 0.5rem;
            padding: 0.25rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            opacity: 0.9;
            flex-shrink: 0;
            vertical-align: middle;
            user-select: none;
        }

        .uncommon-info-icon:focus {
            outline: 2px solid var(--accent-gold);
            outline-offset: 2px;
        }

        .uncommon-info-icon:hover {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(210, 153, 34, 0.6));
        }

        .uncommon-info-icon:active {
            transform: scale(0.95);
        }

        /* Bouton icône info mobile */
        .uncommon-info-icon-mobile {
            background: transparent;
            border: none;
            color: var(--accent-gold);
            font-size: 1.125rem;
            cursor: pointer;
            transition: all 0.3s ease;
            padding: 0.25rem;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.9;
            margin-left: 0.5rem;
            user-select: none;
        }

        .uncommon-info-icon-mobile:focus {
            outline: 2px solid var(--accent-gold);
            outline-offset: 2px;
        }

        .uncommon-info-icon-mobile:hover,
        .uncommon-info-icon-mobile:active {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(210, 153, 34, 0.6));
        }

        /* Bouton icône info Alpha - desktop */
        .alpha-info-icon {
            background: transparent;
            border: none;
            color: var(--accent-gold);
            font-size: 1.125rem;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-left: 0.5rem;
            padding: 0.25rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            opacity: 0.9;
            flex-shrink: 0;
            vertical-align: middle;
            user-select: none;
        }

        .alpha-info-icon:focus {
            outline: 2px solid var(--accent-gold);
            outline-offset: 2px;
        }

        .alpha-info-icon:hover {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(210, 153, 34, 0.6));
        }

        .alpha-info-icon:active {
            transform: scale(0.95);
        }

        /* Bouton icône info Alpha - mobile */
        .alpha-info-icon-mobile {
            background: transparent;
            border: none;
            color: var(--accent-gold);
            font-size: 1.125rem;
            cursor: pointer;
            transition: all 0.3s ease;
            padding: 0.25rem;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.9;
            margin-left: 0.5rem;
            user-select: none;
        }

        .alpha-info-icon-mobile:focus {
            outline: 2px solid var(--accent-gold);
            outline-offset: 2px;
        }

        .alpha-info-icon-mobile:hover,
        .alpha-info-icon-mobile:active {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(210, 153, 34, 0.6));
        }

        /* Bouton icône info Black Uncommon - desktop */
        .blackuncommon-info-icon {
            background: transparent;
            border: none;
            color: var(--accent-gold);
            font-size: 1.125rem;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-left: 0.5rem;
            padding: 0.25rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            opacity: 0.9;
            flex-shrink: 0;
            vertical-align: middle;
            user-select: none;
        }

        .blackuncommon-info-icon:focus {
            outline: 2px solid var(--accent-gold);
            outline-offset: 2px;
        }

        .blackuncommon-info-icon:hover {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(210, 153, 34, 0.6));
        }

        .blackuncommon-info-icon:active {
            transform: scale(0.95);
        }

        /* Bouton icône info Black Uncommon - mobile */
        .blackuncommon-info-icon-mobile {
            background: transparent;
            border: none;
            color: var(--accent-gold);
            font-size: 1.125rem;
            cursor: pointer;
            transition: all 0.3s ease;
            padding: 0.25rem;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.9;
            margin-left: 0.5rem;
            user-select: none;
        }

        .blackuncommon-info-icon-mobile:focus {
            outline: 2px solid var(--accent-gold);
            outline-offset: 2px;
        }

        .blackuncommon-info-icon-mobile:hover,
        .blackuncommon-info-icon-mobile:active {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(210, 153, 34, 0.6));
        }

        /* Bouton icône info Omega - desktop */
        .omega-info-icon {
            background: transparent;
            border: none;
            color: var(--accent-gold);
            font-size: 1.125rem;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-left: 0.5rem;
            padding: 0.25rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            opacity: 0.9;
            flex-shrink: 0;
            vertical-align: middle;
            user-select: none;
        }

        .omega-info-icon:focus {
            outline: 2px solid var(--accent-gold);
            outline-offset: 2px;
        }

        .omega-info-icon:hover {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(210, 153, 34, 0.6));
        }

        .omega-info-icon:active {
            transform: scale(0.95);
        }

        /* Bouton icône info Omega - mobile */
        .omega-info-icon-mobile {
            background: transparent;
            border: none;
            color: var(--accent-gold);
            font-size: 1.125rem;
            cursor: pointer;
            transition: all 0.3s ease;
            padding: 0.25rem;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.9;
            margin-left: 0.5rem;
            user-select: none;
        }

        .omega-info-icon-mobile:focus {
            outline: 2px solid var(--accent-gold);
            outline-offset: 2px;
        }

        .omega-info-icon-mobile:hover,
        .omega-info-icon-mobile:active {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(210, 153, 34, 0.6));
        }

        /* Bouton icône info Palindrome - desktop */
        .palindrome-info-icon {
            background: transparent;
            border: none;
            color: var(--accent-gold);
            font-size: 1.125rem;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-left: 0.5rem;
            padding: 0.25rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            opacity: 0.9;
            flex-shrink: 0;
            vertical-align: middle;
            user-select: none;
        }

        .palindrome-info-icon:focus {
            outline: 2px solid var(--accent-gold);
            outline-offset: 2px;
        }

        .palindrome-info-icon:hover {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(210, 153, 34, 0.6));
        }

        .palindrome-info-icon:active {
            transform: scale(0.95);
        }

        /* Bouton icône info Palindrome - mobile */
        .palindrome-info-icon-mobile {
            background: transparent;
            border: none;
            color: var(--accent-gold);
            font-size: 1.125rem;
            cursor: pointer;
            transition: all 0.3s ease;
            padding: 0.25rem;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.9;
            margin-left: 0.5rem;
            user-select: none;
        }

        .palindrome-info-icon-mobile:focus {
            outline: 2px solid var(--accent-gold);
            outline-offset: 2px;
        }

        .palindrome-info-icon-mobile:hover,
        .palindrome-info-icon-mobile:active {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(210, 153, 34, 0.6));
        }

        /* Bouton icône info 1D - desktop */
        .onedee-info-icon {
            background: transparent;
            border: none;
            color: var(--accent-gold);
            font-size: 1.125rem;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-left: 0.5rem;
            padding: 0.25rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            opacity: 0.9;
            flex-shrink: 0;
            vertical-align: middle;
            user-select: none;
        }

        .onedee-info-icon:focus {
            outline: 2px solid var(--accent-gold);
            outline-offset: 2px;
        }

        .onedee-info-icon:hover {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(210, 153, 34, 0.6));
        }

        .onedee-info-icon:active {
            transform: scale(0.95);
        }

        /* Bouton icône info 1D - mobile */
        .onedee-info-icon-mobile {
            background: transparent;
            border: none;
            color: var(--accent-gold);
            font-size: 1.125rem;
            cursor: pointer;
            transition: all 0.3s ease;
            padding: 0.25rem;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.9;
            margin-left: 0.5rem;
            user-select: none;
        }

        .onedee-info-icon-mobile:focus {
            outline: 2px solid var(--accent-gold);
            outline-offset: 2px;
        }

        .onedee-info-icon-mobile:hover,
        .onedee-info-icon-mobile:active {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(210, 153, 34, 0.6));
        }

        .hierarchical-category-name {
            display: flex;
            align-items: center;
        }

        /* 1D Modal Styles */
        .onedee-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(10px);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 999999;
            animation: fadeIn 0.3s ease;
        }

        .onedee-modal-container {
            background: linear-gradient(145deg, #1a1a1a 0%, #0f0f0f 100%);
            border: 1px solid rgba(255, 215, 0, 0.3);
            border-radius: 20px;
            max-width: 900px;
            width: 90%;
            max-height: 90vh;
            overflow: hidden;
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.8),
                0 0 100px rgba(255, 215, 0, 0.1),
                inset 0 1px 0 rgba(255, 215, 0, 0.2);
            animation: slideUp 0.4s ease;
        }

        .onedee-modal-container-mobile {
            background: linear-gradient(145deg, #1a1a1a 0%, #0f0f0f 100%);
            border: 1px solid rgba(255, 215, 0, 0.3);
            border-radius: 20px;
            max-width: 600px;
            width: 90%;
            max-height: 90vh;
            overflow: hidden;
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.8),
                0 0 100px rgba(255, 215, 0, 0.1),
                inset 0 1px 0 rgba(255, 215, 0, 0.2);
            animation: slideUp 0.4s ease;
        }

        .onedee-modal-header {
            position: relative;
            padding: 24px 24px 20px;
            background: linear-gradient(180deg, rgba(255, 215, 0, 0.05) 0%, transparent 100%);
            border-bottom: 1px solid rgba(255, 215, 0, 0.2);
        }

        .onedee-category-badge {
            display: inline-block;
            background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
            color: #0a0a0a;
            font-size: 12px;
            font-weight: 700;
            padding: 4px 12px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 12px;
        }

        .onedee-modal-title {
            color: #FFD700;
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 8px;
            text-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
        }

        .onedee-modal-subtitle {
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
            font-weight: 400;
        }

        .onedee-close-btn {
            position: absolute;
            top: 24px;
            right: 24px;
            width: 32px;
            height: 32px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 215, 0, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .onedee-close-btn:hover {
            background: rgba(255, 215, 0, 0.2);
            transform: rotate(90deg);
        }

        .onedee-close-btn::before,
        .onedee-close-btn::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 2px;
            background: #FFD700;
            border-radius: 2px;
        }

        .onedee-close-btn::before {
            transform: rotate(45deg);
        }

        .onedee-close-btn::after {
            transform: rotate(-45deg);
        }

        /* Desktop: Layout côte à côte */
        .onedee-modal-body {
            display: flex;
        }

        .onedee-modal-image {
            width: 45%;
            aspect-ratio: 16/9;
            background: #0a0a0a;
            position: relative;
            overflow: hidden;
            border-right: 1px solid rgba(255, 215, 0, 0.2);
        }

        .onedee-modal-image img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .onedee-modal-image::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
            pointer-events: none;
        }

        .onedee-modal-content {
            width: 55%;
            padding: 24px;
            overflow-y: auto;
            max-height: 500px;
        }

        .onedee-modal-content::-webkit-scrollbar {
            width: 4px;
        }

        .onedee-modal-content::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .onedee-modal-content::-webkit-scrollbar-thumb {
            background: rgba(255, 215, 0, 0.5);
            border-radius: 2px;
        }

        /* Mobile: Layout empilé */
        .onedee-modal-image-mobile {
            width: 100%;
            height: 300px;
            background: #0a0a0a;
            position: relative;
            overflow: hidden;
            border-bottom: 1px solid rgba(255, 215, 0, 0.2);
        }

        .onedee-modal-image-mobile img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .onedee-modal-image-mobile::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
            pointer-events: none;
        }

        .onedee-modal-content-mobile {
            padding: 24px;
            max-height: 300px;
            overflow-y: auto;
        }

        .onedee-modal-content-mobile::-webkit-scrollbar {
            width: 4px;
        }

        .onedee-modal-content-mobile::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .onedee-modal-content-mobile::-webkit-scrollbar-thumb {
            background: rgba(255, 215, 0, 0.5);
            border-radius: 2px;
        }

        .onedee-description-text {
            color: rgba(255, 255, 255, 0.9);
            font-size: 15px;
            line-height: 1.7;
            margin-bottom: 20px;
        }

        .onedee-examples-section {
            background: rgba(255, 215, 0, 0.05);
            border: 1px solid rgba(255, 215, 0, 0.2);
            border-radius: 12px;
            padding: 16px;
            margin-top: 20px;
        }

        .onedee-examples-title {
            color: #FFD700;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 12px;
        }

        .onedee-example-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .onedee-example-item {
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255, 215, 0, 0.3);
            padding: 6px 12px;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            color: #FFD700;
            transition: all 0.3s ease;
        }

        .onedee-example-item:hover {
            background: rgba(255, 215, 0, 0.1);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 215, 0, 0.2);
        }

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

        @media (max-width: 768px) {
            .onedee-modal-container {
                width: 95%;
                margin: 10px;
                max-width: 500px;
            }

            .onedee-modal-container-mobile {
                width: 95%;
                margin: 10px;
            }

            .onedee-modal-header {
                padding: 12px 16px 10px;
            }

            .onedee-modal-title {
                font-size: 20px;
                margin-bottom: 4px;
            }

            .onedee-modal-subtitle {
                font-size: 12px;
            }

            .onedee-modal-image {
                height: 200px;
            }

            .onedee-close-btn {
                top: 12px;
                right: 12px;
                width: 28px;
                height: 28px;
            }
        }

        /* 2D Modal Styles */
        .twodee-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(10px);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 999999;
            animation: fadeIn 0.3s ease;
        }

        .twodee-modal-container {
            background: linear-gradient(145deg, #1a1a1a 0%, #0f0f0f 100%);
            border: 1px solid rgba(255, 215, 0, 0.3);
            border-radius: 20px;
            max-width: 900px;
            width: 90%;
            max-height: 90vh;
            overflow: hidden;
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.8),
                0 0 100px rgba(255, 215, 0, 0.1),
                inset 0 1px 0 rgba(255, 215, 0, 0.2);
            animation: slideUp 0.4s ease;
        }

        .twodee-modal-container-mobile {
            background: linear-gradient(145deg, #1a1a1a 0%, #0f0f0f 100%);
            border: 1px solid rgba(255, 215, 0, 0.3);
            border-radius: 20px;
            max-width: 600px;
            width: 90%;
            max-height: 90vh;
            overflow: hidden;
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.8),
                0 0 100px rgba(255, 215, 0, 0.1),
                inset 0 1px 0 rgba(255, 215, 0, 0.2);
            animation: slideUp 0.4s ease;
        }

        .twodee-modal-header {
            position: relative;
            padding: 24px 24px 20px;
            background: linear-gradient(180deg, rgba(255, 215, 0, 0.05) 0%, transparent 100%);
            border-bottom: 1px solid rgba(255, 215, 0, 0.2);
        }

        .twodee-category-badge {
            display: inline-block;
            background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
            color: #0a0a0a;
            font-size: 12px;
            font-weight: 700;
            padding: 4px 12px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 12px;
        }

        .twodee-modal-title {
            color: #FFD700;
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 8px;
            text-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
        }

        .twodee-modal-subtitle {
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
            font-weight: 400;
        }

        .twodee-close-btn {
            position: absolute;
            top: 24px;
            right: 24px;
            width: 32px;
            height: 32px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 215, 0, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .twodee-close-btn:hover {
            background: rgba(255, 215, 0, 0.2);
            transform: rotate(90deg);
        }

        .twodee-close-btn::before,
        .twodee-close-btn::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 2px;
            background: #FFD700;
            border-radius: 2px;
        }

        .twodee-close-btn::before {
            transform: rotate(45deg);
        }

        .twodee-close-btn::after {
            transform: rotate(-45deg);
        }

        /* Desktop: Layout côte à côte */
        .twodee-modal-body {
            display: flex;
        }

        .twodee-modal-image {
            width: 45%;
            aspect-ratio: 16/9;
            background: #0a0a0a;
            position: relative;
            overflow: hidden;
            border-right: 1px solid rgba(255, 215, 0, 0.2);
        }

        .twodee-modal-image img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .twodee-modal-image::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
            pointer-events: none;
        }

        .twodee-modal-content {
            width: 55%;
            padding: 24px;
            overflow-y: auto;
            max-height: 500px;
        }

        .twodee-modal-content::-webkit-scrollbar {
            width: 4px;
        }

        .twodee-modal-content::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .twodee-modal-content::-webkit-scrollbar-thumb {
            background: rgba(255, 215, 0, 0.5);
            border-radius: 2px;
        }

        /* Mobile: Layout empilé */
        .twodee-modal-image-mobile {
            width: 100%;
            height: 300px;
            background: #0a0a0a;
            position: relative;
            overflow: hidden;
            border-bottom: 1px solid rgba(255, 215, 0, 0.2);
        }

        .twodee-modal-image-mobile img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .twodee-modal-image-mobile::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
            pointer-events: none;
        }

        .twodee-modal-content-mobile {
            padding: 24px;
            max-height: 300px;
            overflow-y: auto;
        }

        .twodee-modal-content-mobile::-webkit-scrollbar {
            width: 4px;
        }

        .twodee-modal-content-mobile::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .twodee-modal-content-mobile::-webkit-scrollbar-thumb {
            background: rgba(255, 215, 0, 0.5);
            border-radius: 2px;
        }

        .twodee-description-text {
            color: rgba(255, 255, 255, 0.9);
            font-size: 15px;
            line-height: 1.7;
            margin-bottom: 20px;
        }

        .twodee-examples-section {
            background: rgba(255, 215, 0, 0.05);
            border: 1px solid rgba(255, 215, 0, 0.2);
            border-radius: 12px;
            padding: 16px;
            margin-top: 20px;
        }

        .twodee-examples-title {
            color: #FFD700;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 12px;
        }

        .twodee-example-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .twodee-example-item {
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255, 215, 0, 0.3);
            padding: 6px 12px;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            color: #FFD700;
            transition: all 0.3s ease;
        }

        .twodee-example-item:hover {
            background: rgba(255, 215, 0, 0.1);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 215, 0, 0.2);
        }

        @media (max-width: 768px) {
            .twodee-modal-container {
                width: 95%;
                margin: 10px;
                max-width: 500px;
            }

            .twodee-modal-container-mobile {
                width: 95%;
                margin: 10px;
            }

            .twodee-modal-header {
                padding: 12px 16px 10px;
            }

            .twodee-modal-title {
                font-size: 20px;
                margin-bottom: 4px;
            }

            .twodee-modal-subtitle {
                font-size: 12px;
            }

            .twodee-modal-image {
                height: 200px;
            }

            .twodee-close-btn {
                top: 12px;
                right: 12px;
                width: 28px;
                height: 28px;
            }
        }

        /* Bouton icône info 2D - desktop */
        .twodee-info-icon {
            background: transparent;
            border: none;
            color: var(--accent-gold);
            font-size: 1.125rem;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-left: 0.5rem;
            padding: 0.25rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            opacity: 0.9;
            flex-shrink: 0;
            vertical-align: middle;
            user-select: none;
        }

        .twodee-info-icon:focus {
            outline: 2px solid var(--accent-gold);
            outline-offset: 2px;
        }

        .twodee-info-icon:hover {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(210, 153, 34, 0.6));
        }

        .twodee-info-icon:active {
            transform: scale(0.95);
        }

        /* Bouton icône info 2D - mobile */
        .twodee-info-icon-mobile {
            background: transparent;
            border: none;
            color: var(--accent-gold);
            font-size: 1.125rem;
            cursor: pointer;
            transition: all 0.3s ease;
            padding: 0.25rem;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.9;
            margin-left: 0.5rem;
            user-select: none;
        }

        .twodee-info-icon-mobile:focus {
            outline: 2px solid var(--accent-gold);
            outline-offset: 2px;
        }

        .twodee-info-icon-mobile:hover,
        .twodee-info-icon-mobile:active {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(210, 153, 34, 0.6));
        }

        /* 3D Modal Styles */
        .threedee-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(10px);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 999999;
            animation: fadeIn 0.3s ease;
        }

        .threedee-modal-container {
            background: linear-gradient(145deg, #1a1a1a 0%, #0f0f0f 100%);
            border: 1px solid rgba(255, 215, 0, 0.3);
            border-radius: 20px;
            max-width: 900px;
            width: 90%;
            max-height: 90vh;
            overflow: hidden;
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.8),
                0 0 100px rgba(255, 215, 0, 0.1),
                inset 0 1px 0 rgba(255, 215, 0, 0.2);
            animation: slideUp 0.4s ease;
        }

        .threedee-modal-container-mobile {
            background: linear-gradient(145deg, #1a1a1a 0%, #0f0f0f 100%);
            border: 1px solid rgba(255, 215, 0, 0.3);
            border-radius: 20px;
            max-width: 600px;
            width: 90%;
            max-height: 90vh;
            overflow: hidden;
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.8),
                0 0 100px rgba(255, 215, 0, 0.1),
                inset 0 1px 0 rgba(255, 215, 0, 0.2);
            animation: slideUp 0.4s ease;
        }

        .threedee-modal-header {
            position: relative;
            padding: 24px 24px 20px;
            background: linear-gradient(180deg, rgba(255, 215, 0, 0.05) 0%, transparent 100%);
            border-bottom: 1px solid rgba(255, 215, 0, 0.2);
        }

        .threedee-category-badge {
            display: inline-block;
            background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
            color: #0a0a0a;
            font-size: 12px;
            font-weight: 700;
            padding: 4px 12px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 12px;
        }

        .threedee-modal-title {
            color: #FFD700;
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 8px;
            text-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
        }

        .threedee-modal-subtitle {
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
            font-weight: 400;
        }

        .threedee-close-btn {
            position: absolute;
            top: 24px;
            right: 24px;
            width: 32px;
            height: 32px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 215, 0, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .threedee-close-btn:hover {
            background: rgba(255, 215, 0, 0.2);
            transform: rotate(90deg);
        }

        .threedee-close-btn::before,
        .threedee-close-btn::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 2px;
            background: #FFD700;
            border-radius: 2px;
        }

        .threedee-close-btn::before {
            transform: rotate(45deg);
        }

        .threedee-close-btn::after {
            transform: rotate(-45deg);
        }

        /* Desktop: Layout côte à côte */
        .threedee-modal-body {
            display: flex;
        }

        .threedee-modal-image {
            width: 45%;
            aspect-ratio: 16/9;
            background: #0a0a0a;
            position: relative;
            overflow: hidden;
            border-right: 1px solid rgba(255, 215, 0, 0.2);
        }

        .threedee-modal-image img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .threedee-modal-image::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
            pointer-events: none;
        }

        .threedee-modal-content {
            width: 55%;
            padding: 24px;
            overflow-y: auto;
            max-height: 500px;
        }

        .threedee-modal-content::-webkit-scrollbar {
            width: 4px;
        }

        .threedee-modal-content::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .threedee-modal-content::-webkit-scrollbar-thumb {
            background: rgba(255, 215, 0, 0.5);
            border-radius: 2px;
        }

        /* Mobile: Layout empilé */
        .threedee-modal-image-mobile {
            width: 100%;
            height: 300px;
            background: #0a0a0a;
            position: relative;
            overflow: hidden;
            border-bottom: 1px solid rgba(255, 215, 0, 0.2);
        }

        .threedee-modal-image-mobile img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .threedee-modal-image-mobile::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
            pointer-events: none;
        }

        .threedee-modal-content-mobile {
            padding: 24px;
            max-height: 300px;
            overflow-y: auto;
        }

        .threedee-modal-content-mobile::-webkit-scrollbar {
            width: 4px;
        }

        .threedee-modal-content-mobile::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .threedee-modal-content-mobile::-webkit-scrollbar-thumb {
            background: rgba(255, 215, 0, 0.5);
            border-radius: 2px;
        }

        .threedee-description-text {
            color: rgba(255, 255, 255, 0.9);
            font-size: 15px;
            line-height: 1.7;
            margin-bottom: 20px;
        }

        .threedee-examples-section {
            background: rgba(255, 215, 0, 0.05);
            border: 1px solid rgba(255, 215, 0, 0.2);
            border-radius: 12px;
            padding: 16px;
            margin-top: 20px;
        }

        .threedee-examples-title {
            color: #FFD700;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 12px;
        }

        .threedee-example-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .threedee-example-item {
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255, 215, 0, 0.3);
            padding: 6px 12px;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            color: #FFD700;
            transition: all 0.3s ease;
        }

        .threedee-example-item:hover {
            background: rgba(255, 215, 0, 0.1);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 215, 0, 0.2);
        }

        @media (max-width: 768px) {
            .threedee-modal-container {
                width: 95%;
                margin: 10px;
                max-width: 500px;
            }

            .threedee-modal-container-mobile {
                width: 95%;
                margin: 10px;
            }

            .threedee-modal-header {
                padding: 12px 16px 10px;
            }

            .threedee-modal-title {
                font-size: 20px;
                margin-bottom: 4px;
            }

            .threedee-modal-subtitle {
                font-size: 12px;
            }

            .threedee-modal-image {
                height: 200px;
            }

            .threedee-close-btn {
                top: 12px;
                right: 12px;
                width: 28px;
                height: 28px;
            }
        }

        /* Bouton icône info 3D - desktop */
        .threedee-info-icon {
            background: transparent;
            border: none;
            color: var(--accent-gold);
            font-size: 1.125rem;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-left: 0.5rem;
            padding: 0.25rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            opacity: 0.9;
            flex-shrink: 0;
            vertical-align: middle;
            user-select: none;
        }

        .threedee-info-icon:focus {
            outline: 2px solid var(--accent-gold);
            outline-offset: 2px;
        }

        .threedee-info-icon:hover {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(210, 153, 34, 0.6));
        }

        .threedee-info-icon:active {
            transform: scale(0.95);
        }

        /* Bouton icône info 3D - mobile */
        .threedee-info-icon-mobile {
            background: transparent;
            border: none;
            color: var(--accent-gold);
            font-size: 1.125rem;
            cursor: pointer;
            transition: all 0.3s ease;
            padding: 0.25rem;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.9;
            margin-left: 0.5rem;
            user-select: none;
        }

        .threedee-info-icon-mobile:focus {
            outline: 2px solid var(--accent-gold);
            outline-offset: 2px;
        }

        .threedee-info-icon-mobile:hover,
        .threedee-info-icon-mobile:active {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(210, 153, 34, 0.6));
        }

        /* Block286 Modal Styles - Desktop */
        .block286-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(10px);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 999999;
            animation: fadeIn 0.3s ease;
        }

        .block286-modal-container {
            background: linear-gradient(145deg, #1a1a1a 0%, #0f0f0f 100%);
            border: 1px solid rgba(255, 215, 0, 0.3);
            border-radius: 20px;
            max-width: 900px;
            width: 90%;
            max-height: 600px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 100px rgba(255, 215, 0, 0.1), inset 0 1px 0 rgba(255, 215, 0, 0.2);
            animation: slideUp 0.4s ease;
            display: flex;
            flex-direction: column;
        }

        .block286-modal-container-mobile {
            background: linear-gradient(145deg, #1a1a1a 0%, #0f0f0f 100%);
            border: 1px solid rgba(255, 215, 0, 0.3);
            border-radius: 20px;
            max-width: 600px;
            width: 90%;
            max-height: 90vh;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 100px rgba(255, 215, 0, 0.1), inset 0 1px 0 rgba(255, 215, 0, 0.2);
            animation: slideUp 0.4s ease;
        }

        .block286-modal-header,
        .block286-modal-header-mobile {
            position: relative;
            padding: 24px 24px 20px;
            background: linear-gradient(180deg, rgba(255, 215, 0, 0.08) 0%, transparent 100%);
            border-bottom: 1px solid rgba(255, 215, 0, 0.2);
            flex-shrink: 0;
        }

        .block286-category-badge,
        .block286-category-badge-mobile {
            display: inline-block;
            background: linear-gradient(135deg, #FFD700 0%, #B8860B 100%);
            color: #0a0a0a;
            font-size: 12px;
            font-weight: 700;
            padding: 4px 12px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
            box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
        }

        .block286-historical-badge,
        .block286-historical-badge-mobile {
            display: inline-block;
            background: linear-gradient(135deg, #8B4513 0%, #654321 100%);
            color: #FFD700;
            font-size: 11px;
            font-weight: 600;
            padding: 3px 10px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-left: 8px;
            border: 1px solid rgba(255, 215, 0, 0.3);
        }

        .block286-modal-title,
        .block286-modal-title-mobile {
            color: #FFD700;
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 8px;
            text-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
        }

        .block286-modal-subtitle,
        .block286-modal-subtitle-mobile {
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
            font-weight: 400;
        }

        .block286-historical-date,
        .block286-historical-date-mobile {
            color: #FFD700;
            font-size: 13px;
            margin-top: 8px;
            opacity: 0.9;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .block286-historical-date::before,
        .block286-historical-date-mobile::before {
            content: '📅';
            font-size: 14px;
        }

        .block286-close-btn,
        .block286-close-btn-mobile {
            position: absolute;
            top: 24px;
            right: 24px;
            width: 32px;
            height: 32px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 215, 0, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .block286-close-btn:hover,
        .block286-close-btn-mobile:hover {
            background: rgba(255, 215, 0, 0.2);
            transform: rotate(90deg);
        }

        .block286-close-btn::after,
        .block286-close-btn-mobile::after {
            content: '×';
            font-size: 24px;
            color: #FFD700;
            font-weight: 300;
        }

        .block286-close-btn::before,
        .block286-close-btn-mobile::before {
            content: '';
            position: absolute;
            width: 16px;
            height: 2px;
            background: #FFD700;
            border-radius: 2px;
            transform: rotate(45deg);
        }

        .block286-close-btn::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 2px;
            background: #FFD700;
            border-radius: 2px;
            transform: rotate(-45deg);
        }

        .block286-modal-body {
            display: flex;
            flex-direction: row;
            flex: 1;
            min-height: 0;
        }

        .block286-modal-image {
            width: 45%;
            aspect-ratio: 16/9;
            background: linear-gradient(135deg, #0a0a0a 0%, #1a0f00 100%);
            position: relative;
            overflow: hidden;
            border-right: 1px solid rgba(255, 215, 0, 0.2);
        }

        .block286-modal-image img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .block286-modal-image::after {
            display: none;
        }

        .block286-modal-content {
            width: 55%;
            padding: 24px;
            overflow-y: auto;
            max-height: 500px;
        }

        .block286-modal-content::-webkit-scrollbar {
            width: 4px;
        }

        .block286-modal-content::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .block286-modal-content::-webkit-scrollbar-thumb {
            background: rgba(255, 215, 0, 0.5);
            border-radius: 2px;
        }

        .block286-modal-image-mobile {
            width: 100%;
            height: 300px;
            background: linear-gradient(135deg, #0a0a0a 0%, #1a0f00 100%);
            position: relative;
            overflow: hidden;
            border-bottom: 1px solid rgba(255, 215, 0, 0.2);
        }

        .block286-modal-image-mobile img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .block286-modal-image-mobile::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
            pointer-events: none;
        }

        .block286-modal-content-mobile {
            padding: 24px;
            max-height: 300px;
            overflow-y: auto;
        }

        .block286-modal-content-mobile::-webkit-scrollbar {
            width: 4px;
        }

        .block286-modal-content-mobile::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .block286-modal-content-mobile::-webkit-scrollbar-thumb {
            background: rgba(255, 215, 0, 0.5);
            border-radius: 2px;
        }

        .block286-description-text,
        .block286-description-text-mobile {
            color: rgba(255, 255, 255, 0.9);
            font-size: 15px;
            line-height: 1.7;
            margin-bottom: 20px;
        }

        .block286-satoshi-highlight,
        .block286-satoshi-highlight-mobile {
            color: #FFD700;
            font-weight: 600;
            text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
        }

        .block286-info-box,
        .block286-info-box-mobile {
            background: linear-gradient(135deg, rgba(139, 69, 19, 0.15) 0%, rgba(255, 215, 0, 0.05) 100%);
            border: 1px solid rgba(255, 215, 0, 0.25);
            border-radius: 12px;
            padding: 16px;
            margin: 20px 0;
        }

        .block286-info-title,
        .block286-info-title-mobile {
            color: #FFD700;
            font-size: 13px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .block286-info-title::before,
        .block286-info-title-mobile::before {
            content: '⛏️';
            font-size: 16px;
        }

        .block286-info-content,
        .block286-info-content-mobile {
            color: rgba(255, 255, 255, 0.85);
            font-size: 14px;
            line-height: 1.6;
        }

        .block286-examples-section,
        .block286-examples-section-mobile {
            background: rgba(255, 215, 0, 0.05);
            border: 1px solid rgba(255, 215, 0, 0.2);
            border-radius: 12px;
            padding: 16px;
            margin-top: 20px;
        }

        .block286-examples-title,
        .block286-examples-title-mobile {
            color: #FFD700;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 12px;
        }

        .block286-example-list,
        .block286-example-list-mobile {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .block286-example-item,
        .block286-example-item-mobile {
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255, 215, 0, 0.3);
            padding: 6px 12px;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            color: #FFD700;
            transition: all 0.3s ease;
            position: relative;
        }

        .block286-example-item:hover,
        .block286-example-item-mobile:hover {
            background: rgba(255, 215, 0, 0.1);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 215, 0, 0.2);
        }

        .block286-example-item::after,
        .block286-example-item-mobile::after {
            content: '✨';
            position: absolute;
            top: -8px;
            right: -8px;
            font-size: 12px;
            animation: sparkle 2s infinite;
        }

        @keyframes sparkle {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.7; transform: scale(1.2); }
        }

        @media (max-width: 899px) {
            .block286-modal-container {
                width: 95%;
                margin: 10px;
                max-height: 95vh;
            }

            .block286-modal-container-mobile {
                width: 95%;
                margin: 10px;
            }

            .block286-modal-header,
            .block286-modal-header-mobile {
                padding: 12px 16px 10px;
            }

            .block286-modal-title,
            .block286-modal-title-mobile {
                font-size: 20px;
                margin-bottom: 4px;
            }

            .block286-modal-subtitle,
            .block286-modal-subtitle-mobile {
                font-size: 12px;
            }

            .block286-modal-image,
            .block286-modal-image-mobile {
                height: 200px;
            }

            .block286-category-badge,
            .block286-category-badge-mobile {
                font-size: 10px;
                padding: 3px 8px;
                margin-bottom: 6px;
            }

            .block286-historical-badge,
            .block286-historical-badge-mobile {
                font-size: 9px;
                padding: 2px 8px;
                display: block;
                margin-left: 0;
                margin-top: 6px;
                display: inline-block;
            }

            .block286-historical-date,
            .block286-historical-date-mobile {
                font-size: 11px;
                margin-top: 6px;
            }

            .block286-close-btn,
            .block286-close-btn-mobile {
                top: 12px;
                right: 12px;
                width: 28px;
                height: 28px;
            }
        }

        .block286-info-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            margin-left: 8px;
            color: rgba(210, 153, 34, 0.9);
            cursor: pointer;
            transition: all 0.3s ease;
            opacity: 0.8;
            z-index: 10;
        }

        .block286-info-icon i {
            font-size: 16px;
        }

        .block286-info-icon:hover,
        .block286-info-icon:focus {
            opacity: 1;
            transform: scale(1.2);
            filter: drop-shadow(0 0 6px rgba(210, 153, 34, 0.8));
        }

        .block286-info-icon:active {
            transform: scale(1.1);
        }

        .block286-info-icon-mobile {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            margin-left: 8px;
            color: rgba(210, 153, 34, 0.9);
            cursor: pointer;
            transition: all 0.3s ease;
            opacity: 0.8;
        }

        .block286-info-icon-mobile i {
            font-size: 18px;
        }

        .block286-info-icon-mobile:hover,
        .block286-info-icon-mobile:focus,
        .block286-info-icon-mobile:active {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(210, 153, 34, 0.6));
        }

        /* Block666 Modal Styles - Desktop & Mobile */
        .block666-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            backdrop-filter: blur(10px);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 999999;
            animation: fadeIn 0.3s ease;
        }

        .block666-modal-container {
            background: linear-gradient(145deg, #1a0a0f 0%, #0f0505 100%);
            border: 1px solid rgba(220, 20, 60, 0.3);
            border-radius: 20px;
            max-width: 900px;
            width: 90%;
            max-height: 600px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 100px rgba(220, 20, 60, 0.2), inset 0 1px 0 rgba(255, 215, 0, 0.1);
            animation: slideUp 0.4s ease;
            display: flex;
            flex-direction: column;
        }

        .block666-modal-container-mobile {
            background: linear-gradient(145deg, #1a0a0f 0%, #0f0505 100%);
            border: 1px solid rgba(220, 20, 60, 0.3);
            border-radius: 20px;
            max-width: 600px;
            width: 90%;
            max-height: 90vh;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 100px rgba(220, 20, 60, 0.2), inset 0 1px 0 rgba(255, 215, 0, 0.1);
            animation: slideUp 0.4s ease;
        }

        .block666-modal-header,
        .block666-modal-header-mobile {
            position: relative;
            padding: 24px 24px 20px;
            background: linear-gradient(180deg, rgba(139, 0, 0, 0.1) 0%, transparent 100%);
            border-bottom: 1px solid rgba(220, 20, 60, 0.2);
            flex-shrink: 0;
        }

        .block666-category-badge,
        .block666-category-badge-mobile {
            display: inline-block;
            background: linear-gradient(135deg, #DC143C 0%, #8B0000 100%);
            color: #FFD700;
            font-size: 12px;
            font-weight: 700;
            padding: 4px 12px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
            box-shadow: 0 0 20px rgba(220, 20, 60, 0.4);
        }

        .block666-enigmatic-badge,
        .block666-enigmatic-badge-mobile {
            display: inline-block;
            background: linear-gradient(135deg, #4B0082 0%, #2C003E 100%);
            color: #FFD700;
            font-size: 11px;
            font-weight: 600;
            padding: 3px 10px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-left: 8px;
            border: 1px solid rgba(138, 43, 226, 0.4);
        }

        .block666-modal-title,
        .block666-modal-title-mobile {
            color: #FFD700;
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 8px;
            text-shadow: 0 2px 15px rgba(220, 20, 60, 0.5);
        }

        .block666-modal-subtitle,
        .block666-modal-subtitle-mobile {
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
            font-weight: 400;
        }

        .block666-historical-date,
        .block666-historical-date-mobile {
            color: #FFD700;
            font-size: 13px;
            margin-top: 8px;
            opacity: 0.9;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .block666-historical-date::before,
        .block666-historical-date-mobile::before {
            content: '🌙';
            font-size: 14px;
        }

        .block666-number-666,
        .block666-number-666-mobile {
            color: #DC143C;
            font-weight: 700;
            text-shadow: 0 0 10px rgba(220, 20, 60, 0.6);
            animation: pulse-red 2s infinite;
        }

        @keyframes pulse-red {
            0%, 100% { text-shadow: 0 0 10px rgba(220, 20, 60, 0.6); }
            50% { text-shadow: 0 0 20px rgba(220, 20, 60, 0.9); }
        }

        .block666-close-btn,
        .block666-close-btn-mobile {
            position: absolute;
            top: 24px;
            right: 24px;
            width: 32px;
            height: 32px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(220, 20, 60, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .block666-close-btn:hover,
        .block666-close-btn-mobile:hover {
            background: rgba(220, 20, 60, 0.2);
            transform: rotate(180deg);
        }

        .block666-close-btn::before,
        .block666-close-btn-mobile::before {
            content: '';
            position: absolute;
            width: 16px;
            height: 2px;
            background: #FFD700;
            border-radius: 2px;
            transform: rotate(45deg);
        }

        .block666-close-btn::after,
        .block666-close-btn-mobile::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 2px;
            background: #FFD700;
            border-radius: 2px;
            transform: rotate(-45deg);
        }

        .block666-modal-body {
            display: flex;
            flex-direction: row;
            flex: 1;
            min-height: 0;
        }

        .block666-modal-image {
            width: 45%;
            aspect-ratio: 16/9;
            background: linear-gradient(135deg, #0a0a0a 0%, #1a0a0a 100%);
            position: relative;
            overflow: hidden;
            border-right: 1px solid rgba(220, 20, 60, 0.2);
        }

        .block666-modal-image img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .block666-modal-image::after {
            display: none;
        }

        .block666-modal-content {
            width: 55%;
            padding: 24px;
            overflow-y: auto;
            max-height: 500px;
        }

        .block666-modal-content::-webkit-scrollbar {
            width: 4px;
        }

        .block666-modal-content::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .block666-modal-content::-webkit-scrollbar-thumb {
            background: rgba(220, 20, 60, 0.5);
            border-radius: 2px;
        }

        .block666-modal-image-mobile {
            width: 100%;
            height: 300px;
            background: linear-gradient(135deg, #0a0a0a 0%, #1a0a0a 100%);
            position: relative;
            overflow: hidden;
            border-bottom: 1px solid rgba(220, 20, 60, 0.2);
        }

        .block666-modal-image-mobile img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .block666-modal-image-mobile::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
            pointer-events: none;
        }

        .block666-modal-content-mobile {
            padding: 24px;
            max-height: 300px;
            overflow-y: auto;
        }

        .block666-modal-content-mobile::-webkit-scrollbar {
            width: 4px;
        }

        .block666-modal-content-mobile::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .block666-modal-content-mobile::-webkit-scrollbar-thumb {
            background: rgba(220, 20, 60, 0.5);
            border-radius: 2px;
        }

        .block666-description-text,
        .block666-description-text-mobile {
            color: rgba(255, 255, 255, 0.9);
            font-size: 15px;
            line-height: 1.7;
            margin-bottom: 20px;
        }

        .block666-mystical-highlight,
        .block666-mystical-highlight-mobile {
            color: #DC143C;
            font-weight: 600;
            text-shadow: 0 0 8px rgba(220, 20, 60, 0.4);
        }

        .block666-info-box,
        .block666-info-box-mobile {
            background: linear-gradient(135deg, rgba(139, 0, 0, 0.15) 0%, rgba(75, 0, 130, 0.1) 100%);
            border: 1px solid rgba(220, 20, 60, 0.25);
            border-radius: 12px;
            padding: 16px;
            margin: 20px 0;
        }

        .block666-info-title,
        .block666-info-title-mobile {
            color: #FFD700;
            font-size: 13px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .block666-info-title::before,
        .block666-info-title-mobile::before {
            content: '🔮';
            font-size: 16px;
        }

        .block666-info-content,
        .block666-info-content-mobile {
            color: rgba(255, 255, 255, 0.85);
            font-size: 14px;
            line-height: 1.6;
        }

        .block666-examples-section,
        .block666-examples-section-mobile {
            background: linear-gradient(135deg, rgba(220, 20, 60, 0.05) 0%, rgba(75, 0, 130, 0.05) 100%);
            border: 1px solid rgba(220, 20, 60, 0.2);
            border-radius: 12px;
            padding: 16px;
            margin-top: 20px;
        }

        .block666-examples-title,
        .block666-examples-title-mobile {
            color: #FFD700;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 12px;
        }

        .block666-example-list,
        .block666-example-list-mobile {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .block666-example-item,
        .block666-example-item-mobile {
            background: rgba(0, 0, 0, 0.6);
            border: 1px solid rgba(220, 20, 60, 0.3);
            padding: 6px 12px;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            color: #FFD700;
            transition: all 0.3s ease;
            position: relative;
        }

        .block666-example-item:hover,
        .block666-example-item-mobile:hover {
            background: rgba(220, 20, 60, 0.1);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(220, 20, 60, 0.3);
        }

        .block666-example-item::after,
        .block666-example-item-mobile::after {
            content: '🔥';
            position: absolute;
            top: -8px;
            right: -8px;
            font-size: 12px;
            animation: flame 1.5s infinite;
        }

        @keyframes flame {
            0%, 100% { transform: translateY(0) scale(1); }
            25% { transform: translateY(-2px) scale(1.1); }
            75% { transform: translateY(1px) scale(0.9); }
        }

        @media (max-width: 899px) {
            .block666-modal-container {
                width: 95%;
                margin: 10px;
                max-height: 95vh;
            }

            .block666-modal-container-mobile {
                width: 95%;
                margin: 10px;
            }

            .block666-modal-header,
            .block666-modal-header-mobile {
                padding: 12px 16px 10px;
            }

            .block666-modal-title,
            .block666-modal-title-mobile {
                font-size: 20px;
                margin-bottom: 4px;
            }

            .block666-modal-subtitle,
            .block666-modal-subtitle-mobile {
                font-size: 12px;
            }

            .block666-modal-image,
            .block666-modal-image-mobile {
                height: 200px;
            }

            .block666-category-badge,
            .block666-category-badge-mobile {
                font-size: 10px;
                padding: 3px 8px;
                margin-bottom: 6px;
            }

            .block666-enigmatic-badge,
            .block666-enigmatic-badge-mobile {
                font-size: 9px;
                padding: 2px 8px;
                display: block;
                margin-left: 0;
                margin-top: 6px;
                display: inline-block;
            }

            .block666-historical-date,
            .block666-historical-date-mobile {
                font-size: 11px;
                margin-top: 6px;
            }

            .block666-close-btn,
            .block666-close-btn-mobile {
                top: 12px;
                right: 12px;
                width: 28px;
                height: 28px;
            }
        }

        .block666-info-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            margin-left: 8px;
            color: rgba(220, 20, 60, 0.9);
            cursor: pointer;
            transition: all 0.3s ease;
            opacity: 0.8;
            z-index: 10;
        }

        .block666-info-icon i {
            font-size: 16px;
        }

        .block666-info-icon:hover,
        .block666-info-icon:focus {
            opacity: 1;
            transform: scale(1.2);
            filter: drop-shadow(0 0 6px rgba(220, 20, 60, 0.8));
        }

        .block666-info-icon:active {
            transform: scale(1.1);
        }

        .block666-info-icon-mobile {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            margin-left: 8px;
            color: rgba(220, 20, 60, 0.9);
            cursor: pointer;
            transition: all 0.3s ease;
            opacity: 0.8;
        }

        .block666-info-icon-mobile i {
            font-size: 18px;
        }

        .block666-info-icon-mobile:hover,
        .block666-info-icon-mobile:focus,
        .block666-info-icon-mobile:active {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(220, 20, 60, 0.6));
        }

        /* ========================================
           BLOCK78 MODAL STYLES - HAL FINNEY PIONEER THEME
           ======================================== */

        /* Block78 Overlay */
        .block78-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(10px);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 999999;
            animation: fadeIn 0.3s ease;
        }

        /* Block78 Modal Container - Desktop */
        .block78-modal-container {
            background: linear-gradient(145deg, #0f1a1f 0%, #0a0f14 100%);
            border: 1px solid rgba(0, 191, 255, 0.3);
            border-radius: 20px;
            max-width: 900px;
            max-height: 600px;
            overflow: hidden;
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.8),
                0 0 100px rgba(0, 191, 255, 0.1),
                inset 0 1px 0 rgba(255, 215, 0, 0.2);
            animation: slideUp 0.4s ease;
            display: flex;
            flex-direction: column;
        }

        /* Block78 Modal Container - Mobile */
        .block78-modal-container-mobile {
            background: linear-gradient(145deg, #0f1a1f 0%, #0a0f14 100%);
            border: 1px solid rgba(0, 191, 255, 0.3);
            border-radius: 20px;
            max-width: 600px;
            width: 90%;
            max-height: 90vh;
            overflow: hidden;
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.8),
                0 0 100px rgba(0, 191, 255, 0.1),
                inset 0 1px 0 rgba(255, 215, 0, 0.2);
            animation: slideUp 0.4s ease;
        }

        /* Block78 Header */
        .block78-modal-header,
        .block78-modal-header-mobile {
            position: relative;
            padding: 24px 24px 20px;
            background: linear-gradient(180deg, rgba(0, 191, 255, 0.05) 0%, transparent 100%);
            border-bottom: 1px solid rgba(0, 191, 255, 0.2);
            flex-shrink: 0;
        }

        /* Block78 Category Badge - Pioneer Sats */
        .block78-category-badge,
        .block78-category-badge-mobile {
            display: inline-block;
            background: linear-gradient(135deg, #00BFFF 0%, #1E90FF 100%);
            color: #0a0a0a;
            font-size: 12px;
            font-weight: 700;
            padding: 4px 12px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
            box-shadow: 0 0 20px rgba(0, 191, 255, 0.3);
        }

        /* Block78 Legacy Badge - Hal Finney */
        .block78-legacy-badge,
        .block78-legacy-badge-mobile {
            display: inline-block;
            background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
            color: #0a0a0a;
            font-size: 11px;
            font-weight: 600;
            padding: 3px 10px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-left: 8px;
            border: 1px solid rgba(255, 215, 0, 0.3);
        }

        /* Block78 Modal Title */
        .block78-modal-title,
        .block78-modal-title-mobile {
            color: #FFD700;
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 8px;
            text-shadow: 0 2px 10px rgba(0, 191, 255, 0.3);
        }

        /* Block78 Modal Subtitle */
        .block78-modal-subtitle,
        .block78-modal-subtitle-mobile {
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
            font-weight: 400;
        }

        /* Block78 Historical Date */
        .block78-historical-date,
        .block78-historical-date-mobile {
            color: #00BFFF;
            font-size: 13px;
            margin-top: 8px;
            opacity: 0.9;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .block78-historical-date::before,
        .block78-historical-date-mobile::before {
            content: '⚡';
            font-size: 14px;
        }

        /* Block78 Number 78 Special Effect */
        .block78-number-78,
        .block78-number-78-mobile {
            color: #FFD700;
            font-weight: 700;
            text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
        }

        /* Block78 Close Button */
        .block78-close-btn,
        .block78-close-btn-mobile {
            position: absolute;
            top: 24px;
            right: 24px;
            width: 32px;
            height: 32px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(0, 191, 255, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .block78-close-btn:hover,
        .block78-close-btn-mobile:hover {
            background: rgba(0, 191, 255, 0.2);
            transform: rotate(90deg);
        }

        .block78-close-btn::before,
        .block78-close-btn::after,
        .block78-close-btn-mobile::before,
        .block78-close-btn-mobile::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 2px;
            background: #FFD700;
            border-radius: 2px;
        }

        .block78-close-btn::before,
        .block78-close-btn-mobile::before {
            transform: rotate(45deg);
        }

        .block78-close-btn::after,
        .block78-close-btn-mobile::after {
            transform: rotate(-45deg);
        }

        /* Block78 Modal Body - Desktop */
        .block78-modal-body {
            display: flex;
            flex-direction: row;
            flex: 1;
            min-height: 0;
        }

        /* Block78 Modal Image - Desktop */
        .block78-modal-image {
            width: 45%;
            aspect-ratio: 16/9;
            background: linear-gradient(135deg, #000814 0%, #001d3d 100%);
            position: relative;
            overflow: hidden;
            border-right: 1px solid rgba(0, 191, 255, 0.2);
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .block78-modal-image img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* Block78 Modal Image - Mobile */
        .block78-modal-image-mobile {
            width: 100%;
            height: 300px;
            background: linear-gradient(135deg, #000814 0%, #001d3d 100%);
            position: relative;
            overflow: hidden;
            border-bottom: 1px solid rgba(0, 191, 255, 0.2);
        }

        .block78-modal-image-mobile img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .block78-modal-image-mobile::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
            pointer-events: none;
        }

        /* Block78 Content */
        .block78-modal-content {
            flex: 1;
            padding: 24px;
            overflow-y: auto;
        }

        .block78-modal-content-mobile {
            padding: 24px;
            max-height: 300px;
            overflow-y: auto;
        }

        .block78-modal-content::-webkit-scrollbar,
        .block78-modal-content-mobile::-webkit-scrollbar {
            width: 4px;
        }

        .block78-modal-content::-webkit-scrollbar-track,
        .block78-modal-content-mobile::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .block78-modal-content::-webkit-scrollbar-thumb,
        .block78-modal-content-mobile::-webkit-scrollbar-thumb {
            background: rgba(0, 191, 255, 0.5);
            border-radius: 2px;
        }

        /* Block78 Description Text */
        .block78-description-text,
        .block78-description-text-mobile {
            color: rgba(255, 255, 255, 0.9);
            font-size: 15px;
            line-height: 1.7;
            margin-bottom: 20px;
        }

        /* Block78 Hal Finney Highlight */
        .block78-hal-highlight {
            color: #00BFFF;
            font-weight: 600;
            text-shadow: 0 0 10px rgba(0, 191, 255, 0.4);
        }

        /* Block78 Info Box */
        .block78-info-box,
        .block78-info-box-mobile {
            background: linear-gradient(135deg, rgba(0, 191, 255, 0.1) 0%, rgba(255, 215, 0, 0.05) 100%);
            border: 1px solid rgba(0, 191, 255, 0.25);
            border-radius: 12px;
            padding: 16px;
            margin: 20px 0;
        }

        .block78-info-title,
        .block78-info-title-mobile {
            color: #FFD700;
            font-size: 13px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .block78-info-title::before,
        .block78-info-title-mobile::before {
            content: '🚀';
            font-size: 16px;
        }

        .block78-info-content,
        .block78-info-content-mobile {
            color: rgba(255, 255, 255, 0.85);
            font-size: 14px;
            line-height: 1.6;
        }

        /* Block78 Tribute Box - Special for Hal Finney Quote */
        .block78-tribute-box,
        .block78-tribute-box-mobile {
            background: linear-gradient(135deg, rgba(30, 144, 255, 0.1) 0%, transparent);
            border-left: 3px solid #00BFFF;
            padding: 12px 16px;
            margin: 16px 0;
            font-style: italic;
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
        }

        /* Block78 Examples Section */
        .block78-examples-section,
        .block78-examples-section-mobile {
            background: linear-gradient(135deg, rgba(0, 191, 255, 0.05) 0%, rgba(255, 215, 0, 0.05) 100%);
            border: 1px solid rgba(0, 191, 255, 0.2);
            border-radius: 12px;
            padding: 16px;
            margin-top: 20px;
        }

        .block78-examples-title,
        .block78-examples-title-mobile {
            color: #FFD700;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 12px;
        }

        .block78-example-list,
        .block78-example-list-mobile {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .block78-example-item,
        .block78-example-item-mobile {
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(0, 191, 255, 0.3);
            padding: 6px 12px;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            color: #FFD700;
            transition: all 0.3s ease;
            position: relative;
        }

        .block78-example-item:hover,
        .block78-example-item-mobile:hover {
            background: rgba(0, 191, 255, 0.1);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 191, 255, 0.2);
        }

        /* Star effect for Block78 sats */
        .block78-example-item::after,
        .block78-example-item-mobile::after {
            content: '⭐';
            position: absolute;
            top: -8px;
            right: -8px;
            font-size: 12px;
            animation: twinkle 2s infinite;
        }

        @keyframes twinkle {
            0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
            50% { opacity: 0.6; transform: scale(1.1) rotate(180deg); }
        }

        /* Block78 Info Icon - Desktop */
        .block78-info-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            margin-left: 8px;
            color: rgba(0, 191, 255, 0.9);
            cursor: pointer;
            transition: all 0.3s ease;
            opacity: 0.8;
            z-index: 10;
        }

        .block78-info-icon i {
            font-size: 16px;
        }

        .block78-info-icon:hover,
        .block78-info-icon:focus,
        .block78-info-icon:active {
            color: #00BFFF;
            opacity: 1;
            transform: scale(1.15);
        }

        /* Block78 Info Icon - Mobile */
        .block78-info-icon-mobile {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            margin-left: 8px;
            color: rgba(0, 191, 255, 0.9);
            cursor: pointer;
            transition: all 0.3s ease;
            opacity: 0.8;
        }

        .block78-info-icon-mobile i {
            font-size: 18px;
        }

        .block78-info-icon-mobile:hover,
        .block78-info-icon-mobile:focus,
        .block78-info-icon-mobile:active {
            color: #00BFFF;
            opacity: 1;
            transform: scale(1.15);
        }

        /* Responsive Mobile */
        @media (max-width: 899px) {
            .block78-modal-container-mobile {
                width: 95%;
                margin: 10px;
                max-height: 95vh;
            }

            .block78-modal-header,
            .block78-modal-header-mobile {
                padding: 12px 16px 10px;
            }

            .block78-modal-title,
            .block78-modal-title-mobile {
                font-size: 20px;
                margin-bottom: 4px;
            }

            .block78-modal-subtitle,
            .block78-modal-subtitle-mobile {
                font-size: 12px;
            }

            .block78-modal-image,
            .block78-modal-image-mobile {
                height: 200px;
            }

            .block78-category-badge,
            .block78-category-badge-mobile {
                font-size: 11px;
                padding: 3px 10px;
                margin-bottom: 6px;
            }

            .block78-legacy-badge,
            .block78-legacy-badge-mobile {
                font-size: 10px;
                padding: 2px 8px;
                display: block;
                margin-left: 0;
                margin-top: 6px;
                display: inline-block;
            }

            .block78-historical-date,
            .block78-historical-date-mobile {
                font-size: 11px;
                margin-top: 6px;
            }

            .block78-close-btn,
            .block78-close-btn-mobile {
                width: 28px;
                height: 28px;
                top: 12px;
                right: 16px;
            }

            .block78-close-btn::before,
            .block78-close-btn::after,
            .block78-close-btn-mobile::before,
            .block78-close-btn-mobile::after {
                width: 14px;
            }
        }

        /* ==================== Block9 Modal Styles - Genesis Theme ==================== */

        /* Block9 Overlay */
        .block9-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(10px);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 999999;
            animation: fadeIn 0.3s ease;
        }

        /* Block9 Modal Container - Desktop */
        .block9-modal-container {
            background: linear-gradient(145deg, #0a1412 0%, #050a08 100%);
            border: 1px solid rgba(80, 255, 180, 0.3);
            border-radius: 20px;
            max-width: 900px;
            width: 90%;
            max-height: 600px;
            overflow: hidden;
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.8),
                0 0 100px rgba(80, 255, 180, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            animation: slideUp 0.4s ease;
            display: flex;
            flex-direction: column;
        }

        /* Block9 Modal Container - Mobile */
        .block9-modal-container-mobile {
            background: linear-gradient(145deg, #0a1412 0%, #050a08 100%);
            border: 1px solid rgba(80, 255, 180, 0.3);
            border-radius: 20px;
            max-width: 600px;
            width: 90%;
            max-height: 90vh;
            overflow: hidden;
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.8),
                0 0 100px rgba(80, 255, 180, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            animation: slideUp 0.4s ease;
        }

        /* Block9 Header */
        .block9-modal-header,
        .block9-modal-header-mobile {
            position: relative;
            padding: 24px 24px 20px;
            background: linear-gradient(180deg, rgba(80, 255, 180, 0.05) 0%, transparent 100%);
            border-bottom: 1px solid rgba(80, 255, 180, 0.2);
            flex-shrink: 0;
        }

        /* Block9 Genesis Badge */
        .block9-category-badge,
        .block9-category-badge-mobile {
            display: inline-block;
            background: linear-gradient(135deg, #50FFB4 0%, #00E676 100%);
            color: #0a0a0a;
            font-size: 12px;
            font-weight: 700;
            padding: 4px 12px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
            box-shadow: 0 0 20px rgba(80, 255, 180, 0.3);
        }

        /* Block9 First Circulating Badge */
        .block9-first-badge,
        .block9-first-badge-mobile {
            display: inline-block;
            background: linear-gradient(135deg, #E0E0E0 0%, #9E9E9E 100%);
            color: #0a0a0a;
            font-size: 11px;
            font-weight: 600;
            padding: 3px 10px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-left: 8px;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        /* Block9 Title */
        .block9-modal-title,
        .block9-modal-title-mobile {
            color: #FFD700;
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .block9-modal-subtitle,
        .block9-modal-subtitle-mobile {
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
            font-weight: 400;
        }

        /* Block9 Historical Date with Seedling Emoji */
        .block9-historical-date,
        .block9-historical-date-mobile {
            color: #50FFB4;
            font-size: 13px;
            margin-top: 8px;
            opacity: 0.9;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .block9-historical-date::before,
        .block9-historical-date-mobile::before {
            content: '🌱';
            font-size: 14px;
        }

        /* Block9 First Highlight */
        .block9-first-highlight {
            color: #50FFB4;
            font-weight: 600;
            text-shadow: 0 0 10px rgba(80, 255, 180, 0.4);
        }

        /* Block9 Number Effect */
        .block9-number-9,
        .block9-number-9-mobile {
            color: #FFD700;
            font-weight: 700;
            text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
            font-size: 32px;
        }

        /* Block9 Close Button */
        .block9-close-btn,
        .block9-close-btn-mobile {
            position: absolute;
            top: 24px;
            right: 24px;
            width: 32px;
            height: 32px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(80, 255, 180, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .block9-close-btn:hover,
        .block9-close-btn-mobile:hover {
            background: rgba(80, 255, 180, 0.2);
            transform: rotate(90deg);
        }

        .block9-close-btn::before,
        .block9-close-btn::after,
        .block9-close-btn-mobile::before,
        .block9-close-btn-mobile::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 2px;
            background: #FFD700;
            border-radius: 2px;
        }

        .block9-close-btn::before,
        .block9-close-btn-mobile::before {
            transform: rotate(45deg);
        }

        .block9-close-btn::after,
        .block9-close-btn-mobile::after {
            transform: rotate(-45deg);
        }

        /* Block9 Body Wrapper */
        .block9-modal-body {
            display: flex;
            flex-direction: row;
            flex: 1;
            min-height: 0;
        }

        /* Block9 Image Container - Desktop */
        .block9-modal-image {
            width: 45%;
            background: linear-gradient(135deg, #000a08 0%, #001a10 100%);
            position: relative;
            overflow: hidden;
            border-right: 1px solid rgba(80, 255, 180, 0.2);
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .block9-modal-image img,
        .block9-modal-image video {
            width: 100%;
            height: 100%;
            object-fit: contain;
            aspect-ratio: 16/9;
        }

        /* Block9 Modal Image - Mobile */
        .block9-modal-image-mobile {
            width: 100%;
            height: 300px;
            background: linear-gradient(135deg, #000a08 0%, #001a10 100%);
            position: relative;
            overflow: hidden;
            border-bottom: 1px solid rgba(80, 255, 180, 0.2);
        }

        .block9-modal-image-mobile img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .block9-modal-image-mobile::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
            pointer-events: none;
        }

        /* Block9 Content */
        .block9-modal-content {
            width: 55%;
            padding: 24px;
            overflow-y: auto;
            background: linear-gradient(145deg, #0a1412 0%, #050a08 100%);
        }

        .block9-modal-content-mobile {
            padding: 24px;
            max-height: 300px;
            overflow-y: auto;
        }

        .block9-modal-content::-webkit-scrollbar,
        .block9-modal-content-mobile::-webkit-scrollbar {
            width: 4px;
        }

        .block9-modal-content::-webkit-scrollbar-track,
        .block9-modal-content-mobile::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .block9-modal-content::-webkit-scrollbar-thumb,
        .block9-modal-content-mobile::-webkit-scrollbar-thumb {
            background: rgba(80, 255, 180, 0.5);
            border-radius: 2px;
        }

        .block9-description-text,
        .block9-description-text-mobile {
            color: rgba(255, 255, 255, 0.9);
            font-size: 15px;
            line-height: 1.7;
            margin-bottom: 20px;
        }

        /* Block9 Info Box with Diamond Emoji */
        .block9-info-box,
        .block9-info-box-mobile {
            background: linear-gradient(135deg, rgba(80, 255, 180, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
            border: 1px solid rgba(80, 255, 180, 0.25);
            border-radius: 12px;
            padding: 16px;
            margin: 20px 0;
        }

        .block9-info-title,
        .block9-info-title-mobile {
            color: #FFD700;
            font-size: 13px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .block9-info-title::before,
        .block9-info-title-mobile::before {
            content: '💎';
            font-size: 16px;
        }

        .block9-info-content,
        .block9-info-content-mobile {
            color: rgba(255, 255, 255, 0.85);
            font-size: 14px;
            line-height: 1.6;
        }

        /* Block9 Milestone Box */
        .block9-milestone-box,
        .block9-milestone-box-mobile {
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, transparent);
            border-left: 3px solid #50FFB4;
            padding: 12px 16px;
            margin: 16px 0;
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
        }

        .block9-milestone-box strong,
        .block9-milestone-box-mobile strong {
            color: #50FFB4;
        }

        /* Block9 Examples Section */
        .block9-examples-section,
        .block9-examples-section-mobile {
            background: linear-gradient(135deg, rgba(80, 255, 180, 0.05) 0%, rgba(255, 215, 0, 0.05) 100%);
            border: 1px solid rgba(80, 255, 180, 0.2);
            border-radius: 12px;
            padding: 16px;
            margin-top: 20px;
        }

        .block9-examples-title,
        .block9-examples-title-mobile {
            color: #FFD700;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 12px;
        }

        .block9-example-list,
        .block9-example-list-mobile {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .block9-example-item,
        .block9-example-item-mobile {
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(80, 255, 180, 0.3);
            padding: 6px 12px;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            color: #FFD700;
            transition: all 0.3s ease;
            position: relative;
        }

        .block9-example-item:hover,
        .block9-example-item-mobile:hover {
            background: rgba(80, 255, 180, 0.1);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(80, 255, 180, 0.2);
        }

        /* Green Heart Effect with Pulse Animation */
        .block9-example-item::after,
        .block9-example-item-mobile::after {
            content: '💚';
            position: absolute;
            top: -8px;
            right: -8px;
            font-size: 12px;
            animation: pulse-green 2s infinite;
        }

        @keyframes pulse-green {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.2); opacity: 0.8; }
        }

        /* Block9 Desktop Icon */
        .block9-info-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            margin-left: 8px;
            color: rgba(80, 255, 180, 0.9);
            cursor: pointer;
            transition: all 0.3s ease;
            opacity: 0.8;
            z-index: 10;
        }

        .block9-info-icon i {
            font-size: 16px;
        }

        .block9-info-icon:hover {
            color: #50FFB4;
            opacity: 1;
            transform: scale(1.15);
        }

        /* Block9 Mobile Icon */
        .block9-info-icon-mobile {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            margin-left: 8px;
            color: rgba(80, 255, 180, 0.9);
            cursor: pointer;
            transition: all 0.3s ease;
            opacity: 0.8;
        }

        .block9-info-icon-mobile i {
            font-size: 18px;
        }

        .block9-info-icon-mobile:hover {
            color: #50FFB4;
            opacity: 1;
            transform: scale(1.15);
        }

        /* Block9 Mobile Responsive */
        @media (max-width: 768px) {
            .block9-modal-container {
                width: 95%;
                margin: 10px;
                max-height: 95vh;
                flex-direction: column;
            }

            .block9-modal-header,
            .block9-modal-header-mobile {
                padding: 12px 16px 10px;
            }

            .block9-modal-body {
                flex-direction: column;
            }

            .block9-modal-image,
            .block9-modal-image-mobile {
                width: 100%;
                height: 200px;
                border-right: none;
                border-bottom: 1px solid rgba(80, 255, 180, 0.2);
            }

            .block9-modal-image img,
            .block9-modal-image video {
                object-fit: cover;
                aspect-ratio: auto;
            }

            .block9-modal-image::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 50%;
                background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
                pointer-events: none;
            }

            .block9-modal-content {
                width: 100%;
                max-height: 300px;
            }

            .block9-modal-title,
            .block9-modal-title-mobile {
                font-size: 20px;
                margin-bottom: 4px;
            }

            .block9-modal-subtitle,
            .block9-modal-subtitle-mobile {
                font-size: 12px;
            }

            .block9-category-badge,
            .block9-category-badge-mobile {
                font-size: 10px;
                padding: 3px 8px;
                margin-bottom: 6px;
            }

            .block9-first-badge,
            .block9-first-badge-mobile {
                font-size: 9px;
                padding: 2px 8px;
                display: block;
                margin-left: 0;
                margin-top: 6px;
                display: inline-block;
            }

            .block9-historical-date,
            .block9-historical-date-mobile {
                font-size: 11px;
                margin-top: 6px;
            }

            .block9-close-btn,
            .block9-close-btn-mobile {
                top: 12px;
                right: 12px;
                width: 28px;
                height: 28px;
            }
        }

        /* ==================== B9-450 Modal Styles - Ultra Premium Theme ==================== */

        /* B9-450 Overlay */
        .b9450-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.88);
            backdrop-filter: blur(10px);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 999999;
            animation: fadeIn 0.3s ease;
        }

        /* B9-450 Modal Container with Premium Border */
        .b9450-modal-container {
            background: linear-gradient(145deg, #081210 0%, #030806 100%);
            border: 2px solid;
            border-image: linear-gradient(135deg, #50FFB4, #FFD700) 1;
            border-radius: 20px;
            max-width: 900px;
            width: 90%;
            max-height: 600px;
            overflow: hidden;
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.9),
                0 0 120px rgba(80, 255, 180, 0.2),
                0 0 80px rgba(255, 215, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            animation: slideUp 0.4s ease;
            display: flex;
            flex-direction: column;
        }

        /* B9-450 Header */
        .b9450-modal-header {
            position: relative;
            padding: 24px 24px 20px;
            background: linear-gradient(180deg, rgba(80, 255, 180, 0.08) 0%, rgba(255, 215, 0, 0.03) 100%);
            border-bottom: 1px solid rgba(255, 215, 0, 0.3);
            flex-shrink: 0;
        }

        /* B9-450 Ultra Premium Badge */
        .b9450-category-badge {
            display: inline-block;
            background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
            color: #0a0a0a;
            font-size: 12px;
            font-weight: 700;
            padding: 4px 12px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
            box-shadow: 0 0 25px rgba(255, 215, 0, 0.4);
        }

        /* B9-450 First Bitcoin Badge with Shimmer */
        .b9450-first-badge {
            display: inline-block;
            background: linear-gradient(135deg, #50FFB4 0%, #00E676 100%);
            color: #0a0a0a;
            font-size: 11px;
            font-weight: 600;
            padding: 3px 10px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-left: 8px;
            border: 1px solid rgba(80, 255, 180, 0.5);
            animation: shimmer 3s infinite;
        }

        @keyframes shimmer {
            0%, 100% { box-shadow: 0 0 10px rgba(80, 255, 180, 0.5); }
            50% { box-shadow: 0 0 20px rgba(80, 255, 180, 0.8); }
        }

        /* B9-450 Title */
        .b9450-modal-title {
            color: #FFD700;
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 8px;
            text-shadow: 0 2px 15px rgba(255, 215, 0, 0.4);
        }

        .b9450-modal-subtitle {
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
            font-weight: 400;
        }

        /* B9-450 Gradient Highlight */
        .b9450-number-highlight {
            background: linear-gradient(90deg, #50FFB4, #FFD700);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: 700;
            font-size: 30px;
        }

        /* B9-450 Historical Date with Crown */
        .b9450-historical-date {
            color: #50FFB4;
            font-size: 13px;
            margin-top: 8px;
            opacity: 0.9;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .b9450-historical-date::before {
            content: '👑';
            font-size: 14px;
        }

        /* B9-450 Range Display */
        .b9450-range-display {
            background: rgba(255, 215, 0, 0.1);
            border: 1px solid rgba(255, 215, 0, 0.3);
            border-radius: 8px;
            padding: 8px 12px;
            margin-top: 12px;
            font-family: 'Courier New', monospace;
            font-size: 13px;
            color: #FFD700;
            text-align: center;
        }

        /* B9-450 Close Button */
        .b9450-close-btn {
            position: absolute;
            top: 24px;
            right: 24px;
            width: 32px;
            height: 32px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 215, 0, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .b9450-close-btn:hover {
            background: rgba(255, 215, 0, 0.2);
            transform: rotate(90deg);
        }

        .b9450-close-btn::before,
        .b9450-close-btn::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 2px;
            background: #FFD700;
            border-radius: 2px;
        }

        .b9450-close-btn::before {
            transform: rotate(45deg);
        }

        .b9450-close-btn::after {
            transform: rotate(-45deg);
        }

        /* B9-450 Body */
        .b9450-modal-body {
            display: flex;
            flex-direction: row;
            flex: 1;
            min-height: 0;
        }

        /* B9-450 Image Container */
        .b9450-modal-image {
            width: 45%;
            background: linear-gradient(135deg, #000805 0%, #001008 100%);
            position: relative;
            overflow: hidden;
            border-right: 1px solid rgba(255, 215, 0, 0.3);
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .b9450-modal-image img,
        .b9450-modal-image video {
            width: 100%;
            height: 100%;
            object-fit: contain;
            aspect-ratio: 16/9;
        }

        /* B9-450 Content */
        .b9450-modal-content {
            width: 55%;
            padding: 24px;
            overflow-y: auto;
            background: linear-gradient(145deg, #081210 0%, #030806 100%);
        }

        .b9450-modal-content::-webkit-scrollbar {
            width: 4px;
        }

        .b9450-modal-content::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .b9450-modal-content::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #50FFB4, #FFD700);
            border-radius: 2px;
        }

        .b9450-description-text {
            color: rgba(255, 255, 255, 0.9);
            font-size: 15px;
            line-height: 1.7;
            margin-bottom: 20px;
        }

        /* B9-450 Info Box with Trophy */
        .b9450-info-box {
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.12) 0%, rgba(80, 255, 180, 0.08) 100%);
            border: 1px solid;
            border-image: linear-gradient(90deg, #FFD700, #50FFB4) 1;
            border-radius: 12px;
            padding: 16px;
            margin: 20px 0;
        }

        .b9450-info-title {
            color: #FFD700;
            font-size: 13px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .b9450-info-title::before {
            content: '🏆';
            font-size: 16px;
        }

        .b9450-info-content {
            color: rgba(255, 255, 255, 0.85);
            font-size: 14px;
            line-height: 1.6;
        }

        /* B9-450 Premium Box */
        .b9450-premium-box {
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, transparent);
            border-left: 3px solid;
            border-image: linear-gradient(180deg, #FFD700, #50FFB4) 1;
            padding: 12px 16px;
            margin: 16px 0;
            color: rgba(255, 255, 255, 0.9);
            font-size: 14px;
        }

        .b9450-premium-box strong {
            color: #FFD700;
        }

        /* B9-450 Examples Section */
        .b9450-examples-section {
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.08) 0%, rgba(80, 255, 180, 0.08) 100%);
            border: 1px solid;
            border-image: linear-gradient(90deg, #50FFB4, #FFD700) 1;
            border-radius: 12px;
            padding: 16px;
            margin-top: 20px;
        }

        .b9450-examples-title {
            color: #FFD700;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 12px;
        }

        .b9450-example-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .b9450-example-item {
            background: rgba(0, 0, 0, 0.6);
            border: 1px solid rgba(255, 215, 0, 0.4);
            padding: 6px 12px;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            color: #FFD700;
            transition: all 0.3s ease;
            position: relative;
        }

        .b9450-example-item:hover {
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(80, 255, 180, 0.1));
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
        }

        /* Crown Effect with Float Animation */
        .b9450-example-item::after {
            content: '👑';
            position: absolute;
            top: -10px;
            right: -10px;
            font-size: 14px;
            animation: crown-float 3s ease-in-out infinite;
        }

        @keyframes crown-float {
            0%, 100% { transform: translateY(0) rotate(-5deg); }
            50% { transform: translateY(-3px) rotate(5deg); }
        }

        /* B9-450 Desktop Icons */
        .b9450-info-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            margin-left: 8px;
            color: rgba(255, 215, 0, 0.9);
            cursor: pointer;
            transition: all 0.3s ease;
            opacity: 0.8;
            z-index: 10;
        }

        .b9450-info-icon i {
            font-size: 16px;
        }

        .b9450-info-icon:hover {
            color: #FFD700;
            opacity: 1;
            transform: scale(1.15);
        }

        /* B9-450 Mobile Icons */
        .b9450-info-icon-mobile {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            margin-left: 8px;
            color: rgba(255, 215, 0, 0.9);
            cursor: pointer;
            transition: all 0.3s ease;
            opacity: 0.8;
        }

        .b9450-info-icon-mobile i {
            font-size: 18px;
        }

        .b9450-info-icon-mobile:hover {
            color: #FFD700;
            opacity: 1;
            transform: scale(1.15);
        }

        /* Bouton icône info Uniform Palinception - desktop */
        .uniforme-info-icon {
            background: transparent;
            border: none;
            color: var(--accent-gold);
            font-size: 1.125rem;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-left: 0.5rem;
            padding: 0.25rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            opacity: 0.9;
            flex-shrink: 0;
            vertical-align: middle;
            user-select: none;
        }

        .uniforme-info-icon:focus {
            outline: 2px solid var(--accent-gold);
            outline-offset: 2px;
        }

        .uniforme-info-icon:hover {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(0, 255, 127, 0.6));
        }

        .uniforme-info-icon:active {
            transform: scale(0.95);
        }

        /* Bouton icône info Uniform Palinception - mobile */
        .uniforme-info-icon-mobile {
            background: transparent;
            border: none;
            color: var(--accent-gold);
            font-size: 1.125rem;
            cursor: pointer;
            transition: all 0.3s ease;
            padding: 0.25rem;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.9;
            margin-left: 0.5rem;
            user-select: none;
        }

        .uniforme-info-icon-mobile:focus {
            outline: 2px solid var(--accent-gold);
            outline-offset: 2px;
        }

        .uniforme-info-icon-mobile:hover,
        .uniforme-info-icon-mobile:active {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(0, 255, 127, 0.6));
        }

        /* Bouton icône info Sequence Palindromes - desktop */
        .sequence-info-icon {
            background: transparent;
            border: none;
            color: var(--accent-gold);
            font-size: 18px;
            cursor: pointer;
            padding: 4px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            opacity: 0.8;
            transition: all 0.3s ease;
            user-select: none;
        }

        .sequence-info-icon:focus {
            outline: 2px solid var(--accent-gold);
            outline-offset: 2px;
        }

        .sequence-info-icon:hover {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(255, 107, 53, 0.6));
        }

        .sequence-info-icon:active {
            transform: scale(0.95);
        }

        /* Bouton icône info Sequence Palindromes - mobile */
        .sequence-info-icon-mobile {
            background: transparent;
            border: none;
            color: var(--accent-gold);
            font-size: 16px;
            cursor: pointer;
            padding: 4px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            opacity: 0.8;
            transition: all 0.3s ease;
            user-select: none;
        }

        .sequence-info-icon-mobile:focus {
            outline: 2px solid var(--accent-gold);
            outline-offset: 2px;
        }

        .sequence-info-icon-mobile:hover,
        .sequence-info-icon-mobile:active {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(255, 107, 53, 0.6));
        }

        /* Bouton icône info Perfect Palinception - desktop */
        .perfect-info-icon {
            background: transparent;
            border: none;
            color: var(--accent-gold);
            font-size: 18px;
            cursor: pointer;
            padding: 4px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            opacity: 0.8;
            transition: all 0.3s ease;
            user-select: none;
        }

        .perfect-info-icon:focus {
            outline: 2px solid var(--accent-gold);
            outline-offset: 2px;
        }

        .perfect-info-icon:hover {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(139, 0, 139, 0.6));
        }

        .perfect-info-icon:active {
            transform: scale(0.95);
        }

        /* Bouton icône info Perfect Palinception - mobile */
        .perfect-info-icon-mobile {
            background: transparent;
            border: none;
            color: var(--accent-gold);
            font-size: 16px;
            cursor: pointer;
            padding: 4px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            opacity: 0.8;
            transition: all 0.3s ease;
            user-select: none;
        }

        .perfect-info-icon-mobile:focus {
            outline: 2px solid var(--accent-gold);
            outline-offset: 2px;
        }

        .perfect-info-icon-mobile:hover,
        .perfect-info-icon-mobile:active {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(139, 0, 139, 0.6));
        }

        /* Nova Info Icon Styles */
        .nova-info-icon {
            background: transparent;
            border: none;
            color: var(--accent-gold);
            font-size: 18px;
            cursor: pointer;
            padding: 4px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            opacity: 0.8;
            transition: all 0.3s ease;
            user-select: none;
        }

        .nova-info-icon:hover {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(123, 44, 191, 0.8));
        }

        .nova-info-icon:active {
            transform: scale(1.05);
        }

        .nova-info-icon:focus {
            outline: 2px solid var(--accent-gold);
            outline-offset: 2px;
        }

        .nova-info-icon-mobile {
            background: transparent;
            border: none;
            color: var(--accent-gold);
            font-size: 18px;
            cursor: pointer;
            padding: 6px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            opacity: 0.8;
            transition: all 0.3s ease;
            user-select: none;
            flex-shrink: 0;
        }

        .nova-info-icon-mobile:hover,
        .nova-info-icon-mobile:active {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(123, 44, 191, 0.8));
        }

        /* Vintage Info Icon Styles */
        .vintage-info-icon {
            background: transparent;
            border: none;
            color: var(--accent-gold);
            font-size: 18px;
            cursor: pointer;
            padding: 4px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            opacity: 0.8;
            transition: all 0.3s ease;
            user-select: none;
        }

        .vintage-info-icon:hover {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(218, 165, 32, 0.8));
        }

        .vintage-info-icon:active {
            transform: scale(1.05);
        }

        .vintage-info-icon:focus {
            outline: 2px solid var(--accent-gold);
            outline-offset: 2px;
        }

        .vintage-info-icon-mobile {
            background: transparent;
            border: none;
            color: var(--accent-gold);
            font-size: 18px;
            cursor: pointer;
            padding: 6px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            opacity: 0.8;
            transition: all 0.3s ease;
            user-select: none;
            flex-shrink: 0;
        }

        .vintage-info-icon-mobile:hover,
        .vintage-info-icon-mobile:active {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(218, 165, 32, 0.8));
        }

        /* Tesla Info Icon Styles */
        .tesla-info-icon {
            background: transparent;
            border: none;
            color: #FFD700;
            font-size: 18px;
            cursor: pointer;
            padding: 4px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            opacity: 0.8;
            transition: all 0.3s ease;
            user-select: none;
        }

        .tesla-info-icon:hover {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 4px rgba(0, 191, 255, 0.5));
        }

        .tesla-info-icon:active {
            transform: scale(1.05);
        }

        .tesla-info-icon:focus {
            outline: 2px solid #FFD700;
            outline-offset: 2px;
        }

        .tesla-info-icon-mobile {
            background: transparent;
            border: none;
            color: #FFD700;
            font-size: 18px;
            cursor: pointer;
            padding: 6px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            opacity: 0.8;
            transition: all 0.3s ease;
            user-select: none;
            flex-shrink: 0;
        }

        .tesla-info-icon-mobile:hover,
        .tesla-info-icon-mobile:active {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 4px rgba(0, 191, 255, 0.5));
        }

        /* Pizza Transaction Modal Styles */
        .pizza-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(10px);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 999999;
            animation: pizza-fadeIn 0.3s ease;
            overflow: hidden;
        }

        .pizza-modal-container-desktop {
            background: linear-gradient(145deg, #1a0f0a 0%, #0f0705 100%);
            border: 2px solid;
            border-image: linear-gradient(135deg, #FF6B35, #FFD700, #FF6B35) 1;
            border-radius: 20px;
            max-width: 900px;
            width: 90%;
            max-height: 85vh;
            overflow: hidden;
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.8),
                0 0 100px rgba(255, 107, 53, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            animation: pizza-slideUp 0.4s ease;
        }

        .pizza-modal-header {
            position: relative;
            padding: 12px 24px;
            background: linear-gradient(180deg, rgba(255, 107, 53, 0.08) 0%, transparent 100%);
            border-bottom: 1px solid rgba(255, 107, 53, 0.25);
        }

        .pizza-category-badge {
            display: inline-block;
            background: linear-gradient(135deg, #FF6B35 0%, #F4511E 100%);
            color: #fff;
            font-size: 11px;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            margin-bottom: 6px;
            box-shadow: 0 0 20px rgba(255, 107, 53, 0.3);
        }

        .pizza-historic-badge {
            display: inline-block;
            background: linear-gradient(135deg, #FFD700 0%, #FFA000 100%);
            color: #0a0a0a;
            font-size: 10px;
            font-weight: 600;
            padding: 2px 8px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-left: 8px;
            border: 1px solid rgba(255, 215, 0, 0.3);
        }

        .pizza-modal-title {
            color: #FFD700;
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 6px;
            text-shadow: 0 2px 10px rgba(255, 107, 53, 0.3);
        }

        .pizza-modal-subtitle {
            color: rgba(255, 255, 255, 0.7);
            font-size: 12px;
            font-weight: 400;
        }

        .pizza-text {
            background: linear-gradient(90deg, #FF6B35, #FFD700, #FF6B35);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: pizza-glow 3s ease infinite;
            font-weight: 700;
            background-size: 200% 100%;
        }

        @keyframes pizza-glow {
            0%, 100% {
                filter: brightness(1);
                background-position: 0% 50%;
            }
            50% {
                filter: brightness(1.2);
                background-position: 100% 50%;
            }
        }

        .pizza-highlight {
            color: #FF6B35;
            font-weight: 600;
            text-shadow: 0 0 10px rgba(255, 107, 53, 0.4);
        }

        .pizza-historic-info {
            background: rgba(255, 107, 53, 0.1);
            border: 1px solid rgba(255, 107, 53, 0.3);
            border-radius: 6px;
            padding: 8px;
            margin-top: 8px;
        }

        .pizza-date-display {
            color: #FFD700;
            font-size: 11px;
            margin-bottom: 3px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .pizza-date-display::before {
            content: '🍕';
            font-size: 12px;
        }

        .pizza-price-display {
            color: rgba(255, 255, 255, 0.8);
            font-size: 10px;
            font-weight: 600;
        }

        .pizza-price-amount {
            color: #FF6B35;
            font-weight: 700;
        }

        .pizza-close-btn {
            position: absolute;
            top: 12px;
            right: 24px;
            width: 28px;
            height: 28px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 107, 53, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .pizza-close-btn:hover {
            background: rgba(255, 107, 53, 0.2);
            transform: rotate(90deg);
        }

        .pizza-close-btn::before,
        .pizza-close-btn::after {
            content: '';
            position: absolute;
            width: 14px;
            height: 2px;
            background: #FFD700;
            border-radius: 2px;
        }

        .pizza-close-btn::before {
            transform: rotate(45deg);
        }

        .pizza-close-btn::after {
            transform: rotate(-45deg);
        }

        .pizza-modal-body-flex {
            display: flex;
            flex-direction: row;
            max-height: 500px;
        }

        .pizza-modal-image-desktop {
            flex: 0 0 45%;
            width: 45%;
            height: 500px;
            background: linear-gradient(135deg, #1a0a05 0%, #2a1005 100%);
            position: relative;
            overflow: hidden;
            border-right: 1px solid rgba(255, 107, 53, 0.2);
        }

        .pizza-modal-image-desktop img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            aspect-ratio: 16/9;
        }

        .pizza-modal-image-desktop::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
            pointer-events: none;
        }

        .pizza-modal-content-desktop {
            flex: 1 1 55%;
            width: 55%;
            padding: 20px;
            padding-bottom: 40px;
            max-height: 500px;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .pizza-modal-content-desktop::-webkit-scrollbar {
            width: 4px;
        }

        .pizza-modal-content-desktop::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .pizza-modal-content-desktop::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #FF6B35, #FFD700);
            border-radius: 2px;
        }

        .pizza-description-text {
            color: rgba(255, 255, 255, 0.9);
            font-size: 13px;
            line-height: 1.6;
            margin-bottom: 16px;
        }

        .pizza-info-box {
            background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(255, 215, 0, 0.05) 100%);
            border: 1px solid rgba(255, 107, 53, 0.25);
            border-radius: 10px;
            padding: 14px;
            margin: 16px 0;
        }

        .pizza-info-title {
            color: #FFD700;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .pizza-info-title::before {
            content: '🏛️';
            font-size: 14px;
        }

        .pizza-info-content {
            color: rgba(255, 255, 255, 0.85);
            font-size: 12px;
            line-height: 1.5;
        }

        .pizza-transaction-visual {
            background: rgba(255, 107, 53, 0.05);
            border: 1px solid rgba(255, 107, 53, 0.2);
            border-radius: 8px;
            padding: 12px;
            margin: 16px 0;
            text-align: center;
        }

        .pizza-transaction-flow {
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin: 10px 0;
        }

        .pizza-flow-item {
            text-align: center;
        }

        .pizza-flow-icon {
            font-size: 28px;
            margin-bottom: 6px;
        }

        .pizza-flow-label {
            color: rgba(255, 255, 255, 0.6);
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .pizza-flow-value {
            color: #FF6B35;
            font-size: 12px;
            font-weight: 700;
            margin-top: 3px;
        }

        .pizza-flow-arrow {
            color: #FFD700;
            font-size: 20px;
            animation: pizza-pulse-arrow 2s infinite;
        }

        @keyframes pizza-pulse-arrow {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.2); }
        }

        .pizza-quote-box {
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, transparent);
            border-left: 3px solid #FF6B35;
            padding: 10px 14px;
            margin: 14px 0;
            font-style: italic;
            color: rgba(255, 255, 255, 0.8);
            font-size: 12px;
        }

        .pizza-examples-section {
            background: linear-gradient(135deg, rgba(255, 107, 53, 0.05) 0%, rgba(255, 215, 0, 0.05) 100%);
            border: 1px solid rgba(255, 107, 53, 0.2);
            border-radius: 10px;
            padding: 14px;
            margin-top: 16px;
        }

        .pizza-examples-title {
            color: #FFD700;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            margin-bottom: 10px;
        }

        .pizza-example-list {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .pizza-example-item {
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255, 107, 53, 0.3);
            padding: 5px 9px;
            border-radius: 6px;
            font-family: 'Courier New', monospace;
            font-size: 11px;
            color: #FFD700;
            transition: all 0.3s ease;
            position: relative;
        }

        .pizza-example-item:hover {
            background: rgba(255, 107, 53, 0.1);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 107, 53, 0.2);
        }

        .pizza-example-item::after {
            content: '🍕';
            position: absolute;
            top: -8px;
            right: -6px;
            font-size: 10px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .pizza-example-item:hover::after {
            opacity: 1;
        }

        /* Mobile styles */
        .pizza-modal-container-mobile {
            background: linear-gradient(145deg, #1a0f0a 0%, #0f0705 100%);
            border: 2px solid;
            border-image: linear-gradient(135deg, #FF6B35, #FFD700, #FF6B35) 1;
            border-radius: 20px;
            max-width: 600px;
            width: 90%;
            max-height: 90vh;
            overflow: hidden;
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.8),
                0 0 100px rgba(255, 107, 53, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            animation: pizza-slideUp 0.4s ease;
        }

        .pizza-modal-header-mobile {
            position: relative;
            padding: 12px 24px;
            background: linear-gradient(180deg, rgba(255, 107, 53, 0.08) 0%, transparent 100%);
            border-bottom: 1px solid rgba(255, 107, 53, 0.25);
        }

        .pizza-close-btn-mobile {
            position: absolute;
            top: 12px;
            right: 24px;
            width: 28px;
            height: 28px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 107, 53, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .pizza-close-btn-mobile:hover {
            background: rgba(255, 107, 53, 0.2);
            transform: rotate(90deg);
        }

        .pizza-close-btn-mobile::before,
        .pizza-close-btn-mobile::after {
            content: '';
            position: absolute;
            width: 14px;
            height: 2px;
            background: #FFD700;
            border-radius: 2px;
        }

        .pizza-close-btn-mobile::before {
            transform: rotate(45deg);
        }

        .pizza-close-btn-mobile::after {
            transform: rotate(-45deg);
        }

        .pizza-modal-image-mobile {
            width: 100%;
            height: 200px;
            background: linear-gradient(135deg, #1a0a05 0%, #2a1005 100%);
            position: relative;
            overflow: hidden;
            border-bottom: 1px solid rgba(255, 107, 53, 0.2);
        }

        .pizza-modal-image-mobile img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .pizza-modal-image-mobile::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
            pointer-events: none;
        }

        .pizza-modal-content-mobile {
            padding: 20px;
            max-height: 300px;
            overflow-y: auto;
        }

        .pizza-modal-content-mobile::-webkit-scrollbar {
            width: 4px;
        }

        .pizza-modal-content-mobile::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .pizza-modal-content-mobile::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #FF6B35, #FFD700);
            border-radius: 2px;
        }

        @keyframes pizza-fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes pizza-slideUp {
            from {
                transform: translateY(50px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        @media (max-width: 768px) {
            .pizza-modal-body-flex {
                flex-direction: column;
                max-height: none;
            }

            .pizza-modal-image-desktop {
                width: 100%;
                height: 250px;
                border-right: none;
                border-bottom: 1px solid rgba(255, 107, 53, 0.2);
            }

            .pizza-modal-content-desktop {
                width: 100%;
                max-height: 300px;
            }

            .pizza-transaction-flow {
                flex-direction: column;
                gap: 12px;
            }

            .pizza-flow-arrow {
                transform: rotate(90deg);
            }
        }

        /* Pizza Info Icon Styles */
        .pizza-info-icon {
            background: transparent;
            border: none;
            color: #FF6B35;
            font-size: 18px;
            cursor: pointer;
            padding: 4px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            opacity: 0.8;
            transition: all 0.3s ease;
            user-select: none;
        }

        .pizza-info-icon:hover {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(255, 107, 53, 0.8));
        }

        .pizza-info-icon:active {
            transform: scale(1.05);
        }

        .pizza-info-icon:focus {
            outline: 2px solid #FF6B35;
            outline-offset: 2px;
        }

        .pizza-info-icon-mobile {
            background: transparent;
            border: none;
            color: #FF6B35;
            font-size: 18px;
            cursor: pointer;
            padding: 6px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            opacity: 0.8;
            transition: all 0.3s ease;
            user-select: none;
            flex-shrink: 0;
        }

        .pizza-info-icon-mobile:hover,
        .pizza-info-icon-mobile:active {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(255, 107, 53, 0.8));
        }

        /* Paliblock Modal Styles */
        .paliblock-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(10px);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 999999;
            animation: paliblock-fadeIn 0.3s ease;
        }

        /* Paliblock Desktop Modal Container */
        .paliblock-modal-container-desktop {
            background: linear-gradient(145deg, #100d1a 0%, #0a0712 100%);
            border: 2px solid;
            border-image: linear-gradient(90deg, #9C27B0, #E91E63, #9C27B0) 1;
            border-radius: 20px;
            max-width: 800px;
            width: 90%;
            max-height: 85vh;
            overflow: hidden;
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.8),
                0 0 100px rgba(156, 39, 176, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            animation: paliblock-slideUp 0.4s ease;
        }

        /* Paliblock Header Desktop */
        .paliblock-modal-header {
            position: relative;
            padding: 24px 24px 20px;
            background: linear-gradient(180deg, rgba(156, 39, 176, 0.06) 0%, transparent 100%);
            border-bottom: 1px solid rgba(233, 30, 99, 0.2);
        }

        .paliblock-category-badge {
            display: inline-block;
            background: linear-gradient(135deg, #9C27B0 0%, #7B1FA2 100%);
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            padding: 4px 12px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
            box-shadow: 0 0 20px rgba(156, 39, 176, 0.3);
        }

        .paliblock-symmetry-badge {
            display: inline-block;
            background: linear-gradient(135deg, #E91E63 0%, #C2185B 100%);
            color: #fff;
            font-size: 11px;
            font-weight: 600;
            padding: 3px 10px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-left: 8px;
            border: 1px solid rgba(233, 30, 99, 0.3);
            animation: paliblock-pulse-symmetry 2s infinite;
        }

        @keyframes paliblock-pulse-symmetry {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        .paliblock-modal-title {
            color: #FFD700;
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 8px;
            text-shadow: 0 2px 10px rgba(156, 39, 176, 0.3);
        }

        .paliblock-modal-subtitle {
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
            font-weight: 400;
        }

        /* Paliblock special text effect */
        .paliblock-text {
            background: linear-gradient(90deg, #9C27B0, #E91E63, #FFD700, #E91E63, #9C27B0);
            background-size: 200% 100%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: paliblock-gradient-shift 4s ease infinite;
            font-weight: 700;
        }

        @keyframes paliblock-gradient-shift {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }

        .paliblock-double-highlight {
            color: #E91E63;
            font-weight: 600;
            text-shadow: 0 0 10px rgba(233, 30, 99, 0.4);
        }

        /* Paliblock Close button */
        .paliblock-close-btn {
            position: absolute;
            top: 24px;
            right: 24px;
            width: 32px;
            height: 32px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(156, 39, 176, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .paliblock-close-btn:hover {
            background: rgba(156, 39, 176, 0.2);
            transform: rotate(90deg);
        }

        .paliblock-close-btn::before,
        .paliblock-close-btn::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 2px;
            background: #FFD700;
            border-radius: 2px;
        }

        .paliblock-close-btn::before {
            transform: rotate(45deg);
        }

        .paliblock-close-btn::after {
            transform: rotate(-45deg);
        }

        /* Paliblock Body Flex Layout Desktop */
        .paliblock-modal-body-flex {
            display: flex;
            flex-direction: row;
            max-height: 500px;
        }

        /* Paliblock Image Container Desktop */
        .paliblock-modal-image-desktop {
            flex: 0 0 45%;
            width: 45%;
            height: 500px;
            background: linear-gradient(135deg, #1a0a1a 0%, #2a0a2a 100%);
            position: relative;
            overflow: hidden;
            border-right: 1px solid rgba(233, 30, 99, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .paliblock-modal-image-desktop img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            aspect-ratio: 16/9;
        }

        .paliblock-modal-image-desktop::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
            pointer-events: none;
        }

        /* Paliblock Content Desktop */
        .paliblock-modal-content-desktop {
            flex: 1 1 55%;
            width: 55%;
            padding: 20px;
            padding-bottom: 40px;
            max-height: 500px;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .paliblock-modal-content-desktop::-webkit-scrollbar {
            width: 4px;
        }

        .paliblock-modal-content-desktop::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .paliblock-modal-content-desktop::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #9C27B0, #E91E63);
            border-radius: 2px;
        }

        .paliblock-description-text {
            color: rgba(255, 255, 255, 0.9);
            font-size: 15px;
            line-height: 1.7;
            margin-bottom: 20px;
        }

        /* Paliblock Palindrome Visual */
        .paliblock-palindrome-visual {
            background: rgba(156, 39, 176, 0.05);
            border: 1px solid rgba(233, 30, 99, 0.2);
            border-radius: 10px;
            padding: 16px;
            margin: 20px 0;
            text-align: center;
        }

        .paliblock-blocks-showcase {
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin: 12px 0;
        }

        .paliblock-block-example {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .paliblock-block-number {
            font-family: 'Courier New', monospace;
            font-size: 20px;
            color: #E91E63;
            font-weight: 700;
            letter-spacing: 2px;
            text-shadow: 0 0 15px rgba(233, 30, 99, 0.5);
        }

        .paliblock-block-label {
            color: rgba(255, 255, 255, 0.5);
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 4px;
        }

        .paliblock-symmetry-line {
            width: 100%;
            height: 1px;
            background: linear-gradient(90deg, transparent, #FFD700, transparent);
            margin: 16px 0;
        }

        /* Paliblock Info Box */
        .paliblock-info-box {
            background: linear-gradient(135deg, rgba(156, 39, 176, 0.1) 0%, rgba(233, 30, 99, 0.08) 100%);
            border: 1px solid rgba(156, 39, 176, 0.25);
            border-radius: 12px;
            padding: 16px;
            margin: 20px 0;
        }

        .paliblock-info-title {
            color: #FFD700;
            font-size: 13px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .paliblock-info-title::before {
            content: '♾️';
            font-size: 16px;
        }

        .paliblock-info-content {
            color: rgba(255, 255, 255, 0.85);
            font-size: 14px;
            line-height: 1.6;
        }

        /* Paliblock Examples Section */
        .paliblock-examples-section {
            background: linear-gradient(135deg, rgba(156, 39, 176, 0.05) 0%, rgba(233, 30, 99, 0.05) 100%);
            border: 1px solid rgba(156, 39, 176, 0.2);
            border-radius: 12px;
            padding: 16px;
            margin-top: 20px;
        }

        .paliblock-examples-title {
            color: #FFD700;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 12px;
        }

        .paliblock-example-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .paliblock-example-item {
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid;
            border-image: linear-gradient(90deg, #9C27B0, #E91E63) 1;
            padding: 6px 10px;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            font-size: 13px;
            color: #FFD700;
            transition: all 0.3s ease;
            position: relative;
        }

        .paliblock-example-item:hover {
            background: rgba(156, 39, 176, 0.1);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(156, 39, 176, 0.3);
        }

        .paliblock-example-item::after {
            content: '↔️';
            position: absolute;
            top: -10px;
            right: 50%;
            transform: translateX(50%);
            font-size: 10px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .paliblock-example-item:hover::after {
            opacity: 1;
        }

        /* Paliblock Animations */
        @keyframes paliblock-fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes paliblock-slideUp {
            from {
                transform: translateY(50px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        /* Paliblock Responsive Desktop */
        @media (max-width: 768px) {
            .paliblock-modal-container-desktop {
                display: none;
            }
        }

        /* Paliblock Mobile Modal Container */
        .paliblock-modal-container-mobile {
            background: linear-gradient(145deg, #100d1a 0%, #0a0712 100%);
            border: 2px solid;
            border-image: linear-gradient(90deg, #9C27B0, #E91E63, #9C27B0) 1;
            border-radius: 20px;
            max-width: 600px;
            width: 90%;
            max-height: 90vh;
            overflow: hidden;
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.8),
                0 0 100px rgba(156, 39, 176, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            animation: paliblock-slideUp 0.4s ease;
        }

        /* Paliblock Header Mobile */
        .paliblock-modal-header-mobile {
            position: relative;
            padding: 12px 16px 10px;
            background: linear-gradient(180deg, rgba(156, 39, 176, 0.06) 0%, transparent 100%);
            border-bottom: 1px solid rgba(233, 30, 99, 0.2);
        }

        .paliblock-category-badge-mobile {
            display: inline-block;
            background: linear-gradient(135deg, #9C27B0 0%, #7B1FA2 100%);
            color: #fff;
            font-size: 10px;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
            box-shadow: 0 0 20px rgba(156, 39, 176, 0.3);
        }

        .paliblock-symmetry-badge-mobile {
            display: inline-block;
            background: linear-gradient(135deg, #E91E63 0%, #C2185B 100%);
            color: #fff;
            font-size: 9px;
            font-weight: 600;
            padding: 2px 8px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-left: 8px;
            border: 1px solid rgba(233, 30, 99, 0.3);
            animation: paliblock-pulse-symmetry 2s infinite;
        }

        .paliblock-modal-title-mobile {
            color: #FFD700;
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 8px;
            text-shadow: 0 2px 10px rgba(156, 39, 176, 0.3);
        }

        .paliblock-modal-subtitle-mobile {
            color: rgba(255, 255, 255, 0.7);
            font-size: 12px;
            font-weight: 400;
        }

        /* Paliblock Image Container Mobile */
        .paliblock-modal-image-mobile {
            width: 100%;
            height: 200px;
            background: linear-gradient(135deg, #1a0a1a 0%, #2a0a2a 100%);
            position: relative;
            overflow: hidden;
            border-bottom: 1px solid rgba(233, 30, 99, 0.2);
        }

        .paliblock-modal-image-mobile img,
        .paliblock-modal-image-mobile video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .paliblock-modal-image-mobile::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
            pointer-events: none;
        }

        /* Paliblock Content Mobile */
        .paliblock-modal-content-mobile {
            padding: 24px;
            max-height: 300px;
            overflow-y: auto;
        }

        .paliblock-modal-content-mobile::-webkit-scrollbar {
            width: 4px;
        }

        .paliblock-modal-content-mobile::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .paliblock-modal-content-mobile::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #9C27B0, #E91E63);
            border-radius: 2px;
        }

        /* Paliblock Responsive Mobile */
        @media (min-width: 769px) {
            .paliblock-modal-container-mobile {
                display: none;
            }
        }

        @media (max-width: 640px) {
            .paliblock-modal-title,
            .paliblock-modal-title-mobile {
                font-size: 20px;
            }

            .paliblock-symmetry-badge,
            .paliblock-symmetry-badge-mobile {
                display: block;
                margin-left: 0;
                margin-top: 8px;
                display: inline-block;
            }

            .paliblock-example-item {
                font-size: 11px;
            }

            .paliblock-blocks-showcase {
                flex-direction: column;
                gap: 12px;
            }

            .paliblock-modal-container-mobile .paliblock-close-btn {
                width: 28px;
                height: 28px;
            }

            .paliblock-modal-container-mobile .paliblock-close-btn::before,
            .paliblock-modal-container-mobile .paliblock-close-btn::after {
                width: 14px;
            }
        }

        /* Paliblock Info Icons */
        .paliblock-info-icon-desktop,
        .paliblock-info-icon-mobile {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            background: rgba(156, 39, 176, 0.2);
            border: 1px solid rgba(156, 39, 176, 0.5);
            border-radius: 50%;
            color: #E91E63;
            font-size: 14px;
            font-weight: 700;
            transition: all 0.3s ease;
            opacity: 0.85;
            filter: drop-shadow(0 0 4px rgba(156, 39, 176, 0.4));
        }

        .paliblock-info-icon-desktop:hover,
        .paliblock-info-icon-desktop:active {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(156, 39, 176, 0.8));
        }

        .paliblock-info-icon-mobile:hover,
        .paliblock-info-icon-mobile:active {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(156, 39, 176, 0.8));
        }

        /* Nakamoto Info Icons */
        .nakamoto-info-icon-desktop,
        .nakamoto-info-icon-mobile {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: rgba(255, 215, 0, 0.2);
            border: 1px solid rgba(255, 215, 0, 0.5);
            color: #FFD700;
            cursor: pointer;
            transition: all 0.3s ease;
            opacity: 0.8;
            filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.4));
        }

        .nakamoto-info-icon-desktop:hover,
        .nakamoto-info-icon-desktop:active {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
        }

        .nakamoto-info-icon-mobile:hover,
        .nakamoto-info-icon-mobile:active {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
        }

        /* HalFinney Info Icons */
        .halfinney-info-icon-desktop,
        .halfinney-info-icon-mobile {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: rgba(100, 200, 255, 0.2);
            border: 1px solid rgba(100, 200, 255, 0.5);
            color: #64B5F6;
            cursor: pointer;
            transition: all 0.3s ease;
            opacity: 0.8;
            filter: drop-shadow(0 0 4px rgba(100, 200, 255, 0.4));
        }

        .halfinney-info-icon-desktop:hover,
        .halfinney-info-icon-desktop:active {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(100, 200, 255, 0.8));
        }

        .halfinney-info-icon-mobile:hover,
        .halfinney-info-icon-mobile:active {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(100, 200, 255, 0.8));
        }

        /* HalFinney Modal Styles */
        .halfinney-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(10px);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 999999;
            animation: halfinney-fadeIn 0.3s ease;
        }

        /* Desktop Container */
        .halfinney-modal-container-desktop {
            background: linear-gradient(145deg, #0d1620 0%, #050b12 100%);
            border: 1px solid rgba(100, 200, 255, 0.3);
            border-radius: 20px;
            max-width: 800px;
            width: 90%;
            max-height: 85vh;
            overflow: hidden;
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.8),
                0 0 100px rgba(100, 200, 255, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            animation: halfinney-slideUp 0.4s ease;
        }

        .halfinney-modal-header {
            position: relative;
            padding: 24px 24px 20px;
            background: linear-gradient(180deg, rgba(100, 200, 255, 0.06) 0%, transparent 100%);
            border-bottom: 1px solid rgba(100, 200, 255, 0.2);
        }

        .halfinney-category-badge {
            display: inline-block;
            background: linear-gradient(135deg, #64B5F6 0%, #2196F3 100%);
            color: #0a0a0a;
            font-size: 12px;
            font-weight: 700;
            padding: 4px 12px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
            box-shadow: 0 0 20px rgba(100, 181, 246, 0.3);
        }

        .halfinney-legacy-badge {
            display: inline-block;
            background: linear-gradient(135deg, #FFD700 0%, #FF8C00 100%);
            color: #0a0a0a;
            font-size: 11px;
            font-weight: 600;
            padding: 3px 10px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-left: 8px;
            border: 1px solid rgba(255, 215, 0, 0.3);
        }

        .halfinney-modal-title {
            color: #FFD700;
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 8px;
            text-shadow: 0 2px 10px rgba(100, 200, 255, 0.3);
        }

        .halfinney-modal-subtitle {
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
            font-weight: 400;
        }

        .halfinney-quote-section {
            margin-top: 12px;
            padding: 10px;
            background: rgba(100, 200, 255, 0.05);
            border-left: 3px solid #64B5F6;
            border-radius: 4px;
        }

        .halfinney-famous-quote {
            color: #64B5F6;
            font-size: 13px;
            font-style: italic;
            opacity: 0.9;
        }

        .halfinney-quote-author {
            color: rgba(255, 255, 255, 0.6);
            font-size: 11px;
            margin-top: 4px;
            text-align: right;
        }

        .halfinney-name {
            background: linear-gradient(90deg, #64B5F6, #FFD700);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 700;
        }

        .halfinney-pioneer-highlight {
            color: #64B5F6;
            font-weight: 600;
            text-shadow: 0 0 10px rgba(100, 181, 246, 0.4);
        }

        .halfinney-close-btn {
            position: absolute;
            top: 24px;
            right: 24px;
            width: 32px;
            height: 32px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(100, 200, 255, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .halfinney-close-btn:hover {
            background: rgba(100, 200, 255, 0.2);
            transform: rotate(90deg);
        }

        .halfinney-close-btn::before,
        .halfinney-close-btn::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 2px;
            background: #FFD700;
            border-radius: 2px;
        }

        .halfinney-close-btn::before {
            transform: rotate(45deg);
        }

        .halfinney-close-btn::after {
            transform: rotate(-45deg);
        }

        .halfinney-modal-body-flex {
            display: flex;
            flex-direction: row;
            max-height: 500px;
        }

        .halfinney-modal-image-desktop {
            flex: 0 0 45%;
            width: 45%;
            height: 500px;
            background: linear-gradient(135deg, #001428 0%, #002040 100%);
            position: relative;
            overflow: hidden;
            border-right: 1px solid rgba(100, 200, 255, 0.2);
        }

        .halfinney-modal-image-desktop img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            aspect-ratio: 16/9;
        }

        .halfinney-modal-image-desktop::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
            pointer-events: none;
        }

        .halfinney-modal-content-desktop {
            flex: 1 1 55%;
            width: 55%;
            padding: 24px;
            max-height: 500px;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .halfinney-modal-content-desktop::-webkit-scrollbar {
            width: 4px;
        }

        .halfinney-modal-content-desktop::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .halfinney-modal-content-desktop::-webkit-scrollbar-thumb {
            background: rgba(100, 200, 255, 0.5);
            border-radius: 2px;
        }

        .halfinney-description-text {
            color: rgba(255, 255, 255, 0.9);
            font-size: 15px;
            line-height: 1.7;
            margin-bottom: 20px;
        }

        .halfinney-info-box {
            background: linear-gradient(135deg, rgba(100, 200, 255, 0.1) 0%, rgba(255, 215, 0, 0.05) 100%);
            border: 1px solid rgba(100, 200, 255, 0.25);
            border-radius: 12px;
            padding: 16px;
            margin: 20px 0;
        }

        .halfinney-info-title {
            color: #FFD700;
            font-size: 13px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .halfinney-info-title::before {
            content: '🔐';
            font-size: 16px;
        }

        .halfinney-info-content {
            color: rgba(255, 255, 255, 0.85);
            font-size: 14px;
            line-height: 1.6;
        }

        .halfinney-achievements-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 12px;
            margin: 20px 0;
        }

        .halfinney-achievement-card {
            background: rgba(100, 200, 255, 0.05);
            border: 1px solid rgba(100, 200, 255, 0.2);
            border-radius: 8px;
            padding: 10px;
            text-align: center;
        }

        .halfinney-achievement-icon {
            font-size: 24px;
            margin-bottom: 6px;
        }

        .halfinney-achievement-title {
            color: #64B5F6;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 4px;
        }

        .halfinney-achievement-desc {
            color: rgba(255, 255, 255, 0.6);
            font-size: 10px;
            line-height: 1.3;
        }

        .halfinney-examples-section {
            background: linear-gradient(135deg, rgba(100, 200, 255, 0.05) 0%, rgba(255, 215, 0, 0.05) 100%);
            border: 1px solid rgba(100, 200, 255, 0.2);
            border-radius: 12px;
            padding: 16px;
            margin-top: 20px;
        }

        .halfinney-examples-title {
            color: #FFD700;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 12px;
        }

        .halfinney-example-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .halfinney-example-item {
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(100, 200, 255, 0.3);
            padding: 6px 12px;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            color: #FFD700;
            transition: all 0.3s ease;
            position: relative;
        }

        .halfinney-example-item:hover {
            background: rgba(100, 200, 255, 0.1);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(100, 200, 255, 0.2);
        }

        .halfinney-example-item::after {
            content: '⚡';
            position: absolute;
            top: -8px;
            right: -8px;
            font-size: 12px;
            color: #64B5F6;
            animation: halfinney-pulse-blue 2s infinite;
        }

        @keyframes halfinney-pulse-blue {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.7; transform: scale(1.2); }
        }

        /* Responsive Desktop */
        @media (max-width: 768px) {
            .halfinney-modal-container-desktop {
                display: none;
            }
        }

        /* Mobile Container */
        .halfinney-modal-container-mobile {
            background: linear-gradient(145deg, #0d1620 0%, #050b12 100%);
            border: 1px solid rgba(100, 200, 255, 0.3);
            border-radius: 20px;
            max-width: 600px;
            width: 90%;
            max-height: 90vh;
            overflow: hidden;
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.8),
                0 0 100px rgba(100, 200, 255, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            animation: halfinney-slideUp 0.4s ease;
        }

        .halfinney-modal-header-mobile {
            position: relative;
            padding: 12px 16px 10px;
            background: linear-gradient(180deg, rgba(100, 200, 255, 0.06) 0%, transparent 100%);
            border-bottom: 1px solid rgba(100, 200, 255, 0.2);
        }

        .halfinney-category-badge-mobile {
            display: inline-block;
            background: linear-gradient(135deg, #64B5F6 0%, #2196F3 100%);
            color: #0a0a0a;
            font-size: 10px;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
            box-shadow: 0 0 20px rgba(100, 181, 246, 0.3);
        }

        .halfinney-legacy-badge-mobile {
            display: inline-block;
            background: linear-gradient(135deg, #FFD700 0%, #FF8C00 100%);
            color: #0a0a0a;
            font-size: 9px;
            font-weight: 600;
            padding: 2px 8px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-left: 8px;
            border: 1px solid rgba(255, 215, 0, 0.3);
        }

        .halfinney-modal-title-mobile {
            color: #FFD700;
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 8px;
            text-shadow: 0 2px 10px rgba(100, 200, 255, 0.3);
        }

        .halfinney-modal-subtitle-mobile {
            color: rgba(255, 255, 255, 0.7);
            font-size: 12px;
            font-weight: 400;
        }

        .halfinney-modal-image-mobile {
            width: 100%;
            height: 200px;
            background: linear-gradient(135deg, #001428 0%, #002040 100%);
            position: relative;
            overflow: hidden;
            border-bottom: 1px solid rgba(100, 200, 255, 0.2);
        }

        .halfinney-modal-image-mobile img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .halfinney-modal-image-mobile::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
            pointer-events: none;
        }

        .halfinney-modal-content-mobile {
            padding: 24px;
            max-height: 300px;
            overflow-y: auto;
        }

        .halfinney-modal-content-mobile::-webkit-scrollbar {
            width: 4px;
        }

        .halfinney-modal-content-mobile::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .halfinney-modal-content-mobile::-webkit-scrollbar-thumb {
            background: rgba(100, 200, 255, 0.5);
            border-radius: 2px;
        }

        .halfinney-achievements-grid-mobile {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin: 20px 0;
        }

        /* Responsive Mobile */
        @media (min-width: 769px) {
            .halfinney-modal-container-mobile {
                display: none;
            }
        }

        @media (max-width: 640px) {
            .halfinney-modal-container-mobile {
                width: 95%;
                margin: 10px;
            }

            .halfinney-modal-title,
            .halfinney-modal-title-mobile {
                font-size: 20px;
            }

            .halfinney-legacy-badge-mobile {
                display: block;
                margin-left: 0;
                margin-top: 8px;
                display: inline-block;
            }

            .halfinney-modal-container-mobile .halfinney-close-btn {
                width: 28px;
                height: 28px;
            }

            .halfinney-modal-container-mobile .halfinney-close-btn::before,
            .halfinney-modal-container-mobile .halfinney-close-btn::after {
                width: 14px;
            }

            .halfinney-achievements-grid,
            .halfinney-achievements-grid-mobile {
                grid-template-columns: 1fr;
            }
        }

        @keyframes halfinney-fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes halfinney-slideUp {
            from {
                transform: translateY(50px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        /* Nakamoto Modal Styles */
        .nakamoto-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.88);
            backdrop-filter: blur(10px);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 999999;
            animation: nakamoto-fadeIn 0.3s ease;
        }

        /* Nakamoto Desktop Modal Container */
        .nakamoto-modal-container-desktop {
            background: linear-gradient(145deg, #0f0f0a 0%, #080805 100%);
            border: 1px solid;
            border-image: linear-gradient(135deg, #FFD700 0%, #B8860B 50%, #FFD700 100%) 1;
            border-radius: 20px;
            max-width: 800px;
            width: 90%;
            max-height: 85vh;
            overflow: hidden;
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.9),
                0 0 100px rgba(255, 215, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            animation: nakamoto-slideUp 0.4s ease;
        }

        /* Nakamoto Header Desktop */
        .nakamoto-modal-header {
            position: relative;
            padding: 24px 24px 20px;
            background: linear-gradient(180deg, rgba(255, 215, 0, 0.08) 0%, transparent 100%);
            border-bottom: 1px solid rgba(255, 215, 0, 0.25);
        }

        .nakamoto-category-badge {
            display: inline-block;
            background: linear-gradient(135deg, #FFD700 0%, #DAA520 100%);
            color: #0a0a0a;
            font-size: 12px;
            font-weight: 700;
            padding: 4px 12px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
            box-shadow: 0 0 25px rgba(255, 215, 0, 0.4);
        }

        .nakamoto-palindrome-badge {
            display: inline-block;
            background: linear-gradient(135deg, #8B4513 0%, #654321 100%);
            color: #FFD700;
            font-size: 11px;
            font-weight: 600;
            padding: 3px 10px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-left: 8px;
            border: 1px solid rgba(255, 215, 0, 0.3);
        }

        .nakamoto-modal-title {
            color: #FFD700;
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 8px;
            text-shadow: 0 2px 15px rgba(255, 215, 0, 0.4);
        }

        .nakamoto-modal-subtitle {
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
            font-weight: 400;
        }

        /* Nakamoto special text effect */
        .nakamoto-name {
            background: linear-gradient(90deg, #FFD700 0%, #FFF 50%, #FFD700 100%);
            background-size: 200% 100%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: nakamoto-shimmer-gold 3s infinite;
            font-weight: 700;
        }

        @keyframes nakamoto-shimmer-gold {
            0% { background-position: 0% 50%; }
            100% { background-position: 200% 50%; }
        }

        .nakamoto-palindrome-highlight {
            color: #DAA520;
            font-weight: 600;
            text-shadow: 0 0 10px rgba(218, 165, 32, 0.4);
        }

        /* Nakamoto Disclaimer box */
        .nakamoto-disclaimer-box {
            background: rgba(255, 140, 0, 0.1);
            border: 1px solid rgba(255, 140, 0, 0.3);
            border-radius: 8px;
            padding: 10px;
            margin-top: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .nakamoto-disclaimer-icon {
            color: #FFA500;
            font-size: 16px;
            flex-shrink: 0;
        }

        .nakamoto-disclaimer-text {
            color: rgba(255, 255, 255, 0.7);
            font-size: 11px;
            line-height: 1.4;
        }

        /* Nakamoto Close button */
        .nakamoto-close-btn {
            position: absolute;
            top: 24px;
            right: 24px;
            width: 32px;
            height: 32px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 215, 0, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .nakamoto-close-btn:hover {
            background: rgba(255, 215, 0, 0.2);
            transform: rotate(90deg);
        }

        .nakamoto-close-btn::before,
        .nakamoto-close-btn::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 2px;
            background: #FFD700;
            border-radius: 2px;
        }

        .nakamoto-close-btn::before {
            transform: rotate(45deg);
        }

        .nakamoto-close-btn::after {
            transform: rotate(-45deg);
        }

        /* Nakamoto Body Flex Layout Desktop */
        .nakamoto-modal-body-flex {
            display: flex;
            flex-direction: row;
            max-height: 500px;
        }

        /* Nakamoto Image Container Desktop */
        .nakamoto-modal-image-desktop {
            flex: 0 0 45%;
            width: 45%;
            height: 500px;
            background: linear-gradient(135deg, #0a0a08 0%, #1a1410 100%);
            position: relative;
            overflow: hidden;
            border-right: 1px solid rgba(255, 215, 0, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .nakamoto-modal-image-desktop img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            aspect-ratio: 16/9;
        }

        .nakamoto-modal-image-desktop::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
            pointer-events: none;
        }

        /* Nakamoto Content Desktop */
        .nakamoto-modal-content-desktop {
            flex: 1 1 55%;
            width: 55%;
            padding: 20px;
            padding-bottom: 40px;
            max-height: 500px;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .nakamoto-modal-content-desktop::-webkit-scrollbar {
            width: 4px;
        }

        .nakamoto-modal-content-desktop::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .nakamoto-modal-content-desktop::-webkit-scrollbar-thumb {
            background: rgba(255, 215, 0, 0.5);
            border-radius: 2px;
        }

        .nakamoto-description-text {
            color: rgba(255, 255, 255, 0.9);
            font-size: 15px;
            line-height: 1.7;
            margin-bottom: 20px;
        }

        /* Nakamoto Palindrome Showcase */
        .nakamoto-palindrome-showcase {
            background: rgba(255, 215, 0, 0.05);
            border: 1px solid rgba(255, 215, 0, 0.2);
            border-radius: 10px;
            padding: 14px;
            margin: 16px 0;
            text-align: center;
        }

        .nakamoto-palindrome-label {
            color: rgba(255, 255, 255, 0.6);
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
        }

        .nakamoto-palindrome-example {
            font-family: 'Courier New', monospace;
            font-size: 20px;
            color: #FFD700;
            font-weight: 700;
            letter-spacing: 2px;
            text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
            word-break: break-all;
        }

        .nakamoto-mirror-indicator {
            color: rgba(255, 255, 255, 0.4);
            font-size: 10px;
            margin-top: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .nakamoto-mirror-arrow {
            font-size: 14px;
        }

        /* Nakamoto Info Box */
        .nakamoto-info-box {
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(139, 69, 19, 0.08) 100%);
            border: 1px solid rgba(255, 215, 0, 0.25);
            border-radius: 12px;
            padding: 16px;
            margin: 20px 0;
        }

        .nakamoto-info-title {
            color: #FFD700;
            font-size: 13px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .nakamoto-info-title::before {
            content: '♾️';
            font-size: 16px;
        }

        .nakamoto-info-content {
            color: rgba(255, 255, 255, 0.85);
            font-size: 14px;
            line-height: 1.6;
        }

        /* Nakamoto Examples Section */
        .nakamoto-examples-section {
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.08) 0%, rgba(139, 69, 19, 0.05) 100%);
            border: 1px solid rgba(255, 215, 0, 0.2);
            border-radius: 12px;
            padding: 16px;
            margin-top: 20px;
        }

        .nakamoto-examples-title {
            color: #FFD700;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 12px;
        }

        .nakamoto-example-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .nakamoto-example-item {
            background: rgba(0, 0, 0, 0.6);
            border: 1px solid rgba(255, 215, 0, 0.3);
            padding: 6px 12px;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            color: #FFD700;
            transition: all 0.3s ease;
            position: relative;
        }

        .nakamoto-example-item:hover {
            background: rgba(255, 215, 0, 0.1);
            transform: translateY(-2px) scaleX(-1);
        }

        .nakamoto-example-item:hover::after {
            content: '↔️';
            position: absolute;
            top: -10px;
            right: 50%;
            transform: translateX(50%);
            font-size: 12px;
        }

        /* Nakamoto Animations */
        @keyframes nakamoto-fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes nakamoto-slideUp {
            from {
                transform: translateY(50px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        /* Nakamoto Responsive Desktop */
        @media (max-width: 768px) {
            .nakamoto-modal-container-desktop {
                display: none;
            }
        }

        /* Nakamoto Mobile Modal Container */
        .nakamoto-modal-container-mobile {
            background: linear-gradient(145deg, #0f0f0a 0%, #080805 100%);
            border: 1px solid;
            border-image: linear-gradient(135deg, #FFD700 0%, #B8860B 50%, #FFD700 100%) 1;
            border-radius: 20px;
            max-width: 600px;
            width: 90%;
            max-height: 90vh;
            overflow: hidden;
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.9),
                0 0 100px rgba(255, 215, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            animation: nakamoto-slideUp 0.4s ease;
        }

        /* Nakamoto Header Mobile */
        .nakamoto-modal-header-mobile {
            position: relative;
            padding: 12px 16px 10px;
            background: linear-gradient(180deg, rgba(255, 215, 0, 0.08) 0%, transparent 100%);
            border-bottom: 1px solid rgba(255, 215, 0, 0.25);
        }

        .nakamoto-category-badge-mobile {
            display: inline-block;
            background: linear-gradient(135deg, #FFD700 0%, #DAA520 100%);
            color: #0a0a0a;
            font-size: 10px;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
            box-shadow: 0 0 25px rgba(255, 215, 0, 0.4);
        }

        .nakamoto-palindrome-badge-mobile {
            display: inline-block;
            background: linear-gradient(135deg, #8B4513 0%, #654321 100%);
            color: #FFD700;
            font-size: 9px;
            font-weight: 600;
            padding: 2px 8px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-left: 8px;
            border: 1px solid rgba(255, 215, 0, 0.3);
        }

        .nakamoto-modal-title-mobile {
            color: #FFD700;
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 8px;
            text-shadow: 0 2px 15px rgba(255, 215, 0, 0.4);
        }

        .nakamoto-modal-subtitle-mobile {
            color: rgba(255, 255, 255, 0.7);
            font-size: 12px;
            font-weight: 400;
        }

        /* Nakamoto Image Container Mobile */
        .nakamoto-modal-image-mobile {
            width: 100%;
            height: 200px;
            background: linear-gradient(135deg, #0a0a08 0%, #1a1410 100%);
            position: relative;
            overflow: hidden;
            border-bottom: 1px solid rgba(255, 215, 0, 0.2);
        }

        .nakamoto-modal-image-mobile img,
        .nakamoto-modal-image-mobile video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .nakamoto-modal-image-mobile::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
            pointer-events: none;
        }

        /* Nakamoto Content Mobile */
        .nakamoto-modal-content-mobile {
            padding: 24px;
            max-height: 300px;
            overflow-y: auto;
        }

        .nakamoto-modal-content-mobile::-webkit-scrollbar {
            width: 4px;
        }

        .nakamoto-modal-content-mobile::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .nakamoto-modal-content-mobile::-webkit-scrollbar-thumb {
            background: rgba(255, 215, 0, 0.5);
            border-radius: 2px;
        }

        /* Nakamoto Responsive Mobile */
        @media (min-width: 769px) {
            .nakamoto-modal-container-mobile {
                display: none;
            }
        }

        @media (max-width: 640px) {
            .nakamoto-modal-title,
            .nakamoto-modal-title-mobile {
                font-size: 20px;
            }

            .nakamoto-palindrome-badge,
            .nakamoto-palindrome-badge-mobile {
                display: block;
                margin-left: 0;
                margin-top: 8px;
                display: inline-block;
            }

            .nakamoto-palindrome-example {
                font-size: 16px;
            }

            .nakamoto-modal-container-mobile .nakamoto-close-btn {
                width: 28px;
                height: 28px;
            }

            .nakamoto-modal-container-mobile .nakamoto-close-btn::before,
            .nakamoto-modal-container-mobile .nakamoto-close-btn::after {
                width: 14px;
            }
        }

        /* Nakamoto Info Icons */
        .nakamoto-info-icon-desktop,
        .nakamoto-info-icon-mobile {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            background: rgba(255, 215, 0, 0.2);
            border: 1px solid rgba(255, 215, 0, 0.5);
            border-radius: 50%;
            color: #FFD700;
            font-size: 14px;
            font-weight: 700;
            transition: all 0.3s ease;
            opacity: 0.85;
            filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.4));
        }

        .nakamoto-info-icon-desktop:hover,
        .nakamoto-info-icon-desktop:active {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
        }

        .nakamoto-info-icon-mobile:hover,
        .nakamoto-info-icon-mobile:active {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
        }

        /* B9-450 Modal Container - Mobile */
        .b9450-modal-container-mobile {
            background: linear-gradient(145deg, #081210 0%, #030806 100%);
            border: 2px solid;
            border-image: linear-gradient(135deg, #50FFB4, #FFD700) 1;
            border-radius: 20px;
            max-width: 600px;
            width: 90%;
            max-height: 90vh;
            overflow: hidden;
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.9),
                0 0 120px rgba(80, 255, 180, 0.2),
                0 0 80px rgba(255, 215, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            animation: slideUp 0.4s ease;
        }

        /* B9-450 Header Mobile */
        .b9450-modal-header-mobile {
            position: relative;
            padding: 24px 24px 20px;
            background: linear-gradient(180deg, rgba(80, 255, 180, 0.08) 0%, rgba(255, 215, 0, 0.03) 100%);
            border-bottom: 1px solid rgba(255, 215, 0, 0.3);
        }

        /* B9-450 Badges Mobile */
        .b9450-category-badge-mobile {
            display: inline-block;
            background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
            color: #0a0a0a;
            font-size: 12px;
            font-weight: 700;
            padding: 4px 12px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
            box-shadow: 0 0 25px rgba(255, 215, 0, 0.4);
        }

        .b9450-first-badge-mobile {
            display: inline-block;
            background: linear-gradient(135deg, #50FFB4 0%, #00E676 100%);
            color: #0a0a0a;
            font-size: 11px;
            font-weight: 600;
            padding: 3px 10px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-left: 8px;
            border: 1px solid rgba(80, 255, 180, 0.5);
            animation: shimmer 3s infinite;
        }

        /* B9-450 Title Mobile */
        .b9450-modal-title-mobile {
            color: #FFD700;
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 8px;
            text-shadow: 0 2px 15px rgba(255, 215, 0, 0.4);
        }

        .b9450-modal-subtitle-mobile {
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
            font-weight: 400;
        }

        /* B9-450 Number Highlight Mobile */
        .b9450-number-highlight-mobile {
            background: linear-gradient(90deg, #50FFB4, #FFD700);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: 700;
            font-size: 26px;
        }

        /* B9-450 Historical Date Mobile */
        .b9450-historical-date-mobile {
            color: #50FFB4;
            font-size: 13px;
            margin-top: 8px;
            opacity: 0.9;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .b9450-historical-date-mobile::before {
            content: '👑';
            font-size: 14px;
        }

        /* B9-450 Range Display Mobile */
        .b9450-range-display-mobile {
            background: rgba(255, 215, 0, 0.1);
            border: 1px solid rgba(255, 215, 0, 0.3);
            border-radius: 8px;
            padding: 8px 12px;
            margin-top: 12px;
            font-family: 'Courier New', monospace;
            font-size: 13px;
            color: #FFD700;
            text-align: center;
        }

        /* B9-450 Close Button Mobile */
        .b9450-close-btn-mobile {
            position: absolute;
            top: 24px;
            right: 24px;
            width: 32px;
            height: 32px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 215, 0, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .b9450-close-btn-mobile:hover {
            background: rgba(255, 215, 0, 0.2);
            transform: rotate(90deg);
        }

        .b9450-close-btn-mobile::before,
        .b9450-close-btn-mobile::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 2px;
            background: #FFD700;
            border-radius: 2px;
        }

        .b9450-close-btn-mobile::before {
            transform: rotate(45deg);
        }

        .b9450-close-btn-mobile::after {
            transform: rotate(-45deg);
        }

        /* B9-450 Image Mobile */
        .b9450-modal-image-mobile {
            width: 100%;
            height: 300px;
            background: linear-gradient(135deg, #000805 0%, #001008 100%);
            position: relative;
            overflow: hidden;
            border-bottom: 1px solid rgba(255, 215, 0, 0.3);
        }

        .b9450-modal-image-mobile img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .b9450-modal-image-mobile::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
            pointer-events: none;
        }

        /* B9-450 Content Mobile */
        .b9450-modal-content-mobile {
            padding: 24px;
            max-height: 300px;
            overflow-y: auto;
        }

        .b9450-modal-content-mobile::-webkit-scrollbar {
            width: 4px;
        }

        .b9450-modal-content-mobile::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .b9450-modal-content-mobile::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #50FFB4, #FFD700);
            border-radius: 2px;
        }

        .b9450-description-text-mobile {
            color: rgba(255, 255, 255, 0.9);
            font-size: 15px;
            line-height: 1.7;
            margin-bottom: 20px;
        }

        /* B9-450 Info Box Mobile */
        .b9450-info-box-mobile {
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.12) 0%, rgba(80, 255, 180, 0.08) 100%);
            border: 1px solid;
            border-image: linear-gradient(90deg, #FFD700, #50FFB4) 1;
            border-radius: 12px;
            padding: 16px;
            margin: 20px 0;
        }

        .b9450-info-title-mobile {
            color: #FFD700;
            font-size: 13px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .b9450-info-title-mobile::before {
            content: '🏆';
            font-size: 16px;
        }

        .b9450-info-content-mobile {
            color: rgba(255, 255, 255, 0.85);
            font-size: 14px;
            line-height: 1.6;
        }

        /* B9-450 Premium Box Mobile */
        .b9450-premium-box-mobile {
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, transparent);
            border-left: 3px solid;
            border-image: linear-gradient(180deg, #FFD700, #50FFB4) 1;
            padding: 12px 16px;
            margin: 16px 0;
            color: rgba(255, 255, 255, 0.9);
            font-size: 14px;
        }

        .b9450-premium-box-mobile strong {
            color: #FFD700;
        }

        /* B9-450 Examples Section Mobile */
        .b9450-examples-section-mobile {
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.08) 0%, rgba(80, 255, 180, 0.08) 100%);
            border: 1px solid;
            border-image: linear-gradient(90deg, #50FFB4, #FFD700) 1;
            border-radius: 12px;
            padding: 16px;
            margin-top: 20px;
        }

        .b9450-examples-title-mobile {
            color: #FFD700;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 12px;
        }

        .b9450-example-list-mobile {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .b9450-example-item-mobile {
            background: rgba(0, 0, 0, 0.6);
            border: 1px solid rgba(255, 215, 0, 0.4);
            padding: 6px 12px;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            color: #FFD700;
            transition: all 0.3s ease;
            position: relative;
        }

        .b9450-example-item-mobile:hover {
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(80, 255, 180, 0.1));
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
        }

        .b9450-example-item-mobile::after {
            content: '👑';
            position: absolute;
            top: -10px;
            right: -10px;
            font-size: 14px;
            animation: crown-float 3s ease-in-out infinite;
        }

        /* B9-450 Mobile Responsive */
        @media (max-width: 768px) {
            .b9450-modal-container,
            .b9450-modal-container-mobile {
                width: 95%;
                margin: 10px;
                max-height: 95vh;
                flex-direction: column;
            }

            .b9450-modal-header,
            .b9450-modal-header-mobile {
                padding: 12px 16px 10px;
            }

            .b9450-modal-body {
                flex-direction: column;
            }

            .b9450-modal-image,
            .b9450-modal-image-mobile {
                width: 100%;
                height: 200px;
                border-right: none;
                border-bottom: 1px solid rgba(255, 215, 0, 0.3);
            }

            .b9450-modal-image img,
            .b9450-modal-image video {
                object-fit: cover;
                aspect-ratio: auto;
            }

            .b9450-modal-image::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 50%;
                background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
                pointer-events: none;
            }

            .b9450-modal-content {
                width: 100%;
                max-height: 300px;
            }

            .b9450-modal-title,
            .b9450-modal-title-mobile {
                font-size: 20px;
                margin-bottom: 4px;
            }

            .b9450-modal-subtitle,
            .b9450-modal-subtitle-mobile {
                font-size: 12px;
            }

            .b9450-category-badge,
            .b9450-category-badge-mobile {
                font-size: 10px;
                padding: 3px 8px;
                margin-bottom: 6px;
            }

            .b9450-first-badge,
            .b9450-first-badge-mobile {
                font-size: 9px;
                padding: 2px 8px;
                display: block;
                margin-left: 0;
                margin-top: 6px;
                display: inline-block;
            }

            .b9450-historical-date,
            .b9450-historical-date-mobile {
                font-size: 11px;
                margin-top: 6px;
            }

            .b9450-range-display,
            .b9450-range-display-mobile {
                font-size: 11px;
                padding: 6px 10px;
                margin-top: 10px;
            }

            .b9450-close-btn,
            .b9450-close-btn-mobile {
                top: 12px;
                right: 12px;
                width: 28px;
                height: 28px;
            }
        }

        /* ==================== UNIFORM PALINCEPTION MODAL STYLES ==================== */

        /* Uniform Modal Overlay (commun desktop et mobile) */
        .uniforme-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(10px);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 999999;
            animation: uniforme-fadeIn 0.3s ease;
            overflow: hidden;
        }

        /* Uniform Modal Container - Desktop */
        .uniforme-modal-container-desktop {
            background: linear-gradient(145deg, #05140a 0%, #020a06 100%);
            border: 2px solid;
            border-image: linear-gradient(135deg, #00FF7F, #40E0D0, #00BFFF) 1;
            border-radius: 20px;
            max-width: 900px;
            width: 90%;
            max-height: 600px;
            overflow: hidden;
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.8),
                0 0 100px rgba(0, 255, 127, 0.15),
                0 0 80px rgba(64, 224, 208, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            animation: uniforme-slideUp 0.4s ease;
            display: flex;
            flex-direction: column;
        }

        /* Uniform Modal Container - Mobile */
        .uniforme-modal-container-mobile {
            background: linear-gradient(145deg, #05140a 0%, #020a06 100%);
            border: 2px solid;
            border-image: linear-gradient(135deg, #00FF7F, #40E0D0, #00BFFF) 1;
            border-radius: 20px;
            max-width: 600px;
            width: 90%;
            max-height: 90vh;
            overflow: hidden;
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.8),
                0 0 100px rgba(0, 255, 127, 0.15),
                0 0 80px rgba(64, 224, 208, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            animation: uniforme-slideUp 0.4s ease;
            will-change: transform;
        }

        /* Header */
        .uniforme-modal-header,
        .uniforme-modal-header-mobile {
            position: relative;
            padding: 24px 24px 20px;
            background: linear-gradient(180deg, rgba(0, 255, 127, 0.08) 0%, transparent 100%);
            border-bottom: 1px solid rgba(64, 224, 208, 0.25);
            flex-shrink: 0;
        }

        .uniforme-category-badge,
        .uniforme-category-badge-mobile {
            display: inline-block;
            background: linear-gradient(135deg, #00FF7F 0%, #00CC66 100%);
            color: #0a0a0a;
            font-size: 12px;
            font-weight: 700;
            padding: 4px 12px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
            box-shadow: 0 0 20px rgba(0, 255, 127, 0.3);
        }

        .uniforme-secondary-badge,
        .uniforme-secondary-badge-mobile {
            display: inline-block;
            background: linear-gradient(135deg, #40E0D0 0%, #20B2AA 100%);
            color: #0a0a0a;
            font-size: 11px;
            font-weight: 600;
            padding: 3px 10px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-left: 8px;
            border: 1px solid rgba(64, 224, 208, 0.3);
            animation: uniforme-pulse 3s infinite;
        }

        @keyframes uniforme-pulse {
            0%, 100% { box-shadow: 0 0 10px rgba(64, 224, 208, 0.5); }
            50% { box-shadow: 0 0 20px rgba(0, 255, 127, 0.7); }
        }

        .uniforme-modal-title,
        .uniforme-modal-title-mobile {
            color: #FFD700;
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 8px;
            text-shadow: 0 2px 10px rgba(0, 255, 127, 0.3);
        }

        .uniforme-modal-subtitle,
        .uniforme-modal-subtitle-mobile {
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
            font-weight: 400;
        }

        /* Uniform special effect */
        .uniforme-text {
            background: linear-gradient(90deg, #00FF7F, #40E0D0, #00BFFF, #40E0D0, #00FF7F);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: uniforme-flow 4s ease infinite;
            font-weight: 700;
            background-size: 300% 100%;
        }

        @keyframes uniforme-flow {
            0% { background-position: 0% 50%; }
            100% { background-position: 200% 50%; }
        }

        .uniforme-pattern-highlight {
            color: #00FF7F;
            font-weight: 600;
            text-shadow: 0 0 10px rgba(0, 255, 127, 0.4);
        }

        /* Close button */
        .uniforme-close-btn,
        .uniforme-close-btn-mobile {
            position: absolute;
            top: 24px;
            right: 24px;
            width: 32px;
            height: 32px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(64, 224, 208, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .uniforme-close-btn:hover,
        .uniforme-close-btn-mobile:hover {
            background: rgba(0, 255, 127, 0.2);
            transform: rotate(90deg);
        }

        .uniforme-close-btn::before,
        .uniforme-close-btn::after,
        .uniforme-close-btn-mobile::before,
        .uniforme-close-btn-mobile::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 2px;
            background: #FFD700;
            border-radius: 2px;
        }

        .uniforme-close-btn::before,
        .uniforme-close-btn-mobile::before {
            transform: rotate(45deg);
        }

        .uniforme-close-btn::after,
        .uniforme-close-btn-mobile::after {
            transform: rotate(-45deg);
        }

        /* DESKTOP : Conteneur Flex pour le corps */
        .uniforme-modal-body-flex {
            display: flex;
            flex-direction: row;
            flex: 1;
            min-height: 0;
        }

        /* DESKTOP : Image Container */
        .uniforme-modal-image-desktop {
            width: 45%;
            background: linear-gradient(135deg, #05140a 0%, #0a1f15 100%);
            position: relative;
            overflow: hidden;
            border-right: 1px solid rgba(64, 224, 208, 0.2);
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .uniforme-modal-image-desktop img,
        .uniforme-modal-image-desktop video {
            width: 100%;
            height: 100%;
            object-fit: contain;
            aspect-ratio: 16/9;
        }

        /* DESKTOP : Content */
        .uniforme-modal-content-desktop {
            width: 55%;
            padding: 24px;
            overflow-y: auto;
            background: linear-gradient(145deg, #05140a 0%, #020a06 100%);
        }

        .uniforme-modal-content-desktop::-webkit-scrollbar {
            width: 4px;
        }

        .uniforme-modal-content-desktop::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .uniforme-modal-content-desktop::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #00FF7F, #40E0D0);
            border-radius: 2px;
        }

        /* MOBILE : Image Container */
        .uniforme-modal-image-mobile {
            width: 100%;
            height: 300px;
            background: linear-gradient(135deg, #05140a 0%, #0a1f15 100%);
            position: relative;
            overflow: hidden;
            border-bottom: 1px solid rgba(64, 224, 208, 0.2);
        }

        .uniforme-modal-image-mobile img,
        .uniforme-modal-image-mobile video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .uniforme-modal-image-mobile::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
            pointer-events: none;
        }

        /* MOBILE : Content */
        .uniforme-modal-content-mobile {
            padding: 24px;
            max-height: 300px;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .uniforme-modal-content-mobile::-webkit-scrollbar {
            width: 4px;
        }

        .uniforme-modal-content-mobile::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .uniforme-modal-content-mobile::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #00FF7F, #40E0D0);
            border-radius: 2px;
        }

        .uniforme-description-text {
            color: rgba(255, 255, 255, 0.9);
            font-size: 15px;
            line-height: 1.7;
            margin-bottom: 20px;
        }

        /* Pattern visual */
        .uniforme-pattern-visual {
            background: rgba(0, 255, 127, 0.05);
            border: 1px solid rgba(64, 224, 208, 0.2);
            border-radius: 10px;
            padding: 16px;
            margin: 20px 0;
            text-align: center;
        }

        .uniforme-palindrome-display {
            font-family: 'Courier New', monospace;
            font-size: 22px;
            color: #FFD700;
            font-weight: 700;
            letter-spacing: 2px;
            text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
            margin: 12px 0;
            word-break: break-all;
        }

        .uniforme-pattern-breakdown {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 4px;
            margin: 8px 0;
            flex-wrap: wrap;
        }

        .uniforme-pattern-chunk {
            background: rgba(0, 255, 127, 0.2);
            border: 1px solid rgba(64, 224, 208, 0.5);
            padding: 4px 8px;
            border-radius: 6px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            color: #00FF7F;
            font-weight: 600;
            box-shadow: 0 2px 8px rgba(0, 255, 127, 0.3);
        }

        .uniforme-pattern-label {
            color: rgba(255, 255, 255, 0.6);
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 8px;
        }

        .uniforme-pattern-arrow {
            color: #40E0D0;
            font-size: 24px;
            margin: 8px 0;
            animation: uniforme-pattern-pulse 3s infinite;
        }

        @keyframes uniforme-pattern-pulse {
            0%, 100% { transform: scale(1); opacity: 0.7; }
            50% { transform: scale(1.2); opacity: 1; }
        }

        /* Info box */
        .uniforme-info-box {
            background: linear-gradient(135deg, rgba(0, 255, 127, 0.1) 0%, rgba(64, 224, 208, 0.08) 100%);
            border: 1px solid rgba(64, 224, 208, 0.25);
            border-radius: 12px;
            padding: 16px;
            margin: 20px 0;
        }

        .uniforme-info-title {
            color: #FFD700;
            font-size: 13px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .uniforme-info-title::before {
            content: '🔄';
            font-size: 16px;
        }

        .uniforme-info-content {
            color: rgba(255, 255, 255, 0.85);
            font-size: 14px;
            line-height: 1.6;
        }

        /* Rarity timeline */
        .uniforme-timeline-box {
            background: linear-gradient(135deg, rgba(0, 255, 127, 0.1) 0%, transparent);
            border-left: 3px solid #40E0D0;
            padding: 12px 16px;
            margin: 16px 0;
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
        }

        .uniforme-timeline-box strong {
            color: #00FF7F;
        }

        /* Examples section */
        .uniforme-examples-section {
            background: linear-gradient(135deg, rgba(0, 255, 127, 0.05) 0%, rgba(64, 224, 208, 0.05) 100%);
            border: 1px solid rgba(0, 255, 127, 0.2);
            border-radius: 12px;
            padding: 16px;
            margin-top: 20px;
        }

        .uniforme-examples-title {
            color: #FFD700;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 12px;
        }

        .uniforme-example-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .uniforme-example-item {
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(64, 224, 208, 0.3);
            padding: 6px 10px;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            color: #FFD700;
            transition: all 0.3s ease;
            position: relative;
        }

        .uniforme-example-item:hover {
            background: rgba(0, 255, 127, 0.1);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(64, 224, 208, 0.2);
        }

        .uniforme-example-item::after {
            content: '🔄';
            position: absolute;
            top: -10px;
            right: -8px;
            font-size: 12px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .uniforme-example-item:hover::after {
            opacity: 1;
        }

        /* Animations */
        @keyframes uniforme-fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes uniforme-slideUp {
            from {
                transform: translateY(50px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        /* Responsive Desktop et Mobile */
        @media (max-width: 768px) {
            /* Desktop responsive */
            .uniforme-modal-container-desktop {
                max-width: 600px;
                width: 95%;
                margin: 10px;
            }

            .uniforme-modal-body-flex {
                flex-direction: column;
                max-height: none;
            }

            .uniforme-modal-image-desktop {
                width: 100%;
                height: 200px;
                border-right: none;
                border-bottom: 1px solid rgba(64, 224, 208, 0.2);
            }

            .uniforme-modal-content-desktop {
                width: 100%;
                max-height: 300px;
            }

            .uniforme-modal-title {
                font-size: 20px;
                margin-bottom: 4px;
            }

            .uniforme-modal-subtitle {
                font-size: 12px;
            }

            .uniforme-modal-header {
                padding: 12px 16px 10px;
            }

            .uniforme-category-badge {
                font-size: 11px;
                padding: 3px 10px;
            }

            .uniforme-secondary-badge {
                font-size: 10px;
                padding: 2px 8px;
                display: block;
                margin-left: 0;
                margin-top: 6px;
                display: inline-block;
            }

            .uniforme-close-btn {
                width: 28px;
                height: 28px;
                top: 12px;
                right: 12px;
            }

            .uniforme-close-btn::before,
            .uniforme-close-btn::after {
                width: 14px;
            }

            /* Mobile responsive */
            .uniforme-modal-container-mobile {
                width: 95%;
                margin: 10px;
            }

            .uniforme-modal-header-mobile {
                padding: 12px 16px 10px;
            }

            .uniforme-modal-title-mobile {
                font-size: 20px;
                margin-bottom: 4px;
            }

            .uniforme-modal-subtitle-mobile {
                font-size: 12px;
            }

            .uniforme-modal-image-mobile {
                height: 200px;
            }

            .uniforme-category-badge-mobile {
                font-size: 11px;
                padding: 3px 10px;
            }

            .uniforme-secondary-badge-mobile {
                font-size: 10px;
                padding: 2px 8px;
                display: block;
                margin-left: 0;
                margin-top: 6px;
                display: inline-block;
            }

            .uniforme-close-btn-mobile {
                width: 28px;
                height: 28px;
                top: 12px;
                right: 12px;
            }

            .uniforme-close-btn-mobile::before,
            .uniforme-close-btn-mobile::after {
                width: 14px;
            }

            .uniforme-pattern-breakdown {
                flex-direction: column;
                gap: 8px;
            }
        }

        /* Sequence Modal Overlay (commun desktop et mobile) */
        .sequence-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(10px);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 999999;
            animation: sequence-fadeIn 0.3s ease;
            overflow: hidden;
        }

        /* Sequence Modal Container - Desktop */
        .sequence-modal-container-desktop {
            background: linear-gradient(145deg, #1a0f05 0%, #0f0905 100%);
            border: 2px solid;
            border-image: linear-gradient(135deg, #FF6B35, #FFD700, #7B2CBF) 1;
            border-radius: 20px;
            max-width: 900px;
            width: 90%;
            max-height: 600px;
            overflow: hidden;
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.8),
                0 0 100px rgba(255, 107, 53, 0.2),
                0 0 80px rgba(123, 44, 191, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            animation: sequence-slideUp 0.4s ease;
            display: flex;
            flex-direction: column;
        }

        /* Sequence Header */
        .sequence-modal-header {
            position: relative;
            padding: 24px 24px 20px;
            background: linear-gradient(180deg, rgba(255, 107, 53, 0.08) 0%, transparent 100%);
            border-bottom: 1px solid rgba(255, 107, 53, 0.25);
        }

        .sequence-category-badge {
            display: inline-block;
            background: linear-gradient(135deg, #FF6B35 0%, #F4511E 100%);
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            padding: 4px 12px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
            box-shadow: 0 0 20px rgba(255, 107, 53, 0.3);
        }

        .sequence-secondary-badge {
            display: inline-block;
            background: linear-gradient(135deg, #7B2CBF 0%, #5A189A 100%);
            color: #fff;
            font-size: 11px;
            font-weight: 600;
            padding: 3px 10px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-left: 8px;
            border: 1px solid rgba(123, 44, 191, 0.3);
            animation: sequence-pulse 2.5s infinite;
        }

        @keyframes sequence-pulse {
            0%, 100% { box-shadow: 0 0 10px rgba(123, 44, 191, 0.5); }
            50% { box-shadow: 0 0 20px rgba(255, 107, 53, 0.7); }
        }

        .sequence-modal-title {
            color: #FFD700;
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 8px;
            text-shadow: 0 2px 10px rgba(255, 107, 53, 0.3);
        }

        .sequence-modal-subtitle {
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
            font-weight: 400;
        }

        /* Seq-Pali special effect */
        .sequence-text {
            background: linear-gradient(90deg, #FF6B35, #FFD700, #7B2CBF, #FFD700, #FF6B35);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: sequence-glow 3.5s ease infinite;
            font-weight: 700;
            background-size: 300% 100%;
        }

        @keyframes sequence-glow {
            0% { background-position: 0% 50%; filter: brightness(1); }
            50% { background-position: 100% 50%; filter: brightness(1.2); }
            100% { background-position: 200% 50%; filter: brightness(1); }
        }

        .sequence-highlight {
            color: #FF6B35;
            font-weight: 600;
            text-shadow: 0 0 10px rgba(255, 107, 53, 0.4);
        }

        /* Sequence Close button */
        .sequence-close-btn {
            position: absolute;
            top: 24px;
            right: 24px;
            width: 32px;
            height: 32px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 107, 53, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .sequence-close-btn:hover {
            background: rgba(255, 107, 53, 0.2);
            transform: rotate(90deg);
        }

        .sequence-close-btn::before,
        .sequence-close-btn::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 2px;
            background: #FFD700;
            border-radius: 2px;
        }

        .sequence-close-btn::before {
            transform: rotate(45deg);
        }

        .sequence-close-btn::after {
            transform: rotate(-45deg);
        }

        /* DESKTOP : Conteneur Flex pour le corps */
        .sequence-modal-body-flex {
            display: flex;
            flex-direction: row;
            flex: 1;
            min-height: 0;
        }

        /* DESKTOP : Image Container */
        .sequence-modal-image-desktop {
            width: 45%;
            background: linear-gradient(135deg, #1a0f05 0%, #2a1505 100%);
            position: relative;
            overflow: hidden;
            border-right: 1px solid rgba(255, 107, 53, 0.2);
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .sequence-modal-image-desktop img,
        .sequence-modal-image-desktop video {
            width: 100%;
            height: 100%;
            object-fit: contain;
            aspect-ratio: 16/9;
        }

        .sequence-modal-image-desktop::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
            pointer-events: none;
        }

        /* DESKTOP : Content */
        .sequence-modal-content-desktop {
            flex: 1;
            min-height: 0;
            padding: 24px;
            overflow-y: auto;
            overflow-x: hidden;
            background: linear-gradient(135deg, rgba(255, 107, 53, 0.02) 0%, transparent 50%, rgba(123, 44, 191, 0.02) 100%);
        }

        .sequence-modal-content-desktop::-webkit-scrollbar {
            width: 4px;
        }

        .sequence-modal-content-desktop::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .sequence-modal-content-desktop::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #FF6B35, #7B2CBF);
            border-radius: 2px;
        }

        .sequence-description-text {
            color: rgba(255, 255, 255, 0.9);
            font-size: 15px;
            line-height: 1.7;
            margin-bottom: 20px;
        }

        /* Sequence visual */
        .sequence-visual {
            background: rgba(255, 107, 53, 0.05);
            border: 1px solid rgba(123, 44, 191, 0.2);
            border-radius: 10px;
            padding: 16px;
            margin: 20px 0;
            text-align: center;
        }

        .sequence-palindrome-display {
            font-family: 'Courier New', monospace;
            font-size: 22px;
            color: #FFD700;
            font-weight: 700;
            letter-spacing: 2px;
            text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
            margin: 12px 0;
            word-break: break-all;
        }

        .sequence-highlighted {
            background: linear-gradient(90deg, rgba(255, 107, 53, 0.3), rgba(255, 215, 0, 0.3), rgba(123, 44, 191, 0.3));
            padding: 2px 4px;
            border-radius: 4px;
            font-weight: 700;
            color: #FFF;
        }

        .sequence-label {
            color: rgba(255, 255, 255, 0.6);
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
        }

        .sequence-arrow {
            color: #7B2CBF;
            font-size: 24px;
            margin: 8px 0;
            animation: sequence-arrow 2s infinite;
        }

        @keyframes sequence-arrow {
            0%, 100% { transform: translateX(0); opacity: 0.7; }
            50% { transform: translateX(10px); opacity: 1; }
        }

        /* Info box */
        .sequence-info-box {
            background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(123, 44, 191, 0.08) 100%);
            border: 1px solid rgba(255, 215, 0, 0.25);
            border-radius: 12px;
            padding: 16px;
            margin: 20px 0;
        }

        .sequence-info-title {
            color: #FFD700;
            font-size: 13px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .sequence-info-title::before {
            content: '🔢';
            font-size: 16px;
        }

        .sequence-info-content {
            color: rgba(255, 255, 255, 0.85);
            font-size: 14px;
            line-height: 1.6;
        }

        /* Rarity timeline */
        .sequence-timeline-box {
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, transparent);
            border-left: 3px solid #FF6B35;
            padding: 12px 16px;
            margin: 16px 0;
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
        }

        .sequence-timeline-box strong {
            color: #FFD700;
        }

        /* Examples section */
        .sequence-examples-section {
            background: linear-gradient(135deg, rgba(255, 107, 53, 0.05) 0%, rgba(123, 44, 191, 0.05) 100%);
            border: 1px solid rgba(255, 107, 53, 0.2);
            border-radius: 12px;
            padding: 16px;
            margin-top: 20px;
        }

        .sequence-examples-title {
            color: #FFD700;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 12px;
        }

        .sequence-example-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .sequence-example-item {
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255, 107, 53, 0.3);
            padding: 6px 10px;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            color: #FFD700;
            transition: all 0.3s ease;
            position: relative;
        }

        .sequence-example-item:hover {
            background: rgba(255, 107, 53, 0.1);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 107, 53, 0.2);
        }

        .sequence-example-item::after {
            content: '🔢';
            position: absolute;
            top: -10px;
            right: -8px;
            font-size: 12px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .sequence-example-item:hover::after {
            opacity: 1;
        }

        /* Animations */
        @keyframes sequence-fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes sequence-slideUp {
            from {
                transform: translateY(50px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        /* --- MOBILE VERSION --- */

        /* Sequence Modal Container - Mobile */
        .sequence-modal-container-mobile {
            background: linear-gradient(145deg, #1a0f05 0%, #0f0905 100%);
            border: 2px solid;
            border-image: linear-gradient(135deg, #FF6B35, #FFD700, #7B2CBF) 1;
            border-radius: 20px;
            max-width: 600px;
            width: 90%;
            max-height: 90vh;
            overflow: hidden;
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.8),
                0 0 100px rgba(255, 107, 53, 0.2),
                0 0 80px rgba(123, 44, 191, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            animation: sequence-slideUp 0.4s ease;
        }

        .sequence-modal-header-mobile {
            position: relative;
            padding: 24px 24px 20px;
            background: linear-gradient(180deg, rgba(255, 107, 53, 0.08) 0%, transparent 100%);
            border-bottom: 1px solid rgba(255, 107, 53, 0.25);
        }

        .sequence-close-btn-mobile {
            position: absolute;
            top: 24px;
            right: 24px;
            width: 32px;
            height: 32px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 107, 53, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .sequence-close-btn-mobile:hover {
            background: rgba(255, 107, 53, 0.2);
            transform: rotate(90deg);
        }

        .sequence-close-btn-mobile::before,
        .sequence-close-btn-mobile::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 2px;
            background: #FFD700;
            border-radius: 2px;
        }

        .sequence-close-btn-mobile::before {
            transform: rotate(45deg);
        }

        .sequence-close-btn-mobile::after {
            transform: rotate(-45deg);
        }

        /* MOBILE : Image Container */
        .sequence-modal-image-mobile {
            width: 100%;
            height: 300px;
            background: linear-gradient(135deg, #1a0f05 0%, #2a1505 100%);
            position: relative;
            overflow: hidden;
            border-bottom: 1px solid rgba(255, 107, 53, 0.2);
        }

        .sequence-modal-image-mobile img,
        .sequence-modal-image-mobile video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .sequence-modal-image-mobile::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
            pointer-events: none;
        }

        /* MOBILE : Content */
        .sequence-modal-content-mobile {
            padding: 24px;
            max-height: 300px;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .sequence-modal-content-mobile::-webkit-scrollbar {
            width: 4px;
        }

        .sequence-modal-content-mobile::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .sequence-modal-content-mobile::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #FF6B35, #7B2CBF);
            border-radius: 2px;
        }

        /* Responsive Desktop */
        @media (max-width: 768px) {
            .sequence-modal-header {
                padding: 12px 16px 10px;
            }

            .sequence-modal-title {
                font-size: 20px;
                margin-bottom: 4px;
            }

            .sequence-modal-subtitle {
                font-size: 12px;
            }

            .sequence-modal-image-desktop {
                width: 100%;
                height: 200px;
                border-right: none;
                border-bottom: 1px solid rgba(255, 107, 53, 0.2);
            }

            .sequence-modal-body-flex {
                flex-direction: column;
            }

            .sequence-modal-content-desktop {
                width: 100%;
            }

            .sequence-category-badge {
                font-size: 11px;
                padding: 3px 10px;
            }

            .sequence-secondary-badge {
                font-size: 10px;
                padding: 2px 8px;
            }

            .sequence-close-btn {
                width: 28px;
                height: 28px;
                top: 12px;
                right: 12px;
            }

            .sequence-close-btn::before,
            .sequence-close-btn::after {
                width: 14px;
            }

            /* Mobile responsive */
            .sequence-modal-header-mobile {
                padding: 12px 16px 10px;
            }

            .sequence-modal-image-mobile {
                height: 200px;
            }

            .sequence-close-btn-mobile {
                width: 28px;
                height: 28px;
                top: 12px;
                right: 12px;
            }

            .sequence-close-btn-mobile::before,
            .sequence-close-btn-mobile::after {
                width: 14px;
            }
        }

        /* Perfect Palinception Modal Overlay (commun desktop et mobile) */
        .perfect-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            backdrop-filter: blur(12px);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 999999;
            animation: perfect-fadeIn 0.3s ease;
            overflow: hidden;
        }

        /* Perfect Modal Container - Desktop */
        .perfect-modal-container-desktop {
            background: linear-gradient(145deg, #1a0514 0%, #0f020b 100%);
            border: 2px solid;
            border-image: linear-gradient(135deg, #FFD700, #FF4500, #8B008B, #FFD700) 1;
            border-radius: 20px;
            max-width: 900px;
            width: 90%;
            max-height: 600px;
            overflow: hidden;
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.9),
                0 0 150px rgba(255, 215, 0, 0.25),
                0 0 100px rgba(255, 69, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            animation: perfect-slideUp 0.4s ease;
            display: flex;
            flex-direction: column;
        }

        /* Perfect Header */
        .perfect-modal-header {
            position: relative;
            padding: 24px 24px 20px;
            background: linear-gradient(180deg, rgba(255, 215, 0, 0.1) 0%, transparent 100%);
            border-bottom: 1px solid rgba(255, 215, 0, 0.3);
        }

        .perfect-category-badge {
            display: inline-block;
            background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
            color: #0a0a0a;
            font-size: 12px;
            font-weight: 700;
            padding: 4px 12px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
            box-shadow: 0 0 25px rgba(255, 215, 0, 0.4);
        }

        .perfect-secondary-badge {
            display: inline-block;
            background: linear-gradient(135deg, #8B008B 0%, #4B0082 100%);
            color: #fff;
            font-size: 11px;
            font-weight: 600;
            padding: 3px 10px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-left: 8px;
            border: 1px solid rgba(139, 0, 139, 0.5);
            animation: perfect-pulse 4s infinite;
        }

        @keyframes perfect-pulse {
            0%, 100% { box-shadow: 0 0 15px rgba(139, 0, 139, 0.6); }
            50% { box-shadow: 0 0 30px rgba(255, 69, 0, 0.8); }
        }

        .perfect-modal-title {
            color: #FFD700;
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 8px;
            text-shadow: 0 2px 15px rgba(255, 215, 0, 0.4);
        }

        .perfect-modal-subtitle {
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
            font-weight: 400;
        }

        /* Perfect Palinception special effect */
        .perfect-text {
            background: linear-gradient(90deg, #FFD700 0%, #FF4500 25%, #8B008B 50%, #FF4500 75%, #FFD700 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: perfect-shimmer 5s ease infinite;
            font-weight: 700;
            background-size: 400% 100%;
        }

        @keyframes perfect-shimmer {
            0% { background-position: 0% 50%; }
            100% { background-position: 400% 50%; }
        }

        .perfect-inception-highlight {
            color: #8B008B;
            font-weight: 600;
            text-shadow: 0 0 10px rgba(139, 0, 139, 0.5);
        }

        /* Perfect Close button */
        .perfect-close-btn {
            position: absolute;
            top: 24px;
            right: 24px;
            width: 32px;
            height: 32px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 215, 0, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .perfect-close-btn:hover {
            background: rgba(139, 0, 139, 0.2);
            transform: rotate(90deg);
        }

        .perfect-close-btn::before,
        .perfect-close-btn::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 2px;
            background: #FFD700;
            border-radius: 2px;
        }

        .perfect-close-btn::before {
            transform: rotate(45deg);
        }

        .perfect-close-btn::after {
            transform: rotate(-45deg);
        }

        /* DESKTOP : Conteneur Flex pour le corps */
        .perfect-modal-body-flex {
            display: flex;
            flex-direction: row;
            flex: 1;
            min-height: 0;
        }

        /* DESKTOP : Image Container */
        .perfect-modal-image-desktop {
            width: 45%;
            background: linear-gradient(135deg, #1a050f 0%, #2a0a1f 100%);
            position: relative;
            overflow: hidden;
            border-right: 1px solid rgba(255, 215, 0, 0.2);
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .perfect-modal-image-desktop img,
        .perfect-modal-image-desktop video {
            width: 100%;
            height: 100%;
            object-fit: contain;
            aspect-ratio: 16/9;
        }

        .perfect-modal-image-desktop::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
            pointer-events: none;
        }

        /* DESKTOP : Content */
        .perfect-modal-content-desktop {
            flex: 1;
            min-height: 0;
            padding: 24px;
            overflow-y: auto;
            overflow-x: hidden;
            background: linear-gradient(135deg, rgba(139, 0, 139, 0.02) 0%, transparent 50%, rgba(255, 69, 0, 0.02) 100%);
        }

        .perfect-modal-content-desktop::-webkit-scrollbar {
            width: 4px;
        }

        .perfect-modal-content-desktop::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .perfect-modal-content-desktop::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #FFD700, #8B008B);
            border-radius: 2px;
        }

        .perfect-description-text {
            color: rgba(255, 255, 255, 0.9);
            font-size: 15px;
            line-height: 1.7;
            margin-bottom: 20px;
        }

        /* Inception visual */
        .perfect-inception-visual {
            background: rgba(139, 0, 139, 0.05);
            border: 1px solid rgba(255, 69, 0, 0.2);
            border-radius: 10px;
            padding: 16px;
            margin: 20px 0;
            text-align: center;
        }

        .perfect-palindrome-layer {
            font-family: 'Courier New', monospace;
            color: #FFD700;
            margin: 8px 0;
            word-break: break-all;
        }

        .perfect-layer-1 {
            font-size: 22px;
            font-weight: 700;
            text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
        }

        .perfect-layer-2 {
            font-size: 16px;
            font-weight: 600;
            color: #FFA500;
            opacity: 0.9;
        }

        .perfect-layer-3 {
            font-size: 13px;
            color: #FF4500;
            opacity: 0.8;
        }

        .perfect-inception-arrow {
            color: #8B008B;
            font-size: 24px;
            margin: 8px 0;
            animation: perfect-arrow-pulse 3s infinite;
        }

        @keyframes perfect-arrow-pulse {
            0%, 100% { transform: scale(1); opacity: 0.7; }
            50% { transform: scale(1.3); opacity: 1; }
        }

        .perfect-inception-label {
            color: rgba(255, 255, 255, 0.6);
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 8px;
        }

        /* Info box */
        .perfect-info-box {
            background: linear-gradient(135deg, rgba(139, 0, 139, 0.1) 0%, rgba(255, 69, 0, 0.08) 100%);
            border: 1px solid rgba(255, 215, 0, 0.25);
            border-radius: 12px;
            padding: 16px;
            margin: 20px 0;
        }

        .perfect-info-title {
            color: #FFD700;
            font-size: 13px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .perfect-info-title::before {
            content: '🔮';
            font-size: 16px;
        }

        .perfect-info-content {
            color: rgba(255, 255, 255, 0.85);
            font-size: 14px;
            line-height: 1.6;
        }

        /* Ultra rarity timeline */
        .perfect-ultra-rarity-box {
            background: linear-gradient(135deg, rgba(255, 69, 0, 0.1) 0%, transparent);
            border-left: 3px solid #FFD700;
            padding: 12px 16px;
            margin: 16px 0;
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
        }

        .perfect-ultra-rarity-box strong {
            color: #FF4500;
        }

        /* Examples section */
        .perfect-examples-section {
            background: linear-gradient(135deg, rgba(139, 0, 139, 0.05) 0%, rgba(255, 69, 0, 0.05) 100%);
            border: 1px solid rgba(255, 215, 0, 0.2);
            border-radius: 12px;
            padding: 16px;
            margin-top: 20px;
        }

        .perfect-examples-title {
            color: #FFD700;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 12px;
        }

        .perfect-example-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .perfect-example-item {
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(139, 0, 139, 0.3);
            padding: 6px 10px;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            font-size: 11px;
            color: #FFD700;
            transition: all 0.3s ease;
            position: relative;
        }

        .perfect-example-item:hover {
            background: rgba(139, 0, 139, 0.1);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(139, 0, 139, 0.3);
        }

        .perfect-example-item::after {
            content: '🔮';
            position: absolute;
            top: -10px;
            right: -8px;
            font-size: 12px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .perfect-example-item:hover::after {
            opacity: 1;
        }

        /* Animations */
        @keyframes perfect-fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes perfect-slideUp {
            from {
                transform: translateY(-50px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        /* --- MOBILE VERSION --- */

        /* Perfect Modal Container - Mobile */
        .perfect-modal-container-mobile {
            background: linear-gradient(145deg, #1a0514 0%, #0f020b 100%);
            border: 2px solid;
            border-image: linear-gradient(135deg, #FFD700, #FF4500, #8B008B, #FFD700) 1;
            border-radius: 20px;
            max-width: 600px;
            width: 90%;
            max-height: 90vh;
            overflow: hidden;
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.9),
                0 0 150px rgba(255, 215, 0, 0.25),
                0 0 100px rgba(255, 69, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            animation: perfect-slideUp 0.4s ease;
        }

        .perfect-modal-header-mobile {
            position: relative;
            padding: 24px 24px 20px;
            background: linear-gradient(180deg, rgba(255, 215, 0, 0.1) 0%, transparent 100%);
            border-bottom: 1px solid rgba(255, 215, 0, 0.3);
        }

        .perfect-close-btn-mobile {
            position: absolute;
            top: 24px;
            right: 24px;
            width: 32px;
            height: 32px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 215, 0, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .perfect-close-btn-mobile:hover {
            background: rgba(139, 0, 139, 0.2);
            transform: rotate(90deg);
        }

        .perfect-close-btn-mobile::before,
        .perfect-close-btn-mobile::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 2px;
            background: #FFD700;
            border-radius: 2px;
        }

        .perfect-close-btn-mobile::before {
            transform: rotate(45deg);
        }

        .perfect-close-btn-mobile::after {
            transform: rotate(-45deg);
        }

        /* MOBILE : Image Container */
        .perfect-modal-image-mobile {
            width: 100%;
            height: 300px;
            background: linear-gradient(135deg, #1a050f 0%, #2a0a1f 100%);
            position: relative;
            overflow: hidden;
            border-bottom: 1px solid rgba(255, 215, 0, 0.2);
        }

        .perfect-modal-image-mobile img,
        .perfect-modal-image-mobile video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .perfect-modal-image-mobile::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
            pointer-events: none;
        }

        /* MOBILE : Content */
        .perfect-modal-content-mobile {
            padding: 24px;
            max-height: 300px;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .perfect-modal-content-mobile::-webkit-scrollbar {
            width: 4px;
        }

        .perfect-modal-content-mobile::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .perfect-modal-content-mobile::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #FFD700, #8B008B);
            border-radius: 2px;
        }

        /* Responsive Desktop */
        @media (max-width: 768px) {
            .perfect-modal-header {
                padding: 12px 16px 10px;
            }

            .perfect-modal-title {
                font-size: 20px;
                margin-bottom: 4px;
            }

            .perfect-modal-subtitle {
                font-size: 12px;
            }

            .perfect-modal-image-desktop {
                width: 100%;
                height: 200px;
                border-right: none;
                border-bottom: 1px solid rgba(255, 215, 0, 0.2);
            }

            .perfect-modal-body-flex {
                flex-direction: column;
            }

            .perfect-modal-content-desktop {
                width: 100%;
            }

            .perfect-category-badge {
                font-size: 11px;
                padding: 3px 10px;
            }

            .perfect-secondary-badge {
                font-size: 10px;
                padding: 2px 8px;
            }

            .perfect-close-btn {
                width: 28px;
                height: 28px;
                top: 12px;
                right: 12px;
            }

            .perfect-close-btn::before,
            .perfect-close-btn::after {
                width: 14px;
            }

            /* Mobile responsive */
            .perfect-modal-header-mobile {
                padding: 12px 16px 10px;
            }

            .perfect-modal-image-mobile {
                height: 200px;
            }

            .perfect-close-btn-mobile {
                width: 28px;
                height: 28px;
                top: 12px;
                right: 12px;
            }

            .perfect-close-btn-mobile::before,
            .perfect-close-btn-mobile::after {
                width: 14px;
            }
        }

        /* Nova Modal Overlay (commun desktop et mobile) */
        .nova-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.88);
            backdrop-filter: blur(10px);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 999999;
            animation: nova-fadeIn 0.3s ease;
            overflow: hidden;
        }

        /* Nova Modal Container - Desktop */
        .nova-modal-container-desktop {
            background: linear-gradient(145deg, #1a0a1a 0%, #0f0510 100%);
            border: 2px solid;
            border-image: linear-gradient(135deg, #7B2CBF, #FF6B35, #FFD700) 1;
            border-radius: 20px;
            max-width: 900px;
            width: 90%;
            max-height: 600px;
            overflow: hidden;
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.9),
                0 0 120px rgba(123, 44, 191, 0.2),
                0 0 80px rgba(255, 107, 53, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            animation: nova-slideUp 0.4s ease;
            display: flex;
            flex-direction: column;
        }

        /* Nova Header */
        .nova-modal-header {
            position: relative;
            padding: 24px 24px 20px;
            background: linear-gradient(180deg, rgba(123, 44, 191, 0.08) 0%, transparent 100%);
            border-bottom: 1px solid rgba(123, 44, 191, 0.25);
        }

        .nova-category-badge {
            display: inline-block;
            background: linear-gradient(135deg, #7B2CBF 0%, #5A189A 100%);
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            padding: 4px 12px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
            box-shadow: 0 0 25px rgba(123, 44, 191, 0.4);
        }

        .nova-palindrome-badge {
            display: inline-block;
            background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
            color: #0a0a0a;
            font-size: 11px;
            font-weight: 600;
            padding: 3px 10px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-left: 8px;
            border: 1px solid rgba(255, 215, 0, 0.3);
            animation: nova-pulse 3s infinite;
        }

        @keyframes nova-pulse {
            0%, 100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }
            50% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.8); }
        }

        .nova-modal-title {
            color: #FFD700;
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 8px;
            text-shadow: 0 2px 15px rgba(123, 44, 191, 0.4);
        }

        .nova-modal-subtitle {
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
            font-weight: 400;
        }

        /* Nova special effect */
        .nova-text {
            background: linear-gradient(90deg, #7B2CBF, #FFD700, #FF6B35, #FFD700, #7B2CBF);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: nova-shimmer 4s ease infinite;
            font-weight: 700;
            background-size: 300% 100%;
        }

        @keyframes nova-shimmer {
            0% { background-position: 0% 50%; }
            100% { background-position: 200% 50%; }
        }

        .nova-cosmic-highlight {
            color: #7B2CBF;
            font-weight: 600;
            text-shadow: 0 0 10px rgba(123, 44, 191, 0.5);
        }

        /* Nova Close button */
        .nova-close-btn {
            position: absolute;
            top: 24px;
            right: 24px;
            width: 32px;
            height: 32px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(123, 44, 191, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .nova-close-btn:hover {
            background: rgba(123, 44, 191, 0.2);
            transform: rotate(90deg);
        }

        .nova-close-btn::before,
        .nova-close-btn::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 2px;
            background: #FFD700;
            border-radius: 2px;
        }

        .nova-close-btn::before {
            transform: rotate(45deg);
        }

        .nova-close-btn::after {
            transform: rotate(-45deg);
        }

        /* DESKTOP : Conteneur Flex pour le corps */
        .nova-modal-body-flex {
            display: flex;
            flex-direction: row;
            flex: 1;
            min-height: 0;
        }

        /* DESKTOP : Image Container */
        .nova-modal-image-desktop {
            width: 45%;
            background: linear-gradient(135deg, #1a0a1a 0%, #2a1020 100%);
            position: relative;
            overflow: hidden;
            border-right: 1px solid rgba(123, 44, 191, 0.2);
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .nova-modal-image-desktop img,
        .nova-modal-image-desktop video {
            width: 100%;
            height: 100%;
            object-fit: contain;
            aspect-ratio: 16/9;
        }

        .nova-modal-image-desktop::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
            pointer-events: none;
        }

        /* DESKTOP : Content */
        .nova-modal-content-desktop {
            flex: 1;
            min-height: 0;
            padding: 24px;
            overflow-y: auto;
            overflow-x: hidden;
            background: linear-gradient(135deg, rgba(123, 44, 191, 0.02) 0%, transparent 50%, rgba(255, 107, 53, 0.02) 100%);
        }

        .nova-modal-content-desktop::-webkit-scrollbar {
            width: 4px;
        }

        .nova-modal-content-desktop::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .nova-modal-content-desktop::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #7B2CBF, #FFD700);
            border-radius: 2px;
        }

        .nova-description-text {
            color: rgba(255, 255, 255, 0.9);
            font-size: 15px;
            line-height: 1.7;
            margin-bottom: 20px;
        }

        /* Palindrome visual */
        .nova-palindrome-visual {
            background: rgba(123, 44, 191, 0.05);
            border: 1px solid rgba(255, 215, 0, 0.2);
            border-radius: 10px;
            padding: 16px;
            margin: 20px 0;
            text-align: center;
        }

        .nova-palindrome-display {
            font-family: 'Courier New', monospace;
            font-size: 22px;
            color: #FFD700;
            font-weight: 700;
            letter-spacing: 2px;
            text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
            margin: 12px 0;
            word-break: break-all;
        }

        .nova-palindrome-label {
            color: rgba(255, 255, 255, 0.6);
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
        }

        .nova-rarity-indicator {
            color: #7B2CBF;
            font-size: 10px;
            margin-top: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .nova-rarity-arrow {
            font-size: 14px;
        }

        /* Info box */
        .nova-info-box {
            background: linear-gradient(135deg, rgba(123, 44, 191, 0.1) 0%, rgba(255, 107, 53, 0.08) 100%);
            border: 1px solid rgba(123, 44, 191, 0.25);
            border-radius: 12px;
            padding: 16px;
            margin: 20px 0;
        }

        .nova-info-title {
            color: #FFD700;
            font-size: 13px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .nova-info-title::before {
            content: '🌌';
            font-size: 16px;
        }

        .nova-info-content {
            color: rgba(255, 255, 255, 0.85);
            font-size: 14px;
            line-height: 1.6;
        }

        /* Rarity timeline */
        .nova-timeline-box {
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, transparent);
            border-left: 3px solid #7B2CBF;
            padding: 12px 16px;
            margin: 16px 0;
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
        }

        .nova-timeline-box strong {
            color: #FFD700;
        }

        /* Examples section */
        .nova-examples-section {
            background: linear-gradient(135deg, rgba(123, 44, 191, 0.05) 0%, rgba(255, 107, 53, 0.05) 100%);
            border: 1px solid rgba(123, 44, 191, 0.2);
            border-radius: 12px;
            padding: 16px;
            margin-top: 20px;
        }

        .nova-examples-title {
            color: #FFD700;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 12px;
        }

        .nova-example-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .nova-example-item {
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255, 215, 0, 0.3);
            padding: 6px 10px;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            font-size: 11px;
            color: #FFD700;
            transition: all 0.3s ease;
            position: relative;
        }

        .nova-example-item:hover {
            background: rgba(123, 44, 191, 0.1);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(123, 44, 191, 0.2);
        }

        .nova-example-item::after {
            content: '🌌';
            position: absolute;
            top: -10px;
            right: -8px;
            font-size: 12px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .nova-example-item:hover::after {
            opacity: 1;
        }

        /* Animations */
        @keyframes nova-fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes nova-slideUp {
            from {
                transform: translateY(50px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        /* --- MOBILE VERSION --- */

        /* Nova Modal Container - Mobile */
        .nova-modal-container-mobile {
            background: linear-gradient(145deg, #1a0a1a 0%, #0f0510 100%);
            border: 2px solid;
            border-image: linear-gradient(135deg, #7B2CBF, #FF6B35, #FFD700) 1;
            border-radius: 20px;
            max-width: 600px;
            width: 90%;
            max-height: 90vh;
            overflow: hidden;
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.9),
                0 0 120px rgba(123, 44, 191, 0.2),
                0 0 80px rgba(255, 107, 53, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            animation: nova-slideUp 0.4s ease;
        }

        .nova-modal-header-mobile {
            position: relative;
            padding: 24px 24px 20px;
            background: linear-gradient(180deg, rgba(123, 44, 191, 0.08) 0%, transparent 100%);
            border-bottom: 1px solid rgba(123, 44, 191, 0.25);
        }

        .nova-close-btn-mobile {
            position: absolute;
            top: 24px;
            right: 24px;
            width: 32px;
            height: 32px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(123, 44, 191, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .nova-close-btn-mobile:hover {
            background: rgba(123, 44, 191, 0.2);
            transform: rotate(90deg);
        }

        .nova-close-btn-mobile::before,
        .nova-close-btn-mobile::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 2px;
            background: #FFD700;
            border-radius: 2px;
        }

        .nova-close-btn-mobile::before {
            transform: rotate(45deg);
        }

        .nova-close-btn-mobile::after {
            transform: rotate(-45deg);
        }

        /* MOBILE : Image Container */
        .nova-modal-image-mobile {
            width: 100%;
            height: 300px;
            background: linear-gradient(135deg, #1a0a1a 0%, #2a1020 100%);
            position: relative;
            overflow: hidden;
            border-bottom: 1px solid rgba(123, 44, 191, 0.2);
        }

        .nova-modal-image-mobile img,
        .nova-modal-image-mobile video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .nova-modal-image-mobile::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
            pointer-events: none;
        }

        /* MOBILE : Content */
        .nova-modal-content-mobile {
            padding: 24px;
            max-height: 300px;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .nova-modal-content-mobile::-webkit-scrollbar {
            width: 4px;
        }

        .nova-modal-content-mobile::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .nova-modal-content-mobile::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #7B2CBF, #FFD700);
            border-radius: 2px;
        }

        /* Responsive Desktop */
        @media (max-width: 768px) {
            .nova-modal-header {
                padding: 12px 16px 10px;
            }

            .nova-modal-title {
                font-size: 20px;
                margin-bottom: 4px;
            }

            .nova-modal-subtitle {
                font-size: 12px;
            }

            .nova-modal-image-desktop {
                width: 100%;
                height: 200px;
                border-right: none;
                border-bottom: 1px solid rgba(123, 44, 191, 0.2);
            }

            .nova-modal-body-flex {
                flex-direction: column;
            }

            .nova-modal-content-desktop {
                width: 100%;
            }

            .nova-category-badge {
                font-size: 11px;
                padding: 3px 10px;
            }

            .nova-palindrome-badge {
                font-size: 10px;
                padding: 2px 8px;
            }

            .nova-close-btn {
                width: 28px;
                height: 28px;
                top: 12px;
                right: 12px;
            }

            .nova-close-btn::before,
            .nova-close-btn::after {
                width: 14px;
            }

            /* Mobile responsive */
            .nova-modal-header-mobile {
                padding: 12px 16px 10px;
            }

            .nova-modal-image-mobile {
                height: 200px;
            }

            .nova-close-btn-mobile {
                width: 28px;
                height: 28px;
                top: 12px;
                right: 12px;
            }

            .nova-close-btn-mobile::before,
            .nova-close-btn-mobile::after {
                width: 14px;
            }
        }

        /* Vintage Sats Modal Overlay (commun desktop et mobile) */
        .vintage-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(10px);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 999999;
            animation: vintage-fadeIn 0.3s ease;
            overflow: hidden;
        }

        @keyframes vintage-fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes vintage-slideUp {
            from {
                transform: translateY(50px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        /* Vintage Modal Container - Desktop */
        .vintage-modal-container-desktop {
            background: linear-gradient(145deg, #1a1610 0%, #0f0c08 100%);
            border: 2px solid;
            border-image: linear-gradient(135deg, #DAA520, #B8860B, #DAA520) 1;
            border-radius: 20px;
            max-width: 900px;
            width: 90%;
            max-height: 600px;
            overflow: hidden;
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.8),
                0 0 100px rgba(218, 165, 32, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            animation: vintage-slideUp 0.4s ease;
            display: flex;
            flex-direction: column;
        }

        /* Vintage Modal Header */
        .vintage-modal-header {
            position: relative;
            padding: 20px 24px 16px;
            background: linear-gradient(180deg, rgba(218, 165, 32, 0.08) 0%, transparent 100%);
            border-bottom: 1px solid rgba(218, 165, 32, 0.25);
        }

        .vintage-category-badge {
            display: inline-block;
            background: linear-gradient(135deg, #DAA520 0%, #B8860B 100%);
            color: #0a0a0a;
            font-size: 11px;
            font-weight: 700;
            padding: 4px 12px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
            box-shadow: 0 0 20px rgba(218, 165, 32, 0.3);
        }

        .vintage-genesis-badge {
            display: inline-block;
            background: linear-gradient(135deg, #E0E0E0 0%, #9E9E9E 100%);
            color: #0a0a0a;
            font-size: 10px;
            font-weight: 600;
            padding: 3px 10px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-left: 8px;
            border: 1px solid rgba(224, 224, 224, 0.3);
        }

        .vintage-modal-title {
            color: #FFD700;
            font-size: 26px;
            font-weight: 700;
            margin-bottom: 6px;
            text-shadow: 0 2px 10px rgba(218, 165, 32, 0.3);
        }

        .vintage-modal-subtitle {
            color: rgba(255, 255, 255, 0.7);
            font-size: 13px;
            font-weight: 400;
        }

        /* Vintage special effect */
        .vintage-text {
            background: linear-gradient(90deg, #DAA520, #FFD700, #DAA520);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: vintage-glow 4s ease infinite;
            font-weight: 700;
            background-size: 200% 100%;
        }

        @keyframes vintage-glow {
            0%, 100% {
                filter: brightness(1) sepia(0.2);
                background-position: 0% 50%;
            }
            50% {
                filter: brightness(1.3) sepia(0.5);
                background-position: 100% 50%;
            }
        }

        .vintage-early-days-highlight {
            color: #B8860B;
            font-weight: 600;
            text-shadow: 0 0 10px rgba(218, 165, 32, 0.4);
        }

        /* Vintage Close button */
        .vintage-close-btn {
            position: absolute;
            top: 20px;
            right: 24px;
            width: 32px;
            height: 32px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(218, 165, 32, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .vintage-close-btn:hover {
            background: rgba(218, 165, 32, 0.2);
            transform: rotate(90deg);
        }

        .vintage-close-btn::before,
        .vintage-close-btn::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 2px;
            background: #FFD700;
            border-radius: 2px;
        }

        .vintage-close-btn::before {
            transform: rotate(45deg);
        }

        .vintage-close-btn::after {
            transform: rotate(-45deg);
        }

        /* Vintage Modal Body Flex (Desktop) */
        .vintage-modal-body-flex {
            display: flex;
            flex-direction: row;
            max-height: 480px;
        }

        /* Vintage Image Container - Desktop */
        .vintage-modal-image-desktop {
            flex: 0 0 45%;
            width: 45%;
            height: 480px;
            background: linear-gradient(135deg, #1a1610 0%, #2a1f10 100%);
            position: relative;
            overflow: hidden;
            border-right: 1px solid rgba(218, 165, 32, 0.2);
        }

        .vintage-modal-image-desktop img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            aspect-ratio: 16/9;
        }

        .vintage-modal-image-desktop::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
            pointer-events: none;
        }

        /* Vintage Content - Desktop */
        .vintage-modal-content-desktop {
            flex: 1 1 55%;
            width: 55%;
            padding: 24px;
            max-height: 480px;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .vintage-modal-content-desktop::-webkit-scrollbar {
            width: 4px;
        }

        .vintage-modal-content-desktop::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .vintage-modal-content-desktop::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #DAA520, #B8860B);
            border-radius: 2px;
        }

        .vintage-description-text {
            color: rgba(255, 255, 255, 0.9);
            font-size: 14px;
            line-height: 1.7;
            margin-bottom: 18px;
        }

        /* Vintage Blocks visual */
        .vintage-blocks-visual {
            background: rgba(218, 165, 32, 0.05);
            border: 1px solid rgba(218, 165, 32, 0.2);
            border-radius: 10px;
            padding: 14px;
            margin: 18px 0;
            text-align: center;
        }

        .vintage-block-number-display {
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin: 10px 0;
        }

        .vintage-block-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .vintage-block-num {
            font-family: 'Courier New', monospace;
            font-size: 28px;
            color: #FFD700;
            font-weight: 700;
            text-shadow: 0 0 15px rgba(218, 165, 32, 0.5);
        }

        .vintage-block-label {
            color: rgba(255, 255, 255, 0.5);
            font-size: 9px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 4px;
        }

        .vintage-block-range {
            width: 100%;
            height: 1px;
            background: linear-gradient(90deg, transparent, #B8860B, transparent);
            margin: 14px 0;
        }

        .vintage-range-text {
            color: rgba(255, 255, 255, 0.7);
            font-size: 10px;
        }

        /* Vintage Info box */
        .vintage-info-box {
            background: linear-gradient(135deg, rgba(218, 165, 32, 0.1) 0%, rgba(184, 134, 11, 0.08) 100%);
            border: 1px solid rgba(218, 165, 32, 0.25);
            border-radius: 12px;
            padding: 14px;
            margin: 18px 0;
        }

        .vintage-info-title {
            color: #FFD700;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .vintage-info-title::before {
            content: '⛏️';
            font-size: 14px;
        }

        .vintage-info-content {
            color: rgba(255, 255, 255, 0.85);
            font-size: 13px;
            line-height: 1.6;
        }

        /* Vintage Legacy box */
        .vintage-legacy-box {
            background: linear-gradient(135deg, rgba(224, 224, 224, 0.1) 0%, transparent);
            border-left: 3px solid #B8860B;
            padding: 10px 14px;
            margin: 14px 0;
            color: rgba(255, 255, 255, 0.8);
            font-size: 13px;
        }

        .vintage-legacy-box strong {
            color: #DAA520;
        }

        /* Vintage Examples section */
        .vintage-examples-section {
            background: linear-gradient(135deg, rgba(218, 165, 32, 0.05) 0%, rgba(184, 134, 11, 0.05) 100%);
            border: 1px solid rgba(218, 165, 32, 0.2);
            border-radius: 12px;
            padding: 14px;
            margin-top: 18px;
        }

        .vintage-examples-title {
            color: #FFD700;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 10px;
        }

        .vintage-example-list {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .vintage-example-item {
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(184, 134, 11, 0.3);
            padding: 5px 10px;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            color: #FFD700;
            transition: all 0.3s ease;
            position: relative;
        }

        .vintage-example-item:hover {
            background: rgba(218, 165, 32, 0.1);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(218, 165, 32, 0.2);
        }

        .vintage-example-item::after {
            content: '⛏️';
            position: absolute;
            top: -8px;
            right: -8px;
            font-size: 11px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .vintage-example-item:hover::after {
            opacity: 1;
        }

        /* Vintage Modal Container - Mobile */
        .vintage-modal-container-mobile {
            background: linear-gradient(145deg, #1a1610 0%, #0f0c08 100%);
            border: 2px solid;
            border-image: linear-gradient(135deg, #DAA520, #B8860B, #DAA520) 1;
            border-radius: 20px;
            max-width: 600px;
            width: 90%;
            max-height: 90vh;
            overflow: hidden;
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.8),
                0 0 100px rgba(218, 165, 32, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            animation: vintage-slideUp 0.4s ease;
            display: flex;
            flex-direction: column;
        }

        /* Vintage Mobile Header */
        .vintage-modal-header-mobile {
            position: relative;
            padding: 12px 16px 10px;
            background: linear-gradient(180deg, rgba(218, 165, 32, 0.08) 0%, transparent 100%);
            border-bottom: 1px solid rgba(218, 165, 32, 0.25);
        }

        .vintage-close-btn-mobile {
            position: absolute;
            top: 12px;
            right: 16px;
            width: 28px;
            height: 28px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(218, 165, 32, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .vintage-close-btn-mobile:hover {
            background: rgba(218, 165, 32, 0.2);
            transform: rotate(90deg);
        }

        .vintage-close-btn-mobile::before,
        .vintage-close-btn-mobile::after {
            content: '';
            position: absolute;
            width: 14px;
            height: 2px;
            background: #FFD700;
            border-radius: 2px;
        }

        .vintage-close-btn-mobile::before {
            transform: rotate(45deg);
        }

        .vintage-close-btn-mobile::after {
            transform: rotate(-45deg);
        }

        /* Vintage Mobile Image */
        .vintage-modal-image-mobile {
            width: 100%;
            height: 200px;
            background: linear-gradient(135deg, #1a1610 0%, #2a1f10 100%);
            position: relative;
            overflow: hidden;
            border-bottom: 1px solid rgba(218, 165, 32, 0.2);
        }

        .vintage-modal-image-mobile img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .vintage-modal-image-mobile::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
            pointer-events: none;
        }

        /* Vintage Mobile Content */
        .vintage-modal-content-mobile {
            padding: 16px;
            max-height: 300px;
            overflow-y: auto;
        }

        .vintage-modal-content-mobile::-webkit-scrollbar {
            width: 4px;
        }

        .vintage-modal-content-mobile::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .vintage-modal-content-mobile::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #DAA520, #B8860B);
            border-radius: 2px;
        }

        /* Responsive adjustments for Vintage Mobile */
        @media (max-width: 768px) {
            .vintage-modal-container-mobile {
                width: 95%;
                margin: 10px;
            }

            .vintage-modal-title {
                font-size: 20px;
            }

            .vintage-genesis-badge {
                display: block;
                margin-left: 0;
                margin-top: 8px;
                display: inline-block;
            }

            .vintage-block-number-display {
                flex-direction: column;
                gap: 10px;
            }

            .vintage-modal-image-mobile {
                height: 200px;
            }

            .vintage-close-btn-mobile {
                width: 28px;
                height: 28px;
                top: 12px;
                right: 12px;
            }

            .vintage-close-btn-mobile::before,
            .vintage-close-btn-mobile::after {
                width: 14px;
            }
        }

        /* Tesla 369 Modal Overlay (commun desktop et mobile) */
        .tesla-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(10px);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 999999;
            animation: tesla-fadeIn 0.3s ease;
            overflow: hidden;
        }

        @keyframes tesla-fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes tesla-slideUp {
            from {
                transform: translateY(50px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        /* Tesla Modal Container - Desktop */
        .tesla-modal-container-desktop {
            background: linear-gradient(145deg, #1a1a05 0%, #0f0f00 100%);
            border: 2px solid;
            border-image: linear-gradient(135deg, #FFD700, #FFA500, #00BFFF) 1;
            border-radius: 20px;
            max-width: 900px;
            width: 90%;
            max-height: 600px;
            overflow: hidden;
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.8),
                0 0 100px rgba(255, 215, 0, 0.2),
                0 0 80px rgba(0, 191, 255, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            animation: tesla-slideUp 0.4s ease;
            display: flex;
            flex-direction: column;
        }

        /* Tesla Modal Header */
        .tesla-modal-header {
            position: relative;
            padding: 20px 24px 16px;
            background: linear-gradient(180deg, rgba(255, 215, 0, 0.08) 0%, transparent 100%);
            border-bottom: 1px solid rgba(255, 215, 0, 0.25);
        }

        .tesla-category-badge {
            display: inline-block;
            background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
            color: #0a0a0a;
            font-size: 11px;
            font-weight: 700;
            padding: 4px 12px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
            box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
        }

        .tesla-energy-badge {
            display: inline-block;
            background: linear-gradient(135deg, #00BFFF 0%, #1E90FF 100%);
            color: #fff;
            font-size: 10px;
            font-weight: 600;
            padding: 3px 10px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-left: 8px;
            border: 1px solid rgba(0, 191, 255, 0.3);
            animation: tesla-pulse-energy 2s infinite;
        }

        @keyframes tesla-pulse-energy {
            0%, 100% { box-shadow: 0 0 10px rgba(0, 191, 255, 0.3); }
            50% { box-shadow: 0 0 20px rgba(0, 191, 255, 0.6); }
        }

        .tesla-modal-title {
            color: #FFD700;
            font-size: 26px;
            font-weight: 700;
            margin-bottom: 6px;
            text-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
        }

        .tesla-modal-subtitle {
            color: rgba(255, 255, 255, 0.7);
            font-size: 13px;
            font-weight: 400;
        }

        /* Tesla special effect */
        .tesla-text {
            background: linear-gradient(90deg, #FFD700, #FFA500, #00BFFF, #FFD700);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: tesla-energy-flow 3s ease infinite;
            font-weight: 700;
            background-size: 200% 100%;
        }

        @keyframes tesla-energy-flow {
            0%, 100% {
                filter: brightness(1) hue-rotate(0deg);
                background-position: 0% 50%;
            }
            50% {
                filter: brightness(1.2) hue-rotate(10deg);
                background-position: 100% 50%;
            }
        }

        .tesla-divine-highlight {
            color: #00BFFF;
            font-weight: 600;
            text-shadow: 0 0 10px rgba(0, 191, 255, 0.4);
        }

        /* Tesla Close button */
        .tesla-close-btn {
            position: absolute;
            top: 20px;
            right: 24px;
            width: 32px;
            height: 32px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 215, 0, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .tesla-close-btn:hover {
            background: rgba(255, 215, 0, 0.2);
            transform: rotate(90deg);
        }

        .tesla-close-btn::before,
        .tesla-close-btn::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 2px;
            background: #FFD700;
            border-radius: 2px;
        }

        .tesla-close-btn::before {
            transform: rotate(45deg);
        }

        .tesla-close-btn::after {
            transform: rotate(-45deg);
        }

        /* Tesla Modal Body Flex (Desktop) */
        .tesla-modal-body-flex {
            display: flex;
            flex-direction: row;
            max-height: 480px;
        }

        /* Tesla Image Container - Desktop */
        .tesla-modal-image-desktop {
            flex: 0 0 45%;
            width: 45%;
            height: 480px;
            background: linear-gradient(135deg, #1a1405 0%, #2a2005 100%);
            position: relative;
            overflow: hidden;
            border-right: 1px solid rgba(255, 215, 0, 0.2);
        }

        .tesla-modal-image-desktop img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            aspect-ratio: 16/9;
        }

        .tesla-modal-image-desktop::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
            pointer-events: none;
        }

        /* Tesla Content - Desktop */
        .tesla-modal-content-desktop {
            flex: 1 1 55%;
            width: 55%;
            padding: 24px;
            max-height: 480px;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .tesla-modal-content-desktop::-webkit-scrollbar {
            width: 4px;
        }

        .tesla-modal-content-desktop::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .tesla-modal-content-desktop::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #FFD700, #00BFFF);
            border-radius: 2px;
        }

        .tesla-description-text {
            color: rgba(255, 255, 255, 0.9);
            font-size: 14px;
            line-height: 1.7;
            margin-bottom: 18px;
        }

        /* Tesla Energy sequence visual */
        .tesla-energy-visual {
            background: rgba(255, 215, 0, 0.05);
            border: 1px solid rgba(0, 191, 255, 0.2);
            border-radius: 10px;
            padding: 14px;
            margin: 18px 0;
            text-align: center;
        }

        .tesla-sequence-showcase {
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin: 10px 0;
        }

        .tesla-sequence-number {
            font-size: 36px;
            font-weight: 700;
            color: #FFD700;
            text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
            animation: tesla-pulse-number 2s infinite;
        }

        @keyframes tesla-pulse-number {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        .tesla-sequence-label {
            color: rgba(255, 255, 255, 0.5);
            font-size: 9px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 4px;
        }

        .tesla-energy-flow-line {
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #FFD700, #00BFFF, transparent);
            margin: 14px 0;
        }

        /* Tesla Info box */
        .tesla-info-box {
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(0, 191, 255, 0.08) 100%);
            border: 1px solid rgba(255, 215, 0, 0.25);
            border-radius: 12px;
            padding: 14px;
            margin: 18px 0;
        }

        .tesla-info-title {
            color: #FFD700;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .tesla-info-title::before {
            content: '⚡';
            font-size: 14px;
        }

        .tesla-info-content {
            color: rgba(255, 255, 255, 0.85);
            font-size: 13px;
            line-height: 1.6;
        }

        /* Tesla Quote box */
        .tesla-quote-box {
            background: linear-gradient(135deg, rgba(0, 191, 255, 0.1) 0%, transparent);
            border-left: 3px solid #00BFFF;
            padding: 10px 14px;
            margin: 14px 0;
            font-style: italic;
            color: rgba(255, 255, 255, 0.8);
            font-size: 13px;
        }

        /* Tesla Examples section */
        .tesla-examples-section {
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.05) 0%, rgba(0, 191, 255, 0.05) 100%);
            border: 1px solid rgba(255, 215, 0, 0.2);
            border-radius: 12px;
            padding: 14px;
            margin-top: 18px;
        }

        .tesla-examples-title {
            color: #FFD700;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 10px;
        }

        .tesla-example-list {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .tesla-example-item {
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(0, 191, 255, 0.3);
            padding: 5px 10px;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            color: #FFD700;
            transition: all 0.3s ease;
            position: relative;
        }

        .tesla-example-item:hover {
            background: rgba(255, 215, 0, 0.1);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 191, 255, 0.2);
        }

        .tesla-example-item::after {
            content: '⚡';
            position: absolute;
            top: -10px;
            right: -8px;
            font-size: 11px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .tesla-example-item:hover::after {
            opacity: 1;
        }

        /* Tesla Modal Container - Mobile */
        .tesla-modal-container-mobile {
            background: linear-gradient(145deg, #1a1a05 0%, #0f0f00 100%);
            border: 2px solid;
            border-image: linear-gradient(135deg, #FFD700, #FFA500, #00BFFF) 1;
            border-radius: 20px;
            max-width: 600px;
            width: 90%;
            max-height: 90vh;
            overflow: hidden;
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.8),
                0 0 100px rgba(255, 215, 0, 0.2),
                0 0 80px rgba(0, 191, 255, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            animation: tesla-slideUp 0.4s ease;
            display: flex;
            flex-direction: column;
        }

        /* Tesla Mobile Header */
        .tesla-modal-header-mobile {
            position: relative;
            padding: 12px 16px 10px;
            background: linear-gradient(180deg, rgba(255, 215, 0, 0.08) 0%, transparent 100%);
            border-bottom: 1px solid rgba(255, 215, 0, 0.25);
        }

        .tesla-close-btn-mobile {
            position: absolute;
            top: 12px;
            right: 16px;
            width: 28px;
            height: 28px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 215, 0, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .tesla-close-btn-mobile:hover {
            background: rgba(255, 215, 0, 0.2);
            transform: rotate(90deg);
        }

        .tesla-close-btn-mobile::before,
        .tesla-close-btn-mobile::after {
            content: '';
            position: absolute;
            width: 14px;
            height: 2px;
            background: #FFD700;
            border-radius: 2px;
        }

        .tesla-close-btn-mobile::before {
            transform: rotate(45deg);
        }

        .tesla-close-btn-mobile::after {
            transform: rotate(-45deg);
        }

        /* Tesla Mobile Image */
        .tesla-modal-image-mobile {
            width: 100%;
            height: 200px;
            background: linear-gradient(135deg, #1a1405 0%, #2a2005 100%);
            position: relative;
            overflow: hidden;
            border-bottom: 1px solid rgba(255, 215, 0, 0.2);
        }

        .tesla-modal-image-mobile img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .tesla-modal-image-mobile::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
            pointer-events: none;
        }

        /* Tesla Mobile Content */
        .tesla-modal-content-mobile {
            padding: 16px;
            max-height: 300px;
            overflow-y: auto;
        }

        .tesla-modal-content-mobile::-webkit-scrollbar {
            width: 4px;
        }

        .tesla-modal-content-mobile::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .tesla-modal-content-mobile::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #FFD700, #00BFFF);
            border-radius: 2px;
        }

        /* Responsive adjustments for Tesla Mobile */
        @media (max-width: 768px) {
            .tesla-modal-container-mobile {
                width: 95%;
                margin: 10px;
            }

            .tesla-modal-title {
                font-size: 20px;
            }

            .tesla-energy-badge {
                display: block;
                margin-left: 0;
                margin-top: 8px;
                display: inline-block;
            }

            .tesla-sequence-showcase {
                flex-direction: row;
                gap: 12px;
            }

            .tesla-modal-image-mobile {
                height: 200px;
            }

            .tesla-close-btn-mobile {
                width: 28px;
                height: 28px;
                top: 12px;
                right: 12px;
            }

            .tesla-close-btn-mobile::before,
            .tesla-close-btn-mobile::after {
                width: 14px;
            }
        }

        /* Modal Dark Gold Theme */
        .uncommon-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 999999 !important;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            animation: fadeIn 0.25s ease;
        }

        .uncommon-modal-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.75);
            backdrop-filter: blur(8px);
            z-index: 1;
        }

        .uncommon-modal-content {
            position: relative;
            z-index: 2;
            background: #0b0b0f;
            border: 1px solid rgba(210, 153, 34, 0.2);
            border-radius: 1rem;
            max-width: 1000px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            overflow-x: hidden;
            box-shadow:
                0 0 0 1px rgba(210, 153, 34, 0.3),
                0 10px 30px -10px rgba(210, 153, 34, 0.25),
                0 40px 100px -40px rgba(0, 0, 0, 0.5),
                0 20px 40px -20px rgba(210, 153, 34, 0.15);
            animation: slideUp 0.25s ease;
        }

        /* Custom scrollbar pour la modale */
        .uncommon-modal-content::-webkit-scrollbar {
            width: 8px;
        }

        .uncommon-modal-content::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 4px;
        }

        .uncommon-modal-content::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, rgba(210, 153, 34, 0.5), rgba(210, 153, 34, 0.3));
            border-radius: 4px;
            transition: background 0.3s ease;
        }

        .uncommon-modal-content::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, rgba(210, 153, 34, 0.7), rgba(210, 153, 34, 0.5));
        }

        /* Glow effect */
        .uncommon-modal-content:before {
            content: "";
            position: absolute;
            inset: -1px;
            border-radius: inherit;
            background: conic-gradient(from 120deg, rgba(210, 153, 34, 0.35), rgba(247, 201, 72, 0.05), rgba(210, 153, 34, 0.35));
            filter: blur(12px);
            opacity: 0.7;
            z-index: -1;
        }

        /* Decorative glows */
        .uncommon-modal-content:after {
            content: "";
            position: absolute;
            top: -6rem;
            right: -6rem;
            width: 12rem;
            height: 12rem;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(210, 153, 34, 0.25), transparent 60%);
            pointer-events: none;
            z-index: -1;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(8px) scale(0.98);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        /* Header de la modale */
        .uncommon-modal-header {
            display: flex;
            align-items: start;
            justify-content: space-between;
            padding: 1.25rem;
            border-bottom: 1px solid rgba(210, 153, 34, 0.15);
            gap: 1rem;
        }

        .uncommon-modal-title {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 1.5rem;
            font-weight: 800;
            background: linear-gradient(92deg, #D29922, #ffd166);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            margin: 0;
        }

        .uncommon-modal-title i {
            font-size: 1.5rem;
            background: none;
            -webkit-text-fill-color: #D29922;
        }

        .uncommon-modal-title img {
            width: 2rem;
            height: 2rem;
            object-fit: contain;
            flex-shrink: 0;
            filter: drop-shadow(0 2px 4px rgba(210, 153, 34, 0.3));
        }

        .uncommon-modal-subtitle-desc {
            font-size: 0.875rem;
            color: rgba(166, 166, 166, 0.9);
            margin-top: 0.25rem;
        }

        .uncommon-modal-close {
            background: rgba(210, 153, 34, 0.1);
            border: 1px solid rgba(210, 153, 34, 0.3);
            color: var(--accent-gold);
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 1.25rem;
        }

        .uncommon-modal-close:hover {
            background: rgba(210, 153, 34, 0.2);
            transform: rotate(90deg);
            box-shadow: 0 4px 12px rgba(210, 153, 34, 0.3);
        }

        /* Body de la modale */
        .uncommon-modal-body {
            padding: 1.5rem;
            overflow: hidden;
        }

        /* Grid layout pour desktop */
        @media (min-width: 768px) {
            .uncommon-modal-body {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 1.5rem;
                padding: 1.5rem;
            }
        }

        /* Conteneur vidéo avec effet glow */
        .uncommon-video-container {
            position: relative;
            width: 100%;
            border-radius: 0.75rem;
            overflow: hidden;
            background: #000;
            margin-bottom: 2rem;
        }

        /* Glow effect autour de la vidéo */
        .uncommon-video-container:before {
            content: "";
            position: absolute;
            inset: -2px;
            border-radius: 1rem;
            background: linear-gradient(120deg, rgba(210, 153, 34, 0.45), rgba(247, 201, 72, 0.15), rgba(210, 153, 34, 0.35));
            filter: blur(14px);
            opacity: 0.35;
            z-index: 0;
        }

        @media (min-width: 768px) {
            .uncommon-video-container {
                margin-bottom: 0;
            }
        }

        .uncommon-video {
            position: relative;
            z-index: 1;
            width: 100%;
            max-height: 450px;
            display: block;
            border-radius: 8px;
            object-fit: contain;
            background: #000;
        }

        .uncommon-image {
            position: relative;
            z-index: 1;
            width: 100%;
            max-height: 450px;
            display: block;
            border-radius: 8px;
            object-fit: contain;
            background: #000;
        }

        /* Responsive video for mobile */
        @media (max-width: 768px) {
            .uncommon-video {
                max-height: 250px;
            }
        }

        /* Section explication */
        .uncommon-explanation {
            color: var(--text-primary);
        }

        .uncommon-subtitle {
            font-size: 1.25rem;
            font-weight: 700;
            background: linear-gradient(92deg, #D29922, #ffd166);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .uncommon-text {
            color: var(--text-secondary);
            line-height: 1.6;
            margin-bottom: 1.5rem;
            font-size: 1rem;
        }

        .uncommon-text strong {
            color: var(--accent-gold);
            font-weight: 600;
        }

        /* Feature items */
        .uncommon-features {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .uncommon-feature-item {
            display: flex;
            gap: 1rem;
            padding: 1rem;
            background: linear-gradient(180deg, rgba(210, 153, 34, 0.08), rgba(210, 153, 34, 0.03));
            border: 1px solid rgba(210, 153, 34, 0.2);
            border-left: 3px solid #D29922;
            border-radius: 0.5rem;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .uncommon-feature-item:hover {
            background: linear-gradient(180deg, rgba(210, 153, 34, 0.12), rgba(210, 153, 34, 0.06));
            border-color: rgba(210, 153, 34, 0.35);
            transform: translateX(5px);
            box-shadow: 0 4px 12px rgba(210, 153, 34, 0.15);
        }

        .uncommon-feature-item i {
            background: linear-gradient(135deg, #D29922, #ffd166);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 1.5rem;
            width: 2rem;
            flex-shrink: 0;
            margin-top: 0.25rem;
            transition: transform 0.3s ease;
        }

        .uncommon-feature-item:hover i {
            transform: scale(1.1);
        }

        .uncommon-feature-item h4 {
            color: var(--text-primary);
            font-weight: 600;
            margin: 0 0 0.5rem 0;
            font-size: 1rem;
        }

        .uncommon-feature-item p {
            color: var(--text-secondary);
            margin: 0;
            font-size: 0.875rem;
            line-height: 1.5;
        }

        /* Responsive mobile */
        @media (max-width: 768px) {
            .uncommon-modal-content {
                max-height: 85vh;
                border-radius: 0.75rem;
                margin: 1rem;
            }

            .uncommon-modal-title {
                font-size: 1.25rem;
            }

            .uncommon-modal-title i {
                font-size: 1.5rem;
            }

            .uncommon-subtitle {
                font-size: 1.125rem;
            }

            .uncommon-feature-item {
                padding: 0.75rem;
            }

            .uncommon-feature-item h4 {
                font-size: 0.9375rem;
            }

            .uncommon-feature-item p {
                font-size: 0.8125rem;
            }
        }

        /* États Interactifs */
        .focus-ring:focus {
            outline: 2px solid var(--accent-blue);
            outline-offset: 2px;
        }
        
        .disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        /* Responsive Breakpoints */
        @media (min-width: 768px) {
            .mobile-only { display: none; }
            .tablet-up { display: block; }
        }
        
        @media (min-width: 1024px) {
            .desktop-only { display: block; }
            .mobile-only { display: none; }
            .tablet-up { display: block; }
        }
        
        /* Desktop Layout avec Scroll Forcé - Version Corrigée Structure */
        @media (min-width: 1024px) {
            /* Conteneur app avec hauteur viewport fixe */
            #app.flex.flex-col.min-h-screen {
                height: 100vh !important;
                max-height: 100vh !important;
                min-height: 100vh !important;
                overflow: hidden !important;
            }
            
            /* Header fixe */
            #app > header {
                flex-shrink: 0 !important;
            }
            
            /* Container flex au milieu (deuxième enfant) - le div avec "flex flex-1 lg:flex-row min-h-0" */
            #app > div.flex.flex-1.lg\\:flex-row.min-h-0 {
                flex: 1 !important;
                min-height: 0 !important;
                overflow: hidden !important;
                display: flex !important;
                flex-direction: row !important;
            }
            
            /* Main content des derniers enfant - le main seul */
            #app > main.flex-1.p-6.bg-bg-main.overflow-auto {
                height: 100% !important;
                max-height: 100% !important;
                overflow-y: auto !important;
                overflow-x: hidden !important;
                flex: 1 !important;
                min-height: 0 !important;
                min-width: 0 !important;
            }
            
            /* Sidebar/complementary dans le conteneur flex du milieu */
            #app > div.flex.flex-1.lg\\:flex-row.min-h-0 > complementary {
                width: 420px !important;
                min-width: 420px !important;
                max-width: 420px !important;
                height: 100% !important;
                max-height: 100% !important;
                overflow-y: auto !important;
                overflow-x: hidden !important;
                flex-shrink: 0 !important;
                position: relative !important;
            }
            
            /* Styles de scrollbar pour aside */
            aside::-webkit-scrollbar {
                width: 6px;
            }
            
            aside::-webkit-scrollbar-track {
                background: transparent;
            }
            
            aside::-webkit-scrollbar-thumb {
                background-color: var(--border-color);
                border-radius: 3px;
            }
            
            aside::-webkit-scrollbar-thumb:hover {
                background-color: var(--accent-gold);
            }
            
            /* Styles de scrollbar pour main */
            main.flex-1.p-6.bg-bg-main.overflow-auto::-webkit-scrollbar {
                width: 8px;
            }
            
            main.flex-1.p-6.bg-bg-main.overflow-auto::-webkit-scrollbar-track {
                background: rgba(22, 27, 34, 0.3);
                border-radius: 4px;
            }
            
            main.flex-1.p-6.bg-bg-main.overflow-auto::-webkit-scrollbar-thumb {
                background-color: var(--accent-gold);
                border-radius: 4px;
            }
            
            main.flex-1.p-6.bg-bg-main.overflow-auto::-webkit-scrollbar-thumb:hover {
                background-color: var(--accent-blue);
            }
        }
        
        /* ===============================================
           SYSTÈME DE CARTOUCHES/BADGES CATÉGORIES BITCOIN
           =============================================== */
           
        /* Variables couleurs thématique Bitcoin */
        :root {
            /* Couleurs principales Bitcoin */
            --bitcoin-orange: #F7931A;
            --bitcoin-gold: #D29922;
            --bitcoin-silver: #C0C5CC;
            --bitcoin-copper: #B87333;
            
            /* Couleurs neutres pour badges inactifs */
            --badge-neutral-bg: rgba(168, 178, 188, 0.08);
            --badge-neutral-border: rgba(168, 178, 188, 0.15);
            --badge-neutral-text: #8B949E;
            
            /* Glassmorphism pour badges */
            --badge-blur: blur(8px);
            --badge-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.15);
            --badge-shadow-active: 0 4px 16px rgba(247, 147, 26, 0.25);
        }
        
        /* Scrollbar styling pour une meilleure visibilité */
            .sidebar-scrollable::-webkit-scrollbar,
            .main-scrollable::-webkit-scrollbar {
                width: 6px;
            }
            
            .sidebar-scrollable::-webkit-scrollbar-track,
            .main-scrollable::-webkit-scrollbar-track {
                background: var(--bg-primary);
                border-radius: 3px;
            }
            
            .sidebar-scrollable::-webkit-scrollbar-thumb,
            .main-scrollable::-webkit-scrollbar-thumb {
                background: var(--border-color);
                border-radius: 3px;
                transition: background-color 0.2s ease;
            }
            
            .sidebar-scrollable::-webkit-scrollbar-thumb:hover,
            .main-scrollable::-webkit-scrollbar-thumb:hover {
                background: var(--text-secondary);
            }
        }

        /* ========== DESKTOP NAVIGATION BUTTONS ========== */
        .desktop-nav-btn {
            background: var(--bg-main);
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
            transition: all 0.3s ease;
        }

        .desktop-nav-btn:hover {
            background: var(--bg-card);
            color: var(--text-primary);
            border-color: var(--accent-gold);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(212, 175, 55, 0.15);
        }

        .desktop-nav-btn.active {
            background: linear-gradient(135deg, #D4AF37 0%, #F4E5B0 100%);
            color: #000;
            border-color: var(--accent-gold);
            font-weight: 600;
            box-shadow: 0 4px 16px rgba(212, 175, 55, 0.3);
        }

        .desktop-nav-btn.active:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
        }

        /* Electric Gauge Styles */
        .electric-gauge-container {
            position: relative;
        }

        .electric-gauge-svg {
            width: 100%;
            height: 100%;
            transform: rotate(-90deg);
        }

        .electric-gauge-bg {
            fill: none;
            stroke: rgba(255, 255, 255, 0.1);
            stroke-width: 20;
        }

        .electric-gauge-progress {
            fill: none;
            stroke-width: 20;
            stroke-linecap: round;
            transition: all 0.5s ease;
            stroke-dasharray: 816.8141;
            stroke-dashoffset: 816.8141;
        }

        /* Classes de rareté pour effets */
        .rarity-common-glow {
            filter: drop-shadow(0 0 10px rgba(150, 150, 150, 0.6));
        }

        .rarity-uncommon-glow {
            filter: drop-shadow(0 0 10px rgba(76, 209, 55, 0.6));
        }

        .rarity-rare-glow {
            filter: drop-shadow(0 0 10px rgba(33, 150, 243, 0.6));
        }

        .rarity-legendary-glow {
            filter: drop-shadow(0 0 15px rgba(255, 193, 7, 0.8)) drop-shadow(0 0 25px rgba(255, 152, 0, 0.6));
        }

        .rarity-mythic-glow {
            filter: drop-shadow(0 0 15px rgba(156, 39, 176, 0.8)) drop-shadow(0 0 25px rgba(224, 64, 251, 0.6));
        }

        .electric-gauge-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 28px;
            font-weight: bold;
            transition: all 0.5s ease;
            z-index: 10;
        }

        .electric-gauge-label {
            position: absolute;
            top: 58%;
            left: 50%;
            transform: translate(-50%, 0);
            font-size: 9px;
            color: rgba(255, 255, 255, 0.5);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .electric-rarity-name {
            position: absolute;
            top: 68%;
            left: 50%;
            transform: translate(-50%, 0);
            font-size: 11px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 2px;
            transition: all 0.5s ease;
        }

        .electric-lightning-particle {
            position: absolute;
            width: 2px;
            filter: blur(1px);
            opacity: 0;
        }

        @keyframes lightning-strike {
            0%, 100% { opacity: 0; }
            50% { opacity: 1; }
        }

        .electric-lightning-bolt {
            position: absolute;
            pointer-events: none;
        }

        .electric-bolt-path {
            stroke-width: 2;
            fill: none;
            opacity: 0;
        }

        @keyframes bolt-flash {
            0%, 100% { opacity: 0; }
            50% { opacity: 1; }
        }

        .electric-orbital-particle {
            position: absolute;
            width: 3px;
            height: 3px;
            border-radius: 50%;
            opacity: 0;
        }

        @keyframes orbit {
            0% {
                transform: rotate(0deg) translateX(var(--orbit-radius, 90px)) rotate(0deg);
                opacity: 0;
            }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% {
                transform: rotate(360deg) translateX(var(--orbit-radius, 90px)) rotate(-360deg);
                opacity: 0;
            }
        }

        /* ==========================================
           MENU HIERARCHIQUE - THEME OR
           ========================================== */

        @keyframes slide-in-down {
            from {
                transform: translateY(-10px);
                opacity: 0;
                max-height: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
                max-height: 1000px;
            }
        }

        .cyber-gold-theme {
            --cyber-primary: #FFD700;
            --cyber-primary-glow: rgba(255, 215, 0, 0.3);
            --cyber-primary-light: rgba(255, 215, 0, 0.1);
        }

        /* Container du menu hiérarchique */
        .hierarchical-menu-container {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .hierarchical-menu-container::-webkit-scrollbar {
            width: 0.375rem;
        }

        .hierarchical-menu-container::-webkit-scrollbar-track {
            background: rgba(31, 41, 55, 0.3);
            border-radius: 0.25rem;
        }

        .hierarchical-menu-container::-webkit-scrollbar-thumb {
            background: rgba(255, 215, 0, 0.3);
            border-radius: 0.25rem;
        }

        /* Catégorie principale */
        .hierarchical-category {
            border-radius: 0.5rem;
            overflow: hidden;
        }

        .hierarchical-category-header {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.4rem 0.75rem;
            background: rgba(31, 41, 55, 0.3);
            border: 1px solid transparent;
            border-radius: 0.5rem;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .hierarchical-category-header:hover {
            background: rgba(31, 41, 55, 0.5);
            border-color: rgba(255, 215, 0, 0.3);
            transform: translateX(2px);
        }

        .hierarchical-category-header.active {
            background: rgba(255, 215, 0, 0.1);
            border-color: #FFD700;
            box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
        }

        .hierarchical-category-icon {
            width: 2rem;
            height: 2rem;
            object-fit: contain;
        }

        .hierarchical-category-info {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .hierarchical-category-name {
            color: white;
            font-weight: 600;
            font-size: 0.9rem;
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            flex-wrap: nowrap;
        }

        .hierarchical-category-count {
            color: rgba(156, 163, 175, 0.8);
            font-size: 0.75rem;
            margin-top: 0.125rem;
        }

        .hierarchical-category-chevron {
            width: 1.25rem;
            height: 1.25rem;
            color: #FFD700;
            transition: transform 0.3s ease;
        }

        .hierarchical-category-chevron.open {
            transform: rotate(180deg);
        }

        /* Sous-catégories */
        .hierarchical-subcategories {
            margin-left: 1rem;
            margin-top: 0.25rem;
            padding-left: 0.75rem;
            padding-right: 0.25rem;
            padding-bottom: 0.5rem;
            border-left: 2px solid rgba(255, 215, 0, 0.3);
            animation: slide-in-down 0.3s ease-out;
            max-height: 200px;
            overflow-y: auto;
        }

        /* Scrollbar personnalisée pour les sous-catégories */
        .hierarchical-subcategories::-webkit-scrollbar {
            width: 6px;
        }

        .hierarchical-subcategories::-webkit-scrollbar-track {
            background: rgba(31, 41, 55, 0.3);
            border-radius: 3px;
        }

        .hierarchical-subcategories::-webkit-scrollbar-thumb {
            background: rgba(255, 215, 0, 0.3);
            border-radius: 3px;
        }

        .hierarchical-subcategories::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 215, 0, 0.5);
        }

        .hierarchical-subcategory {
            position: relative;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.3rem 0.5rem;
            margin-bottom: 0.125rem;
            background: rgba(31, 41, 55, 0.2);
            border: 1px solid transparent;
            border-radius: 0.375rem;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .hierarchical-subcategory:hover {
            background: rgba(31, 41, 55, 0.4);
            border-color: rgba(255, 215, 0, 0.2);
        }

        .hierarchical-subcategory-checkbox {
            width: 1rem;
            height: 1rem;
            border-radius: 0.25rem;
            border: 1px solid #FFD700;
            background: transparent;
            cursor: pointer;
            accent-color: #FFD700;
        }

        .hierarchical-subcategory-icon {
            width: 2rem;
            height: 2rem;
            object-fit: contain;
        }

        .hierarchical-subcategory-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-width: 0; /* Permet au flex child de rétrécir en dessous de sa taille de contenu */
            overflow: hidden;
        }

        .hierarchical-subcategory-name {
            color: rgba(255, 255, 255, 0.9);
            font-size: 0.85rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .hierarchical-subcategory-count {
            color: rgba(156, 163, 175, 0.7);
            font-size: 0.7rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* Ajustements mobiles pour les sous-catégories */
        @media (max-width: 768px) {
            .hierarchical-subcategory-icon {
                width: 1.25rem;
                height: 1.25rem;
                flex-shrink: 0;
            }

            .hierarchical-subcategory-checkbox {
                width: 0.875rem;
                height: 0.875rem;
                flex-shrink: 0;
            }

            .hierarchical-subcategory-name {
                font-size: 0.75rem;
                line-height: 1.1;
            }

            .hierarchical-subcategory-count {
                font-size: 0.625rem;
                line-height: 1.1;
            }

            .hierarchical-subcategory {
                gap: 0.35rem;
                padding: 0.2rem 0.35rem;
            }

            .hierarchical-subcategory-info {
                max-width: calc(100vw - 180px); /* Limite la largeur pour éviter le débordement */
            }
        }

        /* Filtres spéciaux */
        .hierarchical-special-filter {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.5rem 0.75rem;
            margin-top: 0.5rem;
            margin-bottom: 0.5rem;
            background: rgba(31, 41, 55, 0.2);
            border: 1px solid transparent;
            border-radius: 0.375rem;
            transition: all 0.2s ease;
        }

        .hierarchical-special-filter:hover {
            background: rgba(31, 41, 55, 0.4);
            border-color: rgba(255, 215, 0, 0.2);
        }

        .hierarchical-special-filter-label {
            color: rgba(255, 255, 255, 0.9);
            font-size: 0.85rem;
        }

        .hierarchical-special-filter-select {
            padding: 0.25rem 0.5rem;
            background: rgba(31, 41, 55, 0.5);
            border: 1px solid rgba(156, 163, 175, 0.3);
            border-radius: 0.25rem;
            color: white;
            font-size: 0.75rem;
            cursor: pointer;
        }

        .hierarchical-special-filter-select:focus {
            outline: none;
            border-color: #FFD700;
            box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.1);
        }

        /* Bouton reset */
        .hierarchical-reset-btn {
            margin-top: 1rem;
            width: 100%;
            padding: 0.625rem 1rem;
            background: transparent;
            border: 1px solid #EF4444;
            color: #EF4444;
            border-radius: 0.375rem;
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .hierarchical-reset-btn:hover {
            background: rgba(239, 68, 68, 0.1);
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
        }

        /* ===== ANCIEN CSS DROPDOWN (non utilisé) ===== */
        /* Bouton principal Filtres */
        .filter-dropdown-button {
            position: relative;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1rem;
            background: transparent;
            border: 1px solid #FFD700;
            color: #FFD700;
            border-radius: 0.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
            overflow: hidden;
        }

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

        .filter-dropdown-button:hover::before {
            left: 100%;
        }

        .filter-dropdown-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
        }

        .filter-badge-count {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 1.25rem;
            height: 1.25rem;
            padding: 0 0.25rem;
            background: #FF4444;
            color: white;
            font-size: 0.75rem;
            font-weight: 600;
            border-radius: 9999px;
        }

        .filter-dropdown-chevron {
            transition: transform 0.3s ease;
        }

        .filter-dropdown-chevron.open {
            transform: rotate(180deg);
        }

        /* Dropdown container */
        .filter-dropdown-container {
            position: absolute;
            top: calc(100% + 0.5rem);
            left: 0;
            width: 20rem;
            max-width: calc(100vw - 2rem);
            background: rgba(22, 27, 34, 0.95);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 0.5rem;
            padding: 1rem;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
            z-index: 1000;
            animation: scale-in 0.4s ease-out;
        }

        /* Barre de recherche dans dropdown */
        .filter-search-wrapper {
            position: relative;
            margin-bottom: 1rem;
        }

        .filter-search-icon {
            position: absolute;
            left: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
            width: 1rem;
            height: 1rem;
            color: var(--text-secondary);
            pointer-events: none;
        }

        .filter-search-input {
            width: 100%;
            padding: 0.5rem 1rem 0.5rem 2.5rem;
            background: var(--bg-main);
            border: 1px solid var(--border-color);
            color: var(--text-primary);
            border-radius: 0.5rem;
            font-size: 0.875rem;
            transition: all 0.2s ease;
        }

        .filter-search-input:focus {
            outline: none;
            border-color: #FFD700;
            box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.1);
        }

        .filter-search-input::placeholder {
            color: var(--text-secondary);
            opacity: 0.6;
        }

        /* Liste des options */
        .filter-options-list {
            max-height: 16rem;
            overflow-y: auto;
            margin-bottom: 0;
        }

        .filter-options-list::-webkit-scrollbar {
            width: 6px;
        }

        .filter-options-list::-webkit-scrollbar-track {
            background: transparent;
        }

        .filter-options-list::-webkit-scrollbar-thumb {
            background-color: var(--border-color);
            border-radius: 3px;
        }

        .filter-options-list::-webkit-scrollbar-thumb:hover {
            background-color: #FFD700;
        }

        /* Option individuelle */
        .filter-option-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.75rem;
            border-radius: 0.5rem;
            cursor: pointer;
            transition: all 0.2s ease;
            margin-bottom: 0.5rem;
        }

        .filter-option-item:hover {
            background: rgba(255, 255, 255, 0.05);
        }

        .filter-option-item.selected {
            background: rgba(255, 215, 0, 0.1);
            border: 1px solid #FFD700;
            box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
        }

        .filter-option-content {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex: 1;
        }

        .filter-option-icon {
            font-size: 1.125rem;
            width: 1.5rem;
            height: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .filter-option-text {
            flex: 1;
        }

        .filter-option-label {
            font-weight: 500;
            color: var(--text-primary);
            font-size: 0.875rem;
        }

        .filter-option-count {
            font-size: 0.75rem;
            color: var(--text-secondary);
        }

        .filter-option-check {
            width: 1rem;
            height: 1rem;
            color: #FFD700;
        }

        /* Footer actions */
        .filter-dropdown-footer {
            border-top: 1px solid var(--border-color);
            padding-top: 1rem;
            margin-top: 1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .filter-clear-btn {
            font-size: 0.75rem;
            color: #FF4444;
            background: none;
            border: none;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .filter-clear-btn:hover {
            text-decoration: underline;
        }

        .filter-apply-btn {
            position: relative;
            padding: 0.375rem 0.75rem;
            background: transparent;
            border: 1px solid #FFD700;
            color: #FFD700;
            border-radius: 0.25rem;
            font-size: 0.75rem;
            cursor: pointer;
            transition: all 0.2s ease;
            overflow: hidden;
        }

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

        .filter-apply-btn:hover::before {
            left: 100%;
        }

        .filter-apply-btn:hover {
            background: rgba(255, 215, 0, 0.1);
            transform: translateY(-1px);
        }

        /* Loading Modal Styles */
        #loading-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(13, 17, 23, 0.98);
            backdrop-filter: blur(10px);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 1;
            transition: opacity 0.3s ease-out;
        }

        #loading-modal.fade-out {
            opacity: 0;
            pointer-events: none;
        }

        .loading-content {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2rem;
        }

        .loading-logo-container {
            position: relative;
            width: 120px;
            height: 120px;
        }

        .loading-logo {
            width: 100%;
            height: 100%;
            animation: float 3s ease-in-out infinite;
        }

        .loading-ring {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 140px;
            height: 140px;
            border: 3px solid transparent;
            border-top-color: #FFD700;
            border-right-color: #FFD700;
            border-radius: 50%;
            animation: spin 1.5s linear infinite;
        }

        .loading-ring-2 {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 160px;
            height: 160px;
            border: 2px solid transparent;
            border-bottom-color: rgba(255, 215, 0, 0.4);
            border-left-color: rgba(255, 215, 0, 0.4);
            border-radius: 50%;
            animation: spin-reverse 2s linear infinite;
        }

        .loading-title {
            font-size: 2.5rem;
            font-weight: 700;
            font-family: 'Playfair Display', serif;
            letter-spacing: -0.02em;
            line-height: 1.1;
            color: #FFD700;
            background: linear-gradient(135deg, #D4AF37 0%, #FFD700 25%, #FFEC8B 50%, #FFD700 75%, #D4AF37 100%);
            background-size: 200% 200%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 0.5rem;
            animation: shimmer-loading 3s ease-in-out infinite;
            text-shadow: 0 0 20px rgba(212, 175, 55, 0.3),
                        0 0 40px rgba(212, 175, 55, 0.2),
                        0 0 60px rgba(212, 175, 55, 0.1);
        }

        .loading-subtitle {
            font-size: 0.75rem;
            font-weight: 300;
            font-family: 'Inter', sans-serif;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: #D4AF37;
        }

        @keyframes shimmer-loading {
            0% {
                background-position: -200% center;
            }
            50% {
                background-position: 200% center;
            }
            100% {
                background-position: -200% center;
            }
        }

        .loading-dots {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 1rem;
        }

        .loading-dot {
            width: 10px;
            height: 10px;
            background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
            animation: pulse-dot 1.4s ease-in-out infinite;
        }

        .loading-dot:nth-child(2) {
            animation-delay: 0.2s;
        }

        .loading-dot:nth-child(3) {
            animation-delay: 0.4s;
        }

        .loading-message {
            margin-top: 1rem;
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.6);
            font-weight: 300;
            letter-spacing: 0.05em;
        }

        @keyframes spin {
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            100% { transform: translate(-50%, -50%) rotate(360deg); }
        }

        @keyframes spin-reverse {
            0% { transform: translate(-50%, -50%) rotate(360deg); }
            100% { transform: translate(-50%, -50%) rotate(0deg); }
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }

        @keyframes pulse-dot {
            0%, 100% { opacity: 0.3; transform: scale(0.8); }
            50% { opacity: 1; transform: scale(1.2); }
        }
/* CAROUSEL ANIMATION */
.carousel-track {
    display: flex;
    gap: 1.5rem;
    width: 100%; /* Ensure it takes full width to allow scrolling */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
}

.carousel-track::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

.carousel-card {
    transform-style: preserve-3d;
    perspective: 1000px;
    flex-shrink: 0; /* Prevent shrinking */
}

@keyframes shine {
    from {
        transform: translateX(-100%) skewX(-15deg);
    }
    to {
        transform: translateX(200%) skewX(-15deg);
    }
}

.group:hover .group-hover\:animate-shine {
    animation: shine 0.75s ease-in-out;
}