/* MeshWars: styles for the /account page (frontend/account.js).
   Loaded alongside theme.css + landing.css (frontend/account.html) --
   landing.css already supplies the page-wide html/body rules and the
   shared .mw-nav block, so this file only carries what's specific to
   this one page. */

/* This page has a lot of dynamically shown/hidden elements (account.js
   toggles .hidden throughout), and several of the classes below set
   their own `display` (block/flex/grid) at the same specificity the
   browser's own default `[hidden] { display: none }` uses -- an
   author rule beats a user-agent default regardless of specificity, so
   without this, an element with both a class that sets display AND the
   hidden attribute stays visible. Same fix admin.css's own [hidden]
   rule applies, blanket here rather than per-selector (join.css's own
   approach) because this page has too many such elements to track
   individually and getting even one wrong is a visible bug, not a
   cosmetic one. */
[hidden] { display: none !important; }

/* Widened to match rules.css's own .rules-wrap -- this page now carries
   the same contents-rail-plus-search layout /docs and /rules use
   (rules.css's .rules-layout/.rules-toc, loaded here alongside this
   file), and a 210px rail plus a reading column need more room than
   the single narrow column this page used to be. The two states that
   are NOT that two-column layout -- the loading hint and the signed-out
   sign-in panel, both direct children of this wrap -- get their own
   narrower measure below instead of stretching full width. */
.account-wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: calc(var(--mw-nav-h) + 24px) 16px 64px;
}

#account-loading,
#account-signed-out {
  max-width: 640px;
  margin: 0 auto;
}

/* The reading column next to the rail (rules.css's .rules-toc is the
   other .rules-layout child). Deliberately NOT .rules-body -- that
   class carries rules.css's own prose styling (gold-underlined h2s,
   a border under every section, paragraph line-height tuned for
   running text) built for /docs and /rules reading straight through,
   which would visually collide with this page's existing boxed
   .account-panel treatment instead of just sitting next to it. This
   page keeps its own panel look; only the rail/search chrome around
   it is shared. */
.account-body { max-width: 100%; }

.account-hint {
  font-size: 0.8125rem;
  color: var(--mw-text-5);
  margin: 4px 0 0;
}

.account-panel {
  background: var(--mw-panel);
  border: 1px solid var(--mw-line);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 16px;
}

/* A panel's own title -- one level below .account-group-title. Was a
   plain <div> until this page grew the same contents rail /docs and
   /rules use (see .account-wrap's own comment): search and the rail
   both need a real heading with an id to link to (frontend/page-search.js
   only indexes h2/h3), so every one of these is now an <h2> (the
   ungated Player panel, which has no surrounding group of its own) or
   an <h3> (every panel inside a group) instead, id'd in account.html.
   margin-top is reset here because a heading element carries its own
   user-agent default top margin that a <div> never did -- without
   this, every panel would have gained a gap above its title it didn't
   have before, a purely cosmetic regression the tag change alone
   would otherwise cause. */
.account-title {
  margin-top: 0;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mw-accent);
  margin-bottom: 8px;
}

/* The Player panel's "Join MeshWars" flow (#account-join-panel in
   account.html, #account-player-unlinked) sits above the older
   "connect an existing key" form as two distinct options, not one
   continuous form -- this border is the only thing marking that seam;
   everything else (spacing, field styling) already comes from the
   shared rules below. */
#account-join-panel {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--mw-line);
}

.account-error {
  background: #2a1414;
  border: 1px solid #663333;
  color: #f08080;
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 0.75rem;
  margin: 10px 0;
}

/* A completed pending-identity link (frontend/account.js's own
   maybeCompletePendingLink()) -- confirms once, in place, at the top of
   the signed-in view, rather than leaving the connection implicit in
   the identities list below it. Same green "everything's fine" tint
   join.css's .status-diagnosis-ok uses for the same kind of message. */
.account-banner {
  background: #16240f;
  border: 1px solid var(--mw-friendly);
  color: #b8e0a0;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 0.875rem;
  font-weight: 600;
}

/* The non-dismissible "set a password" onboarding prompt
   (frontend/account.js's renderOwesPasswordBanner(), gated on GET
   /api/account's owes_password). Deliberately gold/accent-toned, not
   the red .account-error or .account-warning-box treatment used
   elsewhere on this page -- this isn't reporting that something went
   wrong, it's a required next step, the same "important, not an
   error" register --mw-accent-wash/-line already carries for a
   currently-selected control (see theme.css's own comments on those
   two variables). A thicker-than-usual border and its own vertical
   rhythm (more padding than .account-panel) are what make it read as
   "at the top for a reason" next to the plain panels below it -- and
   there is deliberately no close/dismiss control anywhere in this
   rule or the markup it styles (frontend/account.html). The relocated
   #account-password-form (see account.js's own comment on the move)
   inherits .account-password-form's own layout unchanged; only the
   spacing above it here is this rule's concern. */
