:root{
  /* Palette brand Miller — tema chiaro */
  --bg:#eef2f7;          /* sfondo pagina */
  --panel:#ffffff;       /* card / pannelli */
  --panel-2:#f3f7fc;     /* hover riga / fondo tenue */
  --line:#d9e1ea;        /* bordi */
  --ink:#273940;         /* testo principale (grigio blu 1) */
  --ink-strong:#003060;  /* titoli (grigio blu scuro) */
  --muted:#69788a;       /* testo secondario */
  --blue:#2265b1;        /* Blu Miller — primario */
  --blue-soft:#e3eef8;   /* fondo azzurro tenue */
  --sky:#8dc5eb;         /* blu chiaro 1 */
  --sky-2:#bce5f5;       /* turchese chiaro */
  /* Accenti extra (anche fuori brand) per distinguere tag e campi tecnici */
  --green:#15795a;  --green-soft:#d8f3e4;
  --amber:#b9710a;  --amber-soft:#fbecd2;
  --red:#c0362c;    --red-soft:#fbe3e1;
  --teal:#0e7490;   --teal-soft:#d6f0f5;
  --indigo:#5b46d6; --indigo-soft:#eae7fd;
  --plum:#9d2e8f;   --plum-soft:#fae4f6;
  --slate:#5b6b7d;  --slate-soft:#eceff3;
  --mono:"SFMono-Regular",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
  --sans:"Verdana","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --shadow:0 1px 2px rgba(16,42,67,.06),0 4px 16px rgba(16,42,67,.05);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- Topbar / brand ---- */
header{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:24px;
  padding:0 24px;height:66px;background:var(--panel);
  border-bottom:1px solid var(--line)}
header::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;
  background:linear-gradient(90deg,var(--ink) 0%,var(--blue) 45%,var(--sky) 100%)}
.brand{display:flex;flex-direction:column;line-height:1;gap:3px}
.brand:hover{text-decoration:none}
.brand .mark{font-weight:700;font-size:22px;letter-spacing:.02em;color:var(--ink-strong)}
.brand .mark b{color:var(--blue)}
.brand .tag{font-size:8px;font-weight:600;letter-spacing:.34em;color:var(--muted);
  text-transform:uppercase}
/* identità servizio Factorial -> Zucchetti */
.appid{margin-left:auto;display:flex;align-items:center;gap:11px;
  font-weight:700;color:var(--ink-strong);font-size:14px}
.appid .svc{display:flex;align-items:center;gap:7px}
.appid .to{color:var(--muted);font-weight:600;font-size:12px}
.appid svg{border-radius:6px;display:block}
.brand-logo{height:42px;display:block}
.svc-logo{height:24px;width:auto;display:block}
.svc-logo.zucchetti{height:28px}

/* ---- Layout: sidebar + contenuto ---- */
.layout{display:flex;align-items:flex-start}
.sidebar{position:sticky;top:66px;align-self:flex-start;flex:0 0 240px;width:240px;
  height:calc(100vh - 66px);overflow-y:auto;background:var(--panel);
  border-right:1px solid var(--line);padding:16px 14px}
.side-link{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;
  color:var(--ink);font-weight:600;font-size:13.5px;margin-bottom:2px}
.side-link:hover{background:var(--panel-2);text-decoration:none;color:var(--ink-strong)}
.side-link.active{background:var(--blue-soft);color:var(--blue)}
.side-link svg{flex:0 0 18px;width:18px;height:18px}
.side-group{margin-top:16px}
.side-parent{cursor:default}
.side-parent:hover{background:transparent;color:var(--ink)}
.side-children{border-left:2px solid var(--line);margin-left:18px;padding-left:6px;margin-top:2px}
.side-children .side-link{font-size:12px;padding:7px 12px;margin-bottom:1px;font-weight:600}
.side-children .side-link svg{flex:0 0 16px;width:16px;height:16px}
main{flex:1 1 auto;min-width:0;padding:32px 34px;max-width:1700px}
h1{font-size:22px;font-weight:700;margin:0 0 6px;color:var(--ink-strong)}
.sub{color:var(--muted);margin:0 0 26px;font-size:13.5px;max-width:85ch;line-height:1.7}
h1 + .sub{margin-top:2px}

