:root {
    --fondo: #f6f1e4;
    --superficie: #fffdf7;
    --testo: #1d2a22;
    --tenue: #5d6b61;
    --bordo: #dcd5c2;
    --verde: #2f7d55;
    --verde-testo: #ffffff;
    --errore: #b3261e;
    color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
    :root {
        --fondo: #121814;
        --superficie: #1b241e;
        --testo: #e8efe9;
        --tenue: #9fb0a4;
        --bordo: #2e3b32;
        --verde: #5cc48a;
        --verde-testo: #0d1a12;
        --errore: #ffb4ab;
    }
}
html, body { margin: 0; min-height: 100%; }
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--fondo);
    color: var(--testo);
    display: flex; align-items: center; justify-content: center;
    min-height: 100dvh;
    padding: 24px; box-sizing: border-box;
}
.accesso { width: 100%; max-width: 340px; text-align: center; }
.logo { border-radius: 20px; box-shadow: 0 8px 24px rgb(47 125 85 / 0.25); }
h1 { font-size: 26px; margin: 18px 0 4px; letter-spacing: -0.01em; }
.sotto { margin: 0 0 28px; color: var(--tenue); }
form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
label span { display: block; font-size: 13px; color: var(--tenue); margin: 0 0 6px 4px; }
input {
    width: 100%; box-sizing: border-box; font: inherit; font-size: 16px;
    padding: 13px 16px; border-radius: 14px;
    border: 1px solid var(--bordo); background: var(--superficie); color: var(--testo);
    outline: none;
}
input:focus { border-color: var(--verde); box-shadow: 0 0 0 3px rgb(47 125 85 / 0.2); }
button {
    margin-top: 8px; min-height: 50px; font: inherit; font-size: 17px; font-weight: 600;
    border: none; border-radius: 14px; cursor: pointer;
    background: var(--verde); color: var(--verde-testo);
}
button:disabled { opacity: 0.6; cursor: default; }
.errore { margin: 0; color: var(--errore); font-size: 14px; text-align: center; }
[hidden] { display: none !important; }