/* Pagine della porta (accesso, account): stesso tema scuro «sala operativa» della plancia */
:root {
  color-scheme: dark;
  --bg: #0a0d11; --grid: rgba(120, 150, 175, 0.055); --panel: #10151b; --panel-2: #151b23;
  --line: rgba(150, 175, 200, 0.13); --line-2: rgba(150, 175, 200, 0.22);
  --ink: #e4eaf0; --ink-2: #a8b3bf; --muted: #6f7b88;
  --accent: #2fc2c7; --accent-ink: #062226; --accent-soft: rgba(47, 194, 199, 0.14);
  --amber: #f0a43a; --bad: #e5534b; --good: #3fb950;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px; color: var(--ink); font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased;
  display: grid; place-items: center; min-height: 100vh; min-height: 100dvh;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}
.scheda { width: min(380px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 26px 24px; }
.scheda.larga { width: min(560px, 100%); }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: 0.18em; font-size: 13px; margin-bottom: 4px; }
.logo i { width: 11px; height: 11px; border: 2px solid var(--accent); transform: rotate(45deg); display: inline-block; }
.sotto { color: var(--muted); font-size: 12.5px; margin: 0 0 20px; }
label { display: block; font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 14px 0 6px; }
input { width: 100%; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 6px; color: var(--ink); font: inherit; padding: 9px 11px; outline: none; }
input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input.codice { font-family: var(--mono); letter-spacing: 0.3em; font-size: 18px; text-align: center; }
button { margin-top: 18px; width: 100%; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 6px; padding: 10px; font: 600 14px var(--sans); cursor: pointer; }
button.secondario { background: transparent; color: var(--ink-2); border: 1px solid var(--line-2); }
button:disabled { opacity: 0.6; cursor: wait; }
.errore { color: var(--bad); font-size: 13px; min-height: 20px; margin-top: 12px; }
.ok { color: var(--good); font-size: 13px; margin-top: 12px; }
.nascosto { display: none; }
.riga { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.riga span:first-child { color: var(--muted); }
pre, code { font-family: var(--mono); font-size: 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; }
pre { padding: 10px; white-space: pre-wrap; word-break: break-all; }
code { padding: 1px 5px; }
a { color: var(--accent); text-decoration: none; }
.piede { margin-top: 18px; font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; }
.qr { background: #fff; padding: 8px; border-radius: 8px; width: fit-content; margin: 6px 0 10px; }
.qr svg { display: block; width: 200px; height: 200px; }

/* telefono: campi a 16 px (iOS non ingrandisce la pagina), pulsanti più alti */
@media (max-width: 760px) { input { font-size: 16px; padding: 11px 12px; } button { padding: 13px; font-size: 15px; } }