/* Busta. Carta calda, inchiostro blu notte, ceralacca come accento.
   Prima il telefono (16 px di margine, niente scorrimento orizzontale), poi lo schermo grande. */

:root {
  color-scheme: light;
  --carta: #f6f1e6;          /* fondo */
  --foglio: #fffdf8;         /* carte e superficie dei grafici */
  --foglio-2: #f0e9da;
  --bordo: #e2d9c6;
  --bordo-forte: #cfc3aa;
  --inchiostro: #1c2333;
  --inchiostro-2: #4a5163;
  --inchiostro-3: #6f7484;
  --sigillo: #a3402a;
  --sigillo-scuro: #85321f;
  --sigillo-tenue: #f3dfd6;
  --oro: #9c7420;
  --meglio: #1d6e48;  --meglio-tenue: #dcefe4;
  --peggio: #a63a26;  --peggio-tenue: #f6e0d9;
  --att: #8a5a00;     --att-tenue: #f6ead0;
  --info: #2b5a97;    --info-tenue: #e0e9f5;
  /* serie dei grafici (validate: skill dataviz, superficie #fbf8f2) */
  --s0: #4a5163;  --s1: #2a78d6;  --s2: #eb6834;  --s3: #1baf7a;  --s4: #b9b2a3;
  --griglia: #e8e1d2;
  --ombra: 0 1px 2px rgba(60, 44, 20, .06), 0 6px 18px rgba(60, 44, 20, .06);
  --raggio: 14px;
  --titoli: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --testo: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --piede-h: 64px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --carta: #12151c; --foglio: #1a1e27; --foglio-2: #222734; --bordo: #2c3241; --bordo-forte: #3b4255;
    --inchiostro: #ece6da; --inchiostro-2: #c2bcae; --inchiostro-3: #9a9588;
    --sigillo: #e0765a; --sigillo-scuro: #f08c70; --sigillo-tenue: #3a221d; --oro: #d6ac55;
    --meglio: #5cc493; --meglio-tenue: #183327; --peggio: #f08a74; --peggio-tenue: #3b201b;
    --att: #e5b55a; --att-tenue: #362a14; --info: #7fb0ec; --info-tenue: #1b2a40;
    --s0: #c2bcae; --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #5b6070;
    --griglia: #2a303d; --ombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  }
}
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; background: var(--carta); color: var(--inchiostro);
  font: 16px/1.5 var(--testo); min-height: 100vh; overflow-x: hidden;
}
a { color: var(--sigillo); }
h1, h2, h3 { font-family: var(--titoli); font-weight: 600; letter-spacing: -.01em; line-height: 1.2; margin: 0; }
p { margin: .4em 0; }
.num { font-variant-numeric: tabular-nums; }
.tenue { color: var(--inchiostro-3); }
.piccolo { font-size: .86rem; }
.nascosto { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.salta { position: absolute; left: -999px; top: 8px; background: var(--foglio); padding: 8px 12px; border-radius: 8px; z-index: 50; }
.salta:focus { left: 8px; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--sigillo) 55%, transparent); outline-offset: 2px; border-radius: 6px; }

/* ----------------------------------------------------------- guscio ---- */
.testa {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) max(16px, calc((100vw - 760px) / 2 + 16px)) 10px; background: color-mix(in srgb, var(--carta) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--bordo);
}
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--inchiostro); font: 600 1.35rem var(--titoli); margin-right: auto; }
.marchio { width: 34px; height: 34px; flex: none; }
.marchio.grande { width: 72px; height: 72px; }
.m-carta { fill: var(--foglio); stroke: var(--inchiostro); stroke-width: 2; }
.m-piega { fill: none; stroke: var(--inchiostro); stroke-width: 2; stroke-linejoin: round; }
.m-sigillo { fill: var(--sigillo); }
.m-b { fill: none; stroke: var(--foglio); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.stato-sync { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--bordo); background: var(--foglio); color: var(--inchiostro-2); border-radius: 99px; padding: 4px 10px; font: 500 .78rem var(--testo); cursor: pointer; }
.stato-sync i { width: 8px; height: 8px; border-radius: 50%; background: var(--inchiostro-3); }
.stato-sync.ok i { background: var(--meglio); }
.stato-sync.corso i { background: var(--info); animation: pulsa 1s infinite alternate; }
.stato-sync.offline i, .stato-sync.errore i { background: var(--att); }
.stato-sync.esempio i { background: var(--oro); }
@keyframes pulsa { to { opacity: .3; } }

