/* =====================================================================
   DLXHUB · Accesso e recupero password — Design System v2.1 (10/10/2026)
   Usato solo da login.html, reset-password-request.html, reset-password.html,
   sopra /assets/css/dlx-design-system.css. Solo presentazione.
   Contrasti AA: bianco su #1d3047 13,41:1; testo secondario su navy
   rgba(255,255,255,.80) 9,3:1; testo #1e2b38 su #fff 14,4:1;
   testo secondario #56636e su #fff 6,1:1; errore #b3362a su #fbeceb 5,6:1.
   ===================================================================== */
html,body{min-height:100%}
body.auth{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;
  padding:var(--s-6) var(--s-4);background:var(--bg);color:var(--text)}
.auth-card{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:0 24px 48px -24px rgba(29,48,71,.28),0 2px 6px rgba(29,48,71,.06);overflow:hidden}
.auth-hd{display:flex;align-items:center;gap:14px;padding:22px 28px;background:var(--dark-bg);color:var(--on-dark)}
.auth-hd svg{width:40px;height:23px;flex:none;fill:var(--gold-500)}
.auth-hd .b1{display:block;font-size:var(--fs-16);font-weight:var(--fw-strong);line-height:1.25;color:var(--on-dark)}
.auth-hd .b2{display:block;font-size:var(--fs-13);font-weight:var(--fw-regular);color:var(--on-dark-2);margin-top:2px;text-transform:none;letter-spacing:0}
.auth-bd{padding:28px}
.auth-bd h1{font-size:var(--fs-20);font-weight:var(--fw-strong);line-height:1.25;margin:0 0 6px;color:var(--text)}
.auth-bd .lead,.auth-bd .hint,.auth-bd .sub{font-size:var(--fs-14);line-height:1.5;color:var(--text-2);margin:0 0 20px}
.auth-bd .subhd{font-size:var(--fs-20);font-weight:var(--fw-strong);line-height:1.25;margin:0 0 6px;color:var(--text)}
.auth-bd .fld{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.auth-bd .fld label{font-size:var(--fs-14);font-weight:var(--fw-medium);color:var(--text);text-transform:none;letter-spacing:0}
.auth-bd .fld input{width:100%;height:var(--ctl-h-lg);padding:0 14px;border:1px solid var(--border-input);border-radius:var(--r-md);background:var(--surface);
  font:var(--fw-regular) var(--fs-16)/1.2 var(--font);color:var(--text);transition:border-color var(--dur),box-shadow var(--dur)}
.auth-bd .fld input:hover{border-color:var(--text-2)}
.auth-bd .fld input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(52,86,122,.22)}
.auth-bd .fld input::placeholder{color:var(--text-2)}
.auth-bd .fld input[inputmode=numeric]{letter-spacing:.2em;font-variant-numeric:tabular-nums}
.auth-bd .pw{position:relative}
.auth-bd .pw input{padding-right:96px}
.auth-bd .pw>button{position:absolute;right:6px;top:50%;transform:translateY(-50%);height:36px;padding:0 10px;border:0;border-radius:var(--r-sm);
  background:transparent;color:var(--accent);font:var(--fw-medium) var(--fs-14) var(--font);cursor:pointer;letter-spacing:0}
.auth-bd .pw>button:hover{background:var(--surface-2)}
.auth-bd .pw>button:focus-visible{outline:2px solid var(--focus);outline-offset:0}
/* bottoni: stessi id e struttura dei vecchi, aspetto v2 */
.auth-bd .btn{width:100%;height:var(--ctl-h-lg);margin-top:8px;font-size:var(--fs-16);font-weight:var(--fw-medium);background:var(--accent);
  border:1px solid var(--accent);color:var(--on-accent);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.auth-bd .btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);filter:none}
