body {
    background-color: #111827;
    color: #e5e7eb;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    padding-bottom: 80px; /* Spazio per la taskbar in basso */
    margin: 0;
   /* Estendi lo sfondo sotto la status bar su iOS */
    padding-top: constant(safe-area-inset-top); /* legacy iOS 11 */
    padding-top: env(safe-area-inset-top);      /* iOS 12+ */
}

.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #181c2a 0%, #232a3d 100%);
    z-index: -999; /* resta sempre dietro a tutto */
}

.card {
    background: rgba(31, 41, 55, 0.55);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.18s, box-shadow 0.18s;
    /* Liquid glass effect: subtle inner shadow */
    box-shadow: 0 2px 8px rgba(0,0,0,0.08), inset 0 1px 12px rgba(255,255,255,0.04);
}


.card:hover {
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12), inset 0 1px 16px rgba(255,255,255,0.06);
}


.btn-primary, .btn-success, .aggiungi-slot, .toggle-congo, .select-player-btn, .filter-button, .taskbar-item {
    background: rgba(30, 41, 59, 0.38);
    border: 1px solid rgba(255,255,255,0.08);
    color: #f3f4f6;
    transition: all 0.18s ease;
    /* Fallback for old hardware: no blur */
}


.btn-primary {
    background: linear-gradient(90deg, rgba(37,99,235,0.22) 0%, rgba(96,165,250,0.18) 100%);
    border: 1px solid rgba(96,165,250,0.18);
}


.btn-primary:hover {
    background: linear-gradient(90deg, rgba(37,99,235,0.32) 0%, rgba(96,165,250,0.22) 100%);
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 2px 8px rgba(37,99,235,0.10);
}


.btn-success {
    background: linear-gradient(90deg, rgba(16,185,129,0.22) 0%, rgba(16,185,129,0.18) 100%);
    border: 1px solid rgba(16,185,129,0.18);
}


.btn-success:hover {
    background: linear-gradient(90deg, rgba(16,185,129,0.32) 0%, rgba(16,185,129,0.22) 100%);
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 2px 8px rgba(16,185,129,0.10);
}


.aggiungi-slot, .toggle-congo {
    border-radius: 8px !important;
    background: linear-gradient(90deg, rgba(139,92,246,0.18) 0%, rgba(245,158,11,0.12) 100%);
    border: 1px solid rgba(139,92,246,0.18);
    color: #f3f4f6;
    padding: 0.5rem 1rem;
    font-weight: 500;
    box-shadow: none;
}


.aggiungi-slot:hover {
    background: linear-gradient(90deg, rgba(139,92,246,0.28) 0%, rgba(245,158,11,0.18) 100%);
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 2px 8px rgba(139,92,246,0.10);
}


.toggle-congo {
    background: linear-gradient(90deg, rgba(245,158,11,0.18) 0%, rgba(139,92,246,0.12) 100%);
    border: 1px solid rgba(245,158,11,0.18);
    border-radius: 8px !important;
}


.toggle-congo:hover {
    background: linear-gradient(90deg, rgba(245,158,11,0.28) 0%, rgba(139,92,246,0.18) 100%);
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 2px 8px rgba(245,158,11,0.10);
}

.select-player-btn {
    background: rgba(16, 44, 105, 0.3);
    border: 1px solid rgba(54, 92, 139, 0.3);
}

.select-player-btn:hover {
    background: rgba(16, 44, 105, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.filter-button {
    background: rgba(55, 65, 81, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.filter-button.active {
    background: rgba(37, 99, 235, 0.5);
    border: 1px solid rgba(96, 165, 250, 0.3);
}

.filter-button:hover {
    background: rgba(75, 85, 99, 0.5);
}

input, select {
    background: rgba(55, 65, 81, 0.5);
    color: #f3f4f6;
    border: 1px solid rgba(75, 85, 99, 0.5);
    transition: all 0.2s;
    backdrop-filter: blur(5px);
}

input:focus, select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

input::placeholder {
    color: #9ca3af;
}

/* Scrollbar personalizzata */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(31, 41, 55, 0.5);
}

::-webkit-scrollbar-thumb {
    background: rgba(75, 85, 99, 0.5);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(107, 114, 128, 0.5);
}

.loader {
    border: 3px solid rgba(55, 65, 81, 0.5);
    border-radius: 50%;
    border-top: 3px solid #3b82f6;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
    display: inline-block;
    margin-right: 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.positive {
    color: #10b981;
}

.negative {
    color: #ef4444;
}

.player-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.player-table th, .player-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid rgba(55, 65, 81, 0.5);
}

.player-table th {
    color: #9ca3af;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.875rem;
    cursor: pointer;
    background: rgba(31, 41, 55, 0.7);
}

.player-table th:hover {
    background: rgba(55, 65, 81, 0.5);
}

.player-table tr:hover {
    background: rgba(55, 65, 81, 0.3);
}

.role-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: bold;
}

.role-A {
    background-color: #ef4444;
    color: white;
}

.role-C {
    background-color: #3b82f6;
    color: white;
}

.role-D {
    background-color: #10b981;
    color: white;
}

.role-P {
    background-color: #f59e0b;
    color: white;
}

.filter-buttons {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.filter-button {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.filter-button.active {
    background: rgba(37, 99, 235, 0.5);
}

.filter-button:hover {
    background: rgba(75, 85, 99, 0.5);
}

.congo-section {
    margin: 15px 0;
    padding: 15px;
    background: rgba(45, 55, 72, 0.5);
    border-radius: 8px;
    border-left: 4px solid #f59e0b;
    display: none;
}

.congo-visible {
    display: block;
}

.player-slot {
    margin-bottom: 10px;
    padding: 10px;
    background: rgba(55, 65, 81, 0.5);
    border-radius: 6px;
}

.player-slot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.remove-slot {
    background: rgba(239, 68, 68, 0.5);
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
}

.player-details {
    background: rgba(31, 41, 55, 0.5);
}


.player-select-popup, .player-details-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(20, 24, 38, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s, visibility 0.22s;
}

.player-select-popup.active, .player-details-popup.active {
    opacity: 1;
    visibility: visible;
}


.player-select-container, .player-details-container {
    background: rgba(31,41,55,0.92);
    border-radius: 16px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.05);
    /* No blur for performance */
}

.player-select-header, .player-details-header {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(55, 65, 81, 0.5);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.player-select-search {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(55, 65, 81, 0.5);
}

.player-select-results, .player-details-content {
    flex: 1;
    overflow-y: auto;
    max-height: 50vh;
    padding: 1.5rem;
}

.player-select-item {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(55, 65, 81, 0.5);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.player-select-item:hover {
    background: rgba(55, 65, 81, 0.5);
}

.player-select-info {
    display: flex;
    flex-direction: column;
}

.player-select-name {
    font-weight: bold;
}

.player-select-details {
    font-size: 0.875rem;
    color: #9ca3af;
}

.player-select-price {
    font-weight: bold;
    color: #f59e0b;
}

.close-popup, .close-details-popup {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 1.5rem;
    cursor: pointer;
}

.player-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.player-detail-item {
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
    background: rgba(55, 65, 81, 0.5);
    border-radius: 0.5rem;
}

.detail-label {
    font-size: 0.875rem;
    color: #9ca3af;
    margin-bottom: 0.25rem;
}

.detail-value {
    font-weight: 500;
}

.player-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.player-actions .btn-primary {
    background: rgba(37, 99, 235, 0.3);
    border: 1px solid rgba(96, 165, 250, 0.3);
    color: white;
    transition: all 0.2s ease;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
    text-align: center;
}

.player-actions .btn-primary:hover {
    background: rgba(37, 99, 235, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.player-name-cell {
    cursor: pointer;
    transition: color 0.2s;
}

.player-name-cell:hover {
    color: #3b82f6;
}

/* Miglioramento visuale del toggle delle sezioni */
.section-toggle {
    background: linear-gradient(90deg, rgba(59,130,246,0.30) 0%, rgba(139,92,246,0.22) 100%);
    color: #e5e7eb;
    border: 1px solid rgba(96, 165, 250, 0.22);
    border-radius: 12px;
    padding: 12px 20px 12px 48px;
    margin-bottom: 12px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.12rem;
    position: relative;
    transition: background 0.25s, box-shadow 0.25s, color 0.2s;
    box-shadow: 0 2px 12px rgba(59,130,246,0.10);
    width: 100%;
    text-align: left;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.section-toggle-label {
    flex: 1;
    text-align: center;
    display: block;
    width: 100%;
}

.section-toggle::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(59,130,246,0.45) 0%, rgba(139,92,246,0.35) 100%);
    box-shadow: 0 2px 8px rgba(59,130,246,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.3s;
}

.section-toggle::after {
    content: '';
    position: absolute;
    left: 26px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-bottom: 2px solid #e5e7eb;
    border-right: 2px solid #e5e7eb;
    transform: translateY(-50%) rotate(45deg);
    transition: transform 0.3s;
}

.section-toggle[aria-expanded="true"]::after {
    transform: translateY(-50%) rotate(-135deg);
}

.section-toggle:hover {
    background: linear-gradient(90deg, rgba(59,130,246,0.45) 0%, rgba(139,92,246,0.32) 100%);
    color: #a78bfa;
    box-shadow: 0 4px 20px rgba(59,130,246,0.18);
}

.section-content {
    transition: max-height 0.3s, opacity 0.3s, padding 0.3s;
    overflow: hidden;
    max-height: 2000px;
    opacity: 1;
    padding-top: 8px;
}

.section-content.closed {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Taskbar più trasparente ma leggibile */

.taskbar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(31, 41, 55, 0.65); /* Più trasparente */
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 12px;
    z-index: 999;
    width: 90%;
    max-width: 500px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
}

.taskbar-content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 8px;
}


.taskbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(55, 65, 81, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 70px;
    flex: 1;
    color: #f3f4f6;
}
.taskbar-item:hover {
    background: rgba(75, 85, 99, 0.6);
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.taskbar-label {
    font-size: 0.9rem;
    color: #f3f4f6;
    font-weight: 500;
}

.options-toggle {
    position: relative;
    background: rgba(59, 130, 246, 0.2);
    backdrop-filter: blur(5px);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    font-size: 1.2rem;
}

.options-toggle:hover { transform: scale(1.05); }

/* Palette e variabili utili */
:root{
    --card-bg: rgba(31,41,55,0.8);
    --muted: #9ca3af;
    --accent-purple: #8b5cf6;
    --accent-blue: #3b82f6;
    --accent-yellow: #f59e0b;
    --accent-green: #10b981;
    --glass-border: rgba(255,255,255,0.08);
}

/* --- FORMATION: rendere il risultato più colorato e semplice da leggere --- */
#suggestedFormation {
    background: linear-gradient(180deg, rgba(20,23,36,0.92), rgba(28,30,46,0.85));
    border: 1px solid rgba(255,255,255,0.06);
    padding: 18px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(11,15,30,0.6);
    color: #e6eef8;
}

/* Titolo e meta informazioni */
#suggestedFormation h3,
#suggestedFormation h4 {
    margin: 0 0 8px 0;
    letter-spacing: 0.2px;
}

#suggestedFormation h3 {
    color: var(--accent-yellow);
    font-weight: 700;
    font-size: 1.05rem;
}

/* Output principale: card chiara per la formazione */
#formationOutput {
    margin-top: 12px;
}

/* Grid responsive e semplice */
.formation-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    align-items: start;
}

/* Ogni colonna ruolo: sfondo leggero, bordo e padding */
.formation-role {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 10px;
    padding: 12px;
    min-height: 80px;
}

/* Heading di ciascun ruolo */
.formation-role h4 {
    margin: 0 0 10px 0;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--muted);
}

/* Colori distinti per ciascuna colonna (ordine: P, D, C, A) */
.formation-grid > .formation-role:nth-child(1) h4 { color: var(--accent-blue); }   /* Portieri */
.formation-grid > .formation-role:nth-child(2) h4 { color: var(--accent-green); }  /* Difensori */
.formation-grid > .formation-role:nth-child(3) h4 { color: var(--accent-purple); } /* Centrocampisti */
.formation-grid > .formation-role:nth-child(4) h4 { color: var(--accent-yellow); } /* Attaccanti */

/* Singolo giocatore dentro la formazione: card compatta, contrasto elevato */
.formation-player {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border-left: 4px solid rgba(255,255,255,0.03);
    transition: transform 0.14s ease, box-shadow 0.14s ease;
}

/* Accent color left border by role — sfruttiamo la colonna per distinguere */
.formation-grid > .formation-role:nth-child(1) .formation-player { border-left-color: rgba(59,130,246,0.95); }   /* P */
.formation-grid > .formation-role:nth-child(2) .formation-player { border-left-color: rgba(16,185,129,0.95); }   /* D */
.formation-grid > .formation-role:nth-child(3) .formation-player { border-left-color: rgba(139,92,246,0.95); }   /* C */
.formation-grid > .formation-role:nth-child(4) .formation-player { border-left-color: rgba(245,158,11,0.95); }   /* A */

.formation-player:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(11,15,30,0.6);
}

/* Nome giocatore e squadra con gerarchia chiara */
.formation-player strong {
    display: block;
    color: #ffffff;
    font-size: 0.98rem;
    margin-bottom: 2px;
}

.formation-player .vs-match {
    font-size: 0.78rem;
    color: var(--muted);
}

/* Badget punteggio visibile e colorato */
.formation-player .rating {
    margin-top: 6px;
    display: inline-block;
    padding: 6px 8px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.86rem;
    color: #051125;
    background: linear-gradient(90deg, rgba(255,255,255,0.92), rgba(255,255,255,0.84));
    float: right;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* Miglior contrasto su mobile */
@media (max-width: 900px) {
    .formation-grid { grid-template-columns: 1fr; }
    .formation-player .rating { float: none; display: block; margin-top: 8px; text-align: left; }
}

/* Semplificazione: nascondere elementi di disturbo e aumentare chiarezza */
#suggestedFormation p, #suggestedFormation .text-sm {
    color: #cbd5e1;
    margin: 6px 0;
}
/* Aggiusta il padding del contenuto principale per compensare l'header fisso */
.main-content {
    padding-top: 160px;
    transition: padding-top 0.3s ease;
}

.main-header.scrolled ~ .main-content {
    padding-top: 100px;
}
/* === ANIMAZIONE HEADER PIÙ FLUIDA === */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(17, 24, 39, 0.95);
    backdrop-filter: blur(10px);
    z-index: 998;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    will-change: transform, padding, backdrop-filter;
}

.main-header.scrolled {
    padding: 8px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(15px);
    transform: translateZ(0);
}

