/* ============================================================================
   ACCESSO — il rettangolo dell'animazione Expid diventa la pagina di login.
   NOVA PURE: fondo blu notte, un solo carattere (Inter), il colore solo nelle
   barre, animazioni solo su transform e opacity.
   Sequenza: righe d'estratto conto → la E disegnata da tre righe → "xpid" →
   «Everything made easier.» → il marchio scorre a sinistra e a destra nasce il
   login → benvenuto → il rettangolo si apre sull'app.
   ========================================================================== */
.gate { --page: #080d1a; --panel: #172631; --text: #e8eef7; --gdim: rgba(255,255,255,.55); --gfaint: rgba(255,255,255,.35); --teal: #5eead4; --red: #f87171; --amber: #fbbf24; --gslot: rgba(0,0,0,.22); --ease: cubic-bezier(0.16, 1, 0.30, 1);
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; align-content: center; gap: 18px; padding: 24px 16px; background: var(--page); overflow: auto; transition: opacity .5s ease, visibility 0s linear .5s; }
body:not(.gated) .gate { opacity: 0; visibility: hidden; pointer-events: none; }
.gate-rows { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.gate-rows i { position: absolute; left: 0; right: 0; height: 1px; background: rgba(255,255,255,.025); transform-origin: left; transform: scaleX(0); animation: rule 1.2s var(--ease) forwards; }
.card { position: relative; width: 560px; height: 340px; border-radius: 20px; background: var(--page); box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 24px 70px rgba(0,0,0,.55); overflow: hidden; user-select: none; transition: transform .6s var(--ease), opacity .45s ease; }
body.opening .card { transform: scale(1.04); opacity: 0; }
.gate-note { position: relative; margin: 0; max-width: 560px; text-align: center; font-size: 12px; color: rgba(255,255,255,.32); opacity: 0; transition: opacity .6s ease .4s; }
body.as-login .gate-note { opacity: 1; }
.gate button, .gate input { font: inherit; color: inherit; }
/* Campo di righe d'estratto conto, appena visibile: bianco al 4%, mai teal (il teal vuol dire "attivo") */
.card .rows { position: absolute; inset: 0; overflow: hidden; }
.card .rows i { position: absolute; left: 36px; right: 36px; height: 1px; background: rgba(255,255,255,.045); transform-origin: left; transform: scaleX(0); animation: rule 1s var(--ease) forwards; }
@keyframes rule { to { transform: scaleX(1); } }
.card .stage { position: absolute; inset: 0 0 34px; display: grid; place-items: center; }
.brand { transition: transform .9s var(--ease); will-change: transform; }
.mark { display: flex; align-items: center; gap: 14px; justify-content: center; }
/* La E di Expid sono tre righe di un estratto conto */
.e { position: relative; width: 46px; height: 56px; flex: none; }
.e b { position: absolute; left: 0; height: 10px; border-radius: 2px; background: var(--teal); transform-origin: left center; transform: scaleX(0); animation: draw .6s var(--ease) forwards; }
.e b:nth-child(1) { top: 0; width: 46px; animation-delay: .2s; }
.e b:nth-child(2) { top: 23px; width: 32px; animation-delay: .38s; opacity: .6; }
.e b:nth-child(3) { top: 46px; width: 46px; animation-delay: .56s; }
@keyframes draw { to { transform: scaleX(1); } }
/* Titolo d'impatto: 900, maiuscolo, crenatura negativa, interlinea 0.85 */
.word { overflow: hidden; height: 62px; }
.word span { display: block; font-weight: 900; font-size: 68px; line-height: .9; letter-spacing: -0.06em; text-transform: uppercase; transform: translateY(105%); animation: up .7s var(--ease) .8s forwards; padding-right: .06em; }
@keyframes up { to { transform: translateY(0); } }
.tag { margin-top: 22px; min-height: 26px; font-size: 18px; font-weight: 500; color: var(--gdim); text-align: center; white-space: nowrap; }
.tag span { display: inline-block; opacity: 0; transform: translateY(6px); animation: word .5s var(--ease) forwards; }
.tag b { color: var(--text); font-weight: 800; }
@keyframes word { to { opacity: 1; transform: none; } }
.foot { position: absolute; left: 0; right: 0; bottom: 0; }
/* Marchio di stato: 11px, 700, 0.22em, bianco 70% */
.status { text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.5); padding-bottom: 16px; opacity: 0; animation: word .5s var(--ease) 2.1s forwards; }
.why { margin: 0 24px 6px; text-align: center; font-size: 11px; line-height: 1.35; color: var(--amber); opacity: 0; transition: opacity .3s ease; user-select: text; }
.why.show { opacity: 1; }
body.as-login .why { position: absolute; left: 296px; right: 32px; bottom: 34px; margin: 0; text-align: left; }
.line { position: relative; height: 3px; overflow: hidden; background: rgba(0,0,0,.15); }
.line i { position: absolute; inset: 0; background: var(--teal); transform-origin: left; transform: scaleX(.25); opacity: .45; animation: gateRun 1.4s ease-in-out infinite; }
@keyframes gateRun { from { transform: translateX(-100%) scaleX(.25); } to { transform: translateX(400%) scaleX(.25); } }
.ok .line i { animation: none; transform: scaleX(1); opacity: 1; transition: transform .5s var(--ease), opacity .3s ease; }
.off .line i { background: var(--red); }

