From bb7ed5a7e0a58238fb51bcc8e8959831417cd73e Mon Sep 17 00:00:00 2001
From: SmartUp Developer <dev@smartup.local>
Date: Fri, 3 Jul 2026 18:02:57 +0800
Subject: [PATCH] Refactor finance reconciliation dashboard

---
 frontend/src/views/Finance.vue | 1211 ++++++++++++++++++++++++--------
 1 file changed, 901 insertions(+), 310 deletions(-)

diff --git a/frontend/src/views/Finance.vue b/frontend/src/views/Finance.vue
index ec6d938..6fa3cd0 100644
--- a/frontend/src/views/Finance.vue
+++ b/frontend/src/views/Finance.vue
@@ -1,171 +1,188 @@
 <template>
   <div class="finance-page">
-    <!-- Header -->
-    <div class="page-header">
-      <div class="header-left">
-        <h1 class="page-title">
-          <el-icon class="title-icon"><TrendCharts /></el-icon>
-          财务对账
-        </h1>
-        <p class="page-subtitle">已统计入库数据，定时快照不自动覆盖</p>
+    <div class="finance-shell">
+      <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="header-actions">
+          <el-date-picker
+            v-model="selectedDate"
+            type="date"
+            placeholder="选择日期（默认昨天）"
+            :disabled-date="disabledDate"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+            class="date-picker"
+          />
+          <el-button type="primary" :loading="loading" @click="loadData" class="refresh-btn">
+            <el-icon><Refresh /></el-icon>
+            刷新
+          </el-button>
+          <el-button
+            v-if="summary"
+            :loading="comparing"
+            @click="handleCompare"
+            class="compare-btn"
+          >
+            <el-icon><DataAnalysis /></el-icon>
+            重新统计并比对
+          </el-button>
+        </div>
       </div>
-      <div class="header-actions">
-        <el-date-picker
-          v-model="selectedDate"
-          type="date"
-          placeholder="选择日期（默认昨天）"
-          :disabled-date="disabledDate"
-          format="YYYY-MM-DD"
-          value-format="YYYY-MM-DD"
-          class="date-picker"
-        />
-        <el-button type="primary" :loading="loading" @click="loadData" class="refresh-btn">
-          <el-icon><Refresh /></el-icon>
-          刷新
-        </el-button>
-        <el-button
-          v-if="summary"
-          :loading="comparing"
-          @click="handleCompare"
-          class="compare-btn"
-        >
-          <el-icon><DataAnalysis /></el-icon>
-          重新统计并比对
-        </el-button>
+
+      <el-alert v-if="fetchError" :title="fetchError" type="error" show-icon :closable="false" class="error-alert" />
+
+      <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="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="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 :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 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="90" align="center">
+                <template #default="{ row }">
+                  <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="260">
+                <template #default="{ row }">
+                  <span v-if="row.error" class="error-text">{{ row.error }}</span>
+                  <span v-else class="ok-text">-</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+
+        <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="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 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="90" align="center">
+                <template #default="{ row }">
+                  <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="260">
+                <template #default="{ row }">
+                  <span v-if="row.error" class="error-text">{{ row.error }}</span>
+                  <span v-else class="ok-text">-</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </template>
     </div>
 