.main-header.scrolled .header-content h1 {
    font-size: 1.5rem;
    margin-bottom: 0;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.main-header.scrolled .header-content p {
    opacity: 0;
    transform: translateY(-10px);
    height: 0;
    margin: 0;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.header-content {
    text-align: center;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.header-content h1 {
    font-size: 2.25rem;
    font-weight: bold;
    background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: font-size, margin;
}

.header-content p {
    color: #9ca3af;
    font-size: 1rem;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 1;
    transform: translateY(0);
    height: auto;
}

/* === ANIMAZIONE SEZIONI APRI/CHIUDI MIGLIORATA === */
.section-content {
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    max-height: 5000px; /* Valore più alto per contenuti lunghi */
    opacity: 1;
    padding-top: 12px;
    transform: translateY(0);
    will-change: max-height, opacity, padding;
}

.section-content.closed {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transform: translateY(-5px);
}

/* === ANIMAZIONE TOGGLE SEZIONI PIÙ FLUIDA === */
.section-toggle {
    background: linear-gradient(90deg, rgba(59,130,246,0.30) 0%, rgba(139,92,246,0.22) 100%);
    color: #e5e7eb;
    border: 1px solid rgba(96, 165, 250, 0.22);
    border-radius: 12px;
    padding: 12px 20px 12px 48px;
    margin-bottom: 12px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.12rem;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 12px rgba(59,130,246,0.10);
    width: 100%;
    text-align: left;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    will-change: transform, background;
}

.section-toggle:hover {
    background: linear-gradient(90deg, rgba(59,130,246,0.45) 0%, rgba(139,92,246,0.32) 100%);
    color: #a78bfa;
    box-shadow: 0 4px 20px rgba(59,130,246,0.18);
    transform: translateY(-1px);
}

.section-toggle:active {
    transform: translateY(0);
    transition: all 0.1s ease;
}

.section-toggle::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(59,130,246,0.45) 0%, rgba(139,92,246,0.35) 100%);
    box-shadow: 0 2px 8px rgba(59,130,246,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.section-toggle::after {
    content: '';
    position: absolute;
    left: 26px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-bottom: 2px solid #e5e7eb;
    border-right: 2px solid #e5e7eb;
    transform: translateY(-50%) rotate(45deg);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.section-toggle[aria-expanded="true"]::after {
    transform: translateY(-50%) rotate(-135deg);
}

/* === MIGLIORAMENTO PERFORMANCE CON WILL-CHANGE === */
.main-content {
    padding-top: 160px;
    transition: padding-top 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.main-header.scrolled ~ .main-content {
    padding-top: 80px; /* Ridotto per compensare header più piccolo */
}

/* === OTTIMIZZAZIONE PER DISPOSITIVI MOBILI === */
@media (max-width: 768px) {
    .section-content {
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .main-header {
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    .main-header.scrolled {
        padding: 6px 0;
    }
    
    .main-header.scrolled .header-content h1 {
        font-size: 1.3rem;
    }
}

/* === RIDUZIONE SCATTII SU iOS === */
@supports (-webkit-touch-callout: none) {
    .section-content {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    .main-header {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* === MIGLIORAMENTO ANIMAZIONE CARDS === */
.card {
    background: rgba(31, 41, 55, 0.55);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, box-shadow;
}

.card:hover {
    transform: translateY(-2px) scale(1.005);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* === HEADER PIÙ FLUIDO E LEGGERO === */
.main-header {
    transition: padding 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease;
    will-change: padding, box-shadow;
}
.main-header.scrolled {
    padding: 8px 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    backdrop-filter: blur(12px);
}
.main-header .header-content h1 {
    transition: font-size 0.35s ease, margin 0.3s ease;
}
.main-header .header-content p {
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* === SEZIONI APRI/CHIUDI OTTIMIZZATE === */
.section-content {
    transform-origin: top;
    transform: scaleY(1);
    opacity: 1;
    transition: transform 0.35s ease, opacity 0.3s ease;
    will-change: transform, opacity;
}
.section-content.closed {
    transform: scaleY(0);
    opacity: 0;
    pointer-events: none;
}
/* === HEADER PIÙ VELOCE === */
.main-header {
    transition: padding 0.2s ease-in-out, box-shadow 0.2s ease-in-out, backdrop-filter 0.2s ease-in-out;
    will-change: padding, box-shadow;
}

.main-header.scrolled {
    padding: 8px 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    backdrop-filter: blur(12px);
}

.main-header .header-content h1 {
    transition: font-size 0.2s ease-in-out, margin 0.2s ease-in-out;
}

.main-header .header-content p {
    transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
}
.main-header.scrolled .header-content p {
    display: none;
}

.header-content {
    text-align: center;
    transition: all 0.3s ease;
}

.header-content h1 {
    font-size: 2.25rem;
    font-weight: bold;
    background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
}

.header-content p {
    color: #9ca3af;
    font-size: 1rem;
    transition: all 0.3s ease;
}

/* Aggiusta il padding del contenuto principale per compensare l'header fisso */
.main-content {
    padding-top: 160px;
    transition: padding-top 0.3s ease;
}

.main-header.scrolled ~ .main-content {
    padding-top: 100px;
}
/* === ANIMAZIONE HEADER PIÙ FLUIDA === */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(17, 24, 39, 0.95);
    backdrop-filter: blur(10px);
    z-index: 998;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    will-change: transform, padding, backdrop-filter;
}

.main-header.scrolled {
    padding: 8px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(15px);
    transform: translateZ(0);
}

.main-header.scrolled .header-content h1 {
    font-size: 1.5rem;
    margin-bottom: 0;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.main-header.scrolled .header-content p {
    opacity: 0;
    transform: translateY(-10px);
    height: 0;
    margin: 0;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.header-content {
    text-align: center;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.header-content h1 {
    font-size: 2.25rem;
    font-weight: bold;
    background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: font-size, margin;
}

.header-content p {
    color: #9ca3af;
    font-size: 1rem;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 1;
    transform: translateY(0);
    height: auto;
}

/* === ANIMAZIONE SEZIONI APRI/CHIUDI MIGLIORATA === */
.section-content {
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    max-height: 5000px; /* Valore più alto per contenuti lunghi */
    opacity: 1;
    padding-top: 12px;
    transform: translateY(0);
    will-change: max-height, opacity, padding;
}

.section-content.closed {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transform: translateY(-5px);
}

/* === ANIMAZIONE TOGGLE SEZIONI PIÙ FLUIDA === */
.section-toggle {
    background: linear-gradient(90deg, rgba(59,130,246,0.30) 0%, rgba(139,92,246,0.22) 100%);
    color: #e5e7eb;
    border: 1px solid rgba(96, 165, 250, 0.22);
    border-radius: 12px;
    padding: 12px 20px 12px 48px;
    margin-bottom: 12px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.12rem;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 12px rgba(59,130,246,0.10);
    width: 100%;
    text-align: left;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    will-change: transform, background;
}

.section-toggle:hover {
    background: linear-gradient(90deg, rgba(59,130,246,0.45) 0%, rgba(139,92,246,0.32) 100%);
    color: #a78bfa;
    box-shadow: 0 4px 20px rgba(59,130,246,0.18);
    transform: translateY(-1px);
}

.section-toggle:active {
    transform: translateY(0);
    transition: all 0.1s ease;
}

.section-toggle::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(59,130,246,0.45) 0%, rgba(139,92,246,0.35) 100%);
    box-shadow: 0 2px 8px rgba(59,130,246,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.section-toggle::after {
    content: '';
    position: absolute;
    left: 26px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-bottom: 2px solid #e5e7eb;
    border-right: 2px solid #e5e7eb;
    transform: translateY(-50%) rotate(45deg);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.section-toggle[aria-expanded="true"]::after {
    transform: translateY(-50%) rotate(-135deg);
}

/* === MIGLIORAMENTO PERFORMANCE CON WILL-CHANGE === */
.main-content {
    padding-top: 160px;
    transition: padding-top 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.main-header.scrolled ~ .main-content {
    padding-top: 80px; /* Ridotto per compensare header più piccolo */
}

/* === OTTIMIZZAZIONE PER DISPOSITIVI MOBILI === */
@media (max-width: 768px) {
    .section-content {
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .main-header {
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    .main-header.scrolled {
        padding: 6px 0;
    }
    
    .main-header.scrolled .header-content h1 {
        font-size: 1.3rem;
    }
}

/* === RIDUZIONE SCATTII SU iOS === */
@supports (-webkit-touch-callout: none) {
    .section-content {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    .main-header {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* === MIGLIORAMENTO ANIMAZIONE CARDS === */
.card {
    background: rgba(31, 41, 55, 0.55);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, box-shadow;
}

.card:hover {
    transform: translateY(-2px) scale(1.005);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* === HEADER PIÙ FLUIDO E LEGGERO === */
.main-header {
    transition: padding 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease;
    will-change: padding, box-shadow;
}
.main-header.scrolled {
    padding: 8px 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    backdrop-filter: blur(12px);
}
.main-header .header-content h1 {
    transition: font-size 0.35s ease, margin 0.3s ease;
}
.main-header .header-content p {
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* === SEZIONI APRI/CHIUDI OTTIMIZZATE === */
.section-content {
    transform-origin: top;
    transform: scaleY(1);
    opacity: 1;
    transition: transform 0.35s ease, opacity 0.3s ease;
    will-change: transform, opacity;
}
.section-content.closed {
    transform: scaleY(0);
    opacity: 0;
    pointer-events: none;
}
/* === HEADER PIÙ VELOCE === */
.main-header {
    transition: padding 0.2s ease-in-out, box-shadow 0.2s ease-in-out, backdrop-filter 0.2s ease-in-out;
    will-change: padding, box-shadow;
}

.main-header.scrolled {
    padding: 8px 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    backdrop-filter: blur(12px);
}

.main-header .header-content h1 {
    transition: font-size 0.2s ease-in-out, margin 0.2s ease-in-out;
}

.main-header .header-content p {
    transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
}

/* Miglioramenti per la user experience */
.loader {
    border: 2px solid rgba(55, 65, 81, 0.5);
    border-radius: 50%;
    border-top: 2px solid #3b82f6;
    width: 16px;
    height: 16px;
    animation: spin 1s linear infinite;
    display: inline-block;
    margin-right: 8px;
}

/* Messaggi di successo */
.formation-success {
    background: linear-gradient(90deg, rgba(16,185,129,0.15) 0%, rgba(16,185,129,0.08) 100%);
    border: 1px solid rgba(16,185,129,0.3);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
}

/* Miglioramento visivo per il pulsante durante il calcolo */
.btn-primary:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
/* Stili per la formazione compatta */
.compact-formation {
    background: linear-gradient(180deg, rgba(20,23,36,0.92), rgba(28,30,46,0.85));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(11,15,30,0.6);
}

/* Formazione compatta - layout migliorato */
.compact-formation .formation-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    align-items: start;
}

.compact-formation .formation-role {
    background: rgba(55, 65, 81, 0.4);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 10px;
    min-height: auto;
}

.compact-formation .formation-role h4 {
    font-size: 0.9rem;
    margin: 0 0 8px 0;
    text-align: center;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.compact-formation .formation-player {
    padding: 8px;
    margin-bottom: 6px;
    border-radius: 6px;
    background: rgba(31, 41, 55, 0.6);
    border-left: 3px solid;
    transition: all 0.2s ease;
}

.compact-formation .formation-player:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.compact-formation .formation-player strong {
    font-size: 0.85rem;
    display: block;
    margin-bottom: 2px;
}

.compact-formation .formation-player .vs-match {
    font-size: 0.7rem;
    color: #9ca3af;
    margin-bottom: 4px;
}

.compact-formation .formation-player .rating {
    font-size: 0.75rem;
    padding: 3px 6px;
    border-radius: 4px;
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    font-weight: bold;
    display: inline-block;
}

/* Colori per i ruoli nella formazione compatta */
.compact-formation .formation-role:nth-child(1) h4 { color: #3b82f6; }
.compact-formation .formation-role:nth-child(2) h4 { color: #10b981; }
.compact-formation .formation-role:nth-child(3) h4 { color: #8b5cf6; }
.compact-formation .formation-role:nth-child(4) h4 { color: #f59e0b; }

.compact-formation .formation-role:nth-child(1) .formation-player { border-left-color: #3b82f6; }
.compact-formation .formation-role:nth-child(2) .formation-player { border-left-color: #10b981; }
.compact-formation .formation-role:nth-child(3) .formation-player { border-left-color: #8b5cf6; }
.compact-formation .formation-role:nth-child(4) .formation-player { border-left-color: #f59e0b; }

/* Responsive per formazione compatta */
@media (max-width: 768px) {
    .compact-formation .formation-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .compact-formation .formation-role {
        padding: 12px;
    }
    
    .compact-formation .formation-player {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .compact-formation .formation-player-info {
        flex: 1;
    }
    
    .compact-formation .formation-player .rating {
        margin-left: 10px;
    }
}

/* Stili per la sezione squadra compatta */
#myTeamOutput .bg-card {
    background: rgba(55, 65, 81, 0.4);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px;
}

#myTeamOutput .bg-card h4 {
    margin-bottom: 10px;
    font-size: 1rem;
    color: #e5e7eb;
}

#myTeamOutput .bg-card .bg-gray-800 {
    background: rgba(31, 41, 55, 0.6);
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 8px;
}

/* Contatori squadra compatti */
#goalkeeperCount, #defenderCount, #midfielderCount, #forwardCount {
    font-weight: bold;
    font-size: 1rem;
}

/* Pulsanti compatti */
#selectMyPlayers, #addInjuredPlayer {
    font-size: 0.85rem;
    padding: 6px 12px;
}

/* Miglioramento per la sezione infortunati compatta */
#injuredPlayersOutput .bg-gray-800 {
    background: rgba(31, 41, 55, 0.6);
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Rimuovi questi stili se esistono già nel CSS originale per evitare duplicati */
/* Stili per la formazione compatta */
.compact-formation {
    background: linear-gradient(180deg, rgba(20,23,36,0.92), rgba(28,30,46,0.85));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(11,15,30,0.6);
}

/* Formazione compatta - layout migliorato */
.compact-formation .formation-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    align-items: start;
}

.compact-formation .formation-role {
    background: rgba(55, 65, 81, 0.4);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 10px;
    min-height: auto;
}

.compact-formation .formation-role h4 {
    font-size: 0.9rem;
    margin: 0 0 8px 0;
    text-align: center;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.compact-formation .formation-player {
    padding: 8px;
    margin-bottom: 6px;
    border-radius: 6px;
    background: rgba(31, 41, 55, 0.6);
    border-left: 3px solid;
    transition: all 0.2s ease;
}

.compact-formation .formation-player:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.compact-formation .formation-player strong {
    font-size: 0.85rem;
    display: block;
    margin-bottom: 2px;
}

.compact-formation .formation-player .vs-match {
    font-size: 0.7rem;
    color: #9ca3af;
    margin-bottom: 4px;
}

.compact-formation .formation-player .rating {
    font-size: 0.75rem;
    padding: 3px 6px;
    border-radius: 4px;
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    font-weight: bold;
    display: inline-block;
}

/* Colori per i ruoli nella formazione compatta */
.compact-formation .formation-role:nth-child(1) h4 { color: #3b82f6; }
.compact-formation .formation-role:nth-child(2) h4 { color: #10b981; }
.compact-formation .formation-role:nth-child(3) h4 { color: #8b5cf6; }
.compact-formation .formation-role:nth-child(4) h4 { color: #f59e0b; }

.compact-formation .formation-role:nth-child(1) .formation-player { border-left-color: #3b82f6; }
.compact-formation .formation-role:nth-child(2) .formation-player { border-left-color: #10b981; }
.compact-formation .formation-role:nth-child(3) .formation-player { border-left-color: #8b5cf6; }
.compact-formation .formation-role:nth-child(4) .formation-player { border-left-color: #f59e0b; }

/* Responsive per formazione compatta */
@media (max-width: 768px) {
    .compact-formation .formation-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .compact-formation .formation-role {
        padding: 12px;
    }
    
    .compact-formation .formation-player {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .compact-formation .formation-player-info {
        flex: 1;
    }
    
    .compact-formation .formation-player .rating {
        margin-left: 10px;
    }
}

/* Stili per la sezione squadra compatta */
#myTeamOutput .bg-card {
    background: rgba(55, 65, 81, 0.4);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px;
}

#myTeamOutput .bg-card h4 {
    margin-bottom: 10px;
    font-size: 1rem;
    color: #e5e7eb;
}

#myTeamOutput .bg-card .bg-gray-800 {
    background: rgba(31, 41, 55, 0.6);
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 8px;
}

/* Contatori squadra compatti */
#goalkeeperCount, #defenderCount, #midfielderCount, #forwardCount {
    font-weight: bold;
    font-size: 1rem;
}

/* Pulsanti compatti */
#selectMyPlayers, #addInjuredPlayer {
    font-size: 0.85rem;
    padding: 6px 12px;
}

/* Miglioramento per la sezione infortunati compatta */
#injuredPlayersOutput .bg-gray-800 {
    background: rgba(31, 41, 55, 0.6);
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Stili per l'area risultato scambi */
.trade-output-container {
    background: rgba(55, 65, 81, 0.3);
    border: 2px dashed rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s ease;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trade-output-container:not(:empty) {
    background: rgba(55, 65, 81, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-style: solid;
}

.trade-placeholder {
    max-width: 300px;
}

.trade-icon {
    opacity: 0.6;
}

/* Stili per il risultato effettivo dello scambio */
.trade-result {
    width: 100%;
}

.trade-result h4 {
    font-size: 1.1rem;
    margin-bottom: 12px;
    color: #e5e7eb;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
}

.trade-details {
    background: rgba(31, 41, 55, 0.4);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
}

.trade-verdict {
    font-weight: bold;
    font-size: 1.1rem;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    margin-top: 12px;
}

.verdict-positive {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10b981;
}

.verdict-negative {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.verdict-neutral {
    background: rgba(156, 163, 175, 0.2);
    border: 1px solid rgba(156, 163, 175, 0.3);
    color: #9ca3af;
}

/* Stili per la formazione compatta */
.compact-formation {
    background: linear-gradient(180deg, rgba(20,23,36,0.92), rgba(28,30,46,0.85));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(11,15,30,0.6);
}

/* Formazione compatta - layout migliorato */
.compact-formation .formation-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    align-items: start;
}

.compact-formation .formation-role {
    background: rgba(55, 65, 81, 0.4);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 10px;
    min-height: auto;
}

.compact-formation .formation-role h4 {
    font-size: 0.9rem;
    margin: 0 0 8px 0;
    text-align: center;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.compact-formation .formation-player {
    padding: 8px;
    margin-bottom: 6px;
    border-radius: 6px;
    background: rgba(31, 41, 55, 0.6);
    border-left: 3px solid;
    transition: all 0.2s ease;
}

.compact-formation .formation-player:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.compact-formation .formation-player strong {
    font-size: 0.85rem;
    display: block;
    margin-bottom: 2px;
}

.compact-formation .formation-player .vs-match {
    font-size: 0.7rem;
    color: #9ca3af;
    margin-bottom: 4px;
}

.compact-formation .formation-player .rating {
    font-size: 0.75rem;
    padding: 3px 6px;
    border-radius: 4px;
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    font-weight: bold;
    display: inline-block;
}

/* Colori per i ruoli nella formazione compatta */
.compact-formation .formation-role:nth-child(1) h4 { color: #3b82f6; }
.compact-formation .formation-role:nth-child(2) h4 { color: #10b981; }
.compact-formation .formation-role:nth-child(3) h4 { color: #8b5cf6; }
.compact-formation .formation-role:nth-child(4) h4 { color: #f59e0b; }

.compact-formation .formation-role:nth-child(1) .formation-player { border-left-color: #3b82f6; }
.compact-formation .formation-role:nth-child(2) .formation-player { border-left-color: #10b981; }
.compact-formation .formation-role:nth-child(3) .formation-player { border-left-color: #8b5cf6; }
.compact-formation .formation-role:nth-child(4) .formation-player { border-left-color: #f59e0b; }

/* Responsive per formazione compatta */
@media (max-width: 768px) {
    .compact-formation .formation-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .compact-formation .formation-role {
        padding: 12px;
    }
    
    .compact-formation .formation-player {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .compact-formation .formation-player-info {
        flex: 1;
    }
    
    .compact-formation .formation-player .rating {
        margin-left: 10px;
    }
}

/* Stili per la sezione squadra compatta */
#myTeamOutput .bg-card {
    background: rgba(55, 65, 81, 0.4);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px;
}

#myTeamOutput .bg-card h4 {
    margin-bottom: 10px;
    font-size: 1rem;
    color: #e5e7eb;
}

#myTeamOutput .bg-card .bg-gray-800 {
    background: rgba(31, 41, 55, 0.6);
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 8px;
}

/* Contatori squadra compatti */
#goalkeeperCount, #defenderCount, #midfielderCount, #forwardCount {
    font-weight: bold;
    font-size: 1rem;
}

/* Pulsanti compatti */
#selectMyPlayers, #addInjuredPlayer {
    font-size: 0.85rem;
    padding: 6px 12px;
}

/* Miglioramento per la sezione infortunati compatta */
#injuredPlayersOutput .bg-gray-800 {
    background: rgba(31, 41, 55, 0.6);
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Campo da calcio verticale */
.football-field-container {
    background: rgba(20, 23, 36, 0.8);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(11, 15, 30, 0.6);
    overflow: hidden;
}

.vertical-football-field {
    width: 100%;
    aspect-ratio: 3/4;
    background: linear-gradient(135deg, #1a5c1a 0%, #2d7a2d 100%);
    border: 3px solid #fff;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
}


.vertical-football-field::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.7);
    transform: translateY(-50%);
}

/* Cerchio centrale */
.center-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* Aree di porta verticali */
.goal-area {
    position: absolute;
    width: 30%;
    height: 8%;
    border: 2px solid rgba(255, 255, 255, 0.7);
    left: 50%;
    transform: translateX(-50%);
}

.goal-area.top {
    top: 0;
    border-bottom: none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.goal-area.bottom {
    bottom: 0;
    border-top: none;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* Linee dei giocatori - disposizione verticale */
.player-line {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 10px;
    padding: 5px 0;
    position: relative;
}

/* Portieri - linea superiore */
.player-line.portieri {
    order: 1;
}

/* Difensori - seconda linea */
.player-line.difensori {
    order: 2;
}

/* Centrocampisti - terza linea */
.player-line.centrocampisti {
    order: 3;
}

/* Attaccanti - quarta linea */
.player-line.attaccanti {
    order: 4;
}

/* Carte dei giocatori */
.player-card {
    background: rgba(31, 41, 55, 0.95);
    border: 2px solid;
    border-radius: 8px;
    padding: 8px 6px;
    min-width: 80px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
    position: relative;
}

.player-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.player-name {
    font-size: 0.75rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 2px;
    line-height: 1.1;
}

.player-details {
    font-size: 0.65rem;
    color: #d1d5db;
    margin-bottom: 3px;
    line-height: 1;
}

.player-score {
    font-size: 0.8rem;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 12px;
    background: rgba(245, 158, 11, 0.9);
    color: #1f2937;
}

/* Colori per i ruoli */
.role-P .player-card { border-color: #3b82f6; }
.role-D .player-card { border-color: #10b981; }
.role-C .player-card { border-color: #8b5cf6; }
.role-A .player-card { border-color: #f59e0b; }

/* Etichette delle linee */
.line-label {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.5);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Responsive per mobile */
@media (max-width: 768px) {
    .vertical-football-field {
        aspect-ratio: 2/3;
        padding: 10px 0;
    }
    
    .player-card {
        min-width: 70px;
        padding: 6px 4px;
    }
    
    .player-name {
        font-size: 0.65rem;
    }
    
    .player-details {
        font-size: 0.55rem;
    }
    
    .player-score {
        font-size: 0.7rem;
        padding: 1px 4px;
    }
    
    .player-line {
        gap: 6px;
    }
    
    .line-label {
        font-size: 0.6rem;
        left: 5px;
    }
}

/* Versione molto piccola (telefoni verticali) */
@media (max-width: 480px) {
    .vertical-football-field {
        aspect-ratio: 1/1.4;
        padding: 8px 0;
    }
    
    .player-card {
        min-width: 60px;
        padding: 5px 3px;
    }
    
    .player-name {
        font-size: 0.6rem;
    }
    
    .player-details {
        font-size: 0.5rem;
    }
    
    .player-score {
        font-size: 0.65rem;
    }
    
    .player-line {
        gap: 4px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .line-label {
        position: relative;
        left: 0;
        top: 0;
        transform: none;
        width: 100%;
        text-align: center;
        margin-bottom: 5px;
        order: -1;
    }
}

/* Stili per l'area risultato scambi */
.trade-output-container {
    background: rgba(55, 65, 81, 0.3);
    border: 2px dashed rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s ease;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trade-output-container:not(:empty) {
    background: rgba(55, 65, 81, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-style: solid;
}

.trade-placeholder {
    max-width: 300px;
}

.trade-icon {
    opacity: 0.6;
}
/* Campo da calcio verticale - versione compatta */
.vertical-football-field {
    width: 100%;
    aspect-ratio: 2/3; /* Più compatto del precedente 3/4 */
    background: linear-gradient(135deg, #1a5c1a 0%, #2d7a2d 100%);
    border: 2px solid #fff;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0; /* Ridotto da 15px */
}

/* Carte dei giocatori più compatte */
.player-card {
    background: rgba(31, 41, 55, 0.95);
    border: 1px solid; /* Ridotto da 2px */
    border-radius: 6px; /* Ridotto da 8px */
    padding: 6px 4px; /* Ridotto da 8px 6px */
    min-width: 70px; /* Ridotto da 80px */
    text-align: center;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
    position: relative;
}

/* Nomi dei giocatori più compatti */
.player-name {
    font-size: 0.7rem; /* Ridotto da 0.75rem */
    font-weight: bold;
    color: #fff;
    margin-bottom: 1px; /* Ridotto da 2px */
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 65px; /* Limite per nomi lunghi */
}

/* Dettagli più compatti */
.player-details {
    font-size: 0.6rem; /* Ridotto da 0.65rem */
    color: #d1d5db;
    margin-bottom: 2px; /* Ridotto da 3px */
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 65px;
}

/* Punteggio più compatto */
.player-score {
    font-size: 0.7rem; /* Ridotto da 0.8rem */
    font-weight: bold;
    padding: 1px 4px; /* Ridotto da 2px 5px */
    border-radius: 10px; /* Ridotto da 12px */
    background: rgba(245, 158, 11, 0.9);
    color: #1f2937;
}

/* Linee dei giocatori con gap ridotto */
.player-line {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 6px; /* Ridotto da 10px */
    padding: 3px 0; /* Ridotto da 5px */
    position: relative;
}

/* Etichette più compatte */
.line-label {
    position: absolute;
    left: 8px; /* Ridotto da 10px */
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.65rem; /* Ridotto da 0.7rem */
    font-weight: bold;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.5);
    padding: 1px 4px; /* Ridotto da 2px 6px */
    border-radius: 3px; /* Ridotto da 4px */
}

/* Miglioramenti per dispositivi mobili */
@media (max-width: 768px) {
    .vertical-football-field {
        aspect-ratio: 3/4; /* Più alto su mobile per compensare larghezza ridotta */
        padding: 8px 0; /* Ridotto da 10px */
    }
    
    .player-card {
        min-width: 60px; /* Ridotto da 70px */
        padding: 5px 3px; /* Ridotto da 6px 4px */
    }
    
    .player-name {
        font-size: 0.65rem; /* Ridotto da 0.7rem */
        max-width: 55px; /* Ridotto da 65px */
    }
    
    .player-details {
        font-size: 0.55rem; /* Ridotto da 0.6rem */
        max-width: 55px; /* Ridotto da 65px */
    }
    
    .player-score {
        font-size: 0.65rem; /* Ridotto da 0.7rem */
        padding: 1px 3px; /* Ridotto da 1px 4px */
    }
    
    .player-line {
        gap: 4px; /* Ridotto da 6px */
    }
    
    .line-label {
        font-size: 0.6rem; /* Ridotto da 0.65rem */
        left: 4px; /* Ridotto da 8px */
    }
}

/* Versione molto piccola (telefoni verticali) */
@media (max-width: 480px) {
    .vertical-football-field {
        aspect-ratio: 1/1.2; /* Più compatto */
        padding: 6px 0; /* Ridotto da 8px */
    }
    
    .player-card {
        min-width: 55px; /* Ridotto da 60px */
        padding: 4px 2px; /* Ridotto da 5px 3px */
    }
    
    .player-name {
        font-size: 0.6rem; /* Ridotto da 0.65rem */
        max-width: 50px; /* Ridotto da 55px */
    }
    
    .player-details {
        font-size: 0.5rem; /* Ridotto da 0.55rem */
        max-width: 50px; /* Ridotto da 55px */
    }
    
    .player-score {
        font-size: 0.6rem; /* Ridotto da 0.65rem */
    }
    
    .player-line {
        gap: 3px; /* Ridotto da 4px */
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .line-label {
        position: relative;
        left: 0;
        top: 0;
        transform: none;
        width: 100%;
        text-align: center;
        margin-bottom: 3px; /* Ridotto da 5px */
        order: -1;
    }
}

/* Stile speciale per linee con 4-5 giocatori */
.player-line.difensori,
.player-line.centrocampisti {
    /* Linee che tipicamente hanno più giocatori */
    gap: 4px !important; /* Gap ancora più ridotto */
}

.player-line.difensori .player-card,
.player-line.centrocampisti .player-card {
    min-width: 65px; /* Leggermente più piccolo per linee affollate */
    padding: 5px 3px;
}

.player-line.difensori .player-name,
.player-line.centrocampisti .player-name {
    font-size: 0.65rem;
    max-width: 60px;
}

/* Miglioramento per reparti molto affollati (5 giocatori) */
@media (max-width: 768px) {
    .player-line.difensori,
    .player-line.centrocampisti {
        gap: 3px !important;
    }
    
    .player-line.difensori .player-card,
    .player-line.centrocampisti .player-card {
        min-width: 55px;
        padding: 4px 2px;
    }
    
    .player-line.difensori .player-name,
    .player-line.centrocampisti .player-name {
        font-size: 0.6rem;
        max-width: 50px;
    }
}

/* Stili compatti per la lista giocatori in rosa */
.compact-roster {
    background: rgba(55, 65, 81, 0.4);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 15px;
}

.compact-roster-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.compact-role-section {
    background: rgba(31, 41, 55, 0.6);
    border-radius: 6px;
    padding: 8px;
}

.compact-role-section h5 {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 6px;
    text-align: center;
    color: #e5e7eb;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 4px;
}

.compact-player-list {
    max-height: 120px;
    overflow-y: auto;
}

.compact-player-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 6px;
    margin-bottom: 3px;
    background: rgba(55, 65, 81, 0.5);
    border-radius: 4px;
    font-size: 0.75rem;
    transition: all 0.2s ease;
}

.compact-player-item:hover {
    background: rgba(75, 85, 99, 0.6);
    transform: translateX(2px);
}

.compact-player-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 6px;
}

.compact-remove-btn {
    background: rgba(239, 68, 68, 0.3);
    border: none;
    color: #ef4444;
    border-radius: 3px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.compact-remove-btn:hover {
    background: rgba(239, 68, 68, 0.5);
    transform: scale(1.1);
}

/* Colori per i titoli dei ruoli */
.compact-role-section:nth-child(1) h5 { color: #3b82f6; } /* Portieri */
.compact-role-section:nth-child(2) h5 { color: #10b981; } /* Difensori */
.compact-role-section:nth-child(3) h5 { color: #8b5cf6; } /* Centrocampisti */
.compact-role-section:nth-child(4) h5 { color: #f59e0b; } /* Attaccanti */

/* Responsive per mobile */
@media (max-width: 768px) {
    .compact-roster-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .compact-player-list {
        max-height: 80px;
    }
}

/* Scrollbar personalizzata per la lista compatta */
.compact-player-list::-webkit-scrollbar {
    width: 4px;
}

.compact-player-list::-webkit-scrollbar-track {
    background: rgba(31, 41, 55, 0.5);
}

.compact-player-list::-webkit-scrollbar-thumb {
    background: rgba(75, 85, 99, 0.5);
    border-radius: 2px;
}

/* Stili per giocatori indispensabili */
.essential-player .player-name::after {
    content: " ♥";
    color: #ef4444;
    margin-left: 2px;
}

.essential-player .player-card {
    border: 2px solid #ef4444 !important;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
}

/* Stili per la sezione indispensabili compatta */
#essentialPlayersOutput .bg-gray-800 {
    background: rgba(31, 41, 55, 0.6);
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 3px solid #ef4444;
}


/* Stili per la sezione Scambi Consigliati */
.recommended-trade-card {
    background: rgba(55, 65, 81, 0.4);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px;
    border-left: 4px solid;
    transition: all 0.3s ease;
}

.recommended-trade-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.trade-card-weak {
    border-left-color: #ef4444;
}

.trade-card-improve {
    border-left-color: #10b981;
}

.trade-reason {
    font-size: 0.9rem;
    color: #9ca3af;
    margin-bottom: 10px;
}

.trade-players {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: center;
    margin: 10px 0;
}

.trade-arrow {
    text-align: center;
    color: #f59e0b;
    font-size: 1.5rem;
}

.trade-player {
    background: rgba(31, 41, 55, 0.6);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}

.trade-player-name {
    font-weight: bold;
    margin-bottom: 5px;
}

.trade-player-details {
    font-size: 0.8rem;
    color: #d1d5db;
}

.trade-stats {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 0.85rem;
}

.trade-stat {
    text-align: center;
}

.trade-stat-value {
    font-weight: bold;
    display: block;
}

.trade-stat-positive {
    color: #10b981;
}

.trade-stat-negative {
    color: #ef4444;
}

.trade-actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
}

.trade-action-btn {
    flex: 1;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.trade-action-primary {
    background: rgba(37, 99, 235, 0.3);
    border: 1px solid rgba(96, 165, 250, 0.3);
}

.trade-action-primary:hover {
    background: rgba(37, 99, 235, 0.5);
}

.trade-action-secondary {
    background: rgba(55, 65, 81, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.trade-action-secondary:hover {
    background: rgba(75, 85, 99, 0.5);
}

/* Analizza Scambi */
#analizza-scambi h2 {
    background: linear-gradient(90deg, #f472b6 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Osservati */
#osservati h2 {
    background: linear-gradient(90deg, #60a5fa 0%, #38bdf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Formazione Consigliata */
#la-mia-squadra h2 {
    background: linear-gradient(90deg, #34d399 0%, #10b981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Scambi Consigliati */
#scambi-consigliati h2 {
    background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Listone Giocatori */
#listone-giocatori h2 {
    background: linear-gradient(90deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.taskbar {
    bottom: 12px;
    width: 96%;
    max-width: 420px;
    padding: 8px 6px;
    border-radius: 20px;
}

.taskbar-content {
    gap: 4px;
}

.taskbar-item {
    min-width: 56px;
    padding: 6px 4px;
    font-size: 0.75rem;
    border-radius: 10px;
}

.taskbar-label {
    font-size: 0.7rem;
}

/* 🔽 Su schermi < 400px ulteriore riduzione */
@media (max-width: 400px) {
    .taskbar-item {
        min-width: 48px;
        padding: 5px 3px;
    }
    .taskbar-label {
        font-size: 0.65rem;
    }
}


/* Stile per il listone giocatori con scrolling */
#listone-giocatori #playersOutput .overflow-x-auto {
    max-height: 70vh;
    overflow-y: auto;
    position: relative;
}

#listone-giocatori .player-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(31, 41, 55, 0.95);
}

/* Miglioramento per mobile */
@media (max-width: 768px) {
    #listone-giocatori #playersOutput .overflow-x-auto {
        max-height: 60vh;
    }
}

function optimizeHeaderAnimation() {
    const header = document.querySelector('.main-header');
    const versionLabel = document.querySelector('.version-label');
    let ticking = false;
    
    function updateHeader() {
        const scrollPosition = window.scrollY;
        
        if (scrollPosition > 80) {
            header.classList.add('scrolled');
            if (versionLabel) versionLabel.style.display = 'block';
        } else {
            header.classList.remove('scrolled');
            if (versionLabel) versionLabel.style.display = 'none';
        }
        
        ticking = false;
    }
    
    window.addEventListener('scroll', function() {
        if (!ticking) {
            requestAnimationFrame(updateHeader);
            ticking = true;
        }
    });
}

/* Stili per la versione nell'header */
.version-label {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af; /* Stesso colore della descrizione */
    font-size: 0.875rem;
    font-weight: 500;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    background: rgba(31, 41, 55, 0.8);
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(5px);
}

.main-header.scrolled .version-label {
    opacity: 1;
    visibility: visible;
}

/* Assicurati che l'header-content sia posizionato relativamente */
.header-content {
    position: relative;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Responsive per mobile */
@media (max-width: 768px) {
    .version-label {
        left: 15px;
        font-size: 0.8rem;
        padding: 3px 8px;
    }
}

@media (max-width: 480px) {
    .version-label {
        left: 10px;
        font-size: 0.75rem;
        padding: 2px 6px;
    }
}

/* Header più compatto quando scrolled */
.main-header.scrolled {
    padding: 8px 0;
}

.main-header.scrolled .header-content {
    padding: 0 60px; /* Spazio per la versione a sinistra */
}

/* Footer Styles */


.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    text-align: center;
}

.footer-text {
    color: #9ca3af;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.footer-social {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.social-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(55, 65, 81, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #9ca3af;
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.social-btn:hover {
    background: rgba(55, 65, 81, 0.8);
    color: #e5e7eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.social-icon {
    width: 16px;
    height: 16px;
}

/* Responsive */
@media (max-width: 768px) {
    .footer-social {
        flex-direction: column;
        align-items: center;
    }
    
    .social-btn {
        width: 200px;
        justify-content: center;
    }
}















/* ===== MIGLIORAMENTI LISTONE GIOCATORI ===== */
#listone-giocatori .player-table {
    font-size: 0.9rem;
}

#listone-giocatori .player-table th {
    position: sticky;
    top: 0;
    background: rgba(31, 41, 55, 0.95);
    backdrop-filter: blur(10px);
    z-index: 10;
    padding: 12px 8px;
    font-weight: 600;
}

#listone-giocatori .player-table td {
    padding: 10px 8px;
    vertical-align: middle;
}

/* Miglioramento hover per le righe */
#listone-giocatori .player-table tbody tr {
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(55, 65, 81, 0.3);
}

#listone-giocatori .player-table tbody tr:hover {
    background: rgba(59, 130, 246, 0.1);
    transform: translateX(4px);
    border-left: 3px solid #3b82f6;
}

/* Colori di sfondo alternati per le righe */
#listone-giocatori .player-table tbody tr:nth-child(even) {
    background: rgba(55, 65, 81, 0.1);
}

#listone-giocatori .player-table tbody tr:nth-child(even):hover {
    background: rgba(59, 130, 246, 0.15);
}

/* Miglioramento dei badge ruolo */
#listone-giocatori .role-badge {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 24px;
    text-align: center;
    display: inline-block;
}

/* Miglioramento celle nome giocatore */
#listone-giocatori .player-name-cell {
    font-weight: 500;
    color: #e5e7eb;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

#listone-giocatori .player-name-cell:hover {
    color: #3b82f6;
    padding-left: 12px;
}

#listone-giocatori .player-name-cell:hover::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
}

/* Miglioramento header colonne */
#listone-giocatori .player-table th[data-sort] {
    position: relative;
    padding-right: 20px;
    user-select: none;
}

#listone-giocatori .player-table th[data-sort]:hover {
    background: rgba(55, 65, 81, 0.7);
}

/* Indicatori di ordinamento più visibili */
#listone-giocatori .player-table th[data-sort]::after {
    content: "↕";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    opacity: 0.5;
}

#listone-giocatori .player-table th[data-sort]:hover::after {
    opacity: 1;
}

/* Miglioramento valori numerici */
#listone-giocatori .player-table td:nth-child(4),
#listone-giocatori .player-table td:nth-child(5),
#listone-giocatori .player-table td:nth-child(6) {
    text-align: center;
    font-family: 'Courier New', monospace;
    font-weight: 600;
}

/* Colori per i valori di FVM */
#listone-giocatori .player-table td:nth-child(5) {
    color: #f59e0b;
}

/* Colori per le quotazioni */
#listone-giocatori .player-table td:nth-child(6) {
    color: #10b981;
}

/* Barra di ricerca migliorata */
#listone-giocatori #searchPlayer {
    background: rgba(55, 65, 81, 0.6);
    border: 1px solid rgba(75, 85, 99, 0.6);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

#listone-giocatori #searchPlayer:focus {
    background: rgba(55, 65, 81, 0.8);
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Pulsanti filtro migliorati */
#listone-giocatori .filter-buttons {
    gap: 6px;
    margin-bottom: 16px;
}

#listone-giocatori .filter-button {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#listone-giocatori .filter-button.active {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* Scrollbar personalizzata per la tabella */
#listone-giocatori #playersOutput .overflow-x-auto {
    scrollbar-width: thin;
    scrollbar-color: rgba(75, 85, 99, 0.5) rgba(31, 41, 55, 0.5);
    border-radius: 8px;
}

#listone-giocatori #playersOutput .overflow-x-auto::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

#listone-giocatori #playersOutput .overflow-x-auto::-webkit-scrollbar-track {
    background: rgba(31, 41, 55, 0.5);
    border-radius: 4px;
}

#listone-giocatori #playersOutput .overflow-x-auto::-webkit-scrollbar-thumb {
    background: rgba(75, 85, 99, 0.7);
    border-radius: 4px;
}

#listone-giocatori #playersOutput .overflow-x-auto::-webkit-scrollbar-thumb:hover {
    background: rgba(107, 114, 128, 0.7);
}

/* Messaggio nessun giocatore trovato */
#listone-giocatori .player-table tbody tr td[colspan="6"] {
    padding: 40px 20px;
    font-size: 1rem;
    color: #9ca3af;
    font-style: italic;
}

/* Responsive per mobile */
@media (max-width: 768px) {
    #listone-giocatori .player-table {
        font-size: 0.8rem;
    }
    
    #listone-giocatori .player-table th,
    #listone-giocatori .player-table td {
        padding: 8px 6px;
    }
    
    #listone-giocatori .filter-button {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
    
    #listone-giocatori #searchPlayer {
        padding: 10px 14px;
        font-size: 0.9rem;
    }
    
    #listone-giocatori .role-badge {
        padding: 3px 6px;
        font-size: 0.7rem;
        min-width: 20px;
    }
}

/* Versione molto compatta per schermi piccoli */
@media (max-width: 480px) {
    #listone-giocatori .player-table {
        font-size: 0.75rem;
    }
    
    #listone-giocatori .player-table th,
    #listone-giocatori .player-table td {
        padding: 6px 4px;
    }
    
    #listone-giocatori .player-name-cell {
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Animazione di caricamento per la tabella */
@keyframes pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

#listone-giocatori .player-table tbody tr.skeleton {
    animation: pulse 1.5s ease-in-out infinite;
}

#listone-giocatori .player-table tbody tr.skeleton td {
    color: transparent;
    background: linear-gradient(90deg, rgba(55,65,81,0.3) 25%, rgba(75,85,99,0.3) 50%, rgba(55,65,81,0.3) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Evidenziazione ricerca */
.highlight {
    background-color: rgba(245, 158, 11, 0.3);
    padding: 2px 1px;
    border-radius: 2px;
    font-weight: 600;
}

/* Badge per giocatori osservati */
.watched-badge::after {
    content: " ★";
    color: #f59e0b;
    font-size: 0.7rem;
    margin-left: 2px;
}

/* ===== LISTONE GIOCATORI COMPATTO ===== */
#listone-giocatori .player-table {
    font-size: 0.75rem;
    width: 100%;
}

#listone-giocatori .player-table th {
    position: sticky;
    top: 0;
    background: rgba(31, 41, 55, 0.95);
    backdrop-filter: blur(10px);
    z-index: 10;
    padding: 8px 4px;
    font-weight: 600;
    white-space: nowrap;
}

#listone-giocatori .player-table td {
    padding: 6px 4px;
    vertical-align: middle;
    white-space: nowrap;
}

/* Header colonne più compatte */
#listone-giocatori .player-table th[data-sort] {
    position: relative;
    padding-right: 16px;
    user-select: none;
    cursor: pointer;
}

#listone-giocatori .player-table th[data-sort]::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    opacity: 0.5;
}

/* Miglioramento hover per le righe */
#listone-giocatori .player-table tbody tr {
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(55, 65, 81, 0.3);
}

#listone-giocatori .player-table tbody tr:hover {
    background: rgba(59, 130, 246, 0.1);
}

/* Colori di sfondo alternati per le righe */
#listone-giocatori .player-table tbody tr:nth-child(even) {
    background: rgba(55, 65, 81, 0.1);
}

#listone-giocatori .player-table tbody tr:nth-child(even):hover {
    background: rgba(59, 130, 246, 0.15);
}

/* Badge ruolo più compatti */
#listone-giocatori .role-badge {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    min-width: 20px;
    text-align: center;
    display: inline-block;
}

/* Celle nome giocatore compatte */
#listone-giocatori .player-name-cell {
    font-weight: 500;
    color: #e5e7eb;
    cursor: pointer;
    transition: all 0.2s ease;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

#listone-giocatori .player-name-cell:hover {
    color: #3b82f6;
}

/* Allineamento e styling valori numerici */
#listone-giocatori .player-table td:nth-child(4),
#listone-giocatori .player-table td:nth-child(5),
#listone-giocatori .player-table td:nth-child(6) {
    text-align: center;
    font-family: 'Courier New', monospace;
    font-weight: 600;
}

/* Colori per i valori */
#listone-giocatori .player-table td:nth-child(5) {
    color: #f59e0b;
}

#listone-giocatori .player-table td:nth-child(6) {
    color: #10b981;
}

/* Barra di ricerca compatta */
#listone-giocatori #searchPlayer {
    background: rgba(55, 65, 81, 0.6);
    border: 1px solid rgba(75, 85, 99, 0.6);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.8rem;
    transition: all 0.3s ease;
}

#listone-giocatori #searchPlayer:focus {
    background: rgba(55, 65, 81, 0.8);
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Pulsanti filtro compatti */
#listone-giocatori .filter-buttons {
    gap: 4px;
    margin-bottom: 12px;
}

#listone-giocatori .filter-button {
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#listone-giocatori .filter-button.active {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}

/* Container della tabella con altezza fissa e scroll */
#listone-giocatori #playersOutput .overflow-x-auto {
    max-height: 60vh;
    overflow-y: auto;
    border-radius: 6px;
}

/* Scrollbar personalizzata più sottile */
#listone-giocatori #playersOutput .overflow-x-auto::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

#listone-giocatori #playersOutput .overflow-x-auto::-webkit-scrollbar-track {
    background: rgba(31, 41, 55, 0.5);
    border-radius: 3px;
}

#listone-giocatori #playersOutput .overflow-x-auto::-webkit-scrollbar-thumb {
    background: rgba(75, 85, 99, 0.7);
    border-radius: 3px;
}

#listone-giocatori #playersOutput .overflow-x-auto::-webkit-scrollbar-thumb:hover {
    background: rgba(107, 114, 128, 0.7);
}

/* Messaggio nessun giocatore trovato */
#listone-giocatori .player-table tbody tr td[colspan="6"] {
    padding: 20px 10px;
    font-size: 0.8rem;
    color: #9ca3af;
    font-style: italic;
}

/* Ottimizzazioni per colonne specifiche */
#listone-giocatori .player-table th:nth-child(1),
#listone-giocatori .player-table td:nth-child(1) {
    min-width: 120px; /* Nome */
}

#listone-giocatori .player-table th:nth-child(2),
#listone-giocatori .player-table td:nth-child(2) {
    min-width: 40px; /* Ruolo */
    text-align: center;
}

#listone-giocatori .player-table th:nth-child(3),
#listone-giocatori .player-table td:nth-child(3) {
    min-width: 80px; /* Squadra */
}

#listone-giocatori .player-table th:nth-child(4),
#listone-giocatori .player-table td:nth-child(4) {
    min-width: 50px; /* Media */
    text-align: center;
}

#listone-giocatori .player-table th:nth-child(5),
#listone-giocatori .player-table td:nth-child(5) {
    min-width: 50px; /* FVM */
    text-align: center;
}

#listone-giocatori .player-table th:nth-child(6),
#listone-giocatori .player-table td:nth-child(6) {
    min-width: 60px; /* Index FH */
    text-align: center;
}

/* Miglioramento responsive per schermi molto piccoli */
@media (max-width: 480px) {
    #listone-giocatori .player-table {
        font-size: 0.7rem;
    }
    
    #listone-giocatori .player-table th,
    #listone-giocatori .player-table td {
        padding: 4px 2px;
    }
    
    #listone-giocatori .player-name-cell {
        max-width: 100px;
    }
    
    #listone-giocatori .filter-button {
        padding: 4px 8px;
        font-size: 0.7rem;
    }
    
    #listone-giocatori #searchPlayer {
        padding: 6px 10px;
        font-size: 0.75rem;
    }
}

/* Evidenziazione ricerca */
.highlight {
    background-color: rgba(245, 158, 11, 0.3);
    padding: 1px 0;
    border-radius: 2px;
    font-weight: 600;
}

/* Rimuovi qualsiasi indicatore di osservati (stelle/emoji) */
.watched-badge::after {
    content: "";
    display: none;
}

/* ===== CORREZIONI IMMEDIATE PER DETTAGLI GIOCATORI TAGLIATI ===== */

/* 1. FORZA la visualizzazione completa dei dettagli giocatore */
#analizza-scambi .player-details {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    overflow: visible !important;
    position: relative !important;
    transform: none !important;
    clip-path: none !important;
    clip: auto !important;
    z-index: 100 !important;
}



/* 3. Assicura che il contenuto abbia spazio per espandersi */
#analizza-scambi .player-details {
    margin-top: 12px;
    padding: 15px;
    background: rgba(31, 41, 55, 0.95);
    border: 2px solid rgba(139, 92, 246, 0.5);
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

/* 4. Ogni riga di dettaglio deve avere spazio sufficiente */
#analizza-scambi .player-details p {
    margin: 10px 0 !important;
    padding: 6px 0 !important;
    font-size: 0.95rem;
    line-height: 1.5;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    display: block;
    width: 100%;
    min-height: 24px;
}

/* 5. Reset completo di tutte le proprietà che potrebbero tagliare */
#analizza-scambi * {
    box-sizing: border-box;
}

#analizza-scambi .player-details * {
    box-sizing: content-box;
}

/* 6. Forza il reflow del layout */
#analizza-scambi .player-details:not(.hidden) {
    display: block !important;
    transform: scale(1) !important;
    animation: none !important;
    transition: none !important;
}

/* 7. Se il problema persiste, prova con un overlay assoluto */
#analizza-scambi .player-slot {
    position: relative;
}

#analizza-scambi .player-details {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    margin-top: 8px;
}

/* 8. Oppure, se preferisci mantenerlo nel flusso, assicura margini */
#analizza-scambi .player-slot-group {
    margin-bottom: 30px; /* Spazio extra per i dettagli */
}

/* 9. Correzione per il pulsante analizza - più margine */
#analizza-scambi #analyzeTrade {
    margin-top: 25px;
    position: relative;
    z-index: 10;
}

/* 10. Reset di tutte le proprietà di contenimento */
#analizza-scambi .player-details {
    contain: none !important;
    content-visibility: auto !important;
    will-change: auto !important;
}

/* 11. Se tutto fallisce, prova a forzare un'altezza minima */
#analizza-scambi .player-details {
    min-height: 120px !important; /* Altezza minima per 5 righe */
}

/* 12. Assicurati che il testo sia sempre visibile */
#analizza-scambi .player-details p {
    color: #e5e7eb !important;
    font-weight: 500;
}

#analizza-scambi .fantamedia-value,
#analizza-scambi .price-value, 
#analizza-scambi .media-value,
#analizza-scambi .team-value,
#analizza-scambi .role-value {
    color: #f59e0b !important;
    font-weight: 700;
    margin-left: 8px;
}

/* 13. Debug: aggiungi un bordo colorato per vedere i confini */
#analizza-scambi .player-details {
    border: 3px solid #10b981 !important; /* Verde per debug */
}

/* 14. Rimuovi eventuali trasformazioni 3D che potrebbero tagliare */
#analizza-scambi .player-details {
    transform-style: flat !important;
    backface-visibility: visible !important;
    perspective: none !important;
}

/* 15. Ultima risorsa: ripristina tutto al valore iniziale */
#analizza-scambi .player-details {
    all: unset;
    display: block !important;
    background: rgba(31, 41, 55, 0.95) !important;
    border: 2px solid rgba(139, 92, 246, 0.5) !important;
    border-radius: 8px !important;
    padding: 15px !important;
    margin-top: 12px !important;
    color: #e5e7eb !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
}

#analizza-scambi .player-details p {
    all: unset;
    display: block !important;
    margin: 10px 0 !important;
    color: #e5e7eb !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
}

/* Stili per la gestione delle rose */
#teamSelect {
    background: rgba(55, 65, 81, 0.6);
    border: 1px solid rgba(75, 85, 99, 0.6);
    color: #f3f4f6;
}

#teamSelect:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

#newTeamName, #newLeagueName {
    background: rgba(55, 65, 81, 0.6);
    border: 1px solid rgba(75, 85, 99, 0.6);
    color: #f3f4f6;
}

#newTeamName:focus, #newLeagueName:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

#currentTeamInfo {
    border-left: 4px solid #f59e0b;
}

