:root { color-scheme: light; --blue:#0a84ff; --ink:#1d1d1f; --muted:#77777e; }
* { box-sizing:border-box; }
html,body { min-height:100%; margin:0; }
body { background:radial-gradient(circle at 50% -10%,#fff 0,#f5f5f7 47%,#ececf0 100%); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
[hidden] { display:none!important; }
.auth-shell { display:grid; min-height:100vh; place-items:center; padding:32px 20px; }
.auth-card { width:min(100%,440px); border:1px solid rgba(20,20,25,.07); border-radius:30px; background:rgba(255,255,255,.88); box-shadow:0 28px 80px rgba(25,28,38,.12); padding:38px; backdrop-filter:blur(28px); }
.setup-card { width:min(100%,600px); }
.auth-header { margin-bottom:28px; text-align:center; }
.brand-mark { display:grid; width:54px; height:54px; margin:0 auto 13px; place-items:center; border-radius:17px; background:linear-gradient(145deg,#2695ff,#006ad7); box-shadow:0 10px 25px rgba(10,132,255,.25); color:#fff; font-size:18px; font-weight:750; letter-spacing:-.05em; }
.auth-brand { margin:0 0 24px; color:#5c5c63; font-size:13px; font-weight:650; }
.auth-header h1 { margin:0; font-size:32px; font-weight:730; letter-spacing:-.045em; }
.auth-header>p:last-child { margin:9px auto 0; max-width:420px; color:var(--muted); font-size:13px; line-height:1.5; }
.auth-form { display:grid; gap:16px; }
.auth-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.auth-form label { display:grid; gap:7px; }
.auth-form label>span { color:#505057; font-size:12px; font-weight:620; }
.auth-form input { width:100%; height:50px; border:1px solid rgba(20,20,25,.11); border-radius:14px; outline:0; background:#fff; color:var(--ink); padding:0 15px; font:inherit; font-size:14px; transition:border-color .16s,box-shadow .16s; }
.auth-form input:focus { border-color:rgba(10,132,255,.7); box-shadow:0 0 0 4px rgba(10,132,255,.12); }
.auth-form small { color:#929299; font-size:10px; }
.auth-primary,.passkey-button { display:flex; width:100%; min-height:50px; cursor:pointer; align-items:center; justify-content:center; border:0; border-radius:14px; font:inherit; font-size:13px; font-weight:650; transition:transform .15s,background .15s,box-shadow .15s; }
.auth-primary { margin-top:4px; background:var(--blue); box-shadow:0 9px 24px rgba(10,132,255,.22); color:#fff; }
.auth-primary:hover { background:#0077ed; box-shadow:0 11px 27px rgba(10,132,255,.28); }
.passkey-button { gap:10px; background:#ededf0; color:#343439; }
.passkey-button:hover { background:#e4e4e8; }
.passkey-button svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
button:active { transform:scale(.985); }
button:disabled { cursor:wait; opacity:.6; }
.auth-divider { display:flex; align-items:center; gap:12px; margin:22px 0; color:#a0a0a6; font-size:10px; }
.auth-divider:before,.auth-divider:after { height:1px; flex:1; background:rgba(20,20,25,.08); content:""; }
.passkey-hint { margin:11px 0 0; color:#96969d; font-size:10px; line-height:1.4; text-align:center; }
.auth-notice { margin:0 0 16px; border-radius:12px; background:#fff0ef; color:#a53731; padding:11px 13px; font-size:11px; line-height:1.45; }
.auth-notice.is-success { background:#eaf8f0; color:#24794d; }
.password-label-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.password-label-row a { color:var(--blue); font-size:10px; font-weight:600; text-decoration:none; }
.password-label-row a:hover { text-decoration:underline; }
.auth-back { display:block; margin:22px 0 0; color:#68686f; font-size:11px; font-weight:600; text-align:center; text-decoration:none; }
.auth-back:hover { color:var(--blue); }
.auth-passkey-choice { display:flex!important; cursor:pointer; grid-template-columns:20px 1fr; align-items:center; gap:11px!important; border:1px solid rgba(20,20,25,.07); border-radius:14px; background:#f1f1f3; padding:13px 14px; }
.auth-passkey-choice input { width:18px; height:18px; padding:0; accent-color:var(--blue); }
.auth-passkey-choice span,.auth-passkey-choice strong,.auth-passkey-choice small { display:block; }
.auth-passkey-choice strong { color:#44444a; font-size:11px; }
.auth-passkey-choice small { margin-top:3px; color:#85858c; font-size:9px; font-weight:400; }
@media(max-width:560px){.auth-card{padding:28px 22px;border-radius:24px}.auth-grid{grid-template-columns:1fr}.auth-header h1{font-size:28px}}