/* ---------------- LOGIN: nasce dall'animazione ---------------- */
/* il marchio scorre nella metà sinistra e si rimpicciolisce */
body.as-login .brand { transform: translateX(-138px) scale(.6); }
.divider { position: absolute; left: 270px; top: 46px; bottom: 80px; width: 1px; background: rgba(255,255,255,.07); transform: scaleY(0); transform-origin: top; transition: transform .7s var(--ease) .25s; }
body.as-login .divider { transform: scaleY(1); }
body.as-welcome .divider { transform: scaleY(0); transition-delay: 0s; }

.lform { position: absolute; left: 296px; right: 32px; top: 0; bottom: 34px; display: flex; flex-direction: column; justify-content: center; gap: 9px; pointer-events: none; }
body.as-login .lform { pointer-events: auto; }
.lform > * { opacity: 0; transform: translateX(16px); transition: opacity .45s ease, transform .55s var(--ease); }
body.as-login .lform > * { opacity: 1; transform: none; transition-delay: calc(.35s + var(--i, 0) * 60ms); }
body.as-welcome .lform > * { opacity: 0; transform: translateX(10px); transition-delay: 0s; transition-duration: .3s; }
.lhead { font-size: 10.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 2px; }
.lf { display: grid; gap: 5px; }
.lf > span:first-child { font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.lf input { width: 100%; height: 36px; border: 0; border-radius: 9px; background: var(--gslot); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); padding: 0 12px; font-size: 13.5px; outline: none; transition: box-shadow .15s ease; user-select: text; }
.lf input::placeholder { color: var(--gfaint); }
.lf input:focus { box-shadow: inset 0 0 0 1.5px var(--teal); }
.lf input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--red); }
.pw { position: relative; display: block; }
.pw input { padding-right: 40px; }
.eye { position: absolute; right: 4px; top: 4px; width: 28px; height: 28px; border: 0; border-radius: 7px; background: none; color: var(--gdim); cursor: pointer; display: grid; place-items: center; }
.eye:hover { color: var(--text); background: rgba(255,255,255,.08); }
.eye svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.eye .slash { transition: opacity .15s ease; }
.eye[aria-pressed="true"] .slash { opacity: 0; }

