/* Public login + OTP — final visual layer, loaded after first-visit-auth-2026.css. */

body.mobile-web-parity:is(.page-login, .page-twofa) {
  --entry-ink: #17213d;
  --entry-muted: #65718a;
  --entry-purple: #6940bd;
  --entry-purple-deep: #4f278f;
  --entry-violet: #8d67d8;
  --entry-teal: #23b8b2;
  --entry-orange: #f3a35c;
  --entry-border: rgba(75, 50, 119, .13);
  --entry-surface: rgba(255, 255, 255, .94);
  --entry-shadow: 0 34px 80px -28px rgba(49, 31, 83, .34), 0 12px 30px -20px rgba(49, 31, 83, .22);
  background: #f5f2fb !important;
}

html[data-theme="dark"] body.mobile-web-parity:is(.page-login, .page-twofa) {
  --entry-ink: #f7f4ff;
  --entry-muted: #b5abc9;
  --entry-purple: #aa89ed;
  --entry-purple-deep: #8b60df;
  --entry-violet: #b99af6;
  --entry-teal: #62d8d1;
  --entry-orange: #ffc081;
  --entry-border: rgba(207, 190, 238, .15);
  --entry-surface: rgba(26, 19, 43, .94);
  --entry-shadow: 0 38px 90px -28px rgba(0, 0, 0, .74), 0 16px 36px -24px rgba(0, 0, 0, .62);
  background: #100b1c !important;
}

body.mobile-web-parity:is(.page-login, .page-twofa) :is(#top-navbar, #site-footer, #bottom-nav, #offline-banner) {
  display: none !important;
}

body.mobile-web-parity:is(.page-login, .page-twofa) :is(main, .page-content) {
  margin: 0 !important;
  padding: 0 !important;
}

