/* =========================================
   1. CONFIGURAZIONE & VARIABILI
   ========================================= */
:root {
    /* Brand Colors */
    --accent-color: #ed1e79;
    --accent-gradient: linear-gradient(135deg, #ed1e79 0%, #ff529b 100%);
    --accent-hover: #c41462;

    /* Backgrounds */
    --bg-body: #121212;
    /* Quasi nero assoluto */
    --bg-surface: #1e1e1e;
    /* Grigio scuro per le card */
    --bg-surface-hover: #252525;
    --bg-glass: rgba(30, 30, 30, 0.85);
    /* Per l'effetto vetro */

    /* Typography */
    --text-primary: #ffffff;
    --text-secondary: #a0a0a0;
    --text-muted: #666666;

    /* UI Elements */
    --border-subtle: 1px solid rgba(255, 255, 255, 0.08);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.3);
    --header-height: 70px;
}

/* Reset Moderno */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: var(--bg-body);
    color: var(--text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    padding-top: var(--header-height);
    -webkit-font-smoothing: antialiased;
    /* Font più nitidi su Mac */
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

a:hover {
    color: inherit;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* =========================================
   2. HEADER GLASSMORPHISM (Base Desktop)
   ========================================= */
header {
    background: var(--bg-glass, rgba(18, 18, 18, 0.8));
    /* Fallback se la variabile manca */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: var(--border-subtle, 1px solid rgba(255, 255, 255, 0.1));
    height: var(--header-height, 70px);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5rem;
}

header .logo {
    height: 32px;
    width: auto;
}

/* =========================================
   3. NAVIGAZIONE & MENU (Desktop)
   ========================================= */
header .menu-content {
    display: flex;
    gap: 8px;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Nascondi il tasto "Chiudi menu" su Desktop */
header .close-menu {
    display: none;
}

header .menu-content>li>a {
    color: var(--text-secondary, #b3b3b3);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: var(--radius-sm, 4px);
    position: relative;
    text-decoration: none;
    transition: all 0.2s ease;
}

/* Hover e Active State Moderni */
header .menu-content>li>a:hover,
header .menu-content>li>a.active {
    color: white;
    background-color: rgba(255, 255, 255, 0.05);
}

/* =========================================
   4. DROPDOWN MENU
   ========================================= */
header .menu-content .dropdown {
    position: relative;
}

header .menu-content .dropdown-content {
    display: none;
    /* Nascosto di default */
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: #252525;
    min-width: 200px;
    border: var(--border-subtle, 1px solid rgba(255, 255, 255, 0.1));
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-card, 0 4px 6px rgba(0, 0, 0, 0.3));
    padding: 8px;
    z-index: 1001;
    list-style: none;
    animation: slideDown 0.2s ease-out;
}

/* Mostra dropdown al passaggio del mouse (solo desktop) */
header .menu-content .dropdown:hover .dropdown-content {
    display: block;
}

header .menu-content .dropdown-content li {
    display: block;
}

header .menu-content .dropdown-content a {
    display: block;
    padding: 10px 12px;
    border-radius: var(--radius-sm, 4px);
    color: var(--text-secondary, #b3b3b3);
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 0.2s;
}

header .menu-content .dropdown-content a:hover {
    background-color: var(--accent-color, #007bff);
    color: white;
}

/* =========================================
   5. HAMBURGER & MOBILE MENU
   ========================================= */
header .hamburger {
    display: none;
    /* Nascosto su desktop */
    border: none;
    background: none;
    cursor: pointer;
    padding: 5px;
    z-index: 1002;
}

header .hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: white;
    margin: 6px 0;
    transition: 0.3s;
}

/* =========================================
   6. LAYOUT PAGINA (Main + Sidebar)
   ========================================= */
.page-wrap {
    margin: 0 auto;
    min-height: calc(100vh - var(--header-height));
    /* Assicura che il footer vada in fondo */
    padding: 0rem 5rem;
    margin-bottom: 1rem;
}


/* Media Query Mobile */
@media (max-width: 768px) {
    header {
        padding: 0 1.5rem;
    }

    header .hamburger {
        display: block;
    }

    /* Stile del pulsante di chiusura (X) */
    header .close-menu {
        display: block;
        text-align: right;
        width: 100%;
        margin-bottom: 20px;
    }

    .close-btn {
        background: none;
        border: none;
        color: white;
        font-size: 1.8rem;
        cursor: pointer;
        padding: 5px;
    }

    /* Contenitore Menu Mobile */
    header .menu-content {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100vh;
        background: #121212;
        /* Sfondo solido per coprire la pagina */

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        /* flex-start per permettere lo scroll */
        padding: 30px 40px;
        gap: 20px;
        overflow-y: auto;
        /* Abilita scroll se il menu è lungo */

        /* Logica di Transizione */
        transform: translateX(100%);
        /* Sposta fuori schermo a destra */
        visibility: hidden;
        /* Rende non cliccabile quando chiuso */
        opacity: 0;
        transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.4s ease;
        z-index: 9999;
    }

    /* Stato Attivo (Menu Aperto) */
    header .menu-content.active {
        transform: translateX(0);
        visibility: visible;
        opacity: 1;
    }

    /* Link nel mobile più grandi */
    header .menu-content>li>a {
        font-size: 1.2rem;
        display: block;
        width: 100%;
        text-align: center;
    }

    /* Dropdown su Mobile: sempre visibili e statici */
    header .menu-content .dropdown-content {
        position: static;
        display: block;
        background: rgba(255, 255, 255, 0.03);
        box-shadow: none;
        border: none;
        text-align: center;
        padding: 10px 0;
        margin-top: 10px;
        min-width: 100%;
        animation: none;
        opacity: 1;
        transform: none;
    }

    /* Disabilita l'hover effect del dropdown su mobile per evitare glitch */
    header .menu-content .dropdown:hover .dropdown-content {
        display: block;
    }

    .page-wrap {
        padding: 0 1.5rem;
    }
}

.main-content {
    margin-top: 20px;
}

.main-content.notop {
    margin-top: 0;
}

.grid-layout {
    display: grid;
    /* Main content prende spazio, Sidebar fisso a 300px o frazione */
    grid-template-columns: 1fr 320px;
    gap: 2rem;
    align-items: start;
}

/* Titolo e Filtri */
.title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.title-bar h1 {
    font-size: 2rem;
    margin: 0;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

/* =========================================
   7. FILTRI (Segmented Control style)
   ========================================= */
.filter-buttons {
    display: inline-flex;
    background: var(--bg-surface);
    padding: 4px;
    border-radius: var(--radius-sm);
    border: var(--border-subtle);
}

.filter-button {
    padding: 8px 16px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    border-radius: 4px;
    /* Leggermente meno del container */
    font-weight: 500;
    transition: all 0.3s ease;
}

.filter-button:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.filter-button.active {
    background: var(--accent-color);
    /* O accent-gradient se preferisci */
    color: white;
    box-shadow: 0 2px 8px rgba(237, 30, 121, 0.4);
}

/* =========================================
   8. CARD MISSIONI
   ========================================= */
.mission-cards-container {
    display: grid;
    /* Griglia responsiva automatica */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.mission-card {
    background: var(--bg-surface);
    border: var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s;
    position: relative;
    overflow: hidden;
}

.mission-card:hover {
    background: var(--bg-surface-hover);
    box-shadow: var(--shadow-card);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Tipografia interna alla card */
.mission-card h3 {
    font-size: 1.25rem;
    margin: 0 0 1rem 0;
    color: var(--text-primary);
    line-height: 1.4;
}

.mission-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
    display: flex;
    align-items: center;
    /* Allinea icone e testo verticalmente */
    gap: 10px;
    /* Spazio tra icona e testo */
}

/* Stile per le icone (svg o i) generate da mdi_icon */
.mission-card svg.mdi {
    color: var(--text-secondary);
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
    fill: currentColor;
}


/* Pulsante dettagli */
.mission-card .btn-details {
    margin-top: auto;
    /* Spinge il bottone sempre in fondo alla card */
    display: inline-block;
    padding: 10px 0;
    text-align: center;
    margin-top: 1.5rem;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.mission-card .btn-details:hover {
    background: var(--accent-color);
    color: white;
    box-shadow: 0 4px 12px rgba(237, 30, 121, 0.3);
}

/* =========================================
   9. INDICATORI DI STATO (Bordo Colorato)
   ========================================= */
/* Aggiungiamo una striscia colorata a sinistra della card */
.mission-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: var(--text-muted);
    /* Default fallback */
}

/* Colori specifici per stato */
.mission-card.status-programmata::before {
    background: #17a2b8;
    box-shadow: 0 0 10px rgba(23, 162, 184, 0.4);
}

.mission-card.status-successo::before {
    background: #00e676;
    box-shadow: 0 0 10px rgba(0, 230, 118, 0.4);
}

.mission-card.status-fallimento::before {
    background: #ff1744;
    box-shadow: 0 0 10px rgba(255, 23, 68, 0.4);
}

.mission-card.status-fallimento-parziale::before {
    background: #ff9100;
}

.mission-card.status-sconosciuto::before {
    background: #9e9e9e;
}


.mission-card.status-in-volo::before {
    /* Blu acceso */
    background: #2979ff
        /* Animazione per attirare l'attenzione sul LIVE */
}

/* =========================================
   10. PAGINAZIONE
   ========================================= */
.pagination {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    background: var(--bg-surface);
    border: var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.9rem;
    transition: all 0.2s;
}

.pagination-link:hover {
    background: var(--bg-surface-hover);
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
}

.pagination-link.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
    font-weight: bold;
}

/* =========================================
   11. SIDEBAR (Base Style)
   ========================================= */
.sidebar {
    position: sticky;
    top: calc(var(--header-height) + 20px);
    /* Sticky sotto l'header */
    align-self: start;
}

/* =========================================
   12. RESPONSIVE (Tablet & Mobile)
   ========================================= */
@media (max-width: 1024px) {

    .grid-layout {
        grid-template-columns: 1fr;
        /* Colonna singola */
    }

    .sidebar {
        position: static;
        /* Rimuove sticky su mobile */
        margin-top: 2rem;
    }
}

@media (max-width: 768px) {



    .title-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .mission-cards-container {
        grid-template-columns: 1fr;
        /* 1 card per riga su mobile */
    }

    .filter-buttons {
        padding: 2px;
    }

    .filter-button {
        padding: 4px 8px;
    }


}

/* =========================================
   13. DETTAGLI LANCIO - LAYOUT (COMPATTO)
   ========================================= */

/* Sezione Info Boxes (Griglia superiore) */
.info-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    /* Ridotto min-width */
    gap: 1rem;
    /* Ridotto da 1.5rem */
    margin-bottom: 1.5rem;
    /* Ridotto da 2rem */
}

.launch-box {
    background: var(--bg-surface);
    border: var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.8rem;
    /* Ridotto drasticamente da 1.5rem */
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Ridotto da 12px */
    box-shadow: var(--shadow-card);
}

.launch-box h3 {
    margin: 0;
    font-size: 1rem;
    /* Ridotto da 1.1rem */
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Icone all'interno dei box */
.launch-box svg.mdi {
    color: var(--text-secondary);
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
    fill: currentColor;
}

/* Rimuove margini extra dai paragrafi nei box */
.launch-box p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Finestre di lancio */
.launch-windows {
    background: rgba(255, 255, 255, 0.03);
    padding: 8px;
    /* Ridotto */
    border-radius: var(--radius-sm);
    margin-top: auto;
}

.launch-windows p {
    margin: 0;
    font-size: 0.85rem;
    /* Testo più piccolo */
    display: flex;
    align-items: center;
    gap: 6px;
}

.button-small {
    background: transparent;
    border: 1px solid var(--text-secondary);
    color: var(--text-secondary);
    padding: 2px 6px;
    /* Bottone più sottile */
    font-size: 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 6px;
    transition: all 0.2s;
}

.button-small:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* =========================================
   14. STATO E PAYLOAD (COMPATTO)
   ========================================= */
.status-box {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    /* Molto più compatto */
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.9rem;
    /* Testo più piccolo */
    width: fit-content;
}

.status-box img.icon {
    width: 18px;
    height: 18px;
}

/* Colori specifici (Invariati) */
.status-programmata {
    color: #17a2b8;
    background: rgba(23, 162, 184, 0.1);
}

.status-successo {
    color: #00e676;
    background: rgba(0, 230, 118, 0.1);
}

.status-fallimento {
    color: #ff1744;
    background: rgba(255, 23, 68, 0.1);
}

.status-fallimento-parziale {
    color: #ff9100;
    background: rgba(255, 145, 0, 0.1);
}

.status-sconosciuto {
    color: #9e9e9e;
    background: rgba(158, 158, 158, 0.1);
}

/* --- NUOVO: Stato In Volo --- */
.status-in-volo {
    color: #2979ff;
    /* Blu acceso */
    background: rgba(41, 121, 255, 0.1);
    /* Animazione per attirare l'attenzione sul LIVE */
    animation: live-pulse 2s infinite;
}

/* Animazione pulsante (effetto radar/battito) */
@keyframes live-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(41, 121, 255, 0.4);
    }

    70% {
        box-shadow: 0 0 0 5px rgba(41, 121, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(41, 121, 255, 0);
    }
}

.details-box {
    background: var(--bg-surface);
    padding: 1rem;
    /* Ridotto da 1.5rem */
    border-radius: var(--radius-md);
    border: var(--border-subtle);
    margin-bottom: 1.5rem;
    /* Ridotto margin esterno */
    line-height: 1.5;
    /* Ridotto da 1.8 per avvicinare le righe */
    font-size: 0.95rem;
    /* Testo leggermente più piccolo */
    color: var(--text-secondary);
    margin-top: 1rem;
}

.details-box p {
    margin: 0;
}

.details-box img {
    width: 100%;
    height: auto;
}


/* =========================================
   15. RAZZO E STADI (COMPATTO)
   ========================================= */
.details-rocket {
    margin-bottom: 1.5rem;
}

.info-box-rocket {
    background: var(--bg-surface);
    border: 1px solid var(--accent-color);
    padding: 0.8rem 1rem;
    /* Ridotto padding */
    border-radius: var(--radius-md);
    transition: all 0.2s;
    display: flex;
    align-items: center;
}

.info-box-rocket:hover {
    background: rgba(237, 30, 121, 0.1);
}


.info-box-rocket p {
    margin: 0;
    font-weight: 700;
    font-size: 1.1rem;
    /* Ridotto da 1.2rem */
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
}

.info-box-rocket svg.mdi {
    color: var(--accent-color);
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
    fill: currentColor;
}

/* =========================================
   15. RAZZO (CARD UNIFICATA)
   ========================================= */

/* 1. Il contenitore principale diventa la CARD */
.details-rocket {
    background: var(--bg-surface);
    border: var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    margin-bottom: 1.5rem;
    overflow: hidden;
    /* Assicura che i figli non escano dai bordi arrotondati */
    display: flex;
    flex-direction: column;
}

/* 2. Il titolo (Header della card) */
/* Rimuoviamo i bordi/sfondi singoli perché ora sono sul padre */
.info-box-rocket {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-subtle);
    /* Linea di separazione orizzontale */
    border-radius: 0;
    /* Reset del raggio */
    padding: 1rem;
    margin: 0;
    display: flex;
    align-items: center;
    transition: background 0.2s ease;
}

/* Effetto hover sull'header (titolo) */
/* Applichiamo l'hover al link genitore per colorare l'header */
.details-rocket>a:hover .info-box-rocket {
    background: rgba(237, 30, 121, 0.1);
    /* Leggero tocco di accent color */
    transform: none;
    /* Rimuoviamo lo spostamento per mantenere solidità */
}

/* Testo del titolo */
.info-box-rocket p {
    margin: 0;
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
}

/* 3. La descrizione (Body della card) */
.rocket-description {
    padding: 1rem;
    /* Padding interno uguale all'header */
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary);

    /* Rimuoviamo i vecchi stili di separazione */
    margin-top: 0;
    padding-left: 1rem;
    border-left: none;
}

/* =========================================
   19. STILE CONTENUTO HTML DAL DB (Griglia interna)
   ========================================= */

/* Il contenitore delle specifiche tecniche (grid) */
.rocket-description .launch-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.8rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-subtle);
    /* Separatore interno */
}