/* ---- Pannelli / tabelle ---- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;margin-bottom:26px;box-shadow:var(--shadow)}
.panel h2{font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);margin:0;padding:16px 22px;border-bottom:1px solid var(--line);
  font-weight:700}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;color:var(--muted);font-weight:700;padding:13px 22px;
  font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
  background:var(--panel-2);border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:16px 22px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--panel-2)}
tr.row-tech td{background:#faf7fe}
tr.row-tech:hover td{background:#f3eefc}
tr.row-tech td:first-child{box-shadow:inset 3px 0 0 var(--plum)}
/* righe "da sistemare": né Codice Dato né escluse */
tr.row-todo td{background:#fff4e0}
tr.row-todo:hover td{background:#ffeccb}
.mono{font-family:var(--mono)}
.key{font-family:var(--mono);color:var(--blue);font-size:12px;white-space:nowrap}
table.compact{font-size:12px}
table.compact th{padding:9px 14px;font-size:10px}
table.compact td{padding:9px 14px}
table.compact .key{font-size:11px}
table.compact .badge{font-size:10px;padding:3px 9px}
.icon-btn{background:transparent;border:1px solid var(--line);color:var(--blue);
  border-radius:7px;padding:4px 8px;font-size:13px;font-weight:700;cursor:pointer;line-height:1}
.icon-btn:hover{background:var(--blue-soft);border-color:var(--blue)}
.lock{color:var(--plum);margin-right:6px;vertical-align:-2px}
/* menù opzioni discreto (tre puntini) — apre verso l'alto/sinistra */
.opts{position:relative;display:inline-block}
.opts-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  width:36px;height:36px;padding:0;background:var(--panel);border:1px solid var(--line);
  border-radius:9px;color:var(--muted);font:inherit;font-size:12.5px;font-weight:600;
  cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.opts-btn:hover,.opts.open .opts-btn{background:var(--panel-2);border-color:var(--blue);color:var(--blue)}
.opts-btn svg{flex:0 0 auto}
.opts-btn.wide{width:auto;height:auto;padding:8px 14px;letter-spacing:.03em}
.opts-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:210px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 12px 40px rgba(16,42,67,.18);padding:6px;display:none;z-index:40}
.opts.open .opts-menu{display:block}
.opts-menu button,.opts-menu a{display:flex;align-items:center;gap:9px;width:100%;
  background:transparent;border:none;text-align:left;padding:9px 11px;border-radius:7px;
  font:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;text-decoration:none}
.opts-menu button:hover,.opts-menu a:hover{background:var(--blue-soft);color:var(--blue);text-decoration:none}
.opts-menu svg{flex:0 0 auto;color:var(--muted)}
.opts-menu button:hover svg,.opts-menu a:hover svg{color:var(--blue)}
.opts-note{padding:5px 11px 7px;font-size:11px;color:var(--muted);max-width:230px;line-height:1.5}
/* interruttore + pulsanti ricodifica (pagina Campi) */
.ric-toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  text-decoration:none;font-size:12px;font-weight:600;color:var(--muted);
  padding:5px 11px;border:1px solid var(--line);border-radius:20px;
  background:var(--panel);transition:background .15s,border-color .15s,color .15s}
.ric-toggle:hover{color:var(--ink-strong);text-decoration:none;border-color:var(--sky)}
.ric-toggle .sw{flex:0 0 30px;width:30px;height:17px;border-radius:10px;
  background:var(--line);position:relative;transition:background .15s}
.ric-toggle .sw::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;
  border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(16,42,67,.25);transition:left .15s}
