/* Reset delle proprietà predefinite del browser */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

/* Stile generale per il corpo */
body {
    background-color: #f0f2f5;
    color: #333;
    font-size: 16px;
    line-height: 1.6;
    padding: 40px;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px;
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: all 0.3s ease-in-out;
}

h1, h2 {
    color: #333;
    text-align: center;
    margin-bottom: 20px;
    font-weight: 600;
}

h1 {
    font-size: 2.5rem;
    letter-spacing: -0.5px;
}

h2 {
    font-size: 1.8rem;
    letter-spacing: -0.3px;
}

/* Stile per i moduli di inserimento/modifica */
form {
    background-color: #f9f9f9;
    padding: 30px;
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

label {
    font-weight: 500;
    display: block;
    margin-bottom: 10px;
    color: #555;
    font-size: 1rem;
}

input[type="text"],
textarea {
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    background-color: #f3f4f6;
    transition: all 0.3s ease;
}

input[type="text"]:focus,
textarea:focus {
    border-color: #007bff;
    outline: none;
    background-color: #ffffff;
}

/* Stile per i pulsanti */
button,
.nav-btn {
    background-color: #007bff;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

button:hover,
.nav-btn:hover {
    background-color: #0056b3;
}

/* Stile per la lista dei changelog */
.changelog-list {
    margin-top: 30px;
}

.changelog-item {
    background-color: #f9f9f9;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.changelog-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.12);
}

.changelog-item h2 {
    color: #0056b3;
    margin-bottom: 10px;
    font-size: 1.5rem;
    font-weight: 600;
}

.changelog-item p {
    margin-bottom: 10px;
    font-size: 1rem;
    color: #666;
}

/* Stile dei pulsanti modifica/elimina */
.edit-btn {
    background-color: #28a745;
    color: #ffffff;
}

.delete-btn {
    background-color: #dc3545;
    color: #ffffff;
}

/* Pulsanti di spostamento su/giù */
.move-btn {
    background-color: #007bff;
    color: #ffffff;
    text-align: center;
    border: none;
    cursor: pointer;
    display: inline-block;
    padding: 10px 15px;
    margin-right: 10px;
    border-radius: 8px;
    font-size: 1rem;
    transition: background-color 0.2s ease;
}

.move-btn.up::before {
    content: "↑"; /* Unicode per freccia su */
    font-size: 1rem;
}

.move-btn.down::before {
    content: "↓"; /* Unicode per freccia giù */
    font-size: 1rem;
}

/* Stile per i pulsanti della navigazione */
.admin-buttons {
    position: absolute;
    top: 20px;
    right: 20px;
}

.admin-buttons-left {
    position: absolute;
    top: 20px;
    left: 20px;
}

.nav-btn {
    display: inline-block;
    padding: 10px 20px;
    margin-right: 10px;
    border-radius: 8px;
    background-color: #007bff;
    color: #ffffff;
    text-decoration: none;
    font-size: 1rem;
    text-align: center;
}

.nav-btn:hover {
    background-color: #0056b3;
}

/* Stile per i messaggi di errore o successo */
.error {
    color: #dc3545;
    font-size: 1rem;
    margin-top: 15px;
}

.success {
    color: #28a745;
    font-size: 1rem;
    margin-top: 15px;
}

/* Stile responsive */
@media (max-width: 768px) {
    body {
        padding: 20px;
    }

    .container {
        padding: 20px;
    }

    button, .nav-btn {
        width: 100%;
        margin-bottom: 15px;
    }

    .edit-btn, .delete-btn, .move-btn {
        width: 100%;
        margin-bottom: 10px;
    }
}
/* Stile per i pulsanti */
button,
.nav-btn,
.edit-btn,
.delete-btn,
.send-btn,
.move-btn {
    background-color: #007bff;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-align: center;
    display: inline-block;
    margin-right: 10px;
}

button:hover,
.nav-btn:hover,
.edit-btn:hover,
.delete-btn:hover,
.send-btn:hover,
.move-btn:hover {
    background-color: #0056b3;
}

/* Pulsanti di spostamento su/giù */
.move-btn {
    background-color: #007bff;
    color: #ffffff;
    text-align: center;
    border: none;
    cursor: pointer;
    display: inline-block;
    padding: 10px 15px;
    margin-right: 10px;
    border-radius: 8px;
    font-size: 1rem;
    transition: background-color 0.2s ease;
}

.move-btn.up::before {
    content: "↑"; /* Unicode per freccia su */
    font-size: 1rem;
}

.move-btn.down::before {
    content: "↓"; /* Unicode per freccia giù */
    font-size: 1rem;
}

/* Stile per i pulsanti di modifica ed eliminazione */
.edit-btn,
.delete-btn {
    background-color: #007bff;
    color: #ffffff;
}

.edit-btn {
    background-color: #28a745; /* Verde per modifica */
}

.delete-btn {
    background-color: #dc3545; /* Rosso per eliminazione */
}

/* Stile per i pulsanti della navigazione */
.admin-buttons {
    position: absolute;
    top: 20px;
    right: 20px;
}

.admin-buttons-left {
    position: absolute;
    top: 20px;
    left: 20px;
}

.nav-btn {
    display: inline-block;
    padding: 10px 20px;
    margin-right: 10px;
    border-radius: 8px;
    background-color: #007bff;
    color: #ffffff;
    text-decoration: none;
    font-size: 1rem;
    text-align: center;
}

.nav-btn:hover {
    background-color: #0056b3;
}

/* Stile per i messaggi di errore o successo */
.error {
    color: #dc3545;
    font-size: 1rem;
    margin-top: 15px;
}

.success {
    color: #28a745;
    font-size: 1rem;
    margin-top: 15px;
}

/* Stile responsive */
@media (max-width: 768px) {
    body {
        padding: 20px;
    }

    .container {
        padding: 20px;
    }

    button, .nav-btn {
        width: 100%;
        margin-bottom: 15px;
    }

    .edit-btn, .delete-btn, .move-btn {
        width: 100%;
        margin-bottom: 10px;
    }
}
/* Stile per il contenitore principale */
.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px;
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
    position: relative; /* Necessario per il posizionamento assoluto dei pulsanti */
}

/* Stile per i pulsanti nella parte superiore destra */
.admin-buttons-top {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
}

.admin-buttons-top .nav-btn {
    padding: 10px 20px;
    background-color: #007bff;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1rem;
    text-align: center;
}

.admin-buttons-top .nav-btn:hover {
    background-color: #0056b3;
}

/* Stile per i pulsanti di modifica ed eliminazione */
.edit-btn,
.delete-btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
}