.account-owes-password-banner {
  background: var(--mw-accent-wash);
  border: 2px solid var(--mw-accent-wash-line);
  border-left: 4px solid var(--mw-accent);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.account-owes-password-title {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--mw-accent);
  margin-bottom: 6px;
}
.account-owes-password-copy p {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--mw-text-5);
  margin: 0 0 12px;
}
/* The relocated form sits directly in the banner once it's owed --
   .account-password-form's own margin-top (below) is right for its
   normal spot just under a hint paragraph in the Security panel, but
   reads as too much extra air stacked under the copy paragraph above,
   which already carries its own margin-bottom. */
.account-owes-password-banner .account-password-form {
  margin-top: 0;
}

/* The "check your email" status line under the magic-link button --
   everything else this sign-in card needs now lives in
   frontend/signin.css (shared with join.css/link.css, see that
   file's own header), but this rule's colour differs on link.css
   (a different --mw-text-* step), so it stays local rather than
   forcing all three pages to the same shade. */
.signin-email-sent {
  font-size: 0.6875rem;
  color: var(--mw-text-6);
  margin: 8px 0 0;
}

/* ---- Password sign-in (POST /auth/password/start) ------------------------
   A SECOND action on the same #account-signin-email-form as the
   magic-link button above it, sharing that form's one email field --
   see account.html's own comment on #account-signin-password-group for
   why this isn't a separate form. Same shape join.css defines for its
   own #signin-password-group -- link.css has no equivalent (link.html
   never offers password sign-in, see link.js's own comment), so this
   isn't a three-way match like frontend/signin.css's rules and stays
   local to the two pages that need it. */
.signin-password-group {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--mw-line);
}
.signin-password-group label {
  display: block;
  margin-bottom: 10px;
  font-size: 0.75rem;
  color: var(--mw-text-5);
}
.signin-password-group label > span {
  display: block;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.6875rem;
}

/* ---- Sign-in methods list -------------------------------------------- */

.account-identities {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.account-identities-empty {
  list-style: none;
  color: var(--mw-text-6);
  font-size: 0.8125rem;
}

.account-identity-item {
  background: var(--mw-page);
  border: 1px solid var(--mw-line);
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.account-identity-item:last-child { margin-bottom: 0; }

.account-identity-name {
  font-size: 0.875rem;
  color: var(--mw-text-1);
}

.account-identity-detail {
  font-size: 0.6875rem;
  color: var(--mw-text-6);
  margin-top: 2px;
}

/* ---- Player -------------------------------------------------------- */

.account-player-line {
  font-size: 0.875rem;
  color: var(--mw-text-1);
  margin: 4px 0;
}

.account-field {
  display: block;
  margin: 12px 0 10px;
  font-size: 0.75rem;
  color: var(--mw-text-5);
}
.account-field > span {
  display: block;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.6875rem;
}
.account-field input {
  width: 100%;
  background: var(--mw-page);
  color: var(--mw-text-1);
  border: 1px solid var(--mw-line);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 0.875rem;
}
.account-field input:focus {
  outline: none;
  border-color: var(--mw-accent);
}

.account-connect-form button,
#account-logout-btn,
#account-logout-all-btn {
  background: var(--mw-raised);
  color: var(--mw-accent);
  border: 1px solid var(--mw-line-strong);
  border-radius: 4px;
  padding: 8px 14px;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}
.account-connect-form button:hover,
#account-logout-btn:hover,
#account-logout-all-btn:hover { background: var(--mw-line); }
.account-connect-form button:disabled,
#account-logout-btn:disabled,
#account-logout-all-btn:disabled { opacity: 0.5; cursor: default; }

/* ---- Sessions -------------------------------------------------------- */

.account-sessions {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.account-sessions-empty {
  list-style: none;
  color: var(--mw-text-6);
  font-size: 0.8125rem;
}

.account-session-item {
  background: var(--mw-page);
  border: 1px solid var(--mw-line);
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.account-session-item:last-child { margin-bottom: 0; }

.account-session-top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--mw-text-1);
}

.account-session-current-tag {
  display: inline-block;
  background: var(--mw-accent-wash);
  color: var(--mw-accent);
  border: 1px solid var(--mw-accent-wash-line);
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.account-session-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

/* ---- Group headings ---------------------------------------------------
   One level above .account-title: groups a run of .account-panel
   sections under a single label ("Radios & troubleshooting", "Play",
   "Security") so the page reads as a small number of clear areas
   instead of one long undifferentiated list of panels. Bigger and
   plainer than .account-title on purpose -- a panel title is a label
   for what's inside ONE box; this is a label for several. */
.account-group-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--mw-text-1);
  margin: 28px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--mw-line-strong);
}
.account-group-title:first-of-type {
  margin-top: 20px;
}

