.login-body {
    --auth-bg: #f3f5f8; --auth-surface: #ffffff; --auth-input: #f8f9fc;
    --auth-text: #202e43; --auth-muted: #617087; --auth-border: #d8dfe9;
    --auth-accent: #28466f; --auth-button-text: #ffffff;
    --accent: var(--auth-accent); --border: var(--auth-border); --muted: var(--auth-muted);
    margin: 0; min-height: 100vh; color: var(--auth-text); background: var(--auth-bg);
}
:root[data-theme="dark"] .login-body {
    --auth-bg: var(--theme-bg); --auth-surface: var(--theme-surface); --auth-input: var(--theme-input);
    --auth-text: var(--theme-text); --auth-muted: var(--theme-muted); --auth-border: var(--theme-border);
    --auth-accent: var(--theme-accent); --auth-button-text: var(--theme-bg);
}
.auth-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1280px; margin: 0 auto; padding: 24px 32px; color: var(--auth-muted); font-size: 12px; }
.auth-toolbar .theme-toggle { color: var(--auth-text); border-color: var(--auth-border); }
.login-page { display: grid; place-items: center; min-height: calc(100svh - 100px); padding: 24px 20px 64px; }
.login-card { width: 100%; max-width: 440px; padding: 36px; border: 1px solid var(--auth-border); border-radius: 18px; background: var(--auth-surface); box-shadow: 0 20px 60px #0000000a; }
.login-logo { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 20px; border: 1px solid var(--auth-border); border-radius: 12px; color: var(--auth-accent); background: var(--auth-input); }
.login-logo svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.login-brand { display: block; margin-bottom: 22px; font-size: 32px; line-height: 1; font-weight: 800; letter-spacing: -1.5px; }
.login-brand::after { content: '.'; color: var(--auth-accent); }
.login-card h1 { margin: 0 0 10px; font-size: 24px; line-height: 1.25; letter-spacing: -.6px; }
.login-card p { margin: 0 0 26px; color: var(--auth-muted); font-size: 13px; line-height: 1.7; }
.login-card label { display: grid; gap: 9px; margin: 20px 0; color: var(--auth-text); font-size: 12px; font-weight: 600; }
.login-body .login-card input { width: 100%; min-width: 0; min-height: 46px; padding: 12px 14px; border: 1px solid var(--auth-border); border-radius: 8px; background: var(--auth-input); color: var(--auth-text); font: inherit; font-size: 16px; }
.login-body .login-card input:focus { outline: none; border-color: var(--auth-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--auth-accent) 16%, transparent); }
.login-body .login-card input[readonly] { font-family: ui-monospace, monospace; font-size: 12px; color: var(--auth-muted); }
.login-body .login-card input[name="code"] { letter-spacing: .15em; font-family: ui-monospace, monospace; }
.login-card button[type="submit"] { width: 100%; min-height: 46px; margin-top: 8px; padding: 12px 18px; border: 1px solid var(--auth-accent); border-radius: 8px; background: var(--auth-accent); color: var(--auth-button-text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.login-card button[type="submit"]:hover { filter: brightness(1.08); }
.login-secondary-link { display: block; margin-top: 24px; text-align: center; color: var(--auth-accent); font-size: 12px; }
.login-error,.login-success { padding: 13px 15px; margin: 20px 0; border: 1px solid; border-radius: 9px; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.login-error { background: #fff0ed; color: #922c2a; border-color: #eab9b2; }
.login-success { background: #eef3fc; color: #28466f; border-color: #bacbe6; }
:root[data-theme="dark"] .login-error { background: #402726; color: #ffc1b8; border-color: #87534b; }
:root[data-theme="dark"] .login-success { background: var(--theme-raised); color: var(--theme-text); border-color: var(--theme-border); }
.login-card .settings-code { max-width: 100%; padding: 18px; border: 1px solid var(--auth-border); border-radius: 9px; background: var(--auth-input); color: var(--auth-text); overflow-x: auto; font-size: 14px; line-height: 1.9; }
@media(max-width: 560px) { .auth-toolbar { padding: 18px 20px; } .login-page { padding: 12px 16px 36px; min-height: calc(100svh - 84px); } .login-card { padding: 28px 22px; border-radius: 14px; } }