From ad660676941772fa130073dedf2ace8a32412afb Mon Sep 17 00:00:00 2001
From: "DESKTOP-72TV0V4\\caoxiaozhu" <leocaoxiaozhu@163.com>
Date: Sat, 2 May 2026 23:44:16 +0800
Subject: [PATCH] feat: add breathing animation to current progress step node

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/views/ApprovalCenterView.vue | 2411 +++++++++++++++++++++++++++---
 1 file changed, 2204 insertions(+), 207 deletions(-)

diff --git a/src/views/ApprovalCenterView.vue b/src/views/ApprovalCenterView.vue
index 2df1cb5..2e57346 100644
--- a/src/views/ApprovalCenterView.vue
+++ b/src/views/ApprovalCenterView.vue
@@ -1,6 +1,405 @@
 <template>
   <section class="approval-page">
-    <article class="approval-list panel">
+    <!-- ───── Detail Modal Overlay ───── -->
+    <Teleport to="body">
+      <Transition name="detail-modal">
+        <div v-if="false && selectedRow" class="detail-overlay" @click.self="selectedRow = null">
+          <div class="detail-modal">
+            <!-- Modal Header -->
+            <header class="modal-header">
+              <div class="header-left">
+                <div class="req-badge">{{ selectedRow.id }}</div>
+                <div class="header-title-group">
+                  <h2>{{ selectedRow.type }}审批详情</h2>
+                  <p>申请人：{{ selectedRow.applicant }} · {{ selectedRow.department }} · {{ selectedRow.time }}</p>
+                </div>
+              </div>
+              <div class="header-right">
+                <div class="header-indicator" :class="selectedRow.riskTone">
+                  <i class="mdi" :class="selectedRow.riskTone === 'high' ? 'mdi-alert-circle' : selectedRow.riskTone === 'medium' ? 'mdi-alert' : 'mdi-shield-check'"></i>
+                  <span>{{ selectedRow.risk }}</span>
+                </div>
+                <div class="header-indicator status" :class="selectedRow.statusTone">
+                  <span>{{ selectedRow.node }}</span>
+                </div>
+                <button class="close-btn" type="button" aria-label="关闭" @click="selectedRow = null">
+                  <i class="mdi mdi-close"></i>
+                </button>
+              </div>
+            </header>
+
+            <!-- Progress Bar -->
+            <div class="modal-progress">
+              <div class="progress-track">
+                <div v-for="(step, idx) in approvalSteps" :key="step.label" class="progress-node" :class="{ done: step.done, active: step.active, current: step.current }">
+                  <span class="node-dot">
+                    <i v-if="step.done" class="mdi mdi-check"></i>
+                    <template v-else>{{ step.index }}</template>
+                  </span>
+                  <div class="node-label">
+                    <strong>{{ step.label }}</strong>
+                    <small>{{ step.time }}</small>
+                  </div>
+                  <span v-if="idx < approvalSteps.length - 1" class="node-line" :class="{ filled: step.done || step.active }"></span>
+                </div>
+              </div>
+            </div>
+
+            <!-- Modal Body -->
+            <div class="modal-body">
+              <div class="body-grid">
+                <!-- Left Column -->
+                <div class="body-main">
+                  <!-- 费用摘要 -->
+                  <article class="content-card">
+                    <div class="card-header">
+                      <div class="card-title">
+                        <i class="mdi mdi-clipboard-text-outline"></i>
+                        <h3>费用摘要</h3>
+                      </div>
+                    </div>
+                    <div class="metrics-strip">
+                      <div class="metric-block amount">
+                        <span class="metric-label">报销金额</span>
+                        <strong class="metric-value">{{ selectedRow.amount }}</strong>
+                      </div>
+                      <div class="metric-block">
+                        <span class="metric-label">SLA 剩余</span>
+                        <strong class="metric-value sla" :class="selectedRow.slaTone">
+                          <i class="mdi mdi-clock-outline"></i>
+                          {{ selectedRow.sla }}
+                        </strong>
+                      </div>
+                      <div class="metric-block">
+                        <span class="metric-label">费用明细</span>
+                        <strong class="metric-value">5 项</strong>
+                      </div>
+                      <div class="metric-block">
+                        <span class="metric-label">附件材料</span>
+                        <strong class="metric-value">6 份</strong>
+                      </div>
+                    </div>
+                    <div class="summary-grid">
+                      <div v-for="item in summaryItems" :key="item.label" class="summary-cell">
+                        <div class="cell-icon"><i :class="item.icon"></i></div>
+                        <div class="cell-content">
+                          <span>{{ item.label }}</span>
+                          <strong>{{ item.value }}</strong>
+                        </div>
+                      </div>
+                    </div>
+                  </article>
+
+                  <!-- 费用明细 -->
+                  <article class="content-card">
+                    <div class="card-header">
+                      <div class="card-title">
+                        <i class="mdi mdi-receipt-text-outline"></i>
+                        <h3>费用明细</h3>
+                      </div>
+                      <span class="card-badge">合计 ￥6,920</span>
+                    </div>
+                    <div class="expense-table-wrap">
+                      <table class="expense-table">
+                        <thead>
+                          <tr>
+                            <th>费用项目</th>
+                            <th>说明</th>
+                            <th class="right">金额</th>
+                            <th class="center">是否超标</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          <tr v-for="item in expenseItems" :key="item.name">
+                            <td><strong>{{ item.name }}</strong></td>
+                            <td>{{ item.desc }}</td>
+                            <td class="right">{{ item.amount }}</td>
+                            <td class="center">
+                              <span class="over-badge" :class="item.tone">
+                                <i class="mdi" :class="item.tone === 'ok' ? 'mdi-check-circle' : 'mdi-alert-circle'"></i>
+                                {{ item.status }}
+                              </span>
+                            </td>
+                          </tr>
+                        </tbody>
+                        <tfoot>
+                          <tr>
+                            <td colspan="2"><strong>合计</strong></td>
+                            <td class="right"><strong class="total-amount">￥6,920</strong></td>
+                            <td></td>
+                          </tr>
+                        </tfoot>
+                      </table>
+                    </div>
+                  </article>
+
+                  <!-- 审批意见 -->
+                  <article class="content-card">
+                    <div class="card-header">
+                      <div class="card-title">
+                        <i class="mdi mdi-comment-text-outline"></i>
+                        <h3>审批意见</h3>
+                      </div>
+                    </div>
+                    <div class="opinion-wrap">
+                      <textarea rows="4" placeholder="请输入审批意见..."></textarea>
+                    </div>
+                  </article>
+                </div>
+
+                <!-- Right Column -->
+                <aside class="body-side">
+                  <!-- AI 风险识别 -->
+                  <article class="side-card risk-card">
+                    <div class="card-header">
+                      <div class="card-title">
+                        <i class="mdi mdi-robot-outline"></i>
+                        <h3>AI 风险识别</h3>
+                      </div>
+                      <div class="risk-total high">
+                        <span>综合风险</span>
+                        <strong>高</strong>
+                      </div>
+                    </div>
+                    <div class="risk-items">
+                      <div v-for="risk in riskItems" :key="risk.text" class="risk-row" :class="risk.tone">
+                        <div class="risk-icon">
+                          <i :class="risk.icon"></i>
+                        </div>
+                        <span class="risk-text">{{ risk.text }}</span>
+                        <span class="risk-level" :class="risk.tone">{{ risk.level }}</span>
+                      </div>
+                    </div>
+                    <div class="risk-note">
+                      <strong>AI 审核建议</strong>
+                      <p>优先补齐酒店入住清单，并复核出租车发票抬头与超标费用说明；完成后可继续流转。</p>
+                    </div>
+                  </article>
+
+                  <!-- 附件材料 -->
+                  <article class="side-card">
+                    <div class="card-header">
+                      <div class="card-title">
+                        <i class="mdi mdi-paperclip"></i>
+                        <h3>附件材料</h3>
+                      </div>
+                      <span class="card-badge warn">1 份缺失</span>
+                    </div>
+                    <div class="attachment-list-side">
+                      <div v-for="file in attachments" :key="file.name" class="attachment-row" :class="{ missing: file.missing }">
+                        <div class="file-icon-sm" :class="file.iconClass">
+                          <i :class="file.icon"></i>
+                        </div>
+                        <div class="file-detail">
+                          <strong>{{ file.name }}</strong>
+                          <span>{{ file.size }}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </article>
+
+                </aside>
+              </div>
+            </div>
+
+            <!-- Modal Footer -->
+            <footer class="modal-footer">
+              <div class="footer-left">
+                <button class="action-btn back" type="button" @click="selectedRow = null">
+                  <i class="mdi mdi-arrow-left"></i>
+                  <span>返回列表</span>
+                </button>
+              </div>
+              <div class="footer-right">
+                <button class="action-btn supplement" type="button">
+                  <i class="mdi mdi-undo"></i>
+                  <span>补充材料</span>
+                </button>
+                <button class="action-btn reject" type="button">
+                  <i class="mdi mdi-close-circle-outline"></i>
+                  <span>驳回</span>
+                </button>
+                <button class="action-btn approve" type="button">
+                  <i class="mdi mdi-check-circle-outline"></i>
+                  <span>通过</span>
+                </button>
+              </div>
+            </footer>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <div v-if="selectedRow" class="approval-detail">
+      <div class="detail-scroll">
+        <article class="detail-hero panel">
+          <div class="applicant-card">
+            <div class="portrait">{{ selectedRow.avatar }}</div>
+            <div>
+              <h2>{{ selectedRow.applicant }} <span>{{ selectedRow.department }}</span></h2>
+              <p>提交时间 <strong>{{ selectedRow.time }}</strong></p>
+            </div>
+          </div>
+
+          <div class="hero-stat">
+            <span>金额</span>
+            <strong>{{ selectedRow.amount }}</strong>
+          </div>
+          <div class="hero-stat">
+            <span>风险等级</span>
+            <b :class="['risk-pill', selectedRow.riskTone]">{{ selectedRow.risk }}</b>
+          </div>
+          <div class="hero-stat">
+            <span>当前状态</span>
+            <b class="state-pill">{{ selectedRow.node }}</b>
+          </div>
+          <div class="hero-stat">
+            <span>SLA 剩余时间</span>
+            <strong class="countdown"><i class="mdi mdi-clock-outline"></i> 剩余 {{ selectedRow.sla }}</strong>
+          </div>
+
+          <div class="hero-summary-panel">
+            <div v-for="item in heroSummaryItems" :key="item.label" class="hero-summary-item">
+              <div class="hero-summary-label">
+                <span class="hero-summary-icon"><i :class="item.icon"></i></span>
+                <span>{{ item.label }}</span>
+              </div>
+              <strong>{{ item.value }}</strong>
+            </div>
+          </div>
+
+          <div class="progress-block">
+            <div class="progress-head">
+              <h3>当前进度</h3>
+            </div>
+            <div class="progress-line">
+              <div v-for="step in approvalSteps" :key="step.label" class="progress-step" :class="{ active: step.active, current: step.current }">
+                <span>
+                  <i
+                    v-if="step.current"
+                    v-motion
+                    class="current-progress-ring"
+                    :initial="currentProgressRingMotion.initial"
+                    :enter="currentProgressRingMotion.enter"
+                    aria-hidden="true"
+                  ></i>
+                  <i v-if="step.done" class="mdi mdi-check"></i>
+                  <template v-else>{{ step.index }}</template>
+                </span>
+                <strong>{{ step.label }}</strong>
+                <small>{{ step.time }}</small>
+              </div>
+            </div>
+          </div>
+        </article>
+
+        <div class="detail-grid">
+          <section class="detail-left">
+            <article class="detail-card panel">
+              <div class="detail-card-head">
+                <div>
+                  <h3>费用明细</h3>
+                  <p>按发生时间逐笔展示，附件与 AI 风险直接在表内完成核对。</p>
+                </div>
+                <span class="detail-total">{{ expenseTotal }}</span>
+              </div>
+              <div class="detail-expense-table">
+                <table>
+                  <thead>
+                    <tr>
+                      <th>时间</th>
+                      <th>费用项目</th>
+                      <th>说明</th>
+                      <th>金额</th>
+                      <th>附件材料</th>
+                      <th>AI 风险识别</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <template v-for="item in expenseItems" :key="item.id">
+                      <tr>
+                        <td class="expense-time">
+                          <strong>{{ item.time }}</strong>
+                          <span>{{ item.dayLabel }}</span>
+                        </td>
+                        <td class="expense-type">
+                          <strong>{{ item.name }}</strong>
+                          <span>{{ item.category }}</span>
+                        </td>
+                        <td class="expense-desc">
+                          <strong>{{ item.desc }}</strong>
+                          <span>{{ item.detail }}</span>
+                        </td>
+                        <td class="expense-amount">
+                          <strong>{{ item.amount }}</strong>
+                          <span v-if="item.tone !== 'ok'" :class="['over-tag', item.tone]">{{ item.status }}</span>
+                        </td>
+                        <td class="expense-attachment">
+                          <div class="expense-attachment-main">
+                            <span :class="['attachment-pill', item.attachmentTone]">{{ item.attachmentStatus }}</span>
+                            <button
+                              v-if="item.attachments.length"
+                              class="inline-action"
+                              type="button"
+                              @click="toggleExpenseAttachments(item.id)"
+                            >
+                              {{ expandedExpenseId === item.id ? '收起附件' : '查看附件' }}
+                            </button>
+                          </div>
+                          <span class="attachment-hint">{{ item.attachmentHint }}</span>
+                        </td>
+                        <td class="expense-risk">
+                          <template v-if="showExpenseRisk(item)">
+                            <span :class="['risk-inline-tag', item.riskTone]">{{ item.riskLabel }}</span>
+                            <p>{{ item.riskText }}</p>
+                          </template>
+                        </td>
+                      </tr>
+                      <tr v-if="expandedExpenseId === item.id" class="expense-expand-row">
+                        <td colspan="6">
+                          <div class="expense-files">
+                            <span v-for="file in item.attachments" :key="file" class="expense-file-chip">
+                              <i class="mdi mdi-paperclip"></i>
+                              {{ file }}
+                            </span>
+                          </div>
+                        </td>
+                      </tr>
+                    </template>
+                    <tr class="total-row">
+                      <td colspan="3">合计</td>
+                      <td>{{ expenseTotal }}</td>
+                      <td>{{ uploadedExpenseCount }} 项已上传票据</td>
+                      <td>1 项待补材料，1 项需补充超标说明</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </article>
+
+            <article class="detail-card panel">
+              <h3>审批意见</h3>
+              <textarea rows="3" placeholder="输入审批意见..."></textarea>
+            </article>
+          </section>
+        </div>
+      </div>
+
+      <footer class="detail-actions">
+        <button class="back-action" type="button" @click="selectedRow = null">
+          <i class="mdi mdi-arrow-left"></i>
+          <span>退回列表</span>
+        </button>
+        <div class="approval-action-group" aria-label="审批操作">
+          <button class="approve-action" type="button"><i class="mdi mdi-check-circle-outline"></i> 通过</button>
+          <button class="reject-action" type="button"><i class="mdi mdi-close-circle-outline"></i> 驳回</button>
+          <button class="supplement-action" type="button"><i class="mdi mdi-undo"></i> 补充</button>
+        </div>
+      </footer>
+    </div>
+
+    <!-- ───── Approval List ───── -->
+    <article v-else class="approval-list panel">
       <nav class="status-tabs" aria-label="审批状态">
         <button
           v-for="tab in tabs"
