/* 两道门（前台访问门 / 后台登录）与错误页共用这一份：一屏居中，不做多余装饰。
 *
 * 这一版按需求往"正式"调了一档（原话：「账号密码登录弄得好看一点，正式一点」）：
 * 字段名从 `sr-only` 里搬出来摆在框上面、两个字段竖着排、错误条从一行红字改成一块
 * 有底的提示。**样式只在这里一处** —— 后台登录页以前挂着 `.admin-login-form` 那几条，
 * 可它压根不加载 `admin.css`，于是那些规则一个字都没生效过（表单该竖着排却挤成一行、
 * 用户名框是原生样子）。那是 `.btn` 那类漏法的第三种表现，见 tests/test_accounts.py
 * 那条"模板里用上的 class 必须在真加载的样式表里有定义"。
 */
.gate-page, .error-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  background: var(--surface);
}

.gate { width: 100%; display: grid; place-items: center; }

.gate-card {
  width: 100%;
  max-width: 420px;
  padding: var(--sp-6) var(--sp-5);
  background: var(--page);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-1);
}

.gate-mark { color: var(--ink-3); margin-bottom: var(--sp-4); }
.gate-card h1 { font-size: var(--fs-h2); margin: 0 0 var(--sp-1); letter-spacing: -.02em; }
/* 站点副标题那一行：这一轮起它是「技术有方向，创新无止境 —— 技术发展中心」 */
.gate-sub { margin: 0 0 var(--sp-4); color: var(--ink-3); font-size: var(--fs-small); }
.gate-lead { color: var(--ink-2); margin: 0 0 var(--sp-4); }
.gate-foot { margin: var(--sp-5) 0 0; }

.gate-error {
  margin: 0 0 var(--sp-4);
  padding: 10px var(--sp-3);
  color: var(--bad-ink);
  background: var(--bad-bg);
  border: 1px solid color-mix(in oklab, var(--bad-ink) 32%, var(--hairline));
  border-radius: var(--r-2);
  font-size: var(--fs-small);
}

/* 两个字段竖着排：账号在上、口令在下，字段名看得见 */
.gate-form { display: grid; gap: var(--sp-3); }
.gate-field { display: grid; gap: 6px; }
.gate-label { font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); }

.gate-input {
  width: 100%;
  min-width: 0;
  padding: 12px var(--sp-3);
  font: inherit;
  color: var(--ink);
  background: var(--page);
  border: 1px solid var(--hairline);
  border-radius: var(--r-2);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.gate-input::placeholder { color: var(--ink-3); }
.gate-input:hover { border-color: var(--axis); }
.gate-input:focus-visible { border-color: var(--accent); }
/* 口令那一格拉开字距：遮挡之外，也让人确认自己敲的是圆点不是字母 */
.gate-input[type=password] { letter-spacing: .16em; }

.gate-submit {
  margin-top: var(--sp-1);
  padding: 12px 20px;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: var(--r-2);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.gate-submit:hover:not(:disabled) { background: var(--accent-dim); }
.gate-submit:active:not(:disabled) { transform: translateY(1px); }
.gate-submit:disabled { opacity: .5; cursor: not-allowed; }

.error-code {
  font-size: 40px; font-weight: 600; color: var(--ink-3);
  margin: 0 0 var(--sp-2); letter-spacing: -.02em;
}