.login-page {
  --login-brand: #B7243C;
  --login-brand-hover: #981B31;
  --login-brand-tint: #FBECEF;
  --login-wine: #270914;
  --login-surface: #FAF7F7;
  --login-ink: #261B1D;
  --login-muted: #68565A;
  --login-error: #A82023;
  background: var(--login-surface);
  color: var(--login-ink);
}
.login-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0;
}
.login-intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(26px, 5vw, 80px);
  background: radial-gradient(ellipse at 56% 66%, #6D142A, #3D0B1C 45%, var(--login-wine) 82%);
  color: #FFF3F4;
}
.login-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(21px, 2.8vw, 34px);
  font-weight: 720;
  letter-spacing: normal;
  line-height: 1.25;
}
.login-mark {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  height: 38px;
  border: 1px solid #FDA0AB77;
  border-radius: 10px;
  background: #F8557424;
  color: #FFC7CE;
}
.login-layout svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.login-mark svg { width: 21px; height: 21px; }
.login-scene {
  position: absolute;
  z-index: -1;
  inset: 23% -4% 0;
  display: grid;
  place-items: center;
  perspective: 820px;
}
.login-plane {
  position: absolute;
  inset: 1% -6% -15%;
  background-image: linear-gradient(#FF90A63B 1px, transparent 1px), linear-gradient(90deg, #FF90A63B 1px, transparent 1px);
  background-size: 29px 29px;
  mask-image: radial-gradient(ellipse, #000 5%, transparent 67%);
  transform: rotateX(60deg) rotateZ(-31deg) translateY(15%);
}
.login-mesh {
  position: relative;
  width: min(64%, 400px);
  aspect-ratio: 1;
  transform: translateY(-4%) rotateX(54deg) rotateZ(-37deg);
  transform-style: preserve-3d;
}
.login-trace { position: absolute; inset: 8%; border: 1px solid #FF9DAD91; border-radius: 15px; }
.login-trace:nth-child(2) { inset: 0; border-color: #F9859E50; border-style: dashed; }
.login-trace:nth-child(3) { inset: 16%; border-color: #FFB2C155; }
.login-node {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: #FFE6EA;
  box-shadow: 0 0 14px #FF738F, 0 0 0 5px #FF829C33;
}
.login-node:nth-of-type(4) { left: 21%; top: 6.5%; }
.login-node:nth-of-type(5) { right: 6.5%; top: 37%; }
.login-node:nth-of-type(6) { left: 6.5%; bottom: 26%; }
.login-node:nth-of-type(7) { right: 27%; bottom: 6.5%; }
.login-tile {
  position: absolute;
  inset: 29%;
  border: 1px solid #FFA6B8;
  border-radius: 15px;
  background: linear-gradient(135deg, #FA829C, #AB2446 73%);
  box-shadow: inset 0 0 18px #FFD0D866, 0 0 28px #FF668D5C;
}
.login-tile:nth-last-child(3) { transform: translateZ(10px); opacity: .32; }
.login-tile:nth-last-child(2) { transform: translateZ(29px); opacity: .62; }
.login-tile:last-child { transform: translateZ(48px); }
.login-tile:last-child::after {
  content: "";
  position: absolute;
  inset: 23%;
  border: 1px solid #FFF0F3B0;
  border-radius: 7px;
  background: repeating-linear-gradient(90deg, #FFE0E7B8 0 1px, transparent 1px 25%),
    repeating-linear-gradient(#FFE0E7B8 0 1px, transparent 1px 25%);
}
.login-panel { display: grid; place-items: center; padding: 40px clamp(24px, 5vw, 72px); }
#login-form { width: min(100%, 350px); }
#login-heading { margin: 0 0 30px; font-size: 30px; line-height: 1.2; }
.login-field { position: relative; margin: 0 0 14px; }
.login-field label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.login-field-icon {
  position: absolute;
  inset: 0 auto 0 15px;
  display: grid;
  place-items: center;
  color: var(--login-muted);
  pointer-events: none;
}
.login-field input {
  display: block;
  width: 100%;
  height: 50px;
  padding: 0 14px 0 44px;
  border: 1px solid #90777C;
  border-radius: 9px;
  background: #F3EEEE;
  color: var(--login-ink);
  font-size: 16px;
}
.login-field input::placeholder { color: var(--login-muted); opacity: 1; }
.login-password-field input { padding-right: 50px; }
.login-password-field input::-ms-reveal { display: none; }
.password-toggle {
  position: absolute;
  inset: 2px 2px 2px auto;
  display: grid;
  place-items: center;
  width: 46px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--login-muted);
}
.password-toggle:hover { background: var(--login-brand-tint); }
.password-toggle:not([data-visible]) .password-eye-off,
.password-toggle[data-visible] .password-eye { display: none; }
.login-submit {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 22px;
  border: 0;
  border-radius: 9px;
  background: var(--login-brand);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 680;
}
.login-submit:hover:enabled { background: var(--login-brand-hover); }
.login-page :focus-visible { outline-color: var(--login-brand); }
.login-page .feedback { color: var(--login-error); }
@media (max-width: 600px) {
  .login-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: 185px 1fr; }
  .login-intro { padding: 21px 24px; }
  .login-scene { inset: 20% -16% -48% 24%; }
  .login-mesh { width: min(57%, 175px); }
  .login-panel { padding: 36px 24px; }
  #login-heading { margin-bottom: 24px; font-size: 26px; }
}
.login-page .feedback { margin: 12px 0; }
.login-submit:disabled { cursor: wait; opacity: .55; }