/* ===== CORREZIONE DETTAGLI GIOCATORI IN ANALIZZA SCAMBI ===== */
#analizza-scambi .player-details {
    display: none !important;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    margin: 0;
    padding: 0;
    border: none;
}

#analizza-scambi .player-details:not(.hidden) {
    display: block !important;
    opacity: 1;
    max-height: 500px;
    margin-top: 12px;
    padding: 15px;
    background: rgba(31, 41, 55, 0.95);
    border: 2px solid rgba(139, 92, 246, 0.5);
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    overflow: visible;
}

/* Assicura che i dettagli siano completamente visibili quando aperti */
#analizza-scambi .player-details:not(.hidden) p {
    margin: 10px 0 !important;
    padding: 6px 0 !important;
    font-size: 0.95rem;
    line-height: 1.5;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    display: block;
    width: 100%;
    min-height: 24px;
    color: #e5e7eb !important;
}

/* Stili per i valori nei dettagli */
#analizza-scambi .fantamedia-value,
#analizza-scambi .price-value, 
#analizza-scambi .media-value,
#analizza-scambi .team-value,
#analizza-scambi .role-value {
    color: #f59e0b !important;
    font-weight: 700;
    margin-left: 8px;
}

/* Miglioramento per la transizione di apertura */
#analizza-scambi .player-slot {
    transition: all 0.3s ease;
}

#analizza-scambi .player-slot:has(.player-details:not(.hidden)) {
    margin-bottom: 25px;
}

// ...existing code...
/* ===== MIGLIORAMENTO UX SEZIONE "ALTRI OPZIONI" (solo per Formazione Consigliata) =====
   - layout a due colonne su desktop, colonna singola su mobile
   - spaziatura e gerarchia visiva migliorate
   - pulsanti e liste più leggibili e tappabili
   - istruzioni sintetiche aggiunte via pseudo-elemento (solo visive)
*/
#la-mia-squadra #formationOptionsContainer {
    background: linear-gradient(180deg, rgba(17,24,39,0.6), rgba(20,28,45,0.55));
    border: 1px solid rgba(255,255,255,0.04);
    padding: 14px;
    border-radius: 12px;
    display: grid;
    grid-template-columns: 1fr 320px; /* form controls / quick lists */
    gap: 14px;
    align-items: start;
    box-shadow: 0 6px 20px rgba(2,6,23,0.55);
}

/* Intestazione guida compatta (solo visiva) */
#la-mia-squadra #formationOptionsContainer::before {
    content: "Configurazioni avanzate — imposta giornata, modulo e gestisci rapidamente Titolari/Indisponibili";
    display: block;
    font-size: 0.86rem;
    color: #cbd5e1;
    margin-bottom: 8px;
    padding: 6px 10px;
    background: linear-gradient(90deg, rgba(59,130,246,0.06), rgba(139,92,246,0.04));
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.02);
}

/* Rendere le singole righe del form più leggibili */
#la-mia-squadra #formationOptionsContainer label {
    display: block;
    font-size: 0.9rem;
    color: #d1d5db;
    margin-bottom: 6px;
    font-weight: 600;
}

#la-mia-squadra #formationOptionsContainer input[type="number"],
#la-mia-squadra #formationOptionsContainer select,
#la-mia-squadra #formationOptionsContainer input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(31, 41, 55, 0.6);
    color: #e6eef8;
    font-size: 0.95rem;
    box-shadow: none;
    transition: box-shadow 0.18s, transform 0.12s;
}

#la-mia-squadra #formationOptionsContainer input:focus,
#la-mia-squadra #formationOptionsContainer select:focus {
    box-shadow: 0 4px 18px rgba(59,130,246,0.12);
    border-color: rgba(59,130,246,0.45);
    transform: translateY(-1px);
}

/* Wrapper per i controlli principali (giornata + modulo) */
#la-mia-squadra #formationOptionsContainer > .controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: end;
}

/* Se .controls non esiste nell'HTML, forziamo il layout esistente per sembrare uguale */
#la-mia-squadra #formationOptionsContainer .grid.md\\:grid-cols-2 {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px;
}

/* Pulsanti gestione rapido (Aggiungi) più evidenti e con icona testuale */
#la-mia-squadra #formationOptionsContainer .btn-primary,
#la-mia-squadra #formationOptionsContainer .btn-success {
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.9rem;
}

#la-mia-squadra #formationOptionsContainer .btn-primary::before,
#la-mia-squadra #formationOptionsContainer .btn-success::before {
    content: "＋";
    display: inline-block;
    margin-right: 8px;
    font-weight: 700;
    transform: translateY(-1px);
}

/* Card compatte per Titolari e Infortunati — colonna di destra */
#la-mia-squadra #formationOptionsContainer .bg-card {
    background: rgba(23, 30, 45, 0.6);
    border-radius: 10px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,0.03);
    box-shadow: 0 6px 16px rgba(3,6,14,0.5);
}

/* Titoli delle card più chiari */
#la-mia-squadra #formationOptionsContainer .bg-card h3 {
    margin: 0 0 8px 0;
    font-size: 1rem;
    color: #e6eef8;
}

/* Lista compatta con overflow e indicatori touch */
#la-mia-squadra #formationOptionsContainer .compact-player-list {
    max-height: 180px;
    overflow-y: auto;
    padding-right: 6px;
    margin-top: 6px;
}

/* Elementi di lista più leggibili e tappabili */
#la-mia-squadra #formationOptionsContainer .compact-player-list .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: rgba(31,41,55,0.55);
    border-radius: 8px;
    margin-bottom: 8px;
    transition: background 0.15s, transform 0.12s;
}

#la-mia-squadra #formationOptionsContainer .compact-player-list .flex:hover {
    background: rgba(59,130,246,0.06);
    transform: translateX(4px);
}

/* Rimuovi pulsanti più grandi e leggibili */
#la-mia-squadra #formationOptionsContainer .compact-remove-btn {
    width: 28px;
    height: 28px;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(239,68,68,0.12);
    color: #fecaca;
    border: 1px solid rgba(239,68,68,0.08);
}

/* Aiuta la gerarchia visiva tra colonne */
#la-mia-squadra #formationOptionsContainer > div:first-child {
    padding-right: 6px;
}

#la-mia-squadra #formationOptionsContainer > div:nth-child(2) {
    padding-left: 6px;
}

/* Mobile: singola colonna, maggiore spacing e pulsanti full-width */
@media (max-width: 768px) {
    #la-mia-squadra #formationOptionsContainer {
        grid-template-columns: 1fr;
    }
    #la-mia-squadra #formationOptionsContainer::before {
        font-size: 0.84rem;
        padding: 8px;
    }
    #la-mia-squadra #formationOptionsContainer .btn-primary,
    #la-mia-squadra #formationOptionsContainer .btn-success {
        width: 100%;
        display: block;
    }
    #la-mia-squadra #formationOptionsContainer .compact-player-list {
        max-height: 220px;
    }
    /* Riduci margini per usare meglio lo spazio */
    #la-mia-squadra #formationOptionsContainer {
        padding: 12px;
        gap: 12px;
    }
}

/* Ulteriore contrasto per i badge ruolo all'interno delle card */
#la-mia-squadra #formationOptionsContainer .role-badge {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
}

/* Focus visibile per accessibilità (keyboard/touch) */
#la-mia-squadra #formationOptionsContainer .select, 
#la-mia-squadra #formationOptionsContainer button,
#la-mia-squadra #formationOptionsContainer input {
    outline-offset: 3px;
}

/* Micro-enhancement: indica stato vuoto per le liste */
#la-mia-squadra #formationOptionsContainer .bg-card p.text-center {
    color: #9ca3af;
    font-size: 0.9rem;
    padding: 12px 6px;
}



.header-content h1 {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 2.5rem;
    background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 1px;
}

