:root {
  --login-bg-a: var(--phoenix-bg-1, #f2f6f8);
  --login-bg-b: var(--phoenix-bg-3, #e9eff3);
  --login-text: var(--phoenix-text-main, #5c6673);
  --login-muted: var(--phoenix-text-muted, #7d8795);
  --login-soft: var(--phoenix-text-soft, #a5afbc);
  --login-line: var(--phoenix-line-strong, #748193);
  --login-pink: var(--phoenix-pink-soft, #f4d2de);
  --login-blue: var(--phoenix-blue-soft, #dce8f4);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--login-text);
  background:
    radial-gradient(circle at 15% 16%, rgba(255,224,233,0.52), transparent 24%),
    radial-gradient(circle at 84% 78%, rgba(218,231,247,0.58), transparent 28%),
    linear-gradient(145deg, var(--login-bg-a), var(--login-bg-b));
  -webkit-font-smoothing: antialiased;
}

.login-ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.login-glow {
  position: absolute;
  border-radius: 999px;
  filter: blur(78px);
  opacity: 0.42;
  mix-blend-mode: multiply;
}

.glow-a { width: 310px; height: 310px; left: -90px; top: -80px; background: #ffdce8; }
.glow-b { width: 330px; height: 330px; right: -110px; bottom: -100px; background: #dce8ff; }
.glow-c { width: 190px; height: 190px; left: 35%; top: 35%; background: rgba(255,255,255,0.88); }

.login-shell {
  position: relative;
  z-index: 1;
  width: min(390px, 100vw);
  min-height: min(92vh, 844px);
  padding: 28px 20px;
  display: grid;
  place-items: center;
}

.login-panel {
  width: 100%;
  border-radius: 34px;
  padding: 32px 24px 26px;
  background:
    radial-gradient(circle at 50% 8%, rgba(255,255,255,0.64), transparent 34%),
    linear-gradient(145deg, rgba(247,250,251,0.78), rgba(232,239,244,0.92));
  box-shadow:
    16px 18px 42px rgba(174,187,200,0.24),
    -14px -14px 36px rgba(255,255,255,0.90),
    inset 1px 1px 0 rgba(255,255,255,0.74),
    inset -1px -1px 0 rgba(210,221,231,0.34);
}

.login-mark {
  width: 118px;
  height: 118px;
  margin: 0 auto 18px;
  border-radius: 36px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 24% 20%, rgba(255,221,232,0.72), transparent 36%),
    radial-gradient(circle at 76% 76%, rgba(206,225,247,0.74), transparent 40%),
    linear-gradient(145deg, rgba(255,255,255,0.68), rgba(232,239,244,0.74));
  box-shadow:
    10px 10px 22px rgba(174,187,200,0.18),
    -9px -9px 20px rgba(255,255,255,0.82),
    inset 1px 1px 0 rgba(255,255,255,0.64);
}

.login-mark svg {
  width: 86px;
  height: 86px;
  overflow: visible;
  filter: drop-shadow(1px 1px 0 rgba(255,255,255,0.72));
}

.login-mark path,
.login-mark circle {
  fill: none;
  stroke: var(--login-line);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.login-mark .login-heart {
  fill: rgba(244,190,207,0.76);
  stroke: none;
}

.login-copy {
  text-align: center;
  margin-bottom: 24px;
}

.login-kicker {
  margin: 0 0 8px;
  font-size: 10px;
  letter-spacing: 2.5px;
  color: var(--login-soft);
}

.login-copy h1 {
  margin: 0;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 420;
  letter-spacing: 0;
  color: var(--login-text);
}

.login-copy p:last-child {
  margin: 10px auto 0;
  max-width: 240px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--login-muted);
}

.login-form {
  display: grid;
  gap: 12px;
}

.login-field {
  display: grid;
  gap: 7px;
}

.login-field span {
  padding-left: 5px;
  font-size: 12px;
  color: var(--login-soft);
}

.login-field input {
  width: 100%;
  height: 46px;
  border: 1px solid rgba(255,255,255,0.48);
  border-radius: 18px;
  padding: 0 15px;
  color: var(--login-text);
  background: linear-gradient(145deg, rgba(255,255,255,0.62), rgba(238,244,248,0.82));
  box-shadow:
    inset 3px 3px 8px rgba(174,187,200,0.13),
    inset -3px -3px 8px rgba(255,255,255,0.70);
  outline: none;
  font: inherit;
  font-size: 15px;
}

.login-field input:focus {
  border-color: rgba(235,184,200,0.82);
  box-shadow:
    0 0 0 3px rgba(244,210,222,0.32),
    inset 3px 3px 8px rgba(174,187,200,0.13),
    inset -3px -3px 8px rgba(255,255,255,0.70);
}

.login-button {
  margin-top: 8px;
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(135deg, rgba(159,183,209,0.98), rgba(238,184,203,0.92));
  box-shadow:
    7px 9px 18px rgba(174,187,200,0.22),
    inset 1px 1px 0 rgba(255,255,255,0.26);
  font: inherit;
  font-size: 15px;
  font-weight: 430;
  cursor: pointer;
}

.login-button:disabled {
  cursor: progress;
  opacity: 0.72;
}

.login-status {
  min-height: 20px;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: var(--login-muted);
}

.login-status.is-error {
  color: #bc6d82;
}

@media (max-width: 390px) {
  .login-shell {
    min-height: 100vh;
    min-height: 100dvh;
    padding: 18px;
  }

  .login-panel {
    border-radius: 30px;
    padding: 28px 20px 24px;
  }
}