
:root{color-scheme:dark;--bg:#101112;--surface:#191a1c;--input:#242628;--text:#f6f4ef;--muted:#a7a7ab;--line:#36383b;--button:#f1eee7;--button-text:#161719;--accent:#ff8238}
:root[data-appearance=light]{color-scheme:light;--bg:#eeedeb;--surface:#fff;--input:#f5f5f4;--text:#18191b;--muted:#66686c;--line:#dddeda;--button:#1b1c1e;--button-text:#fff;--accent:#ab4100}
*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--bg);color:var(--text);font:14px/1.6 system-ui,-apple-system,'Segoe UI',sans-serif;padding:40px 24px}a{color:inherit}button,input,select{font:inherit}button,a,input,summary{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.5;cursor:wait}[hidden]{display:none!important}:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.auth-shell{max-width:1080px;margin:20px auto;background:var(--surface);border:1px solid var(--line);border-radius:28px;display:grid;grid-template-columns:46% 54%;padding:14px;box-shadow:0 25px 100px #0002;overflow:hidden}.auth-visual{position:relative;min-height:720px;background:radial-gradient(ellipse at 0 0,#52504c,transparent 70%),#2b2c2d;border-radius:19px;overflow:hidden;padding:26px 30px;color:#fff;display:flex;flex-direction:column;justify-content:space-between}.visual-brand{display:flex;gap:9px;align-items:center;font-weight:650;font-size:16px;letter-spacing:-.5px}.visual-brand svg{width:27px;fill:none;stroke:currentColor;stroke-width:1.7}.outfit-frame{width:72%;align-self:center;background:#f8f8f5;border-radius:100px 100px 20px 20px;height:360px;margin:24px 0;position:relative;transform:rotate(-5deg);box-shadow:0 20px 50px #0004}.outfit-frame img{width:100%;height:100%;object-fit:contain;border-radius:inherit;padding:8px}.outfit-tag{position:absolute;bottom:8px;left:-20px;right:-20px;background:#f1eee7;color:#252525;border-radius:50px;text-align:center;font-size:11px;padding:10px;transform:rotate(5deg);box-shadow:0 5px 20px #0002}.visual-copy .eyebrow{color:#c7c7c7}.visual-copy h2{font-size:42px;letter-spacing:-2px;font-weight:550;line-height:1.08;margin:13px 0}.visual-copy p{font-size:13px;color:#bfc0c1}.eyebrow{font-size:9px;letter-spacing:2px;font-weight:600;color:var(--muted)}.auth-main{width:100%;min-width:0;padding:30px 50px}.brand{text-decoration:none;font-size:12px;color:var(--muted)}.welcome{margin:60px 0 23px}.welcome h1{font-size:38px;line-height:1.2;letter-spacing:-1.6px;margin:10px 0}.intro{font-size:13px;color:var(--muted);margin:0}#notice{font-size:12px;color:var(--muted);margin:0 0 14px;overflow-wrap:anywhere}#notice[data-error=true]{border-left:2px solid #e28865;padding-left:10px}section{border:0;background:transparent;padding:0;min-width:0}#login h2{display:none}.google-sign-in{display:flex;gap:12px;align-items:center;justify-content:center;width:100%;background:#fff;color:#202124;border:1px solid #747775;border-radius:100px;height:48px;font-size:14px;font-weight:550}.auth-divider{display:flex;align-items:center;gap:14px;font-size:11px;color:var(--muted);margin:24px 0}.auth-divider:before,.auth-divider:after{content:'';height:1px;flex:1;background:var(--line)}label{display:block;font-size:12px;font-weight:550;margin:8px 0}input:not([type=checkbox]),select{width:100%;min-width:0;background:var(--input);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0 0 12px;outline-offset:2px}#email{height:48px}.email-hint{font-size:11px;color:var(--muted);margin:0 0 16px}button:not(#googleSignIn):not(#authTheme){border:1px solid var(--line);background:var(--button);color:var(--button-text);border-radius:100px;padding:11px 18px;font-weight:600;font-size:12px}#emailForm button,#codeForm button{width:100%;height:48px;font-size:13px}#codeForm{border-top:1px solid var(--line);padding-top:14px;margin-top:20px}#code{letter-spacing:.4em;font-size:21px}small{display:block;color:var(--muted);font-size:10px;line-height:1.7;margin:18px 0}details{border-top:1px solid var(--line);padding-top:15px;margin-top:20px;font-size:12px}details p{color:var(--muted)}summary{cursor:pointer;font-weight:550}details input{margin-top:12px!important}code{font-size:10px;overflow-wrap:anywhere}.release-label{color:var(--muted);font-size:10px;text-align:center;margin-top:22px}.google-setup{font-size:11px}.google-setup input{font:10px monospace}.actions{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}#account h2{font-size:24px;letter-spacing:-1px}.checkbox{display:flex;align-items:start;gap:8px}#consentArea p{font-size:11px;color:var(--muted)}.profile-photo-row{display:flex;align-items:center;gap:14px;margin:12px 0}.profile-photo-row img{border-radius:50%;object-fit:cover}#profilePhoto{font-size:11px}#authTheme{position:fixed;bottom:18px;right:22px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:100px;padding:10px 15px;font-size:12px}.signed-in .welcome{margin-top:30px}.signed-in .welcome h1{font-size:30px}.signed-in .auth-visual{position:sticky;top:20px;height:720px}.website-bar{max-width:1080px;margin:0 auto 18px;display:flex;align-items:center;gap:20px;font-size:12px;flex-wrap:wrap}.website-bar a{text-decoration:none;color:var(--muted)}.website-bar .website-brand{margin-right:auto;color:var(--text);font-weight:600}.website-bar .get-extension{background:var(--button);color:var(--button-text);border-radius:30px;padding:8px 14px}.website-note{font-size:12px}button{transition:transform .18s,box-shadow .18s}button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 16px #0002}button:active:not(:disabled){transform:scale(.97)}
@media(max-width:800px){body{padding:20px 14px}.auth-shell{max-width:480px;grid-template-columns:1fr;padding:0;border-radius:24px}.auth-visual{min-height:150px;padding:22px 26px;border-radius:0;background:radial-gradient(ellipse at 80% 10%,#615850,transparent 70%),#28292a}.visual-copy{display:none}.outfit-frame{display:none}.visual-brand{margin:26px 0}.auth-main{padding:28px}.welcome{margin-top:12px}.welcome h1{font-size:32px}.signed-in .auth-visual{position:static;height:auto}.website-bar{padding:0 8px;gap:12px}.website-bar .website-brand{flex-basis:100%}#authTheme span{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;transform:none!important}}

/* Compact, balanced sign-in and profile surface. */
body{padding:24px}.auth-shell{max-width:900px;margin:12px auto;grid-template-columns:45% 55%;border-radius:30px;padding:12px}.auth-visual{min-height:560px;padding:24px;background:radial-gradient(ellipse at 40% 30%,#5c5c62,transparent 75%),#292a2d}.outfit-frame{height:300px;width:82%;margin:20px 0;transform:none;border-radius:22px}.outfit-tag{display:none}.visual-copy h2{font-size:30px}.visual-copy p{display:none}.auth-main{padding:28px 34px}.welcome{margin:30px 0 20px}.welcome h1{font-size:32px}.welcome .eyebrow{display:none}.auth-divider{margin:18px 0}.google-setup,.backup-tools{font-size:11px}.signed-in .auth-visual{height:560px}.account-summary{display:flex;align-items:center;gap:14px;margin:12px 0 22px}.account-summary img{width:64px;height:64px;border-radius:50%;object-fit:cover;background:var(--input)}.account-summary strong{font-size:18px}.account-summary p{margin:2px 0;font-size:12px;color:var(--muted);overflow-wrap:anywhere}.profile-editor{margin-bottom:20px}#login>small{font-size:10px} @media(max-width:800px){body{padding:14px}.auth-shell{max-width:480px;grid-template-columns:1fr;padding:0}.auth-visual{min-height:90px;padding:14px 24px}.visual-brand{margin:12px 0}.auth-main{padding:24px}.welcome{margin:16px 0}.signed-in .auth-visual{height:auto}}

/* Lavender editorial reference: quiet white form, fashion visual. */
:root[data-appearance=light]{--bg:#f1f1f3;--accent:#6454e8;--input:#f8f8fa;--button:#6554e8;--button-text:#fff}.auth-shell{max-width:940px;grid-template-columns:43% 57%;box-shadow:0 12px 50px #23233316}.auth-visual{background:linear-gradient(145deg,#a8a1ff,#8e88f5);color:#fff;min-height:570px}.visual-copy{order:1}.visual-brand{order:0}.outfit-frame{order:2;transform:rotate(-4deg);height:280px;width:70%;box-shadow:18px 18px 0 #ffffff25}.visual-copy h2{font-size:30px;line-height:1.2;letter-spacing:-1px;max-width:250px}.visual-copy .eyebrow{color:#eeebff}.auth-main{padding:36px 44px}.welcome{margin:30px 0 26px}.welcome h1{font-size:28px;font-weight:650;letter-spacing:-.8px}input:not([type=checkbox]){border-radius:7px}#emailForm button,#codeForm button{border-radius:9px}#login>small{margin-top:20px}.google-sign-in{border-radius:9px}.auth-divider{margin:18px 0}.signed-in .auth-visual{height:570px}@media(max-width:800px){.auth-shell{grid-template-columns:1fr}.auth-visual{min-height:90px}.auth-main{padding:26px}.outfit-frame{display:none}.signed-in .auth-visual{height:auto}}
