HEL-56: 整理项目说明手册

Co-authored-by: multica-agent <github@multica.ai>

docs/HANDOFF.md

@@ -1,3 +1,5 @@
+⚠️ 本文档已过时，仅留档备查，请勿删除。当前代码状态请看 `README.md`、`项目需求.md`、`最新进度.md` 和 `任务清单.md`。
+
 # 项目交接说明
 
 更新时间：2026-08-06

docs/README.md

@@ -0,0 +1,21 @@
+# 总账项目手册
+
+最后核对：2026-08-23。核对依据是当前 `main` 最新代码（`5f21527`）、数据库迁移、接口、测试和近期提交记录。
+
+这是接手本项目的第一站。阅读顺序如下：
+
+1. [项目需求](项目需求.md)：先知道系统要解决什么问题，以及哪些规则绝不能碰。
+2. [最新进度](最新进度.md)：再确认哪些能力已经真实完成，哪些仍未完成。
+3. [任务清单](任务清单.md)：最后挑选下一项工作，避免重复做已经完成的事。
+4. 需要技术细节时，再查看 `decisions/` 中的技术决定和 `issues/` 中保留的历史任务规格。
+
+## 维护规矩
+
+- 每新增、开始、完成、取消一项任务，负责的智能体都要在同一次提交里更新 `最新进度.md` 和 `任务清单.md`。
+- 新功能改变产品规则时，同时更新 `项目需求.md`；技术方案有变化时，补充 `decisions/` 的决定记录。
+- 写进手册的“已完成”必须能在代码、测试或已合并提交中找到依据；只有计划、页面演示或口头讨论的内容，一律写为“未完成”。
+- 不删除历史文档。旧内容与当前代码不一致时，在旧文件开头加“已过时，仅留档备查”提示，并在本目录写新版说明。
+
+## 旧交接说明
+
+`HANDOFF.md` 是 2026-08-06 的历史交接稿，已经不反映当前实现，保留仅作对照。当前事实以本手册三份正文为准。

docs/issues/001-p0-repository-data-hygiene.md

@@ -1,3 +1,5 @@
+⚠️ 本文档已过时，仅留档备查，请勿删除。该历史任务已落地；当前状态见 `../任务清单.md`。
+
 # [P0] 仓库银行样本数据分级与脱敏治理
 
 ## 背景

docs/issues/002-p0-persistence-and-immutable-imports.md

@@ -1,3 +1,5 @@
+⚠️ 本文档已过时，仅留档备查，请勿删除。该历史任务已落地；当前状态见 `../任务清单.md`。
+
 # [P0] 持久化层与不可变银行导入基础
 
 ## 背景

docs/issues/003-p0-auth-and-tenant-isolation.md

@@ -1,3 +1,5 @@
+⚠️ 本文档已过时，仅留档备查，请勿删除。该历史任务已落地；当前状态见 `../任务清单.md`。
+
 # [P0] 正式认证、RBAC 与公司级数据隔离
 
 ## 背景

docs/issues/004-p1-dynamic-master-data.md

@@ -1,3 +1,5 @@
+⚠️ 本文档已过时，仅留档备查，请勿删除。该历史任务已落地；当前状态见 `../任务清单.md`。
+
 # [P1] 动态公司、用户、账户和别名主数据
 
 ## 背景

docs/issues/005-p1-import-api-hardening.md

@@ -1,3 +1,5 @@
+⚠️ 本文档已过时，仅留档备查，请勿删除。该历史任务已落地；当前状态见 `../任务清单.md`。
+
 # [P1] 银行导入 API 加固与回归测试
 
 ## 背景

docs/issues/006-p1-canonical-transfer-matching.md

@@ -1,3 +1,5 @@
+⚠️ 本文档已过时，仅留档备查，请勿删除。该历史任务已落地；当前状态见 `../任务清单.md`。
+
 # [P1] 规范转账事件、双边匹配与调拨排除
 
 ## 背景

docs/任务清单.md

