/* Shared portal/admin passkey controls; no changes to native form geometry. */
.employee-passkeys-host{min-width:0;margin-top:20px;padding-top:16px;border-top:1px solid var(--c-line,var(--border,#8094aa))}
.passkey-manager.employee-passkeys{box-sizing:border-box;width:100%;max-width:none;margin:0;padding:16px;border-radius:12px;box-shadow:none}
.employee-passkeys h3{margin:0;font-size:1rem}
.employee-passkeys p{margin:0;overflow-wrap:anywhere}
.employee-passkeys label{display:grid;gap:6px;min-width:0}
.employee-passkeys [data-passkey-list]{min-width:0}
.employee-passkeys .passkey-item button{flex:none;white-space:nowrap}
.passkey-login,.passkey-manager{display:grid;gap:12px;min-width:0}
.passkey-login{margin-block:16px}
.passkey-wide{width:100%;white-space:nowrap}
/* Keep module layout after shared Admin button normalization; variants stay shared. */
.unified-admin :is(.studio,.studio-dialog) .passkey-manager .btn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unified-admin :is(.studio,.studio-dialog) .passkey-manager .btn.passkey-wide{width:100%}
.passkey-item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px;border-bottom:1px solid var(--border,var(--cp-border,#8094aa))}
.passkey-item>span{min-width:0;overflow-wrap:anywhere}
.passkey-manager{max-width:760px;margin-inline:auto;padding:20px}
.passkey-manager input{width:100%;box-sizing:border-box}
.passkey-manager p{font-size:.95rem;line-height:1.5}
.passkey-login [hidden],.passkey-manager [hidden]{display:none!important}
.passkey-account-link{margin-block:8px;display:inline-flex;align-items:center;gap:8px}
@media(max-width:480px){.passkey-manager{padding:16px}.passkey-item{gap:10px}}

/* Navigation uses the synchronized button variants; these rules only arrange them. */
.passkey-settings-tabs{display:flex;flex-wrap:wrap;gap:12px;margin-block:16px}
.passkey-settings-tabs>a{flex:1 1 140px;max-width:240px;text-align:center}

/* Shared account illustrations: loaded by both existing authenticated shells. */
.vr-account-hero,.vr-account-profile-card,.vr-account-passkeys,.vr-account-security,.vr-account-security-form{
 --va-ink:var(--cp-ink,var(--c-ink,#17304d));--va-muted:var(--cp-muted,var(--c-muted,#53667d));
 --va-paper:var(--cp-paper,var(--c-panel,#f9fbfd));--va-soft:var(--cp-soft,var(--c-soft,#e7f0fa));
 --va-line:var(--cp-line,var(--c-line,#d5dfeb));--va-accent:var(--cp-accent,var(--c-primary,#1c63c8));
}
.vr-account-hero{display:grid;grid-template-columns:minmax(0,1fr) clamp(76px,24%,180px);align-items:center;gap:clamp(12px,2vw,26px);padding:clamp(16px,2.5vw,24px);margin:0 0 20px;min-width:0;border:1px solid var(--va-line);border-radius:20px;background:linear-gradient(115deg,var(--va-paper) 20%,var(--va-soft));color:var(--va-ink);isolation:isolate}
.vr-account-hero .vr-account-copy{min-width:0}
.vr-account-hero .vr-account-eyebrow{margin:0 0 9px;font-family:inherit;font-size:.65rem;font-weight:700;line-height:1.5;letter-spacing:.12em;color:var(--va-ink);overflow-wrap:anywhere}
.vr-account-hero .vr-account-title{margin:0 0 10px;font-size:clamp(1.5rem,2.5vw,2rem);font-weight:650;line-height:1.15;letter-spacing:-.025em;color:var(--va-ink);overflow-wrap:anywhere}
.vr-account-hero h1.vr-account-title{font-size:clamp(1.85rem,3.2vw,2.7rem)}
.vr-account-hero .vr-account-description{max-width:52ch;margin:0;font-size:.875rem;line-height:1.65;color:var(--va-ink);overflow-wrap:anywhere}
.vr-account-art{min-width:0;pointer-events:none;align-self:center}
.vr-account-graphic{display:block;width:100%;height:auto;aspect-ratio:24/19;overflow:visible}
.vr-account-graphic .va-paper{fill:var(--va-paper);stroke:var(--va-accent)}
.vr-account-graphic .va-soft{fill:var(--va-soft);stroke:var(--va-accent)}
.vr-account-graphic .va-line{fill:none;stroke:var(--va-ink)}
.vr-account-graphic .va-accent{fill:none;stroke:var(--va-accent);stroke-width:2.5}
.vr-account-graphic .va-orbit{opacity:.3;stroke-dasharray:3 8}
.vr-account-graphic .va-spark{fill:var(--va-accent)}
.cp-welcome.vr-account-profile-welcome{max-width:960px;padding:24px 0 20px}
.vr-account-profile-welcome .vr-account-hero{margin:0}
.cp-profile-card.vr-account-profile-card{box-shadow:0 8px 28px #102b420a;border-radius:20px}
.vr-account-profile-card .cp-profile-avatar-row{padding-bottom:18px;border-bottom:1px solid var(--va-line)}
.vr-account-profile-card .cp-profile-avatar-edit{box-shadow:0 0 0 5px var(--va-soft)}
.vr-account-profile-card .cp-profile-avatar-label{font-size:.85rem;color:var(--va-ink)}
.vr-account-profile-card .cp-profile-address{padding-top:16px;border-top:1px solid var(--va-line)}
.vr-account-profile-card .cp-profile-address h2{display:flex;align-items:center;gap:8px}
.vr-account-profile-card .cp-profile-address h2::before{content:"";display:block;width:7px;height:7px;border-radius:50%;background:var(--va-accent);flex:none}
.passkey-manager.vr-account-passkeys{width:100%;max-width:760px;min-width:0;border:1px solid var(--va-line);border-radius:20px;background:var(--va-paper);color:var(--va-ink);box-shadow:0 8px 28px #102b420a}
.vr-account-passkeys .vr-account-hero{margin:0 0 4px}
.vr-account-passkeys .passkey-item{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:12px;padding:14px 0;border-color:var(--va-line)}
.vr-account-passkeys .passkey-item::before{content:"";width:24px;height:24px;align-self:center;background:var(--va-accent);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M14 9a5 5 0 1 1-10 0 5 5 0 0 1 10 0Zm0 0h7m-3 0v4m3-4v3'/%3E%3C/svg%3E") center/contain no-repeat}
.vr-account-passkeys .passkey-item>span{font-size:.9rem;line-height:1.55}
.vr-account-passkeys [data-passkey-feedback]:not([hidden]){border-inline-start:3px solid var(--va-accent);padding:12px;background:var(--va-soft);color:var(--va-ink);border-radius:10px;overflow-wrap:anywhere}
.vr-account-passkeys [data-passkey-readiness]{color:var(--va-muted)}
.vr-account-security>.vr-account-hero{margin-bottom:20px}
.vr-account-security-form{min-width:0}
.vr-account-security-form .security-advanced{border-color:var(--va-line)}
.vr-account-security-form input:focus-visible,.vr-account-security-form select:focus-visible,.vr-account-security-form textarea:focus-visible,.vr-account-passkeys input:focus-visible{outline:2px solid var(--va-accent);outline-offset:3px}
@media(max-width:420px){
 .vr-account-hero{gap:12px;padding:14px;grid-template-columns:minmax(0,1fr) 76px;border-radius:16px}
 .vr-account-hero .vr-account-description{font-size:.8125rem}
 .vr-account-passkeys .passkey-item{grid-template-columns:22px minmax(0,1fr) auto;gap:8px}
 .vr-account-passkeys .passkey-item::before{width:20px;height:20px}
}
@media(prefers-reduced-motion:no-preference){
 .vr-account-hero{animation:vr-account-enter .42s ease-out both}
 .vr-account-art-main{animation:vr-account-rise .7s .06s ease-out both;transform-box:fill-box;transform-origin:center}
 .vr-account-art-detail{animation:vr-account-rise .75s .14s ease-out both;transform-box:fill-box;transform-origin:center}
 .vr-account-profile-card{animation:vr-account-enter .4s .08s ease-out both}
 .vr-account-profile-card :is(input,select),.vr-account-passkeys input,.vr-account-security-form :is(input,select,textarea){transition:border-color .18s ease,box-shadow .18s ease}
 .vr-account-passkeys .passkey-item,.vr-account-passkeys [data-passkey-feedback]:not([hidden]),.vr-account-profile-card .cp-profile-feedback:not([hidden]){animation:vr-account-enter .2s ease-out both}
 .vr-account-passkeys[aria-busy=true] .vr-account-art-detail{animation:vr-account-working 1.2s ease-in-out infinite}
}
@keyframes vr-account-enter{from{opacity:.35;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes vr-account-rise{from{opacity:.25;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes vr-account-working{0%,100%{opacity:1;transform:translateY(0)}50%{opacity:.55;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){
 .vr-account-hero,.vr-account-art-main,.vr-account-art-detail,.vr-account-profile-card,.vr-account-passkeys .passkey-item,.vr-account-passkeys [data-passkey-feedback],.vr-account-profile-card .cp-profile-feedback{animation:none!important;transform:none!important}
 .vr-account-profile-card :is(input,select),.vr-account-passkeys input,.vr-account-security-form :is(input,select,textarea){transition:none}
}
@media(forced-colors:active){
 .vr-account-hero,.passkey-manager.vr-account-passkeys,.cp-profile-card.vr-account-profile-card{background:Canvas;color:CanvasText;border-color:CanvasText;box-shadow:none}
 .vr-account-hero :is(.vr-account-title,.vr-account-eyebrow,.vr-account-description){color:CanvasText}
 .vr-account-graphic :is(.va-paper,.va-soft){fill:Canvas;stroke:CanvasText}
 .vr-account-graphic :is(.va-line,.va-accent){stroke:CanvasText}
 .vr-account-passkeys .passkey-item::before{background:CanvasText}
}