*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:      #0a0a1a;
      --bg-card: #12122a;
      --border:  rgba(99,102,241,.22);
      --violet:  #6a8df3; --brand-btn: #29CBEE; --brand-btn-testo: #08304A;
      --teal:    #29cbee;
      --white:   #f0f0ff;
      --muted:   #8b8bb8;
      --danger:  #f87171;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: var(--bg);
      color: var(--white);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 40px 36px;
      width: 100%;
      max-width: 400px;
      box-shadow: 0 8px 48px rgba(0,0,0,.5);
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 32px;
      justify-content: center;
      text-decoration: none;
    }

    h1 {
      font-size: 22px;
      font-weight: 600;
      margin-bottom: 6px;
      color: var(--white);
    }

    .subtitle {
      font-size: 13px;
      color: var(--muted);
      margin-bottom: 28px;
    }

    label {
      display: block;
      font-size: 12px;
      font-weight: 500;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-bottom: 6px;
    }

    input[type="text"],
    input[type="password"] {
      width: 100%;
      background: rgba(255,255,255,.05);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--white);
      font-size: 14px;
      padding: 10px 12px;
      outline: none;
      transition: border-color .2s;
      margin-bottom: 16px;
    }

    input[type="text"]:focus,
    input[type="password"]:focus { border-color: var(--violet); }

    button[type="submit"] {
      width: 100%;
      background: var(--brand-btn);
      color: var(--brand-btn-testo);
      font-size: 14px;
      font-weight: 600;
      border: none;
      border-radius: 8px;
      padding: 11px;
      cursor: pointer;
      margin-top: 4px;
      transition: opacity .2s;
    }
    button[type="submit"]:hover { opacity: .88; }
    button[type="submit"]:disabled { opacity: .5; cursor: not-allowed; }

    .error {
      background: rgba(248,113,113,.12);
      border: 1px solid rgba(248,113,113,.3);
      border-radius: 8px;
      color: var(--danger);
      font-size: 13px;
      padding: 10px 12px;
      margin-bottom: 16px;
      display: none;
    }
    .error.visible { display: block; }

    /* Avviso neutro (non è un errore): serve a chi è appena entrato con un codice di
       recupero. Stessi colori già dichiarati qui sopra — nessuna tinta nuova. */
    .avviso {
      background: rgba(41,203,238,.10);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--white);
      font-size: 13px;
      line-height: 1.5;
      padding: 12px;
      margin-bottom: 16px;
      display: none;
    }
    .avviso.visible { display: block; }
    .avviso a { color: var(--teal); font-weight: 600; }

    /* La riga di spiegazione sotto il campo del codice. */
    .hint { font-size: 12px; color: var(--muted); line-height: 1.5; margin: -10px 0 16px; }

    .footer-link {
      margin-top: 20px;
      text-align: center;
      font-size: 13px;
      color: var(--muted);
    }
    .footer-link a { color: var(--teal); text-decoration: none; font-weight: 500; }
    .footer-link a:hover { text-decoration: underline; }
  

/* logo (era uno style in linea: la CSP stretta non li ammette) */
.logo-lockup { height:30px; width:auto; display:block; }

/* [16/10] Scelta della lingua (i18n.js) */
.scelta-lingua{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.scelta-lingua-voce{font:inherit;font-size:13px;padding:5px 14px;border-radius:999px;border:1px solid #d1d5db;background:#fff;color:#374151;cursor:pointer}
.scelta-lingua-voce:hover{border-color:#0A7189}
.scelta-lingua-voce.attiva{background:#e6f8fd;border-color:#a5e4f6;color:#08304A;font-weight:600;cursor:default}
/* sul fondo scuro della pagina di accesso */
.scelta-lingua-voce{background:transparent;color:#cbd5e1;border-color:rgba(255,255,255,.22)}
.scelta-lingua-voce:hover{border-color:#29cbee}
.scelta-lingua-voce.attiva{background:rgba(41,203,238,.16);color:#e6f8fd;border-color:#29cbee}