.auth-bd .btn:disabled{opacity:.6;cursor:default}
.auth-bd .btn .icon{font-family:'Material Symbols Outlined';font-size:20px;font-weight:normal;line-height:1;font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 20}
.auth-bd .btn.btn-ghost{background:transparent;color:var(--accent);border-color:var(--border-strong);margin-top:10px}
.auth-bd .btn.btn-ghost:hover{background:var(--surface-2)}
.auth-bd .btn-copy{width:100%;height:var(--ctl-h);margin-bottom:6px;border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--surface);
  color:var(--accent);font:var(--fw-medium) var(--fs-14) var(--font);cursor:pointer}
.auth-bd .btn-copy:hover{background:var(--surface-2)}
.auth-bd .link-btn{display:block;width:100%;margin:8px 0 0;padding:8px 0;border:0;background:none;color:var(--accent);
  font:var(--fw-medium) var(--fs-14) var(--font);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* messaggi: compaiono solo se hanno testo (gli script scrivono textContent) */
.auth-bd .err,.auth-bd .msg{font-size:var(--fs-14);font-weight:var(--fw-medium);line-height:1.45;text-align:left;margin-top:14px;min-height:0}
.auth-bd .err:empty,.auth-bd .msg:empty{display:none}
.auth-bd .err:not(:empty),.auth-bd .msg.err:not(:empty){display:flex;gap:8px;align-items:flex-start;padding:10px 14px;border-radius:var(--r-md);background:var(--bad-bg);color:var(--bad)}
.auth-bd .msg.ok:not(:empty){display:flex;gap:8px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-md);background:var(--good-bg);color:var(--good)}
.auth-bd .err:not(:empty)::before,.auth-bd .msg.err:not(:empty)::before,.auth-bd .msg.ok:not(:empty)::before{font-family:'Material Symbols Outlined';font-size:20px;line-height:1;
  font-weight:normal;flex:none;font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 20}
.auth-bd .err:not(:empty)::before,.auth-bd .msg.err:not(:empty)::before{content:'error'}
.auth-bd .msg.ok:not(:empty)::before{content:'check_circle'}
.auth-bd .msg.loading{display:flex;align-items:center;gap:10px;color:var(--text-2);margin-top:0}
.auth-bd .msg.loading::before{content:'';width:16px;height:16px;border-radius:50%;border:2px solid var(--border-strong);border-top-color:var(--accent);animation:auth-spin .8s linear infinite}
@keyframes auth-spin{to{transform:rotate(360deg)}}
.auth-bd .ft{margin-top:22px;padding-top:18px;border-top:1px solid var(--border);text-align:center;font-size:var(--fs-14);color:var(--text-2)}
.auth-bd .ft a{color:var(--accent);font-weight:var(--fw-medium);text-decoration:none}
.auth-bd .ft a:hover{text-decoration:underline;text-underline-offset:3px}
/* 2FA */
.auth-bd .step{display:none}
.auth-bd .step.active{display:block}
.auth-bd .qr-wrap{text-align:center;margin:8px 0 12px}
.auth-bd .qr-wrap img,.auth-bd .qr-wrap canvas{width:180px;height:180px;border-radius:var(--r-md);border:1px solid var(--border);background:#fff}
.auth-bd .codes,.auth-bd .setup-secret{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-14);line-height:1.7;color:var(--text)}
.auth-bd .codes{margin:0 0 12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px}
.auth-bd .setup-secret{letter-spacing:.1em;text-align:center;word-break:break-all}
.auth-foot{margin-top:20px;font-size:var(--fs-13);color:var(--text-2);text-align:center}
@media (prefers-reduced-motion:reduce){.auth-bd .msg.loading::before{animation:none}}
@media (max-width:480px){
  body.auth{justify-content:flex-start;padding:0;background:var(--surface)}
  .auth-card{max-width:none;border:0;border-radius:0;box-shadow:none;min-height:100vh;min-height:100dvh}
  .auth-hd{padding:18px 20px}
  .auth-bd{padding:24px 20px 32px}
  .auth-foot{display:none}
}