:root {
  --login-night: #0b3343;
  --login-teal: #11667e;
  --login-sky: #4bbbd5;
  --login-pink: #e83f91;
  --login-ink: #143542;
  --login-muted: #708893;
  --login-line: #d5e7ed;
  --login-ease: cubic-bezier(.16, 1, .3, 1);
}

body {
  min-width: 320px;
  background: #edf6f8;
}

.shell {
  grid-template-columns: minmax(520px, 1.12fr) minmax(460px, .88fr);
  background: #edf6f8;
}

.brand-panel {
  min-height: 100dvh;
  padding: clamp(40px, 5vw, 72px) clamp(38px, 5.6vw, 86px) clamp(34px, 4.5vw, 64px);
  color: #fff;
  background:
    linear-gradient(145deg, rgba(8, 45, 60, .15), transparent 42%),
    linear-gradient(135deg, var(--login-night) 0%, #105c74 48%, #2d9fbc 100%);
}

/* A soft halo replaces the previous grid texture. */
.brand-panel::before {
  width: min(66vw, 920px);
  height: min(66vw, 920px);
  inset: auto auto -46% -24%;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 48%, rgba(109, 213, 234, .14) 48.3%, transparent 49%),
    radial-gradient(circle at 50% 50%, rgba(64, 184, 211, .14) 0%, transparent 64%);
  background-size: auto;
  mask-image: none;
  -webkit-mask-image: none;
  transform-origin: center;
  animation: breathe-ring 10s ease-in-out infinite alternate;
}

.brand-panel::after {
  z-index: 0;
  width: min(54vw, 760px);
  height: min(54vw, 760px);
  left: auto;
  right: -29%;
  top: -32%;
  background: radial-gradient(circle, rgba(232, 63, 145, .34) 0%, rgba(232, 63, 145, .11) 31%, transparent 69%);
  filter: blur(3px);
  animation: pink-drift 12s ease-in-out infinite alternate;
}

.brand-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.scene-glow,
.scene-orbit {
  position: absolute;
  display: block;
  border-radius: 50%;
}

.scene-glow-pink {
  width: 190px;
  height: 190px;
  top: 23%;
  right: 10%;
  background: radial-gradient(circle, rgba(240, 91, 157, .28), transparent 69%);
  filter: blur(2px);
  animation: glow-float 9s ease-in-out infinite alternate;
}

.scene-glow-sky {
  width: 310px;
  height: 310px;
  left: -12%;
  bottom: 6%;
  background: radial-gradient(circle, rgba(108, 220, 238, .29), transparent 68%);
  animation: glow-float 12s ease-in-out -3s infinite alternate-reverse;
}

.scene-orbit {
  border: 1px solid rgba(255, 255, 255, .17);
}

.scene-orbit::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  top: 17%;
  right: 11%;
  border-radius: 50%;
  background: #f36aa8;
  box-shadow: 0 0 0 6px rgba(243, 106, 168, .13), 0 0 25px rgba(243, 106, 168, .55);
}

.scene-orbit-large {
  width: 430px;
  height: 430px;
  right: -200px;
  top: 18%;
  animation: orbit-turn 30s linear infinite;
}

.scene-orbit-small {
  width: 180px;
  height: 180px;
  left: 9%;
  top: 30%;
  opacity: .58;
  animation: orbit-turn 24s linear -8s infinite reverse;
}

.scene-flow {
  position: absolute;
  width: 112%;
  height: 48%;
  left: -6%;
  bottom: 1%;
  overflow: visible;
  opacity: .42;
}

.scene-flow path {
  fill: none;
  stroke: rgba(255, 255, 255, .52);
  stroke-width: 1.2;
  stroke-dasharray: 6 12;
  vector-effect: non-scaling-stroke;
  animation: flow-dash 18s linear infinite;
}

.scene-flow path + path {
  opacity: .45;
  animation-duration: 25s;
  animation-direction: reverse;
}

.brand-mark,
.brand-copy,
.brand-foot {
  position: relative;
  z-index: 3;
}

.brand-mark {
  align-self: flex-start;
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: reveal-down .7s var(--login-ease) both;
}

