/* Pagine d'accesso di Freeboard (login, installazione, uscita, consenso del connettore, ritorno dalla
   banca): stesso mondo «Linee d'acqua» dell'app (stile-linee.css, accesso.css di Bilancio) con il marchio
   di Freeboard. Laguna di notte (scuro) e di giorno (chiaro), superfici piatte con un filo, Overpass per il
   testo, campi con bordo da 2px, pulsanti a pillola con l'azione principale in smalto pieno; il simbolo e
   il nome di Freeboard (Overpass, come il logo) in alto. Il tema arriva dallo script nell'<head> (scelta salvata, altrimenti
   ?tema=, altrimenti il sistema). Token copiati da stile-linee.css: se cambiano lì, qui uguali. */
:root {
  color-scheme: dark;
  --font: "Overpass", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mark: "Overpass", system-ui, sans-serif;
  --bg: #0b1c4b; --surface: #0e2257; --surface-2: #14286a; --hair: #26407f;
  --control: #8c9ccb; --ink: #f4f0e6; --ink-2: #cbd4ef; --ink-3: #b2bee3;
  --accent-ink: #b9ccff; --crit-ink: #ffb0a8; --focus-ring: #f4f0e6;
  --btn-bg: #f4f0e6; --btn-ink: #0b1533;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #edf1f7; --surface: #fbfaf5; --surface-2: #eef0f5; --hair: #cdd4e4;
  --control: #5a6690; --ink: #0b1533; --ink-2: #26325a; --ink-3: #3a466f;
  --accent-ink: #1a43a0; --crit-ink: #9c1c1c; --focus-ring: #0b1533;
  --btn-bg: #0e2257; --btn-ink: #f4f0e6;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #edf1f7; --surface: #fbfaf5; --surface-2: #eef0f5; --hair: #cdd4e4;
    --control: #5a6690; --ink: #0b1533; --ink-2: #26325a; --ink-3: #3a466f;
    --accent-ink: #1a43a0; --crit-ink: #9c1c1c; --focus-ring: #0b1533;
    --btn-bg: #0e2257; --btn-ink: #f4f0e6;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { accent-color: var(--ink); caret-color: var(--ink); }
::selection { background: var(--ink); color: var(--bg); }
body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.5; word-spacing: .03em;
  -webkit-font-smoothing: antialiased; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

.card { background: var(--surface); border: 1px solid var(--hair); border-radius: 14px; padding: 32px 28px; width: 100%; max-width: 400px; }
.card.wide { max-width: 480px; }
.card.center { text-align: center; }
.card.center > p { margin-bottom: 18px; }

/* Marchio: simbolo di Freeboard e nome nella lettera del logo */
.logo { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.logo img { flex: none; }
.wordmark { font-family: var(--font-mark); font-size: 26px; font-weight: 740; letter-spacing: -.01em; line-height: 1.1; }
.tagline { font-size: 13.5px; color: var(--ink-2); margin-top: 2px; }
h1 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; margin-bottom: 14px; }

p { color: var(--ink); margin-bottom: 16px; }
.lead { margin-bottom: 12px; }
ul { margin: 0 0 14px 20px; }
li { margin-bottom: 6px; color: var(--ink-2); }
li::marker { color: var(--ink-3); }
.muted { color: var(--ink-2); }
.small { font-size: 13.5px; margin-bottom: 18px; }
.hint { font-size: 13.5px; color: var(--ink-2); text-align: center; margin-top: 20px; }
.hint a { text-decoration: none; } .hint b { color: var(--ink); }
small { color: var(--ink-2); font-size: 13px; display: block; margin: -10px 0 14px; }
code { font-size: 13px; background: var(--surface-2); border-radius: 6px; padding: 1px 5px; }

/* Etichette in minuscolo come nell'app (niente maiuscolo spaziato) */
label { display: block; font-size: 14px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
input[type=text], input[type=password], input[type=url], input:not([type]), select { width: 100%; min-height: 48px; background: var(--surface); border: 2px solid var(--control); border-radius: 10px;
  color: var(--ink); font: inherit; font-size: 16px; padding: 10px 12px; margin-bottom: 16px; }
:is(input[type=text], input[type=password], input[type=url], input:not([type]), select):hover { border-color: var(--ink-2); }
:is(input[type=text], input[type=password], input[type=url], input:not([type]), select):focus-visible { outline-offset: 2px; border-color: var(--ink); }
fieldset { border: 1px solid var(--hair); border-radius: 12px; padding: 14px 16px 4px; margin-bottom: 18px; }
legend { font-size: 13.5px; font-weight: 700; color: var(--ink-2); padding: 0 6px; }
.remember-row { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; min-height: 44px; }
.remember-row input[type=checkbox] { width: 20px; height: 20px; margin: 0; flex: none; cursor: pointer; }
.remember-row label { font-size: 14px; font-weight: 500; color: var(--ink-2); margin: 0; cursor: pointer; }

/* Pulsanti a pillola con il bordo da 2px; l'azione principale in smalto pieno */
button, .btn { display: block; width: 100%; min-height: 48px; border-radius: 999px; border: 2px solid var(--btn-bg); background: var(--btn-bg); color: var(--btn-ink);
  font: inherit; font-size: 16px; font-weight: 800; padding: 10px 18px; cursor: pointer; margin-top: 8px; text-align: center; text-decoration: none;
  transition: border-color .2s cubic-bezier(.16, 1, .3, 1); }
button:hover, .btn:hover { border-color: var(--ink); }
button:active, .btn:active { transform: scale(.98); }
button.secondary { background: transparent; border-color: var(--control); color: var(--ink); font-weight: 700; }
button.secondary:hover { border-color: var(--ink); background: var(--surface-2); }
@media (prefers-reduced-motion: reduce) { button, .btn { transition: none; } button:active, .btn:active { transform: none; } }

a { color: var(--accent-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a.btn { color: var(--btn-ink); }
.card > a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; margin-top: 10px; }

/* Errori e avvisi: filo e fondo tinti, testo nell'inchiostro normale (mai solo colore: la frase dice cosa fare) */
.error { background: color-mix(in srgb, var(--crit-ink) 14%, var(--surface)); border: 1px solid var(--crit-ink); border-radius: 10px;
  color: var(--ink); font-size: 14px; padding: 10px 12px; margin-bottom: 16px; overflow-wrap: anywhere; }
.error b { font-weight: 800; }
p.error { margin-bottom: 18px; }
.ok { background: var(--surface-2); border: 1px solid var(--hair); border-radius: 10px; color: var(--ink); font-size: 14px; padding: 12px; margin-bottom: 16px; }

/* Demo: ingresso principale, separato dall'accesso (audit FD27) */
.demo-cta { margin-top: 4px; }
.demo-note { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-2); text-align: center; }
.or { display: flex; align-items: center; gap: 10px; margin: 22px 0 10px; font-size: 13.5px; color: var(--ink-2); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--hair); }

@media (max-width: 420px) { .card { padding: 26px 20px; } body { font-size: 16px; } }