body.mobile-web-parity:is(.page-login, .page-twofa) :is(.auth-page-login, .auth-page-twofa) {
  position: relative !important;
  isolation: isolate;
  min-height: 100dvh !important;
  display: grid !important;
  place-items: center !important;
  padding: max(28px, env(safe-area-inset-top, 0px)) 28px max(28px, env(safe-area-inset-bottom, 0px)) !important;
  overflow: hidden auto !important;
  background:
    radial-gradient(900px 520px at 92% -8%, rgba(105, 64, 189, .18), transparent 62%),
    radial-gradient(700px 480px at -5% 105%, rgba(35, 184, 178, .13), transparent 60%),
    linear-gradient(132deg, #f9f7fd 0%, #f2f6f8 48%, #f5effc 100%) !important;
}

html[data-theme="dark"] body.mobile-web-parity:is(.page-login, .page-twofa) :is(.auth-page-login, .auth-page-twofa) {
  background:
    radial-gradient(840px 520px at 90% -8%, rgba(119, 74, 207, .24), transparent 62%),
    radial-gradient(700px 480px at -5% 105%, rgba(35, 184, 178, .10), transparent 60%),
    linear-gradient(132deg, #120c20 0%, #101722 48%, #151024 100%) !important;
}

.auth-entry-glow {
  position: fixed;
  z-index: -1;
  width: 340px;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
  opacity: .7;
}

.auth-entry-glow--one {
  top: -190px;
  inset-inline-end: -90px;
  background: radial-gradient(circle, rgba(141, 103, 216, .24), transparent 68%);
}

.auth-entry-glow--two {
  bottom: -210px;
  inset-inline-start: -70px;
  background: radial-gradient(circle, rgba(35, 184, 178, .20), transparent 68%);
}

body.mobile-web-parity.page-login .auth-entry-shell,
body.mobile-web-parity.page-twofa .auth-entry-shell {
  position: relative !important;
  z-index: 1;
  width: min(1080px, calc(100vw - 56px)) !important;
  max-width: 1080px !important;
  margin: auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(390px, 440px) !important;
  align-items: stretch !important;
  gap: 18px !important;
}

.auth-entry-showcase {
  position: relative;
  min-height: 620px;
  padding: 38px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 34px;
  background:
    radial-gradient(440px 330px at 82% 12%, rgba(255, 255, 255, .17), transparent 62%),
    radial-gradient(360px 300px at 10% 92%, rgba(39, 201, 193, .20), transparent 62%),
    linear-gradient(145deg, #3b1f73 0%, #5f37ab 55%, #6541b3 100%);
  color: #fff;
  box-shadow: 0 34px 80px -28px rgba(67, 35, 123, .55);
}

.auth-entry-showcase::before,
.auth-entry-showcase::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.auth-entry-showcase::before {
  width: 270px;
  height: 270px;
  top: -118px;
  inset-inline-start: -80px;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 0 0 42px rgba(255, 255, 255, .035), 0 0 0 90px rgba(255, 255, 255, .025);
}

.auth-entry-showcase::after {
  width: 210px;
  height: 210px;
  bottom: -128px;
  inset-inline-end: -46px;
  background: rgba(35, 184, 178, .18);
  filter: blur(1px);
}

.auth-entry-pattern {
  position: absolute;
  inset: 0;
  opacity: .22;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.62) .75px, transparent .75px);
  background-size: 18px 18px;
  mask-image: linear-gradient(125deg, transparent 8%, #000 42%, transparent 90%);
}

.auth-entry-brand,
.auth-entry-showcase-copy,
.auth-entry-benefits {
  position: relative;
  z-index: 1;
}

.auth-entry-brand {
  display: flex;
  align-items: center;
  gap: 13px;
}

.auth-entry-brand .nw-logo-mark {
  width: 58px !important;
  height: 58px !important;
  flex: 0 0 58px;
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 16px 30px rgba(25, 11, 50, .20) !important;
}

.auth-entry-brand strong,
.auth-entry-brand small {
  display: block;
}

.auth-entry-brand strong {
  color: #fff;
  font-size: 20px;
  font-weight: 950;
}

.auth-entry-brand small {
  margin-top: 4px;
  color: rgba(255,255,255,.72);
  font-size: 12.5px;
  font-weight: 750;
}

.auth-entry-showcase-copy {
  max-width: 48ch;
  margin-block: auto;
  padding-block: 40px;
}

.auth-entry-eyebrow {
  width: fit-content;
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.90);
  font-size: 12px;
  font-weight: 850;
  backdrop-filter: blur(8px);
}

.auth-entry-eyebrow i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6de4dc;
  box-shadow: 0 0 0 5px rgba(109,228,220,.12);
}

.auth-entry-showcase-copy h2 {
  max-width: 12ch;
  margin: 18px 0 13px;
  color: #fff;
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 950;
  line-height: 1.25;
}

.auth-entry-showcase-copy p {
  max-width: 43ch;
  margin: 0;
  color: rgba(255,255,255,.74);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.95;
}

/*
 * Keep showcase copy legible over the purple gradient. The public identity
 * layer applies generic h2/p/small colours with higher specificity, so these
 * page-scoped rules deliberately own the foreground colour here.
 */
body.mobile-web-parity:is(.page-login, .page-twofa) .auth-entry-showcase .auth-entry-brand :is(strong, small),
body.mobile-web-parity:is(.page-login, .page-twofa) .auth-entry-showcase .auth-entry-showcase-copy :is(h2, p) {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(24, 11, 52, .22);
}

body.mobile-web-parity:is(.page-login, .page-twofa) .auth-entry-showcase .auth-entry-brand small {
  font-weight: 800;
}

body.mobile-web-parity:is(.page-login, .page-twofa) .auth-entry-showcase .auth-entry-showcase-copy p {
  font-size: 16px;
  font-weight: 750;
}

.auth-entry-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.auth-entry-benefits > span {
  min-height: 82px;
  padding: 13px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: rgba(255,255,255,.09);
  color: #fff;
  backdrop-filter: blur(10px);
}

