diff --git a/backend/app/routers/finance.py b/backend/app/routers/finance.py
index d69fa4b..515c046 100644
--- a/backend/app/routers/finance.py
+++ b/backend/app/routers/finance.py
@@ -11,7 +11,6 @@ from sqlalchemy.orm import Session
 from app.database import get_db
 from app.services.finance_service import (
     compute_daily_summary,
-    get_finance_summary,
     get_or_create_daily_summary,
     overwrite_daily_summary,
     today_shanghai,
@@ -54,26 +53,6 @@ def daily_summary(
     return get_or_create_daily_summary(db, target)
 
 
-@router.get("/summary")
-def finance_summary(
-    period: str = Query("day", description="day | week | month"),
-    date: str | None = Query(None, description="YYYY-MM-DD, defaults to yesterday Asia/Shanghai"),
-    db: Session = Depends(get_db),
-    _: Any = Depends(get_current_user),
-) -> dict:
-    """Return finance summary for day/week/month.
-
-    day reuses the existing daily snapshot behavior. week/month aggregate only
-    stored finance_daily_summaries rows and never call upstream services.
-    """
-    period = period.lower()
-    if period not in {"day", "week", "month"}:
-        raise HTTPException(400, f"Invalid period: {period!r}. Expected day, week, or month.")
-    target = _resolve_date(date)
-    _validate_not_future(target)
-    return get_finance_summary(db, period, target)
-
-
 @router.post("/daily-summary/compare")
 def compare_daily_summary(
     date: str | None = Query(None, description="YYYY-MM-DD, defaults to yesterday Asia/Shanghai"),
diff --git a/backend/app/services/finance_service.py b/backend/app/services/finance_service.py
index b304a6a..72c7f5a 100644
--- a/backend/app/services/finance_service.py
+++ b/backend/app/services/finance_service.py
@@ -449,189 +449,6 @@ def _load_summary(row: Any) -> dict[str, Any]:
     return data
 
 
-def _date_range(start: date, end: date) -> list[date]:
-    """Return every date in [start, end]."""
-    days = (end - start).days
-    return [start + timedelta(days=i) for i in range(days + 1)]
-
-
-def _month_end(target_date: date) -> date:
-    """Return the last day of target_date's natural month."""
-    if target_date.month == 12:
-        next_month = date(target_date.year + 1, 1, 1)
-    else:
-        next_month = date(target_date.year, target_date.month + 1, 1)
-    return next_month - timedelta(days=1)
-
-
-def finance_period_bounds(period: str, target_date: date) -> tuple[date, date]:
-    """Resolve finance summary period bounds."""
-    if period == "day":
-        return target_date, target_date
-    if period == "week":
-        return target_date - timedelta(days=6), target_date
-    if period == "month":
-        return date(target_date.year, target_date.month, 1), _month_end(target_date)
-    raise ValueError(f"unsupported finance period: {period}")
-
-
-def _chart_from_summaries(
-    dates: list[date],
-    summaries_by_date: dict[date, dict[str, Any]],
-) -> dict[str, list[Any]]:
-    """Build date-aligned chart series, using zero for dates without snapshots."""
-    return {
-        "labels": [d.isoformat() for d in dates],
-        "revenue": [
-            round(float(summaries_by_date.get(d, {}).get("total_revenue", 0.0) or 0.0), 6)
-            for d in dates
-        ],
-        "cost": [
-            round(float(summaries_by_date.get(d, {}).get("total_cost", 0.0) or 0.0), 6)
-            for d in dates
-        ],
-    }
-
-
-def _aggregate_items(rows: list[tuple[date, dict[str, Any]]], side: str) -> list[dict[str, Any]]:
-    """Aggregate item amounts by (id, upstream_type); any daily failure fails the item."""
-    grouped: dict[tuple[int | str, str], dict[str, Any]] = {}
-
-    for row_date, summary in rows:
-        for item in summary.get(side, []) or []:
-            ident = item.get("id")
-            if ident is None:
-                ident = -1
-            upstream_type = item.get("upstream_type") or ""
-            key = (ident, upstream_type)
-            aggregate = grouped.setdefault(
-                key,
-                {
-                    "id": ident,
-                    "name": item.get("name", ""),
-                    "upstream_type": upstream_type,
-                    "amount": 0.0,
-                    "status": "success",
-                    "error": None,
-                    "_errors": [],
-                },
-            )
-            if item.get("name"):
-                aggregate["name"] = item["name"]
-            aggregate["amount"] += float(item.get("amount") or 0.0)
-            if item.get("status") == "failed":
-                aggregate["status"] = "failed"
-                error = item.get("error") or "统计失败"
-                aggregate["_errors"].append(f"{row_date.isoformat()}: {error}")
-
-    result = []
-    for item in grouped.values():
-        errors = item.pop("_errors")
-        item["amount"] = round(item["amount"], 6)
-        item["error"] = "；".join(errors) if errors else None
-        result.append(item)
-
-    return sorted(result, key=lambda i: (i["status"] != "failed", str(i.get("name") or ""), str(i.get("id"))))
-
-
-def get_stored_period_summary(
-    db: Session,
-    period: str,
-    target_date: date,
-) -> dict[str, Any]:
-    """Aggregate already-stored finance daily snapshots for week/month periods.
-
-    This intentionally does not compute, backfill, or overwrite daily summaries.
-    Missing dates are reported through partial metadata and charted as zero.
-    """
-    from app.models.finance_daily_summary import FinanceDailySummary
-
-    start_date, end_date = finance_period_bounds(period, target_date)
-    all_dates = _date_range(start_date, end_date)
-    rows = (
-        db.query(FinanceDailySummary)
-        .filter(
-            FinanceDailySummary.stat_date >= start_date,
-            FinanceDailySummary.stat_date <= end_date,
-        )
-        .order_by(FinanceDailySummary.stat_date.asc())
-        .all()
-    )
-
-    loaded_rows: list[tuple[date, dict[str, Any]]] = []
-    summaries_by_date: dict[date, dict[str, Any]] = {}
-    for row in rows:
-        summary = _load_summary(row)
-        loaded_rows.append((row.stat_date, summary))
-        summaries_by_date[row.stat_date] = summary
-
-    missing_dates = [d.isoformat() for d in all_dates if d not in summaries_by_date]
-    total_revenue = sum(float(s.get("total_revenue", 0.0) or 0.0) for s in summaries_by_date.values())
-    total_cost = sum(float(s.get("total_cost", 0.0) or 0.0) for s in summaries_by_date.values())
-    net = total_revenue - total_cost
-    margin = (net / total_revenue * 100) if total_revenue > 0 else 0.0
-    website_items = _aggregate_items(loaded_rows, "website_items")
-    upstream_items = _aggregate_items(loaded_rows, "upstream_items")
-    failed_count = sum(1 for i in website_items + upstream_items if i["status"] == "failed")
-
-    return {
-        "period": period,
-        "date": target_date.isoformat(),
-        "start_date": start_date.isoformat(),
-        "end_date": end_date.isoformat(),
-        "total_revenue": round(total_revenue, 6),
-        "total_cost": round(total_cost, 6),
-        "net_income": round(net, 6),
-        "margin_percent": round(margin, 2),
-        "website_items": website_items,
-        "upstream_items": upstream_items,
-        "failed_count": failed_count,
-        "success": failed_count == 0,
-        "chart": _chart_from_summaries(all_dates, summaries_by_date),
-        "missing_dates": missing_dates,
-        "included_days": len(summaries_by_date),
-        "partial": len(missing_dates) > 0,
-        "from_snapshot": True,
-    }
-
-
-def get_finance_summary(
-    db: Session,
-    period: str,
-    target_date: date,
-) -> dict[str, Any]:
-    """Return day/week/month finance summary with date-aligned chart metadata."""
-    if period == "day":
-        summary = get_or_create_daily_summary(db, target_date)
-        chart_start = target_date - timedelta(days=6)
-        chart_dates = _date_range(chart_start, target_date)
-
-        from app.models.finance_daily_summary import FinanceDailySummary
-        rows = (
-            db.query(FinanceDailySummary)
-            .filter(
-                FinanceDailySummary.stat_date >= chart_start,
-                FinanceDailySummary.stat_date <= target_date,
-            )
-            .order_by(FinanceDailySummary.stat_date.asc())
-            .all()
-        )
-        summaries_by_date = {row.stat_date: _load_summary(row) for row in rows}
-        result = dict(summary)
-        result.update({
-            "period": period,
-            "start_date": target_date.isoformat(),
-            "end_date": target_date.isoformat(),
-            "chart": _chart_from_summaries(chart_dates, summaries_by_date),
-            "missing_dates": [],
-            "included_days": 1,
-            "partial": False,
-        })
-        return result
-
-    return get_stored_period_summary(db, period, target_date)
-
-
 def get_or_create_daily_summary(
     db: Session,
     target_date: date,
diff --git a/backend/test_finance_daily_summary.py b/backend/test_finance_daily_summary.py
index 006ca71..c9c9e84 100644
--- a/backend/test_finance_daily_summary.py
+++ b/backend/test_finance_daily_summary.py
@@ -861,156 +861,6 @@ def test_save_summary_if_absent_skips_existing(monkeypatch):
     db.close()
 
 
-def _insert_finance_summary_row(db, stat_date, summary):
-    from app.models.finance_daily_summary import FinanceDailySummary
-
-    row = FinanceDailySummary(
-        stat_date=stat_date,
-        summary_json=json.dumps(summary, ensure_ascii=False),
-        success=summary.get("success", False),
-    )
-    db.add(row)
-    db.commit()
-    return row
-
-
-def test_week_summary_aggregates_stored_snapshots_only(monkeypatch):
-    """Week aggregation reads existing DB snapshots without computing missing days."""
-    from app.services.finance_service import get_finance_summary
-
-    db = _make_inmemory_db()
-    _insert_finance_summary_row(db, date(2026, 6, 30), {
-        "date": "2026-06-30",
-        "total_revenue": 100.0,
-        "total_cost": 30.0,
-        "net_income": 70.0,
-        "margin_percent": 70.0,
-        "website_items": [
-            {"id": 1, "name": "Site A", "upstream_type": "sub2api", "amount": 100.0, "status": "success", "error": None},
-        ],
-        "upstream_items": [
-            {"id": 10, "name": "Up A", "upstream_type": "new_api", "amount": 30.0, "status": "success", "error": None},
-        ],
-        "failed_count": 0,
-        "success": True,
-    })
-    _insert_finance_summary_row(db, date(2026, 7, 2), {
-        "date": "2026-07-02",
-        "total_revenue": 50.0,
-        "total_cost": 0.0,
-        "net_income": 50.0,
-        "margin_percent": 100.0,
-        "website_items": [
-            {"id": 1, "name": "Site A", "upstream_type": "sub2api", "amount": 50.0, "status": "success", "error": None},
-        ],
-        "upstream_items": [
-            {"id": 10, "name": "Up A", "upstream_type": "new_api", "amount": 0.0, "status": "failed", "error": "timeout"},
-        ],
-        "failed_count": 1,
-        "success": False,
-    })
-
-    def _should_not_compute(*_args, **_kwargs):
-        raise AssertionError("week/month summary must not compute daily summaries")
-
-    monkeypatch.setattr("app.services.finance_service.compute_daily_summary", _should_not_compute)
-    result = get_finance_summary(db, "week", date(2026, 7, 2))
-
-    assert result["start_date"] == "2026-06-26"
-    assert result["end_date"] == "2026-07-02"
-    assert result["included_days"] == 2
-    assert result["partial"] is True
-    assert len(result["missing_dates"]) == 5
-    assert result["total_revenue"] == 150.0
-    assert result["total_cost"] == 30.0
-    assert result["net_income"] == 120.0
-    assert result["chart"]["labels"] == [
-        "2026-06-26", "2026-06-27", "2026-06-28", "2026-06-29",
-        "2026-06-30", "2026-07-01", "2026-07-02",
-    ]
-    assert result["chart"]["revenue"] == [0.0, 0.0, 0.0, 0.0, 100.0, 0.0, 50.0]
-    assert result["website_items"][0]["amount"] == 150.0
-    assert result["upstream_items"][0]["status"] == "failed"
-    assert result["upstream_items"][0]["amount"] == 30.0
-    assert result["upstream_items"][0]["error"] == "2026-07-02: timeout"
-    db.close()
-
-
-def test_month_summary_uses_natural_month_and_reports_missing_dates():
-    """Month aggregation spans the selected date's calendar month."""
-    from app.services.finance_service import get_finance_summary
-
-    db = _make_inmemory_db()
-    _insert_finance_summary_row(db, date(2026, 6, 1), {
-        "date": "2026-06-01",
-        "total_revenue": 10.0,
-        "total_cost": 4.0,
-        "net_income": 6.0,
-        "margin_percent": 60.0,
-        "website_items": [],
-        "upstream_items": [],
-        "failed_count": 0,
-        "success": True,
-    })
-    _insert_finance_summary_row(db, date(2026, 6, 15), {
-        "date": "2026-06-15",
-        "total_revenue": 20.0,
-        "total_cost": 7.0,
-        "net_income": 13.0,
-        "margin_percent": 65.0,
-        "website_items": [],
-        "upstream_items": [],
-        "failed_count": 0,
-        "success": True,
-    })
-
-    result = get_finance_summary(db, "month", date(2026, 6, 15))
-
-    assert result["start_date"] == "2026-06-01"
-    assert result["end_date"] == "2026-06-30"
-    assert result["included_days"] == 2
-    assert result["partial"] is True
-    assert len(result["missing_dates"]) == 28
-    assert result["total_revenue"] == 30.0
-    assert result["total_cost"] == 11.0
-    assert result["net_income"] == 19.0
-    assert len(result["chart"]["labels"]) == 30
-    db.close()
-
-
-def test_day_summary_adds_seven_day_snapshot_chart(monkeypatch):
-    """Day summary keeps existing compute-on-miss behavior and adds daily trend data."""
-    from app.services.finance_service import get_finance_summary
-
-    db = _make_inmemory_db()
-    _add_minimal_test_data(db)
-    _insert_finance_summary_row(db, date(2026, 6, 30), {
-        "date": "2026-06-30",
-        "total_revenue": 80.0,
-        "total_cost": 20.0,
-        "net_income": 60.0,
-        "margin_percent": 75.0,
-        "website_items": [],
-        "upstream_items": [],
-        "failed_count": 0,
-        "success": True,
-    })
-    monkeypatch.setattr("app.services.finance_service.fetch_website_revenue", lambda *_: (100.0, None))
-    monkeypatch.setattr("app.services.finance_service.fetch_upstream_cost_sub2api", lambda *_: (40.0, None))
-
-    result = get_finance_summary(db, "day", date(2026, 7, 2))
-
-    assert result["total_revenue"] == 100.0
-    assert result["included_days"] == 1
-    assert result["partial"] is False
-    assert result["chart"]["labels"] == [
-        "2026-06-26", "2026-06-27", "2026-06-28", "2026-06-29",
-        "2026-06-30", "2026-07-01", "2026-07-02",
-    ]
-    assert result["chart"]["revenue"] == [0.0, 0.0, 0.0, 0.0, 80.0, 0.0, 100.0]
-    db.close()
-
-
 def _make_test_summary(website_items, upstream_items=None):
     """Return a summary dict with deep-copied items to prevent cross-contamination."""
     return {
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 3205ebf..14514ba 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -12,9 +12,7 @@
         "axios": "^1.7.9",
         "axios-retry": "^4.5.0",
         "dayjs": "^1.11.13",
-        "echarts": "^6.1.0",
         "element-plus": "^2.8.8",
-        "lucide-vue-next": "^0.577.0",
         "pinia": "^2.2.6",
         "vue": "^3.5.13",
         "vue-router": "^4.4.5"
@@ -1382,16 +1380,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/echarts": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-6.1.0.tgz",
-      "integrity": "sha512-q0yaFPggC9FUdsWH4blavRWFmxdrIodbkoKNAjJudAI6CA9gNPxHtV2RcZNEepZVlk4yvBYkOkbk6HIVpIyHZA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "tslib": "2.3.0",
-        "zrender": "6.1.0"
-      }
-    },
     "node_modules/element-plus": {
       "version": "2.14.0",
       "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.14.0.tgz",
@@ -1779,15 +1767,6 @@
         "lodash-es": "*"
       }
     },
-    "node_modules/lucide-vue-next": {
-      "version": "0.577.0",
-      "resolved": "https://registry.npmmirror.com/lucide-vue-next/-/lucide-vue-next-0.577.0.tgz",
-      "integrity": "sha512-py05bAfv9SHVJqscbiOnjcnLlEmOffA58a+7XhZuFxrs6txe1E8VoR1ngWGTYO+9aVKABAz8l3ee3PqiQN9QPA==",
-      "license": "ISC",
-      "peerDependencies": {
-        "vue": ">=3.0.1"
-      }
-    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.21.tgz",
@@ -2149,12 +2128,6 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
-    "node_modules/tslib": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
-      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
-      "license": "0BSD"
-    },
     "node_modules/typescript": {
       "version": "5.9.3",
       "resolved": "https://registry.npmmirror.com/typescript/-/typescript-5.9.3.tgz",
@@ -2499,15 +2472,6 @@
       "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
       "dev": true,
       "license": "MIT"
-    },
-    "node_modules/zrender": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-6.1.0.tgz",
-      "integrity": "sha512-oEGMDB6pOP2S6OwRR4PdVv610zrjnA3Bh+JnSG12fYJlBKjtNAoEb5fSUoCOOINlH96I2fU38/A2UpRKs67xYQ==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "tslib": "2.3.0"
-      }
     }
   }
 }