@@ -0,0 +1,29 @@
+# 任务清单
+
+最后核对：2026-08-23。状态以当前代码和已合并提交为准。
+
+## 正在做
+
+- 当前没有已确认正在进行的业务功能开发。下一项工作开始前，先在此处写明负责人、范围和验收标准。
+
+## 已做完
+
+- 六类银行流水模板识别与解析。
+- 数据库迁移、不可变原始证据、导入批次和重复导入处理。
+- 管理员/公司用户登录、密码策略、会话、限流、服务端公司隔离和审计。
+- 动态公司、用户、银行账户、别名与账户审核流程。
+- 导入接口加固、逐工作表确认、失败诊断和导出。
+- 规范转账事件、双边匹配、同公司调拨排除与个人过账映射。
+- 登录页视觉融合改版。
+
+## 还没安排
+
+- 公司间余额和四类往来科目的正式计算，已批准手工记录入账，以及从余额逐层查回原始流水。
+- 起算日、期初余额、流水覆盖断档检测和无业务校准。
+- 月结、重开、调整/冲销审批与审计报告。
+- 服务端流水查询、筛选、分页和可追溯导出。
+- 站内提醒与状态流转；外部通知只预留扩展位置，不默认启用。
+- 前端全面接入真实接口，移除模拟金额、静态业务记录和 `localStorage` 业务状态。
+- 测试环境之外的运行保障，包括 HTTPS、备份、监控和正式部署方案。
+
+每完成或新增一项任务，必须在同一次提交里把它从本清单的相应栏目移走或补上，并同步更新 `最新进度.md`。

docs/最新进度.md

@@ -0,0 +1,24 @@
+# 最新进度
+
+最后核对：2026-08-23。以下“已完成”均以当前代码、数据库迁移、接口和自动化测试为依据，不把页面演示当作真实功能。
+
+## 已经真实完成
+
+- 支持中信、农行、工行、建行、河南农商行、郑州银行六类样本的 `.xls` / `.xlsx` 流水解析；能识别变动的表头位置和列顺序，并校验余额连续性。
+- 已有 SQLite 数据库和 5 次版本迁移。原始文件按内容哈希保存，导入批次、工作表、源行和异常都有记录；原始文件、工作表和源行被数据库规则保护，不能直接改或删。
+- 已实现管理员与公司用户登录、首次改密、会话失效、登录失败限流、服务端权限隔离和审计记录。
+- 已实现公司、用户、银行账户、别名等主数据管理；公司提交的银行账户需管理员审核后才能参与上传和识别。
+- 已实现导入、逐工作表确认或忽略、失败诊断、重复上传处理和 CSV 导出；未确认的工作表不进入后续处理。
+- 已实现规范转账事件和双边流水匹配。匹配决定保留历史，无法自动判断的记录进入人工审核；同公司调拨、外部流水和未锁定的单边记录不进入已确认的公司间往来。
+- 已有登录页、总账端和公司端页面，最近一次合并完成了登录页视觉改版。
+
+## 仍未完成或不能当成已完成
+
+- 公司间余额与会计科目的正式计算、已批准手工记录入账和逐层余额追溯尚未完成。
+- 全局起算日、期初余额、流水覆盖断档、无业务校准、月结、重开和调整审批尚未完成。
+- 提醒、完整的服务端查询导出，以及前端彻底移除演示数据和浏览器本地业务状态尚未完成。
+- 生产部署所需的 HTTPS、反向代理、备份、监控和正式运行保障尚未完成；本项目当前只允许测试环境部署。
+
+## 最近验证
+
+2026-08-23 已运行完整 Python 自动化测试：解析、持久化、认证与权限、导入接口、主数据和双边匹配相关测试均通过。后续修改功能时，必须再次运行完整测试并在本文件记录结果。

docs/项目需求.md

@@ -0,0 +1,26 @@
+# 项目需求
+
+## 这个系统做什么
+
+这是河南金牛实业集团有限公司内部各公司之间的资金往来管理系统。它把各公司的银行流水集中起来，识别同一笔公司间转账的两边记录，形成可以一路查回原始银行流水的往来结果。
+
+系统有两个独立入口：
+
+- 总账管理端：管理公司、公司账号、银行账户、导入记录、异常和公司间转账匹配。
+- 公司出纳端：只处理本公司的账户登记、流水上传、工作表确认和本公司相关异常。
+
+## 必须做到的业务规则
+
+- 银行原始文件和原始流水是证据，导入后不能直接修改或删除；修正必须通过可追溯的审核决定、冲销或调整完成。
+- 一笔公司间转账的收、付两边只能算作一个经济事件，不能因为有两条银行流水就重复计算。
+- 同一家公司不同银行账户之间调拨，不计入公司间往来。
+- 账号、金额、方向、日期和余额等可核对信息优先于户名；信息不完整或有歧义时进入异常审核，不能猜。
+- 已确认金额和待确认金额必须分开；所有余额都要说明统计截止日期和未决金额。
+- 公司用户只能查看、上传和导出本公司的数据。这个限制由服务端执行，页面上“看不见”不等于有权限限制。
+- 起算日前的流水必须保留，但不参与期内计算；期初余额、流水覆盖断档、无业务校准、月结和调整都要留痕。
+
+## 当前技术边界
+
+项目使用 Python 标准库服务、SQLite 数据库和浏览器页面。银行模板支持 `.xls` 与 `.xlsx`，按表头识别而非依赖固定行列。金额使用精确十进制，真实运行数据放在 `data/`，不进入代码仓库。
+
+系统目前仍是测试环境项目，不能当作已完成生产部署：正式上线前仍需补齐核算、期初与断档、月结、备份、监控和 HTTPS 等能力。

