/* ==================================================================
   pages/login.css — 登录 / 首次设置 TOTP（页面层：只写本页布局几何）
   ------------------------------------------------------------------
   依赖：static/base.css 的 token 与组件——
     .container（版心）/ .card / .btn-primary / .btn-lg / .btn-block
     input:not([type]) / .form-input / .form-label / .form-row
     .g-error（错误提示语义色）/ .text-mute / .text-xs / .g-rise
     .nav-* / .footer / .footer-links / :focus-visible
   本页只补 base 未提供的几何：门面品牌区、登录卡宽高、TOTP 折叠区、
   二维码与备用码块、一次性成功提示。
   纪律（《前端优化方案_20260925.md》§3 / §4-6 / §4-8 / §4-9 / §4-15 /
         §4-16 / §4-27 / §9）：
     1. 不写字面色值（#hex、rgb()、hsl() 一律不出现），全部走 var(--g-*)；
     2. 无 !important；
     3. 字号一律走 --g-fs-*，最小正文 12.5px（4-27）；
     4. 不写 outline: none，焦点环统一交给 base 的 :focus-visible（4-15）；
     5. 行高用无单位数值，不写 rem，免得被 html 字号影响；
     6. 不改 base.css，不改 HTML 既有 class 名与任何 id。
   ================================================================== */

/* ---------- 0. 页面骨架：卡片与页脚之间留白，页脚推底 ---------- */
body[data-page="login"] { display: flex; flex-direction: column; }
body[data-page="login"] > .container { flex: 1 0 auto; }

/* ---------- 1. 门面品牌区（图标 + 渐变标题；渐变只引用 base 的 ink token） ----------
   桌面端绝对定位到卡片上方，卡片因此在视口里居中；
   窄屏回到正常流，自然堆在卡片上面。 */
