/* Account controls reuse the final navigation typography and sized text roles. */
#loginModal, #loginModal :is(h3,p,span,strong,small,label,input,button),
#membershipWelcomeModal, #membershipWelcomeModal :is(h3,p,span,strong,small,button) { font-family:var(--font-sans)!important; font-weight:var(--ui-font-weight,400)!important; font-style:var(--ui-font-style,normal); letter-spacing:0; }
#loginModal, #membershipWelcomeModal { font-size:var(--ui-font-body,15px); }
#loginModal .account-modal__head h3, #membershipWelcomeModal .account-modal__head h3 { font-size:var(--ui-font-page,26px); }
#loginModal .account-field > span { font-size:var(--ui-font-label,15px); }
#loginModal input { font-size:var(--ui-font-input,15px); }
#loginModal button, #membershipWelcomeModal button { font-size:var(--ui-font-button,15px); }
#loginModal :is(#loginAccessNotice,#loginMembershipNotice,#loginStatus) { font-size:var(--ui-font-meta,14px); line-height:1.6; }
#loginModal .account-field[hidden], #loginModal button[hidden], #accountDevicesModal button[hidden] { display:none!important; }
#loginModal :is(input,button), #accountDevicesModal :is(p,small,button) { font-family:var(--font-sans); font-weight:var(--ui-font-weight); font-style:var(--ui-font-style); }
#loginPrimaryField { position:relative; }
.account-password-input { position:relative; }
.account-password-input input { padding-right:48px; box-sizing:border-box; }
#loginPasswordToggleBtn { position:absolute; right:6px; top:0; bottom:0; margin:auto; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; min-width:0; min-height:36px; padding:0; border:0; border-radius:8px; background:transparent; color:var(--muted,#6c7f98); box-shadow:none; }
#loginPasswordToggleBtn:hover { background:var(--hover,#f2f4f7); }
#loginPasswordToggleBtn:focus-visible { outline:2px solid var(--accent,#3b82f6); outline-offset:1px; }
#loginPasswordToggleBtn svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
#loginPasswordToggleBtn[aria-pressed="false"] .account-password-slash { display:none; }
[data-ui-appearance="dark"] #loginPasswordToggleBtn:hover { background:#343436; }
#loginPasswordInput::-ms-reveal { display:none; }
#loginPrimaryLabel { font-size:var(--ui-font-meta); color:var(--muted,#6c7f98); }
.account-login-input { position:relative; }
.account-login-input input { width:100%; padding-right:48px; box-sizing:border-box; }
#loginHistoryToggleBtn { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:36px; min-height:36px; padding:0; border:0; border-radius:8px; background:transparent; color:inherit; }
#loginModal #loginHistoryToggleBtn:hover { transform:translateY(-50%); background:var(--hover,#f2f4f7); }
#loginHistoryList[hidden] { display:none!important; }
.account-login-history { position:absolute; z-index:2; top:calc(100% + 4px); left:0; right:0; display:grid; gap:2px; padding:6px; max-height:220px; overflow:auto; border:1px solid var(--border,#dce3ec); border-radius:12px; background:var(--panel,#fff); box-shadow:0 8px 24px #0002; }
#loginHistoryList button { justify-content:flex-start; width:100%; min-height:40px; border:0; border-radius:8px; padding:8px 10px; text-align:left; overflow-wrap:anywhere; background:transparent; color:inherit; }
#loginHistoryList button:is(:hover,:focus-visible) { background:var(--hover,#f2f4f7); }
[data-ui-appearance="dark"] #loginHistoryList { background:#252526; border-color:#424247; }
[data-ui-appearance="dark"] #loginHistoryList button:is(:hover,:focus-visible) { background:#343436 !important; }
.account-access-links { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:12px; }
.account-access-links button { border:0; padding:4px 0; min-height:30px; background:transparent; color:inherit; font-size:var(--ui-font-meta); }
#loginStatus { min-height:24px; overflow-wrap:anywhere; }
#loginModal .account-modal__panel { max-height:calc(100dvh - 32px); overflow:auto; }
#accountDevicesModal .account-modal__panel { width:min(680px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; }
.account-device-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--border,#dce3ec); }
.account-device-row p { margin:0 0 6px; overflow-wrap:anywhere; }
.account-device-row small { color:var(--muted,#6c7f98); }
.account-device-row button { flex-shrink:0; min-height:36px; padding:6px 12px; }
#loginModal button:hover, #accountDevicesModal button:hover { transform:none; }
.account-settings-actions { flex-wrap:wrap; }
.account-settings-actions :is(button,a) { font-family:var(--font-sans); font-weight:var(--ui-font-weight); font-style:var(--ui-font-style); }
.account-settings-actions button:hover { transform:none; }
.account-settings-actions [hidden] { display:none!important; }
.account-settings-services { margin-top:20px; padding-top:16px; border-top:1px solid var(--border,#dce3ec); }
#settingsAccountRegistrationStatus, #loginAccessNotice { overflow-wrap:anywhere; }
#loginAccessNotice[hidden], .account-local-start[hidden] { display:none!important; }
.account-local-start code { display:block; margin-top:6px; white-space:normal; overflow-wrap:anywhere; font:inherit; }
#loginRegisterBtn { min-height:36px; padding:0 14px; border:1px solid var(--border,#dce3ec); border-radius:999px; font-size:var(--ui-font-button); }
.account-menu-identity { order:1; display:flex; align-items:center; gap:10px; padding:8px 12px; }
.account-menu-identity + .rail-menu-separator { order:2; }
.account-menu-identity-copy { min-width:0; display:grid; gap:4px; font-family:var(--font-sans); font-weight:var(--ui-font-weight); font-style:var(--ui-font-style); }
.account-menu-identity-copy > span { font-size:var(--ui-font-nav); overflow-wrap:anywhere; }
.account-menu-identity-copy > small { font-size:var(--ui-font-meta); color:var(--muted,#6c7f98); overflow-wrap:anywhere; }

/* Settings share the navigation font. Interaction never changes control geometry. */
#settingsModal, #accountSettingsMenu { font-family:var(--font-sans); font-weight:var(--ui-font-weight); font-style:var(--ui-font-style); }
#settingsModal :is(h3,strong,input,select,button), #accountSettingsMenu :is(strong,button) { font-family:inherit; font-weight:var(--ui-font-weight); font-style:inherit; }
#settingsModal button:hover, #accountSettingsMenu button:hover { transform:none; }
#settingsModal [hidden], #accountSettingsMenu [hidden] { display:none!important; }
#accountMenuIdentity { border:0; border-radius:12px; background:transparent; color:inherit; text-align:left; width:100%; min-height:58px; }
#accountMenuIdentity:hover { background:var(--hover,#f2f4f7); }
#openRegisterModalBtn, #openUsageSettingsBtn { order:3; }
.settings-search { display:grid; gap:6px; margin:12px 0 10px; font-size:var(--ui-font-meta); }
.settings-search input { box-sizing:border-box; width:100%; min-width:0; height:36px; padding:6px 10px; border:1px solid var(--border,#dce3ec); border-radius:10px; background:transparent; color:inherit; font:inherit; }
.account-readonly { display:block; padding:9px 0; min-height:24px; overflow-wrap:anywhere; }
.account-identity-details { margin-top:18px; }
#settingsAccountMeta { display:block; font-size:var(--ui-font-meta); color:var(--muted,#6c7f98); }
#settingsModal .account-settings-side { overflow-y:auto; }

/* Constrain only the rail account trigger; its popup keeps the existing overlay size. */
.rail .rail-bottom { min-width:0; max-width:100%; grid-template-columns:minmax(0,1fr); }
#accountMenuBtn { width:100%!important; max-width:100%; min-width:0; box-sizing:border-box; overflow:hidden; }
#accountMenuBtn .rail-account-copy { min-width:0; max-width:100%; overflow:hidden; }
#railAccountName { display:block; max-width:100%; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Settings layout: shared content column, left-aligned navigation, and grouped rows. */
#settingsModal .account-modal__panel--settings { grid-template-columns:280px minmax(0,1fr); }
#settingsModal .account-settings-side { min-width:0; padding:20px 12px; background:#fafafa; }
.settings-sidebar-header { display:flex; align-items:center; justify-content:space-between; padding:0 10px 12px; font-size:var(--ui-font-section); }
#settingsModal .account-modal__close--side { margin:0; flex:none; }
#settingsModal .settings-search { display:flex; align-items:center; gap:10px; margin:0 0 20px; padding:0 14px; min-height:44px; border-radius:24px; background:#efefef; }
#settingsModal .settings-search input { height:44px; min-width:0; padding:0; border:0; border-radius:0; outline-offset:4px; background:transparent; font-size:var(--ui-font-body); }
#settingsModal :is(.settings-search,.account-settings-tab) svg { width:21px; height:21px; flex:none; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.settings-nav-group { margin:0 12px 10px; color:var(--muted); font-size:var(--ui-font-meta); }
.settings-navigation { display:grid; gap:3px; }
#settingsModal .account-settings-tab { display:flex; justify-content:flex-start; gap:12px; width:100%; min-width:0; min-height:44px; height:auto; padding:11px 12px; text-align:left; font-family:var(--font-sans); font-size:var(--ui-font-nav); font-weight:var(--ui-font-weight); line-height:1.4; }
#settingsModal .account-settings-tab :is(span,svg) { color:inherit; }
#settingsModal .account-settings-tab.active, #settingsModal .account-settings-tab:hover { background:#ececec; }
#settingsModal .account-settings-main { min-width:0; padding:60px clamp(24px,5vw,88px) 48px; }
#settingsModal .account-settings-main > :is(h3,[data-settings-panel],.settings-save-status) { width:min(100%,900px); margin-left:auto; margin-right:auto; }
#settingsModal .account-settings-main > h3 { margin-top:0; margin-bottom:38px; font-size:var(--ui-font-page); font-weight:var(--ui-font-weight); }
#settingsModal :is(h4,h5) { font-family:var(--font-sans); font-weight:var(--ui-font-weight); font-style:var(--ui-font-style); }
#settingsModal .settings-section-card { display:block; padding:0; border:1px solid var(--line); border-radius:16px; background:transparent; overflow:visible; }
#settingsModal .settings-section-card > :is(.settings-row,.settings-detail-row,.account-field) { padding:20px 22px; margin:0; border-bottom:1px solid var(--line); }
#settingsModal .settings-section-card > :last-child { border-bottom:0; }
#settingsModal .settings-row { grid-template-columns:minmax(0,1fr) minmax(150px,210px); gap:24px; background:transparent; }
#settingsModal .settings-row > div:first-child { min-width:0; }
#settingsModal .settings-row :is(span,strong) { overflow-wrap:anywhere; }
#settingsModal .settings-card--model { display:block; margin:0; padding:20px 22px; background:transparent; }
#settingsModal .settings-pane { padding-top:0; gap:20px; }
#settingsModal .settings-pane > .account-form-status { margin:0; }
#settingsModal .settings-section-title { margin:10px 0 -4px; font-size:var(--ui-font-card); }
#settingsModal .settings-detail-row { display:flex; align-items:center; justify-content:space-between; gap:24px; }
#settingsModal .settings-detail-row > div:first-child { min-width:0; }
#settingsModal .settings-detail-row .account-form-status { margin:6px 0 0; }
#settingsModal .settings-detail-row > button, #settingsModal .settings-pane-actions button { width:auto!important; max-width:100%; flex:none; min-height:36px; padding:7px 15px; border:1px solid var(--line); border-radius:999px; background:#f5f5f5; color:inherit; font:inherit; }
#settingsModal .settings-pane-actions { flex-wrap:wrap; align-items:center; margin:0; }
#settingsModal .settings-pane-actions:empty { display:none; }
#settingsModal .settings-detail-row > button:hover, #settingsModal .settings-pane-actions button:hover { background:#ebebeb; }
#settingsModal button:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
#settingsModal .settings-auth-prompt { padding:28px; border:1px solid var(--line); border-radius:16px; }
#settingsModal .settings-auth-prompt p { margin:0 0 22px; line-height:1.6; }
#settingsModal .settings-auth-prompt .settings-pane-actions { justify-content:flex-start; }
#settingsModal .settings-profile-card { max-width:none; width:100%; }
#settingsModal .profile-avatar-editor--settings { justify-content:flex-start; margin:0 0 6px; }
#settingsModal .settings-profile-fields, #settingsModal .account-identity-details { gap:0; }
#settingsModal :is(.settings-profile-fields,.account-identity-details) > .account-field { display:grid; grid-template-columns:minmax(110px,1fr) minmax(0,2fr); align-items:center; gap:24px; }
#settingsModal :is(.settings-profile-fields,.account-identity-details) .account-readonly { text-align:right; padding:0; min-height:0; }
#settingsModal .settings-profile-fields input { width:100%; max-width:300px; justify-self:end; }
#settingsModal #settingsIdentityDetails > .settings-pane-actions { margin-top:20px; }
#settingsModal .settings-account-current { background:transparent; margin-bottom:24px; }
#settingsModal #settingsAccountMode { font-size:var(--ui-font-caption); color:var(--muted); }
#settingsModal .settings-pane--voice-ai { padding:0; }
[data-ui-appearance="dark"] #settingsModal .settings-search,
[data-ui-appearance="dark"] #settingsModal .account-settings-tab.active,
[data-ui-appearance="dark"] #settingsModal .account-settings-tab:hover { background:#343436; }
[data-ui-appearance="dark"] #settingsModal :is(.settings-section-card,.settings-auth-prompt),
[data-ui-appearance="dark"] #settingsModal .settings-section-card > :is(.settings-detail-row,.account-field) { border-color:#424247; }
[data-ui-appearance="dark"] #settingsModal .settings-detail-row > button,
[data-ui-appearance="dark"] #settingsModal .settings-pane-actions button { background:#343436; border-color:#424247; }
@media (max-width:720px) {
  #settingsModal .account-modal__panel--settings { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); }
  #settingsModal .account-settings-side { padding:10px 12px; overflow:hidden; }
  #settingsModal .settings-sidebar-header { padding-bottom:6px; }
  #settingsModal .settings-search { margin-bottom:8px; }
  #settingsModal .settings-nav-group { display:none; }
  #settingsModal .settings-navigation { display:flex; overflow-x:auto; padding:3px 1px 8px; }
  #settingsModal .account-settings-tab { flex:none; width:auto; white-space:nowrap; min-height:40px; padding:8px 12px; }
  #settingsModal .account-settings-main { padding:26px 16px 36px; }
  #settingsModal .account-settings-main > h3 { margin-bottom:24px; }
  #settingsModal .settings-row { grid-template-columns:minmax(0,1fr); gap:14px; }
  #settingsModal .settings-detail-row { flex-wrap:wrap; gap:14px; }
  #settingsModal .settings-section-card > :is(.settings-row,.settings-detail-row,.account-field) { padding:18px; }
  #settingsModal :is(.settings-profile-fields,.account-identity-details) > .account-field { grid-template-columns:minmax(0,1fr); gap:8px; }
  #settingsModal :is(.settings-profile-fields,.account-identity-details) .account-readonly { text-align:left; }
  #settingsModal .settings-profile-fields input { max-width:none; }
}


/* Keep settings actions visible despite the global transparent-button rule. */
#settingsModal .billing-workspace button,
#settingsModal .settings-pane-actions button,
#settingsModal .settings-detail-row > button { background:#f3f3f3 !important; border-color:transparent !important; color:inherit !important; }
#settingsModal .billing-workspace button:hover:not(:disabled),
#settingsModal .settings-pane-actions button:hover:not(:disabled),
#settingsModal .settings-detail-row > button:hover:not(:disabled) { background:#e8e8e8 !important; }
#settingsModal .billing-term-picker button[aria-pressed="true"] { background:#fff !important; border-color:var(--line) !important; }
[data-ui-appearance="dark"] #settingsModal .billing-workspace button,
[data-ui-appearance="dark"] #settingsModal .settings-pane-actions button,
[data-ui-appearance="dark"] #settingsModal .settings-detail-row > button { background:#343436 !important; }
[data-ui-appearance="dark"] #settingsModal .billing-workspace button:hover:not(:disabled),
[data-ui-appearance="dark"] #settingsModal .settings-pane-actions button:hover:not(:disabled),
[data-ui-appearance="dark"] #settingsModal .settings-detail-row > button:hover:not(:disabled) { background:#424247 !important; }
[data-ui-appearance="dark"] #settingsModal .billing-term-picker button[aria-pressed="true"] { background:#525257 !important; }

/* Subscription entry shares the existing account menu. */
#accountSettingsMenu #openSubscriptionBtn, #accountSettingsMenu #openUsageSettingsBtn { grid-template-columns:22px minmax(0,1fr) auto!important; }
#openSubscriptionBtn { order:3; }
#accountSettingsMenu .account-menu-remaining { color:var(--muted,#6c7f98); font-size:var(--ui-font-meta); white-space:nowrap; }
.account-membership-notice { margin:8px 0 16px; color:var(--muted,#6c7f98); font-size:var(--ui-font-meta); line-height:1.6; }
#loginSubscribeBtn { min-height:36px; padding:0 14px; border:1px solid var(--border,#dce3ec); border-radius:999px; font-size:var(--ui-font-button); }
#membershipWelcomeModal .account-modal__footer { flex-wrap:wrap; }
#membershipWelcomeModal .account-modal__panel { max-height:calc(100dvh - 32px); overflow:auto; }
#membershipWelcomeModal button:hover { transform:none; }
/* Guest checkout keeps the existing identity form inside the same payment dialog. */
#loginModal.checkout-embedded { position:static; inset:auto; z-index:auto; display:block; padding:0; background:transparent; backdrop-filter:none; }
#loginModal.checkout-embedded .account-modal__panel { width:100%; max-height:none; overflow:visible; box-sizing:border-box; border:0; border-radius:0; background:transparent; padding:0; box-shadow:none; }
#loginModal.checkout-embedded .account-modal__head { margin-bottom:16px; }
#loginModal.checkout-embedded .account-modal__head h3 { font-size:var(--ui-font-section,20px); }
#loginModal.checkout-embedded :is(#loginAccessNotice,#loginMembershipNotice) { display:none!important; }
#loginModal.checkout-embedded .account-modal__footer { margin-top:16px; }
#loginModal.checkout-embedded #loginHistoryToggleBtn, #loginModal.checkout-embedded #loginHistoryToggleBtn:hover { top:0; bottom:0; margin:auto; width:36px!important; height:36px; transform:none!important; }
#loginModal.checkout-embedded #loginHistoryList button { width:100%!important; }
#loginModal.checkout-embedded #loginSubmitBtn { width:100%!important; min-height:44px; background:#0d0d0d!important; color:#fff!important; -webkit-text-fill-color:#fff!important; }