.brand-mark img {
  width: 154px;
  filter: url("#login-logo-contrast") drop-shadow(0 5px 12px rgba(4, 32, 44, .18));
}

.login-logo-filter {
  position: absolute;
  pointer-events: none;
}

.brand-mark .wordmark {
  color: var(--login-night);
}

.brand-copy {
  max-width: 480px;
  margin-top: clamp(54px, 10vh, 110px);
  margin-bottom: auto;
  animation: reveal-up .8s .08s var(--login-ease) both;
}

.brand-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 19px;
  color: rgba(255, 255, 255, .72);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .17em;
}

.brand-kicker i,
.card-head .eyebrow i {
  display: inline-block;
  width: 22px;
  height: 2px;
  border-radius: 99px;
  background: var(--login-pink);
  box-shadow: 0 0 16px rgba(232, 63, 145, .55);
}

.brand-copy h1 {
  color: #fff;
  font-size: clamp(42px, 4.4vw, 66px);
  font-weight: 760;
  letter-spacing: -.055em;
  line-height: 1.09;
  text-shadow: 0 6px 30px rgba(4, 32, 44, .2);
}

.brand-copy h1 em {
  color: #ff82b9;
  font-style: normal;
  font-weight: inherit;
}

.brand-copy p {
  max-width: 410px;
  margin-top: 23px;
  color: rgba(255, 255, 255, .76);
  font-size: 15px;
  font-weight: 470;
  line-height: 1.75;
}

.brand-foot {
  margin-top: 42px;
  gap: 11px;
  color: rgba(255, 255, 255, .61);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
  animation: reveal-up .8s .18s var(--login-ease) both;
}

.brand-foot strong {
  color: rgba(255, 255, 255, .85);
  font-weight: 650;
}

.brand-foot-icon {
  display: grid;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
}

.brand-foot-icon svg {
  width: 16px;
  height: 16px;
}

.form-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 54px clamp(32px, 5vw, 76px);
  background:
    radial-gradient(circle at 83% 9%, rgba(232, 63, 145, .09), transparent 24%),
    radial-gradient(circle at 9% 88%, rgba(75, 187, 213, .16), transparent 31%),
    linear-gradient(155deg, #f7fbfc 0%, #ecf5f7 100%);
}

.form-panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 360px;
  height: 360px;
  right: -190px;
  bottom: -185px;
  border: 1px solid rgba(30, 133, 160, .13);
  border-radius: 50%;
  box-shadow: 0 0 0 55px rgba(65, 173, 199, .035), 0 0 0 110px rgba(65, 173, 199, .025);
  animation: form-ring 11s ease-in-out infinite alternate;
}

.form-atmosphere {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.form-atmosphere span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(1px);
}

.form-atmosphere span:first-child {
  width: 160px;
  height: 160px;
  top: 8%;
  right: 7%;
  border: 1px solid rgba(232, 63, 145, .13);
  animation: glow-float 10s ease-in-out infinite alternate;
}

.form-atmosphere span:last-child {
  width: 12px;
  height: 12px;
  left: 11%;
  bottom: 17%;
  background: rgba(232, 63, 145, .48);
  box-shadow: 0 0 0 10px rgba(232, 63, 145, .06), 0 0 30px rgba(232, 63, 145, .23);
  animation: status-pulse 4s ease-in-out infinite;
}

.login-card {
  position: relative;
  z-index: 2;
  max-width: 430px;
  overflow: hidden;
  padding: 43px 42px 34px;
  border: 1px solid rgba(255, 255, 255, .86);
  border-radius: 25px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 30px 70px -34px rgba(11, 51, 67, .36), 0 8px 24px -18px rgba(11, 51, 67, .18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: card-arrive .75s .08s var(--login-ease) both;
}

.login-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--login-pink) 0%, #f27bb1 28%, var(--login-sky) 72%, #1d829f 100%);
}

.card-head {
  margin-bottom: 30px;
}

.card-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 11px;
  color: #2184a1;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .16em;
}

.card-head .eyebrow i {
  width: 17px;
}