.row2 { display: flex; align-items: center; gap: 10px; }
.remember { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(232,238,247,.84); cursor: pointer; }
.remember input { position: absolute; opacity: 0; pointer-events: none; }
.remember .box { position: relative; width: 16px; height: 16px; border-radius: 5px; background: var(--gslot); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); display: grid; place-items: center; overflow: hidden; }
.remember .box::before { content: ''; position: absolute; inset: 0; background: var(--teal); opacity: 0; transition: opacity .18s ease; }
.remember .box svg { position: relative; width: 11px; height: 11px; fill: none; stroke: #062925; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; transform: scale(.4); opacity: 0; transition: transform .22s var(--ease), opacity .15s ease; }
.remember input:checked + .box::before { opacity: 1; }
.remember input:checked + .box svg { transform: none; opacity: 1; }
.remember input:focus-visible + .box { outline: 2px solid rgba(255,255,255,.75); outline-offset: 2px; }

.lerr { min-height: 16px; margin: -2px 0 -2px; font-size: 11.5px; line-height: 1.35; color: var(--red); }
.lerr.info { color: var(--amber); }
.lerr span { display: inline-block; animation: word .3s var(--ease); }
.lform.shake { animation: shake .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake { 15%, 85% { transform: translateX(-2px); } 30%, 70% { transform: translateX(4px); } 45% { transform: translateX(-6px); } 60% { transform: translateX(6px); } }

/* Pulsante: barra di tono sotto, come in tutta l'app */
.go { position: relative; height: 38px; border: 0; border-radius: 9px; background: rgba(23,38,49,.9); box-shadow: 0 8px 24px rgba(0,0,0,.3); cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; overflow: hidden; display: grid; place-items: center; }
.go::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--teal); opacity: .5; transition: opacity .15s ease; }
.go::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.08); opacity: 0; transition: opacity .15s ease; }
.go:hover::before, .go.done::before { opacity: 1; }
.go:hover::after { opacity: 1; }
.go[disabled] { cursor: default; color: rgba(255,255,255,.45); }
.go[disabled]::before { opacity: .2; }
.go > * { grid-area: 1 / 1; }
.go .t { transition: opacity .15s ease, transform .2s var(--ease); }
.go .spin { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); border-top-color: #fff; opacity: 0; }
.go .ok { width: 16px; height: 16px; fill: none; stroke: var(--teal); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.5); }
.go.busy .t, .go.done .t { opacity: 0; transform: translateY(-6px); }
.go.busy .spin { opacity: 1; animation: spin .8s linear infinite; }
.go.done .ok { opacity: 1; transform: none; transition: opacity .2s ease, transform .35s var(--ease); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Ritorno al login (uscita, sessione scaduta) e visite successive: stessa animazione, più rapida */
body.quick .card .rows i, body.quick .gate-rows i { animation-duration: .5s; animation-delay: 0s !important; }
body.quick .e b { animation-duration: .4s; }
body.quick .e b:nth-child(1) { animation-delay: .05s; } body.quick .e b:nth-child(2) { animation-delay: .12s; } body.quick .e b:nth-child(3) { animation-delay: .19s; }
body.quick .word span { animation-delay: .2s; animation-duration: .5s; }
body.quick .status { animation-delay: .3s; }
body.quick .tag span { animation-delay: .35s !important; }

/* Schermi stretti (telefono, finestra piccola): il rettangolo si impila, marchio sopra e login sotto */
@media (max-width: 620px), (max-height: 380px) {
  .card { width: min(560px, 100%); height: auto; min-height: 340px; }
  .card .stage { position: relative; inset: auto; height: 300px; transition: height .7s var(--ease); }
  body.as-login .card .stage { height: 120px; }
  body.as-login .brand { transform: translateY(6px) scale(.62); }
  body.as-login .tag { opacity: 0; }
  .divider { display: none; }
  .lform { position: relative; left: auto; right: auto; top: auto; bottom: auto; padding: 0 22px 54px; display: none; }
  body.as-login .lform, body.as-welcome .lform { display: flex; }
  body.as-login .why { position: static; margin: 0 22px 6px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .gate *, .gate *::before, .gate *::after { animation-duration: 80ms !important; animation-delay: 0s !important; transition-duration: 80ms !important; transition-delay: 0s !important; } }

/* ============================================================================
   EXPID — SITO WEB — NOVA PURE
   Una colonna di lavoro sul fondo "blu notte". Un pannello è una tinta piena e
   un'ombra, mai un bordo grigio. Il colore di stato vive in una barra separata,
   mai sotto una scritta. Un solo carattere: Inter. Si animano solo transform e
   opacity.
   ========================================================================== */
@font-face { font-family: 'Inter'; src: url(fonts/inter.woff2) format('woff2'); font-weight: 100 900; font-display: block; }

:root {
  color-scheme: dark;
  --tint-rgb: 24, 39, 50;      /* #182732 — la base di tutto, non si usa direttamente */
  --page-rgb: 8, 13, 26;       /* #080D1A — BLU NOTTE */
  --text: #e8eef7;
  --dim: rgba(255, 255, 255, 0.55);
  --faint: rgba(255, 255, 255, 0.35);
  --hi: rgba(255, 255, 255, 0.10);   /* l'unico velo di hover */
  --sep: rgba(255, 255, 255, 0.08);  /* separatore interno da 1px */
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  --tone-neutral: #94a3b8;
  --tone-positive: #5eead4;
  --tone-warning: #fbbf24;
  --tone-danger: #f87171;
  --tone-event: #a78bfa;
  --font-main: 'Inter', system-ui, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.30, 1);
}
/* Le variabili che ne compongono altre stanno su body (si risolvono dove sono dichiarate). */
body {
  --glass: rgba(var(--tint-rgb), 0.80);
  --glass-soft: rgba(var(--tint-rgb), 0.72);
  --panel: rgba(var(--tint-rgb), 0.97);
  --slot: rgba(0, 0, 0, 0.15);
  margin: 0; height: 100vh; height: 100dvh;
  background: rgb(var(--page-rgb)); color: var(--text);
  font: 14px/1.55 var(--font-main); -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; overflow: hidden; user-select: none;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.75); outline-offset: 2px; }