.ric-toggle.on{color:var(--green);border-color:#bcdd97;background:#f2f9ec}
.ric-toggle.on .sw{background:var(--green)}
.ric-toggle.on .sw::after{left:15px}
/* pulsante "apri/ricodifica →" (apre la modale) */
.ric-link{display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:5px 13px;
  border-radius:20px;border:1px solid var(--blue);color:var(--blue);font-size:12px;
  font-weight:700;text-decoration:none;background:var(--blue-soft);
  transition:background .15s,box-shadow .15s}
.ric-link:hover{background:var(--blue);color:#fff;text-decoration:none;
  box-shadow:0 2px 6px rgba(34,101,177,.28)}
/* toggle "per azienda" */
.ric-peraz{display:inline-flex;align-items:center;margin-left:8px;padding:5px 12px;
  border-radius:20px;border:1px dashed var(--line);color:var(--muted);font-size:12px;
  font-weight:600;text-decoration:none;transition:all .15s}
.ric-peraz:hover{border-color:var(--sky);color:var(--ink-strong);text-decoration:none}
.ric-peraz.on{border-style:solid;border-color:#bcdd97;background:#f2f9ec;color:var(--green)}
/* contatore codifiche fatte/totali (cliccabile) */
.ric-count{display:inline-flex;align-items:center;margin-left:8px;padding:4px 11px;
  border-radius:20px;font-size:12px;font-weight:800;font-family:var(--mono);
  text-decoration:none;letter-spacing:.02em}
.ric-count.todo{background:var(--amber-soft);color:var(--amber);border:1px solid #e6c48a}
.ric-count.ok{background:var(--green-soft);color:var(--green);border:1px solid #bcdd97}
.ric-count:hover{text-decoration:none;filter:brightness(.97)}
.zeta{color:#0A5FBF;font-weight:800;margin-left:5px;font-size:12px;
  font-family:var(--sans)}
/* gruppi a fisarmonica (pagina Campi) */
details.gruppo{margin-bottom:14px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel);box-shadow:var(--shadow);overflow:hidden}
details.gruppo>summary{cursor:pointer;list-style:none;padding:14px 18px;
  font-weight:700;color:var(--ink-strong);display:flex;align-items:center;gap:10px}
details.gruppo>summary::-webkit-details-marker{display:none}
details.gruppo>summary::before{content:"\25B8";color:var(--blue);
  display:inline-block;transition:transform .15s}
details.gruppo[open]>summary::before{transform:rotate(90deg)}
details.gruppo>summary:hover{background:var(--panel-2)}
details.gruppo .conta{margin-left:auto;font-weight:600;font-size:12px;
  color:var(--muted);background:var(--bg);border:1px solid var(--line);
  border-radius:20px;padding:2px 10px}
details.gruppo .table-wrap{border-top:1px solid var(--line)}

/* ---- Badge ---- */
.badge{display:inline-block;padding:4px 11px;border-radius:20px;font-size:11px;
  font-weight:700;letter-spacing:.02em;line-height:1.5}
/* Stati coda — Verde=fatto, Blu/Azzurro=in lavorazione, Giallo=da completare,
   Rosso=problema, Grigio=neutro/dormiente */
.s-INCOMPLETO{background:var(--amber-soft);color:var(--amber)}
.s-PRONTO{background:var(--blue-soft);color:var(--blue)}
.s-IN_CODA{background:var(--teal-soft);color:var(--teal)}
.s-INVIATO{background:var(--green-soft);color:var(--green)}
.s-ERRORE{background:var(--red-soft);color:var(--red)}
.s-SCARTATO{background:var(--red-soft);color:var(--red)}
.s-IGNORATO{background:var(--slate-soft);color:var(--slate)}
.s-IN_ATTESA{background:var(--slate-soft);color:var(--slate)}
.s-IN_RECUPERO{background:var(--slate-soft);color:var(--slate)}
.b-custom{background:var(--indigo-soft);color:var(--indigo)}
.b-standard{background:var(--slate-soft);color:var(--slate)}
.b-info{background:var(--blue-soft);color:var(--blue)}   /* badge informativo (non è uno stato coda) */

/* ---- Storico contrattuale (tabellina espandibile) ---- */
table.storico{width:100%}
table.storico td,table.storico th{padding:10px 14px}
.storico-row{cursor:pointer}
.storico-row:hover{background:var(--panel-2)}
.storico-row.corrente{background:var(--blue-soft)}
.storico-row .tw{color:var(--blue);display:inline-block;transition:transform .12s;font-size:12px}
.storico-row.open .tw{transform:rotate(90deg)}
.storico-det>td{background:var(--panel-2);border-top:none}
.storico-det .kv{margin:2px 0}
.b-tech{background:var(--plum-soft);color:var(--plum)}
.b-natura{background:var(--teal-soft);color:var(--teal)}
.b-recode{background:#e9f6da;color:#5a7d18}

/* ---- Filtri della coda: pill accendi/spegni, su due righe etichettate
   (Stato / Evento). Accesa = colore pieno (tono tenue); spenta = grigia.
   Gli stati restano raggruppati per macro-step. ---- */
.frow{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 12px}
.frow-label{flex:0 0 46px;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted)}
.fpill-group{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;
  border:2px solid var(--ink);border-radius:28px;padding:7px 9px;background:transparent}
.fpill{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:20px;
  border:1.5px solid var(--ink);font-size:12.5px;font-weight:700;text-decoration:none;
  color:var(--ink);background:var(--panel);
  transition:transform .1s,box-shadow .1s,opacity .12s,filter .12s}
.fpill:hover{transform:translateY(-1px);box-shadow:var(--shadow);text-decoration:none}
.fpill b{font-weight:800;font-variant-numeric:tabular-nums}
.f-TUTTI{background:var(--panel);color:var(--ink);border-color:var(--line)}
.f-IN_RECUPERO,.f-IN_ATTESA,.f-IGNORATO{background:var(--slate-soft);color:var(--slate)}
.f-INCOMPLETO{background:var(--amber-soft);color:var(--amber)}
.f-PRONTO{background:var(--blue-soft);color:var(--blue)}
.f-IN_CODA{background:var(--teal-soft);color:var(--teal)}
.f-INVIATO{background:var(--green-soft);color:var(--green)}
.f-ERRORE,.f-SCARTATO{background:var(--red-soft);color:var(--red)}
.f-EVENTO{background:var(--indigo-soft);color:var(--indigo)}
/* pill SPENTA: sbiadita e senza colore, il conteggio resta leggibile */
.fpill.spento{background:var(--panel);color:var(--muted);border-color:var(--line);
  opacity:.55;filter:saturate(0)}
.fpill.spento:hover{opacity:.85}

/* ---- Chip / pills ---- */
.pills{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:22px;align-items:center}
.pill{padding:9px 16px;border:1px solid var(--line);border-radius:20px;
  background:var(--panel);color:var(--muted);font-size:12.5px;font-weight:600;
  display:inline-flex;gap:8px;align-items:center;cursor:pointer}
.pill:hover{border-color:var(--sky);color:var(--ink-strong);text-decoration:none}
.pill.active{border-color:var(--blue);background:var(--blue-soft);color:var(--blue)}
.pill b{color:inherit;font-size:13px}
/* selettore rotta con ricerca */
.rotta-select{position:relative;max-width:440px;margin-bottom:22px}
.rotta-field{display:flex;align-items:center;gap:10px;width:100%;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;padding:11px 14px;cursor:pointer;
  font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink-strong);text-align:left}
.rotta-field:hover{border-color:var(--sky)}
.rotta-field .rotta-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rotta-field svg{flex:0 0 auto;color:var(--muted)}
/* modale di selezione rotta (sfondo scurito + tabella) */
.rotta-modal{position:fixed;inset:0;background:rgba(16,42,67,.45);display:none;
  align-items:flex-start;justify-content:center;z-index:120;padding:64px 16px}
.rotta-modal.on{display:flex}
.rotta-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 12px 40px rgba(16,42,67,.25);width:100%;max-width:580px;max-height:80vh;
  display:flex;flex-direction:column;overflow:hidden}
.rotta-card-head{display:flex;align-items:center;gap:10px;padding:16px 18px;
  border-bottom:1px solid var(--line)}
.rotta-card-head h3{margin:0;font-size:15px;color:var(--ink-strong);flex:1}
.rotta-card-head svg{color:var(--blue)}
.rotta-close{cursor:pointer;border:none;background:transparent;color:var(--muted);
  font-size:18px;line-height:1;padding:4px 6px;border-radius:6px}
.rotta-close:hover{background:var(--panel-2);color:var(--ink-strong)}
.rotta-card-body{padding:14px 18px 18px;overflow:auto}
.rotta-modal tbody tr{cursor:pointer}
.rotta-modal tr.rotta-cur td{background:var(--blue-soft)}

/* ---- Schede (tab) ---- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:24px}
.tab{padding:11px 18px;font-weight:700;font-size:14px;color:var(--muted);cursor:pointer;
  border:none;background:transparent;border-bottom:2px solid transparent;font-family:var(--sans)}
.tab:hover{color:var(--ink-strong)}
.tab.active{color:var(--blue);border-bottom-color:var(--blue)}
/* testata di pannello con azione a destra */
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--line)}
.panel-head .t{font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);font-weight:700}