.card-head h2 {
  color: var(--login-ink);
  font-size: 27px;
  font-weight: 780;
  letter-spacing: -.045em;
  line-height: 1.3;
}

.card-head p {
  margin-top: 8px;
  color: var(--login-muted);
  font-size: 13px;
  line-height: 1.65;
}

.field {
  margin-bottom: 17px;
}

.field label {
  margin-bottom: 8px;
  color: #345764;
  font-size: 12px;
  font-weight: 720;
}

.input-shell {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 52px;
  overflow: hidden;
  border: 1px solid #ccdee5;
  border-radius: 14px;
  background: rgba(246, 250, 251, .92);
  transition: border-color .2s var(--login-ease), box-shadow .2s var(--login-ease), background-color .2s var(--login-ease), transform .2s var(--login-ease);
}

.input-shell:hover {
  border-color: #83bfd0;
  background: #fff;
}

.input-shell:focus-within {
  border-color: #238aaa;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(35, 138, 170, .12), 0 8px 22px -18px rgba(20, 84, 104, .42);
  transform: translateY(-1px);
}

.input-icon {
  position: absolute;
  z-index: 2;
  left: 15px;
  top: 50%;
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  color: #79a4b2;
  transform: translateY(-50%);
  transition: color .2s var(--login-ease), transform .2s var(--login-ease);
  pointer-events: none;
}

.input-icon svg {
  width: 19px;
  height: 19px;
}

.input-shell:focus-within .input-icon {
  color: #1f86a4;
  transform: translateY(-50%) scale(1.04);
}

.field .input-shell input,
.field .input-shell input:hover,
.field .input-shell input:focus-visible {
  min-height: 50px;
  padding: 13px 15px 13px 46px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
}

.field .input-shell input::placeholder {
  color: #91a7b0;
  opacity: 1;
}

.caps-hint {
  margin-top: 8px;
  border-radius: 9px;
}

.permission-consent {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  margin-top: 23px;
  padding: 16px 15px;
  border: 1px solid #d7e7ec;
  border-radius: 14px;
  background: #f7fbfc;
  cursor: pointer;
  transition: border-color .2s var(--login-ease), background-color .2s var(--login-ease), box-shadow .2s var(--login-ease);
}

.permission-consent:hover {
  border-color: #9acbd8;
  background: #fff;
}

.permission-consent:focus-within {
  border-color: #238aaa;
  box-shadow: 0 0 0 4px rgba(35, 138, 170, .11);
}

.permission-consent input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.consent-check {
  display: grid;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  place-items: center;
  border: 1.5px solid #b8ced6;
  border-radius: 6px;
  color: transparent;
  background: #fff;
  transition: border-color .18s var(--login-ease), background-color .18s var(--login-ease), color .18s var(--login-ease), transform .18s var(--login-ease);
}

.consent-check svg {
  width: 14px;
  height: 14px;
}

.permission-consent input:checked + .consent-check {
  border-color: var(--login-pink);
  color: #fff;
  background: var(--login-pink);
  transform: scale(1.03);
}

.permission-consent input:disabled + .consent-check {
  opacity: .65;
}

.consent-copy strong,
.consent-copy small {
  display: block;
}

.consent-copy strong {
  color: #294c59;
  font-size: 12.5px;
  font-weight: 740;
  line-height: 1.45;
}

.consent-copy strong span {
  margin-right: 4px;
  color: var(--login-pink);
  font-size: 10.5px;
}

.consent-copy small {
  margin-top: 5px;
  color: #78909a;
  font-size: 10.5px;
  line-height: 1.55;
}

.submit-btn {
  min-height: 52px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(115deg, #176f8b 0%, #238eac 52%, #2ca6c3 100%);
  box-shadow: 0 14px 27px -17px rgba(20, 106, 133, .84);
  font-size: 14px;
  font-weight: 750;
  transition: transform .18s var(--login-ease), box-shadow .2s var(--login-ease), filter .2s var(--login-ease);
}

.submit-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 22%, rgba(255, 255, 255, .24) 47%, transparent 68%);
  transform: translateX(-130%);
  transition: transform .65s var(--login-ease);
}

