/*
 * Account layer
 * -------------
 * This file is the first extracted CSS layer from styles.css. Keep account,
 * authentication, and password-control final overrides here so overlay z-index
 * rules are easy to audit without scanning the full legacy stylesheet.
 */

html body .account-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2200 !important;
  background: #f7fbff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body .account-overlay[hidden] {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html body .account-panel,
html body .account-panel.open {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2201 !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f7fbff !important;
  box-shadow: none !important;
  transform: none !important;
  translate: 0 0 !important;
}

html body .account-panel:not(.open) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(105%) !important;
}

html body .account-panel.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html body .account-settings-shell {
  height: 100dvh !important;
  min-height: 0 !important;
  grid-template-columns: minmax(248px, 310px) minmax(0, 1fr) !important;
}

html body .account-settings-main,
html body .account-panel-body {
  min-height: 0 !important;
}

html body .account-panel-body {
  padding-bottom: max(72px, env(safe-area-inset-bottom)) !important;
}

html body .auth-password-control {
  position: relative !important;
  display: block !important;
  min-height: 54px !important;
}

html body .auth-password-control input {
  width: 100% !important;
  height: 54px !important;
  padding-right: 96px !important;
}

html body .auth-form .auth-password-toggle,
html body .auth-form .auth-password-toggle:hover,
html body .auth-form .auth-password-toggle:focus-visible,
html body .auth-form .auth-password-toggle[aria-pressed="true"] {
  position: absolute !important;
  top: 11px !important;
  right: 52px !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #70757d !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 1 !important;
  transform: none !important;
}

html body .auth-form .auth-password-toggle:hover,
html body .auth-form .auth-password-toggle:focus-visible {
  color: #0066cc !important;
  background: rgba(0, 102, 204, 0.08) !important;
}

html body .auth-password-icon {
  display: block !important;
  width: 21px !important;
  height: 21px !important;
}

@media (max-width: 820px) {
  html body .account-settings-shell {
    height: 100dvh !important;
    grid-template-columns: 1fr !important;
    overflow: auto !important;
  }

  html body .account-settings-main,
  html body .account-panel-body {
    overflow: visible !important;
  }
}