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

    :root { --accent-testo: #0A7189;
      --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;
      --success: #34d399;
    }

    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: 420px;
      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` E BASTA, senza elencare i tipi. L'elenco c'era — text, email, password —
       e il 24/09 ha morso: il campo Telefono, nato `type="tel"`, non era in lista e quindi
       non riceveva NIENTE. Si vedeva come sfondo bianco, ma il guaio peggiore era
       invisibile: senza il `margin-bottom` della regola, quel campo era piu' basso degli
       altri e finiva spinto in fondo alla cella, lontano dalla sua etichetta.
       Un elenco di tipi e' una lista che qualcuno deve ricordarsi di aggiornare ogni volta
       che nasce un campo nuovo — e nessuno se ne ricorda, perche' il campo «funziona»:
       si scrive dentro, il modulo parte, e solo l'aspetto dice che qualcosa non va. */
    input {
      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[readonly] { opacity: .6; cursor: default; }

    input:not([readonly]):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; }

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

    #loading { text-align: center; padding: 16px 0; color: var(--muted); font-size: 13px; }
    /* ⚠️ Le regole si dicono PRIMA, non dopo il rifiuto: una password respinta dopo averla
       scelta e digitata due volte fa ripartire da capo chi si sta registrando. */
    /* [20/10] L'elenco con le spunte: voce grigia finché manca, verde con ✓ quando c'è. */
    .regole-password { list-style: none; font-size: 12px; color: var(--muted); margin: 8px 0 14px; line-height: 1.7; }
    .regole-password li::before { content: "○"; display: inline-block; width: 18px; }
    .regole-password li.ok { color: var(--success); }
    .regole-password li.ok::before { content: "✓"; font-weight: 700; }
    #formArea { display: none; }
    #richiestaArea { display: none; }
    #shopifyArea { display: none; }   /* [15/10] registrazione da Shopify */
    /* ⚠️ Due campi per riga sopra i 460px, uno sotto: il modulo ha cinque campi, e in
       colonna su un telefono il pulsante finisce sotto la piega — cioe' esattamente dove
       non lo si vede. */
    .coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
    /* ⚠️ I due campi affiancati si allineano SUL CAMPO, non sull'alto della cella. Basta
       che un'etichetta vada a capo — «Telefono (facoltativo)» lo faceva — perche' il campo
       sotto scenda di una riga e i due sembrino storti. Con la colonna flessibile e il
       campo spinto in basso, restano allineati comunque vada l'etichetta. */
    .coppia > div { display: flex; flex-direction: column; }
    .coppia > div input { margin-top: auto; }
    @media (max-width: 460px) { .coppia { grid-template-columns: 1fr; } }
    textarea {
      width: 100%; box-sizing: border-box; background: var(--input-bg);
      border: 1px solid var(--border); border-radius: 8px; color: var(--text);
      font-family: inherit; font-size: 14px; padding: 10px 12px; margin-bottom: 14px;
      min-height: 76px; resize: vertical;
    }
    textarea:focus { outline: none; border-color: var(--accent-testo); }
    .nota-privacy { font-size: 11.5px; color: var(--muted); line-height: 1.55; margin: 2px 0 16px; }
    .nota-privacy a { color: var(--accent-testo); }
  

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

/* [14/10] Password con l'occhio per vederla */
.campo-password{position:relative}
.campo-password input{padding-right:44px}
.campo-password .occhio{position:absolute;right:6px;top:calc(50% - 8px);transform:translateY(-50%);background:none;border:0;
  font-size:17px;cursor:pointer;padding:4px 6px;line-height:1;border-radius:6px}
.campo-password .occhio:focus-visible{outline:2px solid #0A7189;outline-offset:1px}

/* [14/10] Consenso al trattamento dei dati */
.consenso{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.5;margin:4px 0 16px;cursor:pointer}
.consenso input{width:auto;margin:3px 0 0;flex:none}
.consenso a{color:inherit}

/* [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}