/* === LIGHT MODE TOGGLE === */
.theme-toggle-container {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.theme-toggle {
    background: rgba(55, 65, 81, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.theme-toggle:hover {
    background: rgba(75, 85, 99, 0.8);
    transform: scale(1.1);
}

.theme-icon {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

/* === LIGHT MODE VARIABLES === */
[data-theme="light"] {
    --bg-primary: #f8fafc;
    --bg-card: rgba(255, 255, 255, 0.9);
    --text-primary: #1f2937;
    --text-secondary: #4b5563;
    --text-muted: #6b7280;
    --border-color: rgba(0, 0, 0, 0.1);
    --accent-purple: #7c3aed;
    --accent-blue: #2563eb;
    --accent-yellow: #d97706;
    --accent-green: #059669;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

[data-theme="light"] .card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    color: var(--text-primary);
}

[data-theme="light"] .btn-primary {
    background: linear-gradient(90deg, rgba(37,99,235,0.15) 0%, rgba(96,165,250,0.1) 100%);
    border: 1px solid rgba(37,99,235,0.2);
    color: var(--accent-blue);
}

[data-theme="light"] .btn-primary:hover {
    background: linear-gradient(90deg, rgba(37,99,235,0.25) 0%, rgba(96,165,250,0.2) 100%);
}

[data-theme="light"] input,
[data-theme="light"] select {
    background: rgba(255, 255, 255, 0.8);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

[data-theme="light"] input:focus,
[data-theme="light"] select:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

[data-theme="light"] .player-table th {
    background: rgba(255, 255, 255, 0.95);
    color: var(--text-secondary);
}

[data-theme="light"] .player-table tr:hover {
    background: rgba(37, 99, 235, 0.05);
}

[data-theme="light"] .taskbar {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .taskbar-item {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="light"] .taskbar-item:hover {
    background: rgba(37, 99, 235, 0.1);
}

[data-theme="light"] .main-header {
    background: rgba(248, 250, 252, 0.95);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="light"] .header-content p {
    color: var(--text-secondary);
}

[data-theme="light"] .theme-toggle {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--border-color);
}

/* Aggiorna i colori per i gradienti dei titoli delle sezioni in light mode */
[data-theme="light"] #analizza-scambi h2 {
    background: linear-gradient(90deg, #c026d3 0%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="light"] #osservati h2 {
    background: linear-gradient(90deg, #2563eb 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="light"] #la-mia-squadra h2 {
    background: linear-gradient(90deg, #059669 0%, #10b981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="light"] #scambi-consigliati h2 {
    background: linear-gradient(90deg, #d97706 0%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="light"] #listone-giocatori h2 {
    background: linear-gradient(90deg, #7c3aed 0%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Responsive per mobile */
@media (max-width: 768px) {
    .theme-toggle-container {
        right: 15px;
    }
    
    .theme-toggle {
        width: 35px;
        height: 35px;
    }
    
    .header-content h1 {
        font-size: 2rem;
    }
}

/* === FONT PERSONALIZZATO === */
/* Per usare il tuo font:
   1. In index.html, decommenta la riga del link del font e inserisci il tuo link
   2. Sostituisci 'TUO_FONT' con il nome del tuo font qui sotto
*/

.site-title {
    font-family: 'TUO_FONT', 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-weight: 900;
    font-size: 2.5rem;
    background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Se non usi un font personalizzato, usa questo stile alternativo */
.site-title:not([style*="font-family"]) {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-weight: 900;
    text-transform: uppercase;
}

/* === LIGHT MODE TOGGLE === */
.theme-toggle-container {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.theme-toggle {
    background: rgba(55, 65, 81, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.theme-toggle:hover {
    background: rgba(75, 85, 99, 0.8);
    transform: scale(1.1);
}

.theme-icon {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

/* === LIGHT MODE COMPLETA === */
[data-theme="light"] {
    --bg-primary: #f8fafc;
    --bg-secondary: #f1f5f9;
    --bg-card: rgba(255, 255, 255, 0.95);
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --border-color: rgba(0, 0, 0, 0.08);
    --border-light: rgba(0, 0, 0, 0.05);
    --accent-purple: #7c3aed;
    --accent-blue: #2563eb;
    --accent-yellow: #d97706;
    --accent-green: #059669;
    --accent-red: #dc2626;
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

[data-theme="light"] .background {
    background: linear-gradient(135deg, #e2e8f0 0%, #f1f5f9 100%);
}

[data-theme="light"] .card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    color: var(--text-primary);
}

[data-theme="light"] .card:hover {
    box-shadow: var(--shadow-hover);
}

/* Bottoni in light mode */
[data-theme="light"] .btn-primary {
    background: linear-gradient(90deg, rgba(37,99,235,0.15) 0%, rgba(96,165,250,0.12) 100%);
    border: 1px solid rgba(37,99,235,0.2);
    color: var(--accent-blue);
}

[data-theme="light"] .btn-primary:hover {
    background: linear-gradient(90deg, rgba(37,99,235,0.25) 0%, rgba(96,165,250,0.2) 100%);
    color: var(--accent-blue);
}

[data-theme="light"] .btn-success {
    background: linear-gradient(90deg, rgba(16,185,129,0.15) 0%, rgba(16,185,129,0.12) 100%);
    border: 1px solid rgba(16,185,129,0.2);
    color: var(--accent-green);
}

[data-theme="light"] .btn-success:hover {
    background: linear-gradient(90deg, rgba(16,185,129,0.25) 0%, rgba(16,185,129,0.2) 100%);
}

[data-theme="light"] .aggiungi-slot,
[data-theme="light"] .toggle-congo {
    background: linear-gradient(90deg, rgba(139,92,246,0.12) 0%, rgba(245,158,11,0.08) 100%);
    border: 1px solid rgba(139,92,246,0.2);
    color: var(--accent-purple);
}

[data-theme="light"] .select-player-btn {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="light"] .select-player-btn:hover {
    background: rgba(37, 99, 235, 0.05);
    border-color: var(--accent-blue);
}

/* Input e select */
[data-theme="light"] input,
[data-theme="light"] select {
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

[data-theme="light"] input:focus,
[data-theme="light"] select:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

[data-theme="light"] input::placeholder {
    color: var(--text-muted);
}

/* Tabelle */
[data-theme="light"] .player-table th {
    background: rgba(255, 255, 255, 0.95);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}

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

[data-theme="light"] .player-table tr:hover {
    background: rgba(37, 99, 235, 0.03);
}

[data-theme="light"] .player-table tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
}

/* Taskbar */
[data-theme="light"] .taskbar {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .taskbar-item {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="light"] .taskbar-item:hover {
    background: rgba(37, 99, 235, 0.08);
}

/* Header */
[data-theme="light"] .main-header {
    background: rgba(248, 250, 252, 0.95);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="light"] .header-content p {
    color: var(--text-secondary);
}

[data-theme="light"] .version-label {
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .theme-toggle {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

/* Toggle sezioni */
[data-theme="light"] .section-toggle {
    background: linear-gradient(90deg, rgba(37,99,235,0.1) 0%, rgba(139,92,246,0.08) 100%);
    border: 1px solid rgba(37,99,235,0.15);
    color: var(--text-primary);
}

[data-theme="light"] .section-toggle:hover {
    background: linear-gradient(90deg, rgba(37,99,235,0.15) 0%, rgba(139,92,246,0.12) 100%);
}

/* Popup */
[data-theme="light"] .player-select-container,
[data-theme="light"] .player-details-container {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="light"] .player-select-header,
[data-theme="light"] .player-details-header {
    border-bottom: 1px solid var(--border-light);
}

[data-theme="light"] .player-select-search {
    border-bottom: 1px solid var(--border-light);
}

[data-theme="light"] .player-select-item {
    border-bottom: 1px solid var(--border-light);
    color: var(--text-primary);
}

[data-theme="light"] .player-select-item:hover {
    background: rgba(37, 99, 235, 0.05);
}

/* Badge ruoli - manteniamo i colori ma miglioriamo il contrasto */
[data-theme="light"] .role-badge {
    color: white;
    font-weight: 600;
}

[data-theme="light"] .role-A { background-color: #dc2626; }
[data-theme="light"] .role-C { background-color: #2563eb; }
[data-theme="light"] .role-D { background-color: #059669; }
[data-theme="light"] .role-P { background-color: #d97706; }

/* Formazione */
[data-theme="light"] .vertical-football-field {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border: 2px solid #ffffff;
}

[data-theme="light"] .player-card {
    background: rgba(255, 255, 255, 0.95);
    color: var(--text-primary);
    border: 2px solid;
}

[data-theme="light"] .player-name {
    color: var(--text-primary);
}

[data-theme="light"] .player-details {
    color: var(--text-secondary);
}

[data-theme="light"] .player-score {
    background: rgba(245, 158, 11, 0.9);
    color: #1f2937;
}

/* Filtri */
[data-theme="light"] .filter-button {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="light"] .filter-button.active {
    background: rgba(37, 99, 235, 0.15);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

[data-theme="light"] .filter-button:hover {
    background: rgba(37, 99, 235, 0.08);
}

/* Colori per i titoli delle sezioni in light mode */
[data-theme="light"] #analizza-scambi h2 {
    background: linear-gradient(90deg, #c026d3 0%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="light"] #osservati h2 {
    background: linear-gradient(90deg, #2563eb 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="light"] #la-mia-squadra h2 {
    background: linear-gradient(90deg, #059669 0%, #10b981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="light"] #scambi-consigliati h2 {
    background: linear-gradient(90deg, #d97706 0%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="light"] #listone-giocatori h2 {
    background: linear-gradient(90deg, #7c3aed 0%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Footer */
[data-theme="light"] .footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

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

[data-theme="light"] .social-btn {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="light"] .social-btn:hover {
    background: rgba(255, 255, 255, 1);
    color: var(--text-primary);
}

/* Scrollbar in light mode */
[data-theme="light"] ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Miglioramenti per la leggibilità */
[data-theme="light"] .text-gray-300 { color: var(--text-secondary) !important; }
[data-theme="light"] .text-gray-400 { color: var(--text-muted) !important; }
[data-theme="light"] .text-gray-500 { color: var(--text-muted) !important; }

[data-theme="light"] .bg-gray-800 { 
    background: rgba(0, 0, 0, 0.05) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .bg-card {
    background: var(--bg-card) !important;
}

/* Responsive per mobile */
@media (max-width: 768px) {
    .theme-toggle-container {
        right: 15px;
    }
    
    .theme-toggle {
        width: 35px;
        height: 35px;
    }
    
    .site-title {
        font-size: 2rem;
    }
}

/* === FONT PERSONALIZZATO === */
/* ISTRUZIONI:
   1. In index.html, decommenta la riga del link del font e inserisci il tuo link
   2. Sostituisci 'TuoFont' con il nome del tuo font qui sotto nel .site-title
*/

.site-title {
    /* Sostituisci 'TuoFont' con il nome del tuo font */
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-weight: 900;
    font-size: 2.5rem;
    background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* === LIGHT MODE TOGGLE === */
.theme-toggle-container {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.theme-toggle {
    background: rgba(55, 65, 81, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.theme-toggle:hover {
    background: rgba(75, 85, 99, 0.8);
    transform: scale(1.1);
}

.theme-icon {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

/* === LIGHT MODE COMPLETA - TUTTI GLI ELEMENTI ADATTATI === */
[data-theme="light"] {
    --bg-primary: #f0f4f8;
    --bg-secondary: #e2e8f0;
    --bg-card: rgba(255, 255, 255, 0.95);
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --border-color: rgba(0, 0, 0, 0.1);
    --border-light: rgba(0, 0, 0, 0.05);
    --accent-purple: #7c3aed;
    --accent-blue: #2563eb;
    --accent-yellow: #d97706;
    --accent-green: #059669;
    --accent-red: #dc2626;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Body e sfondo */
[data-theme="light"] body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

[data-theme="light"] .background {
    background: linear-gradient(135deg, #e2e8f0 0%, #f1f5f9 100%) !important;
}

/* Header */
[data-theme="light"] .main-header {
    background: rgba(240, 244, 248, 0.95) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="light"] .header-content p {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .version-label {
    color: var(--text-muted) !important;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .theme-toggle {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

/* Cards */
[data-theme="light"] .card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .card:hover {
    box-shadow: var(--shadow-hover) !important;
    transform: translateY(-2px);
}

/* Bottoni principali */
[data-theme="light"] .btn-primary {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.15) 0%, rgba(96, 165, 250, 0.12) 100%) !important;
    border: 1px solid rgba(37, 99, 235, 0.2) !important;
    color: var(--accent-blue) !important;
}

[data-theme="light"] .btn-primary:hover {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.25) 0%, rgba(96, 165, 250, 0.2) 100%) !important;
    color: var(--accent-blue) !important;
}

[data-theme="light"] .btn-success {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.12) 100%) !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
    color: var(--accent-green) !important;
}

[data-theme="light"] .btn-success:hover {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.25) 0%, rgba(16, 185, 129, 0.2) 100%) !important;
}

/* Bottoni speciali */
[data-theme="light"] .aggiungi-slot,
[data-theme="light"] .toggle-congo {
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.12) 0%, rgba(245, 158, 11, 0.08) 100%) !important;
    border: 1px solid rgba(139, 92, 246, 0.2) !important;
    color: var(--accent-purple) !important;
}

[data-theme="light"] .aggiungi-slot:hover,
[data-theme="light"] .toggle-congo:hover {
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.2) 0%, rgba(245, 158, 11, 0.15) 100%) !important;
}

/* Taskbar completamente adattata */
[data-theme="light"] .taskbar {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .taskbar-item {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .taskbar-item:hover {
    background: rgba(37, 99, 235, 0.1) !important;
    color: var(--accent-blue) !important;
    transform: translateY(-2px);
}

[data-theme="light"] .taskbar-label {
    color: var(--text-primary) !important;
}

/* Input e form */
[data-theme="light"] input,
[data-theme="light"] select {
    background: rgba(255, 255, 255, 0.9) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="light"] input:focus,
[data-theme="light"] select:focus {
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}

[data-theme="light"] input::placeholder {
    color: var(--text-muted) !important;
}

/* Tabelle */
[data-theme="light"] .player-table th {
    background: rgba(255, 255, 255, 0.95) !important;
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

[data-theme="light"] .player-table td {
    border-bottom: 1px solid var(--border-light) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .player-table tr:hover {
    background: rgba(37, 99, 235, 0.03) !important;
}

[data-theme="light"] .player-table tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.02) !important;
}

/* Badge ruoli */
[data-theme="light"] .role-badge {
    color: white !important;
    font-weight: 600;
}

[data-theme="light"] .role-A { background-color: #dc2626 !important; }
[data-theme="light"] .role-C { background-color: #2563eb !important; }
[data-theme="light"] .role-D { background-color: #059669 !important; }
[data-theme="light"] .role-P { background-color: #d97706 !important; }

/* Sezioni toggle */
[data-theme="light"] .section-toggle {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.1) 0%, rgba(139, 92, 246, 0.08) 100%) !important;
    border: 1px solid rgba(37, 99, 235, 0.15) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .section-toggle:hover {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.15) 0%, rgba(139, 92, 246, 0.12) 100%) !important;
}

/* Popup */
[data-theme="light"] .player-select-popup,
[data-theme="light"] .player-details-popup {
    background: rgba(240, 244, 248, 0.95) !important;
}

[data-theme="light"] .player-select-container,
[data-theme="light"] .player-details-container {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .player-select-header,
[data-theme="light"] .player-details-header {
    border-bottom: 1px solid var(--border-light) !important;
}

[data-theme="light"] .player-select-search {
    border-bottom: 1px solid var(--border-light) !important;
}

[data-theme="light"] .player-select-item {
    border-bottom: 1px solid var(--border-light) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .player-select-item:hover {
    background: rgba(37, 99, 235, 0.05) !important;
}

/* Campo da calcio */
[data-theme="light"] .vertical-football-field {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    border: 2px solid #ffffff !important;
}

[data-theme="light"] .player-card {
    background: rgba(255, 255, 255, 0.95) !important;
    color: var(--text-primary) !important;
    border: 2px solid !important;
}

[data-theme="light"] .player-name {
    color: var(--text-primary) !important;
}

[data-theme="light"] .player-details {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .player-score {
    background: rgba(245, 158, 11, 0.9) !important;
    color: #1f2937 !important;
}

/* Filtri */
[data-theme="light"] .filter-button {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .filter-button.active {
    background: rgba(37, 99, 235, 0.15) !important;
    border-color: var(--accent-blue) !important;
    color: var(--accent-blue) !important;
}

[data-theme="light"] .filter-button:hover {
    background: rgba(37, 99, 235, 0.08) !important;
}

/* Colori per i titoli delle sezioni */
[data-theme="light"] #analizza-scambi h2 {
    background: linear-gradient(90deg, #c026d3 0%, #a855f7 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

[data-theme="light"] #osservati h2 {
    background: linear-gradient(90deg, #2563eb 0%, #3b82f6 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

[data-theme="light"] #la-mia-squadra h2 {
    background: linear-gradient(90deg, #059669 0%, #10b981 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

[data-theme="light"] #scambi-consigliati h2 {
    background: linear-gradient(90deg, #d97706 0%, #f59e0b 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

[data-theme="light"] #listone-giocatori h2 {
    background: linear-gradient(90deg, #7c3aed 0%, #a855f7 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Footer */
[data-theme="light"] .footer {
    background: var(--bg-secondary) !important;
    border-top: 1px solid var(--border-color) !important;
}

[data-theme="light"] .footer-text {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .social-btn {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .social-btn:hover {
    background: rgba(255, 255, 255, 1) !important;
    color: var(--text-primary) !important;
}

/* Scrollbar */
[data-theme="light"] ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3) !important;
}

/* Utility classes per light mode */
[data-theme="light"] .text-gray-300,
[data-theme="light"] .text-gray-400,
[data-theme="light"] .text-gray-500 {
    color: var(--text-muted) !important;
}

[data-theme="light"] .bg-gray-800 {
    background: rgba(0, 0, 0, 0.05) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .bg-card {
    background: var(--bg-card) !important;
}

/* Pulsanti di rimozione */
[data-theme="light"] .remove-slot,
[data-theme="light"] .remove-watched-btn,
[data-theme="light"] .remove-injured-btn,
[data-theme="light"] .remove-essential-btn,
[data-theme="light"] .compact-remove-btn {
    background: rgba(220, 38, 38, 0.1) !important;
    color: #dc2626 !important;
    border: 1px solid rgba(220, 38, 38, 0.2) !important;
}

[data-theme="light"] .remove-slot:hover,
[data-theme="light"] .remove-watched-btn:hover,
[data-theme="light"] .remove-injured-btn:hover,
[data-theme="light"] .remove-essential-btn:hover,
[data-theme="light"] .compact-remove-btn:hover {
    background: rgba(220, 38, 38, 0.2) !important;
}

/* Contatori squadra */
[data-theme="light"] #goalkeeperCount,
[data-theme="light"] #defenderCount,
[data-theme="light"] #midfielderCount,
[data-theme="light"] #forwardCount {
    color: var(--accent-yellow) !important;
}

/* Loader */
[data-theme="light"] .loader {
    border: 3px solid rgba(0, 0, 0, 0.1) !important;
    border-top: 3px solid var(--accent-blue) !important;
}

/* Messaggi */
[data-theme="light"] .positive {
    color: var(--accent-green) !important;
}

[data-theme="light"] .negative {
    color: var(--accent-red) !important;
}

/* Area scambi */
[data-theme="light"] .trade-output-container {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 2px dashed var(--border-color) !important;
}

[data-theme="light"] .trade-output-container:not(:empty) {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid var(--border-color) !important;
}

/* Formazione consigliata */
[data-theme="light"] #suggestedFormation {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.9)) !important;
    border: 1px solid var(--border-color) !important;
}

/* Sezione conguaglio */
[data-theme="light"] .congo-section {
    background: rgba(255, 255, 255, 0.8) !important;
    border-left: 4px solid var(--accent-yellow) !important;
}

/* Player slots */
[data-theme="light"] .player-slot {
    background: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="light"] .player-details {
    background: rgba(255, 255, 255, 0.9) !important;
}

/* Options container */
[data-theme="light"] .options-container {
    background: rgba(255, 255, 255, 0.8) !important;
}

/* Responsive per mobile */
@media (max-width: 768px) {
    .theme-toggle-container {
        right: 15px;
    }
    
    .theme-toggle {
        width: 35px;
        height: 35px;
    }
    
    .site-title {
        font-size: 2rem;
    }
    
    [data-theme="light"] .taskbar {
        width: 94% !important;
        bottom: 10px !important;
    }
}

/* Versione molto piccola */
@media (max-width: 480px) {
    [data-theme="light"] .taskbar-item {
        min-width: 50px !important;
        padding: 5px 3px !important;
    }
    
    [data-theme="light"] .taskbar-label {
        font-size: 0.65rem !important;
    }
}








/* Versione più specifica - applica solo ai toggle delle sezioni */
.card .section-toggle::before {
    display: none;
}

.card .section-toggle::after {
    left: 20px;
}

.card .section-toggle {
    padding-left: 20px;
}










/* Versione compatta - solo icona */
.theme-toggle-container {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.main-header.scrolled .theme-toggle-container {
    opacity: 1;
    visibility: visible;
}

.theme-toggle {
    background: rgba(55, 65, 81, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.theme-toggle:hover {
    background: rgba(75, 85, 99, 0.8);
    transform: scale(1.1);
}

.theme-icon {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

/* Light mode */
[data-theme="light"] .theme-toggle {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .theme-toggle:hover {
    background: rgba(255, 255, 255, 1);
}

/* Responsive */
@media (max-width: 768px) {
    .theme-toggle-container {
        right: 15px;
    }
    
    .theme-toggle {
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 480px) {
    .theme-toggle-container {
        right: 10px;
    }
    
    .theme-toggle {
        width: 28px;
        height: 28px;
    }
    
    .theme-icon {
        font-size: 1rem;
    }
}

/* === DARK MODE PIÙ SCURA === */
[data-theme="dark"] {
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --bg-card: rgba(22, 27, 34, 0.95);
    --text-primary: #f0f6fc;
    --text-secondary: #c9d1d9;
    --text-muted: #8b949e;
    --border-color: rgba(240, 246, 252, 0.1);
    --border-light: rgba(240, 246, 252, 0.05);
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] body {
    background-color: var(--bg-primary);
}

[data-theme="dark"] .background {
    background: linear-gradient(135deg, #0d1117 0%, #161b22 100%) !important;
}

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

[data-theme="dark"] .main-header {
    background: rgba(13, 17, 23, 0.95);
}

[data-theme="dark"] .taskbar {
    background: rgba(22, 27, 34, 0.95);
}

/* === LIGHT MODE MIGLIORATA - CONTRASTO AUMENTATO === */
[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-card: rgba(255, 255, 255, 0.98);
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --border-color: rgba(0, 0, 0, 0.15);
    --border-light: rgba(0, 0, 0, 0.08);
    --accent-purple: #7c3aed;
    --accent-blue: #2563eb;
    --accent-yellow: #d97706;
    --accent-green: #059669;
    --accent-red: #dc2626;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Miglioramenti contrasto per light mode */
[data-theme="light"] .card {
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow) !important;
}

[data-theme="light"] .btn-primary {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.2) 0%, rgba(96, 165, 250, 0.15) 100%) !important;
    border: 1px solid rgba(37, 99, 235, 0.3) !important;
    color: var(--accent-blue) !important;
    font-weight: 600;
}

[data-theme="light"] .btn-primary:hover {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.3) 0%, rgba(96, 165, 250, 0.25) 100%) !important;
}

[data-theme="light"] input,
[data-theme="light"] select {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    font-weight: 500;
}

[data-theme="light"] .player-table th {
    background: rgba(255, 255, 255, 0.98) !important;
    color: var(--text-secondary) !important;
    font-weight: 600;
    border-bottom: 2px solid var(--border-color) !important;
}

[data-theme="light"] .player-table td {
    color: var(--text-primary) !important;
    font-weight: 500;
    border-bottom: 1px solid var(--border-light) !important;
}

[data-theme="light"] .section-toggle {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.15) 0%, rgba(139, 92, 246, 0.12) 100%) !important;
    border: 1px solid rgba(37, 99, 235, 0.2) !important;
    color: var(--text-primary) !important;
    font-weight: 600;
}

[data-theme="light"] .taskbar-item {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    font-weight: 500;
}

[data-theme="light"] .taskbar-item:hover {
    background: rgba(37, 99, 235, 0.1) !important;
    color: var(--accent-blue) !important;
}

/* Miglioramenti per i testi piccoli */
[data-theme="light"] .text-sm {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .text-gray-400 {
    color: var(--text-muted) !important;
}

/* Pulsanti più evidenti */
[data-theme="light"] .aggiungi-slot,
[data-theme="light"] .toggle-congo {
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.15) 0%, rgba(245, 158, 11, 0.12) 100%) !important;
    border: 1px solid rgba(139, 92, 246, 0.25) !important;
    color: var(--accent-purple) !important;
    font-weight: 600;
}

/* Miglioramenti per le card */
[data-theme="light"] .bg-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

/* Miglioramenti per i popup */
[data-theme="light"] .player-select-container,
[data-theme="light"] .player-details-container {
    background: rgba(255, 255, 255, 0.99) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
}

/* Miglioramenti per i filtri */
[data-theme="light"] .filter-button {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    font-weight: 500;
}

[data-theme="light"] .filter-button.active {
    background: rgba(37, 99, 235, 0.2) !important;
    border-color: var(--accent-blue) !important;
    color: var(--accent-blue) !important;
    font-weight: 600;
}

/* Transizione fluida per il cambio tema */
body.theme-changing * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

.theme-icon {
    transition: transform 0.3s ease;
}

/* === LIGHT MODE MIGLIORATO - PIÙ SCURO E MEGLIO ADATTATO === */
[data-theme="light"] {
    --bg-primary: #e2e8f0;
    --bg-secondary: #cbd5e1;
    --bg-card: rgba(248, 250, 252, 0.95);
    --text-primary: #1e293b;
    --text-secondary: #334155;
    --text-muted: #475569;
    --border-color: rgba(0, 0, 0, 0.2);
    --border-light: rgba(0, 0, 0, 0.1);
    --accent-purple: #7c3aed;
    --accent-blue: #2563eb;
    --accent-yellow: #d97706;
    --accent-green: #059669;
    --accent-red: #dc2626;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
}

/* Miglioramenti per contrasto e visibilità */
[data-theme="light"] body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

[data-theme="light"] .background {
    background: linear-gradient(135deg, #d1d5db 0%, #e5e7eb 100%) !important;
}

[data-theme="light"] .card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .card:hover {
    box-shadow: var(--shadow-hover) !important;
    transform: translateY(-2px);
}

/* Miglioramento header */
[data-theme="light"] .main-header {
    background: rgba(226, 232, 240, 0.95) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="light"] .header-content p {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .version-label {
    color: var(--text-muted) !important;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--border-color);
}

/* Bottoni più visibili */
[data-theme="light"] .btn-primary {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.25) 0%, rgba(96, 165, 250, 0.2) 100%) !important;
    border: 1px solid rgba(37, 99, 235, 0.35) !important;
    color: var(--accent-blue) !important;
    font-weight: 600;
}

[data-theme="light"] .btn-primary:hover {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.35) 0%, rgba(96, 165, 250, 0.3) 100%) !important;
    color: var(--accent-blue) !important;
}

[data-theme="light"] .btn-success {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.25) 0%, rgba(16, 185, 129, 0.2) 100%) !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    color: var(--accent-green) !important;
}

[data-theme="light"] .btn-success:hover {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.35) 0%, rgba(16, 185, 129, 0.3) 100%) !important;
}

/* Taskbar più scura e definita */
[data-theme="light"] .taskbar {
    background: rgba(248, 250, 252, 0.95) !important;
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .taskbar-item {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .taskbar-item:hover {
    background: rgba(37, 99, 235, 0.15) !important;
    color: var(--accent-blue) !important;
    transform: translateY(-2px);
}

[data-theme="light"] .taskbar-label {
    color: var(--text-primary) !important;
}

/* Input e form più definiti */
[data-theme="light"] input,
[data-theme="light"] select {
    background: rgba(255, 255, 255, 0.95) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="light"] input:focus,
[data-theme="light"] select:focus {
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
}

[data-theme="light"] input::placeholder {
    color: var(--text-muted) !important;
}

/* Tabelle con bordi più definiti */
[data-theme="light"] .player-table th {
    background: rgba(255, 255, 255, 0.98) !important;
    color: var(--text-secondary) !important;
    border-bottom: 2px solid var(--border-color) !important;
}

[data-theme="light"] .player-table td {
    border-bottom: 1px solid var(--border-light) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .player-table tr:hover {
    background: rgba(37, 99, 235, 0.05) !important;
}

[data-theme="light"] .player-table tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.03) !important;
}

/* Sezioni toggle più visibili */
[data-theme="light"] .section-toggle {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.2) 0%, rgba(139, 92, 246, 0.15) 100%) !important;
    border: 1px solid rgba(37, 99, 235, 0.25) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .section-toggle:hover {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.25) 0%, rgba(139, 92, 246, 0.2) 100%) !important;
}

/* Popup con bordi più definiti */
[data-theme="light"] .player-select-popup,
[data-theme="light"] .player-details-popup {
    background: rgba(226, 232, 240, 0.95) !important;
}

[data-theme="light"] .player-select-container,
[data-theme="light"] .player-details-container {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .player-select-header,
[data-theme="light"] .player-details-header {
    border-bottom: 1px solid var(--border-color) !important;
}

[data-theme="light"] .player-select-search {
    border-bottom: 1px solid var(--border-color) !important;
}

[data-theme="light"] .player-select-item {
    border-bottom: 1px solid var(--border-light) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .player-select-item:hover {
    background: rgba(37, 99, 235, 0.08) !important;
}

/* Miglioramento per i filtri */
[data-theme="light"] .filter-button {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .filter-button.active {
    background: rgba(37, 99, 235, 0.2) !important;
    border-color: var(--accent-blue) !important;
    color: var(--accent-blue) !important;
    font-weight: 600;
}

[data-theme="light"] .filter-button:hover {
    background: rgba(37, 99, 235, 0.1) !important;
}

/* Miglioramento per i contatori squadra */
[data-theme="light"] #goalkeeperCount,
[data-theme="light"] #defenderCount,
[data-theme="light"] #midfielderCount,
[data-theme="light"] #forwardCount {
    color: var(--accent-yellow) !important;
    font-weight: 700;
}

/* Miglioramento per i badge ruoli */
[data-theme="light"] .role-badge {
    color: white !important;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .role-A { background-color: #dc2626 !important; }
[data-theme="light"] .role-C { background-color: #2563eb !important; }
[data-theme="light"] .role-D { background-color: #059669 !important; }
[data-theme="light"] .role-P { background-color: #d97706 !important; }

/* Miglioramento per le carte compatte */
[data-theme="light"] .compact-roster {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="light"] .compact-role-section {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid var(--border-light) !important;
}

[data-theme="light"] .compact-player-item {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid var(--border-light) !important;
}

[data-theme="light"] .compact-player-item:hover {
    background: rgba(37, 99, 235, 0.1) !important;
    transform: translateX(2px);
}

/* Miglioramento per il campo da calcio */
[data-theme="light"] .vertical-football-field {
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%) !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .player-card {
    background: rgba(255, 255, 255, 0.95) !important;
    color: var(--text-primary) !important;
    border: 2px solid !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .player-name {
    color: var(--text-primary) !important;
    font-weight: 600;
}

[data-theme="light"] .player-details {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .player-score {
    background: rgba(245, 158, 11, 0.95) !important;
    color: #1f2937 !important;
    font-weight: 700;
}

/* Miglioramento per i risultati scambi */
[data-theme="light"] .trade-output-container {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 2px dashed var(--border-color) !important;
}

[data-theme="light"] .trade-output-container:not(:empty) {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid var(--border-color) !important;
}

/* Miglioramento per i giocatori osservati */
[data-theme="light"] #watchedPlayersTable {
    background: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="light"] #watchedPlayersTable th {
    background: rgba(255, 255, 255, 0.95) !important;
}

/* Miglioramento per il footer */
[data-theme="light"] .footer {
    background: var(--bg-secondary) !important;
    border-top: 1px solid var(--border-color) !important;
}

[data-theme="light"] .footer-text {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .social-btn {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .social-btn:hover {
    background: rgba(255, 255, 255, 1) !important;
    color: var(--text-primary) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Miglioramento per i pulsanti di rimozione */
[data-theme="light"] .remove-slot,
[data-theme="light"] .remove-watched-btn,
[data-theme="light"] .remove-injured-btn,
[data-theme="light"] .remove-essential-btn,
[data-theme="light"] .compact-remove-btn {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #dc2626 !important;
    border: 1px solid rgba(220, 38, 38, 0.3) !important;
    font-weight: 600;
}

[data-theme="light"] .remove-slot:hover,
[data-theme="light"] .remove-watched-btn:hover,
[data-theme="light"] .remove-injured-btn:hover,
[data-theme="light"] .remove-essential-btn:hover,
[data-theme="light"] .compact-remove-btn:hover {
    background: rgba(220, 38, 38, 0.25) !important;
    transform: scale(1.1);
}

/* Miglioramento per i dettagli giocatori */
[data-theme="light"] .player-details {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid rgba(139, 92, 246, 0.4) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .fantamedia-value,
[data-theme="light"] .price-value, 
[data-theme="light"] .media-value,
[data-theme="light"] .team-value,
[data-theme="light"] .role-value {
    color: var(--accent-yellow) !important;
    font-weight: 700;
}

/* Miglioramento per le opzioni */
[data-theme="light"] .options-container {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Miglioramento per la sezione conguaglio */
[data-theme="light"] .congo-section {
    background: rgba(255, 255, 255, 0.9) !important;
    border-left: 4px solid var(--accent-yellow) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Miglioramento per i giocatori indispensabili */
[data-theme="light"] .essential-player .player-card {
    border: 2px solid #ef4444 !important;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}

/* Miglioramento per i titoli delle sezioni */
[data-theme="light"] #analizza-scambi h2,
[data-theme="light"] #osservati h2,
[data-theme="light"] #la-mia-squadra h2,
[data-theme="light"] #scambi-consigliati h2,
[data-theme="light"] #listone-giocatori h2 {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Miglioramento per i messaggi di stato */
[data-theme="light"] .positive {
    color: var(--accent-green) !important;
    font-weight: 600;
}

[data-theme="light"] .negative {
    color: var(--accent-red) !important;
    font-weight: 600;
}

/* Miglioramento per il loader */
[data-theme="light"] .loader {
    border: 3px solid rgba(0, 0, 0, 0.1) !important;
    border-top: 3px solid var(--accent-blue) !important;
}

/* === FONT SEPIARIDOM - FORMA ORIGINALE === */
.header-content h1 {
    font-family: 'Inter', sans-serif;
    font-weight: bold; /* CAMBIATO DA normal A bold */
    font-size: 2.7rem;
    background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    letter-spacing: normal;
    line-height: 1.1;
    text-transform: none;
    font-style: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Versione compatta quando si scrolla */
.main-header.scrolled .header-content h1 {
    font-size: 1.8rem;
    font-weight: bold; /* CAMBIATO DA normal A bold */
}

/* Light mode */
[data-theme="light"] .header-content h1 {
    background: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Responsive */
@media (max-width: 768px) {
    .header-content h1 {
        font-size: 2.2rem;
        font-weight: normal; /* Mantiene il peso normale su mobile */
    }
    
    .main-header.scrolled .header-content h1 {
        font-size: 1.5rem;
        font-weight: normal;
    }
}

@media (max-width: 480px) {
    .header-content h1 {
        font-size: 1.8rem;
        font-weight: normal;
    }
    
    .main-header.scrolled .header-content h1 {
        font-size: 1.3rem;
        font-weight: normal;
    }
}

/* === LIGHT MODE ANIMATED BACKGROUND === */
[data-theme="light"] .background {
    background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%) !important;
    position: relative;
    overflow: hidden;
}

/* Elementi blurrati animati */
[data-theme="light"] .background::before,
[data-theme="light"] .background::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.15;
    animation: floatBackground 20s ease-in-out infinite;
    z-index: -1;
}

/* Primo elemento - Blu del logo */
[data-theme="light"] .background::before {
    background: linear-gradient(45deg, #3b82f6, #60a5fa);
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

/* Secondo elemento - Viola del logo */
[data-theme="light"] .background::after {
    background: linear-gradient(45deg, #8b5cf6, #a78bfa);
    bottom: 15%;
    right: 10%;
    animation-delay: -10s;
}

/* Terzo elemento - aggiuntivo per più movimento */
[data-theme="light"] .background {
    background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%) !important;
}

[data-theme="light"] .background::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: linear-gradient(45deg, #3b82f6, #60a5fa);
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.12;
    animation: floatBackground 25s ease-in-out infinite;
    top: 20%;
    left: 5%;
    z-index: -1;
}

[data-theme="light"] .background::after {
    content: '';
    position: absolute;
    width: 350px;
    height: 350px;
    background: linear-gradient(45deg, #8b5cf6, #a78bfa);
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.1;
    animation: floatBackground 30s ease-in-out infinite reverse;
    bottom: 10%;
    right: 5%;
    z-index: -1;
}

/* Animazione per il movimento fluido */
@keyframes floatBackground {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(30px, -20px) scale(1.1);
    }
    50% {
        transform: translate(-20px, 25px) scale(0.9);
    }
    75% {
        transform: translate(25px, 15px) scale(1.05);
    }
}

/* Versione alternativa con più elementi (se preferisci più movimento) */
/* Aggiungi questo se vuoi ancora più elementi animati */
[data-theme="light"] .background {
    position: relative;
}

[data-theme="light"] .background::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    background: linear-gradient(45deg, rgba(59, 130, 246, 0.08), rgba(96, 165, 250, 0.12));
    border-radius: 50%;
    filter: blur(120px);
    animation: floatBackground 35s ease-in-out infinite;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

/* Per dispositivi mobili - riduci le dimensioni e l'animazione */
@media (max-width: 768px) {
    [data-theme="light"] .background::before,
    [data-theme="light"] .background::after {
        width: 250px;
        height: 250px;
        filter: blur(60px);
    }
    
    @keyframes floatBackground {
        0%, 100% {
            transform: translate(0, 0) scale(1);
        }
        25% {
            transform: translate(15px, -10px) scale(1.05);
        }
        50% {
            transform: translate(-10px, 12px) scale(0.95);
        }
        75% {
            transform: translate(12px, 8px) scale(1.02);
        }
    }
}

/* Versione molto piccola */
@media (max-width: 480px) {
    [data-theme="light"] .background::before,
    [data-theme="light"] .background::after {
        width: 200px;
        height: 200px;
        filter: blur(40px);
        opacity: 0.08;
    }
}

/* Assicurati che il contenuto rimanga sopra lo sfondo */
[data-theme="light"] .main-content {
    position: relative;
    z-index: 1;
}

[data-theme="light"] .card {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Migliora la leggibilità del testo sullo sfondo animato */
[data-theme="light"] body {
    background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%);
}




















/* === LIGHT MODE ANIMATED BACKGROUND - VERSIONE MIGLIORATA === */
[data-theme="light"] body {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f1f5f9 100%) !important;
    position: relative;
    overflow-x: hidden;
}

[data-theme="light"] body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.25) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.25) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(96, 165, 250, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 70% 20%, rgba(167, 139, 250, 0.15) 0%, transparent 50%);
    filter: blur(60px);
    animation: floatBackground 20s ease-in-out infinite;
    z-index: -1;
    pointer-events: none;
}

/* Elementi aggiuntivi per più movimento */
[data-theme="light"] body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 60% 40%, rgba(37, 99, 235, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 30% 60%, rgba(124, 58, 237, 0.2) 0%, transparent 50%);
    filter: blur(80px);
    animation: floatBackground 25s ease-in-out infinite reverse;
    z-index: -1;
    pointer-events: none;
    opacity: 0.7;
}

/* Animazione migliorata */
@keyframes floatBackground {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(-20px, 15px) scale(1.05);
    }
    50% {
        transform: translate(15px, -20px) scale(0.95);
    }
    75% {
        transform: translate(-15px, -15px) scale(1.02);
    }
}

/* Effetti di movimento aggiuntivi */
@keyframes pulseBackground {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.8;
    }
}

/* Aggiungiamo un terzo layer per più profondità */
.background-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.3) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(139, 92, 246, 0.3) 0%, transparent 40%);
    filter: blur(40px);
    animation: pulseBackground 15s ease-in-out infinite;
    z-index: -1;
    pointer-events: none;
    opacity: 0.4;
}

/* Migliora la leggibilità delle card */
[data-theme="light"] .card {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

/* Header più trasparente per far vedere lo sfondo */
[data-theme="light"] .main-header {
    background: rgba(248, 250, 252, 0.85) !important;
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Taskbar trasparente */
[data-theme="light"] .taskbar {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

/* === MIGLIORAMENTI LEGGIBILITÀ LIGHT MODE === */

/* 1. RISULTATO ANALISI SCAMBIO */
[data-theme="light"] #tradeOutput .trade-placeholder {
    color: var(--text-secondary) !important;
}

[data-theme="light"] #tradeOutput .trade-placeholder h3 {
    color: var(--text-primary) !important;
    font-weight: 600;
}

[data-theme="light"] #tradeOutput .trade-icon {
    color: var(--text-muted) !important;
}

[data-theme="light"] #tradeOutput .trade-result h4 {
    color: var(--text-primary) !important;
    border-bottom: 2px solid var(--border-color) !important;
    font-weight: 600;
}

[data-theme="light"] #tradeOutput .trade-details {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-primary) !important;
}

/* 2. SIMBOLO APRI/CHIUDI SEZIONI */
[data-theme="light"] .section-toggle::before {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.3) 0%, rgba(139, 92, 246, 0.25) 100%) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .section-toggle::after {
    border-bottom: 2px solid var(--text-primary) !important;
    border-right: 2px solid var(--text-primary) !important;
}

[data-theme="light"] .section-toggle:hover::after {
    border-bottom-color: var(--accent-blue) !important;
    border-right-color: var(--accent-blue) !important;
}

/* 3. TOGGLE DEI 3 PUNTI */
[data-theme="light"] .options-toggle {
    background: rgba(37, 99, 235, 0.15) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(37, 99, 235, 0.2) !important;
    color: var(--accent-blue) !important;
    font-weight: 600;
}

[data-theme="light"] .options-toggle:hover {
    background: rgba(37, 99, 235, 0.25) !important;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15) !important;
}

/* 4. POPUP */
[data-theme="light"] .player-select-popup,
[data-theme="light"] .player-details-popup {
    background: rgba(240, 244, 248, 0.95) !important;
    backdrop-filter: blur(20px);
}

[data-theme="light"] .player-select-container,
[data-theme="light"] .player-details-container {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .player-select-header,
[data-theme="light"] .player-details-header {
    border-bottom: 1px solid var(--border-color) !important;
    background: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="light"] .player-select-header h3,
[data-theme="light"] .player-details-header h3 {
    color: var(--text-primary) !important;
    font-weight: 600;
}

[data-theme="light"] .player-select-search {
    border-bottom: 1px solid var(--border-light) !important;
    background: rgba(255, 255, 255, 0.8) !important;
}

[data-theme="light"] .player-select-search input {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .player-select-item {
    border-bottom: 1px solid var(--border-light) !important;
    color: var(--text-primary) !important;
    background: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="light"] .player-select-item:hover {
    background: rgba(37, 99, 235, 0.08) !important;
    color: var(--accent-blue) !important;
}

[data-theme="light"] .player-select-name {
    color: var(--text-primary) !important;
    font-weight: 600;
}

[data-theme="light"] .player-select-details {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .player-select-price {
    color: var(--accent-yellow) !important;
    font-weight: 700;
}

/* 5. FOOTER - Rimuove lo sfondo bianco e migliora la leggibilità */
[data-theme="light"] .footer {
    background: transparent !important;
    border-top: 1px solid var(--border-light) !important;
    backdrop-filter: blur(10px);
}

[data-theme="light"] .footer-content {
    background: rgba(255, 255, 255, 0.8) !important;
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1rem auto;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .footer-text {
    color: var(--text-primary) !important;
    font-weight: 600;
    font-size: 1rem;
}

[data-theme="light"] .social-btn {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    font-weight: 500;
    backdrop-filter: blur(10px);
}

[data-theme="light"] .social-btn:hover {
    background: rgba(37, 99, 235, 0.1) !important;
    color: var(--accent-blue) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .social-icon {
    color: var(--accent-blue) !important;
}

/* 6. TASTI "AGGIUNGI SLOT GIOCATORI" E "CONGUAGLIO" */
[data-theme="light"] .aggiungi-slot,
[data-theme="light"] .toggle-congo {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.2) 0%, rgba(139, 92, 246, 0.15) 100%) !important;
    border: 1px solid rgba(37, 99, 235, 0.3) !important;
    color: var(--accent-blue) !important;
    font-weight: 600;
    backdrop-filter: blur(10px);
}

[data-theme="light"] .aggiungi-slot:hover,
[data-theme="light"] .toggle-congo:hover {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.3) 0%, rgba(139, 92, 246, 0.25) 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15) !important;
    color: var(--accent-blue) !important;
}

/* 7. TASTI NASCOSTI FORMAZIONE CONSIGLIATA */
[data-theme="light"] #formationOptionsContainer .btn-primary,
[data-theme="light"] #formationOptionsContainer .btn-success {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.2) 0%, rgba(96, 165, 250, 0.15) 100%) !important;
    border: 1px solid rgba(37, 99, 235, 0.25) !important;
    color: var(--accent-blue) !important;
    font-weight: 600;
    backdrop-filter: blur(5px);
}

[data-theme="light"] #formationOptionsContainer .btn-primary:hover,
[data-theme="light"] #formationOptionsContainer .btn-success:hover {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.3) 0%, rgba(96, 165, 250, 0.25) 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.15) !important;
}

[data-theme="light"] #formationOptionsContainer .bg-card {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid var(--border-color) !important;
    backdrop-filter: blur(10px);
}

[data-theme="light"] #formationOptionsContainer .bg-card h3 {
    color: var(--text-primary) !important;
    font-weight: 600;
}

[data-theme="light"] #formationOptionsContainer .compact-player-list .flex {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] #formationOptionsContainer .compact-player-list .flex:hover {
    background: rgba(37, 99, 235, 0.1) !important;
    border-color: rgba(37, 99, 235, 0.2) !important;
}

[data-theme="light"] #formationOptionsContainer .compact-remove-btn {
    background: rgba(220, 38, 38, 0.15) !important;
    border: 1px solid rgba(220, 38, 38, 0.25) !important;
    color: #dc2626 !important;
    font-weight: 600;
}

/* 8. MIGLIORAMENTI GENERALI LEGGIBILITÀ */
[data-theme="light"] .player-slot {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid var(--border-light) !important;
    backdrop-filter: blur(5px);
}

[data-theme="light"] .player-slot-header label {
    color: var(--text-primary) !important;
    font-weight: 600;
}

[data-theme="light"] .select-player-btn {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    font-weight: 500;
}

[data-theme="light"] .select-player-btn:hover {
    background: rgba(37, 99, 235, 0.1) !important;
    border-color: var(--accent-blue) !important;
    color: var(--accent-blue) !important;
}

[data-theme="light"] .player-details {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .congo-section {
    background: rgba(255, 255, 255, 0.8) !important;
    border-left: 4px solid var(--accent-yellow) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .congo-section h3 {
    color: var(--accent-yellow) !important;
    font-weight: 600;
}

[data-theme="light"] .congo-section label {
    color: var(--text-primary) !important;
    font-weight: 500;
}

/* Miglioramenti per i testi piccoli in light mode */
[data-theme="light"] .text-sm {
    color: var(--text-secondary) !important;
    font-weight: 500;
}

[data-theme="light"] .text-gray-300,
[data-theme="light"] .text-gray-400,
[data-theme="light"] .text-gray-500 {
    color: var(--text-secondary) !important;
}

/* Assicurati che i pulsanti disabilitati siano visibili */
[data-theme="light"] .btn-primary:disabled {
    background: rgba(0, 0, 0, 0.1) !important;
    border-color: var(--border-color) !important;
    color: var(--text-muted) !important;
    opacity: 0.7;
}

/* Responsive per mobile */
@media (max-width: 768px) {
    [data-theme="light"] .footer-content {
        margin: 0.5rem;
        padding: 1rem;
    }
    
    [data-theme="light"] .social-btn {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
}

/* === MIGLIORAMENTI LEGGIBILITÀ POPUP LIGHT MODE === */
[data-theme="light"] .player-select-container,
[data-theme="light"] .player-details-container {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .player-select-header,
[data-theme="light"] .player-details-header {
    border-bottom: 1px solid var(--border-light) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .player-select-item {
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-light) !important;
}

[data-theme="light"] .player-select-details {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .player-select-price {
    color: var(--accent-blue) !important;
    font-weight: 600;
}

[data-theme="light"] .player-details-grid {
    background: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="light"] .player-detail-item {
    background: rgba(248, 250, 252, 0.8) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .detail-label {
    color: var(--text-secondary) !important;
    font-weight: 500;
}

[data-theme="light"] .detail-value {
    color: var(--text-primary) !important;
    font-weight: 600;
}

/* Miglioramenti specifici per i badge ruolo in light mode */
[data-theme="light"] .role-badge {
    color: white !important;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .role-A { 
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
}
[data-theme="light"] .role-C { 
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
}
[data-theme="light"] .role-D { 
    background: linear-gradient(135deg, #059669, #047857) !important;
}
[data-theme="light"] .role-P { 
    background: linear-gradient(135deg, #d97706, #b45309) !important;
}

/* === OTTIMIZZAZIONE STATISTICHE GIOCATORI LIGHT MODE === */
[data-theme="light"] .player-details:not(.hidden) {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.9)) !important;
    border: 2px solid rgba(59, 130, 246, 0.3) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .player-details p {
    color: var(--text-primary) !important;
    font-weight: 500;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 8px 0;
    margin: 0 !important;
}

[data-theme="light"] .player-details p:last-child {
    border-bottom: none;
}

[data-theme="light"] .fantamedia-value,
[data-theme="light"] .price-value,
[data-theme="light"] .media-value,
[data-theme="light"] .team-value,
[data-theme="light"] .role-value {
    color: var(--accent-blue) !important;
    font-weight: 700;
    background: rgba(59, 130, 246, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    display: inline-block;
    min-width: 50px;
    text-align: center;
}

/* Miglioramenti specifici per i valori numerici */
[data-theme="light"] .fantamedia-value {
    color: #d97706 !important;
    background: rgba(217, 119, 6, 0.1);
}

[data-theme="light"] .price-value {
    color: #059669 !important;
    background: rgba(5, 150, 105, 0.1);
}

[data-theme="light"] .media-value {
    color: #7c3aed !important;
    background: rgba(124, 58, 237, 0.1);
}

[data-theme="light"] .team-value {
    color: #dc2626 !important;
    background: rgba(220, 38, 38, 0.1);
}

[data-theme="light"] .role-value {
    color: #2563eb !important;
    background: rgba(37, 99, 235, 0.1);
    text-transform: uppercase;
    font-size: 0.9em;
}

/* Animazione di transizione per i dettagli */
.player-details:not(.hidden) {
    animation: slideDown 0.3s ease-out;
}

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

/* Miglioramento responsive per mobile */
@media (max-width: 768px) {
    [data-theme="light"] .player-details:not(.hidden) {
        margin: 10px 0;
        padding: 12px;
    }
    
    [data-theme="light"] .player-details p {
        font-size: 0.9rem;
        padding: 6px 0;
    }
    
    [data-theme="light"] .fantamedia-value,
    [data-theme="light"] .price-value,
    [data-theme="light"] .media-value,
    [data-theme="light"] .team-value,
    [data-theme="light"] .role-value {
        margin-left: 4px;
        padding: 1px 4px;
        min-width: 40px;
        font-size: 0.85rem;
    }
}

/* === CORREZIONE DETTAGLI GIOCATORI IN ANALIZZA SCAMBI PER LIGHT MODE === */
[data-theme="light"] #analizza-scambi .player-details {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid rgba(139, 92, 246, 0.4) !important;
    color: #1e293b !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] #analizza-scambi .player-details p {
    color: #1e293b !important;
    margin: 10px 0 !important;
    padding: 6px 0 !important;
}

[data-theme="light"] #analizza-scambi .fantamedia-value,
[data-theme="light"] #analizza-scambi .price-value, 
[data-theme="light"] #analizza-scambi .media-value,
[data-theme="light"] #analizza-scambi .team-value,
[data-theme="light"] #analizza-scambi .role-value {
    color: #d97706 !important;
    font-weight: 700;
}

/* Assicura che i dettagli siano completamente visibili in light mode */
[data-theme="light"] #analizza-scambi .player-details:not(.hidden) {
    display: block !important;
    opacity: 1 !important;
    max-height: 500px !important;
    margin-top: 12px !important;
    padding: 15px !important;
    overflow: visible !important;
}






/* === TASKBAR FISSA ATTACCATA ALLO SCHERMO === */
.taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(31, 41, 55, 0.95);
    backdrop-filter: blur(15px);
    border-radius: 0;
    padding: 12px 8px;
    z-index: 999;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    max-width: 100%;
    margin: 0;
    transform: none;
}

.taskbar-content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 4px;
    max-width: 600px;
    margin: 0 auto;
}

.taskbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(55, 65, 81, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 6px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 60px;
    flex: 1;
    color: #f3f4f6;
}

.taskbar-item:hover {
    background: rgba(75, 85, 99, 0.8);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.taskbar-label {
    font-size: 0.75rem;
    color: #f3f4f6;
    font-weight: 500;
    margin-top: 2px;
}

/* Aggiusta il padding del contenuto principale per compensare la taskbar fissa */
.main-content {
    padding-bottom: 80px;
}

/* Light mode per taskbar fissa */
[data-theme="light"] .taskbar {
    background: rgba(255, 255, 255, 0.95);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .taskbar-item {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="light"] .taskbar-item:hover {
    background: rgba(37, 99, 235, 0.1);
    color: var(--accent-blue);
}

[data-theme="light"] .taskbar-label {
    color: var(--text-primary);
}

/* Miglioramenti per dispositivi mobili */
@media (max-width: 768px) {
    .taskbar {
        padding: 10px 6px;
    }
    
    .taskbar-item {
        min-width: 55px;
        padding: 6px 4px;
    }
    
    .taskbar-label {
        font-size: 0.7rem;
    }
    
    .main-content {
        padding-bottom: 70px;
    }
}

/* Versione molto piccola (telefoni verticali) */
@media (max-width: 480px) {
    .taskbar {
        padding: 8px 4px;
    }
    
    .taskbar-item {
        min-width: 50px;
        padding: 5px 3px;
    }
    
    .taskbar-label {
        font-size: 0.65rem;
    }
    
    .main-content {
        padding-bottom: 65px;
    }
}

/* Supporto per dispositivi con notch e safe areas */
@supports (padding: max(0px)) {
    .taskbar {
        padding-left: max(8px, env(safe-area-inset-left));
        padding-right: max(8px, env(safe-area-inset-right));
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
}

/* === CORREZIONE NOMI SQUADRE IN LIGHT MODE - STESSA VISUALIZZAZIONE DARK MODE === */

[data-theme="light"] .player-details .team-value,
[data-theme="light"] .formation-player .vs-match,
[data-theme="light"] .player-select-details,
[data-theme="light"] .compact-player-item .team-info {
    background: transparent !important;
    color: #9ca3af !important;
    font-weight: normal !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline !important;
    font-size: 0.75rem !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Correzione specifica per i nomi squadra nella formazione */
[data-theme="light"] .formation-player .vs-match {
    color: #9ca3af !important;
    font-size: 0.7rem !important;
    margin-bottom: 2px !important;
    display: block !important;
    background: transparent !important;
}

/* Correzione per i dettagli giocatore in light mode - identico a dark mode */
[data-theme="light"] .player-details p {
    color: #e5e7eb !important;
    margin: 8px 0 !important;
    padding: 4px 0 !important;
    border-bottom: none !important;
    background: transparent !important;
}

[data-theme="light"] .fantamedia-value,
[data-theme="light"] .price-value,
[data-theme="light"] .media-value,
[data-theme="light"] .team-value,
[data-theme="light"] .role-value {
    color: #f59e0b !important;
    background: transparent !important;
    padding: 0 !important;
    margin-left: 4px !important;
    font-weight: 600 !important;
    display: inline !important;
    min-width: auto !important;
    text-align: left !important;
    border-radius: 0 !important;
}

/* Correzione per i valori specifici - stessi colori dark mode */
[data-theme="light"] .fantamedia-value {
    color: #f59e0b !important;
    background: transparent !important;
}

[data-theme="light"] .price-value {
    color: #10b981 !important;
    background: transparent !important;
}

[data-theme="light"] .media-value {
    color: #8b5cf6 !important;
    background: transparent !important;
}

[data-theme="light"] .team-value {
    color: #9ca3af !important;
    background: transparent !important;
}

[data-theme="light"] .role-value {
    color: #3b82f6 !important;
    background: transparent !important;
    text-transform: uppercase;
    font-size: 0.8em;
}

/* Correzione per i dettagli giocatori nella sezione analizza scambi */
[data-theme="light"] #analizza-scambi .player-details {
    background: rgba(31, 41, 55, 0.95) !important;
    border: 2px solid rgba(139, 92, 246, 0.5) !important;
    color: #e5e7eb !important;
}

[data-theme="light"] #analizza-scambi .player-details p {
    color: #e5e7eb !important;
}

[data-theme="light"] #analizza-scambi .fantamedia-value,
[data-theme="light"] #analizza-scambi .price-value,
[data-theme="light"] #analizza-scambi .media-value,
[data-theme="light"] #analizza-scambi .team-value,
[data-theme="light"] #analizza-scambi .role-value {
    color: #f59e0b !important;
    background: transparent !important;
}

/* Correzione per i popup in light mode - stessi stili dark mode */
[data-theme="light"] .player-select-details {
    color: #9ca3af !important;
    font-size: 0.75rem !important;
    background: transparent !important;
}

[data-theme="light"] .player-select-price {
    color: #f59e0b !important;
    font-weight: 600 !important;
    background: transparent !important;
}

/* Correzione per la formazione compatta - stessi stili dark mode */
[data-theme="light"] .compact-formation .formation-player .vs-match {
    color: #9ca3af !important;
    font-size: 0.7rem !important;
    background: transparent !important;
}

/* Correzione per i giocatori osservati */
[data-theme="light"] #watchedPlayersTable .team-value {
    color: #9ca3af !important;
    background: transparent !important;
}

/* Assicurati che tutti gli elementi di testo siano visibili */
[data-theme="light"] .player-name-cell,
[data-theme="light"] .player-select-name,
[data-theme="light"] .formation-player strong {
    color: #e5e7eb !important;
}

/* Reset completo per evitare qualsiasi effetto "quadrato" */
[data-theme="light"] *[class*="value"],
[data-theme="light"] *[class*="match"],
[data-theme="light"] *[class*="detail"],
[data-theme="light"] *[class*="info"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Correzione per la tabella listone giocatori */
[data-theme="light"] .player-table td {
    background: transparent !important;
    color: #e5e7eb !important;
}

[data-theme="light"] .player-table td:nth-child(3) { /* Colonna squadra */
    color: #9ca3af !important;
    background: transparent !important;
}

[data-theme="light"] .player-table td:nth-child(5) { /* Colonna FVM */
    color: #f59e0b !important;
    background: transparent !important;
}

[data-theme="light"] .player-table td:nth-child(6) { /* Colonna Index FH */
    color: #10b981 !important;
    background: transparent !important;
}






/* === RIDUZIONE SPAZIO HEADER E SEZIONI === */

/* Riduci il padding-top del contenuto principale */
.main-content {
    padding-top: 100px; /* Ridotto da 160px */
    transition: padding-top 0.3s ease;
}

.main-header.scrolled ~ .main-content {
    padding-top: 60px; /* Ridotto da 100px */
}

/* Riduci il margin-top delle sezioni principali */
#analizza-scambi,
#osservati,
#la-mia-squadra,
#scambi-consigliati,
#listone-giocatori {
    margin-top: 8px; /* Aggiunto per uniformità */
}

/* Riduci lo spazio tra le sezioni */
.card {
    margin-bottom: 16px; /* Ridotto da valori precedenti */
}

/* Riduci il padding delle sezioni per maggiore compattezza */
.section-content {
    padding-top: 8px; /* Ridotto da 12px */
}

/* Header più compatto quando scrolled */
.main-header.scrolled {
    padding: 8px 0; /* Ridotto da 8px */
}

.main-header.scrolled .header-content h1 {
    font-size: 1.3rem; /* Ridotto da 1.5rem */
    margin-bottom: 0;
}

/* Riduci ulteriormente lo spazio su mobile */
@media (max-width: 768px) {
    .main-content {
        padding-top: 90px; /* Ancora più compatto su mobile */
    }
    
    .main-header.scrolled ~ .main-content {
        padding-top: 50px;
    }
    
    .card {
        margin-bottom: 12px;
    }
}

/* Assicurati che il footer non aggiunga spazio extra */
.footer {
    margin-top: 0;
    padding-top: 1rem;
}

/* Riduci lo spazio tra il titolo "Creato da..." e il listone */
#listone-giocatori .card {
    margin-top: 4px;
}

/* Uniforma lo spazio tra tutte le sezioni */
.section-toggle {
    margin-bottom: 8px; /* Ridotto da 12px */
}

/* === RIDUZIONE SPAZIO TRA FOOTER E LISTONE === */

/* Riduci il margin-top del footer per allinearlo agli altri spazi */
.footer {
    margin-top: 16px; /* Uguale al margin-bottom delle card */
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Se il footer ha un margin-top preesistente, riducilo */
.footer-content {
    margin-top: 0;
}

/* Assicurati che l'ultima sezione (listone) non abbia margin-bottom extra */
#listone-giocatori {
    margin-bottom: 0;
}

/* Opzionale: se il listone ha un padding-bottom che crea spazio, riducilo */
#listone-giocatori .card:last-child {
    margin-bottom: 0;
}

/* Se c'è un contenitore principale che avvolge le sezioni, assicurati che non aggiunga spazio */
.main-content {
    padding-bottom: 0;
}

/* Miglioramento per dispositivi mobili */
@media (max-width: 768px) {
    .footer {
        margin-top: 12px;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
}

/* === CORREZIONE SPAZIATURA UNIFORME COMPLETA === */

/* Uniforma completamente tutti gli spazi tra sezioni */
.card {
    margin-bottom: 16px;
}

/* Assicurati che non ci siano spazi extra tra l'ultima sezione e il footer */
#listone-giocatori:last-child .card:last-child {
    margin-bottom: 0;
}

/* Se esiste un contenitore wrapper per le sezioni, rimuovi padding extra */
.sections-container {
    padding-bottom: 0;
    margin-bottom: 0;
}

/* Controlla che non ci siano margin o padding extra sul body o main */
body, main {
    margin-bottom: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .header-content h1 {
        font-size: 2.2rem;
        font-weight: bold; /* CAMBIATO DA normal A bold */
    }
    
    .main-header.scrolled .header-content h1 {
        font-size: 1.5rem;
        font-weight: bold; /* CAMBIATO DA normal A bold */
    }
}

@media (max-width: 480px) {
    .header-content h1 {
        font-size: 1.8rem;
        font-weight: bold; /* CAMBIATO DA normal A bold */
    }
    
    .main-header.scrolled .header-content h1 {
        font-size: 1.3rem;
        font-weight: bold; /* CAMBIATO DA normal A bold */
    }
}

/* === RIMUOVI IL VECCHIO IMPORT DI READEX PRO === */
/* Commenta o rimuovi questa riga se presente nel tuo CSS: */
/* @import url('https://fonts.cdnfonts.com/css/readex-pro'); */

/* === FONT SEPIARIDOM - FORMA ORIGINALE === */
.header-content h1 {
    font-family: 'Readex Pro', sans-serif;
    font-weight: bold; /* CAMBIATO DA normal A bold */
    font-size: 2.7rem;
    background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    letter-spacing: normal;
    line-height: 1.1;
    text-transform: none;
    font-style: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}







/* === CORREZIONE LISTONE GIOCATORI IN LIGHT MODE === */
[data-theme="light"] #listone-giocatori .player-table td,
[data-theme="light"] #listone-giocatori .player-name-cell,
[data-theme="light"] #listone-giocatori .player-table th {
    color: #1e293b !important;
}

[data-theme="light"] #listone-giocatori .player-table th {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #475569 !important;
}

[data-theme="light"] #listone-giocatori .player-table tr:hover {
    background: rgba(37, 99, 235, 0.05) !important;
}

[data-theme="light"] #listone-giocatori .player-table tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.02) !important;
}

/* === CORREZIONE SCAMBI CONSIGLIATI PER LIGHT MODE === */
[data-theme="light"] #scambi-consigliati .card {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    color: #1e293b !important;
}

[data-theme="light"] #scambi-consigliati .recommended-trade-card {
    background: rgba(255, 255, 255, 0.9) !important;
    border-left: 4px solid !important;
    color: #1e293b !important;
}

[data-theme="light"] #scambi-consigliati .trade-reason {
    color: #475569 !important;
}

[data-theme="light"] #scambi-consigliati .trade-player {
    background: rgba(248, 250, 252, 0.8) !important;
    color: #1e293b !important;
}

[data-theme="light"] #scambi-consigliati .trade-player-name {
    color: #1e293b !important;
}

[data-theme="light"] #scambi-consigliati .trade-player-details {
    color: #475569 !important;
}

[data-theme="light"] #scambi-consigliati .trade-placeholder h3,
[data-theme="light"] #scambi-consigliati .trade-placeholder p {
    color: #475569 !important;
}

/* Colori specifici per le card degli scambi in light mode */
[data-theme="light"] .trade-card-weak {
    border-left-color: #dc2626 !important;
}

[data-theme="light"] .trade-card-improve {
    border-left-color: #059669 !important;
}

/* Pulsanti scambi in light mode */
[data-theme="light"] #scambi-consigliati .btn-primary {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.15) 0%, rgba(96, 165, 250, 0.12) 100%) !important;
    border: 1px solid rgba(37, 99, 235, 0.2) !important;
    color: #2563eb !important;
}

[data-theme="light"] #scambi-consigliati .btn-primary:hover {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.25) 0%, rgba(96, 165, 250, 0.2) 100%) !important;
}

/* === MANTIENI LO STILE ORIGINALE PER DARK MODE === */
[data-theme="dark"] #listone-giocatori .player-table td,
[data-theme="dark"] #listone-giocatori .player-name-cell {
    color: #e5e7eb !important;
}

[data-theme="dark"] #scambi-consigliati .card {
    background: rgba(31, 41, 55, 0.55) !important;
    color: #e5e7eb !important;
}


/* === HEADER PIÙ SQUADRATO NELLA PARTE INFERIORE === */
.main-header {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important;
}

.main-header.scrolled {
    border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important;
}

/* Light mode */
[data-theme="light"] .main-header {
    border-bottom: 2px solid rgba(0, 0, 0, 0.15) !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

[data-theme="light"] .main-header.scrolled {
    border-bottom: 2px solid rgba(0, 0, 0, 0.15) !important;
}

/* Rafforza la squadratura rimuovendo qualsiasi border-radius */
.main-header,
[data-theme="light"] .main-header,
[data-theme="dark"] .main-header {
    border-radius: 0 !important;
}

/* Migliora l'effetto "attaccato" con un'ombra più netta */
.main-header {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="light"] .main-header {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
}

/* Assicurati che sia perfettamente attaccato ai bordi */
.main-header {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Contenuto dell'header con bordi dritti */
.header-content {
    border-radius: 0 !important;
}








/* === FONT APPLE SAN FRANCISCO STYLE === */
.header-content h1 {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700; /* Apple San Francisco usa pesi semibold/bold */
    font-size: 2.7rem;
    background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    letter-spacing: -0.3px; /* Caratteristica di San Francisco */
    line-height: 1.1;
    text-transform: none;
    font-style: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern" 1; /* Migliora il kerning come San Francisco */
}

/* Versione compatta quando si scrolla */
.main-header.scrolled .header-content h1 {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: -0.2px;
}

/* Light mode */
[data-theme="light"] .header-content h1 {
    background: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Miglioramenti specifici per dispositivi Apple */
@supports (font: -apple-system-body) {
    .header-content h1 {
        font-family: -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 700;
        -webkit-font-smoothing: subpixel-antialiased;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .header-content h1 {
        font-size: 2.2rem;
        font-weight: 700;
        letter-spacing: -0.2px;
    }
    
    .main-header.scrolled .header-content h1 {
        font-size: 1.5rem;
        font-weight: 700;
        letter-spacing: -0.1px;
    }
}

@media (max-width: 480px) {
    .header-content h1 {
        font-size: 1.9rem;
        font-weight: 700;
        letter-spacing: -0.1px;
    }
    
    .main-header.scrolled .header-content h1 {
        font-size: 1.3rem;
        font-weight: 700;
    }
}

/* === RIMUOVI GLI IMPORTS DEI FONT PRECEDENTI === */
/* Non servono più gli import di Readex Pro o Poppins */
/* === CORREZIONE SPAZIO SOTTO TASKBAR PER iOS === */
.taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(31, 41, 55, 0.95);
    backdrop-filter: blur(15px);
    border-radius: 0;
    padding: 12px 8px;
    z-index: 9999;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    margin: 0;
    transform: none;
    box-sizing: border-box;
    max-width: 100vw;
    
    /* Aggiungi spazio per iOS */
    padding-bottom: max(12px, env(safe-area-inset-bottom));
}

/* Light mode - spazio sotto più chiaro */
[data-theme="light"] .taskbar {
    background: rgba(255, 255, 255, 0.95);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    
    /* Spazio sotto con colore di sfondo più chiaro */
    padding-bottom: max(12px, env(safe-area-inset-bottom));
}

/* Assicurati che il contenuto della taskbar sia sempre sopra lo spazio iOS */
.taskbar-content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 4px;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Aggiusta il padding del contenuto principale per compensare la taskbar */
.main-content {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
}

/* Light mode - padding inferiore adattato */
[data-theme="light"] .main-content {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
}

/* Miglioramenti per dispositivi mobili */
@media (max-width: 768px) {
    .taskbar {
        padding: 10px 6px;
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }
    
    .main-content {
        padding-bottom: calc(70px + env(safe-area-inset-bottom));
    }
    
    [data-theme="light"] .main-content {
        padding-bottom: calc(70px + env(safe-area-inset-bottom));
    }
}

/* Versione molto piccola (telefoni verticali) */
@media (max-width: 480px) {
    .taskbar {
        padding: 8px 4px;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }
    
    .main-content {
        padding-bottom: calc(65px + env(safe-area-inset-bottom));
    }
    
    [data-theme="light"] .main-content {
        padding-bottom: calc(65px + env(safe-area-inset-bottom));
    }
}

/* Pseudo-elemento per estendere lo sfondo nello spazio iOS */
.taskbar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-bottom);
    background: inherit;
    backdrop-filter: inherit;
    z-index: 0;
    pointer-events: none;
}

/* Light mode - pseudo-elemento con sfondo chiaro */
[data-theme="light"] .taskbar::after {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
}

/* Assicurati che i pulsanti della taskbar siano sopra lo spazio iOS */
.taskbar-item {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(55, 65, 81, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 6px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 60px;
    flex: 1;
    color: #f3f4f6;
}

/* Light mode per taskbar item */
[data-theme="light"] .taskbar-item {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.taskbar-item:hover {
    background: rgba(75, 85, 99, 0.8);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .taskbar-item:hover {
    background: rgba(37, 99, 235, 0.1);
    color: var(--accent-blue);
}

.taskbar-label {
    font-size: 0.75rem;
    color: #f3f4f6;
    font-weight: 500;
    margin-top: 2px;
}

[data-theme="light"] .taskbar-label {
    color: var(--text-primary);
}

/* Supporto per dispositivi con notch e safe areas */
@supports (padding: max(0px)) {
    .taskbar {
        padding-left: max(8px, env(safe-area-inset-left));
        padding-right: max(8px, env(safe-area-inset-right));
    }
}

/* Assicurati che il contenuto non sia nascosto dietro la taskbar su iOS */
@supports (padding: max(0px)) {
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* === FINE CORREZIONE SPAZIO iOS === */

/* Spaziatura principale tra header e contenuto */
.main-content {
    padding-top: 120px;
    transition: padding-top 0.3s ease;
}

.main-header.scrolled ~ .main-content {
    padding-top: 80px; /* Ripristinato da 80px a 100px */
}

/* Spaziatura per il footer */
body {
    background-color: #111827;
    color: #e5e7eb;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    padding-bottom: 80px; /* Spazio per la taskbar in basso - mantenuto */
    margin: 0;
    padding-top: constant(safe-area-inset-top); /* legacy iOS 11 */
    padding-top: env(safe-area-inset-top);      /* iOS 12+ */
}


/* Header scrolled - mantenere le dimensioni originali */
.main-header.scrolled {
    padding: 8px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(15px);
    transform: translateZ(0);
}

.main-header.scrolled .header-content h1 {
    font-size: 1.5rem;
    margin-bottom: 0;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}



/* Sezioni principali - mantenere margini originali */
#analizza-scambi,
#osservati,
#la-mia-squadra,
#scambi-consigliati,
#listone-giocatori {
    margin-bottom: 30px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .main-content {
        padding-top: 140px;
    }
    
    .main-header.scrolled ~ .main-content {
        padding-top: 90px;
    }
    
    .taskbar {
        bottom: 15px;
        width: 92%;
        max-width: 450px;
    }
}

@media (max-width: 480px) {
    .main-content {
        padding-top: 130px;
    }
    
    .main-header.scrolled ~ .main-content {
        padding-top: 85px;
    }
    
    .taskbar {
        bottom: 12px;
        width: 94%;
        max-width: 400px;
        padding: 10px;
    }
    
    .taskbar-item {
        min-width: 60px;
        padding: 8px 6px;
    }
    
    .taskbar-label {
        font-size: 0.8rem;
    }
}


/* === CORREZIONE TASKBAR PER LIGHT MODE === */
.taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    background: rgba(31, 41, 55, 0.95);
    backdrop-filter: blur(15px);
    border-radius: 0;
    padding: 12px 8px;
    z-index: 9999;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    margin: 0 !important;
    transform: none !important;
    box-sizing: border-box;
    max-width: 100vw !important;
}

.taskbar-content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 4px;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* Light mode taskbar fixes */
[data-theme="light"] .taskbar {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 8px !important;
}

/* Supporto per safe areas su iOS */
@supports (padding: max(0px)) {
    .taskbar {
        padding-left: max(8px, env(safe-area-inset-left));
        padding-right: max(8px, env(safe-area-inset-right));
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
    
    [data-theme="light"] .taskbar {
        padding-left: max(8px, env(safe-area-inset-left)) !important;
        padding-right: max(8px, env(safe-area-inset-right)) !important;
        padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    }
}

/* Miglioramenti per dispositivi mobili */
@media (max-width: 768px) {
    .taskbar {
        padding: 10px 6px;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100% !important;
    }
    
    [data-theme="light"] .taskbar {
        padding: 10px 6px !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }
    
    .taskbar-item {
        min-width: 55px;
        padding: 6px 4px;
    }
    
    .taskbar-label {
        font-size: 0.7rem;
    }
}

/* Versione molto piccola (telefoni verticali) */
@media (max-width: 480px) {
    .taskbar {
        padding: 8px 4px;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100% !important;
    }
    
    [data-theme="light"] .taskbar {
        padding: 8px 4px !important;
        width: 100% !important;
    }
    
    .taskbar-item {
        min-width: 50px;
        padding: 5px 3px;
    }
    
    .taskbar-label {
        font-size: 0.65rem;
    }
}

/* Fix per viewport su iOS */
@viewport {
    width: device-width;
    zoom: 1.0;
}

@-ms-viewport {
    width: device-width;
}



/* === RIPRISTINO SPAZIATURE ORIGINALI === */



/* === ADATTAMENTO LIGHT MODE PER ELEMENTI SPECIFICI === */

/* 1. Scritta "nessun giocatore aggiunto agli osservati" */
[data-theme="light"] #watchedPlayersTableBody td.text-center.text-gray-300,
[data-theme="light"] #watchedPlayersTableBody .text-gray-300 {
    color: #6b7280 !important; /* grey-500 per light mode */
}

/* 2. Nomi dei giocatori nella tabella osservati */
[data-theme="light"] #watchedPlayersTable tbody td:first-child {
    color: #1f2937 !important; /* gray-800 per light mode */
    font-weight: 500;
}

/* 3. Nomi dei giocatori nel popup di selezione */
[data-theme="light"] .player-select-name {
    color: #1f2937 !important; /* gray-800 per light mode */
    font-weight: 600;
}

[data-theme="light"] .player-select-details {
    color: #6b7280 !important; /* gray-500 per light mode */
}

[data-theme="light"] .player-select-price {
    color: #d97706 !important; /* amber-600 per light mode */
    font-weight: 600;
}

/* 4. Hover stati per mantenere la consistenza */
[data-theme="light"] .player-select-item:hover .player-select-name {
    color: #2563eb !important; /* blue-600 per light mode */
}

[data-theme="light"] .player-select-item:hover {
    background: rgba(37, 99, 235, 0.05) !important;
}

/* 5. Testi placeholder generici nelle tabelle */
[data-theme="light"] .player-table tbody td.text-center.text-gray-300 {
    color: #6b7280 !important;
    font-style: italic;
}

/* 6. Header delle tabelle in light mode */
[data-theme="light"] #watchedPlayersTable th {
    color: #4b5563 !important; /* gray-600 */
    background: rgba(249, 250, 251, 0.95) !important;
    border-bottom: 1px solid #e5e7eb !important;
}

/* 7. Righe della tabella osservati in light mode */
[data-theme="light"] #watchedPlayersTable tbody tr {
    border-bottom: 1px solid #f3f4f6 !important;
}

[data-theme="light"] #watchedPlayersTable tbody tr:hover {
    background: rgba(37, 99, 235, 0.02) !important;
}

/* 8. Pulsanti di rimozione negli osservati */
[data-theme="light"] .remove-watched-btn {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #dc2626 !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
}

[data-theme="light"] .remove-watched-btn:hover {
    background: rgba(239, 68, 68, 0.2) !important;
}

/* 9. Badge ruoli nella tabella osservati */
[data-theme="light"] #watchedPlayersTable .role-badge {
    color: white !important;
    font-weight: 600;
}

/* 10. Popup container in light mode */
[data-theme="light"] .player-select-container {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .player-select-header {
    border-bottom: 1px solid #f3f4f6 !important;
    background: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="light"] .player-select-search {
    border-bottom: 1px solid #f3f4f6 !important;
    background: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="light"] .player-select-search input {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid #d1d5db !important;
    color: #1f2937 !important;
}

/* 11. Mantieni il contrasto per la ricerca */
[data-theme="light"] #playerSearchInput::placeholder {
    color: #9ca3af !important;
}

/* 12. Sezione osservati card in light mode */
[data-theme="light"] #osservati .card {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid #e5e7eb !important;
}

/* 13. Testo descrittivo nella sezione osservati */
[data-theme="light"] #osservati .text-gray-300 {
    color: #6b7280 !important;
}

/* 14. Pulsante aggiungi giocatore osservati */
[data-theme="light"] #addToWatched {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.15) 0%, rgba(96, 165, 250, 0.12) 100%) !important;
    border: 1px solid rgba(37, 99, 235, 0.2) !important;
    color: #2563eb !important;
}

[data-theme="light"] #addToWatched:hover {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.25) 0%, rgba(96, 165, 250, 0.2) 100%) !important;
}

/* 15. Scrollbar nel popup per light mode */
[data-theme="light"] .player-select-results::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .player-select-results::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2) !important;
}

/* 16. Assicurati che i testi siano sempre leggibili */
[data-theme="light"] .player-select-item {
    color: #1f2937 !important;
}

[data-theme="light"] .player-select-item:hover {
    color: #2563eb !important;
}

/* 17. Chiudi popup button in light mode */
[data-theme="light"] .close-popup {
    color: #6b7280 !important;
}

[data-theme="light"] .close-popup:hover {
    color: #374151 !important;
}

/* === LOGO FANTAHELPER NELL'HEADER === */
.header-title-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 0.5rem;
}

.logo {
    height: 50px;
    width: 50px;
    border-radius: 12px;
    object-fit: contain;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
}

/* Header normale */
.header-content h1 {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 2.7rem;
    background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    letter-spacing: -0.3px;
    line-height: 1.1;
    text-transform: none;
    font-style: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Header rimpicciolito (scrolled) */
.main-header.scrolled .header-title-container {
    gap: 10px;
}

.main-header.scrolled .logo {
    height: 35px;
    width: 35px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.main-header.scrolled .header-content h1 {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: -0.2px;
}

/* Light mode adjustments */
[data-theme="light"] .logo {
    border: 2px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .main-header.scrolled .logo {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Responsive design */
@media (max-width: 768px) {
    .header-title-container {
        gap: 10px;
    }
    
    .logo {
        height: 45px;
        width: 45px;
    }
    
    .header-content h1 {
        font-size: 2.2rem;
    }
    
    .main-header.scrolled .logo {
        height: 30px;
        width: 30px;
    }
    
    .main-header.scrolled .header-content h1 {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .header-title-container {
        gap: 8px;
    }
    
    .logo {
        height: 40px;
        width: 40px;
        border-radius: 8px;
    }
    
    .header-content h1 {
        font-size: 1.9rem;
    }
    
    .main-header.scrolled .logo {
        height: 25px;
        width: 25px;
        border-radius: 6px;
    }
    
    .main-header.scrolled .header-content h1 {
        font-size: 1.3rem;
    }
}

/* Animation for smooth transition */
.main-header .header-title-container {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Ensure the header content centers properly with the logo */
.header-content {
    position: relative;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Adjust spacing for the version label with the new layout */
.version-label {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 0.875rem;
    font-weight: 500;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    background: rgba(31, 41, 55, 0.8);
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(5px);
}

.main-header.scrolled .version-label {
    opacity: 1;
    visibility: visible;
}

/* Light mode for version label */
[data-theme="light"] .version-label {
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--border-color);
}

/* Hover effect for logo */
.logo:hover {
    transform: scale(1.05) rotate(5deg);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .logo:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}



/* === CORREZIONE ALLINEAMENTO HEADER CON LOGO === */

/* Header content con logo */
.header-content {
    position: relative;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 120px; /* Altezza minima per contenere logo e titolo */
}

/* Container del titolo e logo */
.header-title-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
}

/* Tema toggle container - posizionamento assoluto */
.theme-toggle-container {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

/* Versione label - posizionamento assoluto */
.version-label {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 0.875rem;
    font-weight: 500;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    background: rgba(31, 41, 55, 0.8);
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(5px);
    z-index: 10;
}

/* Mostra la versione quando l'header è scrolled */
.main-header.scrolled .version-label {
    opacity: 1;
    visibility: visible;
}

/* Header scrolled - riduci l'altezza minima */
.main-header.scrolled .header-content {
    min-height: 60px;
    padding: 0;
}

/* Logo */
.logo {
    height: 50px;
    width: 50px;
    border-radius: 12px;
    object-fit: contain;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
}

/* Titolo principale */
.header-content h1 {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 2.7rem;
    background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    letter-spacing: -0.3px;
    line-height: 1.1;
    text-transform: none;
    font-style: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Header scrolled - ridimensiona logo e titolo */
.main-header.scrolled .header-title-container {
    gap: 10px;
}

.main-header.scrolled .logo {
    height: 35px;
    width: 35px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.main-header.scrolled .header-content h1 {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: -0.2px;
}

/* Light mode adjustments */
[data-theme="light"] .logo {
    border: 2px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .version-label {
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .main-header.scrolled .logo {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Responsive design */
@media (max-width: 768px) {
    .header-content {
        min-height: 100px;
    }
    
    .header-title-container {
        gap: 10px;
    }
    
    .logo {
        height: 45px;
        width: 45px;
    }
    
    .header-content h1 {
        font-size: 2.2rem;
    }
    
    .main-header.scrolled .header-content {
        min-height: 50px;
    }
    
    .main-header.scrolled .logo {
        height: 30px;
        width: 30px;
    }
    
    .main-header.scrolled .header-content h1 {
        font-size: 1.5rem;
    }
    
    .theme-toggle-container {
        right: 15px;
    }
    
    .version-label {
        left: 15px;
        font-size: 0.8rem;
        padding: 3px 8px;
    }
}

@media (max-width: 480px) {
    .header-content {
        min-height: 90px;
    }
    
    .header-title-container {
        gap: 8px;
    }
    
    .logo {
        height: 40px;
        width: 40px;
        border-radius: 8px;
    }
    
    .header-content h1 {
        font-size: 1.9rem;
    }
    
    .main-header.scrolled .header-content {
        min-height: 45px;
    }
    
    .main-header.scrolled .logo {
        height: 25px;
        width: 25px;
        border-radius: 6px;
    }
    
    .main-header.scrolled .header-content h1 {
        font-size: 1.3rem;
    }
    
    .theme-toggle-container {
        right: 10px;
    }
    
    .version-label {
        left: 10px;
        font-size: 0.75rem;
        padding: 2px 6px;
    }
}

/* Versione ultra-compatta per mobile */
@media (max-width: 380px) {
    .header-title-container {
        gap: 6px;
    }
    
    .logo {
        height: 35px;
        width: 35px;
    }
    
    .header-content h1 {
        font-size: 1.7rem;
    }
    
    .main-header.scrolled .logo {
        height: 22px;
        width: 22px;
    }
    
    .main-header.scrolled .header-content h1 {
        font-size: 1.2rem;
    }
}

/* Assicurati che il paragrafo della descrizione sia centrato */
.header-content p {
    color: #9ca3af;
    font-size: 1rem;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 1;
    transform: translateY(0);
    height: auto;
    margin-top: 0.5rem;
}

.main-header.scrolled .header-content p {
    opacity: 0;
    transform: translateY(-10px);
    height: 0;
    margin: 0;
}

/* Hover effect per logo */
.logo:hover {
    transform: scale(1.05) rotate(5deg);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .logo:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* Tema toggle */
.theme-toggle {
    background: rgba(55, 65, 81, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.theme-toggle:hover {
    background: rgba(75, 85, 99, 0.8);
    transform: scale(1.1);
}

.theme-icon {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

/* Light mode per tema toggle */
[data-theme="light"] .theme-toggle {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .theme-toggle:hover {
    background: rgba(255, 255, 255, 1);
}


/* === MIGLIORAMENTO DEFINIZIONE LOGO IN LIGHT MODE === */

[data-theme="light"] .logo {
    border: 3px solid rgba(0, 0, 0, 0.25); /* Bordo più spesso e più scuro */
    background: rgba(255, 255, 255, 0.95); /* Sfondo più opaco */
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(0, 0, 0, 0.1); /* Doppia ombra per più definizione */
    filter: brightness(1.05) contrast(1.1); /* Migliora luminosità e contrasto */
    backdrop-filter: blur(8px); /* Più blur per effetto vetro */
}

[data-theme="light"] .main-header.scrolled .logo {
    border: 2px solid rgba(0, 0, 0, 0.2);
    box-shadow: 
        0 3px 10px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* Effetto hover più marcato in light mode */
[data-theme="light"] .logo:hover {
    border: 3px solid rgba(0, 0, 0, 0.3);
    box-shadow: 
        0 6px 25px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(0, 0, 0, 0.15);
    filter: brightness(1.1) contrast(1.15);
    transform: scale(1.05) rotate(5deg);
}

/* Se il logo ha trasparenze, aggiungi un overlay per migliorare la visibilità */
[data-theme="light"] .logo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        rgba(255, 255, 255, 0.05) 100%);
    border-radius: inherit;
    pointer-events: none;
}

/* Versione alternativa: se preferisci un effetto più "solido" */
/* [data-theme="light"] .logo {
    border: 3px solid #e5e7eb;
    background: #ffffff;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    filter: none;
} */

/* Miglioramento per schermi ad alta risoluzione */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    [data-theme="light"] .logo {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Se il logo appare ancora sbiadito, prova questa versione con contrasto massimo */
[data-theme="light"].high-contrast .logo,
[data-theme="light"] .logo.high-contrast {
    border: 3px solid #374151; /* gray-700 */
    background: #ffffff;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.15),
        0 0 0 2px rgba(255, 255, 255, 0.5);
    filter: contrast(1.2) saturate(1.1);
}


/* Effetto di ripple per il cambio tema */
.theme-toggle::before {
  content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}

.theme-toggle:active::before {
    width: 100px;
    height: 100px;
}

/* === SPLASH SCREEN === */
#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

[data-theme="light"] #splash-screen {
    background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%);
}

.splash-content {
    text-align: center;
    padding: 2rem;
}

.splash-logo {
    font-size: 3.5rem;
    font-weight: 900;
    background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%); /* UGUALE ALL’HEADER */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .splash-logo {
    background: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.splash-subtitle {
    color: #9ca3af;
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

[data-theme="light"] .splash-subtitle {
    color: #6b7280;
}

.splash-loader {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(59, 130, 246, 0.3);
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

[data-theme="light"] .splash-loader {
    border: 3px solid rgba(37, 99, 235, 0.3);
    border-top: 3px solid #2563eb;
}

.splash-version {
    position: absolute;
    bottom: 2rem;
    color: #6b7280;
    font-size: 0.9rem;
}

[data-theme="light"] .splash-version {
    color: #9ca3af;
}

/* Animazione di uscita */
#splash-screen.fade-out {
    opacity: 0;
    visibility: hidden;
}

/* Responsive */
@media (max-width: 768px) {
    .splash-logo {
        font-size: 2.5rem;
    }
    
    .splash-subtitle {
        font-size: 1rem;
    }
}

/* Splash Screen con Logo e Testo */
##splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#splash-screen.fade-out {
    opacity: 0;
}

.splash-content {
    text-align: center;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.splash-logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.splash-logo-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    animation: logo-bounce 2s ease-in-out infinite;
}

    .splash-logo-text {
        font-size: 2.5rem;
        font-weight: bold;
        background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%); /* UGUALE ALL’HEADER */
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
        animation: text-shimmer 3s ease-in-out infinite;
}

.splash-subtitle {
    font-size: 1.1rem;
    color: #cbd5e1;
    max-width: 300px;
    line-height: 1.4;
}

.splash-loader {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(59, 130, 246, 0.3);
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

.splash-version {
    font-size: 0.9rem;
    color: #94a3b8;
    margin-top: 10px;
}

/* Animazioni */
@keyframes logo-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes text-glow {
    0% {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }
    100% {
        text-shadow: 0 2px 20px rgba(251, 191, 36, 0.7);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Responsive */
@media (max-width: 480px) {
    .splash-logo-img {
        width: 60px;
        height: 60px;
    }
    
    .splash-logo-text {
        font-size: 2rem;
    }
    
    .splash-subtitle {
        font-size: 1rem;
        max-width: 250px;
    }
}

/* === CORREZIONE DETTAGLI GIOCATORI ANALIZZA SCAMBI - LIGHT MODE === */
[data-theme="light"] #analizza-scambi .player-details:not(.hidden) {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 2px solid rgba(37, 99, 235, 0.3) !important;
    color: #1e293b !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] #analizza-scambi .player-details p {
    color: #1e293b !important;
    margin: 10px 0 !important;
    padding: 6px 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] #analizza-scambi .fantamedia-value,
[data-theme="light"] #analizza-scambi .price-value, 
[data-theme="light"] #analizza-scambi .media-value,
[data-theme="light"] #analizza-scambi .team-value,
[data-theme="light"] #analizza-scambi .role-value {
    color: #2563eb !important;
    font-weight: 700 !important;
    background: rgba(37, 99, 235, 0.1) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    margin-left: 8px !important;
}

/* Colori specifici per ogni tipo di valore in light mode */
[data-theme="light"] #analizza-scambi .fantamedia-value {
    color: #d97706 !important;
    background: rgba(217, 119, 6, 0.1) !important;
}

[data-theme="light"] #analizza-scambi .price-value {
    color: #059669 !important;
    background: rgba(5, 150, 105, 0.1) !important;
}

[data-theme="light"] #analizza-scambi .media-value {
    color: #7c3aed !important;
    background: rgba(124, 58, 237, 0.1) !important;
}

[data-theme="light"] #analizza-scambi .team-value {
    color: #475569 !important;
    background: rgba(71, 85, 105, 0.1) !important;
}

[data-theme="light"] #analizza-scambi .role-value {
    color: #dc2626 !important;
    background: rgba(220, 38, 38, 0.1) !important;
    text-transform: uppercase !important;
}

/* Miglioramento hover per i player slot in light mode */
[data-theme="light"] #analizza-scambi .player-slot {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] #analizza-scambi .player-slot:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(37, 99, 235, 0.3) !important;
}

/* Pulsanti selezione giocatore in light mode */
[data-theme="light"] #analizza-scambi .select-player-btn {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    color: #1e293b !important;
}

[data-theme="light"] #analizza-scambi .select-player-btn:hover {
    background: rgba(37, 99, 235, 0.1) !important;
    border-color: #2563eb !important;
    color: #2563eb !important;
}

/* Header player slot in light mode */
[data-theme="light"] #analizza-scambi .player-slot-header label {
    color: #1e293b !important;
    font-weight: 600 !important;
}

/* Pulsante rimuovi slot in light mode */
[data-theme="light"] #analizza-scambi .remove-slot {
    background: rgba(220, 38, 38, 0.1) !important;
    border: 1px solid rgba(220, 38, 38, 0.2) !important;
    color: #dc2626 !important;
}

[data-theme="light"] #analizza-scambi .remove-slot:hover {
    background: rgba(220, 38, 38, 0.2) !important;
}

/* Miglioramento per la transizione di apertura in light mode */
[data-theme="light"] #analizza-scambi .player-details:not(.hidden) {
    animation: slideDownLight 0.3s ease-out !important;
}

@keyframes slideDownLight {
    from {
        opacity: 0;
        transform: translateY(-10px);
        background: transparent !important;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        background: rgba(255, 255, 255, 0.98) !important;
    }
}

/* Responsive per mobile in light mode */
@media (max-width: 768px) {
    [data-theme="light"] #analizza-scambi .player-details:not(.hidden) {
        margin: 10px 0 !important;
        padding: 12px !important;
    }
    
    [data-theme="light"] #analizza-scambi .player-details p {
        font-size: 0.9rem !important;
        padding: 6px 0 !important;
    }
    
    [data-theme="light"] #analizza-scambi .fantamedia-value,
    [data-theme="light"] #analizza-scambi .price-value,
    [data-theme="light"] #analizza-scambi .media-value,
    [data-theme="light"] #analizza-scambi .team-value,
    [data-theme="light"] #analizza-scambi .role-value {
        margin-left: 4px !important;
        padding: 1px 4px !important;
        font-size: 0.85rem !important;
    }
}


/* === RIDUZIONE HEADER RIMPICCIOLITO === */
.main-header.scrolled {
    padding: 4px 0 !important; /* Ridotto da 8px 0 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.main-header.scrolled .header-content h1 {
    font-size: 1.3rem !important; /* Ridotto da 1.5rem */
    margin-bottom: 0;
}

.main-header.scrolled ~ .main-content {
    padding-top: 70px !important; /* Ridotto da 100px */
}

/* Versione mobile ancora più compatta */
@media (max-width: 768px) {
    .main-header.scrolled {
        padding: 3px 0 !important; /* Ridotto da 6px 0 */
    }
    
    .main-header.scrolled .header-content h1 {
        font-size: 1.1rem !important; /* Ridotto da 1.3rem */
    }
    
    .main-header.scrolled ~ .main-content {
        padding-top: 55px !important; /* Ridotto da 80px */
    }
}

/* Versione molto piccola */
@media (max-width: 480px) {
    .main-header.scrolled {
        padding: 2px 0 !important;
    }
    
    .main-header.scrolled .header-content h1 {
        font-size: 1rem !important; /* Ridotto da 1.3rem */
    }
    
    .main-header.scrolled ~ .main-content {
        padding-top: 50px !important; /* Ridotto da 80px */
    }
}

/* === CERCHIO DI CARICAMENTO MODERNO - STILE WINDOWS 11 === */
.splash-loader {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: relative;
    margin: 30px auto;
}

.splash-loader::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top: 3px solid #3b82f6;
    border-right: 3px solid #8b5cf6;
    animation: modern-spin 1.5s linear infinite;
    filter: blur(0.5px);
    box-shadow: 
        0 0 20px rgba(59, 130, 246, 0.4),
        inset 0 0 20px rgba(59, 130, 246, 0.1);
}

.splash-loader::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent,
        rgba(59, 130, 246, 0.2),
        rgba(139, 92, 246, 0.3),
        rgba(59, 130, 246, 0.2),
        transparent
    );
    animation: modern-spin 2s linear infinite;
    filter: blur(8px);
    opacity: 0.7;
    z-index: -1;
}

/* Cerchio interno con effetto pulsante */
.splash-loader-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    animation: inner-pulse 2s ease-in-out infinite;
    box-shadow: 
        0 0 15px rgba(59, 130, 246, 0.5),
        inset 0 0 10px rgba(255, 255, 255, 0.2);
}

@keyframes modern-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

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

/* Light mode */
[data-theme="light"] .splash-loader::before {
    border-top: 3px solid #2563eb;
    border-right: 3px solid #7c3aed;
    box-shadow: 
        0 0 20px rgba(37, 99, 235, 0.3),
        inset 0 0 20px rgba(37, 99, 235, 0.1);
}

[data-theme="light"] .splash-loader::after {
    background: conic-gradient(
        from 0deg,
        transparent,
        rgba(37, 99, 235, 0.15),
        rgba(124, 58, 237, 0.25),
        rgba(37, 99, 235, 0.15),
        transparent
    );
}

[data-theme="light"] .splash-loader-inner {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    box-shadow: 
        0 0 15px rgba(37, 99, 235, 0.4),
        inset 0 0 10px rgba(255, 255, 255, 0.3);
}

/* Container splash screen migliorato */
.splash-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(40px);
}

