#account-dialog {
  width: min(540px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  margin: auto; padding: clamp(20px, 4vw, 32px); border: 1px solid #d9c29b66;
  border-radius: 24px; background: #1b211d; color: #f5f0e5;
  color-scheme: dark; box-shadow: 0 24px 100px #0006;
  overflow: auto; overscroll-behavior: contain;
}
#account-dialog::backdrop { background: #07110dbb; backdrop-filter: blur(7px); }
#account-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#account-dialog h2 { margin: 0; font-size: clamp(24px, 4vw, 28px); font-weight: 550; letter-spacing: -.035em; }
#account-dialog h2:focus { outline: none; }
#account-dialog header .text-button { flex: none; min-width: 44px; min-height: 44px; margin: 0; padding: 6px; font-size: 28px; line-height: 1; }
#account-dialog p { color: #becabf; font-size: 14px; line-height: 1.65; }
#account-dialog a, #account-dialog .text-button { color: #e4c99c; text-underline-offset: 3px; }
#account-dialog button:not(.text-button) { background: #e4c99c; color: #22251e; }
#account-dialog button:not(.text-button):hover { background: #efd8b0; }
#account-dialog button:disabled { opacity: .65; cursor: wait; }
#account-dialog form { display: grid; gap: 1rem; margin-block: 2rem; }
#account-dialog label { display: grid; gap: .5rem; }
#account-dialog input { width: 100%; box-sizing: border-box; background: #ffffff09; color: #f5f0e5; border-color: #b0beac55; font-size: 16px; }
#account-dialog input:not([type=checkbox]) { min-width: 0; min-height: 48px; padding: 12px 14px; border: 1px solid #b0beac55; border-radius: 12px; }
#account-dialog input[aria-invalid=true] { border-color: #f0b8a5; }
#account-dialog #account-invite-hint { margin: -.5rem 0 0; }
#account-dialog .account-age { display: flex; align-items: center; }
#account-dialog input[type=checkbox] { flex: none; width: 1.3rem; height: 1.3rem; margin: 0 .25rem 0 0; accent-color: #e4c99c; }
#account-dialog .text-button { margin: .6rem 1rem .6rem 0; }
#account-dialog details { border-top: 1px solid #ffffff26; margin-top: 1.5rem; padding-top: 1.5rem; }
.account-signin { display: inline-block; border-radius: 1rem; background: #e8cc99; color: #20271f; padding: 1rem 1.5rem; font-weight: 700; text-decoration: none; }
#account-sync-label { font-size: .9em; opacity: .85; }
#account-dialog [role=status]:empty { display: none; }
#account-dialog [role=status] { color: #f0b8a5; }
@media (prefers-reduced-motion: no-preference) {
  #account-dialog[open] { animation: account-arrive .18s ease-out; }
  @keyframes account-arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}