/* I singoli box dati (Badge tecnici) */
.rocket-description .info-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    margin: 0;

    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;

    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

/* Hover sui badge tecnici */
.rocket-description .info-box:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

/* Icone nei badge */
.rocket-description svg.mdi {
    color: var(--text-secondary);
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
    fill: currentColor;

}

/* Paragrafo descrittivo iniziale */
.rocket-description>p:first-of-type {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

/* Stadi (Stages) */
.stage-details ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    /* Card più strette */
    gap: 1rem;
    /* Meno spazio tra le card */
}

.stage-box {
    background: #1a1a1a;
    padding: 1rem;
    /* Ridotto da 1.5rem */
    border-radius: var(--radius-md);
    transition: transform 0.2s;
}

.stage-box:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.stage-box h4 {
    margin: 0 0 6px 0;
    /* Meno margine sotto il titolo */
    font-size: 1rem;
}

.stage-box p {
    margin: 2px 0;
    /* Meno spazio tra le righe dello stadio */
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* =========================================
   16. MAPPA (Leaflet)
   ========================================= */
.map-box {
    padding: 0;
    overflow: hidden;
    height: 300px;
    /* Ridotta altezza mappa (era 400px) */
    position: relative;
}

#map {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-md);
    z-index: 1;
}

/* =========================================
   17. SIDEBAR (COMPATTA)
   ========================================= */
.sidebar .details-box {
    text-align: left;
    padding: 1rem;
    /* Più compatto */
}

.livestream-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.livestream {
    display: block;
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 12px;
    /* Bottone più sottile */
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 0.9rem;
    color: white;
    transition: background 0.2s;
    border: 1px solid transparent;
}

.livestream:hover {
    background: var(--accent-color);
    border-color: var(--accent-hover);
}

.box-title {
    margin: 0;
}

/* =========================================
   18. MODALE (Dialog) - STILE AVANZATO
   ========================================= */

/* 1. Stile Base del Tag Dialog */
dialog.modal-dialog {
    background: transparent;
    /* Il background lo diamo al contenuto per gestire bordi */
    border: none;
    padding: 0;
    max-width: 550px;
    width: 95%;
    color: var(--text-primary);

    /* Posizionamento centrale */
    margin: auto;
    position: fixed;
    inset: 0;
    z-index: 2000;
}

/* Backdrop (Sfondo oscurato) */
dialog.modal-dialog::backdrop {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    /* Effetto sfocatura molto moderno */
    -webkit-backdrop-filter: blur(8px);
}

