/*==============================================
  MANTOX BLOG - DARK THEME
  File: DarkTheme.css
  Descrizione: Tema scuro completo con nuovo design articolo
  Versione: 3.0 - Complete Dark Experience
==============================================*/

/*----------------------------------------------
  1. DARK THEME VARIABLES
----------------------------------------------*/
[data-theme="dark"] {
    /* === CORE COLOR PALETTE === */
    --theme-bg-primary: #0f0f0f;
    --theme-bg-secondary: #1a1a1a;
    --theme-bg-card: #242424;
    /* === TEXT COLORS === */
    --theme-text-primary: #ffffff;
    --theme-text-secondary: #b3b3b3;
    --theme-text-muted: #666666;
    /* === ACCENT COLORS === */
    --theme-accent-primary: #4f46e5;
    --theme-accent-secondary: #06b6d4;
    /* === UI ELEMENTS === */
    --theme-border-color: #333333;
    /* === SHADOWS & DEPTH === */
    --theme-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    --theme-shadow-hover: 0 10px 25px -3px rgba(0, 0, 0, 0.4);
    --theme-shadow-card: 0 8px 25px rgba(0, 0, 0, 0.15);
    --theme-shadow-button: 0 6px 20px rgba(79, 70, 229, 0.5);
    /* === GRADIENTS === */
    --theme-gradient-primary: linear-gradient(135deg, #0f0f0f 0%, #1a1a2e 100%);
    --theme-gradient-card: linear-gradient(135deg, rgba(79, 70, 229, 0.05), rgba(6, 182, 212, 0.05));
    --theme-gradient-hero: linear-gradient(135deg, rgba(79, 70, 229, 0.15) 0%, rgba(6, 182, 212, 0.15) 35%, rgba(15, 15, 15, 0.8) 70%, var(--theme-bg-primary) 100%);
    /* === OVERLAYS & TRANSPARENCY === */
    --theme-overlay-light: rgba(0, 0, 0, 0.2);
    --theme-overlay-medium: rgba(0, 0, 0, 0.4);
    --theme-overlay-heavy: rgba(0, 0, 0, 0.7);
    --theme-header-bg: rgba(26, 26, 26, 0.95);
    --theme-filters-bg: rgba(26, 26, 26, 0.9);
    --theme-footer-bg: rgba(15, 15, 15, 0.95);
    /* === ARTICLE SPECIFIC COLORS === */
    --theme-article-hero-bg: linear-gradient(135deg, rgba(79, 70, 229, 0.08) 0%, rgba(6, 182, 212, 0.08) 100%);
    --theme-article-content-bg: rgba(36, 36, 36, 0.8);
    --theme-article-expert-bg: rgba(79, 70, 229, 0.1);
    --theme-article-metadata-bg: rgba(26, 26, 26, 0.9);
    --theme-neon-glow: rgba(79, 70, 229, 0.6);
    --theme-neon-secondary: rgba(6, 182, 212, 0.6);
}

    /*----------------------------------------------
  2. GLOBAL BACKGROUND & BODY - STARFIELD
----------------------------------------------*/
    [data-theme="dark"] body {
        background: radial-gradient(3px 3px at 15% 20%, #4f46e5, transparent), radial-gradient(2px 2px at 35% 60%, #06b6d4, transparent), radial-gradient(1px 1px at 70% 30%, rgba(255,255,255,0.6), transparent), radial-gradient(2px 2px at 85% 80%, #4f46e5, transparent), radial-gradient(1px 1px at 25% 90%, #06b6d4, transparent), linear-gradient(135deg, #0f0f0f 0%, #1a1a2e 50%, #0f0f0f 100%);
        background-size: 150px 150px, 200px 200px, 100px 100px, 180px 180px, 120px 120px, 100% 100%;
        animation: starfallIntense 18s linear infinite;
    }

@keyframes starfallIntense {
    0% {
        background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
        opacity: 0.8;
    }

    50% {
        opacity: 1;
    }

    100% {
        background-position: 150px 150px, -200px 200px, 100px -100px, 180px -180px, -120px 120px, 0% 0%;
        opacity: 0.8;
    }
}

/*----------------------------------------------
  3. HEADER SYSTEM - DARK THEME
----------------------------------------------*/
/*----------------------------------------------
  EMERGENCY FIX - HEADER STICKY DARK THEME
----------------------------------------------*/
[data-theme="dark"] .header {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: rgba(26, 26, 26) !important;
    overflow: hidden !important;
}


    [data-theme="dark"] .header::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: conic-gradient(from 0deg, transparent 0deg, rgba(79, 70, 229, 0.1) 60deg, transparent 120deg, rgba(6, 182, 212, 0.08) 180deg, transparent 240deg, rgba(79, 70, 229, 0.05) 300deg, transparent 360deg );
        animation: aurora 20s linear infinite;
        pointer-events: none;
        z-index: -1;
    }

@keyframes aurora {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


@keyframes particleMove {
    0% {
        background-position: 0% 0%, 100% 0%, 0% 0%;
    }

    100% {
        background-position: 100% 0%, 0% 0%, 0% 0%;
    }
}


[data-theme="dark"] .brand-name {
    color: var(--theme-text-muted);
}

    [data-theme="dark"] .brand-name::before {
        opacity: 0.8;
    }

[data-theme="dark"] .header-title {
    background: rgba(79, 70, 229, 0.05);
    border: 1px solid var(--theme-border-color);
}

    [data-theme="dark"] .header-title h1 {
        background: linear-gradient(135deg, var(--theme-text-primary), var(--theme-accent-primary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

[data-theme="dark"] .special-number {
    background: linear-gradient(135deg, var(--theme-accent-primary), var(--theme-accent-secondary), #ff6b6b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

    [data-theme="dark"] .special-number::before {
        background: linear-gradient(135deg, var(--theme-accent-primary), var(--theme-accent-secondary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        opacity: 0.25;
    }

/*----------------------------------------------
  4. NAVIGATION CONTROLS - DARK THEME
----------------------------------------------*/
[data-theme="dark"] .language-switch {
    background: var(--theme-bg-card);
    border: 1px solid var(--theme-border-color);
}

[data-theme="dark"] .lang-btn {
    color: var(--theme-text-secondary);
}

    [data-theme="dark"] .lang-btn.active {
        background: var(--theme-accent-primary);
        color: white;
    }

    [data-theme="dark"] .lang-btn:hover:not(.active) {
        background: rgba(255, 255, 255, 0.1);
        color: var(--theme-text-primary);
    }

[data-theme="dark"] .theme-toggle-btn:hover {
    background: rgba(79, 70, 229, 0.1);
}

[data-theme="dark"] .toggle-track {
    background: var(--theme-bg-card);
    border: 2px solid var(--theme-border-color);
}

[data-theme="dark"] .toggle-thumb {
    background: linear-gradient(135deg, var(--theme-accent-primary), var(--theme-accent-secondary));
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .theme-toggle-btn:hover .toggle-thumb {
    box-shadow: 0 4px 8px rgba(79, 70, 229, 0.4);
}

/*----------------------------------------------
  5. BUTTONS - DARK THEME
----------------------------------------------*/
[data-theme="dark"] .btn-primary:hover {
    box-shadow: var(--theme-shadow-button);
}

[data-theme="dark"] .btn-secondary {
    color: var(--theme-accent-primary);
    border-color: var(--theme-accent-primary);
}

    [data-theme="dark"] .btn-secondary:hover {
        background: var(--theme-accent-primary);
        color: white;
    }

[data-theme="dark"] .all-news-btn {
    color: var(--theme-accent-primary);
    border-color: var(--theme-accent-primary);
}

    [data-theme="dark"] .all-news-btn:hover {
        background: var(--theme-accent-primary);
        color: white;
        box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);
    }

[data-theme="dark"] .read-more-btn-centered:hover {
    box-shadow: var(--theme-shadow-button);
}

[data-theme="dark"] .clear-filters-btn,
[data-theme="dark"] .load-more-btn {
    color: var(--theme-accent-primary);
    border-color: var(--theme-accent-primary);
}

    [data-theme="dark"] .clear-filters-btn:hover,
    [data-theme="dark"] .load-more-btn:hover {
        background: var(--theme-accent-primary);
        color: white;
    }

/*----------------------------------------------
  6. FORM ELEMENTS - DARK THEME
----------------------------------------------*/

/* Select dropdown specifico per dark theme */
[data-theme="dark"] .filter-select,
[data-theme="dark"] .category-select-modern,
[data-theme="dark"] select {
    background: var(--theme-bg-card);
    border: 2px solid var(--theme-border-color);
    color: var(--theme-text-primary);
    border-radius: var(--border-radius);
}

    [data-theme="dark"] .filter-select:focus,
    [data-theme="dark"] .category-select-modern:focus {
        border-color: var(--theme-accent-primary);
        background: var(--theme-bg-secondary);
        box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.08);
    }

    /* Option elements nel dropdown */
    [data-theme="dark"] .filter-select option,
    [data-theme="dark"] .category-select-modern option,
    [data-theme="dark"] select option {
        background: var(--theme-bg-card);
        color: var(--theme-text-primary);
        border: none;
    }

        /* Hover sulle opzioni */
        [data-theme="dark"] .filter-select option:hover,
        [data-theme="dark"] .category-select-modern option:hover {
            background: var(--theme-bg-secondary);
        }

/* Freccia del select personalizzata per dark */
[data-theme="dark"] .filter-select,
[data-theme="dark"] .category-select-modern {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 3rem;
}


/*----------------------------------------------
  7. FILTERS SECTION - DARK THEME
----------------------------------------------*/
[data-theme="dark"] .filters-section-container {
    background: var(--theme-filters-bg);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--theme-border-color);
}

[data-theme="dark"] .results-info {
    color: var(--theme-text-muted);
}
/* Nel DarkTheme.css - Solo aspetto normale, mantieni il focus esistente */
[data-theme="dark"] .search-input,
[data-theme="dark"] .search-input-modern {
    background: rgba(79, 70, 229, 0.08); /* Leggero tint blu */
    border: 2px solid rgba(79, 70, 229, 0.25); /* Bordo più visibile */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), /* Highlight sottile */
    0 2px 4px rgba(0, 0, 0, 0.1); /* Ombra leggera */
}

/* Il tuo effetto focus esistente rimane invariato! */


/*----------------------------------------------
  8. CARDS SYSTEM - DARK THEME
----------------------------------------------*/
[data-theme="dark"] .news-card,
[data-theme="dark"] .card-base {
    background: var(--theme-bg-card);
    border: 1px solid var(--theme-border-color);
    box-shadow: var(--theme-shadow);
}

    [data-theme="dark"] .news-card:hover,
    [data-theme="dark"] .card-base:hover {
        box-shadow: var(--theme-shadow-hover);
        border-color: var(--theme-accent-primary);
    }

[data-theme="dark"] .card-meta {
    color: var(--theme-text-muted);
}

[data-theme="dark"] .card-title {
    color: var(--theme-text-primary);
}

[data-theme="dark"] .card-excerpt {
    color: var(--theme-text-secondary);
}

[data-theme="dark"] .category-badge {
    background: rgba(79, 70, 229, 0.2);
    color: var(--theme-accent-primary);
    border: 1px solid rgba(79, 70, 229, 0.3);
}

[data-theme="dark"] .tag {
    background: rgba(6, 182, 212, 0.2);
    color: var(--theme-accent-secondary);
}

/*----------------------------------------------
  9. NEWS & ARTICLE PAGES - DARK THEME
----------------------------------------------*/
[data-theme="dark"] .news-page,
[data-theme="dark"] .article-page {
    background: var(--theme-gradient-primary);
    min-height: 100vh;
}

[data-theme="dark"] .news-header {
    background: var(--theme-header-bg);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--theme-border-color);
}

/*----------------------------------------------
  10. NEW ARTICLE DESIGN - DARK THEME
----------------------------------------------*/

/* === ARTICLE HERO SECTION === */
[data-theme="dark"] .article-hero {
    background: var(--theme-article-hero-bg);
    border: 1px solid rgba(79, 70, 229, 0.2);
    border-radius: 20px;
    padding: 3rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

    [data-theme="dark"] .article-hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at 20% 50%, rgba(79, 70, 229, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 50%, rgba(6, 182, 212, 0.1) 0%, transparent 50%);
        pointer-events: none;
        z-index: -1;
    }

[data-theme="dark"] .hero-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

[data-theme="dark"] .publish-date {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-size: 1.3rem;
    font-weight: 600;
    justify-content: center;
    color: var(--theme-text-primary);
}

    [data-theme="dark"] .publish-date i {
        font-size: 1.4rem;
    }


[data-theme="dark"] .category-badge {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(6, 182, 212, 0.1));
    color: var(--theme-accent-secondary);
    border: 1px solid rgba(6, 182, 212, 0.4);
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

[data-theme="dark"] .article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1.5rem;
}

[data-theme="dark"] .tag-chip {
    background: rgba(26, 26, 26, 0.8);
    color: var(--theme-accent-secondary);
    padding: 0.5rem 1rem;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid rgba(6, 182, 212, 0.3);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

    [data-theme="dark"] .tag-chip:hover {
        background: rgba(6, 182, 212, 0.1);
        border-color: var(--theme-accent-secondary);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(6, 182, 212, 0.2);
    }

    [data-theme="dark"] .tag-chip i {
        font-size: 0.8rem;
        opacity: 0.8;
    }

/* === ARTICLE CONTENT SECTION === */
[data-theme="dark"] .article-content-wrapper {
    background: var(--theme-article-content-bg);
    border: 1px solid var(--theme-border-color);
    border-radius: 16px;
    margin-bottom: 2rem;
    backdrop-filter: blur(15px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .article-content {
    padding: 3rem;
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--theme-text-secondary);
}

    [data-theme="dark"] .article-content p {
        margin-bottom: 1.8rem;
        color: var(--theme-text-secondary);
    }

        [data-theme="dark"] .article-content p:first-child {
            font-size: 1.3rem;
            color: var(--theme-text-primary);
            font-weight: 500;
            line-height: 1.6;
            margin-bottom: 2rem;
            position: relative;
            padding-left: 1rem;
            border-left: 3px solid var(--theme-accent-primary);
        }

    [data-theme="dark"] .article-content h2,
    [data-theme="dark"] .article-content h3,
    [data-theme="dark"] .article-content h4 {
        color: var(--theme-text-primary);
        margin: 2.5rem 0 1.2rem 0;
    }

    [data-theme="dark"] .article-content strong {
        color: var(--theme-text-primary);
        font-weight: 600;
    }

    [data-theme="dark"] .article-content a {
        color: var(--theme-accent-secondary);
        text-decoration: none;
        border-bottom: 1px solid rgba(6, 182, 212, 0.3);
        transition: all 0.3s ease;
    }

        [data-theme="dark"] .article-content a:hover {
            color: var(--theme-accent-primary);
            border-bottom-color: var(--theme-accent-primary);
        }

/* === EXPERT SECTION - DARK CYBERPUNK === */
[data-theme="dark"] .expert-section {
    background: var(--theme-article-expert-bg);
    border: 2px solid rgba(79, 70, 229, 0.3);
    border-radius: 16px;
    margin: 3rem 0;
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 32px rgba(79, 70, 229, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

    [data-theme="dark"] .expert-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--theme-accent-primary), var(--theme-accent-secondary), transparent);
        animation: expertGlow 3s ease-in-out infinite;
    }

[data-theme="dark"] .expert-header {
    padding: 2rem 3rem 1rem;
    border-bottom: 1px solid rgba(79, 70, 229, 0.2);
    background: rgba(79, 70, 229, 0.05);
}

    [data-theme="dark"] .expert-header h3 {
        color: var(--theme-accent-primary);
        margin: 0;
        font-size: 1.4rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    [data-theme="dark"] .expert-header i {
        font-size: 1.6rem;
        animation: atomSpin 4s linear infinite;
    }

[data-theme="dark"] .expert-content {
    padding: 2rem 3rem;
    background: rgba(36, 36, 36, 0.6);
    font-size: 1.05rem;
    line-height: 1.7;
}

    [data-theme="dark"] .expert-content p {
        margin-bottom: 1.5rem;
        color: var(--theme-text-secondary);
    }

        [data-theme="dark"] .expert-content p:first-child {
            color: var(--theme-text-primary);
            font-weight: 500;
        }

/* === METADATA SECTION === */
[data-theme="dark"] .article-metadata {
    background: var(--theme-article-metadata-bg);
    border: 1px solid var(--theme-border-color);
    border-radius: 16px;
    padding: 2rem;
    margin: 2rem 0;
    backdrop-filter: blur(15px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .authors-section {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(79, 70, 229, 0.2);
}

[data-theme="dark"] .section-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--theme-text-primary);
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

    [data-theme="dark"] .section-label i {
        color: var(--theme-accent-primary);
        font-size: 1.2rem;
    }

[data-theme="dark"] .authors-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

[data-theme="dark"] .author-badge {
    background: rgba(79, 70, 229, 0.1);
    color: var(--theme-text-primary);
    padding: 0.6rem 1.2rem;
    border-radius: 25px;
    font-size: 0.95rem;
    font-weight: 500;
    border: 1px solid rgba(79, 70, 229, 0.3);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

    [data-theme="dark"] .author-badge:hover {
        background: rgba(79, 70, 229, 0.2);
        border-color: var(--theme-accent-primary);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
    }

    [data-theme="dark"] .author-badge i {
        color: var(--theme-accent-primary);
        font-size: 1rem;
    }

/* === SOURCE SECTION CON LABEL E DATA === */
[data-theme="dark"] .source-section {
    margin-top: 1.5rem;
}

[data-theme="dark"] .source-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--theme-text-primary);
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

    [data-theme="dark"] .source-label i {
        color: var(--theme-accent-primary);
        font-size: 1.2rem;
    }

/* Info fonte con data */
[data-theme="dark"] .source-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(79, 70, 229, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(79, 70, 229, 0.2);
}

[data-theme="dark"] .source-name {
    font-weight: 600;
    color: var(--theme-text-primary);
    font-size: 1rem;
}

[data-theme="dark"] .source-date {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--theme-text-secondary);
    font-size: 0.9rem;
}

    [data-theme="dark"] .source-date i {
        color: var(--theme-accent-secondary);
        font-size: 0.85rem;
    }


[data-theme="dark"] .source-link-dark {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(79, 70, 229, 0.08);
    border: 1px solid rgba(79, 70, 229, 0.2);
    border-radius: 8px;
    padding: 0.875rem 1.25rem;
    text-decoration: none;
    color: var(--theme-text-primary);
    transition: all 0.3s ease;
    font-size: 0.95rem;
}

    [data-theme="dark"] .source-link-dark:hover {
        background: rgba(79, 70, 229, 0.15);
        border-color: var(--theme-accent-primary);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
    }

[data-theme="dark"] .link-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

[data-theme="dark"] .link-icon {
    width: 32px;
    height: 32px;
    background: var(--theme-accent-primary);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.9rem;
    flex-shrink: 0;
}

[data-theme="dark"] .link-title {
    font-weight: 500;
    color: var(--theme-text-primary);
}

[data-theme="dark"] .link-arrow {
    color: var(--theme-accent-primary);
    font-size: 1rem;
    transition: transform 0.3s ease;
}

[data-theme="dark"] .source-link-dark:hover .link-arrow {
    transform: translateX(3px);
}

[data-theme="dark"] .metadata-label {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--theme-text-primary);
    font-weight: 700;
    font-size: 1.4rem;
    margin-bottom: 2rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(6, 182, 212, 0.1));
    border-radius: 12px;
    border: 2px solid rgba(79, 70, 229, 0.3);
    position: relative;
    overflow: hidden;
}

    [data-theme="dark"] .metadata-label::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--theme-accent-primary), var(--theme-accent-secondary));
    }

    [data-theme="dark"] .metadata-label i {
        color: var(--theme-accent-primary);
        font-size: 1.6rem;
        padding: 0.5rem;
        background: rgba(79, 70, 229, 0.2);
        border-radius: 8px;
    }


[data-theme="dark"] .source-date-section {
    margin-bottom: 1.5rem;
}

[data-theme="dark"] .source-date-value {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--theme-text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    background: rgba(79, 70, 229, 0.1);
    padding: 0.75rem 1.25rem;
    border-radius: 25px;
    border: 1px solid rgba(79, 70, 229, 0.3);
    justify-content: center;
    width: fit-content;
    margin: 0 auto;
}

    [data-theme="dark"] .source-date-value::before {
        content: '📅';
        font-size: 1.2rem;
    }


[data-theme="dark"] .link-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

[data-theme="dark"] .link-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--theme-accent-primary), var(--theme-accent-secondary));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
}

