#login-screen.login-shell {
  --login-deep: #071b39;
  --login-mid: #0a2e59;
  --login-ink: #102b4a;
  position: relative;
  isolation: isolate;
  display: grid !important;
  place-items: center !important;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  padding: 7vh 7vw !important;
  background:
    radial-gradient(circle at 78% 20%, rgba(116, 193, 255, 0.42), transparent 37%),
    radial-gradient(circle at 16% 91%, rgba(59, 89, 229, 0.25), transparent 44%),
    linear-gradient(135deg, var(--login-deep) 0%, var(--login-mid) 49%, #7798b7 128%) !important;
  color: #fff;
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
}

#login-screen.login-shell.hidden {
  display: none !important;
}

#login-screen.login-shell::before {
  content: "";
  position: absolute;
  z-index: -2;
  width: 688px;
  aspect-ratio: 1;
  inset: auto;
  left: -216px;
  top: -281px;
  border: 1px solid rgba(163, 213, 255, 0.3);
  border-radius: 50%;
  background: radial-gradient(circle at 72% 72%, rgba(66, 139, 220, 0.12), rgba(21, 70, 132, 0.045) 48%, rgba(4, 23, 48, 0.015) 72%);
  box-shadow:
    inset -105px -76px 155px rgba(48, 127, 217, 0.09),
    32px 42px 120px rgba(10, 53, 110, 0.08);
  opacity: 1;
  -webkit-mask-image: none;
  mask-image: none;
  transform: none;
  transform-origin: center;
  pointer-events: none;
}

#login-screen.login-shell::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 58%, rgba(190, 229, 255, 0.07) 58.1% 58.22%, transparent 58.35%),
    radial-gradient(circle at 52% 52%, rgba(255, 255, 255, 0.055), transparent 34%);
}

#login-screen .login-stage {
  width: 86vw !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
  align-items: center;
}

.login-crystal-intro {
  position: relative;
  width: min(650px, 100%);
  min-height: 570px;
  justify-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  animation: login-rise 620ms cubic-bezier(.22, 1, .36, 1) both;
}

.login-crystal-intro::after {
  content: "ADS";
  position: absolute;
  left: 21%;
  bottom: -25%;
  color: rgba(111, 179, 247, 0.008);
  -webkit-text-stroke: 1.1px rgba(146, 198, 255, 0.088);
  font-size: clamp(170px, 18vw, 320px);
  font-weight: 800;
  letter-spacing: -0.12em;
  line-height: 1;
  pointer-events: none;
}

.login-crystal-copy,
.login-crystal-values {
  position: relative;
  z-index: 1;
}

.login-crystal-eyebrow,
.login-card-eyebrow {
  margin: 0;
  font-size: 13px;
  font-weight: 760;
  letter-spacing: .24em;
}

.login-crystal-eyebrow {
  color: rgba(218, 236, 255, 0.76);
}

.login-crystal-copy h1 {
  margin: 14px 0 0;
  color: #fff;
  font-size: clamp(54px, 5.3vw, 88px);
  font-weight: 780;
  letter-spacing: -0.065em;
  line-height: .94;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 700 !important;
}

html body #login-screen .login-crystal-copy h1 {
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 700 !important;
}

.login-crystal-copy h1 span {
  display: block;
  white-space: nowrap;
  width: 118%;
  transform: scaleX(.85);
  transform-origin: left center;
}

.login-crystal-description {
  margin: 26px 0 0;
  color: rgba(216, 233, 252, 0.76);
  font-size: 17px;
  letter-spacing: .035em;
}

html body #login-screen .login-crystal-description {
  font-size: 17px !important;
  letter-spacing: .04em !important;
}

.login-crystal-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 40px;
}

.login-crystal-values article {
  min-height: 102px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 16px 18px;
  border: 1px solid rgba(207, 232, 255, 0.22);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(182, 218, 255, 0.13), rgba(69, 118, 193, 0.06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.login-crystal-values i {
  color: rgba(188, 218, 250, 0.58);
  font-size: 10px;
  font-style: normal;
  letter-spacing: .22em;
}

.login-crystal-values strong {
  margin-top: 11px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  letter-spacing: .08em;
}

.login-crystal-values span {
  margin-top: 7px;
  color: rgba(205, 226, 249, 0.68);
  font-size: 12px;
}

#login-screen .login-card {
  position: relative;
  width: min(480px, 100%) !important;
  height: 570px !important;
  min-height: 570px !important;
  max-height: 570px !important;
  box-sizing: border-box !important;
  justify-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 42px 36px !important;
  border: 1px solid rgba(255, 255, 255, 0.68) !important;
  border-radius: 34px !important;
  background: linear-gradient(145deg, rgba(237, 249, 255, 0.68), rgba(189, 225, 248, 0.52)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -1px 0 rgba(119, 178, 222, 0.24),
    0 32px 86px rgba(0, 20, 54, 0.22) !important;
  backdrop-filter: blur(28px) saturate(155%);
  -webkit-backdrop-filter: blur(28px) saturate(155%);
  color: var(--login-ink);
  text-align: left !important;
  animation: login-rise 700ms 70ms cubic-bezier(.22, 1, .36, 1) both;
}

#login-screen .login-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 14px -22px -22px 22px;
  border: 1px solid rgba(190, 230, 255, 0.28);
  border-radius: 34px;
  background: rgba(124, 194, 236, 0.08);
  transform: rotate(2.2deg);
  pointer-events: none;
}

#login-screen .login-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 32px;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.24), transparent 34% 71%, rgba(108, 198, 244, 0.1));
  mix-blend-mode: screen;
}

