/* Login-only styling extracted from the running Test design system, 2026-10-23. */
@font-face { font-family: Inter; src: url("login-fonts-20261023/inter.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Noto Sans SC"; src: url("login-fonts-20261023/noto-sans-sc.woff2") format("woff2"); font-display: swap; }
:root { --sans: Inter, "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { min-width: 320px; overflow-x: clip; }
body { font-family: var(--sans); font-size: 14px; line-height: 1.6; color: #17202d; background: #f5f7f9; -webkit-font-smoothing: antialiased; }
button, select, input { font: inherit; }
:root {
  --login-ink:    #0b1526;
  --login-ink-2:  #12213c;
  --login-line:   rgba(150,180,220,0.09);
  --login-cyan:   #4ecdd4;
  --login-lime:   #c3d640;
  --login-fg:     #eaf1f8;
  --login-muted:  #8497b3;
  --login-mono:   "SFMono-Regular", "Roboto Mono", ui-monospace, Menlo, monospace;
}

.ds-login {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  padding: clamp(1.5rem, 6vw, 7rem);
  overflow: hidden;
  color: var(--login-fg);
  background:
    radial-gradient(120% 80% at 12% -10%, rgba(78,205,212,0.10), transparent 55%),
    radial-gradient(90% 90% at 108% 120%, rgba(27,42,74,0.85), transparent 60%),
    linear-gradient(158deg, var(--login-ink-2), var(--login-ink));
}
/* 细网格 data-field，向左上聚焦淡出 */
.ds-login::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--login-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--login-line) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(125% 95% at 18% 28%, #000 38%, transparent 86%);
          mask-image: radial-gradient(125% 95% at 18% 28%, #000 38%, transparent 86%);
  pointer-events: none;
}
/* 缓慢漂移的青色极光 */
.ds-login::after {
  content: "";
  position: absolute;
  inset: -25%;
  background: radial-gradient(38% 38% at 32% 42%, rgba(78,205,212,0.13), transparent 70%);
  pointer-events: none;
}

/* 背景幽灵字：产品自己的模块名作为纹理 */
.ds-login-ghost {
  position: absolute;
  right: clamp(-1rem, 1vw, 2rem);
  bottom: 8vh;
  text-align: right;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-size: clamp(3rem, 10vw, 8.5rem);
  color: rgba(255,255,255,0.028);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

.ds-login-panel {
  position: relative;
  z-index: 1;
  max-width: 31rem;
}

.ds-login-status {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin-bottom: 2.4rem;
  font-family: var(--login-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--login-muted);
}
.ds-login-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--login-lime);
  box-shadow: 0 0 0 0 rgba(195,214,64,0.5);
}

.ds-login-eyebrow {
  font-family: var(--login-mono);
  font-size: 12px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--login-cyan);
  margin-bottom: 1rem;
}
.ds-login-title {
  font-size: clamp(2.3rem, 5.4vw, 3.9rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.03;
  margin-bottom: 1.1rem;
}
.ds-login-rule {
  width: 46px;
  height: 2px;
  border-radius: 2px;
  background: var(--login-cyan);
  margin-bottom: 1.2rem;
}
.ds-login-sub {
  max-width: 25rem;
  font-size: 15px;
  line-height: 1.75;
  color: var(--login-muted);
  margin-bottom: 2.6rem;
}

.ds-login-cta {
  display: inline-flex;
  align-items: center;
  gap: .65em;
  padding: .95em 1.5em;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #e9f0f5);
  color: #0d1b30;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 30px -12px rgba(78,205,212,0.55), inset 0 1px 0 rgba(255,255,255,0.6);
  transition: transform .18s ease, box-shadow .25s ease;
}
.ds-login-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 42px -14px rgba(78,205,212,0.8); }
.ds-login-cta:active { transform: translateY(0); }
.ds-login-cta:focus-visible { outline: 2px solid var(--login-cyan); outline-offset: 3px; }
.ds-login-cta[disabled] { opacity: .55; cursor: default; transform: none; box-shadow: none; }
.ds-login-cta svg { width: 18px; height: 18px; }

/* 账号密码登录表单：与 .ds-login-cta 同一视觉语言，深色玻璃输入框 + 亮色主按钮 */
.ds-login-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7em;
}
.ds-login-input {
  flex: 1 1 10rem;
  min-width: 0;
  height: auto;
  padding: .95em 1.1em;
  border: 1px solid rgba(150,180,220,0.22);
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  color: var(--login-fg);
  font-family: var(--login-mono);
  font-size: 15px;
  letter-spacing: .08em;
  transition: border-color .18s ease, background .18s ease, box-shadow .25s ease;
}
.ds-login-input::placeholder {
  color: var(--login-muted);
  letter-spacing: normal;
  font-family: inherit;
}
.ds-login-input:focus {
  outline: none;
  border-color: var(--login-cyan);
  background: rgba(255,255,255,0.08);
  box-shadow: 0 0 0 3px rgba(78,205,212,0.16);
}
.ds-login-input[disabled] { opacity: .55; }

.ds-login-foot {
  position: absolute;
  left: clamp(1.5rem, 6vw, 7rem);
  bottom: 2.2rem;
  z-index: 1;
  font-family: var(--login-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.26);
}

/* 动效：仅在用户未要求减弱动画时启用 */
@media (prefers-reduced-motion: no-preference) {
  .ds-login::after { animation: ds-login-drift 20s ease-in-out infinite alternate; }
  .ds-login-dot   { animation: ds-login-pulse 2.4s ease-out infinite; }
  .ds-login-panel > * { animation: ds-login-rise .7s cubic-bezier(.2,.7,.2,1) backwards; }
  .ds-login-panel > *:nth-child(1) { animation-delay: .04s; }
  .ds-login-panel > *:nth-child(2) { animation-delay: .10s; }
  .ds-login-panel > *:nth-child(3) { animation-delay: .16s; }
  .ds-login-panel > *:nth-child(4) { animation-delay: .22s; }
  .ds-login-panel > *:nth-child(5) { animation-delay: .28s; }
  .ds-login-panel > *:nth-child(6) { animation-delay: .34s; }
  /* 第 7 个是加了 logo 底片之后多出来的一格，漏了它会没延迟直接冒出来 */
  .ds-login-panel > *:nth-child(7) { animation-delay: .40s; }
}
@keyframes ds-login-drift { from { transform: translate(-4%, -2%); } to { transform: translate(6%, 4%); } }
@keyframes ds-login-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(195,214,64,0.5); }
  70%  { box-shadow: 0 0 0 9px rgba(195,214,64,0); }
  100% { box-shadow: 0 0 0 0 rgba(195,214,64,0); }
}
@keyframes ds-login-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (max-width: 720px) {
  .ds-login { align-items: flex-start; padding-top: 13vh; }
  .ds-login-ghost { display: none; }
}