/* Stile sobrio, chiaro o scuro secondo il sistema, una colonna sotto i 700 px. Nessuna risorsa esterna. */
:root { color-scheme: light dark; --sfondo: #fafaf7; --testo: #1d1d1b; --tenue: #6b6b66; --riga: #e3e3dd; --accento: #0a5c8a; --ok: #1f7a3a; --male: #b3261e; --mono: ui-monospace, Menlo, Consolas, monospace; }
@media (prefers-color-scheme: dark) { :root { --sfondo: #141513; --testo: #ecebe6; --tenue: #9a9a94; --riga: #2c2d2a; --accento: #7fc0ea; --ok: #7bd39a; --male: #ff8a80; } }
* { box-sizing: border-box; }
body { margin: 0; padding: 0 16px 48px; background: var(--sfondo); color: var(--testo); font: 16px/1.5 system-ui, sans-serif; max-width: 1100px; margin-inline: auto; }
header h1 { margin: 24px 0 4px; font-size: 1.6rem; } .rete { font-size: .8rem; color: var(--tenue); border: 1px solid var(--riga); border-radius: 6px; padding: 1px 6px; vertical-align: middle; }
.sotto { color: var(--tenue); margin: 0 0 8px; }
.stato { padding: 8px 12px; border-radius: 8px; background: var(--riga); overflow-wrap: anywhere; } .stato.ok { color: var(--ok); } .stato.male { color: var(--male); border: 1px solid var(--male); }
section { margin: 28px 0; } h2 { font-size: 1.15rem; margin: 0 0 8px; }
.dati { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; } .dati dt { color: var(--tenue); } .dati dd { margin: 0; font-family: var(--mono); overflow-wrap: anywhere; }
.due { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 700px) { .due { grid-template-columns: 1fr; } }
table { border-collapse: collapse; width: 100%; font-family: var(--mono); font-size: .9rem; } caption { text-align: left; color: var(--tenue); padding-bottom: 4px; }
th, td { text-align: right; padding: 3px 6px; border-bottom: 1px solid var(--riga); } th { color: var(--tenue); font-weight: normal; } tr.mio { color: var(--accento); }
.nota { color: var(--tenue); font-size: .9rem; }
form, fieldset { border: 1px solid var(--riga); border-radius: 8px; padding: 10px 12px; margin: 0 0 12px; min-width: 0; } legend { color: var(--tenue); padding: 0 4px; }
label { display: inline-block; margin: 4px 12px 4px 0; max-width: 100%; } input, select { font: inherit; padding: 4px 6px; border: 1px solid var(--riga); border-radius: 6px; background: transparent; color: inherit; min-width: 12ch; max-width: 100%; }
#indirizzo { width: min(70ch, 100%); font-family: var(--mono); }
button { font: inherit; padding: 4px 12px; border-radius: 6px; border: 1px solid var(--accento); background: transparent; color: var(--accento); cursor: pointer; }
pre { white-space: pre-wrap; word-break: break-all; font-family: var(--mono); font-size: .85rem; background: var(--riga); padding: 8px; border-radius: 6px; }
.errore { color: var(--male); } .spiega { margin: 8px 0 4px; } .immagini { color: var(--tenue); font-size: .9rem; margin: 0 0 4px; }