.app { max-width: 760px; margin: 0 auto; padding: 18px 16px calc(var(--piede-h) + 32px + env(safe-area-inset-bottom)); outline: none; }
.app > * + * { margin-top: 18px; }
.piede {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: center;
  background: color-mix(in srgb, var(--foglio) 94%, transparent); backdrop-filter: blur(10px);
  border-top: 1px solid var(--bordo); padding-bottom: env(safe-area-inset-bottom);
}
.piede a { flex: 1; max-width: 160px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px 8px; color: var(--inchiostro-3); text-decoration: none; font-size: .74rem; font-weight: 500; }
.piede a .ico { width: 23px; height: 23px; }
.piede a.attivo { color: var(--sigillo); }

.ico { width: 20px; height: 20px; flex: none; }
.ico.grande { width: 44px; height: 44px; color: var(--sigillo); }

/* ---------------------------------------------------------- bottoni ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  padding: 10px 18px; border-radius: 12px; border: 1px solid transparent; font: 600 .98rem var(--testo);
  text-decoration: none; cursor: pointer; color: var(--inchiostro); background: none; touch-action: manipulation;
}
.btn.grande { width: 100%; min-height: 52px; font-size: 1.04rem; }
.btn.piccolo { min-height: 34px; padding: 6px 12px; font-size: .84rem; }
.btn.primario { background: var(--sigillo); color: #fff; box-shadow: 0 2px 0 var(--sigillo-scuro); }
:root:not([data-theme="light"]) .btn.primario { color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.primario { color: #1b0f0b; } }
.btn.primario:hover { filter: brightness(1.05); }
.btn.secondario { background: var(--foglio); border-color: var(--bordo-forte); }
.btn.testo { color: var(--sigillo); padding-inline: 8px; }
.btn.pericolo { color: var(--peggio); }
.btn.primario.pericolo, .dlg .btn.pericolo { background: var(--peggio); color: #fff; }
.btn.icona-sola { min-width: 44px; padding: 8px; border-radius: 50%; color: var(--inchiostro-2); }
.btn:disabled { opacity: .55; cursor: default; }
.azioni { display: flex; gap: 10px; flex-wrap: wrap; }
.azioni.colonna { flex-direction: column; align-items: stretch; }

/* -------------------------------------------------------- benvenuto ---- */
.eroe { text-align: center; padding: 22px 4px 4px; }
.eroe h1 { font-size: clamp(1.9rem, 7vw, 2.6rem); margin-top: 14px; }
.eroe-sotto { font-size: 1.06rem; color: var(--inchiostro-2); max-width: 36em; margin: 10px auto 0; }
.eroe.piccolo h1 { font-size: 1.8rem; }
.punti { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.punti li { display: flex; gap: 14px; background: var(--foglio); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 14px; }
.punti p { margin: 2px 0 0; color: var(--inchiostro-2); font-size: .94rem; }
.punto-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--sigillo-tenue); color: var(--sigillo); }
.nota { font-size: .86rem; color: var(--inchiostro-3); text-align: center; }

/* ----------------------------------------------------------- moduli ---- */
.titolo h1 { font-size: 1.75rem; }
.titolo p { margin-top: 6px; }
.modulo { display: grid; gap: 14px; }
.campo { display: grid; gap: 6px; font-weight: 500; }
.campo > span { font-size: .92rem; color: var(--inchiostro-2); }
.campo small { color: var(--inchiostro-3); font-weight: 400; }
input, select {
  font: 16px var(--testo); color: var(--inchiostro); background: var(--foglio); border: 1px solid var(--bordo-forte);
  border-radius: 10px; padding: 11px 12px; min-height: 46px; width: 100%; min-width: 0;
}
input:focus, select:focus { border-color: var(--sigillo); outline: 2px solid color-mix(in srgb, var(--sigillo) 30%, transparent); outline-offset: 0; }
input.sbagliato { border-color: var(--peggio); background: var(--peggio-tenue); }
input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; accent-color: var(--sigillo); flex: none; margin: 2px 0 0; }
.spunta { display: flex; gap: 10px; align-items: flex-start; font-size: .94rem; color: var(--inchiostro-2); }
.errore-campo { color: var(--peggio); font-weight: 500; min-height: 1em; margin: 0; }
.forza { height: 6px; border-radius: 3px; background: var(--foglio-2); overflow: hidden; }
.forza i { display: block; height: 100%; width: 0; background: var(--peggio); transition: width .2s; }
.forza[data-livello="1"] i { width: 25%; }
.forza[data-livello="2"] i { width: 50%; background: var(--att); }
.forza[data-livello="3"] i { width: 75%; background: var(--meglio); }
.forza[data-livello="4"] i { width: 100%; background: var(--meglio); }