.account-group-note {
  margin-bottom: 16px;
}

.account-panel-subtitle {
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--mw-text-3);
  margin: 12px 0 4px;
}
.account-panel-subtitle:first-child {
  margin-top: 0;
}

.account-divider {
  border: none;
  border-top: 1px solid var(--mw-raised);
  margin: 16px 0 12px;
}

.account-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.account-link-btn {
  background: none;
  border: none;
  color: var(--mw-accent);
  font-size: 0.75rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

/* A clear-box warning, distinct from a plain error line -- used for the
   team-switch confirmation and the rotate-key confirmation/result, same
   visual language join.css's own .join-warning-box uses on the join
   page for the same purpose (stop the eye, don't blend into the
   surrounding paragraphs). */
.account-warning-box {
  background: var(--mw-accent-deep);
  border: 1px solid var(--mw-hostile);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 10px 0 12px;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #f0c0a8;
}
.account-warning-box strong {
  display: block;
  color: #ffb088;
  margin-bottom: 2px;
}
/* The one truly unrecoverable moment on this page -- once a rotated key
   is gone, it is gone. Same sizing bump join.css's own .key-warning-box
   applies for the identical case on the join page. */
.account-warning-box-strong {
  border-width: 2px;
  padding: 12px 14px;
  font-size: 0.8125rem;
}
.account-warning-box-strong strong {
  font-size: 0.9375rem;
}

.account-confirm-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.account-confirm-actions button:first-child {
  background: var(--mw-raised);
  color: var(--mw-accent);
  border: 1px solid var(--mw-line-strong);
  border-radius: 4px;
  padding: 8px 14px;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}
.account-confirm-actions button:first-child:hover { background: var(--mw-line); }
.account-confirm-actions button:first-child:disabled { opacity: 0.5; cursor: default; }

/* A one-time value (a rotated API key) -- readonly input plus a Copy
   button, same shape join.css's own .copy-row uses on the join page. */
.account-copy-row {
  display: flex;
  gap: 6px;
  margin: 6px 0;
}
.account-copy-row input {
  flex: 1;
  background: var(--mw-page);
  color: var(--mw-text-1);
  border: 1px solid var(--mw-line);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 0.8125rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  min-width: 0;
}
.account-copy-row button {
  background: var(--mw-raised);
  color: var(--mw-accent);
  border: 1px solid var(--mw-line-strong);
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 0.75rem;
  cursor: pointer;
  flex: 0 0 auto;
}
.account-copy-row button:hover { background: var(--mw-line); }

/* Every plain-button action across the sections below shares this one
   look, same as the connect/logout buttons above already do. */
.account-add-radio-form button,
#account-status-check-btn,
#account-checkin-health-btn,
#account-checkin-confirm-start-btn,
.account-checkin-confirm-btn,
#account-team-switch-btn,
#account-rotate-key-btn,
.account-password-actions button,
#account-contact-email-submit {
  background: var(--mw-raised);
  color: var(--mw-accent);
  border: 1px solid var(--mw-line-strong);
  border-radius: 4px;
  padding: 8px 14px;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}
.account-add-radio-form button:hover,
#account-status-check-btn:hover,
#account-checkin-health-btn:hover,
#account-checkin-confirm-start-btn:hover,
.account-checkin-confirm-btn:hover,
#account-team-switch-btn:hover,
#account-rotate-key-btn:hover,
.account-password-actions button:hover,
#account-contact-email-submit:hover { background: var(--mw-line); }
.account-add-radio-form button:disabled,
#account-status-check-btn:disabled,
#account-checkin-health-btn:disabled,
#account-checkin-confirm-start-btn:disabled,
.account-checkin-confirm-btn:disabled,
#account-team-switch-btn:disabled,
#account-rotate-key-btn:disabled,
.account-password-actions button:disabled,
#account-contact-email-submit:disabled { opacity: 0.5; cursor: default; }

/* ---- My radios --------------------------------------------------------
   Same rhythm join.css's own .radios-list/.radios-item give the
   identical list on the join page's setup-check panel. */
