:root {
  --sfondo: #f5f6f8; --carta: #ffffff; --testo: #1c2024; --tenue: #5b6470;
  --bordo: #dfe3e8; --bene: #1a7f45; --guasto: #b3261e; --accento: #16476b;
}
@media (prefers-color-scheme: dark) {
  :root { --sfondo:#14171a; --carta:#1c2126; --testo:#e8eaed; --tenue:#9aa4b0;
          --bordo:#2b3238; --bene:#4ac47f; --guasto:#ff6b5e; --accento:#7cb6e0; }
}
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
       background: var(--sfondo); color: var(--testo); line-height: 1.55; }
header { display:flex; align-items:center; justify-content:space-between; gap:1rem;
         padding: .9rem 1.2rem; background: var(--carta); border-bottom:1px solid var(--bordo); }
.marchio { font-weight:700; letter-spacing:-.01em; }
.marchio span { color: var(--tenue); font-weight:500; }
nav { display:flex; align-items:center; gap:1rem; font-size:.95rem; }
nav a { color: var(--accento); text-decoration:none; }
nav a:hover { text-decoration:underline; }
.chi { color: var(--tenue); }
main { max-width: 900px; margin: 0 auto; padding: 1.2rem; }
h1 { font-size:1.5rem; margin:.4rem 0 1rem; }
h2 { font-size:1rem; margin:0 0 .5rem; color: var(--tenue); font-weight:600;
     text-transform:uppercase; letter-spacing:.04em; }
.griglia { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:1rem; }
.scheda { background: var(--carta); border:1px solid var(--bordo); border-radius:12px;
          padding:1.1rem 1.2rem; margin-bottom:1rem; }
.scheda.stretta { max-width: 460px; margin: 2rem auto; }
.scheda.bene { border-left:4px solid var(--bene); }
.scheda.guasto { border-left:4px solid var(--guasto); }
.grande { font-size:1.6rem; font-weight:700; margin:.2rem 0; }
.scheda.bene .grande { color: var(--bene); }
.scheda.guasto .grande { color: var(--guasto); }
table { width:100%; border-collapse: collapse; }
td { padding:.55rem 0; border-bottom:1px solid var(--bordo); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
td.nome { font-weight:600; width:35%; }
td.numeri { color: var(--tenue); text-align:right; font-variant-numeric: tabular-nums; }
.pallino { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:.45rem; }
.pallino.acceso { background: var(--bene); }
.pallino.spento { background: var(--bordo); border:1px solid var(--tenue); }
.nota { color: var(--tenue); font-size:.9rem; margin-top:.8rem; }
.aggiornato { color: var(--tenue); font-size:.85rem; text-align:center; }
.aggiornato a, .scheda a { color: var(--accento); }
form { display:flex; flex-direction:column; gap:.5rem; margin-top:1rem; }
label { font-size:.9rem; color: var(--tenue); }
input[type=email] { padding:.7rem .8rem; font-size:1rem; border:1px solid var(--bordo);
                    border-radius:8px; background: var(--sfondo); color: var(--testo); }
button { padding:.75rem 1rem; font-size:1rem; font-weight:600; border:none; border-radius:8px;
         background: var(--accento); color:#fff; cursor:pointer; }
button:hover { filter: brightness(1.1); }
footer { text-align:center; color: var(--tenue); font-size:.85rem; padding:2rem 1rem; }

input[type=checkbox] { width:18px; height:18px; margin-right:.5rem; vertical-align:-3px; accent-color: var(--accento); }
input[type=number] { padding:.6rem .7rem; font-size:1rem; width:8rem; border:1px solid var(--bordo);
                     border-radius:8px; background: var(--sfondo); color: var(--testo); }
td label { cursor:pointer; }
form.scheda button { align-self:flex-start; margin-top:1rem; }
.etichetta { display:inline-block; margin-left:.5rem; padding:.1rem .5rem; font-size:.75rem;
             font-weight:600; border-radius:99px; background: var(--bene); color:#fff; }
.azioni { text-align:right; white-space:nowrap; }
.azioni a { margin-right:.6rem; }
form.in-linea { display:inline; margin:0; }
form.in-linea button { padding:.35rem .7rem; font-size:.85rem; margin-left:.3rem; }
button.tenue { background: transparent; color: var(--tenue); border:1px solid var(--bordo); }
button.tenue:hover { color: var(--guasto); border-color: var(--guasto); filter:none; }
input[type=text], input[type=file] { padding:.6rem .7rem; font-size:1rem; border:1px solid var(--bordo);
                                     border-radius:8px; background: var(--sfondo); color: var(--testo); }
#registratore { margin:.6rem 0; display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
#btn-registra { background: var(--carta); color: var(--accento); border:1px solid var(--accento); }

form.in-riga { flex-direction: row; align-items: center; gap:.6rem; flex-wrap: wrap; }
form.in-riga input[type=text] { flex:1 1 16rem; }
form.in-riga button { margin:0; }

table.orari th { text-align:left; font-size:.8rem; color: var(--tenue); font-weight:600;
                 text-transform:uppercase; letter-spacing:.03em; padding-bottom:.4rem; }
table.orari td { padding:.4rem .5rem .4rem 0; }
input[type=time] { padding:.4rem .5rem; font-size:.95rem; border:1px solid var(--bordo);
                   border-radius:6px; background: var(--sfondo); color: var(--testo); }