.auth-entry-benefits b {
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.auth-benefit-icon {
  position: relative;
  width: 22px;
  height: 22px;
  display: block;
  border: 1.5px solid rgba(255,255,255,.80);
  border-radius: 7px;
}

.auth-benefit-icon::before,
.auth-benefit-icon::after {
  content: "";
  position: absolute;
}

.auth-benefit-icon--secure::before { inset: 5px 6px 4px; border: 1.5px solid #fff; border-radius: 50% 50% 45% 45%; }
.auth-benefit-icon--fast::before { width: 8px; height: 8px; inset: 5px; border-inline-end: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }
.auth-benefit-icon--track::before { width: 9px; height: 5px; inset: 6px 5px; border-inline-start: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.auth-benefit-icon--code::before { content: "••"; inset: 0; display: grid; place-items: center; color: #fff; font-size: 13px; letter-spacing: 2px; }
.auth-benefit-icon--time { border-radius: 50%; }
.auth-benefit-icon--time::before { width: 1px; height: 6px; top: 4px; left: 9px; background: #fff; transform-origin: bottom; transform: rotate(-25deg); }

body.mobile-web-parity:is(.page-login, .page-twofa) :is(.auth-card-login, .auth-card-twofa) {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 620px !important;
  margin: 0 !important;
  padding: 36px 38px 32px !important;
  align-self: stretch;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.82) !important;
  border-radius: 34px !important;
  background: var(--entry-surface) !important;
  color: var(--entry-ink) !important;
  box-shadow: var(--entry-shadow) !important;
  backdrop-filter: blur(18px);
}

html[data-theme="dark"] body.mobile-web-parity:is(.page-login, .page-twofa) :is(.auth-card-login, .auth-card-twofa) {
  border-color: var(--entry-border) !important;
  background: linear-gradient(180deg, rgba(31,23,51,.97), rgba(22,17,37,.96)) !important;
}

.auth-card-accent {
  position: absolute;
  top: 0;
  inset-inline: 17%;
  height: 4px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(90deg, #5f86fa, #9a61e8 42%, #ef759c 72%, #f4a05e);
}

body.mobile-web-parity:is(.page-login, .page-twofa) .auth-header {
  margin-bottom: 22px !important;
  text-align: center !important;
}

.auth-entry-card-logo,
body.mobile-web-parity.page-twofa .auth-entry-card-logo {
  width: 62px !important;
  height: 62px !important;
  margin: 0 auto 12px !important;
  border: 1px solid rgba(96,62,160,.10) !important;
  border-radius: 19px !important;
  background: #fff !important;
  box-shadow: 0 15px 34px -14px rgba(75,45,133,.34) !important;
}

.auth-login-kicker {
  width: fit-content;
  min-height: 28px;
  margin: 0 auto 11px;
  padding: 5px 11px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(105,64,189,.14);
  border-radius: 999px;
  background: rgba(105,64,189,.07);
  color: var(--entry-purple);
  font-size: 11.5px;
  font-weight: 850;
}

.auth-login-kicker::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--entry-teal);
  box-shadow: 0 0 0 4px rgba(35,184,178,.11);
}

body.mobile-web-parity:is(.page-login, .page-twofa) .auth-title {
  max-width: none !important;
  margin: 0 0 8px !important;
  color: var(--entry-ink) !important;
  font-size: 29px !important;
  font-weight: 950 !important;
  line-height: 1.25 !important;
}

body.mobile-web-parity:is(.page-login, .page-twofa) .auth-desc {
  max-width: 36ch !important;
  margin: 0 auto !important;
  color: var(--entry-muted) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1.8 !important;
}

body.mobile-web-parity.page-login .form-group { margin-bottom: 14px !important; }

body.mobile-web-parity:is(.page-login, .page-twofa) .form-label,
.otp-field-label {
  display: block;
  margin: 0 0 8px !important;
  color: var(--entry-ink) !important;
  font-size: 13px;
  font-weight: 900 !important;
  text-align: start !important;
}

.auth-field-shell { position: relative; }

.auth-field-icon {
  position: absolute;
  z-index: 2;
  top: 50%;
  inset-inline-start: 16px;
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(105,64,189,.08);
  color: var(--entry-purple);
  transform: translateY(-50%);
  pointer-events: none;
}

.auth-field-icon svg,
.otp-info-icon svg,
.auth-security-note svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.mobile-web-parity.page-login .auth-card-login .form-input {
  width: 100%;
  min-height: 58px !important;
  padding: 0 54px !important;
  border: 1px solid var(--entry-border) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.82) !important;
  color: var(--entry-ink) !important;
  box-shadow: 0 10px 24px -18px rgba(51,34,80,.25) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  text-align: center !important;
}

html[data-theme="dark"] body.mobile-web-parity.page-login .auth-card-login .form-input {
  background: rgba(255,255,255,.045) !important;
}

body.mobile-web-parity:is(.page-login, .page-twofa) :is(.form-input, .otp-box):focus {
  border-color: rgba(105,64,189,.48) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 4px rgba(105,64,189,.10), 0 12px 26px -18px rgba(51,34,80,.32) !important;
}

body.mobile-web-parity:is(.page-login, .page-twofa) :is(.btn-primary, #btn-send-otp, #btn-verify-otp).auth-submit {
  position: relative;
  width: 100% !important;
  min-height: 58px !important;
  padding: 0 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 11px !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  border-radius: 16px !important;
  background: linear-gradient(112deg, #5630a2 0%, #7448c6 62%, #25b8b2 130%) !important;
  color: #fff !important;
  box-shadow: 0 18px 34px -13px rgba(86,48,162,.48) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

body.mobile-web-parity:is(.page-login, .page-twofa) .auth-submit:hover {
  transform: translateY(-2px) !important;
  filter: saturate(1.07);
  box-shadow: 0 22px 38px -13px rgba(86,48,162,.56) !important;
}

.auth-submit-arrow {
  font-size: 20px;
  font-weight: 500;
  transition: transform .18s ease;
}

.auth-submit:has(.spinner:not(.hidden)) .auth-submit-arrow { display: none; }
body.mobile-web-parity:is(.page-login, .page-twofa) .auth-submit:disabled { cursor: not-allowed; filter: saturate(.72); }

[dir="ltr"] .auth-submit-arrow { transform: scaleX(-1); }
.auth-submit:hover .auth-submit-arrow { transform: translateX(-3px); }
[dir="ltr"] .auth-submit:hover .auth-submit-arrow { transform: scaleX(-1) translateX(-3px); }

.auth-security-note {
  margin: 13px 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 7px;
  color: var(--entry-muted);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.65;
  text-align: center;
}

.auth-security-note svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; color: var(--entry-teal); }

body.mobile-web-parity:is(.page-login, .page-twofa) .auth-divider {
  margin: 16px 0 !important;
  color: var(--entry-muted) !important;
  font-size: 11px;
}

body.mobile-web-parity:is(.page-login, .page-twofa) :is(#btn-guest, #btn-faceid-login, #btn-faceid-twofa) {
  width: 100%;
  min-height: 54px !important;
  border: 1px solid var(--entry-border) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.68) !important;
  color: var(--entry-purple-deep) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body.mobile-web-parity:is(.page-login, .page-twofa) :is(#btn-guest, #btn-faceid-login, #btn-faceid-twofa) {
  background: rgba(255,255,255,.045) !important;
  color: var(--entry-violet) !important;
}

body.mobile-web-parity:is(.page-login, .page-twofa) :is(#btn-guest, #btn-faceid-login, #btn-faceid-twofa):hover {
  border-color: rgba(105,64,189,.32) !important;
  background: rgba(105,64,189,.06) !important;
}

/* OTP details */
body.mobile-web-parity.page-twofa .auth-header { margin-bottom: 18px !important; }
body.mobile-web-parity.page-twofa .auth-twofa-brand-row { min-height: 0 !important; margin: 0 !important; }

body.mobile-web-parity.page-twofa .auth-secure-strip {
  position: relative;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
  margin: 0 0 15px !important;
}

body.mobile-web-parity.page-twofa .auth-secure-strip::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 18px;
  inset-inline: 16%;
  height: 1px;
  background: var(--entry-border);
}

body.mobile-web-parity.page-twofa .auth-secure-strip span {
  position: relative;
  z-index: 1;
  min-height: 39px !important;
  padding: 7px 7px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border: 1px solid var(--entry-border) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.75) !important;
  color: var(--entry-muted) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  white-space: nowrap;
}

html[data-theme="dark"] body.mobile-web-parity.page-twofa .auth-secure-strip span { background: rgba(255,255,255,.04) !important; }

body.mobile-web-parity.page-twofa .auth-secure-strip span::before {
  width: 7px !important;
  height: 7px !important;
  flex: 0 0 7px !important;
  border-radius: 50%;
  background: rgba(101,113,138,.36) !important;
  box-shadow: none !important;
}

body.mobile-web-parity.page-twofa .auth-secure-strip .is-complete::before { background: var(--entry-teal) !important; box-shadow: 0 0 0 3px rgba(35,184,178,.10) !important; }
body.mobile-web-parity.page-twofa .auth-secure-strip .is-active { border-color: rgba(105,64,189,.25) !important; color: var(--entry-purple) !important; background: rgba(105,64,189,.07) !important; }
body.mobile-web-parity.page-twofa .auth-secure-strip .is-active::before { background: var(--entry-purple) !important; box-shadow: 0 0 0 3px rgba(105,64,189,.10) !important; }

body.mobile-web-parity.page-twofa .otp-info-card {
  min-height: 67px;
  margin: 0 0 15px !important;
  padding: 11px 12px !important;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--entry-border) !important;
  border-radius: 15px !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body.mobile-web-parity.page-twofa .otp-info-card { background: rgba(255,255,255,.04) !important; }

.otp-info-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(35,184,178,.10);
  color: var(--entry-teal);
}