.login-brand {
  position: relative;
  margin: 0 auto clamp(16px, 3vw, 28px);
  padding-top: clamp(10px, 2.4vw, 22px);
  text-align: center;
}
.login-brand .brand-icon {
  width: 64px; height: 64px; margin: 0 auto var(--g-sp-3);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem; line-height: 1;
  background: var(--g-wash-1);
  border-radius: var(--g-r-xl);
  box-shadow: 0 12px 28px -10px var(--g-primary-soft);
}
.login-brand h1 {
  font-size: var(--g-fs-hero); font-weight: 900; letter-spacing: 0.5px;
  background: var(--g-grad-ink);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.login-brand .brand-sub {
  margin: var(--g-sp-2) auto 0; max-width: 44ch;
  font-size: var(--g-fs-sm); line-height: 1.6;
  color: var(--g-mute);
}

/* ---------- 2. 登录卡：宽 380–420px，居中；表单控件高度 ≥44px（移动端要求） ---------- */
.login-card { width: 100%; max-width: 420px; margin: 0 auto var(--g-sp-4); padding: var(--g-sp-5); }
#page-login .login-card { min-height: 352px; }
#page-totp-setup .login-card { max-width: 480px; }

/* 控件统一 ≥44px（4-15 触达）：base 的 .form-input 默认 38px，这里只调本页高度 */
.login-card .form-input { min-height: 44px; font-size: var(--g-fs-md); }
.login-card .form-label { font-size: var(--g-fs-base); }
.login-card .form-row:last-of-type { margin-bottom: var(--g-sp-4); }
/* 4-16：#94a3b8 提示字改 --g-mute（白底 4.76:1），并给一点上边距 */
.login-card .form-hint { display: block; margin-top: var(--g-sp-1); color: var(--g-mute); }

/* 主按钮：走 base 的 .btn-primary + .btn-lg + .btn-block，只补字重与字距 */
#btn-login { font-weight: 700; letter-spacing: 1px; }
/* 4-15：提交中禁用态由 base 的 :disabled 负责（白字压深灰，对比度已达标），
   这里只补"禁用时不响应 hover"的观感，不覆写颜色 */
#btn-login:disabled { cursor: not-allowed; }

/* ---------- 3. 提示 / 错误（语义色全走 base：.g-error / --g-danger / --g-ok） ---------- */
.form-msg {
  margin-top: var(--g-sp-3);
  padding: var(--g-sp-3) var(--g-sp-4);
  border: 1px solid transparent;
  border-radius: var(--g-r-sm);
  font-size: var(--g-fs-sm);
  text-align: center;
}
.form-msg:empty { display: none; }

/* ---------- 4. 首次设置 TOTP（流程不变，只改外观） ---------- */
.totp-section {
  display: none;
  margin-top: var(--g-sp-4);
  padding-top: var(--g-sp-4);
  border-top: 2px dashed var(--g-line);
}
.totp-section.show { display: block; }

.totp-hint {
  margin-bottom: var(--g-sp-4);
  padding: var(--g-sp-3) var(--g-sp-4);
  border: 1px solid var(--g-line);
  border-left: 3px solid var(--g-warn);
  border-radius: var(--g-r-sm);
  background: var(--g-warn-bg); color: var(--g-warn);
  font-size: var(--g-fs-sm); line-height: 1.6;
  text-align: left;
}

/* 页面切换（.page / .page.active 语义不变，动效方向与 base 的 .g-rise 一致；
   prefers-reduced-motion 由 base 统一关闭，本文件无需再写一份） */
.page { display: none; }
.page.active { display: block; animation: page-in var(--g-dur-2) var(--g-ease); }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.qr-wrapper { margin: var(--g-sp-4) 0; text-align: center; }
.qr-wrapper img {
  width: clamp(168px, 52vw, 200px); height: auto;
  margin: 0 auto var(--g-sp-3);
  padding: var(--g-sp-2);
  background: var(--g-surface);
  border: 1px solid var(--g-line);
  border-radius: var(--g-r-md);
}
/* 手动密钥（JS 注入的 span / code） */
.qr-wrapper span, .qr-wrapper code { font-size: var(--g-fs-xs); color: var(--g-mute); }
.qr-wrapper code {
  display: inline-block; margin-top: var(--g-sp-1);
  padding: var(--g-sp-1) var(--g-sp-2);
  background: var(--g-surface-3);
  border-radius: var(--g-r-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-all;
}

.backup-codes-box {
  margin: var(--g-sp-3) 0;
  padding: var(--g-sp-4);
  background: var(--g-surface-2);
  border: 1px solid var(--g-line);
  border-radius: var(--g-r-md);
}
.backup-box-title { font-size: var(--g-fs-base); font-weight: 700; color: var(--g-ink-2); }
.backup-codes-list { display: flex; flex-wrap: wrap; gap: var(--g-sp-2); margin-top: var(--g-sp-3); }
.backup-code {
  padding: 3px var(--g-sp-3);
  background: var(--g-surface);
  border: 1px solid var(--g-line);
  border-radius: var(--g-r-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--g-fs-sm); letter-spacing: 1px;
}
.backup-warning { margin-top: var(--g-sp-3); font-size: var(--g-fs-xs); font-weight: 600; color: var(--g-danger); }

/* ---------- 5. 响应式：与 base 导航断点 860px 对齐；390px 单列紧凑 ---------- */
@media (max-width: 860px) {
  .login-brand { margin-bottom: var(--g-sp-3); padding-top: 0; }
  .login-brand .brand-icon { width: 54px; height: 54px; font-size: 1.55rem; }
  .login-brand .brand-sub { font-size: var(--g-fs-xs); }
}
@media (max-width: 480px) {
  .login-card { padding: var(--g-sp-4); }
  .login-card .form-input { min-height: 46px; }
  #btn-login { height: 46px; }
  .backup-codes-list { gap: 6px; }
}

/* 桌面端：品牌区留在正常流，只把版心整体下压一点，让"品牌 + 卡片"这一组在视口里偏中。
   注意（Lead 实测修正）：原实现把 .login-brand 用 `position:absolute; bottom:100%` 抬到版心之上，
   那块区域正是 sticky 导航（z-index:100）所在，桌面端站名被导航整个盖住、login 页看不到门面标题。 */
@media (min-width: 861px) {
  body[data-page="login"] > .container { padding-top: clamp(24px, 5vh, 56px); }
}