.submit-btn:hover:not(:disabled) {
  background: linear-gradient(115deg, #176f8b 0%, #238eac 52%, #2ca6c3 100%);
  box-shadow: 0 17px 31px -17px rgba(20, 106, 133, .94);
  filter: saturate(1.06);
  transform: translateY(-2px);
}

.submit-btn:hover:not(:disabled)::before {
  transform: translateX(130%);
}

.submit-btn:active:not(:disabled) {
  transform: translateY(0) scale(.99);
}

.submit-btn:disabled {
  cursor: not-allowed;
  opacity: .5;
  background: #8fa7ae;
  box-shadow: none;
  filter: saturate(.35);
}

.submit-btn[data-loading="true"]:disabled {
  cursor: progress;
  opacity: .78;
  background: linear-gradient(115deg, #176f8b 0%, #238eac 52%, #2ca6c3 100%);
  filter: none;
}

.submit-btn .spinner,
.submit-btn #submitLabel {
  position: relative;
  z-index: 1;
}

.error {
  border-radius: 11px;
}


.location-permission-help {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid #f1c8a2;
  border-radius: 13px;
  background: #fff9ef;
  color: #6e4a24;
}

.location-permission-help[hidden] {
  display: none;
}

.location-permission-help__icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: #c56a1a;
  background: #ffead2;
}

.location-permission-help__icon svg {
  width: 19px;
  height: 19px;
}

.location-permission-help__body strong {
  display: block;
  color: #70431b;
  font-size: 12.5px;
  line-height: 1.4;
}

.location-permission-help__body p {
  margin: 5px 0 11px;
  color: #8a6848;
  font-size: 11px;
  line-height: 1.6;
  word-break: keep-all;
}

.location-permission-retry {
  width: auto;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid #d78a42;
  border-radius: 9px;
  color: #995319;
  background: #fff;
  font-size: 11.5px;
  font-weight: 750;
  box-shadow: none;
}

.location-permission-retry:hover:not(:disabled) {
  color: #fff;
  background: #bd691f;
}

.location-permission-retry:disabled {
  cursor: progress;
  opacity: .65;
}
.card-foot {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 25px;
  padding-top: 19px;
  color: #78909a;
  line-height: 1.45;
}

.card-foot-icon {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: #238aaa;
  background: #e7f4f7;
}

.card-foot-icon svg {
  width: 17px;
  height: 17px;
}

.card-foot strong,
.card-foot small {
  display: block;
}

.card-foot strong {
  margin-bottom: 2px;
  color: #4a6975;
  font-size: 11.5px;
  font-weight: 700;
}

.card-foot small {
  font-size: 10.5px;
}

.card-foot kbd {
  margin: 0 2px;
  border-color: #c1d7df;
  border-radius: 5px;
  background: #f5fafb;
  color: #3a6371;
}

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

