/* =========================================================
   登录页样式（login.css）
   ---------------------------------------------------------
   设计目标：一个自用工具的门面——干净、可信、一眼看懂要做什么。
   约束：浅色（业务上要判断「印在纸上什么样」）；不引外部字体；
        与工作台共用同一套 token 值（改色时两边一起改）。
   视觉语言：沿用工作台的「装订线 + 朱印」——卡片顶部 3px 装订线青，
            与右栏预览、流程条同一套语言。
   ========================================================= */

:root {
  /* 墨色三层：正文 / 次要 / 三级（三级只用于禁用与占位，对比度已按 AA 校准） */
  --ink: #17233A;
  --ink-soft: #5D6B7A;
  --ink-faint: #8794A3;

  /* 纸面三层：页面底 / 卡片 / 输入填充 */
  --paper: #F3F6FA;
  --panel: #FFFFFF;
  --field: #F5F8FC;
  --rule: #D9E1EA;
  --rule-strong: #C3CEDC;

  /* 装订线青（主色） */
  --thread: #1F63D8;
  --thread-strong: #1852B8;
  --thread-soft: #EAF1FE;
  --thread-line: #B8CDF5;

  /* 朱印（错误与阻断，全站唯一暖色） */
  --seal: #C64A19;
  --seal-ink: #7A2A0C;
  --seal-soft: #FFF1E8;
  --seal-line: #F0C4AC;

  /* 圆角两档：控件 6px / 卡片 10px */
  --radius-sm: 6px;
  --radius-lg: 10px;

  --ui-font: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --title-font: 'Heiti SC', 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui-font);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* 页面顶端一条装订线：与工作台栏头、右栏纸面同一语言，让登录页也属于同一个产品 */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--thread);
}

.card {
  width: 100%;
  max-width: 400px;
  padding: 32px 30px 26px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--thread);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(23, 35, 58, .06), 0 12px 32px rgba(23, 35, 58, .07);
}

/* ── 页头：品牌与一句话定位 ── */
.head { margin-bottom: 20px; }

h1 {
  margin: 0 0 8px;
  font-family: var(--title-font);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.35;
}

.sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* ── 自用声明：本页不提供注册。说清定位，而不是让人以为"找不到注册入口"。
     视觉上退一档：它是说明，不该和表单抢注意力。 ── */
.self-use {
  margin: 0 0 20px;
  padding: 9px 12px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-soft);
  background: var(--field);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--thread-line);
  border-radius: var(--radius-sm);
}
.self-use strong { color: var(--ink); font-weight: 500; }

/* ── 表单 ── */
.field { display: block; margin-bottom: 16px; }
.field > span { display: block; margin-bottom: 6px; font-size: 12px; color: var(--ink-soft); }

input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}
input::placeholder { color: var(--ink-faint); }
input:hover:not(:focus) { border-color: var(--rule-strong); }
input:focus {
  outline: 2px solid var(--thread-line);
  outline-offset: -1px;
  border-color: var(--thread);
  background: var(--panel);
}

/* 主按钮：与输入框等高（44px），一次点击就完成的事，别让它显得次要 */
button[type=submit] {
  width: 100%;
  min-height: 44px;
  margin-top: 4px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #FFFFFF;
  background: var(--thread);
  border: 1px solid var(--thread);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
button[type=submit]:hover:not(:disabled) { background: var(--thread-strong); border-color: var(--thread-strong); }
button[type=submit]:disabled { background: var(--field); color: var(--ink-soft); border-color: var(--rule); cursor: not-allowed; }

/* ── 密码可见性开关 ──
   这里曾出过一个真实缺陷：「显示」按钮横向铺满整个密码框并盖住输入区。
   根因是当时用全局 button 规则给了 width:100% 与 margin-top，
   而绝对定位的开关没有显式覆盖这两条 —— 于是它撑满一整行、还下坠 6px，
   用户点输入框时会点到开关上。
   教训：绝对定位的按钮必须显式写死 width / margin，不要依赖"没写就等于不受影响"。 */
.pw { position: relative; display: block; margin-bottom: 0; }
.pw input { padding-right: 60px; }

.pw-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  margin: 0;
  min-height: 28px;
  padding: 0 8px;
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  color: var(--thread);
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}
.pw-toggle:hover { background: var(--thread-soft); border-color: var(--thread-line); }
.pw-toggle:focus-visible { outline: 2px solid var(--thread); outline-offset: 1px; }

/* 密码规则：就近提醒，不等到提交后再报错 */
.field-note { margin: -8px 0 16px; font-size: 12px; color: var(--ink-soft); }

/* ── 反馈区 ── */
.error {
  margin: 16px 0 0;
  padding: 9px 12px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--seal-ink);
  background: var(--seal-soft);
  border: 1px solid var(--seal-line);
  border-left: 3px solid var(--seal);
  border-radius: var(--radius-sm);
}

.hint { margin: 16px 0 0; font-size: 13px; line-height: 1.7; color: var(--ink-soft); }

/* 窄屏：把 24px 的外边距让给内容 */
@media (max-width: 420px) {
  body { padding: 16px; align-items: flex-start; padding-top: 40px; }
  .card { padding: 26px 20px 22px; }
  h1 { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  button[type=submit] { transition: none; }
}

/* ── 备案信息条（合规要求 · 全站一致，勿只改本页）──
   网站底部展示 ICP 备案号，并链接回工信部备案官网首页。
   做成一条细条：它是合规声明，不该和登录表单抢注意力。
   公安联网备案号的位置一并预留（ .site-legal__police ），审核通过后填入即可。 */
.site-legal {
  margin: 18px 0 0;
  padding-top: 12px;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
}
.site-legal a { color: var(--ink-soft); text-decoration: none; }
.site-legal a:hover { color: var(--thread); text-decoration: underline; }
.site-legal a:focus-visible { outline: 2px solid var(--thread); outline-offset: 2px; }
/* 公安联网备案号（预留）：与 ICP 备案号并排。图标必须**本地托管**——
   现在是外链的话会被 CSP 的 default-src 'self' 静默拦掉（不报错、就是不显示） */
.site-legal__police { display: inline-flex; align-items: center; gap: 4px; margin-left: 14px; }
.site-legal__police img { height: 14px; width: 14px; }
.site-legal__police[hidden] { display: none; }