[data-theme="light"] .splash-container {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    backdrop-filter: blur(30px);
}

/* Logo e testo splash screen */
.splash-logo {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 3.5rem;
        font-weight: 900;
        background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%); /* UGUALE ALL’HEADER */
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 1rem;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }
    

[data-theme="light"] .splash-logo {
    background: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.splash-text {
    color: #e2e8f0;
    font-size: 1rem;
    margin-top: 1.5rem;
    text-align: center;
    opacity: 0.9;
    font-weight: 500;
    letter-spacing: 0.5px;
}

[data-theme="light"] .splash-text {
    color: #475569;
}

/* Punti di caricamento moderni */
.loading-dots {
    display: flex;
    gap: 8px;
    margin-top: 1rem;
}

.loading-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    animation: modern-dot-pulse 1.5s ease-in-out infinite both;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
}

.loading-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-dot:nth-child(3) {
    animation-delay: 0.4s;
}

[data-theme="light"] .loading-dot {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.3);
}

@keyframes modern-dot-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.3);
        opacity: 1;
    }
}

/* Versione compatta per mobile */
@media (max-width: 768px) {
    .splash-loader {
        width: 50px;
        height: 50px;
        margin: 25px auto;
    }
    
    .splash-loader-inner {
        width: 16px;
        height: 16px;
    }
    
    .splash-logo {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }
    
    .splash-text {
        font-size: 0.9rem;
        margin-top: 1rem;
    }
    
    .loading-dots {
        gap: 6px;
    }
    
    .loading-dot {
        width: 5px;
        height: 5px;
    }
}

