/* Auth and account surfaces. Shared colors and theme live in design-system.css. */
.auth-body,.account-body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:14px; line-height:1.6; }
.auth-body *, .account-body * { box-sizing:border-box; }
.auth-body [hidden],.account-body [hidden] { display:none!important; }
.auth-body a,.account-body a { color:inherit; text-underline-offset:4px; }
.auth-body :focus-visible,.account-body :focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
.auth-skip { position:fixed; top:-100px; left:20px; z-index:100; padding:10px 16px; background:var(--ink); color:var(--card)!important; border-radius:6px; }
.auth-skip:focus { top:12px; }
.auth-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:100svh; }
.auth-panel { background:var(--card); display:flex; flex-direction:column; min-width:0; padding:34px 48px 24px; }
.auth-topbar { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.auth-topbar .brand-link,.account-header .brand-link { text-decoration:none; }
.auth-form-wrap { width:100%; max-width:370px; margin:auto; padding:65px 0 54px; }
.auth-eyebrow { display:block; margin-bottom:18px; color:var(--muted); font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; }
.auth-form-wrap h1 { font-size:36px; font-weight:600; line-height:1.14; letter-spacing:-.055em; margin:0 0 14px; }
.auth-intro { color:var(--muted); margin:0 0 32px; font-size:14px; line-height:1.7; }
.auth-form { display:grid; gap:20px; }
.auth-body fieldset { margin:0; padding:0; border:0; min-width:0; display:grid; gap:20px; }
.auth-field { display:grid; gap:7px; min-width:0; }
.auth-field label,.account-body label { font-size:12px; font-weight:550; color:var(--ink); }
.auth-body input,.account-body input,.account-body select { width:100%; min-width:0; height:44px; padding:10px 12px; color:var(--ink); background:var(--card); border:1px solid var(--line-2); border-radius:6px; font:inherit; font-size:13px; transition:border-color .15s,box-shadow .15s; }
.auth-body input::placeholder,.account-body input::placeholder { color:var(--faint); opacity:1; }
.auth-body input:focus,.account-body input:focus,.account-body select:focus { border-color:var(--ink); box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 6%,transparent); outline:none; }
.auth-body input:disabled,.account-body input:disabled { background:var(--surface); cursor:not-allowed; }
.auth-password { position:relative; display:block; }
.auth-password input { padding-right:62px; }
.auth-password button { position:absolute; right:5px; top:5px; bottom:5px; min-width:48px; padding:0 8px; background:transparent; border:0; border-radius:4px; color:var(--muted); font:inherit; font-size:11px; font-weight:550; cursor:pointer; }
.auth-password button:hover { color:var(--ink); background:var(--surface); }
.auth-label-row { display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.auth-label-row a { font-size:11px; color:var(--muted); }
.auth-hint { margin:0; color:var(--faint); font-size:11px; line-height:1.55; }
.auth-primary,.account-body button:not(.theme-toggle):not([data-password-toggle]),.account-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:9px 15px; border:1px solid var(--line-2); border-radius:6px; background:var(--card); color:var(--ink); font:inherit; font-size:12px; font-weight:550; text-decoration:none; cursor:pointer; transition:background .15s,transform .15s; }
.auth-primary { width:100%; min-height:44px; background:var(--ink); border-color:var(--ink); color:var(--card); font-size:13px; }
.auth-primary::after { content:'↗'; font-size:17px; margin-left:auto; font-weight:400; }
.auth-primary:hover { opacity:.88; }
.auth-primary:active { transform:translateY(1px); }
.auth-primary:disabled,.account-body button:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.auth-primary[aria-busy=true]::after { content:'…'; }
.auth-secondary-text { text-align:center; font-size:12px; color:var(--muted); margin:26px 0 0; }
.auth-secondary-text a { color:var(--ink); font-weight:550; }
.auth-bottom { display:flex; justify-content:space-between; gap:20px; align-items:center; color:var(--faint); font-size:10px; }
.auth-bottom a { text-decoration:none; }
.auth-bottom span { display:flex; align-items:center; gap:6px; }
.auth-lock { width:12px; height:12px; flex:none; }
.auth-availability { padding:14px 16px; background:var(--surface); border:1px solid var(--line); border-radius:7px; margin:0 0 24px; font-size:12px; color:var(--muted); }
.auth-availability strong { display:block; color:var(--ink); font-size:12px; font-weight:600; margin-bottom:3px; }
.auth-availability p { margin:0; }
.auth-availability:empty,.notice:empty { display:none; }
.auth-body .errbox { display:none; margin:0; padding:12px 14px; border-radius:6px; background:color-mix(in srgb,#c64e3e 8%,var(--card)); color:light-dark(#a03327,#efaaa0); font-size:12px; line-height:1.55; border:1px solid color-mix(in srgb,#c64e3e 20%,var(--line)); }
.auth-body .errbox.on { display:block; }
.notice { padding:14px 16px; border:1px solid var(--line); border-radius:7px; color:var(--ink); background:var(--surface); font-size:12px; white-space:pre-wrap; overflow-wrap:anywhere; }
.notice[data-tone=error] { border-color:color-mix(in srgb,#c64e3e 35%,var(--line)); }
.auth-visual { display:flex; flex-direction:column; overflow:hidden; position:relative; border-left:1px solid var(--line); padding:48px 64px 30px; background:var(--paper); }
.auth-visual-top { display:flex; justify-content:space-between; align-items:center; font-size:10px; color:var(--faint); letter-spacing:.06em; }
.auth-visual-top span:last-child { display:flex; align-items:center; gap:6px; }
.auth-dot { width:5px; height:5px; border-radius:50%; background:var(--ink); display:inline-block; }
.auth-visual-content { max-width:470px; width:100%; margin:auto; padding:60px 0; }
.auth-visual h2 { font-size:clamp(36px,4.2vw,61px); font-weight:500; line-height:1.06; letter-spacing:-.064em; margin:0 0 20px; }
.auth-visual h2 em { font:inherit; color:var(--muted); }
.auth-visual-copy { max-width:350px; color:var(--muted); font-size:13px; line-height:1.8; margin:0; }
.auth-preview { width:100%; max-width:380px; margin:46px 0 0; border:1px solid var(--line-2); border-radius:10px; background:var(--card); box-shadow:0 8px 28px color-mix(in srgb,var(--ink) 5%,transparent); transform:rotate(-2deg); }
.auth-preview-bar { display:flex; gap:5px; align-items:center; padding:13px 17px; border-bottom:1px solid var(--line); font:9px var(--mono); color:var(--faint); }
.auth-preview-bar i { display:block; width:5px; height:5px; background:var(--line-2); border-radius:50%; }
.auth-preview-bar span { margin-left:auto; }
.auth-preview-main { padding:23px; }
.auth-preview-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:18px; font:9px var(--mono); color:var(--faint); }
.auth-mini-badge { display:inline-flex; align-items:center; gap:5px; padding:3px 7px; border-radius:4px; color:var(--accent-ink); background:var(--accent); font-size:9px; }
.auth-mini-badge i { display:block; width:4px; height:4px; border-radius:50%; background:currentColor; }
.auth-preview h3 { font-size:18px; letter-spacing:-.035em; margin:0 0 20px; font-weight:550; }
.auth-wave { height:48px; display:flex; gap:4px; align-items:center; border-radius:5px; padding:0 10px; background:var(--surface); }
.auth-wave i { width:3px; border-radius:2px; height:var(--h,12px); background:var(--ink); opacity:.65; }
.auth-wave span { margin-left:auto; font:9px var(--mono); color:var(--muted); }
.auth-preview-rule { height:1px; background:var(--line); margin:19px 0; }
.auth-preview-label { font-size:9px; font-weight:600; letter-spacing:.06em; margin-bottom:10px; text-transform:uppercase; color:var(--faint); }
.auth-preview-line { display:flex; gap:8px; font-size:10px; line-height:1.65; margin:7px 0; color:var(--muted); }
.auth-preview-line b { color:var(--ink); font-weight:500; }
.auth-preview-check { flex:none; color:var(--accent-ink); background:var(--accent); width:14px; height:14px; border-radius:3px; text-align:center; font-size:9px; }
.auth-visual-foot { display:flex; align-items:center; justify-content:space-between; font:9px var(--mono); color:var(--faint); }
.auth-visual-foot .auth-line { width:52px; height:1px; background:var(--line-2); }
.auth-outline { margin:44px 0 0; display:grid; gap:0; }
.auth-outline-row { display:grid; grid-template-columns:35px 1fr; gap:14px; padding:20px 0; border-top:1px solid var(--line-2); }
.auth-outline-row>span { font:10px var(--mono); color:var(--faint); padding-top:3px; }
.auth-outline-row h3 { margin:0 0 3px; font-size:14px; font-weight:550; letter-spacing:-.015em; }
.auth-outline-row p { font-size:12px; color:var(--muted); margin:0; }
.auth-key-art { display:grid; place-items:center; margin:44px 0 0; min-height:190px; border:1px solid var(--line); border-radius:8px; background:repeating-linear-gradient(0deg,transparent,transparent 31px,var(--line) 31px,var(--line) 32px); }
.auth-key-art svg { width:100px; height:100px; padding:20px; border:1px solid var(--line-2); border-radius:20px; background:var(--card); box-shadow:0 8px 24px color-mix(in srgb,var(--ink) 6%,transparent); color:var(--ink); transform:rotate(-8deg); }
.account-header { height:76px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 40px; border-bottom:1px solid var(--line); background:var(--card); }
.account-header-actions { display:flex; gap:18px; align-items:center; }
.account-back { font-size:12px; text-decoration:none; color:var(--muted)!important; }
.account-layout { display:grid; grid-template-columns:220px minmax(0,760px); max-width:1130px; margin:0 auto; gap:56px; padding:48px 28px 90px; align-items:start; }
.account-sidebar { position:sticky; top:30px; }
.account-sidebar-label { color:var(--faint); font-size:10px; letter-spacing:.09em; text-transform:uppercase; padding:0 12px; margin:0 0 14px; }
.account-nav { display:grid; gap:3px; }
.account-nav a { display:flex; align-items:center; gap:10px; padding:9px 12px; color:var(--muted); font-size:12px; text-decoration:none; border-radius:6px; }
.account-nav a:hover,.account-nav a:focus-visible { background:var(--surface); color:var(--ink); }
.account-nav svg { width:15px; height:15px; flex:none; }
.account-sidebar-note { padding:22px 12px; margin-top:25px; border-top:1px solid var(--line); font-size:11px; color:var(--muted); line-height:1.7; }
.account-sidebar-note strong { display:block; color:var(--ink); font-size:11px; font-weight:550; margin-bottom:5px; }
.account-main { min-width:0; }
.account-breadcrumb { color:var(--faint); font-size:11px; margin:0 0 14px; }
.account-heading { margin-bottom:30px; }
.account-heading h1 { font-size:34px; letter-spacing:-.055em; font-weight:550; line-height:1.2; margin:0 0 10px; }
.account-heading p { margin:0; font-size:13px; color:var(--muted); }
.account-identity { display:flex; gap:14px; align-items:center; padding:20px 0 28px; }
.account-avatar { width:40px; height:40px; background:var(--surface); border:1px solid var(--line); border-radius:9px; flex:none; display:grid; place-items:center; font-size:16px; }
.account-identity-info { flex:1; min-width:0; }
#accountEmail { margin:0; font-size:13px; font-weight:550; overflow-wrap:anywhere; }
.account-identity-caption { color:var(--faint); font-size:11px; }
.account-section { padding:26px; margin:0 0 20px; border:1px solid var(--line); border-radius:9px; background:var(--card); scroll-margin-top:24px; }
.account-section h2 { font-size:16px; letter-spacing:-.025em; font-weight:600; line-height:1.35; margin:0 0 7px; }
.account-section h3 { font-size:13px; font-weight:550; margin:0 0 8px; }
.account-section>p,.account-section-help { color:var(--muted); font-size:12px; line-height:1.7; margin:0 0 20px; }
.account-section form { display:grid; gap:16px; margin-top:20px; }
.account-section label { display:grid; gap:7px; min-width:0; }
.account-section form>button { justify-self:start; }
.account-body button:not(.theme-toggle):not([data-password-toggle]):hover { background:var(--surface); }
.account-body .account-primary { background:var(--ink)!important; border-color:var(--ink)!important; color:var(--card)!important; }
.account-body .account-primary:hover { opacity:.88; }
.account-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:end; }
.account-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
.account-divider { height:1px; background:var(--line); margin:26px 0; }
.account-subsection { padding-top:22px; margin-top:22px; border-top:1px solid var(--line); }
.account-section .account-subsection p { font-size:12px; color:var(--muted); margin:0 0 12px; }
.account-required { border-color:var(--line-2); background:var(--surface); }
.account-required a { font-size:12px; font-weight:550; }
.account-required>p { margin-bottom:10px; }
.account-section .member { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:13px 0; border-bottom:1px solid var(--line); }
.member span { flex:1 1 180px; min-width:0; font-size:12px; overflow-wrap:anywhere; }
.account-body .member button { font-size:10px!important; padding:6px 9px!important; min-height:32px!important; }
.account-body #leaveWorkspace { margin-top:18px; color:var(--muted); }
#mfaSetup { border-top:1px solid var(--line); padding-top:24px; margin-top:24px; }
#mfaSetup>p { color:var(--muted); font-size:12px; }
#mfaQr { display:block; width:190px; height:190px; background:#fff; border:8px solid #fff; border-radius:7px; }
#mfaSecret,#recoveryValues { max-width:100%; padding:14px 16px; margin:12px 0 20px; border:1px solid var(--line); border-radius:6px; font:12px/1.9 var(--mono); white-space:pre-wrap; overflow-wrap:anywhere; background:var(--surface); }
#recoveryCodes { margin-top:24px; border:1px solid var(--line-2); padding:22px; border-radius:7px; }
#recoveryCodes>p { color:var(--muted); font-size:12px; margin:0; }
#mfaContinue { display:inline-flex; padding:9px 15px; background:var(--accent); color:var(--accent-ink); text-decoration:none; font-size:12px; font-weight:600; border-radius:6px; }
.account-token-card { border-left:3px solid var(--ink); }
.account-token-card .auth-hint { margin-top:10px; }
.account-body .notice { margin:0 0 22px; }
.account-body .auth-availability { margin-bottom:20px; }
@media(min-width:1500px) { .auth-panel { padding-left:70px; padding-right:70px; } .auth-visual { padding-left:85px; padding-right:85px; } }
@media(max-width:1000px) { .auth-panel { padding:28px; } .auth-visual { padding:38px 32px 28px; } .auth-visual h2 { font-size:45px; } .account-layout { grid-template-columns:180px minmax(0,1fr); gap:28px; } }
@media(max-width:760px) { .auth-layout { grid-template-columns:1fr; } .auth-panel { min-height:100svh; padding:24px; } .auth-form-wrap { padding:60px 0; max-width:390px; } .auth-visual { display:none; } .auth-form-wrap h1 { font-size:34px; } .account-header { height:66px; padding:0 20px; } .account-layout { display:block; padding:25px 20px 55px; } .account-sidebar { position:static; margin-bottom:30px; } .account-sidebar-label,.account-sidebar-note { display:none; } .account-nav { display:flex; flex-wrap:wrap; gap:4px; } .account-nav a { padding:8px 10px; background:var(--surface); font-size:11px; } .account-heading h1 { font-size:29px; } .account-section { padding:22px; } }
@media(max-width:430px) { .auth-panel { padding:22px; } .auth-form-wrap { padding:50px 0; } .auth-bottom { font-size:9px; } .account-layout { padding:22px 14px 45px; } .account-header { padding:0 16px; } .account-header-actions { gap:10px; } .account-back { font-size:11px; } .account-section { padding:20px; } .account-fields,.account-row { grid-template-columns:1fr; } .account-row>button { justify-self:start; } .account-identity { flex-wrap:wrap; } }
@media(prefers-reduced-motion:reduce) { .auth-body *,.account-body * { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }