/* Account foundation: server-backed, restrained settings workspace. */
.account-inner-page { min-height:calc(100vh - 56px); padding:0 !important; background:#f4f7fb; }
.account-page {
  --account-bg:#f4f7fb; --account-panel:#fff; --account-soft:#f8faff; --account-raised:#eef2f8;
  --account-border:#dce3ee; --account-border-soft:rgba(91,105,132,.16);
  --account-text:#162033; --account-muted:#748096;
  --account-success:#237a51; --account-success-soft:rgba(35,122,81,.1);
  --account-warning:#9a6700; --account-warning-soft:rgba(154,103,0,.1);
  --account-danger:#b4233a; --account-danger-soft:rgba(180,35,58,.09);
  min-height:calc(100vh - 56px); color:var(--account-text); background:var(--account-bg);
}
.page.theme-dark .account-inner-page { background:#101319; }
.page.theme-dark .account-page {
  --account-bg:#101319; --account-panel:#191e28; --account-soft:#151a23; --account-raised:#222936;
  --account-border:#2d3543; --account-border-soft:rgba(143,157,180,.13);
  --account-text:#f2f5fb; --account-muted:#98a4b9;
  --account-success:#78d6a6; --account-success-soft:rgba(80,200,135,.12);
  --account-warning:#f1c66d; --account-warning-soft:rgba(241,198,109,.12);
  --account-danger:#ff8b9e; --account-danger-soft:rgba(255,105,130,.12);
  color-scheme:dark;
}

.account-shell { display:grid; grid-template-columns:14.5rem minmax(0,1fr); min-height:calc(100vh - 56px); }
.account-sidebar { min-width:0; padding:1rem .72rem; border-right:1px solid var(--account-border); background:var(--account-panel); }
.account-sidebar-identity {
  display:flex; align-items:center; gap:.68rem; min-width:0; padding:.45rem .48rem 1rem;
  border-bottom:1px solid var(--account-border-soft);
}
.account-sidebar-identity > div { display:grid; min-width:0; gap:.1rem; }
.account-sidebar-identity strong,
.account-sidebar-identity span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-sidebar-identity strong { color:var(--account-text); font-size:.82rem; }
.account-sidebar-identity > div > span { color:var(--account-muted); font-size:.68rem; }

.account-avatar {
  display:inline-flex; flex:0 0 2.5rem; align-items:center; justify-content:center;
  width:2.5rem; height:2.5rem; border:1px solid hsla(var(--theme-hue),70%,54%,.24);
  border-radius:50%; color:var(--theme-accent-strong); background:var(--theme-accent-surface);
  font-size:.78rem; font-weight:800; letter-spacing:.03em;
  object-fit:cover; overflow:hidden;
}
.page.theme-dark .account-avatar { color:var(--theme-accent); }

.account-navigation { display:grid; gap:.25rem; margin-top:.9rem; }
.account-navigation-label {
  padding:0 .55rem .3rem; color:var(--account-muted); font-size:.64rem;
  font-weight:800; letter-spacing:.11em; text-transform:uppercase;
}
.account-navigation-item {
  display:flex; align-items:center; gap:.55rem; min-height:2.55rem; padding:.48rem .62rem;
  color:var(--account-muted); border:1px solid transparent; border-radius:.55rem;
  font-size:.78rem; font-weight:700; text-decoration:none;
}
.account-navigation-item:hover,
.account-navigation-item:focus-visible {
  color:var(--account-text); background:var(--account-raised); outline:none; text-decoration:none;
}
.account-navigation-item.is-active,
.account-navigation-item.is-active:hover {
  color:#fff; border-color:var(--theme-accent); background:var(--theme-accent);
  box-shadow:0 6px 16px var(--theme-accent-soft);
}

.account-workspace { min-width:0; padding:1.35rem clamp(1rem,2.8vw,2.5rem) 3rem; }
.account-header {
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  max-width:70rem; margin:0 auto 1rem;
}
.account-header h1 {
  margin:0 0 .12rem; color:var(--account-text); font-family:inherit;
  font-size:22px; font-weight:600; line-height:1.15;
}
.account-eyebrow,
.account-section-kicker {
  color:var(--account-muted); font-size:.72rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
}

.account-overview { display:grid; max-width:70rem; margin:0 auto; gap:1rem; }
.account-identity-card,
.account-usage-section,
.account-error {
  border:1px solid var(--account-border); border-radius:.75rem; background:var(--account-panel);
}
.account-identity-card { overflow:hidden; }
.account-identity-heading {
  display:flex; align-items:center; gap:1rem; padding:1.1rem 1.15rem;
  border-bottom:1px solid var(--account-border-soft); background:var(--account-soft);
}
.account-avatar-large { flex-basis:4.25rem; width:4.25rem; height:4.25rem; font-size:1.22rem; }
.account-identity-heading > div { min-width:0; }
.account-identity-heading h2 {
  margin:.16rem 0 0; overflow:hidden; color:var(--account-text); font-size:1.18rem;
  font-weight:700; text-overflow:ellipsis; white-space:nowrap;
}
.account-identity-heading p {
  margin:.08rem 0 0; overflow-wrap:anywhere; color:var(--account-muted); font-size:.78rem;
}

.account-statuses { display:flex; flex-wrap:wrap; gap:.42rem; margin-top:.62rem; }
.account-status {
  display:inline-flex; align-items:center; gap:.28rem; padding:.18rem .48rem;
  color:var(--account-muted); border:1px solid var(--account-border); border-radius:999px;
  background:var(--account-panel); font-size:.65rem; font-weight:750;
}
.account-status.is-verified { color:var(--account-success); border-color:rgba(45,150,98,.24); background:var(--account-success-soft); }
.account-status.is-warning { color:var(--account-warning); border-color:rgba(176,122,12,.24); background:var(--account-warning-soft); }
.account-status.is-admin { color:var(--account-text); }
.account-inline-action {
  display:inline-flex; align-items:center; gap:.32rem; margin-top:.7rem; color:var(--theme-accent-strong);
  font-size:.72rem; font-weight:750; text-decoration:none;
}
.account-inline-action:hover,
.account-inline-action:focus-visible { color:var(--theme-accent); outline:none; text-decoration:underline; }
.account-inline-action + .account-inline-action { margin-left:.7rem; }

.account-details { display:grid; margin:0; }
.account-details > div {
  display:grid; grid-template-columns:minmax(8rem,.36fr) minmax(0,1fr); gap:1rem;
  padding:.82rem 1.15rem; border-bottom:1px solid var(--account-border-soft);
}
.account-details > div:last-child { border-bottom:0; }
.account-details dt { color:var(--account-muted); font-size:.72rem; font-weight:700; }
.account-details dd {
  display:flex; align-items:center; gap:.38rem; min-width:0; margin:0;
  overflow-wrap:anywhere; color:var(--account-text); font-size:.76rem; font-weight:650;
}

.account-usage-section { padding:1rem 1.05rem 1.1rem; }
.account-section-heading {
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:.82rem;
}
.account-section-heading h2 { margin:.15rem 0 0; color:var(--account-text); font-size:1rem; font-weight:700; }
.account-section-heading > span { color:var(--account-muted); font-size:.68rem; }
.account-metric-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.68rem; }
.account-metric-card {
  display:flex; min-width:0; flex-direction:column; gap:.1rem; min-height:7.6rem; padding:.78rem;
  border:1px solid var(--account-border-soft); border-radius:.65rem; background:var(--account-soft);
}
.account-metric-icon {
  display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; margin-bottom:.38rem;
  color:var(--theme-accent-strong); border-radius:.48rem; background:var(--theme-accent-surface);
}
.page.theme-dark .account-metric-icon { color:var(--theme-accent); }
.account-metric-card > span:not(.account-metric-icon) { color:var(--account-muted); font-size:.7rem; font-weight:700; }
.account-metric-card strong { color:var(--account-text); font-size:1.55rem; font-weight:700; line-height:1.1; }
.account-metric-card small { margin-top:auto; color:var(--account-muted); font-size:.66rem; }

.account-profile-grid { display:grid; max-width:70rem; margin:0 auto; gap:1rem; }
.account-panel {
  min-width:0; padding:1rem 1.05rem; border:1px solid var(--account-border);
  border-radius:.75rem; background:var(--account-panel);
}
.account-panel-heading {
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  margin-bottom:.95rem; color:var(--account-muted);
}
.account-panel-heading h2 { margin:.15rem 0 0; color:var(--account-text); font-size:1rem; font-weight:700; }
.account-avatar-editor { display:flex; align-items:center; gap:1rem; }
.account-avatar-xl { flex-basis:6rem; width:6rem; height:6rem; font-size:1.55rem; }
.account-avatar-copy { display:grid; min-width:0; gap:.3rem; }
.account-avatar-copy strong { color:var(--account-text); font-size:.82rem; }
.account-avatar-copy > span { max-width:38rem; color:var(--account-muted); font-size:.72rem; line-height:1.5; }
.account-file-input {
  position:absolute !important; width:1px !important; height:1px !important; padding:0 !important;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 !important;
}
.account-button-row { display:flex; flex-wrap:wrap; gap:.48rem; margin-top:.4rem; }
.account-button {
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem; min-height:2.35rem;
  margin:0; padding:.45rem .75rem; border:1px solid transparent; border-radius:.5rem;
  font-family:inherit; font-size:.72rem; font-weight:750; line-height:1; cursor:pointer;
}
.account-button.is-primary { color:#fff; border-color:var(--theme-accent); background:var(--theme-accent); }
.account-button.is-secondary { color:var(--account-text); border-color:var(--account-border); background:var(--account-raised); }
.account-button.is-danger { color:var(--account-danger); border-color:rgba(180,35,58,.25); background:var(--account-danger-soft); }
.account-button:hover:not(:disabled),
.account-button:focus-visible:not(:disabled) { filter:brightness(.96); outline:2px solid var(--theme-accent-soft); outline-offset:2px; }
.account-button:disabled { opacity:.48; cursor:not-allowed; }
.account-field { display:grid; gap:.35rem; margin:0 0 .85rem; }
.account-field > span { color:var(--account-text); font-size:.73rem; font-weight:750; }
.account-field input {
  width:100%; min-height:2.65rem; padding:.58rem .72rem; color:var(--account-text);
  border:1px solid var(--account-border); border-radius:.5rem; background:var(--account-soft);
  font-family:inherit; font-size:.78rem;
}
.account-field input:hover { border-color:var(--account-muted); }
.account-field input:focus { border-color:var(--theme-accent); outline:3px solid var(--theme-accent-soft); }
.account-field small { color:var(--account-muted); font-size:.67rem; }
.account-panel-actions { display:flex; justify-content:flex-end; padding-top:.15rem; }
.account-security-note {
  display:flex; align-items:flex-start; gap:.55rem; margin-bottom:.9rem; padding:.72rem;
  color:var(--account-warning); border:1px solid rgba(176,122,12,.22); border-radius:.55rem;
  background:var(--account-warning-soft); font-size:.7rem; line-height:1.45;
}
.account-security-note svg { flex:0 0 auto; }
.account-form-status { margin:.2rem 0 .8rem; padding:.58rem .68rem; border-radius:.5rem; font-size:.7rem; }
.account-form-status.is-success { color:var(--account-success); background:var(--account-success-soft); }
.account-form-status.is-error { color:var(--account-danger); background:var(--account-danger-soft); }
.profile-menu-avatar[src] { object-fit:cover; }

.account-security-grid {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); max-width:70rem; margin:0 auto; gap:1rem;
}
.account-security-grid > .account-panel:first-child,
.account-events-panel { grid-column:1/-1; }
.account-security-note.is-neutral {
  color:var(--account-text); border-color:var(--account-border-soft); background:var(--account-soft);
}
.account-security-actions { align-items:center; justify-content:space-between; gap:1rem; }
.account-security-actions > span { color:var(--account-muted); font-size:.67rem; }
.account-password-control { position:relative; display:block; }
.account-password-control input { padding-right:2.75rem; }
.account-password-control button {
  position:absolute; top:50%; right:.35rem; display:inline-flex; align-items:center; justify-content:center;
  width:2rem; height:2rem; padding:0; color:var(--account-muted); border:0; border-radius:.4rem;
  background:transparent; transform:translateY(-50%);
}
.account-password-control button:hover,
.account-password-control button:focus-visible { color:var(--account-text); background:var(--account-raised); outline:2px solid var(--theme-accent-soft); }
.account-provider-guidance { display:grid; justify-items:start; gap:.48rem; }
.account-provider-guidance strong { color:var(--account-text); font-size:.8rem; }
.account-provider-guidance span,
.account-panel-copy { margin:0 0 .8rem; color:var(--account-muted); font-size:.72rem; line-height:1.55; }
.account-provider-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.68rem; }
.account-provider-mark {
  display:inline-flex; align-items:center; justify-content:center; width:2.35rem; height:2.35rem;
  color:var(--account-text); border:1px solid var(--account-border); border-radius:50%;
  background:var(--account-soft); font-size:.9rem; font-weight:800;
}
.account-provider-row > div { display:grid; min-width:0; gap:.08rem; }
.account-provider-row strong { color:var(--account-text); font-size:.78rem; }
.account-provider-row div span { color:var(--account-muted); font-size:.68rem; }
.account-provider-state {
  padding:.2rem .5rem; color:var(--account-muted); border:1px solid var(--account-border);
  border-radius:999px; background:var(--account-soft); font-size:.64rem; font-weight:750;
}
.account-provider-state.is-connected { color:var(--account-success); border-color:rgba(45,150,98,.24); background:var(--account-success-soft); }
.account-provider-row + .account-panel-copy { margin-top:.8rem; margin-bottom:0; }
.account-security-events { display:grid; margin:0; padding:0; list-style:none; }
.account-security-events li {
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.65rem;
  padding:.72rem 0; border-bottom:1px solid var(--account-border-soft);
}
.account-security-events li:first-child { padding-top:0; }
.account-security-events li:last-child { padding-bottom:0; border-bottom:0; }
.account-event-icon {
  display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem;
  color:var(--theme-accent-strong); border-radius:.48rem; background:var(--theme-accent-surface);
}
.account-security-events li > div { display:grid; min-width:0; gap:.08rem; }
.account-security-events strong { color:var(--account-text); font-size:.73rem; }
.account-security-events div span,
.account-security-events time { color:var(--account-muted); font-size:.66rem; }
.account-security-events time { text-align:right; }