/* Effetto di dissolvenza all'uscita */
.splash-container.fade-out {
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(1.05);
}

/* Versione alternativa più sottile */
.splash-loader.thin {
    width: 70px;
    height: 70px;
}

.splash-loader.thin::before {
    border-width: 2px;
    filter: blur(0.3px);
}

.splash-loader.thin::after {
    filter: blur(6px);
    opacity: 0.5;
}

/* === HEADER PIÙ SQUADRATO (SOLO BORDO INFERIORE ARROTONDATO) === */
.main-header {
    border-radius: 0 !important;
    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* Light mode header */
[data-theme="light"] .main-header {
    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
}

/* === TASKBAR PIÙ SQUADRATA (SOLO BORDO SUPERIORE ARROTONDATO) === */
.taskbar {
    border-radius: 0 !important;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Light mode taskbar */
[data-theme="light"] .taskbar {
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
}

/* === ICONE PER LA TASKBAR (SOSTITUISCONO I TESTI) === */
.taskbar-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50px;
}

.taskbar-label {
    display: none; /* Nascondi il testo */
}

/* Icone SVG per ogni pulsante */
.taskbar-item[href="#analizza-scambi"]::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4'/%3E%3C/svg%3E") no-repeat center;
}

.taskbar-item[href="#osservati"]::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") no-repeat center;
}

.taskbar-item[href="#vibes"]::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z'/%3E%3C/svg%3E") no-repeat center;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z'/%3E%3C/svg%3E") no-repeat center;
    }

.taskbar-item[href="#la-mia-squadra"]::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z' /%3E%3C/svg%3E%0A") no-repeat center;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z' /%3E%3C/svg%3E%0A") no-repeat center;
}

.taskbar-item[href="#scambi-consigliati"]::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") no-repeat center;
}

.taskbar-item[href="#listone-giocatori"]::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E") no-repeat center;
}

/* Miglioramenti hover per le icone */
.taskbar-item:hover::before {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Responsive per icone */
@media (max-width: 768px) {
    .taskbar-item::before {
        width: 22px;
        height: 22px;
    }
}

@media (max-width: 480px) {
    .taskbar-item::before {
        width: 20px;
        height: 20px;
    }
}

/* Assicurati che la taskbar sia sempre visibile e ben posizionata */
.taskbar {
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 12px 8px;
    z-index: 9999;
}

/* Aggiusta il padding del contenuto per la taskbar */
.main-content {
    padding-bottom: 80px;
}

/* Miglioramenti per iOS safe areas */
@supports (padding: max(0px)) {
    .taskbar {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
}

/* === CORREZIONE HEADER E TASKBAR SQUADRATI PER ENTRAMBI I TEMI === */

/* Header squadrato solo in basso - per tutti i temi */
.main-header {
    border-radius: 0 !important;
    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* Taskbar squadrata solo in alto - per tutti i temi */
.taskbar {
    border-radius: 0 !important;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Rimuovi qualsiasi border-radius specifico per light mode che potrebbe sovrascrivere */
[data-theme="light"] .main-header,
[data-theme="dark"] .main-header {
    border-radius: 0 !important;
    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

[data-theme="light"] .taskbar,
[data-theme="dark"] .taskbar {
    border-radius: 0 !important;
    border-top-left-radius: 15px !important;
    border-top-right-radius: 15px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* === FORZA IL BORDER-RADIUS ANCHE SU ELEMENTI INTERNI === */

/* Assicurati che il contenuto dell'header rispetti i bordi arrotondati */
.header-content {
    border-radius: inherit !important;
}

/* Assicurati che il contenuto della taskbar rispetti i bordi arrotondati */
.taskbar-content {
    border-radius: inherit !important;
}

/* === MIGLIORAMENTI VISIVI PER I BORDI ARROTONDATI === */

/* Aggiungi un'ombra più morbida per enfatizzare i bordi arrotondati */
.main-header {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

.taskbar {
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Light mode - ombre più leggere */
[data-theme="light"] .main-header {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .taskbar {
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1) !important;
}

/* === CORREZIONE PER DISPOSITIVI MOBILI === */

@media (max-width: 768px) {
    .main-header {
        border-bottom-left-radius: 16px !important;
        border-bottom-right-radius: 16px !important;
    }
    
    .taskbar {
        border-top-left-radius: 16px !important;
        border-top-right-radius: 16px !important;
    }
}

@media (max-width: 480px) {
    .main-header {
        border-bottom-left-radius: 12px !important;
        border-bottom-right-radius: 12px !important;
    }
    
    .taskbar {
        border-top-left-radius: 12px !important;
        border-top-right-radius: 12px !important;
    }
}

/* === ICONE TASKBAR - VERSIONE MIGLIORATA === */

.taskbar-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    transition: all 0.3s ease;
}

.taskbar-label {
    display: none !important; /* Nascondi completamente il testo */
}

/* Icone SVG migliorate con dimensioni consistenti */
.taskbar-item::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background: currentColor;
    transition: all 0.3s ease;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

/* Scambi - Icona frecce di scambio */
.taskbar-item[href="#analizza-scambi"]::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4'/%3E%3C/svg%3E");
}


/* Rose - Icona squadra/utenti */
.taskbar-item[href="#la-mia-squadra"]::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

/* Consigli - Icona lampadina/idea */
.taskbar-item[href="#scambi-consigliati"]::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423z'/%3E%3C/svg%3E");
}

/* Listone - Icona lista */
.taskbar-item[href="#listone-giocatori"]::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E");
}

/* Effetto hover migliorato per le icone */
.taskbar-item:hover::before {
    transform: scale(1.15);
    filter: brightness(1.2);
}

/* Taskbar item attivo */
.taskbar-item:active::before {
    transform: scale(1.1);
}

/* === MIGLIORAMENTI FINALI PER LA TASKBAR === */

.taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 12px 8px;
    z-index: 9999;
    backdrop-filter: blur(20px);
}

/* Supporto per safe areas iOS */
@supports (padding: max(0px)) {
    .taskbar {
        padding-left: max(8px, env(safe-area-inset-left));
        padding-right: max(8px, env(safe-area-inset-right));
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
}

/* Responsive per icone */
@media (max-width: 768px) {
    .taskbar-item::before {
        width: 22px;
        height: 22px;
    }
}

@media (max-width: 480px) {
    .taskbar-item::before {
        width: 20px;
        height: 20px;
    }
}
/* === SOSTITUZIONE ICONA ROSE CON CAMPO DA CALCIO === */

.taskbar-item[href="#la-mia-squadra"]::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z' /%3E%3C/svg%3E%0A");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z' /%3E%3C/svg%3E%0A");
}

/* --- Safe area iOS: margine visivo per la home indicator --- */
.ios-bottom-safe {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(env(safe-area-inset-bottom, 20px) + 12px);
    background: rgba(17, 24, 39, 0.95); /* stesso colore status bar */
    backdrop-filter: blur(10px);
    z-index: 996;
    pointer-events: none; /* non interferisce con tocchi */
    transition: background 0.3s ease;
}

/* Adatta al tema */
:root[data-theme="light"] .ios-bottom-safe {
    background: rgba(243, 244, 246, 0.92);
}


/* === HEADER OPACO - STESSO COLORE SFONDO STATUS BAR iOS === */
.main-header {
    background: #0d1117 !important; /* Stesso colore del body dark mode */
    backdrop-filter: none !important;
}

.main-header.scrolled {
    background: #0d1117 !important;
    backdrop-filter: none !important;
}

/* Light mode - stesso colore del body light mode */
[data-theme="light"] .main-header {
    background: #f8fafc !important; /* Stesso colore del body light mode */
    backdrop-filter: none !important;
}

[data-theme="light"] .main-header.scrolled {
    background: #f8fafc !important;
    backdrop-filter: none !important;
}

/* Dark mode più scuro se preferisci */
[data-theme="dark"] .main-header {
    background: #0d1117 !important; /* O #0d1117 per versione più scura */
    backdrop-filter: none !important;
}

[data-theme="dark"] .main-header.scrolled {
    background: #0d1117 !important;
    backdrop-filter: none !important;
}

/* === TASKBAR SOLO ICONE - BLENDING PERFETTO === */
.taskbar {
    background: rgba(31, 41, 55, 0.98) !important;
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 10px 8px !important;
}

.taskbar-content {
    gap: 0 !important;
}

.taskbar-item {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    min-width: 50px !important;
    padding: 8px 4px !important;
    border-radius: 0 !important;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Nascondi le etichette di testo */
.taskbar-label {
    display: none !important;
}

/* Crea icone usando pseudo-elementi basati sul testo */
.taskbar-item[href="#analizza-scambi"]::before {
    content: "";
    font-size: 1.4rem;
    margin-bottom: 2px;
}

/* Crea icone usando pseudo-elementi basati sul testo */
.taskbar-item[href="#osservati"]::before {
    content: "";
    font-size: 1.4rem;
    margin-bottom: 2px;
}

/* Crea icone usando pseudo-elementi basati sul testo */
.taskbar-item[href="#vibes"]::before {
    content: "";
    font-size: 1.4rem;
    margin-bottom: 2px;
}

/* Crea icone usando pseudo-elementi basati sul testo */
.taskbar-item[href="#specialisti-squadre"]::before {
    content: "";
    font-size: 1.4rem;
    margin-bottom: 2px;
}

.taskbar-item[href="#la-mia-squadra"]::before {
    content: "";
    font-size: 1.4rem;
    margin-bottom: 2px;
}

.taskbar-item[href="#scambi-consigliati"]::before {
    content: "";
    font-size: 1.4rem;
    margin-bottom: 2px;
}

.taskbar-item[href="#listone-giocatori"]::before {
    content: "";
    font-size: 1.4rem;
    margin-bottom: 2px;
}

.taskbar-item[href="#bp-toggle-chat"]::before {
    content: "";
    font-size: 1.4rem;
    margin-bottom: 2px;
}

/* Effetto hover sottile */
.taskbar-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    transform: translateY(-1px);
}

.taskbar-item:active {
    transform: translateY(0);
}

/* Indicatore di sezione attiva */
.taskbar-item.active::after {
    content: "";
    position: absolute;
    bottom: -10px;
    width: 4px;
    height: 4px;
    background: #3b82f6;
    border-radius: 50%;
}

/* Light mode */
[data-theme="light"] .taskbar {
    background: rgba(255, 255, 255, 0.98) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .taskbar-item:hover {
    background: rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .taskbar-item.active::after {
    background: #2563eb;
}

/* Miglioramenti per mobile */
@media (max-width: 768px) {
    .taskbar {
        padding: 8px 4px !important;
    }
    
    .taskbar-item {
        min-width: 45px !important;
        padding: 6px 2px !important;
    }
    
    .taskbar-item::before {
        font-size: 1.3rem !important;
    }
}

/* Versione molto piccola */
@media (max-width: 480px) {
    .taskbar-item {
        min-width: 40px !important;
        padding: 5px 1px !important;
    }
    
    .taskbar-item::before {
        font-size: 1.2rem !important;
    }
}

/* Rimuovi qualsiasi spazio extra */
.taskbar-item * {
    margin: 0 !important;
    padding: 0 !important;
}

/* Assicurati che non ci siano bordi residui */
.taskbar-item,
.taskbar-item:focus,
.taskbar-item:active {
    outline: none !important;
    border: none !important;
}

/* === TASKBAR CON COLORE HEADER - BLENDING PERFETTO === */
.taskbar {
    background: rgba(17, 24, 39, 0.95) !important; /* Stesso colore dell'header */
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 10px 8px !important;
}

.taskbar-content {
    gap: 0 !important;
}

.taskbar-item {
    background: rgba(17, 24, 39, 0.95) !important; /* Stesso colore della taskbar */
    border: none !important;
    box-shadow: none !important;
    min-width: 50px !important;
    padding: 8px 4px !important;
    border-radius: 0 !important;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

/* Nascondi le etichette di testo */
.taskbar-label {
    display: none !important;
}

/* Crea icone usando pseudo-elementi basati sul testo */
.taskbar-item[href="#analizza-scambi"]::before {
    content: "";
    font-size: 1.4rem;
    margin-bottom: 2px;
    color: #f3f4f6;
}

.taskbar-item[href="#osservati"]::before {
    content: "";
    font-size: 1.4rem;
    margin-bottom: 2px;
    color: #f3f4f6;
}

.taskbar-item[href="#vibes"]::before {
    content: "";
    font-size: 1.4rem;
    margin-bottom: 2px;
    color: #f3f4f6;
}

.taskbar-item[href="#specialisti-squadre"]::before {
    content: "";
    font-size: 1.4rem;
    margin-bottom: 2px;
    color: #f3f4f6;
}

.taskbar-item[href="#la-mia-squadra"]::before {
    content: "";
    font-size: 1.4rem;
    margin-bottom: 2px;
    color: #f3f4f6;
}

.taskbar-item[href="#scambi-consigliati"]::before {
    content: "";
    font-size: 1.4rem;
    margin-bottom: 2px;
    color: #f3f4f6;
}

.taskbar-item[href="#listone-giocatori"]::before {
    content: "";
    font-size: 1.4rem;
    margin-bottom: 2px;
    color: #f3f4f6;
}

/* Effetto hover - leggero cambiamento di colore */
.taskbar-item:hover {
    background: rgba(31, 41, 55, 0.95) !important; /* Leggermente più chiaro al hover */
    transform: translateY(-1px);
}

.taskbar-item:active {
    transform: translateY(0);
}

/* Indicatore di sezione attiva */
.taskbar-item.active::after {
    content: "";
    position: absolute;
    bottom: -10px;
    width: 4px;
    height: 4px;
    background: #3b82f6;
    border-radius: 50%;
}

/* Light mode - stesso colore dell'header light */
[data-theme="light"] .taskbar {
    background: rgba(248, 250, 252, 0.95) !important; /* Colore header light */
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .taskbar-item {
    background: rgba(248, 250, 252, 0.95) !important; /* Stesso colore della taskbar light */
}

[data-theme="light"] .taskbar-item::before {
    color: #1e293b !important; /* Testo scuro per light mode */
}

[data-theme="light"] .taskbar-item:hover {
    background: rgba(241, 245, 249, 0.95) !important; /* Leggermente più scuro al hover */
}

[data-theme="light"] .taskbar-item.active::after {
    background: #2563eb;
}

/* Miglioramenti per mobile */
@media (max-width: 768px) {
    .taskbar {
        padding: 8px 4px !important;
    }
    
    .taskbar-item {
        min-width: 45px !important;
        padding: 6px 2px !important;
    }
    
    .taskbar-item::before {
        font-size: 1.3rem !important;
    }
}

/* Versione molto piccola */
@media (max-width: 480px) {
    .taskbar-item {
        min-width: 40px !important;
        padding: 5px 1px !important;
    }
    
    .taskbar-item::before {
        font-size: 1.2rem !important;
    }
}

/* Rimuovi qualsiasi spazio extra */
.taskbar-item * {
    margin: 0 !important;
    padding: 0 !important;
}

/* Assicurati che non ci siano bordi residui */
.taskbar-item,
.taskbar-item:focus,
.taskbar-item:active {
    outline: none !important;
    border: none !important;
}

/* Migliora la visibilità delle icone in dark mode */
[data-theme="dark"] .taskbar-item::before {
    filter: brightness(1.2);
}
/* === CORREZIONE LIGHT MODE TASKBAR === */
[data-theme="light"] .taskbar {
    background: rgba(248, 250, 252, 0.98) !important; /* Colore header light corretto */
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .taskbar-item {
    background: rgba(248, 250, 252, 0.98) !important; /* Stesso colore della taskbar */
    border: none !important;
    box-shadow: none !important;
}

[data-theme="light"] .taskbar-item::before {
    color: #475569 !important; /* Colore icona più scuro e visibile */
    filter: none !important;
}

[data-theme="light"] .taskbar-item:hover {
    background: rgba(226, 232, 240, 0.95) !important; /* Hover più visibile */
    transform: translateY(-1px);
}

[data-theme="light"] .taskbar-item:active {
    background: rgba(203, 213, 225, 0.95) !important;
    transform: translateY(0);
}

[data-theme="light"] .taskbar-item.active::after {
    background: #2563eb !important; /* Blu più vivace per light mode */
    box-shadow: 0 0 6px rgba(37, 99, 235, 0.4);
}

/* Migliora il contrasto delle icone in light mode */
[data-theme="light"] .taskbar-item[href="#analizza-scambi"]::before {
    content: "";
    color: #4b5563 !important;
}

[data-theme="light"] .taskbar-item[href="#osservati"]::before {
    content: "";
    color: #4b5563 !important;
}

[data-theme="light"] .taskbar-item[href="#vibes"]::before {
    content: "";
    color: #4b5563 !important;
}

[data-theme="light"] .taskbar-item[href="#specialisti-squadre"]::before {
    content: "";
    color: #4b5563 !important;
}

[data-theme="light"] .taskbar-item[href="#la-mia-squadra"]::before {
    content: "";
    color: #4b5563 !important;
}

[data-theme="light"] .taskbar-item[href="#scambi-consigliati"]::before {
    content: "";
    color: #4b5563 !important;
}

[data-theme="light"] .taskbar-item[href="#listone-giocatori"]::before {
    content: "";
    color: #4b5563 !important;
}

/* Assicurati che la transizione tra temi sia fluida */
.taskbar,
.taskbar-item {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Correzione per il bordo superiore della taskbar in light mode */
[data-theme="light"] .taskbar {
    border-top: 1px solid rgba(0, 0, 0, 0.12) !important;
}

/* Migliora la visibilità dell'indicatore attivo in light mode */
[data-theme="light"] .taskbar-item.active::after {
    bottom: -8px !important;
    width: 5px !important;
    height: 5px !important;
    background: #3b82f6 !important;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
}

/* Aggiungi un effetto di profondità più marcato in light mode */
[data-theme="light"] .taskbar {
    box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.15) !important;
}

/* Correzione per dispositivi mobili in light mode */
@media (max-width: 768px) {
    [data-theme="light"] .taskbar {
        padding: 8px 4px !important;
    }
    
    [data-theme="light"] .taskbar-item {
        min-width: 45px !important;
        padding: 6px 2px !important;
    }
    
    [data-theme="light"] .taskbar-item::before {
        font-size: 1.3rem !important;
    }
}

/* Versione molto piccola in light mode */
@media (max-width: 480px) {
    [data-theme="light"] .taskbar-item {
        min-width: 40px !important;
        padding: 5px 1px !important;
    }
    
    [data-theme="light"] .taskbar-item::before {
        font-size: 1.2rem !important;
    }
}

/* Assicurati che non ci siano bordi residui in light mode */
[data-theme="light"] .taskbar-item,
[data-theme="light"] .taskbar-item:focus,
[data-theme="light"] .taskbar-item:active {
    outline: none !important;
    border: none !important;
}

/* Migliora il contrasto per accessibilità in light mode */
[data-theme="light"] .taskbar-item:hover::before {
    filter: brightness(0.8);
}

/* Aggiungi un leggero effetto di glow al hover in light mode */
[data-theme="light"] .taskbar-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
/* === TASKBAR PERFETTA - NESSUN RIQUADRO VISIBILE === */

/* Taskbar base */
.taskbar {
    background: rgba(17, 24, 39, 0.98) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 12px 8px !important;
}

.taskbar-content {
    gap: 0 !important;
}



/* Hover - solo cambiamento colore icona */
.taskbar-item:hover::before {
    color: #ffffff !important;
    transform: scale(1.1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.taskbar-item:active::before {
    transform: scale(0.95);
}

/* Indicatore di sezione attiva - molto sottile */
.taskbar-item.active::after {
    content: "";
    position: absolute;
    bottom: 4px;
    width: 4px;
    height: 4px;
    background: #3b82f6;
    border-radius: 50%;
    opacity: 0.9;
}

.taskbar-item.active::before {
    color: #3b82f6 !important;
    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.4));
}

/* === LIGHT MODE CORRETTA - STESSO COMPORTAMENTO DARK MODE === */
[data-theme="light"] .taskbar {
    background: rgba(248, 250, 252, 0.98) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .taskbar-item {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

[data-theme="light"] .taskbar-item::before {
    color: #6b7280 !important; /* Grigio medio per buona visibilità */
}

[data-theme="light"] .taskbar-item:hover::before {
    color: #1f2937 !important; /* Quasi nero al hover */
    transform: scale(1.1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

[data-theme="light"] .taskbar-item.active::after {
    background: #2563eb !important;
    opacity: 0.9;
}

[data-theme="light"] .taskbar-item.active::before {
    color: #2563eb !important;
    filter: drop-shadow(0 0 6px rgba(37, 99, 235, 0.3));
}

/* === CORREZIONI SPECIFICHE PER MOBILE === */
@media (max-width: 768px) {
    .taskbar {
        padding: 10px 6px !important;
    }
    
    .taskbar-item {
        min-width: 45px !important;
        padding: 6px 2px !important;
    }
    
    .taskbar-item::before {
        font-size: 1.4rem !important;
    }
    
    .taskbar-item.active::after {
        bottom: 2px;
        width: 3px;
        height: 3px;
    }
}

@media (max-width: 480px) {
    .taskbar {
        padding: 8px 4px !important;
    }
    
    .taskbar-item {
        min-width: 40px !important;
        padding: 5px 1px !important;
    }
    
    .taskbar-item::before {
        font-size: 1.3rem !important;
    }
}

/* === GARANZIA ASSOLUTA NESSUN RIQUADRO === */
.taskbar-item,
.taskbar-item:focus,
.taskbar-item:active,
.taskbar-item:hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Rimuovi qualsiasi effetto di focus browser */
.taskbar-item:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Assicurati che non ci siano bordi da ereditarietà */
.taskbar-item * {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* === MIGLIORAMENTO PERFORMANCE === */
.taskbar {
    will-change: transform;
    transform: translateZ(0);
}

.taskbar-item::before {
    display: inline-block;
    transform: translateZ(0);
}

/* === CORREZIONE PER SAFARI iOS === */
@supports (-webkit-touch-callout: none) {
    .taskbar {
        -webkit-backdrop-filter: blur(20px);
    }
    
    .taskbar-item::before {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* === PREVENZIONE FLICKER === */
.taskbar-item {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* === RESET COMPLETO PER GARANTIRE CONSISTENZA === */
.taskbar-item {
    /* Reset di tutte le proprietà che potrebbero causare riquadri */
    margin: 0 !important;
    padding: 8px 4px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    
    /* Proprietà di visualizzazione */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Reset colori e effetti */
    color: transparent !important;
    text-shadow: none !important;
    
    /* Reset trasformazioni */
    transform: none !important;
}

/* Assicurati che i link interni non abbiano stili indesiderati */
.taskbar-item[href] {
    background: transparent !important;
    border: none !important;
}

/* Rimuovi qualsiasi effetto di stato attivo del browser */
.taskbar-item:-moz-focusring {
    outline: none !important;
}

.taskbar-item::-moz-focus-inner {
    border: 0 !important;
}
/* === MENU NAVIGAZIONE ORIZZONTALE === */
.navigation-horizontal {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
}

.nav-horizontal-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.2);
    backdrop-filter: blur(5px);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    text-align: center;
    min-width: 70px;
    flex: 1;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.nav-horizontal-item:hover {
    background: rgba(59, 130, 246, 0.4);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.2);
}

.nav-horizontal-icon {
    width: 20px;
    height: 20px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-horizontal-icon svg {
    width: 100%;
    height: 100%;
}

.nav-horizontal-label {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

/* Light mode per menu navigazione orizzontale */
[data-theme="light"] .nav-horizontal-item {
    background: rgba(37, 99, 235, 0.15);
    border: 1px solid rgba(37, 99, 235, 0.2);
    color: var(--text-primary);
}

[data-theme="light"] .nav-horizontal-item:hover {
    background: rgba(37, 99, 235, 0.25);
    color: var(--accent-blue);
    transform: translateY(-3px) scale(1.05);
}

/* Scrollbar personalizzata per navigazione orizzontale */
.navigation-horizontal::-webkit-scrollbar {
    height: 4px;
}

.navigation-horizontal::-webkit-scrollbar-track {
    background: rgba(31, 41, 55, 0.5);
    border-radius: 2px;
}

.navigation-horizontal::-webkit-scrollbar-thumb {
    background: rgba(75, 85, 99, 0.5);
    border-radius: 2px;
}

.navigation-horizontal::-webkit-scrollbar-thumb:hover {
    background: rgba(107, 114, 128, 0.5);
}

/* Responsive per mobile */
@media (max-width: 768px) {
    .navigation-horizontal {
        gap: 6px;
        padding-bottom: 6px;
    }
    
    .nav-horizontal-item {
        min-width: 65px;
        padding: 10px 6px;
    }
    
    .nav-horizontal-icon {
        width: 18px;
        height: 18px;
        margin-bottom: 4px;
    }
    
    .nav-horizontal-label {
        font-size: 0.7rem;
    }
}

/* Versione molto piccola */
@media (max-width: 480px) {
    .navigation-horizontal {
        gap: 4px;
    }
    
    .nav-horizontal-item {
        min-width: 60px;
        padding: 8px 4px;
    }
    
    .nav-horizontal-icon {
        width: 16px;
        height: 16px;
    }
    
    .nav-horizontal-label {
        font-size: 0.65rem;
    }
}

/* Supporto per dispositivi con notch */
@supports (padding: max(0px)) {
    .navigation-horizontal {
        padding-left: max(4px, env(safe-area-inset-left));
        padding-right: max(4px, env(safe-area-inset-right));
    }
}

/* === MENU NAVIGAZIONE MODERNA CON ICONE TASKBAR === */
.modern-navigation {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 8px 4px;
    background: linear-gradient(135deg, rgba(31, 41, 55, 0.4), rgba(55, 65, 81, 0.2));
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    position: relative;
}

.modern-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(55, 65, 81, 0.3), rgba(31, 41, 55, 0.4));
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px 12px;
    text-decoration: none;
    color: #e5e7eb;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-align: center;
    min-width: 90px;
    flex: 1;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

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

.modern-nav-item:hover::before {
    left: 100%;
}

.modern-nav-item:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.15));
    border-color: rgba(139, 92, 246, 0.3);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
    color: #a78bfa;
}

.modern-nav-item:active {
    transform: translateY(-2px) scale(1.01);
    transition: all 0.1s ease;
}

.modern-nav-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    background-color: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.modern-nav-item:hover .modern-nav-icon {
    transform: scale(1.15);
    filter: drop-shadow(0 2px 4px rgba(139, 92, 246, 0.3));
}

.modern-nav-label {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.modern-nav-indicator {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 20px;
    height: 2px;
    background: linear-gradient(90deg, #8b5cf6, #3b82f6);
    border-radius: 2px;
    transition: transform 0.3s ease;
    opacity: 0;
}

.modern-nav-item:hover .modern-nav-indicator {
    transform: translateX(-50%) scaleX(1);
    opacity: 1;
}

/* === ICONE SPECIFICHE PER OGNI SEZIONE === */

/* Icona per Analizza Scambi - Freccie di scambio */
.modern-nav-item[href="#analizza-scambi"] .modern-nav-icon {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4'/%3E%3C/svg%3E");
}

/* Icona per Formazione - Squadra/rosa */
.modern-nav-item[href="#la-mia-squadra"] .modern-nav-icon {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cline x1='12' y1='4' x2='12' y2='20'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cline x1='12' y1='4' x2='12' y2='20'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
}

/* Icona per Consigli - Lampadina/idea */
.modern-nav-item[href="#scambi-consigliati"] .modern-nav-icon {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423z'/%3E%3C/svg%3E");
}

/* Icona per Listone - Lista */
.modern-nav-item[href="#listone-giocatori"] .modern-nav-icon {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E");
}

/* Icona per Osservati - Stella */
.modern-nav-item[href="#osservati"] .modern-nav-icon {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z'/%3E%3C/svg%3E");
}

/* Light mode per menu navigazione moderna */
[data-theme="light"] .modern-navigation {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(248, 250, 252, 0.4));
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .modern-nav-item {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(248, 250, 252, 0.6));
    border: 1px solid rgba(0, 0, 0, 0.06);
    color: var(--text-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .modern-nav-item:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(139, 92, 246, 0.08));
    border-color: rgba(139, 92, 246, 0.2);
    color: var(--accent-purple);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .modern-nav-item::before {
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.05), transparent);
}

[data-theme="light"] .modern-nav-indicator {
    background: linear-gradient(90deg, var(--accent-purple), var(--accent-blue));
}

/* Scrollbar personalizzata per navigazione moderna */
.modern-navigation::-webkit-scrollbar {
    height: 6px;
}

.modern-navigation::-webkit-scrollbar-track {
    background: rgba(31, 41, 55, 0.3);
    border-radius: 3px;
    margin: 0 4px;
}

.modern-navigation::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.6), rgba(139, 92, 246, 0.6));
    border-radius: 3px;
}

.modern-navigation::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.8), rgba(139, 92, 246, 0.8));
}

/* Light mode scrollbar */
[data-theme="light"] .modern-navigation::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .modern-navigation::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.4), rgba(139, 92, 246, 0.4));
}

[data-theme="light"] .modern-navigation::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.6), rgba(139, 92, 246, 0.6));
}