.ic { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.dim { color: var(--dim); }
.faint { color: var(--faint); }
.grow { flex: 1; }
/* Etichetta di gruppo: maiuscolo spaziato, bianco al 50% */
.label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }

/* ---- Barra del titolo (appesa al bordo alto) ------------------------------ */
.titlebar { height: 52px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 20px 0 22px; background: var(--panel); box-shadow: var(--shadow); position: relative; z-index: 5; }
.logo { position: relative; width: 16px; height: 16px; }
.logo b { position: absolute; left: 0; height: 3px; border-radius: 2px; background: var(--tone-positive); }
.logo b:nth-child(1) { top: 1px; width: 16px; }
.logo b:nth-child(2) { top: 7px; width: 11px; opacity: .6; }
.logo b:nth-child(3) { top: 13px; width: 16px; }
.name { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.conn { margin-left: 18px; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dim); }
.conn i { width: 6px; height: 6px; border-radius: 50%; background: var(--tone-neutral); }
.conn.online i { background: var(--tone-positive); }
.conn.offline i { background: var(--tone-danger); }
.conn.searching i { animation: blink 1s ease-in-out infinite alternate; }
.conn button { border: 0; background: none; color: var(--text); font-weight: 700; cursor: pointer; padding: 0; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
@keyframes blink { from { opacity: .25; } }

/* ---- Avviso: scheda evento con barra di tono a sinistra -------------------- */
.banner { position: relative; margin: 14px 24px 0; padding: 12px 16px 12px 20px; border-radius: 12px; background: var(--glass); box-shadow: var(--shadow); font-size: 13px; display: flex; gap: 12px; align-items: center; --tone: var(--tone-warning); }
.banner::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 12px 0 0 12px; background: var(--tone); }
.banner.info { --tone: var(--tone-event); }
.banner.bad { --tone: var(--tone-danger); }
.banner button { margin-left: auto; }

/* ---- Colonna di lavoro ----------------------------------------------------- */
.main { flex: 1; overflow-y: auto; padding: 28px 32px 48px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.14) transparent; }
.main > * { max-width: 1040px; margin-left: auto; margin-right: auto; }

/* Zona di rilascio: un incavo (slot), non una lastra. Il gesto principale. */
.drop { position: relative; display: flex; align-items: center; gap: 26px; padding: 34px 36px; border-radius: 20px; background: var(--slot); cursor: pointer; overflow: hidden; }
.drop::before { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.10); pointer-events: none; }
.drop::after { content: ''; position: absolute; inset: 0; background: var(--hi); opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.drop:hover::after { opacity: .5; }
.drop.over::after { opacity: 1; }
.drop.over::before { box-shadow: inset 0 0 0 2px var(--tone-positive); }
.drop.disabled { opacity: .45; pointer-events: none; }
.drop-text { flex: 1; position: relative; }
.drop h1 { margin: 0; font-size: clamp(24px, 3.2vw, 34px); font-weight: 800; line-height: 0.98; letter-spacing: -0.02em; text-transform: uppercase; text-wrap: balance; }
.drop p { margin: 10px 0 0; color: var(--dim); max-width: 58ch; }
.drop-art { position: relative; width: 86px; height: 104px; flex: none; border-radius: 8px; background: var(--glass); box-shadow: var(--shadow); padding: 18px 14px; display: grid; align-content: start; gap: 11px; }
.drop-art span { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); transform-origin: left; }
.drop-art span:nth-child(1) { width: 70%; background: var(--tone-positive); }
.drop-art span:nth-child(2) { width: 100%; } .drop-art span:nth-child(3) { width: 82%; } .drop-art span:nth-child(4) { width: 58%; }
.drop.over .drop-art span { animation: scan .9s ease-in-out infinite alternate; }
.drop.over .drop-art span:nth-child(2) { animation-delay: .1s; } .drop.over .drop-art span:nth-child(3) { animation-delay: .2s; } .drop.over .drop-art span:nth-child(4) { animation-delay: .3s; }
@keyframes scan { to { transform: scaleX(.4); } }
.drop.compact { padding: 18px 22px; gap: 18px; border-radius: 16px; }
.drop.compact h1 { font-size: 18px; }
.drop.compact p { font-size: 13px; margin-top: 6px; }
.drop.compact .drop-art { width: 46px; height: 56px; padding: 10px 8px; gap: 6px; }
.drop.compact .drop-art span { height: 3px; }