.edit-btn {
    background-color: #28a745; /* Verde per modifica */
    color: #ffffff;
}

.delete-btn {
    background-color: #dc3545; /* Rosso per eliminazione */
    color: #ffffff;
}

/* Pulsanti di spostamento su/giù */
.move-btn {
    display: inline-block;
    padding: 10px 15px;
    margin-top: 10px;
    text-align: center;
    border-radius: 8px;
    font-size: 1rem;
    color: #ffffff;
    background-color: #007bff;
    text-decoration: none;
}

.move-btn.up::before {
    content: "↑"; /* Unicode per freccia su */
    font-size: 1rem;
}

.move-btn.down::before {
    content: "↓"; /* Unicode per freccia giù */
    font-size: 1rem;
}

.move-btn:hover {
    background-color: #0056b3;
}

/* Pulsante Telegram */
.send-btn {
    background-color: #007bff;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    display: inline-block;
    margin-left: 10px;
}

/* Stile per i messaggi di errore o successo */
.error {
    color: #dc3545;
    font-size: 1rem;
    margin-top: 15px;
}

.success {
    color: #28a745;
    font-size: 1rem;
    margin-top: 15px;
}

/* Stile responsive */
@media (max-width: 768px) {
    body {
        padding: 20px;
    }

    .container {
        padding: 20px;
    }

    button, .nav-btn {
        width: 100%;
        margin-bottom: 15px;
    }

    .edit-btn, .delete-btn, .move-btn {
        width: 100%;
        margin-bottom: 10px;
    }
}
@media (max-width: 768px) {
    /* Regole per tablet e smartphone */
    .settings-container, .admin-container {
        padding: 20px;
    }
    
    .settings-box, .admin-box {
        flex-direction: column; /* Cambia da orizzontale a colonna */
    }

    .settings-menu, .admin-menu {
        width: 100%;
        padding: 10px;
        border-right: none;
        border-bottom: 2px solid #e0e0e0;
    }

    .settings-menu a, .admin-menu a {
        font-size: 1em;
        padding: 10px;
        text-align: center;
    }

    .settings-content, .admin-content {
        padding: 20px;
    }

    /* Pulsanti */
    .nav-btn {
        width: 40px;
        height: 40px;
        padding: 0;
        font-size: 1.2em;
    }

    /* Box del contenuto */
    .settings-form, .admin-form {
        padding: 15px;
    }

    .settings-form button, .admin-form button {
        padding: 10px;
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    /* Regole per smartphone */
    .settings-container, .admin-container {
        padding: 10px;
    }

    .settings-menu, .admin-menu {
        padding: 5px;
    }

    .settings-form input, .settings-form button,
    .admin-form input, .admin-form button {
        padding: 8px;
        font-size: 0.8em;
    }

    .icon-title i {
        font-size: 1.4em;
    }

    .logo-container img {
        height: 30px;
    }
}
/* Stile per la versione del footer */
.footer-version {
    position: fixed; /* Cambia da absolute a fixed per ancorare il footer alla finestra */
    background-color: #007bff;
    color: white;
    padding: 10px;
    text-align: center;
    bottom: 0;
    width: 100%;
}

.footer-version.left {
    left: 0;
    right: auto;
    text-align: left;
    padding-left: 20px;
}

.footer-version.right {
    left: auto;
    right: 0;
    text-align: right;
    padding-right: 20px;
}

.footer-version.center {
    left: 50%;
    transform: translateX(-50%);
}
/* Stile per la versione del footer senza sfondo e riquadro */
.footer-version {
    position: fixed;
    width: 100%;
    bottom: 0;
    padding: 10px;
    color: #000; /* Nero */
    font-weight: bold;
    text-align: center; /* Default: centrato */
    background: none; /* Nessuno sfondo */
    border: none; /* Nessun bordo */
}

.footer-version.left {
    text-align: left;
    padding-left: 20px;
    left: 0;
    right: auto;
}

.footer-version.right {
    text-align: right;
    padding-right: 20px;
    left: auto;
    right: 0;
}

.footer-version.center {
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
}
.announcement {
    padding: 20px;
    margin: 10px 0;
    border-radius: 5px;
    font-size: 1.2em;
}

.announcement-urgent {
    background-color: #ffdddd;
    border: 1px solid #ff0000;
    color: #ff0000;
}

.announcement-important {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
}

.announcement-normal {
    background-color: #d4edda;
    border: 1px solid #28a745;
    color: #155724;
}
/* Stile per il messaggio di annuncio */
.announcement {
    position: fixed;
    top: 20px; /* Distanza dal bordo superiore della finestra */
    right: 20px; /* Distanza dal bordo destro della finestra */
    max-width: 300px; /* Limita la larghezza dell'annuncio */
    padding: 15px 20px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-weight: bold;
    display: flex;
    flex-direction: column; /* Permette al testo di andare a capo */
    gap: 10px;
    z-index: 1000; /* Assicurati che l'annuncio sia sopra gli altri contenuti */
    overflow: hidden; /* Nasconde il testo che esce dai bordi */
}

/* Stato dell'annuncio - Urgente (rosso) */
.announcement-urgent {
    background-color: #e74c3c; /* Rosso */
    color: white;
}

/* Stato dell'annuncio - Importante (arancione) */
.announcement-important {
    background-color: #f39c12; /* Arancione */
    color: white;
}

/* Stato dell'annuncio - Normale (verde) */
.announcement-normal {
    background-color: #2ecc71; /* Verde */
    color: white;
}
/* Contenitore per gli annunci */
.announcement-container {
    position: fixed;
    top: 20px; /* Distanza dal bordo superiore della finestra */
    right: 20px; /* Distanza dal bordo destro della finestra */
    max-width: 300px; /* Limita la larghezza dell'annuncio */
    z-index: 1000; /* Assicurati che l'annuncio sia sopra gli altri contenuti */
    display: flex;
    flex-direction: column; /* Dispone gli annunci in colonna */
    gap: 10px; /* Spazio tra gli annunci */
}

/* Stile per il messaggio di annuncio */
.announcement {
    padding: 15px 20px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
    color: white; /* Testo bianco */
    background-color: inherit; /* Colore di sfondo basato sul tipo di annuncio */
}

/* Stato dell'annuncio - Urgente (rosso) */
.announcement-urgent {
    background-color: #e74c3c; /* Rosso */
}

/* Stato dell'annuncio - Importante (arancione) */
.announcement-important {
    background-color: #f39c12; /* Arancione */
}

/* Stato dell'annuncio - Normale (verde) */
.announcement-normal {
    background-color: #2ecc71; /* Verde */
}
.announcement-container {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Spazio tra i box */
}

.announcement {
    padding: 15px;
    border-radius: 8px;
    width: calc(50% - 20px); /* Due box per riga con spazio */
    box-sizing: border-box;
    color: white;
    position: relative;
    transition: transform 0.3s;
    overflow: hidden; /* Per evitare che il contenuto fuoriesca */
}

.announcement:hover {
    transform: scale(1.02);
}

.announcement.urgent {
    background-color: #d9534f;
}

.announcement.important {
    background-color: #f0ad4e;
}

.announcement.normal {
    background-color: #5bc0de;
}

.announcement .edit-btn,
.announcement .delete-btn {
    display: none;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 1.2em;
    position: absolute;
    transition: opacity 0.3s;
}

.announcement .edit-btn {
    right: 50px;
    top: 10px;
}

.announcement .delete-btn {
    right: 10px;
    top: 10px;
    color: #d9534f;
}

.announcement:hover .edit-btn,
.announcement:hover .delete-btn {
    display: block;
}

.announcement .edit-btn:hover,
.announcement .delete-btn:hover {
    opacity: 0.8;
}
.announcement-buttons {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}

.announcement button {
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
}

.edit-btn {
    background-color: #28a745; /* Verde per Modifica */
    color: white;
    display: inline-flex;
    align-items: center;
}

.delete-btn {
    background-color: #dc3545; /* Rosso per Eliminazione */
    color: white;
    display: inline-flex;
    align-items: center;
}

.edit-btn i, .delete-btn i {
    margin-right: 5px;
}

.edit-btn:hover {
    background-color: #218838;
}

.delete-btn:hover {
    background-color: #c82333;
}
/* Posizione e dimensioni del logo */
.logo-container {
    position: absolute; /* Posizionamento assoluto */
    top: 20px; /* Spazio dalla parte superiore della pagina */
    left: 20px; /* Spazio dal lato sinistro della pagina */
}

.logo-container img {
    max-width: 150px; /* Larghezza massima del logo */
    height: auto; /* Mantieni le proporzioni corrette */
}
.announcement-container {
    margin-top: 20px;
}

.announcement {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    color: white;
    position: relative;
    background-color: #5bc0de;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.announcement.urgent {
    background-color: #d9534f;
}

.announcement.important {
    background-color: #f0ad4e;
}

.announcement.normal {
    background-color: #5bc0de;
}

.announcement .announcement-text {
    flex: 1;
}

.announcement-buttons {
    display: flex;
    align-items: center;
}

.announcement-buttons button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2em;
    margin-left: 10px;
}

