.account-dialog.account-popover{position:fixed;inset:auto;margin:0;width:min(352px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;padding:20px;background:#fff;color:#282035;border:1px solid #e4daef;border-radius:18px;box-shadow:0 14px 42px #30204b24;z-index:1000;overscroll-behavior:contain}
.account-popover>.account-heading,.account-popover>.account-privacy{display:none}
.account-popover .account-content{margin:0;gap:16px}
.account-popover .account-identity{display:flex;align-items:center;gap:12px;min-width:0}
.account-popover .account-avatar{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:#eee5ff;color:#6730ef;font:600 21px Arial}
.account-popover .account-identity-copy{min-width:0}
.account-popover .account-identity h2{font:500 16px/1.45 'Segoe UI',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:0;color:#393344;margin:0;overflow-wrap:anywhere}
.account-popover .account-email{font:13px/1.45 Arial;color:#756981;margin:0;overflow-wrap:anywhere}
.account-popover .account-plan-details{background:#f5f0ff;border:1px solid #ece2fc;border-radius:14px;padding:16px;display:grid;gap:10px}
.account-popover .account-plan-badge{justify-self:start;display:inline-block;border-radius:999px;background:#e8ddff;color:#6329e0;padding:5px 10px;font:600 10px/1.2 Arial;letter-spacing:.35px}
.account-popover .account-plan-title{font:21px/1.25 Georgia,serif;color:#281d3a;margin:0;letter-spacing:-.4px}
.account-popover .account-plan-note{font:13px/1.5 Arial;color:#736780;margin:0}
.account-popover .account-current-plan{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 0 4px;color:#736780;font:15px/1.4 Arial}
.account-popover .account-current-plan .account-plan-title{font-size:28px}
.account-popover .account-current-plan .account-plan-free{font-size:21px}
.account-dialog.account-popover:has(.account-free-offer){width:min(440px,calc(100vw - 24px))}
.account-popover .account-free-offer{background:linear-gradient(135deg,#f7f2ff,#f3edff);border-color:#e1d2ff;padding:18px;gap:18px}
.account-free-offer .account-current-plan{border-bottom:1px solid #dfd0f7;padding-bottom:16px}
.account-popover .account-upgrade-title{margin:0;font:700 24px/1.2 Arial,sans-serif;letter-spacing:-.5px;color:#211332}
.account-upgrade-benefits{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.account-upgrade-benefits li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:center;font:400 15px/1.4 Arial,sans-serif;color:#291b3b}
.account-upgrade-check{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#9b57ff,#6324ff);color:#fff;font:400 22px/1 Arial,sans-serif;box-shadow:inset 0 1px 2px #ffffff50}
.account-popover .account-free-offer .account-primary{min-height:48px;font-size:17px;background:linear-gradient(110deg,#7138ff,#6026ef)}
.account-popover .account-free-offer .account-primary:hover{background:linear-gradient(110deg,#6228ee,#5020d5)}
@media(max-width:400px){.account-popover .account-free-offer{padding:14px;gap:16px}.account-popover .account-upgrade-title{font-size:22px}.account-upgrade-benefits li{font-size:14px;gap:10px}}
.account-popover .account-remaining-heads{display:grid;gap:8px;border-top:1px solid #dfd0f5;margin-top:4px;padding-top:14px}
.account-popover .account-remaining-title{margin:0;color:#281d3a;font:600 18px/1.3 Georgia,serif;letter-spacing:-.2px}
.account-popover .account-primary{width:100%;min-height:44px;border:0;border-radius:10px;padding:12px 14px;background:#6730ef;color:#fff;box-shadow:none;font:600 14px/1.4 Arial}
.account-popover .account-primary:hover{background:#5520d7;color:#fff}
.account-popover .account-usage-track{height:7px;border-radius:99px;background:#e5dcf4;overflow:hidden;margin:1px 0 5px}
.account-popover .account-usage-fill{height:100%;background:#7944ee;border-radius:99px}
.account-popover .account-nav{display:grid;gap:0}
.account-popover .account-row{display:flex;align-items:center;gap:12px;min-height:48px;width:100%;padding:12px 5px;border:0;border-radius:8px;background:transparent;color:#30243d;box-shadow:none;font:400 14px/1.4 Arial;text-align:left;text-decoration:none;cursor:pointer}
.account-popover .account-row:hover{background:#f7f3fe;color:#5f2bd8}
.account-popover .account-row svg{width:20px;height:20px;flex:none}
.account-popover .account-row .account-chevron{margin-left:auto;color:#8e7ba4;width:15px;height:15px}
.account-popover .account-row-label{flex:1}
.account-popover .account-signout{border-top:1px solid #ebe3f2;padding-top:10px}
.account-popover .account-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:4px 0}
.account-popover .account-footer a,.account-popover .account-delete-toggle{color:#7a6b89;font:12px/1.4 Arial;text-decoration:underline;text-underline-offset:3px;background:none;border:0;box-shadow:none;padding:5px 0;min-height:32px;cursor:pointer}
.account-popover .account-delete-toggle:hover{color:#a12737;background:none}
.account-popover .account-delete-confirm{border-top:1px solid #e9dde9;padding-top:12px}
.account-popover .account-delete-confirm p{font:13px/1.5 Arial}
.account-popover .account-delete-confirm input{width:100%;margin:8px 0;font-size:16px}
.account-popover .account-message{font:13px/1.5 Arial;overflow-wrap:anywhere;margin:12px 0 0;min-height:0}
.account-popover .account-message:empty{display:none}
.account-popover :focus-visible{outline:3px solid #9971ed;outline-offset:2px}
.landing-account-actions .landing-heads{font-size:13px;color:#503675;text-decoration:none;white-space:nowrap;padding:10px}
.landing-account-actions [hidden]{display:none!important}
.landing-account-actions button[data-account-action=account]{border:1px solid #d8c7f6;background:#fff;color:#6730ef;border-radius:12px}
.account-trigger[aria-expanded=true],.landing-account-actions button[aria-expanded=true]{background:#f1eaff;border-color:#bba0f0}
.header-actions .account-trigger,.landing-account-actions [data-account-action=account]{order:3}
.header-actions .heads-link,.landing-account-actions .landing-heads{order:1}
@media(max-width:500px){.account-dialog.account-popover{padding:16px;border-radius:16px}.account-popover .account-content{gap:13px}.account-popover .account-row{min-height:46px}.landing-account-actions .landing-heads{font-size:12px;padding:8px 5px}}

.landing-account-actions:not([data-auth-ready]) [data-account-action]{visibility:hidden}
/* App-bar actions use crisp rounded rectangles; navigation links stay plain. */
header .account-trigger,
header .heads-link,
.site-header .landing-account-actions button,
.site-header .landing-account-actions .landing-heads,
body:not([data-mode=hero]) main>header .heads-link,
body:not([data-mode=hero]) main>header .editor-account-icon{
 border-radius:10px;
 border-width:1px;
 border-style:solid;
 box-shadow:inset 0 1px 0 #ffffff45;
 min-height:44px;
}
.site-header .landing-account-actions button[data-account-action=login],
.site-header .landing-account-actions .landing-heads{
 border-color:#ded3f3;
 background:#f5f0ff;
 color:#5e2dd5;
}
.site-header .landing-account-actions .landing-heads{display:inline-flex;align-items:center;justify-content:center;font-weight:600;padding:10px 14px}
.site-header .landing-account-actions button[data-account-action=signup]{border-color:#6732e7}
.site-header .landing-account-actions button[data-account-action=login]:hover,
.site-header .landing-account-actions .landing-heads:hover{background:#eae0ff}
body:not([data-mode=hero]) main>header .editor-account-icon{width:44px;height:44px}
@media(max-width:500px){.site-header .landing-account-actions .landing-heads{padding:9px 10px}}

/* Signed-in identity is the same circle in every app bar and in the menu. */
header .account-trigger.account-initial-trigger,
.site-header .landing-account-actions button.account-initial-trigger,
body:not([data-mode=hero]) main>header .account-trigger.account-initial-trigger{
 display:inline-grid;place-items:center;flex:0 0 44px;box-sizing:border-box;
 width:44px;height:44px;min-width:44px;min-height:44px;padding:0;
 border:0;border-radius:50%;background:#eee5ff;color:#6730ef;
 font:600 21px/1 Arial,sans-serif;box-shadow:none;
}
header .account-trigger.account-initial-trigger:hover,
.site-header .landing-account-actions button.account-initial-trigger:hover,
body:not([data-mode=hero]) main>header .account-trigger.account-initial-trigger:hover{background:#e4d7ff}

/* Login and signup: compact heading with a fixed top-right close target. */
.account-dialog:not(.account-popover)>.account-heading{display:block;min-height:36px;padding:0 44px 0 0}
.account-dialog:not(.account-popover) .account-close{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;line-height:1;border:0;background:transparent}

/* Account-first demo invitation; the reference supplies layout, SalonTwin supplies its theme. */
.account-dialog:not(.account-popover){background:#fdfcff;border-color:#dfd2ef;color:#291b3b;box-shadow:0 24px 100px #34205044}
.account-dialog:not(.account-popover)::backdrop{background:#23193288;backdrop-filter:blur(7px)}
.account-dialog:not(.account-popover) p,.account-dialog:not(.account-popover) label{color:#6b587e}
.account-dialog:not(.account-popover) h2{color:#291b3b}
.account-dialog:not(.account-popover) input{border-color:#d9c7ee;color:#291b3b;background:#fff}
.account-dialog:not(.account-popover) .account-primary{background:#7138ff;border-color:#7138ff;color:white;min-height:48px}
.account-dialog:not(.account-popover) .account-primary:hover{background:#6229e6}
.account-dialog .account-google{display:flex;gap:12px;align-items:center;justify-content:center;min-height:50px;background:#fff;border-color:#ddcdef;color:#291b3b;font-weight:600}
.account-dialog .account-google:hover{background:#f6f0ff}
.google-mark{font:bold 23px/1 Arial;color:#4285f4}
.account-divider{display:flex;align-items:center;gap:12px;font-size:12px;color:#8a759d}
.account-divider:before,.account-divider:after{content:'';height:1px;background:#e4d9f0;flex:1}
.account-dialog .account-mode-toggle{padding:6px;border:0;background:transparent;color:#7138ff;font-size:13px}
.account-dialog .account-mode-toggle:hover{background:transparent;text-decoration:underline}
.account-dialog.account-demo{width:min(980px,calc(100vw - 32px));padding:36px;max-height:calc(100dvh - 32px);border-radius:26px;column-gap:36px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.account-dialog.account-demo[open]{display:grid}
.account-demo>.account-heading,.account-demo>.account-content,.account-demo>.account-message{grid-column:2;min-width:0}
.account-dialog.account-demo>.account-heading{padding:16px 0 0;min-height:0;align-self:end;text-align:center}
.account-demo .account-heading h2{font:700 30px/1.2 system-ui,sans-serif;letter-spacing:-.6px}
.account-dialog.account-demo .account-auth-subtitle{text-align:center;color:#727079;font-size:15px;font-weight:400}
.account-demo .account-content{margin-top:18px;gap:16px}
.account-demo .account-message{margin:12px 0 0;min-height:0}
.account-demo .account-message:empty{display:none}
.account-demo-preview{grid-column:1;grid-row:1/4;align-self:stretch;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;min-width:0;padding:20px 12px;border-radius:20px;background:radial-gradient(ellipse at 50% 42%,#d9bbffbb,#efe3ff99 52%,#f8f3ff 85%)}
.account-demo-media{width:100%;aspect-ratio:1;position:relative;mix-blend-mode:multiply}
.account-demo-media img,.account-demo-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border:0;outline:none;box-shadow:none;pointer-events:none}
.account-demo-media video{opacity:0}.account-demo-media video.ready{opacity:1}
.account-demo-media:has(video.ready) img{visibility:hidden}
.account-dialog:not(.account-popover) :focus-visible{outline:3px solid #b393f3;outline-offset:3px}
@media(max-width:640px){
 /* Explicit compact rows prevent Safari from stretching the preview on first
    layout or redistributing space when its browser bars collapse on scroll. */
 .account-dialog.account-demo{padding:20px;gap:0;width:calc(100vw - 24px);height:max-content;grid-template-columns:minmax(0,1fr);grid-template-rows:140px max-content max-content;grid-auto-rows:max-content;align-content:start;max-height:calc(100svh - 24px);border-radius:20px;outline:none}
 .account-demo-preview{grid-row:1;grid-column:1;padding:0;background:radial-gradient(ellipse at 50% 50%,#d9bbff99,#f8f3ff 78%);height:140px;min-height:0;align-self:start}
 .account-demo-media{width:160px;height:160px;flex:none}
 .account-demo>.account-heading,.account-demo>.account-content,.account-demo>.account-message{grid-column:1}
 .account-dialog.account-demo>.account-heading{padding:0;text-align:center;align-self:start}
 .account-demo .account-heading h2{font-size:27px}.account-demo .account-content{gap:12px;margin-top:12px}.account-demo .account-content>p{text-align:center;font-size:14px}
 .account-dialog.account-demo .account-close{top:8px;right:8px;z-index:2;background:#ffffffb3}
}

/* Opening the menu focuses its container; do not draw a ring around the whole card. */
#account-menu,#account-menu:focus,#account-menu:focus-visible{outline:none;outline-offset:0}