.otp-info-copy { min-width: 0; display: block; }
body.mobile-web-parity.page-twofa .otp-info-label,
body.mobile-web-parity.page-twofa .otp-info-phone { display: block; margin: 0 !important; text-align: start !important; }
body.mobile-web-parity.page-twofa .otp-info-label { color: var(--entry-muted) !important; font-size: 10.5px !important; font-weight: 750 !important; }
body.mobile-web-parity.page-twofa .otp-info-phone { margin-top: 2px !important; color: var(--entry-ink) !important; font-size: 14px !important; font-weight: 900 !important; letter-spacing: .7px !important; }

.twofa-change-phone {
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--entry-purple);
  font-size: 11px;
  font-weight: 850;
  text-decoration: none;
}
.twofa-change-phone:hover { background: rgba(105,64,189,.08); }

body.mobile-web-parity.page-twofa .otp-boxes {
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 0 0 15px !important;
}

body.mobile-web-parity.page-twofa .otp-box {
  width: 62px !important;
  height: 62px !important;
  border: 1px solid rgba(105,64,189,.20) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.78) !important;
  color: var(--entry-ink) !important;
  box-shadow: 0 10px 22px -18px rgba(49,31,83,.30) !important;
  font-size: 24px !important;
  font-weight: 950 !important;
  text-align: center !important;
}