[data-theme="dark"] .link-text {
    flex: 1;
}

[data-theme="dark"] .link-title {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin-bottom: 0.3rem;
}

[data-theme="dark"] .link-source {
    display: block;
    font-size: 0.95rem;
    color: var(--theme-text-secondary);
    opacity: 0.8;
}

[data-theme="dark"] .link-arrow {
    color: var(--theme-accent-primary);
    font-size: 1.3rem;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

[data-theme="dark"] .source-link-dark:hover .link-arrow {
    transform: translateX(8px);
    color: var(--theme-accent-secondary);
}

/* === ACTIONS SECTION === */
[data-theme="dark"] .article-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 3rem;
    padding: 2rem;
    background: rgba(26, 26, 26, 0.5);
    border-radius: 16px;
    border: 1px solid var(--theme-border-color);
    backdrop-filter: blur(10px);
}

[data-theme="dark"] .action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    min-width: 160px;
    justify-content: center;
}

    [data-theme="dark"] .action-btn.primary {
        background: linear-gradient(135deg, var(--theme-accent-primary), var(--theme-accent-secondary));
        color: white;
        border: 2px solid transparent;
    }

        [data-theme="dark"] .action-btn.primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(79, 70, 229, 0.4);
            scale: 1.05;
        }

    [data-theme="dark"] .action-btn.secondary {
        background: transparent;
        color: var(--theme-accent-primary);
        border: 2px solid var(--theme-accent-primary);
    }

        [data-theme="dark"] .action-btn.secondary:hover {
            background: var(--theme-accent-primary);
            color: white;
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(79, 70, 229, 0.3);
        }