diff --git a/frontend/package.json b/frontend/package.json
index 60bb22c..39ae5e0 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,9 +12,7 @@
     "axios": "^1.7.9",
     "axios-retry": "^4.5.0",
     "dayjs": "^1.11.13",
-    "echarts": "^6.1.0",
     "element-plus": "^2.8.8",
-    "lucide-vue-next": "^0.577.0",
     "pinia": "^2.2.6",
     "vue": "^3.5.13",
     "vue-router": "^4.4.5"
diff --git a/frontend/src/views/Finance.vue b/frontend/src/views/Finance.vue
index c2c1153..6fa3cd0 100644
--- a/frontend/src/views/Finance.vue
+++ b/frontend/src/views/Finance.vue
@@ -1,228 +1,181 @@
 <template>
   <div class="finance-page">
     <div class="finance-shell">
-      <div class="finance-topbar">
-        <div class="period-tabs" aria-label="统计周期">
-          <button
-            v-for="item in periodOptions"
-            :key="item.value"
-            type="button"
-            class="period-tab"
-            :class="{ active: period === item.value }"
-            @click="setPeriod(item.value)"
-          >
-            {{ item.label }}
-          </button>
+      <div class="page-header finance-panel">
+        <div class="header-left">
+          <span class="page-kicker">Daily Reconciliation</span>
+          <h1 class="page-title">
+            <span class="title-icon-box">
+              <el-icon><TrendCharts /></el-icon>
+            </span>
+            财务对账
+          </h1>
+          <p class="page-subtitle">已统计入库数据，定时快照不自动覆盖</p>
         </div>
-
-        <div class="toolbar-actions">
-          <el-input
-            v-model="keyword"
-            class="search-input"
-            clearable
-            placeholder="搜索名称 / 类型 / 错误"
-          >
-            <template #prefix>
-              <Search :size="16" />
-            </template>
-          </el-input>
+        <div class="header-actions">
           <el-date-picker
             v-model="selectedDate"
             type="date"
-            placeholder="选择日期"
+            placeholder="选择日期（默认昨天）"
             :disabled-date="disabledDate"
             format="YYYY-MM-DD"
             value-format="YYYY-MM-DD"
             class="date-picker"
           />
-          <el-button :loading="loading" class="icon-button" @click="loadData">
-            <RefreshCw :size="16" />
+          <el-button type="primary" :loading="loading" @click="loadData" class="refresh-btn">
+            <el-icon><Refresh /></el-icon>
             刷新
           </el-button>
