:root { color-scheme: light dark; --fondo: #fbfaf7; --testo: #1b1a17; --tenue: #6b675d; --linea: #d9d4c7; --accento: #2f5d50; --errore: #a02a1c; }
@media (prefers-color-scheme: dark) { :root { --fondo: #15140f; --testo: #ece8dc; --tenue: #9a9585; --linea: #34312a; --accento: #7fb8a4; --errore: #ff8f7e; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--testo); font: 16px/1.5 system-ui, sans-serif; }
main { max-width: 40rem; margin: 0 auto; padding: 2rem 1rem 4rem; }
h1 { font-size: 1.5rem; margin: 0 0 .5rem; }
h2 { font-size: 1.05rem; margin: 1.5rem 0 .5rem; border-bottom: 1px solid var(--linea); padding-bottom: .25rem; }
p, label { color: var(--tenue); }
.piccolo { font-size: .875rem; }
textarea { width: 100%; min-height: 5.5rem; padding: .6rem; font: inherit; color: var(--testo); background: transparent; border: 1px solid var(--linea); border-radius: 6px; }
button { margin-top: .75rem; padding: .6rem 1.1rem; font: inherit; color: var(--fondo); background: var(--accento); border: 0; border-radius: 6px; cursor: pointer; }
button:disabled { opacity: .5; cursor: wait; }
#stato { min-height: 1.5rem; margin-top: .75rem; color: var(--tenue); }
#stato.errore { color: var(--errore); }
.riga { display: flex; gap: .75rem; padding: .25rem 0; }
.etichetta { min-width: 9rem; color: var(--tenue); }
.documento { padding: .5rem 0; border-bottom: 1px solid var(--linea); display: grid; gap: .25rem; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: .25rem 0; font: .875rem/1.4 ui-monospace, monospace; }
a { color: var(--accento); }