/* The single login layout, present in the initial document. */
.phone #login-screen #login-step-returning[data-login-sheet] {
  --sheet-paper: #fff;
  --login-safe-top: 0px;
  --sheet-ink: #172440;
  --sheet-muted: #66748c;
  --sheet-line: #dce3ef;
  --sheet-field: #f5f7fb;
  --sheet-blue: #075cf0;
  --sheet-gutter: 32px;
  --sheet-control-height: 56px;
  --sheet-section-gap: 24px;
  --sheet-biometric-surface: #edf4ff;
  --sheet-return-surface: #f3f4f6;
  --sheet-return-ink: #62666c;
  --sheet-biometric-ink: #075cf0;
  --sheet-header-height: 56px;
  --sheet-header-gap: 12px;
  --sheet-bottom-inset: 0px;
  --sheet-content-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  --entry-ink: var(--sheet-ink);
  --entry-muted: var(--sheet-muted);
  --entry-brand: var(--sheet-blue);
  --entry-icon: #7c8ba3;
  --entry-surface: var(--sheet-paper);
  position: relative;
  isolation: isolate;
  height: 100%;
  min-height: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
  color: var(--sheet-ink);
  background: #0838a5;
  background-image: linear-gradient(155deg, #063781, #1045bd 48%, #132d83);
  font-family: "Vazirmatn Regular", Tahoma, sans-serif;
  container-type: size;
}
.phone #login-screen #login-step-returning[data-login-sheet][data-auth-view="password"] {
  --sheet-header-height: 56px;
  --sheet-header-gap: 4px;
  --sheet-bottom-inset: calc(48px + env(safe-area-inset-bottom, 0px));
  --sheet-content-bottom: 0px;
}
.phone #login-screen #login-step-returning[data-login-sheet] .login-brand-scene {
  position: absolute;
  inset: 0 0 auto;
  height: 100%;
  padding-top: var(--login-safe-top);
  overflow: hidden;
  pointer-events: none;
}
.phone #login-screen #login-step-returning[data-login-sheet] .login-brand-aura {
  position: absolute;
  inset: -12%;
  pointer-events: none;
  opacity: .85;
}
.phone #login-screen #login-step-returning[data-login-sheet] .login-brand-aura::before,
.phone #login-screen #login-step-returning[data-login-sheet] .login-brand-aura::after {
  content: "";
  position: absolute;
  inset: 0;
  filter: blur(28px);
  will-change: transform;
}
.phone #login-screen #login-step-returning[data-login-sheet] .login-brand-aura::before {
  --aura-start: var(--aura-a-start, translate3d(-4%, -3%, 0) rotate(-8deg) scale(1));
  --aura-end: var(--aura-a-end, translate3d(5%, 4%, 0) rotate(10deg) scale(1.12));
  background: radial-gradient(ellipse at var(--aura-a-center-0, 85% 22%), #22c3d0a6, transparent 48%), radial-gradient(ellipse at var(--aura-a-center-1, 15% 62%), #227fffad, transparent 52%);
  transform: var(--aura-start);
  animation: login-aura-flow 3.333333s var(--aura-a-delay, 0s) ease-in-out infinite var(--aura-a-direction, alternate);
}
.phone #login-screen #login-step-returning[data-login-sheet] .login-brand-aura::after {
  --aura-start: var(--aura-b-start, translate3d(-4%, -3%, 0) rotate(-8deg) scale(1));
  --aura-end: var(--aura-b-end, translate3d(5%, 4%, 0) rotate(10deg) scale(1.12));
  background: radial-gradient(ellipse at var(--aura-b-center-0, 12% 22%), #6d67f07a, transparent 45%), radial-gradient(ellipse at var(--aura-b-center-1, 78% 80%), #5268f0a3, transparent 48%);
  transform: var(--aura-start);
  animation: login-aura-flow 4.333333s var(--aura-b-delay, -1.5s) ease-in-out infinite var(--aura-b-direction, alternate-reverse);
}
.phone #login-screen #login-step-returning[data-login-sheet] .login-brand-scene[data-motion-paused="true"] .login-brand-aura::before,
.phone #login-screen #login-step-returning[data-login-sheet] .login-brand-scene[data-motion-paused="true"] .login-brand-aura::after {
  animation-play-state: paused;
}
.phone #login-screen #login-step-returning[data-login-sheet] .login-brand-lockup {
  position: absolute;
  top: calc(44% + var(--login-safe-top) * .56);
  left: 50%;
  width: calc(100% - 48px);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #fff;
  transition: top 400ms cubic-bezier(.22, 1, .36, 1), transform 400ms cubic-bezier(.22, 1, .36, 1);
}
.phone #login-screen #login-step-returning[data-login-sheet] .login-brand-symbol {
  width: 124px;
  height: 64px;
  overflow: visible;
  fill: #fff;
  stroke: none;
  filter: drop-shadow(0 8px 18px #00277226);
}
.phone #login-screen #login-step-returning[data-login-sheet] .login-brand-wing { transform-origin: center; }
.phone #login-screen #login-step-returning[data-login-sheet] .login-brand-lockup [hidden] { display: none !important; }
.phone #login-screen #login-step-returning[data-login-sheet] .login-hero-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--biz-space-4);
  max-width: 100%;
}
.phone #login-screen #login-step-returning[data-login-sheet] .login-hero-avatar {
  display: grid;
  place-items: center;
  width: 120px;
  height: 120px;
  flex: none;
  overflow: hidden;
  border-radius: 50%;
  background: #fff;
  color: #18419a;
  box-shadow: 0 16px 32px #001b5547, 0 4px 12px #001b5529 !important;
}
.phone #login-screen #login-step-returning[data-login-sheet] .login-hero-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 36%; }
.phone #login-screen #login-step-returning[data-login-sheet] .login-hero-avatar svg { width: 48px; height: 48px; }
.phone #login-screen #login-step-returning[data-login-sheet] .login-hero-name {
  color: #fff;
  font: var(--biz-text-display)/var(--biz-line-display) var(--biz-font-semibold) !important;
  overflow-wrap: anywhere;
}
.phone #login-screen #login-step-returning[data-login-sheet] .login-hero-copy { display: grid; gap: var(--biz-space-1); max-width: 100%; }
.phone #login-screen #login-step-returning[data-login-sheet] .login-hero-identifier {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--biz-space-2);
  margin: 0;
  color: #e1edff;
  font: var(--biz-text-body)/var(--biz-line-body) var(--biz-font-regular) !important;
}
.phone #login-screen #login-step-returning[data-login-sheet] .login-hero-identifier bdi { font: inherit; letter-spacing: 0; white-space: nowrap; }
.phone #login-screen #login-step-returning[data-login-sheet][data-sheet-state="intro"] .login-hero-profile { animation: login-copy-in 450ms both; }
.phone #login-screen #login-step-returning[data-login-sheet] .login-brand-wing.first { fill: #9ad6ff; }
.phone #login-screen #login-step-returning[data-login-sheet] .login-brand-wing.second { fill: #fff; }
.phone #login-screen #login-step-returning[data-login-sheet] .login-brand-name {
  margin-top: 0;
  color: #fff;
  font: 36px/1.5 "Vazirmatn Black", Tahoma, sans-serif !important;
  letter-spacing: -.8px;
}
.phone #login-screen #login-step-returning[data-login-sheet] .login-brand-tagline {
  margin: 12px 0 0;
  color: #e1edff;
  font: 18px/1.85 "Vazirmatn Regular", Tahoma, sans-serif !important;
}
.phone #login-screen #login-step-returning[data-login-sheet] .login-brand-tagline strong {
  color: #fff;
  font: 20px/1.8 "Vazirmatn Medium", Tahoma, sans-serif !important;
}
.phone #login-screen #login-step-returning[data-login-sheet][data-sheet-state="intro"] .first { animation: login-wing-left 850ms cubic-bezier(.22, 1, .36, 1) both; }
.phone #login-screen #login-step-returning[data-login-sheet][data-sheet-state="intro"] .second { animation: login-wing-right 850ms 140ms cubic-bezier(.22, 1, .36, 1) both; }
.phone #login-screen #login-step-returning[data-login-sheet][data-sheet-state="intro"] .login-brand-name { animation: login-copy-in 650ms 350ms both; }
.phone #login-screen #login-step-returning[data-login-sheet][data-sheet-state="intro"] .login-brand-tagline { animation: login-copy-in 650ms 750ms both; }
.phone #login-screen #login-step-returning[data-login-sheet][data-sheet-state="open"] .login-brand-lockup { top: calc((var(--login-brand-space, 300px) + var(--login-safe-top)) / 2); }
.phone #login-screen #login-step-returning[data-login-sheet][data-sheet-state="open"][data-compact-brand="true"] .login-brand-lockup { transform: translate(-50%, -50%) scale(.78); }
.phone #login-screen #login-step-returning[data-login-sheet] .login-sheet-open {
  position: absolute;
  bottom: max(48px, env(safe-area-inset-bottom, 0px));
  left: 32px;
  right: 32px;
  width: calc(100% - 64px);
  min-height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border: 1px solid #ffffff45;
  border-radius: 18px;
  background: #ffffff17;
  color: #fff;
  font: 15px/24px "Vazirmatn SemiBold", Tahoma, sans-serif;
  transition: opacity 200ms;
}
.phone #login-screen #login-step-returning[data-login-sheet] .login-sheet-open svg { width: 20px; height: 20px; }
.phone #login-screen #login-step-returning[data-login-sheet][data-sheet-state="open"] .login-sheet-open { opacity: 0; visibility: hidden; }
.phone #login-screen #login-step-returning[data-login-sheet] .login-entry-sheet {
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(100% - 164px - var(--login-safe-top));
  margin: 0;
  padding: 0 0 var(--sheet-bottom-inset);
  overflow: hidden;
  border: 0;
  border-radius: 36px 36px 0 0;
  background: var(--sheet-paper);
  box-shadow: 0 -12px 48px #00247820;
  transform: translateY(105%);
  visibility: hidden;
  transition: transform 350ms cubic-bezier(.22, 1, .36, 1), visibility 350ms;
}
.phone #login-screen #login-step-returning[data-login-sheet][data-sheet-state="open"] .login-entry-sheet { transform: translateY(var(--login-sheet-drag, 0px)); visibility: visible; }
.phone #login-screen #login-step-returning[data-login-sheet].login-sheet-dragging .login-entry-sheet { transition: none; }
.phone #login-screen #login-step-returning[data-login-sheet] .login-sheet-chrome {
  position: relative;
  flex: 0 0 var(--sheet-header-height);
  height: var(--sheet-header-height);
  padding: 44px var(--sheet-gutter) var(--sheet-header-gap);
}
.phone #login-screen #login-step-returning[data-login-sheet] .login-sheet-handle {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  touch-action: none;
  cursor: grab;
}
.phone #login-screen #login-step-returning[data-login-sheet] .login-sheet-handle span { width: 36px; height: 4px; border-radius: 99px; background: var(--sheet-line); }
.phone #login-screen #login-step-returning[data-login-sheet] .login-sheet-content {
  min-height: 0;
  padding: 0 var(--sheet-gutter) var(--sheet-content-bottom);
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-block: 16px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.phone #login-screen #login-step-returning[data-login-sheet] .login-sheet-heading { margin: 0 0 16px; }
.phone #login-screen #login-step-returning[data-login-sheet] .login-sheet-heading h2 { margin: 0 0 4px; color: var(--sheet-ink); font: 24px/32px "Vazirmatn SemiBold", Tahoma, sans-serif !important; }
.phone #login-screen #login-step-returning[data-login-sheet] .login-sheet-heading p { margin: 0; color: var(--sheet-muted); font: 12px/20px "Vazirmatn Regular", Tahoma, sans-serif !important; }
/* OTP reuses the live auth form and the same sheet/scroll container. Control
 * geometry and field states come from the shared UI standards adapter. */