/* ---------------------------------------------------------------- kit -- */
.kit { background: var(--foglio); border: 2px dashed var(--bordo-forte); border-radius: var(--raggio); padding: 18px; }
.kit-testa { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.kit-testa div { display: grid; }
.kit-testa span { color: var(--inchiostro-3); font-size: .86rem; }
.kit dl { margin: 0; display: grid; gap: 4px; }
.kit dt { color: var(--inchiostro-3); font-size: .84rem; margin-top: 8px; }
.kit dd { margin: 0; }
.codice { font: 600 1.12rem/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .04em; overflow-wrap: anywhere; }
.riga-vuota { color: var(--inchiostro-3); }

/* ----------------------------------------------------------- carte ----- */
.carta { display: block; background: var(--foglio); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 18px; box-shadow: var(--ombra); color: inherit; text-decoration: none; }
.carta.piatta { box-shadow: none; }
.sopra { display: block; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--inchiostro-3); }
.grande-numero { font: 600 clamp(2.4rem, 11vw, 3.2rem)/1.1 var(--titoli); margin: 6px 0 2px; letter-spacing: -.02em; }
.delta-eroe { margin-top: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .9rem; }
.tre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--bordo); }
.tre small { display: block; color: var(--inchiostro-3); font-size: .78rem; }
.chip { display: inline-flex; align-items: center; gap: 3px; border-radius: 99px; padding: 2px 9px 2px 6px; font: 600 .82rem var(--testo); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chip .ico { width: 15px; height: 15px; }
.chip.meglio { background: var(--meglio-tenue); color: var(--meglio); }
.chip.peggio { background: var(--peggio-tenue); color: var(--peggio); }
.chip.neutro { background: var(--foglio-2); color: var(--inchiostro-3); }
.etichetta { display: inline-block; font-size: .72rem; font-weight: 600; background: var(--sigillo-tenue); color: var(--sigillo); border-radius: 6px; padding: 1px 6px; margin-left: 6px; vertical-align: 2px; }
.striscia { background: var(--att-tenue); color: var(--att); border-radius: 10px; padding: 8px 12px; font-size: .9rem; font-weight: 500; }

.sezione { display: grid; gap: 10px; }
.sezione > h2 { font-size: 1.3rem; margin-top: 10px; }
.lista-buste { list-style: none; margin: 0; padding: 0; background: var(--foglio); border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; }
.lista-buste li.anno { padding: 8px 16px; background: var(--foglio-2); font: 600 .84rem var(--testo); color: var(--inchiostro-3); letter-spacing: .05em; }
.lista-buste li + li { border-top: 1px solid var(--bordo); }
.riga-busta { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 16px; color: inherit; text-decoration: none; min-height: 56px; }
.riga-busta b { text-transform: capitalize; }
.riga-busta small { display: block; }
.riga-busta .destra { display: flex; align-items: center; gap: 10px; flex: none; }
.riga-busta:hover { background: var(--foglio-2); }

.vuoto { text-align: center; padding: 30px 8px; display: grid; justify-items: center; gap: 10px; }
.vuoto h1 { font-size: 1.7rem; }
.vuoto p { color: var(--inchiostro-2); max-width: 30em; }

/* ---------------------------------------------------------- aggiungi --- */
.zona { border: 2px dashed var(--bordo-forte); border-radius: 18px; background: var(--foglio); padding: 26px 18px; text-align: center; display: grid; gap: 6px; justify-items: center; }
.zona.sopra { border-color: var(--sigillo); background: var(--sigillo-tenue); }
.zona .azioni { width: 100%; max-width: 360px; margin-top: 10px; }
.lettura { text-align: center; padding: 30px 10px; display: grid; justify-items: center; gap: 12px; }
.lettura progress { width: min(320px, 100%); accent-color: var(--sigillo); height: 8px; }
.giro { width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--foglio-2); border-top-color: var(--sigillo); animation: gira 1s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* --------------------------------------------------------- revisione --- */
.avvisi-lettura { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.avvisi-lettura li { display: flex; gap: 8px; background: var(--att-tenue); color: var(--att); border-radius: 10px; padding: 8px 12px; font-size: .9rem; }
.legenda-pallini { display: flex; gap: 14px; flex-wrap: wrap; font-size: .82rem; color: var(--inchiostro-3); }
.legenda-pallini span { display: inline-flex; align-items: center; gap: 6px; }
.pallino { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pallino.p-letto { background: var(--meglio); }
.pallino.p-calcolato { background: var(--att); }
.pallino.p-vuoto { background: transparent; border: 1.5px solid var(--bordo-forte); }
.anteprima { background: var(--foglio); border: 1px solid var(--bordo); border-radius: var(--raggio); }
.anteprima summary, .gruppo summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 14px 16px; font-weight: 600; min-height: 48px; }
.anteprima summary::-webkit-details-marker, .gruppo summary::-webkit-details-marker { display: none; }
.foglio { padding: 0 12px 12px; }
.foglio canvas, .originale canvas, .originale img { width: 100%; height: auto; display: block; border-radius: 6px; border: 1px solid var(--bordo); background: #fff; }
.originale { display: grid; gap: 12px; }
.mese-anno { display: grid; grid-template-columns: 1fr 120px; gap: 10px; }
.quadra { border-radius: 10px; padding: 10px 12px; background: var(--foglio-2); font-size: .92rem; }
.quadra.ok { background: var(--meglio-tenue); color: var(--meglio); }
.quadra.no { background: var(--peggio-tenue); color: var(--peggio); }
.gruppo { background: var(--foglio); border: 1px solid var(--bordo); border-radius: var(--raggio); }
.gruppo summary { justify-content: space-between; }
.gruppo-corpo { display: grid; gap: 2px; padding: 0 16px 12px; }
.campo.riga { grid-template-columns: 1fr minmax(118px, 44%); align-items: center; gap: 10px; padding: 4px 0; font-weight: 400; }
.campo.riga > span { display: flex; align-items: center; gap: 8px; color: var(--inchiostro); font-size: .95rem; }
.campo.riga.testo { grid-template-columns: 1fr; gap: 4px; }
.campo.riga.testo input { text-align: left; }
.campo.riga input { text-align: right; font-variant-numeric: tabular-nums; min-height: 42px; padding: 8px 10px; }
.voci-edit { display: grid; gap: 8px; }
.voce-edit { display: grid; grid-template-columns: 1fr 1fr 44px; grid-template-areas: "d d x" "c c c" "p t t"; gap: 6px; background: var(--foglio); border: 1px solid var(--bordo); border-radius: 12px; padding: 10px; }
.voce-edit .descr { grid-area: d; }
.voce-edit select { grid-area: c; }
.voce-edit input.num:nth-of-type(2) { grid-area: p; }
.voce-edit input.num:nth-of-type(3) { grid-area: t; }
.voce-edit .btn { grid-area: x; }
.voce-edit input.num { text-align: right; }
@media (min-width: 640px) {
  .voce-edit { grid-template-columns: 1.6fr 1.1fr .8fr .8fr 44px; grid-template-areas: "d c p t x"; align-items: center; }
}

/* ------------------------------------------------------------ report --- */
.report-testa { display: flex; align-items: flex-start; gap: 4px; margin-left: -10px; }
.report-testa .btn { margin-top: -2px; }
.report-testa h1 { text-transform: capitalize; }
.carta.netto .grande-numero { color: var(--inchiostro); }
.barra-parti { margin-top: 14px; }
.bp-barra { display: flex; gap: 2px; height: 16px; border-radius: 8px; overflow: hidden; background: var(--foglio); }
.bp-barra span { min-width: 3px; }
.bp-legenda { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; font-size: .92rem; }
.bp-legenda li { display: grid; grid-template-columns: 14px 1fr auto 44px; gap: 8px; align-items: center; }
.bp-legenda .tenue { text-align: right; }
.g-chiave { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 6px; }
.bp-legenda .g-chiave { margin: 0; }
.riassunto-delta b.meglio { color: var(--meglio); }
.riassunto-delta b.peggio { color: var(--peggio); }
.gruppo-cose h3 { font: 600 .84rem var(--testo); text-transform: uppercase; letter-spacing: .06em; color: var(--inchiostro-3); margin: 6px 0; }
.gruppo-cose h3.meglio { color: var(--meglio); }
.gruppo-cose h3.peggio { color: var(--peggio); }
.cose, .controlli, .voci, .elenco { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cosa, .controllo { display: flex; gap: 12px; background: var(--foglio); border: 1px solid var(--bordo); border-radius: 12px; padding: 12px 14px; }
.cosa > .ico, .controllo > .ico { margin-top: 2px; }
.cosa p, .controllo p { margin: 3px 0 0; color: var(--inchiostro-2); font-size: .93rem; }
.cosa .importo { font-family: var(--testo); }
.cosa.meglio > .ico, .controllo.ok > .ico { color: var(--meglio); }
.cosa.peggio > .ico, .controllo.errore > .ico { color: var(--peggio); }
.cosa.neutro > .ico, .controllo.info > .ico { color: var(--info); }
.controllo.attenzione { border-color: color-mix(in srgb, var(--att) 45%, var(--bordo)); background: color-mix(in srgb, var(--att-tenue) 55%, var(--foglio)); }
.controllo.attenzione > .ico { color: var(--att); }
.controllo.errore { border-color: color-mix(in srgb, var(--peggio) 45%, var(--bordo)); background: color-mix(in srgb, var(--peggio-tenue) 55%, var(--foglio)); }
.tutto-ok { display: flex; align-items: center; gap: 8px; color: var(--meglio); font-weight: 600; }
.controlli-ok summary { cursor: pointer; color: var(--inchiostro-3); font-weight: 500; padding: 6px 0; min-height: 40px; display: flex; align-items: center; }
.controlli-ok .controlli { margin-top: 8px; }
.consigli { display: grid; gap: 10px; }
.consiglio { display: flex; gap: 12px; background: var(--foglio); border: 1px solid var(--bordo); border-left: 4px solid var(--oro); border-radius: 12px; padding: 14px; }
.consiglio.p1 { border-left-color: var(--sigillo); }
.consiglio > .ico { color: var(--oro); margin-top: 2px; }
.consiglio h3 { font: 600 1rem var(--testo); }
.consiglio p { margin: 4px 0 0; color: var(--inchiostro-2); font-size: .93rem; }
.voci li { background: var(--foglio); border: 1px solid var(--bordo); border-radius: 12px; }
.voci summary { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; min-height: 48px; align-items: center; }
.voci summary::-webkit-details-marker { display: none; }
.voci summary .num { flex: none; font-weight: 600; }
.voci .tratt { color: var(--peggio); }
.voci details p { margin: 0; padding: 0 14px 12px; color: var(--inchiostro-2); font-size: .93rem; }
.voci .etichetta { margin-left: 0; }
.dati { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; margin: 0; background: var(--foglio); border: 1px solid var(--bordo); border-radius: 12px; padding: 12px 14px; }
.dati dt { color: var(--inchiostro-2); }
.dati dd { margin: 0; font-weight: 600; text-align: right; }

/* -------------------------------------------------------- andamento ---- */
.tessere { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .tessere { grid-template-columns: repeat(3, 1fr); } }
.tessera { background: var(--foglio); border: 1px solid var(--bordo); border-radius: 12px; padding: 12px 14px; display: grid; gap: 2px; }
.tessera small { color: var(--inchiostro-3); font-size: .8rem; }
.tessera b { font: 600 1.3rem var(--titoli); }
.tessera .tenue { font-size: .8rem; }
.grafico { margin: 0; background: var(--foglio); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 14px 12px 10px; }
.g-testa { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 0 4px; }
.g-testa h3 { font-size: 1.12rem; }
.g-testa p { margin: 2px 0 0; font-size: .85rem; }
.g-legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: .86rem; color: var(--inchiostro-2); padding: 8px 4px 0; }
.g-area { position: relative; margin-top: 6px; min-height: 200px; touch-action: pan-y; }
.g-svg { display: block; overflow: visible; }
.g-griglia { stroke: var(--griglia); stroke-width: 1; }
.g-base { stroke: var(--bordo-forte); stroke-width: 1; }
.g-tacca { fill: var(--inchiostro-3); font: 11.5px var(--testo); font-variant-numeric: tabular-nums; }
.g-linea { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-buco { fill: none; stroke-width: 1.5; stroke-dasharray: 1 5; stroke-linecap: round; opacity: .55; }
.g-punto { stroke: var(--foglio); stroke-width: 2; }
.g-etichetta { fill: var(--inchiostro-2); font: 600 12px var(--testo); font-variant-numeric: tabular-nums; }
.g-mirino { stroke: var(--inchiostro-3); stroke-width: 1; }
.g-strato { fill: transparent; cursor: crosshair; }
.g-fumetto { position: absolute; pointer-events: none; background: var(--inchiostro); color: var(--carta); border-radius: 8px; padding: 8px 10px; font-size: .82rem; line-height: 1.45; min-width: 150px; box-shadow: var(--ombra); }
.g-fumetto b { display: block; text-transform: capitalize; }
.g-fumetto .g-chiave { width: 9px; height: 9px; }
.g-tabella { overflow-x: auto; margin-top: 8px; }
.g-tabella table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.g-tabella th, .g-tabella td { padding: 6px 8px; border-bottom: 1px solid var(--bordo); text-align: left; }
.g-tabella .num { text-align: right; }
.g-tabella th[scope="row"] { font-weight: 500; text-transform: capitalize; }
.cronologia { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 2px solid var(--bordo-forte); display: grid; gap: 14px; }
.cronologia li { position: relative; }
.cronologia li::before { content: ""; position: absolute; left: -23px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--foglio); border: 2px solid var(--inchiostro-3); }
.cronologia li.meglio::before { border-color: var(--meglio); }
.cronologia li.peggio::before { border-color: var(--peggio); }
.cronologia .quando { display: block; font-size: .8rem; color: var(--inchiostro-3); text-transform: capitalize; }
.cronologia p { margin: 2px 0 0; color: var(--inchiostro-2); font-size: .92rem; }

/* ----------------------------------------------------- impostazioni ---- */
.elenco li { padding-left: 18px; position: relative; color: var(--inchiostro-2); }
.elenco li::before { content: ""; position: absolute; left: 4px; top: .65em; width: 6px; height: 6px; border-radius: 50%; background: var(--sigillo); }
.stato-esteso { background: var(--foglio); border: 1px solid var(--bordo); border-radius: 12px; padding: 10px 14px; margin: 0; }

/* ---------------------------------------------------- dialoghi, avvisi -- */
.dlg { border: none; border-radius: 18px; padding: 0; width: min(440px, calc(100vw - 32px)); background: var(--foglio); color: var(--inchiostro); box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.dlg.largo { width: min(900px, calc(100vw - 24px)); max-height: calc(100vh - 40px); }
.dlg::backdrop { background: rgba(20, 16, 10, .45); }
.dlg-corpo { display: grid; gap: 12px; padding: 20px; }
.dlg-corpo h2 { font-size: 1.3rem; }
.dlg-corpo p { color: var(--inchiostro-2); margin: 0; }
.dlg-titolo { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dlg-bottoni { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.avvisi { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--piede-h) + 16px + env(safe-area-inset-bottom)); z-index: 60; display: grid; gap: 8px; width: min(440px, calc(100vw - 32px)); pointer-events: none; }
.avviso { background: var(--inchiostro); color: var(--carta); border-radius: 12px; padding: 12px 16px; box-shadow: var(--ombra); font-size: .94rem; transition: opacity .35s, transform .35s; }
.avviso.errore { background: var(--peggio); color: #fff; }
.avviso.via { opacity: 0; transform: translateY(8px); }

/* -------------------------------------------------------------- stampa -- */
@media print {
  body { background: #fff; color: #000; }
  .testa, .piede, .app > :not(.kit), .avvisi { display: none !important; }
  .app { padding: 0; }
  .kit { border: 2px dashed #000; break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}