/*
 * HiZero 登录页 · 双风格（glass / gradient）
 *
 * 只作用于 body.is-login 与 .login-stage，不改账号、积分、对话等其他页面。
 * 两套风格共享同一份 DOM 与同一套表单逻辑，这里只负责背景、容器、装饰与排版。
 * CSP 是 style-src 'self'：本文件之外没有内联样式，脚本也不写 style 属性。
 * 动效只动 transform / opacity，并在 prefers-reduced-motion 下完全关闭。
 */

/* ---------------------------------------------------------------- shell */

body.is-login { background: #edf1fb; }
body.is-login .top,
body.is-login .foot { display: none; }
body.is-login .page {
  max-width: none;
  width: 100%;
  padding: 0;
}
body.is-login #view { min-height: 100vh; min-height: 100dvh; }
body.is-login .view { animation: none; }

.login-stage {
  --login-ink: #182038;
  --login-ink-2: #3c465e;
  --login-ink-soft: #55617a;
  --login-line: rgba(30, 40, 70, .14);
  --login-accent: #4f46e5;
  --login-focus: #4f46e5;
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(20px, 5vh, 64px) clamp(14px, 4vw, 48px);
  isolation: isolate;
  overflow-x: clip;
  color: var(--login-ink);
  font-family: var(--font-sans, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif);
  color-scheme: light;
}

.login-atmosphere {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.login-orb,
.login-arc { position: absolute; display: block; }

.login-frame {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
}

/* ---------------------------------------------------------------- card */

.login-panel {
  position: relative;
  width: min(432px, 100%);
  padding: clamp(28px, 4vw, 40px);
  border-radius: 26px;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(26px, 4vw, 34px);
  min-width: 0;
}
.login-mark {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  flex: none;
}
.login-brand-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--login-ink);
}
.login-intro h1 {
  margin: 0;
  font-size: clamp(25px, 3vw, 30px);
  line-height: 1.24;
  font-weight: 700;
  letter-spacing: -.045em;
  color: var(--login-ink);
}
/* ---------------------------------------------------------------- form */

.login-form { margin-top: clamp(22px, 3.4vw, 28px); }

.login-field { display: block; margin: 0 0 16px; }
.login-field > label {
  display: block;
  margin-bottom: 7px;
  color: var(--login-ink-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
}

.login-input-wrap { position: relative; }
.login-input-wrap input { padding-right: 48px; }
/* Higher specificity than .login-stage input[type=...] so the reveal button never overlaps text. */
.login-stage .login-input-wrap input[type="text"],
.login-stage .login-input-wrap input[type="password"] { padding-right: 48px; }

.login-stage input[type="text"],
.login-stage input[type="password"] {
  display: block;
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  color: var(--login-ink);
  font: inherit;
  font-size: 14px;
  line-height: 46px;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.login-stage input::placeholder { color: #5f6981; opacity: 1; }
.login-stage input:focus-visible {
  outline: 2px solid var(--login-focus);
  outline-offset: 2px;
}
.login-stage .login-field.is-invalid input[type="text"],
.login-stage .login-field.is-invalid input[type="password"] {
  border-color: #c53c52;
  box-shadow: 0 0 0 3px rgba(197, 60, 82, .12);
}
.login-stage .login-field.is-invalid input:focus-visible { outline-color: #c53c52; }

.login-stage input:-webkit-autofill,
.login-stage input:-webkit-autofill:hover,
.login-stage input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--login-ink);
  transition: background-color 9999s ease-in-out 0s;
}

.login-reveal {
  position: absolute;
  top: 50%;
  right: 5px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #59637d;
  box-shadow: none;
  cursor: pointer;
}
.login-reveal .ui-icon { width: 18px; height: 18px; }
.login-reveal:hover:not(:disabled) {
  background: rgba(79, 70, 229, .09);
  color: #303a58;
  box-shadow: none;
}
.login-reveal:focus-visible { outline: 2px solid var(--login-focus); outline-offset: 1px; }

.login-error {
  margin: 7px 0 0;
  color: #b02a3f;
  font-size: 12px;
  line-height: 1.5;
}
.login-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid #f0c9cf;
  border-radius: 10px;
  background: #fff4f5;
  color: #a52a3d;
  font-size: 12.5px;
  line-height: 1.55;
}

.login-submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 47px;
  margin-top: 6px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 620;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.login-submit:active:not(:disabled) { transform: translateY(1px); }
.login-submit:disabled { cursor: progress; opacity: 1; }
.login-submit:focus-visible { outline: 2px solid var(--login-focus); outline-offset: 3px; }
.login-submit-label { line-height: 1; }
.login-submit-arrow {
  display: inline-flex;
  align-items: center;
  transition: transform .15s ease;
}
.login-submit-arrow .ui-icon { width: 17px; height: 17px; }
.login-submit:hover:not(:disabled) .login-submit-arrow { transform: translateX(2px); }

.login-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, .42);
  border-top-color: #fff;
  border-radius: 50%;
}
.login-form[data-loading="true"] .login-spinner {
  display: block;
  animation: login-spin .75s linear infinite;
}
.login-stage .login-form[data-loading="true"] .login-submit-arrow { display: none; }