/* Animazione di entrata */
dialog[open] {
    animation: modalFadeIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* 2. Contenitore Interno */
.modal-content {
    background: #1e1e1e;
    background: linear-gradient(145deg, #1e1e1e, #252525);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    /* 16px */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    /* Altezza massima per schermi piccoli */
    overflow: hidden;
}

/* 3. Header */
.modal-header {
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
}

.modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--accent-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Tasto X di chiusura */
.btn-icon-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s;
}

.btn-icon-close:hover {
    color: white;
}

/* 4. Body (Lista Scrollabile) */
.modal-body {
    padding: 0;
    /* Il padding è sulle righe */
    overflow-y: auto;
    /* Abilita scroll se la lista è lunga */
    /* Scrollbar personalizzata sottile */
    scrollbar-width: thin;
    scrollbar-color: var(--text-muted) transparent;
}

/* Stile della singola riga finestra */
.window-row {
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: flex-start;
    /* Allinea in alto */
    gap: 1rem;
    transition: background 0.2s;
}

.window-row:last-child {
    border-bottom: none;
}

.window-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* Colonna Badge (Primary/Backup) */
.window-type {
    min-width: 80px;
}

.badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Colori Badge */
.badge-primary {
    background: rgba(0, 230, 118, 0.15);
    color: #00e676;
    border: 1px solid rgba(0, 230, 118, 0.3);
}

.badge-backup {
    background: rgba(255, 145, 0, 0.15);
    color: #ff9100;
    border: 1px solid rgba(255, 145, 0, 0.3);
}

.badge-scrubbed {
    background: rgba(255, 23, 68, 0.15);
    color: #ff1744;
    text-decoration: line-through;
}

.badge-default {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

/* Colonna Orari */
.window-time {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.time-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.time-group .label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.time-group .value {
    font-family: 'Courier New', monospace;
    /* Font tecnico per i numeri */
    font-size: 0.95rem;
    color: var(--text-primary);
    font-weight: 500;
}

/* 5. Footer */
.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-subtle);
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: flex-end;
}

.btn-modal-close {
    background: var(--bg-surface-hover);
    border: 1px solid var(--border-subtle);
    color: white;
    padding: 8px 20px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-modal-close:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    box-shadow: 0 4px 12px rgba(237, 30, 121, 0.3);
}

/* Mobile Adjustments */
@media (max-width: 500px) {
    .window-row {
        flex-direction: column;
        gap: 0.5rem;
    }

    .window-type {
        margin-bottom: 5px;
    }

    .badge {
        width: 100%;
        text-align: center;
    }
}

/* =========================================
   20. STYLE SPECIFICO PAGINA RAZZI
   ========================================= */

/* Stile base per la card del razzo (neutro) */
.mission-card.rocket-card {
    /* Manteniamo lo sfondo scuro standard, senza tinte colorate */
    background: var(--bg-surface);
}

/* Striscia laterale colorata (Brand Color invece di Status Color) */
.mission-card.rocket-card::before {
    background: var(--accent-color);
    /* Usa il rosa (#ed1e79) */
    box-shadow: 0 0 10px rgba(237, 30, 121, 0.3);
    /* Leggero glow rosa */
}

/* Hover: Bordo e sfondo cambiano leggermente */
.mission-card.rocket-card:hover {
    border-color: var(--accent-color);
    background: var(--bg-surface-hover);
}

/* =========================================
   21. FORM DI RICERCA (Search Bar)
   ========================================= */
.search-form {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.search-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    color: white;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.95rem;
    outline: none;
    transition: all 0.2s;
    flex-grow: 1;
    /* Occupa tutto lo spazio disponibile */
    min-width: 200px;
}

.search-input:focus {
    border-color: var(--accent-color);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 2px rgba(237, 30, 121, 0.2);
}

.search-button {
    background: var(--accent-color);
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.search-button svg.mdi {
    color: var(--text-primary);
    width: auto;
    height: 1.2rem;
    vertical-align: middle;
    fill: currentColor;
}

.search-button:hover {
    background: var(--accent-hover);
}

/* =========================================
   22. WIDGET SIDEBAR (Famiglie Razzi)
   ========================================= */
.sidebar-title {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    color: white;
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 10px;
}

.sidebar-title svg.mdi {
    color: var(--text-primary);
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
    fill: currentColor;
}



.widget-images {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.image-link {
    display: block;
    padding: 10px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-weight: 500;
    transition: all 0.2s;
    text-decoration: none;
}

.image-link:hover {
    background: var(--bg-surface-hover);
    color: white;
    border-color: var(--accent-color);
    /* Leggero scorrimento a destra */
}

/* =========================================
   23. DETTAGLIO RAZZO (Single Rocket Page)
   ========================================= */

/* 1. Griglia Riepilogo in alto (Azienda, Lanci, Famiglia) */
/* Usiamo il selettore diretto '>' per non intaccare la .launch-details dentro la descrizione */
.main-content>.launch-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.main-content>.launch-details .info-box {
    background: var(--bg-surface);
    border: var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: var(--shadow-card);
    transition: transform 0.2s;
}

.main-content>.launch-details .info-box:hover {
    background: var(--bg-surface-hover);
    border-color: rgba(255, 255, 255, 0.2);
}

.main-content>.launch-details .info-box p {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.main-content>.launch-details .info-box strong {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Link all'interno dei box (es. Famiglia) */
.main-content>.launch-details .info-box a {
    color: var(--accent-color);
    font-weight: 600;
    text-decoration: none;
}

.main-content>.launch-details .info-box a:hover {
    text-decoration: underline;
}

/* 2. Sezione Immagine Principale */
.images {
    margin-bottom: 2rem;
    background: var(--bg-surface);
    border: var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    /* Taglia l'immagine agli angoli */
    box-shadow: var(--shadow-card);
}

.images img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 500px;
    /* Evita che immagini verticali dominino troppo */
    object-fit: cover;
    /* Ritaglia l'immagine per riempire il box */
    object-position: center;
}

.images p {
    padding: 0.8rem 1rem;
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    text-align: right;
    font-style: italic;
    color: var(--text-muted);
}

/* 3. Pulsante "Torna alla lista" */
.btn-back {
    display: inline-flex;
    margin-top: 3rem;
    padding: 10px 24px;
    background: transparent;
    border: 1px solid var(--text-secondary);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.btn-back:hover {
    border-color: var(--text-primary);
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

/* Piccola correzione per il titolo H2 */
.main-content h2 {
    font-size: 1.8rem;
    color: white;
    font-weight: 700;
    padding: 0;
}

/* =========================================
   24. PAGINA MISSIONI (Event Cards)
   ========================================= */

/* Riutilizziamo il contenitore griglia già esistente */
/* Se .mission-cards-container è già definito per i lanci, funzionerà anche qui.
   In caso contrario, ecco la definizione base: */
.mission-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Stile specifico per la card evento/missione */
.event-card {
    background: var(--bg-surface);
    border: var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1.2rem;
    /* Spaziatura interna compatta */
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

/* Striscia decorativa laterale (Accent Color) */
.event-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: var(--accent-color);
    box-shadow: 0 0 10px rgba(237, 30, 121, 0.2);
}

/* Effetto Hover */
.event-card:hover {
    background: var(--bg-surface-hover);
    box-shadow: var(--shadow-card);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Titolo della missione */
.event-card h3 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--text-primary);
    line-height: 1.3;
}

/* Informazioni (Date e Tipo) */
.event-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Icone all'interno dei paragrafi */
.event-card svg.mdi {
    color: var(--text-secondary);
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
    fill: currentColor;
}

/* Pulsante Dettagli */
.event-card .btn-details {
    margin-top: auto;
    /* Spinge il pulsante in fondo se le card hanno altezze diverse */
    display: block;
    text-align: center;
    margin-top: 1rem;
    padding: 8px 0;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    text-decoration: none;
}

.event-card .btn-details:hover {
    background: var(--accent-color);
    color: white;
    box-shadow: 0 4px 12px rgba(237, 30, 121, 0.3);
}

/* Gestione responsive per griglia missioni su mobile */
@media (max-width: 600px) {
    .mission-cards-container {
        grid-template-columns: 1fr;
        /* Una colonna su schermi piccoli */
    }
}

/* =========================================
   25. DETTAGLI MISSIONE (Layout Specifico)
   ========================================= */

/* Label piccola sopra i dati (es. "Tipo Missione") */
.tagName {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 4px;
    font-weight: 600;
}

/* Griglia per elementi collegati (Lanci ed Eventi) */
.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

/* Card per elementi collegati (stile più "leggero" delle card principali) */
.related-card {
    background: rgba(255, 255, 255, 0.03);
    /* Sfondo semi-trasparente */
    border: var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.2s ease;
}

.related-card:hover {
    background: var(--bg-surface-hover);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Header della card collegata */
.card-header {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Icone negli header */
.card-header svg,
.card-header i {
    color: var(--accent-color);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Metadati (Date, info secondarie) */
.card-meta {
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: auto;
    /* Spinge il bottone in fondo */
}

/* Bottone dettagli piccolo per le card collegate */
.related-card .btn-details {
    display: inline-block;
    text-align: center;
    width: 100%;
    margin-top: 0.8rem;
    padding: 6px 0;
    font-size: 0.85rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    background: transparent;
    transition: all 0.2s;
}

.related-card .btn-details:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: rgba(237, 30, 121, 0.05);
}

/* =========================================
   26. SIDEBAR MISSIONI (Date e Liste)
   ========================================= */

/* Lista nella sidebar */
.sidebar-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 2rem;
}

/* Stile della data dentro il link della sidebar */
.sidebar-date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 4px;
    font-weight: 400;
}

.sidebar-date svg,
.sidebar-date i {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}

/* Hover sul link sidebar: illumina anche la data/icona */
.image-link:hover .sidebar-date {
    color: var(--text-secondary);
}

.image-link:hover .sidebar-date svg {
    color: var(--accent-color);
    opacity: 1;
}

/* =========================================
   27. DETTAGLIO LAUNCHPAD
   ========================================= */

/* Griglia per le statistiche (ID, Location, Count) */
.pad-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* Stile dei singoli box statistiche */
.stat-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    transition: background 0.2s;
}

.stat-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
}

.stat-item strong {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.stat-item span {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Stile Mappa Leaflet */
#map {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    /* L'altezza è definita inline o qui, meglio qui per pulizia */
    height: 450px !important;
    width: 100%;
    z-index: 1;
    /* Importante per non coprire header sticky */
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
    /* Ombra interna per profondità */
}

/* Messaggio di warning (coordinate mancanti) */
.warning-message {
    background: rgba(255, 145, 0, 0.1);
    color: #ff9100;
    padding: 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 145, 0, 0.2);
    text-align: center;
    margin-top: 1rem;
}

/* =========================================
   SIDEBAR COUNTDOWN - STILE FLIP/ANALOGICO
   ========================================= */

/* Contenitore generale del link per rimuovere la sottolineatura */
a.countdown-link {
    text-decoration: none;
    display: block;
    transition: all ease 0.3s;
}

/* Titolo della missione */
.launchName-countdown {
    margin: 0 0 15px 0;
    font-size: 1.1rem;
    color: var(--text-primary);
    text-align: center;
    line-height: 1.3;
}

/* Contenitore flessibile dell'orologio */
.flip-clock {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    /* Riduciamo leggermente il gap per guadagnare spazio */
    font-family: 'Courier New', Courier, monospace;

    /* IMPORTANTE: Se l'orologio è troppo largo, permette lo scroll invece di rompere il layout */
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 5px;
    /* Spazio per eventuale scrollbar invisibile */

    /* Nasconde la scrollbar per estetica */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.flip-clock::-webkit-scrollbar {
    display: none;
}

/* Il singolo blocco (giorni, ore, etc) */
.flip-unit-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* Il cartellino "meccanico" */
.flip-card {
    background: #222;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;

    /* MODIFICA QUI: Gestione larghezza dinamica */
    padding: 8px 8px;
    /* Padding laterale per dare respiro ai numeri */
    min-width: 40px;
    /* Larghezza minima per i numeri a 2 cifre */
    width: auto;
    /* Si allarga automaticamente se ci sono 3+ cifre */

    border-radius: 4px;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;

    /* Evita che il numero vada a capo */
    white-space: nowrap;
}

/* La linea di taglio orizzontale */
.flip-card::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    /* La linea coprirà sempre tutto il box, anche se si allarga */
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.8);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Separatori (i due punti :) */
.flip-sep {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-top: 5px;
    animation: blink 1s infinite;
    flex-shrink: 0;
    /* Impedisce ai due punti di schiacciarsi */
}

/* --- AGGIUNTA: Responsive per Sidebar o Schermi piccoli --- */
/* Se l'orologio è dentro la sidebar o su mobile, riduciamo il font */
.sidebar .flip-card,
.details-box .flip-card {
    /* Riduciamo font e padding per far stare tutto */
    font-size: 1.2rem;
    padding: 6px 6px;
    min-width: 36px;
}

.sidebar .flip-sep,
.details-box .flip-sep {
    font-size: 1.2rem;
}

@media (max-width: 400px) {
    .flip-card {
        font-size: 1.1rem;
        min-width: 32px;
    }

    .flip-sep {
        font-size: 1.1rem;
    }
}

/* Animazione lampeggio separatori */
@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

/* =========================================
   LAUNCH DETAILS - COUNTDOWN SPECIFICS
   ========================================= */

/* Stile per la scritta T- o T+ sopra l'orologio */
.countdown-prefix {
    font-size: 2rem;
    font-weight: 800;
    color: var(--accent-color);
    /* Rosa di default */
    margin-bottom: 10px;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(237, 30, 121, 0.4);
}

/* Quando il tempo è passato (T+), cambia colore (opzionale: verde) */
.countdown-prefix.passed {
    color: #00e676;
    text-shadow: 0 0 10px rgba(0, 230, 118, 0.4);
}

/* Colore Accent quando il mouse passa sopra il box */
.details-box:hover .flip-card {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: rgba(237, 30, 121, 0.1);
}



/* =========================================
   28. FOOTER MODERNO
   ========================================= */

.site-footer {
    background: var(--bg-surface);
    /* O un colore leggermente più scuro es: #0a0a0a */
    border-top: 1px solid var(--border-subtle);
    padding: 2rem 5rem;
    margin-top: auto;
    /* Spinge il footer in basso se la pagina è corta */
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.footer-container {
    margin: 0 auto;
    display: grid;
    /* Layout a 3 colonne responsive */
    grid-template-columns: 2fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 2rem;
}

/* Colonna Brand */
.footer-logo {
    color: white;
    font-size: 1.2rem;
    margin: 0 0 1rem 0;
    font-weight: 700;
    letter-spacing: -0.5px;
    background: var(--accent-gradient);
    /* Opzionale: testo gradiente */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.footer-disclaimer {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 400px;
    /* Evita che il testo si allarghi troppo */
    margin: 0;
}

/* Colonne Navigazione */
.footer-nav h4 {
    color: white;
    font-size: 1rem;
    margin: 0 0 1.2rem 0;
    font-weight: 600;
}

.footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-nav a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s, padding-left 0.2s;
}

.footer-nav a:hover {
    color: var(--accent-color);
}

/* Link Admin un po' più discreto */
.admin-link {
    font-size: 0.8rem;
    opacity: 0.7;
}

.admin-link:hover {
    opacity: 1;
}

/* Parte inferiore (Copyright) */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 1.5rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .footer-container {
        grid-template-columns: 1fr;
        /* Una colonna su mobile */
        gap: 2rem;
        text-align: center;
    }

    .footer-disclaimer {
        margin: 0 auto;
        /* Centra il testo */
    }
}

/* =========================================
   ARTICOLO BASE (Legale, Privacy, Terms)
   ========================================= */
article {
    padding: 1.5rem;
    margin: 0 auto;
}

article h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    font-weight: 700;
}

/* Gestione data aggiornamento */
article p.update-date em {
    color: var(--text-muted);
    font-size: 0.9rem;
    display: block;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 1rem;
    font-style: italic;
}

/* Reset corsivo per il resto del testo */
article p em {
    display: inline;
    color: inherit;
    font-size: inherit;
    border: none;
    padding: 0;
    margin: 0;
}

article h2 {
    color: var(--accent-color);
    font-size: 1.4rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

article h3 {
    color: var(--text-primary);
    font-size: 1.1rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

article p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1.2rem;
    font-size: 0.95rem;
}

article strong {
    color: var(--text-primary);
    font-weight: 600;
}

article ul {
    list-style: disc;
    margin-left: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
}

article ul li {
    margin-bottom: 0.5rem;
}

article a {
    color: var(--accent-color);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: 0.2s;
}

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

/* Sottotitoli tecnici (H4) */
article h4 {
    color: var(--text-primary);
    font-size: 1rem;
    margin-top: 1.2rem;
    margin-bottom: 0.4rem;
    font-weight: 600;
    text-transform: uppercase;
    /* Per distinguerlo bene dai paragrafi */
    letter-spacing: 0.02em;
}

/* Micro-sezioni (H5) */
article h5 {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-top: 1rem;
    margin-bottom: 0.3rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* =========================================
   SIDEBAR PROMO APP (Immagine)
   ========================================= */

#installAppTrigger {
    display: block;
    /* Rimuove lo spazio vuoto sotto le immagini inline */
    width: 100%;
    /* Occupa tutta la larghezza della sidebar */
    height: auto;
    /* Mantiene le proporzioni originali (non si schiaccia) */
    max-width: 100%;
    /* Sicurezza extra per non sbordare mai */

    margin-top: 2rem;
    /* Spazio dal widget del countdown sopra */
    border-radius: var(--radius-md);
    /* Arrotondiamo gli angoli come il resto */

    cursor: pointer;
    /* Cambia il cursore in una manina */
    transition: transform 0.2s ease, opacity 0.2s;
}

/* Effetto Hover */
#installAppTrigger:hover {
    transform: translateY(-3px);
    /* Leggero sollevamento */
    opacity: 0.9;
}

/* Se l'immagine è molto alta, potresti voler limitare l'altezza massima */
/* Opzionale, usalo solo se l'immagine è troppo verticale */
/*
#installAppTrigger {
    max-height: 150px;
    object-fit: contain;
}
*/


/* =========================================
   30. PAGINE AUTENTICAZIONE (Login/Register)
   ========================================= */

/* Sfondo specifico per pagina auth (opzionale: centra verticalmente) */
.auth-page-bg {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - var(--header-height) - 200px);
    /* Sottrae header/footer approx */
    padding: 2rem 1rem;
}

/* Wrapper per centrare */
.auth-wrapper {
    width: 100%;
    max-width: 420px;
    /* Larghezza massima della card */
    margin: 0 auto;
}

/* La Card Login */
.auth-card {
    background: var(--bg-surface);
    border: var(--border-subtle);
    border-radius: var(--radius-lg);
    /* 16px */
    padding: 2.5rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

/* Linea colorata decorativa in alto */
.auth-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--accent-gradient);
}

/* Header (Titolo) */
.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-header h1 {
    font-size: 2rem;
    margin: 0 0 0.5rem 0;
    color: white;
}

.auth-header p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
}

/* Gruppi Form */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 8px;
    font-weight: 500;
}

/* Input Wrapper (per icona + input) */
.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* Icona dentro l'input */
.input-wrapper svg,
.input-wrapper i {
    position: absolute;
    left: 12px;
    color: var(--text-muted);
    width: 20px;
    height: 20px;
    pointer-events: none;
    /* Clicca attraverso l'icona */
    transition: color 0.2s;
}

/* Campo Input Reale */
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"] {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 12px 12px 12px 40px;
    /* Padding sinistro extra per l'icona */
    color: white;
    font-size: 1rem;
    outline: none;
    transition: all 0.2s ease;
}

/* Focus State */
.auth-form input:focus {
    border-color: var(--accent-color);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(237, 30, 121, 0.1);
}

.auth-form input:focus+svg {
    color: var(--accent-color);
    /* Colora l'icona quando in focus */
}

/* Bottone Submit */
.btn-submit {
    width: 100%;
    padding: 12px;
    background: var(--accent-gradient);
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.2s, transform 0.2s;
    margin-top: 1rem;
}

.btn-submit:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(237, 30, 121, 0.3);
}

/* Footer Link (Registrati) */
.auth-footer {
    text-align: center;
    margin-top: 2rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.auth-footer a {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 600;
}

.auth-footer a:hover {
    text-decoration: underline;
}

/* Alert Box per errori */
.alert-box {
    padding: 12px;
    border-radius: var(--radius-sm);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
}

.alert-box.error {
    background: rgba(255, 23, 68, 0.1);
    border: 1px solid rgba(255, 23, 68, 0.3);
    color: #ff1744;
}

.alert-box svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* =========================================
   31. EMBEDDED LAUNCH WIDGET (Per Articoli)
   ========================================= */

.embedded-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    margin: 2rem 0;
    /* Spazio sopra e sotto rispetto al testo articolo */
    box-shadow: var(--shadow-card);
    width: 100%;
}

/* Header: Titolo + Status */
.embedded-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 1rem;
    margin-top: 0;
    padding-top: 0;
}

.embedded-header h3 {
    margin: 0rem;
    font-size: 1.1rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 0 !important;
}

.embedded-header svg.mdi {
    color: var(--accent-color);
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
    fill: currentColor;
}

.article-meta svg.mdi {
    color: var(--accent-color);
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
    fill: currentColor;
}


/* Badge Stato (Piccolo) */
.status-badge {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    margin: 0;
}

/* Usa gli stessi colori definiti per .status-box */
.status-badge.status-successo {
    background: rgba(0, 230, 118, 0.15);
    color: #00e676;
}

.status-badge.status-fallimento {
    background: rgba(255, 23, 68, 0.15);
    color: #ff1744;
}

.status-badge.status-programmata {
    background: rgba(23, 162, 184, 0.15);
    color: #17a2b8;
}

/* Griglia Dati */
.embedded-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.embedded-item {
    display: flex;
    flex-direction: column;
}

.embedded-item .label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 2px;
}