.account-radios-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}
.account-radios-empty {
  list-style: none;
  color: var(--mw-text-6);
  font-size: 0.8125rem;
  margin: 0 0 12px;
}
.account-radios-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--mw-page);
  border: 1px solid var(--mw-line);
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 6px;
  font-size: 0.8125rem;
  color: var(--mw-text-1);
}
.account-radios-item span:first-child {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.account-radios-item-detail {
  color: var(--mw-text-6);
  font-size: 0.6875rem;
  margin-right: auto;
  padding-left: 10px;
}
.account-radios-item button {
  background: #2a1414;
  color: #f08080;
  border: 1px solid #663333;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 0.75rem;
  cursor: pointer;
  flex: 0 0 auto;
}
.account-radios-item button:hover { background: #3a1a1a; }
.account-radios-item button:disabled { opacity: 0.5; cursor: default; }

.account-add-radio-row {
  display: flex;
  gap: 10px;
}
.account-field-compact { flex: 0 0 140px; }
.account-field-grow { flex: 1; }
/* Shared with #account-join-form's own protocol select (the Player
   panel's "Join MeshWars" flow, #account-player-unlinked in
   account.html) -- same field, same styling need, no reason for a
   second copy of this rule. */
.account-add-radio-form select,
#account-join-form select {
  width: 100%;
  background: var(--mw-page);
  color: var(--mw-text-1);
  border: 1px solid var(--mw-line);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 0.875rem;
}

/* ---- Troubleshooting / check-in health diagnosis ----------------------
   Same visual language join.css's own .status-diagnosis-ok/-attention
   use for the identical /api/mc/status diagnosis on the join page --
   real prominence (its own bordered block, larger text) rather than
   reading as just another line of copy. */
.account-diagnosis {
  border-radius: 6px;
  padding: 12px 14px;
  margin: 4px 0 14px;
  font-size: 0.9375rem;
  line-height: 1.5;
  font-weight: 600;
}
.account-diagnosis-ok {
  background: #16240f;
  border: 1px solid var(--mw-friendly);
  color: #b8e0a0;
}
.account-diagnosis-attention {
  background: var(--mw-accent-deep);
  border: 1px solid var(--mw-hostile);
  color: #f0c0a8;
}

.account-status-result,
.account-checkin-health-result {
  margin-top: 4px;
}

.account-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
  margin: 6px 0 4px;
}
.account-table th,
.account-table td {
  border: 1px solid var(--mw-line);
  padding: 5px 8px;
  text-align: left;
  color: var(--mw-text-2);
}
.account-table thead th {
  color: var(--mw-text-6);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.625rem;
  font-weight: 700;
}
.account-table td { text-align: center; }

/* ---- Why my check-ins may not be counting ------------------------------ */
.account-contacts-list {
  list-style: none;
  margin: 4px 0 12px;
  padding: 0;
}
.account-contacts-item {
  background: var(--mw-page);
  border: 1px solid var(--mw-line);
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.account-contacts-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.8125rem;
  color: var(--mw-text-1);
}
.account-contact-status {
  display: inline-block;
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.account-contact-status-ok {
  background: var(--mw-accent-wash);
  color: #b8e0a0;
  border: 1px solid var(--mw-friendly);
}
.account-contact-status-attention {
  background: var(--mw-accent-deep);
  color: #f0c0a8;
  border: 1px solid var(--mw-hostile);
}
/* ---- Confirm my node -------------------------------------------------------
   Replaces the old typed fallback-name form's ".account-checkin-name-*"
   rules (removed) -- .account-checkin-confirm-form keeps that same
   idle-state layout (a growing label next to a submit button), but
   everything past submission (waiting/candidates found/bound/expired)
   is rendered by account.js into .account-checkin-confirm-result, same
   "one result well, fully re-drawn per state" pattern
   .account-status-result / .account-checkin-health-result already use
   above -- so it needs no state-specific hidden/shown rules of its own.

   One form covering both protocols now (see frontend/account.html's
   own comment on this section for why): .account-checkin-confirm-form
   stacks its two rows vertically -- the "Radio type" dropdown first,
   on its own line, so that choice reads as made BEFORE the fields
   below it react to it -- and .account-checkin-confirm-fields-row
   carries the growing-label-next-to-button layout the single row used
   to have, unchanged in look, just demoted to an inner row rather than
   the whole form. account.js toggles #account-checkin-confirm-name-
   field's `hidden` property (never inline display -- see this file's
   own [hidden] rule near the top of this file) when Meshtastic is
   selected, since that
   protocol needs no typed name at all. */
.account-checkin-confirm-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.account-checkin-confirm-protocol-field {
  max-width: 220px;
}
.account-checkin-confirm-protocol-field select {
  width: 100%;
  background: var(--mw-page);
  color: var(--mw-text-1);
  border: 1px solid var(--mw-line);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 0.875rem;
}
.account-checkin-confirm-fields-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.account-checkin-confirm-result {
  margin-top: 10px;
}
.account-checkin-confirm-countdown {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--mw-accent);
  margin: 8px 0;
}
/* The issued Meshtastic broadcast code -- reuses .account-copy-row's
   input+Copy-button look (the API-key/join-link pattern this page
   already uses elsewhere) so it reads as something to copy, not just
   to read, and is sized up from that shared style's default since this
   is the one thing on the page a player has to get exactly right by
   eye or by paste. */