.account-preferences-grid {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); max-width:70rem; margin:0 auto; gap:1rem;
}
.account-theme-panel,
.account-preference-savebar { grid-column:1/-1; }
.account-preference-row {
  display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 0 .95rem;
  border-bottom:1px solid var(--account-border-soft);
}
.account-preference-row > div:first-child,
.account-toggle-row > div { display:grid; min-width:0; gap:.14rem; }
.account-preference-row strong,
.account-toggle-row strong,
.account-theme-range-heading strong { color:var(--account-text); font-size:.77rem; }
.account-preference-row span,
.account-toggle-row span { color:var(--account-muted); font-size:.68rem; line-height:1.45; }
.account-segmented-control { display:inline-flex; flex:0 0 auto; padding:.18rem; border:1px solid var(--account-border); border-radius:.55rem; background:var(--account-soft); }
.account-segmented-control button {
  min-height:2rem; padding:0 .65rem; color:var(--account-muted); border:0; border-radius:.4rem; background:transparent;
  font-family:inherit; font-size:.7rem; font-weight:750;
}
.account-segmented-control button.is-active { color:#fff; background:var(--theme-accent); }
.account-segmented-control button:focus-visible { outline:2px solid var(--theme-accent-soft); outline-offset:2px; }
.account-theme-controls { display:grid; gap:.62rem; padding-top:.9rem; }
.account-theme-range-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.account-theme-range-heading span { color:var(--account-muted); font-size:.68rem; font-weight:700; }
.account-preference-range { width:100%; accent-color:var(--theme-accent); }
.account-preference-swatches { display:flex; flex-wrap:wrap; gap:.42rem; }
.account-preference-swatches button {
  width:1.65rem; height:1.65rem; padding:0; border:2px solid transparent; border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}
.account-preference-swatches button.is-active { border-color:var(--account-text); box-shadow:0 0 0 2px var(--account-panel),0 0 0 4px var(--theme-accent-soft); }
.account-preference-swatches button:focus-visible { outline:2px solid var(--theme-accent); outline-offset:2px; }
.account-spectrum-swatch { background:linear-gradient(135deg,#e94b7b,#f5bd51,#69c76e,#42a5e8,#9865de) !important; }
.account-preference-note {
  display:flex; align-items:flex-start; gap:.55rem; margin-top:.95rem; padding:.72rem; color:var(--account-muted);
  border:1px solid var(--account-border-soft); border-radius:.55rem; background:var(--account-soft); font-size:.69rem; line-height:1.5;
}
.account-preference-note svg { flex:0 0 auto; color:var(--theme-accent-strong); }
.account-toggle-row {
  display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.78rem 0; border-bottom:1px solid var(--account-border-soft);
}
.account-toggle-row:last-child { border-bottom:0; padding-bottom:0; }
.account-toggle {
  position:relative; flex:0 0 auto; width:2.65rem; height:1.5rem; padding:0; border:1px solid var(--account-border); border-radius:999px; background:var(--account-raised);
}
.account-toggle span { position:absolute; top:50%; left:.16rem; width:1.08rem; height:1.08rem; border-radius:50%; background:var(--account-panel); box-shadow:0 1px 3px rgba(15,23,42,.24); transform:translateY(-50%); transition:left .16s ease; }
.account-toggle.is-on { border-color:var(--theme-accent); background:var(--theme-accent); }
.account-toggle.is-on span { left:1.3rem; }
.account-toggle:focus-visible { outline:3px solid var(--theme-accent-soft); outline-offset:2px; }
.account-preference-savebar {
  display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.05rem;
  border:1px solid var(--account-border); border-radius:.75rem; background:var(--account-panel);
}
.account-preference-save-status { color:var(--account-muted); font-size:.72rem; }
.account-preference-save-status.is-success { color:var(--account-success); }
.account-preference-save-status.is-error { color:var(--account-danger); }

.account-data-grid { display:grid; max-width:70rem; margin:0 auto; gap:1rem; }
.account-danger-panel { border-color:rgba(180,35,58,.28); }
.account-danger-panel .account-panel-heading > svg { color:var(--account-danger); }
.account-deletion-warning {
  display:flex; align-items:flex-start; gap:.65rem; margin-bottom:1rem; padding:.82rem;
  color:var(--account-danger); border:1px solid rgba(180,35,58,.24); border-radius:.58rem; background:var(--account-danger-soft);
}
.account-deletion-warning > svg { flex:0 0 auto; }
.account-deletion-warning > div { display:grid; gap:.12rem; }
.account-deletion-warning strong { font-size:.78rem; }
.account-deletion-warning span { color:var(--account-muted); font-size:.69rem; line-height:1.5; }
.account-deletion-form { display:grid; gap:.85rem; }
.account-google-reauth {
  display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.82rem;
  border:1px solid var(--account-border-soft); border-radius:.58rem; background:var(--account-soft);
}
.account-google-reauth > div { display:grid; gap:.12rem; }
.account-google-reauth strong { color:var(--account-text); font-size:.76rem; }
.account-google-reauth span { color:var(--account-muted); font-size:.68rem; line-height:1.45; }
.account-reauth-complete { display:inline-flex; align-items:center; flex:0 0 auto; gap:.3rem; color:var(--account-success) !important; font-weight:750; }
.account-deletion-actions { align-items:center; justify-content:space-between; gap:1rem; }
.account-deletion-actions > span { max-width:28rem; color:var(--account-muted); font-size:.67rem; }

.account-error {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  max-width:70rem; margin:0 auto; padding:.9rem 1rem;
}
.account-error > div { display:grid; gap:.12rem; }
.account-error strong { color:var(--account-text); font-size:.82rem; }
.account-error span { color:var(--account-muted); font-size:.74rem; }
.account-error button {
  display:inline-flex; align-items:center; gap:.38rem; min-height:2.25rem; padding:0 .72rem;
  color:var(--account-text); border:1px solid var(--account-border); border-radius:.5rem;
  background:var(--account-raised); font-size:.74rem; font-weight:700;
}
.account-error button:hover,
.account-error button:focus-visible { color:var(--theme-accent-strong); border-color:var(--theme-accent); outline:none; }

.account-overview-skeleton { display:grid; max-width:70rem; margin:0 auto; gap:1rem; }
.account-skeleton-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.68rem; }
.account-skeleton-block {
  min-height:7.6rem; border:1px solid var(--account-border-soft); border-radius:.7rem;
  background:var(--account-raised); animation:account-skeleton-pulse 1.3s ease-in-out infinite alternate;
}
.account-skeleton-profile { min-height:15rem; }
@keyframes account-skeleton-pulse { from { opacity:.52; } to { opacity:.9; } }

@media (max-width:767.98px) {
  .account-shell { display:block; min-height:auto; }
  .account-sidebar { padding:.72rem; border-right:0; border-bottom:1px solid var(--account-border); }
  .account-sidebar-identity { padding:.2rem .22rem .72rem; }
  .account-navigation { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; margin-top:.68rem; }
  .account-navigation-label { grid-column:1/-1; padding:0 .45rem; }
  .account-navigation-item { justify-content:center; }
  .account-workspace { padding:.95rem .75rem 2rem; }
  .account-identity-heading { align-items:flex-start; padding:.9rem; }
  .account-avatar-large { flex-basis:3.5rem; width:3.5rem; height:3.5rem; }
  .account-details > div { grid-template-columns:1fr; gap:.24rem; padding:.72rem .9rem; }
  .account-metric-grid,
  .account-skeleton-metrics { grid-template-columns:1fr; }
  .account-metric-card { min-height:6.5rem; }
  .account-error { align-items:stretch; flex-direction:column; }
  .account-error button { justify-content:center; }
  .account-avatar-editor { align-items:flex-start; flex-direction:column; }
  .account-avatar-xl { flex-basis:5rem; width:5rem; height:5rem; }
  .account-button-row { width:100%; }
  .account-security-grid { grid-template-columns:1fr; }
  .account-security-grid > .account-panel:first-child,
  .account-events-panel { grid-column:auto; }
  .account-security-actions { align-items:stretch; flex-direction:column; }
  .account-security-actions .account-button { width:100%; }
  .account-security-events li { grid-template-columns:auto minmax(0,1fr); }
  .account-security-events time { grid-column:2; text-align:left; }
  .account-preferences-grid { grid-template-columns:1fr; }
  .account-theme-panel,
  .account-preference-savebar { grid-column:auto; }
  .account-preference-row,
  .account-preference-savebar { align-items:stretch; flex-direction:column; }
  .account-segmented-control { align-self:flex-start; }
  .account-preference-savebar .account-button-row { justify-content:stretch; }
  .account-preference-savebar .account-button { flex:1; }
  .account-google-reauth,
  .account-deletion-actions { align-items:stretch; flex-direction:column; }
  .account-google-reauth .account-button,
  .account-deletion-actions .account-button { justify-content:center; width:100%; }
}
@media (prefers-reduced-motion:reduce) { .account-skeleton-block { animation:none; } }