: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; }
}

/* console3-theme:start */
/* 三号控制台：紫色主色，与二号控制台的深蓝主题区分。 */
:root {
  --bg: #2b1b3f;
  --bg-deep: #170e24;
  --cyan: #c18af2;
  --cyan-bright: #d9b6ff;
  --blue: #a18bd8;
}

body {
  background:
    radial-gradient(circle at 82% -8%, rgba(194, 138, 242, .14), transparent 34rem),
    radial-gradient(circle at 7% 92%, rgba(161, 139, 216, .09), transparent 28rem),
    var(--bg);
}

.workspace-sidebar {
  background: rgba(35, 18, 55, .92);
  border-color: rgba(211, 177, 255, .16);
}
.workspace-overline { color: #bca4e2; }
.workspace-brand-mark {
  border-color: rgba(216, 182, 255, .42);
  background: linear-gradient(145deg, rgba(193, 138, 242, .25), rgba(193, 138, 242, .06));
  box-shadow: inset 0 0 18px rgba(216, 182, 255, .09);
}
.workspace-brand-mark span { background: #d8b1ff; }
.workspace-account-badge {
  color: #d5c4ed;
  border-color: rgba(216, 182, 255, .18);
  background: rgba(193, 138, 242, .09);
}
.workspace-live-pulse {
  background: #d8b1ff;
  box-shadow: 0 0 0 4px rgba(216, 182, 255, .11), 0 0 13px rgba(216, 182, 255, .42);
}
.workspace-nav-item { color: #b9a7d7; }
.workspace-nav-item:hover { color: #f0e7ff; background: rgba(193, 138, 242, .11); }
.workspace-nav-item.is-active {
  color: #f0e7ff;
  border-color: rgba(216, 182, 255, .26);
  background: linear-gradient(90deg, rgba(193, 138, 242, .25), rgba(193, 138, 242, .08));
  box-shadow: inset 2px 0 0 #d8b1ff;
}
.workspace-nav-item:focus-visible { outline-color: #d8b1ff; }
.view-tab.is-active { color: #eee1ff; border-bottom-color: #d8b1ff; }
@media (max-width: 780px) {
  .workspace-nav-item.is-active { box-shadow: inset 0 -2px 0 #d8b1ff; }
}
/* console3-theme:end */