:root {
  --sfondo: #f5f6f8; --carta: #ffffff; --testo: #1d2330; --tenue: #5b6475;
  --bordo: #dde1e8; --accento: #2f5496; --errore: #b3261e; --avviso: #8a5a00;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --sfondo: #14171c; --carta: #1d2128; --testo: #e7e9ee; --tenue: #a3aab7;
          --bordo: #333945; --accento: #8fb0ea; --errore: #f2b8b5; --avviso: #f0c46c; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
       background: var(--sfondo); color: var(--testo); }
a { color: var(--accento); }
.testata { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--carta);
           border-bottom: 1px solid var(--bordo); flex-wrap: wrap; }
.marchio { font-weight: 600; text-decoration: none; color: var(--testo); }
.ambiente { font-size: 12px; padding: 2px 8px; border-radius: 10px; background: var(--avviso); color: var(--carta); }
nav { margin-left: auto; display: flex; align-items: center; gap: 12px; }
nav form { margin: 0; }
.utente { color: var(--tenue); }
main { max-width: 960px; margin: 24px auto; padding: 0 16px; }
.scheda { background: var(--carta); border: 1px solid var(--bordo); border-radius: 8px; padding: 20px 24px; }
.scheda.stretta { max-width: 380px; margin: 40px auto; }
h1 { font-size: 22px; margin: 0 0 12px; }
h2 { font-size: 17px; margin: 20px 0 8px; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; }
dt { color: var(--tenue); }
dd { margin: 0; }
label { display: block; margin: 0 0 12px; color: var(--tenue); }
input[type=text], input[type=password] { display: block; width: 100%; margin-top: 4px; padding: 8px 10px;
  font: inherit; color: var(--testo); background: var(--sfondo); border: 1px solid var(--bordo); border-radius: 6px; }
button { font: inherit; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--bordo);
         background: var(--carta); color: var(--testo); cursor: pointer; }
button.primario { width: 100%; padding: 9px; background: var(--accento); border-color: var(--accento); color: var(--carta); }
.errore { color: var(--errore); }
.avviso { color: var(--avviso); }