:root {
  color-scheme: dark;
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  background: #020b1f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: #eaf6ff;
  background:
    linear-gradient(115deg, rgba(2, 13, 35, 0.92), rgba(4, 36, 80, 0.72)),
    radial-gradient(circle at 24% 40%, rgba(20, 118, 231, 0.46), transparent 32%),
    url("imgs/bg.png") center / cover fixed no-repeat,
    linear-gradient(180deg, #031834, #020b1f);
  overflow-x: hidden;
}

body.has-custom-background {
  background:
    linear-gradient(115deg, rgba(2, 13, 35, 0.9), rgba(4, 36, 80, 0.66)),
    var(--login-background-image) center / cover fixed no-repeat;
}

body::before,
body::after {
  content: "";
  position: fixed;
  pointer-events: none;
}

body::before {
  inset: 0;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(63, 185, 255, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63, 185, 255, 0.22) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, transparent, #000 45%, transparent);
}

body::after {
  width: 520px;
  height: 520px;
  right: -180px;
  bottom: -220px;
  border: 1px solid rgba(63, 185, 255, 0.24);
  border-radius: 50%;
  box-shadow: 0 0 90px rgba(20, 118, 231, 0.24), inset 0 0 90px rgba(20, 118, 231, 0.12);
}

.login-page {
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100% - 40px));
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, 440px);
  align-items: center;
  gap: clamp(48px, 8vw, 120px);
  padding: 48px 0;
}

.login-logo-shell {
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(94, 190, 255, 0.45);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(15, 91, 164, 0.38), rgba(3, 27, 67, 0.58));
  box-shadow: 0 12px 35px rgba(0, 10, 34, 0.35), inset 0 0 24px rgba(72, 174, 255, 0.14);
  backdrop-filter: blur(10px);
}
.login-intro img { width: 78px; height: auto; filter: drop-shadow(0 0 14px rgba(76, 174, 255, 0.4)); }
.login-intro p { margin: 24px 0 12px; color: #90cfff; font-size: 20px; letter-spacing: 4px; }
.login-intro h1 { margin: 0; font-size: clamp(42px, 5vw, 68px); line-height: 1.15; letter-spacing: 6px; text-shadow: 0 0 24px rgba(61, 164, 255, 0.55); }
.login-intro span { display: block; margin-top: 24px; color: #a9cce9; font-size: 17px; letter-spacing: 7px; }

.login-card {
  padding: 42px 38px 30px;
  border: 1px solid rgba(76, 170, 255, 0.48);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(7, 44, 92, 0.9), rgba(3, 22, 54, 0.94));
  box-shadow: 0 24px 70px rgba(0, 7, 24, 0.48), inset 0 0 36px rgba(35, 132, 230, 0.12);
  backdrop-filter: blur(18px);
}

.login-card-title small { color: #42b7ff; font-weight: 700; letter-spacing: 5px; }
.login-card-title h2 { margin: 10px 0 8px; font-size: 30px; }
.login-card-title p { margin: 0 0 30px; color: #8fb6d7; font-size: 14px; }
form > label { display: block; margin: 18px 0 8px; color: #cae5f8; font-size: 14px; }

.input-wrap {
  height: 50px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(84, 160, 225, 0.38);
  border-radius: 9px;
  background: rgba(2, 17, 43, 0.72);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.input-wrap:focus-within { border-color: #3fb9ff; box-shadow: 0 0 0 3px rgba(63, 185, 255, 0.12); }
.input-wrap > span { width: 46px; color: #58bfff; text-align: center; font-size: 13px; }
.input-wrap > span svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.input-wrap input { min-width: 0; flex: 1; height: 100%; padding: 0; border: 0; outline: 0; color: #fff; background: transparent; font: inherit; font-size: 16px; }
.input-wrap input::placeholder { color: #597c9d; }
.password-toggle { height: 100%; padding: 0 14px; border: 0; color: #78bce9; background: transparent; cursor: pointer; }

.login-message { min-height: 22px; margin: 12px 0 4px; color: #ff9d9d; font-size: 13px; }
.login-message.is-success { color: #54ef8b; }
.login-submit { width: 100%; height: 50px; border: 1px solid #42b8ff; border-radius: 9px; color: #fff; background: linear-gradient(90deg, #0862c4, #1498e7); box-shadow: 0 8px 24px rgba(20, 118, 231, 0.3); font: inherit; font-size: 17px; font-weight: 700; letter-spacing: 3px; cursor: pointer; }
.login-submit:hover { filter: brightness(1.08); }
.login-submit:disabled { cursor: wait; opacity: 0.68; }
.login-footnote { margin: 24px 0 0; color: #668bab; text-align: center; font-size: 12px; }

@media (max-width: 760px) {
  .login-page { width: min(100% - 28px, 440px); grid-template-columns: 1fr; gap: 28px; align-content: center; padding: max(24px, env(safe-area-inset-top)) 0 max(24px, env(safe-area-inset-bottom)); }
  .login-intro { text-align: center; }
  .login-logo-shell { width: 76px; height: 76px; margin: 0 auto; border-radius: 21px; }
  .login-intro img { width: 56px; }
  .login-intro p { margin: 12px 0 8px; font-size: 15px; letter-spacing: 2px; }
  .login-intro h1 { font-size: clamp(28px, 9vw, 38px); letter-spacing: 2px; }
  .login-intro span { margin-top: 12px; font-size: 12px; letter-spacing: 3px; }
  .login-card { padding: 28px 22px 22px; border-radius: 14px; }
  .login-card-title h2 { font-size: 25px; }
  .login-card-title p { margin-bottom: 22px; }
}

@media (max-width: 380px) {
  .login-page { width: calc(100% - 20px); gap: 18px; }
  .login-intro span { display: none; }
  .login-card { padding: 22px 16px 18px; }
}