/* Stili del sito, in aggiunta a base.css (token di colore, modulo di iscrizione, riconoscimento guidato). */
.topbar { background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar-in { max-width: 76rem; margin: 0 auto; padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between; }
.brand { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--ink); text-decoration: none; }
.topnav { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: .92rem; }
.topnav a { color: var(--accent); text-decoration: none; font-weight: 600; }
.topnav a:hover { text-decoration: underline; }
.inline { display: inline; margin: 0; }
.linkbtn { font: inherit; font-size: .92rem; font-weight: 600; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; }
.linkbtn:hover { text-decoration: underline; }
.piede { max-width: 76rem; margin: 0 auto; padding: 16px; color: var(--muted); font-size: .82rem; }
.piede a { color: var(--accent); }

.flash { margin: 0; padding: 10px 14px; border-radius: var(--r); font-size: .93rem; }
.flash.ok { background: color-mix(in srgb, var(--ok) 14%, var(--surface)); color: var(--ink); }
.flash.errore { background: color-mix(in srgb, var(--red) 14%, var(--surface)); color: var(--ink); }

.narrow { max-width: 30rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 14px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; display: grid; gap: 8px; align-content: start; }
.card h2 { font-size: 1.2rem; }
.pill { display: inline-block; font-size: .75rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.pill.aperta { background: color-mix(in srgb, var(--ok) 16%, var(--surface)); color: var(--ok); }
.pill.chiusa { background: color-mix(in srgb, var(--red) 14%, var(--surface)); color: var(--red); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
a.btn { text-decoration: none; display: inline-block; }
.form-grid { display: grid; gap: 12px; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.codice { font-family: var(--font-mono); font-size: 1.2rem; font-weight: 600; letter-spacing: .05em; }
.box-codice { padding: 12px 14px; border: 2px dashed var(--h3); border-radius: var(--r); background: var(--surface); }
input.punt { width: 5.5rem; font-family: var(--font-mono); }
.tablebox td .btn.small { white-space: nowrap; }
details.utente { border-top: 1px solid var(--line); padding: 8px 0; }
details.utente summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.muted { color: var(--muted); }
input[type="password"], input[type="email"], input[type="datetime-local"] { font: inherit; font-size: .95rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 7px 10px; width: 100%; min-width: 0; box-sizing: border-box; }