/* ---- Modale generico ---- */
.modal{position:fixed;inset:0;background:rgba(16,42,67,.45);display:none;
  align-items:flex-start;justify-content:center;z-index:120;padding:48px 16px;overflow:auto}
.modal.on{display:flex}
.modal-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 12px 40px rgba(16,42,67,.28);width:100%;max-width:640px}
.modal-head{display:flex;align-items:center;gap:10px;padding:16px 20px;
  border-bottom:1px solid var(--line)}
.modal-head h3{margin:0;font-size:16px;color:var(--ink-strong);flex:1}
.modal-body{padding:18px 20px}

/* ---- Form ---- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
label{display:block;color:var(--muted);font-size:12px;margin-bottom:6px;font-weight:600}
input,select{width:100%;background:var(--panel);border:1px solid var(--line);
  color:var(--ink);border-radius:8px;padding:10px 12px;font-family:var(--sans);
  font-size:13px;margin-bottom:15px}
input:focus,select:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(34,101,177,.15)}
button{background:var(--blue);color:#fff;border:none;border-radius:8px;
  padding:11px 22px;font-weight:700;cursor:pointer;font-family:var(--sans);font-size:13px}
button:hover{background:#1b5499}
button.sec{background:transparent;color:var(--blue);border:1px solid var(--line);
  padding:7px 14px;font-size:12px;font-weight:600}
button.sec:hover{background:var(--blue-soft);border-color:var(--blue)}
button.danger{background:transparent;color:var(--red);border:1px solid #e7bdb8;
  padding:7px 14px;font-size:12px;font-weight:600}
button.danger:hover{background:var(--red-soft)}
.row-actions{display:flex;gap:6px}
details.edit{margin-top:8px}
details.edit summary{cursor:pointer;color:var(--blue);font-size:12px;
  font-weight:600;list-style:none}
details.edit summary::-webkit-details-marker{display:none}

/* ---- Avvisi / key-value ---- */
.err-banner{background:var(--red-soft);color:var(--red);border:1px solid #e7bdb8;
  border-radius:10px;padding:14px 18px;margin-bottom:20px;font-size:13px}
