/*
 * login.css — 登录 / 首次注册页样式（自包含，**不复用 app.css**）
 *
 * 为什么不复用 app.css：app.css 在登录闸门之后（未登录拿不到），而登录页必须免登录可访问。
 * 本页是唯一免登录的页面，样式独立最省事，也避免把整套应用样式暴露给未登录者。
 *
 * 触屏可用性（同一页要同时服务电脑与手机）：
 *   - 输入框 font-size 16px —— 小于 16px 时 iOS 聚焦会自动放大页面，很跳
 *   - 按钮与输入框高度 ≥ 44px —— 触摸目标下限
 *   - 用 env(safe-area-inset-*) 留出刘海/home 指示条（需 viewport-fit=cover，见 login.html）
 *   -:active 明确反馈（触屏没有 hover）
 */

:root {
  --accent: #4f46e5;
  --accent-dark: #4338ca;
  --bg: #f3f4f6;
  --card: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --line: #e5e7eb;
  --input-bg: #ffffff;
  --danger: #dc2626;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1115;
    --card: #171a21;
    --text: #e5e7eb;
    --muted: #9ca3af;
    --line: #2a2f3a;
    --input-bg: #11141a;
    --danger: #f87171;
  }
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  height: 100%;
}

body {
  margin: 0;
  /* ⚠️ 用 vh/dvh 而不是 `min-height: 100%`：百分比高度依赖父级，html 高度为 auto 时会被忽略，
     垂直居中直接失效。dvh 让移动端动态工具栏出现时也不产生多余滚动（旧内核退回 vh）。 */
  min-height: 100vh;
  min-height: 100dvh;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(24px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right))
    calc(24px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  background: var(--bg);
  color: var(--text);
  font:
    15px/1.6 -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    'PingFang SC',
    'Microsoft YaHei',
    sans-serif;
}

.card {
  width: 100%;
  max-width: 380px;
  padding: 28px 24px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 10px 30px rgb(0 0 0 / 8%);
}

/* ---- 品牌区 ---- */
.brand {
  text-align: center;
  margin-bottom: 22px;
}

.logo {
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  border-radius: 14px;
  background: var(--accent);
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand h1 {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 600;
}

.sub {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

/* ---- 表单 ---- */
.field {
  display: block;
  margin-bottom: 14px;
}

.field span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 13px;
}

.field input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--text);
  font-size: 16px; /* 关键：低于 16px 时 iOS 聚焦会放大整页 */
  line-height: 1.4;
}

.field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.hint {
  margin: -6px 0 12px;
  color: var(--muted);
  font-size: 12px;
}

.err {
  margin: 0 0 12px;
  padding: 9px 11px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
  font-size: 13px;
}