.announcement-buttons .edit-btn {
    color: #28a745; /* Verde per la modifica */
}

.announcement-buttons .delete-btn {
    color: #d9534f; /* Rosso per l'eliminazione */
}

.announcement-buttons .edit-btn:hover,
.announcement-buttons .delete-btn:hover {
    opacity: 0.8;
}

.settings-form button.modifying {
    background-color: #28a745;
    border: none;
    color: white;
    cursor: pointer;
}
.announcement-container {
    margin-top: 20px;
}

.announcement {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    color: white;
    position: relative;
    background-color: #5bc0de;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.announcement.urgent {
    background-color: #d9534f;
}

.announcement.important {
    background-color: #f0ad4e;
}

.announcement.normal {
    background-color: #5bc0de;
}

.announcement .announcement-text {
    flex: 1;
}

.announcement-buttons {
    display: flex;
    align-items: center;
}

.announcement-buttons button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2em;
    margin-left: 10px;
    color: inherit; /* Inherited color from .announcement */
}

.announcement-buttons .edit-btn {
    color: #28a745; /* Verde per la modifica */
}

.announcement-buttons .delete-btn {
    color: #d9534f; /* Rosso per l'eliminazione */
}

.announcement-buttons .edit-btn:hover,
.announcement-buttons .delete-btn:hover {
    opacity: 0.8;
}

