:root { --testo: #1f2933; --tenue: #616e7c; --bordo: #d9dee4; --sfondo: #f5f7fa; --accento: #334e68;
  --errore: #b42318; --errore-sfondo: #fdecea; --ok: #1b6e3a; --ok-sfondo: #e7f5ec; --attenzione: #8a5a00; --attenzione-sfondo: #fff4d6; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--testo); background: var(--sfondo); font-size: 15px; }
.testata { background: var(--accento); color: #fff; padding: .7rem 1.5rem; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.testata nav { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.testata a, .testata button { color: #fff; text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; padding: 0; }
.testata form { margin: 0; }
main { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 0 0 .8rem; }
.riquadro { background: #fff; border: 1px solid var(--bordo); border-radius: 8px; padding: 1.2rem; margin-bottom: 1.2rem; }
.stretto { max-width: 420px; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--bordo); vertical-align: top; }
th { font-size: .8rem; text-transform: uppercase; color: var(--tenue); }
label { display: flex; flex-direction: column; gap: .25rem; font-weight: 600; font-size: .9rem; margin-bottom: .8rem; }
label.spunta { flex-direction: row; align-items: center; font-weight: 400; gap: .5rem; }
input, select, textarea { font: inherit; padding: .5rem .6rem; border: 1px solid var(--bordo); border-radius: 6px; font-weight: 400; }
button, .bottone { font: inherit; font-weight: 600; padding: .5rem .9rem; border-radius: 6px; border: 1px solid var(--bordo); background: #fff; color: var(--testo); cursor: pointer; text-decoration: none; display: inline-block; }
.primario { background: var(--accento); color: #fff; border-color: transparent; }
.pericolo { background: var(--errore); color: #fff; border-color: transparent; }
.in-linea { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.in-linea label { margin-bottom: 0; }
.in-linea form { margin: 0; }
.messaggio { padding: .7rem .9rem; border-radius: 6px; margin-bottom: 1rem; }
.errore { color: var(--errore); background: var(--errore-sfondo); }
.ok { color: var(--ok); background: var(--ok-sfondo); }
.attenzione { color: var(--attenzione); background: var(--attenzione-sfondo); }
.tenue { color: var(--tenue); }
.etichetta { font-size: .75rem; padding: .1rem .45rem; border-radius: 999px; background: var(--sfondo); border: 1px solid var(--bordo); margin-left: .4rem; white-space: nowrap; }
.etichetta.sospeso { background: var(--attenzione-sfondo); border-color: #f0d48a; }
.etichetta.cancellazione { background: var(--errore-sfondo); border-color: #f3b8b2; }
.segreto { font-family: ui-monospace, monospace; font-size: 1.2rem; letter-spacing: .05em; background: var(--sfondo); padding: .4rem .6rem; border-radius: 6px; display: inline-block; }
.colonne { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.2rem; }
.colonne .riquadro { margin-bottom: 0; }
.riquadro-largo { grid-column: 1 / -1; }
.temi { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
label.tema { font-weight: 400; gap: .35rem; padding: .6rem; border: 2px solid var(--bordo); border-radius: 8px; cursor: pointer; }
label.tema:has(input:checked) { border-color: #1f3a5f; background: #f2f5fa; }
label.tema input { align-self: flex-start; }
.miniatura { width: 100%; height: auto; border-radius: 6px; display: block; }
input[type=color] { width: 4.5rem; height: 2.4rem; padding: .15rem; }
ul.semplice { padding-left: 1.1rem; margin: 0 0 .8rem; }
.barra { justify-content: space-between; margin-bottom: 1rem; }
.barra h1 { margin: 0; }
.azioni-dominio { display: inline-flex; margin-left: .4rem; }
.sopra { margin-top: 1.2rem; }
ul.semplice li { margin-bottom: .3rem; }