web/app.js

@@ -273,10 +273,16 @@ function initEntry() {
   const form = $("#loginForm");
   if (!form) return;
   if (!motionQuery.matches) {
-    [$(".entry-brand"), $(".entry-statement"), ...$$(".entry-facts > div"), form].filter(Boolean).forEach((element, index) => {
+    [
+      [$(".entry-form-wrap"), 0],
+      [$(".entry-statement h1"), 60],
+      [$(".entry-statement p"), 120],
+      [$(".entry-figure"), 120],
+    ].forEach(([element, delay]) => {
+      if (!element) return;
       element.animate(
-        [{ opacity: 0, transform: "translateY(16px)" }, { opacity: 1, transform: "translateY(0)" }],
-        { duration: 520, delay: index * 65, easing: "cubic-bezier(.22,1,.36,1)", fill: "both" },
+        [{ opacity: 0, transform: "translateY(12px)" }, { opacity: 1, transform: "translateY(0)" }],
+        { duration: 300, delay, easing: "cubic-bezier(.16,1,.3,1)", fill: "both" },
       );
     });
   }
@@ -287,6 +293,22 @@ function initEntry() {
   const errorBox = $("#loginError");
   const changeSection = $("#changePassword");
   let pendingRole = null;
+  const submitButton = $('button[type="submit"]', form);
+
+  function setLoading(loading) {
+    submitButton.disabled = loading;
+    submitButton.classList.toggle("is-loading", loading);
+    $$("input, button", form).forEach((el) => {
+      if (el !== submitButton) el.disabled = loading;
+    });
+    if (loading) {
+      action.textContent = "登录中…";
+    } else if (pendingRole) {
+      action.textContent = "设置新密码并进入";
+    } else {
+      updateRole();
+    }
+  }
 
   function showError(message) {
     errorBox.textContent = message;
@@ -308,6 +330,7 @@ function initEntry() {
   form.addEventListener("submit", async (event) => {
     event.preventDefault();
     errorBox.hidden = true;
+    setLoading(true);
     const role = pendingRole || $('input[name="role"]:checked', form).value;
 
     if (pendingRole) {
@@ -315,6 +338,7 @@ function initEntry() {
       const confirmPassword = $('input[name="confirm_password"]', form).value;
       if (newPassword !== confirmPassword) {
         showError("两次输入的新密码不一致。");
+        setLoading(false);
         return;
       }
       const changeResponse = await fetch("/api/password/change", {
@@ -325,6 +349,7 @@ function initEntry() {
       const changeResult = await changeResponse?.json().catch(() => ({}));
       if (!changeResponse || !changeResponse.ok) {
         showError(changeResult?.message || "修改密码失败，请稍后重试。");
+        setLoading(false);
         return;
       }
       window.location.href = role === "admin" ? "admin.html" : "company.html";
@@ -339,12 +364,13 @@ function initEntry() {
     const result = await response?.json().catch(() => ({}));
     if (!response || !response.ok) {
       showError(result?.message || "登录服务暂时不可用，请稍后重试。");
+      setLoading(false);
       return;
     }
     if (result.must_change_password) {
       pendingRole = role;
       changeSection.hidden = false;
-      action.textContent = "设置新密码并进入";
+      setLoading(false);
       $('input[name="new_password"]', form).focus();
       return;
     }

web/index.html

@@ -3,46 +3,73 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="河南金牛实业集团内部资金往来与银行流水管理" />
-    <title>登录 · 河南金牛实业集团</title>
-    <link rel="stylesheet" href="styles.css" />
+    <meta name="description" content="河南金牛实业集团有限公司资金往来管理系统" />
+    <title>登录 · 河南金牛实业集团有限公司资金往来管理系统</title>
+    <link rel="stylesheet" href="styles.css?v=2" />
   </head>
   <body class="entry-page">
-    <!--
-      THESIS: 登录页只完成身份确认，并明确区分总账管理端与公司业务端。
-      OWN-WORLD: 深黑身份场景、石墨玻璃表单和荧光绿当前状态，延续双端工作台的材料语言。
-      STORY: 居中集团登录卡：先确认集团身份与系统名称，再选择工作端口登录。
-      FIRST VIEWPORT: 一张悬浮玻璃登录卡居于氛围光中央，集团名称置顶，端口选择、账号表单与系统事实依次排列。
-      FORM: 用户参考图锁定的深色玻璃财务工作台，Operate 模式；seed key fe8a50aa。
-      FINISH: unreviewed and undocumented is unfinished; this build ends with the finish review, the verdict, and DESIGN.md
-    -->
     <main class="entry-shell">
-      <section class="entry-card" aria-labelledby="login-title">
-        <div class="entry-brand"><span class="brand-mark">金</span><span><strong id="product-name">河南金牛实业集团</strong><small>集团资金往来管理系统</small></span></div>
+      <header class="entry-topbar">
+        <div class="entry-brand">
+          <span class="entry-seal" aria-hidden="true">金</span>
+          <span class="entry-system-name">河南金牛实业集团有限公司资金往来管理系统</span>
+        </div>
+      </header>
+
+      <section class="entry-context" aria-labelledby="entry-heading">
+        <div class="entry-statement">
+          <h1 id="entry-heading">集团资金往来管理</h1>
+          <p>集团内部资金往来登记、核对及台账查询入口</p>
+        </div>
+        <svg class="entry-figure" viewBox="0 0 520 300" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMax meet">
+          <path class="fig-arc" d="M 12 292 C 150 150, 370 150, 508 292" />
+          <rect class="fig-bar" x="96" y="150" width="34" height="140" rx="6" />
+          <rect class="fig-bar" x="172" y="120" width="34" height="170" rx="6" />
+          <rect class="fig-bar" x="248" y="178" width="34" height="112" rx="6" />
+          <rect class="fig-bar" x="324" y="100" width="34" height="190" rx="6" />
+          <rect class="fig-bar" x="400" y="60" width="34" height="230" rx="6" />
+          <polyline class="fig-line" points="113,138 189,108 265,166 341,88 417,48" />
+        </svg>
+      </section>
+
+      <section class="entry-form-wrap" aria-labelledby="login-title">
         <form class="entry-form" id="loginForm">
-          <header><h2 id="login-title">登录</h2><p>请选择与账号一致的工作端口</p></header>
-          <div class="role-switch" role="radiogroup" aria-label="工作端口">
+          <header>
+            <h2 id="login-title">欢迎登录</h2>
+            <p>请选择登录入口，使用账号和密码进入系统</p>
+          </header>
+
+          <p class="entry-note" id="loginError" role="alert" hidden></p>
+
+          <div class="role-switch" role="radiogroup" aria-label="登录入口">
             <label><input type="radio" name="role" value="admin" checked /><span><svg><use href="icons.svg#shield-check"/></svg><b>总账管理端</b><small>集团管理员</small></span></label>
             <label><input type="radio" name="role" value="company" /><span><svg><use href="icons.svg#building"/></svg><b>公司业务端</b><small>公司出纳</small></span></label>
           </div>
+
           <label class="field"><span>账号</span><input name="username" autocomplete="username" required /></label>
           <label class="field"><span>密码</span><span class="password-field"><input name="password" type="password" autocomplete="current-password" required /><button type="button" class="inside-icon" id="togglePassword" aria-label="显示密码" title="显示密码"><svg><use href="icons.svg#eye"/></svg></button></span></label>
+
           <div id="changePassword" hidden>
             <p class="entry-note">首次登录须修改密码，请设置新密码后再进入工作台。</p>
             <label class="field"><span>新密码</span><input name="new_password" type="password" autocomplete="new-password" /></label>
             <label class="field"><span>确认新密码</span><input name="confirm_password" type="password" autocomplete="new-password" /></label>
           </div>
-          <p class="entry-note" id="loginError" role="alert" hidden></p>
-          <label class="check-field"><input type="checkbox" checked />记住本次登录</label>
-          <button class="button primary wide" type="submit"><span id="loginAction">进入总账管理端</span><svg><use href="icons.svg#chevron-right"/></svg></button>
+
+          <div class="entry-options">
+            <label class="check-field"><input type="checkbox" checked />记住登录入口</label>
+            <a class="entry-hint" href="#changePassword">首次登录需修改密码</a>
+          </div>
+
+          <button class="button primary wide" type="submit">
+            <span class="spinner" aria-hidden="true"></span>
+            <span id="loginAction">进入总账管理端</span>
+            <svg class="submit-arrow"><use href="icons.svg#chevron-right"/></svg>
+          </button>
+
+          <p class="entry-compliance">登录即表示你已阅读并遵守集团资金往来管理规范</p>
         </form>
-        <dl class="entry-facts">
-          <div><dt>全局起算日</dt><dd>2026.01.01</dd></div>
-          <div><dt>当前账期</dt><dd>2026 年 7 月</dd></div>
-          <div><dt>覆盖银行</dt><dd>已对接 6 家</dd></div>
-        </dl>
       </section>
     </main>
-    <script src="app.js"></script>
+    <script src="app.js?v=2"></script>
   </body>
 </html>

web/styles.css

@@ -36,6 +36,26 @@
   --duration-fast: 150ms;
   --duration-standard: 260ms;
   --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  /* Login page — 深海军蓝 × 账房金 (HEL-32 已定稿) */
+  --jn-navy-900: #0B2740;
+  --jn-navy-800: #123A5C;
+  --jn-navy-700: #1B4F7A;
+  --jn-blue-600: #1D4ED8;
+  --jn-blue-700: #1E40AF;
+  --jn-blue-800: #1E3A8A;
+  --jn-blue-50: #EFF6FF;
+  --jn-gold-500: #C9A227;
+  --jn-gold-400: #D9B84A;
+  --jn-bg-page: #F5F7FA;
+  --jn-bg-panel: #FFFFFF;
+  --jn-text-1: #1F2937;
+  --jn-text-2: #6B7280;
+  --jn-text-3: #9CA3AF;
+  --jn-border: #E5E7EB;
+  --jn-border-strong: #D1D5DB;
+  --jn-error: #DC2626;
+  --jn-error-bg: #FEF2F2;
+  --jn-disabled-bg: #F3F4F6;
 }
 
 * { box-sizing: border-box; }
@@ -430,34 +450,199 @@ main { width: min(1560px, 100%); margin: 0 auto; padding: 12px 32px 58px; }
 .toast strong, .toast small { display: block; }
 .toast small { color: var(--color-ink-muted); }
 
-/* Login */
-.entry-page { overflow-x: hidden; }
-.entry-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(430px, 0.85fr); }
-.entry-context { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(32px, 5vw, 76px); border-right: 1px solid var(--color-line); background: #080808; }
-.entry-context::after { content: ""; position: absolute; inset: 12% 8% 12% auto; width: 1px; background: rgba(55, 235, 137, 0.32); box-shadow: 0 0 38px rgba(55, 235, 137, 0.45); }
-.entry-brand { display: flex; align-items: center; gap: 12px; }
-.entry-brand > span:last-child { display: flex; flex-direction: column; }
-.entry-brand small { color: var(--color-ink-muted); }
-.entry-statement { max-width: 680px; margin: 80px 0; }
-.entry-statement h1 { max-width: 640px; font-size: clamp(38px, 5vw, 70px); line-height: 1.12; letter-spacing: 0; }
-.entry-statement p { margin-top: 20px; color: var(--color-ink-muted); }
-.entry-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 670px; }
-.entry-facts div { padding: 15px; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface-muted); }
-.entry-facts dt { color: var(--color-ink-muted); }
-.entry-facts dd { margin-top: 4px; color: var(--color-primary); }
-.entry-form-wrap { min-height: 100vh; display: grid; place-items: center; padding: 40px; background: var(--color-bg); }
-.entry-form { width: min(420px, 100%); display: grid; gap: 18px; padding: 28px; border: 1px solid var(--color-line); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-panel); backdrop-filter: blur(24px); }
-.entry-form header h2 { font-size: 25px; }
-.entry-form header p, .entry-note { color: var(--color-ink-muted); }
-.role-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
+/* Login — 深海军蓝 × 账房金 (HEL-32) */
+.entry-page {
+  color-scheme: light;
+  background: var(--jn-bg-page);
+  color: var(--jn-text-1);
+  overflow-x: hidden;
+}
+.entry-page::before { display: none; }
+.entry-page :focus-visible { outline: 2px solid var(--jn-blue-600); outline-offset: 3px; }
+
+.entry-shell {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+  min-height: 100dvh;
+  display: grid;
+  grid-template-columns: minmax(420px, 42%) minmax(0, 1fr);
+  grid-template-rows: 56px minmax(0, 1fr);
+  grid-template-areas: "topbar topbar" "context form";
+}
+
+.entry-topbar {
+  grid-area: topbar;
+  display: flex;
+  align-items: center;
+  padding: 0 24px;
+  background: var(--jn-bg-panel);
+  border-bottom: 1px solid var(--jn-border);
+}
+.entry-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
+.entry-seal {
+  width: 28px; height: 28px; flex: 0 0 auto;
+  display: grid; place-items: center;
+  border: 1.5px solid var(--jn-gold-500);
+  border-radius: 6px;
+  background: var(--jn-bg-panel);
+  color: var(--jn-gold-500);
+  font-size: 17px; line-height: 1; font-weight: 700;
+}
+.entry-system-name {
+  font-size: 17px; line-height: 26px; font-weight: 600;
+  color: var(--jn-text-1);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+
+.entry-context {
+  grid-area: context;
+  position: relative;
+  display: flex; flex-direction: column; justify-content: center;
+  padding: 64px;
+  background: linear-gradient(160deg, var(--jn-navy-800), var(--jn-navy-900));
+  overflow: hidden;
+}
+.entry-statement { max-width: 520px; }
+.entry-statement h1 { font-size: 32px; line-height: 40px; font-weight: 700; color: #ffffff; letter-spacing: 0; }
+.entry-statement p { margin-top: 12px; max-width: 440px; font-size: 14px; line-height: 22px; color: #B9CBDD; }
+.entry-figure { width: 100%; height: auto; max-width: 520px; margin-top: 48px; display: block; }
+.entry-figure .fig-bar { fill: none; stroke: var(--jn-navy-700); stroke-width: 1.5; }
+.entry-figure .fig-arc { fill: none; stroke: var(--jn-navy-700); stroke-width: 80; opacity: 0.2; }
+.entry-figure .fig-line { fill: none; stroke: var(--jn-gold-500); stroke-width: 1.5; }
+
+.entry-form-wrap {
+  grid-area: form;
+  display: grid; place-items: center;
+  padding: 48px 40px;
+  background: var(--jn-bg-panel);
+}
+.entry-form { width: min(400px, 100%); display: grid; gap: 20px; }
+.entry-form header h2 { font-size: 24px; line-height: 32px; font-weight: 600; color: var(--jn-text-1); }
+.entry-form header p { margin-top: 6px; font-size: 14px; line-height: 22px; color: var(--jn-text-2); }
+
+#loginError {
+  padding: 10px 14px;
+  border-left: 3px solid var(--jn-error);
+  border-radius: 8px;
+  background: var(--jn-error-bg);
+  color: var(--jn-error);
+  font-size: 13px; line-height: 18px;
+}
+
+.role-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
 .role-switch label { cursor: pointer; }
 .role-switch input { position: absolute; opacity: 0; }
-.role-switch span { min-height: 83px; display: grid; grid-template-columns: 30px 1fr; align-content: center; gap: 1px 9px; padding: 12px; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: rgba(0, 0, 0, 0.14); transition: border-color var(--duration-fast), background var(--duration-fast), transform var(--duration-fast); }
-.role-switch svg { grid-row: 1 / 3; align-self: center; color: var(--color-ink-muted); }
-.role-switch small { color: var(--color-ink-muted); }
-.role-switch input:checked + span { border-color: rgba(55, 235, 137, 0.4); background: var(--color-primary-wash); transform: translateY(-1px); }
-.role-switch input:checked + span svg { color: var(--color-primary); }
-.entry-note { font-size: 10px; }
+.role-switch span {
+  min-height: 76px;
+  display: grid; grid-template-columns: 24px 1fr;
+  align-content: center; gap: 2px 10px;
+  padding: 12px 14px;
+  border: 1px solid var(--jn-border);
+  border-radius: 8px;
+  background: var(--jn-bg-panel);
+  transition: border-color 150ms ease-out, background 150ms ease-out;
+}
+.role-switch span:hover { border-color: var(--jn-border-strong); }
+.role-switch svg { grid-row: 1 / 3; align-self: center; color: var(--jn-text-3); }
+.role-switch b { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--jn-text-2); }
+.role-switch small { font-size: 12px; line-height: 18px; color: var(--jn-text-3); }
+.role-switch input:focus-visible + span { border-color: var(--jn-blue-600); box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15); }
+.role-switch input:checked + span { border: 1.5px solid var(--jn-blue-600); background: var(--jn-blue-50); }
+.role-switch input:checked + span svg { color: var(--jn-blue-600); }
+.role-switch input:checked + span b { color: var(--jn-blue-600); }
+
+.entry-form .field { display: flex; flex-direction: column; gap: 8px; }
+.entry-form .field > span { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--jn-text-1); }
+.entry-form .field input {
+  width: 100%; height: 44px;
+  padding: 0 14px;
+  border: 1px solid var(--jn-border);
+  border-radius: 8px;
+  outline: 0;
+  background: var(--jn-bg-panel);
+  color: var(--jn-text-1);
+  font-size: 15px; line-height: 22px;
+  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
+}
+.entry-form .field input::placeholder { color: var(--jn-text-3); }
+.entry-form .field input:hover { border-color: var(--jn-border-strong); }
+.entry-form .field input:focus { border-color: var(--jn-blue-600); box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15); }
+.entry-form .password-field {
+  display: grid; grid-template-columns: 1fr 44px;
+  border: 1px solid var(--jn-border);
+  border-radius: 8px;
+  background: var(--jn-bg-panel);
+  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
+}
+.entry-form .password-field:hover { border-color: var(--jn-border-strong); }
+.entry-form .password-field:focus-within { border-color: var(--jn-blue-600); box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15); }
+.entry-form .password-field input { border: 0; box-shadow: none; background: transparent; }
+.entry-form .password-field input:focus { border: 0; box-shadow: none; }
+.entry-form .inside-icon { width: 44px; height: 44px; color: var(--jn-text-3); border: 0; background: transparent; }
+.entry-form .inside-icon:hover { color: var(--jn-text-2); background: transparent; transform: none; }
+.entry-form .inside-icon svg { width: 20px; height: 20px; }
+
+.entry-options { display: flex; align-items: center; justify-content: space-between; }
+.entry-form .check-field { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; color: var(--jn-text-2); cursor: pointer; }
+.entry-form .check-field input { width: 16px; height: 16px; accent-color: var(--jn-blue-600); }
+.entry-hint { font-size: 13px; line-height: 18px; color: var(--jn-blue-600); }
+.entry-hint:hover { color: var(--jn-blue-700); }
+
+.entry-form .entry-note { font-size: 12px; line-height: 18px; color: var(--jn-text-2); }
+
+.entry-form .button.primary {
+  width: 100%; height: 44px;
+  border-radius: 8px;
+  background: var(--jn-blue-600);
+  color: #ffffff;
+  box-shadow: none;
+  font-size: 15px; line-height: 22px; font-weight: 600;
+}
+.entry-form .button.primary:hover { background: var(--jn-blue-700); box-shadow: none; transform: none; }
+.entry-form .button.primary:active { background: var(--jn-blue-800); transform: none; }
+.entry-form .button.primary:disabled { background: var(--jn-disabled-bg); color: var(--jn-text-3); opacity: 1; cursor: not-allowed; transform: none; }
+.entry-form .button.primary.is-loading:disabled { background: var(--jn-blue-600); color: #ffffff; opacity: 0.7; }
+.spinner {
+  width: 16px; height: 16px; flex: 0 0 auto;
+  display: none;
+  border: 2px solid rgba(255, 255, 255, 0.35);
+  border-top-color: #ffffff;
+  border-radius: 50%;
+  animation: jn-spin 1s linear infinite;
+}
+.button.is-loading .spinner { display: inline-block; }
+.button.is-loading .submit-arrow { display: none; }
+@keyframes jn-spin { to { transform: rotate(360deg); } }
+
+.entry-compliance { font-size: 12px; line-height: 18px; color: var(--jn-text-3); text-align: center; }
+
+@media (max-width: 1023px) {
+  .entry-shell { grid-template-columns: 1fr; grid-template-rows: 56px 180px minmax(0, 1fr); grid-template-areas: "topbar" "context" "form"; }
+  .entry-context { padding: 32px 40px; justify-content: center; }
+  .entry-statement h1 { font-size: 24px; line-height: 32px; }
+  .entry-figure { display: none; }
+  .entry-form-wrap { padding: 48px 40px; }
+  .entry-form { width: min(440px, 100%); }
+}
+
+@media (max-width: 767px) {
+  .entry-shell { grid-template-rows: 56px 96px minmax(0, 1fr); }
+  .entry-topbar { padding: 0 16px; }
+  .entry-seal { width: 24px; height: 24px; font-size: 14px; border-radius: 6px; }
+  .entry-system-name { font-size: 15px; line-height: 22px; }
+  .entry-context { padding: 24px; }
+  .entry-statement h1 { font-size: 18px; line-height: 26px; }
+  .entry-statement p { display: none; }
+  .entry-form-wrap { padding: 24px 16px; }
+  .entry-form { gap: 16px; }
+  .entry-form .field input { height: 48px; }
+  .entry-form .password-field { grid-template-columns: 1fr 48px; }
+  .entry-form .inside-icon { width: 48px; height: 48px; }
+  .entry-form .button.primary { height: 48px; }
+  .role-switch { grid-template-columns: 1fr; }
+}
 
 @media (max-width: 1180px) {
   .app-shell { grid-template-columns: 88px minmax(0, 1fr); }
@@ -494,9 +679,6 @@ main { width: min(1560px, 100%); margin: 0 auto; padding: 12px 32px 58px; }
   .subject-strip { grid-template-columns: repeat(3, 1fr); }
   .work-progress { grid-template-columns: 1fr 24px 1fr; row-gap: 16px; }
   .work-progress i:nth-of-type(2) { display: none; }
-  .entry-shell { grid-template-columns: 1fr; }
-  .entry-context { min-height: 58vh; border-right: 0; border-bottom: 1px solid var(--color-line); }
-  .entry-form-wrap { min-height: auto; }
 }
 
 @media (max-width: 720px) {
@@ -570,12 +752,6 @@ main { width: min(1560px, 100%); margin: 0 auto; padding: 12px 32px 58px; }
   .form-grid { grid-template-columns: 1fr; }
   .toast-region { right: 12px; bottom: 12px; left: 12px; }
   .toast { min-width: 0; max-width: none; }
-  .entry-context { min-height: auto; padding: 30px 22px; }
-  .entry-statement { margin: 54px 0 42px; }
-  .entry-statement h1 { font-size: 39px; }
-  .entry-facts { grid-template-columns: 1fr; }
-  .entry-form-wrap { padding: 32px 16px 48px; }
-  .entry-form { padding: 22px; }
 }
 
 @media (max-width: 460px) {
@@ -583,7 +759,6 @@ main { width: min(1560px, 100%); margin: 0 auto; padding: 12px 32px 58px; }
   .metric-copy { min-height: 52px; }
   .metric-label { font-size: 11px; }
   .metric-value { font-size: 23px; }
-  .role-switch { grid-template-columns: 1fr; }
 }
 
 @media (max-width: 1180px) {
@@ -715,24 +890,7 @@ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-event
 .table-scroll { padding: 2px 14px 8px; }
 .table-summary { margin: 0 14px; }
 
-/* ===== 登录页重做：居中集团登录卡 ===== */
-.entry-shell { display: grid; grid-template-columns: 1fr; place-items: center; min-height: 100vh; padding: 48px 20px; }
-.entry-card { position: relative; width: min(470px, 100%); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: var(--radius-xl); background: linear-gradient(165deg, rgba(36, 36, 36, 0.9) 0%, rgba(16, 16, 16, 0.92) 60%, rgba(10, 10, 10, 0.94) 100%); box-shadow: var(--shadow-panel), 0 0 60px rgba(55, 235, 137, 0.06); backdrop-filter: blur(28px) saturate(125%); }
-.entry-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(150% 110% at 50% 118%, rgba(255, 255, 255, 0.07), transparent 55%), linear-gradient(165deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 42%, transparent 70%); pointer-events: none; }
-.entry-card::after { content: ""; position: absolute; top: 0; left: 18%; right: 18%; height: 2px; background: linear-gradient(90deg, transparent, rgba(55, 235, 137, 0.65), transparent); }
-.entry-brand { flex-direction: column; justify-content: center; gap: 15px; min-height: 0; padding: 36px 28px 24px; border-bottom: 1px solid var(--color-line); text-align: center; }
-.entry-brand .brand-mark { width: 54px; height: 54px; border-radius: 17px; font-size: 26px; }
-.entry-brand > span:last-child { align-items: center; }
-.entry-brand strong { font-size: 21px; letter-spacing: 0.03em; }
-.entry-brand small { margin-top: 4px; font-size: 12px; letter-spacing: 0.08em; }
-.entry-form { width: 100%; gap: 16px; padding: 24px 28px 10px; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
-.entry-form header { text-align: center; }
-.entry-form header h2 { font-size: 22px; }
-.entry-form header p { margin-top: 4px; color: var(--color-ink-muted); font-size: 12px; }
-.entry-facts { max-width: none; gap: 10px; padding: 16px 28px 28px; }
-.entry-facts div { padding: 12px; text-align: center; }
-.entry-facts dd { margin-top: 2px; font-size: 12px; }
-
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
+  .button.is-loading .spinner { animation-duration: 1s !important; animation-iteration-count: infinite !important; }
 }