/* ---------------------------------------------------------------- foot */

.login-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--login-line);
}
.login-download {
  color: var(--login-ink-soft);
  font-size: 12px;
  text-decoration: none;
  border-radius: 4px;
}
.login-download:hover { color: var(--login-accent); text-decoration: underline; }
.login-download:focus-visible { outline: 2px solid var(--login-focus); outline-offset: 2px; }

.login-style-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.login-style-switch > span {
  color: var(--login-ink-soft);
  font-size: 11px;
}
.login-style-btn {
  min-height: 28px;
  padding: 3px 9px;
  border: 1px solid var(--login-line);
  border-radius: 7px;
  background: transparent;
  color: var(--login-ink-soft);
  font-size: 11px;
  font-weight: 540;
  box-shadow: none;
  cursor: pointer;
}
.login-style-btn:hover:not(:disabled) {
  background: rgba(79, 70, 229, .07);
  color: var(--login-ink-2);
  box-shadow: none;
}
.login-style-btn[aria-pressed="true"] {
  border-color: rgba(79, 70, 229, .34);
  background: rgba(79, 70, 229, .12);
  color: #3b3f9e;
}
.login-style-btn:focus-visible { outline: 2px solid var(--login-focus); outline-offset: 2px; }

/* ================================================================ glass */

