.account-controls { position:relative; flex:0 0 auto; }
#public-account-menu[hidden], .account-page [hidden] { display:none !important; }
.public-account-menu { position:absolute; right:0; top:calc(100% + 10px); width:280px; max-width:calc(100vw - 24px); padding:8px; border:1px solid var(--border); border-radius:14px; background:var(--sx-surface); box-shadow:0 12px 36px #20231e24; z-index:1100; }
.public-account-menu .account-menu-heading { padding:12px; border-bottom:1px solid var(--border); margin-bottom:6px; }
.account-menu-heading strong, .account-menu-heading small { display:block; overflow-wrap:anywhere; }
.account-menu-heading strong { font-size:14px; font-weight:600; }
.account-menu-heading small { margin-top:4px; color:var(--sx-muted); font-size:12px; }
.public-account-menu [role=menuitem] { display:block; width:100%; box-sizing:border-box; padding:11px 12px; border:0; border-radius:8px; text-align:left; background:transparent; color:var(--sx-text); font:inherit; font-size:13px; line-height:1.4; text-decoration:none; cursor:pointer; }
.public-account-menu [role=menuitem]:hover, .public-account-menu [role=menuitem]:focus-visible { background:var(--sx-row-hover); outline:2px solid var(--sx-accent); outline-offset:-2px; }
.public-account-menu .account-menu-signout { margin-top:6px; border-top:1px solid var(--border); border-radius:0 0 8px 8px; }
.account-page header, .account-page main, .account-page footer { max-width:960px; }
.account-page h1 { margin-top:20px; font-size:34px; }
.account-card { padding:26px; border:1px solid var(--fp-border); border-radius:16px; background:var(--sx-surface); margin-top:22px; }
.account-card h2 { margin:0 0 10px; font-size:20px; }
.account-muted { color:var(--sx-muted); }
.account-small { font-size:13px; }
.account-fields { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:22px 0; }
.account-fields label { display:flex; flex-direction:column; gap:8px; font-size:14px; }
.account-fields input, .account-fields select { box-sizing:border-box; width:100%; min-width:0; padding:11px 12px; min-height:44px; border:1px solid var(--fp-border); border-radius:9px; background:var(--sx-bg-from); color:var(--sx-text); font:inherit; }
.account-fields :is(input,select):focus-visible { outline:2px solid var(--sx-accent); outline-offset:2px; }
.account-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.account-page button, .account-button { display:inline-flex; align-items:center; justify-content:center; padding:11px 18px; font:inherit; font-size:14px; line-height:1.4; text-align:center; text-decoration:none; cursor:pointer; border:1px solid transparent; border-radius:24px; }
.account-page .account-text-button { padding:0; background:transparent; color:var(--sx-text); border:0; border-radius:0; }
.account-page .account-text-button:hover { background:transparent; text-decoration:underline; }
.account-page .account-secondary { background:transparent; border-color:var(--fp-border); color:var(--sx-text); }
.account-page .account-secondary:hover { background:var(--sx-row-hover); }
.account-page .account-button { background:var(--fp-lime); color:var(--sx-text); white-space:normal; }
.account-billing-card { display:flex; justify-content:space-between; align-items:center; gap:24px; }
.account-billing-card p { margin-bottom:0; max-width:45ch; }
.account-billing-card .account-button { flex:0 0 auto; max-width:260px; }
.account-page #account-error { color:var(--sx-neg); }
.account-page [role=status] { font-size:14px; }
@media (max-width:600px) {
  .account-fields { grid-template-columns:1fr; gap:16px; }
  .account-card { padding:20px; }
  .account-billing-card { flex-direction:column; align-items:flex-start; gap:18px; }
  .account-billing-card .account-button { max-width:100%; }
  .account-page h1 { font-size:29px; }
}