/* ---- Bottoni: tre stati sulla stessa barra (riposo 45%, hover 100%) -------- */
.btn { position: relative; display: inline-flex; align-items: center; gap: 8px; border: 0; background: var(--glass-soft); box-shadow: var(--shadow); padding: 9px 15px; border-radius: 8px; cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; overflow: hidden; --tone: var(--tone-neutral); }
.btn::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--tone); opacity: .45; transition: opacity .15s ease; }
.btn::after { content: ''; position: absolute; inset: 0; background: var(--hi); opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.btn:hover::before { opacity: 1; }
.btn:hover::after { opacity: 1; }
.btn.primary { --tone: var(--tone-positive); color: #fff; }
.btn.ghost { background: transparent; box-shadow: none; color: var(--dim); }
.btn.ghost::before { display: none; }
.btn.ghost:hover { color: var(--text); }
.btn.sm { padding: 7px 12px; font-size: 10px; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn .ic { width: 14px; height: 14px; }

/* ---- Elenco conversioni ----------------------------------------------------- */
.list-head { display: flex; align-items: baseline; gap: 14px; margin-top: 34px; margin-bottom: 12px; }
.list-head h2 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.list-head .dim { font-size: 12.5px; }
.list { display: grid; gap: 10px; }
.group { margin-top: 18px; margin-bottom: 2px; padding-left: 2px; }
/* Ogni conversione è un pannello con la barra di tono da 4px sul bordo destro */
.item { position: relative; background: var(--glass); box-shadow: var(--shadow); border-radius: 12px; padding: 14px 22px 14px 16px; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; user-select: text; --tone: var(--tone-neutral); }
.item::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 4px; border-radius: 0 12px 12px 0; background: var(--tone); opacity: .45; }
.item.done { --tone: var(--tone-positive); } .item.done::after { opacity: 1; }
.item.warn { --tone: var(--tone-warning); } .item.warn::after { opacity: 1; }
.item.fail { --tone: var(--tone-danger); } .item.fail::after { opacity: 1; }
.item.fresh { animation: enter .22s var(--ease-out); }
@keyframes enter { from { opacity: 0; transform: translateX(-8px); } }
.ext { grid-row: span 2; width: 40px; height: 48px; border-radius: 8px; background: var(--slot); display: grid; place-items: end center; padding-bottom: 6px; font-size: 9px; font-weight: 700; letter-spacing: 0.12em; color: var(--dim); position: relative; }
.ext::before { content: ''; position: absolute; top: 9px; left: 8px; right: 8px; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, 0.16); box-shadow: 0 6px 0 rgba(255, 255, 255, 0.16), 0 12px 0 rgba(255, 255, 255, 0.16); }
.fname { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fname .size { font-weight: 400; font-size: 12px; color: var(--faint); margin-left: 6px; }
.meta { font-size: 12.5px; color: var(--dim); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; min-width: 0; }
.actions { grid-row: span 2; display: flex; align-items: center; gap: 8px; }
.state { font-weight: 700; color: var(--tone); }
/* Barra di progresso: larghezza fissa, scaleX da 0 a 1 */
.progress { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bar { position: relative; width: 170px; height: 4px; border-radius: 2px; background: var(--slot); overflow: hidden; flex: none; }
.bar i { position: absolute; inset: 0; background: var(--tone-positive); transform-origin: left; transform: scaleX(0); transition: transform .5s var(--ease-out); }
.bar.indet i { transform: scaleX(.3); animation: run 1.2s ease-in-out infinite; }
@keyframes run { from { transform: translateX(-100%) scaleX(.3); } to { transform: translateX(330%) scaleX(.3); } }
.thumbs { display: flex; gap: 2px; margin-left: 4px; padding-left: 10px; box-shadow: inset 1px 0 0 var(--sep); }
.thumbs button { position: relative; border: 0; background: none; cursor: pointer; padding: 7px; border-radius: 8px; color: var(--faint); line-height: 0; }
.thumbs button::after { content: ''; position: absolute; inset: 0; border-radius: 8px; background: var(--hi); opacity: 0; transition: opacity .15s ease; }
.thumbs button:hover { color: var(--text); }
.thumbs button:hover::after { opacity: 1; }
.thumbs button.on { color: var(--tone-positive); }
.thumbs button.on.down { color: var(--tone-warning); }
.saved { color: var(--text); display: inline-flex; gap: 10px; align-items: center; }
.saved button { border: 0; background: none; color: var(--dim); cursor: pointer; padding: 0; font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; }
.saved button:hover { color: var(--text); }
.empty { text-align: center; color: var(--faint); margin-top: 44px; }

/* ---- Scheda modale: vetro su velo, fade 0.3s con scale da 0.98 --------------- */
.overlay { position: fixed; inset: 52px 0 0 0; background: rgba(4, 16, 28, 0.92); display: grid; place-items: center; z-index: 40; padding: 26px; animation: fade .3s ease-out; }
@keyframes fade { from { opacity: 0; } }
.sheet { background: var(--panel); border-radius: 20px; width: min(1000px, 100%); max-height: 100%; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); animation: pop .3s ease-out; }
@keyframes pop { from { opacity: 0; transform: scale(.98); } }
.sheet > header { display: flex; align-items: center; gap: 12px; padding: 18px 22px; box-shadow: inset 0 -1px 0 var(--sep); }
.sheet > header h2 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet .body { padding: 20px 22px 24px; overflow-y: auto; user-select: text; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.14) transparent; }

/* Quadratura come scheda di dettaglio: righe dati, valori mono a destra, totale staccato da una riga */
.recon { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 0 28px; background: var(--slot); border-radius: 12px; padding: 16px 24px 16px 18px; margin-bottom: 18px; --tone: var(--tone-neutral); }
.recon::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 4px; border-radius: 0 12px 12px 0; background: var(--tone); }
.recon.ok { --tone: var(--tone-positive); }
.recon.ko { --tone: var(--tone-danger); }
.recon .verdict { align-self: center; }
.recon .verdict b { display: block; font-size: 15px; font-weight: 800; color: var(--tone); }
.recon .verdict span { color: var(--dim); font-size: 13px; }
.rows .r { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; font-size: 13px; }
.rows .r span { color: var(--dim); }
.rows .r b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; }
.rows .r.pos b { color: var(--tone-positive); }
.rows .r.neg b { color: var(--tone-danger); }
.rows .r.total { margin-top: 6px; padding-top: 8px; box-shadow: inset 0 1px 0 var(--sep); }
.rows .r.total b { font-size: 15px; }
.docinfo { display: flex; gap: 8px 26px; flex-wrap: wrap; font-size: 13px; margin-bottom: 16px; }
.docinfo span { color: var(--dim); }
.docinfo b { color: var(--text); font-weight: 600; margin-left: 4px; }
.notes { position: relative; background: var(--glass); border-radius: 12px; padding: 12px 16px 12px 20px; font-size: 13px; margin-bottom: 16px; }
.notes::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 12px 0 0 12px; background: var(--tone-warning); }
.notes ul { margin: 6px 0 0; padding-left: 18px; color: rgba(232, 238, 247, 0.84); }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); padding: 8px 10px; box-shadow: inset 0 -1px 0 var(--sep); position: sticky; top: 0; background: var(--panel); }
td { padding: 8px 10px; box-shadow: inset 0 -1px 0 var(--sep); font-size: 13px; vertical-align: top; }
td.num, th.num { text-align: right; white-space: nowrap; }
td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; }
td.in { color: var(--tone-positive); }
td.out { color: var(--tone-danger); }
.fb textarea { width: 100%; min-height: 120px; border: 0; border-radius: 12px; padding: 12px 14px; background: var(--slot); color: var(--text); resize: vertical; outline: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10); }
.fb textarea:focus { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55); }

