@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600&family=Domine:wght@400&display=swap');
  body{background:var(--fondo);color:var(--inchiostro);font-family:'IBM Plex Sans',sans-serif;
    display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;
    margin:0;padding:20px;box-sizing:border-box}
  .scatola{background:#fff;border:1px solid var(--bordo);border-radius:16px;box-sizing:border-box;
    padding:34px;width:100%;max-width:360px;box-shadow:0 14px 40px rgba(50,40,35,.1);text-align:center}
  .logo{width:72px;height:72px;display:block;margin:0 auto 12px}
  h1{font-family:'Domine',serif;font-size:26px;margin:0 0 20px;font-weight:400;color:var(--inchiostro)}
  input{font:inherit;width:100%;box-sizing:border-box;border:1px solid var(--bordo);
    border-radius:8px;padding:11px 12px;margin-bottom:12px;text-align:center}
  input:focus{outline:2px solid var(--accento)}
  button{font:inherit;width:100%;background:var(--accento);color:#fff;border:none;
    border-radius:8px;padding:11px;cursor:pointer}
  button:hover{filter:brightness(1.06)}
  .errore{color:var(--rischio);font-size:13.5px;margin-bottom:12px}
  .ricorda{display:flex;align-items:center;justify-content:center;gap:7px;
    font-size:13.5px;color:var(--tenue);margin-bottom:14px;cursor:pointer}
  .ricorda input{width:auto;margin:0;accent-color:var(--accento)}

/* ============================================================
   AGGIUNTA DI FLORIS 3
   Fin qui il CSS e' quello della pagina di accesso di Floris 2,
   riga per riga. Da qui in giu' ci sono solo le regole per gli
   elementi che in Floris 2 non c'erano: la vetrina, i campi con
   etichetta (registrazione e password nuova), gli avvisi, le
   note legali e la pagina di diagnostica.
   ============================================================ */

.scatola.larga{max-width:560px;text-align:left}
h2{font-family:'Domine',serif;font-weight:400;font-size:17px;margin:22px 0 8px}
p{color:var(--grigio-testo);margin:0 0 10px;line-height:1.55}
.mini{font-size:12.5px;color:var(--tenue)}
a{color:var(--accento-scuro)}

/* campi con etichetta: qui il testo va a sinistra, non centrato */
label.campo{display:block;text-align:left;margin-bottom:12px}
label.campo span{display:block;font-size:12.5px;color:var(--tenue);margin-bottom:4px}
label.campo input{text-align:left;margin-bottom:0}

/* avvisi: rischio per gli errori, verde per le conferme */
.avviso{font-size:13.5px;margin-bottom:12px;padding:9px 11px;border-radius:8px;text-align:left}
.avviso.male{color:var(--rischio);background:#fbf0ee;border:1px solid #f0d9d5}
.avviso.bene{color:var(--verde);background:#eef4ef;border:1px solid #d7e6da}

/* pulsante secondario: traccia, non pieno (famiglia "fantasma") */
.fantasma{background:transparent;color:var(--accento-scuro);border:1px solid var(--bordo);
  font-weight:400}
.fantasma:hover{background:var(--accento-chiarissimo);border-color:var(--accento)}

.pila{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.pila a{text-decoration:none}
.sotto{margin-top:16px;font-size:13.5px;color:var(--tenue)}
.sotto a{margin:0 3px}

/* diagnostica (/stato): solo in sviluppo */
table{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:6px;text-align:left}
th,td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--bordo);vertical-align:top}
th{font-weight:600;width:38%;color:var(--inchiostro)}
td{color:var(--grigio-testo)}
.si{color:var(--verde);font-weight:600}
.no{color:var(--rischio);font-weight:600}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  background:var(--accento-chiarissimo);padding:1px 5px;border-radius:5px}