.embedded-item .value {
    font-size: 0.95rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.embedded-item .value.accent {
    color: white;
    font-weight: 700;
}

/* Sezione Stadi */
.embedded-stages {
    background: rgba(255, 255, 255, 0.02);
    padding: 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1.5rem;
}

.label-section {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 0.8rem;
}

.stages-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.embedded-stage-pill {
    display: inline-flex;
    flex-direction: column;
    background: var(--bg-body);
    /* Più scuro */
    padding: 6px 12px;
    border-radius: 6px;
    border-left: 3px solid #808080;
    /* Colore default fallback */
    font-size: 0.85rem;
}

.embedded-stage-pill .stage-name {
    color: white;
    font-weight: 600;
}

.embedded-stage-pill .stage-count,
.embedded-stage-pill .stage-pad {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Footer Button */
.embedded-footer {
    text-align: center;
}

.btn-embedded {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    text-decoration: none !important;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s;
    width: 100%;
}

.btn-embedded:hover {
    background: var(--accent-color);
    color: white;
}

/* Mobile fix */
@media (max-width: 500px) {
    .embedded-grid {
        grid-template-columns: 1fr;
        /* Una colonna */
        gap: 0.8rem;
    }
}

/* =========================================
   32. PAGINA ARTICOLO (News Design)
   ========================================= */

/* Contenitore principale stile Card */
.news-article {
    overflow: hidden;
    /* Importante per l'immagine full-width */
}


.article-header h1 {
    font-size: 2.2rem;
    line-height: 1.2;
    color: white;
    font-weight: 700;
}

.article-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.article-meta svg,
.article-meta i {
    color: var(--accent-color);
    width: 18px;
    height: 18px;
}

/* Immagine di Copertina */
.article-cover {
    margin: 0;
    width: 100%;
    /* Max height per evitare che immagini verticali occupino tutto lo schermo */
    max-height: 500px;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid var(--border-subtle);
}

.article-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Taglia l'immagine per riempire il box */
    display: block;
}

/* Corpo del Testo */
.article-body {
    font-size: 1.05rem;
    /* Leggermente più grande per lettura */
    line-height: 1.8;
    /* Interlinea ariosa */
    color: #d1d1d1;
    /* Bianco sporco per non stancare gli occhi */
}

/* Tipografia interna all'articolo */
.article-body p {
    margin: 0;
}

.article-body h2 {
    font-size: 1.5rem;
    color: white;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    border-left: 4px solid var(--accent-color);
    padding-left: 1rem;
}

.article-body h3 {
    font-size: 1.25rem;
    color: var(--text-primary);
    margin-top: 2rem;
    margin-bottom: 0.8rem;
}

.article-body ul,
.article-body ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
    color: var(--text-secondary);
}

.article-body li {
    margin-bottom: 0.5rem;
}

.article-body a {
    color: var(--accent-color);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.2s;
}

.article-body a:hover {
    color: white;
    text-decoration-color: white;
}

.article-body blockquote {
    border-left: 4px solid var(--border-subtle);
    margin: 2rem 0;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    font-style: italic;
    color: var(--text-secondary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Responsive Mobile */
@media (max-width: 600px) {
    .news-article {
        padding: 0rem;
    }

    .article-header {
        padding: 0;
        padding-top: 1rem;
    }

    .article-header h1 {
        font-size: 1.8rem;
    }

    .article-body {
        padding: 0rem;
        font-size: 1rem;
    }
}

/* =========================================
   33. STAGE MISSIONS - HEADER STATS
   ========================================= */

.stage-header-container {
    margin-bottom: 2rem;
}

.stage-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.stage-title-row h1 {
    margin: 0;
    font-size: 2rem;
    background: linear-gradient(to right, #fff, #aaa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Griglia delle Statistiche */
.stage-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

/* Card Singola Statistica */
.stat-card {
    background: var(--bg-surface);
    border: var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: var(--shadow-card);
    transition: transform 0.2s;
    position: relative;
    overflow: hidden;
    transition: all ease 0.2s;
}

.stat-card:hover {
    background: var(--bg-surface-hover);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Icona di sfondo sfumata (effetto decorativo) */
.stat-card .bg-icon {
    position: absolute;
    right: -10px;
    bottom: -10px;
    font-size: 4rem;
    /* O width se usi SVG */
    opacity: 0.05;
    color: white;
    pointer-events: none;
    transform: rotate(-15deg);
}

.stat-card .bg-icon svg {
    width: 60px;
    height: 60px;
}

/* Etichetta (es. "Numero Missioni") */
.stat-card .label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

/* Valore (es. "10", "Attivo") */
.stat-card .value {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    font-family: 'Inter', sans-serif;
    /* O il tuo font principale */
}

/* Modificatori per i valori */
.stat-card .value.highlight {
    color: var(--accent-color);
}

.stat-card .value.mono {
    font-family: 'Courier New', monospace;
    font-size: 1.3rem;
}

/* Badge per lo stato (Attivo/Perso) */
.status-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.9rem;
    text-transform: capitalize;
    font-weight: 600;
}

/* Colori stati (puoi aggiungerne altri) */
.status-pill.active {
    background: rgba(0, 230, 118, 0.15);
    color: #00e676;
    border: 1px solid rgba(0, 230, 118, 0.3);
}

.status-pill.expended {
    background: rgba(158, 158, 158, 0.15);
    color: #bdbdbd;
    border: 1px solid rgba(158, 158, 158, 0.3);
}

.status-pill.lost {
    background: rgba(255, 23, 68, 0.15);
    color: #ff1744;
    border: 1px solid rgba(255, 23, 68, 0.3);
}

/* =========================================
   34. SIDEBAR LEGENDA (Stage Status)
   ========================================= */

.status-legend {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Spazio tra le voci */
}

.status-legend li {
    display: flex;
    align-items: flex-start;
    /* Allinea in alto se il testo va a capo */
    gap: 10px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Forziamo la pillola a non restringersi */
.status-legend .status-pill {
    flex-shrink: 0;
    font-size: 0.7rem;
    padding: 3px 8px;
    min-width: 70px;
    /* Larghezza fissa per allineamento visivo */
    text-align: center;
}

/* Aggiungiamo lo stile per 'retired' che mancava */
.status-pill.retired {
    background: rgba(100, 100, 100, 0.2);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* =========================================
   35. SIDEBAR LEGENDA (Launch Status)
   ========================================= */

/* Colori specifici per le pillole della legenda lanci */
.status-pill.programmata {
    background: rgba(23, 162, 184, 0.15);
    color: #17a2b8;
    border: 1px solid rgba(23, 162, 184, 0.3);
}

.status-pill.successo {
    background: rgba(0, 230, 118, 0.15);
    color: #00e676;
    border: 1px solid rgba(0, 230, 118, 0.3);
}

.status-pill.fallimento {
    background: rgba(255, 23, 68, 0.15);
    color: #ff1744;
    border: 1px solid rgba(255, 23, 68, 0.3);
}

.status-pill.parziale {
    background: rgba(255, 145, 0, 0.15);
    color: #ff9100;
    border: 1px solid rgba(255, 145, 0, 0.3);
}

.status-pill.sconosciuto {
    background: rgba(158, 158, 158, 0.15);
    color: #9e9e9e;
    border: 1px solid rgba(158, 158, 158, 0.3);
}

.status-pill.theme {
    background: rgb(237, 30, 121, 0.15);
    color: #ed1e79;
    border: 1px solid rgb(237, 30, 121, 0.3);
}

/* =========================================
   36. BLOG & NEWS FEED (Overlay Style)
   ========================================= */

/* --- Header e Toolbar --- */
.blog-header {
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 1.5rem;
}

.blog-header h1 {
    font-size: 2.5rem;
    margin: 0 0 1.5rem 0;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.blog-toolbar {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Barra di ricerca (condivisa tra header e sidebar) */
.search-group,
.sidebar-input-group {
    display: flex;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color 0.2s;
}

.sidebar-input-group svg.mdi {
    color: var(--text-primary);
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
    fill: currentColor;
}


/* Regola specifica per la barra larga nell'header */
.search-group {
    flex-grow: 1;
    max-width: 400px;
}

.search-group:focus-within,
.sidebar-input-group:focus-within {
    border-color: var(--accent-color);
}

.search-group input,
.sidebar-input-group input {
    flex-grow: 1;
    background: transparent;
    border: none;
    color: white;
    padding: 10px 15px;
    width: 100%;
    outline: none;
    font-size: 0.95rem;
}

.search-group button,
.sidebar-input-group button {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 0 15px;
    cursor: pointer;
    transition: color 0.2s;
}

.search-group button:hover,
.sidebar-input-group button:hover {
    color: var(--accent-color);
}

/* Select Categoria */
.category-select,
.sidebar-select {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    padding: 10px 15px;
    border-radius: var(--radius-sm);
    outline: none;
    cursor: pointer;
    font-size: 0.95rem;
}

.category-select:focus,
.sidebar-select:focus {
    border-color: var(--accent-color);
}

/* --- GRID ARTICOLI --- */
.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

/* --- CARD ARTICOLO (Nuovo Stile Overlay) --- */
.blog-card {
    position: relative;
    height: 400px;
    /* Altezza fissa verticale */
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    background: #000;
    /* Fallback */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Spinge il testo in basso */
}

.blog-card:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
    border-color: var(--accent-color);
}

/* 1. Immagine di Sfondo */
.card-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.card-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.blog-card:hover .card-background img {
    transform: scale(1.1);
    /* Zoom lento */
}

/* Fallback senza immagine */
.no-image-gradient {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #2a2a2a, #111);
}

/* 2. Overlay Sfumato (Scrim) */
.card-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.95) 100%);
    pointer-events: none;
}

/* 3. Badge Categoria Fluttuante */
.card-category-floating {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 3;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 5px;
    border-radius: 50px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* 4. Contenuto Testuale */
.card-content-overlay {
    position: relative;
    z-index: 3;
    /* Sopra l'overlay */
    padding: 1rem;
    color: white;
}

.card-meta {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.card-meta svg {
    width: 14px;
    height: 14px;
    color: var(--accent-color);
}

.card-content-overlay h3 {
    margin: 0 0 0.8rem 0;
    font-size: 1.4rem;
    line-height: 1.3;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.card-content-overlay h3 a {
    color: white;
    text-decoration: none;
    transition: color 0.2s;
}

.blog-card:hover h3 a {
    color: var(--accent-color);
}

.card-content-overlay p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* Tronca il testo dopo 2 righe */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Stretched Link per rendere cliccabile tutta la card */
.stretched-link::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

/* --- STATI E UTILITÀ --- */
.no-results {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    border: var(--border-subtle);
}

.no-results svg {
    width: 60px;
    height: 60px;
    color: var(--text-muted);
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* =========================================
   37. SIDEBAR BLOG SEARCH
   ========================================= */

/* Modifiche specifiche per la sidebar */
.sidebar-search-form {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.sidebar-filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sidebar-filter-group label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* Riutilizzo stili generici definiti sopra per input e select */
.sidebar-select {
    width: 100%;
    background: var(--bg-body);
    /* Più scuro per contrasto */
}


/* =========================================
   38. HOMEPAGE STYLES
   ========================================= */

/* Rimuove il padding standard del grid-layout se usiamo full width */
.page-wrap.no-sidebar {
    max-width: 100%;
}

/* Sections Generiche */
.home-section {
    padding: 1rem 5rem;
    margin: 0 auto;
}

.home-section.alt-bg {
    background: rgba(255, 255, 255, 0.02);
    /* Leggera variazione sfondo */
    max-width: 100%;
    /* Sfondo full width */

    /* Padding fisso a 5rem, come richiesto */
    padding: 1rem 5rem;

}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 10px;
}

.section-header h2 {
    margin: 0;
    font-size: 2rem;
    color: white;
}

.view-all-link {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9rem;
    transition: gap 0.2s;
}

.view-all-link:hover {
    gap: 10px;
}

/* =========================================
   38. HOMEPAGE HERO (Centrato & Minimal)
   ========================================= */
/* =========================================
   38. HOMEPAGE HERO (Left Aligned & Compact)
   ========================================= */

.hero-section {
    position: relative;
    height: 80vh;
    /* Altezza ridotta */
    min-height: 450px;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;

    display: flex;
    align-items: center;
    /* justify-content: center; Manteniamo il blocco al centro della pagina... */

    margin-top: -70px;
    padding-top: 70px;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Gradiente orizzontale: Scuro a sinistra per il testo */
    background: linear-gradient(to right, rgba(10, 10, 10, 0.9) 0%, rgba(10, 10, 10, 0.6) 60%, rgba(10, 10, 10, 0.2) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    /* Larghezza massima contenuto */
    padding: 0 5rem;
    /* Margini laterali */

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* ALLINEA TUTTO A SINISTRA */
    text-align: left;
    /* ALLINEA TESTO A SINISTRA */
}

/* Etichetta */
.hero-label {
    display: inline-block;
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
    background: rgba(237, 30, 121, 0.1);
    padding: 4px 12px;
    border-radius: 4px;
    /* Meno arrotondato, più tecnico */
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.7rem;
    /* Ridotto */
    margin-bottom: 1rem;
    letter-spacing: 1px;
}

/* Titolo Ridotto */
.hero-title {
    font-size: 2.5rem;
    /* Ridotto notevolmente da 3.5rem */
    margin: 0 0 0.8rem 0;
    color: white;
    line-height: 1.1;
    font-weight: 700;
    max-width: 600px;
    /* Evita che il titolo si allunghi troppo */
}

/* Info (Razzo • Pad) */
.hero-info {
    display: flex;
    justify-content: flex-start;
    /* Allinea a sinistra */
    align-items: center;
    gap: 15px;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    /* Ridotto */
}

.hero-info p {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.hero-info .sep {
    color: var(--border-subtle);
}

.hero-info svg {
    color: var(--accent-color);
    width: 16px;
    height: 16px;
}

/* COUNTDOWN SEMPLICE (Sinistra) */
.simple-countdown {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    /* Allinea a sinistra */
    gap: 15px;
    margin-bottom: 2rem;
}

.time-unit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Allinea label a sinistra */
}

.time-unit .number {
    font-family: 'Courier New', monospace;
    font-size: 2rem;
    /* Ridotto da 2.5rem */
    font-weight: 700;
    line-height: 1;
    color: white;
}

.time-unit .label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    margin-top: 5px;
}

.simple-countdown .sep {
    font-size: 1.5rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.2);
    margin-top: 0;
}

/* Bottone */
.btn-hero {
    display: inline-block;
    padding: 10px 24px;
    /* Più piccolo */
    font-size: 0.9rem;
    font-weight: 600;
    color: white;
    background: transparent;
    border: 1px solid white;
    /* Stile outline più elegante */
    border-radius: 4px;
    /* Meno arrotondato */
    text-decoration: none;
    transition: all 0.2s;
}

.btn-hero:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    /* Si muove a destra invece che su */
}

/* Responsive Mobile */
@media (max-width: 768px) {
    .hero-section {
        height: auto;
        min-height: 400px;
        padding-bottom: 3rem;
        /* Spazio sotto */
    }

    .hero-content {
        align-items: center;
        /* Su mobile torna al centro? O vuoi sinistra anche qui? */
        text-align: center;
        /* Solitamente su mobile il centro è meglio */
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-info {
        flex-direction: column;
        gap: 5px;
        justify-content: center;
    }

    .hero-info .sep {
        display: none;
    }

    .simple-countdown {
        justify-content: center;
        gap: 10px;
    }

    .time-unit {
        align-items: center;
    }

    .time-unit .number {
        font-size: 1.6rem;
    }

    .hero-label {
        margin-top: 2rem;
    }

    .home-section {
        padding: 1rem 2rem;
    }
}

.hero-info svg.mdi {
    color: var(--text-primary);
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
    fill: currentColor;
}


.cta-section {
    padding: 6rem 2rem;
    text-align: center;
    border-top: 1px solid var(--border-subtle);

    /* --- IL PUNTO CRUCIALE --- */
    /* 1. Primo livello: Gradiente scuro (sopra) */
    /* 2. Secondo livello: La variabile immagine definita nell'HTML (sotto) */
    /* Nota: Se la variabile fallisce, il fallback è url(...) opzionale */
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.9)),
        var(--bg-image);

    /* Impostazioni per centrare e coprire l'area */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Facoltativo: rimuovi questa riga se da problemi su mobile */
    background-attachment: fixed;
}

/* Stili del testo (restano uguali) */
.cta-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    background: linear-gradient(to right, #fff, #999);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cta-content p {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.btn-cta {
    padding: 12px 30px;
    background: white;
    color: black;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 700;
    transition: all 0.2s;
}

.btn-cta:hover {
    background: #ddd;
    transform: translateY(-2px);
}

.btn-cta.outline {
    background: transparent;
    border: 1px solid white;
    color: white;
}

.btn-cta.outline:hover {
    background: rgba(255, 255, 255, 0.1);
}

.btn-cta svg.mdi {
    color: var(--primary-color);
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
    fill: currentColor;
}

/* Responsive Home */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }

    .hero-clock .flip-card {
        font-size: 1.8rem;
        min-width: 45px;
    }

    .hero-info {
        flex-direction: column;
        gap: 5px;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

@media (max-width: 900px) {
    .home-section.alt-bg {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* =========================================
   LISTE UNIFICATE (.rocket-description, .launch-description, .rocket-family)
   ========================================= */


.launch-description h4 {
    margin: 0;
}

/* 1. Reset e Spaziatura (UL e OL) */
.rocket-description ul,
.launch-description ul,
.rocket-family ul,
.rocket-description ol,
.launch-description ol,
.rocket-family ol {
    margin: 1rem 0;
    padding: 0;
    list-style: none;
}

/* 2. Stile degli elementi della lista (LI) */
.rocket-description li,
.launch-description li,
.rocket-family li {
    position: relative;
    padding-left: 1.5rem;
    /* Spazio per il bullet */
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
    line-height: 1.6;
    transition: color 0.2s, transform 0.2s;
}

/* Rimuove margine all'ultimo elemento */
.rocket-description li:last-child,
.launch-description li:last-child,
.rocket-family li:last-child {
    margin-bottom: 0;
}

/* Effetto Hover sulla riga */
.rocket-description li:hover,
.launch-description li:hover,
.rocket-family li:hover {
    color: var(--text-primary);
    /* Diventa bianco */
    /* Si sposta a destra */
}

/* 3. --- LISTE PUNTATE (UL) --- */
/* Pallino rosa brillante */
.rocket-description ul>li::before,
.launch-description ul>li::before,
.rocket-family ul>li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    /* Centrato otticamente */
    width: 6px;
    height: 6px;
    background-color: var(--accent-color);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(237, 30, 121, 0.4);
    transition: background-color 0.2s;
}

/* Cambio colore pallino all'hover */
.rocket-description ul>li:hover::before,
.launch-description ul>li:hover::before,
.rocket-family ul>li:hover::before {
    background-color: #fff;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

/* 4. --- LISTE NUMERATE (OL) --- */
/* Reset contatore */
.rocket-description ol,
.launch-description ol,
.rocket-family ol {
    counter-reset: unified-counter;
}

.rocket-description ol>li,
.launch-description ol>li,
.rocket-family ol>li {
    padding-left: 2rem;
    /* Più spazio per i numeri */
}

/* Generazione numero */
.rocket-description ol>li::before,
.launch-description ol>li::before,
.rocket-family ol>li::before {
    content: counter(unified-counter) ".";
    counter-increment: unified-counter;
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent-color);
    font-weight: 700;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
}

/* 5. --- LISTE ANNIDATE (Sotto-liste) --- */
.rocket-description ul ul,
.launch-description ul ul,
.rocket-family ul ul,
.rocket-description ol ol,
.launch-description ol ol,
.rocket-family ol ol,
.rocket-description ul ol,
.launch-description ul ol,
.rocket-family ul ol,
.rocket-description ol ul,
.launch-description ol ul,
.rocket-family ol ul {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    margin-left: 0.5rem;
    padding-left: 1rem;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}


/* --- Testo Descrizione --- */
.launch-text {
    margin-bottom: 1rem;
    /* Spazio tra testo e specifiche */
    width: 100%;
}

.launch-text a {
    transition: color 0.2s;
    text-decoration: dotted underline;
}

/* --- Contenitore Specifiche (Orbita + Payload) --- */
.launch-specs {
    display: flex;
    flex-wrap: wrap;
    /* Va a capo se lo schermo è troppo piccolo */
    gap: 1rem;
    /* Spazio orizzontale e verticale tra i box */
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-subtle);
    /* Opzionale: linea separatrice elegante */
}

/* --- Singolo Elemento Specifica --- */
.spec-item {
    flex: 1 1 0px;
    /* Si dividono lo spazio equamente */
    min-width: 200px;
    /* Non diventano mai troppo piccoli */

    display: flex;
    /* Per allineare icona e testo */
    align-items: center;
    /* Centratura verticale icona/testo */
    gap: 0.5rem;
}

/* Opzionale: Stile per l'icona per farla risaltare */
.spec-icon svg.mdi {
    color: var(--text-secondary);
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
    fill: currentColor;
}

.spec-value {
    font-weight: 500;
    /* Leggermente più marcato del testo normale */
}

/* =========================================
   ROCKET LINK BUTTON (Compact Style)
   ========================================= */

.rocket-link {
    display: inline-flex;
    /* Allinea icona e testo */
    align-items: center;
    /* Centratura verticale */
    gap: 10px;
    /* Spazio tra icona e testo */

    background: rgba(255, 255, 255, 0.05);
    /* Sfondo leggero */
    border: 1px solid var(--border-subtle);
    border-radius: 50px;
    /* Forma a pillola arrotondata */

    padding: 8px 20px;
    margin-bottom: 1.5rem;
    /* Spazio sotto (se messo sotto il titolo) */

    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

/* Stile dell'icona interna */
.rocket-link svg.mdi {
    color: var(--accent-color);
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
    fill: currentColor;
    transition: transform 0.2s;
}

/* Effetto Hover */
.rocket-link:hover {
    background: rgba(237, 30, 121, 0.1);
    /* Sfondo rosa chiarissimo */
    border-color: var(--accent-color);
    /* Bordo rosa */
    color: white;
    /* Testo bianco */
    box-shadow: 0 4px 15px rgba(237, 30, 121, 0.2);
    /* Glow */
    transform: translateY(-2px);
    /* Leggero sollevamento */
}

/* Animazione icona all'hover */
.rocket-link:hover svg.mdi {
    transform: rotate(-45deg);
    /* Simula il decollo (opzionale) */
}

/* =========================================
   ARTICLE SIDEBAR ELEMENTS
   ========================================= */

/* TAG CLOUD (Pillole) */
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: default;
    /* O pointer se un giorno li renderai cliccabili */
}

/* Effetto Hover sui Tag */
.tag-pill:hover {
    background: rgba(237, 30, 121, 0.1);
    border-color: var(--accent-color);
    color: var(--text-primary);
}

/* Icone nella lista categorie */
.sidebar-list .image-link {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-list .image-link svg.mdi {
    color: var(--text-secondary);
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
    fill: currentColor;
    transition: all ease 0.3s;
}

.sidebar-list .image-link:hover svg.mdi {
    color: var(--accent-color);
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
    fill: currentColor;
}

/* =========================================
   39. STATIC / THEMATIC PAGES (Artemis, Mars...)
   ========================================= */

/* Testo Introduttivo */
.lead-text {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #e0e0e0;
    margin-bottom: 2rem;
}

.separator {
    border: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--border-subtle), transparent);
    margin: 1.5rem 0;
}

/* --- FEATURES GRID (Veicoli) --- */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.feature-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    text-align: center;
    transition: transform 0.2s, background 0.2s;
}

.feature-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--accent-color);
}

.feature-card .icon-wrapper {
    background: rgba(237, 30, 121, 0.1);
    color: var(--accent-color);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem auto;
}

.feature-card .icon-wrapper svg.mdi {
    color: var(--text-primary);
    width: 2rem;
    height: 2rem;
    vertical-align: middle;
    fill: currentColor;
}

.feature-card h3 {
    font-size: 1.2rem;
    color: white;
    margin-bottom: 0.5rem;
}

.feature-card p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* --- TIMELINE (Missioni) --- */
.timeline-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
    position: relative;
    padding-left: 20px;
    /* Spazio per la linea */
}

