.account-panel {
  width: min(100% - 2rem, 38rem);
  margin: 1.5rem auto 3rem;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  text-align: left;
  color: var(--m5-text, #242039);
  background: var(--m5-surface, #fff);
  border: 1px solid var(--m5-border, #d7cbdd);
  border-radius: 1.25rem;
  box-shadow: 0 12px 40px rgb(40 24 60 / 6%);
}
.account-panel-wide { width: min(100% - 2rem, 48rem); }
.account-panel h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 1rem; }
.account-panel h2, .account-panel .h5 { font-size: 1.15rem; }
.account-eyebrow { color: var(--m5-accent, #7950ac); font-weight: 700; }
.account-panel label { display: block; margin: .8rem 0 .3rem; font-weight: 600; }
.account-panel input, .account-panel .form-control {
  width: 100%; min-height: 3rem; border-radius: .65rem;
  border: 1px solid var(--m5-border, #baafc7);
  background: var(--m5-surface, #fff); color: inherit; padding: .7rem .9rem;
}
.account-panel input:focus-visible, .account-panel button:focus-visible, .account-panel a:focus-visible {
  outline: 3px solid var(--m5-accent, #9861d9); outline-offset: 3px;
}
.account-button, .account-panel .btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.8rem; padding: .65rem 1.2rem; margin: .8rem 0;
  background: var(--m5-accent, #7950ac); color: #fff; border: 1px solid transparent;
  border-radius: .65rem; text-decoration: none; font-weight: 650;
}
.account-panel .btn-outline-primary { color: inherit; border-color: var(--m5-border, #baafc7); min-height: 2.8rem; }
.account-panel button:disabled { opacity: .55; cursor: default; }
.account-panel a { color: var(--m5-link, #74419c); }
.account-panel a.account-button { color: #fff; }
.account-panel .account-link { color: var(--m5-link, #74419c); background: transparent; border: 0; text-decoration: none; min-height: 2.8rem; }
.account-message { padding: .9rem 1rem; border-inline-start: 3px solid var(--m5-accent, #9861d9); background: var(--m5-surface-soft, #f4edf7); border-radius: .4rem; }
.account-footer, .account-security { margin-top: 1.5rem; padding-top: 1.3rem; border-top: 1px solid var(--m5-border, #d7cbdd); }
.account-hint { font-size: .9rem; margin-top: .4rem; }
.account-identifier, .account-passkeys li, .account-actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.account-passkeys { list-style: none; padding: 0; }
.account-passkeys li { justify-content: space-between; border-bottom: 1px solid var(--m5-border, #d7cbdd); }
.account-admin-link { display: inline-block; margin-top: 1rem; }

.account-panel { --core-auth-surface: var(--m5-surface); --core-auth-ink: var(--m5-text); --core-auth-muted: var(--m5-muted); --core-auth-line: var(--m5-border); --core-auth-primary: var(--m5-accent); --core-auth-primary-strong: var(--m5-accent-hover); --core-auth-accent: var(--m5-link); --core-auth-accent-strong: var(--m5-ink); --core-auth-focus-ring: var(--m5-focus); }
.account-panel .form-floating > .form-control { padding-top: 1.65rem; padding-bottom: .6rem; }
.account-panel .form-floating > label { margin: 0; font-weight: 500; }
.account-panel .core-auth-card .form-control { background: var(--m5-surface); color: var(--m5-text); }
.account-panel .account-button, .account-panel .core-auth-primary-action, .account-panel .core-auth-password-icon {
  color: var(--m5-on-accent);
}
.account-panel .core-auth-passkey-action, .account-panel .core-auth-passkey-icon { color: var(--m5-surface); }

.account-security h3 { font-size: 1.1rem; margin-top: 1.5rem; }
.account-authenticator-setup { padding: 1rem; border: 1px solid var(--bs-border-color, #ccd2d5); border-radius: .75rem; }
.account-authenticator-setup img { display: block; max-width: 100%; height: auto; background: white; }
.account-authenticator-setup code { overflow-wrap: anywhere; user-select: all; }

/* Account actions use a calm blue, with clear secondary buttons in both themes. */
:root { --m5-account-action: #31536a; --m5-account-action-hover: #254257; --m5-account-on-action: #ffffff; }
:root[data-theme="dark"] { --m5-account-action: #a9cce1; --m5-account-action-hover: #c1dcec; --m5-account-on-action: #152a38; }
.account-panel { --m5-accent: var(--m5-account-action); --m5-accent-hover: var(--m5-account-action-hover); --m5-on-accent: var(--m5-account-on-action); }
.account-button, .account-panel .btn-primary { min-height: 42px; padding: 9px 15px; font-size: .86rem; background: var(--m5-account-action); color: var(--m5-account-on-action); }
.account-panel .account-button, .account-panel a.account-button { color: var(--m5-account-on-action); }
.account-button:hover, .account-panel .btn-primary:hover { background: var(--m5-account-action-hover); color: var(--m5-account-on-action); text-decoration: none; }
/* Secondary links also carry account-button; their text must use the surface color role. */
.account-panel .account-link,
.account-panel .account-secondary,
.account-panel .account-button.account-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 9px 15px;
  border: 1px solid var(--m5-border);
  border-radius: .65rem;
  background: var(--m5-surface);
  color: var(--m5-text);
  text-decoration: none;
  font-size: .86rem;
  font-weight: 550;
}
.account-panel .account-link:hover, .account-panel .account-secondary:hover { background: var(--m5-surface-soft); }
.account-panel .account-passkeys li { padding-block: 10px; }
.account-security-panel { width: 100%; margin: 0 0 18px; padding: 22px; border-radius: 14px; box-shadow: none; }
.account-security-panel .account-security { margin: 0; padding: 0; border: 0; }
.account-security-panel p { line-height: 1.65; }
.account-button:focus-visible { outline: 3px solid var(--m5-focus); outline-offset: 3px; }

/* Override the shared sign-in components' white labels on our pale dark-mode fills,
   including their scoped hover/focus rules and the matching email/password icons. */
.account-panel .core-auth-card .core-auth-primary-action,
.account-panel .core-auth-card .core-auth-primary-action:is(:hover, :focus-visible),
.account-panel .core-auth-card :is(.core-auth-email-icon, .core-auth-password-icon) {
  color: var(--m5-account-on-action);
}

.account-panel .core-auth-card .core-auth-passkey-action,
.account-panel .core-auth-card .core-auth-passkey-action:is(:hover, :focus-visible) {
  color: var(--m5-surface);
}

/* Keep disabled labels readable without making them resemble enabled filled actions. */
.account-panel .account-button:disabled,
.account-panel .core-auth-card :is(.core-auth-primary-action, .core-auth-method-action):disabled {
  background: var(--m5-surface-raised);
  border-color: var(--m5-border);
  color: var(--m5-muted);
  opacity: 1;
}