-          <el-button :disabled="!summary" class="icon-button" @click="exportCsv">
-            <Download :size="16" />
-            导出
-          </el-button>
           <el-button
-            v-if="period === 'day' && summary"
+            v-if="summary"
             :loading="comparing"
-            type="primary"
-            class="icon-button compare-button"
             @click="handleCompare"
+            class="compare-btn"
           >
-            <DatabaseZap :size="16" />
-            重新统计比对
+            <el-icon><DataAnalysis /></el-icon>
+            重新统计并比对
           </el-button>
         </div>
       </div>
 
-      <el-alert v-if="fetchError" :title="fetchError" type="error" show-icon :closable="false" class="page-alert" />
-      <el-alert
-        v-if="summary?.partial"
-        :title="partialTitle"
-        type="warning"
-        show-icon
-        :closable="false"
-        class="page-alert"
-      />
+      <el-alert v-if="fetchError" :title="fetchError" type="error" show-icon :closable="false" class="error-alert" />
 
-      <el-skeleton v-if="loading && !summary" :rows="10" animated class="loading-panel" />
-
-      <template v-if="summary">
-        <div class="metrics-grid">
-          <div class="metric-card">
-            <div class="metric-head">
-              <span>总收入</span>
-              <span class="metric-icon income"><TrendingUp :size="18" /></span>
-            </div>
-            <strong>{{ formatAmount(summary.total_revenue) }}</strong>
-            <small>{{ dateRangeLabel }}</small>
+      <div v-if="summary" class="summary-cards">
+        <div class="stat-card revenue">
+          <div class="stat-topline">
+            <div class="stat-label">网站收入</div>
+            <span class="metric-dot amber" />
           </div>
-          <div class="metric-card">
-            <div class="metric-head">
-              <span>总消费</span>
-              <span class="metric-icon cost"><ReceiptText :size="18" /></span>
-            </div>
-            <strong>{{ formatAmount(summary.total_cost) }}</strong>
-            <small>{{ summary.upstream_items.length }} 个上游源</small>
-          </div>
-          <div class="metric-card">
-            <div class="metric-head">
-              <span>净收入</span>
-              <span class="metric-icon net"><WalletCards :size="18" /></span>
-            </div>
-            <strong :class="summary.net_income >= 0 ? 'positive' : 'negative'">
-              {{ formatAmount(summary.net_income) }}
-            </strong>
-            <small>毛利率 {{ formatPercent(summary.margin_percent) }}</small>
-          </div>
-          <div class="metric-card">
-            <div class="metric-head">
-              <span>{{ summary.partial ? '部分汇总' : '失败项' }}</span>
-              <span class="metric-icon risk"><BadgeAlert :size="18" /></span>
-            </div>
-            <strong :class="summary.failed_count > 0 || summary.partial ? 'negative' : ''">
-              {{ summary.failed_count }}
-            </strong>
-            <small>{{ summary.partial ? `缺失 ${summary.missing_dates.length} 天快照` : failureText }}</small>
+          <div class="stat-value">{{ formatAmount(summary.total_revenue) }}</div>
+          <div class="stat-sub">
+            <span>{{ summary.date }}</span>
+            <span v-if="summary.from_snapshot && summary.computed_at" class="snapshot-badge">
+              快照 {{ formatTime(summary.computed_at) }}
+            </span>
           </div>
         </div>
-
-        <div class="chart-grid">
-          <section class="dashboard-panel trend-panel">
-            <div class="panel-header">
-              <div>
-                <h2>收入 / 消费趋势</h2>
-                <p>{{ trendCaption }}</p>
-              </div>
-              <span class="panel-chip">{{ summary.included_days }} 天已入库</span>
-            </div>
-            <div ref="trendChartRef" class="chart trend-chart" />
-          </section>
-
-          <section class="dashboard-panel share-panel">
-            <div class="panel-header">
-              <div>
-                <h2>上游占比</h2>
-                <p>按当前周期消费金额汇总</p>
-              </div>
-            </div>
-            <div ref="shareChartRef" class="chart share-chart" />
-          </section>
-        </div>
-
-        <section class="dashboard-panel detail-panel">
-          <div class="panel-header detail-header">
-            <div>
-              <h2>收入 / 消费明细</h2>
-              <p>{{ filteredWebsiteItems.length }} 个收入项，{{ filteredUpstreamItems.length }} 个消费项</p>
-            </div>
-            <div class="table-tabs">
-              <button
-                type="button"
-                :class="{ active: activeTable === 'websites' }"
-                @click="activeTable = 'websites'"
-              >
-                收入
-              </button>
-              <button
-                type="button"
-                :class="{ active: activeTable === 'upstreams' }"
-                @click="activeTable = 'upstreams'"
-              >
-                消费
-              </button>
-            </div>
+        <div class="stat-card cost">
+          <div class="stat-topline">
+            <div class="stat-label">上游消费</div>
+            <span class="metric-dot blue" />
           </div>
+          <div class="stat-value">{{ formatAmount(summary.total_cost) }}</div>
+          <div class="stat-sub">{{ upstreamItemCount }} 个上游</div>
+        </div>
+        <div class="stat-card net" :class="summary.net_income >= 0 ? 'positive' : 'negative'">
+          <div class="stat-topline">
+            <div class="stat-label">净收入</div>
+            <span class="metric-dot green" />
+          </div>
+          <div class="stat-value">{{ formatAmount(summary.net_income) }}</div>
+          <div class="stat-sub">毛利率 {{ summary.margin_percent.toFixed(2) }}%</div>
+        </div>
+        <div class="stat-card failed" :class="summary.failed_count > 0 ? 'has-failures' : ''">
+          <div class="stat-topline">
+            <div class="stat-label">失败项</div>
+            <span class="metric-dot red" />
+          </div>
+          <div class="stat-value">{{ summary.failed_count }}</div>
+          <div class="stat-sub">{{ summary.failed_count > 0 ? '数据不完整，净收入仅供参考' : '全部统计成功' }}</div>
+        </div>
+      </div>
 
+      <el-empty v-else-if="!loading && !fetchError" description="点击刷新加载昨日对账数据" class="empty-state">
+        <el-button type="primary" @click="loadData">立即加载</el-button>
+      </el-empty>
+
+      <el-skeleton v-if="loading" :rows="8" animated class="skeleton" />
+
+      <template v-if="summary && !loading">
+        <div class="section finance-panel">
+          <div class="section-header">
+            <span class="section-title">
+              <span class="title-dot amber" />
+              <el-icon><OfficeBuilding /></el-icon>
+              网站收入明细
+            </span>
+            <el-tag :type="allWebsitesOk ? 'success' : 'danger'" size="small" class="section-status">
+              {{ successWebsiteCount }} / {{ summary.website_items.length }} 成功
+            </el-tag>
+          </div>
           <div class="table-wrap">
-            <el-table
-              v-if="activeTable === 'websites'"
-              :data="filteredWebsiteItems"
-              class="finance-table"
-              empty-text="暂无收入明细"
-            >
-              <el-table-column label="名称" prop="name" min-width="180" />
+            <el-table :data="summary.website_items" class="detail-table">
+              <el-table-column label="网站名称" prop="name" min-width="180" />
               <el-table-column label="收入" min-width="140" align="right">
                 <template #default="{ row }">
-                  <span class="amount income">{{ formatAmount(row.amount) }}</span>
+                  <span v-if="row.status === 'success'" class="amount-positive">
+                    {{ formatAmount(row.amount) }}
+                  </span>
+                  <span v-else class="amount-zero">-</span>
                 </template>
               </el-table-column>
-              <el-table-column label="状态" width="100" align="center">
+              <el-table-column label="状态" width="90" align="center">
                 <template #default="{ row }">
-                  <el-tag :type="row.status === 'success' ? 'success' : 'danger'" size="small">
+                  <el-tag :type="row.status === 'success' ? 'success' : 'danger'" size="small" class="status-tag">
                     {{ row.status === 'success' ? '成功' : '失败' }}
                   </el-tag>
                 </template>
               </el-table-column>
-              <el-table-column label="错误信息" min-width="280">
+              <el-table-column label="错误信息" min-width="260">
                 <template #default="{ row }">
                   <span v-if="row.error" class="error-text">{{ row.error }}</span>
-                  <span v-else class="muted-text">-</span>
+                  <span v-else class="ok-text">-</span>
                 </template>
               </el-table-column>
             </el-table>
+          </div>
+        </div>
 
-            <el-table
-              v-else
-              :data="filteredUpstreamItems"
-              class="finance-table"
-              empty-text="暂无消费明细"
-            >
-              <el-table-column label="名称" prop="name" min-width="180" />
-              <el-table-column label="类型" width="120" align="center">
+        <div class="section finance-panel">
+          <div class="section-header">
+            <span class="section-title">
+              <span class="title-dot green" />
+              <el-icon><Connection /></el-icon>
+              上游消费明细
+            </span>
+            <el-tag :type="allUpstreamsOk ? 'success' : 'danger'" size="small" class="section-status">
+              {{ successUpstreamCount }} / {{ summary.upstream_items.length }} 成功
+            </el-tag>
+          </div>
+          <div class="table-wrap">
+            <el-table :data="summary.upstream_items" class="detail-table">
+              <el-table-column label="上游名称" prop="name" min-width="180" />
+              <el-table-column label="类型" width="100" align="center">
                 <template #default="{ row }">
-                  <el-tag :type="upstreamTagType(row.upstream_type)" size="small">
-                    {{ upstreamTypeLabel(row.upstream_type) }}
+                  <el-tag
+                    :type="row.upstream_type === 'sub2api' ? 'primary' : row.upstream_type === 'new_api' ? 'warning' : 'info'"
+                    size="small"
+                    class="type-tag"
+                  >
+                    {{ row.upstream_type === 'sub2api' ? 'Sub2API' : row.upstream_type === 'new_api' ? 'New-API' : '未知' }}
                   </el-tag>
                 </template>
               </el-table-column>
               <el-table-column label="消费" min-width="140" align="right">
                 <template #default="{ row }">
