:root{
  --ink:#211E1C; --ink-soft:#6B635C; --ink-faint:#9A918A;
  --paper:#F6F3F0; --card:#FFFFFF; --line:#E5DED8; --line-soft:#F0EAE5;
  --plum:#6E2639; --plum-soft:#F6ECEE;
  --sage:#3F6B54; --sage-soft:#EDF3EF;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);color:var(--ink);
  font-family:"Instrument Sans",system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
a{color:var(--plum)}
:focus-visible{outline:2px solid var(--plum);outline-offset:2px}

/* barra in alto */
.topbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:13px 22px;background:var(--card);border-bottom:1px solid var(--line);
}
.marchio{font-family:"Instrument Serif",serif;font-size:21px;text-decoration:none;color:var(--ink)}
.negozio{font-size:14px;color:var(--ink-soft)}
.sp{flex:1}
.chi{font-size:14px;color:var(--ink-soft)}
.esci{font-size:14px;text-decoration:none;border:1px solid var(--line);padding:6px 13px;border-radius:8px;color:var(--ink)}
.esci:hover{border-color:#CFC5BD;background:#FCFAF9}
.pill{font-size:12.5px;padding:3px 11px;border-radius:100px;border:1px solid #E8D2D7;background:var(--plum-soft);color:var(--plum)}

/* pagine centrate: installazione e ingresso */
.centrata{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:34px 18px}
.scheda{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:32px 34px;width:100%;max-width:620px;
}
.scheda.stretta{max-width:400px}
.scheda h1{font-family:"Instrument Serif",serif;font-size:33px;font-weight:400;margin:0 0 4px;letter-spacing:-.2px}
.scheda h2{font-size:14px;font-weight:500;color:var(--ink-soft);margin:26px 0 12px;padding-top:18px;border-top:1px solid var(--line-soft)}
.scheda h2:first-of-type{margin-top:22px}
.sotto{color:var(--ink-soft);font-size:14px;margin:0 0 6px;max-width:56ch}

.campo{margin-bottom:14px}
.campo label{display:block;font-size:12.5px;color:var(--ink-soft);margin-bottom:5px}
.campo input,.campo select{
  width:100%;font-family:inherit;font-size:15px;color:var(--ink);
  padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#FDFCFB;
}
.campo input:focus,.campo select:focus{outline:none;border-color:var(--plum);background:#fff}
.campo small{display:block;font-size:12.5px;color:var(--ink-faint);margin-top:5px}
.riga{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* mostra/nascondi password — il pulsante lo crea app.js,
   senza JavaScript non compare e il campo resta normale */
.guscio-password{position:relative;display:block}
.campo input.con-occhio{padding-right:88px}
.occhio{
  position:absolute;top:50%;right:5px;transform:translateY(-50%);
  font-family:inherit;font-size:12.5px;line-height:1;cursor:pointer;
  color:var(--ink-soft);background:transparent;border:0;
  padding:7px 9px;border-radius:6px;min-width:74px;
}
.occhio:hover{color:var(--plum);background:var(--plum-soft)}
.occhio:focus-visible{outline-offset:-1px}

.btn{
  font-family:inherit;font-size:15px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  padding:11px 20px;border-radius:9px;
}
.btn.primario{background:var(--plum);border-color:var(--plum);color:#fff;width:100%;margin-top:10px}
.btn.primario:hover{background:#5C1F30}
.btn.largo{width:100%;margin-top:10px}
.btn.stretto{padding:7px 14px;font-size:13.5px;margin-top:12px}

.errore{
  background:#F9E9E9;border:1px solid #E4C4C4;color:#8E2A2A;
  padding:10px 14px;border-radius:9px;font-size:14px;margin:14px 0 4px;
}

/* schermata iniziale */
.contenuto{max-width:1040px;margin:0 auto;padding:34px 22px 70px}
.saluto{font-family:"Instrument Serif",serif;font-size:38px;font-weight:400;margin:0 0 2px;letter-spacing:-.3px}
.moduli{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:28px}
.modulo{
  background:var(--card);border:1px solid var(--line);border-radius:11px;
  padding:20px 20px 18px;
}
.modulo b{display:block;font-weight:500;font-size:16px;margin-bottom:2px}
.modulo span{font-size:13.5px;color:var(--ink-soft)}
.nota{
  margin-top:26px;background:var(--sage-soft);border:1px solid #CFE0D6;
  border-radius:11px;padding:16px 18px;font-size:14px;color:#2E5340;max-width:70ch;
}
.nota b{display:block;font-weight:500;margin-bottom:2px}

@media (max-width:560px){
  .riga{grid-template-columns:1fr}
  .campo input.con-occhio{padding-right:78px}
  .occhio{min-width:66px;padding:7px 6px;font-size:12px}
  .scheda{padding:24px 20px}
  .saluto{font-size:30px}
}