-    <!-- Error banner -->
-    <el-alert v-if="fetchError" :title="fetchError" type="error" show-icon :closable="false" class="error-alert" />
-
-    <!-- Summary cards -->
-    <div v-if="summary" class="summary-cards">
-      <div class="stat-card revenue">
-        <div class="stat-label">网站收入</div>
-        <div class="stat-value">{{ formatAmount(summary.total_revenue) }}</div>
-        <div class="stat-sub">
-          {{ summary.date }}
-          <span v-if="summary.from_snapshot && summary.computed_at" class="snapshot-badge">
-            · 快照 {{ formatTime(summary.computed_at) }}
-          </span>
-        </div>
-      </div>
-      <div class="stat-card cost">
-        <div class="stat-label">上游消费</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-label">净收入</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-label">失败项</div>
-        <div class="stat-value">{{ summary.failed_count }}</div>
-        <div class="stat-sub">{{ summary.failed_count > 0 ? '数据不完整，净收入仅供参考' : '全部统计成功' }}</div>
-      </div>
-    </div>
-
-    <!-- Empty state -->
-    <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" />
-
-    <!-- Tables -->
-    <template v-if="summary && !loading">
-      <!-- Website Revenue Detail -->
-      <div class="section">
-        <div class="section-header">
-          <span class="section-title">
-            <el-icon><OfficeBuilding /></el-icon>
-            网站收入明细
-          </span>
-          <el-tag :type="allWebsitesOk ? 'success' : 'danger'" size="small">
-            {{ successWebsiteCount }} / {{ summary.website_items.length }} 成功
-          </el-tag>
-        </div>
-        <el-table :data="summary.website_items" class="detail-table" stripe>
-          <el-table-column label="网站名称" prop="name" min-width="180" />
-          <el-table-column label="收入" min-width="140" align="right">
-            <template #default="{ row }">
-              <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="90" align="center">
-            <template #default="{ row }">
-              <el-tag :type="row.status === 'success' ? 'success' : 'danger'" size="small">
-                {{ row.status === 'success' ? '成功' : '失败' }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <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="ok-text">—</span>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-
-      <!-- Upstream Cost Detail -->
-      <div class="section">
-        <div class="section-header">
-          <span class="section-title">
-            <el-icon><Connection /></el-icon>
-            上游消费明细
-          </span>
-          <el-tag :type="allUpstreamsOk ? 'success' : 'danger'" size="small">
-            {{ successUpstreamCount }} / {{ summary.upstream_items.length }} 成功
-          </el-tag>
-        </div>
-        <el-table :data="summary.upstream_items" class="detail-table" stripe>
-          <el-table-column label="上游名称" prop="name" min-width="180" />
-          <el-table-column label="类型" width="100" align="center">
-            <template #default="{ row }">
-              <el-tag
-                :type="row.upstream_type === 'sub2api' ? 'primary' : row.upstream_type === 'new_api' ? 'warning' : 'info'"
-                size="small"
-              >
-                {{ 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 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="90" align="center">
-            <template #default="{ row }">
-              <el-tag :type="row.status === 'success' ? 'success' : 'danger'" size="small">
-                {{ row.status === 'success' ? '成功' : '失败' }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <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="ok-text">—</span>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-    </template>
-
-    <!-- Compare Dialog -->
     <el-dialog
       v-model="compareDialogVisible"
       title="重新统计比对结果"
-      width="700px"
+      width="760px"
+      class="finance-compare-dialog"
       :close-on-click-modal="false"
     >
       <template v-if="compareResult">
@@ -187,7 +204,7 @@
         />
         <div class="compare-grid">
           <div class="compare-col">
-            <h4 class="compare-col-title">已存快照</h4>
+            <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>
@@ -211,7 +228,7 @@
             <div v-else class="compare-empty">无快照</div>
           </div>
           <div class="compare-col">
-            <h4 class="compare-col-title">实时统计</h4>
+            <h4 class="compare-col-title"><span class="title-dot green" />实时统计</h4>
             <div class="compare-stat">
               <div class="compare-row">
                 <span class="compare-label">收入</span>
@@ -238,29 +255,31 @@
         <!-- 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>
-          <el-table :data="compareResult.diff_items" class="detail-table" stripe size="small">
-            <el-table-column label="名称" prop="name" min-width="120" />
-            <el-table-column label="类型" width="80" align="center">
-              <template #default="{ row }">
-                {{ row.side === 'website_items' ? '网站' : '上游' }}
-              </template>
-            </el-table-column>
-            <el-table-column label="字段" width="80" align="center">
-              <template #default="{ row }">
-                {{ diffFieldLabel(row) }}
-              </template>
-            </el-table-column>
-            <el-table-column label="旧值" min-width="100" align="right">
-              <template #default="{ row }">
-                <span :class="diffValueClass(row, 'old')">{{ formatDiffValue(row, 'old') }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column label="新值" min-width="100" align="right">
-              <template #default="{ row }">
-                <span :class="diffValueClass(row, 'new')">{{ formatDiffValue(row, 'new') }}</span>
-              </template>
-            </el-table-column>
-          </el-table>
+          <div class="table-wrap">
+            <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 }">
+                  {{ row.side === 'website_items' ? '网站' : '上游' }}
+                </template>
+              </el-table-column>
+              <el-table-column label="字段" width="80" align="center">
+                <template #default="{ row }">
+                  {{ diffFieldLabel(row) }}
+                </template>
+              </el-table-column>
+              <el-table-column label="旧值" min-width="100" align="right">
+                <template #default="{ row }">
+                  <span :class="diffValueClass(row, 'old')">{{ formatDiffValue(row, 'old') }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="新值" min-width="100" align="right">
+                <template #default="{ row }">
+                  <span :class="diffValueClass(row, 'new')">{{ formatDiffValue(row, 'new') }}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
         </div>
       </template>
       <template #footer>
@@ -478,164 +497,736 @@ onMounted(() => {
 
 <style scoped>
 .finance-page {
-  padding: 24px;
-  max-width: 1200px;
+  --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;
+
+  color: var(--finance-text);
+  width: 100%;
+}
+
+.finance-shell {
+  width: min(100%, 1600px);
   margin: 0 auto;
+  display: grid;
+  gap: 18px;
+  font-family: 'Inter', 'Noto Sans SC', sans-serif;
+}
+
+.finance-panel,
+.stat-card {
+  background: var(--finance-panel);
+  border: 1px solid var(--finance-border);
+  border-radius: 12px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.34);
 }
 
-/* ── Header ── */
 .page-header {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 16px;
-  margin-bottom: 28px;
+  padding: 18px 24px;
 }
-.page-title {
-  font-size: 22px;
+
+.header-left {
+  min-width: 220px;
+  display: grid;
+  gap: 6px;
+}
+
+.page-kicker {
+  color: var(--finance-amber-bright);
+  font-size: 11px;
   font-weight: 700;
-  color: var(--el-text-color-primary);
-  margin: 0 0 6px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--finance-text);
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  letter-spacing: 0;
+  line-height: 1.15;
+}
+
+.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: 190px;
+}
+
+.refresh-btn,
+.compare-btn {
+  min-width: 96px;
+  border-radius: 8px;
+  font-weight: 600;
+}
+
+.compare-btn {
+  border-color: rgba(217, 119, 6, 0.32);
+  background: rgba(217, 119, 6, 0.1);
+  color: var(--finance-amber-bright);
+}
+
+.summary-cards {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.stat-card {
+  min-height: 146px;
+  padding: 20px;
+  display: grid;
+  align-content: space-between;
+  gap: 12px;
+  position: relative;
+  overflow: hidden;
+}
+
+.stat-card::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 4px;
+  background: rgba(217, 119, 6, 0.68);
+}
+
+.stat-card.cost::before {
+  background: rgba(56, 189, 248, 0.58);
+}
+
+.stat-card.net::before {
+  background: rgba(16, 185, 129, 0.62);
+}
+
+.stat-card.failed::before {
+  background: rgba(158, 146, 138, 0.5);
+}
+
+.stat-card.failed.has-failures::before {
+  background: rgba(221, 126, 114, 0.78);
+}
+
+.stat-topline {
+  display: flex;
+  justify-content: space-between;
+  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-radius: 8px;
+  border: 1px solid rgba(42, 34, 30, 0.72);
+}
+
+.detail-table {
+  min-width: 680px;
+  font-family: 'Inter', 'Noto Sans SC', sans-serif;
+}
+
+.amount-positive,
+.amount-cost,
+.compare-value,
+.old-value,
+.new-value {
+  font-family: 'JetBrains Mono', 'Consolas', monospace;
+  font-variant-numeric: tabular-nums;
+}
+
+.amount-positive {
+  color: var(--finance-green);
+  font-weight: 700;
+}
+
+.amount-cost {
+  color: #fbbf24;
+  font-weight: 700;
+}
+
+.amount-zero {
+  color: var(--finance-soft);
+}
+
+.error-text {
+  color: var(--finance-red);
+  font-size: 12px;
+  word-break: break-all;
+}
+
+.ok-text {
+  color: var(--finance-soft);
+}
+
+.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: 18px;
+  border-radius: 8px;
+}
+
+.compare-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+.compare-col {
+  border: 1px solid rgba(42, 34, 30, 0.72);
+  border-radius: 10px;
+  background: rgba(12, 10, 9, 0.56);
+  padding: 16px;
+}
+
+.compare-col-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--finance-text);
+  margin: 0 0 14px;
   display: flex;
   align-items: center;
   gap: 8px;
 }
-.title-icon {
-  color: var(--el-color-primary);
-}
-.page-subtitle {
-  font-size: 13px;
-  color: var(--el-text-color-secondary);
-  margin: 0;
-}
-.header-actions {
+
+.compare-stat {
   display: flex;
+  flex-direction: column;
   gap: 10px;
-  align-items: center;
 }
-.date-picker { width: 180px; }
-.refresh-btn { min-width: 90px; }
 
-/* ── Cards ── */
-.summary-cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 16px;
-  margin-bottom: 32px;
-}
-.stat-card {
-  background: var(--el-bg-color);
-  border: 1px solid var(--el-border-color-light);
-  border-radius: 12px;
-  padding: 20px 24px;
-  transition: box-shadow 0.2s;
-}
-.stat-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
-.stat-label {
-  font-size: 13px;
-  color: var(--el-text-color-secondary);
-  margin-bottom: 8px;
-  font-weight: 500;
-}
-.stat-value {
-  font-size: 26px;
-  font-weight: 700;
-  color: var(--el-text-color-primary);
-  margin-bottom: 4px;
-  font-variant-numeric: tabular-nums;
-}
-.stat-sub {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-}
-.snapshot-badge {
-  font-weight: 500;
-  color: var(--el-color-info);
-}
-.stat-card.net.positive .stat-value { color: #22c55e; }
-.stat-card.net.negative .stat-value { color: var(--el-color-danger); }
-.stat-card.failed.has-failures {
-  border-color: var(--el-color-danger-light-5);
-  background: var(--el-color-danger-light-9);
-}
-.stat-card.failed.has-failures .stat-value { color: var(--el-color-danger); }
-
-/* ── Section ── */
-.section { margin-bottom: 32px; }
-.section-header {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 12px;
-}
-.section-title {
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--el-text-color-primary);
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-.detail-table { border-radius: 8px; overflow: hidden; }
-
-/* ── Amount styles ── */
-.amount-positive { color: #22c55e; font-weight: 600; font-variant-numeric: tabular-nums; }
-.amount-cost     { color: var(--el-color-warning); font-weight: 600; font-variant-numeric: tabular-nums; }
-.amount-zero     { color: var(--el-text-color-placeholder); }
-
-/* ── Status ── */
-.error-text { color: var(--el-color-danger); font-size: 12px; word-break: break-all; }
-.ok-text    { color: var(--el-text-color-placeholder); }
-
-/* ── Misc ── */
-.error-alert { margin-bottom: 20px; }
-.skeleton    { margin-top: 16px; }
-.empty-state { margin-top: 60px; }
-
-/* ── Compare dialog ── */
-.compare-alert { margin-bottom: 20px; }
-.compare-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 20px;
-}
-.compare-col-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--el-text-color-primary);
-  margin: 0 0 12px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid var(--el-border-color-light);
-}
-.compare-stat { display: flex; flex-direction: column; gap: 8px; }
 .compare-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: 14px;
+  padding: 8px 0;
+  border-bottom: 1px solid rgba(42, 34, 30, 0.54);
 }