-                  <span class="amount cost">{{ formatAmount(row.amount) }}</span>
+                  <span v-if="row.status === 'success'" class="amount-cost">
+                    {{ formatAmount(row.amount) }}
+                  </span>
+                  <span v-else class="amount-zero">-</span>
                 </template>
               </el-table-column>
-              <el-table-column label="状态" width="100" align="center">
+              <el-table-column label="状态" width="90" align="center">
                 <template #default="{ row }">
-                  <el-tag :type="row.status === 'success' ? 'success' : 'danger'" size="small">
+                  <el-tag :type="row.status === 'success' ? 'success' : 'danger'" size="small" class="status-tag">
                     {{ row.status === 'success' ? '成功' : '失败' }}
                   </el-tag>
                 </template>
               </el-table-column>
-              <el-table-column label="错误信息" min-width="280">
+              <el-table-column label="错误信息" min-width="260">
                 <template #default="{ row }">
                   <span v-if="row.error" class="error-text">{{ row.error }}</span>
-                  <span v-else class="muted-text">-</span>
+                  <span v-else class="ok-text">-</span>
                 </template>
               </el-table-column>
             </el-table>
           </div>
-        </section>
+        </div>
       </template>
-
-      <el-empty v-else-if="!loading && !fetchError" description="暂无财务汇总数据" class="empty-state">
-        <el-button type="primary" @click="loadData">加载数据</el-button>
-      </el-empty>
     </div>
 
     <el-dialog
@@ -249,33 +202,61 @@
           :closable="false"
           class="compare-alert"
         />
-
         <div class="compare-grid">
-          <div class="compare-card">
-            <h3>已存快照</h3>
-            <div v-if="compareResult.stored" class="compare-stat">
-              <span>收入 <strong>{{ formatAmount(compareResult.stored.total_revenue) }}</strong></span>
-              <span>消费 <strong>{{ formatAmount(compareResult.stored.total_cost) }}</strong></span>
-              <span>净收入 <strong>{{ formatAmount(compareResult.stored.net_income) }}</strong></span>
-              <span>失败项 <strong>{{ compareResult.stored.failed_count }}</strong></span>
+          <div class="compare-col">
+            <h4 class="compare-col-title"><span class="title-dot amber" />已存快照</h4>
+            <div class="compare-stat" v-if="compareResult.stored">
+              <div class="compare-row">
+                <span class="compare-label">收入</span>
+                <span class="compare-value">{{ formatAmount(compareResult.stored.total_revenue) }}</span>
+              </div>
+              <div class="compare-row">
+                <span class="compare-label">消费</span>
+                <span class="compare-value">{{ formatAmount(compareResult.stored.total_cost) }}</span>
+              </div>
+              <div class="compare-row">
+                <span class="compare-label">净收入</span>
+                <span class="compare-value" :class="compareResult.stored.net_income >= 0 ? 'positive' : 'negative'">
+                  {{ formatAmount(compareResult.stored.net_income) }}
+                </span>
+              </div>
+              <div class="compare-row">
+                <span class="compare-label">失败项</span>
+                <span class="compare-value">{{ compareResult.stored.failed_count }}</span>
+              </div>
             </div>
             <div v-else class="compare-empty">无快照</div>
           </div>
-          <div class="compare-card">
-            <h3>实时统计</h3>
+          <div class="compare-col">
+            <h4 class="compare-col-title"><span class="title-dot green" />实时统计</h4>
             <div class="compare-stat">
-              <span>收入 <strong>{{ formatAmount(compareResult.current.total_revenue) }}</strong></span>
-              <span>消费 <strong>{{ formatAmount(compareResult.current.total_cost) }}</strong></span>
-              <span>净收入 <strong>{{ formatAmount(compareResult.current.net_income) }}</strong></span>
-              <span>失败项 <strong>{{ compareResult.current.failed_count }}</strong></span>
+              <div class="compare-row">
+                <span class="compare-label">收入</span>
+                <span class="compare-value">{{ formatAmount(compareResult.current.total_revenue) }}</span>
+              </div>
+              <div class="compare-row">
+                <span class="compare-label">消费</span>
+                <span class="compare-value">{{ formatAmount(compareResult.current.total_cost) }}</span>
+              </div>
+              <div class="compare-row">
+                <span class="compare-label">净收入</span>
+                <span class="compare-value" :class="compareResult.current.net_income >= 0 ? 'positive' : 'negative'">
+                  {{ formatAmount(compareResult.current.net_income) }}
+                </span>
+              </div>
+              <div class="compare-row">
+                <span class="compare-label">失败项</span>
+                <span class="compare-value">{{ compareResult.current.failed_count }}</span>
+              </div>
             </div>
           </div>
         </div>
 
-        <div v-if="compareResult.diff_items.length > 0" class="diff-section">
-          <h3>变动明细（{{ compareResult.diff_items.length }} 项）</h3>
+        <!-- Changed items table -->
+        <div v-if="compareResult.diff_items && compareResult.diff_items.length > 0" class="diff-section">
+          <h4 class="diff-title">变动明细（{{ compareResult.diff_items.length }} 项）</h4>
           <div class="table-wrap">
-            <el-table :data="compareResult.diff_items" class="finance-table" size="small">
+            <el-table :data="compareResult.diff_items" class="detail-table" size="small">
               <el-table-column label="名称" prop="name" min-width="120" />
               <el-table-column label="类型" width="80" align="center">
                 <template #default="{ row }">
@@ -287,14 +268,14 @@
                   {{ diffFieldLabel(row) }}
                 </template>
               </el-table-column>
-              <el-table-column label="旧值" min-width="120" align="right">
+              <el-table-column label="旧值" min-width="100" align="right">
                 <template #default="{ row }">