.ok-banner{background:var(--green-soft);color:var(--green);border:1px solid #b6e3cc;
  border-radius:10px;padding:14px 18px;margin-bottom:20px;font-size:13px}
.form-pad{padding:22px}
.kv{display:grid;grid-template-columns:230px 1fr;gap:0}
.kv > div{padding:13px 22px;border-bottom:1px solid var(--line)}
.kv .k{color:var(--muted);font-size:12px;font-weight:600}
.miss{color:var(--amber);font-size:12px;margin:5px 0;padding-left:15px;position:relative}
.miss::before{content:"▸";position:absolute;left:0;color:var(--amber)}
.empty{padding:54px 16px;text-align:center;color:var(--muted)}

/* ---- Overlay barra di avanzamento ---- */
#op-overlay{position:fixed;inset:0;background:rgba(16,42,67,.30);
  display:none;align-items:center;justify-content:center;z-index:100}
#op-overlay.on{display:flex}
.op-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:24px 30px;box-shadow:var(--shadow);min-width:300px;text-align:center}
.op-bar{height:7px;border-radius:7px;background:var(--blue-soft);
  overflow:hidden;margin-bottom:14px}
.op-bar span{display:block;height:100%;width:40%;border-radius:7px;
  background:linear-gradient(90deg,var(--blue),var(--sky));
  animation:op-slide 1.1s ease-in-out infinite}