-.compare-label { font-size: 13px; color: var(--el-text-color-secondary); }
-.compare-value { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
-.compare-value.positive { color: #22c55e; }
-.compare-value.negative { color: var(--el-color-danger); }
+
+.compare-row:last-child {
+  border-bottom: 0;
+}
+
+.compare-label {
+  font-size: 13px;
+  color: var(--finance-muted);
+}
+
+.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 {
-  color: var(--el-text-color-placeholder);
+  color: var(--finance-soft);
   font-size: 13px;
   text-align: center;
-  padding: 20px 0;
+  padding: 28px 0;
 }
 
-/* ── Diff items table ── */
 .diff-section {
   margin-top: 20px;
 }
+
 .diff-title {
   font-size: 14px;
-  font-weight: 600;
-  color: var(--el-text-color-primary);
-  margin: 0 0 10px;
+  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: var(--finance-dark);
+  box-shadow: 0 0 0 1px var(--finance-border) inset;
+}
+
+.finance-page :deep(.el-input__wrapper:hover),
+.finance-page :deep(.el-input__wrapper.is-focus) {
+  box-shadow: 0 0 0 1px var(--finance-border-strong) inset;
+}
+
+.finance-page :deep(.el-input__inner) {
+  color: var(--finance-text);
+}
+
+.finance-page :deep(.el-input__inner::placeholder) {
+  color: rgba(158, 146, 138, 0.66);
+}
+
+.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: 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);
+}
+
+.finance-page :deep(.el-table th.el-table__cell) {
+  background: rgba(255, 244, 232, 0.02);
+  color: var(--finance-muted);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+}
+
+.finance-page :deep(.el-table td.el-table__cell) {
+  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: 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: 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) {
+  --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) {
+  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: 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) {
+  .summary-cards {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 720px) {
+  .finance-shell {
+    gap: 14px;
+  }
+
+  .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;
+  }
+
+  .compare-grid {
+    grid-template-columns: 1fr;
+  }
+
+  :global(.finance-compare-dialog) {
+    width: calc(100vw - 24px) !important;
+  }
 }
-.old-value { color: var(--el-color-danger); }
-.new-value { color: #22c55e; font-weight: 600; }
-.absent-value { color: var(--el-text-color-placeholder); }
 </style>