/* Linea Verticale */
.timeline-list::before {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 0;
    width: 2px;
    background: var(--border-subtle);
}

.timeline-item {
    position: relative;
    padding-left: 2rem;
}

/* Pallino sulla linea */
.timeline-item::before {
    content: '';
    position: absolute;
    left: -6px;
    /* Centrato sulla linea larga 2px (left 0) */
    top: 5px;
    width: 14px;
    height: 14px;
    background: var(--bg-body);
    border: 2px solid var(--text-muted);
    border-radius: 50%;
    z-index: 1;
}

/* Pallino attivo/completato */
.timeline-item.completed::before {
    background: var(--accent-color);
    border-color: var(--accent-color);
    box-shadow: 0 0 10px rgba(237, 30, 121, 0.5);
}

.time-marker {
    font-family: 'Courier New', monospace;
    color: var(--accent-color);
    font-weight: 700;
    margin-bottom: 5px;
}

.time-content h4 {
    margin: 0 0 5px 0;
    color: white;
    font-size: 1.1rem;
}

.time-content p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* Lista pulita per sidebar */
.clean-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.clean-list li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.clean-list li strong {
    color: white;
    margin-right: 5px;
}

.clean-list li:last-child {
    border-bottom: none;
}

/* ... dopo le regole .feature-card ... */

/* Stile per quando la card è un Link */
a.feature-card {
    text-decoration: none;
    color: inherit;
    display: block;
    /* Occupa tutto lo spazio della griglia */
    height: 100%;
    /* Uniforma l'altezza */
    cursor: pointer;
}

/* Freccia nel titolo (classe .link-arrow passata a mdi_icon) */
.feature-card .link-arrow {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    opacity: 0;
    /* Nascosta di default */
    transform: translateX(-10px);
    transition: all 0.2s ease;
    color: var(--accent-color);
}

/* Effetto Hover specifico per le card cliccabili */
a.feature-card.clickable:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--accent-color);
}

/* Mostra e muovi la freccia all'hover */
a.feature-card.clickable:hover .link-arrow {
    opacity: 1;
}

/* =========================================
   40. ISS PAGE STYLES
   ========================================= */

/* Griglia Telemetria */
.iss-telemetry-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    /* Mappa grande, Dati a lato */
    gap: 1.5rem;
    margin-bottom: 3rem;
}

/* Mappa */
.iss-map-container {
    height: 475px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-card);
}

#issMap {
    height: 100%;
    width: 100%;
    background: #1a1a1a;
}

/* Stats Container */
.iss-stats-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.iss-stats-container .stat-card {
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.03);
}

.iss-stats-container .unit {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-left: 5px;
}

/* Griglia Equipaggio */
.crew-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.crew-member {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.2s;
}

.crew-member:hover {
    border-color: var(--accent-color);
}

