:root {
  color-scheme: light;
  --ink: #17263a;
  --muted: #647387;
  --navy: #173b67;
  --navy-hover: #102f54;
  --line: #d7e0e8;
  --focus: #6a96be;
  --surface: rgba(255, 255, 255, .96);
}

* { box-sizing: border-box; }

html { min-width: 320px; min-height: 100%; background: #dbe4e8; }

body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 73% 39%, rgba(111, 191, 188, .52), transparent 30%),
    radial-gradient(circle at 19% 83%, rgba(91, 151, 173, .36), transparent 34%),
    linear-gradient(132deg, #d9e0e4 0%, #becbd2 38%, #dce3e6 67%, #b5c8cc 100%);
  color: var(--ink);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

button, input { font: inherit; }

.login-backdrop {
  position: fixed;
  inset: -10vh -8vw;
  overflow: hidden;
  pointer-events: none;
}

.login-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(15, 35, 57, .14), transparent 36%),
    linear-gradient(300deg, rgba(255, 255, 255, .32), transparent 41%);
  backdrop-filter: blur(2px);
}

.backdrop-panel {
  position: absolute;
  display: block;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 42px;
  background: linear-gradient(145deg, rgba(239, 245, 247, .64), rgba(64, 102, 121, .12));
  box-shadow: 0 42px 110px rgba(30, 54, 70, .16), inset 0 1px 0 rgba(255, 255, 255, .45);
  transform: rotate(34deg);
  filter: blur(.2px);
}

.panel-one { width: 48vw; height: 42vw; top: -23vw; left: -8vw; }
.panel-two { width: 42vw; height: 46vw; right: -13vw; top: -5vw; transform: rotate(43deg); background: linear-gradient(145deg, rgba(34, 112, 126, .23), rgba(214, 231, 232, .52)); }
.panel-three { width: 37vw; height: 37vw; left: 4vw; bottom: -22vw; transform: rotate(41deg); background: linear-gradient(145deg, rgba(56, 115, 137, .27), rgba(222, 233, 235, .5)); }
.panel-four { width: 28vw; height: 28vw; left: 38vw; top: 25vh; transform: rotate(33deg); background: linear-gradient(145deg, rgba(240, 245, 246, .45), rgba(49, 113, 124, .18)); }

.login-stage {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 42px 20px;
}

.login-card {
  width: min(446px, 100%);
  padding: 34px 38px 30px;
  border: 1px solid rgba(210, 220, 228, .9);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 28px 80px rgba(19, 42, 61, .23), 0 5px 16px rgba(19, 42, 61, .08);
  backdrop-filter: blur(20px);
}

.brand-lockup {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.brand-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, #eff7f8, #dcecef);
  color: #275f72;
  box-shadow: inset 0 0 0 1px rgba(39, 95, 114, .1);
}

