HEL-342: 管理总览 KPI 绑定真实 dashboard 接口

去掉写死的演示金额与账期进度，改由 /api/admin/dashboard 的 totals 与 period_progress 填充；无数据走空态。

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: multica-agent <github@multica.ai>

DESIGN-TOKENS.md

@@ -1,6 +1,8 @@
 # Design Tokens
 
-This file maps the shipped dark visual system to its implementation source in `web/styles.css`. `DESIGN.md` is the portable design contract; the `:root` custom properties in `web/styles.css` are the runtime source of truth.
+**HEL-342 定稿：** 运行时视觉来源是 `web/design-system.css` 的霜曜日间 + 黑金夜间变量（`.v-fusion` / `[data-theme="night"]`），依据 `jinniu-fusion-design`。禁止退回旧青绿 token 或叠第二套覆盖层。主题偏好只存 `localStorage.jinniu-theme`（`day` | `night`），不跟随系统、不恢复业务数据。
+
+下文是历史暗色合同存档，不再作为施工依据。
 
 ## Architecture
 
@@ -8,7 +10,6 @@ This file maps the shipped dark visual system to its implementation source in `w
 - Keep shared primitives in `:root`; keep component behavior in its existing semantic rule group.
 - Business-component rules must not use `!important`.
 - Only accessibility utilities (`.sr-only`, `[hidden]`) and `prefers-reduced-motion` enforcement may force priority.
-- Do not restore warm-paper, white-card, cobalt-action, cream, or light-theme aliases. New code must consume the dark semantic tokens directly.
 - Keep administrator and cashier portals as independent route-level surfaces even when they share tokens and component primitives.
 
 ## Typography

deploy/compose.yaml

@@ -69,8 +69,8 @@ services:
     restart: unless-stopped
     read_only: true
     tmpfs:
-      - /var/cache/nginx:size=16m,uid=${PROXY_UID:-101},gid=${PROXY_GID:-101},mode=700
+      - /var/cache/nginx:size=16m
-      - /var/run:size=1m,uid=${PROXY_UID:-101},gid=${PROXY_GID:-101},mode=700
+      - /var/run:size=1m
     security_opt:
       - no-new-privileges:true
     cap_drop:

scripts/hel342_shot.py

@@ -0,0 +1,126 @@
+"""HEL-342: static visual shots + computed-style probe (no business data writes)."""
+from __future__ import annotations
+
+import json
+from functools import partial
+from http.server import SimpleHTTPRequestHandler, ThreadingHTTPServer
+from pathlib import Path
+from threading import Thread
+
+ROOT = Path(__file__).resolve().parents[1]
+WEB = ROOT / "web"
+OUT = ROOT.parent / "hel342-shots"
+
+PROBES = [
+    (".sidebar", ["width", "backgroundColor", "backdropFilter"]),
+    (".brand-logo-day", ["width", "height"]),
+    (".btn-primary", ["backgroundColor", "height", "borderRadius", "color"]),
+    (".stat-card.gold .stat-value, .stat-card .stat-value", ["color", "fontSize", "fontVariantNumeric"]),
+    (".page-head h1", ["fontSize", "fontWeight"]),
+    (".ds-table th", ["fontSize", "color"]),
+]
+
+
+def main() -> None:
+    from playwright.sync_api import sync_playwright
+
+    OUT.mkdir(parents=True, exist_ok=True)
+    handler = partial(SimpleHTTPRequestHandler, directory=str(WEB))
+    httpd = ThreadingHTTPServer(("127.0.0.1", 0), handler)
+    Thread(target=httpd.serve_forever, daemon=True).start()
+    base = f"http://127.0.0.1:{httpd.server_address[1]}"
+    report = []
+
+    pages = [
+        ("index", "index.html", None, None),
+        ("login-admin", "login-admin.html", None, None),
+        ("login-company", "login-company.html", None, None),
+        ("admin-dashboard", "admin.html", "dashboard", None),
+        ("admin-flows", "admin.html", "flows", None),
+        ("admin-settings", "admin.html", "settings", None),
+        ("admin-audit", "admin.html", "audit", None),
+        ("admin-reminders", "admin.html", "reminders", None),
+        ("admin-period-audit", "admin.html", "period-audit", None),
+        ("admin-companies", "admin.html", "companies", None),
+        ("admin-pair", "admin.html", "pair", None),
+        ("company-workspace", "company.html", "workspace", None),
+        ("company-transfers", "company.html", "transfers", None),
+        ("company-reconcile", "company.html", "reconcile", None),
+        ("company-upload", "company.html", "upload", None),
+    ]
+
+    with sync_playwright() as p:
+        browser = p.chromium.launch(headless=True, args=["--no-sandbox"])
+        for theme in ("day", "night"):
+            for width, height, tag in ((1440, 900, "1440"), (820, 900, "820"), (390, 844, "390")):
+                if tag != "1440" and theme == "night" and width != 390:
+                    continue
+                page = browser.new_page(viewport={"width": width, "height": height})
+                page.add_init_script(
+                    f"() => {{ try {{ localStorage.setItem('jinniu-theme', '{theme}'); }} catch (e) {{}} }}"
+                )
+                for name, html, view, _ in pages:
+                    if tag != "1440" and name not in ("login-admin", "admin-flows", "company-transfers", "admin-dashboard"):
+                        continue
+                    page.route("**/app.js**", lambda route: route.abort())
+                    page.goto(f"{base}/{html}", wait_until="domcontentloaded")
+                    page.evaluate(
+                        """(args) => {
+                          document.documentElement.classList.add('v-fusion');
+                          document.documentElement.setAttribute('data-theme', args.theme);
+                          if (args.view) {
+                            document.querySelectorAll('.app-view').forEach((el) => {
+                              el.classList.toggle('is-active', el.dataset.page === args.view);
+                            });
+                          }
+                        }""",
+                        {"theme": theme, "view": view},
+                    )
+                    page.wait_for_timeout(80)
+                    shot = OUT / f"{name}-{theme}-{tag}.png"
+                    page.screenshot(path=str(shot), full_page=False)
+                    if tag == "1440" and name in ("login-admin", "admin-dashboard", "admin-flows"):
+                        probe = page.evaluate(
+                            """(sels) => sels.map(([sel, props]) => {
+                              const el = document.querySelector(sel);
+                              if (!el) return { sel, missing: true };
+                              const cs = getComputedStyle(el);
+                              const out = { sel };
+                              props.forEach((p) => { out[p] = cs[p]; });
+                              const box = el.getBoundingClientRect();
+                              out.box = { w: Math.round(box.width), h: Math.round(box.height) };
+                              return out;
+                            })""",
+                            PROBES,
+                        )
+                        overflow = page.evaluate(
+                            "() => document.documentElement.scrollWidth > document.documentElement.clientWidth + 1"
+                        )
+                        report.append({"page": name, "theme": theme, "overflow": overflow, "probe": probe})
+                page.close()
+
+        # 390 drawer
+        page = browser.new_page(viewport={"width": 390, "height": 844})
+        page.add_init_script("() => { try { localStorage.setItem('jinniu-theme', 'day'); } catch (e) {} }")
+        page.route("**/app.js**", lambda route: route.abort())
+        page.goto(f"{base}/company.html", wait_until="domcontentloaded")
+        page.evaluate(
+            """() => {
+              document.documentElement.classList.add('v-fusion');
+              document.querySelectorAll('.app-view').forEach((el) => {
+                el.classList.toggle('is-active', el.dataset.page === 'transfers');
+              });
+              const d = document.getElementById('transferEvidenceDrawer');
+              if (d) d.classList.add('is-open');
+            }"""
+        )
+        page.screenshot(path=str(OUT / "company-transfers-drawer-day-390.png"), full_page=False)
+        page.close()
+        browser.close()
+    httpd.shutdown()
+    (OUT / "probe.json").write_text(json.dumps(report, ensure_ascii=False, indent=2), encoding="utf-8")
+    print(f"wrote {OUT} ({len(list(OUT.glob('*.png')))} png)")
+
+
+if __name__ == "__main__":
+    main()

src/bank_importer/dashboard.py

@@ -8,6 +8,7 @@ as null so the UI shows an em dash rather than a guessed label.
 
 from __future__ import annotations
 
+from calendar import monthrange
 from datetime import datetime, timedelta, timezone
 from decimal import Decimal, ROUND_HALF_UP
 import sqlite3
@@ -22,6 +23,12 @@ def today_shanghai() -> str:
     return datetime.now(timezone(timedelta(hours=8))).date().isoformat()
 
 
+def _month_bounds(year_month: str) -> tuple[str, str]:
+    year, month = (int(part) for part in year_month.split("-"))
+    last = monthrange(year, month)[1]
+    return f"{year_month}-01", f"{year_month}-{last:02d}"
+
+
 def _q2(value: Decimal) -> str:
     return str(value.quantize(TWOPLACES, rounding=ROUND_HALF_UP))
 
@@ -209,6 +216,108 @@ def company_summaries(
     return items, totals
 
 
+def period_progress(
+    connection: sqlite3.Connection, *, year_month: str
+) -> dict[str, object]:
+    """Per-company coverage of the cutoff month: done / in progress / unsubmitted.
+
+    Only companies with at least one active bank account are counted — the same
+    rule as monthly-close submission checks. Covered = confirmed source rows in
+    the month, or an approved no-business attestation that spans the month.
+    """
+    start, end = _month_bounds(year_month)
+    enabled_rows = connection.execute(
+        "SELECT DISTINCT company_id FROM bank_accounts WHERE status = 'active'"
+    ).fetchall()
+    enabled_ids = {int(row["company_id"]) for row in enabled_rows}
+    empty = {
+        "year_month": year_month,
+        "enabled_count": 0,
+        "done": 0,
+        "in_progress": 0,
+        "unsubmitted": 0,
+        "percent": 0,
+    }
+    if not enabled_ids:
+        return empty
+
+    submitted = {
+        int(row["company_id"])
+        for row in connection.execute(
+            """
+            SELECT DISTINCT b.company_id AS company_id
+            FROM source_rows r
+            JOIN sheet_batches s ON s.id = r.sheet_batch_id
+            JOIN import_batches b ON b.id = s.import_batch_id
+            JOIN sheet_reviews rv ON rv.sheet_batch_id = s.id AND rv.review_status = 'confirmed'
+            WHERE date(r.transaction_at) >= date(?) AND date(r.transaction_at) <= date(?)
+            """,
+            (start, end),
+        ).fetchall()
+    }
+    attested = {
+        int(row["company_id"])
+        for row in connection.execute(
+            """
+            SELECT DISTINCT a.company_id AS company_id
+            FROM no_business_attestations a
+            WHERE a.status = 'approved'
+              AND date(a.gap_start) <= date(?)
+              AND date(a.gap_end) >= date(?)
+            """,
+            (end, start),
+        ).fetchall()
+    }
+    covered = (submitted | attested) & enabled_ids
+
+    pending: set[int] = set()
+    for row in connection.execute(
+        """
+        SELECT DISTINCT p.company_id AS company_id
+        FROM current_transfer_decisions c
+        JOIN transfer_match_decisions d ON d.id = c.decision_id
+        JOIN canonical_transfer_events e ON e.id = c.event_id
+        JOIN transfer_decision_participants p ON p.decision_id = d.id
+        WHERE e.lifecycle = 'active'
+          AND d.classification IN ('unresolved', 'needs_review')
+          AND date(d.effective_at) >= date(?) AND date(d.effective_at) <= date(?)
+        """,
+        (start, end),
+    ):
+        pending.add(int(row["company_id"]))
+    for row in connection.execute(
+        """
+        SELECT DISTINCT m.company_id AS company_id
+        FROM manual_records m
+        JOIN current_manual_record_decisions c ON c.record_id = m.id
+        JOIN manual_record_decisions d ON d.id = c.decision_id
+        WHERE d.state = 'pending'
+          AND date(m.occurred_at) >= date(?) AND date(m.occurred_at) <= date(?)
+        """,
+        (start, end),
+    ):
+        pending.add(int(row["company_id"]))
+    for row in connection.execute(
+        "SELECT DISTINCT company_id FROM bank_accounts WHERE status = 'pending'"
+    ):
+        pending.add(int(row["company_id"]))
+
+    pending_enabled = pending & enabled_ids
+    done = covered - pending_enabled
+    in_progress = pending_enabled
+    unsubmitted = enabled_ids - covered - pending_enabled
+    enabled_count = len(enabled_ids)
+    percent = round(100 * len(done) / enabled_count) if enabled_count else 0
+    return {
+        "year_month": year_month,
+        "enabled_count": enabled_count,
+        "done": len(done),
+        "in_progress": len(in_progress),
+        "unsubmitted": len(unsubmitted),
+        "percent": percent,
+    }
+
+
 def company_peer_groups(
     connection: sqlite3.Connection,
     company_id: int,
@@ -378,13 +487,15 @@ def build_dashboard(
     companies, totals = company_summaries(
         connection, from_date=from_date, cutoff=cutoff_date
     )
+    period_label = f"{period.year}-{period.month:02d}"
     return {
         "from_date": from_date,
         "cutoff": cutoff_date,
         "period_month": period_month,
-        "period_label": f"{period.year}-{period.month:02d}",
+        "period_label": period_label,
         "audit": audit_counts(connection),
         "totals": totals,
+        "period_progress": period_progress(connection, year_month=period_label),
         "companies": companies,
         "weekly_flow": weekly_flow(connection, cutoff=cutoff_date),
         "opening_status": "unavailable",

tests/test_company_confirm_status_color.py

@@ -50,7 +50,7 @@ class ConfirmStatusSourceContractTests(unittest.TestCase):
         self.assertIn('id="workspacePendingStatus"', html)
         self.assertIn('id="workspaceFlowSub"', html)
         self.assertIn('data-view-link="reconcile"', html)
-        self.assertIn("app.js?v=15", html)
+        self.assertIn("app.js?v=17", html)
         # 静态初值仍为进行中（黄），由 JS 在 pending=0 时切 done
         self.assertRegex(html, r'class="flow-step doing"[^>]*data-view-link="reconcile"')
 

tests/test_company_transfers_page.py

@@ -31,8 +31,8 @@ class TransfersPageSourceContractTests(unittest.TestCase):
         self.assertIn('id="transferEvidenceDrawer"', html)
         self.assertIn("期间净变动", html)
         self.assertNotIn("本公司往来合计", html)
-        self.assertIn("design-system.css?v=7", html)
+        self.assertIn("design-system.css?v=12", html)
-        self.assertIn("app.js?v=15", html)
+        self.assertIn("app.js?v=17", html)
         # 侧栏顺序：流水管理 → 转账往来 → 往来确认
         flows = html.index('data-view="flows"')
         transfers = html.index('data-view="transfers"')

tests/test_dashboard.py

@@ -33,6 +33,42 @@ class DashboardUnitTests(unittest.TestCase):
         self.assertEqual(0, payload["audit"]["total"])
         self.assertEqual([], payload["companies"])
         self.assertEqual(7, len(payload["weekly_flow"]["labels"]))
+        self.assertEqual(0, payload["totals"]["company_count"])
+        self.assertEqual(0, payload["totals"]["detail_count"])
+        self.assertEqual("0.00", payload["totals"]["debit_wan"])
+        self.assertEqual("0.00", payload["totals"]["credit_wan"])
+        progress = payload["period_progress"]
+        self.assertEqual("2026-08", progress["year_month"])
+        self.assertEqual(0, progress["enabled_count"])
+        self.assertEqual(0, progress["done"])
+        self.assertEqual(0, progress["in_progress"])
+        self.assertEqual(0, progress["unsubmitted"])
+        self.assertEqual(0, progress["percent"])
+
+    def test_period_progress_unsubmitted_when_account_active_no_flows(self) -> None:
+        now = master_data.utc_now()
+        cursor = self.connection.execute(
+            "INSERT INTO companies (name, credit_code, cashier_name, status, created_at, updated_at) "
+            "VALUES ('甲公司', NULL, NULL, 'active', ?, ?)",
+            (now, now),
+        )
+        company_id = int(cursor.lastrowid)
+        self.connection.execute(
+            """
+            INSERT INTO bank_accounts (
+                company_id, account_number, bank_name, account_type, status,
+                created_at, updated_at
+            ) VALUES (?, '6222020000000099', '工行', '一般户', 'active', ?, ?)
+            """,
+            (company_id, now, now),
+        )
+        self.connection.commit()
+        progress = dashboard.period_progress(self.connection, year_month="2026-08")
+        self.assertEqual(1, progress["enabled_count"])
+        self.assertEqual(0, progress["done"])
+        self.assertEqual(0, progress["in_progress"])
+        self.assertEqual(1, progress["unsubmitted"])
+        self.assertEqual(0, progress["percent"])
 
     def test_pending_account_counts_as_medium(self) -> None:
         now = master_data.utc_now()
@@ -267,6 +303,9 @@ class DashboardApiTests(unittest.TestCase):
         self.assertEqual(200, status)
         self.assertEqual("ok", data["status"])
         self.assertIn("audit", data)
+        self.assertIn("totals", data)
+        self.assertIn("period_progress", data)
+        self.assertIn("debit_wan", data["totals"])
         self.assertEqual(1, len(data["companies"]))
         self.assertEqual("甲公司", data["companies"][0]["name"])
 
@@ -494,5 +533,39 @@ class DashboardApiTests(unittest.TestCase):
         self.assertEqual([], detail["groups"])
 
 
+class DashboardPageContractTests(unittest.TestCase):
+    """HEL-343 阻断项：管理总览 KPI 不得写死演示金额。"""
+
+    def test_admin_html_kpi_placeholders_not_demo_amounts(self) -> None:
+        html = (Path(__file__).resolve().parents[1] / "web" / "admin.html").read_text(
+            encoding="utf-8"
+        )
+        self.assertIn('id="dashPageSub"', html)
+        self.assertIn('id="dashDebitValue"', html)
+        self.assertIn('id="dashCreditValue"', html)
+        self.assertIn('id="dashPeriodPercent"', html)
+        self.assertIn('id="dashPeriodBar"', html)
+        self.assertIn('id="dashPeriodFoot"', html)
+        self.assertNotIn("42,040.30", html)
+        self.assertNotIn("39,040.30", html)
+        self.assertNotIn("8.11 亿", html)
+        self.assertNotIn("392 笔", html)
+        self.assertNotIn("3 家已完成 · 2 家在途 · 1 家未提交", html)
+        self.assertNotRegex(html, r'id="flowStart"[^>]*value="2026-07-01"')
+        self.assertIn('id="pending-check-all"', html)
+        self.assertIn("pending-check-all", html)
+
+    def test_app_js_binds_dashboard_totals(self) -> None:
+        js = (Path(__file__).resolve().parents[1] / "web" / "app.js").read_text(
+            encoding="utf-8"
+        )
+        self.assertIn("function applyDashKpis(", js)
+        self.assertIn("applyDashKpis(data)", js)
+        self.assertIn("dashDebitValue", js)
+        self.assertIn("dashCreditValue", js)
+        self.assertIn("period_progress", js)
+        self.assertIn("master.disabled = boxes.length === 0", js)
+
+
 if __name__ == "__main__":
     unittest.main()

tests/test_reminders_page.py

@@ -37,8 +37,8 @@ class RemindersPageSourceContractTests(unittest.TestCase):
         self.assertIn('id="reminder-tbody"', html)
         self.assertIn('id="reminder-tabs"', html)
         self.assertIn('id="reminder-detail-drawer"', html)
-        self.assertIn("design-system.css?v=10", html)
+        self.assertIn("design-system.css?v=12", html)
-        self.assertIn("app.js?v=15", html)
+        self.assertIn("app.js?v=17", html)
         pending = html.index('id="pending-reminders-card"')
         history = html.index('id="reminder-history-card"')
         send = html.index('id="send-reminder-card"')
@@ -135,7 +135,7 @@ class RemindersPageLayoutSmokeTests(unittest.TestCase):
 
     def test_send_flow_columns_and_no_page_overflow(self) -> None:
         html = (WEB / "admin.html").read_text(encoding="utf-8")
-        self.assertIn("app.js?v=15", html)
+        self.assertIn("app.js?v=17", html)
         with sync_playwright() as p:
             browser = p.chromium.launch()
             page = browser.new_page()

web/admin.html

@@ -5,17 +5,27 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="金牛集团管理端" />
     <title>管理端 · 金牛集团</title>
-    <link rel="stylesheet" href="design-system.css?v=10" />
+    <script>
+      (function () {
+        try { if (localStorage.getItem("jinniu-theme") === "night") document.documentElement.setAttribute("data-theme", "night"); } catch (e) {}
+        document.documentElement.classList.add("v-fusion");
+      })();
+    </script>
+    <link rel="stylesheet" href="design-system.css?v=12" />
   </head>
-  <body data-portal="admin">
+  <body class="is-app" data-portal="admin">
     <a class="skip-link" href="#main-content">跳到主要内容</a>
     <div class="shell">
       <aside class="sidebar" id="sidebar" aria-label="管理导航">
         <div class="side-brand">
+          <img class="brand-logo brand-logo-day" src="assets/logo-day.png" width="38" height="38" alt="金牛实业" />
+          <img class="brand-logo brand-logo-night" src="assets/logo-night.png" width="38" height="38" alt="" />
+          <div class="brand-text">
             <div class="brand-name">金牛实业 · 资金往来</div>
             <div class="brand-sub">HENAN JINNIU INDUSTRIAL GROUP</div>
             <span class="side-role">管理端</span>
           </div>
+        </div>
         <nav class="side-nav">
           <div class="nav-group">日常</div>
           <a class="active" data-view="dashboard" href="#dashboard"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="3" y="3" width="8" height="8" rx="1.5"/><rect x="13" y="3" width="8" height="5" rx="1.5"/><rect x="13" y="10" width="8" height="11" rx="1.5"/><rect x="3" y="13" width="8" height="8" rx="1.5"/></svg><span class="nav-label">管理总览</span></a>
@@ -28,14 +38,22 @@
           <a data-view="period-audit" href="#period-audit"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M12 8v5l3 1.5"/><circle cx="12" cy="12" r="8.5"/></svg><span class="nav-label">审计记录</span></a>
           <a data-view="reminders" href="#reminders"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M6 9a6 6 0 1 1 12 0c0 5 2 6 2 6H4s2-1 2-6"/><path d="M10 19a2 2 0 0 0 4 0"/></svg><span class="nav-label">提醒管理</span></a>
         </nav>
-        <div class="side-foot">
+        <div class="side-foot sidebar-account">
+          <div class="theme-seg" role="group" aria-label="主题">
+            <button type="button" data-theme-set="day" class="is-active" aria-pressed="true">日间</button>
+            <button type="button" data-theme-set="night" aria-pressed="false">夜间</button>
+          </div>
+          <div class="account-box">
             <div class="user-row">
               <span class="avatar">管</span>
               <div>
                 <div class="user-name">系统管理员</div>
-              <div class="user-meta">管理员</div>
               </div>
-            <button class="logout" type="button">退出</button>
+              <button class="logout icon-btn" type="button" aria-label="退出登录" title="退出登录">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M10 6H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h4"/><path d="M15 16l4-4-4-4"/><path d="M10 12h9"/></svg>
+              </button>
+            </div>
+            <div class="user-meta">管理员 · 集团全量数据</div>
           </div>
         </div>
       </aside>
@@ -44,8 +62,8 @@
         <div class="topbar">
           <span class="crumb">管理端 / <b id="currentViewName">管理总览</b></span>
           <div class="topbar-right">
-            <span class="tag">账期 2026-07</span>
+            <span class="tag" id="topbarPeriod">账期 —</span>
-            <span class="tag">统计截止 2026-08-20</span>
+            <span class="tag" id="topbarCutoff">统计截止 —</span>
             <button class="btn btn-sm" data-view-link="settings">结账检查</button>
           </div>
         </div>
@@ -55,20 +73,20 @@
             <div class="page-head">
               <div>
                 <h1>管理总览</h1>
-                <p class="page-sub">2026-01-01 至 2026-08-20，集团 6 家成员公司相互往来累计发生 8.11 亿元、392 笔明细。页面上任意数字与公司均可逐级穿透，直至银行原始流水。</p>
+                <p class="page-sub" id="dashPageSub">正在读取集团往来汇总…</p>
               </div>
             </div>
 
             <div class="grid grid-4">
-              <div class="card stat-card">
+              <div class="card stat-card gold">
                 <div class="stat-label">往来借方总额 · 年初至今</div>
-                <div class="stat-value">42,040.30<span class="unit">万元</span></div>
+                <div class="stat-value" id="dashDebitValue">—<span class="unit">万元</span></div>
-                <div class="stat-foot">6 家公司合计 · 明细 392 笔</div>
+                <div class="stat-foot" id="dashDebitFoot">加载中…</div>
               </div>
-              <div class="card stat-card">
+              <div class="card stat-card gold">
                 <div class="stat-label">往来贷方总额 · 年初至今</div>
-                <div class="stat-value">39,040.30<span class="unit">万元</span></div>
+                <div class="stat-value" id="dashCreditValue">—<span class="unit">万元</span></div>
-                <div class="stat-foot">6 家公司合计 · 与借方同源互证</div>
+                <div class="stat-foot" id="dashCreditFoot">加载中…</div>
               </div>
               <div class="card stat-card warn" data-view-link="audit" style="cursor: pointer;">
                 <div class="stat-label">待审核事项 · 审核中心</div>
@@ -76,10 +94,10 @@
                 <div class="stat-foot" id="dashAuditFoot">高 0 项 · 中 0 项 · 其余 0 项低风险</div>
               </div>
               <div class="card stat-card">
-                <div class="stat-label">7 月账期确认进度</div>
+                <div class="stat-label" id="dashPeriodLabel">账期确认进度</div>
-                <div class="stat-value">50<span class="unit">%</span></div>
+                <div class="stat-value" id="dashPeriodPercent">—<span class="unit">%</span></div>
-                <div class="progress" style="margin-top: 10px;"><span style="width: 50%;"></span></div>
+                <div class="progress" style="margin-top: 10px;"><span id="dashPeriodBar" style="width: 0%;"></span></div>
-                <div class="stat-foot" style="margin-top: 8px;">3 家已完成 · 2 家在途 · 1 家未提交</div>
+                <div class="stat-foot" id="dashPeriodFoot" style="margin-top: 8px;">加载中…</div>
               </div>
             </div>
 
@@ -200,7 +218,7 @@
                 </div>
                 <dl class="kv">
                   <dt>当前账期</dt><dd>2026-07 · 进行中</dd>
-                  <dt>结账日</dt><dd style="color: color-mix(in oklch, var(--warn) 78%, black); font-weight: 650;">2026-08-29（顺延）· 距今 9 天</dd>
+                  <dt>结账日</dt><dd style="color: var(--warn); font-weight: 650;">2026-08-29（顺延）· 距今 9 天</dd>
                   <dt>上一账期</dt><dd>2026-06 · 已于 07-03 结账</dd>
                 </dl>
                 <button class="btn" data-view-link="settings" style="width: 100%; margin-top: 14px;">进入结账检查</button>
@@ -410,11 +428,11 @@
               </div>
               <div class="field">
                 <label for="flowStart">日期起</label>
-                <input class="input" id="flowStart" type="date" value="2026-07-01" />
+                <input class="input" id="flowStart" type="date" />
               </div>
               <div class="field">
                 <label for="flowEnd">日期止</label>
-                <input class="input" id="flowEnd" type="date" value="2026-07-31" />
+                <input class="input" id="flowEnd" type="date" />
               </div>
               <div class="field" style="min-width: 200px;">
                 <label for="flowKeyword">关键词</label>
@@ -748,6 +766,7 @@
               <div class="card-head">
                 <span class="card-title">待提醒清单<span class="sub">系统按流水提交、断档、待确认自动发现，点发送即送达对应公司</span></span>
                 <div class="row" style="gap: 10px; align-items: center;">
+                  <label class="row" style="gap:6px;flex:none;"><input type="checkbox" class="ds-check" id="pending-check-all" data-check-all aria-label="全选待提醒" disabled /></label>
                   <span class="meta" id="pending-summary">—</span>
                   <button type="button" class="btn btn-primary btn-sm" id="pending-send-all" disabled>全部一键发送</button>
                 </div>
@@ -1208,6 +1227,7 @@
       </div>
     </div>
     <div class="toast-region" id="toastRegion" aria-live="polite"></div>
-    <script src="app.js?v=15"></script>
+    <script src="theme.js?v=1"></script>
+    <script src="app.js?v=17"></script>
   </body>
 </html>

web/app.js

@@ -39,49 +39,20 @@ const motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
 
 function animateView(view, { initial = false } = {}) {
   if (!view || motionQuery.matches || typeof view.animate !== "function") return;
-  if (!initial) {
+  if (!initial) return;
-    view.getAnimations().forEach((animation) => animation.cancel());
+  const rows = [...view.querySelectorAll(".ds-table tbody tr")].slice(0, 8);
-    view.animate(
+  rows.forEach((row, index) => {
-      [{ opacity: 0.84, transform: "translateY(5px)" }, { opacity: 1, transform: "translateY(0)" }],
+    row.getAnimations().forEach((animation) => animation.cancel());
-      { duration: 180, easing: "cubic-bezier(.22,1,.36,1)" },
+    row.animate(
+      [{ opacity: 0 }, { opacity: 1 }],
+      { duration: 300, delay: index * 45, easing: "cubic-bezier(0.23, 1, 0.32, 1)", fill: "both" },
     );
-    return;
-  }
-  const selectors = [
-    ".page-head",
-    ".stat-card",
-    ".card",
-    ".notice",
-    ".list-row",
-    ".filters",
-  ];
-  const elements = [...new Set(selectors.flatMap((selector) => [...view.querySelectorAll(selector)]))];
-
-  elements.forEach((element, index) => {
-    element.getAnimations().forEach((animation) => animation.cancel());
-    const keyframes = [
-      { opacity: 0, transform: `translateY(${initial ? 16 : 10}px)` },
-      { opacity: 1, transform: "translateY(0)" },
-    ];
-    element.animate(keyframes, {
-      duration: 440,
-      delay: Math.min(index * 38, 260),
-      easing: "cubic-bezier(.22,1,.36,1)",
-      fill: "both",
-    });
   });
 }
 
 function initMotion() {
   if (motionQuery.matches) return;
   animateView($(".app-view.is-active"), { initial: true });
-
-  $$(".side-nav a", $("#sidebar") || document).forEach((item, index) => {
-    item.animate(
-      [{ opacity: 0, transform: "translateX(-8px)" }, { opacity: 1, transform: "translateX(0)" }],
-      { duration: 360, delay: 90 + index * 28, easing: "cubic-bezier(.22,1,.36,1)", fill: "both" },
-    );
-  });
 }
 
 function recordStatus(status) {
@@ -139,11 +110,23 @@ function showToast(title, detail = "", kind = "info") {
   }
   toast.append(dot, body);
   region.append(toast);
-  window.setTimeout(() => {
+  let remaining = 2600;
+  let started = Date.now();
+  let timer = window.setTimeout(dismiss, remaining);
+  function dismiss() {
     toast.style.opacity = "0";
-    toast.style.transition = "opacity 0.2s ease";
+    toast.style.transition = "opacity 400ms cubic-bezier(0.32, 0.72, 0, 1), transform 400ms cubic-bezier(0.32, 0.72, 0, 1)";
-    window.setTimeout(() => toast.remove(), 200);
+    toast.style.transform = "translateX(12px)";
-  }, 4200);
+    window.setTimeout(() => toast.remove(), 400);
+  }
+  toast.addEventListener("mouseenter", () => {
+    window.clearTimeout(timer);
+    remaining -= Date.now() - started;
+  });
+  toast.addEventListener("mouseleave", () => {
+    started = Date.now();
+    timer = window.setTimeout(dismiss, Math.max(remaining, 0));
+  });
 }
 
 function toastIfLocked(result) {
@@ -188,7 +171,9 @@ function showView(view) {
   closeNavigation({ restoreFocus: navigationWasOpen });
   const activeView = $(`.app-view[data-page="${view}"]`);
   requestAnimationFrame(() => animateView(activeView));
-  window.scrollTo({ top: 0, behavior: motionQuery.matches ? "auto" : "smooth" });
+  const shell = $(".main");
+  if (shell) shell.scrollTop = 0;
+  else window.scrollTo({ top: 0, behavior: motionQuery.matches ? "auto" : "smooth" });
   if (portal === "company" && view === "transfers") {
     if (state.transfersKeepDetail && state.transfersDetail?.company_id) {
       showTransfersDetailLayer();
@@ -422,15 +407,19 @@ async function initAuthGuard() {
 
 function applyCompanyIdentity(me) {
   if (!me) return;
-  const row = $(".side-foot .user-row");
+  const foot = $(".side-foot") || $(".side-foot .user-row");
-  if (row) {
+  if (foot) {
     const name = me.username || (portal === "company" ? (me.company_name || "公司用户") : "系统管理员");
-    const avatar = $(".avatar", row);
+    const avatar = $(".avatar", foot);
     if (avatar) avatar.textContent = name.slice(0, 1);
-    const nameEl = $(".user-name", row);
+    const nameEl = $(".user-name", foot);
     if (nameEl) nameEl.textContent = name;
-    const metaEl = $(".user-meta", row);
+    const metaEl = $(".user-meta", foot);
-    if (metaEl) metaEl.textContent = portal === "company" ? (me.company_name || "公司业务端") : "管理员";
+    if (metaEl) {
+      metaEl.textContent = portal === "company"
+        ? `${me.company_name || "公司业务端"} · 仅本公司数据`
+        : "管理员 · 集团全量数据";
+    }
   }
   // The company portal always shows the session-bound company in page copy.
   if (portal === "company" && me.company_name) {
@@ -1478,6 +1467,63 @@ function updateDashAuditCard(audit) {
   applyAuditCounts(audit, { fromApi: true });
 }
 
+function formatDashWan(value) {
+  const num = Number(value);
+  if (!Number.isFinite(num)) return "0.00";
+  return Math.abs(num).toLocaleString("zh-CN", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+}
+
+function applyDashKpis(data) {
+  const totals = data?.totals || {};
+  const from = data?.from_date || "—";
+  const cutoff = data?.cutoff || "—";
+  const periodLabel = data?.period_label || "";
+  const companyCount = Number(totals.company_count) || 0;
+  const detailCount = Number(totals.detail_count) || 0;
+  const debit = formatDashWan(totals.debit_wan);
+  const credit = formatDashWan(totals.credit_wan);
+
+  const pageSub = $("#dashPageSub");
+  if (pageSub) {
+    if (!companyCount && !detailCount) {
+      pageSub.textContent = `${from} 至 ${cutoff}，暂无成员公司往来数据。导入并归集银行流水后，金额将显示在此。页面上任意数字与公司均可逐级穿透，直至银行原始流水。`;
+    } else {
+      pageSub.textContent = `${from} 至 ${cutoff}，集团 ${companyCount} 家成员公司相互往来累计发生 ${debit} 万元、${detailCount} 笔明细。页面上任意数字与公司均可逐级穿透，直至银行原始流水。`;
+    }
+  }
+  const debitVal = $("#dashDebitValue");
+  if (debitVal) debitVal.innerHTML = `${debit}<span class="unit">万元</span>`;
+  const debitFoot = $("#dashDebitFoot");
+  if (debitFoot) debitFoot.textContent = `${companyCount} 家公司合计 · 明细 ${detailCount} 笔`;
+  const creditVal = $("#dashCreditValue");
+  if (creditVal) creditVal.innerHTML = `${credit}<span class="unit">万元</span>`;
+  const creditFoot = $("#dashCreditFoot");
+  if (creditFoot) creditFoot.textContent = `${companyCount} 家公司合计 · 与借方同源互证`;
+
+  const progress = data?.period_progress || {};
+  const ym = progress.year_month || periodLabel;
+  const monthNum = ym ? Number(String(ym).slice(5, 7)) : 0;
+  const labelEl = $("#dashPeriodLabel");
+  if (labelEl) labelEl.textContent = monthNum ? `${monthNum} 月账期确认进度` : "账期确认进度";
+  const percent = Number(progress.percent) || 0;
+  const pctEl = $("#dashPeriodPercent");
+  if (pctEl) pctEl.innerHTML = `${percent}<span class="unit">%</span>`;
+  const bar = $("#dashPeriodBar");
+  if (bar) bar.style.width = `${Math.max(0, Math.min(100, percent))}%`;
+  const periodFoot = $("#dashPeriodFoot");
+  if (periodFoot) {
+    const enabled = Number(progress.enabled_count) || 0;
+    periodFoot.textContent = enabled
+      ? `${progress.done || 0} 家已完成 · ${progress.in_progress || 0} 家在途 · ${progress.unsubmitted || 0} 家未提交`
+      : "尚无已启用银行账户";
+  }
+
+  const tbPeriod = $("#topbarPeriod");
+  if (tbPeriod) tbPeriod.textContent = periodLabel ? `账期 ${periodLabel}` : "账期 —";
+  const tbCutoff = $("#topbarCutoff");
+  if (tbCutoff) tbCutoff.textContent = cutoff && cutoff !== "—" ? `统计截止 ${cutoff}` : "统计截止 —";
+}
+
 function renderDashCompanyRows(companies, selectedId) {
   const list = $("#dashCompanyRows");
   if (!list) return;
@@ -1692,11 +1738,15 @@ async function loadAdminDashboard() {
   const response = await fetch(`/api/admin/dashboard?from=${encodeURIComponent(from)}`).catch(() => null);
   if (!response?.ok) {
     $("#dashCompanyRows").innerHTML = '<div class="dash-company-empty muted">总览加载失败</div>';
+    const pageSub = $("#dashPageSub");
+    if (pageSub) pageSub.textContent = "总览加载失败，请刷新后重试。";
     return;
   }
   const data = await response.json().catch(() => null);
   if (!data || data.status !== "ok") {
     $("#dashCompanyRows").innerHTML = '<div class="dash-company-empty muted">总览加载失败</div>';
+    const pageSub = $("#dashPageSub");
+    if (pageSub) pageSub.textContent = "总览加载失败，请刷新后重试。";
     return;
   }
   state.dashCompanies = data.companies || [];
@@ -1704,6 +1754,7 @@ async function loadAdminDashboard() {
   state.dashCutoff = data.cutoff;
   state.dashPeriodMonth = data.period_month;
   updateDashAuditCard(data.audit);
+  applyDashKpis(data);
   const listSub = $("#dashListSub");
   if (listSub) {
     listSub.textContent = `${data.from_date} 至 ${data.cutoff} · 单位：万元 · 左侧选择公司，右侧查看其往来明细`;
@@ -1814,6 +1865,7 @@ async function loadAdminRemindersPending() {
     if (empty) empty.style.display = "";
     if (summary) summary.textContent = "0 家公司 · 0 项";
     if (sendAll) { sendAll.disabled = true; sendAll.textContent = "全部一键发送"; }
+    syncPendingCheckAll();
     return;
   }
   if (empty) empty.style.display = "none";
@@ -1831,7 +1883,7 @@ async function loadAdminRemindersPending() {
     row.dataset.companyId = String(item.company_id);
     const sentHint = item.send_count > 0 ? ` · 已提醒 ${item.send_count} 次` : "";
     row.innerHTML =
-      '<label class="row" style="gap:6px;flex:none;"><input type="checkbox" class="pending-check" style="width:auto;" /></label>' +
+      '<label class="row" style="gap:6px;flex:none;"><input type="checkbox" class="pending-check ds-check" /></label>' +
       `<span class="pill ${reminderTypePill(item.rule_key)}">${item.rule_label}</span>` +
       `<div class="lr-main"><div class="lr-title">${item.title}</div>` +
       `<div class="lr-sub"><span class="meta">${item.reason}${sentHint}</span></div></div>` +
@@ -1839,6 +1891,21 @@ async function loadAdminRemindersPending() {
       `<div class="lr-side"><button type="button" class="btn btn-sm btn-primary pending-send-one">发送提醒</button></div>`;
     list.append(row);
   });
+  syncPendingCheckAll();
+}
+
+function syncPendingCheckAll() {
+  const master = $("#pending-check-all");
+  if (!master) return;
+  const boxes = $$(".pending-check");
+  const checked = boxes.filter((el) => el.checked).length;
+  master.disabled = boxes.length === 0;
+  master.checked = boxes.length > 0 && checked === boxes.length;
+  master.indeterminate = checked > 0 && checked < boxes.length;
+  if (boxes.length === 0) {
+    master.checked = false;
+    master.indeterminate = false;
+  }
 }
 
 async function loadAdminRemindersHistory(sourceFilter) {
@@ -1932,6 +1999,15 @@ function initAdminReminders() {
   loadAdminRemindersPending();
   loadAdminRemindersHistory("all");
 
+  $("#pending-check-all")?.addEventListener("change", (event) => {
+    const on = event.target.checked;
+    event.target.indeterminate = false;
+    $$(".pending-check").forEach((box) => { box.checked = on; });
+  });
+  document.addEventListener("change", (event) => {
+    if (event.target.classList?.contains("pending-check")) syncPendingCheckAll();
+  });
+
   $("#reminder-scan-btn")?.addEventListener("click", async () => {
     const response = await fetch("/api/admin/reminders/scan", { method: "POST" }).catch(() => null);
     if (response?.status === 401) { window.location.href = "index.html"; return; }
@@ -4174,6 +4250,15 @@ function renderWorkspaceTransfersCard(summary) {
       ? `${formatWanHtml(pending.amount_total)}<span class="unit"> · ${pCount} 笔</span>`
       : `0.00<span class="unit">万元 · 0 笔</span>`;
   }
+  const confirmedSplit = $("#wsTfConfirmedSplit");
+  const pendingSplit = $("#wsTfPendingSplit");
+  if (confirmedSplit) confirmedSplit.innerHTML = formatWanHtml(confirmed.net_change, { signed: true });
+  if (pendingSplit) {
+    const pCount = Number(pending.count) || 0;
+    pendingSplit.innerHTML = pCount
+      ? `${formatWanHtml(pending.amount_total)}<span class="unit"> · ${pCount} 笔</span>`
+      : `0.00<span class="unit">万元 · 0 笔</span>`;
+  }
 }
 
 async function loadTransfersSummary({ asOf } = {}) {

web/company.html

@@ -5,17 +5,27 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="金牛集团公司业务端" />
     <title>公司业务端 · 金牛集团</title>
-    <link rel="stylesheet" href="design-system.css?v=7" />
+    <script>
+      (function () {
+        try { if (localStorage.getItem("jinniu-theme") === "night") document.documentElement.setAttribute("data-theme", "night"); } catch (e) {}
+        document.documentElement.classList.add("v-fusion");
+      })();
+    </script>
+    <link rel="stylesheet" href="design-system.css?v=12" />
   </head>
-  <body data-portal="company">
+  <body class="is-app" data-portal="company">
     <a class="skip-link" href="#main-content">跳到主要内容</a>
     <div class="shell">
       <aside class="sidebar" id="sidebar" aria-label="公司业务导航">
         <div class="side-brand">
+          <img class="brand-logo brand-logo-day" src="assets/logo-day.png" width="38" height="38" alt="金牛实业" />
+          <img class="brand-logo brand-logo-night" src="assets/logo-night.png" width="38" height="38" alt="" />
+          <div class="brand-text">
             <div class="brand-name">金牛实业 · 资金往来</div>
             <div class="brand-sub">HENAN JINNIU INDUSTRIAL GROUP</div>
             <span class="side-role company">公司业务端</span>
           </div>
+        </div>
         <nav class="side-nav">
           <div class="nav-group">业务</div>
           <a class="active" data-view="workspace" href="#workspace"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="3" y="3" width="8" height="8" rx="1.5"/><rect x="13" y="3" width="8" height="5" rx="1.5"/><rect x="13" y="10" width="8" height="11" rx="1.5"/><rect x="3" y="13" width="8" height="8" rx="1.5"/></svg><span class="nav-label">工作台</span></a>
@@ -28,14 +38,22 @@
           <a data-view="accounts" href="#accounts"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 10h18"/></svg><span class="nav-label">银行账户</span></a>
           <a data-view="notifications" href="#notifications"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M6 9a6 6 0 1 1 12 0c0 5 2 6 2 6H4s2-1 2-6"/><path d="M10 19a2 2 0 0 0 4 0"/></svg><span class="nav-label">通知</span><span class="nav-badge" id="notice-nav-badge" style="display: none;">0</span></a>
         </nav>
-        <div class="side-foot">
+        <div class="side-foot sidebar-account">
+          <div class="theme-seg" role="group" aria-label="主题">
+            <button type="button" data-theme-set="day" class="is-active" aria-pressed="true">日间</button>
+            <button type="button" data-theme-set="night" aria-pressed="false">夜间</button>
+          </div>
+          <div class="account-box">
             <div class="user-row">
               <span class="avatar">牛</span>
               <div>
                 <div class="user-name">牛女士</div>
-              <div class="user-meta">金牛煤业 · 煤业出纳</div>
               </div>
-            <button class="logout" type="button">退出</button>
+              <button class="logout icon-btn" type="button" aria-label="退出登录" title="退出登录">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M10 6H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h4"/><path d="M15 16l4-4-4-4"/><path d="M10 12h9"/></svg>
+              </button>
+            </div>
+            <div class="user-meta">金牛煤业 · 仅本公司数据</div>
           </div>
         </div>
       </aside>
@@ -44,8 +62,8 @@
         <div class="topbar">
           <span class="crumb">公司业务端 / <b id="currentViewName">工作台</b></span>
           <div class="topbar-right">
-            <span class="tag">账期 2026-07</span>
+            <span class="tag" id="topbarPeriod">账期 —</span>
-            <span class="tag">统计截止 2026-08-20</span>
+            <span class="tag" id="topbarCutoff">统计截止 —</span>
           </div>
         </div>
 
@@ -175,6 +193,22 @@
                       <div class="ms-value" id="wsTfPending" style="color: var(--warn);">—</div>
                     </div>
                   </div>
+                  <div class="xfer-split" id="workspaceConfirmSplit" style="margin-top: 12px;">
+                    <div class="xfer-split-pane confirmed">
+                      <div class="xfer-split-head">
+                        <span class="pill pill-success">已确认</span>
+                      </div>
+                      <div class="xfer-split-value num" id="wsTfConfirmedSplit">—</div>
+                      <div class="xfer-split-note">计入上方合计与期间净变动</div>
+                    </div>
+                    <div class="xfer-split-pane pending">
+                      <div class="xfer-split-head">
+                        <span class="pill pill-warn">待确认</span>
+                      </div>
+                      <div class="xfer-split-value num" id="wsTfPendingSplit">—</div>
+                      <div class="xfer-split-note">单列展示，不计入已确认合计</div>
+                    </div>
+                  </div>
                   <button class="btn btn-ghost" data-view-link="transfers" style="width: 100%; margin-top: 12px;">查看转账往来明细 →</button>
                 </div>
 
@@ -381,11 +415,11 @@
               </div>
               <div class="field">
                 <label for="flowStart">日期起</label>
-                <input class="input num-input" id="flowStart" type="date" value="2026-07-01" />
+                <input class="input num-input" id="flowStart" type="date" />
               </div>
               <div class="field">
                 <label for="flowEnd">日期止</label>
-                <input class="input num-input" id="flowEnd" type="date" value="2026-08-20" />
+                <input class="input num-input" id="flowEnd" type="date" />
               </div>
               <div class="field" style="min-width: 200px;">
                 <label for="flowKeyword">关键词</label>
@@ -1009,6 +1043,7 @@
     </aside>
 
     <div class="toast-region" id="toastRegion" aria-live="polite"></div>
-    <script src="app.js?v=15"></script>
+    <script src="theme.js?v=1"></script>
+    <script src="app.js?v=17"></script>
   </body>
 </html>

web/design-system.css

@@ -1,47 +1,161 @@
-/* ─── 金牛实业资金往来管理系统 · 共享样式 ─────────────────────────────
+/* ─── 金牛实业资金往来管理系统 · 霜曜融合设计 ─────────────────────────
-   方向:tech-utility(数据密集型工具)。六枚基础 token 绑定设计方向,
+   日间默认写在 :root / .v-fusion；夜间只覆写变量。
-   状态色仅在此 :root 块内以 oklch 派生,组件一律引用变量。 */
+   --fg/--muted/--border/--success/--warn/--danger/--info 为既有组件别名。 */
 
-:root {
+:root,
-  --bg:      oklch(98% 0.005 250);
+.v-fusion {
-  --surface: oklch(100% 0 0);
+  --bg: #f5f5f7;
-  --fg:      oklch(22% 0.02 240);
+  --text: #1d1d1f;
-  --muted:   oklch(50% 0.018 240);
+  --text-2: #6e6e73;
-  --border:  oklch(90% 0.008 240);
+  --text-3: #8e8e93;
-  --accent:  oklch(58% 0.16 145);
+  --hairline: rgba(0, 0, 0, 0.08);
+  --surface: #ffffff;
+  --surface-2: #ffffff;
+  --material: rgba(255, 255, 255, 0.62);
+  --material-drawer: rgba(255, 255, 255, 0.86);
+  --fill: rgba(118, 118, 128, 0.10);
+  --fill-strong: rgba(118, 118, 128, 0.16);
+  --hover: rgba(0, 0, 0, 0.045);
+  --row-hover: rgba(0, 0, 0, 0.025);
+  --scrim: rgba(0, 0, 0, 0.24);
+  --accent: #c62f22;
+  --accent-solid: #c62f22;
+  --accent-soft: rgba(198, 47, 34, 0.08);
+  --gold: #8a6d1a;
+  --gold-bright: #b8933d;
+  --gold-soft: rgba(138, 109, 26, 0.09);
+  --gold-line: rgba(138, 109, 26, 0.28);
+  --gold-fade: rgba(138, 109, 26, 0.03);
+  --green: #248a3d;
+  --green-bg: rgba(52, 199, 89, 0.12);
+  --orange: #b25000;
+  --orange-bg: rgba(255, 159, 10, 0.14);
+  --red: #d70015;
+  --red-bg: rgba(255, 59, 48, 0.10);
+  --red-solid: #d70015;
+  --gray-bg: rgba(120, 120, 128, 0.12);
+  --focus-ring: #0a84ff;
+  --focus-glow: rgba(10, 132, 255, 0.18);
+  --red-line: rgba(215, 0, 21, 0.45);
+  --red-glow: rgba(255, 59, 48, 0.14);
+  --switch-off: rgba(120, 120, 128, 0.24);
+  --switch-on: #34c759;
+  --material-toast: rgba(30, 30, 32, 0.92);
+  --grip: rgba(0, 0, 0, 0.18);
+  --pushback-filter: brightness(0.98);
+  --shadow-seg: 0 1px 3px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(0, 0, 0, 0.03);
+  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.06);
+  --shadow-drawer: -24px 0 64px rgba(0, 0, 0, 0.14);
+  --shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.18);
+  --shadow-toast: 0 8px 24px rgba(0, 0, 0, 0.22);
+  --z-nav: 100;
+  --z-drawer: 200;
+  --z-modal: 300;
+  --z-toast: 400;
+  --z-tooltip: 500;
+  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
+  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
+  --glow-red: rgba(198, 47, 34, 0.05);
+  --glow-gold: rgba(138, 109, 26, 0.05);
+  --lp-brand: linear-gradient(158deg, #c13423, #a02415 52%, #7e170b);
+  --lp-brand-glow: radial-gradient(120% 80% at 18% 12%, rgba(255, 255, 255, 0.22), transparent 58%);
+  --lp-tick: var(--gold-bright);
 
-  /* 状态色 — 仅此处定义 */
+  --fg: var(--text);
-  --success: oklch(55% 0.14 150);
+  --muted: var(--text-2);
-  --warn:    oklch(62% 0.14 70);
+  --border: var(--hairline);
-  --danger:  oklch(55% 0.18 25);
+  --success: var(--green);
-  --info:    oklch(52% 0.12 240);
+  --success-soft: var(--green-bg);
+  --warn: var(--orange);
+  --warn-soft: var(--orange-bg);
+  --danger: var(--red);
+  --danger-soft: var(--red-bg);
+  --info: var(--gold);
+  --info-soft: var(--gold-soft);
+  --fg-soft: var(--hover);
 
-  --accent-soft:  color-mix(in oklch, var(--accent) 12%, transparent);
+  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro SC", "PingFang SC", "Segoe UI", "Microsoft YaHei", sans-serif;
-  --success-soft: color-mix(in oklch, var(--success) 12%, transparent);
+  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "IBM Plex Mono", Menlo, monospace;
-  --warn-soft:    color-mix(in oklch, var(--warn) 14%, transparent);
+  --radius: 9px;
-  --danger-soft:  color-mix(in oklch, var(--danger) 11%, transparent);
+  --radius-lg: 14px;
-  --info-soft:    color-mix(in oklch, var(--info) 10%, transparent);
+  --r-pill: 999px;
-  --fg-soft:      color-mix(in oklch, var(--fg) 5%, transparent);
-
-  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
-  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
-
-  --radius: 8px;
-  --radius-lg: 12px;
   --side-w: 232px;
 }
 
+html[data-theme="night"],
+.v-fusion[data-theme="night"] {
+  --bg: #100f0d;
+  --text: #f2f0eb;
+  --text-2: #a9a49b;
+  --text-3: #8e8a82;
+  --hairline: rgba(255, 255, 255, 0.10);
+  --surface: #1b1916;
+  --surface-2: #2a2721;
+  --material: rgba(26, 24, 21, 0.62);
+  --material-drawer: rgba(31, 29, 25, 0.84);
+  --fill: rgba(255, 255, 255, 0.08);
+  --fill-strong: rgba(255, 255, 255, 0.13);
+  --hover: rgba(255, 255, 255, 0.05);
+  --row-hover: rgba(255, 255, 255, 0.04);
+  --scrim: rgba(0, 0, 0, 0.52);
+  --accent: #e05341;
+  --accent-solid: #cf4529;
+  --accent-soft: rgba(224, 83, 65, 0.16);
+  --gold: #d9b45c;
+  --gold-bright: #f0cd7a;
+  --gold-soft: rgba(217, 180, 92, 0.13);
+  --gold-line: rgba(217, 180, 92, 0.34);
+  --gold-fade: rgba(217, 180, 92, 0.04);
+  --green: #45cd6e;
+  --green-bg: rgba(69, 205, 110, 0.15);
+  --orange: #ffb340;
+  --orange-bg: rgba(255, 179, 64, 0.15);
+  --red: #ff6b5e;
+  --red-bg: rgba(255, 107, 94, 0.14);
+  --red-solid: #d63c2f;
+  --gray-bg: rgba(150, 150, 158, 0.16);
+  --focus-ring: #409cff;
+  --focus-glow: rgba(64, 156, 255, 0.30);
+  --red-line: rgba(255, 107, 94, 0.50);
+  --red-glow: rgba(255, 107, 94, 0.20);
+  --switch-off: rgba(120, 120, 128, 0.34);
+  --switch-on: #30d158;
+  --material-toast: rgba(54, 52, 47, 0.94);
+  --grip: rgba(255, 255, 255, 0.22);
+  --pushback-filter: brightness(0.92);
+  --shadow-seg: 0 1px 3px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(255, 255, 255, 0.06);
+  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.35);
+  --shadow-drawer: -24px 0 64px rgba(0, 0, 0, 0.55);
+  --shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.60);
+  --shadow-toast: 0 8px 24px rgba(0, 0, 0, 0.50);
+  --glow-red: rgba(224, 83, 65, 0.07);
+  --glow-gold: rgba(217, 180, 92, 0.06);
+  --lp-brand: linear-gradient(158deg, #201b14, #161310 52%, #0f0d0a);
+  --lp-brand-glow: radial-gradient(120% 80% at 18% 12%, rgba(217, 180, 92, 0.18), transparent 58%);
+  --lp-tick: var(--gold);
+}
+
 /* ─── reset ─────────────────────────────────────────────────────── */
 *, *::before, *::after { box-sizing: border-box; }
+html.v-fusion { height: 100%; }
 body {
   margin: 0;
-  background: var(--bg);
+  background-color: var(--bg);
+  background-image:
+    radial-gradient(1200px 620px at 100% 0%, var(--glow-red), transparent 58%),
+    radial-gradient(1000px 520px at 0% 100%, var(--glow-gold), transparent 58%);
+  background-attachment: fixed;
   color: var(--fg);
   font-family: var(--font-body);
   font-size: 14px;
   line-height: 1.55;
   -webkit-font-smoothing: antialiased;
 }
+body.is-app {
+  height: 100%;
+  overflow: hidden;
+}
 img, svg { display: block; }
 a { color: inherit; text-decoration: none; }
 button { font: inherit; cursor: pointer; }
@@ -49,27 +163,55 @@ h1, h2, h3, h4 { margin: 0; line-height: 1.3; }
 p { margin: 0; }
 
 :focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--focus-ring);
   outline-offset: 2px;
-  border-radius: 4px;
+}
+
+html[data-theme-anim],
+html[data-theme-anim] body,
+html[data-theme-anim] body * {
+  transition: color 200ms ease, background-color 200ms ease, background 200ms ease,
+    border-color 200ms ease, box-shadow 200ms ease, filter 200ms ease, opacity 200ms ease !important;
 }
 
 /* ─── 应用外壳 ──────────────────────────────────────────────────── */
-.shell { display: grid; grid-template-columns: var(--side-w) 1fr; min-height: 100vh; }
+.shell {
+  display: grid;
+  grid-template-columns: var(--side-w) minmax(0, 1fr);
+  height: 100vh;
+  overflow: hidden;
+}
 
 .sidebar {
-  background: var(--surface);
+  background: var(--material);
+  backdrop-filter: blur(24px) saturate(180%);
+  -webkit-backdrop-filter: blur(24px) saturate(180%);
   border-right: 1px solid var(--border);
   display: flex;
   flex-direction: column;
-  position: sticky;
-  top: 0;
   height: 100vh;
+  overflow: hidden;
+  z-index: var(--z-nav);
 }
 .side-brand {
-  padding: 18px 20px 16px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 18px 16px 16px;
   border-bottom: 1px solid var(--border);
+  flex: none;
 }
+.brand-logo {
+  width: 38px;
+  height: 38px;
+  border-radius: 9px;
+  object-fit: contain;
+  flex: none;
+}
+.brand-logo-night { display: none; }
+html[data-theme="night"] .brand-logo-day { display: none; }
+html[data-theme="night"] .brand-logo-night { display: block; }
+.brand-text { min-width: 0; }
 .side-brand .brand-name { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
 .side-brand .brand-sub { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 3px; letter-spacing: 0.02em; }
 .side-role {
@@ -83,7 +225,7 @@ p { margin: 0; }
 }
 .side-role.company { background: var(--info-soft); color: var(--info); }
 
-.side-nav { flex: 1; overflow-y: auto; padding: 12px 10px; }
+.side-nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 12px 10px; }
 .side-nav .nav-group { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--muted); padding: 14px 10px 6px; }
 .side-nav a {
   display: flex; align-items: center; gap: 10px;
@@ -96,7 +238,7 @@ p { margin: 0; }
 .side-nav a svg { width: 16px; height: 16px; flex: none; }
 .side-nav a:hover { color: var(--fg); background: var(--fg-soft); }
 .side-nav a.active {
-  color: var(--fg);
+  color: var(--accent);
   background: var(--accent-soft);
   font-weight: 600;
 }
@@ -111,74 +253,130 @@ p { margin: 0; }
   color: var(--danger);
   font-weight: 600;
 }
-.side-foot { border-top: 1px solid var(--border); padding: 12px 16px; }
+.side-foot { border-top: 1px solid var(--border); padding: 12px 12px 16px; flex: none; }
-.side-foot .user-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
+.theme-seg {
-.side-foot .user-row > div { min-width: 0; }
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2px;
+  padding: 3px;
+  margin-bottom: 10px;
+  border-radius: 9px;
+  background: var(--fill);
+  box-shadow: var(--shadow-seg);
+}
+.theme-seg button {
+  height: 26px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--text-2);
+  font-size: 12px;
+  font-weight: 600;
+}
+.theme-seg button.is-active {
+  background: var(--surface);
+  color: var(--text);
+}
+.account-box {
+  background: var(--fill);
+  border-radius: 10px;
+  padding: 10px;
+}
+.side-foot .user-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.side-foot .user-row > div { min-width: 0; flex: 1; }
 .side-foot .avatar {
-  width: 30px; height: 30px; border-radius: 50%;
+  width: 28px; height: 28px; border-radius: 8px;
-  background: var(--fg); color: var(--surface);
+  background: var(--gold-soft); color: var(--gold);
   display: grid; place-items: center;
-  font-size: 12px; font-weight: 600;
+  font-size: 12px; font-weight: 700;
   flex: none;
 }
-.side-foot .user-name { font-size: 13px; font-weight: 600; white-space: nowrap; }
+.side-foot .user-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.side-foot .user-meta { font-family: var(--font-mono); font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.side-foot .user-meta { font-size: 10.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 4px; }
-.side-foot .logout { margin-left: auto; color: var(--muted); font-size: 12px; padding: 4px 6px; border-radius: 6px; background: none; border: 0; flex: none; white-space: nowrap; }
+.side-foot .logout,
-.side-foot .logout:hover { color: var(--danger); background: var(--danger-soft); }
+.icon-btn.logout {
+  margin-left: auto;
+  width: 28px; height: 28px;
+  padding: 0;
+  border-radius: 7px;
+  border: 1px solid var(--hairline);
+  background: var(--surface);
+  color: var(--text-2);
+  display: inline-grid; place-items: center;
+  flex: none;
+}
+.side-foot .logout svg,
+.icon-btn.logout svg { width: 15px; height: 15px; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
+.side-foot .logout:hover,
+.icon-btn.logout:hover { color: var(--red); background: var(--red-bg); border-color: var(--red-line); }
+.side-foot .logout:active,
+.icon-btn.logout:active { transform: scale(0.94); }
 
-.main { min-width: 0; display: flex; flex-direction: column; }
+.main {
+  min-width: 0;
+  min-height: 0;
+  height: 100vh;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
 
 .topbar {
   position: sticky; top: 0; z-index: 20;
-  background: color-mix(in oklch, var(--bg) 88%, transparent);
+  background: var(--material);
-  backdrop-filter: blur(10px);
+  backdrop-filter: blur(24px) saturate(180%);
   border-bottom: 1px solid var(--border);
   padding: 12px 28px;
   display: flex; align-items: center; gap: 16px;
   flex-wrap: wrap;
+  flex: none;
 }
 .topbar .crumb { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
 .topbar .crumb b { color: var(--fg); font-weight: 600; }
 .topbar .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
 
-.content { padding: 24px 28px 64px; max-width: 1440px; width: 100%; margin-inline: auto; }
+.content { padding: 34px 40px 96px; max-width: 1440px; width: 100%; margin-inline: auto; }
 
 /* ─── 页头 ──────────────────────────────────────────────────────── */
-.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
+.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
-.page-head h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; }
+.page-head h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.022em; }
 .page-head .page-sub { color: var(--muted); font-size: 13px; margin-top: 5px; max-width: 72ch; }
 .page-head .page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
 
 /* ─── 按钮 ──────────────────────────────────────────────────────── */
 .btn {
   display: inline-flex; align-items: center; justify-content: center; gap: 7px;
-  padding: 8px 14px;
+  padding: 0 15px;
-  min-height: 34px;
+  height: 32px;
-  border-radius: var(--radius);
+  min-height: 32px;
+  border-radius: 9px;
   border: 1px solid var(--border);
-  background: var(--surface);
+  background: var(--fill);
   color: var(--fg);
-  font-size: 13px; font-weight: 550;
+  font-size: 13px; font-weight: 600;
-  transition: background 0.12s ease, border-color 0.12s ease;
+  transition: background 0.12s ease, border-color 0.12s ease, transform 160ms var(--ease-out);
 }
-.btn:hover { border-color: color-mix(in oklch, var(--fg) 40%, var(--border)); background: var(--fg-soft); }
+.btn:hover { border-color: var(--gold-line); background: var(--hover); }
-.btn:active { transform: translateY(1px); }
+.btn:active { transform: scale(0.97); }
-.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--surface); }
+.btn-primary { background: var(--accent-solid); border-color: var(--accent-solid); color: #fff; }
-.btn-primary:hover { background: color-mix(in oklch, var(--accent) 88%, black); border-color: color-mix(in oklch, var(--accent) 88%, black); }
+.btn-primary:hover { background: var(--accent); border-color: var(--accent); }
 .btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
-.btn-ghost:hover { color: var(--fg); background: var(--fg-soft); }
+.btn-ghost:hover { color: var(--fg); background: var(--hover); }
-.btn-danger { color: var(--danger); border-color: color-mix(in oklch, var(--danger) 35%, var(--border)); }
+.btn-danger { color: var(--danger); border-color: var(--red-line); background: transparent; }
-.btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); }
+.btn-danger:hover { background: var(--red-bg); border-color: var(--red); }
-.btn-sm { padding: 4px 10px; min-height: 26px; font-size: 12px; border-radius: 6px; }
+.btn-sm { padding: 0 10px; height: 26px; min-height: 26px; font-size: 12px; border-radius: 7px; }
-.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
+.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }
-.btn-primary[disabled] { opacity: 1; background: var(--fg-soft); border-color: var(--border); color: var(--muted); }
+.btn-primary[disabled] { opacity: 1; background: var(--fill-strong); border-color: var(--border); color: var(--muted); }
 
 /* ─── 卡片 ──────────────────────────────────────────────────────── */
 .card {
   background: var(--surface);
-  border: 1px solid var(--border);
+  border: 1px solid var(--hairline);
-  border-radius: var(--radius-lg);
+  border-radius: 14px;
   padding: 18px 20px;
+  box-shadow: var(--shadow-card);
 }
 .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
 .card-title { font-size: 14px; font-weight: 650; letter-spacing: -0.005em; }
@@ -186,11 +384,11 @@ p { margin: 0; }
 
 /* ─── 指标卡 ────────────────────────────────────────────────────── */
 .stat-card { padding: 16px 18px; }
-.stat-card .stat-label { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
+.stat-card .stat-label { font-size: 11.5px; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
 .stat-card .stat-value {
   font-family: var(--font-mono);
   font-variant-numeric: tabular-nums;
-  font-size: 26px; font-weight: 650;
+  font-size: 26px; font-weight: 700;
   letter-spacing: -0.02em;
   margin-top: 6px;
 }
@@ -198,6 +396,19 @@ p { margin: 0; }
 .stat-card .stat-foot { font-size: 12px; color: var(--muted); margin-top: 6px; }
 .stat-card.alert .stat-value { color: var(--danger); }
 .stat-card.warn .stat-value { color: var(--warn); }
+.stat-card.gold {
+  background: linear-gradient(180deg, var(--gold-soft), var(--gold-fade));
+  border-color: var(--gold-line);
+  position: relative;
+}
+.stat-card.gold::before {
+  content: "";
+  position: absolute; left: 16px; right: 16px; top: 0;
+  height: 2px;
+  border-radius: 2px;
+  background: linear-gradient(90deg, var(--gold), transparent);
+}
+.stat-card.gold .stat-value { color: var(--gold); font-size: 29px; }
 .stat-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
 .stat-dot.danger { background: var(--danger); }
 .stat-dot.warn { background: var(--warn); }
@@ -448,7 +659,7 @@ p { margin: 0; }
 .meta { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
 .mt-0 { margin-top: 0; }
 
-@media (max-width: 1100px) {
+@media (max-width: 1279px) {
   .grid-4, .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .grid-3, .grid-2-1, .grid-1-2, .grid-3-2, .grid-480-1 { grid-template-columns: minmax(0, 1fr); }
   .dash-master-split {
@@ -474,11 +685,10 @@ p { margin: 0; }
     border-top: 1px solid var(--border);
   }
 }
-@media (max-width: 860px) {
+@media (max-width: 767px) {
-  .shell { grid-template-columns: 1fr; }
-  .sidebar { position: static; height: auto; }
   .grid-2 { grid-template-columns: 1fr; }
-  .content { padding: 16px 16px 48px; }
+  .content { padding: 20px 16px 64px; }
+  .page-head h1 { font-size: 24px; }
   .dash-master-head-actions {
     width: 100%;
     margin-left: 0;
@@ -505,15 +715,17 @@ p { margin: 0; }
 /* ─── 数据表 ────────────────────────────────────────────────────── */
 .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
 .ds-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
-.ds-table th, .ds-table td { padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
+.ds-table th, .ds-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
 .ds-table th {
-  color: var(--muted); font-weight: 550;
+  color: var(--text-3); font-weight: 600;
-  font-family: var(--font-mono); font-size: 11px;
+  font-size: 11.5px;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.03em;
-  background: var(--bg);
+  background: var(--surface);
   position: sticky; top: 0;
 }
-.ds-table tbody tr:hover { background: var(--fg-soft); }
+@media (hover: hover) {
+  .ds-table tbody tr:hover { background: var(--row-hover); }
+}
 .ds-table tbody tr:last-child td { border-bottom: 0; }
 .ds-table .num-col { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
 .ds-table td.wrap, .ds-table th.wrap { white-space: normal; min-width: 180px; }
@@ -527,7 +739,8 @@ p { margin: 0; }
 /* ─── 徽章 / 状态 ───────────────────────────────────────────────── */
 .pill {
   display: inline-flex; align-items: center; gap: 5px;
-  padding: 2px 9px;
+  height: 22px;
+  padding: 0 9px;
   border-radius: 999px;
   font-size: 11.5px; font-weight: 600;
   white-space: nowrap;
@@ -564,17 +777,18 @@ p { margin: 0; }
 .field > label { font-size: 12px; color: var(--muted); font-weight: 550; }
 .input, .select, .textarea, .field .input, .field .select, .field .textarea {
   padding: 7px 11px;
-  border: 1px solid var(--border);
+  border: 1px solid var(--hairline);
-  border-radius: var(--radius);
+  border-radius: 9px;
-  background: var(--surface);
+  background: var(--fill);
   color: var(--fg);
   font: inherit;
-  font-size: 13px;
+  font-size: 13.5px;
   min-height: 34px;
 }
 .input:focus, .select:focus, .textarea:focus, .field .input:focus, .field .select:focus, .field .textarea:focus {
-  outline: 2px solid var(--accent-soft);
+  outline: none;
-  border-color: var(--accent);
+  border-color: var(--focus-ring);
+  box-shadow: 0 0 0 3px var(--focus-glow);
 }
 .input.num-input { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
 .textarea { min-height: 84px; resize: vertical; line-height: 1.55; }
@@ -639,21 +853,23 @@ p { margin: 0; }
 
 /* ─── 弹窗 ──────────────────────────────────────────────────────── */
 .modal-backdrop {
-  position: fixed; inset: 0; z-index: 50;
+  position: fixed; inset: 0; z-index: var(--z-modal);
-  background: color-mix(in oklch, var(--fg) 45%, transparent);
+  background: var(--scrim);
   display: none;
   align-items: center; justify-content: center;
   padding: 24px;
 }
 .modal-backdrop.open { display: flex; }
 .modal {
-  background: var(--surface);
+  background: var(--material-drawer);
-  border-radius: var(--radius-lg);
+  backdrop-filter: blur(28px);
-  border: 1px solid var(--border);
+  -webkit-backdrop-filter: blur(28px);
-  width: 100%; max-width: 560px;
+  border-radius: 16px;
+  border: 1px solid var(--gold-line);
+  width: 100%; max-width: min(520px, 94vw);
   max-height: 86vh; overflow-y: auto;
   padding: 22px 24px;
-  box-shadow: 0 18px 50px color-mix(in oklch, var(--fg) 25%, transparent);
+  box-shadow: var(--shadow-modal);
 }
 .modal.wide { max-width: 760px; }
 .modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
@@ -684,33 +900,55 @@ p { margin: 0; }
   font-size: 13px;
   background: var(--surface);
 }
-.notice.warn { background: var(--warn-soft); border-color: color-mix(in oklch, var(--warn) 30%, transparent); }
+.notice.warn { background: var(--warn-soft); border-color: var(--orange-bg); }
-.notice.danger { background: var(--danger-soft); border-color: color-mix(in oklch, var(--danger) 30%, transparent); }
+.notice.danger { background: var(--danger-soft); border-color: var(--red-line); }
-.notice.info { background: var(--info-soft); border-color: color-mix(in oklch, var(--info) 25%, transparent); }
+.notice.info { background: var(--info-soft); border-color: var(--gold-line); }
 .notice .n-title { font-weight: 650; }
-.notice .n-body { color: color-mix(in oklch, var(--fg) 80%, var(--muted)); margin-top: 2px; font-size: 12.5px; }
+.notice .n-body { color: var(--text-2); margin-top: 2px; font-size: 12.5px; }
 
 /* ─── 登录页 ────────────────────────────────────────────────────── */
 .login-wrap {
   min-height: 100vh;
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: minmax(440px, 46%) minmax(0, 1fr);
+  position: relative;
+}
+.login-theme {
+  position: absolute;
+  top: 18px;
+  right: 18px;
+  z-index: 2;
+  width: 148px;
 }
 .login-aside {
-  background: var(--fg);
+  background: var(--lp-brand);
-  color: var(--surface);
+  color: #fff;
   padding: 48px 56px;
   display: flex; flex-direction: column;
+  position: relative;
+  overflow: hidden;
+  min-height: 100vh;
 }
-.login-aside .brand-mark { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; opacity: 0.65; }
+.login-aside::before {
+  content: "";
+  position: absolute; inset: 0;
+  background: var(--lp-brand-glow);
+  pointer-events: none;
+}
+html[data-theme="night"] .login-aside {
+  box-shadow: inset -1px 0 0 var(--gold-line);
+}
+.login-aside > * { position: relative; z-index: 1; }
+.login-aside .brand-logo { width: 52px; height: 52px; margin-bottom: 18px; }
+.login-aside .brand-mark { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; opacity: 0.72; }
 .login-aside h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin-top: 18px; line-height: 1.25; }
-.login-aside .aside-sub { opacity: 0.72; font-size: 14px; margin-top: 14px; max-width: 40ch; }
+.login-aside .aside-sub { opacity: 0.82; font-size: 14px; margin-top: 14px; max-width: 40ch; }
-.login-aside .aside-list { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
+.login-aside .aside-list { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding-top: 32px; }
-.login-aside .aside-item { display: flex; gap: 10px; font-size: 13px; opacity: 0.85; align-items: baseline; }
+.login-aside .aside-item { display: flex; gap: 10px; font-size: 13px; opacity: 0.92; align-items: baseline; }
-.login-aside .aside-item .tick { font-family: var(--font-mono); color: var(--accent); }
+.login-aside .aside-item .tick { font-family: var(--font-mono); color: var(--lp-tick); font-weight: 700; }
-.login-panel { display: grid; place-items: center; padding: 48px 32px; }
+.login-panel { display: grid; place-items: center; padding: 72px 32px 48px; }
 .login-card { width: 100%; max-width: 400px; }
-.login-card h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
+.login-card h2 { font-size: 24px; font-weight: 750; letter-spacing: -0.01em; }
 .login-card .login-sub { color: var(--muted); font-size: 13px; margin: 6px 0 24px; }
 .role-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
 .role-switch button {
@@ -726,24 +964,33 @@ p { margin: 0; }
 .role-switch button.active { border-color: var(--accent); background: var(--accent-soft); }
 .role-switch button.active .r-name { color: var(--accent); }
 .login-card .field { margin-bottom: 14px; }
+.login-card .btn-primary { height: 40px; min-height: 40px; width: 100%; }
+.login-notice {
+  margin-top: 16px;
+  padding: 10px 12px;
+  border-radius: 9px;
+  background: var(--gold-soft);
+  border: 1px solid var(--gold-line);
+  color: var(--gold);
+  font-size: 12.5px;
+}
 .login-foot { margin-top: 16px; font-size: 12px; color: var(--muted); text-align: center; }
 .login-foot a { color: var(--accent); font-weight: 550; }
 .login-foot a:hover { text-decoration: underline; }
 
-/* 端标识：登录页顶部大字区分管理端 / 公司端 */
 .login-role-title {
-  font-size: 34px;
+  font-size: 22px;
-  font-weight: 800;
+  font-weight: 750;
-  letter-spacing: 0.02em;
+  letter-spacing: 0.01em;
   line-height: 1.15;
   margin-bottom: 6px;
+  color: var(--text);
 }
 .login-role-title.admin { color: var(--accent); }
-.login-role-title.company { color: var(--info); }
+.login-role-title.company { color: var(--accent); }
 .login-role-caption { color: var(--muted); font-size: 13px; margin-bottom: 22px; }
-/* 管理端青绿 / 公司端品蓝侧栏色块 */
+.login-aside.company { background: var(--lp-brand); }
-.login-aside.company { background: var(--info); }
+.login-aside.company .aside-item .tick { color: var(--lp-tick); opacity: 1; }
-.login-aside.company .aside-item .tick { color: var(--surface); opacity: 0.85; }
 .login-back {
   display: inline-flex; align-items: center; gap: 6px;
   margin-bottom: 20px;
@@ -755,10 +1002,17 @@ p { margin: 0; }
   font-size: 12.5px; font-weight: 600;
 }
 .login-back:hover { border-color: var(--accent); color: var(--accent); }
-.login-back.company:hover { border-color: var(--info); color: var(--info); }
+.login-back.company:hover { border-color: var(--accent); color: var(--accent); }
-@media (max-width: 900px) {
+@media (max-width: 1279px) {
+  .login-wrap { grid-template-columns: minmax(380px, 42%) minmax(0, 1fr); }
+}
+@media (max-width: 1023px) {
   .login-wrap { grid-template-columns: 1fr; }
-  .login-aside { display: none; }
+  .login-aside {
+    min-height: 0;
+    padding: 28px 24px 20px;
+  }
+  .login-aside .aside-list { padding-top: 16px; }
 }
 
 /* ─── 空状态 ────────────────────────────────────────────────────── */
@@ -857,7 +1111,7 @@ a.flow-step.doing:hover { background: color-mix(in oklch, var(--warn) 16%, trans
 
 /* ─── 入口页(index) ────────────────────────────────────────────── */
 .portal-wrap { min-height: 100vh; display: grid; place-items: center; padding: 40px 24px; }
-.portal-inner { width: 100%; max-width: 880px; }
+.portal-inner { width: 100%; max-width: 880px; position: relative; }
 .portal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
 .portal-card {
   display: block;
@@ -867,7 +1121,7 @@ a.flow-step.doing:hover { background: color-mix(in oklch, var(--warn) 16%, trans
   padding: 24px;
   transition: border-color 0.12s ease, transform 0.12s ease;
 }
-.portal-card:hover { border-color: var(--accent); transform: translateY(-2px); }
+.portal-card:hover { border-color: var(--gold-line); }
 .portal-card .pc-role { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--accent); }
 .portal-card h3 { font-size: 17px; font-weight: 700; margin-top: 8px; }
 .portal-card p { color: var(--muted); font-size: 13px; margin-top: 6px; }
@@ -902,28 +1156,72 @@ a.flow-step.doing:hover { background: color-mix(in oklch, var(--warn) 16%, trans
 .icon-button:hover { color: var(--fg); border-color: color-mix(in oklch, var(--fg) 40%, var(--border)); background: var(--fg-soft); }
 .icon-button svg { width: 18px; height: 18px; }
 .menu-button { display: none; }
-@media (max-width: 860px) {
+@media (max-width: 1023px) {
-  .menu-button { display: inline-grid; }
+  .shell { grid-template-columns: 64px minmax(0, 1fr); }
-  .shell { grid-template-columns: 1fr; }
+  .sidebar { width: 64px; }
-  .sidebar {
+  .side-brand { padding: 14px 13px; justify-content: center; }
-    position: fixed; top: 0; left: 0; bottom: 0; z-index: 40;
+  .brand-text, .nav-label, .nav-group, .side-foot .user-name, .side-foot .user-meta, .side-foot .avatar { display: none; }
-    width: var(--side-w); height: 100dvh;
+  .side-nav a { justify-content: center; padding: 10px 0; }
-    transform: translateX(-100%);
+  .side-nav a .nav-badge { display: none; }
-    transition: transform 0.2s ease;
+  .theme-seg { grid-template-columns: 1fr; }
+  .side-foot .user-row { justify-content: center; }
+  .side-foot .logout { margin-left: 0; }
+  .content { padding: 24px 20px 72px; }
+}
+@media (max-width: 767px) {
+  .shell {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto minmax(0, 1fr);
   }
-  .sidebar.is-open { transform: none; box-shadow: 0 0 48px color-mix(in oklch, var(--fg) 22%, transparent); }
+  .sidebar {
+    width: 100%;
+    height: auto;
+    max-height: none;
+    flex-direction: row;
+    align-items: center;
+    overflow-x: auto;
+    overflow-y: hidden;
+    border-right: 0;
+    border-bottom: 1px solid var(--border);
+  }
+  .side-brand { border-bottom: 0; padding: 10px 12px; }
+  .brand-text { display: none; }
+  .side-nav {
+    display: flex;
+    flex-direction: row;
+    overflow-x: auto;
+    padding: 8px 4px;
+    flex: 1;
+  }
+  .side-nav .nav-group { display: none; }
+  .side-nav a { flex: none; padding: 8px 10px; }
+  .nav-label { display: inline; font-size: 12.5px; }
+  .side-foot {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+    border-top: 0;
+    padding: 8px 12px;
+  }
+  .theme-seg { margin-bottom: 0; width: 92px; grid-template-columns: 1fr 1fr; }
+  .account-box { padding: 4px; background: transparent; }
+  .side-foot .user-name, .side-foot .user-meta, .side-foot .avatar { display: none; }
+  .main { min-height: 0; height: 100%; overflow-y: auto; }
 }
 
 /* ─── Toast 轻量提示 ───────────────────────────────────────────── */
-.toast-region { position: fixed; right: 16px; bottom: 16px; z-index: 300; display: grid; gap: 8px; }
+.toast-region { position: fixed; right: 16px; top: 16px; z-index: var(--z-toast); display: grid; gap: 8px; }
 .toast {
-  display: flex; align-items: flex-start; gap: 9px;
+  display: flex; align-items: center; gap: 9px;
   min-width: 260px; max-width: 380px;
-  padding: 11px 14px;
+  height: 40px;
-  border: 1px solid var(--border);
+  padding: 0 16px;
-  border-radius: var(--radius-lg);
+  border: 0;
-  background: var(--surface);
+  border-radius: 999px;
-  box-shadow: 0 12px 34px color-mix(in oklch, var(--fg) 18%, transparent);
+  background: var(--material-toast);
+  color: #fff;
+  box-shadow: var(--shadow-toast);
   font-size: 13px;
 }
 .toast .t-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 5px; background: var(--muted); }
@@ -945,18 +1243,26 @@ a.flow-step.doing:hover { background: color-mix(in oklch, var(--warn) 16%, trans
 
 /* ─── 侧滑详情抽屉（用 modal/card token 重画） ─────────────────── */
 .drawer {
-  position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
+  position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-drawer);
-  width: min(400px, calc(100vw - 24px));
+  width: min(480px, 94vw);
   display: flex; flex-direction: column;
-  background: var(--surface);
+  background: var(--material-drawer);
-  border-left: 1px solid var(--border);
+  backdrop-filter: blur(28px);
-  box-shadow: -18px 0 50px color-mix(in oklch, var(--fg) 22%, transparent);
+  -webkit-backdrop-filter: blur(28px);
+  border-left: 1px solid var(--gold-line);
+  box-shadow: var(--shadow-drawer);
   transform: translateX(100%);
   visibility: hidden;
-  transition: transform 0.22s ease, visibility 0.22s;
+  transition: transform 420ms var(--ease-drawer), visibility 420ms;
 }
 .drawer.is-open { transform: none; visibility: visible; }
-.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--border); }
+.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--border); position: relative; }
+.drawer-head::before {
+  content: "";
+  position: absolute; top: 8px; left: 50%;
+  width: 36px; height: 4px; margin-left: -18px;
+  border-radius: 999px; background: var(--grip);
+}
 .drawer-head .d-title { font-size: 16px; font-weight: 700; margin-top: 6px; }
 .drawer-head .d-desc { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
 .drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
@@ -999,24 +1305,24 @@ body[data-portal="company"] .side-nav a[data-view="transfers"].active svg {
   color: var(--info);
 }
 [data-page="transfers"] .btn-primary {
-  background: var(--info);
+  background: var(--accent-solid);
-  border-color: var(--info);
+  border-color: var(--accent-solid);
-  color: var(--surface);
+  color: #fff;
 }
 [data-page="transfers"] .btn-primary:hover {
-  background: color-mix(in oklch, var(--info) 88%, black);
+  background: var(--accent);
-  border-color: color-mix(in oklch, var(--info) 88%, black);
+  border-color: var(--accent);
 }
 [data-page="transfers"] .loading-inline::before {
-  border-top-color: var(--info);
+  border-top-color: var(--accent);
 }
 [data-page="transfers"] .stat-card .stat-value.amt-in { color: var(--success); }
 [data-page="transfers"] .stat-card .stat-value.amt-out { color: var(--danger); }
 [data-page="transfers"] .ds-table tbody tr.is-pending {
-  background: color-mix(in oklch, var(--warn) 8%, transparent);
+  background: var(--orange-bg);
 }
 [data-page="transfers"] .ds-table tbody tr.is-pending:hover {
-  background: color-mix(in oklch, var(--warn) 14%, transparent);
+  background: var(--warn-soft);
 }
 
 .xfer-split {
@@ -1032,11 +1338,11 @@ body[data-portal="company"] .side-nav a[data-view="transfers"].active svg {
   padding: 16px 18px;
 }
 .xfer-split-pane.confirmed {
-  background: color-mix(in oklch, var(--success) 6%, var(--surface));
+  background: var(--green-bg);
   border-right: 1px solid var(--border);
 }
 .xfer-split-pane.pending {
-  background: color-mix(in oklch, var(--warn) 8%, var(--surface));
+  background: var(--orange-bg);
 }
 .xfer-split-head {
   display: flex;
@@ -1051,7 +1357,7 @@ body[data-portal="company"] .side-nav a[data-view="transfers"].active svg {
   letter-spacing: -0.02em;
 }
 .xfer-split-pane.confirmed .xfer-split-value { color: var(--success); }
-.xfer-split-pane.pending .xfer-split-value { color: color-mix(in oklch, var(--warn) 80%, black); }
+.xfer-split-pane.pending .xfer-split-value { color: var(--warn); }
 .xfer-split-note {
   margin-top: 6px;
   font-size: 12px;
@@ -1084,6 +1390,83 @@ body[data-portal="company"] .side-nav a[data-view="transfers"].active svg {
   .xfer-split-pane.confirmed { border-right: 0; border-bottom: 1px solid var(--border); }
 }
 
+/* ─── 霜曜融合补遗：证据金、空态、降级、三态勾选 ───────────────── */
+.amt-gold, .kv dd.amt-gold, .drawer-body .kv dd.amt-gold { color: var(--gold); font-weight: 750; font-size: 22px; }
+.evidence-flag {
+  display: inline-flex; align-items: center; gap: 6px;
+  color: var(--gold); font-size: 11.5px; font-weight: 600;
+}
+.empty-action {
+  border: 1px dashed var(--hairline);
+  border-radius: 14px;
+  padding: 32px 20px;
+  text-align: center;
+}
+.restricted-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; padding: 24px; }
+.ds-check {
+  appearance: none;
+  width: 15px; height: 15px;
+  border: 1px solid var(--hairline);
+  border-radius: 4px;
+  background: var(--surface);
+  vertical-align: middle;
+  flex: none;
+}
+.ds-check:checked {
+  background: var(--accent);
+  border-color: var(--accent);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='white' stroke-width='1.8' d='M2.2 6.2l2.4 2.4 5.2-5.2'/%3E%3C/svg%3E");
+  background-size: 10px 10px;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.ds-check:indeterminate {
+  background: var(--accent);
+  border-color: var(--accent);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect fill='white' x='1.5' y='5' width='9' height='2' rx='1'/%3E%3C/svg%3E");
+  background-size: 10px 10px;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.batch-bar { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
+.login-page { min-height: 100vh; overflow: auto; }
+.toast .t-detail { color: rgba(255,255,255,.72); }
+.toast .t-dot { margin-top: 0; }
+
+@media (max-width: 480px) {
+  .grid-4, .grid-5, .grid-2, .grid-3 { grid-template-columns: 1fr; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+  .drawer, .modal-backdrop, .toast { transition-duration: 150ms !important; }
+  .skeleton::after { animation: none; }
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .sidebar, .topbar { background: var(--surface); backdrop-filter: none; }
+  .drawer, .modal { background: var(--surface); backdrop-filter: none; }
+  .toast { background: var(--material-toast); }
+}
+
+@media (prefers-contrast: more) {
+  :root, .v-fusion {
+    --hairline: rgba(0, 0, 0, 0.28);
+    --gold: #6b5310;
+    --gold-line: rgba(107, 83, 16, 0.55);
+  }
+  html[data-theme="night"], .v-fusion[data-theme="night"] {
+    --hairline: rgba(255, 255, 255, 0.28);
+    --gold: #f0cd7a;
+    --gold-line: rgba(240, 205, 122, 0.6);
+  }
+}
+
 /* ─── 提醒管理：三步发送流（HEL-230） ─────────────────────────── */
 .send-flow {
   display: grid;
@@ -1291,3 +1674,4 @@ body[data-portal="company"] .side-nav a[data-view="transfers"].active svg {
   [data-page="period-audit"] .table-wrap { display: none; }
   .audit-event-cards { display: grid; gap: 10px; }
 }
+

web/index.html

@@ -4,30 +4,45 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>金牛实业资金往来管理系统 · 入口</title>
-  <link rel="stylesheet" href="design-system.css?v=5" />
+  <script>
+    (function () {
+      try { if (localStorage.getItem("jinniu-theme") === "night") document.documentElement.setAttribute("data-theme", "night"); } catch (e) {}
+      document.documentElement.classList.add("v-fusion");
+    })();
+  </script>
+  <link rel="stylesheet" href="design-system.css?v=12" />
 </head>
-<body>
+<body class="login-page">
   <div class="portal-wrap">
     <div class="portal-inner">
-      <p class="meta" style="letter-spacing: 0.1em;">JINNIU GROUP · INTERCOMPANY TREASURY</p>
+      <div class="login-theme">
+        <div class="theme-seg" role="group" aria-label="主题">
+          <button type="button" data-theme-set="day" class="is-active" aria-pressed="true">日间</button>
+          <button type="button" data-theme-set="night" aria-pressed="false">夜间</button>
+        </div>
+      </div>
+      <img class="brand-logo brand-logo-day" src="assets/logo-day.png" width="44" height="44" alt="金牛实业" />
+      <img class="brand-logo brand-logo-night" src="assets/logo-night.png" width="44" height="44" alt="" />
+      <p class="meta" style="letter-spacing: 0.1em; margin-top: 14px;">JINNIU GROUP · INTERCOMPANY TREASURY</p>
       <h1 style="font-size: 26px; font-weight: 700; letter-spacing: -0.015em; margin-top: 10px;">河南金牛实业集团有限公司 · 资金往来管理系统</h1>
       <p class="muted" style="margin-top: 10px; max-width: 64ch;">集团内部公司间资金往来记账平台。银行流水导入后自动轧算往来余额，支持从集团汇总逐级穿透至银行原始流水。本系统包含管理端与公司业务端两套界面。</p>
 
       <div class="portal-grid">
         <a class="portal-card" href="login-admin.html">
-          <span class="pc-role">管理端 · 7 个页面</span>
+          <span class="pc-role">管理端 · 8 个页面</span>
-          <h3>管理总览 / 往来查询 / 审核中心 / 流水管理 / 公司与账号 / 结账与期初 / 提醒管理</h3>
+          <h3>管理总览 / 往来查询 / 审核中心 / 流水管理 / 公司与账号 / 结账与期初 / 审计记录 / 提醒管理</h3>
           <p>面向管理员：全局监控各公司流水提交与往来余额，集中处理审核事项，执行月度结账。</p>
           <span class="pc-go">去管理端登录 →</span>
         </a>
         <a class="portal-card" href="login-company.html">
-          <span class="pc-role">公司业务端 · 7 个页面</span>
+          <span class="pc-role">公司业务端 · 8 个页面</span>
-          <h3>工作台 / 流水导入 / 手工记录 / 流水管理 / 往来确认 / 银行账户 / 通知</h3>
+          <h3>工作台 / 流水导入 / 手工记录 / 流水管理 / 转账往来 / 往来确认 / 银行账户 / 通知</h3>
           <p>面向成员公司出纳：上传银行流水、登记手工往来、确认单边匹配与科目，跟踪本月完成进度。</p>
           <span class="pc-go">去公司端登录 →</span>
         </a>
       </div>
     </div>
   </div>
+  <script src="theme.js?v=1"></script>
 </body>
 </html>

web/login-admin.html

@@ -4,11 +4,19 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>登录 · 金牛实业资金往来管理系统</title>
-  <link rel="stylesheet" href="design-system.css?v=5" />
+  <script>
+    (function () {
+      try { if (localStorage.getItem("jinniu-theme") === "night") document.documentElement.setAttribute("data-theme", "night"); } catch (e) {}
+      document.documentElement.classList.add("v-fusion");
+    })();
+  </script>
+  <link rel="stylesheet" href="design-system.css?v=12" />
 </head>
-<body data-role="admin">
+<body class="login-page" data-role="admin">
   <div class="login-wrap">
     <aside class="login-aside">
+      <img class="brand-logo brand-logo-day" src="assets/logo-day.png" width="52" height="52" alt="金牛实业" />
+      <img class="brand-logo brand-logo-night" src="assets/logo-night.png" width="52" height="52" alt="" />
       <span class="brand-mark">JINNIU GROUP · TREASURY</span>
       <h1>河南金牛实业集团有限公司<br />资金往来管理系统</h1>
       <p class="aside-sub">集团内部各公司之间资金往来的统一记账平台。导入银行流水后自动轧算公司间往来余额，从集团汇总可层层下钻至银行原始流水。</p>
@@ -21,6 +29,12 @@
     </aside>
 
     <main class="login-panel">
+      <div class="login-theme">
+        <div class="theme-seg" role="group" aria-label="主题">
+          <button type="button" data-theme-set="day" class="is-active" aria-pressed="true">日间</button>
+          <button type="button" data-theme-set="night" aria-pressed="false">夜间</button>
+        </div>
+      </div>
       <div class="login-card">
         <a class="login-back" href="index.html">← 返回入口页</a>
         <div class="login-role-title admin">管理端</div>
@@ -42,9 +56,10 @@
           <div class="field">
             <span class="hint error" id="login-err" role="alert" hidden></span>
           </div>
-          <button class="btn btn-primary" type="submit" style="width: 100%; margin-top: 6px;">登 录</button>
+          <button class="btn btn-primary" type="submit">登 录</button>
         </form>
 
+        <div class="login-notice">首次登录请修改初始密码。新密码须 8 位以上，且包含字母与数字。</div>
         <p class="login-foot">忘记密码请联系管理员重置 · <a href="index.html">返回入口页</a></p>
       </div>
     </main>
@@ -75,6 +90,7 @@
     </div>
   </div>
 
-  <script src="login.js?v=5"></script>
+  <script src="theme.js?v=1"></script>
+  <script src="login.js?v=6"></script>
 </body>
 </html>

web/login-company.html

@@ -4,11 +4,19 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>登录 · 金牛实业资金往来管理系统</title>
-  <link rel="stylesheet" href="design-system.css?v=5" />
+  <script>
+    (function () {
+      try { if (localStorage.getItem("jinniu-theme") === "night") document.documentElement.setAttribute("data-theme", "night"); } catch (e) {}
+      document.documentElement.classList.add("v-fusion");
+    })();
+  </script>
+  <link rel="stylesheet" href="design-system.css?v=12" />
 </head>
-<body data-role="company">
+<body class="login-page" data-role="company">
   <div class="login-wrap">
     <aside class="login-aside company">
+      <img class="brand-logo brand-logo-day" src="assets/logo-day.png" width="52" height="52" alt="金牛实业" />
+      <img class="brand-logo brand-logo-night" src="assets/logo-night.png" width="52" height="52" alt="" />
       <span class="brand-mark">JINNIU GROUP · TREASURY</span>
       <h1>河南金牛实业集团有限公司<br />资金往来管理系统</h1>
       <p class="aside-sub">集团内部各公司之间资金往来的统一记账平台。导入银行流水后自动轧算公司间往来余额，从集团汇总可层层下钻至银行原始流水。</p>
@@ -21,6 +29,12 @@
     </aside>
 
     <main class="login-panel">
+      <div class="login-theme">
+        <div class="theme-seg" role="group" aria-label="主题">
+          <button type="button" data-theme-set="day" class="is-active" aria-pressed="true">日间</button>
+          <button type="button" data-theme-set="night" aria-pressed="false">夜间</button>
+        </div>
+      </div>
       <div class="login-card">
         <a class="login-back company" href="index.html">← 返回入口页</a>
         <div class="login-role-title company">公司端</div>
@@ -42,9 +56,10 @@
           <div class="field">
             <span class="hint error" id="login-err" role="alert" hidden></span>
           </div>
-          <button class="btn btn-primary" type="submit" style="width: 100%; margin-top: 6px;">登 录</button>
+          <button class="btn btn-primary" type="submit">登 录</button>
         </form>
 
+        <div class="login-notice">首次登录请修改初始密码。新密码须 8 位以上，且包含字母与数字。</div>
         <p class="login-foot">忘记密码请联系管理员重置 · <a href="index.html">返回入口页</a></p>
       </div>
     </main>
@@ -75,6 +90,7 @@
     </div>
   </div>
 
-  <script src="login.js?v=5"></script>
+  <script src="theme.js?v=1"></script>
+  <script src="login.js?v=6"></script>
 </body>
 </html>

web/theme.js

@@ -0,0 +1,55 @@
+/* 霜曜 / 黑金主题：仅记忆主题偏好，不写任何业务数据。 */
+(function (global) {
+  var KEY = "jinniu-theme";
+
+  function read() {
+    try {
+      return localStorage.getItem(KEY) === "night" ? "night" : "day";
+    } catch (err) {
+      return "day";
+    }
+  }
+
+  function syncButtons(theme) {
+    document.querySelectorAll("[data-theme-set]").forEach(function (btn) {
+      var on = btn.getAttribute("data-theme-set") === theme;
+      btn.classList.toggle("is-active", on);
+      btn.setAttribute("aria-pressed", on ? "true" : "false");
+    });
+  }
+
+  function apply(theme, animate) {
+    var next = theme === "night" ? "night" : "day";
+    var root = document.documentElement;
+    root.classList.add("v-fusion");
+    if (animate) {
+      root.setAttribute("data-theme-anim", "");
+      window.setTimeout(function () {
+        root.removeAttribute("data-theme-anim");
+      }, 220);
+    }
+    root.setAttribute("data-theme", next);
+    if (document.body) document.body.setAttribute("data-theme", next);
+    syncButtons(next);
+  }
+
+  function set(theme) {
+    var next = theme === "night" ? "night" : "day";
+    try {
+      localStorage.setItem(KEY, next);
+    } catch (err) {
+      /* 无本地存储时仍切换当次会话 */
+    }
+    apply(next, true);
+  }
+
+  apply(read(), false);
+  document.addEventListener("click", function (event) {
+    var btn = event.target.closest("[data-theme-set]");
+    if (!btn) return;
+    event.preventDefault();
+    set(btn.getAttribute("data-theme-set"));
+  });
+
+  global.JinniuTheme = { apply: apply, set: set, read: read };
+})(window);