.crew-icon {
    font-size: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crew-info {
    display: flex;
    flex-direction: column;
}

.crew-info strong {
    color: white;
    font-size: 0.95rem;
}

.crew-info span {
    font-size: 0.8rem;
    color: var(--text-secondary);
}


/* =========================================
   MEMORIAL BANNER (Apollo 1)
   ========================================= */

.memorial-card {
    position: relative;
    /* Fondamentale per l'overlay */
    /* Rimuoviamo il background-color fisso, ora c'è l'immagine */
    background-size: cover;
    background-position: center;
    /* Centra la foto (es. le teste degli astronauti) */
    background-repeat: no-repeat;

    border: 1px solid rgba(212, 175, 55, 0.3);
    /* Bordo Oro */
    border-left: 4px solid #d4af37;
    /* Striscia Oro a sinistra */
    border-radius: var(--radius-md);

    padding: 2.5rem;
    /* Un po' più di spazio */
    margin: 2rem 0 3rem 0;

    display: flex;
    align-items: center;
    overflow: hidden;
    /* Assicura che l'immagine non esca dai bordi arrotondati */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
    /* Ombra profonda */
}

/* Overlay Scuro (Il velo sopra la foto) */
.memorial-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradiente: molto scuro a sinistra (dove c'è il testo) -> più trasparente a destra */
    background: linear-gradient(to right, rgba(0, 0, 0, 0.95) 20%, rgba(0, 0, 0, 0.7) 60%, rgba(0, 0, 0, 0.4) 100%);
    z-index: 1;
    /* Sopra la foto */
}

/* Il contenuto deve stare SOPRA l'overlay */
.memorial-content {
    position: relative;
    z-index: 2;
    /* Sopra l'overlay */
    flex: 1;
    max-width: 800px;
    /* Evita che il testo vada troppo sopra le facce se la foto è a destra */
}

.memorial-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1rem;
}

.memorial-icon svg {
    width: 28px;
    height: 28px;
    color: #d4af37;
    filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.8));
    /* Glow dorato */
}

.memorial-header h3 {
    margin: 0;
    font-size: 1.6rem;
    color: #f1c40f;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.memorial-card p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #e0e0e0;
    /* Bianco leggermente spento */
    margin-bottom: 1.5rem;
    font-style: italic;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 1);
    /* Ombra per leggibilità massima */
}

/* Lista Nomi Astronauti */
.astronaut-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-family: 'Courier New', monospace;
}

.astro-name {
    font-weight: 700;
    color: white;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.5);
    padding-bottom: 2px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 1);
}

.astro-sep {
    color: #d4af37;
    font-size: 1.2rem;
    text-shadow: 0 0 5px rgba(212, 175, 55, 0.8);
}

/* =========================================
   41. RESPONSIVE MEDIA QUERIES (Global)
   ========================================= */

/* Tablet Landscape & Desktop Small (max 1024px) */
@media (max-width: 1024px) {

    /* Layout Griglia Principale (Sidebar scende sotto) */
    .grid-layout {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
        margin-top: 3rem;
    }

    /* Editor Admin */
    .editor-layout {
        grid-template-columns: 1fr;
    }

    .editor-sidebar {
        order: -1;
        /* Sidebar controlli sopra */
        margin-bottom: 2rem;
    }

    /* Hero Padding */
    .hero-content {
        padding: 0 3rem;
    }
}

/* Tablet Portrait & Mobile Large (max 900px) */
@media (max-width: 900px) {

    /* Hero Section */
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }

    .hero-content-left {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-info {
        flex-direction: column;
        /* Info impilate */
        gap: 5px;
        justify-content: center;
    }

    .hero-info .sep {
        display: none;
    }

    .hero-content-right {
        justify-content: center;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    /* Reset Padding Laterale Home */
    .home-section,
    .home-section.alt-bg {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    /* ISS Page */
    .iss-telemetry-grid {
        grid-template-columns: 1fr;
    }

    .iss-map-container {
        height: 300px;
    }
}

/* Mobile Standard (max 768px) */
@media (max-width: 768px) {

    /* Memorial Card Mobile */
    .memorial-card {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
        background-position: top center;
        /* Foto centrata in alto */
    }

    .memorial-overlay {
        background: rgba(0, 0, 0, 0.85);
    }

    .memorial-header,
    .astronaut-list {
        justify-content: center;
    }
}

/* Mobile Small (max 500px) */
@media (max-width: 500px) {


    /* Embedded Widget (Articoli) */
    .embedded-grid {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    /* Modale */
    .window-row {
        flex-direction: column;
        gap: 0.5rem;
    }

    .window-type {
        margin-bottom: 5px;
    }

    .badge {
        width: 100%;
        text-align: center;
    }
}

/* =========================================
   STATIC PAGE CONTENT (Container Testo)
   ========================================= */

.static-page-content {
    padding: 0rem;
    /* Spaziatura interna ampia per eleganza */
}

/* Responsive Mobile */
@media (max-width: 768px) {
    .static-page-content {
        padding: 0rem;
        /* Riduciamo il padding su mobile */
    }

}

/* Stili aggiuntivi specifici per adattare il layout satelliti */
.tle-block {
    font-family: 'Consolas', monospace;
    background: rgba(0, 0, 0, 0.3);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #0f0;
    overflow-x: auto;
    white-space: pre;
    font-size: 0.85rem;
}

.orbit-metric-box {
    background: var(--bg-surface);
    padding: 15px;
    border-radius: 12px;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
}

.orbit-metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin: 5px 0;
}

.orbit-metric-label {
    font-size: 0.8rem;
    color: #aaa;
    text-transform: uppercase;
}

/* Barra Apogeo/Perigeo */
.orbit-visual-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
}

.orbit-line {
    flex-grow: 1;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-color) 0%, #4facfe 100%);
    margin: 0 15px;
    position: relative;
}

.orbit-dot {
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 10px #fff;
}

/* =========================================
   FIX RESPONSIVE SATELLITE DETAILS
   ========================================= */

/* 1. Gestione della Griglia Principale su Mobile */
@media (max-width: 900px) {
    .grid-layout {
        display: block;
    }

    .main-content {
        width: 100%;
        margin-bottom: 30px;
    }

    .sidebar {
        width: 100%;
        margin-top: 20px;
    }
}

/* 2. Fix per le Info Boxes (i box quadrati in alto) */
.info-boxes {
    display: flex;
    flex-wrap: wrap;
    /* FONDAMENTALE: permette di andare a capo */
    gap: 15px;
    width: 100%;
}

.launch-box {
    flex: 1 1 300px;
    /* Si allarga ma non scende sotto i 300px */
    min-width: 0;
    /* Evita che il contenuto forzi la larghezza */
    box-sizing: border-box;
    /* Include padding nel calcolo larghezza */
}

/* 3. Fix per il blocco TLE (Codice verde) */
.tle-block {
    width: 100%;
    max-width: 100%;
    /* Assicura che non superi il contenitore */
    overflow-x: auto;
    /* Aggiunge la barra di scorrimento orizzontale SE serve */
    white-space: pre;
    /* Mantiene la formattazione del codice */
    box-sizing: border-box;
}

/* 4. Fix per la Visual Bar (Apogeo/Perigeo) */
@media (max-width: 600px) {
    .orbit-visual-bar {
        flex-direction: column;
        /* Impila verticalmente su mobile */
        gap: 15px;
        text-align: center;
    }

    .orbit-line {
        width: 100%;
        /* Linea larga tutto lo schermo */
        height: 2px;
        margin: 10px 0;
        /* Spazio sopra e sotto */
    }

    .orbit-dot {
        /* Centra il puntino sulla linea orizzontale */
        left: 50%;
        top: -4px;
    }
}

/* 5. Fix Generico per Immagini e Contenitori */
img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

.stage-box {
    overflow: hidden;
    /* Taglia contenuto in eccesso */
}

/* Stile per la lista Storico */
.history-list {
    background: rgba(0, 0, 0, 0.2);
    /* Sfondo leggermente più scuro */
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0;
    /* Nessun padding esterno */
    list-style: none;
    margin-top: 15px;
}

.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    /* Linea sottile tra le righe */
    transition: background 0.2s;
}

.history-item:last-child {
    border-bottom: none;
    /* Rimuove la linea all'ultimo elemento */
}

.history-item:hover {
    background: rgba(255, 255, 255, 0.03);
    /* Leggero effetto hover */
}

.history-date {
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.history-data {
    font-size: 0.9rem;
    color: var(--text-secondary);
    /* Grigio chiaro */
    text-align: right;
}

.history-data span {
    margin-left: 15px;
    /* Spazio tra i dati se sono sulla stessa riga */
    display: inline-block;
}

/* Mobile: Impila data e dati verticalmente */
@media (max-width: 600px) {
    .history-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .history-data {
        text-align: left;
    }

    .history-data span {
        margin-left: 0;
        margin-right: 15px;
    }
}



/* Stile per box di avviso nella sidebar */
.details-box.alert {
    background: rgba(255, 160, 0, 0.1);
    /* Sfondo ambra molto trasparente */
    border: 1px solid rgba(255, 160, 0, 0.3);
    /* Bordo ambra sottile */
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    line-height: 1.5;
    display: flex;
    /* Per allineare icona e testo */
    gap: 12px;
    /* Spazio tra icona e testo */
    align-items: flex-start;
}


.alert svg.mdi {
    color: #ffb300;
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: middle;
    fill: currentColor;
}

.details-box.alert p {
    margin: 0;
    /* Rimuove margini default del paragrafo */
}

/* Stile per box URGENTE nella sidebar */
.details-box.urgent {
    background: rgba(220, 20, 60, 0.15);
    border: 1px solid rgba(220, 20, 60, 0.4);
    color: rgba(255, 255, 255, 0.9);

    /* FLEXBOX FONDAMENTALE */
    display: flex;
    align-items: flex-start;
    /* Allinea tutto in alto */
    gap: 15px;

    font-size: 0.85rem;
    padding: 15px;
    border-radius: var(--radius-md, 8px);
}

/* Fix per l'Icona */
.urgent svg.mdi {
    color: #ff4444;
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;

    flex-shrink: 0;

    /* TRUCCO OTTICO: Abbassa l'icona per centrarla col testo */
    margin-top: 2px;
}

/* Fix per il Testo (Rimuove lo spazio extra) */
.details-box.urgent p {
    margin: 0;
    line-height: 1.5;
    width: 100%;
}

/* Colore dei link dentro l'avviso */
.details-box.urgent a {
    color: #ff6666;
    text-decoration: dotted underline;
    font-weight: bold;
}

#sat-map {
    background: #0b0d17;
    /* Colore di sfondo spazio */
}

/* Rimuove il bordo bianco di Leaflet se necessario */
.leaflet-container {
    background: #111 !important;
    outline: 0;
}


/* --- Stili specifici Pagina 2025 --- */

.hero-2025 {
    background-image: url('../resources/static/earth_orbit_2025.jpg');
    height: 60vh;
    min-height: 400px;
    /* Assicurati che background-size e position siano definiti nella classe generica .hero-section */
    margin-bottom: 2rem;
}

/* Utilities di spaziatura */
.section-spacer {
    margin-top: 3rem;
}

.mt-medium {
    margin-top: 1.5rem;
}

.mt-large {
    margin-top: 2rem;
}

/* Header della sezione News */
.news-section-header {
    margin-top: 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
}

/* Sidebar */
.sidebar-description {
    font-size: 0.9rem;
    color: #aaa;
    margin-bottom: 1rem;
}

.list-item-between {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

/*CAL*/

/* =========================================
   STILI PAGINA REPORT (2025.php)
   ========================================= */

/* Griglia per le Carte KPI (Numero lanci, successo, ecc) */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

/* Griglia dei Grafici (Charts) */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    /* 2 Colonne su desktop */
    gap: 2rem;
    margin-bottom: 3rem;
}

/* Contenitore Singolo Grafico */
.chart-box {
    background: var(--bg-surface);
    /* #1e1e1e */
    border: var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
    min-height: 350px;
    /* Altezza fissa per coerenza */
    display: flex;
    flex-direction: column;
}

.chart-box h3 {
    margin: 0 0 1.5rem 0;
    font-size: 1.1rem;
    color: var(--text-primary);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.chart-box canvas {
    width: 100% !important;
    height: 100% !important;
    max-height: 300px;
}

/* Responsive Grafici */
@media (max-width: 768px) {
    .charts-grid {
        grid-template-columns: 1fr;
        /* 1 Colonna su mobile */
    }

    .chart-box {
        min-height: 300px;
        padding: 1rem;
    }
}

/*BANNER MOMENTANEO*/
/* STILI PER IL BANNER REPORT (Temporaneo) */
.report-banner-wrapper {
    width: 100%;
    max-width: 1400px;
    /* Allineato con page-wrap */
    margin: 40px auto 10px;
    /* Spazio sopra e sotto */
    padding: 0 20px;
    box-sizing: border-box;
}

.report-banner {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.06) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 4px solid #ed1e79;
    /* Colore Accent */
    border-radius: 8px;
    padding: 25px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, border-color 0.2s ease;
    position: relative;
    overflow: hidden;
}

.report-banner:hover {
    transform: translateY(-2px);
    border-color: rgba(237, 30, 121, 0.5);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.08) 100%);
}

