diff --git a/doc/DESIGN.md b/doc/DESIGN.md
index 29ba4eb..7416484 100644
--- a/doc/DESIGN.md
+++ b/doc/DESIGN.md
@@ -120,13 +120,13 @@
 | `mine/addressedit.wxml`（`switch` 属性） | 旧金色 | `#B8520A`（属性值需硬编码） |
 | `health/profilelist.js`（`confirmColor`） | 旧金色 | `#B8520A` |
 | `health/profilelist.wxss`、`profileedit.wxss` | `#D4A853` 系 | 暖橙令牌 |
-| `escort/recordlist.wxss` | `#D4A853` 系 | 暖橙令牌 + 状态四档 |
-| `escort/recorddetail.wxss`（12 处） | `#D4A853` 系 | 暖橙令牌 + 状态四档 |
 | `escort/agreement.wxss` | 底 `#FAF6F1`、`#D4A853` 系 | `--paper` / `--brand-soft` / 暖橙令牌 |
 | `hospital/contact.wxss`、`hospital/ranking.wxss` | 底 `#F5F7F6`、字 `#1F2937`、绿灰系 | 整体并入暖橙体系 |
 
 已完成（2026-10-04）：`mine/mine.wxss`、`pages/ai/aichat.wxss` 已按本节并入暖橙体系。
 
+已完成（2026-10-04）：`escort/recordlist`、`escort/recorddetail` 已按本节并入暖橙体系——两页删去旧金色副本与全部渐变，状态一律走 §三 四档；`recorddetail` 另在 `page{ }` 登记 `--shadow-bar`（底栏上向阴影，不在全局色板内）。两页 `json` 原本 `usingComponents` 为空却已用 `t-icon`/`t-loading`，一并补注册。
+
 ### 5.2 系统级（不在页面里，最易漏）
 
 | 位置 | 现状 | 应改为 |
diff --git a/pages/escort/recorddetail.js b/pages/escort/recorddetail.js
index ed01b89..66e0c0b 100644
--- a/pages/escort/recorddetail.js
+++ b/pages/escort/recorddetail.js
@@ -1,18 +1,22 @@
 const API = require('../../utils/api.js')
 
+// 状态配色遵循 doc/DESIGN.md §三：四档状态色 + 状态说明文字，
+// 颜色只做强化，文字才是信息。待确认与已确认同属「等待」阶段，共用待服务档
 const STATUS_MAP = {
-  pending: { text: '待确认', color: '#F59E0B', bg: '#FEF3C7', gradient: 'linear-gradient(135deg, #F59E0B 0%, #D97706 100%)', icon: 'time', desc: '您的订单已提交，等待确认中' },
-  confirmed: { text: '已确认', color: '#3B82F6', bg: '#DBEAFE', gradient: 'linear-gradient(135deg, #3B82F6 0%, #2563EB 100%)', icon: 'check-circle', desc: '订单已确认，陪诊员将准时为您服务' },
-  in_progress: { text: '进行中', color: '#8B5CF6', bg: '#EDE9FE', gradient: 'linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%)', icon: 'play-circle', desc: '陪诊服务正在进行中' },
-  completed: { text: '已完成', color: '#10B981', bg: '#D1FAE5', gradient: 'linear-gradient(135deg, #10B981 0%, #059669 100%)', icon: 'check-circle-filled', desc: '陪诊服务已完成，感谢您的使用' },
-  cancelled: { text: '已取消', color: '#6B7280', bg: '#F3F4F6', gradient: 'linear-gradient(135deg, #9CA3AF 0%, #6B7280 100%)', icon: 'close-circle', desc: '该订单已取消' }
+  pending: { text: '待确认', color: '#0F766E', bg: '#ECF7F4', border: '#C7E5DF', desc: '您的订单已提交，等待陪诊员确认' },
+  confirmed: { text: '已确认', color: '#0F766E', bg: '#ECF7F4', border: '#C7E5DF', desc: '订单已确认，陪诊员将准时为您服务' },
+  in_progress: { text: '进行中', color: '#B8520A', bg: '#FFF4E8', border: '#FFE0C2', desc: '陪诊服务正在进行中' },
+  completed: { text: '已完成', color: '#1F7A4D', bg: '#EAF6EE', border: '#CDE9D7', desc: '陪诊服务已完成，感谢您的使用' },
+  cancelled: { text: '已取消', color: '#B4231A', bg: '#FCF0EE', border: '#F2D6D1', desc: '该订单已取消' }
 }
 