.account-checkin-confirm-code-row input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
}
.account-checkin-candidates-list {
  list-style: none;
  margin: 8px 0 12px;
  padding: 0;
}
.account-checkin-candidate-item {
  background: var(--mw-page);
  border: 1px solid var(--mw-line);
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.account-checkin-candidate-item:last-child { margin-bottom: 0; }
.account-checkin-candidate-item button { margin-top: 6px; }
.account-checkin-candidate-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.8125rem;
  color: var(--mw-text-1);
  font-weight: 600;
}
/* The one candidate that can't be picked -- deliberately flat rather
   than sharing .account-checkin-confirm-btn's accent-bordered look, so
   it never reads as an available action even before a viewer notices
   the disabled cursor. */
.account-checkin-candidate-claimed {
  background: var(--mw-page);
  color: var(--mw-text-6);
  border: 1px solid var(--mw-line);
  border-radius: 4px;
  padding: 8px 14px;
  font-size: 0.8125rem;
  cursor: default;
}
/* The candidate that's already the caller's OWN radio -- neither an
   available pick (.account-checkin-confirm-btn) nor someone else's
   (.account-checkin-candidate-claimed above): stays clickable (accept
   already treats re-confirming your own radio as a no-op success), so
   it keeps the pointer cursor and a friendly border rather than the
   claimed style's flat, disabled look. */
.account-checkin-candidate-mine {
  background: var(--mw-page);
  color: var(--mw-friendly);
  border: 1px solid var(--mw-friendly);
  border-radius: 4px;
  padding: 8px 14px;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}
.account-checkin-candidate-mine:hover { background: var(--mw-line); }

/* ---- My stats ------------------------------------------------------------ */
.account-stats-card {
  background: var(--mw-page);
  border: 1px solid var(--mw-line);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.account-stats-card:last-child { margin-bottom: 0; }
.account-stats-dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  margin: 0;
}
.account-stats-dl dt {
  color: var(--mw-text-5);
  font-size: 0.75rem;
}
.account-stats-dl dd {
  margin: 0;
  color: var(--mw-text-1);
  font-size: 0.8125rem;
  text-align: right;
  font-weight: 600;
}

/* ---- My team -------------------------------------------------------------- */
.account-team-picker-wrap { margin-top: 10px; }
.account-team-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.account-team-swatch {
  --swatch-color: var(--mw-accent);
  background: var(--mw-page);
  color: var(--swatch-color);
  border: 1px solid var(--swatch-color);
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.account-team-swatch:hover { background: var(--mw-raised); }
.account-team-swatch.active { background: var(--swatch-color); color: #0a0a0a; }
.account-team-swatch:disabled { opacity: 0.4; cursor: default; }
.account-team-confirm { margin-top: 10px; }

/* ---- My check-in history / honors ---------------------------------------- */
.account-honors-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.account-honors-empty {
  list-style: none;
  color: var(--mw-text-6);
  font-size: 0.8125rem;
}
.account-honors-item {
  background: var(--mw-page);
  border: 1px solid var(--mw-line);
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.account-honors-item:last-child { margin-bottom: 0; }

/* ---- Sign-in methods: disconnect + last-door note ------------------------- */
.account-identity-disconnect-btn {
  margin-top: 6px;
  background: #2a1414;
  color: #f08080;
  border: 1px solid #663333;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 0.75rem;
  cursor: pointer;
}
.account-identity-disconnect-btn:hover { background: #3a1a1a; }
.account-identity-disconnect-btn:disabled { opacity: 0.5; cursor: default; }
.account-identity-lastdoor {
  color: #f0c0a8;
}

/* ---- Password / contact email --------------------------------------------- */
.account-password-form,
.account-contact-email-form {
  margin-top: 6px;
}
.account-password-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.account-contact-email-form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

/* ---- API key --------------------------------------------------------------- */
.account-rotate-key-confirm { margin-top: 10px; }
.account-rotate-key-result { margin-top: 10px; }