:root{color-scheme:dark;--bg:#10141c;--card:#1a202c;--ink:#f2f3f6;--muted:#a5adbf;--line:#343c4d;--accent:#d9ff4d;--accent-ink:#172000}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:radial-gradient(ellipse at 12% 20%,#27312640,transparent 47%),var(--bg);color:var(--ink);font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body[data-product=unseriety]{--accent:#b6a0ff;--accent-ink:#211738;--bg:#15121d;--card:#211c2b;--line:#40364f;background:radial-gradient(ellipse at 13% 25%,#6949a12b,transparent 50%),var(--bg)}a{color:inherit;text-decoration:none}button,input{font:inherit}.security-header{max-width:1220px;margin:auto;padding:30px 48px;display:flex;align-items:center;justify-content:space-between}.security-brand{display:flex;align-items:center;gap:11px;font-size:24px;font-weight:750;letter-spacing:-.8px}.security-brand img{object-fit:contain}.back-link{font-size:12px;color:var(--muted);display:flex;gap:13px}.back-link span{color:var(--accent)}.security-layout{max-width:1160px;margin:42px auto 65px;padding:0 48px;display:grid;grid-template-columns:1fr 470px;gap:85px;align-items:start}.security-story{padding-top:43px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--accent)}h1{font-size:58px;line-height:1.07;letter-spacing:-2.6px;margin:23px 0 30px;font-weight:730}.story-lead{font-size:25px;line-height:1.4;color:#cbc5d8;font-weight:500;margin-bottom:20px}.security-story>p:not(.story-lead){max-width:330px;color:var(--muted);font-size:14px}.privacy-note{display:flex;gap:15px;border-top:1px solid var(--line);padding-top:24px;margin-top:35px;max-width:350px}.privacy-note>span{color:var(--accent);font-size:25px}.privacy-note strong{font-size:13px}.privacy-note p{font-size:12px;color:var(--muted);margin:5px 0 0}.security-story>small{display:block;font-size:10px;color:var(--muted);margin-top:35px}.security-card{background:linear-gradient(150deg,#ffffff05,transparent),var(--card);border:1px solid var(--line);box-shadow:0 28px 80px #0003;border-radius:24px;padding:32px}.card-heading{display:flex;align-items:center;gap:10px}.lock-icon{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--line);border-radius:8px;color:var(--accent);font-size:23px}.security-card h2{font-size:25px;line-height:1.25;letter-spacing:-.7px;margin:20px 0 10px}.card-description{font-size:13px;color:var(--muted);margin:0 0 23px}.setup-steps{display:flex;gap:24px;list-style:none;padding:0;margin:0 0 22px}.setup-steps li{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:7px}.setup-steps li>span{display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--line);border-radius:50%;font-size:10px}.setup-steps li[aria-current=step]{color:var(--ink)}.setup-steps li[aria-current=step]>span{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}.setup-guide{padding:13px 15px;border:1px solid var(--line);border-radius:12px;margin-bottom:22px;background:#0000000b}.setup-guide p{font-size:11px;line-height:1.55;color:var(--muted);margin:0 0 6px}.text-button{background:none;border:0;padding:4px 0;color:var(--accent);font-size:12px;font-weight:650;cursor:pointer}.text-button span{margin-left:7px}label{display:block;font-size:12px;font-weight:600;margin:17px 0}input{display:block;width:100%;margin-top:8px;border:1px solid #566077;background:#131721;color:var(--ink);border-radius:11px;padding:13px 14px;min-height:48px;outline:none}body[data-product=unseriety] input{background:#17131f}input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #ac8cff17}input::placeholder{color:#7c859a;font-weight:400}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-text-fill-color:#f2f3f6!important;-webkit-box-shadow:0 0 0 1000px #171923 inset!important;caret-color:#fff}.button{display:flex;align-items:center;justify-content:center;gap:15px;width:100%;border:1px solid var(--accent);border-radius:11px;background:var(--accent);color:var(--accent-ink);padding:13px 15px;font-size:13px;font-weight:700;min-height:47px;cursor:pointer;margin-top:20px}.button:hover{filter:brightness(1.07)}button:disabled{opacity:.5;cursor:wait}.secondary{background:transparent;color:var(--ink);border-color:var(--line);margin-top:9px}.existing-passkey{border-top:1px solid var(--line);margin-top:25px;padding-top:20px;text-align:center}.existing-passkey>span{font-size:11px;color:var(--muted)}.card-foot{font-size:10px;line-height:1.6;color:var(--muted);margin:25px 0 0;border-top:1px solid var(--line);padding-top:17px}.code-input{font-size:24px;letter-spacing:8px;text-align:center}.security-footer{max-width:1220px;margin:auto;padding:22px 48px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:10px}.security-footer nav{display:flex;gap:20px}#security-status:empty{display:none}#security-status{padding:11px 13px;border-radius:10px;background:#aa8cff14;color:#d4c4f5;border:1px solid #aa8cff35;font-size:12px;margin-bottom:18px}#security-status[data-tone=error]{color:#ffc3c3;background:#692a3225;border-color:#bd58664d}.panel{border-top:1px solid var(--line);margin-top:20px;padding-top:18px}.panel h2{font-size:20px}.panel p,.fine{font-size:12px;color:var(--muted)}.passkey-list{overflow-wrap:anywhere}.passkey-list p{padding:12px;border:1px solid var(--line);border-radius:10px}.panel .secondary{font-size:12px}.panel+.secondary{margin-top:25px}:focus-visible{outline:3px solid var(--accent);outline-offset:3px}@media(max-width:980px){.security-layout{gap:40px;grid-template-columns:1fr 440px}.security-header,.security-layout,.security-footer{padding-left:28px;padding-right:28px}h1{font-size:45px}}@media(max-width:760px){.security-header{padding:22px}.security-brand{font-size:22px}.security-layout{display:flex;flex-direction:column;gap:25px;margin:10px auto 30px;padding:0 18px;max-width:510px}.security-story{padding:5px 7px 0}.security-story .eyebrow{font-size:9px}h1{font-size:36px;letter-spacing:-1.4px;line-height:1.15;margin:13px 0 12px}h1 br{display:none}.story-lead,.security-story>p:not(.story-lead),.privacy-note,.security-story>small{display:none}.security-card{width:100%;padding:24px 22px;border-radius:20px}.security-card h2{font-size:24px}.security-footer{margin:0 22px;padding:20px 0;flex-wrap:wrap;font-size:10px}.back-link{font-size:10px}.setup-steps{gap:19px}}

/* Shared hierarchy: title, field label, helper, compact notice. */
.lock-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7}.password-field{display:block;position:relative}.password-field input{padding-right:65px}.password-field button{position:absolute;right:12px;top:0;height:48px;background:none;border:0;color:var(--accent);font-size:11px;font-weight:650;cursor:pointer}.setup-guide{padding:11px 13px}.setup-guide p{margin-bottom:3px}.card-foot p{margin:0}.card-foot details{margin-top:7px}.card-foot summary,.security-details summary{cursor:pointer;color:var(--muted);font-size:11px}.card-foot details p{padding-top:9px}.panel [role=status]:empty{display:none}.panel [role=status]{font-size:11px;padding:10px 12px;border-radius:9px;border:1px solid #6da8d744;background:#316e9b16;color:#b7d9f5}.panel [role=status][data-tone=success]{border-color:#69bc874d;background:#2d7b481a;color:#a5dfb9}.panel [role=status][data-tone=error]{border-color:#ca69764d;background:#8a35431a;color:#ffbdc5}#security-status{font-size:11px;line-height:1.5}.security-details{margin-top:18px}.security-details p{font-size:11px}.setup-steps{padding:12px 0;border-bottom:1px solid var(--line)}

/* GoPhaze green surfaces; shared layout and Unseriety palette stay consistent. */
body[data-product=gophaze]{--bg:#0d1713;--card:#17251e;--line:#344b3b;--muted:#a7b9ac;background:radial-gradient(ellipse at 15% 15%,#426f2929,transparent 55%),var(--bg)}
body[data-product=gophaze] .story-lead{color:#c3d5c5}
body[data-product=gophaze] .security-card{background:linear-gradient(145deg,#51743a12,transparent 65%),var(--card);border-color:#40583d}
body[data-product=gophaze] input{background:#101c15;border-color:#52694f}
body[data-product=gophaze] input:focus{box-shadow:0 0 0 3px #d9ff4d17}
body[data-product=gophaze] input:-webkit-autofill{ -webkit-box-shadow:0 0 0 1000px #101c15 inset!important}
body[data-product=gophaze] .secondary:hover{background:#d9ff4d0a;border-color:#79934d}
body[data-product=gophaze] #security-status:not([data-tone=error]){background:#a8d66d12;color:#d3e8b8;border-color:#91b85440}

/* Finishing details and action-led motion. */
.security-card{position:relative;box-shadow:0 24px 70px #0004,inset 0 1px 0 #ffffff09;overflow:hidden}
.security-card:before{content:"";position:absolute;inset:0 22% auto;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.42;pointer-events:none}
h1,.security-card h2{ text-shadow:0 2px 18px #0002;text-wrap:balance}
.security-card h2{font-weight:720;letter-spacing:-.8px}.card-description{line-height:1.7;max-width:43ch}
.setup-steps{gap:30px;padding:16px 0 20px;margin-bottom:24px}.setup-steps li>span{width:25px;height:25px}.setup-steps li[aria-current=step]>span{box-shadow:0 0 18px color-mix(in srgb,var(--accent) 14%,transparent)}
.setup-guide{padding:14px 16px;background:linear-gradient(110deg,color-mix(in srgb,var(--accent) 4%,transparent),transparent);border-radius:13px}
.setup-guide .text-button{display:inline-flex;align-items:center;gap:10px;padding:5px 0;margin-top:2px}.text-button span{margin:0}
label{margin:20px 0;font-size:12px;letter-spacing:.08px}input{padding:14px 15px;border-radius:12px;min-height:50px}
.button{min-height:49px;border-radius:12px;margin-top:22px;box-shadow:0 3px 14px #00000016;font-size:12px;letter-spacing:.1px}
.button.secondary{margin-top:10px;box-shadow:none;background:#ffffff02}.existing-passkey{margin-top:27px;padding-top:23px}.existing-passkey .button{margin-top:12px}.card-foot{margin-top:27px;padding-top:21px;line-height:1.7}
.password-field input{padding-right:57px}.password-field .eye-toggle{right:6px;top:5px;width:40px;height:40px;display:grid;place-items:center;border-radius:9px;color:var(--muted)}
.eye-toggle svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}.eye-slash{stroke-dasharray:24;stroke-dashoffset:0}.eye-toggle.is-visible .eye-slash{stroke-dashoffset:24}.eye-toggle.is-visible .eye-pupil{transform:scale(1.12);transform-origin:center}.eye-toggle:hover{color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.password-stars{position:absolute;left:15px;right:57px;top:0;height:50px;display:flex;align-items:center;gap:4px;overflow:hidden;white-space:nowrap;pointer-events:none;color:var(--ink);mask-image:linear-gradient(90deg,#000 94%,transparent);font-size:13px}.password-stars span{flex:none;text-shadow:0 0 7px color-mix(in srgb,var(--accent) 20%,transparent)}
.password-field.is-masked input{color:transparent;-webkit-text-fill-color:transparent!important;caret-color:var(--accent)}
.password-field.is-masked input:-webkit-autofill{-webkit-text-fill-color:transparent!important}
#security-status,.panel [role=status]{line-height:1.65;border-left-width:3px;border-radius:10px}
.security-details summary,.card-foot summary{display:list-item;padding:6px 0;font-weight:550}.security-details[open],.card-foot details[open]{padding-bottom:8px}
a,button,input,.setup-guide,.lock-icon,.setup-steps li,.setup-steps li>span,.security-card,summary{transition:color .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease,opacity .18s ease}
.eye-toggle svg,.eye-pupil,.eye-slash{transition:stroke-dashoffset .25s ease,transform .22s ease,opacity .18s ease}
.button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 7px 18px #0003}.button:active:not(:disabled){transform:translateY(1px) scale(.985);box-shadow:0 1px 5px #0002}.text-button:hover span,.back-link:hover span{transform:translateX(3px)}.text-button span,.back-link span{display:inline-block;transition:transform .18s ease}.text-button:active,.eye-toggle:active{transform:scale(.95)}
input:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}input:focus{transform:translateY(-1px)}summary:hover{color:var(--accent)}summary:active{transform:translateX(2px)}.security-brand:hover{transform:translateY(-1px)}.security-footer a:hover,.back-link:hover{color:var(--accent)}
@keyframes security-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes security-notice{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes password-autofill{from{opacity:.99}to{opacity:1}}
.security-story,.security-card{animation:security-enter .4s ease both}.security-card{animation-delay:.06s}#security-status:not(:empty),.panel [role=status]:not(:empty),.panel,.passkey-list p{animation:security-notice .22s ease both}input:-webkit-autofill{animation:password-autofill .01s}button:disabled{transform:none;box-shadow:none}
@media(max-width:760px){.setup-steps{gap:26px;padding:14px 0 18px}.security-card{padding:25px 23px}.card-description{font-size:12px}.button{min-height:49px}.setup-guide{padding:13px 14px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.button:hover,.button:active,input:focus{transform:none!important}}
/* Private recovery card and compact activity history. */
.section-heading{display:flex;align-items:center;gap:10px}.section-heading h2{margin:0}.section-icon{width:27px;height:27px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;color:var(--accent)}.recovery-panel{margin-top:28px;padding-top:25px}.recovery-state{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11px;margin:16px 0}.state-dot{width:6px;height:6px;border-radius:50%;background:#8b95a5}.recovery-state[data-enabled=true] .state-dot{background:#9fd8af;box-shadow:0 0 9px #70d89130}.recovery-panel [role=status]:empty{display:none}.phrase-card{margin-top:18px;padding:17px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--accent) 4%,var(--bg));animation:security-enter .25s ease}.phrase-card-title{display:flex;gap:8px;justify-content:space-between;align-items:center}.phrase-card-title strong{font-size:12px}.phrase-card-title>span{font-size:9px;color:var(--accent);white-space:nowrap}.phrase-grid{list-style:none;counter-reset:phrase;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:17px 0;padding:0}.phrase-grid li{counter-increment:phrase;font-size:10px;font-weight:650;padding:9px 6px;border:1px solid var(--line);border-radius:7px;background:var(--bg);overflow:hidden}.phrase-grid li:before{content:counter(phrase) '. ';color:var(--muted);font-size:9px;font-weight:400}.phrase-confirm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.phrase-confirm label{font-size:10px;margin:6px 0}.phrase-confirm input{min-height:38px;padding:9px;font-size:11px}.recovery-check{display:flex;align-items:flex-start;gap:9px;font-size:11px;line-height:1.6;font-weight:400}.recovery-check input{min-height:0;width:15px;height:15px;flex:none;margin:2px 0 0;accent-color:var(--accent)}.recovery-actions{display:flex;gap:9px;align-items:center}.recovery-actions .button{margin-top:0;min-height:42px;font-size:11px}.recovery-history{list-style:none;padding:0;margin:8px 0}.recovery-history li{font-size:11px;padding:10px 0;border-bottom:1px solid var(--line)}.recovery-history time{display:block;color:var(--muted);font-size:10px;margin-top:3px}.recovery-entry{margin-top:14px;text-align:left}.recovery-entry>summary{font-size:11px;text-align:center}.recovery-form{margin-top:15px;padding-top:12px;border-top:1px solid var(--line)}textarea{display:block;width:100%;margin-top:8px;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:11px;padding:13px;font:inherit;resize:vertical;transition:border-color .18s,box-shadow .18s}textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent)}.recovery-form [role=status]{font-size:11px;line-height:1.65;color:#a5dfb9}.recovery-form [role=status][data-tone=error]{color:#ffbdc5}
@media(max-width:420px){.phrase-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.phrase-grid li{font-size:12px}.phrase-card-title{align-items:flex-start;flex-direction:column}}
.setup-steps li[data-complete=true]{color:var(--ink)}.setup-steps li[data-complete=true]>span{background:color-mix(in srgb,var(--accent) 10%,transparent);border-color:color-mix(in srgb,var(--accent) 35%,var(--line));color:var(--accent);font-weight:700}.passkey-list p{display:grid;grid-template-columns:1fr auto;align-items:center;gap:3px 10px;padding:14px}.passkey-list strong{font-size:12px;color:var(--ink);font-weight:600}.passkey-list small{grid-column:1 / -1;font-size:10px;color:var(--muted)}.passkey-ready{font-size:9px;font-weight:650;border-radius:20px;padding:3px 9px;color:#b1e1bd;background:#68c58415;border:1px solid #68c58435}.panel [role=status][data-tone=info]{color:#badcf4;background:#316e9b16;border-color:#6da8d744}

.mfa-panel{padding:24px;border:1px solid #3b4b3b;border-radius:18px;margin:20px 0;background:#19271e}.mfa-panel h2{font-size:24px}.mfa-panel p{font-size:13px;line-height:1.8}.mfa-state{color:#d7ff3f}.mfa-actions{display:flex;gap:12px;flex-wrap:wrap}.mfa-panel form{display:grid;gap:16px;margin-top:20px}.mfa-panel input{font-size:22px;letter-spacing:6px}.mfa-qr{display:block;max-width:220px;width:100%;height:auto;background:white;border-radius:12px;margin:20px auto}.mfa-secret{display:block;overflow-wrap:anywhere;padding:14px;user-select:all;font-size:13px}.mfa-panel [hidden]{display:none!important}