+// 支付状态：已支付走「已完成」档；未支付 / 部分支付复用主色浅档提示待处理；
+// 已退款走中性档（--muted 字 + --sep 描边 + 透明底）
 const PAYMENT_STATUS_MAP = {
-  unpaid: { text: '未支付', color: '#F59E0B', bg: '#FEF3C7' },
-  partial: { text: '部分支付', color: '#F59E0B', bg: '#FEF3C7' },
-  paid: { text: '已支付', color: '#10B981', bg: '#D1FAE5' },
-  refunded: { text: '已退款', color: '#6B7280', bg: '#F3F4F6' }
+  unpaid: { text: '未支付', color: '#B8520A', bg: '#FFF4E8', border: '#FFE0C2' },
+  partial: { text: '部分支付', color: '#B8520A', bg: '#FFF4E8', border: '#FFE0C2' },
+  paid: { text: '已支付', color: '#1F7A4D', bg: '#EAF6EE', border: '#CDE9D7' },
+  refunded: { text: '已退款', color: '#6F655C', bg: 'transparent', border: '#E5DACC' }
 }
 
 const SEX_MAP = {
@@ -20,7 +24,7 @@ const SEX_MAP = {
   female: '女'
 }
 
-const ATTENDANT_SEX_MAP = {
+const SEX_REQUIREMENT_MAP = {
   none: '不限',
   male: '男',
   female: '女'
@@ -116,13 +120,15 @@ Page({
       scheduleDuration: item.schedule?.duration || 0,
       escortServiceName: item.escort?.serviceName || '',
       attendantName: item.attendant?.name || '',
-      attendantSexText: ATTENDANT_SEX_MAP[item.escort?.sexRequirement] || '',
+      attendantMobile: item.attendant?.mobile || '',
+      sexRequirementText: SEX_REQUIREMENT_MAP[item.escort?.sexRequirement] || '',
       totalFee: (item.payment?.totalFee || 0).toFixed(2),
       paidFee: (item.payment?.paidFee || 0).toFixed(2),
       paymentStatus: item.payment?.status || 'unpaid',
       paymentStatusText: paymentInfo.text,
       paymentStatusColor: paymentInfo.color,
       paymentStatusBg: paymentInfo.bg,
+      paymentStatusBorder: paymentInfo.border,
       patientNote: item.notes?.patientNote || '',
       escortNote: item.notes?.escortNote || '',
       medicalSummary: item.notes?.medicalSummary || '',
@@ -130,8 +136,7 @@ Page({
       statusText: statusInfo.text,
       statusColor: statusInfo.color,
       statusBg: statusInfo.bg,
-      statusGradient: statusInfo.gradient,
-      statusIcon: statusInfo.icon,
+      statusBorder: statusInfo.border,
       statusDesc: statusInfo.desc,
       createTime: item.meta?.createtime ? this.formatDateTime(item.meta.createtime) : '',
       updateTime: item.meta?.updatetime ? this.formatDateTime(item.meta.updatetime) : ''
@@ -178,6 +183,12 @@ Page({
     wx.makePhoneCall({ phoneNumber: '18618162956' })
   },
 
+  onCallAttendant() {
+    const mobile = this.data.record.attendantMobile
+    if (!mobile || mobile === '--') return
+    wx.makePhoneCall({ phoneNumber: mobile })
+  },
+
   onEditPatientNote() {
     this.setData({
       editing: true,
@@ -346,7 +357,7 @@ Page({
     wx.showModal({
       title: '确认完成',
       content: '确认陪诊服务已完成？',
-      confirmColor: '#6B8E7B',
+      confirmColor: '#B8520A',
       success: (res) => {
         if (res.confirm) {
           wx.showLoading({ title: '处理中...' })
@@ -375,7 +386,7 @@ Page({
     wx.showModal({
       title: '删除订单',
       content: '确定要删除该订单吗？删除后不可恢复。',
-      confirmColor: '#EF4444',
+      confirmColor: '#B4231A',
       success: (res) => {
         if (res.confirm) {
           wx.showLoading({ title: '删除中...' })
diff --git a/pages/escort/recorddetail.json b/pages/escort/recorddetail.json
index 0129681..e240546 100644
--- a/pages/escort/recorddetail.json
+++ b/pages/escort/recorddetail.json
@@ -1,6 +1,8 @@
 {
   "navigationBarTitleText": "预约记录详情",
-  "usingComponents": {},
+  "usingComponents": {
+    "t-icon": "tdesign-miniprogram/icon/icon"
+  },
   "enablePullDownRefresh": true,
   "backgroundTextStyle": "dark"
 }
diff --git a/pages/escort/recorddetail.wxml b/pages/escort/recorddetail.wxml
index 5d8b8fe..08b3e2c 100644
--- a/pages/escort/recorddetail.wxml
+++ b/pages/escort/recorddetail.wxml
@@ -1,290 +1,296 @@
-<view class="container">
-  <!-- 状态头部 -->
-  <view class="status-header" style="background: {{record.statusGradient}};">
-    <view class="status-main">
-      <text class="status-text">{{record.statusText}}</text>
-      <text class="status-desc">{{record.statusDesc}}</text>
-    </view>
-    <view class="status-icon-wrap">
-      <t-icon name="{{record.statusIcon}}" size="80rpx" color="rgba(255,255,255,0.6)" />
-    </view>
-  </view>
+<view class="page-bg">
+  <view class="container">
 
-  <!-- 就诊人信息 -->
-  <view class="detail-card">
-    <view class="card-title">
-      <t-icon name="user" class="card-icon" size="36rpx" />
-      <text>就诊人信息</text>
-      <view class="card-edit-btn" bindtap="onEditPatientInfo" wx:if="{{!editingPatient}}">
-        <t-icon name="edit" size="28rpx" color="#D4A853" />
-        <text class="edit-text">修改</text>
+    <!-- 状态头：短横色标 + 状态胶囊 + 状态说明。
+         状态色只包住胶囊文字本身（DESIGN.md §三），去掉旧版渐变横幅与大色块 -->
+    <view class="page-header">
+      <view class="header-accent"></view>
+      <view class="status-row">
+        <view
+          class="status-chip status-chip-lg"
+          style="background: {{record.statusBg}}; color: {{record.statusColor}}; border-color: {{record.statusBorder}};"
+        >{{record.statusText}}</view>
       </view>
+      <text class="header-subtitle">{{record.statusDesc}}</text>
     </view>
-    <view wx:if="{{!editingPatient}}">
-      <view class="info-row">
-        <text class="info-label">姓名</text>
-        <text class="info-value">{{record.patientName || '--'}}</text>
-      </view>
-      <view class="info-row">
-        <text class="info-label">性别</text>
-        <text class="info-value">{{record.patientSexText || '--'}}</text>
-      </view>
-      <view class="info-row">
-        <text class="info-label">年龄</text>
-        <text class="info-value">{{record.patientAge ? record.patientAge + '岁' : '--'}}</text>
-      </view>
-      <view class="info-row">
-        <text class="info-label">体重</text>
-        <text class="info-value">{{record.patientWeight ? record.patientWeight + 'kg' : '--'}}</text>
-      </view>
-      <view class="info-row">
-        <text class="info-label">身高</text>
-        <text class="info-value">{{record.patientHeight ? record.patientHeight + 'cm' : '--'}}</text>
-      </view>
-      <view class="info-row">
-        <text class="info-label">联系电话</text>
-        <text class="info-value phone" bindtap="onCallPatient">{{record.patientMobile || '--'}}</text>
-      </view>
-      <view class="info-row" wx:if="{{record.patientIdnumber}}">
-        <text class="info-label">身份证号</text>
-        <text class="info-value">{{record.patientIdnumber}}</text>
-      </view>
-    </view>
-    <view wx:if="{{editingPatient}}">
-      <view class="edit-row">
-        <text class="edit-label">姓名</text>
-        <input class="edit-input" value="{{editPatient.name}}" placeholder="请输入姓名" data-field="name" bindinput="onPatientInfoInput" />
-      </view>
-      <view class="edit-row">
-        <text class="edit-label">性别</text>
-        <view class="edit-radio-group">
-          <view class="edit-radio {{editPatient.sex === 'male' ? 'active' : ''}}" data-field="sex" data-value="male" bindtap="onPatientSexChange">男</view>
-          <view class="edit-radio {{editPatient.sex === 'female' ? 'active' : ''}}" data-field="sex" data-value="female" bindtap="onPatientSexChange">女</view>
+
+    <!-- 就诊人信息 -->
+    <view class="section">
+      <view class="section-head">
+        <view class="section-bar"></view>
+        <text class="section-title">就诊人信息</text>
+        <view class="section-link" wx:if="{{!editingPatient}}" bindtap="onEditPatientInfo">
+          <text class="section-link-text">修改</text>
+          <t-icon name="edit" size="26rpx" color="#9B4508" />
         </view>
       </view>
-      <view class="edit-row">
-        <text class="edit-label">出生年月</text>
-        <picker mode="date" value="{{editPatient.birth}}" end="{{today}}" bindchange="onPatientBirthChange">
-          <view class="edit-input {{editPatient.birth ? '' : 'placeholder'}}">{{editPatient.birth || '请选择出生日期'}}</view>
-        </picker>
+
+      <block wx:if="{{!editingPatient}}">
+        <view class="info-row">
+          <text class="info-label">姓名</text>
+          <text class="info-value">{{record.patientName || '--'}}</text>
+        </view>
+        <view class="info-row">
+          <text class="info-label">性别</text>
+          <text class="info-value">{{record.patientSexText || '--'}}</text>
+        </view>
+        <view class="info-row">
+          <text class="info-label">年龄</text>
+          <text class="info-value">{{record.patientAge ? record.patientAge + '岁' : '--'}}</text>
+        </view>
+        <view class="info-row">
+          <text class="info-label">体重</text>
+          <text class="info-value">{{record.patientWeight ? record.patientWeight + 'kg' : '--'}}</text>
+        </view>
+        <view class="info-row">
+          <text class="info-label">身高</text>
+          <text class="info-value">{{record.patientHeight ? record.patientHeight + 'cm' : '--'}}</text>
+        </view>
+        <view class="info-row">
+          <text class="info-label">联系电话</text>
+          <text class="info-value info-link" bindtap="onCallPatient">{{record.patientMobile || '--'}}</text>
+        </view>
+        <view class="info-row" wx:if="{{record.patientIdnumber}}">
+          <text class="info-label">身份证号</text>
+          <text class="info-value">{{record.patientIdnumber}}</text>
+        </view>
+      </block>
+
+      <block wx:else>
+        <view class="edit-row">
+          <text class="edit-label">姓名</text>
+          <input class="edit-input" value="{{editPatient.name}}" placeholder="请输入姓名" placeholder-class="input-placeholder" data-field="name" bindinput="onPatientInfoInput" />
+        </view>
+        <view class="edit-row">
+          <text class="edit-label">性别</text>
+          <view class="edit-radio-group">
+            <view class="edit-radio {{editPatient.sex === 'male' ? 'active' : ''}}" data-value="male" bindtap="onPatientSexChange">男</view>
+            <view class="edit-radio {{editPatient.sex === 'female' ? 'active' : ''}}" data-value="female" bindtap="onPatientSexChange">女</view>
+          </view>
+        </view>
+        <view class="edit-row">
+          <text class="edit-label">出生年月</text>
+          <picker class="edit-picker" mode="date" value="{{editPatient.birth}}" end="{{today}}" bindchange="onPatientBirthChange">
+            <view class="edit-input {{editPatient.birth ? '' : 'placeholder'}}">{{editPatient.birth || '请选择'}}</view>
+          </picker>
+        </view>
+        <view class="edit-row">
+          <text class="edit-label">体重(kg)</text>
+          <input class="edit-input" type="digit" value="{{editPatient.weight}}" placeholder="请输入" placeholder-class="input-placeholder" data-field="weight" bindinput="onPatientInfoInput" />
+        </view>
+        <view class="edit-row">
+          <text class="edit-label">身高(cm)</text>
+          <input class="edit-input" type="digit" value="{{editPatient.height}}" placeholder="请输入" placeholder-class="input-placeholder" data-field="height" bindinput="onPatientInfoInput" />
+        </view>
+        <view class="edit-row">
+          <text class="edit-label">联系电话</text>
+          <input class="edit-input" type="number" value="{{editPatient.mobile}}" placeholder="请输入" placeholder-class="input-placeholder" data-field="mobile" bindinput="onPatientInfoInput" />
+        </view>
+        <view class="edit-row">
+          <text class="edit-label">身份证号</text>
+          <input class="edit-input" value="{{editPatient.idnumber}}" placeholder="请输入" placeholder-class="input-placeholder" data-field="idnumber" bindinput="onPatientInfoInput" />
+        </view>
+        <view class="edit-actions">
+          <view class="btn btn-ghost" bindtap="onCancelEditPatientInfo">取消</view>
+          <view class="btn btn-primary" bindtap="onSavePatientInfo">保存</view>
+        </view>
+      </block>
+    </view>
+
+    <!-- 医院预约信息 -->
+    <view class="section">
+      <view class="section-head">
+        <view class="section-bar"></view>
+        <text class="section-title">医院预约信息</text>
       </view>
-      <view class="edit-row">
-        <text class="edit-label">体重(kg)</text>
-        <input class="edit-input" type="digit" value="{{editPatient.weight}}" placeholder="请输入体重" data-field="weight" bindinput="onPatientInfoInput" />
+      <view class="info-row">
+        <text class="info-label">就诊省份</text>
+        <text class="info-value">{{record.hospitalProvince || '--'}}</text>
       </view>
-      <view class="edit-row">
-        <text class="edit-label">身高(cm)</text>
-        <input class="edit-input" type="digit" value="{{editPatient.height}}" placeholder="请输入身高" data-field="height" bindinput="onPatientInfoInput" />
+      <view class="info-row">
+        <text class="info-label">就诊医院</text>
+        <text class="info-value">{{record.hospitalName || '--'}}</text>
       </view>
-      <view class="edit-row">
-        <text class="edit-label">联系电话</text>
-        <input class="edit-input" type="number" value="{{editPatient.mobile}}" placeholder="请输入联系电话" data-field="mobile" bindinput="onPatientInfoInput" />
+      <view class="info-row" wx:if="{{record.hospitalAddress}}">
+        <text class="info-label">医院地址</text>
+        <text class="info-value">{{record.hospitalAddress}}</text>
       </view>
-      <view class="edit-row">
-        <text class="edit-label">身份证号</text>
-        <input class="edit-input" value="{{editPatient.idnumber}}" placeholder="请输入身份证号" data-field="idnumber" bindinput="onPatientInfoInput" />
+      <view class="info-row">
+        <text class="info-label">就诊科室</text>
+        <text class="info-value">{{record.hospitalDepartment || '--'}}</text>
       </view>
-      <view class="edit-actions">
-        <button class="edit-btn cancel" bindtap="onCancelEditPatientInfo">取消</button>
-        <button class="edit-btn confirm" bindtap="onSavePatientInfo">保存</button>
+      <view class="info-row" wx:if="{{record.hospitalDoctor}}">
+        <text class="info-label">就诊医生</text>
+        <text class="info-value">{{record.hospitalDoctor}}</text>
+      </view>
+      <view class="info-row" wx:if="{{record.medicalRecordNo}}">
+        <text class="info-label">病历号</text>
+        <text class="info-value">{{record.medicalRecordNo}}</text>
+      </view>
+      <view class="info-row">
+        <text class="info-label">预约日期</text>
+        <text class="info-value">{{record.scheduleDate || '--'}}</text>
+      </view>
+      <view class="info-row">
+        <text class="info-label">预约时间</text>
+        <text class="info-value">{{record.scheduleStartTime || '--'}}</text>
+      </view>
+      <view class="info-row" wx:if="{{record.scheduleEndTime}}">
+        <text class="info-label">结束时间</text>
+        <text class="info-value">{{record.scheduleEndTime}}</text>
+      </view>
+      <view class="info-row" wx:if="{{record.scheduleDuration}}">
+        <text class="info-label">陪诊时长</text>
+        <text class="info-value">{{record.scheduleDuration}}分钟</text>
       </view>
     </view>
+
+    <!-- 陪诊服务 -->
+    <view class="section">
+      <view class="section-head">
+        <view class="section-bar"></view>
+        <text class="section-title">陪诊服务</text>
+      </view>
+      <view class="info-row">
+        <text class="info-label">服务类型</text>
+        <text class="info-value">{{record.escortServiceName || '陪诊服务'}}</text>
+      </view>
+      <view class="info-row" wx:if="{{record.sexRequirementText}}">
+        <text class="info-label">性别要求</text>
+        <text class="info-value">{{record.sexRequirementText}}</text>
+      </view>
+      <view class="info-row">
+        <text class="info-label">陪诊员</text>
+        <text class="info-value">{{record.attendantName || '待分配'}}</text>
+      </view>
+      <view class="info-row" wx:if="{{record.attendantMobile}}">
+        <text class="info-label">陪诊员电话</text>
+        <text class="info-value info-link" bindtap="onCallAttendant">{{record.attendantMobile}}</text>
+      </view>
+    </view>
+
+    <!-- 陪诊需求与症状 -->
+    <view class="section">
+      <view class="section-head">
+        <view class="section-bar"></view>
+        <text class="section-title">陪诊需求与症状</text>
+        <view class="section-link" wx:if="{{!editing}}" bindtap="onEditPatientNote">
+          <text class="section-link-text">修改</text>
+          <t-icon name="edit" size="26rpx" color="#9B4508" />
+        </view>
+      </view>
+
+      <block wx:if="{{editing}}">
+        <textarea
+          class="note-textarea"
+          value="{{editPatientNote}}"
+          placeholder="请输入陪诊需求或症状描述"
+          maxlength="500"
+          placeholder-class="input-placeholder"
+          bindinput="onPatientNoteInput"
+          focus="{{editing}}"
+        />
+        <view class="edit-actions">
+          <view class="btn btn-ghost" bindtap="onCancelEdit">取消</view>
+          <view class="btn btn-primary" bindtap="onSavePatientNote">保存</view>
+        </view>
+      </block>
+
+      <block wx:else>
+        <view class="note-block" wx:if="{{record.patientNote}}">
+          <text class="note-text">{{record.patientNote}}</text>
+        </view>
+        <view class="note-block" wx:if="{{record.escortNote}}">
+          <text class="note-label">陪诊记录</text>
+          <text class="note-text">{{record.escortNote}}</text>
+        </view>
+        <view class="note-block" wx:if="{{record.medicalSummary}}">
+          <text class="note-label">就诊摘要</text>
+          <text class="note-text">{{record.medicalSummary}}</text>
+        </view>
+        <view class="note-empty" wx:if="{{!record.patientNote && !record.escortNote && !record.medicalSummary}}">
+          <text class="note-empty-text">暂无备注信息</text>
+        </view>
+      </block>
+    </view>
+
+    <!-- 费用信息 -->
+    <view class="section">
+      <view class="section-head">
+        <view class="section-bar"></view>
+        <text class="section-title">费用信息</text>
+      </view>
+      <view class="info-row">
+        <text class="info-label">服务费用</text>
+        <text class="info-value fee-value">¥{{record.totalFee}}</text>
+      </view>
+      <view class="info-row">
+        <text class="info-label">已支付</text>
+        <text class="info-value">¥{{record.paidFee}}</text>
+      </view>
+      <view class="info-row">
+        <text class="info-label">支付状态</text>
+        <view
+          class="status-chip"
+          style="background: {{record.paymentStatusBg}}; color: {{record.paymentStatusColor}}; border-color: {{record.paymentStatusBorder}};"
+        >{{record.paymentStatusText}}</view>
+      </view>
+    </view>
+
+    <!-- 订单信息 -->
+    <view class="section">
+      <view class="section-head">
+        <view class="section-bar"></view>
+        <text class="section-title">订单信息</text>
+      </view>
+      <view class="info-row">
+        <text class="info-label">订单编号</text>
+        <text class="info-value order-id">{{record._id || '--'}}</text>
+      </view>
+      <view class="info-row">
+        <text class="info-label">订单状态</text>
+        <view
+          class="status-chip"
+          style="background: {{record.statusBg}}; color: {{record.statusColor}}; border-color: {{record.statusBorder}};"
+        >{{record.statusText}}</view>
+      </view>
+      <view class="info-row">
+        <text class="info-label">创建时间</text>
+        <text class="info-value">{{record.createTime || '--'}}</text>
+      </view>
+      <view class="info-row">
+        <text class="info-label">更新时间</text>
+        <text class="info-value">{{record.updateTime || '--'}}</text>
+      </view>
+    </view>
+
+    <!-- 底部占位 -->
+    <view class="bottom-placeholder"></view>
   </view>
 
-  <!-- 医院预约信息 -->
-  <view class="detail-card">
-    <view class="card-title">
-      <t-icon name="hospital" class="card-icon" size="36rpx" />
-      <text>医院预约信息</text>
-    </view>
-    <view class="info-row">
-      <text class="info-label">就诊省份</text>
-      <text class="info-value">{{record.hospitalProvince || '--'}}</text>
-    </view>
-    <view class="info-row">
-      <text class="info-label">就诊医院</text>
-      <text class="info-value">{{record.hospitalName || '--'}}</text>
-    </view>
-    <view class="info-row" wx:if="{{record.hospitalAddress}}">
-      <text class="info-label">医院地址</text>
-      <text class="info-value">{{record.hospitalAddress}}</text>
-    </view>
-    <view class="info-row">
-      <text class="info-label">就诊科室</text>
-      <text class="info-value">{{record.hospitalDepartment || '--'}}</text>
-    </view>
-    <view class="info-row" wx:if="{{record.hospitalDoctor}}">
-      <text class="info-label">就诊医生</text>
-      <text class="info-value">{{record.hospitalDoctor}}</text>
-    </view>
-    <view class="info-row" wx:if="{{record.medicalRecordNo}}">
-      <text class="info-label">病历号</text>
-      <text class="info-value">{{record.medicalRecordNo}}</text>
-    </view>
-    <view class="info-row">
-      <text class="info-label">预约日期</text>
-      <text class="info-value">{{record.scheduleDate || '--'}}</text>
-    </view>
-    <view class="info-row">
-      <text class="info-label">预约时间</text>
-      <text class="info-value">{{record.scheduleStartTime || '--'}}</text>
-    </view>
-    <view class="info-row" wx:if="{{record.scheduleEndTime}}">
-      <text class="info-label">结束时间</text>
-      <text class="info-value">{{record.scheduleEndTime}}</text>
-    </view>
-    <view class="info-row" wx:if="{{record.scheduleDuration}}">
-      <text class="info-label">陪诊时长</text>
-      <text class="info-value">{{record.scheduleDuration}}分钟</text>
-    </view>
-  </view>
-
-  <!-- 陪诊服务信息 -->
-  <view class="detail-card">
-    <view class="card-title">
-      <t-icon name="service" class="card-icon" size="36rpx" />
-      <text>陪诊服务</text>
-    </view>
-    <view class="info-row">
-      <text class="info-label">服务类型</text>
-      <text class="info-value">{{record.escortServiceName || '陪诊服务'}}</text>
-    </view>
-    <view class="info-row">
-      <text class="info-label">性别要求</text>
-      <text class="info-value">{{record.escortSexRequirementText}}</text>
-    </view>
-    <view class="info-row">
-      <text class="info-label">陪诊员</text>
-      <text class="info-value">{{record.attendantName}}</text>
-    </view>
-    <view class="info-row">
-      <text class="info-label">陪诊员性别</text>
-      <text class="info-value">{{record.attendantSexText}}</text>
-    </view>
-    <view class="info-row">
-      <text class="info-label">陪诊员电话</text>
-      <text class="info-value phone" bindtap="onCallAttendant">{{record.attendantMobile}}</text>
-    </view>
-  </view>
-
-  <!-- 陪诊需求 / 症状描述 -->
-  <view class="detail-card">
-    <view class="card-title">
-      <t-icon name="edit-1" class="card-icon" size="36rpx" />
-      <text>陪诊需求与症状</text>
-      <view class="card-edit-btn" bindtap="onEditPatientNote" wx:if="{{!editing}}">
-        <t-icon name="edit" size="28rpx" color="#D4A853" />
-        <text class="edit-text">修改</text>
-      </view>
-    </view>
-    <view class="note-section" wx:if="{{record.patientNote || editing}}">
-      <textarea
-        wx:if="{{editing}}"
-        class="note-textarea"
-        value="{{editPatientNote}}"
-        placeholder="请输入陪诊需求或症状描述"
-        maxlength="500"
-        placeholder-class="input-placeholder"
-        bindinput="onPatientNoteInput"
-        focus="{{editing}}"
-      />
-      <text wx:else class="note-content">{{record.patientNote || '暂无备注'}}</text>
-      <view class="note-actions" wx:if="{{editing}}">
-        <button class="note-btn cancel" bindtap="onCancelEdit">取消</button>
-        <button class="note-btn confirm" bindtap="onSavePatientNote">保存</button>
-      </view>
-    </view>
-    <view class="note-section" wx:if="{{record.escortNote}}">
-      <text class="note-label">陪诊记录</text>
-      <text class="note-content">{{record.escortNote}}</text>
-    </view>
-    <view class="note-section" wx:if="{{record.medicalSummary}}">
-      <text class="note-label">就诊摘要</text>
-      <text class="note-content">{{record.medicalSummary}}</text>
-    </view>
-    <view class="empty-note" wx:if="{{!record.patientNote && !record.escortNote && !record.medicalSummary && !editing}}">
-      <text class="empty-note-text">暂无备注信息，点击添加</text>
-      <view class="add-note-btn" bindtap="onEditPatientNote">
-        <t-icon name="add" size="28rpx" color="#D4A853" />
-      </view>
-    </view>
-  </view>
-
-  <!-- 费用信息 -->
-  <view class="detail-card">
-    <view class="card-title">
-      <t-icon name="wallet" class="card-icon" size="36rpx" />
-      <text>费用信息</text>
-    </view>
-    <view class="info-row">
-      <text class="info-label">服务费用</text>
-      <text class="info-value fee">¥{{record.totalFee}}</text>
-    </view>
-    <view class="info-row">
-      <text class="info-label">已支付</text>
-      <text class="info-value">¥{{record.paidFee}}</text>
-    </view>
-    <view class="info-row">
-      <text class="info-label">支付状态</text>
-      <view class="payment-badge" style="color: {{record.paymentStatusColor}}; background: {{record.paymentStatusBg}};">
-        {{record.paymentStatusText}}
-      </view>
-    </view>
-  </view>
-
-  <!-- 订单信息 -->
-  <view class="detail-card">
-    <view class="card-title">
-      <t-icon name="order" class="card-icon" size="36rpx" />
-      <text>订单信息</text>
-    </view>
-    <view class="info-row">
-      <text class="info-label">订单编号</text>
-      <text class="info-value order-id">{{record._id || '--'}}</text>
-    </view>
-    <view class="info-row">
-      <text class="info-label">订单状态</text>
-      <view class="status-badge-small" style="color: {{record.statusColor}}; background: {{record.statusBg}};">
-        {{record.statusText}}
-      </view>
-    </view>
-    <view class="info-row">
-      <text class="info-label">创建时间</text>
-      <text class="info-value">{{record.createTime || '--'}}</text>
-    </view>
-    <view class="info-row">
-      <text class="info-label">更新时间</text>
-      <text class="info-value">{{record.updateTime || '--'}}</text>
-    </view>
-  </view>
-
-  <!-- 底部占位 -->
-  <view class="bottom-placeholder"></view>
-
-  <!-- 底部操作栏 -->
+  <!-- 底部操作栏：同类实心块只保留一处——
+       再次预约为「已完成」时让位给「确认完成」，为「已取消」时自己成为主操作（§2.1） -->
   <view class="bottom-bar">
-    <view class="bottom-right">
-      <view
-        class="action-btn cancel-btn"
-        wx:if="{{record.status === 'pending' || record.status === 'confirmed'}}"
-        bindtap="onCancelOrder"
-      >取消订单</view>
-      <view
-        class="action-btn cancel-btn"
-        wx:if="{{record.paymentStatus === 'unpaid' && record.status !== 'completed'}}"
-        bindtap="onDeleteOrder"
-      >删除订单</view>
-      <view
-        class="action-btn confirm-btn"
-        wx:if="{{record.status === 'completed'}}"
-        bindtap="onConfirmComplete"
-      >确认完成</view>
-      <view
-        class="action-btn rebook-btn"
-        wx:if="{{record.status === 'completed' || record.status === 'cancelled'}}"
-        bindtap="onRebook"
-      >再次预约</view>
-    </view>
+    <view
+      class="action-btn action-ghost"
+      wx:if="{{record.status === 'pending' || record.status === 'confirmed'}}"
+      bindtap="onCancelOrder"
+    >取消订单</view>
+    <view
+      class="action-btn action-ghost"
+      wx:if="{{record.paymentStatus === 'unpaid' && record.status !== 'completed'}}"
+      bindtap="onDeleteOrder"
+    >删除订单</view>
+    <view
+      class="action-btn action-primary"
+      wx:if="{{record.status === 'completed'}}"
+      bindtap="onConfirmComplete"
+    >确认完成</view>
+    <view
+      class="action-btn {{record.status === 'cancelled' ? 'action-primary' : 'action-ghost'}}"
+      wx:if="{{record.status === 'completed' || record.status === 'cancelled'}}"
+      bindtap="onRebook"
+    >再次预约</view>
   </view>
 
   <!-- 取消订单弹窗 -->
@@ -293,7 +299,7 @@
     <view class="popup-header">
       <text class="popup-title">取消订单</text>
       <view class="popup-close" bindtap="onCloseCancelPopup">
-        <t-icon name="close" size="40rpx" />
+        <t-icon name="close" size="40rpx" color="#6F655C" />
       </view>
     </view>
     <view class="popup-body">
@@ -314,8 +320,8 @@
       </view>
     </view>
     <view class="popup-footer">
-      <button class="popup-cancel-btn" bindtap="onCloseCancelPopup">再想想</button>
-      <button class="popup-confirm-btn" bindtap="onConfirmCancel">确认取消</button>
+      <view class="popup-btn popup-btn-ghost" bindtap="onCloseCancelPopup">再想想</view>
+      <view class="popup-btn popup-btn-primary" bindtap="onConfirmCancel">确认取消</view>
     </view>
   </view>
-</view>
+</view>
\ No newline at end of file
diff --git a/pages/escort/recorddetail.wxss b/pages/escort/recorddetail.wxss
index ab8cab4..d8f61b2 100644
--- a/pages/escort/recorddetail.wxss
+++ b/pages/escort/recorddetail.wxss
@@ -1,422 +1,375 @@
+/* pages/escort/recorddetail.wxss
+   设计方向：本页是一张陪诊订单的详情，按「状态 → 就诊人 → 医院 → 服务 → 需求 → 费用 → 订单」的顺序铺开。
+   - 配色并入全站暖橙体系（doc/DESIGN.md）：令牌来自 app.wxss，本页不再留副本；
+     状态色只用 §三 四档，旧版渐变横幅与金色体系全部移除
+   - 头部：短横色标 + 状态胶囊 + 状态说明（内页规范，不做整块主色面板）
+   - 分区：发丝线切分，标题走统一的 8×34rpx 单竖条 .section-bar
+   - 表单：标签 --muted + 值 --ink 700；选中项走浅橙底 + 实心橙描边
+   - 按钮：底栏主操作实心胶囊，其余为空心胶囊；同类实心块全页只保留一处（§2.1）
+   - 字号阶梯：34 分节标题 / 28 正文 · 表单 / 26 标签 / 24 元信息，最小 24rpx(12px) */
 page {
-  background-color: #FAF6F1;
+  background-color: var(--paper);
+
+  /* 底栏上向阴影：小偏移、小模糊，令牌不在全局色板内，故本页登记 */
+  --shadow-bar: 0 -2rpx 8rpx rgba(63, 43, 25, 0.06);
+}
+
+.page-bg {
+  min-height: 100vh;
+  background: var(--paper);
 }
 
 .container {
-  min-height: 100vh;
-  padding-bottom: constant(safe-area-inset-bottom);
-  padding-bottom: env(safe-area-inset-bottom);
+  padding: 0 32rpx 40rpx;
 }
 
-/* 状态头部 */
-.status-header {
-  padding: 48rpx 32rpx;
+/* ===== 头部状态 ===== */
+.page-header {
+  padding-top: 32rpx;
+}
+
+.header-accent {
+  width: 64rpx;
+  height: 8rpx;
+  border-radius: 4rpx;
+  background: var(--brand-strong);
+}
+
+.status-row {
+  margin-top: 22rpx;
+}
+
+/* 状态胶囊：底色 + 描边 + 字色三件套，颜色只做强化，文字才是信息（§三） */
+.status-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 6rpx 18rpx;
+  border: 2rpx solid transparent;
+  border-radius: 12rpx;
+  font-size: 24rpx;
+  font-weight: 700;
+  letter-spacing: 1rpx;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+
+.status-chip-lg {
+  padding: 8rpx 22rpx;
+  font-size: 28rpx;
+}
+
+.header-subtitle {
+  display: block;
+  margin-top: 14rpx;
+  font-size: 28rpx;
+  color: var(--muted);
+  line-height: 1.6;
+  letter-spacing: 1rpx;
+}
+
+/* ===== 分区：发丝线 + 单竖条标题 ===== */
+.section {
+  margin-top: 44rpx;
+  padding-top: 30rpx;
+  border-top: 2rpx solid var(--line);
+}
+
+.section-head {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  border-radius: 0 0 32rpx 32rpx;
+  margin-bottom: 6rpx;
 }
 
-.status-main {
-  display: flex;
-  flex-direction: column;
-  gap: 12rpx;
+.section-bar {
+  flex-shrink: 0;
+  width: 8rpx;
+  height: 34rpx;
+  border-radius: 4rpx;
+  background: var(--brand-strong);
 }
 
-.status-text {
-  font-size: 40rpx;
+.section-title {
+  margin-left: 16rpx;
+  font-size: 34rpx;
   font-weight: 700;
-  color: #FFFFFF;
+  color: var(--ink);
+  letter-spacing: 1rpx;
 }
 
-.status-desc {
-  font-size: 26rpx;
-  color: rgba(255, 255, 255, 0.8);
+/* 区块右侧入口：用 padding 撑热区、负 margin 抵消，保持标题行高度 */
+.section-link {
+  display: flex;
+  align-items: center;
+  margin: -16rpx 0 -16rpx auto;
+  padding: 16rpx 0 16rpx 24rpx;
 }
 
-.status-icon-wrap {
+.section-link:active {
   opacity: 0.6;
 }
 
-/* 详情卡片 */
-.detail-card {
-  background: #FFFFFF;
-  margin: 24rpx 24rpx 0;
-  border-radius: 20rpx;
-  padding: 32rpx;
-  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
+.section-link-text {
+  margin-right: 4rpx;
+  font-size: 24rpx;
+  color: var(--brand-ink);
 }
 
-.card-title {
-  display: flex;
-  align-items: center;
-  font-size: 32rpx;
-  font-weight: 600;
-  color: #1F2937;
-  margin-bottom: 24rpx;
-  padding-bottom: 20rpx;
-  border-bottom: 1rpx solid #F3F4F6;
-}
-
-.card-icon {
-  color: #D4A853;
-  margin-right: 12rpx;
-}
-
-.card-edit-btn {
-  display: flex;
-  align-items: center;
-  gap: 6rpx;
-  margin-left: auto;
-}
-
-/* 信息行 */
+/* ===== 信息行（只读） ===== */
 .info-row {
   display: flex;
-  align-items: center;
+  align-items: baseline;
   justify-content: space-between;
-  padding: 16rpx 0;
+  padding: 18rpx 0;
+  border-bottom: 2rpx solid var(--line);
 }
 
-.info-row + .info-row {
-  border-top: 1rpx solid #F9FAFB;
+.info-row:last-child {
+  border-bottom: none;
 }
 
 .info-label {
-  font-size: 26rpx;
-  color: #9CA3AF;
   flex-shrink: 0;
+  font-size: 26rpx;
+  color: var(--muted);
 }
 
 .info-value {
-  font-size: 26rpx;
-  color: #374151;
-  text-align: right;
   flex: 1;
+  min-width: 0;
   margin-left: 24rpx;
+  text-align: right;
+  font-size: 28rpx;
+  color: var(--ink-2);
   word-break: break-all;
 }
 
-.info-value.phone {
-  color: #D4A853;
-}
-
-.info-value.fee {
-  color: #D4A853;
+.info-link {
+  color: var(--brand-ink);
   font-weight: 700;
-  font-size: 30rpx;
 }
 
-.info-value.order-id {
+.fee-value {
+  color: var(--brand-strong);
+  font-weight: 700;
+}
+
+.order-id {
   font-size: 24rpx;
-  color: #6B7280;
-  font-family: monospace;
+  color: var(--muted);
+  letter-spacing: 1rpx;
 }
 
-/* 支付状态徽标 */
-.payment-badge {
-  font-size: 24rpx;
-  font-weight: 600;
-  padding: 6rpx 16rpx;
-  border-radius: 8rpx;
-}
-
-/* 订单状态小徽标 */
-.status-badge-small {
-  font-size: 24rpx;
-  font-weight: 600;
-  padding: 6rpx 16rpx;
-  border-radius: 8rpx;
-}
-
-/* 备注区域 */
-.note-section {
-  margin-bottom: 24rpx;
-}
-
-.note-section:last-child {
-  margin-bottom: 0;
-}
-
-.note-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 12rpx;
-}
-
-.note-label {
-  font-size: 26rpx;
-  color: #6B7280;
-  font-weight: 500;
-  margin-bottom: 8rpx;
-  display: block;
-}
-
-.note-edit-btn {
-  display: flex;
-  align-items: center;
-  gap: 6rpx;
-}
-
-.edit-text {
-  font-size: 24rpx;
-  color: #D4A853;
-}
-
-.note-content {
-  font-size: 28rpx;
-  color: #374151;
-  line-height: 1.7;
-  background: #F9FAFB;
-  padding: 20rpx;
-  border-radius: 12rpx;
-  display: block;
-}
-
-.note-textarea {
-  width: 100%;
-  min-height: 200rpx;
-  background: #F9FAFB;
-  border-radius: 12rpx;
-  padding: 20rpx;
-  font-size: 28rpx;
-  color: #1F2937;
-  box-sizing: border-box;
-  line-height: 1.7;
-}
-
-.input-placeholder {
-  color: #9CA3AF;
-}
-
-.note-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 16rpx;
-  margin-top: 16rpx;
-}
-
-.note-btn {
-  font-size: 26rpx;
-  padding: 12rpx 32rpx;
-  border-radius: 12rpx;
-  border: none;
-  line-height: 1.5;
-}
-
-.note-btn.cancel {
-  background: #F3F4F6;
-  color: #6B7280;
-}
-
-.note-btn.confirm {
-  background: linear-gradient(135deg, #D4A853 0%, #D4A853 100%);
-  color: #FFFFFF;
-  font-weight: 600;
-}
-
-.note-btn::after {
-  border: none;
-}
-
-/* 编辑行 */
+/* ===== 表单行（编辑态） ===== */
 .edit-row {
   display: flex;
   align-items: center;
-  padding: 16rpx 0;
-  border-top: 1rpx solid #F9FAFB;
+  justify-content: space-between;
+  padding: 20rpx 0;
+  border-bottom: 2rpx solid var(--line);
 }
 
 .edit-label {
-  font-size: 26rpx;
-  color: #9CA3AF;
   flex-shrink: 0;
-  width: 160rpx;
+  font-size: 28rpx;
+  color: var(--muted);
+}
+
+.edit-picker {
+  flex: 1;
+  min-width: 0;
+  margin-left: 24rpx;
+}
+
+/* 选择器内层已由 .edit-picker 让出间距，内层值不再重复缩进 */
+.edit-picker .edit-input {
+  margin-left: 0;
 }
 
 .edit-input {
   flex: 1;
-  font-size: 26rpx;
-  color: #374151;
-  text-align: right;
+  min-width: 0;
   margin-left: 24rpx;
-  height: 56rpx;
-  line-height: 56rpx;
+  font-size: 28rpx;
+  font-weight: 700;
+  color: var(--ink);
+  text-align: right;
+}
+
+.edit-input.placeholder {
+  font-weight: 400;
+  color: var(--muted);
+}
+
+.input-placeholder {
+  color: var(--muted);
 }
 
 .edit-radio-group {
-  flex: 1;
   display: flex;
-  justify-content: flex-end;
-  gap: 24rpx;
-  margin-left: 24rpx;
+  gap: 16rpx;
 }
 
+/* 选中项：浅橙底 + 实心橙描边（表单选中语言） */
 .edit-radio {
+  padding: 8rpx 28rpx;
+  border: 2rpx solid var(--line);
+  border-radius: 999rpx;
   font-size: 26rpx;
-  color: #6B7280;
-  padding: 8rpx 24rpx;
-  border-radius: 8rpx;
-  border: 1rpx solid #E5E7EB;
-  background: #FFFFFF;
+  color: var(--muted);
+  background: transparent;
 }
 
 .edit-radio.active {
-  color: #D4A853;
-  border-color: #D4A853;
-  background: #FEF3C7;
+  background: var(--brand-soft);
+  border-color: var(--brand-strong);
+  color: var(--brand-ink);
+  font-weight: 700;
 }
 
+/* ===== 按键：空心胶囊 / 实心胶囊 ===== */
 .edit-actions {
   display: flex;
   justify-content: flex-end;
   gap: 16rpx;
-  margin-top: 24rpx;
-  padding-top: 16rpx;
-  border-top: 1rpx solid #F3F4F6;
+  margin-top: 28rpx;
 }
 
-.edit-btn {
-  font-size: 26rpx;
-  padding: 12rpx 32rpx;
-  border-radius: 12rpx;
-  border: none;
-  line-height: 1.5;
-}
-
-.edit-btn.cancel {
-  background: #F3F4F6;
-  color: #6B7280;
-}
-
-.edit-btn.confirm {
-  background: linear-gradient(135deg, #D4A853 0%, #D4A853 100%);
-  color: #FFFFFF;
-  font-weight: 600;
-}
-
-.edit-btn::after {
-  border: none;
-}
-
-/* 空备注 */
-.empty-note {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 24rpx 20rpx;
-  background: #F9FAFB;
-  border-radius: 12rpx;
-}
-
-.empty-note-text {
-  font-size: 26rpx;
-  color: #9CA3AF;
-}
-
-.add-note-btn {
+.btn {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 56rpx;
-  height: 56rpx;
-  background: #FEF3C7;
-  border-radius: 50%;
+  padding: 16rpx 44rpx;
+  border-radius: 999rpx;
+  font-size: 28rpx;
+  line-height: 1.4;
 }
 
-/* 底部占位 */
+.btn:active {
+  opacity: 0.7;
+}
+
+.btn-ghost {
+  border: 3rpx solid var(--sep);
+  color: var(--muted);
+  background: transparent;
+}
+
+.btn-primary {
+  background: var(--brand-strong);
+  color: var(--white);
+  font-weight: 700;
+  box-shadow: var(--shadow-cta);
+}
+
+/* ===== 备注 ===== */
+.note-block {
+  margin-top: 18rpx;
+}
+
+.note-block:first-child {
+  margin-top: 6rpx;
+}
+
+.note-label {
+  display: block;
+  margin-bottom: 6rpx;
+  font-size: 24rpx;
+  color: var(--muted);
+}
+
+.note-text {
+  display: block;
+  font-size: 28rpx;
+  color: var(--ink-2);
+  line-height: 1.7;
+  letter-spacing: 1rpx;
+}
+
+.note-empty {
+  margin-top: 6rpx;
+  padding: 24rpx 0;
+}
+
+.note-empty-text {
+  font-size: 28rpx;
+  color: var(--muted);
+}
+
+.note-textarea {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 200rpx;
+  margin-top: 6rpx;
+  padding: 24rpx;
+  border: 2rpx solid var(--line);
+  border-radius: 16rpx;
+  background: var(--paper);
+  font-size: 28rpx;
+  color: var(--ink-2);
+  line-height: 1.7;
+}
+
+/* ===== 底部占位与操作栏 ===== */
 .bottom-placeholder {
   height: 160rpx;
 }
 
-/* 底部操作栏 */
 .bottom-bar {
   position: fixed;
-  bottom: 0;
   left: 0;
   right: 0;
-  background: #FFFFFF;
-  padding: 20rpx 32rpx;
-  padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
-  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06);
+  bottom: 0;
   z-index: 100;
-}
-
-.bottom-left {
-  display: flex;
-  align-items: center;
-  gap: 32rpx;
-}
-
-.action-icon-btn {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4rpx;
-}
-
-.action-icon-label {
-  font-size: 20rpx;
-  color: #6B7280;
-}
-
-.bottom-right {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 16rpx;
-  flex: 1;
-  flex-wrap: nowrap;
+  padding: 20rpx 32rpx;
+  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+  background: var(--white);
+  border-top: 2rpx solid var(--line);
+  box-shadow: var(--shadow-bar);
 }
 
 .action-btn {
-  font-size: 26rpx;
-  font-weight: 600;
-  padding: 16rpx 20rpx;
-  border-radius: 16rpx;
-  line-height: 1.5;
-  min-width: 0;
-  white-space: nowrap;
-  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 18rpx 44rpx;
+  border-radius: 999rpx;
+  font-size: 30rpx;
+  line-height: 1.4;
 }
 
-.cancel-btn {
-  background: #F3F4F6;
-  color: #6B7280;
+.action-btn:active {
+  opacity: 0.7;
 }
 
-.pay-btn {
-  background: linear-gradient(135deg, #D4A853 0%, #D4A853 100%);
-  color: #FFFFFF;
+.action-ghost {
+  border: 3rpx solid var(--sep);
+  color: var(--muted);
+  background: transparent;
 }
 
-.confirm-btn {
-  background: linear-gradient(135deg, #6B8E7B 0%, #6B8E7B 100%);
-  color: #FFFFFF;
+.action-primary {
+  background: var(--brand-strong);
+  color: var(--white);
+  font-weight: 700;
+  box-shadow: var(--shadow-cta);
 }
 
-.rebook-btn {
-  background: linear-gradient(135deg, #6B8E7B 0%, #6B8E7B 100%);
-  color: #FFFFFF;
-}
-
-/* 弹窗遮罩 */
+/* ===== 取消订单弹窗 ===== */
 .popup-mask {
   position: fixed;
-  top: 0;
   left: 0;
   right: 0;
+  top: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
   z-index: 200;
+  background: rgba(43, 37, 33, 0.45);
   opacity: 0;
   visibility: hidden;
-  transition: opacity 0.3s, visibility 0.3s;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
 }
 
 .popup-mask.show {
@@ -424,20 +377,19 @@ page {
   visibility: visible;
 }
 
-/* 弹窗内容 */
 .popup-content {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
-  background: #FFFFFF;
-  border-radius: 24rpx 24rpx 0 0;
   z-index: 201;
-  transform: translateY(100%);
-  transition: transform 0.3s ease-out;
   display: flex;
   flex-direction: column;
   max-height: 70vh;
+  background: var(--white);
+  border-radius: 32rpx 32rpx 0 0;
+  transform: translateY(100%);
+  transition: transform 0.3s ease-out;
 }
 
 .popup-content.show {
@@ -447,129 +399,115 @@ page {
 .popup-header {
   display: flex;
   align-items: center;
-  justify-content: center;
-  padding: 32rpx;
-  position: relative;
-  border-bottom: 1rpx solid #F3F4F6;
-  flex-shrink: 0;
+  justify-content: space-between;
+  padding: 28rpx 32rpx;
+  border-bottom: 2rpx solid var(--line);
 }
 
 .popup-title {
   font-size: 32rpx;
-  font-weight: 600;
-  color: #1F2937;
+  font-weight: 700;
+  color: var(--ink);
 }
 
 .popup-close {
-  position: absolute;
-  right: 32rpx;
-  top: 50%;
-  transform: translateY(-50%);
-  color: #9CA3AF;
+  padding: 8rpx;
+  margin: -8rpx;
+}
+
+.popup-close:active {
+  opacity: 0.5;
 }
 
 .popup-body {
   flex: 1;
   overflow-y: auto;
-  padding: 32rpx;
+  padding: 28rpx 32rpx;
 }
 
-.popup-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 24rpx;
-  padding: 24rpx 32rpx;
-  padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
-  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
-  border-top: 1rpx solid #F3F4F6;
-  background: #FFFFFF;
-  flex-shrink: 0;
-}
-
-.popup-cancel-btn {
-  flex: 1;
-  background: #F3F4F6;
-  color: #6B7280;
-  font-size: 30rpx;
-  font-weight: 600;
-  padding: 24rpx 0;
-  border-radius: 20rpx;
-  border: none;
-  line-height: 1.5;
-}
-
-.popup-cancel-btn::after {
-  border: none;
-}
-
-.popup-confirm-btn {
-  flex: 1;
-  background: linear-gradient(135deg, #EF4444 0%, #EF4444 100%);
-  color: #FFFFFF;
-  font-size: 30rpx;
-  font-weight: 600;
-  padding: 24rpx 0;
-  border-radius: 20rpx;
-  border: none;
-  line-height: 1.5;
-}
-
-.popup-confirm-btn::after {
-  border: none;
-}
-
-/* 取消原因 */
 .cancel-tip {
   font-size: 28rpx;
-  color: #6B7280;
+  color: var(--muted);
   line-height: 1.6;
-  margin-bottom: 24rpx;
 }
 
 .cancel-reason-list {
   display: flex;
   flex-direction: column;
-  gap: 8rpx;
+  margin-top: 8rpx;
 }
 
 .cancel-reason-item {
   display: flex;
   align-items: center;
-  gap: 16rpx;
   padding: 20rpx 16rpx;
-  border-radius: 12rpx;
-  transition: background 0.2s;
+  border-radius: 16rpx;
+  transition: background-color 0.15s ease;
 }
 
 .cancel-reason-item.active {
-  background: #FEF3C7;
+  background: var(--brand-soft);
 }
 
 .reason-radio {
-  width: 36rpx;
-  height: 36rpx;
-  border: 3rpx solid #D1D5DB;
-  border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  transition: border-color 0.2s;
-}
-
-.cancel-reason-item.active .reason-radio {
-  border-color: #D4A853;
-}
-
-.reason-radio-inner {
-  width: 20rpx;
-  height: 20rpx;
-  background: #D4A853;
+  box-sizing: border-box;
+  width: 36rpx;
+  height: 36rpx;
+  border: 3rpx solid var(--sep);
   border-radius: 50%;
 }
 
-.reason-text {
-  font-size: 28rpx;
-  color: #374151;
+.cancel-reason-item.active .reason-radio {
+  border-color: var(--brand-strong);
 }
+
+.reason-radio-inner {
+  width: 18rpx;
+  height: 18rpx;
+  border-radius: 50%;
+  background: var(--brand-strong);
+}
+
+.reason-text {
+  margin-left: 16rpx;
+  font-size: 28rpx;
+  color: var(--ink-2);
+}
+
+.popup-footer {
+  display: flex;
+  gap: 16rpx;
+  padding: 20rpx 32rpx;
+  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+  border-top: 2rpx solid var(--line);
+}
+
+.popup-btn {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 22rpx 0;
+  border-radius: 999rpx;
+  font-size: 30rpx;
+  line-height: 1.4;
+}
+
+.popup-btn:active {
+  opacity: 0.7;
+}
+
+.popup-btn-ghost {
+  border: 3rpx solid var(--sep);
+  color: var(--muted);
+}
+
+.popup-btn-primary {
+  background: var(--brand-strong);
+  color: var(--white);
+  font-weight: 700;
+}
\ No newline at end of file
diff --git a/pages/escort/recordlist.js b/pages/escort/recordlist.js
index 6f4bdc3..6be6373 100644
--- a/pages/escort/recordlist.js
+++ b/pages/escort/recordlist.js
@@ -1,11 +1,13 @@
 const API = require('../../utils/api.js')
 
+// 状态配色遵循 doc/DESIGN.md §三：「待服务 / 服务中 / 已完成 / 已取消」四档，
+// 颜色只做强化，文字才是信息。待确认与已确认同属「等待」阶段，共用待服务档
 const STATUS_MAP = {
-  pending: { text: '待确认', color: '#F59E0B', bg: '#FEF3C7' },
-  confirmed: { text: '待就诊', color: '#3B82F6', bg: '#DBEAFE' },
-  in_progress: { text: '进行中', color: '#8B5CF6', bg: '#EDE9FE' },
-  completed: { text: '已完成', color: '#10B981', bg: '#D1FAE5' },
-  cancelled: { text: '已取消', color: '#6B7280', bg: '#F3F4F6' }
+  pending: { text: '待确认', color: '#0F766E', bg: '#ECF7F4', border: '#C7E5DF' },
+  confirmed: { text: '已确认', color: '#0F766E', bg: '#ECF7F4', border: '#C7E5DF' },
+  in_progress: { text: '进行中', color: '#B8520A', bg: '#FFF4E8', border: '#FFE0C2' },
+  completed: { text: '已完成', color: '#1F7A4D', bg: '#EAF6EE', border: '#CDE9D7' },
+  cancelled: { text: '已取消', color: '#B4231A', bg: '#FCF0EE', border: '#F2D6D1' }
 }
 
 const TYPE_MAP = {
@@ -17,11 +19,13 @@ const TYPE_MAP = {
   other: '其他'
 }
 
+// 支付状态：已支付走「已完成」档；未支付 / 退款中复用主色浅档提示待处理；
+// 已退款走中性档（--muted 字 + --sep 描边 + 透明底，见 §三 禁用/中性写法）
 const PAYMENT_STATUS_MAP = {
-  unpaid: { text: '未支付', color: '#F59E0B', bg: '#FEF3C7' },
-  paid: { text: '已支付', color: '#3B82F6', bg: '#DBEAFE' },
-  refunding: { text: '退款中', color: '#F59E0B', bg: '#FEF3C7' },
-  refunded: { text: '已退款', color: '#6B7280', bg: '#F3F4F6' }
+  unpaid: { text: '未支付', color: '#B8520A', bg: '#FFF4E8', border: '#FFE0C2' },
+  paid: { text: '已支付', color: '#1F7A4D', bg: '#EAF6EE', border: '#CDE9D7' },
+  refunding: { text: '退款中', color: '#B8520A', bg: '#FFF4E8', border: '#FFE0C2' },
+  refunded: { text: '已退款', color: '#6F655C', bg: 'transparent', border: '#E5DACC' }
 }
 
 Page({
@@ -148,13 +152,15 @@ Page({
       statusText: statusInfo.text,
       statusColor: statusInfo.color,
       statusBg: statusInfo.bg,
+      statusBorder: statusInfo.border,
       appointmentTime,
       fee: fee.toFixed(2),
       patientNote: item.notes?.patientNote || '',
       escortNote: item.notes?.escortNote || '',
       paymentStatusText: paymentStatusInfo.text,
       paymentStatusColor: paymentStatusInfo.color,
-      paymentStatusBg: paymentStatusInfo.bg
+      paymentStatusBg: paymentStatusInfo.bg,
+      paymentStatusBorder: paymentStatusInfo.border
     }
   },
 
diff --git a/pages/escort/recordlist.json b/pages/escort/recordlist.json
index 364c7a8..16b16e8 100644
--- a/pages/escort/recordlist.json
+++ b/pages/escort/recordlist.json
@@ -1,6 +1,9 @@
 {
   "navigationBarTitleText": "预约记录",
-  "usingComponents": {},
+  "usingComponents": {
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "t-loading": "tdesign-miniprogram/loading/loading"
+  },
   "enablePullDownRefresh": true,
   "backgroundTextStyle": "dark"
 }
diff --git a/pages/escort/recordlist.wxml b/pages/escort/recordlist.wxml
index b506a5f..3f82565 100644
--- a/pages/escort/recordlist.wxml
+++ b/pages/escort/recordlist.wxml
@@ -1,92 +1,103 @@
-<view class="container">
-  <!-- 状态筛选标签 -->
-  <view class="status-tabs">
-    <view
-      class="tab-item {{statusFilter === item.value ? 'active' : ''}}"
-      wx:for="{{statusTabs}}"
-      wx:key="value"
-      data-value="{{item.value}}"
-      bindtap="onTabChange"
-    >
-      {{item.label}}<text class="tab-count" wx:if="{{item.count > 0}}">({{item.count}})</text>
-    </view>
+<view class="page-bg">
+
+  <!-- 状态筛选：吸顶横滑胶囊。
+       选中态 = 浅橙底 + 2rpx 实心橙描边 + 暖橙字（全页唯一「选中」语言）；
+       未选中 = 纸面安静胶囊（透明底 + 发丝边 + --muted 字）。
+       胶囊必须带文字标签，颜色只做强化（DESIGN.md §四.8） -->
+  <view class="tabs-bar">
+    <scroll-view class="tabs-scroll" scroll-x show-scrollbar="{{false}}">
+      <view class="tabs">
+        <view
+          class="tab {{statusFilter === item.value ? 'active' : ''}}"
+          wx:for="{{statusTabs}}"
+          wx:key="value"
+          data-value="{{item.value}}"
+          bindtap="onTabChange"
+        >
+          <text class="tab-label">{{item.label}}</text>
+          <text class="tab-count" wx:if="{{item.count > 0}}">{{item.count}}</text>
+        </view>
+      </view>
+    </scroll-view>
   </view>
 
-  <!-- 记录列表 -->
-  <view class="record-list" wx:if="{{records.length > 0}}">
-    <view
-      class="record-card"
-      wx:for="{{records}}"
-      wx:key="_id"
-      data-id="{{item._id}}"
-      bindtap="onTapRecord"
-    >
-      <!-- 卡片头部 -->
-      <view class="card-header">
-        <view class="header-left">
+  <view class="container">
+
+    <!-- 记录列表：一单一卡。
+         卡内只留可扫读的四段：类型 + 状态 → 时间 → 就诊信息 → 费用 + 支付状态。
+         需求、陪诊记录等长文本交给详情页，保证每张卡一眼看完 -->
+    <view class="record-list" wx:if="{{records.length > 0}}">
+      <view
+        class="record-card"
+        wx:for="{{records}}"
+        wx:key="_id"
+        data-id="{{item._id}}"
+        bindtap="onTapRecord"
+      >
+        <!-- 头部：服务类型 + 订单状态胶囊 -->
+        <view class="card-head">
           <text class="record-type">{{item.typeText}}</text>
-          <text class="record-time">{{item.appointmentTime}}</text>
+          <view
+            class="status-chip"
+            style="background: {{item.statusBg}}; color: {{item.statusColor}}; border-color: {{item.statusBorder}};"
+          >{{item.statusText}}</view>
         </view>
-        <view class="status-badge" style="color: {{item.statusColor}}; background: {{item.statusBg}};">
-          {{item.statusText}}
-        </view>
-      </view>
 
-      <!-- 卡片内容 -->
-      <view class="card-body">
-        <view class="info-row">
-          <text class="info-label">就诊医院</text>
-          <text class="info-value">{{item.hospital}}</text>
+        <!-- 预约时间 -->
+        <view class="card-time">
+          <t-icon name="time" size="26rpx" color="#6F655C" />
+          <text class="time-text">{{item.appointmentTime}}</text>
         </view>
-        <view class="info-row">
-          <text class="info-label">就诊科室</text>
-          <text class="info-value">{{item.department}}</text>
-        </view>
-        <view class="info-row">
-          <text class="info-label">就诊人姓名</text>
-          <text class="info-value">{{item.patientName}}</text>
-        </view>
-        <view class="info-row">
-          <text class="info-label">电话</text>
-          <text class="info-value">{{item.patientMobile}}</text>
-        </view>
-        <view class="info-row">
-          <text class="info-label">就诊需求</text>
-          <text class="info-value">{{item.patientNote}}</text>
-        </view>
-        <view class="info-row">
-          <text class="info-label">陪诊说明</text>
-          <text class="info-value">{{item.escortNote}}</text>
-        </view>
-      </view>
 
-      <!-- 卡片底部 -->
-      <view class="card-footer">
-        <view class="fee-wrap">
-          <text class="fee-label">费用：</text>
-          <text class="fee-value">¥{{item.fee}}</text>
+        <!-- 就诊信息 -->
+        <view class="card-info">
+          <view class="info-row">
+            <text class="info-label">就诊医院</text>
+            <text class="info-value">{{item.hospital}}</text>
+          </view>
+          <view class="info-row">
+            <text class="info-label">就诊科室</text>
+            <text class="info-value">{{item.department}}</text>
+          </view>
+          <view class="info-row">
+            <text class="info-label">就诊人</text>
+            <text class="info-value">{{item.patientName}}</text>
+          </view>
         </view>
-        <view class="status-badge" style="color: {{item.paymentStatusColor}}; background: {{item.paymentStatusBg}};">
-          {{item.paymentStatusText}}
+
+        <!-- 底部：费用 + 支付状态 + 进详情页的显性暗示 -->
+        <view class="card-foot">
+          <view class="fee">
+            <text class="fee-sym">¥</text>
+            <text class="fee-num">{{item.fee}}</text>
+          </view>
+          <view class="foot-right">
+            <view
+              class="pay-chip"
+              style="background: {{item.paymentStatusBg}}; color: {{item.paymentStatusColor}}; border-color: {{item.paymentStatusBorder}};"
+            >{{item.paymentStatusText}}</view>
+            <t-icon name="chevron-right" size="28rpx" color="#6F655C" />
+          </view>
         </view>
       </view>
     </view>
-  </view>
 
-  <!-- 空状态 -->
-  <view class="empty-state" wx:if="{{!loading && records.length === 0}}">
-    <t-icon name="file-unknown" size="120rpx" color="#D1D5DB" />
-    <text class="empty-text">暂无陪诊记录</text>
-    <text class="empty-subtext">您还没有预约陪诊服务</text>
-  </view>
+    <!-- 空状态 -->
+    <view class="empty-state" wx:if="{{!loading && records.length === 0}}">
+      <t-icon name="file-unknown" size="120rpx" color="#A79C92" />
+      <text class="empty-text">暂无陪诊记录</text>
+      <text class="empty-subtext">您还没有预约陪诊服务</text>
+    </view>
 
-  <!-- 加载中 -->
-  <view class="loading-wrap" wx:if="{{loading}}">
-    <t-loading theme="circular" size="40rpx" text="加载中..." />
-  </view>
+    <!-- 加载中 -->
+    <view class="loading-wrap" wx:if="{{loading}}">
+      <t-loading theme="circular" size="40rpx" text="加载中..." />
+    </view>
+
+    <!-- 到底提示 -->
+    <view class="no-more" wx:if="{{!loading && !hasMore && records.length > 0}}">
+      <text class="no-more-text">已经到底了</text>
+    </view>
 
-  <!-- 到底提示 -->
-  <view class="no-more" wx:if="{{!loading && !hasMore && records.length > 0}}">
-    <text>—— 已经到底了 ——</text>
   </view>
-</view>
+</view>
\ No newline at end of file
diff --git a/pages/escort/recordlist.wxss b/pages/escort/recordlist.wxss
index 627a47e..4e1bdaf 100644
--- a/pages/escort/recordlist.wxss
+++ b/pages/escort/recordlist.wxss
@@ -1,180 +1,245 @@
+/* pages/escort/recordlist.wxss
+   设计方向：本页是「一单一卡」的预约记录表，扫读优先。
+   - 配色并入全站暖橙体系（doc/DESIGN.md）：令牌来自 app.wxss，本页不再留副本；
+     状态色只用 §三 四档，旧的金色体系与全部渐变已移除
+   - 顶部筛选做成吸顶横滑胶囊：选中态 = 浅橙底 + 2rpx 实心橙描边 + 暖橙字，
+     未选中 = 纸面安静胶囊；胶囊带文字标签，颜色只做强化（§四.8）
+   - 卡面走「白底 + 发丝边 + 紧阴影」（中性 --shadow-card，28rpx 圆角），
+     与首页、清单页同一套白面语言
+   - 卡内四段：类型 + 状态 → 时间 → 就诊信息 → 费用 + 支付状态；
+     长文本（需求、陪诊记录）交给详情页，保证每张卡一眼看完
+   - 形状锁定：卡 28rpx、状态胶囊 10rpx、筛选胶囊 999rpx
+   - 字号阶梯：费用 34 / 类型 30 / 就诊信息 28 / 时间 · 胶囊 24（rpx），
+     全页最小 24rpx(12px)，达可读下限 */
 page {
-  background-color: #FAF6F1;
+  background-color: var(--paper);
+}
+
+.page-bg {
+  min-height: 100vh;
+  background: var(--paper);
 }
 
 .container {
-  min-height: 100vh;
-  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
+  padding: 0 32rpx calc(40rpx + env(safe-area-inset-bottom));
 }
 
-/* 状态筛选标签 */
-.status-tabs {
-  display: flex;
-  align-items: center;
-  gap: 4rpx;
-  padding: 24rpx 32rpx;
-  background: #FFFFFF;
+/* ===== 顶部筛选：吸顶横滑 ===== */
+.tabs-bar {
   position: sticky;
   top: 0;
   z-index: 10;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
-  overflow-x: auto;
+  padding: 20rpx 0 12rpx;
+  background: var(--paper);
+}
+
+.tabs-scroll {
   white-space: nowrap;
 }
 
-.tab-item {
+.tabs {
   display: inline-flex;
   align-items: center;
-  justify-content: center;
-  padding: 12rpx 28rpx;
+  gap: 16rpx;
+  padding: 0 32rpx;
+}
+
+.tab {
+  display: inline-flex;
+  align-items: baseline;
+  padding: 12rpx 26rpx;
+  border: 2rpx solid var(--line);
+  border-radius: 999rpx;
+  background: transparent;
+  transition: background-color 0.15s ease;
+}
+
+.tab:active {
+  opacity: 0.75;
+}
+
+.tab-label {
   font-size: 26rpx;
-  color: #6B7280;
-  background: #F3F4F6;
-  border-radius: 32rpx;
-  transition: all 0.2s;
+  color: var(--muted);
 }
 
-.tab-item.active {
-  color: #FFFFFF;
-  background: linear-gradient(135deg, #D4A853 0%, #D4A853 100%);
-  font-weight: 600;
+.tab-count {
+  margin-left: 6rpx;
+  font-size: 24rpx;
+  color: var(--muted);
 }
 
-/* 记录列表 */
+/* 选中：浅橙底 + 实心橙描边 + 暖橙字（浅橙底 5.96:1，过 AA） */
+.tab.active {
+  background: var(--brand-soft);
+  border-color: var(--brand-strong);
+}
+
+.tab.active .tab-label,
+.tab.active .tab-count {
+  color: var(--brand-ink);
+}
+
+/* ===== 记录列表 ===== */
 .record-list {
-  padding: 20rpx 24rpx;
   display: flex;
   flex-direction: column;
-  gap: 20rpx;
+  gap: 24rpx;
+  margin-top: 12rpx;
 }
 
 .record-card {
-  background: #FFFFFF;
-  border-radius: 20rpx;
-  padding: 28rpx;
-  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
+  padding: 28rpx 28rpx 24rpx;
+  border-radius: 28rpx;
+  background: var(--white);
+  border: 2rpx solid var(--line);
+  box-shadow: var(--shadow-card);
+  transition: transform 0.15s ease;
 }
 
-/* 卡片头部 */
-.card-header {
+.record-card:active {
+  transform: scale(0.99);
+}
+
+.card-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 20rpx;
-  padding-bottom: 20rpx;
-  border-bottom: 1rpx solid #F3F4F6;
-}
-
-.header-left {
-  display: flex;
-  flex-direction: column;
-  gap: 8rpx;
 }
 
 .record-type {
   font-size: 30rpx;
-  font-weight: 600;
-  color: #1F2937;
+  font-weight: 700;
+  color: var(--ink);
+  letter-spacing: 1rpx;
 }
 
-.record-time {
+/* 状态胶囊：底色 + 描边 + 字色三件套，颜色只做强化，文字才是信息（§三） */
+.status-chip {
+  flex-shrink: 0;
+  padding: 4rpx 16rpx;
+  border: 2rpx solid transparent;
+  border-radius: 10rpx;
   font-size: 24rpx;
-  color: #9CA3AF;
+  font-weight: 700;
+  letter-spacing: 1rpx;
+  line-height: 1.4;
+  white-space: nowrap;
 }
 
-.status-badge {
-  font-size: 24rpx;
-  font-weight: 600;
-  padding: 8rpx 20rpx;
-  border-radius: 8rpx;
-}
-
-/* 卡片内容 */
-.card-body {
+.card-time {
   display: flex;
-  flex-direction: column;
-  gap: 16rpx;
-  margin-bottom: 20rpx;
+  align-items: center;
+  margin-top: 14rpx;
+}
+
+.time-text {
+  margin-left: 8rpx;
+  font-size: 24rpx;
+  color: var(--muted);
+}
+
+.card-info {
+  margin-top: 6rpx;
 }
 
 .info-row {
   display: flex;
-  align-items: center;
+  align-items: baseline;
+  margin-top: 12rpx;
 }
 
 .info-label {
-  font-size: 26rpx;
-  color: #9CA3AF;
-  width: 140rpx;
   flex-shrink: 0;
+  width: 130rpx;
+  font-size: 26rpx;
+  color: var(--muted);
 }
 
 .info-value {
-  font-size: 26rpx;
-  color: #374151;
   flex: 1;
+  min-width: 0;
+  font-size: 28rpx;
+  color: var(--ink-2);
 }
 
-/* 卡片底部 */
-.card-footer {
+.card-foot {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding-top: 20rpx;
-  border-top: 1rpx solid #F3F4F6;
+  margin-top: 22rpx;
+  padding-top: 22rpx;
+  border-top: 2rpx solid var(--line);
 }
 
-.fee-wrap {
+.fee {
   display: flex;
   align-items: baseline;
 }
 
-.fee-label {
+.fee-sym {
   font-size: 26rpx;
-  color: #6B7280;
-}
-
-.fee-value {
-  font-size: 32rpx;
-  color: #D4A853;
   font-weight: 700;
+  color: var(--brand-strong);
 }
 
+.fee-num {
+  margin-left: 2rpx;
+  font-size: 34rpx;
+  font-weight: 700;
+  color: var(--brand-strong);
+}
 
+.foot-right {
+  display: flex;
+  align-items: center;
+}
 
-/* 空状态 */
+/* 支付状态胶囊：比订单状态轻一档（无底色的中性档只留字与描边） */
+.pay-chip {
+  margin-right: 12rpx;
+  padding: 4rpx 14rpx;
+  border: 2rpx solid transparent;
+  border-radius: 10rpx;
+  font-size: 24rpx;
+  letter-spacing: 1rpx;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+
+/* ===== 空 / 加载 / 到底 ===== */
 .empty-state {
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  padding-top: 200rpx;
+  padding-top: 180rpx;
 }
 
 .empty-text {
-  font-size: 30rpx;
-  color: #9CA3AF;
   margin-top: 24rpx;
+  font-size: 28rpx;
+  color: var(--muted);
 }
 
 .empty-subtext {
-  font-size: 26rpx;
-  color: #D1D5DB;
-  margin-top: 12rpx;
+  margin-top: 10rpx;
+  font-size: 24rpx;
+  color: var(--muted);
 }
 
-/* 加载中 */
 .loading-wrap {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 40rpx;
+  padding: 60rpx;
 }
 
-/* 到底提示 */
 .no-more {
+  padding: 36rpx 0 8rpx;
   text-align: center;
-  padding: 32rpx;
-  font-size: 24rpx;
-  color: #D1D5DB;
 }
+
+.no-more-text {
+  font-size: 24rpx;
+  color: var(--muted);
+}
\ No newline at end of file