html[data-theme="dark"] body.mobile-web-parity.page-twofa .otp-box { background: rgba(255,255,255,.045) !important; }
body.mobile-web-parity.page-twofa .otp-box.is-filled { border-color: rgba(105,64,189,.40) !important; background: rgba(105,64,189,.07) !important; }

body.mobile-web-parity.page-twofa .twofa-resend-row {
  margin-top: 19px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  color: var(--entry-muted) !important;
  font-size: 11.5px !important;
}

body.mobile-web-parity.page-twofa .twofa-resend-row :is(.btn-link, .otp-resend-btn) { color: var(--entry-muted) !important; font-size: 11.5px !important; font-weight: 750 !important; }
body.mobile-web-parity.page-twofa .otp-resend-btn:not(:disabled) { color: var(--entry-purple) !important; font-weight: 900 !important; }

body.mobile-web-parity.page-twofa .twofa-countdown-pill {
  width: fit-content !important;
  min-height: 31px !important;
  margin: 8px auto 0 !important;
  padding: 5px 10px !important;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--entry-border) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.62) !important;
  color: var(--entry-purple) !important;
  box-shadow: none !important;
  font-size: 10.5px;
  font-weight: 800;
}

html[data-theme="dark"] body.mobile-web-parity.page-twofa .twofa-countdown-pill { background: rgba(255,255,255,.04) !important; }
.countdown-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--entry-orange); box-shadow: 0 0 0 3px rgba(243,163,92,.12); }

