:root {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #1d2433;
    background: #f5f7fb;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
.shell { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }
.card { width: min(100%, 460px); background: #fff; border: 1px solid #dfe4ee; border-radius: 14px; padding: 30px; box-shadow: 0 20px 50px rgba(27,39,67,.08); }
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.brand-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: #1e4fbf; color: white; font-weight: 800; }
h1 { font-size: 1.55rem; margin: 0 0 8px; }
p { line-height: 1.5; }
.small { font-size: .82rem; }
.muted { color: #667085; }
form { display: grid; gap: 10px; margin: 18px 0; }
label { font-size: .9rem; font-weight: 650; margin-top: 4px; }
input { width: 100%; border: 1px solid #cfd6e2; border-radius: 8px; padding: 11px 12px; font: inherit; background: #fff; color: #111827; }
input:focus { outline: 2px solid #a9c0f5; border-color: #456ec7; }
button, .button { appearance: none; display: inline-flex; justify-content: center; align-items: center; border: 0; border-radius: 8px; padding: 11px 14px; font: inherit; font-weight: 700; background: #1e4fbf; color: white; text-decoration: none; cursor: pointer; }
button.secondary, .button.secondary { background: #eef2f8; color: #22304b; }
.link { display: inline-block; color: #1e4fbf; text-decoration: none; margin-top: 8px; }
.alert { border-radius: 8px; background: #fff0f0; color: #8b1d1d; padding: 11px 12px; margin: 14px 0; line-height: 1.4; }
.alert.success { background: #edf9f0; color: #166534; }
.field-error { color: #b42318; font-size: .84rem; }
.stack { display: grid; gap: 10px; margin: 18px 0; }
.account { width: 100%; display: grid; justify-items: start; gap: 2px; text-align: left; background: #f2f5fa; color: #1d2433; border: 1px solid #dfe4ee; }
.account span { font-weight: 400; color: #667085; font-size: .88rem; }
.secret, .codes { display: grid; gap: 7px; border: 1px solid #dfe4ee; border-radius: 8px; padding: 12px; margin: 16px 0; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.wrap { overflow-wrap: anywhere; display: block; margin: 10px 0; }
details { margin: 14px 0; }
@media (prefers-color-scheme: dark) {
    :root { color: #e8edf5; background: #10141c; }
    .card { background: #171c25; border-color: #2c3442; box-shadow: none; }
    .muted { color: #9ba8ba; }
    input { background: #10141c; color: #e8edf5; border-color: #3a4557; }
    button.secondary, .button.secondary, .account { background: #222a37; color: #e8edf5; border-color: #394455; }
    .account span { color: #9ba8ba; }
    .secret, .codes { border-color: #394455; }
}