@keyframes reveal-up {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes card-arrive {
  from { opacity: 0; transform: translateY(22px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes glow-float {
  from { transform: translate3d(-8px, -8px, 0) scale(.94); }
  to { transform: translate3d(16px, 18px, 0) scale(1.08); }
}

@keyframes orbit-turn {
  to { transform: rotate(360deg); }
}

@keyframes flow-dash {
  to { stroke-dashoffset: -216; }
}

@keyframes pink-drift {
  from { transform: translate3d(-20px, -12px, 0) scale(.95); }
  to { transform: translate3d(28px, 34px, 0) scale(1.08); }
}

@keyframes breathe-ring {
  from { transform: scale(.96); opacity: .7; }
  to { transform: scale(1.05); opacity: 1; }
}

@keyframes form-ring {
  from { transform: translate3d(0, 0, 0) scale(.96); }
  to { transform: translate3d(-18px, -14px, 0) scale(1.04); }
}

@keyframes status-pulse {
  0%, 100% { transform: scale(.82); opacity: .5; }
  50% { transform: scale(1.08); opacity: 1; }
}

@media (max-width: 1120px) {
  .shell {
    grid-template-columns: minmax(480px, 1fr) minmax(440px, .92fr);
  }

  .brand-panel {
    padding-inline: 46px;
  }

  .brand-copy h1 {
    font-size: clamp(39px, 5vw, 56px);
  }
}

@media (max-width: 880px) {
  .shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .brand-panel {
    min-height: 300px;
    padding: 24px 28px 50px;
    gap: 0;
  }

  .brand-panel::before {
    width: 560px;
    height: 560px;
    inset: -190px -260px auto auto;
  }

  .brand-panel::after {
    width: 450px;
    height: 450px;
    right: -160px;
    top: -230px;
  }

  .brand-mark {
    min-height: auto;
    padding: 0;
    border-radius: 0;
  }

  .brand-mark img {
    width: 118px;
  }

  .brand-copy {
    max-width: 520px;
    margin: 31px 0 0;
  }

  .brand-kicker {
    margin-bottom: 10px;
  }

  .brand-copy h1 {
    font-size: 33px;
  }

  .brand-copy p {
    display: block;
    max-width: 470px;
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.6;
  }

  .brand-foot,
  .scene-orbit-small {
    display: none;
  }

  .scene-flow {
    bottom: -20%;
    opacity: .35;
  }

  .form-panel {
    align-items: flex-start;
    min-height: calc(100dvh - 300px);
    padding: 0 24px 46px;
    overflow: visible;
  }

  .login-card {
    max-width: 470px;
    margin-top: -25px;
    padding: 38px 38px 31px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 23px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 25px 55px -30px rgba(11, 51, 67, .42);
  }
}

@media (max-width: 520px) {
  .brand-panel {
    min-height: 252px;
    padding: 18px 20px 43px;
  }

  .brand-mark {
    min-height: auto;
    padding: 0;
    border-radius: 0;
  }

  .brand-mark img {
    width: 104px;
  }

  .brand-copy {
    margin-top: 23px;
  }

  .brand-kicker {
    margin-bottom: 8px;
    font-size: 9px;
  }

  .brand-copy h1 {
    font-size: clamp(27px, 8vw, 32px);
    line-height: 1.08;
  }

  .brand-copy p {
    max-width: 330px;
    margin-top: 9px;
    font-size: 11.5px;
    line-height: 1.55;
  }

  .scene-orbit-large {
    width: 310px;
    height: 310px;
    right: -170px;
    top: 2%;
  }

  .form-panel {
    min-height: calc(100dvh - 252px);
    padding: 0 14px 30px;
  }

  .form-panel::before,
  .form-atmosphere {
    display: none;
  }

  .login-card {
    margin-top: -22px;
    padding: 31px 22px 26px;
    border-radius: 20px;
  }

  .card-head {
    margin-bottom: 24px;
  }

  .card-head h2 {
    font-size: 23px;
  }

  .card-head p {
    font-size: 12.5px;
  }

  .input-shell,
  .submit-btn {
    min-height: 50px;
  }

  .field .input-shell input,
  .field .input-shell input:hover,
  .field .input-shell input:focus-visible {
    min-height: 48px;
  }

  .permission-consent {
    grid-template-columns: 22px minmax(0, 1fr);
    margin-top: 20px;
    padding: 14px;
  }

  .consent-break {
    display: none;
  }

  .card-foot {
    margin-top: 22px;
    padding-top: 17px;
  }
}

@media (min-width: 881px) and (max-height: 720px) {
  .brand-panel {
    padding-block: 32px;
  }

  .brand-copy {
    margin-top: 36px;
  }

  .brand-copy h1 {
    font-size: clamp(38px, 4vw, 52px);
  }

  .brand-copy p {
    margin-top: 14px;
  }

  .brand-foot {
    margin-top: 24px;
  }

  .login-card {
    padding-block: 34px 27px;
  }

  .permission-consent {
    margin-top: 18px;
    padding-block: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-panel::before,
  .brand-panel::after,
  .scene-glow,
  .scene-orbit,
  .scene-flow path,
  .brand-mark,
  .brand-copy,
  .brand-foot,
  .form-panel::before,
  .form-atmosphere span,
  .login-card {
    animation: none !important;
  }

  .submit-btn::before {
    display: none;
  }
}