:root{
  color-scheme:light dark;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;font-synthesis:none;
  color:#1f1f1f;background:#f7f7f8;--page:#f7f7f8;--surface:#fff;--ink:#1f1f1f;--muted:#5f6368;--line:#e8e8e8;--border:#a8adaf;
  --accent:#0b57d0;--primary:#1f1f1f;--on-primary:#fff;--soft:#f3f5f8;--error:#b3261e;--error-bg:#fff1f0;--success:#21633d;
}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}a,button,input,select,summary{-webkit-tap-highlight-color:transparent}
.account-app{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:48px 24px 28px}
header,footer{width:100%;max-width:980px;margin:auto;display:flex;align-items:center;gap:20px;font-size:12px;color:var(--muted)}header{padding:28px 0}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-size:19px;font-weight:650;letter-spacing:.08em;width:fit-content;min-height:44px;flex-shrink:0}
.mark{display:grid;place-items:center;width:34px;height:38px;border-radius:10px 2px 10px 2px;background:var(--primary);color:var(--on-primary);font-weight:500;letter-spacing:0}
.wordmark-detail{font-size:12px;font-weight:400;letter-spacing:0;color:var(--muted);border-left:1px solid var(--line);padding-left:12px;white-space:nowrap}
.shell{width:100%;max-width:980px;margin:auto;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:48px;padding:48px;background:var(--surface);border:1px solid transparent;border-radius:28px}
aside{display:flex;flex-direction:column;min-width:0}.intro{margin-top:44px}#intro-title{font-size:40px;line-height:1.3;font-weight:500;letter-spacing:-.035em;overflow-wrap:anywhere}#intro-copy{font-size:15px;line-height:1.8;color:var(--muted);max-width:300px;margin:20px 0 0}
.aside-note{margin-top:auto;padding-top:48px;color:var(--muted);font-size:12px;line-height:1.8}.aside-note p{margin:0}.content{min-width:0;padding:4px 0 0}
h1{font-size:30px;line-height:1.35;font-weight:500;letter-spacing:-.035em;margin:0 0 16px;overflow-wrap:anywhere}h2{font-size:18px;line-height:1.5;font-weight:550;margin:0 0 12px}p{line-height:1.75}.lead{font-size:14px;color:var(--muted);margin:0 0 28px}
/* Gateway headings stay semantic in the content while the left intro carries their visual copy. */
[data-layout=gateway] #panel>h1,[data-layout=gateway] #panel>.lead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
[data-layout=gateway] .aside-note{display:none}[data-layout=gateway] .content{align-self:center}[data-layout=gateway] .intro{margin-bottom:24px}[data-layout=gateway] nav:empty{display:none}
form{display:grid;gap:20px;margin:24px 0}#panel>form:first-of-type{margin-top:0}label{display:grid;gap:8px;font-size:14px;line-height:1.5;color:var(--ink);min-width:0}
input,select{width:100%;min-width:0;min-height:56px;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--ink);font-size:16px;outline:none;transition:border-color .12s,box-shadow .12s}
input:hover,select:hover{border-color:var(--muted)}input:focus-visible,select:focus-visible{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:3px}
input::placeholder{color:var(--muted)}input[autocomplete=one-time-code]{font-variant-numeric:tabular-nums;letter-spacing:.08em}
textarea{width:100%;min-width:0;min-height:120px;resize:vertical;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--ink);font:14px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;outline:none}textarea:hover{border-color:var(--muted)}textarea:focus-visible{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:3px}
button,.nav-link{display:inline-flex;justify-content:center;align-items:center;min-height:44px;max-width:100%;padding:10px 18px;border:0;border-radius:22px;background:var(--primary);color:var(--on-primary);font-size:14px;font-weight:500;line-height:1.5;text-align:center;text-decoration:none;cursor:pointer;transition:background .12s,opacity .12s;overflow-wrap:anywhere}
form>button[type=submit]{min-height:54px;border-radius:27px;margin-top:4px;width:100%;font-size:15px}button:hover{opacity:.86}button:disabled{opacity:.48;cursor:wait}button.secondary,.nav-link{background:transparent;color:var(--accent)}button.secondary:hover,.nav-link:hover{background:var(--soft);opacity:1}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.check{display:flex;align-items:center;gap:10px;min-height:44px;font-size:13px;color:var(--muted);cursor:pointer}.check input{flex-shrink:0;width:17px;height:17px;min-height:0;padding:0;margin:0;accent-color:var(--primary);border-radius:4px}
.form-options{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:-10px}.form-options button{padding:8px 0;font-size:13px}.actions{display:flex;align-items:center;justify-content:flex-start;gap:8px;flex-wrap:wrap;margin-top:16px}.actions button{margin-left:-12px}.factor-note{padding:14px 16px;border-radius:12px;background:var(--soft);font-size:13px;color:var(--muted);margin:0}
#feedback{font-size:13px;line-height:1.7;color:var(--success);margin:20px 0 0;padding:12px 16px;background:var(--soft);border-radius:12px;overflow-wrap:anywhere}#feedback:empty{display:none}#feedback.error{color:var(--error);background:var(--error-bg)}#feedback:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
nav{display:grid;gap:6px;margin-top:32px;width:100%}nav button,nav a{justify-content:flex-start;text-align:left;padding:12px 16px;color:var(--muted)!important}nav [aria-current=page]{color:var(--ink)!important;background:var(--soft)!important;font-weight:600}
[data-layout=account] .shell{max-width:1120px;grid-template-columns:minmax(220px,.65fr) minmax(0,1.35fr);gap:64px}[data-layout=account] .intro{margin-top:36px}[data-layout=account] #intro-title{font-size:28px}[data-layout=account] .content{max-width:620px}
.block{padding:28px 0;border-top:1px solid var(--line);margin-top:20px}.block p{font-size:14px;color:var(--muted)}.block form:last-child{margin-bottom:0}.identity{font-size:15px!important;color:var(--ink)!important;overflow-wrap:anywhere}.row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);font-size:13px;overflow-wrap:anywhere}.row>div{min-width:0}.row button{flex-shrink:0}.row small,small{display:block;font-size:12px;line-height:1.75;color:var(--muted)}.empty{padding:32px 0;color:var(--muted)}.admin-row{padding:22px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.admin-row strong{font-size:14px}.admin-row button{margin-top:8px}.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:28px 0}.stats>div{padding:16px;background:var(--soft);border-radius:12px}.stats strong{font-size:24px;font-weight:500;display:block;margin-bottom:8px}
footer{margin:28px auto 0;min-height:44px;flex-wrap:wrap}footer a{margin-left:auto;color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}footer a:hover{text-decoration:underline}
#privacy{display:none}.private .shell{visibility:hidden}.private #privacy{display:block;position:fixed;inset:40% 24px auto;text-align:center;font-size:16px;color:var(--muted)}
.setup-key,.recovery-codes{font-family:ui-monospace,SFMono-Regular,monospace;letter-spacing:.025em;font-size:13px}.recovery-codes{white-space:pre-wrap;overflow-wrap:anywhere;padding:20px;background:var(--soft);border-radius:12px;line-height:2.1}.setup-key{padding:14px 12px}
.enrollment-qr{display:block;width:264px;max-width:100%;height:auto;background:#fff;margin:24px auto 20px;image-rendering:pixelated;border:8px solid #fff;border-radius:12px;box-sizing:content-box}.mfa-account{overflow-wrap:anywhere}.mfa-expiry{font-variant-numeric:tabular-nums;margin:12px 0;color:var(--accent)}#mfa-settings details{margin:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}#mfa-settings summary{cursor:pointer;color:var(--accent);font-size:13px;padding:14px 0;min-height:44px}#mfa-settings details>p{margin:0 0 16px}#mfa-settings details>label{margin-bottom:20px}
.setup-steps{list-style:none;display:flex;gap:12px;padding:0;margin:20px 0 24px;color:var(--muted);font-size:11px;counter-reset:steps}.setup-steps li{flex:1;counter-increment:steps;line-height:1.7;border-top:2px solid var(--line);padding-top:10px}.setup-steps li::before{content:counter(steps) ". ";font-variant-numeric:tabular-nums}.setup-steps [aria-current=step]{color:var(--accent);border-color:var(--accent);font-weight:600}
#panel:has(#mfa-settings.enrolling)>.block:not(#mfa-settings),#panel:has(#mfa-recovery)>.block:not(#mfa-recovery){display:none}#mfa-recovery{border-top:0;padding-top:0}#mfa-settings.enrolling{padding-top:0;border-top:0}.delivery-address{font-size:16px;overflow-wrap:anywhere}.delivery-note{font-size:14px;color:var(--muted)}
@media(max-width:900px){.shell{gap:32px;padding:36px}[data-layout=account] .shell{gap:32px;grid-template-columns:minmax(180px,.6fr) minmax(0,1.4fr)}#intro-title{font-size:34px}.wordmark-detail{font-size:11px;padding-left:8px}}
@media(max-width:760px){.shell,[data-layout=account] .shell{grid-template-columns:minmax(0,1fr);gap:32px;max-width:560px}.intro{margin-top:32px}#intro-title{font-size:32px}#intro-copy{max-width:100%;margin-top:16px}[data-layout=gateway] .intro{margin-bottom:0}.content,[data-layout=account] .content{width:100%;max-width:none;padding:0}.aside-note{display:none}[data-layout=account] .intro{display:none}nav{display:flex;flex-wrap:wrap;gap:4px;margin-top:24px}nav button,nav a{font-size:12px;padding:10px 12px}h1{font-size:28px}footer{max-width:560px}.row{flex-wrap:wrap}}
@media(max-width:620px){:root{background:var(--surface)}.account-app{padding:28px 24px 16px;justify-content:flex-start;background:var(--surface)}.shell,[data-layout=account] .shell{margin:0 auto;padding:0;border:0;border-radius:0}.brand{font-size:17px;gap:10px}.mark{width:30px;height:34px}.wordmark-detail{font-size:11px}.intro{margin-top:30px}#intro-title{font-size:30px;letter-spacing:-.025em}footer{margin-top:auto;padding-top:32px;gap:12px;font-size:11px}footer>span:nth-child(2){display:none}.block{padding:24px 0}.enrollment-qr{width:248px;max-width:calc(100% - 16px)}.stats{gap:8px}.stats>div{padding:12px}.setup-steps{gap:8px}}
@media(prefers-color-scheme:dark){:root{color:#ececec;background:#171717;--page:#171717;--surface:#212121;--ink:#ececec;--muted:#b4b4b4;--line:#383838;--border:#6b6b6b;--accent:#a8c7fa;--primary:#ececec;--on-primary:#171717;--soft:#2c3036;--error:#ffb4ab;--error-bg:#382424;--success:#a3d9b1}.account-app{background:radial-gradient(ellipse at 50% 0%,#202733 0,transparent 56%),var(--page)}.shell{border-color:#ffffff08}@media(max-width:620px){.account-app{background:var(--surface)}}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

.remember-hint{display:block;line-height:1.6;color:var(--muted);margin:4px 0 18px}.passkey-card{padding:18px 0;border-bottom:1px solid var(--line)}.passkey-card>small{display:block;margin:8px 0}.remember-choice{margin-top:14px}
