:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; color: #172033; background: #fff; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at -5% 68%, #eef4ff 0 11rem, transparent 11.1rem), radial-gradient(circle at 105% 34%, #eef4ff 0 13rem, transparent 13.1rem), #fff; }
.shell { min-height: 100vh; display: grid; place-items: center; padding: 48px 24px; }
.login-panel { width: min(100%, 390px); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #172033; font-weight: 760; font-size: 24px; letter-spacing: -0.04em; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; color: #fff; background: #2457e6; border-radius: 8px; font-size: 23px; line-height: 1; }
header { margin: 44px 0 30px; }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(32px, 6vw, 40px); letter-spacing: -0.055em; line-height: 1.12; }
header p { margin-top: 12px; color: #64748b; font-size: 15px; line-height: 1.65; }
label, h2 { display: block; color: #253047; font-size: 14px; font-weight: 680; }
input { width: 100%; height: 48px; margin-top: 9px; padding: 0 13px; color: #172033; background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; font: inherit; font-size: 15px; outline: none; transition: border-color .16s ease, box-shadow .16s ease; }
input::placeholder { color: #94a3b8; }
input:focus { border-color: #2457e6; box-shadow: 0 0 0 3px #dbe7ff; }
.security-label { margin-top: 19px; color: #253047; font-size: 14px; font-weight: 680; }
.turnstile { min-height: 65px; margin: 9px 0 18px; }
button { width: 100%; min-height: 48px; border: 0; border-radius: 8px; color: #fff; background: #2457e6; font: 650 15px/1 inherit; cursor: pointer; transition: background .16s ease, transform .16s ease; }
button:hover { background: #1d49c7; }
button:active { transform: translateY(1px); }
button:disabled { cursor: wait; opacity: .62; }
.text-button { margin-top: 18px; min-height: auto; color: #2457e6; background: transparent; }
.text-button:hover { color: #1d49c7; background: transparent; }
.code-panel { margin-top: 30px; }
.divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin-bottom: 30px; color: #94a3b8; font-size: 13px; }
.divider::before, .divider::after { height: 1px; background: #e2e8f0; content: ""; }
.code-panel > p { margin-top: 8px; color: #64748b; font-size: 14px; line-height: 1.5; }
.code-inputs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 20px 0; }
.code-inputs input { min-width: 0; height: 50px; margin: 0; padding: 0; text-align: center; font-size: 22px; font-variant-numeric: tabular-nums; }
.status { min-height: 22px; margin-top: 18px; color: #64748b; font-size: 14px; line-height: 1.5; }
.status[data-state="error"] { color: #b42318; }
.status[data-state="success"] { color: #087443; }
.privacy { margin-top: 32px; color: #64748b; font-size: 12px; line-height: 1.65; }
@media (max-width: 520px) { body { background: #fff; } .shell { align-items: start; padding: 36px 24px 48px; } header { margin-top: 38px; } .login-panel { width: 100%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; } }