.login-stage[data-style="glass"] {
  background:
    radial-gradient(115% 85% at 10% 4%, #dce9ff 0%, rgba(220, 233, 255, 0) 56%),
    radial-gradient(95% 75% at 92% 8%, #e7dcff 0%, rgba(231, 220, 255, 0) 54%),
    radial-gradient(105% 90% at 46% 108%, #f4e6ff 0%, rgba(244, 230, 255, 0) 60%),
    linear-gradient(150deg, #eef4ff 0%, #f2edff 52%, #fbf1ff 100%);
}

.login-stage[data-style="glass"] .login-arc { display: none; }

.login-stage[data-style="glass"] .login-orb { border-radius: 50%; }

.login-stage[data-style="glass"] .login-orb.is-one {
  top: -13vmax;
  left: -11vmax;
  width: 38vmax;
  height: 38vmax;
  background: radial-gradient(circle at 34% 32%,
    rgba(96, 165, 250, .78) 0%,
    rgba(99, 102, 241, .38) 40%,
    rgba(99, 102, 241, 0) 68%);
}
.login-stage[data-style="glass"] .login-orb.is-two {
  top: 2vmax;
  right: -10vmax;
  width: 33vmax;
  height: 33vmax;
  background: radial-gradient(circle at 38% 34%,
    rgba(167, 139, 250, .72) 0%,
    rgba(124, 92, 245, .32) 42%,
    rgba(124, 92, 245, 0) 69%);
}
.login-stage[data-style="glass"] .login-orb.is-three {
  bottom: -17vmax;
  left: 33vw;
  width: 34vmax;
  height: 34vmax;
  background: radial-gradient(circle at 46% 34%,
    rgba(125, 211, 252, .6) 0%,
    rgba(56, 189, 248, .24) 44%,
    rgba(56, 189, 248, 0) 70%);
}

.login-stage[data-style="glass"] .login-panel {
  background: linear-gradient(155deg, rgba(255, 255, 255, .64), rgba(255, 255, 255, .36));
  border: 1px solid rgba(255, 255, 255, .88);
  box-shadow:
    0 30px 80px rgba(67, 56, 202, .16),
    0 2px 8px rgba(67, 56, 202, .06),
    inset 0 1px 0 rgba(255, 255, 255, .92);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
}

.login-stage[data-style="glass"] input[type="text"],
.login-stage[data-style="glass"] input[type="password"] {
  border: 1px solid #828ca2;
  background: rgba(255, 255, 255, .58);
  box-shadow: inset 0 1px 2px rgba(43, 52, 120, .05);
}
.login-stage[data-style="glass"] input:focus {
  border-color: #5a63e8;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 0 0 4px rgba(90, 99, 232, .16);
}
.login-stage[data-style="glass"] input:-webkit-autofill,
.login-stage[data-style="glass"] input:-webkit-autofill:hover,
.login-stage[data-style="glass"] input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, .92) inset;
}

.login-stage[data-style="glass"] .login-submit {
  color: #fff;
  background: linear-gradient(135deg, #4854e6 0%, #5b55ea 52%, #7a4de8 100%);
  box-shadow: 0 12px 26px rgba(72, 84, 230, .32);
}
.login-stage[data-style="glass"] .login-submit:hover:not(:disabled) {
  background: linear-gradient(135deg, #3c47d8 0%, #514ae0 52%, #6f42dd 100%);
  box-shadow: 0 15px 32px rgba(72, 84, 230, .4);
}
.login-stage[data-style="glass"] .login-submit:disabled {
  background: linear-gradient(135deg, #4a55d2 0%, #5b51dc 52%, #6c4bcc 100%);
  box-shadow: none;
}
.login-stage[data-style="glass"] .login-submit-arrow { display: none; }
.login-stage[data-style="glass"] .login-submit:hover:not(:disabled) .login-submit-label {
  transform: none;
}

/* 不支持 backdrop-filter 的浏览器：提高面板不透明度，优先保证文字对比度。 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .login-stage[data-style="glass"] .login-panel {
    background: rgba(250, 251, 255, .94);
  }
}

/* ============================================================== gradient */

.login-stage[data-style="gradient"] {
  --login-accent: #6d4ac4;
  --login-focus: #7a4de8;
  background:
    radial-gradient(120% 95% at 6% 2%, #f7c7a7 0%, rgba(247, 199, 167, 0) 54%),
    radial-gradient(95% 80% at 98% 0%, #f9b49c 0%, rgba(249, 180, 156, 0) 50%),
    radial-gradient(120% 95% at 50% 110%, #c7b2ff 0%, rgba(199, 178, 255, 0) 62%),
    linear-gradient(155deg, #f3a47c 0%, #f09a86 38%, #e59fae 64%, #c4a6ef 100%);
}

.login-stage[data-style="gradient"] .login-orb { display: none; }

.login-stage[data-style="gradient"] .login-arc {
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .3);
}
.login-stage[data-style="gradient"] .login-arc.is-one {
  top: -46vmax;
  left: -54vmax;
  width: 118vmax;
  height: 112vmax;
  transform: rotate(-9deg);
}
.login-stage[data-style="gradient"] .login-arc.is-two {
  right: -86vmax;
  bottom: -66vmax;
  width: 150vmax;
  height: 140vmax;
  border-color: rgba(255, 255, 255, .18);
}

.login-stage[data-style="gradient"] .login-frame {
  width: min(1080px, 100%);
  min-height: min(680px, calc(100dvh - 80px));
  padding: clamp(26px, 5vw, 72px);
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: clamp(28px, 4vw, 44px);
  background:
    linear-gradient(140deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .08)),
    radial-gradient(90% 80% at 12% 10%, #f7c9de 0%, rgba(247, 201, 222, 0) 56%),
    radial-gradient(82% 82% at 88% 8%, #cbb6ff 0%, rgba(203, 182, 255, 0) 58%),
    radial-gradient(95% 90% at 50% 112%, #a9c8ff 0%, rgba(169, 200, 255, 0) 62%),
    linear-gradient(140deg, #f6b8cf 0%, #dcb8f1 48%, #b9c6fb 100%);
  box-shadow:
    0 40px 90px rgba(112, 58, 90, .26),
    inset 0 1px 0 rgba(255, 255, 255, .62);
}

.login-stage[data-style="gradient"] .login-panel {
  width: min(440px, 100%);
  padding: clamp(28px, 3.4vw, 40px);
  border: 1px solid rgba(255, 255, 255, .86);
  border-radius: 20px;
  background: #fff;
  box-shadow:
    0 24px 60px rgba(84, 46, 78, .18),
    0 2px 6px rgba(84, 46, 78, .06);
}

.login-stage[data-style="gradient"] input[type="text"],
.login-stage[data-style="gradient"] input[type="password"] {
  border: 1px solid #8b8494;
  background: #fff;
  box-shadow: 0 1px 2px rgba(30, 20, 40, .03);
}
.login-stage[data-style="gradient"] input:focus {
  border-color: #8b7bd8;
  box-shadow: 0 0 0 3px rgba(139, 123, 216, .16);
}

.login-stage[data-style="gradient"] .login-submit {
  color: #fff;
  background: #1c2230;
  box-shadow: 0 10px 20px rgba(28, 34, 48, .22);
}
.login-stage[data-style="gradient"] .login-submit:hover:not(:disabled) {
  background: #2a3244;
  box-shadow: 0 13px 26px rgba(28, 34, 48, .28);
}
.login-stage[data-style="gradient"] .login-submit:disabled {
  background: #394254;
  box-shadow: none;
}
.login-stage[data-style="gradient"] .login-submit-arrow { display: inline-flex; }

.login-stage[data-style="gradient"] .login-style-btn[aria-pressed="true"] {
  border-color: rgba(109, 74, 196, .34);
  background: rgba(109, 74, 196, .12);
  color: #5a3a9e;
}

/* ---------------------------------------------------------------- motion */

@media (prefers-reduced-motion: no-preference) {
  .login-stage[data-style="glass"] .login-orb {
    animation: login-drift 28s ease-in-out infinite alternate;
    will-change: transform;
  }
  .login-stage[data-style="glass"] .login-orb.is-two {
    animation-duration: 34s;
    animation-delay: -9s;
  }
  .login-stage[data-style="glass"] .login-orb.is-three {
    animation-duration: 40s;
    animation-delay: -18s;
  }
}

@keyframes login-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(2.4vmax, 2vmax, 0) scale(1.05); }
}

@keyframes login-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .login-stage .login-orb { animation: none !important; }
  .login-submit,
  .login-reveal,
  .login-style-btn,
  .login-submit-arrow { transition: none; }
  .login-form[data-loading="true"] .login-spinner { animation-duration: 1.8s; }
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 720px) {
  .login-stage {
    place-items: start center;
    padding: 16px 14px calc(16px + env(safe-area-inset-bottom));
  }
  .login-stage[data-style="glass"] .login-panel { padding: 26px 20px; border-radius: 22px; }
  .login-stage[data-style="gradient"] .login-frame {
    min-height: 0;
    padding: 14px;
    border-radius: 26px;
  }
  .login-stage[data-style="gradient"] .login-panel {
    padding: 24px 20px;
    border-radius: 18px;
  }
  .login-brand { margin-bottom: 24px; }
  .login-stage .login-orb { opacity: .66; }
  .login-stage[data-style="glass"] .login-orb.is-two { opacity: .5; }
  .login-stage[data-style="gradient"] .login-arc.is-one { opacity: .6; }
}

@media (max-width: 640px) {
  .login-stage input[type="text"],
  .login-stage input[type="password"] { font-size: 16px; }
}

@media (max-width: 390px) {
  .login-stage { padding-inline: 12px; }
  .login-stage[data-style="glass"] .login-panel,
  .login-stage[data-style="gradient"] .login-panel { padding: 22px 17px; }
  .login-brand { margin-bottom: 20px; }
  .login-intro h1 { font-size: 24px; }
  .login-field { margin-bottom: 14px; }
}

@media (max-height: 620px) and (min-width: 721px) {
  .login-stage { padding-block: 18px; }
  .login-stage[data-style="gradient"] .login-frame { min-height: 0; padding-block: 28px; }
}

/* 页面高度不足时允许纵向滚动；任何装饰都不得制造横向滚动。 */
@media (max-height: 560px) {
  .login-stage { place-items: start center; }
}