/* ---- Toast: scheda evento appesa al bordo basso ------------------------------ */
.toasts { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; z-index: 60; padding-bottom: 18px; }
.toast { position: relative; background: var(--panel); padding: 11px 18px 11px 20px; border-radius: 12px; font-size: 13px; box-shadow: var(--shadow); animation: rise .22s var(--ease-out); --tone: var(--tone-positive); min-width: 280px; }
.toast::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 12px 0 0 12px; background: var(--tone); }
.toast.bad { --tone: var(--tone-danger); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 80ms !important; transition-duration: 80ms !important; }
  .item.fresh, .toast, .sheet { animation-name: fade !important; }
}

/* ---- Segnalazioni sul documento: il colore sta nell'icona, mai sotto il testo ---- */
.chk { border: 0; background: none; padding: 0 6px 0 0; margin: 0; cursor: pointer; line-height: 0; vertical-align: -3px; }
.chk.warn { color: var(--tone-warning); }
.chk.error { color: var(--tone-danger); }
.chk:hover .ic { transform: scale(1.1); }
.chk .ic { transition: transform .15s ease; }
.xname { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 520px; }
.checks { display: grid; gap: 8px; margin-bottom: 16px; }
.chk-row { position: relative; display: flex; gap: 10px; align-items: flex-start; background: var(--glass); border-radius: 12px; padding: 10px 14px 10px 20px; font-size: 13px; }
.chk-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 12px 0 0 12px; background: var(--tone-warning); }
.chk-row.error::before { background: var(--tone-danger); }
.chk-row .ic { margin-top: 1px; color: var(--tone-warning); }
.chk-row.error .ic { color: var(--tone-danger); }
.state.tone-ok { color: var(--tone-positive); }
.state.tone-bad { color: var(--tone-danger); }
.state.tone-warn { color: var(--tone-warning); }

