:root {
  color-scheme: dark;
  --bg: #0d1012;
  --bg-deep: #090b0d;
  --surface: #15191c;
  --line: rgba(226, 235, 238, .1);
  --line-strong: rgba(226, 235, 238, .17);
  --text: #eef2f1;
  --text-soft: #b1babc;
  --text-dim: #7d888b;
  --cyan: #6dd5d0;
  --cyan-bright: #8be8df;
  --red: #ef8f83;
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--bg-deep); }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 90% -5%, rgba(109, 213, 208, .1), transparent 30rem),
    radial-gradient(circle at 6% 75%, rgba(128, 169, 232, .055), transparent 26rem),
    var(--bg);
  font-family: var(--font);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

.login-shell {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 24px 18px calc(24px + env(safe-area-inset-bottom));
}
.login-card {
  width: 100%;
  max-width: 380px;
  padding: 26px 24px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(109, 213, 208, .07), rgba(21, 25, 28, .94) 55%, rgba(21, 25, 28, .98));
  box-shadow: 0 22px 55px rgba(0, 0, 0, .35);
}

.brand-lockup { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--cyan-bright);
  border: 1px solid rgba(109, 213, 208, .21);
  border-radius: 12px;
  background: rgba(109, 213, 208, .08);
  font-family: var(--mono);
  font-size: 13px;
}
.brand-copy { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.eyebrow { color: var(--text-dim); font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.brand-copy h1 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }

.login-form { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field span { color: var(--text-dim); font-size: 11px; }
.field input {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: rgba(0, 0, 0, .22);
  font-family: var(--font);
  font-size: 16px;
  transition: border-color 150ms ease, background 150ms ease;
}
.field input:focus-visible {
  border-color: rgba(109, 213, 208, .5);
  background: rgba(0, 0, 0, .3);
  outline: 2px solid rgba(109, 213, 208, .35);
  outline-offset: 1px;
}

.form-error {
  margin: 0;
  padding: 9px 11px;
  color: var(--red);
  border: 1px solid rgba(239, 143, 131, .28);
  border-radius: 9px;
  background: rgba(239, 143, 131, .07);
  font-size: 12px;
}

.submit-button {
  min-height: 46px;
  margin-top: 2px;
  color: #08201e;
  border: 1px solid rgba(109, 213, 208, .45);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--cyan-bright), var(--cyan));
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 150ms ease, opacity 150ms ease;
}
.submit-button:hover { filter: brightness(1.06); }
.submit-button:focus-visible { outline: 2px solid var(--cyan-bright); outline-offset: 2px; }
.submit-button[disabled] { opacity: .55; cursor: progress; }

.login-note { margin: 18px 0 0; color: var(--text-dim); font-size: 10px; line-height: 1.6; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}