.brand-mark svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.brand-name { color: #1a2b40; font-size: 1.55rem; font-weight: 820; letter-spacing: -.035em; }
.brand-product { align-self: flex-end; margin: 0 0 9px -3px; color: #718094; font-size: .76rem; font-weight: 760; letter-spacing: .04em; text-transform: uppercase; }

.login-heading { margin: 24px 0 25px; text-align: center; }
.login-heading h1 { margin: 0; color: #16253a; font-size: 1.75rem; line-height: 1.2; letter-spacing: -.035em; }
.login-heading p { margin: 8px 0 0; color: var(--muted); font-size: .96rem; }

.login-error {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: -7px 0 17px;
  padding: 11px 12px;
  border: 1px solid #f0c9c9;
  border-radius: 10px;
  background: #fff2f2;
  color: #a52d34;
  font-size: .9rem;
  font-weight: 680;
}

.login-error svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.login-success { margin: 0 0 16px; padding: 11px 13px; border: 1px solid #bfe4d6; border-radius: 10px; background: #edf9f4; color: #116149; font-size: .9rem; font-weight: 680; }
.login-form { display: grid; gap: 17px; }
.login-field label { display: block; margin: 0 0 7px; color: #35465a; font-size: .88rem; font-weight: 750; }

.input-shell { position: relative; }
.input-shell > svg {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 19px;
  height: 19px;
  transform: translateY(-50%);
  fill: none;
  stroke: #8290a1;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.input-shell input {
  width: 100%;
  height: 52px;
  padding: 12px 44px 12px 43px;
  border: 1px solid var(--line);
  border-radius: 11px;
  outline: 0;
  background: #f9fbfc;
  color: var(--ink);
  box-shadow: inset 0 1px 2px rgba(15, 35, 55, .025);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.input-shell input::placeholder { color: #9aa6b4; }
.input-shell input:focus { border-color: var(--focus); background: #fff; box-shadow: 0 0 0 4px rgba(106, 150, 190, .14); }
.input-shell:focus-within > svg { stroke: #356f9e; }

.password-toggle {
  position: absolute;
  top: 50%;
  right: 7px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #718094;
  cursor: pointer;
}

.password-toggle:hover { background: #edf2f6; color: #315d84; }
.password-toggle:focus-visible { outline: 3px solid rgba(106, 150, 190, .24); }
.password-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.password-toggle .eye-closed { display: none; }
.password-toggle[aria-pressed="true"] .eye-open { display: none; }
.password-toggle[aria-pressed="true"] .eye-closed { display: block; }

.login-submit {
  width: 100%;
  min-height: 52px;
  margin-top: 5px;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(180deg, #1b4779, var(--navy));
  color: #fff;
  box-shadow: 0 9px 20px rgba(23, 59, 103, .22);
  font-weight: 790;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.login-submit:hover { background: linear-gradient(180deg, #183f6d, var(--navy-hover)); box-shadow: 0 11px 24px rgba(23, 59, 103, .27); }
.login-submit:active { transform: translateY(1px); box-shadow: 0 6px 14px rgba(23, 59, 103, .2); }
.login-submit:focus-visible { outline: 4px solid rgba(106, 150, 190, .3); outline-offset: 2px; }
.login-recovery { display: flex; justify-content: center; gap: 6px; margin-top: 15px; font-size: .88rem; }
.login-recovery a,.recovery-back { color: #285f94; font-weight: 720; text-decoration: none; }
.login-recovery.attention { padding: 10px; border-radius: 9px; background: #fff7e7; color: #8a580d; }
.recovery-card { width: min(440px, calc(100% - 28px)); }
.recovery-back { display: block; margin-top: 20px; text-align: center; }
.password-rules { margin: -5px 0 0; color: #64748b; font-size: .8rem; line-height: 1.45; }
.code-input { text-align: center; font-size: 1.35rem !important; font-weight: 800 !important; letter-spacing: .28em; }

.login-footnote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 22px;
  color: #788699;
  font-size: .8rem;
}

.login-footnote svg { width: 15px; height: 15px; fill: none; stroke: #5b7b95; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.login-footer {
  position: fixed;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 12px 20px;
  color: rgba(31, 53, 72, .66);
  font-size: .76rem;
  font-weight: 680;
  letter-spacing: .02em;
  text-align: center;
  pointer-events: none;
}

@media (max-width: 540px) {
  .login-stage { align-items: center; padding: 22px 14px; }
  .login-card { padding: 29px 22px 25px; border-radius: 18px; }
  .brand-name { font-size: 1.4rem; }
  .brand-product { font-size: .7rem; }
  .login-heading { margin-top: 21px; }
  .login-heading h1 { font-size: 1.55rem; }
  .login-footer { position: relative; margin-top: -42px; }
  .backdrop-panel { border-radius: 30px; }
  .panel-one { width: 82vw; height: 82vw; }
  .panel-two { width: 76vw; height: 76vw; right: -35vw; }
  .panel-three { width: 75vw; height: 75vw; left: -25vw; }
  .panel-four { width: 58vw; height: 58vw; left: 35vw; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}