.login-shell {
  --login-ink: #07111f;
  --login-blue: #155eef;
  --login-cyan: #3bd6ff;
  min-height: 100vh;
  grid-template-columns: minmax(520px, 1.2fr) minmax(430px, .8fr);
  background: #06101e;
}

.login-hero {
  isolation: isolate;
  padding: clamp(30px, 5vh, 64px) clamp(38px, 5vw, 76px);
  background:
    linear-gradient(115deg, rgba(6, 16, 30, .98), rgba(8, 31, 63, .92)),
    #07182d;
}

.login-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .32;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom right, #000 25%, transparent 85%);
}

.login-hero::after {
  width: 680px;
  height: 680px;
  right: -230px;
  bottom: -300px;
  border: 0;
  border-radius: 50%;
  transform: none;
  z-index: -1;
  background: radial-gradient(circle, rgba(21,94,239,.55), rgba(59,214,255,.08) 46%, transparent 68%);
  filter: blur(3px);
}

.login-brand .logo-mark {
  width: 52px;
  height: 52px;
  border-radius: 17px;
  background: linear-gradient(145deg, #57ddff 0%, #2478ff 52%, #1741ad 100%);
  box-shadow: 0 16px 42px rgba(27, 101, 238, .4), inset 0 1px rgba(255,255,255,.4);
}

.login-brand strong { font-size: 18px; letter-spacing: -.25px; }
.login-brand span { font-size: 12px; letter-spacing: .04em; }
.login-hero-content { max-width: 760px; }

.login-eyebrow {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid rgba(117, 196, 255, .22);
  border-radius: 999px;
  background: rgba(49, 130, 246, .09);
  color: #b9dbff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}

.login-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #42e6ad;
  box-shadow: 0 0 0 5px rgba(66,230,173,.1);
}

.login-hero-content h1 {
  max-width: 700px;
  margin: 26px 0 22px;
  font-size: clamp(44px, min(5.2vw, 8vh), 76px);
  line-height: .99;
  letter-spacing: -.055em;
}

.login-hero-content h1 span {
  color: transparent;
  background: linear-gradient(100deg, #fff 5%, #85d8ff 52%, #78a8ff);
  background-clip: text;
  -webkit-background-clip: text;
}

.login-lead {
  max-width: 590px;
  margin: 0;
  color: rgba(230,241,255,.68);
  font-size: 16px;
  line-height: 1.75;
}

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

.login-benefit {
  min-height: 130px;
  padding: 18px;
  border: 1px solid rgba(163,209,255,.13);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  box-shadow: inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
}

.login-benefit-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  border-radius: 11px;
  background: rgba(61,146,255,.14);
  color: #9ed9ff;
}

.login-benefit-icon svg { width: 18px; height: 18px; }
.login-benefit strong { display: block; margin-bottom: 5px; font-size: 14px; }
.login-benefit span { color: rgba(226,239,255,.55); font-size: 12px; line-height: 1.5; }

.login-footer {
  display: flex;
  gap: 8px;
  align-items: center;
  color: rgba(223,237,255,.42);
}

.login-footer::before {
  content: "";
  width: 18px;
  height: 1px;
  background: rgba(255,255,255,.25);
}

.login-panel {
  position: relative;
  padding: clamp(28px, 5vh, 68px) clamp(34px, 5vw, 76px);
  background:
    radial-gradient(circle at 100% 0, rgba(37,99,235,.07), transparent 32%),
    #f7f9fc;
}

.login-card {
  width: min(460px, 100%);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.login-card-heading { margin-bottom: 32px; }
.login-card-kicker {
  display: block;
  margin-bottom: 12px;
  color: var(--login-blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.login-card h2 {
  margin-bottom: 10px;
  color: var(--login-ink);
  font-size: clamp(31px, 3vw, 40px);
  letter-spacing: -.045em;
}

.login-card .subtitle { max-width: 420px; margin: 0; font-size: 14px; }
.login-card .form-group { margin-bottom: 20px; }
.login-card .form-group label { margin-bottom: 9px; color: #26354d; font-size: 12px; }

.login-card .input-wrap {
  min-height: 58px;
  padding: 0 16px;
  border-color: #dbe2ec;
  border-radius: 15px;
  box-shadow: 0 2px 3px rgba(15,23,42,.025);
}

.login-card .input-wrap:focus-within {
  border-color: rgba(21,94,239,.62);
  box-shadow: 0 0 0 4px rgba(21,94,239,.09), 0 9px 24px rgba(21,94,239,.07);
}

.login-card .input-icon {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  margin-right: 11px;
  color: #8a9aaf;
}

.login-card .input-icon svg { width: 18px; height: 18px; }
.login-card .input-wrap input { padding: 17px 2px; font-size: 14px; }

.password-toggle {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #8090a6;
}

.password-toggle:hover { background: #f0f4f9; color: #334155; }
.password-toggle svg { width: 18px; height: 18px; pointer-events: none; }
.login-card .form-row { margin: 4px 0 25px; }
.login-card .form-row a { font-size: 12px; }

.login-submit {
  min-height: 56px;
  border-radius: 15px;
  background: linear-gradient(110deg, #164fd3, #1d70f5);
  box-shadow: 0 14px 30px rgba(21,94,239,.23);
  font-size: 14px;
}

.login-submit:disabled { cursor: wait; opacity: .7; transform: none; }
.login-secure-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e3e8f0;
  color: #758398;
  font-size: 11px;
  line-height: 1.55;
}

.login-secure-note svg { width: 17px; min-width: 17px; color: #14a06f; }
.login-mobile-brand { display: none; }

@media (min-width: 1041px) and (max-height: 760px) {
  .login-shell { grid-template-columns: minmax(580px, 1.18fr) minmax(420px, .82fr); }

  .login-hero {
    padding: 26px clamp(38px, 4.6vw, 62px);
    gap: 18px;
  }

  .login-brand .logo-mark {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 14px;
  }

  .login-brand strong { font-size: 16px; }
  .login-brand span { font-size: 11px; }
  .login-eyebrow { padding: 6px 10px; font-size: 11px; }

  .login-hero-content h1 {
    max-width: 640px;
    margin: 14px 0 14px;
    font-size: clamp(42px, 7.1vh, 54px);
    line-height: 1;
  }

  .login-lead {
    max-width: 560px;
    font-size: 13px;
    line-height: 1.55;
  }

  .login-benefits {
    gap: 10px;
    margin-top: 20px;
  }

  .login-benefit {
    min-height: 88px;
    padding: 12px 14px;
    border-radius: 16px;
  }

  .login-benefit-icon {
    width: 28px;
    height: 28px;
    margin-bottom: 8px;
    border-radius: 9px;
  }

  .login-benefit-icon svg { width: 15px; height: 15px; }
  .login-benefit strong { margin-bottom: 2px; font-size: 12px; }
  .login-benefit span { font-size: 10px; line-height: 1.35; }
  .login-footer { font-size: 10px; }

  .login-panel { padding: 24px clamp(42px, 5vw, 68px); }
  .login-card-heading { margin-bottom: 20px; }
  .login-card-kicker { margin-bottom: 7px; font-size: 9px; }
  .login-card h2 { margin-bottom: 6px; font-size: 32px; }
  .login-card .subtitle { font-size: 12px; line-height: 1.5; }
  .login-card .form-group { margin-bottom: 13px; }
  .login-card .form-group label { margin-bottom: 6px; font-size: 10px; }

  .login-card .input-wrap {
    min-height: 48px;
    border-radius: 13px;
  }

  .login-card .input-wrap input { padding: 13px 2px; font-size: 12px; }
  .login-card .form-row { margin: 2px 0 15px; }
  .login-card .form-row a, .login-card .check { font-size: 10px; }

  .login-submit {
    min-height: 48px;
    border-radius: 13px;
    font-size: 12px;
  }

  .login-secure-note {
    gap: 9px;
    margin-top: 16px;
    padding-top: 14px;
    font-size: 9px;
    line-height: 1.45;
  }

  .login-secure-note svg { width: 14px; min-width: 14px; }
}

@media (max-width: 1040px) {
  .login-shell { grid-template-columns: 1fr; background: #f7f9fc; }
  .login-panel { min-height: 100vh; padding: 28px; }
  .login-card {
    padding: 30px;
    border: 1px solid #e3e9f1;
    border-radius: 24px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 24px 70px rgba(15,23,42,.11);
  }
  .login-mobile-brand { display: flex; margin-bottom: 34px; color: var(--login-ink); }
  .login-mobile-brand .brand span { color: #708197; }
}

@media (max-width: 520px) {
  .login-panel { padding: 0; background: #fff; }
  .login-card { min-height: 100vh; padding: 28px 22px; border: 0; border-radius: 0; box-shadow: none; }
  .login-card-heading { margin-top: auto; }
  .login-secure-note { margin-bottom: auto; }
}