/*----------------------------------------------
  11. LOADING & STATE ELEMENTS - DARK THEME
----------------------------------------------*/
[data-theme="dark"] .loading-spinner {
    border: 4px solid var(--theme-border-color);
    border-top: 4px solid var(--theme-accent-primary);
}

[data-theme="dark"] .loading-container p,
[data-theme="dark"] .loading-section p {
    color: var(--theme-text-secondary);
}

[data-theme="dark"] .no-results {
    color: var(--theme-text-secondary);
}

    [data-theme="dark"] .no-results h2,
    [data-theme="dark"] .no-results h3 {
        color: var(--theme-text-primary);
    }

    [data-theme="dark"] .no-results p {
        color: var(--theme-text-secondary);
    }

/*----------------------------------------------
  12. FOOTER - DARK THEME
----------------------------------------------*/
[data-theme="dark"] .minimal-footer {
    background: linear-gradient(0deg, rgba(15, 15, 15, 0.95) 0%, /* Quasi nero in basso */
    rgba(26, 26, 26, 0.85) 100% /* Più chiaro in alto */
    );
}

[data-theme="dark"] .footer-brand .brand-name {
    color: var(--theme-accent-primary);
}

[data-theme="dark"] .brand-tagline {
    color: var(--theme-text-muted);
}