/* Effetto luce di sfondo */
.report-banner::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 100%;
    background: radial-gradient(circle at center, rgba(237, 30, 121, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.rb-content {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
}

.rb-icon {
    background: rgba(237, 30, 121, 0.1);
    color: #ed1e79;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rb-icon svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

.rb-text h3 {
    margin: 0 0 5px 0;
    font-size: 1.25rem;
    color: #fff;
}

.rb-text p {
    margin: 0;
    color: #a0a0a0;
    font-size: 0.95rem;
}

.btn-report {
    background: #ed1e79;
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: background 0.2s;
    z-index: 2;
    /* Sopra l'effetto luce */
}

.btn-report:hover {
    background: #c91463;
}

.btn-report svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* Responsive */
@media (max-width: 768px) {
    .report-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }

    .rb-content {
        width: 100%;
    }

    .rb-action {
        width: 100%;
        margin-top: 15px;
        display: flex;
        justify-content: flex-end;
    }

    .btn-report {
        width: 100%;
        justify-content: center;
    }


}

/* =========================================
   2. DATI E METRICHE (Metric Box)
   ========================================= */

/* Gruppi Dati (es. Status Box) */
.data-group {
    margin-top: 15px;
}

.data-label {
    font-size: 0.9rem;
    color: #aaa;
    margin: 0;
}

.data-value {
    font-size: 1.1rem;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Box Metriche Orbitali (unione di metric-box e orbit-metric-box) */
.metric-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    /* Corretto da 'left' */
    text-align: left;
    padding: 15px;
    /* Assicura padding se sovrascrive launch-box */
}

.orbit-metric-label {
    font-size: 0.8rem;
    color: #aaa;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.orbit-metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin: 5px 0 10px 0;
}

/* Icone nelle metriche */
.metric-box svg,
.metric-box i {
    width: 24px;
    height: 24px;
    font-size: 24px;
    fill: var(--accent-color);
    color: var(--accent-color);
}

/* =========================================
   3. BARRA VISUALE (Apogeo/Perigeo)
   ========================================= */

.orbit-visual-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
}

.orbit-visual-item {
    text-align: center;
}

.orbit-visual-label {
    display: block;
    font-size: 0.8rem;
    color: #aaa;
}

.orbit-visual-value {
    color: #fff;
    font-weight: bold;
}

.orbit-line {
    flex-grow: 1;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-color) 0%, #4facfe 100%);
    margin: 0 15px;
    position: relative;
}

.orbit-dot {
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 10px #fff;
}

/* Mobile per Visual Bar */
@media (max-width: 600px) {
    .orbit-visual-bar {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .orbit-line {
        width: 100%;
        margin: 10px 0;
    }

    .orbit-dot {
        left: 50%;
        /* Mantiene il punto centrato */
    }
}

/* =========================================
   4. TLE BLOCK (Codice)
   ========================================= */

.tle-intro {
    margin: 0;
}

.tle-block {
    font-family: 'Consolas', monospace;
    background: rgba(0, 0, 0, 0.3);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #0f0;
    font-size: 0.85rem;

    /* Gestione Overflow */
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    white-space: pre;
    box-sizing: border-box;
}

/* =========================================
   5. MAPPA & POPUP
   ========================================= */

#sat-map {
    width: 100%;
    height: 400px;
    border-radius: 8px;
    margin-bottom: 30px;
    border: 1px solid #333;
}

.popup-content {
    text-align: center;
}

.popup-title {
    font-size: 1.1rem;
}

.popup-divider {
    margin: 5px 0;
    border: 0;
    border-top: 1px solid #444;
}

.popup-label {
    color: #aaa;
}

.popup-value-bold {
    font-weight: bold;
}

/* =========================================
   6. STORICO (History List)
   ========================================= */

.history-list {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0;
    list-style: none;
    margin-top: 15px;
}

.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.2s;
}

.history-item:last-child {
    border-bottom: none;
}

.history-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

.history-date {
    font-weight: 600;
    color: var(--accent-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.history-date svg,
.history-date i {
    width: 18px;
    height: 18px;
    fill: var(--accent-color);
}

.history-data {
    font-size: 0.9rem;
    color: var(--text-secondary, #ccc);
    /* Fallback colore */
    text-align: right;
}

.history-data-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 15px;
    /* Spaziatura tra item desktop */
}

.history-data-item svg,
.history-data-item i {
    width: 14px;
    height: 14px;
    fill: #aaa;
    color: #aaa;
}

.no-history {
    color: #888;
    font-style: italic;
}

/* Mobile per Storico */
@media (max-width: 600px) {
    .history-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .history-data {
        text-align: left;
    }

    .history-data-item {
        margin-left: 0;
        margin-right: 15px;
        /* Spaziatura tra item mobile */
    }
}

/* =========================================
   7. STATUS & ALERTS
   ========================================= */

.status-decayed {
    background-color: #d32f2f;
    color: white;
}

.decay-alert-box {
    background: rgba(255, 0, 0, 0.1);
    border: 1px solid #d32f2f;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    text-align: center;
}

.decay-title {
    color: #ef5350;
    margin-top: 0;
}

/*API*/
/* =========================================
   LIVE BLOG - DARK SPACE THEME
   ========================================= */

/* Barra di stato "LIVE NOW" */
.live-status-bar {
    background-color: rgba(237, 30, 121, 0.1);
    /* Versione trasparente del tuo accent pink */
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 0 15px rgba(237, 30, 121, 0.2);
    /* Leggero bagliore neon */
    margin-top: 1rem;
}

/* Il pallino pulsante */
.live-dot {
    height: 10px;
    width: 10px;
    background-color: var(--accent-color);
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 8px var(--accent-color);
    /* Glow sul pallino */
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(237, 30, 121, 0.7);
    }

    70% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(237, 30, 121, 0);
        /* Effetto onda */
    }

    100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(237, 30, 121, 0);
    }
}

/* Contenitore della timeline verticale */
.live-feed-container {
    margin-bottom: 40px;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
    /* Linea guida sottile */
    padding-left: 25px;
    position: relative;
}

/* Singolo post del live blog */
.live-entry {
    position: relative;
    margin-bottom: 25px;
    background: var(--bg-surface);
    padding: 20px;
    border-radius: var(--radius-md);
    border: var(--border-subtle);
    box-shadow: var(--shadow-card);
    transition: all 0.3s ease;
    color: var(--text-secondary);
}

/* Effetto hover sulla card */
.live-entry:hover {
    background: var(--bg-surface-hover);
    border-color: rgba(255, 255, 255, 0.15);
}

/* Pallino sulla timeline per ogni post */
.live-entry::after {
    content: '';
    position: absolute;
    top: 25px;
    left: -32px;
    /* Posizionamento preciso sulla linea verticale */
    width: 12px;
    height: 12px;
    background-color: var(--bg-body);
    border: 2px solid var(--text-secondary);
    border-radius: 50%;
    z-index: 1;
}

/* Evidenzia il pallino dell'ultimo post se vuoi, o lasciali tutti uguali */
.live-entry:first-child::after {
    border-color: var(--accent-color);
    background-color: var(--bg-surface);
}

/* Stile per i post FISSATI (Pinned) */
.live-entry.pinned {
    border: 1px solid var(--accent-color);
    background: linear-gradient(to bottom right, rgba(237, 30, 121, 0.05), transparent);
}

.live-entry.pinned::before {
    content: '📌 Fissato';
    position: absolute;
    top: -12px;
    right: 15px;
    background: var(--accent-gradient);
    color: #fff;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(237, 30, 121, 0.4);
    z-index: 2;
}

/* Animazione nuovo post in arrivo */
.live-entry.new-entry {
    animation: highlightFadeDark 2s ease-out;
}

@keyframes highlightFadeDark {
    0% {
        background-color: rgba(237, 30, 121, 0.15);
        /* Flash rosa scuro */
        transform: translateY(-5px);
    }

    100% {
        background-color: var(--bg-surface);
        transform: translateY(0);
    }
}

/* Header del post (Data e Autore) */
.entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 8px;
}

.entry-time {
    font-weight: bold;
    color: var(--accent-color);
    font-family: monospace;
    /* Tocco "tech" per l'orario */
    font-size: 0.95rem;
}

.entry-author {
    color: var(--text-muted);
    font-style: italic;
}

/* Contenuto del post */
.entry-content {
    line-height: 1.7;
    color: var(--text-primary);
    font-size: 1rem;
}

/* Link dentro i post */
.entry-content a {
    color: var(--accent-color);
    text-decoration: none;
    border-bottom: 1px dotted var(--accent-color);
}

.entry-content a:hover {
    color: var(--text-primary);
    background-color: var(--accent-color);
}

/* Messaggio di caricamento */
.loading-live {
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    margin: 20px 0;
    opacity: 0.7;
}

/* =========================================
       API DOCUMENTATION STYLES
       ========================================= */

/* Layout & Spacing */
.api-container {
    padding: 20px 0;
}

.docs-header {
    margin-bottom: 50px;
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 30px;
}

/* Typography */
.docs-title {
    font-size: 2.5rem;
    color: var(--text-primary);
    margin-bottom: 10px;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.docs-subtitle {
    color: var(--text-secondary);
    font-size: 1.1rem;
    font-weight: 300;
}

.api-intro-text {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 20px;
}

.api-section-title {
    font-size: 1.8rem;
    color: var(--text-primary);
    margin: 60px 0 30px 0;
    display: flex;
    align-items: center;
    gap: 15px;
}

.api-section-title::before {
    content: '#';
    color: var(--accent-color);
}

.section-desc {
    color: var(--text-secondary);
    margin-bottom: 20px;
}

/* Info Box */
.info-box {
    background: rgba(33, 150, 243, 0.1);
    border-left: 3px solid #2196f3;
    padding: 15px;
    margin: 20px 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.base-url-code {
    color: var(--accent-color);
    font-weight: bold;
}

/* Endpoint Cards */
.endpoint-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0;
    margin-bottom: 30px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.endpoint-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    border-color: rgba(237, 30, 121, 0.3);
}

.endpoint-header {
    background: rgba(255, 255, 255, 0.03);
    padding: 15px 25px;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.method-badge {
    background: rgba(33, 150, 243, 0.15);
    color: #64b5f6;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
    border: 1px solid rgba(33, 150, 243, 0.3);
}

.endpoint-url {
    font-family: 'Courier New', monospace;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
}

.endpoint-body {
    padding: 25px;
}

.endpoint-desc {
    color: var(--text-secondary);
    margin-bottom: 20px;
    line-height: 1.6;
}

/* Tables */
.param-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 0.9rem;
}

.param-table th {
    text-align: left;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-subtle);
    padding: 10px 0;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
}

.param-table td {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    vertical-align: top;
}

.param-name {
    font-family: 'Courier New', monospace;
    color: var(--accent-color);
    font-weight: bold;
}

.param-type {
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--text-primary);
}

/* Code Blocks */
.code-block {
    background: #0f0f0f;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 20px;
    overflow-x: auto;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.85rem;
    color: #d4d4d4;
    margin-top: 15px;
    position: relative;
}

.code-label {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--border-subtle);
    color: var(--text-muted);
    font-size: 0.7rem;
    padding: 2px 8px;
    border-bottom-left-radius: 6px;
}

.json-key {
    color: #9cdcfe;
}

.json-string {
    color: #ce9178;
}

.json-number {
    color: #b5cea8;
}

/* Sidebar Helpers */
.sidebar-offset {
    margin-top: 20px;
}

.sidebar-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 15px;
}

.sidebar-help-box {
    border: 1px solid var(--accent-color);
    background: rgba(237, 30, 121, 0.05);
}

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


/* CONTAINER CARDS */
.mission-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

