/* Payment-card access composition. The existing authentication flow stays unchanged. */
:root { --login-ink: #101514; --login-muted: #6a7472; --login-line: #dfe5e2; --login-mint: #43d5b2; --login-panel: #ffffff; }

.login-page { min-height: 100vh; overflow-x: hidden; color: var(--login-ink); background: #fff; font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif; }
.login-shell { position: relative; min-height: 100vh; isolation: isolate; overflow: hidden; background: #fff; }
.login-shell::before, .login-shell::after { display: none; }
.login-header { position: absolute; inset: 0 0 auto; z-index: 3; display: flex; align-items: center; justify-content: space-between; min-height: 120px; padding: 34px clamp(28px, 4.35vw, 70px) 22px; pointer-events: none; }
.login-wordmark, .login-compliance { pointer-events: auto; }
.login-wordmark { display: inline-flex; align-items: center; gap: 15px; color: var(--login-ink); text-decoration: none; }
.login-logo-tile { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 4px; background: #101514; }
.login-logo-tile img { width: 22px; height: 22px; }
.login-wordmark-name { display: inline-flex; align-items: baseline; gap: 17px; }
.login-wordmark-name strong { font-size: 23px; line-height: 1; font-weight: 900; letter-spacing: 0; }
.login-wordmark-name small { color: #54615f; font-size: 9px; font-weight: 700; letter-spacing: .02em; }
.login-compliance { display: inline-flex; align-items: center; gap: 9px; margin-right: 10.1vw; color: #687371; font-size: 10px; letter-spacing: .01em; }
.login-compliance i { width: 8px; height: 8px; border-radius: 50%; background: var(--login-mint); }

.login-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; padding: 0; }
.login-hero { min-width: 0; padding: 162px clamp(34px, 7.2vw, 115px) 76px clamp(34px, 7.2vw, 115px); border-right: 1px solid #e6ebe9; background-color: #fcfdfc; background-image: linear-gradient(rgba(228, 234, 232, .45) 1px, transparent 1px), linear-gradient(90deg, rgba(228, 234, 232, .45) 1px, transparent 1px); background-size: 40px 40px; }
.login-hero-copy-wrap { max-width: 570px; }
.login-eyebrow { margin: 0 0 21px; color: #0d7569; font-size: 11px; font-weight: 800; letter-spacing: .01em; }
.login-hero h1 { margin: 0; color: var(--login-ink); font-size: 67px; line-height: 1.02; letter-spacing: 0; font-weight: 850; }
.login-hero-copy { margin: 22px 0 0; color: #687876; font-size: 16px; line-height: 1.55; }

.login-visual-card { position: relative; width: min(560px, 100%); aspect-ratio: 1.82 / 1; margin: 73px 0 0 11px; padding: 28px 30px 25px; overflow: hidden; border: 1.5px solid #424a47; border-radius: 21px; background: linear-gradient(155deg, #fbfdfb 0%, #f7faf8 68%, #edf3f0 100%); box-shadow: 17px 20px 0 rgba(223, 230, 226, .7), 0 22px 36px rgba(38, 56, 49, .14); transform: rotate(-5deg); transform-origin: 50% 50%; }
.login-visual-card::after { position: absolute; right: -72px; bottom: -104px; width: 260px; height: 260px; border-radius: 50%; background: rgba(210, 229, 222, .22); content: ""; }
.login-card-header { display: flex; align-items: center; justify-content: space-between; color: #202a27; font-size: 12px; }
.login-card-header i { width: 11px; height: 11px; border-radius: 50%; background: var(--login-mint); }
.login-card-divider { height: 1px; margin: 22px -30px 25px; background: #dfe6e2; }
.login-card-chip { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 18px); grid-template-rows: repeat(2, 17px); width: 56px; height: 42px; overflow: hidden; border: 1px solid #72d8bd; border-radius: 8px; background: #d7f4e9; }
.login-card-chip b { border-right: 1px solid #75d9bd; border-bottom: 1px solid #75d9bd; }
.login-card-chip b:nth-child(3n) { border-right: 0; }
.login-card-chip b:nth-child(n+4) { border-bottom: 0; }
.login-card-dots { position: absolute; top: 146px; left: 123px; color: #9eada8; font-size: 17px; letter-spacing: 4px; }
.login-card-number { position: absolute; top: 193px; left: 30px; color: #27312e; font-size: 21px; letter-spacing: 2px; }
.login-card-details { position: absolute; right: 28px; bottom: 24px; left: 30px; z-index: 1; display: flex; align-items: end; gap: 39px; }
.login-card-details div { display: grid; gap: 5px; }
.login-card-details small { color: #9aa6a2; font-size: 8px; letter-spacing: .05em; }
.login-card-details strong { color: #27312e; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.login-card-details img { width: 51px; height: auto; margin-left: auto; }
.login-hero-status { display: flex; align-items: center; width: min(560px, 100%); margin: 60px 0 0 11px; color: #72817d; font-size: 10px; }
.login-hero-status > span { display: inline-flex; align-items: center; min-height: 29px; padding: 0 24px; border-right: 1px solid #dfe5e2; white-space: nowrap; }
.login-hero-status > span:first-child { padding-left: 0; color: #293431; }
.login-hero-status > span:last-child { border-right: 0; }
.login-hero-status i { width: 8px; height: 8px; margin-right: 9px; border-radius: 50%; background: var(--login-mint); }

.login-entry { display: flex; align-items: flex-start; min-width: 0; padding: 162px clamp(34px, 8.8vw, 141px) 74px clamp(34px, 10.5vw, 168px); background: #fff; }
.login-form-shell { width: min(456px, 100%); }
.login-form-eyebrow { margin: 0 0 23px; color: #6c7774; font-size: 11px; letter-spacing: .01em; }
.login-form-shell h2 { margin: 0; color: #0e1513; font-size: 43px; line-height: 1.06; letter-spacing: 0; font-weight: 850; }
.login-form-subtitle { margin: 14px 0 45px; color: #687572; font-size: 14px; line-height: 1.5; }
.login-form { display: grid; gap: 0; }
.login-form > label, .login-password-heading label { margin: 0 0 11px; color: #202a27; font-size: 11px; font-weight: 800; }
.login-password-heading { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; }
.login-password-heading span { color: #087e70; font-size: 10px; font-weight: 800; }
.login-input-wrap { position: relative; }
.login-input-wrap input { width: 100%; height: 57px; margin: 0; border: 1px solid #cbd7d3; border-radius: 7px; padding: 0 50px 0 18px; color: #1c2925; background: #fff; font-size: 13px; box-sizing: border-box; }
.login-input-wrap input::placeholder { color: #98a4a0; }
.login-input-wrap input:focus { border-color: #4cbeaa; outline: 3px solid rgba(67, 213, 178, .13); }
.login-email-wrap > svg { position: absolute; top: 50%; right: 18px; width: 22px; height: 22px; color: #71807b; transform: translateY(-50%); pointer-events: none; }
.password-field input { padding-right: 57px; }
.password-toggle { position: absolute; top: 0; right: 4px; display: grid; width: 46px; height: 57px; place-items: center; border: 0; color: #71807b; background: transparent; cursor: pointer; }
.password-toggle:hover { color: #173d34; background: #f4f9f7; }
.password-toggle svg { width: 20px; height: 20px; }
.password-toggle .eye-off { display: none; }
.password-toggle.is-visible .eye-open { display: none; }
.password-toggle.is-visible .eye-off { display: block; }
.login-form .login-submit { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 58px; margin-top: 35px; border: 0; border-radius: 6px; padding: 0 12px 0 22px; color: #fff; background: #111615; font-size: 13px; font-weight: 800; cursor: pointer; }
.login-form .login-submit b { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 4px; color: #111615; background: var(--login-mint); font-size: 28px; font-weight: 400; line-height: 1; }
.login-form .login-submit:hover { background: #26312d; }
.login-form .login-submit:focus-visible { outline: 3px solid rgba(67, 213, 178, .34); outline-offset: 3px; }
.login-activation { margin: 31px 0 0; color: #87918d; text-align: center; font-size: 11px; }
.login-activation a { margin-left: 10px; color: #078c7a; font-weight: 800; text-decoration: none; }
.login-activation a:hover { text-decoration: underline; }
.login-security-note { display: flex; align-items: center; gap: 11px; margin-top: 42px; padding-top: 24px; border-top: 1px solid #dfe5e2; color: #71807b; font-size: 11px; }
.login-security-note > span:first-child { color: #12aa8f; font-size: 24px; line-height: .8; }
.login-verify-context { margin: 0 0 24px; border: 0; border-bottom: 1px solid #dfe5e2; }
.login-verify-context div { display: flex; align-items: center; justify-content: space-between; padding: 0 0 14px; }
.login-verify-context span { color: #87928e; font-size: 11px; }
.login-verify-context strong { color: #1e2a26; font-size: 12px; }
.login-code-wrap input { letter-spacing: .3em; }
.login-back-link { display: block; margin-top: 22px; color: #078c7a; text-align: center; font-size: 12px; text-decoration: none; }
.login-back-link:hover { text-decoration: underline; }
.alert.alert-error { margin: 0 0 21px; border: 1px solid #efc8c3; border-radius: 6px; padding: 12px 14px; color: #9e342b; background: #fff7f5; font-size: 12px; }

@media (max-width: 1100px) {
  .login-entry { padding-right: 54px; padding-left: 54px; }
  .login-hero { padding-right: 54px; padding-left: 54px; }
  .login-hero h1 { font-size: 58px; }
  .login-form-shell h2 { font-size: 38px; }
  .login-compliance { margin-right: 5vw; }
  .login-visual-card { margin-left: 0; }
  .login-hero-status { margin-left: 0; }
  .login-hero-status > span { padding-right: 14px; padding-left: 14px; }
}
@media (max-width: 820px) {
  .login-header { position: relative; min-height: 86px; padding: 24px 22px 14px; }
  .login-compliance { margin-right: 0; font-size: 9px; }
  .login-main { display: block; min-height: 0; }
  .login-hero { padding: 52px 24px 56px; border-right: 0; border-bottom: 1px solid #e6ebe9; }
  .login-hero h1 { font-size: 55px; }
  .login-visual-card { width: min(560px, 95%); margin-top: 55px; }
  .login-hero-status { flex-wrap: wrap; gap: 7px 0; margin-top: 54px; }
  .login-entry { padding: 60px 24px 55px; }
  .login-form-shell { margin: 0 auto; }
}
@media (max-width: 520px) {
  .login-header { padding-right: 16px; padding-left: 16px; }
  .login-wordmark { gap: 10px; }
  .login-logo-tile { width: 32px; height: 32px; }
  .login-logo-tile img { width: 20px; height: 20px; }
  .login-wordmark-name { gap: 8px; }
  .login-wordmark-name strong { font-size: 19px; }
  .login-wordmark-name small { font-size: 7px; }
  .login-compliance { gap: 6px; font-size: 8px; }
  .login-compliance i { width: 6px; height: 6px; }
  .login-hero { padding: 35px 18px 43px; background-size: 32px 32px; }
  .login-eyebrow { margin-bottom: 17px; font-size: 10px; }
  .login-hero-copy { margin-top: 18px; font-size: 13px; }
  .login-visual-card { width: 96%; margin: 48px auto 0; padding: 21px 22px 20px; border-radius: 16px; }
  .login-card-divider { margin-top: 17px; margin-bottom: 20px; }
  .login-card-number { top: 54%; left: 22px; font-size: 14px; letter-spacing: 1px; }
  .login-card-dots { top: 40%; left: 81px; font-size: 11px; letter-spacing: 2px; }
  .login-card-details { right: 21px; bottom: 18px; left: 22px; gap: 17px; }
  .login-card-details strong { font-size: 8px; }
  .login-card-details small { font-size: 6px; }
  .login-card-details img { width: 37px; }
  .login-hero-status { margin-top: 39px; font-size: 9px; }
  .login-hero-status > span { padding: 0 10px; }
  .login-entry { padding: 48px 18px 45px; }
  .login-form-eyebrow { margin-bottom: 18px; font-size: 10px; }
  .login-form-shell h2 { font-size: 33px; }
  .login-form-subtitle { margin: 13px 0 32px; font-size: 12px; }
  .login-activation { margin-top: 37px; }
  .login-security-note { margin-top: 34px; padding-top: 20px; font-size: 10px; }
}

/* Override older dashboard-era login rules loaded from app.css. */
.login-page .login-entry { display: flex; align-items: flex-start; place-items: initial; min-height: 100vh; padding: 162px clamp(34px, 8.8vw, 141px) 74px clamp(34px, 10.5vw, 168px); background: #fff; }
.login-page .login-form { gap: 0; }
.login-page .login-form .login-input-wrap input { height: 57px; margin: 0; border: 1px solid #cbd7d3; border-radius: 7px; padding: 0 50px 0 18px; color: #1c2925; background: #fff; font-size: 13px; }
.login-page .login-form .login-input-wrap input:focus { border-color: #4cbeaa; outline: 3px solid rgba(67, 213, 178, .13); background: #fff; }
.login-page .login-form .password-field input { padding-right: 57px; }
.login-page .password-toggle { height: 57px; border-radius: 4px; }
.login-page .login-form .login-submit { height: 58px; margin-top: 35px; border-radius: 6px; padding: 0 12px 0 22px; background: #111615; box-shadow: none; font-size: 13px; }
.login-page .login-form .login-submit:hover { background: #26312d; }
.login-page .login-form .login-submit:focus-visible { outline: 3px solid rgba(67, 213, 178, .34); outline-offset: 3px; }

@media (max-width: 1100px) {
  .login-page .login-entry { padding-right: 54px; padding-left: 54px; }
}
@media (max-width: 820px) {
  .login-page .login-entry { min-height: auto; padding: 60px 24px 55px; }
}
@media (max-width: 520px) {
  .login-page .login-entry { min-height: auto; padding: 48px 18px 45px; }
  .login-page .login-form .login-input-wrap input { height: 57px; border-radius: 7px; }
  .login-page .password-toggle { height: 57px; border-radius: 4px; }
  .login-page .login-form .login-submit { height: 58px; border-radius: 6px; }
}