[data-theme="dark"] .footer-links a {
    color: var(--theme-text-secondary);
}

    [data-theme="dark"] .footer-links a:hover {
        color: var(--theme-accent-primary);
    }

    [data-theme="dark"] .footer-links a::after {
        background: var(--theme-accent-primary);
    }

[data-theme="dark"] .footer-copyright {
    color: var(--theme-text-muted);
}

/*----------------------------------------------
  13. LOGO INTERACTIVE STATES - DARK THEME
----------------------------------------------*/
[data-theme="dark"] .logo-link {
    color: inherit;
}

    [data-theme="dark"] .logo-link:hover {
        color: inherit;
    }

        [data-theme="dark"] .logo-link:hover .logo {
            background: linear-gradient(135deg, var(--theme-accent-secondary), var(--theme-accent-primary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        [data-theme="dark"] .logo-link:hover .brand-name {
            color: var(--theme-text-secondary);
            transform: translateX(2px);
        }

/*----------------------------------------------
  14. ARTICLE ANIMATIONS - DARK THEME
----------------------------------------------*/
@keyframes expertGlow {
    0%, 100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

@keyframes atomSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes neonPulse {
    0%, 100% {
        box-shadow: 0 0 5px var(--theme-neon-glow), 0 0 10px var(--theme-neon-glow), 0 0 20px var(--theme-neon-glow);
    }

    50% {
        box-shadow: 0 0 10px var(--theme-neon-glow), 0 0 20px var(--theme-neon-glow), 0 0 40px var(--theme-neon-glow);
    }
}

/*----------------------------------------------
  15. RESPONSIVE DARK THEME ADJUSTMENTS
----------------------------------------------*/
@media (max-width: 768px) {
    /* Header adjustments */
    [data-theme="dark"] .header {
        padding: 0.8rem 0;
    }

    /* Filters adjustments */
    [data-theme="dark"] .filters-section-container {
        background: rgba(26, 26, 26, 0.95);
    }

    /* Article responsive */
    [data-theme="dark"] .article-hero {
        padding: 2rem 1.5rem;
        margin-bottom: 1.5rem;
    }

    [data-theme="dark"] .hero-meta {
        flex-direction: column;
        gap: 1rem;
    }

    [data-theme="dark"] .article-content {
        padding: 2rem 1.5rem;
        font-size: 1rem;
    }

    [data-theme="dark"] .expert-header,
    [data-theme="dark"] .expert-content {
        padding: 1.5rem;
    }

    [data-theme="dark"] .article-metadata {
        padding: 1.5rem;
    }

    [data-theme="dark"] .source-link-dark {
        padding: 1.2rem;
    }

    [data-theme="dark"] .link-content {
        gap: 0.75rem;
    }

    [data-theme="dark"] .link-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    [data-theme="dark"] .article-actions {
        flex-direction: column;
        padding: 1.5rem;
    }

    [data-theme="dark"] .action-btn {
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
    }

    /* Disable floating elements on mobile */
    [data-theme="dark"] .floating-element {
        display: none;
    }

    /* Card adjustments */
    [data-theme="dark"] .news-card {
        margin-bottom: 0;
    }
}

@media (max-width: 480px) {
    /* Ultra-compact mobile adjustments */
    [data-theme="dark"] .filters-section-container {
        background: rgba(26, 26, 26, 0.98);
    }

    [data-theme="dark"] .article-hero {
        padding: 1.5rem 1rem;
    }

    [data-theme="dark"] .article-content {
        padding: 1.5rem 1rem;
    }

    [data-theme="dark"] .expert-header,
    [data-theme="dark"] .expert-content {
        padding: 1rem;
    }

    [data-theme="dark"] .article-metadata {
        padding: 1rem;
    }
}

/*----------------------------------------------
  16. ACCESSIBILITY - DARK THEME
----------------------------------------------*/
/* High contrast mode adjustments */
@media (prefers-contrast: high) {
    [data-theme="dark"] {
        --theme-border-color: #666666;
        --theme-text-secondary: #cccccc;
    }
}

/* Focus indicators for dark theme */
[data-theme="dark"] *:focus-visible {
    outline: 2px solid var(--theme-accent-primary);
    outline-offset: 2px;
}

/* Ensure sufficient contrast for links */
[data-theme="dark"] a:not([class]) {
    color: var(--theme-accent-secondary);
}

    [data-theme="dark"] a:not([class]):hover {
        color: var(--theme-accent-primary);
    }

/*----------------------------------------------
  17. PRINT STYLES - DARK THEME OVERRIDE
----------------------------------------------*/
@media print {
    [data-theme="dark"] {
        --theme-bg-primary: #ffffff !important;
        --theme-bg-secondary: #ffffff !important;
        --theme-bg-card: #ffffff !important;
        --theme-text-primary: #000000 !important;
        --theme-text-secondary: #333333 !important;
        --theme-text-muted: #666666 !important;
    }

        [data-theme="dark"] body {
            background: white !important;
            color: black !important;
        }
}
/*----------------------------------------------
  18. ARTICLE PAGE - DARK THEME OVERRIDES
----------------------------------------------*/

/* Animated background fix for dark theme */
[data-theme="dark"] .news-page,
[data-theme="dark"] .article-page {
    background: radial-gradient(3px 3px at 15% 20%, rgba(79, 70, 229, 0.8), transparent), radial-gradient(2px 2px at 35% 60%, rgba(6, 182, 212, 0.6), transparent), radial-gradient(1px 1px at 70% 30%, rgba(255,255,255,0.4), transparent), radial-gradient(2px 2px at 85% 80%, rgba(79, 70, 229, 0.7), transparent), radial-gradient(1px 1px at 25% 90%, rgba(6, 182, 212, 0.5), transparent), linear-gradient(135deg, #0f0f0f 0%, #1a1a2e 50%, #0f0f0f 100%);
    background-size: 150px 150px, 200px 200px, 100px 100px, 180px 180px, 120px 120px, 100% 100%;
    animation: starfallIntense 20s linear infinite;
    min-height: 100vh;
}

@keyframes starfallIntense {
    0% {
        background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }

    100% {
        background-position: 150px 150px, -200px 200px, 100px -100px, 180px -180px, -120px 120px, 0% 0%;
    }
}

/* Expert card specific styling */
[data-theme="dark"] .expert-card {
    border-color: rgba(79, 70, 229, 0.3);
}

    [data-theme="dark"] .expert-card .card-header-minimal {
        background: rgba(79, 70, 229, 0.05);
    }

/* Source card specific styling */
[data-theme="dark"] .source-card {
    border-color: rgba(6, 182, 212, 0.3);
}

    [data-theme="dark"] .source-card .card-header-minimal {
        background: rgba(6, 182, 212, 0.05);
    }

/* Button hover shadows for dark theme */
[data-theme="dark"] .action-btn-compact.primary:hover {
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);
}

[data-theme="dark"] .action-btn-compact.secondary:hover {
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.news-page {
    padding-top: calc(120px - 30px); /* 120px = offset dall'header, 80px = altezza pannello */
}


[data-theme="dark"] .filters-section-modern {
    position: fixed;
    left: 0;
    width: 100%;
    padding: 1rem;
    border-radius: 0;
    /* Nessun riempimento pieno */
    background-color: transparent;
    /* Pattern esagonale medio */
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='36' height='42' viewBox='0 0 36 42'>\
<polygon points='18,0 36,10.5 36,31.5 18,42 0,31.5 0,10.5' fill='none' stroke='rgba(59,130,246,0.6)' stroke-width='1'/>\
</svg>");
    background-size: 36px 42px;
    background-repeat: repeat;
    /* Nessun blur globale sui buchi */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Keyframes per movimento lento */
@keyframes moleculeMove {
    0% {
        background-position: 0 0, 40px 23px, 0 0, 0 0, 0 0, 0 0;
    }

    100% {
        background-position: 80px 80px, 120px 103px, 80px 80px, 80px 80px, 80px 80px, 0 0;
    }
}


/*----------------------------------------------
  19. PROJECT PAGE
----------------------------------------------*/

[data-theme="dark"] .document-page {
    background: linear-gradient(135deg, #0f0f0f 0%, #1a1a2e 50%, #16213e 100%);
    font-family: 'Georgia', 'Times New Roman', serif;
}

[data-theme="dark"] .document-container {
    background: var(--theme-bg-card);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
}

/* Header con gradiente viola-blu dark */
[data-theme="dark"] .
{
    background: linear-gradient(135deg, #2d1b69 0%, #1a365d 100%);
    color: white;
}

[data-theme="dark"] .document-title {
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .document-subtitle {
    color: rgba(255, 255, 255, 0.9);
}

/* Content area dark */
[data-theme="dark"] .document-content {
    background: var(--theme-bg-card);
    color: var(--theme-text-primary);
}

/* TOC dark */
[data-theme="dark"] .document-toc {
    background: var(--theme-bg-secondary);
    border-left: 5px solid var(--theme-accent-primary);
}

    [data-theme="dark"] .document-toc h2 {
        color: var(--theme-text-primary);
    }

    [data-theme="dark"] .document-toc a {
        color: var(--theme-accent-primary);
    }

        [data-theme="dark"] .document-toc a:hover {
            color: var(--theme-accent-secondary);
        }

/* Abstract dark - Gradiente arancione scuro */
[data-theme="dark"] .document-abstract {
    background: linear-gradient(135deg, #2d1b0f 0%, #3d2914 100%);
    border-left: 5px solid #ed8936;
}

    [data-theme="dark"] .document-abstract h2 {
        color: #ffa726;
    }

    [data-theme="dark"] .document-abstract p {
        color: #ffcc80;
    }

/* Capitoli dark */
[data-theme="dark"] .document-chapter {
    border-bottom: 1px solid var(--theme-border-color);
}

    [data-theme="dark"] .document-chapter h2 {
        color: var(--theme-text-primary);
        border-bottom: 3px solid var(--theme-accent-primary);
    }

    [data-theme="dark"] .document-chapter h3 {
        color: var(--theme-text-primary);
        border-left: 4px solid var(--theme-accent-primary);
    }

    [data-theme="dark"] .document-chapter p {
        color: var(--theme-text-secondary);
    }

/*----------------------------------------------
  SISTEMA C - BOX COLORATI DARK VERSION
----------------------------------------------*/

/* 1. HIGHLIGHT - Verde-azzurro neon */
[data-theme="dark"] .document-highlight {
    background: linear-gradient(120deg, #0d4f3c 0%, #1a365d 100%);
    border-left: 4px solid #4ade80;
    box-shadow: 0 4px 12px rgba(74, 222, 128, 0.2);
}

    [data-theme="dark"] .document-highlight p {
        color: #86efac;
    }

    [data-theme="dark"] .document-highlight strong {
        color: #22c55e;
        text-shadow: 0 0 8px rgba(34, 197, 94, 0.3);
    }

/* 2. NOTE/INFO - Blu neon */
[data-theme="dark"] .document-note {
    background: linear-gradient(120deg, #1e293b 0%, #0f172a 100%);
    border-left: 4px solid #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

    [data-theme="dark"] .document-note p {
        color: #93c5fd;
    }

    [data-theme="dark"] .document-note strong {
        color: #60a5fa;
        text-shadow: 0 0 8px rgba(96, 165, 250, 0.3);
    }

/* 3. WARNING - Viola neon */
[data-theme="dark"] .document-warning {
    background: linear-gradient(120deg, #2e1065 0%, #1e1b4b 100%);
    border-left: 4px solid #8b5cf6;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
}

    [data-theme="dark"] .document-warning p {
        color: #c4b5fd;
    }

    [data-theme="dark"] .document-warning strong {
        color: #a78bfa;
        text-shadow: 0 0 8px rgba(167, 139, 250, 0.3);
    }

/* 4. SUCCESS - Verde smeraldo neon */
[data-theme="dark"] .document-success {
    background: linear-gradient(120deg, #064e3b 0%, #0f2027 100%);
    border-left: 4px solid #10b981;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

    [data-theme="dark"] .document-success p {
        color: #6ee7b7;
    }

    [data-theme="dark"] .document-success strong {
        color: #34d399;
        text-shadow: 0 0 8px rgba(52, 211, 153, 0.3);
    }

/* 5. CODE/TECH - Grigio cibernetico */
[data-theme="dark"] .document-code {
    background: linear-gradient(120deg, #1f2937 0%, #111827 100%);
    border-left: 4px solid #6b7280;
    font-family: 'Courier New', monospace;
    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.2);
}

    [data-theme="dark"] .document-code p {
        color: #d1d5db;
    }

    [data-theme="dark"] .document-code strong {
        color: #f3f4f6;
        text-shadow: 0 0 6px rgba(243, 244, 246, 0.2);
    }

/* 6. WORKFLOW - Arancione cyber */
[data-theme="dark"] .document-workflow-box {
    background: linear-gradient(120deg, #431407 0%, #292524 100%);
    border-left: 4px solid #fb923c;
    box-shadow: 0 4px 12px rgba(251, 146, 60, 0.2);
}

    [data-theme="dark"] .document-workflow-box p {
        color: #fdba74;
    }

    [data-theme="dark"] .document-workflow-box strong {
        color: #f97316;
        text-shadow: 0 0 8px rgba(249, 115, 22, 0.3);
    }

/*----------------------------------------------
  STATS CARDS - DARK NEON
----------------------------------------------*/
[data-theme="dark"] .document-stats {
    gap: 20px;
}

[data-theme="dark"] .document-stat-card {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
    color: white;
    border: 1px solid rgba(59, 130, 246, 0.3);
    box-shadow: 0 4px 20px rgba(30, 58, 138, 0.4);
    position: relative;
    overflow: hidden;
}

    [data-theme="dark"] .document-stat-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
        animation: shimmer 3s infinite;
    }

[data-theme="dark"] .document-stat-number {
    text-shadow: 0 0 12px rgba(147, 197, 253, 0.5);
}

/* Tabella dark */
[data-theme="dark"] .document-table {
    background: var(--theme-bg-card);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--theme-border-color);
}

    [data-theme="dark"] .document-table th {
        background: linear-gradient(135deg, var(--theme-accent-primary), #1e40af);
        color: white;
    }

    [data-theme="dark"] .document-table td {
        border-bottom: 1px solid var(--theme-border-color);
        color: var(--theme-text-secondary);
    }

    [data-theme="dark"] .document-table tr:hover {
        background: var(--theme-bg-secondary);
    }

    [data-theme="dark"] .document-table a {
        color: var(--theme-accent-secondary);
    }

        [data-theme="dark"] .document-table a:hover {
            color: #7dd3fc;
        }

/* Workflow container dark */
[data-theme="dark"] .document-workflow {
    background: var(--theme-bg-secondary);
    border: 1px solid var(--theme-border-color);
}

    [data-theme="dark"] .document-workflow h3 {
        color: var(--theme-text-primary);
    }

    [data-theme="dark"] .document-workflow svg {
        background: var(--theme-bg-card);
        border: 1px solid var(--theme-border-color);
    }

/* Footer dark */
[data-theme="dark"] .document-footer {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: white;
}

[data-theme="dark"] .document-back-btn {
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
}

    [data-theme="dark"] .document-back-btn:hover {
        background: rgba(255, 255, 255, 0.1);
        color: white;
        border-color: var(--theme-accent-primary);
        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
    }

[data-theme="dark"] .document-copyright p {
    color: rgba(255, 255, 255, 0.8);
}

/*----------------------------------------------
  ANIMAZIONI SPECIFICHE DARK
----------------------------------------------*/
@keyframes shimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* Responsive dark */
@media (max-width: 768px) {
    [data-theme="dark"] .document-stats {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 15px;
    }
}


/*==============================================
  END DARK THEME
==============================================*/