/* Responsive per mobile */
@media (max-width: 768px) {
    .modern-navigation {
        gap: 6px;
        padding: 6px 3px;
    }
    
    .modern-nav-item {
        min-width: 80px;
        padding: 14px 8px;
    }
    
    .modern-nav-icon {
        width: 20px;
        height: 20px;
        margin-bottom: 6px;
    }
    
    .modern-nav-label {
        font-size: 0.75rem;
    }
}

/* Versione molto piccola */
@media (max-width: 480px) {
    .modern-navigation {
        gap: 4px;
        padding: 4px 2px;
    }
    
    .modern-nav-item {
        min-width: 70px;
        padding: 12px 6px;
    }
    
    .modern-nav-icon {
        width: 18px;
        height: 18px;
        margin-bottom: 4px;
    }
    
    .modern-nav-label {
        font-size: 0.7rem;
    }
}

/* Supporto per dispositivi con notch */
@supports (padding: max(0px)) {
    .modern-navigation {
        padding-left: max(8px, env(safe-area-inset-left));
        padding-right: max(8px, env(safe-area-inset-right));
    }
}

/* Animazione di ingresso */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modern-navigation {
    animation: slideInUp 0.6s ease-out;
}

.modern-nav-item {
    animation: slideInUp 0.6s ease-out;
    animation-fill-mode: both;
}

.modern-nav-item:nth-child(1) { animation-delay: 0.1s; }
.modern-nav-item:nth-child(2) { animation-delay: 0.15s; }
.modern-nav-item:nth-child(3) { animation-delay: 0.2s; }
.modern-nav-item:nth-child(4) { animation-delay: 0.25s; }
.modern-nav-item:nth-child(5) { animation-delay: 0.3s; }

/* === SEZIONE MENU NAVIGAZIONE CON SPAZIO AGGIUNTO === */
.menu-navigation-section {
    margin-top: 40px; /* Spazio aggiuntivo dopo l'header */
    animation: fadeInUp 0.8s ease-out;
}

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

/* === MENU NAVIGAZIONE MODERNA CON ICONE TASKBAR === */
.modern-navigation {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 8px 4px;
    background: linear-gradient(135deg, rgba(31, 41, 55, 0.4), rgba(55, 65, 81, 0.2));
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    position: relative;
}

.modern-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(55, 65, 81, 0.3), rgba(31, 41, 55, 0.4));
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px 12px;
    text-decoration: none;
    color: #e5e7eb;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-align: center;
    min-width: 90px;
    flex: 1;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

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

.modern-nav-item:hover::before {
    left: 100%;
}

.modern-nav-item:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.15));
    border-color: rgba(139, 92, 246, 0.3);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
    color: #a78bfa;
}

.modern-nav-item:active {
    transform: translateY(-2px) scale(1.01);
    transition: all 0.1s ease;
}

.modern-nav-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    background-color: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.modern-nav-item:hover .modern-nav-icon {
    transform: scale(1.15);
    filter: drop-shadow(0 2px 4px rgba(139, 92, 246, 0.3));
}

.modern-nav-label {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.modern-nav-indicator {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 20px;
    height: 2px;
    background: linear-gradient(90deg, #8b5cf6, #3b82f6);
    border-radius: 2px;
    transition: transform 0.3s ease;
    opacity: 0;
}

.modern-nav-item:hover .modern-nav-indicator {
    transform: translateX(-50%) scaleX(1);
    opacity: 1;
}

/* === ICONE SPECIFICHE PER OGNI SEZIONE === */

/* Icona per Analizza Scambi - Freccie di scambio */
.modern-nav-item[href="#analizza-scambi"] .modern-nav-icon {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4'/%3E%3C/svg%3E");
}

/* Icona per Formazione - Squadra/rosa */
.modern-nav-item[href="#la-mia-squadra"] .modern-nav-icon {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z' /%3E%3C/svg%3E%0A");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z' /%3E%3C/svg%3E%0A");
}

/* Icona per Consigli - Lampadina/idea */
.modern-nav-item[href="#scambi-consigliati"] .modern-nav-icon {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423z'/%3E%3C/svg%3E");
}

/* Icona per Listone - Lista */
.modern-nav-item[href="#listone-giocatori"] .modern-nav-icon {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E");
}
/* Icona per Osservati - Stella */
.modern-nav-item[href="#osservati"] .modern-nav-icon {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

/* Light mode per menu navigazione moderna */
[data-theme="light"] .modern-navigation {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(248, 250, 252, 0.4));
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .modern-nav-item {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(248, 250, 252, 0.6));
    border: 1px solid rgba(0, 0, 0, 0.06);
    color: var(--text-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .modern-nav-item:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(139, 92, 246, 0.08));
    border-color: rgba(139, 92, 246, 0.2);
    color: var(--accent-purple);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .modern-nav-item::before {
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.05), transparent);
}

[data-theme="light"] .modern-nav-indicator {
    background: linear-gradient(90deg, var(--accent-purple), var(--accent-blue));
}

/* Scrollbar personalizzata per navigazione moderna */
.modern-navigation::-webkit-scrollbar {
    height: 6px;
}

.modern-navigation::-webkit-scrollbar-track {
    background: rgba(31, 41, 55, 0.3);
    border-radius: 3px;
    margin: 0 4px;
}

.modern-navigation::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.6), rgba(139, 92, 246, 0.6));
    border-radius: 3px;
}

.modern-navigation::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.8), rgba(139, 92, 246, 0.8));
}

/* Light mode scrollbar */
[data-theme="light"] .modern-navigation::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .modern-navigation::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.4), rgba(139, 92, 246, 0.4));
}

[data-theme="light"] .modern-navigation::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.6), rgba(139, 92, 246, 0.6));
}

/* Responsive per mobile */
@media (max-width: 768px) {
    .menu-navigation-section {
        margin-top: 30px; /* Spazio leggermente ridotto su mobile */
    }
    
    .modern-navigation {
        gap: 6px;
        padding: 6px 3px;
    }
    
    .modern-nav-item {
        min-width: 80px;
        padding: 14px 8px;
    }
    
    .modern-nav-icon {
        width: 20px;
        height: 20px;
        margin-bottom: 6px;
    }
    
    .modern-nav-label {
        font-size: 0.75rem;
    }
}

/* Versione molto piccola */
@media (max-width: 480px) {
    .menu-navigation-section {
        margin-top: 25px; /* Spazio ulteriormente ridotto su schermi piccoli */
    }
    
    .modern-navigation {
        gap: 4px;
        padding: 4px 2px;
    }
    
    .modern-nav-item {
        min-width: 70px;
        padding: 12px 6px;
    }
    
    .modern-nav-icon {
        width: 18px;
        height: 18px;
        margin-bottom: 4px;
    }
    
    .modern-nav-label {
        font-size: 0.7rem;
    }
}

/* Supporto per dispositivi con notch */
@supports (padding: max(0px)) {
    .modern-navigation {
        padding-left: max(8px, env(safe-area-inset-left));
        padding-right: max(8px, env(safe-area-inset-right));
    }
}

/* Animazione di ingresso */
.modern-navigation {
    animation: slideInUp 0.6s ease-out;
}

.modern-nav-item {
    animation: slideInUp 0.6s ease-out;
    animation-fill-mode: both;
}

.modern-nav-item:nth-child(1) { animation-delay: 0.1s; }
.modern-nav-item:nth-child(2) { animation-delay: 0.15s; }
.modern-nav-item:nth-child(3) { animation-delay: 0.2s; }
.modern-nav-item:nth-child(4) { animation-delay: 0.25s; }
.modern-nav-item:nth-child(5) { animation-delay: 0.3s; }

/* === SEZIONE VIBES STILE ALGO === */
#vibes h2 {
    background: linear-gradient(90deg, #ec4899 0%, #f472b6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.vibes-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vibe-card {
    background: rgba(55, 65, 81, 0.4);
    border-radius: 16px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.vibe-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(236, 72, 153, 0.15);
    border-color: rgba(236, 72, 153, 0.2);
}

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

.vibe-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(236, 72, 153, 0.3);
    background: rgba(236, 72, 153, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vibe-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 50%;
}

.vibe-account {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vibe-name {
    font-weight: 600;
    color: #f3f4f6;
    font-size: 0.95rem;
}

.vibe-time {
    font-size: 0.75rem;
    color: #9ca3af;
}

.vibe-content {
    color: #e5e7eb;
    line-height: 1.5;
    font-size: 0.9rem;
}

.vibe-content p {
    margin: 0;
}

.vibe-content strong {
    color: #f3f4f6;
    font-weight: 600;
}

/* Light mode per vibes */
[data-theme="light"] .vibe-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #1e293b;
}

[data-theme="light"] .vibe-card:hover {
    border-color: rgba(236, 72, 153, 0.3);
    box-shadow: 0 8px 25px rgba(236, 72, 153, 0.1);
}

[data-theme="light"] .vibe-name {
    color: #1e293b;
}

[data-theme="light"] .vibe-content {
    color: #475569;
}

[data-theme="light"] .vibe-content strong {
    color: #1e293b;
}

[data-theme="light"] .vibe-avatar {
    border-color: rgba(236, 72, 153, 0.4);
    background: rgba(236, 72, 153, 0.05);
}

/* Responsive per mobile */
@media (max-width: 768px) {
    .vibe-card {
        padding: 12px;
    }
    
    .vibe-avatar {
        width: 40px;
        height: 40px;
    }
    
    .vibe-icon {
        width: 28px;
        height: 28px;
    }
    
    .vibe-content {
        font-size: 0.85rem;
    }
}

/* Animazione per i nuovi commenti */
@keyframes slideInVibe {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.vibe-card {
    animation: slideInVibe 0.4s ease-out;
}

/* === ICONE VIBES LAMPADINA - STESTO STILE DELLE ALTRE ICONE === */

/* Icona Lampadina per Taskbar */
.taskbar-item.vibes-icon {
    position: relative;
}

.taskbar-item.vibes-icon::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto 4px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath d='M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath d='M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Icona Lampadina per Navigazione Rapida */
.modern-nav-item.vibes-icon .modern-nav-icon::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath d='M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath d='M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Assicurati che le icone siano sempre visibili */
.taskbar-item.vibes-icon::before,
.modern-nav-item.vibes-icon .modern-nav-icon::before {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Animazioni hover */
.modern-nav-item.vibes-icon:hover .modern-nav-icon::before {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

.taskbar-item.vibes-icon:hover::before {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Icona quando la sezione è attiva */
.modern-nav-item.active.vibes-icon .modern-nav-icon::before {
    color: #ec4899;
}

/* Osservati - Icona occhio */
.taskbar-item[href="#osservati"]::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}



/* === TASKBAR - AGGIUNTA FANTANEWS === */
.taskbar-content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 4px;
    max-width: 600px;
    margin: 0 auto;
}

/* Aggiungi FantaNews alla taskbar */
.taskbar-content a:nth-child(4) {
    order: 4; /* Posizione dopo Consigli */
}

.taskbar-content a:nth-child(5) {
    order: 5; /* Posizione dopo FantaNews */
}

.taskbar-content a:nth-child(6) {
    order: 6; /* Posizione dopo Listone */
}

/* === STILI PER L'ICONA LAMPADINA NELLA TASKBAR === */
.taskbar-item[href="#vibes"] {
    position: relative;
}

.taskbar-item[href="#vibes"]::before {
    content: "";
    font-size: 1.2rem;
    margin-bottom: 4px;
    display: block;
    transition: all 0.3s ease;
}

/* Light mode per icona taskbar */
[data-theme="light"] .taskbar-item[href="#vibes"]::before {
    filter: brightness(0.8);
}

[data-theme="light"] .taskbar-item[href="#vibes"]:hover::before {
    filter: brightness(1);
}



/* Light mode per navigazione rapida */
[data-theme="light"] .modern-nav-item[data-section="vibes"] .modern-nav-icon::before {
    filter: brightness(0.8);
}

[data-theme="light"] .modern-nav-item[data-section="vibes"]:hover .modern-nav-icon::before {
    filter: brightness(1);
}





/* === RESPONSIVE PER TASKBAR CON 6 ELEMENTI === */
@media (max-width: 768px) {
    .taskbar-content {
        gap: 2px;
    }
    
    .taskbar-item {
        min-width: 50px;
        padding: 6px 3px;
    }
    
    .taskbar-label {
        font-size: 0.65rem;
    }
    
    .taskbar-item[href="#vibes"]::before {
        font-size: 1rem;
        margin-bottom: 2px;
    }
}

@media (max-width: 480px) {
    .taskbar-item {
        min-width: 45px;
        padding: 5px 2px;
    }
    
    .taskbar-label {
        font-size: 0.6rem;
    }
    
    .taskbar-item[href="#vibes"]::before {
        font-size: 0.9rem;
    }
}


/* Icona per Osservati - Stella */
.modern-nav-item[href="#vibes"] .modern-nav-icon {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9.75 3.104v5.714a2.25 2.25 0 0 1-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 0 1 4.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0 1 12 15a9.065 9.065 0 0 0-6.23-.693L5 14.5m14.8.8 1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0 1 12 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5' /%3E%3C/svg%3E%0A");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9.75 3.104v5.714a2.25 2.25 0 0 1-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 0 1 4.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0 1 12 15a9.065 9.065 0 0 0-6.23-.693L5 14.5m14.8.8 1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0 1 12 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5' /%3E%3C/svg%3E%0A");
}

/* Lampadina */
.taskbar-item[href="#vibes"]::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9.75 3.104v5.714a2.25 2.25 0 0 1-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 0 1 4.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0 1 12 15a9.065 9.065 0 0 0-6.23-.693L5 14.5m14.8.8 1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0 1 12 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5' /%3E%3C/svg%3E%0A");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9.75 3.104v5.714a2.25 2.25 0 0 1-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 0 1 4.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0 1 12 15a9.065 9.065 0 0 0-6.23-.693L5 14.5m14.8.8 1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0 1 12 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5' /%3E%3C/svg%3E%0A");
}

.taskbar-item[href="#vibes"]::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9.75 3.104v5.714a2.25 2.25 0 0 1-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 0 1 4.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0 1 12 15a9.065 9.065 0 0 0-6.23-.693L5 14.5m14.8.8 1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0 1 12 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5' /%3E%3C/svg%3E%0A");
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9.75 3.104v5.714a2.25 2.25 0 0 1-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 0 1 4.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0 1 12 15a9.065 9.065 0 0 0-6.23-.693L5 14.5m14.8.8 1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0 1 12 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5' /%3E%3C/svg%3E%0A");
    }

.taskbar-item[href="#vibes"]::before {
    content: "";
    font-size: 1.4rem;
    margin-bottom: 2px;
    color: #f3f4f6;
}

[data-theme="light"] .taskbar-item[href="#vibes"]::before {
    content: "";
    color: #4b5563 !important;
}

/* === SEZIONE SPECIALISTI DI SQUADRA - DESIGN MIGLIORATO === */
    #specialisti-squadre h2 {
        background: linear-gradient(90deg, #8b5cf6 0%, #6366f1 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .teams-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 16px;
        margin-top: 20px;
    }

    .team-card {
        background: linear-gradient(135deg, rgba(55, 65, 81, 0.7), rgba(31, 41, 55, 0.8));
        border: 1px solid rgba(139, 92, 246, 0.2);
        border-radius: 16px;
        padding: 20px;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
        backdrop-filter: blur(10px);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    }

    .team-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #8b5cf6, #6366f1);
        transform: scaleX(0);
        transition: transform 0.3s ease;
    }

    .team-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 30px rgba(139, 92, 246, 0.25);
        border-color: rgba(139, 92, 246, 0.4);
    }

    .team-card:hover::before {
        transform: scaleX(1);
    }

    .team-card.active {
        background: linear-gradient(135deg, rgba(55, 65, 81, 0.9), rgba(31, 41, 55, 0.95));
        border-color: rgba(139, 92, 246, 0.6);
        box-shadow: 0 8px 35px rgba(139, 92, 246, 0.35);
    }

    .team-card.active::before {
        transform: scaleX(1);
    }

    .team-header {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 15px;
    }

    .team-logo {
        width: 70px;
        height: 70px;
        object-fit: contain;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.1);
        padding: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        transition: transform 0.3s ease;
    }

    .team-card:hover .team-logo {
        transform: scale(1.1);
    }

    .team-info {
        flex: 1;
    }

    .team-name {
        font-weight: 700;
        color: #e5e7eb;
        font-size: 1.1rem;
        margin-bottom: 5px;
        background: linear-gradient(90deg, #e5e7eb, #d1d5db);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .team-stats {
        font-size: 0.8rem;
        color: #9ca3af;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .team-stats::before {
        content: '⋮';
        font-size: 0.7rem;
    }

    .team-details {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid rgba(139, 92, 246, 0.2);
        text-align: left;
        display: none;
        animation: slideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

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

    .team-card.active .team-details {
        display: block;
    }

    .specialists-category {
        margin-bottom: 20px;
    }

    .specialists-category:last-child {
        margin-bottom: 0;
    }

    .category-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(139, 92, 246, 0.3);
    }

    .category-icon {
        width: 24px;
        height: 24px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        font-weight: 600;
    }

    .penalty-icon {
        background: linear-gradient(135deg, #ef4444, #dc2626);
    }

    .freekick-icon {
        background: linear-gradient(135deg, #f59e0b, #d97706);
    }

    .category-header h4 {
        font-size: 0.9rem;
        font-weight: 600;
        color: #d1d5db;
        margin: 0;
    }

    .specialists-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .specialist-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        background: rgba(31, 41, 55, 0.6);
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.05);
        transition: all 0.2s ease;
        position: relative;
        overflow: hidden;
    }

    .specialist-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: linear-gradient(180deg, #8b5cf6, #6366f1);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .specialist-item:hover {
        background: rgba(31, 41, 55, 0.8);
        transform: translateX(5px);
        border-color: rgba(139, 92, 246, 0.3);
    }

    .specialist-item:hover::before {
        opacity: 1;
    }

    .specialist-role {
        display: inline-block;
        padding: 4px 8px;
        border-radius: 8px;
        font-size: 0.75rem;
        font-weight: 700;
        min-width: 24px;
        text-align: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .specialist-name {
        font-size: 0.85rem;
        color: #e5e7eb;
        flex: 1;
        font-weight: 500;
    }

    .specialist-order {
        font-size: 0.7rem;
        color: #9ca3af;
        background: rgba(75, 85, 99, 0.5);
        padding: 2px 6px;
        border-radius: 4px;
        font-weight: 600;
    }

    /* Light mode adjustments */
    [data-theme="light"] .team-card {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.95));
        border: 1px solid rgba(139, 92, 246, 0.3);
        color: #1e293b;
    }

    [data-theme="light"] .team-card:hover {
        border-color: rgba(139, 92, 246, 0.5);
        box-shadow: 0 12px 30px rgba(139, 92, 246, 0.2);
    }

    [data-theme="light"] .team-card.active {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.98));
        border-color: rgba(139, 92, 246, 0.6);
    }

    [data-theme="light"] .team-name {
        background: linear-gradient(90deg, #1e293b, #374151);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    [data-theme="light"] .team-stats {
        color: #64748b;
    }

    [data-theme="light"] .team-details {
        border-top: 1px solid rgba(139, 92, 246, 0.3);
    }

    [data-theme="light"] .category-header h4 {
        color: #475569;
    }

    [data-theme="light"] .specialist-item {
        background: rgba(248, 250, 252, 0.8);
        border: 1px solid rgba(0, 0, 0, 0.05);
    }

    [data-theme="light"] .specialist-item:hover {
        background: rgba(248, 250, 252, 0.95);
        border-color: rgba(139, 92, 246, 0.3);
    }

    [data-theme="light"] .specialist-name {
        color: #1e293b;
    }

    [data-theme="light"] .specialist-order {
        background: rgba(156, 163, 175, 0.3);
        color: #6b7280;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .teams-grid {
            grid-template-columns: 1fr;
            gap: 12px;
        }
        
        .team-header {
            gap: 12px;
        }
        
        .team-logo {
            width: 60px;
            height: 60px;
        }
        
        .team-name {
            font-size: 1rem;
        }
    }

    @media (max-width: 480px) {
        .team-card {
            padding: 16px;
        }
        
        .team-header {
            flex-direction: column;
            text-align: center;
            gap: 10px;
        }
        
        .team-info {
            width: 100%;
        }
    }

    /* Scroll smooth per l'apertura delle card */
    .team-card.active {
        scroll-margin-top: 20px;
    }

/* === SEZIONE SPECIALISTI RIDESIGN === */
#specialisti-squadre .teams-scroll-container {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding: 8px 0;
    margin-bottom: 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(75, 85, 99, 0.5) rgba(31, 41, 55, 0.3);
}

#specialisti-squadre .teams-scroll-container::-webkit-scrollbar {
    height: 6px;
}

#specialisti-squadre .teams-scroll-container::-webkit-scrollbar-track {
    background: rgba(31, 41, 55, 0.3);
    border-radius: 3px;
}

#specialisti-squadre .teams-scroll-container::-webkit-scrollbar-thumb {
    background: rgba(75, 85, 99, 0.5);
    border-radius: 3px;
}

#specialisti-squadre .team-selector {
    flex: 0 0 auto;
    background: rgba(55, 65, 81, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    min-width: 80px;
}

#specialisti-squadre .team-selector:hover {
    background: rgba(75, 85, 99, 0.6);
    transform: translateY(-2px);
}

#specialisti-squadre .team-selector.active {
    background: rgba(59, 130, 246, 0.3);
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

#specialisti-squadre .team-logo-small {
    width: 32px;
    height: 32px;
    object-fit: contain;
    margin: 0 auto 4px;
    display: block;
}

#specialisti-squadre .team-name-small {
    font-size: 0.75rem;
    font-weight: 500;
    color: #e5e7eb;
    white-space: nowrap;
}

/* Dettagli specialisti - stile compatto simile ad Analizza Scambi */
#specialisti-squadre .specialisti-details {
    background: rgba(55, 65, 81, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px;
    margin-top: 12px;
    display: none;
}

#specialisti-squadre .specialisti-details.active {
    display: block;
    animation: slideDown 0.3s ease-out;
}

#specialisti-squadre .specialisti-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

#specialisti-squadre .specialisti-category {
    background: rgba(31, 41, 55, 0.6);
    border-radius: 8px;
    padding: 12px;
}

#specialisti-squadre .specialisti-category h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: #f59e0b;
    margin: 0 0 8px 0;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 6px;
}

#specialisti-squadre .specialisti-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#specialisti-squadre .specialist-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: rgba(55, 65, 81, 0.5);
    border-radius: 6px;
    transition: all 0.2s ease;
}

#specialisti-squadre .specialist-item:hover {
    background: rgba(75, 85, 99, 0.6);
    transform: translateX(4px);
}

#specialisti-squadre .specialist-role {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    min-width: 20px;
    text-align: center;
}

#specialisti-squadre .specialist-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: #e5e7eb;
    flex: 1;
}

/* Messaggio nessuna squadra selezionata */
#specialisti-squadre .no-team-selected {
    text-align: center;
    padding: 40px 20px;
    color: #9ca3af;
    font-style: italic;
}

#specialisti-squadre .no-team-selected .icon {
    font-size: 2rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

/* Light mode */
[data-theme="light"] #specialisti-squadre .team-selector {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="light"] #specialisti-squadre .team-selector:hover {
    background: rgba(255, 255, 255, 0.9);
}

[data-theme="light"] #specialisti-squadre .team-selector.active {
    background: rgba(37, 99, 235, 0.15);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

[data-theme="light"] #specialisti-squadre .team-name-small {
    color: var(--text-primary);
}

[data-theme="light"] #specialisti-squadre .specialisti-details {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--border-color);
}

[data-theme="light"] #specialisti-squadre .specialisti-category {
    background: rgba(248, 250, 252, 0.8);
}

[data-theme="light"] #specialisti-squadre .specialisti-category h4 {
    color: var(--accent-yellow);
}

[data-theme="light"] #specialisti-squadre .specialist-item {
    background: rgba(255, 255, 255, 0.7);
    color: var(--text-primary);
}

[data-theme="light"] #specialisti-squadre .specialist-item:hover {
    background: rgba(37, 99, 235, 0.1);
}

[data-theme="light"] #specialisti-squadre .specialist-name {
    color: var(--text-primary);
}

/* Responsive */
@media (max-width: 768px) {
    #specialisti-squadre .specialisti-columns {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    #specialisti-squadre .team-selector {
        min-width: 70px;
        padding: 6px 8px;
    }
    
    #specialisti-squadre .team-logo-small {
        width: 28px;
        height: 28px;
    }
    
    #specialisti-squadre .team-name-small {
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    #specialisti-squadre .teams-scroll-container {
        gap: 6px;
    }
    
    #specialisti-squadre .team-selector {
        min-width: 65px;
        padding: 5px 6px;
    }
    
    #specialisti-squadre .team-logo-small {
        width: 24px;
        height: 24px;
    }
    
    #specialisti-squadre .specialisti-details {
        padding: 12px;
    }
}

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

/* Rimuovi i vecchi stili della sezione specialisti */
#specialisti-squadre .team-card,
#specialisti-squadre #teamsGrid {
    display: none !important;
}

.taskbar-item[href="#specialisti-squadre"]::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-target-icon lucide-target'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-target-icon lucide-target'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E") no-repeat center;
}
/* Icona per Osservati - Stella */
.modern-nav-item[href="#specialisti-squadre"] .modern-nav-icon {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-target-icon lucide-target'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-target-icon lucide-target'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
}

.taskbar-item[href="#specialisti-squadre"]::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-target-icon lucide-target'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-target-icon lucide-target'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
}

/* === MIGLIORAMENTO LISTONE GIOCATORI PER MOBILE === */
#listone-giocatori .player-table {
    font-size: 0.9rem; /* Leggermente più grande */
}

#listone-giocatori .player-table th,
#listone-giocatori .player-table td {
    padding: 14px 10px; /* Aumentato il padding per più spazio */
    vertical-align: middle;
    min-height: 60px; /* Altezza minima aumentata */
}

/* Aumenta l'altezza delle righe */
#listone-giocatori .player-table tbody tr {
    height: 65px; /* Altezza fissa per ogni riga */
    transition: all 0.2s ease;
}

/* Miglioramento hover per mobile */
#listone-giocatori .player-table tbody tr:hover {
    background: rgba(59, 130, 246, 0.1);
    transform: translateX(4px);
}

/* Spaziatura extra per i badge ruolo */
#listone-giocatori .role-badge {
    padding: 6px 10px; /* Più spazio intorno al badge */
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 28px;
    text-align: center;
    display: inline-block;
}

/* Miglioramento celle nome giocatore */
#listone-giocatori .player-name-cell {
    font-weight: 600; /* Più grassetto */
    color: #e5e7eb;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    font-size: 0.95rem; /* Leggermente più grande */
    line-height: 1.4;
}

/* Allineamento e styling valori numerici migliorato */
#listone-giocatori .player-table td:nth-child(4),
#listone-giocatori .player-table td:nth-child(5),
#listone-giocatori .player-table td:nth-child(6) {
    text-align: center;
    font-family: 'Courier New', monospace;
    font-weight: 700; /* Più grassetto per i numeri */
    font-size: 0.95rem;
}

/* Miglioramento header colonne */
#listone-giocatori .player-table th {
    position: sticky;
    top: 0;
    background: rgba(31, 41, 55, 0.95);
    backdrop-filter: blur(10px);
    z-index: 10;
    padding: 16px 10px; /* Più padding nell'header */
    font-weight: 700;
    white-space: nowrap;
    font-size: 0.85rem;
}

/* Barra di ricerca più grande su mobile */
#listone-giocatori #searchPlayer {
    background: rgba(55, 65, 81, 0.6);
    border: 1px solid rgba(75, 85, 99, 0.6);
    border-radius: 12px;
    padding: 14px 16px; /* Più padding */
    font-size: 1rem; /* Testo più grande */
    transition: all 0.3s ease;
    margin-bottom: 16px;
}

/* Pulsanti filtro più grandi */
#listone-giocatori .filter-buttons {
    gap: 8px;
    margin-bottom: 20px;
}

#listone-giocatori .filter-button {
    padding: 10px 16px; /* Più grandi */
    border-radius: 10px;
    font-size: 0.9rem; /* Testo più leggibile */
    font-weight: 600;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-height: 44px; /* Altezza minima per touch */
}

/* Container della tabella con altezza fissa e scroll migliorato */
#listone-giocatori #playersOutput .overflow-x-auto {
    max-height: 70vh;
    overflow-y: auto;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* === OTTIMIZZAZIONI SPECIFICHE PER MOBILE === */
@media (max-width: 768px) {
    #listone-giocatori .player-table {
        font-size: 1rem; /* Ancora più grande su mobile */
    }
    
    #listone-giocatori .player-table th,
    #listone-giocatori .player-table td {
        padding: 16px 8px; /* Più spazio su mobile */
        min-height: 70px; /* Ancora più alto su mobile */
    }
    
    #listone-giocatori .player-table tbody tr {
        height: 75px; /* Più alto su mobile */
    }
    
    #listone-giocatori .player-name-cell {
        font-size: 1rem; /* Più grande su mobile */
        line-height: 1.5;
    }
    
    #listone-giocatori .role-badge {
        padding: 8px 12px; /* Ancora più grande su mobile */
        font-size: 0.9rem;
        min-width: 32px;
    }
    
    #listone-giocatori .player-table td:nth-child(4),
    #listone-giocatori .player-table td:nth-child(5),
    #listone-giocatori .player-table td:nth-child(6) {
        font-size: 1rem; /* Numeri più grandi su mobile */
        font-weight: 700;
    }
    
    #listone-giocatori #searchPlayer {
        padding: 16px 20px; /* Ancora più grande su mobile */
        font-size: 1.1rem;
        margin-bottom: 20px;
    }
    
    #listone-giocatori .filter-button {
        padding: 12px 18px;
        font-size: 1rem;
        min-height: 48px; /* Più alto per dita più grandi */
    }
    
    /* Miglioramento larghezza colonne su mobile */
    #listone-giocatori .player-table th:nth-child(1),
    #listone-giocatori .player-table td:nth-child(1) {
        min-width: 140px; /* Nome più largo */
    }
    
    #listone-giocatori .player-table th:nth-child(2),
    #listone-giocatori .player-table td:nth-child(2) {
        min-width: 50px; /* Ruolo più largo */
    }
    
    #listone-giocatori .player-table th:nth-child(3),
    #listone-giocatori .player-table td:nth-child(3) {
        min-width: 100px; /* Squadra più larga */
    }
    
    #listone-giocatori .player-table th:nth-child(4),
    #listone-giocatori .player-table td:nth-child(4) {
        min-width: 60px; /* Media più larga */
    }
    
    #listone-giocatori .player-table th:nth-child(5),
    #listone-giocatori .player-table td:nth-child(5) {
        min-width: 60px; /* FVM più largo */
    }
    
    #listone-giocatori .player-table th:nth-child(6),
    #listone-giocatori .player-table td:nth-child(6) {
        min-width: 80px; /* Index FH più largo */
    }
}

/* Versione molto compatta per schermi piccoli ma mantenendo la leggibilità */
@media (max-width: 480px) {
    #listone-giocatori .player-table {
        font-size: 0.95rem; /* Leggermente più piccolo ma ancora leggibile */
    }
    
    #listone-giocatori .player-table th,
    #listone-giocatori .player-table td {
        padding: 14px 6px;
        min-height: 65px;
    }
    
    #listone-giocatori .player-table tbody tr {
        height: 70px;
    }
    
    #listone-giocatori .player-name-cell {
        font-size: 0.95rem;
        max-width: 120px; /* Limite per nomi lunghi */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    #listone-giocatori .role-badge {
        padding: 6px 10px;
        font-size: 0.85rem;
    }
    
    #listone-giocatori .filter-button {
        padding: 10px 14px;
        font-size: 0.9rem;
        min-height: 44px;
    }
    
    #listone-giocatori #searchPlayer {
        padding: 14px 18px;
        font-size: 1rem;
    }
}

/* Miglioramento per la leggibilità in light mode */
[data-theme="light"] #listone-giocatori .player-table th,
[data-theme="light"] #listone-giocatori .player-table td {
    background: transparent !important;
    color: #1e293b !important;
}

[data-theme="light"] #listone-giocatori .player-table th {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #475569 !important;
}

[data-theme="light"] #listone-giocatori .player-table tr:hover {
    background: rgba(37, 99, 235, 0.08) !important;
}

/* Effetto di focus per accessibilità */
#listone-giocatori .player-table tbody tr:focus {
    outline: 2px solid #3b82f6;
    outline-offset: -2px;
}

/* Scrollbar più visibile per mobile */
#listone-giocatori #playersOutput .overflow-x-auto::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

#listone-giocatori #playersOutput .overflow-x-auto::-webkit-scrollbar-thumb {
    background: rgba(75, 85, 99, 0.8);
    border-radius: 4px;
}

#listone-giocatori #playersOutput .overflow-x-auto::-webkit-scrollbar-thumb:hover {
    background: rgba(107, 114, 128, 0.8);
}
 

.bar-loader {
    width: 120px;
    height: 4px;
    background: rgba(59, 130, 246, 0.3);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    display: inline-block;
    margin-right: 10px;
}

.bar-loader::before {
    content: '';
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 100%;
    background: #3b82f6;
    animation: barSlide 1.5s ease-in-out infinite;
    border-radius: 2px;
}

@keyframes barSlide {
    0% {
        left: -40%;
    }
    100% {
        left: 100%;
    }
}

/* === SEZIONI PRINCIPALI E TOOLS === */
.principali-section,
.tools-section {
    margin-bottom: 2rem;
}

.section-group-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 2rem 0 1rem 0;
    padding: 0.5rem 0;
    border-bottom: 2px solid;
    background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Stili specifici per light mode */