.phone #login-screen #login-step-returning[data-login-sheet][data-sheet-view="otp"] {
  display: flex !important;
  animation: none;
  --sheet-header-height: 56px;
  --sheet-bottom-inset: calc(48px + env(safe-area-inset-bottom, 0px));
  --sheet-content-bottom: 0px;
}
.phone #login-screen #login-step-returning[data-login-sheet] .login-sheet-otp {
  display: block;
  height: auto;
  min-height: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  animation: none;
}
.phone #login-screen #login-step-returning[data-login-sheet] .login-sheet-otp :is(.login-progress, .otp-delivery-status, .otp-symbol, .otp-heading > span) { display: none; }
.phone #login-screen #login-step-returning[data-login-sheet] .login-sheet-otp .login-topbar { margin: 0 0 var(--biz-space-3); }
.phone #login-screen #login-step-returning[data-login-sheet] .login-sheet-otp .login-topbar > button { background: var(--sheet-field); color: var(--sheet-ink); }
.phone #login-screen #login-step-returning[data-login-sheet] .login-sheet-otp .otp-heading { margin: 0 0 var(--biz-space-6); text-align: start; }
.phone #login-screen #login-step-returning[data-login-sheet] .login-sheet-otp .otp-heading h2 { margin: 0; color: var(--sheet-ink); font: var(--biz-text-display)/var(--biz-line-display) var(--biz-font-semibold) !important; }
.phone #login-screen #login-step-returning[data-login-sheet] .login-sheet-otp .otp-heading p { margin: var(--biz-space-2) 0; color: var(--sheet-muted); font: var(--biz-text-body)/var(--biz-line-body) var(--biz-font-regular) !important; }
.phone #login-screen #login-step-returning[data-login-sheet] .login-sheet-otp .otp-mobile { display: block; direction: ltr; text-align: start; width: fit-content; color: var(--sheet-ink); font: var(--biz-text-section)/var(--biz-line-body) var(--biz-font-medium) !important; }
.phone #login-screen #login-step-returning[data-login-sheet] .login-sheet-otp .otp-form { margin: 0; }
.phone #login-screen #login-step-returning[data-login-sheet] .login-sheet-otp .otp-form > small { display: block; margin: var(--biz-space-2) 0; color: var(--sheet-muted); font: var(--biz-text-caption)/var(--biz-line-caption) var(--biz-font-regular) !important; }
.phone #login-screen #login-step-returning[data-login-sheet] .login-sheet-otp .otp-form > .primary-button { width: 100%; margin-top: var(--biz-space-4); background: var(--sheet-blue); color: #fff; }
.phone #login-screen #login-step-returning[data-login-sheet] .login-sheet-otp .resend-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--biz-space-2); margin: var(--biz-space-4) 0 0; color: var(--sheet-muted); font: var(--biz-text-caption)/var(--biz-line-caption) var(--biz-font-regular) !important; }
.phone #login-screen #login-step-returning[data-login-sheet] .login-sheet-otp .resend-row > button { min-height: var(--biz-touch); color: var(--sheet-blue); }
.phone #login-screen #login-step-returning[data-login-sheet] .login-sheet-otp .resend-row > button:disabled { color: var(--sheet-muted); }
.phone #login-screen #login-step-returning[data-login-sheet] .login-sheet-otp #otp-alternative { margin: var(--biz-space-2) 0 0; color: var(--sheet-muted); }
.phone #login-screen #login-step-returning[data-login-sheet] .login-welcome-copy,
.phone #login-screen #login-step-returning[data-login-sheet] .login-aura-backdrop,
.phone #login-screen #login-step-returning[data-login-sheet] .customer-login-form::after,
.phone #login-screen #login-step-returning[data-login-sheet] .new-account-entry::after { display: none !important; }
.phone #login-screen #login-step-returning[data-login-sheet] .customer-login-form {
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  animation: none;
}
.phone #login-screen #login-step-returning[data-login-sheet] .login-form-heading { margin: 0; }
.phone #login-screen #login-step-returning[data-login-sheet] .login-form-heading > span { display: none; }
.phone #login-screen #login-step-returning[data-login-sheet] #return-to-biometric-login {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  min-height: var(--sheet-control-height);
  margin: 0 0 var(--sheet-section-gap);
  padding: 12px 16px;
  border: 0;
  border-radius: 16px;
  background: var(--sheet-return-surface);
  color: var(--sheet-return-ink);
  box-shadow: none;
  text-align: start;
}
.phone #login-screen #login-step-returning[data-login-sheet] #return-to-biometric-login > span {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
}
.phone #login-screen #login-step-returning[data-login-sheet] #return-to-biometric-login svg { color: inherit; }
.phone #login-screen #login-step-returning[data-login-sheet] #return-to-biometric-login > span svg { width: 28px; height: 28px; }
.phone #login-screen #login-step-returning[data-login-sheet] #return-to-biometric-login b { color: inherit; font: 14px/24px "Vazirmatn Medium", Tahoma, sans-serif !important; }
.phone #login-screen #login-step-returning[data-login-sheet] #return-to-biometric-login .login-biometric-return-arrow { margin-inline-start: auto; flex: 0 0 20px; width: 20px; height: 20px; }
.phone #login-screen #login-step-returning[data-login-sheet] #return-to-biometric-login:hover { background: color-mix(in srgb, var(--sheet-ink) 4%, var(--sheet-return-surface)); }
.phone #login-screen #login-step-returning[data-login-sheet] #return-to-biometric-login:active { background: color-mix(in srgb, var(--sheet-ink) 8%, var(--sheet-return-surface)); }
.phone #login-screen #login-step-returning[data-login-sheet] .field { margin: 0 0 var(--sheet-section-gap); }
/* Field label, control, input and focus are owned by app-ui-standards.css. */
.phone #login-screen #login-step-returning[data-login-sheet] #customer-username-hint { display: none; }
.phone #login-screen #login-step-returning[data-login-sheet] .login-password-heading { min-height: 24px; margin: 0 0 8px; }
.phone #login-screen #login-step-returning[data-login-sheet] .login-password-heading button { min-height: 44px; margin-block: -10px; padding-block: 10px; line-height: 24px; }
.phone #login-screen #login-step-returning[data-login-sheet] .login-password-field { margin-bottom: 24px; }
.phone #login-screen #login-step-returning[data-login-sheet] :is(#customer-login-submit, #biometric-login-submit) {
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: 16px;
  background: var(--sheet-blue);
  color: #fff;
  box-shadow: 0 6px 14px #075cf01a;
  font: 14px/24px "Vazirmatn SemiBold", Tahoma, sans-serif !important;
}
.phone #login-screen #login-step-returning[data-login-sheet] #customer-login-submit span { font: inherit !important; color: inherit; }
.phone #login-screen #login-step-returning[data-login-sheet] .new-account-entry {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 24px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.phone #login-screen #login-step-returning[data-login-sheet] #start-onboarding {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 80px;
  padding: 16px;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--sheet-biometric-ink) 14%, transparent);
  border-radius: 20px;
  background: var(--sheet-paper);
  color: var(--sheet-ink);
  box-shadow: none;
  text-align: start;
  white-space: normal;
}
.phone #login-screen #login-step-returning[data-login-sheet] #start-onboarding .login-signup-icon {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--sheet-paper);
  color: inherit;
}
.phone #login-screen #login-step-returning[data-login-sheet] #start-onboarding .login-signup-icon svg { width: 24px; height: 24px; }
.phone #login-screen #login-step-returning[data-login-sheet] #start-onboarding .login-signup-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 4px; }
.phone #login-screen #login-step-returning[data-login-sheet] #start-onboarding .login-signup-copy strong { color: inherit; font: 14px/24px "Vazirmatn SemiBold", Tahoma, sans-serif !important; }
.phone #login-screen #login-step-returning[data-login-sheet] #start-onboarding .login-signup-copy small { color: inherit; font: 12px/20px "Vazirmatn Regular", Tahoma, sans-serif !important; }
.phone #login-screen #login-step-returning[data-login-sheet] #start-onboarding .login-signup-arrow { flex: 0 0 20px; width: 20px; height: 20px; margin-inline-start: auto; }
.phone #login-screen #login-step-returning[data-login-sheet] #start-onboarding:hover { background: color-mix(in srgb, var(--sheet-ink) 3%, var(--sheet-paper)); }
.phone #login-screen #login-step-returning[data-login-sheet] #start-onboarding:active { background: color-mix(in srgb, var(--sheet-ink) 6%, var(--sheet-paper)); }
.phone #login-screen #login-step-returning[data-login-sheet][data-auth-view="biometric"] {
  --sheet-header-height: 56px;
  --sheet-bottom-inset: calc(48px + env(safe-area-inset-bottom, 0px));
  --sheet-content-bottom: 0px;
}
.phone #login-screen #login-step-returning[data-login-sheet][data-auth-view="biometric"] .login-sheet-heading { display: none; }
/* Keep identity, the account switch, and the biometric action visually distinct. */
.phone #login-screen #login-step-returning[data-login-sheet][data-auth-view="biometric"] .login-welcome-copy {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content;
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
  margin: 0 0 32px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--sheet-biometric-ink) 12%, var(--sheet-paper));
  border-radius: 20px;
  background: var(--sheet-paper);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--sheet-blue) 4%, transparent);
  text-align: start;
}
.phone #login-screen #login-step-returning[data-login-sheet] #returning-title {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  text-align: start;
  color: var(--sheet-ink);
  font: var(--biz-text-caption)/var(--biz-line-caption) var(--biz-font-regular) !important;
}
.phone #login-screen #login-step-returning[data-login-sheet] #login-personal-context {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  column-gap: 6px;
  row-gap: 0;
  width: fit-content;
  min-height: 44px;
  margin: 0;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--sheet-biometric-ink) 12%, var(--sheet-paper));
  border-radius: 12px;
  background: var(--sheet-paper);
  box-shadow: none;
  color: var(--sheet-biometric-ink);
  text-align: start;
}
.phone #login-screen #login-step-returning[data-login-sheet] #login-personal-business {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  color: var(--sheet-ink);
  white-space: normal;
  overflow-wrap: anywhere;
  font: var(--biz-text-section)/var(--biz-line-body) var(--biz-font-semibold) !important;
}
.phone #login-screen #login-step-returning[data-login-sheet] #login-personal-context .login-account-switch-label { color: var(--sheet-biometric-ink); font: 12px/24px "Vazirmatn Medium", Tahoma, sans-serif !important; }
.phone #login-screen #login-step-returning[data-login-sheet] #login-personal-context svg { width: 14px; height: 14px; color: var(--sheet-biometric-ink); }
.phone #login-screen #login-step-returning[data-login-sheet] #login-personal-context:hover { background: var(--sheet-biometric-surface); }
.phone #login-screen #login-step-returning[data-login-sheet] #login-personal-context:active { background: color-mix(in srgb, var(--sheet-biometric-ink) 10%, var(--sheet-paper)); }
.phone #login-screen #login-step-returning[data-login-sheet] .login-biometric-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  border: 0;
  text-align: center;
}
.phone #login-screen #login-step-returning[data-login-sheet] .login-biometric-intro > span {
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  margin: 0 0 12px;
  border: 1px solid color-mix(in srgb, var(--sheet-biometric-ink) 14%, transparent);
  border-radius: 28px;
  background: var(--sheet-biometric-surface);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--sheet-biometric-surface) 45%, transparent);
  color: var(--sheet-biometric-ink);
}
.phone #login-screen #login-step-returning[data-login-sheet] .login-biometric-intro > span svg { width: 44px; height: 44px; stroke-width: 1.5; }
.phone #login-screen #login-step-returning[data-login-sheet] .login-biometric-intro h2 { display: block; margin: 0; color: var(--sheet-ink); font: 22px/32px "Vazirmatn SemiBold", Tahoma, sans-serif !important; }
.phone #login-screen #login-step-returning[data-login-sheet] .login-biometric-intro p { margin: 0; color: var(--sheet-muted); font: 12px/24px "Vazirmatn Regular", Tahoma, sans-serif !important; }
.phone #login-screen #login-step-returning[data-login-sheet] #use-password-login {
  min-height: 48px;
  margin: 12px 0 0;
  padding: 12px 16px;
  gap: 8px;
  border: 1px solid var(--sheet-line);
  border-radius: 16px;
  background: var(--sheet-paper);
  box-shadow: none;
  color: var(--sheet-ink);
}
.phone #login-screen #login-step-returning[data-login-sheet] #use-password-login > svg:first-child { display: block; flex: 0 0 20px; width: 20px; height: 20px; color: var(--sheet-muted); }
.phone #login-screen #login-step-returning[data-login-sheet] #use-password-login strong { color: inherit; font: 14px/24px "Vazirmatn Medium", Tahoma, sans-serif !important; }
.phone #login-screen #login-step-returning[data-login-sheet] #use-password-login:hover { background: var(--sheet-field); }
.phone #login-screen #login-step-returning[data-login-sheet] .recognized-user-actions { margin: 16px 0 0; padding: 16px 0 0; border: 0; border-top: 1px solid var(--sheet-line); border-radius: 0; background: transparent; box-shadow: none; }
.phone #login-screen #login-step-returning[data-login-sheet] .recognized-user-actions { align-items: baseline; column-gap: 8px; }
.phone #login-screen #login-step-returning[data-login-sheet] .recognized-user-actions > span,
.phone #login-screen #login-step-returning[data-login-sheet] #use-another-account { line-height: 24px; }
/* The identity card now owns account switching on the biometric view. */
.phone #login-screen #login-step-returning[data-login-sheet][data-auth-view="biometric"] .recognized-user-actions { display: none !important; }
.phone #login-screen #login-step-returning[data-login-sheet] button:focus-visible { outline: 3px solid #71adff; outline-offset: 3px; }
.phone #login-screen #login-step-returning[data-login-sheet] .login-sheet-heading h2:focus { outline: none; }
html[data-color-scheme="dark"] .phone #login-screen #login-step-returning[data-login-sheet] {
  --sheet-paper: #151e2f;
  --sheet-ink: #edf3ff;
  --sheet-muted: #a6b3c9;
  --sheet-line: #33415b;
  --sheet-field: #1e2a40;
  --sheet-blue: #367dff;
  --sheet-biometric-surface: #203352;
  --sheet-return-surface: #292e38;
  --sheet-return-ink: #c2c6cc;
  --sheet-biometric-ink: #9fc5ff;
  background-color: #082359;
  background-image: linear-gradient(155deg, #071b3d, #103878 48%, #111e50);
}
html[data-color-scheme="dark"] .phone #login-screen #login-step-returning[data-login-sheet] .login-brand-aura { opacity: .55; }
html.app-keyboard-open .phone #login-screen #login-step-returning[data-login-sheet] .login-entry-sheet { max-height: calc(100% - var(--login-safe-top)); border-radius: 24px 24px 0 0; }
html.app-keyboard-open .phone #login-screen #login-step-returning[data-login-sheet] .login-brand-scene { opacity: 0; }
@media (max-width: 767px) {
  /* Paint the same animated scene beneath the status bar, reserving the safe
   * inset for the brand and controls instead of a separate white strip. */
  .phone:has(#login-screen.visible #login-step-returning:is(.active, [data-sheet-view="otp"])[data-login-sheet]) {
    --app-chrome-color: #0838a5;
    padding-top: 0;
    background: var(--app-chrome-color);
  }
  html[data-color-scheme="dark"] .phone:has(#login-screen.visible #login-step-returning:is(.active, [data-sheet-view="otp"])[data-login-sheet]) { --app-chrome-color: #082359; }
  .phone:has(#login-screen.visible #login-step-returning:is(.active, [data-sheet-view="otp"])[data-login-sheet]) > .app-status-surface { display: none; }
  .phone #login-screen #login-step-returning[data-login-sheet] { --login-safe-top: var(--app-top-inset); }
  /* On the real phone the former 48px + 34px inset excluded 82px from the
   * scroller, at rest and above the keyboard. Let content reach the sheet edge
   * and reserve only its final row's clearance inside the scrolling content. */
  .phone #login-screen #login-step-returning[data-login-sheet][data-auth-view] {
    --sheet-bottom-inset: 0px;
    --sheet-content-bottom: max(16px, var(--app-safe-bottom));
  }
  /* The native keyboard's transparent surround samples the document canvas,
   * not just the sheet. Continue the sheet surface through that entire area. */
  html.app-keyboard-open .phone:has(#login-screen.visible #login-step-returning:is(.active, [data-sheet-view="otp"])[data-login-sheet]) {
    --app-chrome-color: #fff;
  }
  html.app-keyboard-open[data-color-scheme="dark"] .phone:has(#login-screen.visible #login-step-returning:is(.active, [data-sheet-view="otp"])[data-login-sheet]) {
    --app-chrome-color: #151e2f;
  }
  html.app-keyboard-open .phone #login-screen #login-step-returning[data-login-sheet] {
    background: var(--sheet-paper);
  }
}
@container (max-width: 350px) {
  .phone #login-screen #login-step-returning[data-login-sheet] :is(.login-sheet-content, .login-sheet-chrome) { --sheet-gutter: 24px; }
  .phone #login-screen #login-step-returning[data-login-sheet][data-auth-view="biometric"] .login-welcome-copy { grid-template-columns: minmax(0, 1fr) max-content; column-gap: 8px; padding: 12px; }
  .phone #login-screen #login-step-returning[data-login-sheet] #login-personal-context { column-gap: 4px; padding: 0 6px; }
  .phone #login-screen #login-step-returning[data-login-sheet] #login-personal-context .login-account-switch-label { font-size: 11px !important; }
}
@container (max-height: 540px) {
  .phone #login-screen #login-step-returning[data-login-sheet][data-sheet-state="open"] .login-hero-profile { gap: 4px; }
  .phone #login-screen #login-step-returning[data-login-sheet][data-sheet-state="open"] .login-hero-avatar { width: 40px; height: 40px; }
  .phone #login-screen #login-step-returning[data-login-sheet][data-sheet-state="open"] .login-hero-avatar svg { width: 28px; height: 28px; }
  .phone #login-screen #login-step-returning[data-login-sheet][data-sheet-state="open"] .login-hero-name { font-size: 20px !important; line-height: 28px !important; }
  .phone #login-screen #login-step-returning[data-login-sheet][data-sheet-state="open"] .login-hero-identifier { font-size: 12px !important; line-height: 20px !important; }
  .phone #login-screen #login-step-returning[data-login-sheet] .login-entry-sheet { max-height: calc(100% - 100px - var(--login-safe-top)); }
  .phone #login-screen #login-step-returning[data-login-sheet][data-sheet-state="open"] .login-brand-lockup { flex-direction: row; justify-content: center; gap: 12px; transform: translate(-50%, -50%) scale(.85); }
  .phone #login-screen #login-step-returning[data-login-sheet][data-sheet-state="open"] .login-brand-tagline { display: none; }
  .phone #login-screen #login-step-returning[data-login-sheet][data-sheet-state="open"] .login-brand-symbol { width: 72px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .phone #login-screen #login-step-returning[data-login-sheet] *,
  .phone #login-screen #login-step-returning[data-login-sheet] *::before,
  .phone #login-screen #login-step-returning[data-login-sheet] *::after { animation: none !important; transition: none !important; }
}
@keyframes login-wing-left { from { opacity: 0; transform: translate(-24px, 16px) rotate(-18deg) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes login-wing-right { from { opacity: 0; transform: translate(24px, -12px) rotate(18deg) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes login-copy-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes login-aura-flow {
  from { transform: var(--aura-start); }
  to { transform: var(--aura-end); }
}