/* ---- Anteprima invio: pannello in tinta, una riga per file, barra di tono a destra ---- */
.stage-box { margin-top: 18px; background: var(--glass); border-radius: 16px; box-shadow: var(--shadow); padding: 6px 0 10px; animation: enter .22s var(--ease-out); }
.stage-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 20px; flex-wrap: wrap; }
.stage-head h2 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.stage-head .dim { font-size: 12.5px; }
.stage-list { max-height: 330px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.14) transparent; }
.pend { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 8px 20px 8px 20px; box-shadow: inset 0 1px 0 var(--sep); user-select: text; }
.pend .ext { grid-row: auto; width: 34px; height: 40px; }
.pend .ext::before { top: 8px; }
.pend.bad::after { content: ''; position: absolute; right: 0; top: 6px; bottom: 6px; width: 4px; border-radius: 2px 0 0 2px; background: var(--tone-danger); }
.pend.bad .pname { color: var(--dim); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.3); }
.pname { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pname .size { font-weight: 400; font-size: 12px; color: var(--faint); margin-left: 8px; }
.pend .dim, .pend .state { font-size: 12.5px; }
.rm { position: relative; border: 0; background: none; color: var(--faint); cursor: pointer; padding: 7px; border-radius: 8px; line-height: 0; }
.rm::after { content: ''; position: absolute; inset: 0; border-radius: 8px; background: var(--hi); opacity: 0; transition: opacity .15s ease; }
.rm:hover { color: var(--text); }
.rm:hover::after { opacity: 1; }
td.info { font-size: 12px; color: var(--dim); max-width: 260px; }

/* Scelta del formato dopo «Scarica Excel»: il pulsante si apre nei formati disponibili */
.dl-wrap { display: inline-flex; }
.fmt-pick { display: inline-flex; align-items: center; gap: 6px; animation: fmtIn .18s var(--ease-out); }
.fmt-pick .fmt-hint { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); margin-right: 2px; }
.fmt-pick .btn { letter-spacing: 0.08em; }
.fmt-pick .fmt-x { padding-left: 8px; padding-right: 8px; }
.fmt-pick .fmt-x .ic { width: 12px; height: 12px; }
@keyframes fmtIn { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fmt-pick { animation: none; } }


