diff --git a/UI/首页工作台.png b/UI/首页工作台.png
new file mode 100644
index 0000000..3267749
Binary files /dev/null and b/UI/首页工作台.png differ
diff --git a/src/App.vue b/src/App.vue
index 6828423..9833673 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -24,7 +24,8 @@
         'workbench-main': activeView === 'workbench',
         'requests-main': activeView === 'requests',
         'approval-main': activeView === 'approval',
-        'policies-main': activeView === 'policies'
+        'policies-main': activeView === 'policies',
+        'audit-main': activeView === 'audit'
       }"
     >
       <TopBar
@@ -43,7 +44,7 @@
       />
 
       <FilterBar
-        v-if="activeView !== 'chat' && activeView !== 'overview' && activeView !== 'workbench' && activeView !== 'requests' && activeView !== 'approval' && activeView !== 'policies'"
+        v-if="activeView !== 'chat' && activeView !== 'overview' && activeView !== 'workbench' && activeView !== 'requests' && activeView !== 'approval' && activeView !== 'policies' && activeView !== 'audit'"
         :compact="activeView === 'overview'"
         :filters="filters"
         :ranges="ranges"
@@ -57,7 +58,8 @@
           'chat-workarea': activeView === 'chat',
           'requests-workarea': activeView === 'requests',
           'approval-workarea': activeView === 'approval',
-          'policies-workarea': activeView === 'policies'
+          'policies-workarea': activeView === 'policies',
+          'audit-workarea': activeView === 'audit'
         }"
       >
         <OverviewView
@@ -96,15 +98,16 @@
           @reject-case="toast(`${activeCase?.id} 已转人工复核。`)"
         />
 
-        <TravelReimbursementCreateView
+        <TravelRequestDetailView
           v-else-if="activeView === 'requests' && detailMode"
-          @back-to-requests="detailMode = false"
+          :request="selectedTravelRequest"
+          @back-to-requests="closeRequestDetail"
         />
 
         <RequestsView
           v-else-if="activeView === 'requests'"
           :filtered-requests="filteredRequests"
-          @ask="detailMode = true"
+          @ask="openRequestDetail"
           @approve="handleApprove"
           @reject="handleReject"
           @create-request="openTravelCreate"
@@ -135,6 +138,7 @@ import OverviewView from './views/OverviewView.vue'
 import PersonalWorkbenchView from './views/PersonalWorkbenchView.vue'
 import ChatView from './views/ChatView.vue'
 import TravelReimbursementCreateView from './views/TravelReimbursementCreateView.vue'
+import TravelRequestDetailView from './views/TravelRequestDetailView.vue'
 import RequestsView from './views/RequestsView.vue'
 import ApprovalCenterView from './views/ApprovalCenterView.vue'
 import PoliciesView from './views/PoliciesView.vue'
@@ -150,6 +154,7 @@ import { documents } from './data/requests.js'
 const loggedIn = ref(false)
 const travelCreateMode = ref(false)
 const detailMode = ref(false)
