.account-dialog { --account-bg: #191d25; --account-ink: #f4f0e9; --account-muted: #b8bbc4; --account-accent: #edc78d; --account-line: #ffffff26; color-scheme: dark; color: var(--account-ink); background: var(--account-bg); border: 1px solid var(--account-line); border-radius: 18px; padding: 26px; width: min(540px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); margin: auto; overflow: auto; overscroll-behavior: contain; font-family: inherit; font-size: 16px; line-height: 1.45; box-shadow: 0 24px 100px #0008; }
.account-dialog::backdrop { background: #080b10c9; }
.account-dialog *, .account-button { box-sizing: border-box; }
.account-dialog h2 { margin: 0 44px 24px 0; font-size: 26px; letter-spacing: -.025em; }
.account-dialog h3 { font-size: 16px; margin: 0 0 4px; }
.account-dialog p { font-size: 13px; color: var(--account-muted); margin: 0 0 12px; }
.account-dialog button { min-height: 44px; padding: 8px 13px; border: 1px solid var(--account-line); border-radius: 8px; background: transparent; color: inherit; font: inherit; font-size: 14px; cursor: pointer; touch-action: manipulation; }
/* Hover is a POINTER state. On a phone it latches onto the last thing tapped and
   stays there, so the control reads as still-selected. Guarded here; the
   aria-state and :focus halves stay outside, because those are real state. */
@media (hover: hover) {
  .account-dialog button:hover { background: #ffffff0d; border-color: var(--account-accent); }
  .account-dialog .account-save:hover { background: #f4dcb3; }
  .account-button:hover { border-color: #edc78d; }
}
.account-dialog button:active { background: #ffffff20; }
.account-dialog button:disabled { opacity: .5; cursor: wait; }
.account-dialog :focus-visible, .account-button:focus-visible { outline: 2px solid #edc78d; outline-offset: 3px; }
.account-dialog .account-close { position: sticky; top: 0; float: right; margin: -12px -12px 0 0; width: 44px; min-height: 44px; font-size: 25px; border: 0; }
.account-name { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.account-name input { width: 100%; min-height: 44px; border: 1px solid var(--account-line); border-radius: 8px; background: #0002; color: inherit; padding: 10px 12px; font: inherit; font-size: 16px; }
.account-picture { display: flex; gap: 18px; align-items: flex-start; border-top: 1px solid var(--account-line); padding: 22px 0 12px; margin-top: 24px; }
.account-picture > img { width: 80px; height: 80px; object-fit: cover; border-radius: 15px; flex-shrink: 0; background: #0003; }
.account-picture > div { flex: 1; min-width: 0; }
.account-picture-actions, .account-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.account-actions { justify-content: flex-end; margin-top: 24px; }
.account-dialog .account-save { background: var(--account-accent); color: #211b12; font-weight: 650; border-color: transparent; }
/* A grid, so every cell is identical and no row can end on empty cells: nine
   members over 9 columns on a wide screen and an exact 3x3 on a phone. */
.account-cast { display: grid; grid-template-columns: repeat(9, 1fr); gap: 8px; margin-top: 4px; }
.account-cast button { width: 100%; padding: 4px; }
.account-cast img { display: block; width: 36px; height: 36px; object-fit: cover; border-radius: 5px; margin: auto; }
.account-cast [aria-pressed=true] { background: #edc78d20; border-color: var(--account-accent); }
.account-dialog .account-status { margin: 16px 0 0; }
.account-status:empty { display: none; }
.account-button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; padding: 4px; border: 1px solid #ffffff26; border-radius: 50%; background: #191d25; cursor: pointer; touch-action: manipulation; }
.account-button img { width: 34px; height: 34px; object-fit: cover; border-radius: 50%; }
.account-button[hidden] { display: none; }
@media (max-width: 480px) { .account-dialog { padding: 22px 18px; } .account-picture { gap: 12px; } .account-picture > img { width: 64px; height: 64px; } .account-cast { grid-template-columns: repeat(3, 1fr); } }
.account-actions .account-switch { margin-right: auto; }