/* ============================================================================
   ACCESSO — utente collegato e ingresso nell'app
   (il login vive nel rettangolo di avvio, in cima a questo file)
   ========================================================================== */
.titlebar .grow { flex: 1; }
.who { display: inline-flex; align-items: center; gap: 10px; animation: fadeIn .4s var(--ease-out) both; }
.avatar { width: 26px; height: 26px; border-radius: 8px; background: var(--slot); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); display: grid; place-items: center; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: var(--tone-positive); }
.who-name { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.82); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-out { border: 0; background: none; padding: 4px 6px; border-radius: 6px; cursor: pointer; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.who-out:hover { color: var(--text); background: var(--hi); }

/* ingresso della pagina principale: i blocchi salgono uno dopo l'altro */
.main.enter > * { opacity: 0; animation: riseIn .55s var(--ease-out) forwards; }
.main.enter > *:nth-child(1) { animation-delay: .04s; } .main.enter > *:nth-child(2) { animation-delay: .12s; } .main.enter > *:nth-child(3) { animation-delay: .2s; }
.main.enter > *:nth-child(4) { animation-delay: .26s; } .main.enter > *:nth-child(n+5) { animation-delay: .32s; }
.main.enter .list .item { opacity: 0; animation: riseIn .5s var(--ease-out) forwards; animation-delay: calc(.34s + var(--i, 0) * 45ms); }
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .main.enter > *, .main.enter .item, .who { animation-duration: 1ms !important; animation-delay: 0s !important; transition-duration: 1ms !important; }
}

/* ============================================================================
   SITO WEB — struttura della pagina, cliente, caricamento, schermi stretti
   ========================================================================== */
.app { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.app[hidden] { display: none !important; }
.noscript { position: fixed; inset: auto 0 20px; text-align: center; color: #fbbf24; }
/* Campo «Cliente» nell'anteprima: decide la cartella in archivio */
.cliente-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; align-items: center; padding: 4px 20px 14px; }
.cliente-row label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.cliente-row input { width: 100%; height: 38px; border: 0; border-radius: 9px; background: var(--slot); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10); padding: 0 12px; font-size: 13.5px; outline: none; user-select: text; transition: box-shadow .15s ease; }
.cliente-row input::placeholder { color: var(--faint); }
.cliente-row input:focus { box-shadow: inset 0 0 0 1.5px var(--tone-positive); }
.cliente-row .hint { grid-column: 2; font-size: 12px; color: var(--faint); }
.cli { color: var(--text); font-weight: 600; }
.cli .faint { font-weight: 400; }
/* avanzamento del caricamento verso il server */
.bar.up i { background: var(--tone-event); }
.done-dl { color: var(--tone-positive); font-weight: 600; }
.empty b { color: var(--dim); font-weight: 600; }

@media (max-width: 760px) {
  .titlebar { padding: 0 14px; gap: 10px; }
  .conn { margin-left: 4px; }
  .conn #connText { display: none; }
  .who-name { display: none; }
  .main { padding: 18px 14px 40px; }
  .drop { flex-wrap: wrap; padding: 22px; gap: 16px; }
  .drop-art { display: none; }
  .drop .btn { width: 100%; justify-content: center; }
  .item { grid-template-columns: 34px minmax(0, 1fr); padding: 12px 16px 12px 12px; }
  .item .ext { width: 34px; height: 40px; grid-row: span 1; }
  .item .actions { grid-column: 1 / -1; grid-row: auto; flex-wrap: wrap; order: 3; }
  .item .meta { grid-column: 1 / -1; }
  .stage-head { padding: 12px 14px; }
  .cliente-row { grid-template-columns: 1fr; padding: 4px 14px 12px; }
  .cliente-row .hint { grid-column: 1; }
  .pend { padding: 8px 14px; grid-template-columns: 34px minmax(0, 1fr) auto; }
  .pend > span:nth-child(3) { display: none; }
  .list-head { flex-wrap: wrap; }
  .overlay { padding: 10px; }
  .recon { grid-template-columns: 1fr; gap: 12px; }
  .sheet table { font-size: 12px; }
  .toasts { left: 12px; right: 12px; transform: none; }
  .toast { min-width: 0; }
}