#login-screen .login-card > * {
  position: relative;
  z-index: 1;
}

#login-screen .login-card .auth-brand-lockup {
  width: 224px !important;
  height: auto !important;
  max-width: 72%;
  margin: 0 0 36px !important;
  align-self: flex-start;
  object-fit: contain;
  filter: none !important;
}

.login-card-eyebrow {
  color: #28567e;
  font-size: 11px;
}

#login-screen .login-welcome {
  margin: 10px 0 0 !important;
  color: #102e50 !important;
  font-size: 32px !important;
  font-weight: 760 !important;
  letter-spacing: -0.045em !important;
  line-height: 1.15 !important;
}

#login-screen .login-tagline {
  margin: 8px 0 28px !important;
  color: rgba(32, 76, 116, 0.62) !important;
  font-size: 12px !important;
  letter-spacing: .13em !important;
}

#login-screen .login-card .stack {
  display: grid;
  gap: 23px;
  margin-top: 0 !important;
}

#login-screen .login-card label {
  display: grid;
  gap: 7px;
  color: #173754;
  font-size: 13px;
  font-weight: 600;
}

#login-screen #login-form > label + label {
  margin-top: 7px !important;
}

.login-field-wrap {
  position: relative;
  display: block;
}

.login-field-wrap svg {
  position: absolute;
  z-index: 2;
  left: 15px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  fill: none;
  stroke: #6989a8;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

#login-screen .form-error {
  min-height: 18px;
  margin: -4px 0 -10px;
  color: #b42318;
  font-size: 12px;
  text-align: center;
}

#login-screen .login-security {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 24px;
  color: rgba(32, 76, 116, 0.62);
  font-size: 12px;
}

#login-screen .login-security::before,
#login-screen .login-security::after {
  content: "";
  width: 44px;
  height: 1px;
  background: rgba(57, 120, 171, 0.22);
}

#login-screen .login-security .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c96a;
  box-shadow: 0 0 0 5px rgba(34, 201, 106, 0.1);
}

@layer apple-proportions {
  #login-screen #login-form .login-field-wrap input {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 15px 0 45px !important;
    border: 1px solid rgba(115, 163, 201, 0.42) !important;
    border-radius: 14px !important;
    outline: none !important;
    background: rgba(244, 251, 255, 0.54) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
    color: #102e50 !important;
    font: inherit !important;
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease !important;
  }

  #login-screen #login-form .login-field-wrap input::placeholder {
    color: rgba(52, 91, 126, 0.5) !important;
  }

  #login-screen #login-form .login-field-wrap input:focus {
    border-color: #2294ef !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 0 0 4px rgba(30, 145, 236, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  }

  #login-screen .login-card button.primary {
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    margin-top: 9px !important;
    border: 1px solid rgba(0, 122, 239, 0.42) !important;
    border-radius: 14px !important;
    background: linear-gradient(100deg, #1ba8ff, #0769e9) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 13px 26px rgba(0, 103, 219, 0.22) !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 720 !important;
    cursor: pointer !important;
    transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease !important;
  }

  #login-screen .login-card button.primary:hover {
    filter: brightness(1.055) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 16px 30px rgba(0, 103, 219, 0.28) !important;
  }

  #login-screen .login-card button.primary:active {
    transform: scale(.988) !important;
  }
}

@keyframes login-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1100px) {
  #login-screen.login-shell {
    padding: 5vh 4.5vw !important;
  }

  .login-crystal-intro {
    width: min(560px, 100%);
  }

  .login-crystal-copy h1 {
    font-size: clamp(48px, 5.4vw, 68px);
  }
}

@media (max-width: 900px) {
  #login-screen.login-shell {
    padding: 28px 20px !important;
    background:
      radial-gradient(circle at 70% 18%, rgba(116, 193, 255, 0.43), transparent 45%),
      linear-gradient(145deg, var(--login-deep), #174675 72%, #7296b5 135%);
  }

  #login-screen .login-stage {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .login-crystal-intro {
    display: none;
  }

  #login-screen .login-card {
    height: auto !important;
    max-height: none !important;
    width: min(460px, calc(100vw - 40px)) !important;
    max-width: none !important;
  }
}

@media (max-width: 540px) {
  #login-screen.login-shell {
    padding: 16px !important;
  }

  #login-screen .login-card {
    width: calc(100vw - 32px) !important;
    max-width: 420px !important;
    min-height: auto;
    padding: 34px 24px 28px !important;
    border-radius: 28px !important;
  }

  #login-screen .login-card::before {
    inset: 10px -10px -12px 12px;
    border-radius: 28px;
  }

  #login-screen .login-card .auth-brand-lockup {
    width: 205px !important;
    margin-bottom: 30px !important;
  }

  #login-screen .login-welcome {
    font-size: 28px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-crystal-intro,
  #login-screen .login-card {
    animation: none;
  }

  #login-screen .login-card input,
  #login-screen .login-card button.primary {
    transition: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  #login-screen .login-card {
    background: #d9edfa !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}