@@ -45,7 +444,7 @@
             </tr>
           </thead>
           <tbody>
-            <tr v-for="row in visibleRows" :key="row.id" :class="{ spotlight: row.spotlight }">
+            <tr v-for="row in visibleRows" :key="row.id" :class="{ spotlight: row.spotlight }" @click="selectedRow = row">
               <td><strong class="doc-id">{{ row.id }}</strong></td>
               <td>
                 <span class="person">
@@ -62,7 +461,7 @@
               <td>{{ row.node }}</td>
               <td><span class="status-tag" :class="row.statusTone">{{ row.status }}</span></td>
               <td>
-                <button class="more-btn" type="button" aria-label="更多操作">
+                <button class="more-btn" type="button" aria-label="查看审批详情" @click.stop="selectedRow = row">
                   <i class="mdi mdi-dots-horizontal"></i>
                 </button>
               </td>
@@ -94,6 +493,8 @@
 import { computed, ref } from 'vue'
 
 const activeTab = ref('全部待审')
+const selectedRow = ref(null)
+const expandedExpenseId = ref(null)
 const tabs = ['全部待审', '高风险', '即将超时', '已处理']
 const filters = ['法人主体', '费用类型', '风险等级', '金额区间', '所属部门']
 
@@ -114,9 +515,242 @@ const visibleRows = computed(() => {
   if (activeTab.value === '即将超时') return rows.filter((row) => row.status === '即将超时')
   return rows.slice(0, 3).map((row) => ({ ...row, status: '已处理', statusTone: 'done' }))
 })
