/* Approved account mockup; scoped to the Web account page. */
.web-account-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.web-account-page [hidden] { display: none !important; }
.web-account-main { box-sizing: border-box; width: min(480px, calc(100% - 32px)); margin: auto; padding-block: 32px 16px; }
.web-account-card { padding: 24px; text-align: center; }
.web-account-logo { display: block; width: 120px; height: 120px; object-fit: contain; margin: 0 auto 8px; }
.web-account-card h1 { margin: 0 0 8px; color: var(--atlas-v5-primary); font-size: clamp(1.5rem, 5vw, 1.875rem); line-height: 1.3; }
.web-account-intro { margin: 0 0 24px; color: var(--atlas-v5-muted); font-size: .875rem; }
.web-account-form { display: grid; gap: 12px; text-align: left; }
.web-account-form .atlas-v5-label { margin: 0; }
.web-account-form .atlas-v5-input { box-sizing: border-box; min-height: 48px; margin-top: 8px; }
.web-password-field { position: relative; display: block; }
.web-password-field .atlas-v5-input { width: 100%; padding-right: 56px; }
.web-password-toggle { position: absolute; right: 2px; top: 10px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--atlas-v5-primary); cursor: pointer; }
.web-password-toggle:focus-visible { outline: 3px solid var(--atlas-v5-focus-color); outline-offset: 2px; }
.web-password-toggle[aria-pressed="true"] { background: var(--atlas-v5-border); }
.web-account-password-hint { margin: 6px 0 0; color: var(--atlas-v5-muted); font-size: .8125rem; overflow-wrap: anywhere; }
.web-account-form > .atlas-v5-button { width: 100%; min-height: 48px; font-size: 1rem; }
.web-account-quiet-actions { display: flex; flex-direction: column; align-items: stretch; }
.web-account-quiet-actions button, .web-account-logout { min-height: 44px; padding: 8px; border: 0; background: transparent; color: var(--atlas-v5-primary); font: inherit; font-size: .875rem; text-decoration: underline; cursor: pointer; }
.web-account-quiet-actions button:focus-visible, .web-account-logout:focus-visible, .web-account-back:focus-visible { outline: 3px solid var(--atlas-v5-focus-color); outline-offset: 3px; }
.web-account-quiet-actions button:disabled, .web-account-logout:disabled { color: var(--atlas-v5-muted); cursor: wait; }
#web-message { margin: 12px 0 0; color: var(--atlas-v5-primary); font-size: .875rem; overflow-wrap: anywhere; }
#web-message:empty { margin: 0; }
.web-account-logout { display: block; margin: 4px auto 0; }
.web-account-back { display: block; min-height: 44px; box-sizing: border-box; padding: 12px; text-align: center; color: var(--atlas-v5-primary); text-decoration: none; }
.web-account-page .velnixa-corporate-footer { width: min(600px, calc(100% - 32px)); margin: 0 auto 24px; border: 0; border-top: 1px solid var(--atlas-v5-border); border-radius: 0; background: transparent; }
.web-account-page .velnixa-corporate-footer__logo { width: 48px; height: 48px; flex-basis: 48px; }
.web-account-page .velnixa-corporate-footer__text strong { display: inline; font-weight: 500; }
@media (min-width: 480px) {
  .web-account-card { padding: 28px; }
  .web-account-quiet-actions { flex-direction: row; justify-content: center; }
  .web-account-quiet-actions button { flex: 1; }
  .web-account-quiet-actions button + button { border-left: 1px solid var(--atlas-v5-border); }
}