-                  <span class="diff-old">{{ formatDiffValue(row, 'old') }}</span>
+                  <span :class="diffValueClass(row, 'old')">{{ formatDiffValue(row, 'old') }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="新值" min-width="120" align="right">
+              <el-table-column label="新值" min-width="100" align="right">
                 <template #default="{ row }">
-                  <span class="diff-new">{{ formatDiffValue(row, 'new') }}</span>
+                  <span :class="diffValueClass(row, 'new')">{{ formatDiffValue(row, 'new') }}</span>
                 </template>
               </el-table-column>
             </el-table>
@@ -317,32 +298,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { ElMessage } from 'element-plus'
-import { api } from '@/api'
-import {
-  BadgeAlert,
-  DatabaseZap,
-  Download,
-  ReceiptText,
-  RefreshCw,
-  Search,
-  TrendingUp,
-  WalletCards,
-} from 'lucide-vue-next'
-import * as echarts from 'echarts/core'
-import { LineChart, PieChart } from 'echarts/charts'
-import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
-import { CanvasRenderer } from 'echarts/renderers'
-
-echarts.use([LineChart, PieChart, GridComponent, LegendComponent, TooltipComponent, CanvasRenderer])
-
-type Period = 'day' | 'week' | 'month'
-type DiffField = 'amount' | 'status' | 'error'
-type DiffSide = 'old' | 'new'
+import { TrendCharts, Refresh, OfficeBuilding, Connection, DataAnalysis } from '@element-plus/icons-vue'
+import { useAuthStore } from '@/stores/auth'
 
 interface FinanceItem {
-  id: number | string
+  id: number
   name: string
   upstream_type: string
   amount: number
@@ -350,17 +312,8 @@ interface FinanceItem {
   error: string | null
 }
 
-interface FinanceChart {
-  labels: string[]
-  revenue: number[]
-  cost: number[]
-}
-
-interface FinanceSummary {
-  period: Period
+interface DailySummary {
   date: string
-  start_date: string
-  end_date: string
   total_revenue: number
   total_cost: number
   net_income: number
@@ -369,10 +322,6 @@ interface FinanceSummary {
   upstream_items: FinanceItem[]
   failed_count: number
   success: boolean
-  chart: FinanceChart
-  missing_dates: string[]
-  included_days: number
-  partial: boolean
   computed_at?: string
   from_snapshot?: boolean
 }
@@ -390,311 +339,46 @@ interface DiffItem {
   new_error: string | null
 }
 
+type DiffField = 'amount' | 'status' | 'error'
+type DiffSide = 'old' | 'new'
+
 interface CompareResponse {
-  stored: FinanceSummary | null
-  current: FinanceSummary
+  stored: DailySummary | null
+  current: DailySummary
   has_difference: boolean
   diff_items: DiffItem[]
 }
 
-const periodOptions: Array<{ value: Period; label: string }> = [
-  { value: 'day', label: '日' },
-  { value: 'week', label: '周' },
-  { value: 'month', label: '月' },
-]
-
-const period = ref<Period>('day')
-const selectedDate = ref<string | null>(null)
-const keyword = ref('')
+const auth = useAuthStore()
 const loading = ref(false)
 const comparing = ref(false)
 const overwriting = ref(false)
 const fetchError = ref<string | null>(null)
-const summary = ref<FinanceSummary | null>(null)
-const activeTable = ref<'websites' | 'upstreams'>('websites')
+const summary = ref<DailySummary | null>(null)
+const selectedDate = ref<string | null>(null)
+
 const compareDialogVisible = ref(false)
 const compareResult = ref<CompareResponse | null>(null)
 
-const trendChartRef = ref<HTMLElement | null>(null)
-const shareChartRef = ref<HTMLElement | null>(null)
-let trendChart: echarts.ECharts | null = null
-let shareChart: echarts.ECharts | null = null
-
-const dateRangeLabel = computed(() => {
-  if (!summary.value) return ''
-  if (summary.value.start_date === summary.value.end_date) return summary.value.start_date
-  return `${summary.value.start_date} 至 ${summary.value.end_date}`
-})
-
-const trendCaption = computed(() => {
-  if (!summary.value) return ''
-  if (period.value === 'day') return '近 7 天已入库日快照'
-  return `${dateRangeLabel.value} 已入库快照`
-})
-
-const partialTitle = computed(() => {
-  if (!summary.value?.partial) return ''
-  const dates = summary.value.missing_dates.slice(0, 5).join('、')
-  const more = summary.value.missing_dates.length > 5 ? ' 等' : ''
-  return `部分汇总：缺失 ${summary.value.missing_dates.length} 天快照（${dates}${more}）`
-})
-
-const failureText = computed(() => {
-  if (!summary.value) return ''
-  return summary.value.failed_count > 0 ? '数据不完整，净收入仅供参考' : '全部统计成功'
-})
-
-const normalizedKeyword = computed(() => keyword.value.trim().toLowerCase())
-
-const filteredWebsiteItems = computed(() => filterItems(summary.value?.website_items ?? []))
-const filteredUpstreamItems = computed(() => filterItems(summary.value?.upstream_items ?? []))
-
-function setPeriod(nextPeriod: Period) {
-  if (period.value === nextPeriod) return
-  period.value = nextPeriod
-  compareDialogVisible.value = false
-  void loadData()
-}
+const allWebsitesOk = computed(() => summary.value?.website_items.every(i => i.status === 'success') ?? false)
+const allUpstreamsOk = computed(() => summary.value?.upstream_items.every(i => i.status === 'success') ?? false)
+const successWebsiteCount = computed(() => summary.value?.website_items.filter(i => i.status === 'success').length ?? 0)
+const successUpstreamCount = computed(() => summary.value?.upstream_items.filter(i => i.status === 'success').length ?? 0)
+const upstreamItemCount = computed(() => summary.value?.upstream_items.length ?? 0)
 
 function disabledDate(d: Date) {
-  const today = new Date()
-  today.setHours(23, 59, 59, 999)
-  return d > today
-}
-
-function filterItems(items: FinanceItem[]) {
-  const q = normalizedKeyword.value
-  if (!q) return items
-  return items.filter(item => {
-    return [
-      item.name,
-      item.upstream_type,
-      upstreamTypeLabel(item.upstream_type),
-      item.status === 'success' ? '成功' : '失败',
-      item.error ?? '',
-    ].some(value => value.toLowerCase().includes(q))
-  })
+  return d > new Date()
 }
 
 function formatAmount(val: number): string {
-  return '$' + Number(val || 0).toFixed(6)
+  if (val === 0) return '$0.000000'
+  return '$' + val.toFixed(6)
 }
 
-function formatPercent(val: number): string {
-  return `${Number(val || 0).toFixed(2)}%`
-}
-
-function upstreamTypeLabel(type: string): string {
-  if (type === 'sub2api') return 'Sub2API'
-  if (type === 'new_api') return 'New-API'
-  return '未知'
-}
-
-function upstreamTagType(type: string): 'primary' | 'warning' | 'info' {
-  if (type === 'sub2api') return 'primary'
-  if (type === 'new_api') return 'warning'
-  return 'info'
-}
-
-function buildParams(extra?: Record<string, string>) {
-  const params = new URLSearchParams({ period: period.value, ...(extra ?? {}) })
-  if (selectedDate.value) params.set('date', selectedDate.value)
-  return params
-}
-
-async function loadData() {
-  loading.value = true
-  fetchError.value = null
-  try {
-    const { data } = await api.get<FinanceSummary>('/api/finance/summary', {
-      params: Object.fromEntries(buildParams()),
-    })
-    summary.value = data
-    await nextTick()
-    renderCharts()
-    if (data.partial) {
-      ElMessage.warning(`当前周期缺失 ${data.missing_dates.length} 天快照，已按入库数据部分汇总`)
-    } else if (data.failed_count > 0) {
-      ElMessage.warning(`${data.failed_count} 个数据源统计失败，净收入仅供参考`)
-    }
-  } catch (e: any) {
-    fetchError.value = e.response?.data?.detail || e.message || '请求失败'
-    ElMessage.error(fetchError.value ?? '请求失败')
-  } finally {
-    loading.value = false
-  }
-}
-
-async function handleCompare() {
-  if (period.value !== 'day') return
-  comparing.value = true
-  try {
-    const params = new URLSearchParams()
-    if (selectedDate.value) params.set('date', selectedDate.value)
-    const { data } = await api.post<CompareResponse>('/api/finance/daily-summary/compare', null, {
-      params: Object.fromEntries(params),
-    })
-    compareResult.value = data
-    compareDialogVisible.value = true
-    if (!data.has_difference) ElMessage.info('比对结果一致，无差异')
-  } catch (e: any) {
-    ElMessage.error('比对失败: ' + (e.response?.data?.detail || e.message || '请求失败'))
-  } finally {
-    comparing.value = false
-  }
-}
-
-async function handleOverwrite() {
-  overwriting.value = true
-  try {
-    const params = new URLSearchParams()
-    if (selectedDate.value) params.set('date', selectedDate.value)
-    await api.post('/api/finance/daily-summary/overwrite', null, {
-      params: Object.fromEntries(params),
-    })
-    compareDialogVisible.value = false
-    ElMessage.success('快照已覆盖更新')
-    await loadData()
-  } catch (e: any) {
-    ElMessage.error('覆盖失败: ' + (e.response?.data?.detail || e.message || '请求失败'))
-  } finally {
-    overwriting.value = false
-  }
-}
-
-function renderCharts() {
-  renderTrendChart()
-  renderShareChart()
-}
-
-function renderTrendChart() {
-  if (!trendChartRef.value || !summary.value) return
-  trendChart ??= echarts.init(trendChartRef.value)
-  const labels = summary.value.chart.labels.map(label => label.slice(5))
-  trendChart.setOption({
-    color: ['#1f9d7a', '#d97706'],
-    grid: { left: 12, right: 18, top: 24, bottom: 12, containLabel: true },
-    tooltip: {
-      trigger: 'axis',
-      valueFormatter: (value: number) => formatAmount(value),
-    },
-    legend: {
-      top: 0,
-      right: 0,
-      icon: 'circle',
-      textStyle: { color: '#64748b', fontSize: 12 },
-      data: ['收入', '消费'],
-    },
-    xAxis: {
-      type: 'category',
-      boundaryGap: false,
-      data: labels,
-      axisLine: { lineStyle: { color: '#e2e8f0' } },
-      axisTick: { show: false },
-      axisLabel: { color: '#64748b' },
-    },
-    yAxis: {
-      type: 'value',
-      axisLabel: { color: '#64748b', formatter: (value: number) => `$${value}` },
-      splitLine: { lineStyle: { color: '#eef2f7' } },
-    },
-    series: [
-      {
-        name: '收入',
-        type: 'line',
-        smooth: true,
-        symbolSize: 7,
-        data: summary.value.chart.revenue,
-        areaStyle: { color: 'rgba(31, 157, 122, 0.12)' },
-        lineStyle: { width: 3 },
-      },
-      {
-        name: '消费',
-        type: 'line',
-        smooth: true,
-        symbolSize: 7,
-        data: summary.value.chart.cost,
-        areaStyle: { color: 'rgba(217, 119, 6, 0.12)' },
-        lineStyle: { width: 3 },
-      },
-    ],
-  })
-}
-
-function renderShareChart() {
-  if (!shareChartRef.value || !summary.value) return
-  shareChart ??= echarts.init(shareChartRef.value)
-  const data = summary.value.upstream_items
-    .filter(item => item.amount > 0)
-    .map(item => ({ name: item.name, value: Number(item.amount.toFixed(6)) }))
-  shareChart.setOption({
-    color: ['#1f9d7a', '#2563eb', '#d97706', '#9333ea', '#dc2626', '#0891b2'],
-    tooltip: {
-      trigger: 'item',
-      formatter: (params: any) => `${params.name}<br/>${formatAmount(params.value)} (${params.percent}%)`,
-    },
-    legend: {
-      bottom: 0,
-      type: 'scroll',
-      icon: 'circle',
-      textStyle: { color: '#64748b', fontSize: 12 },
-    },
-    series: [
-      {
-        name: '上游消费',
-        type: 'pie',
-        radius: ['54%', '74%'],
-        center: ['50%', '43%'],
-        avoidLabelOverlap: true,
-        minAngle: 4,
-        label: {
-          color: '#334155',
-          formatter: '{b}\n{d}%',
-        },
-        itemStyle: {
-          borderColor: '#fff',
-          borderWidth: 3,
-        },
-        data: data.length ? data : [{ name: '暂无消费', value: 1, itemStyle: { color: '#e2e8f0' } }],
-      },
-    ],
-  })
-}
-
-function exportCsv() {
-  if (!summary.value) return
-  const rows: Array<Array<string | number>> = [
-    ['周期', periodLabel(period.value)],
-    ['日期范围', dateRangeLabel.value],
-    ['总收入', summary.value.total_revenue],
-    ['总消费', summary.value.total_cost],
-    ['净收入', summary.value.net_income],
-    ['毛利率', summary.value.margin_percent],
-    ['入库天数', summary.value.included_days],
-    ['缺失日期', summary.value.missing_dates.join(' ')],
-    [],
-    ['类型', '名称', '上游类型', '金额', '状态', '错误信息'],
-    ...filteredWebsiteItems.value.map(item => ['收入', item.name, item.upstream_type, item.amount, item.status, item.error ?? '']),
-    ...filteredUpstreamItems.value.map(item => ['消费', item.name, item.upstream_type, item.amount, item.status, item.error ?? '']),
-  ]
-  const csv = rows.map(row => row.map(csvCell).join(',')).join('\n')
-  const blob = new Blob(['\uFEFF' + csv], { type: 'text/csv;charset=utf-8;' })
-  const url = URL.createObjectURL(blob)
-  const link = document.createElement('a')
-  link.href = url
-  link.download = `finance-${period.value}-${summary.value.start_date}-${summary.value.end_date}.csv`
-  link.click()
-  URL.revokeObjectURL(url)
-}
-
-function csvCell(value: string | number): string {
-  const text = String(value ?? '')
-  return /[",\n]/.test(text) ? `"${text.replace(/"/g, '""')}"` : text
-}
-
-function periodLabel(value: Period): string {
-  const item = periodOptions.find(option => option.value === value)
-  return item?.label ?? value
+function formatTime(iso: string): string {
+  const d = new Date(iso)
+  const pad = (n: number) => n.toString().padStart(2, '0')
+  return `${pad(d.getHours())}:${pad(d.getMinutes())}`
 }
 
 function diffField(row: DiffItem): DiffField {
@@ -721,384 +405,559 @@ function diffRawValue(row: DiffItem, side: DiffSide): number | string | null {
 
 function formatDiffValue(row: DiffItem, side: DiffSide): string {
   const value = diffRawValue(row, side)
-  if (value === null || value === undefined || value === '') return '-'
+  if (value === null || value === undefined || value === '') return '—'
   if (diffField(row) === 'amount') return formatAmount(Number(value))
   return String(value)
 }
 
-function resizeCharts() {
-  trendChart?.resize()
-  shareChart?.resize()
+function diffValueClass(row: DiffItem, side: DiffSide): string {
+  const value = diffRawValue(row, side)
+  if (value === null || value === undefined || value === '') return 'absent-value'
+  const base = side === 'old' ? 'old-value' : 'new-value'
+  return diffField(row) === 'error' ? `${base} error-text` : base
 }
 
-watch(selectedDate, () => {
-  void loadData()
-})
+function dateParam(): string {
+  const params = new URLSearchParams()
+  if (selectedDate.value) params.set('date', selectedDate.value)
+  return params.toString()
+}
 
-watch([filteredWebsiteItems, filteredUpstreamItems], () => {
-  if (summary.value) renderShareChart()
-})
+async function apiFetch<T>(url: string, options?: RequestInit): Promise<T> {
+  const resp = await fetch(url, {
+    headers: { Authorization: `Bearer ${auth.token}`, 'Content-Type': 'application/json' },
+    ...options,
+  })
+  if (!resp.ok) {
+    const err = await resp.json().catch(() => ({}))
+    throw new Error(err.detail || `HTTP ${resp.status}`)
+  }
+  return resp.json()
+}
+
+async function loadData() {
+  loading.value = true
+  fetchError.value = null
+  try {
+    const data = await apiFetch<DailySummary>(`/api/finance/daily-summary?${dateParam()}`)
+    summary.value = data
+    if (data.failed_count > 0) {
+      ElMessage.warning(`${data.failed_count} 个数据源统计失败，净收入仅供参考`)
+    } else {
+      ElMessage.success('对账数据加载成功')
+    }
+  } catch (e: any) {
+    fetchError.value = e.message || '请求失败'
+    ElMessage.error(fetchError.value ?? '请求失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+async function handleCompare() {
+  comparing.value = true
+  try {
+    const result = await apiFetch<CompareResponse>(
+      `/api/finance/daily-summary/compare?${dateParam()}`,
+      { method: 'POST' },
+    )
+    compareResult.value = result
+    compareDialogVisible.value = true
+    if (!result.has_difference) {
+      ElMessage.info('比对结果一致，无差异')
+    }
+  } catch (e: any) {
+    ElMessage.error('比对失败: ' + (e.message || '请求失败'))
+  } finally {
+    comparing.value = false
+  }
+}
+
+async function handleOverwrite() {
+  overwriting.value = true
+  try {
+    const result = await apiFetch<DailySummary>(
+      `/api/finance/daily-summary/overwrite?${dateParam()}`,
+      { method: 'POST' },
+    )
+    summary.value = result
+    compareDialogVisible.value = false
+    ElMessage.success('快照已覆盖更新')
+  } catch (e: any) {
+    ElMessage.error('覆盖失败: ' + (e.message || '请求失败'))
+  } finally {
+    overwriting.value = false
+  }
+}
 
 onMounted(() => {
-  window.addEventListener('resize', resizeCharts)
-  void loadData()
-})
-
-onBeforeUnmount(() => {
-  window.removeEventListener('resize', resizeCharts)
-  trendChart?.dispose()
-  shareChart?.dispose()
+  loadData()
 })
 </script>
 
 <style scoped>
 .finance-page {
-  --finance-bg: #f4f7fb;
-  --finance-card: #ffffff;
-  --finance-border: #e2e8f0;
-  --finance-border-strong: #cbd5e1;
-  --finance-text: #0f172a;
-  --finance-muted: #64748b;
-  --finance-soft: #94a3b8;
-  --finance-green: #1f9d7a;
-  --finance-orange: #d97706;
-  --finance-blue: #2563eb;
-  --finance-red: #dc2626;
+  --finance-dark: #0c0a09;
+  --finance-panel: #181412;
+  --finance-panel-soft: rgba(42, 34, 30, 0.74);
+  --finance-border: #2a221e;
+  --finance-border-strong: rgba(217, 139, 66, 0.34);
+  --finance-text: #ede4de;
+  --finance-muted: #9e928a;
+  --finance-soft: #6f6259;
+  --finance-amber: #d97706;
+  --finance-amber-bright: #f59e0b;
+  --finance-green: #10b981;
+  --finance-green-soft: #416951;
+  --finance-red: #dd7e72;
+  --finance-blue: #38bdf8;
 
-  width: 100%;
   color: var(--finance-text);
-  font-family: Inter, "Noto Sans SC", system-ui, sans-serif;
+  width: 100%;
 }
 
 .finance-shell {
+  width: min(100%, 1600px);
+  margin: 0 auto;
   display: grid;
   gap: 18px;
-  max-width: 1600px;
-  margin: 0 auto;
-  padding: 18px;
-  border-radius: 18px;
-  background: var(--finance-bg);
+  font-family: 'Inter', 'Noto Sans SC', sans-serif;
 }
 
-.finance-topbar,
-.dashboard-panel,
-.metric-card,
-.loading-panel,
-.empty-state {
-  background: var(--finance-card);
+.finance-panel,
+.stat-card {
+  background: var(--finance-panel);
   border: 1px solid var(--finance-border);
-  border-radius: 8px;
-  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
+  border-radius: 12px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.34);
 }
 
-.finance-topbar {
+.page-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 14px;
-  padding: 14px;
+  flex-wrap: wrap;
+  gap: 16px;
+  padding: 18px 24px;
 }
 
-.period-tabs,
-.table-tabs {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px;
-  border-radius: 8px;
-  background: #eef2f7;
-  border: 1px solid var(--finance-border);
+.header-left {
+  min-width: 220px;
+  display: grid;
+  gap: 6px;
 }
 
-.period-tab,
-.table-tabs button {
-  min-width: 54px;
-  height: 32px;
-  padding: 0 14px;
-  border: 0;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--finance-muted);
+.page-kicker {
+  color: var(--finance-amber-bright);
+  font-size: 11px;
   font-weight: 700;
-  cursor: pointer;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
 }
 
-.period-tab.active,
-.table-tabs button.active {
+.page-title {
+  font-size: 24px;
+  font-weight: 700;
   color: var(--finance-text);
-  background: #fff;
-  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
-}
-
-.toolbar-actions {
+  margin: 0;
   display: flex;
   align-items: center;
-  justify-content: flex-end;
-  flex-wrap: wrap;
-  gap: 10px;
+  gap: 12px;
+  letter-spacing: 0;
+  line-height: 1.15;
 }
 
-.search-input {
-  width: 240px;
+.title-icon-box {
+  width: 38px;
+  height: 38px;
+  display: inline-grid;
+  place-items: center;
+  border-radius: 8px;
+  color: var(--finance-dark);
+  background: linear-gradient(135deg, var(--finance-amber) 0%, #78350f 100%);
+  box-shadow: 0 6px 18px rgba(217, 119, 6, 0.26);
+}
+
+.page-subtitle {
+  font-size: 13px;
+  color: var(--finance-muted);
+  margin: 0;
+}
+
+.header-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 12px;
+  align-items: center;
 }
 
 .date-picker {
-  width: 170px;
+  width: 190px;
 }
 
-.icon-button {
+.refresh-btn,
+.compare-btn {
+  min-width: 96px;
   border-radius: 8px;
-  font-weight: 700;
+  font-weight: 600;
 }
 
-.icon-button :deep(svg) {
-  margin-right: 6px;
+.compare-btn {
+  border-color: rgba(217, 119, 6, 0.32);
+  background: rgba(217, 119, 6, 0.1);
+  color: var(--finance-amber-bright);
 }
 
-.compare-button {
-  color: #fff;
-}
-
-.page-alert {
-  border-radius: 8px;
-}
-
-.metrics-grid {
+.summary-cards {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 14px;
 }
 
-.metric-card {
-  min-height: 136px;
-  padding: 18px;
+.stat-card {
+  min-height: 146px;
+  padding: 20px;
   display: grid;
   align-content: space-between;
-}
-
-.metric-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
   gap: 12px;
-  color: var(--finance-muted);
-  font-size: 13px;
-  font-weight: 700;
+  position: relative;
+  overflow: hidden;
 }
 
-.metric-icon {
-  width: 34px;
-  height: 34px;
-  display: inline-grid;
-  place-items: center;
-  border-radius: 8px;
+.stat-card::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 4px;
+  background: rgba(217, 119, 6, 0.68);
 }
 
-.metric-icon.income {
-  color: var(--finance-green);
-  background: rgba(31, 157, 122, 0.1);
+.stat-card.cost::before {
+  background: rgba(56, 189, 248, 0.58);
 }
 
-.metric-icon.cost {
-  color: var(--finance-orange);
-  background: rgba(217, 119, 6, 0.12);
+.stat-card.net::before {
+  background: rgba(16, 185, 129, 0.62);
 }
 
-.metric-icon.net {
-  color: var(--finance-blue);
-  background: rgba(37, 99, 235, 0.1);
+.stat-card.failed::before {
+  background: rgba(158, 146, 138, 0.5);
 }
 
-.metric-icon.risk {
-  color: var(--finance-red);
-  background: rgba(220, 38, 38, 0.1);
+.stat-card.failed.has-failures::before {
+  background: rgba(221, 126, 114, 0.78);
 }
 
-.metric-card strong {
-  color: var(--finance-text);
-  font-family: "JetBrains Mono", Consolas, monospace;
-  font-size: clamp(22px, 2vw, 32px);
-  font-weight: 800;
-  line-height: 1.12;
-  word-break: break-word;
-  font-variant-numeric: tabular-nums;
-}
-
-.metric-card small {
-  color: var(--finance-muted);
-  font-size: 12px;
-}
-
-.positive {
-  color: var(--finance-green) !important;
-}
-
-.negative {
-  color: var(--finance-red) !important;
-}
-
-.chart-grid {
-  display: grid;
-  grid-template-columns: minmax(0, 1.7fr) minmax(320px, 0.8fr);
-  gap: 14px;
-}
-
-.dashboard-panel {
-  padding: 18px;
-  min-width: 0;
-}
-
-.panel-header {
+.stat-topline {
   display: flex;
-  align-items: flex-start;
   justify-content: space-between;
-  gap: 14px;
-  margin-bottom: 12px;
-}
-
-.panel-header h2 {
-  margin: 0;
-  color: var(--finance-text);
-  font-size: 17px;
-  line-height: 1.2;
-}
-
-.panel-header p {
-  margin: 5px 0 0;
-  color: var(--finance-muted);
-  font-size: 12px;
-}
-
-.panel-chip {
-  flex: 0 0 auto;
-  padding: 5px 9px;
-  border-radius: 999px;
-  background: #eef2f7;
-  color: var(--finance-muted);
-  font-size: 12px;
-  font-weight: 700;
-}
-
-.chart {
-  width: 100%;
-}
-
-.trend-chart {
-  height: 326px;
-}
-
-.share-chart {
-  height: 326px;
-}
-
-.detail-header {
   align-items: center;
+  gap: 12px;
+}
+
+.stat-label {
+  font-size: 12px;
+  color: var(--finance-muted);
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.metric-dot,
+.title-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex: 0 0 auto;
+}
+
+.metric-dot.amber,
+.title-dot.amber {
+  background: var(--finance-amber);
+  box-shadow: 0 0 18px rgba(217, 119, 6, 0.52);
+}
+
+.metric-dot.blue {
+  background: var(--finance-blue);
+  box-shadow: 0 0 18px rgba(56, 189, 248, 0.36);
+}
+
+.metric-dot.green,
+.title-dot.green {
+  background: var(--finance-green);
+  box-shadow: 0 0 18px rgba(16, 185, 129, 0.4);
+}
+
+.metric-dot.red {
+  background: var(--finance-red);
+  box-shadow: 0 0 18px rgba(221, 126, 114, 0.4);
+}
+
+.stat-value {
+  min-width: 0;
+  font-family: 'JetBrains Mono', 'Consolas', monospace;
+  font-size: clamp(22px, 1.6vw, 30px);
+  font-weight: 700;
+  color: var(--finance-text);
+  font-variant-numeric: tabular-nums;
+  line-height: 1.15;
+  word-break: break-word;
+}
+
+.stat-sub {
+  font-size: 12px;
+  color: var(--finance-muted);
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.snapshot-badge {
+  display: inline-flex;
+  align-items: center;
+  min-height: 22px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  border: 1px solid rgba(217, 119, 6, 0.18);
+  background: rgba(217, 119, 6, 0.08);
+  color: var(--finance-amber-bright);
+  font-weight: 600;
+}
+
+.stat-card.revenue .stat-value {
+  color: var(--finance-amber-bright);
+}
+
+.stat-card.cost .stat-value {
+  color: #fbbf24;
+}
+
+.stat-card.net.positive .stat-value {
+  color: var(--finance-green);
+}
+
+.stat-card.net.negative .stat-value {
+  color: var(--finance-red);
+}
+
+.stat-card.failed.has-failures {
+  border-color: rgba(221, 126, 114, 0.34);
+  background: linear-gradient(180deg, rgba(138, 58, 58, 0.24), rgba(24, 20, 18, 0.98));
+}
+
+.stat-card.failed.has-failures .stat-value {
+  color: var(--finance-red);
+}
+
+.section {
+  padding: 22px 24px 24px;
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 18px;
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--finance-text);
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
 
 .table-wrap {
   width: 100%;
   overflow-x: auto;
-  border: 1px solid var(--finance-border);
   border-radius: 8px;
+  border: 1px solid rgba(42, 34, 30, 0.72);
 }
 
-.finance-table {
-  min-width: 760px;
+.detail-table {
+  min-width: 680px;
+  font-family: 'Inter', 'Noto Sans SC', sans-serif;
 }
 
-.amount,
-.diff-old,
-.diff-new,
-.compare-stat strong {
-  font-family: "JetBrains Mono", Consolas, monospace;
+.amount-positive,
+.amount-cost,
+.compare-value,
+.old-value,
+.new-value {
+  font-family: 'JetBrains Mono', 'Consolas', monospace;
   font-variant-numeric: tabular-nums;
 }
 
-.amount.income,
-.diff-new {
+.amount-positive {
   color: var(--finance-green);
-  font-weight: 800;
+  font-weight: 700;
 }
 
-.amount.cost {
-  color: var(--finance-orange);
-  font-weight: 800;
+.amount-cost {
+  color: #fbbf24;
+  font-weight: 700;
 }
 
-.diff-old {
-  color: var(--finance-red);
+.amount-zero {
+  color: var(--finance-soft);
 }
 
 .error-text {
   color: var(--finance-red);
   font-size: 12px;
-  word-break: break-word;
+  word-break: break-all;
 }
 
-.muted-text {
+.ok-text {
   color: var(--finance-soft);
 }
 
-.empty-state,
-.loading-panel {
-  padding: 44px 18px;
+.error-alert {
+  border-radius: 8px;
+}
+
+.skeleton {
+  padding: 16px;
+  border-radius: 12px;
+  background: var(--finance-panel);
+}
+
+.empty-state {
+  padding: 56px 20px;
+  border: 1px solid var(--finance-border);
+  border-radius: 12px;
+  background: var(--finance-panel);
 }
 
 .compare-alert {
-  margin-bottom: 16px;
+  margin-bottom: 18px;
+  border-radius: 8px;
 }
 
 .compare-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 14px;
+  gap: 16px;
 }
 
-.compare-card {
-  padding: 14px;
-  border: 1px solid var(--finance-border);
-  border-radius: 8px;
-  background: #fff;
+.compare-col {
+  border: 1px solid rgba(42, 34, 30, 0.72);
+  border-radius: 10px;
+  background: rgba(12, 10, 9, 0.56);
+  padding: 16px;
 }
 
-.compare-card h3,
-.diff-section h3 {
-  margin: 0 0 12px;
+.compare-col-title {
+  font-size: 14px;
+  font-weight: 700;
   color: var(--finance-text);
-  font-size: 15px;
-}
-
-.compare-stat {
-  display: grid;
+  margin: 0 0 14px;
+  display: flex;
+  align-items: center;
   gap: 8px;
 }
 
-.compare-stat span {
+.compare-stat {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.compare-row {
   display: flex;
-  align-items: center;
   justify-content: space-between;
-  gap: 12px;
+  align-items: center;
+  gap: 14px;
+  padding: 8px 0;
+  border-bottom: 1px solid rgba(42, 34, 30, 0.54);
+}
+
+.compare-row:last-child {
+  border-bottom: 0;
+}
+
+.compare-label {
+  font-size: 13px;
   color: var(--finance-muted);
 }
 
-.compare-stat strong {
+.compare-value {
+  font-size: 14px;
+  font-weight: 700;
   color: var(--finance-text);
+  text-align: right;
+  word-break: break-word;
+}
+
+.compare-value.positive {
+  color: var(--finance-green);
+}
+
+.compare-value.negative {
+  color: var(--finance-red);
 }
 
 .compare-empty {
-  padding: 26px 0;
   color: var(--finance-soft);
+  font-size: 13px;
   text-align: center;
+  padding: 28px 0;
 }
 
 .diff-section {
-  margin-top: 18px;
+  margin-top: 20px;
+}
+
+.diff-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--finance-text);
+  margin: 0 0 12px;
+}
+
+.old-value {
+  color: var(--finance-red);
+}
+
+.new-value {
+  color: var(--finance-green);
+  font-weight: 700;
+}
+
+.absent-value {
+  color: var(--finance-soft);
+}
+
+.finance-page :deep(.el-button--primary) {
+  --el-button-bg-color: var(--finance-amber);
+  --el-button-border-color: var(--finance-amber);
+  --el-button-hover-bg-color: var(--finance-amber-bright);
+  --el-button-hover-border-color: var(--finance-amber-bright);
+  --el-button-active-bg-color: #b45309;
+  --el-button-active-border-color: #b45309;
+  color: #160f0a;
+}
+
+.finance-page :deep(.el-button:not(.el-button--primary)) {
+  --el-button-bg-color: transparent;
+  --el-button-border-color: rgba(42, 34, 30, 0.9);
+  --el-button-text-color: var(--finance-muted);
+  --el-button-hover-bg-color: rgba(217, 119, 6, 0.1);
+  --el-button-hover-border-color: rgba(217, 119, 6, 0.45);
+  --el-button-hover-text-color: var(--finance-text);
+  --el-button-active-bg-color: rgba(217, 119, 6, 0.16);
+  --el-button-active-border-color: rgba(217, 119, 6, 0.58);
 }
 
 .finance-page :deep(.el-input__wrapper) {
   min-height: 34px;
   border-radius: 8px;
-  background: #fff;
+  background: var(--finance-dark);
   box-shadow: 0 0 0 1px var(--finance-border) inset;
 }
 
@@ -1111,134 +970,261 @@ onBeforeUnmount(() => {
   color: var(--finance-text);
 }
 
-.finance-page :deep(.el-input__inner::placeholder),
-.finance-page :deep(.el-input__prefix) {
-  color: var(--finance-soft);
+.finance-page :deep(.el-input__inner::placeholder) {
+  color: rgba(158, 146, 138, 0.66);
 }
 
-.finance-page :deep(.el-button--primary) {
-  --el-button-bg-color: #0f172a;
-  --el-button-border-color: #0f172a;
-  --el-button-hover-bg-color: #263449;
-  --el-button-hover-border-color: #263449;
-}
-
-.finance-page :deep(.el-button:not(.el-button--primary)) {
-  --el-button-bg-color: #fff;
-  --el-button-border-color: var(--finance-border);
-  --el-button-text-color: var(--finance-text);
-  --el-button-hover-bg-color: #f8fafc;
-  --el-button-hover-border-color: var(--finance-border-strong);
-  --el-button-hover-text-color: var(--finance-text);
+.finance-page :deep(.el-input__prefix),
+.finance-page :deep(.el-input__suffix) {
+  color: var(--finance-muted);
 }
 
 .finance-page :deep(.el-table) {
-  --el-table-bg-color: #fff;
-  --el-table-tr-bg-color: #fff;
-  --el-table-header-bg-color: #f8fafc;
-  --el-table-header-text-color: #475569;
+  --el-table-bg-color: transparent;
+  --el-table-tr-bg-color: transparent;
+  --el-table-header-bg-color: rgba(255, 244, 232, 0.02);
+  --el-table-header-text-color: var(--finance-muted);
   --el-table-text-color: var(--finance-text);
-  --el-table-row-hover-bg-color: #f8fafc;
-  --el-table-border-color: var(--finance-border);
+  --el-table-row-hover-bg-color: rgba(42, 34, 30, 0.34);
+  --el-table-border-color: rgba(42, 34, 30, 0.72);
+  background: transparent;
+  color: var(--finance-text);
 }
 
 .finance-page :deep(.el-table th.el-table__cell) {
-  background: #f8fafc;
-  color: #475569;
+  background: rgba(255, 244, 232, 0.02);
+  color: var(--finance-muted);
   font-size: 12px;
-  font-weight: 800;
+  font-weight: 700;
+  letter-spacing: 0.04em;
 }
 
 .finance-page :deep(.el-table td.el-table__cell) {
-  border-bottom-color: #eef2f7;
+  border-bottom-color: rgba(42, 34, 30, 0.42);
 }
 
 .finance-page :deep(.el-table__inner-wrapper::before),
 .finance-page :deep(.el-table__border-left-patch) {
-  background: var(--finance-border);
+  background: rgba(42, 34, 30, 0.72);
+}
+
+.finance-page :deep(.el-table__empty-block) {
+  background: transparent;
+}
+
+.finance-page :deep(.el-table__empty-text) {
+  color: var(--finance-muted);
 }
 
 .finance-page :deep(.el-tag) {
   border-radius: 4px;
-  font-weight: 800;
+  font-weight: 700;
+}
+
+.finance-page :deep(.el-tag--success) {
+  --el-tag-bg-color: rgba(16, 185, 129, 0.12);
+  --el-tag-border-color: rgba(16, 185, 129, 0.24);
+  --el-tag-text-color: #86efac;
+}
+
+.finance-page :deep(.el-tag--danger) {
+  --el-tag-bg-color: rgba(138, 58, 58, 0.24);
+  --el-tag-border-color: rgba(221, 126, 114, 0.34);
+  --el-tag-text-color: #fca5a5;
+}
+
+.finance-page :deep(.el-tag--primary) {
+  --el-tag-bg-color: rgba(14, 165, 233, 0.1);
+  --el-tag-border-color: rgba(14, 165, 233, 0.22);
+  --el-tag-text-color: #7dd3fc;
+}
+
+.finance-page :deep(.el-tag--warning) {
+  --el-tag-bg-color: rgba(217, 119, 6, 0.12);
+  --el-tag-border-color: rgba(217, 119, 6, 0.28);
+  --el-tag-text-color: #fbbf24;
+}
+
+.finance-page :deep(.el-tag--info) {
+  --el-tag-bg-color: rgba(158, 146, 138, 0.1);
+  --el-tag-border-color: rgba(158, 146, 138, 0.22);
+  --el-tag-text-color: var(--finance-muted);
+}
+
+.finance-page :deep(.el-alert) {
+  border: 1px solid rgba(42, 34, 30, 0.72);
+  background: var(--finance-panel);
+}
+
+.finance-page :deep(.el-alert--error) {
+  --el-alert-title-color: #fca5a5;
+  background: rgba(138, 58, 58, 0.18);
+  border-color: rgba(221, 126, 114, 0.28);
+}
+
+.finance-page :deep(.el-skeleton__item) {
+  background: linear-gradient(90deg, rgba(255, 244, 232, 0.05) 25%, rgba(255, 244, 232, 0.1) 37%, rgba(255, 244, 232, 0.05) 63%);
+}
+
+.finance-page :deep(.el-empty__description p) {
+  color: var(--finance-muted);
 }
 
 :global(.finance-compare-dialog) {
-  --el-dialog-bg-color: #fff;
-  --el-text-color-primary: #0f172a;
-  --el-text-color-regular: #0f172a;
-  border-radius: 8px;
+  --finance-dark: #0c0a09;
+  --finance-panel: #181412;
+  --finance-border: #2a221e;
+  --finance-text: #ede4de;
+  --finance-muted: #9e928a;
+  --finance-soft: #6f6259;
+  --finance-amber: #d97706;
+  --finance-amber-bright: #f59e0b;
+  --finance-green: #10b981;
+  --finance-red: #dd7e72;
+  --el-dialog-bg-color: var(--finance-panel);
+  --el-dialog-title-font-size: 16px;
+  --el-text-color-primary: var(--finance-text);
+  --el-text-color-regular: var(--finance-text);
+  border: 1px solid var(--finance-border);
+  border-radius: 12px;
+  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.52);
+}
+
+:global(.finance-compare-dialog .el-dialog__header) {
+  padding: 18px 22px 12px;
+  margin-right: 0;
+}
+
+:global(.finance-compare-dialog .el-dialog__title) {
+  color: var(--finance-text);
+  font-weight: 700;
 }
 
 :global(.finance-compare-dialog .el-dialog__body) {
-  color: #0f172a;
+  padding: 8px 22px 18px;
+  color: var(--finance-text);
+}
+
+:global(.finance-compare-dialog .el-dialog__footer) {
+  padding: 0 22px 20px;
+}
+
+:global(.finance-compare-dialog .el-dialog__headerbtn .el-dialog__close) {
+  color: var(--finance-muted);
+}
+
+:global(.finance-compare-dialog .el-button--primary) {
+  --el-button-bg-color: var(--finance-amber);
+  --el-button-border-color: var(--finance-amber);
+  --el-button-hover-bg-color: var(--finance-amber-bright);
+  --el-button-hover-border-color: var(--finance-amber-bright);
+  color: #160f0a;
+}
+
+:global(.finance-compare-dialog .el-button:not(.el-button--primary)) {
+  --el-button-bg-color: transparent;
+  --el-button-border-color: rgba(42, 34, 30, 0.9);
+  --el-button-text-color: var(--finance-muted);
+  --el-button-hover-bg-color: rgba(217, 119, 6, 0.1);
+  --el-button-hover-border-color: rgba(217, 119, 6, 0.45);
+  --el-button-hover-text-color: var(--finance-text);
+}
+
+:global(.finance-compare-dialog .el-alert) {
+  border-radius: 8px;
+  border: 1px solid rgba(42, 34, 30, 0.72);
+}
+
+:global(.finance-compare-dialog .el-alert--success) {
+  --el-alert-bg-color: rgba(16, 185, 129, 0.12);
+  --el-alert-title-color: #86efac;
+  border-color: rgba(16, 185, 129, 0.24);
+}
+
+:global(.finance-compare-dialog .el-alert--warning) {
+  --el-alert-bg-color: rgba(217, 119, 6, 0.12);
+  --el-alert-title-color: #fbbf24;
+  border-color: rgba(217, 119, 6, 0.28);
 }
 
 :global(.finance-compare-dialog .el-table) {
-  --el-table-bg-color: #fff;
-  --el-table-tr-bg-color: #fff;
-  --el-table-header-bg-color: #f8fafc;
-  --el-table-text-color: #0f172a;
-  --el-table-border-color: #e2e8f0;
+  --el-table-bg-color: transparent;
+  --el-table-tr-bg-color: transparent;
+  --el-table-header-bg-color: rgba(255, 244, 232, 0.02);
+  --el-table-header-text-color: var(--finance-muted);
+  --el-table-text-color: var(--finance-text);
+  --el-table-row-hover-bg-color: rgba(42, 34, 30, 0.34);
+  --el-table-border-color: rgba(42, 34, 30, 0.72);
+  background: transparent;
+  color: var(--finance-text);
+}
+
+:global(.finance-compare-dialog .el-table th.el-table__cell) {
+  background: rgba(255, 244, 232, 0.02);
+  color: var(--finance-muted);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+:global(.finance-compare-dialog .el-table td.el-table__cell) {
+  border-bottom-color: rgba(42, 34, 30, 0.42);
+}
+
+:global(.finance-compare-dialog .el-table__inner-wrapper::before),
+:global(.finance-compare-dialog .el-table__border-left-patch) {
+  background: rgba(42, 34, 30, 0.72);
 }
 
 @media (max-width: 1180px) {
-  .metrics-grid {
+  .summary-cards {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
-
-  .chart-grid {
-    grid-template-columns: 1fr;
-  }
 }
 
-@media (max-width: 760px) {
+@media (max-width: 720px) {
   .finance-shell {
-    padding: 12px;
-    gap: 12px;
+    gap: 14px;
   }
 
-  .finance-topbar {
-    align-items: stretch;
+  .page-header,
+  .section {
+    padding: 16px;
+  }
+
+  .page-title {
+    font-size: 22px;
+  }
+
+  .header-actions {
+    width: 100%;
+    justify-content: stretch;
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+
+  .date-picker,
+  .refresh-btn,
+  .compare-btn {
+    width: 100%;
+  }
+
+  .summary-cards {
+    grid-template-columns: 1fr;
+  }
+
+  .stat-card {
+    min-height: 132px;
+  }
+
+  .section-header {
+    align-items: flex-start;
     flex-direction: column;
   }
 
-  .period-tabs,
-  .toolbar-actions,
-  .search-input,
-  .date-picker,
-  .icon-button {
-    width: 100%;
-  }
-
-  .period-tab {
-    flex: 1;
-  }
-
-  .toolbar-actions {
-    display: grid;
-    grid-template-columns: 1fr;
-  }
-
-  .metrics-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .panel-header,
-  .detail-header,
   .compare-grid {
-    display: grid;
     grid-template-columns: 1fr;
   }
 
-  .table-tabs {
-    width: 100%;
-  }
-
-  .table-tabs button {
-    flex: 1;
-  }
-
   :global(.finance-compare-dialog) {
     width: calc(100vw - 24px) !important;
   }