/* The account controls use the same quiet blue vocabulary as search. */
.account-trigger { height: 48px; padding-inline: 12px; gap: 7px; font-size: 13px; flex: none; }
.account-trigger .icon { width: 19px; height: 19px; }
body.account-open { overflow: hidden; }
.account-dialog { width: min(420px, calc(100% - 32px)); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 28px; border: 1px solid var(--divider); border-radius: 16px; color: var(--ink); background: #fff; }
.account-dialog::backdrop { background: rgba(25,29,41,.4); }
.account-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.account-head h2 { margin: 0; font-size: 22px; line-height: 1.6; }
.account-head .icon-btn { width: 36px; height: 36px; background: none; flex: none; }
.account-intro { margin: 0 0 24px; font-size: 14px; line-height: 1.9; color: var(--ink-2); }
.account-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 24px; border-radius: var(--r); background: var(--field); }
.account-tabs button { height: 40px; border: 0; border-radius: var(--r-s); background: none; font-size: 14px; }
.account-tabs button[aria-pressed="true"] { background: #fff; color: var(--link); box-shadow: 0 1px 4px rgba(25,29,41,.08); font-weight: 700; }
.account-dialog [hidden] { display: none; }
.account-field { display: grid; gap: 8px; margin-bottom: 20px; font-size: 14px; }
.account-field > input, .account-password > input { min-width: 0; width: 100%; height: 48px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--r-s); background: var(--field); font-size: 16px; }
.account-field input:focus { border-color: var(--accent); outline: 1px solid var(--accent); outline-offset: 0; }
.account-field input::placeholder { color: var(--muted); }
.account-password { display: grid; grid-template-columns: minmax(0, 1fr) auto; direction: ltr; align-items: center; border-radius: var(--r-s); background: var(--field); }
.account-password > button { align-self: stretch; padding-inline: 12px; border: 0; border-radius: var(--r-s); background: none; color: var(--link); font-size: 12px; direction: rtl; }
.account-hint { margin: -10px 0 20px; font-size: 12px; line-height: 1.8; color: var(--ink-2); }
.account-submit { width: 100%; margin-top: 4px; }
.account-error { margin: 16px 0 0; font-size: 13px; line-height: 1.9; color: var(--bad); overflow-wrap: anywhere; }
.account-profile > p { margin: 20px 0 24px; color: var(--ink-2); font-size: 14px; line-height: 1.9; }
.account-mobile-card { display: grid; justify-items: start; gap: 8px; padding: 16px; border: 1px solid var(--border); border-radius: var(--r); font-size: 13px; color: var(--ink-2); }
.account-mobile-card b { color: var(--ink); font-size: 20px; font-weight: 500; }
.account-logout { width: 100%; }
.account-dialog button:disabled { opacity: .6; cursor: default; }

@media (max-width: 719px) {
  .top.has-account .wrap { grid-template-columns: 96px minmax(0, 1fr) 96px; }
  .account-trigger { width: 44px; height: 44px; padding: 0; border: 0; background: var(--field); }
  .account-trigger .icon { width: 21px; height: 21px; }
  .account-label { display: none; }
  .account-dialog { padding: 22px; max-height: calc(100dvh - 32px); }
  .account-head h2 { font-size: 20px; }
}