/* The sign-in and account-security pages (served by the API's login gate,
   api/auth2fa.go). No inline styles: the Content-Security-Policy allows
   style-src 'self' only. */
:root {
  color-scheme: dark;
  --bg: #0f1115; --panel: #161a22; --line: #2a2f3a; --fg: #e6e6e6; --muted: #9aa4b2;
  --accent: #2f6fed; --accent-fg: #fff; --bad: #ff7b72; --good: #3fb950; --warn: #d29922;
  --mono: "JetBrains Mono", Menlo, ui-monospace, monospace;
}
@media (prefers-color-scheme: light) {
  :root { color-scheme: light; --bg: #f4f5f7; --panel: #fff; --line: #d6d9df; --fg: #1d2330; --muted: #5d6675; --bad: #c62828; --good: #1a7f37; --warn: #9a6700; }
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 16px; font: 15px/1.45 system-ui, sans-serif; background: var(--bg); color: var(--fg); }
.card { width: min(380px, 100%); padding: 28px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.card.wide { width: min(560px, 100%); }
h1 { font-size: 18px; margin: 0 0 18px; }
h2 { font-size: 15px; margin: 22px 0 8px; }
p { margin: 8px 0; }
label { display: block; margin: 12px 0 4px; color: var(--muted); font-size: 13px; }
input[type=text], input[type=password], input:not([type]) { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: inherit; font: inherit; }
input.code { font-family: var(--mono); letter-spacing: 0.15em; }
button { margin-top: 18px; width: 100%; padding: 10px; border: 0; border-radius: 6px; background: var(--accent); color: var(--accent-fg); font: inherit; cursor: pointer; }
button:disabled { opacity: 0.5; cursor: default; }
button.ghost { background: transparent; color: var(--fg); border: 1px solid var(--line); }
button.danger { background: transparent; color: var(--bad); border: 1px solid var(--bad); }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.row > button { width: auto; flex: 1 1 140px; }
.err { min-height: 18px; margin-top: 12px; color: var(--bad); font-size: 13px; }
.ok { color: var(--good); }
.muted { color: var(--muted); font-size: 13px; }
.note { padding: 10px 12px; border: 1px solid var(--line); border-left: 3px solid var(--warn); border-radius: 6px; font-size: 13px; margin: 12px 0; }
.hidden { display: none !important; }
.qr { display: block; margin: 14px auto; background: #fff; border-radius: 8px; image-rendering: pixelated; width: 232px; height: 232px; }
.secret { font-family: var(--mono); font-size: 14px; word-break: break-all; padding: 8px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; user-select: all; }
details { margin-top: 10px; font-size: 13px; }
details code { font-family: var(--mono); word-break: break-all; }
ol.codes { columns: 2; font-family: var(--mono); font-size: 15px; padding-left: 28px; margin: 12px 0; }
ol.codes li { margin: 4px 0; }
.check { display: flex; gap: 8px; align-items: center; margin-top: 14px; color: var(--fg); font-size: 14px; }
.check input { width: auto; }
a { color: var(--accent); }
dl.status { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 8px 0; font-size: 14px; }
dl.status dt { color: var(--muted); }
dl.status dd { margin: 0; }