:root { color-scheme: light; --testo: #141a26; --testo-2: #5d6879; --accento: #4b5cf0; --accento-2: #7a5af8; --linea: rgba(20, 30, 55, .14); --campo: #fff; --vetro: rgba(255, 255, 255, .78); --err: #c62845; --ok: #0f8a59; --fondo: #e8ecf4; }
@media (prefers-color-scheme: dark) { :root { color-scheme: dark; --testo: #eef1f7; --testo-2: #9ba4b6; --accento: #7383ff; --accento-2: #a68bfa; --linea: rgba(255, 255, 255, .14); --campo: rgba(255, 255, 255, .06); --vetro: rgba(24, 26, 33, .78); --err: #ff6b83; --ok: #3ddc97; --fondo: #0a0c11; } }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; font: 15px/1.5 "Segoe UI", system-ui, sans-serif; color: var(--testo);
  background: radial-gradient(60% 60% at 15% 20%, #9fb6ff55, transparent), radial-gradient(50% 50% at 85% 80%, #cdb0ff55, transparent), var(--fondo); }
.riquadro { width: min(420px, 100%); background: var(--vetro); backdrop-filter: blur(22px) saturate(170%); border: 1px solid var(--linea); border-radius: 22px; padding: 28px; box-shadow: 0 24px 64px -24px rgba(16, 24, 40, .35); }
.marchio { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.logo .segno { width: 62%; height: 62%; }
.logo { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; color: #fff; font-weight: 800; background: linear-gradient(135deg, var(--accento), var(--accento-2)); }
h1 { margin: 0; font-size: 22px; } h2 { font-size: 17px; margin: 6px 0 12px; }
.sotto, .piccolo, .piede { color: var(--testo-2); margin: 2px 0; } .piccolo, .piede { font-size: 13px; } .piede { margin-top: 18px; }
label { display: block; font-size: 13px; color: var(--testo-2); margin: 10px 0; }
input { display: block; width: 100%; margin-top: 4px; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--linea); background: var(--campo); color: var(--testo); font: inherit; }
input:focus { outline: 2px solid var(--accento); outline-offset: 1px; } input[readonly] { opacity: .7; }
button { width: 100%; margin-top: 14px; padding: 11px; border: 0; border-radius: 12px; color: #fff; font: 600 15px inherit; font-family: inherit; cursor: pointer; background: linear-gradient(135deg, var(--accento), var(--accento-2)); }
button:disabled { opacity: .6; cursor: wait; }
a { color: var(--accento); }
.messaggio { padding: 10px 12px; border-radius: 11px; font-size: 14px; margin-bottom: 8px; border: 1px solid; }
.messaggio.errore { color: var(--err); border-color: currentColor; background: color-mix(in srgb, var(--err) 8%, transparent); }
.messaggio.ok { color: var(--ok); border-color: currentColor; background: color-mix(in srgb, var(--ok) 8%, transparent); }