+const selectedTravelRequest = ref(null)
 
 function handleLogin(credentials) {
   if (credentials.username && credentials.password) {
@@ -205,6 +210,7 @@ function handleReject(request) {
 function handleNavigate(view) {
   travelCreateMode.value = false
   detailMode.value = false
+  selectedTravelRequest.value = null
   setView(view)
 }
 
@@ -215,6 +221,8 @@ function handleOpenChat(request) {
 
 function openTravelCreate() {
   travelCreateMode.value = true
+  detailMode.value = false
+  selectedTravelRequest.value = null
   activeView.value = 'chat'
 }
 
@@ -222,6 +230,17 @@ function backToRequests() {
   travelCreateMode.value = false
   activeView.value = 'requests'
 }
+
+function openRequestDetail(request) {
+  selectedTravelRequest.value = request
+  detailMode.value = true
+  activeView.value = 'requests'
+}
+
+function closeRequestDetail() {
+  detailMode.value = false
+  selectedTravelRequest.value = null
+}
 </script>
 
 <style scoped>
@@ -245,7 +264,8 @@ function backToRequests() {
 }
 .main.requests-main,
 .main.approval-main,
-.main.policies-main {
+.main.policies-main,
+.main.audit-main {
   height: 100dvh;
   grid-template-rows: auto minmax(0, 1fr);
   overflow: hidden;
@@ -257,7 +277,8 @@ function backToRequests() {
 }
 .workarea.requests-workarea,
 .workarea.approval-workarea,
-.workarea.policies-workarea {
+.workarea.policies-workarea,
+.workarea.audit-workarea {
   min-height: 0;
   overflow: hidden;
   padding: 20px 24px;
diff --git a/src/assets/robot-assistant.png b/src/assets/robot-assistant.png
new file mode 100644
index 0000000..aa86cb0
Binary files /dev/null and b/src/assets/robot-assistant.png differ
diff --git a/src/components/business/PersonalWorkbench.vue b/src/components/business/PersonalWorkbench.vue
index 7ae3099..e36f340 100644
--- a/src/components/business/PersonalWorkbench.vue
+++ b/src/components/business/PersonalWorkbench.vue
@@ -10,7 +10,7 @@
     <article class="panel assistant-hero">
       <div class="assistant-visual" aria-hidden="true">
         <div class="assistant-core">
-          <i class="mdi mdi-robot-happy-outline"></i>
+          <img class="assistant-image" :src="robotAssistant" alt="" />
         </div>
       </div>
 
@@ -40,8 +40,11 @@
     <div class="workbench-grid">
       <article class="panel list-panel">
         <div class="section-head">
-          <h3>今日待办</h3>
-          <span class="count-chip">{{ todoItems.length }} 项</span>
+          <div class="title-with-badge">
+            <h3>今日待办</h3>
+            <span class="alert-badge">{{ todoAlertCount }}</span>
+          </div>
+          <button type="button" class="link-action">查看全部 <i class="mdi mdi-chevron-right"></i></button>
         </div>
 
         <div class="list-body">
@@ -52,7 +55,10 @@
 
             <div class="todo-copy">
               <strong>{{ item.title }}</strong>
-              <p>{{ item.suggestion }}</p>
+              <p class="todo-advice">
+                <span class="todo-advice-label">{{ item.tipLabel }}</span>
+                <span class="todo-advice-text">{{ item.suggestion }}</span>
+              </p>
             </div>
 
             <button type="button" class="row-action" @click="emit('openAssistant')">{{ item.action }}</button>
@@ -62,7 +68,10 @@
 
       <article class="panel list-panel">
         <div class="section-head">
-          <h3>报销进度</h3>
+          <div class="title-with-badge">
+            <h3>报销进度</h3>
+            <span class="alert-badge">{{ progressAlertCount }}</span>
+          </div>
           <button type="button" class="link-action">查看全部 <i class="mdi mdi-chevron-right"></i></button>
         </div>
 
@@ -73,13 +82,11 @@
             </div>
 
             <div class="todo-copy progress-copy">
-              <div class="progress-main">
-                <strong>{{ item.title }}</strong>
-                <strong class="amount">{{ item.amount }}</strong>
-              </div>
+              <strong>{{ item.title }}</strong>
               <p>提交时间：{{ item.date }}</p>
             </div>
 
+            <strong class="progress-amount">{{ item.amount }}</strong>
             <span class="progress-status" :class="item.tone">{{ item.status }}</span>
           </div>
         </div>
@@ -94,23 +101,15 @@
 
       <div class="policy-table">
         <div class="policy-head policy-row">
-          <span>制度名称</span>
-          <span>摘要</span>
-          <span>发布日期</span>
-          <span>状态</span>
-          <span></span>
+          <span class="policy-title-cell">制度名称</span>
+          <span class="policy-summary-cell">摘要</span>
+          <span class="policy-date-cell">发布日期</span>
         </div>
 
         <div v-for="item in policyItems" :key="item.name" class="policy-row">
-          <strong>{{ item.name }}</strong>
-          <span>{{ item.summary }}</span>
-          <span>{{ item.date }}</span>
-          <span>
-            <b class="policy-status" :class="item.tone">{{ item.status }}</b>
-          </span>
-          <button type="button" class="row-link" :aria-label="`查看 ${item.name}`">
-            <i class="mdi mdi-chevron-right"></i>
-          </button>
+          <strong class="policy-title-cell">{{ item.name }}</strong>
+          <span class="policy-summary-cell">{{ item.summary }}</span>
+          <span class="policy-date-cell">{{ item.date }}</span>
         </div>
       </div>
     </article>
@@ -119,6 +118,7 @@
 
 <script setup>
 import PanelHead from '../shared/PanelHead.vue'
+import robotAssistant from '../../assets/robot-assistant.png'
 
 defineProps({
   showHeader: { type: Boolean, default: true }
@@ -131,27 +131,32 @@ const assistantSkills = ['识别报销类别', '检查缺少材料', '生成报
 const todoItems = [
   {
     title: '业务招待报销建议补参与人员',
-    suggestion: 'AI 建议：补充客户单位、客户人数、我方陪同人员',
+    tipLabel: 'AI 建议',
+    suggestion: '补充客户单位、客户人数、我方陪同人员',
     action: '去补充',
     icon: 'mdi mdi-account-group-outline',
     color: '#10b981'
   },
   {
     title: '差旅报销单待提交',
-    suggestion: 'AI 建议：补齐出发交通，可直接生成报销单',
+    tipLabel: 'AI 建议',
+    suggestion: '补齐出发交通，可直接生成报销单',
     action: '继续填写',
     icon: 'mdi mdi-briefcase-outline',
     color: '#16a34a'
   },
   {
     title: '有 5 张票据未关联报销单',
-    suggestion: 'AI 建议：其中 3 张疑似交通费，可合并生成交通报销',
+    tipLabel: 'AI 建议',
+    suggestion: '其中 3 张疑似交通费，可合并生成交通报销',
     action: '去整理',
     icon: 'mdi mdi-receipt-text-outline',
     color: '#3b82f6'
   }
 ]
 
+const todoAlertCount = todoItems.length
+
 const progressItems = [
   {
     id: 'travel',
@@ -185,34 +190,28 @@ const progressItems = [
   }
 ]
 
+const progressAlertCount = progressItems.filter((item) => item.status !== '已到账').length
+
 const policyItems = [
   {
     name: '差旅报销管理办法（2026版）',
     summary: '更新住宿标准与交通等级规则',
-    date: '2026-05-04',
-    status: '已生效',
-    tone: 'success'
+    date: '2026-05-04'
   },
   {
     name: '业务招待费用报销规范',
     summary: '明确参与人员与事由填写要求',
-    date: '2026-05-02',
-    status: '更新',
-    tone: 'warning'
+    date: '2026-05-02'
   },
   {
     name: '交通费用报销细则',
     summary: '补充网约车与停车费报销说明',
-    date: '2026-04-28',
-    status: '已生效',
-    tone: 'success'
+    date: '2026-04-28'
   },
   {
     name: '票据与附件提交规范通知',
     summary: '统一附件命名与上传要求',
-    date: '2026-04-25',
-    status: '通知',
-    tone: 'info'
+    date: '2026-04-25'
   }
 ]
 </script>
@@ -306,6 +305,13 @@ const policyItems = [
   font-size: 68px;
 }
 
+.assistant-image {
+  width: 104px;
+  height: 104px;
+  object-fit: contain;
+  filter: drop-shadow(0 12px 20px rgba(15, 23, 42, 0.12));
+}
+
 .assistant-copy {
   position: relative;
   z-index: 1;
@@ -454,18 +460,27 @@ const policyItems = [
   font-weight: 700;
 }
 
-.count-chip {
+.title-with-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.alert-badge {
+  min-width: 22px;
+  height: 22px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 46px;
-  height: 28px;
-  padding: 0 10px;
+  padding: 0 7px;
   border-radius: 999px;
-  background: #ecfdf5;
-  color: #0f9f78;
+  background: #ef4444;
+  color: #fff;
   font-size: 12px;
   font-weight: 800;
+  line-height: 1;
+  box-shadow: 0 6px 14px rgba(239, 68, 68, 0.22);
 }
 
 .link-action {
@@ -527,6 +542,30 @@ const policyItems = [
   line-height: 1.5;
 }
 
+.todo-advice {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.todo-advice-label {
+  display: inline-flex;
+  align-items: center;
+  min-height: 22px;
+  padding: 0 8px;
+  border-radius: 999px;
+  background: #ecfdf5;
+  color: #059669;
+  font-size: 12px;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.todo-advice-text {
+  color: #64748b;
+}
+
 .row-action {
   height: 38px;
   padding: 0 16px;
@@ -538,27 +577,37 @@ const policyItems = [
   white-space: nowrap;
 }
 
-.progress-copy .progress-main {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
+.progress-row {
+  grid-template-columns: 48px minmax(0, 1fr) minmax(84px, auto) minmax(104px, auto);
+  gap: 14px 16px;
 }
 
-.progress-copy .amount {
-  font-size: 17px;
+.progress-copy strong {
+  margin-bottom: 2px;
+}
+
+.progress-amount {
+  color: #0f172a;
+  font-size: 20px;
+  font-weight: 800;
+  line-height: 1;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
 }
 
 .progress-status {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-height: 32px;
-  padding: 6px 12px;
+  min-width: 104px;
+  min-height: 34px;
+  padding: 6px 14px;
   border-radius: 999px;
   font-size: 13px;
   font-weight: 800;
   white-space: nowrap;
+  justify-self: end;
 }
 
 .progress-status.success,
@@ -586,7 +635,7 @@ const policyItems = [
 
 .policy-row {
   display: grid;
-  grid-template-columns: 2.1fr 2.2fr 1fr auto 40px;
+  grid-template-columns: 2.2fr 2.4fr 1fr;
   gap: 16px;
   align-items: center;
   min-height: 56px;
@@ -622,30 +671,15 @@ const policyItems = [
   font-size: 14px;
 }
 
-.policy-status {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 66px;
-  min-height: 28px;
-  padding: 0 10px;
-  border-radius: 999px;
-  font-size: 12px;
-  font-weight: 800;
+.policy-title-cell,
+.policy-summary-cell {
+  justify-self: stretch;
+  text-align: left;
 }
 
-.policy-status.warning {
-  background: #fff7e8;
-  color: #f59e0b;
-}
-
-.row-link {
-  width: 32px;
-  height: 32px;
-  display: grid;
-  place-items: center;
-  border-radius: 8px;
-  color: #94a3b8;
+.policy-date-cell {
+  justify-self: center;
+  text-align: center;
 }
 
 @media (max-width: 1320px) {
@@ -654,7 +688,7 @@ const policyItems = [
   }
 
   .policy-row {
-    grid-template-columns: 1.7fr 1.7fr 1fr auto 32px;
+    grid-template-columns: 1.8fr 1.8fr 1fr;
   }
 }
 
@@ -701,6 +735,12 @@ const policyItems = [
     grid-template-columns: 48px minmax(0, 1fr);
   }
 
+  .progress-amount {
+    grid-column: 2;
+    text-align: left;
+    font-size: 18px;
+  }
+
   .row-action,
   .progress-status {
     grid-column: 2;
@@ -727,9 +767,5 @@ const policyItems = [
   .policy-row span {
     white-space: normal;
   }
-
-  .policy-row > :last-child {
-    display: none;
-  }
 }
 </style>
diff --git a/src/components/layout/SidebarRail.vue b/src/components/layout/SidebarRail.vue
index 8f563a5..e6e734b 100644
--- a/src/components/layout/SidebarRail.vue
+++ b/src/components/layout/SidebarRail.vue
@@ -56,7 +56,7 @@ const sidebarMeta = {
   approval: { label: '审批中心', badge: '12' },
   chat: { label: 'AI助手' },
   policies: { label: '知识管理' },
-  audit: { label: '审计追踪' }
+  audit: { label: '技能中心' }
 }
 
 const decoratedNavItems = computed(() =>
diff --git a/src/composables/useNavigation.js b/src/composables/useNavigation.js
index cf6c84f..d4a180d 100644
--- a/src/composables/useNavigation.js
+++ b/src/composables/useNavigation.js
@@ -52,11 +52,11 @@ export const navItems = [
   },
   {
     id: 'audit',
-    label: '审计追踪',
-    navHint: '关键动作与日志',
-    icon: icons.audit,
-    title: '审计追踪',
-    desc: '查看关键审批动作、AI 建议和制度命中记录'
+    label: '技能中心',
+    navHint: 'Skill 设计与版本配置',
+    icon: icons.skill,
+    title: '技能中心',
+    desc: '统一管理技能的触发规则、提示词结构、输出约束与上线版本'
   }
 ]
 
diff --git a/src/data/icons.js b/src/data/icons.js
index 02837c4..c7e6aee 100644
--- a/src/data/icons.js
+++ b/src/data/icons.js
@@ -6,6 +6,7 @@ export const icons = {
   list: iconPath('<path d="M8 6h13"/><path d="M8 12h13"/><path d="M8 18h13"/><path d="M3 6h.01"/><path d="M3 12h.01"/><path d="M3 18h.01"/>'),
   approval: iconPath('<path d="M9 11l2 2 4-5"/><path d="M20 12v5a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h8"/><path d="M17 3h4v4"/>'),
   file: iconPath('<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M8 13h8"/><path d="M8 17h5"/>'),
+  skill: iconPath('<path d="M12 3 9.5 8.5 3 11l6.5 2.5L12 19l2.5-5.5L21 11l-6.5-2.5z"/><path d="M19 19l.9 2 .9-2 2-.9-2-.9-.9-2-.9 2-2 .9z"/><path d="M5 5l.6 1.4L7 7l-1.4.6L5 9l-.6-1.4L3 7l1.4-.6z"/>'),
   audit: iconPath('<path d="M12 8v4l3 3"/><path d="M3.05 11a9 9 0 1 1 .5 4"/><path d="M3 4v7h7"/>'),
   search: iconPath('<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>'),
   check: iconPath('<path d="M20 6 9 17l-5-5"/>'),
diff --git a/src/views/AuditView.vue b/src/views/AuditView.vue
index 0f7d603..80909a8 100644
--- a/src/views/AuditView.vue
+++ b/src/views/AuditView.vue
@@ -1,31 +1,1198 @@
 <template>
-  <section class="view single">
-    <article class="panel">
-      <PanelHead eyebrow="Audit trail" title="近期关键动作" note="保留审批判断、AI 建议和人工处理动作。" />
-      <div class="list">
-        <InfoRow
-          v-for="event in auditTrail"
-          :key="event.title"
-          :rank="event.time"
-          :title="event.title"
-          :note="event.note"
-          :badge="event.badge"
-          :tone="event.tone"
-        />
-      </div>
-    </article>
+  <section class="skill-center">
+    <Transition name="skill-view" mode="out-in">
+      <article v-if="selectedSkill" key="detail" class="skill-detail">
+        <div class="detail-scroll">
+          <section class="detail-hero panel">
+            <div class="hero-title">
+              <div class="skill-badge" :class="selectedSkill.badgeTone">{{ selectedSkill.scope }}</div>
+              <h2>{{ selectedSkill.name }}</h2>
+              <p>{{ selectedSkill.summary }}</p>
+            </div>
+
+            <div class="hero-stats">
+              <div class="hero-stat">
+                <span>版本</span>
+                <strong>{{ selectedSkill.version }}</strong>
+              </div>
+              <div class="hero-stat">
+                <span>状态</span>
+                <b :class="['status-pill', selectedSkill.statusTone]">{{ selectedSkill.status }}</b>
+              </div>
+              <div class="hero-stat">
+                <span>触发命中率</span>
+                <strong>{{ selectedSkill.hitRate }}</strong>
+              </div>
+              <div class="hero-stat">
+                <span>负责人</span>
+                <strong>{{ selectedSkill.owner }}</strong>
+              </div>
+            </div>
+          </section>
+
+          <div class="detail-grid">
+            <section class="detail-main">
+              <article class="detail-card panel">
+                <div class="card-head">
+                  <div>
+                    <h3>基础配置</h3>
+                    <p>定义 skill 的定位、适用场景和默认执行策略。</p>
+                  </div>
+                  <button class="mini-btn">保存草稿</button>
+                </div>
+
+                <div class="form-grid">
+                  <label class="field">
+                    <span>技能名称</span>
+                    <input :value="selectedSkill.name" />
+                  </label>
+                  <label class="field">
+                    <span>技能分类</span>
+                    <input :value="selectedSkill.category" />
+                  </label>
+                  <label class="field span-2">
+                    <span>适用描述</span>
+                    <textarea rows="3" :value="selectedSkill.summary"></textarea>
+                  </label>
+                  <label class="field">
+                    <span>触发方式</span>
+                    <input :value="selectedSkill.triggerMode" />
+                  </label>
+                  <label class="field">
+                    <span>默认模型</span>
+                    <input :value="selectedSkill.model" />
+                  </label>
+                </div>
+              </article>
+
+              <article class="detail-card panel">
+                <div class="card-head">
+                  <div>
+                    <h3>提示词结构</h3>
+                    <p>按系统约束、输入期望、输出格式三个层级组织 skill 行为。</p>
+                  </div>
+                  <span class="edit-badge">{{ selectedSkill.promptSections.length }} 段</span>
+                </div>
+
+                <div class="prompt-stack">
+                  <section v-for="section in selectedSkill.promptSections" :key="section.title" class="prompt-block">
+                    <header>
+                      <strong>{{ section.title }}</strong>
+                      <span>{{ section.intent }}</span>
+                    </header>
+                    <textarea rows="5" :value="section.content"></textarea>
+                  </section>
+                </div>
+              </article>
+
+              <article class="detail-card panel">
+                <div class="card-head">
+                  <div>
+                    <h3>输出契约与测试样例</h3>
+                    <p>确保 skill 在高频场景下输出稳定、格式清晰。</p>
+                  </div>
+                  <button class="mini-btn primary">运行测试</button>
+                </div>
+
+                <div class="contract-grid">
+                  <div class="contract-panel">
+                    <h4>输出要求</h4>
+                    <ul>
+                      <li v-for="rule in selectedSkill.outputRules" :key="rule">{{ rule }}</li>
+                    </ul>
+                  </div>
+                  <div class="contract-panel">
+                    <h4>测试样例</h4>
+                    <div v-for="test in selectedSkill.tests" :key="test.name" class="test-row">
+                      <div>
+                        <strong>{{ test.name }}</strong>
+                        <span>{{ test.input }}</span>
+                      </div>
+                      <b :class="['test-state', test.tone]">{{ test.result }}</b>
+                    </div>
+                  </div>
+                </div>
+              </article>
+            </section>
+
+            <aside class="detail-side">
+              <article class="side-card panel">
+                <div class="card-head">
+                  <div>
+                    <h3>触发规则</h3>
+                    <p>当前命中策略</p>
+                  </div>
+                </div>
+                <div class="tag-list">
+                  <span v-for="item in selectedSkill.triggers" :key="item">{{ item }}</span>
+                </div>
+              </article>
+
+              <article class="side-card panel">
+                <div class="card-head">
+                  <div>
+                    <h3>工具权限</h3>
+                    <p>可调用能力</p>
+                  </div>
+                </div>
+                <div class="tool-list">
+                  <div v-for="tool in selectedSkill.tools" :key="tool.name" class="tool-row">
+                    <div>
+                      <strong>{{ tool.name }}</strong>
+                      <span>{{ tool.scope }}</span>
+                    </div>
+                    <b :class="['tool-state', tool.tone]">{{ tool.mode }}</b>
+                  </div>
+                </div>
+              </article>
+
+              <article class="side-card panel">
+                <div class="card-head">
+                  <div>
+                    <h3>版本历史</h3>
+                    <p>最近变更</p>
+                  </div>
+                </div>
+                <div class="history-list">
+                  <div v-for="item in selectedSkill.history" :key="item.version" class="history-row">
+                    <strong>{{ item.version }}</strong>
+                    <span>{{ item.note }}</span>
+                    <small>{{ item.time }}</small>
+                  </div>
+                </div>
+              </article>
+
+              <article class="side-card panel publish-card">
+                <div>
+                  <h3>发布控制</h3>
+                  <p>当前配置已通过核心检查，可进入灰度或正式发布。</p>
+                </div>
+                <div class="publish-summary">
+                  <span>最近评审：2026-05-05 14:20</span>
+                  <strong>可发布</strong>
+                </div>
+              </article>
+            </aside>
+          </div>
+        </div>
+
+        <footer class="detail-actions">
+          <button class="back-action" type="button" @click="selectedSkill = null">
+            <i class="mdi mdi-arrow-left"></i>
+            <span>返回技能列表</span>
+          </button>
+
+          <div class="detail-action-group">
+            <button class="minor-action" type="button">
+              <i class="mdi mdi-content-save-outline"></i>
+              <span>保存草稿</span>
+            </button>
+            <button class="minor-action" type="button">
+              <i class="mdi mdi-flask-outline"></i>
+              <span>运行测试</span>
+            </button>
+            <button class="major-action" type="button">
+              <i class="mdi mdi-rocket-launch-outline"></i>
+              <span>正式上线</span>
+            </button>
+          </div>
+        </footer>
+      </article>
+
+      <article v-else key="list" class="skill-list panel">
+        <nav class="status-tabs" aria-label="技能状态">
+          <button
+            v-for="tab in tabs"
+            :key="tab"
+            type="button"
+            :class="{ active: activeTab === tab }"
+            @click="activeTab = tab"
+          >
+            {{ tab }}
+          </button>
+        </nav>
+
+        <div class="list-toolbar">
+          <div class="filter-set">
+            <button v-for="filter in filters" :key="filter" type="button" class="filter-btn">
+              <span>{{ filter }}</span>
+              <i class="mdi mdi-chevron-down"></i>
+            </button>
+          </div>
+          <button class="create-btn" type="button">
+            <i class="mdi mdi-plus"></i>
+            <span>新建 Skill</span>
+          </button>
+        </div>
+
+        <p class="hint"><i class="mdi mdi-information-outline"></i> 点击任意技能行进入设计与编辑界面</p>
+
+        <div class="table-wrap">
+          <table>
+            <thead>
+              <tr>
+                <th>技能名称</th>
+                <th>分类</th>
+                <th>负责人</th>
+                <th>适用范围</th>
+                <th>模型</th>
+                <th>版本</th>
+                <th>状态</th>
+                <th>命中率</th>
+                <th>最近更新</th>
+                <th>操作</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="skill in visibleSkills"
+                :key="skill.id"
+                :class="{ spotlight: skill.spotlight }"
+                @click="selectedSkill = skill"
+              >
+                <td>
+                  <div class="skill-name-cell">
+                    <span class="skill-avatar" :class="skill.badgeTone">{{ skill.short }}</span>
+                    <div>
+                      <strong>{{ skill.name }}</strong>
+                      <span>{{ skill.summary }}</span>
+                    </div>
+                  </div>
+                </td>
+                <td>{{ skill.category }}</td>
+                <td>{{ skill.owner }}</td>
+                <td><span class="scope-pill">{{ skill.scope }}</span></td>
+                <td>{{ skill.model }}</td>
+                <td>{{ skill.version }}</td>
+                <td><span class="status-pill" :class="skill.statusTone">{{ skill.status }}</span></td>
+                <td>{{ skill.hitRate }}</td>
+                <td>{{ skill.updatedAt }}</td>
+                <td>
+                  <button class="row-action" type="button" @click.stop="selectedSkill = skill">
+                    编辑
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </article>
+    </Transition>
   </section>
 </template>
 
 <script setup>
-import PanelHead from '../components/shared/PanelHead.vue'
-import InfoRow from '../components/shared/InfoRow.vue'
-import { auditTrail } from '../data/auditTrail.js'
+import { computed, ref } from 'vue'
+
+const tabs = ['全部技能', '已上线', '草稿中', '待评审', '异常告警']
+const filters = ['按分类筛选', '按模型筛选', '按负责人筛选']
+const activeTab = ref(tabs[0])
+const selectedSkill = ref(null)
+
+const skills = [
+  {
+    id: 'SKL-001',
+    short: 'TR',
+    name: '差旅申请助手',
+    summary: '生成出差申请、补齐行程信息并关联预订动作。',
+    category: '流程型 Skill',
+    owner: '张晓明',
+    scope: '员工自助',
+    model: 'GPT-5.4',
+    version: 'v2.3',
+    status: '已上线',
+    statusTone: 'success',
+    hitRate: '92.6%',
+    updatedAt: '2026-05-05 09:20',
+    badgeTone: 'emerald',
+    triggerMode: '显式入口 + 语义触发',
+    spotlight: true,
+    promptSections: [
+      {
+        title: '系统定位',
+        intent: '约束 Skill 目标与边界',
+        content: '负责帮助员工完成差旅申请草稿生成、行程补齐和预订前核对。禁止直接跳过必要审批节点。'
+      },
+      {
+        title: '输入预期',
+        intent: '定义需要抽取的字段',
+        content: '抽取出发地、目的地、出差日期、事由、同行人、预算中心与是否需要预订机票/酒店。缺失时逐步追问。'
+      },
+      {
+        title: '输出格式',
+        intent: '约束最终返回结构',
+        content: '输出申请摘要、缺失项清单、下一步操作建议。若信息齐全，生成结构化草稿并提示用户确认。'
+      }
+    ],
+    outputRules: [
+      '优先返回结构化摘要，再给行动建议。',
+      '缺失信息必须列成 checklist，不可混写在段落里。',
+      '遇到预算冲突时必须提示人工审批节点。'
+    ],
+    tests: [
+      { name: '基础申请生成', input: '北京到上海，后天出差两天', result: '通过', tone: 'success' },
+      { name: '缺失预算中心追问', input: '我要去深圳见客户', result: '通过', tone: 'success' },
+      { name: '异常日期冲突', input: '返回日期早于出发日期', result: '待修复', tone: 'warning' }
+    ],
+    triggers: ['差旅申请', '出差申请', '预订机票', '补齐行程'],
+    tools: [
+      { name: '预订系统 API', scope: '机票 / 酒店查询', mode: '只读', tone: 'safe' },
+      { name: '报销草稿生成器', scope: '创建申请草稿', mode: '写入', tone: 'active' },
+      { name: '预算中心校验', scope: '预算占用校验', mode: '校验', tone: 'safe' }
+    ],
+    history: [
+      { version: 'v2.3', note: '补充预算冲突追问逻辑', time: '05-05 09:20' },
+      { version: 'v2.2', note: '优化酒店预订字段抽取', time: '05-01 17:45' },
+      { version: 'v2.1', note: '新增同行人识别', time: '04-28 11:10' }
+    ]
+  },
+  {
+    id: 'SKL-002',
+    short: 'AU',
+    name: '审批意见生成器',
+    summary: '基于单据、风险点和制度命中结果生成审批意见。',
+    category: '审核型 Skill',
+    owner: '李文静',
+    scope: '财务审批',
+    model: 'GPT-5.4',
+    version: 'v1.8',
+    status: '待评审',
+    statusTone: 'warning',
+    hitRate: '88.4%',
+    updatedAt: '2026-05-04 19:10',
+    badgeTone: 'violet',
+    triggerMode: '审批中心按钮触发',
+    promptSections: [
+      {
+        title: '系统定位',
+        intent: '聚焦审批建议生成',
+        content: '读取单据、制度命中和风险标签后，生成可直接复用的审批意见，不代替最终审批决定。'
+      },
+      {
+        title: '输入预期',
+        intent: '依赖字段',
+        content: '依赖报销类型、金额、风险项、附件齐备情况、历史审批结论。'
+      },
+      {
+        title: '输出格式',
+        intent: '生成标准话术',
+        content: '输出通过 / 驳回 / 补件三种意见模板，并附上判断依据。'
+      }
+    ],
+    outputRules: [
+      '意见必须引用风险点或制度条款作为依据。',
+      '驳回类结论需明确补充动作。',
+      '避免输出过长段落，优先三段式表达。'
+    ],
+    tests: [
+      { name: '高风险驳回意见', input: '重复发票 + 缺附件', result: '通过', tone: 'success' },
+      { name: '低风险通过意见', input: '规则全通过', result: '通过', tone: 'success' },
+      { name: '混合场景表达', input: '超标但说明充分', result: '评审中', tone: 'warning' }
+    ],
+    triggers: ['生成审批意见', '通过意见', '驳回意见', '补件说明'],
+    tools: [
+      { name: '审批单据上下文', scope: '当前单据读取', mode: '只读', tone: 'safe' },
+      { name: '制度命中服务', scope: '条款引用', mode: '校验', tone: 'safe' },
+      { name: '审批结果写回', scope: '保存意见', mode: '写入', tone: 'active' }
+    ],
+    history: [
+      { version: 'v1.8', note: '调整高风险话术严谨度', time: '05-04 19:10' },
+      { version: 'v1.7', note: '补充制度条款引用模板', time: '05-02 10:30' }
+    ]
+  },
+  {
+    id: 'SKL-003',
+    short: 'KB',
+    name: '知识检索编排器',
+    summary: '根据问题意图匹配制度、FAQ 与最近更新文档。',
+    category: '知识型 Skill',
+    owner: '王磊',
+    scope: '知识管理',
+    model: 'GPT-5.2',
+    version: 'v3.1',
+    status: '已上线',
+    statusTone: 'success',
+    hitRate: '94.1%',
+    updatedAt: '2026-05-03 15:40',
+    badgeTone: 'blue',
+    triggerMode: '问答语义召回',
+    promptSections: [
+      {
+        title: '系统定位',
+        intent: '文档命中与答案编排',
+        content: '识别问题主题后，优先召回制度文档、FAQ 与近期更新资料，再组织成引用式回答。'
+      },
+      {
+        title: '输入预期',
+        intent: '需要识别的意图',
+        content: '识别报销、发票、差旅、借款、预算等主题，以及用户是否在追问例外情况。'
+      },
+      {
+        title: '输出格式',
+        intent: '答案结构',
+        content: '先结论，再条款引用，再相关文档链接。若知识不足，明确提示未命中。'
+      }
+    ],
+    outputRules: [
+      '必须区分“制度原文依据”和“解释性建议”。',
+      '引用命中不足时，不可编造制度条款。',
+      '输出需附上最近更新时间。'
+    ],
+    tests: [
+      { name: '标准知识问答', input: '住宿超标怎么办', result: '通过', tone: 'success' },
+      { name: '跨文档综合问答', input: '差旅借款后如何冲销', result: '通过', tone: 'success' }
+    ],
+    triggers: ['制度查询', '差旅标准', '发票规范', '借款冲销'],
+    tools: [
+      { name: '知识库索引', scope: '文档召回', mode: '只读', tone: 'safe' },
+      { name: 'FAQ 排序器', scope: '答案重排', mode: '校验', tone: 'safe' }
+    ],
+    history: [
+      { version: 'v3.1', note: '加入最近更新知识优先级', time: '05-03 15:40' },
+      { version: 'v3.0', note: '知识命中格式重构', time: '04-29 18:20' }
+    ]
+  },
+  {
+    id: 'SKL-004',
+    short: 'RK',
+    name: '风险解释助手',
+    summary: '向员工解释拦截原因，并给出补件或修正建议。',
+    category: '解释型 Skill',
+    owner: '陈杰',
+    scope: '员工自助',
+    model: 'GPT-5.4-Mini',
+    version: 'v1.4',
+    status: '草稿中',
+    statusTone: 'draft',
+    hitRate: '79.8%',
+    updatedAt: '2026-05-02 11:05',
+    badgeTone: 'amber',
+    triggerMode: '风险拦截后提示入口',
+    promptSections: [
+      {
+        title: '系统定位',
+        intent: '解释风控结论',
+        content: '将复杂风控规则解释成员工可执行的修正动作，不暴露内部评分细节。'
+      },
+      {
+        title: '输入预期',
+        intent: '关注异常标签',
+        content: '读取异常标签、相关票据、制度限制和当前流程节点。'
+      },
+      {
+        title: '输出格式',
+        intent: '行动导向',
+        content: '按“原因 - 影响 - 处理建议”输出，不使用过于生硬的审计口吻。'
+      }
+    ],
+    outputRules: [
+      '建议必须可以执行，避免空泛表述。',
+      '不展示内部风控分值。',
+      '涉及附件缺失时输出具体材料名称。'
+    ],
+    tests: [
+      { name: '住宿超标解释', input: '酒店单晚超标 18%', result: '通过', tone: 'success' },
+      { name: '重复发票风险解释', input: '发票号重复', result: '待修复', tone: 'warning' }
+    ],
+    triggers: ['为什么被拦截', '风险原因', '补件说明'],
+    tools: [
+      { name: '风险标签读取', scope: '异常原因', mode: '只读', tone: 'safe' },
+      { name: '制度比对服务', scope: '规则解释', mode: '校验', tone: 'safe' }
+    ],
+    history: [
+      { version: 'v1.4', note: '新增补件导向模板', time: '05-02 11:05' },
+      { version: 'v1.3', note: '优化语气控制', time: '04-30 16:48' }
+    ]
+  }
+]
+
+const visibleSkills = computed(() => {
+  if (activeTab.value === '全部技能') return skills
+  const map = {
+    已上线: '已上线',
+    草稿中: '草稿中',
+    待评审: '待评审',
+    异常告警: '异常告警'
+  }
+  return skills.filter((item) => item.status === map[activeTab.value])
+})
 </script>
 
 <style scoped>
-.view { display: grid; gap: 22px; animation: fadeUp 220ms var(--ease) both; }
-.view.single { max-width: 1120px; }
-.panel { padding: 20px; }
-.list { display: grid; gap: 12px; }
+.skill-center {
+  height: 100%;
+  min-height: 0;
+}
+
+.skill-view-enter-active,
+.skill-view-leave-active {
+  transition: opacity 220ms ease, transform 300ms var(--ease);
+}
+
+.skill-view-enter-from,
+.skill-view-leave-to {
+  opacity: 0;
+  transform: translateY(14px);
+}
+
+.skill-list,
+.skill-detail {
+  height: 100%;
+  min-height: 0;
+}
+
+.skill-detail {
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) auto;
+  gap: 12px;
+}
+
+.skill-list {
+  display: grid;
+  grid-template-rows: auto auto auto minmax(0, 1fr);
+  padding: 18px 20px;
+}
+
+.status-tabs {
+  display: flex;
+  gap: 18px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #edf2f7;
+}
+
+.status-tabs button {
+  position: relative;
+  border: 0;
+  background: transparent;
+  color: #64748b;
+  font-size: 14px;
+  font-weight: 760;
+}
+
+.status-tabs button.active {
+  color: #0f172a;
+}
+
+.status-tabs button.active::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -13px;
+  height: 3px;
+  border-radius: 999px;
+  background: #10b981;
+}
+
+.list-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 14px 0 10px;
+}
+
+.filter-set {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.filter-btn,
+.create-btn,
+.row-action {
+  min-height: 36px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 760;
+}
+
+.filter-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 12px;
+  border: 1px solid #d7e0ea;
+  background: #fff;
+  color: #334155;
+}
+
+.create-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 14px;
+  border: 0;
+  background: #059669;
+  color: #fff;
+  box-shadow: 0 8px 18px rgba(5, 150, 105, 0.18);
+}
+
+.hint {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0 0 12px;
+  color: #64748b;
+  font-size: 12px;
+}
+
+.hint .mdi {
+  color: #94a3b8;
+}
+
+.table-wrap {
+  min-height: 0;
+  overflow: auto;
+  border: 1px solid #edf2f7;
+  border-radius: 12px;
+}
+
+table {
+  width: 100%;
+  min-width: 1120px;
+  border-collapse: collapse;
+}
+
+th,
+td {
+  padding: 14px 12px;
+  border-bottom: 1px solid #edf2f7;
+  text-align: left;
+  vertical-align: middle;
+  color: #334155;
+  font-size: 12px;
+}
+
+th {
+  background: #f8fafc;
+  color: #64748b;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+tbody tr {
+  cursor: pointer;
+  transition: background 180ms ease;
+}
+
+tbody tr:hover {
+  background: #f8fbff;
+}
+
+tbody tr.spotlight {
+  background: linear-gradient(90deg, rgba(16, 185, 129, 0.05), rgba(59, 130, 246, 0.03));
+}
+
+.skill-name-cell {
+  display: grid;
+  grid-template-columns: 38px minmax(0, 1fr);
+  gap: 10px;
+  align-items: center;
+}
+
+.skill-avatar {
+  width: 38px;
+  height: 38px;
+  display: grid;
+  place-items: center;
+  border-radius: 11px;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 900;
+}
+
+.skill-avatar.emerald { background: linear-gradient(135deg, #10b981, #059669); }
+.skill-avatar.violet { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
+.skill-avatar.blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }
+.skill-avatar.amber { background: linear-gradient(135deg, #f59e0b, #ea580c); }
+
+.skill-name-cell strong {
+  display: block;
+  color: #0f172a;
+  font-size: 13px;
+  font-weight: 850;
+}
+
+.skill-name-cell span:last-child {
+  display: block;
+  margin-top: 4px;
+  color: #64748b;
+  font-size: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.scope-pill,
+.status-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 26px;
+  padding: 0 9px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.scope-pill {
+  background: #f1f5f9;
+  color: #475569;
+}
+
+.status-pill.success {
+  background: #dcfce7;
+  color: #059669;
+}
+
+.status-pill.warning {
+  background: #fff7ed;
+  color: #ea580c;
+}
+
+.status-pill.draft {
+  background: #eef2ff;
+  color: #6366f1;
+}
+
+.row-action {
+  padding: 0 12px;
+  border: 1px solid rgba(16, 185, 129, 0.32);
+  background: #fff;
+  color: #059669;
+}
+
+.detail-scroll {
+  height: 100%;
+  overflow: auto;
+  display: grid;
+  gap: 16px;
+}
+
+.detail-hero {
+  display: grid;
+  gap: 18px;
+  padding: 18px 20px;
+}
+
+.hero-title {
+  min-width: 0;
+}
+
+.skill-badge {
+  display: inline-flex;
+  align-items: center;
+  min-height: 24px;
+  padding: 0 8px;
+  border-radius: 999px;
+  color: #fff;
+  font-size: 11px;
+  font-weight: 800;
+}
+
+.skill-badge.emerald { background: linear-gradient(135deg, #10b981, #059669); }
+.skill-badge.violet { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
+.skill-badge.blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }
+.skill-badge.amber { background: linear-gradient(135deg, #f59e0b, #ea580c); }
+
+.hero-title h2 {
+  margin-top: 10px;
+  color: #0f172a;
+  font-size: 24px;
+  font-weight: 850;
+}
+
+.hero-title p {
+  margin-top: 8px;
+  max-width: 820px;
+  color: #64748b;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.hero-stats {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.hero-stat {
+  padding: 14px 16px;
+  border-radius: 12px;
+  background: linear-gradient(180deg, #ffffff, #f8fafc);
+  border: 1px solid #edf2f7;
+}
+
+.hero-stat span {
+  display: block;
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.hero-stat strong {
+  display: block;
+  margin-top: 8px;
+  color: #0f172a;
+  font-size: 20px;
+  font-weight: 850;
+}
+
+.detail-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.78fr);
+  gap: 16px;
+}
+
+.detail-main,
+.detail-side {
+  display: grid;
+  gap: 16px;
+  align-content: start;
+}
+
+.detail-card,
+.side-card {
+  padding: 18px;
+}
+
+.card-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.card-head h3 {
+  color: #0f172a;
+  font-size: 16px;
+  font-weight: 850;
+}
+
+.card-head p {
+  margin-top: 6px;
+  color: #64748b;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.edit-badge {
+  display: inline-flex;
+  align-items: center;
+  min-height: 28px;
+  padding: 0 10px;
+  border-radius: 999px;
+  background: #ecfeff;
+  color: #0891b2;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.field {
+  display: grid;
+  gap: 7px;
+}
+
+.field.span-2 {
+  grid-column: span 2;
+}
+
+.field span {
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.field input,
+.field textarea,
+.prompt-block textarea {
+  width: 100%;
+  border: 1px solid #d7e0ea;
+  border-radius: 10px;
+  background: #fff;
+  color: #0f172a;
+  font-size: 13px;
+  line-height: 1.55;
+  padding: 10px 12px;
+  resize: vertical;
+}
+
+.prompt-stack {
+  display: grid;
+  gap: 14px;
+}
+
+.prompt-block {
+  padding: 14px;
+  border: 1px solid #edf2f7;
+  border-radius: 12px;
+  background: #fbfdff;
+}
+
+.prompt-block header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.prompt-block strong {
+  color: #0f172a;
+  font-size: 14px;
+  font-weight: 850;
+}
+
+.prompt-block header span {
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.contract-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.contract-panel {
+  padding: 14px;
+  border: 1px solid #edf2f7;
+  border-radius: 12px;
+  background: #fbfdff;
+}
+
+.contract-panel h4 {
+  margin: 0 0 10px;
+  color: #0f172a;
+  font-size: 14px;
+  font-weight: 850;
+}
+
+.contract-panel ul {
+  display: grid;
+  gap: 8px;
+  margin: 0;
+  padding-left: 18px;
+  color: #475569;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.test-row,
+.tool-row,
+.history-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 12px 0;
+  border-top: 1px solid #edf2f7;
+}
+
+.test-row:first-child,
+.tool-row:first-child,
+.history-row:first-child {
+  border-top: 0;
+  padding-top: 0;
+}
+
+.test-row strong,
+.tool-row strong,
+.history-row strong {
+  display: block;
+  color: #0f172a;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.test-row span,
+.tool-row span,
+.history-row span,
+.history-row small {
+  display: block;
+  margin-top: 4px;
+  color: #64748b;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.test-state,
+.tool-state {
+  display: inline-flex;
+  align-items: center;
+  min-height: 24px;
+  padding: 0 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.test-state.success,
+.tool-state.safe {
+  background: #dcfce7;
+  color: #059669;
+}
+
+.test-state.warning,
+.tool-state.active {
+  background: #fff7ed;
+  color: #ea580c;
+}
+
+.tag-list {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.tag-list span {
+  min-height: 28px;
+  display: inline-flex;
+  align-items: center;
+  padding: 0 10px;
+  border-radius: 999px;
+  background: #eff6ff;
+  color: #2563eb;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.publish-card {
+  display: grid;
+  gap: 14px;
+}
+
+.publish-card p,
+.publish-summary span {
+  margin-top: 6px;
+  color: #64748b;
+  font-size: 13px;
+  line-height: 1.55;
+}
+
+.publish-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 42px;
+  padding: 0 12px;
+  border-radius: 10px;
+  background: #f8fafc;
+}
+
+.publish-summary strong {
+  color: #059669;
+  font-size: 14px;
+  font-weight: 850;
+}
+
+.detail-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 0 0;
+  border-top: 1px solid #e5eaf0;
+}
+
+.detail-action-group {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.back-action,
+.minor-action,
+.major-action {
+  height: 38px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 0 14px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 760;
+}
+
+.back-action {
+  border: 1px solid #d7e0ea;
+  background: #fff;
+  color: #475569;
+}
+
+.minor-action {
+  border: 1px solid #d7e0ea;
+  background: #fff;
+  color: #334155;
+}
+
+.major-action {
+  border: 1px solid #059669;
+  background: #059669;
+  color: #fff;
+  box-shadow: 0 4px 12px rgba(5, 150, 105, .16);
+}
+
+.mini-btn.primary {
+  border-color: transparent;
+  background: #059669;
+  color: #fff;
+}
+
+@media (max-width: 1320px) {
+  .hero-stats,
+  .form-grid,
+  .contract-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .detail-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 860px) {
+  .skill-list,
+  .detail-card,
+  .side-card,
+  .detail-hero {
+    padding: 16px;
+  }
+
+  .list-toolbar,
+  .card-head,
+  .detail-actions,
+  .detail-action-group {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .status-tabs,
+  .filter-set {
+    overflow-x: auto;
+  }
+
+  .hero-stats,
+  .form-grid,
+  .contract-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .field.span-2 {
+    grid-column: span 1;
+  }
+}
 </style>
diff --git a/src/views/PoliciesView.vue b/src/views/PoliciesView.vue
index 64f5de2..b34b136 100644
--- a/src/views/PoliciesView.vue
+++ b/src/views/PoliciesView.vue
@@ -1,33 +1,45 @@
 <template>
   <section class="knowledge-page">
-    <div class="knowledge-grid">
+    <div class="knowledge-grid" :class="{ 'has-preview': selectedDocument }">
       <section class="knowledge-main">
         <article class="library-panel panel">
           <header class="panel-title">
-            <h2>文档库 / 文件夹</h2>
+            <div>
+              <h2>文档库 / 文件夹</h2>
+              <p>默认展示文件列表，点击具体文件后可在右侧展开预览。</p>
+            </div>
+            <span class="preview-hint" :class="{ active: selectedDocument }">
+              {{ selectedDocument ? '预览已展开' : '点击文件可预览' }}
+            </span>
           </header>
 
           <div class="library-body">
             <aside class="folder-rail">
               <label class="folder-search">
                 <i class="mdi mdi-magnify"></i>
-                <input type="search" placeholder="搜索文件夹" />
+                <input v-model="folderSearch" type="search" placeholder="搜索文件夹" />
                 <button type="button" aria-label="新增文件夹"><i class="mdi mdi-plus"></i></button>
               </label>
 
-            <nav class="folder-tree" aria-label="知识库文件夹">
-              <button v-for="folder in folders" :key="folder.name" type="button" :class="{ active: folder.active }">
-                <i :class="folder.icon"></i>
-                <span>{{ folder.name }}</span>
-                <b>{{ folder.count }}</b>
-              </button>
-            </nav>
+              <nav class="folder-tree" aria-label="知识库文件夹">
+                <button
+                  v-for="folder in filteredFolders"
+                  :key="folder.name"
+                  type="button"
+                  :class="{ active: activeFolder === folder.name }"
+                  @click="activeFolder = folder.name"
+                >
+                  <i :class="folder.icon"></i>
+                  <span>{{ folder.name }}</span>
+                  <b>{{ folder.count }}</b>
+                </button>
+              </nav>
 
-            <button class="new-folder-btn" type="button">
-              <i class="mdi mdi-plus"></i>
-              <span>新建文件夹</span>
-            </button>
-          </aside>
+              <button class="new-folder-btn" type="button">
+                <i class="mdi mdi-plus"></i>
+                <span>新建文件夹</span>
+              </button>
+            </aside>
 
             <section class="document-area">
               <div class="upload-zone">
@@ -50,7 +62,13 @@
                     </tr>
                   </thead>
                   <tbody>
-                    <tr v-for="doc in documents" :key="doc.name">
+                    <tr
+                      v-for="doc in filteredDocuments"
+                      :key="doc.name"
+                      class="doc-row"
+                      :class="{ selected: selectedDocument?.name === doc.name }"
+                      @click="selectedDocument = doc"
+                    >
                       <td>
                         <span class="file-name">
                           <i :class="doc.icon"></i>
@@ -64,14 +82,18 @@
                       <td>{{ doc.version }}</td>
                       <td><span class="state-tag" :class="doc.stateTone">{{ doc.state }}</span></td>
                       <td>{{ doc.owner }}</td>
-                      <td><button class="more-btn" type="button" aria-label="更多操作"><i class="mdi mdi-dots-horizontal"></i></button></td>
+                      <td>
+                        <button class="more-btn" type="button" aria-label="更多操作" @click.stop>
+                          <i class="mdi mdi-dots-horizontal"></i>
+                        </button>
+                      </td>
                     </tr>
                   </tbody>
                 </table>
               </div>
 
               <footer class="list-foot">
-                <span>共 18 条</span>
+                <span>共 {{ filteredDocuments.length }} 条</span>
                 <button type="button">10条/页 <i class="mdi mdi-chevron-down"></i></button>
                 <div class="pager" aria-label="分页">
                   <button type="button" aria-label="上一页"><i class="mdi mdi-chevron-left"></i></button>
@@ -86,183 +108,318 @@
         </article>
       </section>
 
-      <aside class="analytics-column">
-        <article class="ops-card panel">
-          <header class="card-head">
-            <h2>知识运营概览</h2>
-          </header>
-          <div class="ops-grid">
-            <div v-for="item in opsMetrics" :key="item.label" class="ops-item" :style="{ '--accent': item.accent }">
-              <span class="ops-icon"><i :class="item.icon"></i></span>
-              <div class="ops-text">
-                <strong>{{ item.value }}</strong>
-                <p>{{ item.label }}</p>
-                <small>{{ item.meta }}</small>
+      <Transition name="preview-panel">
+        <aside v-if="selectedDocument" class="preview-column">
+          <article class="preview-panel panel">
+            <header class="preview-head">
+              <div>
+                <span class="preview-kicker">文件预览</span>
+                <h2>{{ selectedDocument.name }}</h2>
+                <p>{{ selectedDocument.summary }}</p>
+              </div>
+
+              <div class="preview-actions">
+                <button type="button" class="mini-action">
+                  <i class="mdi mdi-download"></i>
+                  <span>下载</span>
+                </button>
+                <button type="button" class="icon-action" aria-label="关闭预览" @click="selectedDocument = null">
+                  <i class="mdi mdi-close"></i>
+                </button>
+              </div>
+            </header>
+
+            <div class="preview-meta">
+              <span><i class="mdi mdi-tag-outline"></i>{{ selectedDocument.tag }}</span>
+              <span><i class="mdi mdi-history"></i>{{ selectedDocument.time }}</span>
+              <span><i class="mdi mdi-account-circle-outline"></i>{{ selectedDocument.owner }}</span>
+              <span><i class="mdi mdi-source-branch"></i>{{ selectedDocument.version }}</span>
+            </div>
+
+            <div class="preview-viewer">
+              <div class="viewer-toolbar">
+                <div class="viewer-filetype" :class="selectedDocument.fileType">
+                  <i :class="selectedDocument.icon"></i>
+                  <span>{{ selectedDocument.fileTypeLabel }}</span>
+                </div>
+                <div class="viewer-toolbar-actions">
+                  <button type="button"><i class="mdi mdi-magnify-minus-outline"></i></button>
+                  <button type="button"><i class="mdi mdi-magnify-plus-outline"></i></button>
+                  <button type="button"><i class="mdi mdi-fit-to-page-outline"></i></button>
+                </div>
+              </div>
+
+              <div class="page-stage">
+                <article
+                  v-for="(page, index) in selectedDocument.previewPages"
+                  :key="`${selectedDocument.name}-${index}`"
+                  class="page-sheet"
+                  :style="{ '--page-delay': `${index * 70}ms` }"
+                >
+                  <header class="page-title">
+                    <div>
+                      <strong>{{ page.title }}</strong>
+                      <span>{{ page.subtitle }}</span>
+                    </div>
+                    <b>第 {{ index + 1 }} 页</b>
+                  </header>
+
+                  <section class="page-summary">
+                    <div class="summary-grid">
+                      <div v-for="item in page.stats" :key="item.label" class="summary-item">
+                        <span>{{ item.label }}</span>
+                        <strong>{{ item.value }}</strong>
+                      </div>
+                    </div>
+                  </section>
+
+                  <section class="page-content">
+                    <div v-for="block in page.blocks" :key="block.heading" class="content-block">
+                      <h3>{{ block.heading }}</h3>
+                      <ul>
+                        <li v-for="line in block.lines" :key="line">{{ line }}</li>
+                      </ul>
+                    </div>
+                  </section>
+                </article>
               </div>
             </div>
-          </div>
-        </article>
-
-        <article class="top-card panel">
-          <header class="card-head">
-            <h2>热门问题 TOP5</h2>
-            <button type="button">更多 <i class="mdi mdi-chevron-right"></i></button>
-          </header>
-          <ol class="hot-list">
-            <li v-for="item in hotQuestions" :key="item.title">
-              <span :class="item.tone">{{ item.rank }}</span>
-              <strong>{{ item.title }}</strong>
-              <b>{{ item.count }}</b>
-            </li>
-          </ol>
-        </article>
-
-        <article class="trend-card panel">
-          <header class="card-head">
-            <h2>近7天提问趋势</h2>
-            <button type="button">更多 <i class="mdi mdi-chevron-right"></i></button>
-          </header>
-          <svg class="trend-chart" viewBox="0 0 420 190" role="img" aria-label="近7天提问趋势">
-            <line v-for="tick in chartTicks" :key="tick" x1="38" :y1="tick.y" x2="398" :y2="tick.y" />
-            <text v-for="tick in chartTicks" :key="tick.label" x="8" :y="tick.y + 4">{{ tick.label }}</text>
-            <polyline :points="trendPoints" />
-            <circle v-for="point in trendData" :key="point.label" :cx="point.x" :cy="point.y" r="4" />
-            <text v-for="point in trendData" :key="point.label + '-label'" :x="point.x - 14" y="180">{{ point.label }}</text>
-          </svg>
-        </article>
-
-        <article class="feedback-card panel">
-          <header class="card-head">
-            <h2>用户反馈</h2>
-            <button type="button">更多 <i class="mdi mdi-chevron-right"></i></button>
-          </header>
-          <div class="feedback-split">
-            <div class="feedback-half">
-              <h3><i class="mdi mdi-thumb-up"></i> 点赞最多</h3>
-              <ul class="feedback-list positive">
-                <li v-for="(item, idx) in likedAnswers" :key="item.title">
-                  <span class="rank-badge" :class="idx === 0 ? 'hot' : idx < 3 ? 'warm' : 'normal'">{{ idx + 1 }}</span>
-                  <span>{{ item.title }}</span>
-                  <b><i class="mdi mdi-thumb-up"></i>{{ item.count }}</b>
-                </li>
-              </ul>
-            </div>
-            <div class="feedback-half">
-              <h3><i class="mdi mdi-thumb-down"></i> 待优化</h3>
-              <ul class="feedback-list negative">
-                <li v-for="(item, idx) in dislikedAnswers" :key="item.title">
-                  <span class="rank-badge" :class="idx === 0 ? 'hot' : idx < 3 ? 'warm' : 'normal'">{{ idx + 1 }}</span>
-                  <span>{{ item.title }}</span>
-                  <b><i class="mdi mdi-thumb-down"></i>{{ item.count }}</b>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </article>
-
-        <article class="recent-card panel">
-          <header class="card-head">
-            <h2>最近更新知识</h2>
-            <button type="button">更多 <i class="mdi mdi-chevron-right"></i></button>
-          </header>
-          <ul class="recent-list">
-            <li v-for="item in recentKnowledge" :key="item.name">
-              <i :class="item.icon"></i>
-              <strong>{{ item.name }}</strong>
-              <time>{{ item.time }}</time>
-            </li>
-          </ul>
-        </article>
-      </aside>
+          </article>
+        </aside>
+      </Transition>
     </div>
   </section>
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
+
+const folderSearch = ref('')
+const activeFolder = ref('差旅规范')
+const selectedDocument = ref(null)
 
 const folders = [
-  { name: '财务知识库', count: 36, icon: 'mdi mdi-folder', active: false },
-  { name: '制度政策', count: 8, icon: 'mdi mdi-folder', active: false },
-  { name: '报销制度', count: 12, icon: 'mdi mdi-folder-open', active: false },
-  { name: '差旅规范', count: 18, icon: 'mdi mdi-folder', active: true },
-  { name: '发票管理', count: 14, icon: 'mdi mdi-folder', active: false },
-  { name: '税务合规', count: 16, icon: 'mdi mdi-folder', active: false },
-  { name: '预算管理', count: 9, icon: 'mdi mdi-folder', active: false },
-  { name: '财务共享', count: 7, icon: 'mdi mdi-folder', active: false },
-  { name: '培训资料', count: 6, icon: 'mdi mdi-folder', active: false },
-  { name: '常见问答', count: 11, icon: 'mdi mdi-folder', active: false }
+  { name: '财务知识库', count: 36, icon: 'mdi mdi-folder' },
+  { name: '制度政策', count: 8, icon: 'mdi mdi-folder' },
+  { name: '报销制度', count: 12, icon: 'mdi mdi-folder-open' },
+  { name: '差旅规范', count: 18, icon: 'mdi mdi-folder' },
+  { name: '发票管理', count: 14, icon: 'mdi mdi-folder' },
+  { name: '税务合规', count: 16, icon: 'mdi mdi-folder' },
+  { name: '预算管理', count: 9, icon: 'mdi mdi-folder' },
+  { name: '财务共享', count: 7, icon: 'mdi mdi-folder' },
+  { name: '培训资料', count: 6, icon: 'mdi mdi-folder' },
+  { name: '常见问答', count: 11, icon: 'mdi mdi-folder' }
 ]
 
 const documents = [
-  { name: '差旅报销管理办法（2024版）', tag: '差旅 / 制度', time: '2024-05-12 14:35', version: 'v3.2', state: '已生效', stateTone: 'success', owner: '张明', icon: 'mdi mdi-file-document-outline-pdf pdf' },
-  { name: '发票查验规范及操作指引', tag: '发票 / 操作', time: '2024-05-10 10:22', version: 'v1.5', state: '已生效', stateTone: 'success', owner: '李娜', icon: 'mdi mdi-file-document-outline-word word' },
-  { name: '费用报销标准细则（2024）', tag: '报销 / 标准', time: '2024-05-08 09:16', version: 'v2.1', state: '已生效', stateTone: 'success', owner: '王磊', icon: 'mdi mdi-file-document-outline-pdf pdf' },
-  { name: '差旅费用标准对照表（国内）', tag: '差旅 / 标准', time: '2024-05-05 08:20', version: 'v1.3', state: '审批中', stateTone: 'warning', owner: '陈杰', icon: 'mdi mdi-file-document-outline-excel excel' },
-  { name: '借款管理办法及流程', tag: '借款 / 流程', time: '2024-05-03 11:05', version: 'v1.0', state: '已生效', stateTone: 'success', owner: '刘洋', icon: 'mdi mdi-file-document-outline-pdf pdf' }
+  {
+    name: '差旅报销管理办法（2024版）',
+    folder: '差旅规范',
+    tag: '差旅 / 制度',
+    time: '2024-05-12 14:35',
+    version: 'v3.2',
+    state: '已生效',
+    stateTone: 'success',
+    owner: '张明',
+    icon: 'mdi mdi-file-document-outline-pdf pdf',
+    fileType: 'pdf',
+    fileTypeLabel: 'PDF 预览',
+    summary: '面向员工与财务共享团队的差旅费用标准、审批边界和附件要求。',
+    previewPages: [
+      {
+        title: '差旅报销管理办法（2024版）',
+        subtitle: '住宿、交通、审批与附件要求',
+        stats: [
+          { label: '适用范围', value: '全员' },
+          { label: '生效日期', value: '2024-05-12' },
+          { label: '更新重点', value: '住宿标准' }
+        ],
+        blocks: [
+          {
+            heading: '一、适用范围',
+            lines: ['适用于国内差旅申请、预订、报销与借款冲销。', '共享中心审核以出差申请、票据与预算中心为准。']
+          },
+          {
+            heading: '二、住宿标准',
+            lines: ['一线城市单晚标准 650 元，超标需附业务说明。', '连续住宿超过 3 晚需补充行程与客户拜访记录。']
+          }
+        ]
+      },
+      {
+        title: '审批与附件要求',
+        subtitle: '流程节点与必要凭证',
+        stats: [
+          { label: '附件校验', value: '7 项' },
+          { label: '审批节点', value: '4 级' },
+          { label: '自动拦截', value: '超标 / 重复' }
+        ],
+        blocks: [
+          {
+            heading: '三、审批规则',
+            lines: ['直属主管审批通过后进入财务复核。', '超预算或超标申请需追加部门负责人审批。']
+          },
+          {
+            heading: '四、附件清单',
+            lines: ['机票行程单、酒店发票、住宿水单、出租车发票。', '如存在改签、退票或异常情况，需补充说明材料。']
+          }
+        ]
+      }
+    ]
+  },
+  {
+    name: '发票查验规范及操作指引',
+    folder: '发票管理',
+    tag: '发票 / 操作',
+    time: '2024-05-10 10:22',
+    version: 'v1.5',
+    state: '已生效',
+    stateTone: 'success',
+    owner: '李娜',
+    icon: 'mdi mdi-file-document-outline-word word',
+    fileType: 'word',
+    fileTypeLabel: 'Word 预览',
+    summary: '说明发票验真路径、异常票据处理方式以及入账留痕要求。',
+    previewPages: [
+      {
+        title: '发票查验规范及操作指引',
+        subtitle: '验真流程与异常识别',
+        stats: [
+          { label: '查验入口', value: '3 个' },
+          { label: '异常类型', value: '6 类' },
+          { label: '责任角色', value: '财务专员' }
+        ],
+        blocks: [
+          {
+            heading: '一、查验入口',
+            lines: ['优先通过税务查验接口进行自动验真。', '无法自动识别时转人工核验并保留截图。']
+          },
+          {
+            heading: '二、异常票据',
+            lines: ['票面抬头不一致、号码重复、跨月补录需重点标注。', '出现红冲票据时需关联原单据并补充说明。']
+          }
+        ]
+      }
+    ]
+  },
+  {
+    name: '费用报销标准细则（2024）',
+    folder: '报销制度',
+    tag: '报销 / 标准',
+    time: '2024-05-08 09:16',
+    version: 'v2.1',
+    state: '已生效',
+    stateTone: 'success',
+    owner: '王磊',
+    icon: 'mdi mdi-file-document-outline-pdf pdf',
+    fileType: 'pdf',
+    fileTypeLabel: 'PDF 预览',
+    summary: '定义招待、差旅、办公采购与培训等费用类型的标准与限制。',
+    previewPages: [
+      {
+        title: '费用报销标准细则（2024）',
+        subtitle: '费用口径与报销边界',
+        stats: [
+          { label: '费用大类', value: '8 类' },
+          { label: '更新日期', value: '2024-05-08' },
+          { label: '重点事项', value: '招待 / 交通' }
+        ],
+        blocks: [
+          {
+            heading: '一、业务招待',
+            lines: ['需填写客户单位、参与人数及招待事由。', '单次超过 2000 元需上传审批邮件或会议纪要。']
+          },
+          {
+            heading: '二、交通与差旅',
+            lines: ['市内交通按真实票据报销，超标部分需说明。', '夜间出行或跨城交通需关联出差申请。']
+          }
+        ]
+      }
+    ]
+  },
+  {
+    name: '差旅费用标准对照表（国内）',
+    folder: '差旅规范',
+    tag: '差旅 / 标准',
+    time: '2024-05-05 08:20',
+    version: 'v1.3',
+    state: '审批中',
+    stateTone: 'warning',
+    owner: '陈杰',
+    icon: 'mdi mdi-file-document-outline-excel excel',
+    fileType: 'excel',
+    fileTypeLabel: 'Excel 预览',
+    summary: '各城市住宿、餐补与交通等级对照表，供申请与审核环节快速查询。',
+    previewPages: [
+      {
+        title: '差旅费用标准对照表（国内）',
+        subtitle: '城市维度对照',
+        stats: [
+          { label: '覆盖城市', value: '48 个' },
+          { label: '住宿档位', value: '4 级' },
+          { label: '餐补标准', value: '日维度' }
+        ],
+        blocks: [
+          {
+            heading: '一、住宿标准',
+            lines: ['北京 / 上海 / 深圳：650 元 / 晚。', '新一线城市：500 元 / 晚，其余城市按 380 元 / 晚执行。']
+          },
+          {
+            heading: '二、交通等级',
+            lines: ['总监及以上可乘坐高铁商务座或机票公务舱。', '其他员工默认经济舱、高铁二等座。']
+          }
+        ]
+      }
+    ]
+  },
+  {
+    name: '借款管理办法及流程',
+    folder: '财务共享',
+    tag: '借款 / 流程',
+    time: '2024-05-03 11:05',
+    version: 'v1.0',
+    state: '已生效',
+    stateTone: 'success',
+    owner: '刘洋',
+    icon: 'mdi mdi-file-document-outline-pdf pdf',
+    fileType: 'pdf',
+    fileTypeLabel: 'PDF 预览',
+    summary: '覆盖差旅借款、项目借款和借款冲销的全流程要求。',
+    previewPages: [
+      {
+        title: '借款管理办法及流程',
+        subtitle: '借款申请与冲销闭环',
+        stats: [
+          { label: '适用场景', value: '差旅 / 项目' },
+          { label: '冲销时限', value: '30 天' },
+          { label: '审批路径', value: '3 级' }
+        ],
+        blocks: [
+          {
+            heading: '一、借款申请',
+            lines: ['借款申请需绑定预算中心与费用类型。', '超过 5000 元需部门负责人额外审批。']
+          },
+          {
+            heading: '二、冲销要求',
+            lines: ['借款发生后 30 日内完成报销与冲销。', '逾期未冲销将纳入月度风险提醒。']
+          }
+        ]
+      }
+    ]
+  }
 ]
 
-const opsMetrics = [
-  { label: '本周新增问题', value: '328', meta: '较上周 +46', icon: 'mdi mdi-help-circle-outline', accent: '#3b82f6' },
-  { label: '已解决问题', value: '286', meta: '解决率 87.2%', icon: 'mdi mdi-check', accent: '#10b981' },
-  { label: '平均响应时长', value: '2.4h', meta: '较上周 -0.6h', icon: 'mdi mdi-clock-outline', accent: '#3b82f6' },
-  { label: '用户满意度', value: '91.2%', meta: '较上周 +2.1%', icon: 'mdi mdi-emoticon-happy-outline', accent: '#10b981' },
-  { label: '收藏次数', value: '1,236', meta: '较上周 +128', icon: 'mdi mdi-star-outline', accent: '#f59e0b' },
-  { label: '点赞总数', value: '3,582', meta: '较上周 +312', icon: 'mdi mdi-thumb-up-outline', accent: '#f59e0b' }
-]
+const filteredFolders = computed(() => {
+  const key = folderSearch.value.trim()
+  if (!key) return folders
+  return folders.filter((folder) => folder.name.includes(key))
+})
 
-const hotQuestions = [
-  { rank: 1, title: '酒店住宿超标怎么办？', count: '1,256', tone: 'hot' },
-  { rank: 2, title: '发票抬头不一致如何处理？', count: '1,023', tone: 'warm' },
-  { rank: 3, title: '差旅补贴标准是多少？', count: '856', tone: 'warm' },
-  { rank: 4, title: '借款申请后如何冲销？', count: '622', tone: 'normal' },
-  { rank: 5, title: '预算占用失败怎么处理？', count: '485', tone: 'normal' }
-]
-
-const likedAnswers = [
-  { title: '差旅报销标准及注意事项汇总', count: 326 },
-  { title: '发票查验失败常见原因及处理', count: 285 },
-  { title: '报销单据填写规范与示例', count: 241 },
-  { title: '借款冲销操作流程详解', count: 198 },
-  { title: '预算占用与释放操作指南', count: 176 }
-]
-
-const dislikedAnswers = [
-  { title: '补贴发放延迟如何处理？', count: 68 },
-  { title: '发票跨月入账如何处理？', count: 57 },
-  { title: '预填预算申请流程复杂？', count: 43 },
-  { title: '费用分类规则不清晰？', count: 38 },
-  { title: '固定资产报废流程说明', count: 31 }
-]
-
-const trendData = [
-  { label: '05-06', value: 220 },
-  { label: '05-07', value: 270 },
-  { label: '05-08', value: 200 },
-  { label: '05-09', value: 250 },
-  { label: '05-10', value: 150 },
-  { label: '05-11', value: 210 }
-].map((item, index) => ({
-  ...item,
-  x: 48 + index * 66,
-  y: 164 - (item.value / 320) * 128
-}))
-
-const chartTicks = [
-  { label: '320', y: 36 },
-  { label: '240', y: 68 },
-  { label: '160', y: 100 },
-  { label: '80', y: 132 },
-  { label: '0', y: 164 }
-]
-
-const trendPoints = computed(() => trendData.map((point) => `${point.x},${point.y}`).join(' '))
-
-const recentKnowledge = [
-  { name: '差旅报销管理办法（2024版）v3.2', time: '05-12 14:35', icon: 'mdi mdi-file-document-outline-pdf pdf' },
-  { name: '发票查验规范及操作指引 v1.5', time: '05-10 10:22', icon: 'mdi mdi-file-document-outline-word word' },
-  { name: '费用报销标准细则（2024）v2.1', time: '05-08 09:16', icon: 'mdi mdi-file-document-outline-pdf pdf' }
-]
+const filteredDocuments = computed(() =>
+  documents.filter((doc) => {
+    const inFolder = activeFolder.value ? doc.folder === activeFolder.value : true
+    return inFolder
+  })
+)
 </script>
 
 <style scoped>
@@ -277,31 +434,28 @@ const recentKnowledge = [
   height: 100%;
   min-height: 0;
   display: grid;
-  grid-template-columns: minmax(620px, 1.08fr) minmax(560px, .92fr);
+  grid-template-columns: minmax(0, 1fr) 0;
+  gap: 0;
+  transition: grid-template-columns 320ms var(--ease), gap 320ms var(--ease);
+}
+
+.knowledge-grid.has-preview {
+  grid-template-columns: minmax(560px, 1fr) minmax(420px, 0.82fr);
   gap: 16px;
 }
 
 .knowledge-main,
-.analytics-column {
+.preview-column {
   min-width: 0;
   min-height: 0;
-  display: grid;
-  gap: 12px;
 }
 
 .knowledge-main {
-  grid-template-rows: minmax(0, 1fr);
-  overflow: hidden;
-}
-
-.analytics-column {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  grid-auto-rows: minmax(176px, 1fr);
-  gap: 14px;
   overflow: hidden;
 }
 
 .library-panel {
+  height: 100%;
   min-height: 0;
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);
@@ -309,13 +463,47 @@ const recentKnowledge = [
   overflow: hidden;
 }
 
+.panel-title {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
 .panel-title h2,
-.card-head h2 {
+.preview-head h2 {
   color: #0f172a;
   font-size: 16px;
   font-weight: 850;
 }
 
+.panel-title p,
+.preview-head p {
+  margin-top: 6px;
+  color: #64748b;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.preview-hint {
+  min-height: 28px;
+  display: inline-flex;
+  align-items: center;
+  padding: 0 10px;
+  border-radius: 999px;
+  background: #f1f5f9;
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 800;
+  white-space: nowrap;
+  transition: background 220ms ease, color 220ms ease;
+}
+
+.preview-hint.active {
+  background: #dcfce7;
+  color: #059669;
+}
+
 .library-body {
   min-height: 0;
   display: grid;
@@ -417,10 +605,6 @@ const recentKnowledge = [
   font-weight: 850;
 }
 
-.new-folder-btn:hover {
-  background: #dcfce7;
-}
-
 .document-area {
   min-width: 0;
   min-height: 0;
@@ -483,6 +667,21 @@ th {
   background: #f7fafc;
   color: #64748b;
   font-weight: 800;
+  white-space: nowrap;
+}
+
+.doc-row {
+  cursor: pointer;
+  transition: background 180ms ease, box-shadow 180ms ease;
+}
+
+.doc-row:hover {
+  background: #f8fbff;
+}
+
+.doc-row.selected {
+  background: linear-gradient(90deg, rgba(16, 185, 129, 0.08), rgba(59, 130, 246, 0.04));
+  box-shadow: inset 3px 0 0 #10b981;
 }
 
 .file-name {
@@ -494,10 +693,11 @@ th {
 }
 
 .file-name .pdf,
-.recent-list .pdf { color: #ef4444; }
+.viewer-filetype.pdf { color: #ef4444; }
 .file-name .word,
-.recent-list .word { color: #2563eb; }
-.file-name .excel { color: #10b981; }
+.viewer-filetype.word { color: #2563eb; }
+.file-name .excel,
+.viewer-filetype.excel { color: #10b981; }
 
 .doc-tag {
   display: inline-flex;
@@ -580,316 +780,267 @@ th {
   text-align: center;
 }
 
-.panel {
+.preview-column {
   min-width: 0;
+  min-height: 0;
+  overflow: hidden;
 }
 
-.card-head {
+.preview-panel {
+  height: 100%;
+  min-height: 0;
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr);
+  padding: 18px;
+  overflow: hidden;
+}
+
+.preview-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 14px;
+}
+
+.preview-kicker {
+  display: inline-flex;
+  align-items: center;
+  min-height: 24px;
+  padding: 0 8px;
+  border-radius: 999px;
+  background: #ecfdf5;
+  color: #059669;
+  font-size: 11px;
+  font-weight: 800;
+}
+
+.preview-actions {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 12px;
+  gap: 8px;
 }
 
-.card-head button {
-  border: 0;
-  background: transparent;
-  color: #64748b;
+.mini-action,
+.icon-action,
+.viewer-toolbar-actions button {
+  border: 1px solid #d7e0ea;
+  border-radius: 8px;
+  background: #fff;
+  color: #334155;
+}
+
+.mini-action {
+  min-height: 34px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 12px;
   font-size: 12px;
-  font-weight: 850;
+  font-weight: 800;
 }
 
-.ops-card {
-  grid-column: span 2;
-  padding: 14px 18px;
-}
-
-.ops-grid {
+.icon-action {
+  width: 34px;
+  height: 34px;
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  place-items: center;
+}
+
+.preview-meta {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-top: 14px;
+  padding-top: 14px;
+  border-top: 1px solid #edf2f7;
+}
+
+.preview-meta span {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 28px;
+  padding: 0 10px;
+  border-radius: 999px;
+  background: #f8fafc;
+  color: #475569;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.preview-viewer {
+  min-height: 0;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
   gap: 12px;
   margin-top: 14px;
 }
 
-.ops-item {
-  min-width: 0;
+.viewer-toolbar {
   display: flex;
-  align-items: flex-start;
-  gap: 8px;
-}
-
-.ops-icon {
-  width: 28px;
-  height: 28px;
-  flex-shrink: 0;
-  display: grid;
-  place-items: center;
-  border-radius: 8px;
-  background: color-mix(in srgb, var(--accent) 10%, #f8fafc);
-  color: var(--accent);
-  font-size: 15px;
-}
-
-.ops-text strong {
-  display: block;
-  color: #0f172a;
-  font-size: 16px;
-  font-weight: 850;
-  line-height: 1.2;
-}
-
-.ops-text p {
-  margin-top: 2px;
-  color: #334155;
-  font-size: 11px;
-  font-weight: 700;
-}
-
-.ops-text small {
-  display: block;
-  margin-top: 2px;
-  color: #94a3b8;
-  font-size: 10px;
-}
-
-.top-card,
-.trend-card,
-.recent-card {
-  padding: 14px 16px;
-}
-
-.feedback-card {
-  grid-column: span 2;
-  padding: 14px 18px;
-}
-
-.hot-list {
-  display: grid;
-  gap: 6px;
-  margin: 10px 0 0;
-  padding: 0;
-  list-style: none;
-}
-
-.hot-list li {
-  min-height: 28px;
-  display: grid;
-  grid-template-columns: 22px minmax(0, 1fr) auto;
   align-items: center;
-  gap: 8px;
-  padding: 2px 4px;
-  border-radius: 6px;
-  transition: background 120ms ease;
-}
-
-.hot-list li:hover {
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 44px;
+  padding: 0 12px;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
   background: #f8fafc;
 }
 
-.hot-list span {
-  width: 20px;
-  height: 20px;
-  display: grid;
-  place-items: center;
-  border-radius: 5px;
-  color: #fff;
-  font-size: 11px;
-  font-weight: 900;
-}
-
-.hot-list .hot { background: #ef4444; }
-.hot-list .warm { background: #f59e0b; }
-.hot-list .normal {
-  background: #f1f5f9;
-  color: #64748b;
-}
-
-.hot-list strong {
-  min-width: 0;
-  color: #334155;
-  font-size: 12px;
-  font-weight: 750;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.hot-list b {
-  color: #64748b;
-  font-size: 12px;
-  font-weight: 800;
-  white-space: nowrap;
-}
-
-.trend-chart {
-  width: 100%;
-  height: 160px;
-  margin-top: 8px;
-}
-
-.trend-chart line {
-  stroke: #edf2f7;
-}
-
-.trend-chart text {
-  fill: #64748b;
-  font-size: 11px;
-}
-
-.trend-chart polyline {
-  fill: none;
-  stroke: #10b981;
-  stroke-width: 2.5;
-}
-
-.trend-chart circle {
-  fill: #fff;
-  stroke: #10b981;
-  stroke-width: 2.5;
-}
-
-.feedback-split {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 16px;
-  margin-top: 10px;
-}
-
-.feedback-half h3 {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: 8px;
-  color: #334155;
-  font-size: 12px;
-  font-weight: 800;
-}
-
-.feedback-half h3 i {
-  font-size: 14px;
-}
-
-.feedback-half:first-child h3 i { color: #059669; }
-.feedback-half:last-child h3 i { color: #ef4444; }
-
-.feedback-list {
-  display: grid;
-  gap: 5px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.feedback-list li {
-  min-height: 26px;
-  display: grid;
-  grid-template-columns: 20px minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 8px;
-  padding: 2px 4px;
-  border-radius: 6px;
-  transition: background 120ms ease;
-}
-
-.feedback-list li:hover {
-  background: #f8fafc;
-}
-
-.feedback-list span {
-  min-width: 0;
-  color: #334155;
-  font-size: 12px;
-  font-weight: 700;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.feedback-list .rank-badge {
-  width: 18px;
-  height: 18px;
-  display: grid;
-  place-items: center;
-  border-radius: 4px;
-  color: #fff;
-  font-size: 10px;
-  font-weight: 900;
-}
-
-.feedback-list .rank-badge.hot { background: #ef4444; }
-.feedback-list .rank-badge.warm { background: #f59e0b; }
-.feedback-list .rank-badge.normal { background: #f1f5f9; color: #64748b; }
-
-.feedback-list b {
+.viewer-filetype {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: 8px;
   font-size: 12px;
-  font-weight: 850;
-  white-space: nowrap;
+  font-weight: 800;
 }
 
-.feedback-list.positive b { color: #059669; }
-.feedback-list.negative b { color: #ef4444; }
+.viewer-toolbar-actions {
+  display: inline-flex;
+  gap: 8px;
+}
 
-.recent-list {
+.viewer-toolbar-actions button {
+  width: 32px;
+  height: 32px;
+  display: grid;
+  place-items: center;
+}
+
+.page-stage {
+  min-height: 0;
+  overflow: auto;
+  display: grid;
+  gap: 16px;
+  padding-right: 4px;
+}
+
+.page-sheet {
+  display: grid;
+  gap: 16px;
+  padding: 18px;
+  border: 1px solid #e2e8f0;
+  border-radius: 14px;
+  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
+  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
+  animation: previewSheetIn 360ms var(--ease) both;
+  animation-delay: var(--page-delay, 0ms);
+}
+
+.page-title {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.page-title strong {
+  color: #0f172a;
+  font-size: 15px;
+  font-weight: 850;
+}
+
+.page-title span,
+.page-title b {
+  display: block;
+  margin-top: 4px;
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.summary-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.summary-item {
   display: grid;
   gap: 6px;
-  margin: 10px 0 0;
-  padding: 0;
-  list-style: none;
-}
-
-.recent-list li {
-  display: grid;
-  grid-template-columns: 18px minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 8px;
-  padding: 4px;
-  border-radius: 6px;
-  transition: background 120ms ease;
-}
-
-.recent-list li:hover {
+  padding: 12px;
+  border-radius: 10px;
   background: #f8fafc;
 }
 
-.recent-list strong {
-  color: #334155;
-  font-size: 12px;
-  font-weight: 800;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.recent-list time {
-  color: #94a3b8;
+.summary-item span {
+  color: #64748b;
   font-size: 11px;
   font-weight: 700;
-  white-space: nowrap;
 }
 
-@media (max-width: 1380px) {
-  .knowledge-grid {
+.summary-item strong {
+  color: #0f172a;
+  font-size: 14px;
+  font-weight: 850;
+}
+
+.page-content {
+  display: grid;
+  gap: 12px;
+}
+
+.content-block {
+  padding: 14px;
+  border-radius: 12px;
+  background: #ffffff;
+  border: 1px solid #edf2f7;
+}
+
+.content-block h3 {
+  margin: 0 0 8px;
+  color: #0f172a;
+  font-size: 13px;
+  font-weight: 850;
+}
+
+.content-block ul {
+  display: grid;
+  gap: 8px;
+  margin: 0;
+  padding-left: 18px;
+  color: #475569;
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.preview-panel-enter-active,
+.preview-panel-leave-active {
+  transition: opacity 240ms ease, transform 320ms var(--ease);
+}
+
+.preview-panel-enter-from,
+.preview-panel-leave-to {
+  opacity: 0;
+  transform: translateX(24px) scale(0.98);
+}
+
+@keyframes previewSheetIn {
+  from {
+    opacity: 0;
+    transform: translateY(14px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 1320px) {
+  .knowledge-grid.has-preview {
+    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.78fr);
+  }
+}
+
+@media (max-width: 1080px) {
+  .knowledge-grid,
+  .knowledge-grid.has-preview {
     grid-template-columns: 1fr;
+    gap: 16px;
     overflow-y: auto;
   }
-}
-
-@media (max-width: 980px) {
-  .analytics-column {
-    grid-template-columns: 1fr;
-  }
-
-  .ops-card,
-  .feedback-card {
-    grid-column: span 1;
-  }
-
-  .feedback-split {
-    grid-template-columns: 1fr;
-  }
 
   .library-body {
     grid-template-columns: 1fr;
@@ -900,9 +1051,19 @@ th {
     border-bottom: 1px solid #edf2f7;
     padding: 0 0 12px;
   }
+}
 
-  .ops-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+@media (max-width: 760px) {
+  .panel-title,
+  .preview-head,
+  .viewer-toolbar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .summary-grid,
+  .list-foot {
+    grid-template-columns: 1fr;
   }
 }
 </style>
diff --git a/src/views/TravelRequestDetailView.vue b/src/views/TravelRequestDetailView.vue
new file mode 100644
index 0000000..72144a3
--- /dev/null
+++ b/src/views/TravelRequestDetailView.vue
@@ -0,0 +1,1893 @@
+<template>
+  <section class="approval-page">
+    <Teleport to="body">
+      <Transition name="detail-modal">
+        <div v-if="aiEntryOpen" class="detail-overlay" @click.self="closeAiEntry">
+          <div class="detail-modal ai-entry-modal">
+            <header class="modal-header">
+              <div class="header-left">
+                <div class="req-badge">AI</div>
+                <div class="header-title-group">
+                  <h2>智能录入费用明细</h2>
+                  <p>描述票据、行程或费用场景，AI 会整理成可追加的费用条目。</p>
+                </div>
+              </div>
+              <div class="header-right">
+                <button class="close-btn" type="button" aria-label="关闭" @click="closeAiEntry">
+                  <i class="mdi mdi-close"></i>
+                </button>
+              </div>
+            </header>
+
+            <div class="modal-body ai-entry-body">
+              <div class="ai-entry-grid">
+                <section class="ai-chat-card">
+                  <input
+                    ref="aiFileInput"
+                    class="ai-file-input"
+                    type="file"
+                    multiple
+                    accept=".pdf,.jpg,.jpeg,.png,.webp,.doc,.docx,.xls,.xlsx"
+                    @change="handleAiFilesChange"
+                  />
+                  <div class="ai-chat-scroll">
+                    <article
+                      v-for="message in aiMessages"
+                      :key="message.id"
+                      class="ai-chat-bubble"
+                      :class="message.role"
+                    >
+                      <span class="ai-chat-avatar">
+                        <i :class="message.role === 'assistant' ? 'mdi mdi-robot-outline' : 'mdi mdi-account-circle-outline'"></i>
+                      </span>
+                      <div class="ai-chat-content">
+                        <header>
+                          <strong>{{ message.role === 'assistant' ? 'AI 录入助手' : '我' }}</strong>
+                        </header>
+                        <p>{{ message.text }}</p>
+                      </div>
+                    </article>
+                  </div>
+
+                  <div class="ai-composer">
+                    <div class="ai-composer-surface">
+                      <textarea
+                        v-model="aiDraft"
+                        rows="3"
+                        placeholder="例如：7月12日从上海虹桥到杭州东高铁二等座236元，已上传车票和行程单。"
+                      />
+                      <div class="ai-composer-actions">
+                        <button class="ai-upload-btn" type="button" aria-label="上传单据" @click="triggerAiUpload">
+                          <i class="mdi mdi-paperclip"></i>
+                        </button>
+                        <button class="ai-send-btn" type="button" aria-label="发送给 AI" :disabled="!canSendAiEntry" @click="sendAiEntry">
+                          <i class="mdi mdi-send"></i>
+                        </button>
+                      </div>
+                    </div>
+                    <div v-if="uploadedAiFiles.length" class="ai-upload-list">
+                      <span v-for="file in uploadedAiFiles" :key="file.name" class="ai-upload-chip">
+                        <i class="mdi mdi-paperclip"></i>
+                        {{ file.name }}
+                      </span>
+                    </div>
+                  </div>
+                </section>
+
+                <aside class="ai-preview-card">
+                  <div class="ai-preview-head">
+                    <div>
+                      <h3>识别结果</h3>
+                      <p>确认后会直接追加到费用明细表。</p>
+                    </div>
+                    <span v-if="pendingAiExpense" class="attachment-pill neutral">待确认</span>
+                  </div>
+
+                  <div v-if="pendingAiExpense" class="ai-preview-fields">
+                    <div class="preview-field">
+                      <span>日期</span>
+                      <strong>{{ pendingAiExpense.time }} {{ pendingAiExpense.dayLabel }}</strong>
+                    </div>
+                    <div class="preview-field">
+                      <span>费用项目</span>
+                      <strong>{{ pendingAiExpense.name }}</strong>
+                    </div>
+                    <div class="preview-field">
+                      <span>分类</span>
+                      <strong>{{ pendingAiExpense.category }}</strong>
+                    </div>
+                    <div class="preview-field">
+                      <span>金额</span>
+                      <strong>{{ pendingAiExpense.amount }}</strong>
+                    </div>
+                    <div class="preview-field full">
+                      <span>说明</span>
+                      <strong>{{ pendingAiExpense.desc }}</strong>
+                      <p>{{ pendingAiExpense.detail }}</p>
+                    </div>
+                    <div class="preview-field full">
+                      <span>附件</span>
+                      <strong>{{ pendingAiExpense.attachmentStatus }}</strong>
+                      <p>{{ pendingAiExpense.attachmentHint }}</p>
+                    </div>
+                    <div class="ai-preview-actions">
+                      <button class="ai-preview-secondary" type="button" @click="regenerateAiEntry">
+                        <i class="mdi mdi-refresh"></i>
+                        重新生成
+                      </button>
+                      <button class="ai-preview-primary" type="button" @click="applyAiExpense">
+                        <i class="mdi mdi-plus-circle-outline"></i>
+                        加入费用明细
+                      </button>
+                    </div>
+                  </div>
+
+                  <div v-else class="ai-preview-empty">
+                    <i class="mdi mdi-robot-outline"></i>
+                    <p>发送一段费用描述后，这里会生成结构化结果。</p>
+                  </div>
+                </aside>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <div class="approval-detail">
+      <div class="detail-scroll">
+      <article class="detail-hero panel">
+        <div class="applicant-card">
+          <div class="portrait">{{ profile.avatar }}</div>
+          <div>
+            <h2>{{ profile.name }} <span>{{ profile.department }}</span></h2>
+            <p>申请时间 <strong>{{ request.applyTime }}</strong></p>
+          </div>
+        </div>
+
+        <div class="hero-stat">
+          <span>金额</span>
+          <strong>{{ expenseTotal }}</strong>
+        </div>
+        <div class="hero-stat">
+          <span>审批状态</span>
+          <b class="state-pill">{{ request.node }}</b>
+        </div>
+        <div class="hero-stat">
+          <span>商旅状态</span>
+          <b :class="['risk-pill', request.travelTone]">{{ request.travel }}</b>
+        </div>
+        <div class="hero-stat">
+          <span>申请状态</span>
+          <strong class="countdown"><i class="mdi mdi-clock-outline"></i> {{ request.approval }}</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 progressSteps"
+              :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>按发生时间逐笔展示，附件与系统校验直接在表内完成核对。</p>
+                </div>
+                <button class="smart-entry-btn" type="button" @click="openAiEntry">
+                  <i class="mdi mdi-robot-outline"></i>
+                  <span>智能录入</span>
+                </button>
+              </div>
+              <div class="detail-expense-table">
+              <table>
+                <thead>
+                  <tr>
+                    <th>时间</th>
+                    <th>费用项目</th>
+                    <th>说明</th>
+                    <th>金额</th>
+                    <th>附件材料</th>
+                    <th>系统校验</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" :value="detailNote" placeholder="输入申请说明..." />
+          </article>
+          </section>
+        </div>
+      </div>
+
+      <footer class="detail-actions">
+      <button class="back-action" type="button" @click="emit('backToRequests')">
+        <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-send-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-pencil-outline"></i> 编辑申请</button>
+      </div>
+      </footer>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+
+const props = defineProps({
+  request: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const emit = defineEmits(['backToRequests'])
+
+const expandedExpenseId = ref(null)
+const aiEntryOpen = ref(false)
+const aiDraft = ref('')
+const aiFileInput = ref(null)
+const aiEntrySeed = ref(2)
+const pendingAiExpense = ref(null)
+const uploadedAiFiles = ref([])
+const expenseItems = ref([
+  {
+    id: 'exp-1',
+    time: '07-08',
+    dayLabel: '第 1 天',
+    name: '高铁票',
+    category: '交通',
+    desc: '上海虹桥 -> 杭州东',
+    detail: '客户方案汇报前往现场',
+    amount: '￥236.00',
+    status: '规则通过',
+    tone: 'ok',
+    attachmentStatus: '2 份附件',
+    attachmentHint: '车票 + 行程单',
+    attachmentTone: 'ok',
+    attachments: ['高铁票.pdf', '行程单.pdf'],
+    riskLabel: '规则通过',
+    riskText: '票据与行程匹配',
+    riskTone: 'low'
+  },
+  {
+    id: 'exp-2',
+    time: '07-09',
+    dayLabel: '第 2 天',
+    name: '酒店住宿',
+    category: '住宿',
+    desc: '杭州西湖商务酒店',
+    detail: '1 晚住宿，含早餐',
+    amount: '￥1,180.00',
+    status: '待补材料',
+    tone: 'bad',
+    attachmentStatus: '缺 1 份',
+    attachmentHint: '缺少入住清单',
+    attachmentTone: 'partial',
+    attachments: ['酒店发票.jpg'],
+    riskLabel: '待补材料',
+    riskText: '需补酒店入住清单',
+    riskTone: 'medium'
+  },
+  {
+    id: 'exp-3',
+    time: '07-10',
+    dayLabel: '第 3 天',
+    name: '出租车',
+    category: '市内交通',
+    desc: '客户公司往返酒店',
+    detail: '含夜间打车 2 次',
+    amount: '￥128.00',
+    status: '需说明',
+    tone: 'bad',
+    attachmentStatus: '3 份附件',
+    attachmentHint: '发票已上传',
+    attachmentTone: 'ok',
+    attachments: ['出租车发票1.jpg', '出租车发票2.jpg', '打车订单.png'],
+    riskLabel: '超标说明',
+    riskText: '1 笔夜间交通需补充说明',
+    riskTone: 'medium'
+  },
+  {
+    id: 'exp-4',
+    time: '07-11',
+    dayLabel: '第 4 天',
+    name: '餐补',
+    category: '补贴',
+    desc: '差旅餐补',
+    detail: '按 4 天标准自动计算',
+    amount: '￥320.00',
+    status: '规则通过',
+    tone: 'ok',
+    attachmentStatus: '系统生成',
+    attachmentHint: '无需上传附件',
+    attachmentTone: 'neutral',
+    attachments: [],
+    riskLabel: '规则通过',
+    riskText: '补贴标准校验通过',
+    riskTone: 'low'
+  }
+])
+
+const request = computed(() => ({
+  id: props.request?.id ?? 'BR240712001',
+  reason: props.request?.reason ?? '客户方案汇报',
+  city: props.request?.city ?? '上海',
+  period: props.request?.period ?? '07-08~07-11 (4天)',
+  applyTime: props.request?.applyTime ?? '2024-07-07',
+  amount: props.request?.amount ?? '￥3,680.00',
+  node: props.request?.node ?? '财务审核',
+  approval: props.request?.approval ?? '审批中',
+  approvalTone: props.request?.approvalTone ?? 'info',
+  travel: props.request?.travel ?? '已订酒店/机票',
+  travelTone: props.request?.travelTone ?? 'low'
+}))
+
+const profile = {
+  name: '张晓明',
+  department: '财务管理员',
+  avatar: '张'
+}
+
+const summaryItems = [
+  { label: '出差城市', value: request.value.city, icon: 'mdi mdi-map-marker-path' },
+  { label: '出差区间', value: request.value.period, icon: 'mdi mdi-clock-outline' },
+  { label: '票据关联', value: '6 条明细 / 5 份材料', icon: 'mdi mdi-file-document-multiple-outline' },
+  { label: '商旅状态', value: request.value.travel, icon: 'mdi mdi-airplane' },
+  { label: '出差事由', value: request.value.reason, icon: 'mdi mdi-briefcase-outline' }
+]
+
+const heroSummaryItems = computed(() => [
+  { label: '单号', value: request.value.id, icon: 'mdi mdi-pound-box-outline' },
+  { label: '申请类型', value: '差旅费申请/报销', icon: 'mdi mdi-tag-multiple' },
+  ...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 progressSteps = computed(() => {
+  return [
+    { 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 expenseTotal = computed(() => {
+  const total = expenseItems.value.reduce((sum, item) => sum + parseCurrency(item.amount), 0)
+  return formatCurrency(total)
+})
+const uploadedExpenseCount = computed(() => expenseItems.value.filter((item) => item.attachments.length).length)
+const canSendAiEntry = computed(() => Boolean(aiDraft.value.trim() || uploadedAiFiles.value.length))
+
+const detailNote = '本次出差用于客户方案汇报与现场沟通，需覆盖往返交通、住宿及市内交通费用。已完成主要票据上传，待补酒店入住清单后即可进入完整审批流程。'
+
+function toggleExpenseAttachments(id) {
+  expandedExpenseId.value = expandedExpenseId.value === id ? null : id
+}
+
+function showExpenseRisk(item) {
+  return Boolean(item.riskText)
+}
+
+function openAiEntry() {
+  aiEntryOpen.value = true
+}
+
+function closeAiEntry() {
+  aiEntryOpen.value = false
+  aiDraft.value = ''
+  pendingAiExpense.value = null
+  uploadedAiFiles.value = []
+  if (aiFileInput.value) {
+    aiFileInput.value.value = ''
+  }
+}
+
+function parseCurrency(value) {
+  return Number.parseFloat(String(value).replace(/[^\d.]/g, '')) || 0
+}
+
+function formatCurrency(value) {
+  return `￥${value.toFixed(2)}`
+}
+
+function buildNextExpenseId() {
+  aiEntrySeed.value += 1
+  return `exp-ai-${aiEntrySeed.value}`
+}
+
+function inferExpenseCategory(text) {
+  if (/高铁|火车|机票|航班|打车|出租车|地铁|公交|交通/.test(text)) return '交通'
+  if (/酒店|住宿|房费/.test(text)) return '住宿'
+  if (/餐|午饭|晚饭|早餐|餐补/.test(text)) return '餐饮'
+  return '其他'
+}
+
+function inferExpenseName(text, category) {
+  if (/高铁/.test(text)) return '高铁票'
+  if (/机票|航班/.test(text)) return '机票'
+  if (/出租车|打车/.test(text)) return '出租车'
+  if (/酒店|住宿/.test(text)) return '酒店住宿'
+  if (/餐补/.test(text)) return '餐补'
+  if (/餐|午饭|晚饭|早餐/.test(text)) return '餐饮'
+  return `${category}费用`
+}
+
+function inferAttachments(text, uploadedFiles = []) {
+  if (uploadedFiles.length) {
+    return {
+      status: `${uploadedFiles.length} 份附件`,
+      hint: uploadedFiles.map((file) => file.name).join(' + '),
+      tone: 'ok',
+      files: uploadedFiles.map((file) => file.name),
+    }
+  }
+
+  if (/无需|免附件|系统生成/.test(text)) {
+    return {
+      status: '系统生成',
+      hint: '无需上传附件',
+      tone: 'neutral',
+      files: [],
+    }
+  }
+
+  const uploaded = /已上传|上传了|附上|附件/.test(text)
+  const receipt = /发票/.test(text)
+  const itinerary = /行程单/.test(text)
+  const ticket = /车票|机票/.test(text)
+  const hotelList = /入住清单/.test(text)
+  const files = []
+
+  if (receipt) files.push('发票.jpg')
+  if (itinerary) files.push('行程单.pdf')
+  if (ticket && !files.includes('票据.pdf')) files.push('票据.pdf')
+  if (hotelList) files.push('入住清单.pdf')
+
+  if (uploaded || files.length) {
+    return {
+      status: `${Math.max(files.length, 1)} 份附件`,
+      hint: files.length ? files.join(' + ') : '已上传附件待识别',
+      tone: 'ok',
+      files: files.length ? files : ['附件1.jpg'],
+    }
+  }
+
+  return {
+    status: '缺 1 份',
+    hint: '待补上传票据原件',
+    tone: 'missing',
+    files: [],
+  }
+}
+
+function inferRisk(text, attachmentTone) {
+  if (/夜间|超标|说明/.test(text)) {
+    return {
+      status: '需说明',
+      tone: 'bad',
+      riskLabel: '超标说明',
+      riskText: '识别到特殊场景，建议补充费用说明',
+      riskTone: 'medium',
+    }
+  }
+
+  if (attachmentTone === 'missing' || attachmentTone === 'partial') {
+    return {
+      status: '待补材料',
+      tone: 'bad',
+      riskLabel: '待补材料',
+      riskText: '附件不完整，需补齐后再提交审批',
+      riskTone: 'medium',
+    }
+  }
+
+  return {
+    status: '规则通过',
+    tone: 'ok',
+    riskLabel: '规则通过',
+    riskText: 'AI 识别通过，字段已结构化',
+    riskTone: 'low',
+  }
+}
+
+function extractDateLabel(text) {
+  const match = text.match(/(\d{1,2})月(\d{1,2})日|(\d{1,2})[-/.](\d{1,2})/)
+  if (!match) {
+    return { time: '07-12', dayLabel: `第 ${expenseItems.value.length + 1} 天` }
+  }
+
+  const month = String(match[1] || match[3] || '07').padStart(2, '0')
+  const day = String(match[2] || match[4] || '12').padStart(2, '0')
+  return { time: `${month}-${day}`, dayLabel: `第 ${expenseItems.value.length + 1} 天` }
+}
+
+function extractAmount(text) {
+  const match = text.match(/(\d+(?:\.\d{1,2})?)\s*元/)
+  return formatCurrency(Number.parseFloat(match?.[1] || '0'))
+}
+
+function buildAiExpense(text) {
+  const category = inferExpenseCategory(text)
+  const name = inferExpenseName(text, category)
+  const dateInfo = extractDateLabel(text)
+  const attachments = inferAttachments(text, uploadedAiFiles.value)
+  const risk = inferRisk(text, attachments.tone)
+
+  return {
+    id: buildNextExpenseId(),
+    time: dateInfo.time,
+    dayLabel: dateInfo.dayLabel,
+    name,
+    category,
+    desc: text.slice(0, 24),
+    detail: text,
+    amount: extractAmount(text),
+    status: risk.status,
+    tone: risk.tone,
+    attachmentStatus: attachments.status,
+    attachmentHint: attachments.hint,
+    attachmentTone: attachments.tone,
+    attachments: attachments.files,
+    riskLabel: risk.riskLabel,
+    riskText: risk.riskText,
+    riskTone: risk.riskTone,
+  }
+}
+
+const aiMessages = ref([
+  {
+    id: 'ai-msg-1',
+    role: 'assistant',
+    text: '请直接描述费用场景、日期、金额和是否已上传票据，我会整理成费用明细。',
+  },
+])
+
+function sendAiEntry() {
+  const text = aiDraft.value.trim() || `已上传 ${uploadedAiFiles.value.length} 份单据，请根据附件识别费用。`
+  if (!text && !uploadedAiFiles.value.length) return
+
+  aiMessages.value.push({
+    id: `ai-msg-user-${Date.now()}`,
+    role: 'user',
+    text: uploadedAiFiles.value.length ? `${text}\n附件：${uploadedAiFiles.value.map((file) => file.name).join('、')}` : text,
+  })
+
+  pendingAiExpense.value = buildAiExpense(text)
+
+  aiMessages.value.push({
+    id: `ai-msg-assistant-${Date.now()}`,
+    role: 'assistant',
+    text: `已识别为 ${pendingAiExpense.value.name}，金额 ${pendingAiExpense.value.amount}，可直接加入费用明细。`,
+  })
+
+  aiDraft.value = ''
+}
+
+function regenerateAiEntry() {
+  if (!pendingAiExpense.value) return
+  const sourceText = pendingAiExpense.value.detail
+  pendingAiExpense.value = buildAiExpense(sourceText.replace('待补上传票据原件', '已上传发票'))
+  aiMessages.value.push({
+    id: `ai-msg-regenerate-${Date.now()}`,
+    role: 'assistant',
+    text: '已重新整理识别结果，你可以继续确认后加入费用明细。',
+  })
+}
+
+function applyAiExpense() {
+  if (!pendingAiExpense.value) return
+  expenseItems.value.push({ ...pendingAiExpense.value })
+  expandedExpenseId.value = pendingAiExpense.value.id
+  aiMessages.value.push({
+    id: `ai-msg-apply-${Date.now()}`,
+    role: 'assistant',
+    text: '该费用条目已加入下方费用明细表。',
+  })
+  pendingAiExpense.value = null
+  aiDraft.value = ''
+  uploadedAiFiles.value = []
+  if (aiFileInput.value) {
+    aiFileInput.value.value = ''
+  }
+  aiEntryOpen.value = false
+}
+
+function triggerAiUpload() {
+  aiFileInput.value?.click()
+}
+
+function handleAiFilesChange(event) {
+  const files = Array.from(event.target.files ?? [])
+  uploadedAiFiles.value = files
+}
+</script>
+
+<style scoped>
+.approval-page {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  min-width: 0;
+  display: grid;
+  grid-template-rows: minmax(0, 1fr);
+  gap: 14px;
+  overflow: hidden;
+  animation: fadeUp 220ms var(--ease) both;
+}
+
+.approval-detail {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  min-width: 0;
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) auto;
+  overflow: hidden;
+}
+
+.detail-scroll {
+  min-width: 0;
+  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);
+  }
+}
+
+.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;
+  min-width: 0;
+}
+
+.detail-left {
+  min-width: 0;
+  display: grid;
+  gap: 12px;
+}
+
+.detail-card {
+  min-width: 0;
+  padding: 16px 18px;
+}
+
+.detail-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;
+}
+
+.smart-entry-btn {
+  min-width: 104px;
+  min-height: 34px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 0 14px;
+  border: 1px solid #dbe4ee;
+  border-radius: 999px;
+  background: #f8fafc;
+  color: #0f172a;
+  font-size: 13px;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.smart-entry-btn:hover {
+  border-color: rgba(16, 185, 129, .36);
+  background: #f0fdf4;
+  color: #047857;
+}
+
+.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 {
+  min-width: 0;
+  overflow-x: auto;
+}
+
+.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 {
+  display: block;
+  margin-top: 4px;
+  color: #64748b;
+  line-height: 1.45;
+}
+
+.expense-amount strong {
+  white-space: nowrap;
+}
+
+.over-tag {
+  display: inline-flex;
+  align-items: center;
+  margin-top: 6px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.over-tag.bad {
+  background: #fff7ed;
+  color: #ea580c;
+}
+
+.expense-attachment-main {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.expense-attachment .attachment-hint {
+  display: block;
+  margin-top: 3px;
+  color: #64748b;
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+.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-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;
+}
+
+.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-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 minmax(0, 1fr);
+  border-radius: 28px;
+  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;
+}
+
+.ai-entry-modal {
+  max-width: 1320px;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 24px 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: 999px;
+  background: #eff6ff;
+  border: 1px solid rgba(29, 78, 216, .16);
+  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;
+}
+
+.close-btn {
+  width: 36px;
+  height: 36px;
+  display: grid;
+  place-items: center;
+  border: 1px solid #e2e8f0;
+  border-radius: 999px;
+  background: #fff;
+  color: #64748b;
+  font-size: 18px;
+  transition: all 160ms ease;
+}
+
+.close-btn:hover {
+  border-color: #cbd5e1;
+  background: #f1f5f9;
+  color: #0f172a;
+}
+
+.modal-body {
+  min-height: 0;
+  padding: 20px 28px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: #cbd5e1 transparent;
+}
+
+.ai-entry-grid {
+  min-height: 100%;
+  display: grid;
+  grid-template-columns: minmax(0, 1.2fr) 360px;
+  gap: 20px;
+}
+
+.ai-chat-card,
+.ai-preview-card {
+  min-height: 0;
+  border-radius: 22px;
+  background: #fff;
+  border: 1px solid #edf2f7;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
+}
+
+.ai-chat-card {
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) auto;
+  overflow: hidden;
+}
+
+.ai-chat-scroll {
+  min-height: 0;
+  display: grid;
+  align-content: start;
+  gap: 12px;
+  padding: 18px;
+  overflow: auto;
+  background:
+    linear-gradient(180deg, rgba(240, 253, 244, .5) 0%, rgba(255, 255, 255, 0) 140px),
+    #fff;
+}
+
+.ai-chat-bubble {
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr);
+  gap: 10px;
+}
+
+.ai-chat-bubble.user {
+  grid-template-columns: minmax(0, 1fr) 34px;
+}
+
+.ai-chat-bubble.user .ai-chat-avatar {
+  order: 2;
+  background: #dbeafe;
+  color: #2563eb;
+}
+
+.ai-chat-bubble.user .ai-chat-content {
+  order: 1;
+  justify-self: end;
+  background: #eff6ff;
+}
+
+.ai-chat-avatar {
+  width: 34px;
+  height: 34px;
+  display: grid;
+  place-items: center;
+  border-radius: 999px;
+  background: #ecfdf5;
+  color: #059669;
+  font-size: 18px;
+}
+
+.ai-chat-content {
+  max-width: min(100%, 640px);
+  padding: 12px 14px;
+  border-radius: 18px;
+  background: #f8fafc;
+  border: 1px solid #edf2f7;
+}
+
+.ai-chat-content header {
+  margin-bottom: 6px;
+}
+
+.ai-chat-content strong {
+  color: #0f172a;
+  font-size: 13px;
+  font-weight: 850;
+}
+
+.ai-chat-content p {
+  color: #334155;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.ai-composer {
+  display: grid;
+  gap: 12px;
+  padding: 14px 16px 16px;
+  border-top: 1px solid #edf2f7;
+  background: linear-gradient(180deg, #fff, #fbfdff);
+}
+
+.ai-file-input {
+  display: none;
+}
+
+.ai-composer-surface {
+  min-height: 78px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: end;
+  gap: 12px;
+  padding: 8px 8px 8px 14px;
+  border: 1px solid #cbd8e5;
+  border-radius: 22px;
+  background: linear-gradient(180deg, #fff, #fbfdff);
+  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
+  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
+}
+
+.ai-composer-surface:focus-within {
+  border-color: rgba(16, 185, 129, .58);
+  background: #fff;
+  box-shadow: 0 0 0 3px rgba(16, 185, 129, .11), 0 10px 24px rgba(15, 23, 42, .06);
+}
+
+.ai-composer textarea {
+  width: 100%;
+  min-height: 60px;
+  height: 60px;
+  resize: none;
+  border: 0;
+  border-radius: 0;
+  padding: 8px 0;
+  background: transparent;
+  color: #0f172a;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.ai-composer textarea:focus {
+  outline: none;
+}
+
+.ai-composer-actions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+  padding-bottom: 2px;
+}
+
+.ai-upload-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.ai-upload-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 32px;
+  padding: 0 12px;
+  border-radius: 999px;
+  background: #eef6ff;
+  border: 1px solid #d7e8fb;
+  color: #334155;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.ai-upload-chip i {
+  color: #2563eb;
+}
+
+.ai-upload-btn,
+.ai-send-btn {
+  width: 48px;
+  height: 48px;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border-radius: 12px;
+  font-size: 20px;
+  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, color 160ms ease;
+}
+
+.ai-upload-btn {
+  border: 0;
+  background: #f1f5f9;
+  color: #475569;
+  box-shadow: none;
+}
+
+.ai-upload-btn:hover {
+  background: #e2e8f0;
+  color: #0f172a;
+}
+
+.ai-send-btn {
+  border: 0;
+  background: #10b981;
+  color: #fff;
+  box-shadow: 0 8px 18px rgba(16, 185, 129, .20);
+}
+
+.ai-send-btn:hover {
+  background: #0ea672;
+  box-shadow: 0 10px 22px rgba(16, 185, 129, .24);
+}
+
+.ai-upload-btn:active,
+.ai-send-btn:active {
+  transform: scale(.96);
+}
+
+.ai-preview-card {
+  padding: 18px;
+  display: grid;
+  align-content: start;
+  gap: 16px;
+}
+
+.ai-preview-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.ai-preview-head h3 {
+  margin: 0;
+  color: #0f172a;
+  font-size: 16px;
+  font-weight: 850;
+}
+
+.ai-preview-head p {
+  margin-top: 4px;
+  color: #64748b;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.ai-preview-fields {
+  display: grid;
+  gap: 10px;
+}
+
+.preview-field {
+  padding: 12px 14px;
+  border-radius: 18px;
+  background: #f8fafc;
+  border: 1px solid #edf2f7;
+}
+
+.preview-field.full {
+  min-height: 90px;
+}
+
+.preview-field span {
+  display: block;
+  color: #64748b;
+  font-size: 11px;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: .04em;
+}
+
+.preview-field strong {
+  display: block;
+  margin-top: 5px;
+  color: #0f172a;
+  font-size: 14px;
+  font-weight: 850;
+  line-height: 1.5;
+}
+
+.preview-field p {
+  margin-top: 4px;
+  color: #475569;
+  font-size: 12px;
+  line-height: 1.55;
+}
+
+.ai-preview-empty {
+  min-height: 280px;
+  display: grid;
+  place-items: center;
+  gap: 10px;
+  padding: 24px;
+  border: 1px dashed #cbd5e1;
+  border-radius: 20px;
+  color: #94a3b8;
+  text-align: center;
+}
+
+.ai-preview-empty i {
+  font-size: 32px;
+  color: #10b981;
+}
+
+.ai-preview-actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 4px;
+}
+
+.ai-preview-secondary,
+.ai-preview-primary {
+  height: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  padding: 0 20px;
+  border-radius: 999px;
+  font-size: 13px;
+  font-weight: 800;
+  transition: all 180ms ease;
+  flex: 1;
+}
+
+.ai-preview-secondary {
+  border: 1px solid #fed7aa;
+  background: #fff7ed;
+  color: #c2410c;
+}
+
+.ai-preview-primary {
+  border: 1px solid #059669;
+  background: #059669;
+  color: #fff;
+  box-shadow: 0 8px 20px rgba(5, 150, 105, .18);
+}
+
+.ai-preview-secondary:hover {
+  background: #ffedd5;
+}
+
+.ai-preview-primary:hover {
+  background: #047857;
+}
+
+.ai-preview-secondary:disabled,
+.ai-preview-primary:disabled,
+.approve-action:disabled,
+.ai-send-btn:disabled {
+  opacity: .45;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.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; }
+
+@media (max-width: 1320px) {
+  .detail-hero {
+    grid-template-columns: minmax(0, 1.8fr) repeat(4, minmax(0, 1fr));
+  }
+
+  .hero-summary-panel {
+    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
+  }
+
+  .detail-expense-table {
+    overflow-x: auto;
+  }
+
+  .detail-expense-table table {
+    min-width: 980px;
+  }
+
+  .ai-entry-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .detail-modal {
+    width: calc(100vw - 40px);
+    height: calc(100vh - 40px);
+  }
+}
+
+@media (max-width: 760px) {
+  .detail-hero {
+    grid-template-columns: 1fr 1fr;
+    gap: 12px;
+    padding: 16px;
+  }
+
+  .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;
+  }
+
+  .smart-entry-btn { align-self: flex-start; }
+
+  .detail-expense-table table {
+    min-width: 980px;
+  }
+
+  .detail-actions {
+    flex-direction: column;
+  }
+
+  .approval-action-group {
+    width: 100%;
+  }
+
+  .detail-modal {
+    width: 100vw;
+    height: 100vh;
+    max-width: 100vw;
+    max-height: 100vh;
+    border-radius: 0;
+  }
+
+  .modal-header { padding: 16px 18px; flex-wrap: wrap; }
+  .modal-body { padding: 16px 18px; }
+  .ai-composer-actions { flex-direction: column; align-items: stretch; }
+  .ai-preview-actions { flex-direction: column; }
+}
+</style>