/* la pagina di accesso e il riquadro "cambia password": usano i colori di app.css */
#accesso{max-width:400px;margin:12vh auto 0;padding:0 16px 60px}
/* il marcafilo al centro, il cavo per tutta la larghezza */
#accesso h1{display:flex;font-size:1.1rem}
#accesso h1::before,#accesso h1::after{flex:1}
.acc-form{display:flex;flex-direction:column;gap:14px;margin-top:22px}
#accesso .acc-form{background:var(--surface);border:1px solid var(--rule2);border-radius:6px;
  padding:20px 22px}
.acc-form p{margin:0;font-size:14px;line-height:1.5;color:var(--ink3)}
.acc-form label{font:600 12px var(--disp);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink3);display:flex;flex-direction:column;gap:5px}
.acc-form input{font-family:var(--mono);font-size:14px;padding:9px 10px;border-radius:4px;
  background:var(--ground);color:var(--ink);border:1px solid var(--rule2)}
.acc-msg{margin-top:18px;padding:10px 12px;font-size:14px;line-height:1.45;border-radius:4px;
  border:1px solid var(--red);background:var(--redbg);color:var(--red)}
.acc-msg.ok{border-color:var(--teal);background:var(--tealbg);color:var(--teal)}
.acc-msg:empty{display:none}

/* il riquadro per cambiare password, sopra la pagina */
.velo{position:fixed;inset:0;background:rgba(10,14,13,.5);display:grid;place-items:center;
  padding:16px;z-index:20}
.velo.hidden{display:none}   /* .velo e' dopo .hidden di app.css: senza questa vincerebbe */
.velo .riquadro{background:var(--surface);border:1px solid var(--rule2);border-radius:6px;
  padding:20px 22px;width:min(400px,100%);box-shadow:0 12px 40px rgba(0,0,0,.25)}
.velo h2{margin:0;font:600 1.3rem var(--disp)}
.azioni{display:flex;gap:8px;flex-wrap:wrap}
.stato-db{font-family:var(--mono);font-size:11.5px;color:var(--ink3);margin-top:14px}