/* 乾启算力看板 · login.css (§6) */
body.login { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; min-height: 100dvh; }

/* left: the mark drawing itself in, on deep paper / deep space */
.login-field { position: relative; overflow: hidden; background: var(--bg-deep); display: grid; place-items: center; }
.login-art { position: absolute; left: 50%; top: 50%; width: 944px; height: 944px; transform: translate(-50%, -50%); overflow: visible; }
.login-orbits circle { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.login-sats circle { fill: var(--text-3); opacity: .45; }
/* the invisible orbit-sized circle makes the group's fill-box centred on C, so it spins about the mark's centre */
.login-sats .sat { transform-box: fill-box; transform-origin: center; }
.login-sats .sat-box { fill: none; stroke: none; }
.login-mark .lm-p { stroke: var(--brand-ink); stroke-dasharray: 100 100; stroke-dashoffset: 0; }
.login-nodes .lm-n { fill: var(--brand-ink); transform-box: fill-box; transform-origin: center; }
/* the client lockup's order and proportions: QIANQI TECHNOLOGY over 乾启科技 (0.9×, 0.58em tracking) */
.login-lockup { position: absolute; left: 40px; bottom: 40px; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 9px; line-height: 1; }
.login-lockup span { font-size: 20px; font-weight: 500; letter-spacing: .05em; color: var(--text); white-space: nowrap; }
.login-lockup b { font-size: 18px; font-weight: 600; letter-spacing: .58em; margin-right: -.58em; color: var(--text); white-space: nowrap; }

@media (prefers-reduced-motion: no-preference) {
  .login-mark .lm-p { animation: lm-draw var(--dur-draw, 900ms) var(--ease-out) both; }
  .login-mark .lm-big { --dur-draw: 900ms; animation-delay: 0ms; }
  .login-mark .lm-small { --dur-draw: 600ms; animation-delay: 150ms; }
  .login-mark .lm-bowl { --dur-draw: 900ms; animation-delay: 250ms; }
  .login-mark .lm-diag { --dur-draw: 500ms; animation-delay: 500ms; }
  .login-nodes .lm-n { animation: lm-pop 300ms var(--ease-pop) both; }
  .login-nodes .lm-n1 { animation-delay: 0ms; }
  .login-nodes .lm-n2 { animation-delay: 150ms; }
  .login-nodes .lm-n3 { animation-delay: 250ms; }
  .login-nodes .lm-n4 { animation-delay: 500ms; }
  .login-nodes .lm-n5 { animation-delay: 1000ms; }
}
/* the satellites drift (one turn per 3 / 5 minutes) — the one ambient loop allowed outside the live sweep (§7.7) */
@media (prefers-reduced-motion: no-preference) {
  .login-sats .sat-a { animation: login-orbit 180s linear infinite reverse; }
  .login-sats .sat-b { animation: login-orbit 300s linear infinite; animation-delay: -40s; }
}
@keyframes login-orbit { to { transform: rotate(360deg); } }
@keyframes lm-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes lm-pop { from { transform: scale(0); } to { transform: scale(1); } }

/* right: the form */
.login-form { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 48px 24px; background: var(--bg); }
.login-theme { position: absolute; top: 20px; right: 20px; }
@media (pointer: coarse), (max-width: 639px) { .login-theme { width: 44px; height: 44px; } }
.login-form form { width: 360px; max-width: 100%; display: flex; flex-direction: column; }
.login-eyebrow { font-size: 13px; color: var(--text-3); letter-spacing: var(--track-eyebrow); }
.login-form h1 { font-size: 32px; font-weight: 600; margin-top: 10px; letter-spacing: .01em; }
.login-intro { font-size: 14px; color: var(--text-2); margin-top: 8px; margin-bottom: 32px; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.field label { font-size: 13px; color: var(--text-2); }
/* the border is the only thing that marks the field (its fill is 1.07:1 from the page): ≥ 3:1 (WCAG 1.4.11) */
.field input {
  height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid color-mix(in oklab, var(--text) 45%, var(--bg-raised)); background: var(--bg-raised); color: var(--text);
  font-size: 15px; outline: none; transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); width: 100%; min-width: 0;
}
@media (max-width: 639px), (pointer: coarse) { .field input { font-size: 16px; } }   /* no iOS focus zoom */
.field input:hover { border-color: color-mix(in oklab, var(--text) 65%, var(--bg-raised)); }
.field input:focus { border-color: var(--text); box-shadow: 0 0 0 3px color-mix(in oklab, var(--text) 12%, transparent); }
.field input[aria-invalid="true"] { border-color: var(--fault); }
.pw { position: relative; display: flex; }
.pw input { padding-right: 60px; }
.pw-toggle { position: absolute; right: 0; top: 0; width: 56px; height: 44px; border-radius: 0 10px 10px 0; font-size: 13px; color: var(--text-2); text-align: center; }
.pw-toggle:hover { color: var(--text); }
.pw-toggle:focus-visible { outline-offset: -4px; border-radius: 8px; }
.caps { font-size: 13px; color: var(--held); font-weight: 500; }   /* tone text: ≥ 13px / 500 (§2.1) */
.err { min-height: 20px; font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 8px; margin: -4px 0 12px; }
.err:empty { visibility: hidden; }
.err::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fault); flex: none; }
.submit {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; height: 46px; border-radius: var(--r-pill);
  background: var(--text); color: var(--text-on-ink); font-size: 15px; font-weight: 600; letter-spacing: .08em;
  transition: background-color var(--dur-1) var(--ease-out), opacity var(--dur-1);
}
.submit:hover { background: color-mix(in oklab, var(--text) 88%, var(--bg)); }
.submit:disabled { opacity: .85; cursor: progress; }
.submit-spin { display: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in oklab, var(--text-on-ink) 30%, transparent); border-top-color: var(--text-on-ink); border-right-color: var(--text-on-ink); }
.submit.is-loading .submit-spin { display: block; animation: login-spin 900ms linear infinite; }
@keyframes login-spin { to { transform: rotate(360deg); } }
.login-foot { margin-top: 28px; font-size: 12px; color: var(--text-3); text-align: center; }

@media (max-width: 899px) {
  body.login { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .login-field { height: auto; padding: 48px 24px 28px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
  .login-art { position: relative; left: auto; top: auto; transform: none; width: 314px; height: 314px; margin: -97px; }
  .login-lockup { position: relative; left: auto; bottom: auto; z-index: 1; }
  .login-form { place-items: start center; padding: 32px 24px 48px; }
  .login-theme { top: 12px; right: 12px; position: fixed; }
  .login-form h1 { font-size: 28px; }
}