[data-theme="light"] .section-group-title {
    background: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Spaziatura migliorata tra le sezioni */
.principali-section .card,
.tools-section .card {
    margin-bottom: 1.5rem;
}

.principali-section .card:last-child,
.tools-section .card:last-child {
    margin-bottom: 0;
}

/* Animazione di entrata per i gruppi */
.principali-section,
.tools-section {
    animation: fadeInUp 0.6s ease-out;
}

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

/* Miglioramenti responsive */
@media (max-width: 768px) {
    .section-group-title {
        font-size: 1.5rem;
        margin: 1.5rem 0 0.75rem 0;
    }
    
    .principali-section .card,
    .tools-section .card {
        margin-bottom: 1rem;
    }
}

/* === SEZIONI PRINCIPALI E TOOLS - VERSIONE SENZA LINEA E TITOLI CENTRATI === */
.principali-section,
.tools-section {
    margin-bottom: 2rem;
}

.section-group-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 2rem 0 1rem 0;
    padding: 0.5rem 0;
    text-align: center; /* Centra il testo */
    background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    border-bottom: none; /* Rimuove la linea */
    width: 100%;
    display: block;
}

/* Stili specifici per light mode */
[data-theme="light"] .section-group-title {
    background: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Spaziatura migliorata tra le sezioni */
.principali-section .card,
.tools-section .card {
    margin-bottom: 1.5rem;
}

.principali-section .card:last-child,
.tools-section .card:last-child {
    margin-bottom: 0;
}

/* Animazione di entrata per i gruppi */
.principali-section,
.tools-section {
    animation: fadeInUp 0.6s ease-out;
}

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

/* Miglioramenti responsive */
@media (max-width: 768px) {
    .section-group-title {
        font-size: 1.5rem;
        margin: 1.5rem 0 0.75rem 0;
    }
    
    .principali-section .card,
    .tools-section .card {
        margin-bottom: 1rem;
    }
}

.taskbar-item[href="#specialisti-squadre"]::before {
    content: "";
    font-size: 1.2rem;
    margin-bottom: 4px;
    display: block;
    transition: all 0.3s ease;
}

.taskbar-item[href="#specialisti-squadre"]::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-plus-icon lucide-plus'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-plus-icon lucide-plus'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
    }
.taskbar-item[href="#specialisti-squadre"]::before {
    content: "";
    font-size: 1.4rem;
    margin-bottom: 2px;
    color: #f3f4f6;
}

[data-theme="light"] .taskbar-item[href="#specialisti-squadre"]::before {
    content: "";
    color: #4b5563 !important;
}

/* Header responsive per listone */
.listone-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.update-date {
    font-size: 0.875rem;
    color: #9ca3af;
    font-weight: 500;
    text-align: right;
}

/* Media queries per responsive design */
@media (max-width: 640px) {
    .listone-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .update-date {
        text-align: left;
        font-size: 0.8rem;
        order: 2;
    }
    
    .listone-header h2 {
        order: 1;
    }
}

@media (max-width: 480px) {
    .update-date {
        font-size: 0.75rem;
    }
    
    .listone-header h2 {
        font-size: 1.5rem;
    }
}

@media (max-width: 360px) {
    .update-date {
        font-size: 0.7rem;
    }
    
    .listone-header h2 {
        font-size: 1.25rem;
    }
}

/* Per schermi molto grandi */
@media (min-width: 1024px) {
    .update-date {
        font-size: 0.9rem;
    }
}

/* === CHAT AI ICON === */
.taskbar-item.chat-ai::before {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    margin: 0 auto 4px auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23e5e7eb' viewBox='0 0 24 24'%3E%3Cpath d='M4 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v14l-4-3H6a2 2 0 0 1-2-2V4Zm2 0v9h8.17L18 15.83V4H6Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.taskbar-item.chat-ai:hover::before {
    opacity: 1;
}

/* --- Stile uniforme alla taskbar --- */
.taskbar-item.chat-ai {
    text-decoration: none;
    background: rgba(31, 41, 55, 0.55); /* stesso colore base taskbar */
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    color: #e5e7eb;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    min-width: 70px;
    transition: all 0.25s ease;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.taskbar-item.chat-ai:hover {
    background: rgba(31, 41, 55, 0.75); /* stesso effetto scuro hover come gli altri */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}



/* Icona Chat AI (con mask, compatibile dark mode) */
.taskbar-item.chat-ai::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto 4px auto;
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v14l-4-3H6a2 2 0 0 1-2-2V4Zm2 0v9h8.17L18 15.83V4H6Z'/%3E%3C/svg%3E") no-repeat center / contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v14l-4-3H6a2 2 0 0 1-2-2V4Zm2 0v9h8.17L18 15.83V4H6Z'/%3E%3C/svg%3E") no-repeat center / contain;
    opacity: 0.9;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.taskbar-item.chat-ai:hover::before {
    opacity: 1;
    transform: translateY(-1px);
}

/* === NUOVO DESIGN ANALIZZA SCAMBI === */

.trade-selection-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin-bottom: 30px;
}

.trade-slot {
    display: flex;
    flex-direction: column;
    width: 45%;
}

.trade-mini-label {
    font-size: 0.75rem;
    opacity: 0.7;
    margin-bottom: 6px;
    text-align: center;
}

.trade-slot:last-child .trade-mini-label {
    margin-top: 6px;
}

.trade-btn {
    width: 100%;
    padding: 14px;
    font-size: 1rem;
    text-align: center !important;
}

.trade-center-icon {
    width: 58px;
    height: 58px;
    min-width: 58px;
    background: rgba(55, 65, 81, 0.45);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

.center-swap-icon {
    width: 32px;
    height: 32px;
    color: #9ca3af;
}

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

.trade-selection-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    margin-bottom: 30px;
    flex-wrap: wrap; /* permette la modalità verticale */
}

/* Ogni slot si adatta alla larghezza */
.trade-slot {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 360px;
}

/* Etichetta piccola */
.trade-mini-label {
    font-size: 0.75rem;
    opacity: 0.7;
    margin-bottom: 6px;
    text-align: center;
}

/* Pulsanti molto tondeggianti */
.trade-btn {
    width: 100%;
    padding: 16px;
    font-size: 1rem;
    border-radius: 16px !important; /* ROUND */
    text-align: center !important;
}

/* Cerchio centrale elegante */
.trade-center-icon {
    width: 60px;
    height: 60px;
    background: rgba(55, 65, 81, 0.45);
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px auto;
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

.center-swap-icon {
    width: 30px;
    height: 30px;
    color: #d1d5db;
}

/* === RESPONSIVE === */

/* Su schermi medi e grandi: affiancati */
@media (min-width: 650px) {
    .trade-slot {
        width: 45%;   /* tornano affiancati */
    }
    .trade-selection-wrapper {
        flex-wrap: nowrap;
    }
    .trade-center-icon {
        margin: 0;
    }
}

/* === DETTAGLI GIOCATORE MODERNI === */

.player-details {
    background: rgba(255,255,255,0.04);
    border-radius: 14px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: blur(6px);
    margin-top: 10px;
    animation: fadeIn .25s ease;
}

.player-details p {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.player-details p:last-child {
    border-bottom: none;
}

.player-details span {
    font-weight: 600;
    color: #93c5fd;
}

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

/* === CARD MODERNE PER TUTTE LE SEZIONI === */

.card {
    background: rgba(17, 24, 39, 0.55) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 20px !important;
    padding: 24px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    backdrop-filter: blur(10px);
    transition: all .25s ease;
}

.card:hover {
    box-shadow: 0 6px 26px rgba(0,0,0,0.32);
    transform: translateY(-2px);
}

/* === FILTRO UNIFICATO === */

.filter-master-btn {
    background: linear-gradient(90deg, rgba(59,130,246,0.25), rgba(139,92,246,0.25));
    padding: 12px 20px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    width: 100%;
    font-size: 1.05rem;
    font-weight: 600;
    color: #e5e7eb;
    margin-bottom: 12px;
    transition: all .25s ease;
    backdrop-filter: blur(6px);
}

.filter-master-btn:hover {
    background: linear-gradient(90deg, rgba(59,130,246,0.4), rgba(139,92,246,0.35));
    transform: translateY(-1px);
}

/* Pannello filtri che si apre */
.filters-hidden {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}

.filters-show {
    max-height: 500px; /* abbastanza per tutti i filtri */
}

/* LISTONE - RESTYLING PRO */

.player-table {
    background: rgba(31,41,55,0.4);
    border-radius: 14px;
    overflow: hidden;
}

.player-table th {
    background: rgba(55,65,81,0.35) !important;
    font-size: 0.82rem;
    letter-spacing: 0.5px;
}

.player-table td {
    font-size: 0.9rem;
}

.player-table tr:hover {
    background: rgba(255,255,255,0.04);
}


/* === PLAYER DETAILS PRO — ANALIZZA SCAMBI === */

.player-details {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    border-radius: 14px;
    padding: 14px 18px;
    margin-top: 12px;
    border: none !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    animation: fadeInDetails .25s ease;
}

/* Singola riga */
.player-details p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 0.9rem;
    color: #e5e7eb;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* Ultima riga senza bordo */
.player-details p:last-child {
    border-bottom: none;
}

/* Etichetta (FVM, Media, ecc.) */
.player-details p span:first-child {
    font-weight: 500;
    opacity: 0.85;
}

/* Valore numerico */
.player-details span {
    font-weight: 600;
    color: #93c5fd;
    text-shadow: 0 0 4px rgba(147,197,253,0.4);
}

/* Ruolo più colorato */
.player-details .role-value {
    color: #fbbf24;
}

/* Animazione entrata */
@keyframes fadeInDetails {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
    
    [data-theme="light"] .taskbar-item.chat-ai::before {
        content: "";
        color: #4b5563 !important;
    }

[data-theme="light"] .taskbar-item.chat-ai {
    content: "";
    color: #4b5563 !important;
}

[data-theme="light"] .taskbar-item.chat-ai::hover {
    content: "";
    color: #4b5563 !important;
}

[data-theme="light"] .taskbar-item.chat-ai::before {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    margin: 0 auto 4px auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23e5e7eb' viewBox='0 0 24 24'%3E%3Cpath d='M4 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v14l-4-3H6a2 2 0 0 1-2-2V4Zm2 0v9h8.17L18 15.83V4H6Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

[data-theme="light"] .taskbar-item.chat-ai:hover::before {
    opacity: 1;
}

/* --- Stile uniforme alla taskbar --- */
[data-theme="light"] .taskbar-item.chat-ai {
    text-decoration: none; /* stesso colore base taskbar */
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    min-width: 70px;
    transition: all 0.25s ease;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

[data-theme="light"] .taskbar-item.chat-ai:hover {
    background: rgba(31, 41, 55, 0.75); /* stesso effetto scuro hover come gli altri */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}



/* Icona Chat AI (con mask, compatibile dark mode) */
[data-theme="light"] .taskbar-item.chat-ai::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto 4px auto;
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v14l-4-3H6a2 2 0 0 1-2-2V4Zm2 0v9h8.17L18 15.83V4H6Z'/%3E%3C/svg%3E") no-repeat center / contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v14l-4-3H6a2 2 0 0 1-2-2V4Zm2 0v9h8.17L18 15.83V4H6Z'/%3E%3C/svg%3E") no-repeat center / contain;
    opacity: 0.9;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

[data-theme="light"] .taskbar-item.chat-ai:hover::before {
    opacity: 1;
    transform: translateY(-1px);
}

/* -----------------------------
   ADAPT CHAT AI BUTTON TO LIGHT MODE
   (taskbar button .chat-ai)
   ----------------------------- */
    
/* Base: assicurati che sia coerente con gli altri .taskbar-item */
.taskbar-item.chat-ai {
    /* eredita l'aspetto generale ma garantiamo transizioni e leggibilità */
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

/* Dark mode (più specifico per sicurezza) */
[data-theme="dark"] .taskbar-item.chat-ai {
    background: rgba(55, 65, 81, 0.5);
    border: 1px solid rgba(255,255,255,0.08);
    color: #f3f4f6;
}

/* Light mode: rendi il pulsante identico nello stile agli altri elementi della taskbar in light */
[data-theme="light"] .taskbar-item.chat-ai {
    /* usa fondo chiaro e bordo sottile come la taskbar in light mode */
    background: rgba(255,255,255,0.92);
    color: #0f172a; /* testo scuro leggibile */
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 2px 8px rgba(2,6,23,0.06);
}

/* Hover / active states per coerenza */
[data-theme="light"] .taskbar-item.chat-ai:hover {
    background: rgba(255,255,255,0.98);
    transform: translateY(-3px);
}
[data-theme="dark"] .taskbar-item.chat-ai:hover {
    background: rgba(75,85,99,0.64);
    transform: translateY(-3px);
}

/* Se usi icone SVG che ereditano `currentColor`, così cambiano automaticamente */
.taskbar-item.chat-ai svg,
.taskbar-item.chat-ai img {
    color: inherit;
    filter: none; /* evita filtri che potrebbero rovinare icone in light mode */
}

/* -----------------------------
   MATCH PLAYER DETAILS POPUP BORDER TO SPECIALISTS POPUP
   (analizza scambi → player details)
   ----------------------------- */
    
/* Specialist popup (per riferimento: #specialisti-squadre .specialisti-details usa un bordo sottile scuro in dark) */
/* Forniamo lo stesso bordo anche ai popup dei giocatori. */

/* Inline details (dentro analizza scambi) */
#analizza-scambi .player-details {
    /* manteniamo lo stile scuro di base già usato, ma allineiamo il bordo */
    background: rgba(31, 41, 55, 0.95) !important;
    color: #e5e7eb !important;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08) !important; /* stesso tono usato in .specialisti-details (dark) */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    padding: 12px !important;
    margin-top: 12px !important;
    z-index: 1100;
}

/* Full-screen popup container for player details (se usi .player-details-container / .player-details-popup) */
.player-details-container,
.player-details-popup .player-details-container {
    background: rgba(31,41,55,0.92);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08); /* stesso bordo di specialisti (dark) */
    box-shadow: 0 12px 40px rgba(2,6,23,0.6);
    color: #e5e7eb;
}

/* Light mode: specialisti-switched border color for light theme */
[data-theme="light"] #specialisti-squadre .specialisti-details,
[data-theme="light"] #specialisti-squadre .team-selector.active {
    /* il tuo stylesheet usa var(--border-color) / colori chiari: usiamo bordo chiaro coerente */
    border-color: rgba(0,0,0,0.08);
}

/* Applichiamo la stessa regola ai popups giocatore in light mode */
[data-theme="light"] #analizza-scambi .player-details,
[data-theme="light"] .player-details-container,
[data-theme="light"] .player-details-popup .player-details-container {
    background: rgba(255,255,255,0.98) !important;
    color: #0f172a !important;
    border: 1px solid rgba(0,0,0,0.08) !important; /* stesso bordo chiaro usato nella sezione specialisti in light */
    box-shadow: 0 8px 20px rgba(2,6,23,0.06);
}

/* Piccoli aggiustamenti di leggibilità (light) */
[data-theme="light"] #analizza-scambi .player-details p,
[data-theme="light"] .player-details-container p {
    color: #0f172a !important;
}

/* Se vuoi forzare piena coerenza con lo stile .specialisti-details (in caso l'implementazione futura cambi),
   puoi cambiare la riga qui sopra con lo stesso `border` della sezione specialisti. */
    
/* -----------------------------
   UTILI: fallback se ci sono regole specifiche molto specifiche
   (possono sovrascrivere regole precedenti)
   ----------------------------- */
    
#analizza-scambi .player-details,
.player-details-container {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* fine patch */
/* ------------------------------ */
/* FIX ICONA CHAT AI IN LIGHT MODE */
/* ------------------------------ */

[data-theme="light"] .taskbar-item.chat-ai::before {
    /* Mantieni stessa immagine ma adatta il colore per la light mode */
    filter: brightness(0) saturate(100%);  /* diventa nero/grigio scuro, leggibile */
    opacity: 0.9; /* come gli altri */
}

[data-theme="light"] .taskbar-item.chat-ai:hover::before {
    opacity: 1;
}
/* ------------------------------------------------------------- */
/* ICONA CHAT AI — COLORE CORRETTO IN LIGHT MODE (#1e293b)       */
/* ------------------------------------------------------------- */

[data-theme="light"] .taskbar-item.chat-ai::before {
    /* Tint del SVG per uguagliare il colore degli altri pulsanti */
    filter: invert(14%) sepia(23%) saturate(597%) hue-rotate(187deg) brightness(95%) contrast(91%);
    opacity: 0.85; /* come gli altri */
}

[data-theme="light"] .taskbar-item.chat-ai:hover::before {
    opacity: 1;
}
/* ------------------------------------------------------------- */
/* ICONA CHAT AI — VERSIONE SCURA AUTOMATICA PER LIGHT MODE      */
/* ------------------------------------------------------------- */

/* Applica versione scura dell’icona AI quando il tema è chiaro */
[data-theme="light"] .taskbar-item.chat-ai::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231e293b'%3E%3Cpath d='M4 4h16v16H4z'/%3E%3C/svg%3E");
    opacity: 0.9;
}

[data-theme="light"] .taskbar-item.chat-ai:hover::before {
    opacity: 1;
}

.section-toggle {
    background: rgba(45,55,72,0.45);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    font-size: 1.05rem;
    padding: 14px 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.25s ease, transform 0.25s ease;
}

.section-toggle:hover {
    background: rgba(59,130,246,0.28);
    transform: translateY(-2px);
}

/* --- CARDS MODERNE --- */
.card {
    background: rgba(20, 24, 38, 0.55);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(16px);
    padding: 1.75rem;
    box-shadow: 0 6px 26px rgba(0,0,0,0.22);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(0,0,0,0.3);
}

.section-content {
    background: rgba(20,24,35,0.45);
    border-radius: 14px;
    padding: 1rem 1.2rem;
    margin-top: 10px;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.05);
}

.vibe-card {
    background: rgba(30,34,48,0.6);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.06);
    padding: 18px;
    backdrop-filter: blur(12px);
    margin-bottom: 16px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.vibe-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(0,0,0,0.25);
}

/* SLOT AGGIUNTI DINAMICAMENTE — MODERN GLASS */
.player-slot {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 12px;
    backdrop-filter: blur(12px);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.player-slot:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.25);
}

.remove-slot {
    background: rgba(239,68,68,0.25);
    color: #fff;
    border: 1px solid rgba(239,68,68,0.4);
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 0.85rem;
    transition: background 0.25s ease, transform 0.2s ease;
}

.remove-slot:hover {
    background: rgba(239,68,68,0.45);
    transform: translateY(-2px);
}

.player-details {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 10px;
    margin-top: 10px;
    backdrop-filter: blur(10px);
}

/* CONGUAGLIO — MODERN PANEL */
.congo-section {
    background: rgba(20, 24, 36, 0.55);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-left: 4px solid rgba(245,158,11,0.6);
    border-radius: 14px;
    padding: 16px 18px;
    margin-top: 14px;
    margin-bottom: 14px;
    backdrop-filter: blur(12px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* L’effetto quando il conguaglio si apre */
.congo-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Quando nascosto */
.congo-section:not(.congo-visible) {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
}

.congo-section input[type="number"],
.congo-section input[type="checkbox"],
.congo-section input[type="radio"] {
    accent-color: #f59e0b; /* colore tema conguaglio */
}

.congo-section input[type="number"] {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 8px;
    border-radius: 8px;
}

.aggiungi-slot, .toggle-congo {
    background: linear-gradient(90deg, rgba(139,92,246,0.28), rgba(245,158,11,0.22));
    border: 1px solid rgba(255,255,255,0.08);
    padding: 10px 16px;
    border-radius: 12px !important;
    font-weight: 600;
    backdrop-filter: blur(12px);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.aggiungi-slot:hover, .toggle-congo:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

/* SLOT AGGIUNTI DINAMICAMENTE CON STESSO DESIGN DEI TRADE-SLOT */
.player-slot {
    background: rgba(255, 255, 255, 0.05); /* uguale a trade-slot */
    border: 1px solid rgba(255, 255, 255, 0.07);
    padding: 14px;
    border-radius: 14px;
    backdrop-filter: blur(10px);
    margin-bottom: 12px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* IDENTICO HOVER */
.player-slot:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.25);
}

.remove-slot {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fff;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.2s ease;
}

.remove-slot:hover {
    background: rgba(239, 68, 68, 0.4);
    transform: translateY(-2px);
}

.player-slot .player-details {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 10px;
}

.congo-section {
    background: rgba(20, 24, 36, 0.55);
    border: 1px solid rgba(245, 158, 11, 0.18);
    border-left: 4px solid rgba(245, 158, 11, 0.55);
    padding: 16px 20px;
    border-radius: 16px;
    margin: 14px 0;
    backdrop-filter: blur(14px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Quando è mostrata */
.congo-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Quando è nascosta */
.congo-section:not(.congo-visible) {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
}

.congo-section input[type="number"],
.congo-section select {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    padding: 8px;
    border-radius: 10px;
    color: #f3f4f6;
}

.congo-section input[type="checkbox"],
.congo-section input[type="radio"] {
    accent-color: #f59e0b;
}

.congo-section h3 {
    color: #fbbf24;
    font-weight: 600;
    margin-bottom: 10px;
}

/* --- CARD MODERNE --- */
.card {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    
    /* Ombra moderna */
    box-shadow:
        0 4px 10px rgba(0,0,0,0.25),
        inset 0 1px 1px rgba(255,255,255,0.08);
    
    transform: translateY(0);
    transition: 
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

.card:hover {
    transform: translateY(-5px) scale(1.01);
    background: rgba(255, 255, 255, 0.10);
    box-shadow:
        0 8px 26px rgba(0,0,0,0.35),
        inset 0 1px 2px rgba(255,255,255,0.10);
}

/* --- TITOLI SEZIONI MODERNI --- */
.card h2,
.card h3 {
    font-weight: 700;
    letter-spacing: 0.4px;
    background: linear-gradient(90deg,#60a5fa,#a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- SPAZIO INTERNO PIÙ ARIOSO --- */
.card > *:not(:last-child) {
    margin-bottom: 14px;
}

/* --- VERSIONE "PRESSED" PER MOBILE --- */
@media (hover: none) {
    .card:active {
        transform: scale(.98);
        background: rgba(255,255,255,0.14);
    }
}


/* ==== VIBE CARDS – REDESIGN MODERNO CON GRADIENT LOGO ==== */

/* Wrapper generale della sezione */
#vibes h2 {
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* CARD singola */
.vibe-card {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 18px;
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(14px);
    transition: transform .25s ease, box-shadow .25s ease;
}

.vibe-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
}

/* --- AVATAR con gradient ring --- */
.vibe-avatar {
    width: 48px;
    height: 48px;
    padding: 2px;
    border-radius: 50%;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vibe-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(17, 24, 39, 0.9); /* Contrasto dark mode */
}

/* --- NOME ACCOUNT in gradient --- */
.vibe-name {
    font-weight: 700;
    font-size: 1rem;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- Data / ora più elegante --- */
.vibe-time {
    font-size: 0.8rem;
    color: #9ca3af;
}

/* --- Contenuto testo --- */
.vibe-content p {
    font-size: 0.95rem;
    line-height: 1.45;
    color: #e5e7eb;
}

.vibe-card strong {
    color: #a78bfa;
}


/* ==== NAVIGAZIONE RAPIDA COMPATTA E MODERNA ==== */

#main-menu {
    padding: 18px;
    border-radius: 18px;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(12px);
}

/* Titolo più piccolo e centrato */
#main-menu h2 {
    font-size: 1.4rem !important;
    margin-bottom: 14px !important;
}


/* Icone base (circle placeholders) */
.modern-nav-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    opacity: 0.85;
    margin-bottom: 4px;
}

/* ELEMENTO SINGOLO */
.modern-nav-item {
    text-align: center;
    padding: 10px 6px;
    border-radius: 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    transition: all .25s ease;
    cursor: pointer;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    
    position: relative;
    overflow: hidden;
}

/* Effetto hover moderno */
.modern-nav-item:hover {
    transform: translateY(-3px);
    background: rgba(255,255,255,0.12);
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

/* Label più piccola e leggibile */
.modern-nav-label {
    font-size: 0.82rem;
    font-weight: 500;
    opacity: 0.9;
}

/* Indicatore attivo sotto (piccola barra animata) */
.modern-nav-indicator {
    position: absolute;
    bottom: 4px;
    left: 50%;
    width: 0;
    height: 3px;
    border-radius: 10px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    transform: translateX(-50%);
    transition: width .25s ease;
}

.modern-nav-item.active .modern-nav-indicator {
    width: 22px;
}


/* ============================================================
   🟦 LIGHT MODE — override completo
   Attiva quando <html data-theme="light">
   ============================================================ */
    
html[data-theme="light"] {
    --bg: #f3f4f6;
    --bg-card: rgba(255,255,255,0.75);
    --bg-soft: rgba(255,255,255,0.6);
    --text: #1f2937;
    --text-muted: #4b5563;
    --border: rgba(0,0,0,0.10);
    --shadow: rgba(0,0,0,0.15);
    
    --gradient-logo: linear-gradient(90deg, #3b82f6, #8b5cf6);
}

/* ==== BODY ==== */
html[data-theme="light"] body {
    background: var(--bg);
    color: var(--text);
}

/* ==== CARD GENERICHE ==== */
html[data-theme="light"] .card {
    background: var(--bg-card);
    border-color: var(--border);
    box-shadow: 0 4px 14px var(--shadow);
}

html[data-theme="light"] .card:hover {
    background: rgba(255,255,255,0.85);
    box-shadow: 0 8px 25px rgba(0,0,0,0.18);
}

/* ==== HEADER ==== */
html[data-theme="light"] .main-header {
    background: rgba(255,255,255,0.7);
    border-bottom-color: var(--border);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* ==== NAVIGAZIONE RAPIDA (nuovo design) ==== */

html[data-theme="light"] #main-menu {
    background: rgba(255,255,255,0.6);
}

html[data-theme="light"] .modern-nav-item {
    background: rgba(255,255,255,0.75);
    border-color: var(--border);
    color: var(--text);
}

html[data-theme="light"] .modern-nav-item:hover {
    background: rgba(255,255,255,0.9);
    box-shadow: 0 6px 14px rgba(0,0,0,0.1);
}

html[data-theme="light"] .modern-nav-label {
    color: var(--text);
}

html[data-theme="light"] .modern-nav-icon {
    opacity: 1;
    background: var(--gradient-logo);
}

/* Indicatore attivo */
html[data-theme="light"] .modern-nav-indicator {
    background: var(--gradient-logo);
}

/* ==== VIBE CARDS ==== */
html[data-theme="light"] .vibe-card {
    background: rgba(255,255,255,0.7);
    border-color: var(--border);
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

html[data-theme="light"] .vibe-content p {
    color: var(--text-muted);
}

html[data-theme="light"] .vibe-name {
    background: var(--gradient-logo);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

html[data-theme="light"] .vibe-avatar {
    background: var(--gradient-logo);
}

html[data-theme="light"] .vibe-avatar img {
    border-color: #ffffff;
}

html[data-theme="light"] #vibes h2 {
    background: var(--gradient-logo);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==== BUTTONS ==== */
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .btn-success,
html[data-theme="light"] .aggiungi-slot,
html[data-theme="light"] .toggle-congo,
html[data-theme="light"] .taskbar-item {
    background: rgba(255,255,255,0.75);
    color: var(--text);
    border-color: var(--border);
}

html[data-theme="light"] .btn-primary:hover,
html[data-theme="light"] .btn-success:hover,
html[data-theme="light"] .taskbar-item:hover {
    background: rgba(255,255,255,0.95);
}

/* ==== TASKBAR ==== */
html[data-theme="light"] .taskbar {
    background: rgba(255,255,255,0.8);
    border-color: var(--border);
    box-shadow: 0 8px 18px rgba(0,0,0,0.15);
}

html[data-theme="light"] .taskbar-label {
    color: var(--text);
}

/* ==== INPUT & SELECT ==== */
html[data-theme="light"] input,
html[data-theme="light"] select {
    background: rgba(255,255,255,0.8);
    border-color: var(--border);
    color: var(--text);
}

html[data-theme="light"] input::placeholder {
    color: #6b7280;
}

/* ==== POPUP (player select) ==== */
html[data-theme="light"] .player-select-popup,
html[data-theme="light"] .player-details-popup {
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(8px);
}

html[data-theme="light"] .player-select-container,
html[data-theme="light"] .player-details-container {
    background: rgba(255,255,255,0.9);
    border-color: var(--border);
}

html[data-theme="light"] .player-select-item:hover {
    background: rgba(0,0,0,0.06);
}

/* ==== FORMATION ==== */
html[data-theme="light"] #suggestedFormation {
    background: rgba(255,255,255,0.8);
    border-color: var(--border);
    color: var(--text);
}

html[data-theme="light"] .formation-player {
    background: rgba(255,255,255,0.9);
    border-left-color: var(--gradient-logo);
}

html[data-theme="light"] .formation-player strong {
    color: var(--text);
}

html[data-theme="light"] .rating {
    background: white;
    color: var(--text);
}


/* ============================================================
   LIGHT MODE — INTERNI DELLE CARD / SOTTO-SEZIONI
   ============================================================ */
    
html[data-theme="light"] .section-content,
html[data-theme="light"] .player-slot,
html[data-theme="light"] .player-details,
html[data-theme="light"] .congo-section,
html[data-theme="light"] .options-container,
html[data-theme="light"] .player-slot-group,
html[data-theme="light"] .trade-output-container,
html[data-theme="light"] .bg-card {
    background: rgba(255,255,255,0.65) !important;
    border-color: rgba(0,0,0,0.08) !important;
    color: #1f2937 !important;
    backdrop-filter: blur(10px);
}

/* Bordi / Riquadri interni */
html[data-theme="light"] .player-slot,
html[data-theme="light"] .player-details,
html[data-theme="light"] .congo-section,
html[data-theme="light"] .bg-card {
    border: 1px solid rgba(0,0,0,0.10) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* Titoli interni */
html[data-theme="light"] .player-slot-header label,
html[data-theme="light"] .congo-section h3,
html[data-theme="light"] .bg-card h3 {
    color: #1f2937 !important;
}

/* Testi secondari */
html[data-theme="light"] .player-details p,
html[data-theme="light"] .detail-label,
html[data-theme="light"] #injuredPlayersOutput p,
html[data-theme="light"] #essentialPlayersOutput p {
    color: #4b5563 !important;
}

/* Inputs e Select all'interno delle card */
html[data-theme="light"] .player-slot input,
html[data-theme="light"] .player-slot select,
html[data-theme="light"] .congo-section input,
html[data-theme="light"] .congo-section select,
html[data-theme="light"] .options-container input,
html[data-theme="light"] .options-container select {
    background: rgba(255,255,255,0.8) !important;
    color: #1f2937 !important;
    border-color: rgba(0,0,0,0.12) !important;
}

/* Popup selezione giocatori */
html[data-theme="light"] .player-select-container,
html[data-theme="light"] .player-details-container {
    background: rgba(255,255,255,0.9) !important;
    border-color: rgba(0,0,0,0.10) !important;
}

html[data-theme="light"] .player-select-item {
    border-bottom-color: rgba(0,0,0,0.07) !important;
    color: #1f2937;
}

html[data-theme="light"] .player-select-item:hover {
    background: rgba(0,0,0,0.05) !important;
}

/* Placeholder “Risultato Scambio” */
html[data-theme="light"] .trade-placeholder p,
html[data-theme="light"] .trade-placeholder h3 {
    color: #4b5563 !important;
}

/* Icona nel placeholder */
html[data-theme="light"] .trade-icon svg {
    color: #6b7280 !important;
}

/* Riquadri dei contatori rosa (por, dif, cen, att) */
html[data-theme="light"] #la-mia-squadra .bg-gray-800 {
    background: rgba(0,0,0,0.08) !important;
    color: #1f2937 !important;
}

/* Testo numeri */
html[data-theme="light"] #la-mia-squadra span {
    color: #1f2937 !important;
}

/* ================================
   LISTONE – Design moderno
   ================================ */
    
#listone {
    margin-top: 20px;
}

#listone table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}

/* Riga */
.listone-row {
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    overflow: hidden;
    transition: .25s ease;
}

/* Hover */
.listone-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 18px rgba(0,0,0,0.28);
}

/* Celle */
#listone td, #listone th {
    padding: 10px 12px;
    text-align: left;
}

/* Header */
#listone thead th {
    font-size: 0.85rem;
    opacity: 0.75;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    position: sticky;
    top: 0;
    backdrop-filter: blur(8px);
    z-index: 3;
}

/* Nome giocatore */
.listone-name {
    font-weight: 600;
    font-size: 0.95rem;
}

/* Squadra (colore leggero) */
.listone-team {
    opacity: 0.8;
    font-size: 0.85rem;
}

/* Ruolo con gradient logo */
.listone-role {
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 8px;
    color: white;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    font-size: 0.75rem;
    text-align: center;
}

/* Prezzo / valore */
.listone-value {
    font-weight: 700;
}

/* Mobile: scroll morbido */
#listone-wrapper {
    overflow-x: auto;
    padding-bottom: 8px;
}

#listone-wrapper::-webkit-scrollbar {
    height: 6px;
}

#listone-wrapper::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 4px;
}

html[data-theme="dark"] #listone .listone-row {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
}

html[data-theme="dark"] #listone thead th {
    background: rgba(0,0,0,0.45);
    color: #e5e7eb;
}

html[data-theme="dark"] #listone td {
    color: #e5e7eb;
}

html[data-theme="light"] #listone .listone-row {
    background: rgba(255,255,255,0.75);
    border: 1px solid rgba(0,0,0,0.10);
}

html[data-theme="light"] #listone thead th {
    background: rgba(255,255,255,0.9);
    color: #374151;
}

html[data-theme="light"] #listone td {
    color: #1f2937;
}

html[data-theme="light"] .listone-team {
    opacity: 0.65;
}


/* =====================================================
   SPLASH SCREEN — STILE TASKBAR
   ===================================================== */
#splash-screen,
.splash-screen,
#loading,
.loading-screen {
    background: rgba(31, 41, 55, 0.75) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 40px rgba(0,0,0,0.45) !important;
}

/* Testo della splash più pulito */
.splash-screen h1,
.splash-screen p,
#splash-screen h1,
#splash-screen p {
    color: #e5e7eb !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}