.btn {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.btn:hover {
  background: var(--accent-dark);
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ---- 辅助入口（两颗次级按钮，一左一右）---- */
/* 0.9.1：原来是「还没有账号？注册一个 · 忘记密码？」一串小灰字，触屏上两处都难点中，
   现在改成两颗等宽按钮：左「新用户注册」／右「忘记密码」。等宽靠两列网格，不靠 padding 凑。 */
.aux {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

/* ⚠️ 必须显式写：上面的 display: grid 会顶掉 HTML 的 hidden 属性（hidden 只是 UA 的 display:none，
   优先级敌不过类选择器）⇒ 库里没账号时「忘记密码」会照样露出来。 */
.aux[hidden] {
  display: none;
}

/* 只剩一颗（管理员关了自主注册）时占满整行 —— 两列网格里单放一颗会缩成半宽贴左边 */
.aux.one {
  grid-template-columns: 1fr;
}

.aux-btn {
  min-height: 44px; /* 触摸目标下限 */
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  /* 文案短的（返回登录）不会溢出；万一以后换成长句，宁可省略号也不要撑破卡片 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

/* ⚠️ 同上：这颗也可能被 JS 置 hidden */
.aux-btn[hidden] {
  display: none;
}

.aux-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.aux-btn:active {
  transform: translateY(1px);
  background: var(--bg);
}

/* 「管理员已关闭自主注册，请向管理员申请账号」那类说明 —— 按钮下面单独一行，塞进按钮里会被截断 */
.aux-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

/* ⚠️ 0.8.73 的教训：`<p>` 有 UA 的 display:block，这里没设过 display，但仍然显式写一条，
   免得以后给它加 display 时把 hidden 顶掉。 */
.aux-note[hidden] {
  display: none;
}

/* ---- 重置密码弹窗 ---- */
/* 只有一层滚动：外层 .modal-card 定 max-height，正文 .modal-body 自己滚。
   ⚠️ 别在 .modal-card 或 .modal 上再叠 max-height + overflow —— 两层一叠正文会算成 0 高。 */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* ⚠️ 必须显式写：上面的 display: flex 会顶掉 HTML 的 hidden 属性 */
.modal[hidden] {
  display: none;
}

.modal-mask {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 45%);
}

.modal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 420px;
  max-height: calc(100dvh - 40px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 20px 50px rgb(0 0 0 / 28%);
}

/* 抽屉抓手：只在窄屏（底部抽屉形态）显示，电脑版是居中弹窗，顶部不需要这根条 */
.modal-grip {
  display: none;
  width: 40px;
  height: 4px;
  margin: 8px auto 0;
  border-radius: 999px;
  background: var(--line);
}

.modal-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 12px 12px 18px;
  border-bottom: 1px solid var(--line);
}

.modal-head h2 {
  flex: 1;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.modal-x {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.modal-x:active {
  background: var(--bg);
}

.modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 18px;
  font-size: 13px;
  line-height: 1.6;
  text-align: left;
}

.modal-foot {
  padding: 10px 16px 14px;
  border-top: 1px solid var(--line);
}

.modal-ok {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.modal-ok:active {
  transform: translateY(1px);
}

.modal-body .who {
  margin: 12px 0 6px;
  font-weight: 600;
}

.modal-body .who:first-of-type {
  margin-top: 0;
}

.modal-body .steps {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}

.modal-body .steps li {
  margin-bottom: 8px;
}

.modal-body .steps li:last-child {
  margin-bottom: 0;
}

/* 命令块：窄屏上整条命令必然超宽，横向滚动而不是断行 —— 断开的路径没法照着敲 */
.modal-body code {
  display: block;
  margin-top: 5px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.modal-body .note {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: 12px;
}

/* ---- 页脚说明 ---- */
.foot {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  line-height: 1.5;
}

/* 出厂账号与密码要能一眼扫到，别混进灰色说明里 */
.foot b {
  color: var(--text);
  font-weight: 600;
}

/* ============================================================================
 * 【窄屏】重置密码说明 —— 居中弹窗改成底部抽屉（0.9.1）
 *
 * 为什么：手机上居中的小卡片只有 420px 宽却悬在屏幕中间，逐条命令要横向滚动，
 *        拇指也够不到顶部的 ×。改成从下沿升起的抽屉，短拇指行程、命令条贴近底部。
 *
 * ⚠️ 只有一层滚动：仍然由 .modal-body 自己滚（.modal-card 定 max-height）。
 *    别在这里给 .modal-body 再加 max-height + overflow —— 两层一叠正文会算成 0 高（0.8.54 的坑）。
 * ==========================================================================*/
@media (max-width: 600px) {
  .modal {
    align-items: flex-end;
    padding: 0;
  }

  .modal-card {
    max-width: none;
    max-height: 88dvh;
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
    box-shadow: 0 -10px 40px rgb(0 0 0 / 22%);
    animation: sheet-up 0.22s ease-out;
  }

  .modal-grip {
    display: block;
  }

  /* 底部那行按钮要让开 iOS 的 home 指示条 */
  .modal-foot {
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
}

@keyframes sheet-up {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

/* 动效敏感的用户直接给出终态（系统开着「减弱动态效果」时） */
@media (prefers-reduced-motion: reduce) {
  .modal-card {
    animation: none;
  }
}