+
+const approvalSteps = [
+  { index: 1, label: '提交申请', time: '07-11 08:46', done: true, active: true },
+  { index: 2, label: '票据识别', time: '07-11 08:48', done: true, active: true },
+  { index: 3, label: '费用归类', time: '07-11 08:49', done: true, active: true },
+  { index: 4, label: '部门负责人审批', time: '07-11 11:28', done: true, active: true },
+  { index: 5, label: '财务审批', time: '进行中', active: true, current: true },
+  { index: 6, label: '归档入账', time: '待处理' }
+]
+
+const summaryItems = [
+  { label: '行程', value: '北京 → 上海', icon: 'mdi mdi-map-marker-path' },
+  { label: '出差区间', value: '07-10 至 07-11', icon: 'mdi mdi-clock-outline' },
+  { label: '票据关联', value: '8 条明细 / 7 份材料', icon: 'mdi mdi-file-document-multiple-outline' },
+  { label: '成本归属', value: '市场部 · CC-MKT-01', icon: 'mdi mdi-account-group-outline' },
+  { label: '支付方式', value: '企业垫付', icon: 'mdi mdi-credit-card-outline' }
+]
+
+const heroSummaryItems = computed(() => [
+  { label: '单号', value: selectedRow.value?.id ?? '-', icon: 'mdi mdi-pound-box-outline' },
+  { label: '报销类型', value: selectedRow.value?.type ?? '-', icon: 'mdi mdi-briefcase-outline' },
+  ...summaryItems
+])
+
+const currentProgressRingMotion = {
+  initial: {
+    scale: 1,
+    opacity: 0.34,
+  },
+  enter: {
+    scale: [1, 1.42, 1.78],
+    opacity: [0.34, 0.16, 0],
+    transition: {
+      duration: 3.2,
+      repeat: Infinity,
+      repeatType: 'loop',
+      repeatDelay: 0.85,
+      ease: 'easeOut',
+      times: [0, 0.5, 1],
+    },
+  },
+}
+
+const expenseItems = [
+  {
+    id: 'flight-1',
+    time: '07-10 07:25',
+    dayLabel: '周三',
+    name: '机票',
+    category: '交通',
+    desc: '北京首都 → 上海虹桥',
+    detail: 'MU5103 往返经济舱，含行程单',
+    amount: '￥2,180',
+    status: '未超标',
+    tone: 'ok',
+    attachmentStatus: '已上传',
+    attachmentTone: 'ok',
+    attachmentHint: '电子行程单与机票发票齐全',
+    attachments: ['电子行程单.pdf', '机票发票.pdf'],
+    riskLabel: '低风险',
+    riskTone: 'low',
+    riskText: '票面信息与行程匹配。'
+  },
+  {
+    id: 'taxi-1',
+    time: '07-10 10:35',
+    dayLabel: '周三',
+    name: '出租车',
+    category: '市内交通',
+    desc: '虹桥机场 → 静安酒店',
+    detail: '落地后前往酒店，含过路费',
+    amount: '￥86',
+    status: '未超标',
+    tone: 'ok',
+    attachmentStatus: '已上传',
+    attachmentTone: 'ok',
+    attachmentHint: '已上传 1 张发票',
+    attachments: ['出租车发票-0710-01.jpg'],
+    riskLabel: '中风险',
+    riskTone: 'medium',
+    riskText: '高峰加价较高，建议顺带核对上车点。'
+  },
+  {
+    id: 'metro-1',
+    time: '07-10 18:20',
+    dayLabel: '周三',
+    name: '地铁',
+    category: '市内交通',
+    desc: '静安酒店 → 客户园区',
+    detail: '2 号线换乘，通勤交通',
+    amount: '￥12',
+    status: '未超标',
+    tone: 'ok',
+    attachmentStatus: '已上传',
+    attachmentTone: 'ok',
+    attachmentHint: '已上传电子票据',
+    attachments: ['地铁电子票据-0710.png'],
+    riskLabel: '低风险',
+    riskTone: 'low',
+    riskText: '路线与拜访行程一致。'
+  },
+  {
+    id: 'taxi-2',
+    time: '07-11 08:40',
+    dayLabel: '周四',
+    name: '出租车',
+    category: '市内交通',
+    desc: '静安酒店 → 客户园区',
+    detail: '次日早会前往客户现场',
+    amount: '￥42',
+    status: '未超标',
+    tone: 'ok',
+    attachmentStatus: '未上传',
+    attachmentTone: 'missing',
+    attachmentHint: '缺少对应发票',
+    attachments: [],
+    riskLabel: '高风险',
+    riskTone: 'high',
+    riskText: '票据缺失，当前无法完成交通费核验。'
+  },
+  {
+    id: 'taxi-3',
+    time: '07-11 20:55',
+    dayLabel: '周四',
+    name: '出租车',
+    category: '返程交通',
+    desc: '客户园区 → 虹桥机场',
+    detail: '夜间返程，触发超标校验',
+    amount: '￥136',
+    status: '超标 ￥28',
+    tone: 'bad',
+    attachmentStatus: '已上传',
+    attachmentTone: 'ok',
+    attachmentHint: '已上传 1 张发票',
+    attachments: ['出租车发票-0711-02.jpg'],
+    riskLabel: '中风险',
+    riskTone: 'medium',
+    riskText: '金额超差旅标准 ￥28，需补充业务说明。'
+  },
+  {
+    id: 'hotel-1',
+    time: '07-10 至 07-11',
+    dayLabel: '2 晚',
+    name: '酒店',
+    category: '住宿',
+    desc: '上海静安商务酒店',
+    detail: '标准大床房 2 晚，含早餐',
+    amount: '￥2,480',
+    status: '未超标',
+    tone: 'ok',
+    attachmentStatus: '部分上传',
+    attachmentTone: 'partial',
+    attachmentHint: '发票已上传，入住清单缺失',
+    attachments: ['酒店发票.jpg'],
+    riskLabel: '高风险',
+    riskTone: 'high',
+    riskText: '缺少入住清单，住宿真实性待补证。'
+  },
+  {
+    id: 'meal-1',
+    time: '07-10 至 07-11',
+    dayLabel: '2 天',
+    name: '餐补',
+    category: '补贴',
+    desc: '差旅餐补',
+    detail: '按差旅制度自动计算',
+    amount: '￥372',
+    status: '未超标',
+    tone: 'ok',
+    attachmentStatus: '免上传',
+    attachmentTone: 'neutral',
+    attachmentHint: '制度型补贴无需票据',
+    attachments: [],
+    riskLabel: '低风险',
+    riskTone: 'low',
+    riskText: '系统自动核算，无额外异常。'
+  },
+  {
+    id: 'other-1',
+    time: '07-11 09:10',
+    dayLabel: '周四',
+    name: '其他',
+    category: '杂费',
+    desc: '行李寄存 / 打印费',
+    detail: '客户提案资料打印与寄存服务',
+    amount: '￥1,612',
+    status: '未超标',
+    tone: 'ok',
+    attachmentStatus: '已上传',
+    attachmentTone: 'ok',
+    attachmentHint: '已上传 2 份附件',
+    attachments: ['打印服务发票.jpg', '行李寄存凭证.jpg'],
+    riskLabel: '低风险',
+    riskTone: 'low',
+    riskText: '用途清晰，金额在授权范围内。'
+  }
+]
+
+const expenseTotal = '￥6,920'
+
+const uploadedExpenseCount = computed(() => expenseItems.filter((item) => item.attachments.length).length)
+
+const showExpenseRisk = (item) => item.riskTone === 'medium' || item.riskTone === 'high'
+
+const toggleExpenseAttachments = (id) => {
+  expandedExpenseId.value = expandedExpenseId.value === id ? null : id
+}
+
+const attachments = [
+  { name: '机票.pdf', size: '256 KB', icon: 'mdi mdi-file-pdf-box', iconClass: 'pdf' },
+  { name: '酒店发票.jpg', size: '412 KB', icon: 'mdi mdi-image', iconClass: 'img' },
+  { name: '行程单.pdf', size: '198 KB', icon: 'mdi mdi-file-pdf-box', iconClass: 'pdf' },
+  { name: '出租车发票1.jpg', size: '128 KB', icon: 'mdi mdi-image', iconClass: 'img' },
+  { name: '出租车发票2.jpg', size: '132 KB', icon: 'mdi mdi-image', iconClass: 'img' },
+  { name: '酒店入住清单', size: '缺失', icon: 'mdi mdi-minus-circle', iconClass: 'miss', missing: true }
+]
+
+const riskItems = [
+  { text: '酒店入住清单缺失', level: '高', tone: 'high', icon: 'mdi mdi-alert-circle' },
+  { text: '1 笔出租车费用超差旅标准 ￥28', level: '中', tone: 'medium', icon: 'mdi mdi-alert' },
+  { text: '发票抬头识别为个人，建议核对', level: '中', tone: 'medium', icon: 'mdi mdi-lightbulb-on' }
+]
+
+const flowItems = [
+  { label: '提交申请', desc: '刘思雨 提交申请', time: '07-11 08:46', icon: 'mdi mdi-check' },
+  { label: '票据识别', desc: 'AI 自动识别完成', time: '07-11 08:48', icon: 'mdi mdi-check' },
+  { label: '费用归类', desc: '费用归类完成', time: '07-11 08:49', icon: 'mdi mdi-check' },
+  { label: '部门负责人审批', desc: '李文静 已通过', time: '07-11 11:28', icon: 'mdi mdi-check' },
+  { label: '财务审批', desc: '张晓明 审批中', time: '进行中', icon: 'mdi mdi-circle-slice-8', current: true },
+  { label: '归档入账', desc: '待处理', time: '-', icon: 'mdi mdi-circle-outline', pending: true }
+]
+
 </script>
 
 <style scoped>
