:root {
  --scuro: #0B2B1C; --teal: #3CCDB4; --medio: #1E5C3C; --chiaro: #F2F8F6; --linea: #D7E5E0;
  --grigio: #5F6F68; --rosso: #B23A3A; --sfondo: #F7FAF9; --bianco: #fff;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--scuro); background: var(--sfondo); }
header { background: var(--scuro); color: #fff; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 16px; border-bottom: 4px solid var(--teal); }
.marchio { font-weight: 600; }
.marchio span { letter-spacing: .25em; font-weight: 800; margin-right: 6px; }
nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
nav a, nav .link { color: #dfeee9; text-decoration: none; }
nav a.primario { background: var(--teal); color: var(--scuro); padding: 4px 10px; border-radius: 6px; font-weight: 600; }
nav form { margin: 0; }
main { max-width: 1100px; margin: 0 auto; padding: 20px 16px 60px; }
h1 { font-size: 1.6rem; margin: .2em 0 .6em; }
h2 { font-size: 1.15rem; margin: 0 0 .6em; }
a { color: var(--medio); }
.scheda { background: var(--bianco); border: 1px solid var(--linea); border-radius: 12px; padding: 18px; margin: 0 0 18px; }
.stretta { max-width: 460px; margin-left: auto; margin-right: auto; }
.centro { text-align: center; }
label { display: block; font-weight: 600; font-size: .9rem; margin: 0 0 12px; }
input, select, textarea { display: block; width: 100%; margin-top: 4px; font: inherit; padding: 8px 10px; border: 1px solid #b9cbc4; border-radius: 8px; background: #fff; color: inherit; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--teal); outline-offset: 0; border-color: var(--teal); }
fieldset { border: 0; padding: 0; margin: 0 0 16px; }
legend { font-weight: 700; font-size: 1rem; margin-bottom: 8px; }
button, .bottone { display: inline-block; font: inherit; font-weight: 600; background: var(--scuro); color: #fff; border: 0; border-radius: 8px; padding: 10px 18px; cursor: pointer; text-decoration: none; }
button:hover, .bottone:hover { background: var(--medio); }
button[disabled] { opacity: .6; cursor: wait; }
.bottone.secondario { background: var(--chiaro); color: var(--scuro); border: 1px solid var(--linea); }
button.link { background: none; color: inherit; padding: 0; text-decoration: underline; font-weight: 400; }
button.pericolo { background: var(--rosso); }
.aiuto { color: var(--grigio); font-size: .85rem; font-weight: 400; }
.errore, .errore-box { background: #fbeeee; border: 1px solid #e6c4c4; color: #7a2323; border-radius: 10px; padding: 10px 14px; margin: 0 0 16px; }
.ok { background: #e6f6f1; border: 1px solid #bfe5d9; border-radius: 10px; padding: 10px 14px; }
.avviso { background: #fff7e6; border: 1px solid #f0dcae; border-radius: 10px; padding: 8px 14px; margin: 0 0 16px; font-size: .9rem; }
.avviso ul, .errore ul { margin: 4px 0; padding-left: 18px; }
.griglia3, .griglia4 { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.griglia4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: end; }
.unita { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.unita input { margin-top: 4px; }
.titolo-riga { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.filtri { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; margin: 0 0 16px; }
.filtri label { margin: 0; }
.tabella-scorre { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
.elenco th, .elenco td { padding: 8px 10px; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
.elenco thead th { background: var(--scuro); color: #fff; font-size: .85rem; }
.elenco tr.esclusa td { color: var(--grigio); text-decoration: line-through; }
.num { text-align: right !important; white-space: nowrap; }
.neg { color: var(--rosso); }
.pos { color: var(--medio); }
.azioni a { margin-right: 8px; }
.stato { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: .8rem; font-weight: 600; background: var(--chiaro); border: 1px solid var(--linea); }
.stato.pronta { background: #dff5ee; border-color: #a9e2d2; }
.stato.errore { background: #fbeeee; border-color: #e6c4c4; }
.stato.in_elaborazione { background: #fff7e6; border-color: #f0dcae; }
.modulo { min-width: 760px; margin: 8px 0 16px; }
.modulo th, .modulo td { padding: 4px 6px; text-align: left; font-size: .85rem; }
.modulo thead th { vertical-align: bottom; }
.modulo tbody th { white-space: nowrap; }
.modulo input { margin: 0; }
.modulo input.dojo { border-color: var(--medio); font-weight: 600; }
.modulo input[readonly] { background: var(--chiaro); color: var(--grigio); }
.spunta { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.spunta input { width: auto; margin: 0; }
.debito-unico { background: var(--chiaro); border-radius: 10px; padding: 12px 14px; }
.debito-unico:not(.attivo) .solo-debito { display: none; }
.totale-anteprima { font-weight: 600; min-height: 1.4em; }
.file .riassunto { font-size: 1.05rem; }
.file p .bottone { margin: 0 8px 8px 0; }
details summary { cursor: pointer; font-weight: 600; }
details table { margin-top: 10px; }
.zona-pericolo { background: none; border-style: dashed; }
.zona-pericolo form { margin: 0; }
.in-linea { display: inline-flex; gap: 6px; align-items: center; margin: 0 8px 4px 0; }
.in-linea input { width: 150px; margin: 0; padding: 4px 8px; }
.vuoto { color: var(--grigio); }
.rotella { width: 44px; height: 44px; margin: 18px auto; border-radius: 50%; border: 4px solid var(--linea); border-top-color: var(--teal); animation: gira 1s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rotella { animation-duration: 4s; } }
@media (max-width: 600px) { h1 { font-size: 1.35rem; } .scheda { padding: 14px; } }