body.mobile-web-parity:is(.page-login, .page-twofa) :is(.form-error, #phone-error, #otp-error):not(.hidden) {
  margin: 9px 0 12px !important;
  padding: 9px 11px !important;
  border-radius: 12px !important;
  font-size: 11.5px;
}

@media (max-width: 900px) {
  body.mobile-web-parity:is(.page-login, .page-twofa) :is(.auth-page-login, .auth-page-twofa) {
    padding-inline: 18px !important;
  }

  body.mobile-web-parity.page-login .auth-entry-shell,
  body.mobile-web-parity.page-twofa .auth-entry-shell {
    width: min(440px, calc(100vw - 36px)) !important;
    max-width: 440px !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .auth-entry-showcase { display: none !important; }

  body.mobile-web-parity:is(.page-login, .page-twofa) :is(.auth-card-login, .auth-card-twofa) {
    min-height: 0 !important;
  }
}

@media (max-width: 520px) {
  body.mobile-web-parity:is(.page-login, .page-twofa) :is(.auth-page-login, .auth-page-twofa) {
    align-items: start !important;
    padding: max(18px, env(safe-area-inset-top, 0px)) 12px max(18px, env(safe-area-inset-bottom, 0px)) !important;
  }

  body.mobile-web-parity.page-login .auth-entry-shell,
  body.mobile-web-parity.page-twofa .auth-entry-shell {
    width: calc(100vw - 24px) !important;
  }

  body.mobile-web-parity:is(.page-login, .page-twofa) :is(.auth-card-login, .auth-card-twofa) {
    padding: 25px 18px 22px !important;
    border-radius: 25px !important;
  }

  .auth-entry-card-logo,
  body.mobile-web-parity.page-twofa .auth-entry-card-logo {
    width: 56px !important;
    height: 56px !important;
    border-radius: 17px !important;
  }

  body.mobile-web-parity:is(.page-login, .page-twofa) .auth-title { font-size: 26px !important; }
  body.mobile-web-parity:is(.page-login, .page-twofa) .auth-desc { font-size: 12.5px !important; }

  body.mobile-web-parity.page-twofa .otp-box { width: min(58px, calc(25vw - 17px)) !important; height: 58px !important; border-radius: 14px !important; }
  body.mobile-web-parity.page-twofa .otp-boxes { gap: 8px !important; }
}

@media (max-width: 360px) {
  body.mobile-web-parity:is(.page-login, .page-twofa) :is(.auth-card-login, .auth-card-twofa) { padding-inline: 14px !important; }
  body.mobile-web-parity.page-twofa .auth-secure-strip span { font-size: 10px !important; padding-inline: 4px !important; }
  body.mobile-web-parity.page-twofa .otp-box { width: calc(25vw - 16px) !important; height: 54px !important; }
}

@media (prefers-reduced-motion: reduce) {
  body.mobile-web-parity:is(.page-login, .page-twofa) *,
  body.mobile-web-parity:is(.page-login, .page-twofa) *::before,
  body.mobile-web-parity:is(.page-login, .page-twofa) *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}