/* Pagine d'accesso di Flusso (login, installazione, uscita, consenso del connettore, ritorno dalla
   banca): mondo «Delta» come l'app (acqua notturna con linee di livello, carta di rilievo nel chiaro),
   Archivo, schede a doppia cornice, chiare o scure come il sistema. */
:root {
  color-scheme: dark;
  --bg: #0a1120; --surface: #111a2c; --surface-2: #17223a; --hair: rgba(150,180,255,.09); --control: #6d7c9b;
  --ink: #eef3fb; --ink-2: #b4c0d6; --ink-3: #8592ad; --accent: #3a8cf6; --accent-ink: #80baff;
  --crit: #f07272; --crit-bg: rgba(208,59,59,.14); --ok-bg: rgba(58,140,246,.12);
  --shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 5px rgba(120,160,255,.028), 0 0 0 6px rgba(150,185,255,.055), 0 30px 60px -32px rgba(0,0,0,.7);
  --ground: radial-gradient(70vw 60vh at 8% -12%, rgba(15,147,160,.22), transparent 70%), radial-gradient(60vw 60vh at 104% 108%, rgba(21,101,240,.20), transparent 70%);
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #f3f6fb; --surface: #ffffff; --surface-2: #eef3f9; --hair: rgba(12,26,51,.09); --control: #7784a0;
    --ink: #0c1a33; --ink-2: #43506a; --ink-3: #5b6780; --accent: #1565f0; --accent-ink: #0f52c6;
    --crit: #b02a2a; --crit-bg: #fdecec; --ok-bg: #e8f0fe;
    --bg: #eef2f6;
    --shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 5px rgba(12,26,51,.022), 0 0 0 6px rgba(12,26,51,.06), 0 26px 50px -30px rgba(12,26,51,.22);
    --ground: radial-gradient(70vw 60vh at 8% -12%, rgba(98,230,176,.18), transparent 70%), radial-gradient(60vw 60vh at 104% 108%, rgba(63,198,246,.16), transparent 70%);
  }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--ground), var(--bg); background-attachment: fixed; font-family: 'Archivo', system-ui, sans-serif; font-variant-numeric: tabular-nums; color: var(--ink); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; font-size: 14px; line-height: 1.5; }
.card { background: var(--surface); border: 1px solid var(--hair); border-radius: 22px; padding: 36px 32px; width: 100%; max-width: 400px; box-shadow: var(--shadow); }
.card.wide { max-width: 480px; }
.logo { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.wordmark { font-family: 'Outfit', 'Archivo', sans-serif; font-size: 26px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; }
.tagline { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
h1 { font-family: 'Archivo', sans-serif; font-size: 24px; font-weight: 650; font-stretch: 90%; letter-spacing: -0.02em; margin-bottom: 8px; }
p { color: var(--ink-2); margin-bottom: 16px; }
label { display: block; font-size: 11px; font-weight: 600; font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
input[type=text], input[type=password], input:not([type]), input[type=url], select { width: 100%; background: var(--surface-2); border: 1px solid var(--control); border-radius: 14px; color: var(--ink); font: inherit; font-size: 16px; padding: 10px 14px; margin-bottom: 18px; min-height: 46px; }
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
button, .btn { display: block; width: 100%; min-height: 44px; background: linear-gradient(120deg, #1565f0, #1a73d9); border: 0; border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 22px -12px rgba(21,101,240,.85); color: #fff; font: inherit; font-size: 15px; font-weight: 600; padding: 11px; cursor: pointer; margin-top: 6px; text-align: center; text-decoration: none; }
button:hover, .btn:hover { filter: brightness(1.08); }
button:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.secondary { background: transparent; border: 1px solid var(--control); color: var(--ink-2); }
.error { background: var(--crit-bg); border-radius: 12px; color: var(--crit); font-size: 13px; padding: 10px 12px; margin-bottom: 16px; }
.ok { background: var(--ok-bg); border-radius: 12px; color: var(--ink); font-size: 13px; padding: 12px; margin-bottom: 16px; }
.hint { font-size: 12px; color: var(--ink-3); text-align: center; margin-top: 18px; }
a { color: var(--accent-ink); }
.hint a { text-decoration: none; } .hint b { color: var(--ink); }
small { color: var(--ink-3); font-size: 12px; display: block; margin: -10px 0 14px; }
fieldset { border: 1px solid var(--hair); border-radius: 12px; padding: 14px; margin-bottom: 16px; }
legend { font-size: 12px; color: var(--ink-3); padding: 0 6px; }
.remember-row { display: flex; align-items: center; gap: 10px; margin: 2px 0 14px; min-height: 44px; cursor: pointer; user-select: none; }
.remember-row input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); margin: 0; }
.remember-row label { font-size: 13px; font-weight: 400; margin: 0; cursor: pointer; text-transform: none; letter-spacing: 0; font-stretch: 100%; color: var(--ink-2); }
ul { margin: 0 0 12px 18px; } li { color: var(--ink-2); margin-bottom: 4px; }
.lead { color: var(--ink); margin-bottom: 10px; } .muted { color: var(--ink-3); } .small { font-size: 12px; }
code { font-size: 12px; background: var(--surface-2); border-radius: 6px; padding: 1px 5px; }
/* Demo: ingresso principale, separato dall'accesso (audit FD27) */
.demo-cta { margin-top: 18px; }
.demo-cta .btn { display: block; }
.demo-note { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-2); text-align: center; }
.or { display: flex; align-items: center; gap: 10px; margin: 22px 0 6px; font-size: 12.5px; color: var(--ink-3); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--hair, rgba(127,127,127,.3)); }