@keyframes op-slide{0%{margin-left:-42%}100%{margin-left:102%}}
.op-text{color:var(--ink-strong);font-weight:700;font-size:14px}
.op-sub{color:var(--muted);font-size:12px;margin-top:5px}

/* ---- Utente nella topbar (chip + logout) ---- */
.userbox{display:flex;align-items:center;gap:8px;margin-left:18px}
.userchip{display:flex;align-items:center;gap:6px;color:var(--ink-strong);
  font-weight:700;font-size:12.5px;text-decoration:none;padding:6px 11px;
  border:1px solid var(--line);border-radius:20px;background:var(--panel)}
.userchip:hover{border-color:var(--blue);color:var(--blue)}
.userchip svg{color:var(--muted)}
.logout-btn{background:transparent;color:var(--muted);border:1px solid var(--line);
  border-radius:20px;padding:6px 12px;font-size:12px;font-weight:600;
  display:flex;align-items:center;gap:6px}
.logout-btn:hover{background:var(--red-soft);color:var(--red);border-color:#e7bdb8}

/* ---- Pagina di login (standalone, senza sidebar) ---- */
.login-body{display:flex;min-height:100vh;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--blue-soft),var(--bg));padding:24px}
.login-wrap{width:100%;max-width:420px;text-align:center}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 10px 36px rgba(16,42,67,.14);overflow:hidden}
.login-head{padding:30px 32px 22px;background:#fff;
  border-bottom:1px solid var(--line);position:relative}
.login-head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;
  background:linear-gradient(90deg,var(--ink) 0%,var(--blue) 45%,var(--sky) 100%)}
.login-logo{height:56px;width:auto;display:block;margin:0 auto 14px;max-width:100%;
  object-fit:contain}
.login-flow{display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:10px}
.login-flow-logo{height:20px;width:auto;object-fit:contain;display:block}
.login-flow-logo--zucchetti{height:24px}
.login-flow-track{position:relative;width:44px;height:12px;flex:0 0 auto}
.login-flow-track::before{content:"";position:absolute;top:50%;left:0;right:0;height:1.5px;
  background:linear-gradient(90deg,var(--sky),var(--blue));transform:translateY(-50%)}
.login-flow-dot{position:absolute;top:50%;left:0;width:5px;height:5px;border-radius:50%;
  background:var(--blue);transform:translate(-50%,-50%);opacity:0;
  animation:login-flow-move 2s ease-in-out infinite}
.login-flow-dot:nth-child(2){animation-delay:.4s}
.login-flow-dot:nth-child(3){animation-delay:.8s}
@keyframes login-flow-move{
  0%{left:0;opacity:0}
  15%{opacity:1}
  85%{opacity:1}
  100%{left:100%;opacity:0}
}
.login-sub{color:var(--muted);font-size:12px;letter-spacing:.02em}
.login-sub b{color:var(--ink-strong);font-weight:700}
.login-form{padding:26px 32px 30px}
.login-form h1{font-size:17px;margin:0 0 18px;color:var(--ink-strong)}
.login-form label{display:block;text-align:left;font-size:12px;font-weight:700;
  color:var(--ink-strong);margin-bottom:14px}
.login-form input{width:100%;margin-top:5px}
.login-form button{width:100%;margin-top:6px}
.login-err{background:var(--red-soft);color:var(--red);border:1px solid #e7bdb8;
  border-radius:9px;padding:11px 14px;margin-bottom:18px;font-size:13px}
.login-note{color:var(--muted);font-size:11.5px;margin-top:18px;line-height:1.6}