/* Inlogscherm van het DUO Wallet-dashboard. Kleuren uit DUO Wallet Theme. */
:root {
  color-scheme: light dark;
  --ink: #0D1226; --cobalt: #3350F0; --sun: #FFC53D; --green: #12A372; --paper: #F5F6FA;
  --bg: var(--paper); --card: #ffffff; --text: var(--ink); --muted: #5B6178; --line: rgba(13, 18, 38, .12); --danger: #D33A2C;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #070A16; --card: #10152B; --text: #F5F6FA; --muted: #A3A9C2; --line: rgba(245, 246, 250, .14); --cobalt: #6E86FF; }
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font: 16px/1.5 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text);
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.top { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-weight: 800; font-size: 20px; letter-spacing: -.01em; }
.top img { width: 36px; height: 36px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 28px; width: 100%; max-width: 420px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 40px rgba(13,18,38,.08); }
h1 { font-size: 22px; line-height: 1.25; margin: 0 0 6px; letter-spacing: -.01em; }
p { margin: 0 0 16px; color: var(--muted); }
label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
input { width: 100%; font: inherit; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--text); }
input:focus { outline: 2px solid var(--cobalt); outline-offset: 1px; border-color: transparent; }
input.code { font-size: 26px; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
button { font: inherit; font-weight: 600; cursor: pointer; border: 0; border-radius: 12px; padding: 12px 16px; width: 100%; margin-top: 14px; }
button.primary { background: var(--cobalt); color: #fff; }
button.primary:disabled { opacity: .6; cursor: default; }
button.link { background: none; color: var(--cobalt); padding: 6px; width: auto; margin: 10px auto 0; display: block; }
.err { color: var(--danger); font-size: 14px; min-height: 1.2em; margin: 10px 0 0; }
.dev { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.number { font-size: 64px; font-weight: 800; letter-spacing: .06em; text-align: center; margin: 8px 0 4px; font-variant-numeric: tabular-nums; color: var(--cobalt); }
.wait { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: 14px; margin-top: 8px; }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--cobalt); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
.steps { margin: 0 0 12px; padding-left: 20px; color: var(--muted); }
.steps li { margin: 4px 0; }
.foot { margin-top: 20px; font-size: 14px; color: var(--muted); text-align: center; max-width: 420px; }
.foot a { color: var(--cobalt); text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.lang { display: inline-flex; gap: 4px; margin-left: 8px; }
.lang button { width: auto; margin: 0; padding: 2px 8px; background: none; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; font-size: 12px; }
.lang button[aria-pressed="true"] { color: var(--text); border-color: var(--text); }
[hidden] { display: none !important; }