/** * AnimaScore - Foglio di Stile Principale *  * Contiene tutti gli stili comuni dell'applicazione, per la classifica pubblica e il pannello admin. * Ottimizzato per un'esperienza mobile-first. *  * @version 1.3.1.0b * @author Il Tuo Sviluppatore *//* --- Variabili CSS (Tema) --- */:root {    --primary-color: #1e293b;    --accent-color: #3b82f6;    --success-color: #10b981;    --danger-color: #ef4444;    --warning-color: #f59e0b;    --background-color: #f8fafc;    --card-background: #ffffff;    --text-primary: #1e293b;    --text-secondary: #64748b;    --border-color: #e2e8f0;    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);}/* --- Stili Generali e Reset --- */body {    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;    background-color: var(--background-color);    color: var(--text-primary);    margin: 0;    padding: 1rem;    box-sizing: border-box;    display: flex;    flex-direction: column;    min-height: 100vh;}.container {    max-width: 1200px;    margin: 0 auto;    width: 100%;}.public-container {    max-width: 800px;}/* --- Componenti Riutilizzabili --- *//* Bottoni */.btn {    padding: 0.75rem 1.5rem;    border: none;    border-radius: 4px;    font-size: 1rem;    font-weight: 600;    cursor: pointer;    transition: background-color 0.2s, transform 0.2s;    text-decoration: none;    display: inline-block;    text-align: center;    white-space: nowrap;}.btn-primary { background-color: var(--accent-color); color: white; }.btn-primary:hover { background-color: #2563eb; }.btn-success { background-color: var(--success-color); color: white; }.btn-danger { background-color: var(--danger-color); color: white; }.btn-secondary { background-color: var(--text-secondary); color: white; }.btn-sm { padding: 0.5rem 1rem; font-size: 0.8rem; }/* Form */.form-container {    background-color: var(--card-background);    padding: 1.5rem;    border-radius: 8px;    box-shadow: var(--shadow-sm);    margin-bottom: 2rem;}.form-group {    margin-bottom: 1rem;    text-align: left;}.form-group label {    display: block;    margin-bottom: 0.5rem;    font-weight: 600;    color: var(--text-primary);}.form-control {    width: 100%;    padding: 0.75rem;    border: 1px solid var(--border-color);    border-radius: 4px;    font-size: 1rem;    box-sizing: border-box;}.form-control:focus {    outline: none;    border-color: var(--accent-color);    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);}/* Tabelle */.data-table {    width: 100%;    border-collapse: collapse;    background-color: var(--card-background);    border-radius: 8px;    overflow: hidden;    box-shadow: var(--shadow-sm);}.data-table th, .data-table td {    padding: 0.75rem 1rem;    text-align: left;    border-bottom: 1px solid var(--border-color);}.data-table th {    background-color: #f1f5f9;    font-weight: 600;    color: var(--text-primary);}.data-table tbody tr:hover { background-color: #f8fafc; }.data-table tbody tr:last-child td { border-bottom: none; }/* Messaggi di Feedback */.message {    padding: 1rem;    border-radius: 4px;    margin-bottom: 1rem;    position: fixed;    top: 20px;    right: 20px;    z-index: 1000;    min-width: 250px;    box-shadow: var(--shadow-lg);    animation: slideIn 0.3s ease-out;}.message-success { background-color: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }.message-error { background-color: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }/* Loading e Errori */.loading, .error-message {    text-align: center;    padding: 2rem;    font-size: 1.1rem;    color: var(--text-secondary);}.error-message {    color: var(--danger-color);    background-color: #fee2e2;    border: 1px solid #fecaca;    border-radius: 8px;}/* Stile per il link allo storico operazioni */.btn-view-ops {    color: var(--accent-color);    cursor: pointer;    font-weight: 600;    transition: text-decoration 0.2s;}.btn-view-ops:hover {    text-decoration: underline;}/* --- Stili Specifici per Pagine --- *//* 1. Pagine di Login e Cambio Password */.auth-page {    display: flex;    justify-content: center;    align-items: center;    min-height: 100vh;    margin: 0;}.auth-container {    background-color: var(--card-background);    padding: 2rem 3rem;    border-radius: 8px;    box-shadow: var(--shadow-md);    width: 100%;    max-width: 450px;    text-align: center;}.auth-container h1 {    font-size: 1.8rem;    color: var(--primary-color);    margin-bottom: 0.5rem;}.auth-container p {    color: var(--text-secondary);    margin-bottom: 2rem;}/* 2. Pannello di Amministrazione */.admin-header {    background-color: var(--primary-color);    color: white;    padding: 1rem 0;    box-shadow: var(--shadow-md);}.admin-header-content {    display: flex;    justify-content: space-between;    align-items: center;}.admin-header h1 { margin: 0; font-size: 1.5rem; }.admin-user {    display: flex;    align-items: center;    gap: 1rem;}.admin-user a {    color: white;    text-decoration: none;    padding: 0.5rem 1rem;    border-radius: 4px;    transition: background-color 0.2s;}.admin-user a:hover { background-color: rgba(255,255,255,0.1); }.admin-nav {    background-color: var(--card-background);    border-bottom: 1px solid var(--border-color);    padding: 0;    position: sticky;    top: 0;    z-index: 100;}.nav-list {    display: flex;    list-style: none;    margin: 0;    padding: 0;}.nav-item {    cursor: pointer;    padding: 1rem 1.5rem;    color: var(--text-secondary);    font-weight: 600;    transition: all 0.2s;    border-bottom: 3px solid transparent;    white-space: nowrap;}.nav-item:hover { color: var(--text-primary); }.nav-item.active {    color: var(--accent-color);    border-bottom-color: var(--accent-color);}.main-content {    padding: 2rem 0;    flex-grow: 1;}.section {    display: none;}.section.active { display: block; }.stats-grid {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));    gap: 1.5rem;    margin-bottom: 2rem;}.stat-card {    background-color: var(--card-background);    padding: 1.5rem;    border-radius: 8px;    box-shadow: var(--shadow-sm);    text-align: center;}.stat-value {    font-size: 2.5rem;    font-weight: bold;    color: var(--accent-color);    margin: 0;}.stat-label {    font-size: 0.9rem;    color: var(--text-secondary);    margin-top: 0.5rem;}/* 3. Classifica Pubblica */.public-page {    display: flex;    flex-direction: column;    align-items: center;}.header {    text-align: center;    margin-bottom: 2rem;}.header h1 {    font-size: 2.5rem;    margin: 0;    color: var(--primary-color);}.header p {    font-size: 1.1rem;    color: var(--text-secondary);    margin-top: 0.5rem;}.filter-container {    display: flex;    justify-content: center;    gap: 0.5rem;    margin-bottom: 1.5rem;    flex-wrap: wrap;}.filter-btn {    padding: 0.5rem 1.5rem;    border: 2px solid var(--border-color);    background-color: var(--card-background);    color: var(--text-secondary);    border-radius: 9999px;    cursor: pointer;    font-size: 0.9rem;    font-weight: 600;    transition: all 0.2s ease-in-out;}.filter-btn:hover {    border-color: var(--accent-color);    color: var(--accent-color);}.filter-btn.active {    background-color: var(--accent-color);    color: white;    border-color: var(--accent-color);    transform: scale(1.05);}#classifica-list {    list-style-type: none;    padding: 0;    margin: 0;}.animatore-card {    background-color: var(--card-background);    border-radius: 8px;    padding: 1rem 1.5rem;    margin-bottom: 1rem;    display: flex;    align-items: center;    gap: 1rem;    box-shadow: var(--shadow-sm);    transition: transform 0.2s ease, box-shadow 0.2s ease;    position: relative;    overflow: hidden;}.animatore-card:hover {    transform: translateY(-2px);    box-shadow: var(--shadow-md);}.animatore-card.podio-1 { border-left: 5px solid #ffd700; }.animatore-card.podio-2 { border-left: 5px solid #c0c0c0; }.animatore-card.podio-3 { border-left: 5px solid #cd7f32; }.rank {    font-size: 1.5rem;    font-weight: bold;    color: var(--text-secondary);    min-width: 40px;    text-align: center;}.avatar {    width: 50px;    height: 50px;    border-radius: 50%;    display: flex;    justify-content: center;    align-items: center;    color: white;    font-size: 1.5rem;    font-weight: bold;    flex-shrink: 0;}.animatore-info {    flex-grow: 1;}.animatore-nome {    font-size: 1.1rem;    font-weight: 600;    color: var(--text-primary);}.punti {    font-size: 1.5rem;    font-weight: bold;    color: var(--accent-color);}.footer {    margin-top: auto;    padding-top: 2rem;    font-size: 0.8rem;    color: var(--text-secondary);    text-align: center;}/* 4. Modali */.modal {    display: none;    position: fixed;    z-index: 1000;    left: 0;    top: 0;    width: 100%;    height: 100%;    background-color: rgba(0, 0, 0, 0.5);    justify-content: center;    align-items: center;}.modal-content {    background-color: var(--card-background);    margin: 5% auto;    padding: 0;    border-radius: 8px;    width: 90%;    max-width: 600px;    box-shadow: var(--shadow-lg);    animation: modalFadeIn 0.3s ease-out;}.modal-header {    padding: 1.5rem;    border-bottom: 1px solid var(--border-color);    display: flex;    justify-content: space-between;    align-items: center;}.modal-header h3 {     margin: 0;     flex-grow: 1; /* Permette al titolo di occupare lo spazio e spinge il bottone a destra */}.modal-close {    /* Stile minimale e moderno */    background: none;    border: none;    color: var(--text-secondary);    cursor: pointer;        /* Dimensioni e posizionamento */    font-size: 2rem;    font-weight: 300; /* Font weight più leggero per un aspetto più elegante */    line-height: 1;    padding: 0;    margin: 0;        /* Transizione per un hover morbido */    transition: color 0.2s ease;}.modal-close:hover {     color: var(--text-primary); /* Al passaggio del mouse, diventa più scuro */}.modal-body { padding: 1.5rem; }.modal-footer {    padding: 1rem 1.5rem;    border-top: 1px solid var(--border-color);    text-align: right;}/* 5. Footer Admin */.admin-footer {    background-color: var(--primary-color);    color: white;    padding: 1rem 0;    margin-top: auto;    text-align: center;    font-size: 0.9rem;}.admin-footer p {    margin: 0;}/* 6. Stile per righe inattive nello storico */.inactive-row {    background-color: #f9fafb;    opacity: 0.7;}.inactive-row td {    color: #9ca3af;}/* --- Animazioni --- */@keyframes slideIn {    from { transform: translateX(100%); opacity: 0; }    to { transform: translateX(0); opacity: 1; }}@keyframes modalFadeIn {    from { opacity: 0; transform: scale(0.9); }    to { opacity: 1; transform: scale(1); }}/* --- Responsive Design --- */@media (max-width: 768px) {    /* Header Admin */    .admin-header-content {        flex-direction: column;        gap: 1rem;        text-align: center;    }    .admin-user {        flex-wrap: wrap;        justify-content: center;        gap: 0.5rem;    }    .admin-user a {        font-size: 0.9rem;        padding: 0.4rem 0.8rem;    }    /* Navigazione */    .nav-list {        overflow-x: auto;        -webkit-overflow-scrolling: touch;    }        /* Tabelle */    .data-table {        font-size: 0.8rem;    }    .data-table th, .data-table td {        padding: 0.5rem;    }        /* Stats Grid */    .stats-grid {        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));    }        /* Modali */    .modal-content {        width: 95%;        margin: 10% auto;    }}@media (max-width: 600px) {    body { padding: 0.5rem; }        /* Header Classifica Pubblica */    .header h1 { font-size: 2rem; }        /* Cards Classifica */    .animatore-card {        padding: 0.75rem 1rem;        flex-direction: column;        text-align: center;        gap: 0.5rem;    }    .rank {        font-size: 1.2rem;        min-width: auto;    }    .avatar {        width: 40px;        height: 40px;        font-size: 1.2rem;    }    .punti {        font-size: 1.2rem;    }    /* Tabelle scorrevoli su mobile */    .data-table {        display: block;        overflow-x: auto;        -webkit-overflow-scrolling: touch;        white-space: nowrap;    }}