+/* ────────── Approval List ────────── */
 .approval-page {
   height: 100%;
   min-height: 0;
@@ -152,16 +786,12 @@ const visibleRows = computed(() => {
   font-weight: 750;
 }
 
-.status-tabs button.active {
-  color: #059669;
-}
+.status-tabs button.active { color: #059669; }
 
 .status-tabs button.active::after {
   content: "";
   position: absolute;
-  left: 0;
-  right: 0;
-  bottom: -1px;
+  left: 0; right: 0; bottom: -1px;
   height: 3px;
   border-radius: 999px 999px 0 0;
   background: #10b981;
@@ -175,15 +805,9 @@ const visibleRows = computed(() => {
   margin-top: 14px;
 }
 
-.filter-set {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex-wrap: wrap;
-}
+.filter-set { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
 
-.filter-btn,
-.page-size {
+.filter-btn, .page-size {
   min-height: 38px;
   display: inline-flex;
   align-items: center;
@@ -199,25 +823,10 @@ const visibleRows = computed(() => {
   color: #334155;
 }
 
-.filter-btn {
-  min-width: 104px;
-  justify-content: space-between;
-}
+.filter-btn { min-width: 104px; justify-content: space-between; }
+.filter-btn:hover, .page-size:hover { border-color: rgba(16, 185, 129, .32); color: #0f9f78; }
 
-.filter-btn:hover,
-.page-size:hover {
-  border-color: rgba(16, 185, 129, .32);
-  color: #0f9f78;
-}
-
-.hint {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  margin-top: 10px;
-  color: #64748b;
-  font-size: 13px;
-}
+.hint { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; color: #64748b; font-size: 13px; }
 
 .table-wrap {
   min-height: 0;
@@ -228,15 +837,9 @@ const visibleRows = computed(() => {
   border-radius: 10px;
 }
 
-table {
-  width: 100%;
-  min-width: 1180px;
-  border-collapse: collapse;
-  table-layout: fixed;
-}
+table { width: 100%; min-width: 1180px; border-collapse: collapse; table-layout: fixed; }
 
-th,
-td {
+th, td {
   padding: 15px 12px;
   border-bottom: 1px solid #edf2f7;
   color: #24324a;
@@ -250,223 +853,1617 @@ td {
 }
 
 th {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  background: #f7fafc;
-  color: #64748b;
-  font-size: 13px;
-  font-weight: 800;
+  position: sticky; top: 0; z-index: 1;
+  background: #f7fafc; color: #64748b;
+  font-size: 13px; font-weight: 800;
 }
 
-tbody tr {
-  cursor: pointer;
-}
-
-tbody tr:hover,
-tbody tr.spotlight {
+tbody tr { cursor: pointer; }
+tbody tr:hover, tbody tr.spotlight {
   background: linear-gradient(90deg, rgba(16, 185, 129, .08), rgba(16, 185, 129, .03));
 }
+tbody tr:last-child td { border-bottom: 0; }
 
-tbody tr:last-child td {
-  border-bottom: 0;
-}
+.doc-id { color: #1d4ed8; font-weight: 800; }
 
-.doc-id {
-  color: #1d4ed8;
-  font-weight: 800;
-}
-
-.person {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  white-space: nowrap;
-}
+.person { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
 
 .avatar {
-  width: 24px;
-  height: 24px;
-  display: grid;
-  place-items: center;
+  width: 24px; height: 24px;
+  display: grid; place-items: center;
   border-radius: 999px;
-  background: #dbeafe;
-  color: #1d4ed8;
-  font-size: 12px;
-  font-weight: 900;
+  background: #dbeafe; color: #1d4ed8;
+  font-size: 12px; font-weight: 900;
 }
 
-.risk-tag,
-.status-tag {
+.risk-tag, .status-tag {
   min-height: 24px;
-  display: inline-flex;
-  align-items: center;
+  display: inline-flex; align-items: center;
   padding: 0 9px;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  font-size: 12px;
-  font-weight: 750;
-  white-space: nowrap;
+  border: 1px solid transparent; border-radius: 6px;
+  font-size: 12px; font-weight: 750; white-space: nowrap;
 }
 
-.risk-tag.low {
-  background: #dcfce7;
-  color: #059669;
-}
+.risk-tag.low { background: #dcfce7; color: #059669; }
+.risk-tag.medium { background: #ffedd5; color: #f97316; }
+.risk-tag.high { background: #fee2e2; color: #ef4444; }
 
-.risk-tag.medium {
-  background: #ffedd5;
-  color: #f97316;
-}
+.sla { font-size: 13px; font-weight: 850; }
+.sla.safe { color: #059669; }
+.sla.warning { color: #f97316; }
+.sla.danger { color: #ef4444; }
 
-.risk-tag.high {
-  background: #fee2e2;
-  color: #ef4444;
-}
-
-.sla {
-  font-size: 13px;
-  font-weight: 850;
-}
-
-.sla.safe {
-  color: #059669;
-}
-
-.sla.warning {
-  color: #f97316;
-}
-
-.sla.danger {
-  color: #ef4444;
-}
-
-.status-tag.pending {
-  background: #eff6ff;
-  color: #2563eb;
-}
-
-.status-tag.urgent {
-  background: #fff7ed;
-  color: #f97316;
-}
-
-.status-tag.done {
-  background: #ecfdf5;
-  color: #059669;
-}
+.status-tag.pending { background: #eff6ff; color: #2563eb; }
+.status-tag.urgent { background: #fff7ed; color: #f97316; }
+.status-tag.done { background: #ecfdf5; color: #059669; }
 
 .more-btn {
-  width: auto;
-  height: auto;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 0;
-  background: transparent;
-  color: #2563eb;
-  font-size: 13px;
-  font-weight: 800;
-}
-
-.more-btn:hover {
-  color: #059669;
+  width: auto; height: auto;
+  display: inline-flex; align-items: center; justify-content: center;
+  border: 0; background: transparent;
+  color: #2563eb; font-size: 13px; font-weight: 800;
 }
+.more-btn:hover { color: #059669; }
 
 .list-foot {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
-  align-items: center;
-  gap: 16px;
-  margin-top: 12px;
+  align-items: center; gap: 16px; margin-top: 12px;
 }
 
-.page-summary {
-  color: #64748b;
-  font-size: 14px;
-  font-weight: 650;
-}
+.page-summary { color: #64748b; font-size: 14px; font-weight: 650; }
 
 .pager {
-  display: inline-flex;
-  justify-content: center;
-  gap: 6px;
+  display: inline-flex; justify-content: center; gap: 6px;
   padding: 4px;
-  border: 1px solid #e2e8f0;
-  border-radius: 12px;
-  background: #f8fafc;
+  border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc;
 }
 
 .pager button {
-  width: 32px;
-  height: 32px;
-  border: 0;
-  border-radius: 9px;
-  background: transparent;
-  color: #334155;
-  font-size: 14px;
-  font-weight: 800;
+  width: 32px; height: 32px; border: 0; border-radius: 9px;
+  background: transparent; color: #334155;
+  font-size: 14px; font-weight: 800;
   transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
 }
-
-.pager button:hover:not(.active) {
-  background: #fff;
-  color: #059669;
-  box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
-}
-
-.pager button.active {
-  background: #059669;
-  color: #fff;
-  box-shadow: 0 8px 16px rgba(5, 150, 105, .20);
-}
-
-.pager span {
-  color: #64748b;
-  font-weight: 800;
-}
+.pager button:hover:not(.active) { background: #fff; color: #059669; box-shadow: 0 1px 4px rgba(15, 23, 42, .08); }
+.pager button.active { background: #059669; color: #fff; box-shadow: 0 8px 16px rgba(5, 150, 105, .20); }
+.pager span { color: #64748b; font-weight: 800; }
 
 .page-size {
-  justify-self: end;
-  min-width: 112px;
-  border-radius: 10px;
-  background: #fff;
+  justify-self: end; min-width: 112px;
+  border-radius: 10px; background: #fff;
   box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
 }
 
-@media (max-width: 1320px) {
-  .list-toolbar,
-  .list-foot {
-    grid-template-columns: 1fr;
+.approval-detail {
+  min-height: 0;
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) auto;
+  overflow: hidden;
+}
+
+.detail-scroll {
+  min-height: 0;
+  display: grid;
+  align-content: start;
+  gap: 12px;
+  padding-right: 4px;
+  overflow: auto;
+}
+
+.detail-hero {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr;
+  gap: 18px;
+  padding: 22px;
+}
+
+.applicant-card {
+  display: grid;
+  grid-template-columns: 78px minmax(0, 1fr);
+  align-items: center;
+  gap: 16px;
+}
+
+.portrait {
+  width: 72px;
+  height: 72px;
+  display: grid;
+  place-items: center;
+  border-radius: 999px;
+  background: linear-gradient(135deg, #dbeafe, #ecfdf5);
+  color: #0f766e;
+  font-size: 26px;
+  font-weight: 900;
+}
+
+.applicant-card h2 {
+  color: #0f172a;
+  font-size: 22px;
+  font-weight: 900;
+}
+
+.applicant-card h2 span {
+  margin-left: 8px;
+  padding: 3px 9px;
+  border-radius: 6px;
+  background: #dcfce7;
+  color: #059669;
+  font-size: 12px;
+}
+
+.applicant-card p {
+  margin-top: 6px;
+  color: #64748b;
+  font-size: 13px;
+}
+
+.applicant-card p strong {
+  margin-left: 18px;
+  color: #334155;
+}
+
+.hero-stat {
+  display: grid;
+  align-content: center;
+  gap: 8px;
+}
+
+.hero-stat span {
+  color: #64748b;
+  font-size: 13px;
+  font-weight: 750;
+}
+
+.hero-stat strong {
+  color: #0f172a;
+  font-size: 24px;
+  font-weight: 900;
+}
+
+.risk-pill,
+.state-pill {
+  width: max-content;
+  padding: 5px 10px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 850;
+}
+
+.risk-pill.high { background: #fee2e2; color: #ef4444; }
+.risk-pill.medium { background: #ffedd5; color: #f97316; }
+.risk-pill.low { background: #dcfce7; color: #059669; }
+.state-pill { background: #dbeafe; color: #2563eb; }
+
+.countdown {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: #f97316 !important;
+}
+
+.hero-summary-panel {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
+  gap: 4px 18px;
+  padding: 4px 0 0;
+  border-top: 1px solid #e5eaf0;
+  border-bottom: 1px solid #e5eaf0;
+}
+
+.hero-summary-item {
+  min-width: 0;
+  display: grid;
+  gap: 8px;
+  align-content: start;
+  padding: 16px 0 14px;
+}
+
+.hero-summary-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: #64748b;
+  font-size: 13px;
+  font-weight: 750;
+}
+
+.hero-summary-icon {
+  color: #059669;
+  font-size: 14px;
+}
+
+.hero-summary-item strong {
+  display: block;
+  color: #0f172a;
+  font-size: 16px;
+  font-weight: 850;
+  line-height: 1.5;
+}
+
+.progress-block {
+  grid-column: 1 / -1;
+  padding-top: 18px;
+  border-top: 1px solid #e5eaf0;
+}
+
+.progress-head {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin-bottom: 12px;
+}
+
+.progress-head h3 {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: #0f172a;
+  font-size: 14px;
+  font-weight: 850;
+}
+
+.progress-head h3::before {
+  content: "";
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: #10b981;
+  box-shadow: 0 0 0 4px rgba(16, 185, 129, .12);
+}
+
+.progress-line {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+}
+
+.progress-step {
+  position: relative;
+  display: grid;
+  justify-items: center;
+  gap: 5px;
+  color: #94a3b8;
+}
+
+.progress-step::before {
+  content: "";
+  position: absolute;
+  top: 13px;
+  left: 0;
+  right: 0;
+  z-index: 0;
+  height: 2px;
+  background: #dbe4ee;
+}
+
+.progress-step.active::before { background: #10b981; }
+.progress-step:first-child::before { left: 50%; }
+.progress-step:last-child::before { right: 50%; }
+
+.progress-step span {
+  position: relative;
+  z-index: 1;
+  width: 26px;
+  height: 26px;
+  display: grid;
+  place-items: center;
+  border-radius: 999px;
+  background: #e2e8f0;
+  color: #64748b;
+  font-size: 13px;
+  font-weight: 900;
+}
+
+.current-progress-ring {
+  position: absolute;
+  inset: -4px;
+  z-index: -1;
+  border: 2px solid rgba(16, 185, 129, .42);
+  border-radius: 999px;
+  pointer-events: none;
+}
+
+.progress-step.active span {
+  background: #059669;
+  color: #fff;
+}
+
+.progress-step.current span {
+  background: #10b981 !important;
+  color: #fff !important;
+  box-shadow: 0 0 0 4px rgba(16, 185, 129, .15) !important;
+  animation: breathe-dot 3s ease-in-out infinite !important;
+  transform-origin: center !important;
+}
+
+@keyframes breathe-dot {
+  0%, 100% {
+    transform: scale(1);
+    box-shadow: 0 4px 12px rgba(16, 185, 129, .3), 0 0 0 4px rgba(16, 185, 129, .15);
+  }
+  50% {
+    transform: scale(1.12);
+    box-shadow: 0 4px 20px rgba(16, 185, 129, .5), 0 0 0 10px rgba(16, 185, 129, .08);
   }
 }
 
-@media (max-width: 760px) {
-  .approval-list {
-    padding: 16px;
+.progress-step strong {
+  color: #334155;
+  font-size: 12px;
+}
+
+.progress-step.current strong { color: #059669; }
+.progress-step small { font-size: 11px; }
+
+.progress-step.current small {
+  color: #059669;
+}
+
+.detail-grid {
+  display: block;
+}
+
+.detail-left {
+  min-width: 0;
+  display: grid;
+  gap: 12px;
+}
+
+.detail-card,
+.detail-side-card {
+  padding: 16px 18px;
+}
+
+.detail-card h3,
+.detail-side-card h3 {
+  margin: 0 0 12px;
+  color: #0f172a;
+  font-size: 16px;
+  font-weight: 850;
+}
+
+.detail-card-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 14px;
+}
+
+.detail-card-head h3 {
+  margin-bottom: 4px;
+}
+
+.detail-card-head p {
+  color: #64748b;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.detail-total {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 102px;
+  min-height: 34px;
+  padding: 0 12px;
+  border-radius: 999px;
+  background: #ecfdf5;
+  color: #047857;
+  font-size: 14px;
+  font-weight: 900;
+}
+
+.detail-card textarea {
+  width: 100%;
+  min-height: 84px;
+  resize: none;
+  border: 1px solid #d7e0ea;
+  border-radius: 8px;
+  padding: 12px;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.detail-expense-table table {
+  width: 100%;
+  min-width: 0;
+  border-collapse: collapse;
+  table-layout: auto;
+}
+
+.detail-expense-table th,
+.detail-expense-table td {
+  padding: 12px 10px;
+  border-bottom: 1px solid #edf2f7;
+  color: #24324a;
+  text-align: left;
+  font-size: 12px;
+  vertical-align: top;
+  white-space: normal;
+}
+
+.detail-expense-table th {
+  position: static;
+  background: #f7fafc;
+  color: #64748b;
+  font-weight: 800;
+  font-size: 11px;
+  letter-spacing: .04em;
+  text-transform: uppercase;
+}
+
+.detail-expense-table th:nth-child(1),
+.detail-expense-table td:nth-child(1) { width: 12%; }
+.detail-expense-table th:nth-child(2),
+.detail-expense-table td:nth-child(2) { width: 12%; }
+.detail-expense-table th:nth-child(3),
+.detail-expense-table td:nth-child(3) { width: 23%; }
+.detail-expense-table th:nth-child(4),
+.detail-expense-table td:nth-child(4) { width: 10%; }
+.detail-expense-table th:nth-child(5),
+.detail-expense-table td:nth-child(5) { width: 18%; }
+.detail-expense-table th:nth-child(6),
+.detail-expense-table td:nth-child(6) { width: 25%; }
+
+.expense-time strong,
+.expense-type strong,
+.expense-desc strong,
+.expense-amount strong {
+  display: block;
+  color: #0f172a;
+  font-size: 13px;
+  font-weight: 850;
+  line-height: 1.4;
+}
+
+.expense-time span,
+.expense-type span,
+.expense-desc span,
+.expense-amount span,
+.expense-attachment .attachment-hint {
+  display: block;
+  margin-top: 3px;
+  color: #64748b;
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+.expense-amount strong {
+  font-variant-numeric: tabular-nums;
+}
+
+.over-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  width: max-content;
+  margin-top: 7px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 800;
+}
+
+.over-tag.ok {
+  background: #ecfdf5;
+  color: #059669;
+}
+
+.over-tag.bad {
+  background: #fef2f2;
+  color: #ef4444;
+}
+
+.expense-attachment-main {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.attachment-pill,
+.risk-inline-tag {
+  display: inline-flex;
+  align-items: center;
+  min-height: 24px;
+  padding: 0 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.attachment-pill.ok { background: #ecfdf5; color: #059669; }
+.attachment-pill.partial { background: #fff7ed; color: #ea580c; }
+.attachment-pill.missing { background: #fef2f2; color: #ef4444; }
+.attachment-pill.neutral { background: #eef2ff; color: #4f46e5; }
+
+.inline-action {
+  min-height: 24px;
+  padding: 0 8px;
+  border: 1px solid #dbe4ee;
+  border-radius: 999px;
+  background: #fff;
+  color: #334155;
+  font-size: 11px;
+  font-weight: 800;
+}
+
+.inline-action:hover {
+  border-color: rgba(16, 185, 129, .36);
+  color: #047857;
+}
+
+.risk-inline-tag.low { background: #ecfdf5; color: #059669; }
+.risk-inline-tag.medium { background: #fff7ed; color: #ea580c; }
+.risk-inline-tag.high { background: #fef2f2; color: #dc2626; }
+
+.expense-risk p {
+  margin-top: 6px;
+  color: #475569;
+  font-size: 12px;
+  line-height: 1.55;
+}
+
+.expense-expand-row td {
+  padding: 0 10px 12px;
+  background: #fbfdff;
+  border-bottom: 1px solid #edf2f7;
+}
+
+.expense-files {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 10px 0 0;
+}
+
+.expense-file-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  color: #334155;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.expense-file-chip i {
+  color: #059669;
+  font-size: 12px;
+}
+
+.total-row td {
+  color: #0f172a;
+  font-weight: 900;
+  background: #f8fafc;
+}
+
+.detail-attachment-list {
+  display: grid;
+  gap: 10px;
+}
+
+.side-attachments {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.detail-attachment {
+  min-width: 0;
+  min-height: 50px;
+  display: grid;
+  grid-template-columns: 28px minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+  padding: 10px;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+}
+
+.detail-attachment.missing {
+  border-color: #fb923c;
+  border-style: dashed;
+  background: #fff7ed;
+}
+
+.detail-attachment i { color: #059669; font-size: 24px; }
+.detail-attachment.missing i { color: #f97316; }
+
+.detail-attachment strong {
+  display: block;
+  overflow: hidden;
+  color: #334155;
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.detail-attachment small {
+  color: #64748b;
+  font-size: 11px;
+}
+
+.attach-note {
+  margin-top: 8px;
+  color: #64748b;
+  font-size: 12px;
+}
+
+.detail-side-card.risk-card {
+  min-height: 332px;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+}
+
+.risk-card header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 10px;
+}
+
+.risk-card header span {
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 750;
+}
+
+.risk-card header b { color: #ef4444; }
+
+.risk-list {
+  display: grid;
+  overflow: hidden;
+  border: 1px solid #eef2f7;
+  border-radius: 8px;
+}
+
+.risk-list div {
+  min-height: 38px;
+  display: grid;
+  grid-template-columns: 22px minmax(0, 1fr) 24px;
+  align-items: center;
+  gap: 8px;
+  padding: 0 10px;
+  border-bottom: 1px solid #eef2f7;
+  font-size: 13px;
+}
+
+.risk-list div:last-child { border-bottom: 0; }
+.risk-list i { color: #f97316; }
+.risk-list b.high { color: #ef4444; }
+.risk-list b.medium { color: #f97316; }
+
+.risk-note {
+  margin-top: 12px;
+  padding: 12px 14px 0;
+  border-top: 1px solid #eef2f7;
+}
+
+.risk-note strong {
+  display: block;
+  color: #0f172a;
+  font-size: 13px;
+  font-weight: 850;
+}
+
+.risk-note p {
+  margin-top: 6px;
+  color: #64748b;
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.detail-actions {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 10px;
+  padding: 10px 0 0;
+  border-top: 1px solid #e5eaf0;
+  background: transparent;
+}
+
+.detail-actions button {
+  height: 36px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 760;
+}
+
+.back-action {
+  min-width: 104px;
+  border: 1px solid #d7e0ea;
+  background: #fff;
+  color: #475569;
+}
+
+.back-action:hover {
+  border-color: #94a3b8;
+  background: #f8fafc;
+}
+
+.approval-action-group {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  width: auto;
+}
+
+.approve-action {
+  min-width: 92px;
+  border: 1px solid #059669;
+  background: #059669;
+  color: #fff;
+  box-shadow: 0 4px 10px rgba(5, 150, 105, .14);
+}
+
+.reject-action {
+  min-width: 86px;
+  border: 1px solid #fecaca;
+  background: #fff;
+  color: #ef4444;
+}
+
+.supplement-action {
+  min-width: 86px;
+  border: 1px solid #fed7aa;
+  background: #fff;
+  color: #ea580c;
+}
+
+/* ────────── Detail Modal Overlay ────────── */
+.detail-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: grid;
+  place-items: center;
+  background: rgba(15, 23, 42, .45);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+}
+
+.detail-modal {
+  position: relative;
+  width: calc(100vw - 80px);
+  max-width: 1440px;
+  height: calc(100vh - 64px);
+  max-height: 960px;
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr) auto;
+  border-radius: 4px;
+  background: #f8fafc;
+  box-shadow:
+    0 0 0 1px rgba(15, 23, 42, .08),
+    0 20px 60px rgba(15, 23, 42, .18),
+    0 4px 16px rgba(15, 23, 42, .06);
+  overflow: hidden;
+}
+
+/* ── Modal Header ── */
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 22px 28px;
+  background: linear-gradient(135deg, #fff 0%, #f9fbff 100%);
+  border-bottom: 1px solid #e8eef6;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.req-badge {
+  padding: 6px 14px;
+  border-radius: 3px;
+  background: #eff6ff;
+  border-left: 3px solid #1d4ed8;
+  color: #1d4ed8;
+  font-size: 13px;
+  font-weight: 850;
+  letter-spacing: .02em;
+}
+
+.header-title-group h2 {
+  color: #0f172a;
+  font-size: 20px;
+  font-weight: 900;
+  letter-spacing: -.01em;
+}
+
+.header-title-group p {
+  margin-top: 3px;
+  color: #64748b;
+  font-size: 13px;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.header-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  border-radius: 3px;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.header-indicator.high {
+  background: #fee2e2;
+  color: #dc2626;
+}
+
+.header-indicator.medium {
+  background: #ffedd5;
+  color: #ea580c;
+}
+
+.header-indicator.low {
+  background: #dcfce7;
+  color: #059669;
+}
+
+.header-indicator.status {
+  background: #dbeafe;
+  color: #1d4ed8;
+}
+
+.close-btn {
+  width: 36px; height: 36px;
+  display: grid; place-items: center;
+  border: 1px solid #e2e8f0; border-radius: 4px;
+  background: #fff; color: #64748b;
+  font-size: 18px;
+  transition: all 160ms ease;
+}
+
+.close-btn:hover {
+  border-color: #cbd5e1;
+  background: #f1f5f9; color: #0f172a;
+}
+
+/* ── Progress Track ── */
+.modal-progress {
+  padding: 18px 28px 14px;
+  background: #fff;
+  border-bottom: 1px solid #edf2f7;
+}
+
+.progress-track {
+  display: flex;
+  align-items: flex-start;
+  gap: 0;
+}
+
+.progress-node {
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.node-dot {
+  position: relative;
+  z-index: 2;
+  width: 30px; height: 30px;
+  display: grid; place-items: center;
+  border-radius: 999px;
+  background: #e2e8f0;
+  color: #94a3b8;
+  font-size: 13px;
+  font-weight: 900;
+  transition: all 300ms ease;
+}
+
+.progress-node.done .node-dot,
+.progress-node.active .node-dot {
+  background: #059669;
+  color: #fff;
+  box-shadow: 0 4px 12px rgba(5, 150, 105, .25);
+}
+
+.progress-node.current .node-dot {
+  background: #10b981;
+  box-shadow: 0 4px 12px rgba(5, 150, 105, .25), 0 0 0 5px rgba(5, 150, 105, .1);
+  animation: breathe-pulse 2s ease-in-out infinite;
+}
+
+@keyframes breathe-pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+    box-shadow: 0 4px 12px rgba(5, 150, 105, .25), 0 0 0 4px rgba(5, 150, 105, .15);
+  }
+  50% {
+    opacity: 0.7;
+    transform: scale(1.1);
+    box-shadow: 0 4px 12px rgba(5, 150, 105, .4), 0 0 0 10px rgba(5, 150, 105, .08);
+  }
+}
+
+.node-label {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+}
+
+.node-label strong {
+  color: #334155;
+  font-size: 12px;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.progress-node.current .node-label strong { color: #059669; }
+
+.node-label small {
+  color: #94a3b8;
+  font-size: 11px;
+}
+
+.node-line {
+  position: absolute;
+  top: 15px;
+  left: calc(50% + 18px);
+  width: calc(100% - 36px);
+  height: 2px;
+  background: #e2e8f0;
+  z-index: 1;
+  border-radius: 1px;
+  transition: background 300ms ease;
+}
+
+.node-line.filled { background: #10b981; }
+
+/* ── Modal Body ── */
+.modal-body {
+  min-height: 0;
+  padding: 20px 28px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: #cbd5e1 transparent;
+}
+
+.body-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 380px;
+  gap: 20px;
+  align-items: start;
+}
+
+.body-main { display: grid; gap: 16px; }
+.body-side { display: grid; gap: 14px; }
+
+/* ── Metrics Strip (inside summary card) ── */
+.metrics-strip {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1px;
+  background: #f1f5f9;
+}
+
+.metric-block {
+  padding: 14px 16px;
+  background: #fff;
+  transition: background 160ms ease;
+}
+
+.metric-block:hover { background: #fafffe; }
+
+.metric-block.amount {
+  background: #ecfdf5;
+}
+
+.metric-label {
+  display: block;
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 750;
+  text-transform: uppercase;
+  letter-spacing: .04em;
+}
+
+.metric-value {
+  display: block;
+  margin-top: 6px;
+  color: #0f172a;
+  font-size: 22px;
+  font-weight: 900;
+  letter-spacing: -.02em;
+}
+
+.metric-value.sla { display: flex; align-items: center; gap: 6px; font-size: 20px; }
+.metric-value.sla.safe { color: #059669; }
+.metric-value.sla.warning { color: #f59e0b; }
+.metric-value.sla.danger { color: #ef4444; }
+
+/* ── Content Card ── */
+.content-card {
+  border-radius: 4px;
+  background: #fff;
+  border: 1px solid #edf2f7;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
+  overflow: hidden;
+  transition: box-shadow 200ms ease;
+}
+
+.content-card:hover {
+  box-shadow: 0 4px 16px rgba(15, 23, 42, .06);
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 20px;
+  border-bottom: 1px solid #f1f5f9;
+  background: linear-gradient(180deg, #fafbfd, #fff);
+}
+
+.card-header.slim {
+  padding: 10px 16px;
+}
+
+.card-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.card-title i {
+  color: #059669;
+  font-size: 18px;
+}
+
+.card-title h3 {
+  color: #0f172a;
+  font-size: 15px;
+  font-weight: 850;
+}
+
+.card-badge {
+  padding: 4px 10px;
+  border-radius: 6px;
+  background: #f0fdf4;
+  color: #059669;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.card-badge.warn {
+  background: #fff7ed;
+  color: #ea580c;
+}
+
+/* ── Summary Grid ── */
+.summary-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1px;
+  background: #f1f5f9;
+}
+
+.summary-cell {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 18px;
+  background: #fff;
+  transition: background 160ms ease;
+}
+
+.summary-cell:hover { background: #fafffe; }
+
+.cell-icon {
+  width: 38px; height: 38px;
+  display: grid; place-items: center;
+  border-radius: 4px;
+  background: #ecfdf5;
+  color: #059669;
+  font-size: 18px;
+  flex-shrink: 0;
+}
+
+.cell-content span {
+  display: block;
+  color: #94a3b8;
+  font-size: 12px;
+  font-weight: 750;
+}
+
+.cell-content strong {
+  display: block;
+  margin-top: 2px;
+  color: #0f172a;
+  font-size: 14px;
+  font-weight: 850;
+}
+
+/* ── Expense Table ── */
+.expense-table-wrap {
+  overflow-x: auto;
+}
+
+.expense-table {
+  width: 100%;
+  min-width: 0;
+  border-collapse: collapse;
+  table-layout: auto;
+}
+
+.expense-table th {
+  position: static;
+  padding: 10px 16px;
+  background: #f8fafc;
+  border-bottom: 1px solid #edf2f7;
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: .03em;
+  text-align: left;
+}
+
+.expense-table th.right { text-align: right; }
+.expense-table th.center { text-align: center; }
+
+.expense-table td {
+  padding: 12px 16px;
+  border-bottom: 1px solid #f1f5f9;
+  color: #334155;
+  font-size: 13px;
+  text-align: left;
+  vertical-align: middle;
+}
+
+.expense-table td.right { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
+.expense-table td.center { text-align: center; }
+
+.expense-table td strong { color: #0f172a; font-weight: 850; }
+
+.expense-table tfoot td {
+  padding: 14px 16px;
+  border-top: 2px solid #e2e8f0;
+  border-bottom: 0;
+  background: #f8fafc;
+}
+
+.total-amount {
+  color: #059669 !important;
+  font-size: 16px;
+}
+
+.over-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  border-radius: 3px;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.over-badge.ok { background: #ecfdf5; color: #059669; }
+.over-badge.bad { background: #fef2f2; color: #ef4444; }
+
+/* ── Attachments (sidebar list) ── */
+.attachment-list-side {
+  display: grid;
+  gap: 6px;
+  padding: 12px 14px;
+}
+
+.attachment-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border: 1px solid #f1f5f9;
+  border-radius: 4px;
+  background: #fff;
+  transition: background 160ms ease;
+}
+
+.attachment-row:hover { background: #fafbfd; }
+
+.attachment-row.missing {
+  border: 1px dashed #fbbf24;
+  background: #fffbeb;
+}
+
+.file-icon-sm {
+  width: 28px; height: 28px;
+  display: grid; place-items: center;
+  border-radius: 4px;
+  font-size: 16px;
+  flex-shrink: 0;
+}
+
+.file-icon-sm.pdf { background: #fef2f2; color: #ef4444; }
+.file-icon-sm.img { background: #ecfdf5; color: #059669; }
+.file-icon-sm.miss { background: #fff7ed; color: #f59e0b; }
+
+.file-detail strong {
+  display: block;
+  color: #334155;
+  font-size: 13px;
+  font-weight: 800;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-detail span {
+  display: block;
+  color: #94a3b8;
+  font-size: 11px;
+}
+
+/* ── Opinion Textarea ── */
+.opinion-wrap {
+  padding: 12px 14px;
+}
+
+.opinion-wrap textarea {
+  width: 100%;
+  min-height: 100px;
+  resize: none;
+  border: 1px solid #d7e0ea;
+  border-radius: 4px;
+  padding: 10px 12px;
+  color: #0f172a;
+  font-size: 13px;
+  line-height: 1.55;
+  transition: border-color 160ms ease, box-shadow 160ms ease;
+}
+
+.opinion-wrap textarea::placeholder {
+  color: #94a3b8;
+}
+
+.opinion-wrap textarea:focus {
+  border-color: #10b981;
+  box-shadow: 0 0 0 3px rgba(16, 185, 129, .12);
+  outline: none;
+}
+
+/* ── Side Cards ── */
+.side-card {
+  border-radius: 4px;
+  background: #fff;
+  border: 1px solid #edf2f7;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
+  overflow: hidden;
+  transition: box-shadow 200ms ease;
+}
+
+.side-card:hover { box-shadow: 0 4px 16px rgba(15, 23, 42, .06); }
+
+.side-card .card-header {
+  padding: 12px 16px;
+}
+
+.side-card.compact {
+  border-radius: 4px;
+}
+
+/* ── Risk Card ── */
+.risk-total {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  padding: 5px 12px;
+  border-radius: 3px;
+  font-size: 11px;
+}
+
+.risk-total span { font-weight: 750; }
+
+.risk-total.high {
+  background: #fee2e2;
+  color: #dc2626;
+}
+
+.risk-total.high strong { font-size: 16px; font-weight: 900; }
+
+.risk-items {
+  padding: 4px 14px 14px;
+  display: grid;
+  gap: 8px;
+}
+
+.risk-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border-radius: 4px;
+  border: 1px solid #f1f5f9;
+  transition: all 160ms ease;
+}
+
+.risk-row:hover { border-color: #e2e8f0; background: #fafbfd; }
+
+.risk-icon {
+  width: 30px; height: 30px;
+  display: grid; place-items: center;
+  border-radius: 4px;
+  font-size: 16px;
+  flex-shrink: 0;
+}
+
+.risk-row.high .risk-icon { background: #fef2f2; color: #ef4444; }
+.risk-row.medium .risk-icon { background: #fff7ed; color: #f97316; }
+
+.risk-text {
+  flex: 1;
+  color: #334155;
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.risk-level {
+  padding: 3px 8px;
+  border-radius: 3px;
+  font-size: 12px;
+  font-weight: 800;
+  flex-shrink: 0;
+}
+
+.risk-level.high { background: #fef2f2; color: #ef4444; }
+.risk-level.medium { background: #fff7ed; color: #f97316; }
+
+/* ── Side Dual ── */
+.side-dual {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.reminder-list {
+  margin: 0;
+  padding: 10px 16px 14px;
+  display: grid;
+  gap: 8px;
+  list-style: none;
+}
+
+.reminder-list li {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  color: #334155;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.reminder-list li i {
+  margin-top: 2px;
+  color: #f59e0b;
+  font-size: 14px;
+  flex-shrink: 0;
+}
+
+.info-list {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 6px 14px;
+  margin: 0;
+  padding: 10px 16px 14px;
+  font-size: 13px;
+}
+
+.info-list dt { color: #94a3b8; font-weight: 700; }
+.info-list dd { margin: 0; color: #0f172a; font-weight: 850; }
+
+/* ── Modal Footer ── */
+.modal-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 16px 28px;
+  background: #fff;
+  border-top: 1px solid #e8eef6;
+}
+
+.footer-right {
+  display: flex;
+  gap: 10px;
+}
+
+.action-btn {
+  height: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  padding: 0 20px;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 800;
+  transition: all 180ms ease;
+  border: 1px solid transparent;
+}
+
+.action-btn.back {
+  background: #f8fafc;
+  border-color: #e2e8f0;
+  color: #475569;
+}
+
+.action-btn.back:hover {
+  background: #f1f5f9;
+  border-color: #cbd5e1;
+  color: #0f172a;
+}
+
+.action-btn.supplement {
+  background: #fff;
+  border-color: #fed7aa;
+  color: #ea580c;
+}
+
+.action-btn.supplement:hover {
+  background: #fff7ed;
+  box-shadow: 0 4px 12px rgba(234, 88, 12, .12);
+}
+
+.action-btn.reject {
+  background: #fff;
+  border-color: #fecaca;
+  color: #ef4444;
+}
+
+.action-btn.reject:hover {
+  background: #fef2f2;
+  box-shadow: 0 4px 12px rgba(239, 68, 68, .12);
+}
+
+.action-btn.approve {
+  background: #059669;
+  color: #fff;
+  box-shadow: 0 4px 16px rgba(5, 150, 105, .25);
+}
+
+.action-btn.approve:hover {
+  background: #047857;
+  box-shadow: 0 8px 24px rgba(5, 150, 105, .30);
+}
+
+.action-btn:active { transform: scale(.97); }
+
+/* ── Modal Transitions ── */
+.detail-modal-enter-active { transition: opacity 260ms ease; }
+.detail-modal-enter-active .detail-modal { transition: transform 320ms cubic-bezier(.2, .8, .2, 1), opacity 280ms ease; }
+
+.detail-modal-leave-active { transition: opacity 200ms ease; }
+.detail-modal-leave-active .detail-modal { transition: transform 220ms ease, opacity 200ms ease; }
+
+.detail-modal-enter-from { opacity: 0; }
+.detail-modal-enter-from .detail-modal { transform: translateY(16px); opacity: 0; }
+
+.detail-modal-leave-to { opacity: 0; }
+.detail-modal-leave-to .detail-modal { transform: translateY(8px); opacity: 0; }
+
+/* ── Responsive ── */
+@media (max-width: 1320px) {
+  .list-toolbar, .list-foot { grid-template-columns: 1fr; }
+
+  .detail-hero {
+    grid-template-columns: minmax(0, 1.8fr) repeat(4, minmax(0, 1fr));
   }
 
-  .status-tabs {
-    gap: 18px;
+  .hero-summary-panel {
+    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
+  }
+
+  .detail-expense-table {
     overflow-x: auto;
   }
 
-  .filter-set {
-    width: 100%;
+  .detail-expense-table table {
+    min-width: 980px;
   }
 
-  .filter-btn,
-  .page-size {
-    width: 100%;
+  .detail-modal {
+    width: calc(100vw - 40px);
+    height: calc(100vh - 40px);
   }
 
-  .list-foot {
-    justify-items: stretch;
+  .body-grid { grid-template-columns: 1fr; }
+  .metrics-strip { grid-template-columns: repeat(2, 1fr); }
+  .side-dual { grid-template-columns: 1fr; }
+}
+
+@media (max-width: 760px) {
+  .approval-list { padding: 16px; }
+  .status-tabs { gap: 18px; overflow-x: auto; }
+  .filter-set { width: 100%; }
+  .filter-btn, .page-size { width: 100%; }
+  .list-foot { justify-items: stretch; }
+  .pager, .page-size { justify-self: stretch; }
+
+  .detail-hero {
+    grid-template-columns: 1fr 1fr;
+    gap: 12px;
+    padding: 16px;
   }
 
-  .pager,
-  .page-size {
-    justify-self: stretch;
+  .applicant-card,
+  .hero-summary-panel,
+  .progress-line {
+    grid-column: 1 / -1;
   }
+
+  .hero-summary-panel {
+    grid-template-columns: 1fr;
+  }
+
+  .hero-summary-item {
+    padding: 14px 0;
+  }
+
+  .detail-card {
+    padding: 14px 16px;
+  }
+
+  .detail-card-head {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .detail-total {
+    align-self: flex-start;
+  }
+
+  .detail-expense-table table {
+    min-width: 980px;
+  }
+
+  .detail-modal {
+    width: 100vw;
+    height: 100vh;
+    max-width: 100vw;
+    max-height: 100vh;
+    border-radius: 0;
+  }
+
+  .modal-header { padding: 16px 18px; flex-wrap: wrap; }
+  .header-right { width: 100%; justify-content: flex-end; }
+  .metrics-strip { grid-template-columns: 1fr 1fr; }
+  .summary-grid { grid-template-columns: 1fr; }
+  .progress-track { overflow-x: auto; padding-bottom: 8px; }
+  .node-label strong { font-size: 11px; }
+  .modal-footer { flex-direction: column; padding: 14px 18px; }
+  .footer-right { width: 100%; }
+  .action-btn { flex: 1; }
 }
 </style>