.announcement-buttons .edit-icon {
    margin-right: 0;
}

.announcement-buttons .delete-icon {
    margin-right: 0;
}
.announcement-container {
    margin-top: 20px;
}

.announcement {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    color: #fff;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.announcement:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.announcement.urgent {
    background-color: #d9534f; /* Rosso per urgente */
}

.announcement.important {
    background-color: #f0ad4e; /* Arancione per importante */
}

.announcement.normal {
    background-color: #5bc0de; /* Blu per normale */
}

.announcement .announcement-text {
    flex: 1;
    font-size: 1em;
}

.announcement-buttons {
    display: flex;
    align-items: center;
}

.announcement-buttons button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2em;
    margin-left: 10px;
    transition: color 0.3s;
}

.announcement-buttons .edit-btn {
    color: #28a745; /* Verde per la modifica */
}

.announcement-buttons .delete-btn {
    color: #d9534f; /* Rosso per l'eliminazione */
}

.announcement-buttons .edit-btn:hover,
.announcement-buttons .delete-btn:hover {
    color: #0056b3; /* Blu scuro al passaggio del mouse */
}

.settings-form button.modifying {
    background-color: #28a745;
    border: none;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

.settings-form button.modifying:hover {
    background-color: #218838;
    transform: scale(1.02);
}
<style>
    body {
        background-color: #0d0d0d; /* Sfondo quasi nero per un forte contrasto */
        overflow: hidden; /* Nasconde lo scroll */
        margin: 0;
        padding: 0;
    }

    .snowflake {
        position: fixed;
        top: 0;
        z-index: 9999;
        color: #0b3d91; /* Blu molto scuro per i fiocchi */
        user-select: none;
        pointer-events: none;
        animation: fall linear infinite, fade linear infinite;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.9); /* Ombra più scura */
        font-size: 1em; /* Dimensione fiocchi */
    }

    @keyframes fall {
        0% {
            transform: translateY(-100px);
        }
        100% {
            transform: translateY(100vh);
        }
    }

    @keyframes fade {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0.6; /* Ridotta trasparenza per rendere i fiocchi più visibili */
        }
    }

    /* Genera fino a 1000 fiocchi di neve casuali */
    .snowflake {
        left: calc(random(100) * 1vw); /* Posizione random orizzontale */
        animation-duration: calc(3s + random(5s)); /* Durata random dell'animazione */
        animation-delay: random(5s); /* Ritardo casuale */
        opacity: calc(0.5 + random(0.5)); /* Opacità casuale tra 0.5 e 1 */
    }
</style>

<script>
    // Funzione per creare fiocchi di neve
    function createSnowflakes() {
        const snowflakeSymbol = "❅"; // Simbolo del fiocco di neve
        const snowflakesContainer = document.body;
        const numberOfSnowflakes = 1000; // Fino a 1000 fiocchi

        for (let i = 0; i < numberOfSnowflakes; i++) {
            const snowflake = document.createElement("div");
            snowflake.classList.add("snowflake");
            snowflake.innerText = snowflakeSymbol;
            snowflake.style.left = Math.random() * 100 + "vw"; // Posizione casuale orizzontale
            snowflake.style.animationDuration = Math.random() * 5 + 5 + "s"; // Durata animazione
            snowflake.style.animationDelay = Math.random() * 5 + "s"; // Ritardo animazione
            snowflake.style.fontSize = Math.random() * 1.5 + 0.5 + "em"; // Grandezza casuale
            snowflakesContainer.appendChild(snowflake);
        }
    }

    // Esegui la funzione quando la pagina viene caricata
    window.onload = createSnowflakes;
</script>