/* HEADER CARD */
.card-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.card-header-flex h3 {
    margin: 0;
    font-size: 1.15rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* GRID PARAMETRI */
.card-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    background: rgba(255, 255, 255, 0.03);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.card-stats-grid strong {
    display: block;
    font-size: 1rem;
    color: var(--text-primary);
}

.stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* TESTO AGGIORNAMENTO */
.tle-update-text {
    font-size: 0.85rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 15px;
}

/* STILE PER SATELLITI RIENTRATI */
.decayed-style {
    opacity: 0.65;
    filter: grayscale(0.4);
    border-style: dashed;
}

.decayed-style .status-pill {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
}

/* SIDEBAR STATS */
.total-stats {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.total-stats strong {
    color: var(--theme-color);
    font-size: 1.1rem;
}



/* Card Satellite Modernizzate */
.sat-card {
    background: var(--bg-surface);
    border: var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 20px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.sat-card:hover {
    background: var(--bg-surface-hover);
    border-color: var(--accent-color);
    transform: translateY(-5px);
    box-shadow: var(--shadow-card);
}

.sat-card-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.norad-id {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: bold;
    letter-spacing: 1px;
}

.sat-badge {
    font-size: 0.6rem;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 800;
}

.b-active {
    background: rgba(0, 255, 136, 0.1);
    color: #00ff88;
}

.b-decay {
    background: rgba(237, 30, 121, 0.1);
    color: var(--accent-color);
}

.sat-title {
    color: var(--text-primary);
    font-size: 1.1rem;
    margin: 0 0 20px 0;
}

.sat-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.02);
    padding: 10px;
    border-radius: var(--radius-sm);
}

.info-val {
    display: block;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.95rem;
}

.info-label {
    color: var(--text-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
}

.sat-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.tle-stamp {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.sat-link-btn {
    color: var(--accent-color);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 800;
    transition: 0.2s;
}

.sat-link-btn:hover {
    color: var(--text-primary);
}

/* Effetto per i satelliti rientrati */
.sat-card.is-decayed {
    opacity: 0.7;
    border-style: dashed;
}

.tle-stamp svg.mdi {
    color: var(--text-secondary);
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
    fill: currentColor;
}

/* CARD SATELLITE - NUOVO STILE */
.sat-card {
    background: var(--bg-surface);
    border: var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 20px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.sat-card:hover {
    background: var(--bg-surface-hover);
    border-color: var(--accent-color);
    transform: translateY(-5px);
    box-shadow: var(--shadow-card);
}

.sat-card-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.sat-badge {
    font-size: 0.65rem;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 800;
    text-transform: uppercase;
}

.b-active {
    background: rgba(0, 255, 136, 0.1);
    color: #00ff88;
    border: 1px solid rgba(0, 255, 136, 0.2);
}

.b-decay {
    background: rgba(237, 30, 121, 0.1);
    color: var(--accent-color);
    border: 1px solid rgba(237, 30, 121, 0.2);
}

.sat-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    background: rgba(255, 255, 255, 0.02);
    padding: 15px;
    border-radius: var(--radius-sm);
    margin: 15px 0;
}

.info-val {
    display: block;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.1rem;
}

.info-label {
    color: var(--text-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
}

/* STORICO (Details) */
.history-list-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.history-card-row {
    flex-direction: row !important;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
}

/* MAPPA & TLE */
.sat-map-frame {
    height: 450px;
    border-radius: var(--radius-lg);
    border: var(--border-subtle);
    filter: grayscale(0.2) brightness(0.8);
}

.tle-code-block {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: #00ff88;
    background: #000;
    padding: 20px;
    border-radius: var(--radius-sm);
    border: 1px solid #333;
}

/* =========================================
   BLOCCO ANOMALIE (LANCIO) - Full Red Glass
   ========================================= */

.launch-anomaly {
    background: rgba(231, 76, 60, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border: 1px solid rgba(255, 77, 77, 0.3);
    border-radius: var(--radius-md);

    padding: 24px;
    margin: 30px 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.15);

    /* Forza il contenuto a stare sotto il badge */
    display: flex;
    flex-direction: column;
}

/* Badge "Report Anomalia" come blocco separato */
.launch-anomaly::before {
    content: 'Anomalia di lancio';
    display: table;
    /* Si adatta alla larghezza del testo */
    font-size: 0.65rem;
    font-weight: 900;
    background: #ff4d4d;
    color: #fff;
    padding: 4px 12px;
    border-radius: 4px;
    margin-bottom: 20px;
    /* Spazio netto dal testo/titoli sotto */
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Titoli interni */
.launch-anomaly h1,
.launch-anomaly h2,
.launch-anomaly h3 {
    color: #ff4d4d;
    margin: 0 0 15px 0;
    font-weight: 800;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(255, 77, 77, 0.3);
}

/* Testo */
.launch-anomaly p {
    color: #ffe5e5;
    line-height: 1.7;
    margin-bottom: 15px;
}

/* Rimuove il margine dall'ultimo elemento per pulizia */
.launch-anomaly *:last-child {
    margin-bottom: 0;
}

/* Animazione pulsante dello sfondo */
@keyframes anomaly-pulse {
    0% {
        background: rgba(231, 76, 60, 0.15);
    }

    50% {
        background: rgba(231, 76, 60, 0.22);
    }

    100% {
        background: rgba(231, 76, 60, 0.15);
    }
}

.launch-anomaly {
    animation: anomaly-pulse 4s infinite ease-in-out;
}

/* =========================================
   ARTICOLO NEWS (Stile Editoriale Completo)
   ========================================= */

/* 1. CONTENITORE E LAYOUT */
article.news-article {
    margin: 0 auto;
    padding: 2rem 1.5rem;
    background-color: transparent;
}

/* 2. GERARCHIA DEI TITOLI (H1-H5) */

/* H1: Il Titolo Principale */
article.news-article h1 {
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin: 0;
    color: var(--text-primary);
    font-weight: 800;

}

/* H2: Sezioni Principali (I "Capitoli") */
article.news-article h2 {
    font-size: 1.8rem;
    line-height: 1.3;
    color: var(--text-primary);
    margin-top: 3.5rem;
    margin-bottom: 1.2rem;
    font-weight: 700;
    border-left: 4px solid var(--accent-color);
    padding-left: 1.2rem;
}

/* H3: Sotto-argomenti */
article.news-article h3 {
    font-size: 1.45rem;
    line-height: 1.4;
    color: var(--text-primary);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

/* H4: Titoli di Paragrafo o Focus */
article.news-article h4 {
    font-size: 1.2rem;
    line-height: 1.4;
    color: var(--text-primary);
    margin-top: 2rem;
    margin-bottom: 0.8rem;
    font-weight: 700;
}

/* H5: Micro-dettagli o "In pillole" */
article.news-article h5 {
    font-size: 0.9rem;
    color: var(--accent-color);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* 3. TESTO E PARAGRAFI */

/* Paragrafi Standard */
article.news-article p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-secondary);
}

/* 4. ELEMENTI MULTIMEDIALI E DECORATIVI */

/* Immagini e Video */
article.news-article img,
article.news-article iframe,
article.news-article video {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    display: block;
}

/* Citazioni (Blockquote) */
article.news-article blockquote {
    margin: 2.5rem 0;
    padding: 1.5rem 2rem;
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--accent-color);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--text-primary);
    line-height: 1.6;
}

/* Liste Editoriali */
article.news-article ul,
article.news-article ol {
    margin: 1.5rem 0 1.5rem 1.5rem;
    color: var(--text-secondary);
}

article.news-article ul {
    list-style: none;
    padding-left: 0;
}

article.news-article ul li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.8rem;
    line-height: 1.6;
}

article.news-article ul li::before {
    content: "•";
    color: var(--accent-color);
    font-weight: bold;
    position: absolute;
    left: 0;
    font-size: 1.2rem;
}

/* 5. LOGICA DI SPAZIATURA ADIACENTE (Cleaning) */

/* Se un titolo segue un altro titolo, riduciamo il margine */
article.news-article h2+h3,
article.news-article h3+h4,
article.news-article h4+h5 {
    margin-top: 1rem;
}

/* Rimuove margine superiore se il titolo è il primo elemento dopo un'immagine */
article.news-article img+h2,
article.news-article img+h3 {
    margin-top: 1.5rem;
}

/* 6. LINK */
article.news-article a {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid rgba(237, 30, 121, 0.2);
    transition: all 0.2s ease;
}

article.news-article a:hover {
    color: var(--text-primary);
    border-bottom-color: var(--accent-color);
    background: rgba(237, 30, 121, 0.05);
}

/* 7. RESPONSIVE AGGIUNTIVO */
@media (max-width: 768px) {
    article.news-article {
        padding: 1.5rem 1rem;
    }

    article.news-article h1 {
        font-size: 2.2rem;
    }

    article.news-article h2 {
        font-size: 1.6rem;
    }

    article.news-article h3 {
        font-size: 1.3rem;
    }
}

/*ROBA ARTEMIS II*/
/* Container della Dashboard */
.mission-dashboard {
    margin-top: 2rem;
}

/* Griglia Telemetria Principale */
.telemetry-header-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.telemetry-card {
    background: #111;
    border: 1px solid #333;
    padding: 1.5rem;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

.telemetry-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #00d4ff;
}

.telemetry-label {
    display: block;
    color: #888;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.telemetry-value {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    font-family: 'Inter', sans-serif;
}

.telemetry-unit {
    font-size: 0.9rem;
    color: #00d4ff;
    margin-left: 5px;
}

/* Visualizzazione Vettori (look radar/tecnico) */
.vector-display {
    background: #0a0a0a;
    border: 1px solid #222;
    border-radius: 12px;
    padding: 2rem;
    margin-top: 2rem;
}

.vector-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    text-align: center;
}

.vector-item {
    position: relative;
}

.vector-axis {
    font-size: 0.8rem;
    color: #00d4ff;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto 1rem;
}

.vector-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.2rem;
    color: #eee;
}

/* Responsive */
@media (max-width: 768px) {
    .vector-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .telemetry-value {
        font-size: 1.5rem;
    }
}

/* Container principale del video */
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* Rapporto 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    margin-bottom: 1.5rem;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

/* Effetto al passaggio del mouse (opzionale) */
.video-wrapper:hover {
    border-color: rgba(0, 212, 255, 0.4);
}

/* Stilizzazione Iframe */
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    z-index: 1;
}

/* Overlay tecnologico (Angoli a mirino) */
.video-wrapper::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 15px;
    width: 20px;
    height: 20px;
    border-top: 2px solid rgba(0, 212, 255, 0.5);
    border-left: 2px solid rgba(0, 212, 255, 0.5);
    z-index: 2;
    pointer-events: none;
}

.video-wrapper::after {
    content: '';
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 20px;
    height: 20px;
    border-bottom: 2px solid rgba(0, 212, 255, 0.5);
    border-right: 2px solid rgba(0, 212, 255, 0.5);
    z-index: 2;
    pointer-events: none;
}

/* Etichetta "REC" o "FEED" in alto a destra */
.live-stream-container {
    position: relative;
}

.helper-text {
    font-size: 0.85rem;
    color: #666;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.helper-text::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #ff0055;
    border-radius: 50%;
    display: inline-block;
    animation: blink 1.5s infinite;
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }

    100% {
        opacity: 1;
    }
}

/* Artemis II Live Banner */
.mission-live-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 1rem 5rem;
    background: var(--bg-surface);
    border-bottom: 2px solid var(--accent-color);
    box-shadow: var(--shadow-card);
    position: relative;
    z-index: 100;
}

.live-status {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(237, 30, 121, 0.1);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(237, 30, 121, 0.3);
}

.live-dot {
    width: 10px;
    height: 10px;
    background-color: var(--accent-color);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--accent-color);
    animation: live-pulse 1.5s infinite ease-in-out;
}

.live-label {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--accent-color);
    white-space: nowrap;
}

.banner-info {
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 15px;
}

.mission-name {
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    font-size: 0.9rem;
    padding-right: 15px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.mission-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.banner-link {
    background: var(--accent-gradient);
    color: var(--text-primary);
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.banner-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(237, 30, 121, 0.4);
    filter: brightness(1.1);
}

/* Animazione Pulsante */
@keyframes live-pulse {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Mobile Layout */
@media (max-width: 900px) {
    .mission-live-banner {
        flex-direction: column;
        text-align: center;
        padding: 20px;
        gap: 15px;
    }

    .banner-info {
        flex-direction: column;
        gap: 5px;
    }

    .mission-name {
        border-right: none;
        padding-right: 0;
    }
}

.dual-video-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1rem;
}

.video-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.telemetry-error {
    color: #ff0055;
    font-size: 0.8rem;
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
}

@media (max-width: 1024px) {
    .dual-video-container {
        grid-template-columns: 1fr;
    }
}

/* Griglia a 4 colonne per la telemetria */
.telemetry-header-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}

/* Stile speciale per la distanza lunare */
.telemetry-card.highlight-moon {
    border-bottom: 2px solid #fdfdfd;
    /* Colore lunare */
    background: linear-gradient(180deg, var(--bg-surface) 0%, rgba(255, 255, 255, 0.05) 100%);
}

.telemetry-card.highlight-moon .telemetry-label {
    color: #fdfdfd;
}

@media (max-width: 1100px) {
    .telemetry-header-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.telemetry-card svg.mdi {
    color: var(--accent-color);
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
    fill: currentColor;
}

.mission-open {
    font-size: 0.8rem;
    color: var(--accent-hover);
    text-decoration: dotted underline;
    transition: all 0.2s ease;
}

.mission-open:hover {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-decoration: dotted underline;
}

.mission-open svg.mdi {
    color: var(--accent-color);
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
    fill: currentColor;
    transition: all 0.2s ease;
}

.mission-open:hover svg.mdi {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-decoration: dotted underline;
    transition: all 0.2s ease;
}

.video-label svg.mdi {
    color: var(--accent-color);
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
    fill: currentColor;
    transition: all 0.2s ease;
}

/* =========================================
   2. STILI MISSION CONTROL
   ========================================= */

.mission-control-section {
    padding: 2rem;
    color: var(--text-primary);
}

.telemetry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    border-bottom: var(--border-subtle);
    padding-bottom: 1rem;
}

.live-indicator {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.dot {
    width: 8px;
    height: 8px;
    background-color: var(--accent-color);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent-color);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

/* Dashboard Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.panel {
    background: var(--bg-surface);
    padding: 1.5rem;
    border-radius: var(--radius-md);
    border: var(--border-subtle);
    transition: transform 0.3s ease;
}

.map-panel {
    grid-row: span 2;
    position: relative;
    overflow: hidden;
    min-height: 300px;
}

.map-overlay-info {
    position: absolute;
    bottom: 15px;
    left: 15px;
    font-size: 0.7rem;
    letter-spacing: 1px;
    color: var(--text-secondary);
    background: rgba(0,0,0,0.5);
    padding: 4px 8px;
    border-radius: 4px;
}

/* Stats Styling */
.panel-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 0.5rem;
}

.panel-value-group {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.mono-font { font-family: 'Courier New', Courier, monospace; }

.unit {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-left: 4px;
}

/* Progress Bars */
.progress-bar-bg {
    height: 4px;
    background: #333;
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: var(--accent-gradient);
    border-radius: 2px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .dashboard-grid { grid-template-columns: 1fr; }
    .map-panel { grid-row: span 1; }
}

/* =========================================
   Eclipse Tracker & Mission Dashboard Custom CSS
   ========================================= */

.eclipse-hero {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../../resources/static/eclipse.jpg') center/cover no-repeat;
}

.tracker-card {
    background: var(--bg-surface);
    padding: 2rem;
    border-radius: var(--radius-lg);
    border: var(--border-subtle);
    box-shadow: var(--shadow-card);
}

.tracker-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.tracker-input {
    padding: 10px 15px;
    border-radius: var(--radius-sm);
    border: var(--border-subtle);
    background: var(--bg-body);
    color: var(--text-primary);
    flex-grow: 1;
    min-width: 220px;
}

.tracker-input:focus {
    outline: none;
    border-color: var(--accent-color);
}

.tracker-results {
    margin-top: 2rem;
    border-top: var(--border-subtle);
    padding-top: 2rem;
    display: none;
}

.sidebar-divider {
    border: 0;
    border-top: var(--border-subtle);
    margin: 15px 0;
}

.btn-action {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Aggiunta dello stile personalizzato per evidenziare il colore primary/accent nei risultati */
.tracker-result-card {
    background: var(--bg-surface-hover);
    border: var(--border-subtle);
    border-left: 4px solid var(--accent-color);
    padding: 1.5rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}
.tracker-result-card h4 {
    color: var(--accent-color);
    margin-top: 0;
}
.tracker-result-row {
    display: flex;
    justify-content: space-between;
    margin: 8px 0;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 6px;
}