From 5fb0f9a1a717141548e1198d16ac36f70903a710 Mon Sep 17 00:00:00 2001
From: lq <workerqi@163.com>
Date: Wed, 12 Aug 2026 13:52:54 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=8D=87=E7=BA=A7=E4=BA=86=E4=B8=80?=
 =?UTF-8?q?=E4=BA=9B=E8=A7=86=E8=A7=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vite-tailwindcss/package.json                 |    2 +
 vite-tailwindcss/pnpm-lock.yaml               |   26 +-
 vite-tailwindcss/src/components/AppToast.vue  |    8 +-
 .../src/components/BorderStylePicker.vue      |  143 ++
 .../src/components/DanmakuLayer.vue           |   54 +-
 .../src/components/GiftEffect3D.vue           | 1135 +++++++++++++++
 .../src/components/ImageField.vue             |    6 +-
 .../src/components/MediaPickerModal.vue       |   18 +-
 .../src/components/PhotoGallery.vue           |  294 +++-
 .../src/composables/borderStyles.js           |   58 +-
 .../src/composables/heartCollage.js           |   41 +-
 .../src/composables/posterDefaults.js         |   46 +-
 .../src/composables/resizeImage.js            |   12 +
 vite-tailwindcss/src/directives/reveal.js     |    3 +-
 vite-tailwindcss/src/main.js                  |    1 +
 vite-tailwindcss/src/style.css                |  288 ++++
 vite-tailwindcss/src/styles/animations.css    |   51 +-
 vite-tailwindcss/src/styles/frames.css        |  580 ++++++++
 vite-tailwindcss/src/utils/danmakuColors.js   |   66 +-
 vite-tailwindcss/src/utils/themes.js          |  125 ++
 .../src/views/admin/AdminEditor.vue           | 1261 +++++++++++++----
 .../src/views/admin/AdminLogin.vue            |   22 +-
 .../views/admin/HotelWelcomePosterAdmin.vue   |   74 +-
 vite-tailwindcss/src/views/hb/index.vue       |  202 ++-
 .../src/views/hb/templates/ClassicPoster.vue  |   56 +-
 .../src/views/hb/templates/SplitPoster.vue    |   52 +-
 vite-tailwindcss/src/views/index/index.vue    | 1234 ++++++++++++----
 27 files changed, 5032 insertions(+), 826 deletions(-)
 create mode 100644 vite-tailwindcss/src/components/BorderStylePicker.vue
 create mode 100644 vite-tailwindcss/src/components/GiftEffect3D.vue
 create mode 100644 vite-tailwindcss/src/utils/themes.js

diff --git a/vite-tailwindcss/package.json b/vite-tailwindcss/package.json
index 8bcb065..33826c7 100644
--- a/vite-tailwindcss/package.json
+++ b/vite-tailwindcss/package.json
@@ -13,6 +13,7 @@
     "@ant-design/icons-vue": "^7.0.1",
     "@fingerprintjs/fingerprintjs": "^5.2.0",
     "@fontsource/cinzel": "^5.3.0",
+    "@fontsource/fusion-pixel-12px-proportional-sc": "^5.3.0",
     "@fontsource/great-vibes": "^5.3.0",
     "@fontsource/liu-jian-mao-cao": "^5.3.0",
     "@fontsource/long-cang": "^5.3.0",
@@ -34,6 +35,7 @@
     "qrcode": "^1.5.4",
     "swiper": "^11.0.5",
     "tailwindcss": "^4.1.4",
+    "three": "^0.185.1",
     "vue": "^3.5.13",
     "vue-router": "^4.2.5"
   },
diff --git a/vite-tailwindcss/pnpm-lock.yaml b/vite-tailwindcss/pnpm-lock.yaml
index 3b28d6a..6c99638 100644
--- a/vite-tailwindcss/pnpm-lock.yaml
+++ b/vite-tailwindcss/pnpm-lock.yaml
@@ -20,6 +20,9 @@ importers:
       '@fontsource/cinzel':
         specifier: ^5.3.0
         version: 5.3.0
+      '@fontsource/fusion-pixel-12px-proportional-sc':
+        specifier: ^5.3.0
+        version: 5.3.0
       '@fontsource/great-vibes':
         specifier: ^5.3.0
         version: 5.3.0
@@ -55,7 +58,7 @@ importers:
         version: 4.2.6(vue@3.5.40)
       axios:
         specifier: ^1.6.2
-        version: 1.18.1(debug@4.4.3)
+        version: 1.18.1
       echarts:
         specifier: ^6.1.0
         version: 6.1.0
@@ -83,6 +86,9 @@ importers:
       tailwindcss:
         specifier: ^4.1.4
         version: 4.3.3
+      three:
+        specifier: ^0.185.1
+        version: 0.185.1
       vue:
         specifier: ^3.5.13
         version: 3.5.40
@@ -317,6 +323,9 @@ packages:
   '@fontsource/cinzel@5.3.0':
     resolution: {integrity: sha512-KEOYTsrRppW0uRIPWBDPrQgunCS6f8u4nzZxYRBfo9SCknKojLYjK7B0ZoVmJhyVLefz271ZQRF9EOpHZlfhRw==}
 
+  '@fontsource/fusion-pixel-12px-proportional-sc@5.3.0':
+    resolution: {integrity: sha512-PDgfCunZbVgPM5/HSaP29KjQaxLUsVAng6urpSQXww87e9AOfA7j/PDzWYO/Q8yhPyaw6oUGh5s2eGln1HSgPw==}
+
   '@fontsource/great-vibes@5.3.0':
     resolution: {integrity: sha512-1w60cXzXnC9V4y943po8044O1mqRQBiTTK75h7OpZE+1VQtx+KlAAzoIyEE5KNzu05gUpxaCQg7cbL7ITSwegQ==}
 
@@ -1274,6 +1283,9 @@ packages:
   text-segmentation@1.0.3:
     resolution: {integrity: sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==}
 
+  three@0.185.1:
+    resolution: {integrity: sha512-5aojFCXKwnjBRZvUnt3WFfEcvUJgkN5LlijRFN95hMy8WVkG4I0QNcJE+OuWvuJ0bOdStrbfXn0pkd6/QyiAlg==}
+
   throttle-debounce@5.0.2:
     resolution: {integrity: sha512-B71/4oyj61iNH0KeCamLuE2rmKuTO5byTOSVwECM5FA7TiAiAW+UqTKZ9ERueC4qvgSttUhdmq1mXC3kJqGX7A==}
     engines: {node: '>=12.22'}
@@ -1521,6 +1533,8 @@ snapshots:
 
   '@fontsource/cinzel@5.3.0': {}
 
+  '@fontsource/fusion-pixel-12px-proportional-sc@5.3.0': {}
+
   '@fontsource/great-vibes@5.3.0': {}
 
   '@fontsource/liu-jian-mao-cao@5.3.0': {}
@@ -1919,9 +1933,9 @@ snapshots:
 
   asynckit@0.4.0: {}
 
-  axios@1.18.1(debug@4.4.3):
+  axios@1.18.1:
     dependencies:
-      follow-redirects: 1.16.0(debug@4.4.3)
+      follow-redirects: 1.16.0
       form-data: 4.0.6
       https-proxy-agent: 5.0.1
       proxy-from-env: 2.1.0
@@ -2061,9 +2075,7 @@ snapshots:
       locate-path: 5.0.0
       path-exists: 4.0.0
 
-  follow-redirects@1.16.0(debug@4.4.3):
-    optionalDependencies:
-      debug: 4.4.3
+  follow-redirects@1.16.0: {}
 
   form-data@4.0.6:
     dependencies:
@@ -2382,6 +2394,8 @@ snapshots:
     dependencies:
       utrie: 1.0.2
 
+  three@0.185.1: {}
+
   throttle-debounce@5.0.2: {}
 
   tinyglobby@0.2.17:
diff --git a/vite-tailwindcss/src/components/AppToast.vue b/vite-tailwindcss/src/components/AppToast.vue
index d45cf98..6981aa9 100644
--- a/vite-tailwindcss/src/components/AppToast.vue
+++ b/vite-tailwindcss/src/components/AppToast.vue
@@ -51,13 +51,13 @@ const { toasts, dismiss } = useToast()
   padding: 12px 14px;
   border-radius: 16px;
   background: rgba(253, 251, 247, 0.96);
-  border: 0.5px solid rgba(168, 140, 107, 0.35);
+  border: 0.5px solid rgba(var(--c-primary-rgb), 0.35);
   box-shadow: 0 12px 32px rgba(92, 74, 53, 0.16);
   backdrop-filter: blur(8px);
   color: #5c4a35;
 }
 .app-toast.is-success {
-  border-color: rgba(168, 140, 107, 0.5);
+  border-color: rgba(var(--c-primary-rgb), 0.5);
 }
 .app-toast.is-error {
   border-color: rgba(196, 120, 110, 0.55);
@@ -73,8 +73,8 @@ const { toasts, dismiss } = useToast()
   justify-content: center;
   margin-top: 1px;
   font-size: 11px;
-  background: rgba(168, 140, 107, 0.14);
-  color: #a88c6b;
+  background: rgba(var(--c-primary-rgb), 0.14);
+  color: var(--c-primary);
 }
 .app-toast.is-error .app-toast-icon {
   background: rgba(196, 120, 110, 0.16);
diff --git a/vite-tailwindcss/src/components/BorderStylePicker.vue b/vite-tailwindcss/src/components/BorderStylePicker.vue
new file mode 100644
index 0000000..44d2098
--- /dev/null
+++ b/vite-tailwindcss/src/components/BorderStylePicker.vue
@@ -0,0 +1,143 @@
+<template>
+  <div class="bsp">
+    <div v-for="group in BORDER_STYLE_GROUPS" :key="group.key" class="bsp-group">
+      <div class="bsp-group-title">{{ group.label }}</div>
+      <div class="bsp-grid">
+        <button
+          v-for="b in group.items"
+          :key="b.value"
+          type="button"
+          class="bsp-cell"
+          :class="{ active: modelValue === b.value }"
+          :title="b.label"
+          @click="$emit('update:modelValue', b.value)"
+        >
+          <span class="bsp-thumb-box" :style="{ height: thumbHeight(b) / 2 + 'px' }">
+            <span
+              class="bsp-thumb"
+              :class="{ 'gf-shape-shadow': b.shaped }"
+              :style="{ height: thumbHeight(b) + 'px' }"
+            >
+              <span class="bsp-frame" :class="borderClass(b.value)">
+                <img :src="sample" alt="" loading="lazy" />
+              </span>
+            </span>
+          </span>
+          <span class="bsp-name">{{ b.label }}</span>
+          <i v-if="modelValue === b.value" class="bsp-check fa-solid fa-check"></i>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { BORDER_STYLE_GROUPS, borderClass } from '@/composables/borderStyles'
+
+defineProps({
+  modelValue: { type: String, default: 'mat' },
+  /** 缩略示例图 */
+  sample: {
+    type: String,
+    default: 'https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=200&q=80',
+  },
+})
+defineEmits(['update:modelValue'])
+
+/** 缩略图按 2 倍渲染再 scale(0.5)，保证固定像素边框细节比例正确；高度随样式推荐宽高比 */
+const THUMB_W = 120
+function thumbHeight(b) {
+  const parts = String(b.ratio || '4 / 5').split('/')
+  const w = parseFloat(parts[0]) || 4
+  const h = parseFloat(parts[1]) || 5
+  return Math.round((THUMB_W * h) / w)
+}
+</script>
+
+<style scoped>
+.bsp {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.bsp-group-title {
+  font-size: 11px;
+  color: var(--c-primary);
+  letter-spacing: 0.12em;
+  margin-bottom: 6px;
+}
+.bsp-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
+  gap: 8px;
+}
+.bsp-cell {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+  padding: 10px 4px 7px;
+  border: 1px solid rgba(var(--c-primary-rgb), 0.14);
+  border-radius: 10px;
+  background: #fff;
+  cursor: pointer;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+}
+.bsp-cell:hover {
+  border-color: rgba(var(--c-primary-rgb), 0.4);
+  background: #fbf9f4;
+}
+.bsp-cell.active {
+  border-color: var(--c-primary);
+  background: var(--c-bg);
+  box-shadow: 0 0 0 2px rgba(var(--c-primary-rgb), 0.18);
+}
+.bsp-thumb-box {
+  display: flex;
+  justify-content: center;
+  width: 60px;
+}
+.bsp-thumb {
+  flex: none;
+  width: 120px;
+  transform: scale(0.5);
+  transform-origin: top center;
+}
+.bsp-frame {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+/* 缩略图太窄，邮戳 SVG 会压住 POST CARD 字样，仅保留字样 */
+.bsp-frame.gf-postcard::after {
+  display: none;
+}
+.bsp-name {
+  font-size: 10px;
+  color: #6b6863;
+  letter-spacing: 0.05em;
+  white-space: nowrap;
+}
+.bsp-cell.active .bsp-name {
+  color: var(--c-primary);
+  font-weight: 600;
+}
+.bsp-check {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  z-index: 1;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--c-primary);
+  color: #fff;
+  font-size: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 6px rgba(120, 90, 60, 0.3);
+}
+</style>
diff --git a/vite-tailwindcss/src/components/DanmakuLayer.vue b/vite-tailwindcss/src/components/DanmakuLayer.vue
index f884a60..da979b8 100644
--- a/vite-tailwindcss/src/components/DanmakuLayer.vue
+++ b/vite-tailwindcss/src/components/DanmakuLayer.vue
@@ -10,25 +10,22 @@
       v-for="row in rows"
       :key="row.id"
       class="danmaku-item"
-      :class="{
-        'danmaku-item--grad': row.isGradient,
-        'danmaku-item--grad-light': row.isGradient && row.textLight,
-        'danmaku-item--grad-dark': row.isGradient && !row.textLight,
-      }"
+      :class="{ 'danmaku-item--grad': row.isGradient }"
       :style="row.style"
       @animationend="onEnded(row.id)"
     >
-      <span class="danmaku-name" :style="{ color: row.color }">{{ row.name }}</span>
-      <span class="danmaku-sep" :style="{ color: row.color }">：</span>
-      <span class="danmaku-text" :style="{ color: row.color }">{{ row.content }}</span>
+      <!-- 渐变款：颜色落在文字上（clip 渐变字），底子是通透白纱 -->
       <span
-        v-if="showTime && row.timeLabel"
-        class="danmaku-time"
-        :class="{
-          'danmaku-time--on-light': row.isGradient && row.textLight,
-          'danmaku-time--on-dark': row.isGradient && !row.textLight,
-        }"
-      >{{ row.timeLabel }}</span>
+        v-if="row.textGradient"
+        class="danmaku-body danmaku-body--grad"
+        :style="{ backgroundImage: row.textGradient }"
+      ><span class="danmaku-name">{{ row.name }}</span><span class="danmaku-sep">：</span><span class="danmaku-text">{{ row.content }}</span></span>
+      <template v-else>
+        <span class="danmaku-name" :style="{ color: row.color }">{{ row.name }}</span>
+        <span class="danmaku-sep" :style="{ color: row.color }">：</span>
+        <span class="danmaku-text" :style="{ color: row.color }">{{ row.content }}</span>
+      </template>
+      <span v-if="showTime && row.timeLabel" class="danmaku-time">{{ row.timeLabel }}</span>
     </div>
   </div>
 </template>
@@ -173,7 +170,6 @@ const buildRow = (item, { force = false } = {}) => {
   const totalDelay = delay + slot.extraDelay
   // 轨道分布在当前弹幕层内部（由 area 控制层高度）
   const topPct = TRACKS <= 1 ? 50 : 12 + (slot.track / (TRACKS - 1)) * 70
-  const isGradient = typeof tint.background === 'string' && tint.background.includes('gradient')
 
   const timeLabel = force
     ? '刚刚'
@@ -184,8 +180,8 @@ const buildRow = (item, { force = false } = {}) => {
     name: item.name,
     content: item.content,
     color: resolveDanmakuColor(item.color),
-    textLight: !!tint.textLight,
-    isGradient,
+    isGradient: !!tint.textGradient,
+    textGradient: tint.textGradient || '',
     timeLabel,
     style: {
       top: `${topPct}%`,
@@ -377,7 +373,7 @@ defineExpose({ refresh: fetchList, pushItem })
   white-space: nowrap;
   padding: 5px 14px;
   border-radius: 999px;
-  border: 1px solid rgba(168, 140, 107, 0.28);
+  border: 1px solid rgba(var(--c-primary-rgb), 0.28);
   box-shadow: 0 4px 14px rgba(88, 68, 42, 0.08);
   font-size: 12px;
   letter-spacing: 0.06em;
@@ -389,14 +385,18 @@ defineExpose({ refresh: fetchList, pushItem })
   max-width: none;
 }
 .danmaku-item--grad {
-  backdrop-filter: saturate(1.2) blur(8px);
+  backdrop-filter: saturate(1.15) blur(7px);
   font-weight: 500;
 }
-.danmaku-item--grad-light {
-  text-shadow: 0 1px 2px rgba(20, 10, 20, 0.45), 0 0 1px rgba(0, 0, 0, 0.2);
+/* 渐变字：颜色裁切进文字，底子保持通透 */
+.danmaku-body--grad {
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
 }
-.danmaku-item--grad-dark {
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
+.danmaku-body--grad .danmaku-sep,
+.danmaku-body--grad .danmaku-text {
+  opacity: 1;
 }
 .danmaku-name { font-weight: 600; }
 .danmaku-sep { opacity: 0.9; }
@@ -407,12 +407,6 @@ defineExpose({ refresh: fetchList, pushItem })
   font-size: 10px;
   letter-spacing: 0.04em;
 }
-.danmaku-time--on-light {
-  color: rgba(255, 255, 255, 0.88);
-}
-.danmaku-time--on-dark {
-  color: rgba(74, 52, 32, 0.72);
-}
 @keyframes danmaku-fly {
   from { transform: translateX(0); }
   to { transform: translateX(calc(-100vw - 100%)); }
diff --git a/vite-tailwindcss/src/components/GiftEffect3D.vue b/vite-tailwindcss/src/components/GiftEffect3D.vue
new file mode 100644
index 0000000..9901b71
--- /dev/null
+++ b/vite-tailwindcss/src/components/GiftEffect3D.vue
@@ -0,0 +1,1135 @@
+<template>
+  <Teleport to="body">
+    <div ref="stageRef" class="g3-stage" aria-hidden="true">
+      <div class="g3-dim" :class="{ on: dimOn }"></div>
+      <div class="g3-aura" :class="{ on: dimOn }" :style="auraStyle"></div>
+      <div v-if="textOn" :key="textKey" class="g3-text" :class="{ leaving: textLeaving }">
+        <!-- 渐变填充必须放在每个字上：字有独立 transform/filter 动画，
+             父级 background-clip:text 无法透过这些独立绘制层裁切（只剩描边）。
+             每种礼物有专属文字入场（g3-anim-*），错峰间隔由 preset.text.charStep 控制 -->
+        <span class="g3-text-main" :class="`g3-anim-${textAnim}`" :style="textGlowStyle">
+          <span
+            v-for="(ch, i) in textChars"
+            :key="i"
+            class="g3-ch"
+            :style="[textFillStyle, { animationDelay: `${i * textCharStep}ms` }]"
+          >{{ ch }}</span>
+        </span>
+        <span v-if="countShown > 1" class="g3-text-mult" :style="[textFillStyle, textGlowStyle]">×{{ countShown }}</span>
+      </div>
+      <div v-if="flashKey > 0" :key="flashKey" class="g3-flash" :style="flashStyle"></div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+/**
+ * 礼物特效 · 立体炫效（three.js 渲染后端）
+ * - 与 GiftEffect.vue 同 API：play / playSequence / clear / stop + play-start 事件
+ * - three 动态 import，不进首屏包；WebGL 不可用时 emit('fallback') 由宿主降级 2D
+ * - 粒子：ShaderMaterial 点精灵（心/星/花瓣/软点/光斑五种纹理），CPU 更新对象池
+ * - 文字：DOM 书法字层（逐字浮现 + 渐变金字 + ×N 滚动）
+ */
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { GIFT_LABEL_MAP } from '@/utils/giftTypes'
+import { isIOS } from '@/composables/useAndroidOptimize'
+
+const emit = defineEmits(['play-start', 'fallback'])
+
+const stageRef = ref(null)
+const dimOn = ref(false)
+const textOn = ref(false)
+const textLeaving = ref(false)
+const textKey = ref(0)
+const textChars = ref([])
+const textFillStyle = ref({})
+const textGlowStyle = ref({})
+const textAnim = ref('beat')
+const textCharStep = ref(70)
+const countShown = ref(1)
+const auraStyle = ref({})
+const flashKey = ref(0)
+const flashStyle = ref({})
+
+/* ============ 8 种礼物 3D 预设 ============ */
+const POOL_MAX = isIOS ? 340 : 640
+const DPR_CAP = isIOS ? 1.5 : 2
+
+const PRESETS = {
+  // 520：爱心爆发 + 心形轮廓冲击环（标志性：一圈爱心排成的大心向外扩）
+  '520': {
+    duration: 3600,
+    gradient: ['#fff0f3', '#f0b8c4', '#d4788c', '#9e3d52'],
+    glow: '#e8a8b6',
+    palette: ['#e8a0b0', '#d4788c', '#c45c72', '#f0c4ce', '#ffd9e0'],
+    text: { anim: 'beat', delay: 450, charStep: 90 },   // 心跳弹现
+    emitters: [
+      { at: 0, kind: 'heart', count: 42, spawn: 'burst', speed: [16, 44], size: [4.2, 8.5], life: [1500, 2400], gravity: -13, drag: 0.965 },
+      { at: 120, kind: 'heart', count: 30, spawn: 'heartRing', speed: [11, 15], size: [3, 5], life: [1700, 2300] },
+      { at: 640, kind: 'heart', count: 24, spawn: 'heartRing', speed: [14, 18], size: [2.6, 4.4], life: [1500, 2100] },
+      { at: 0, kind: 'spark', count: 40, spawn: 'burst', speed: [30, 74], size: [1.6, 3.2], life: [700, 1300], gravity: -6, drag: 0.97 },
+      { at: 0, kind: 'dot', count: 30, spawn: 'ring', speed: [26, 34], size: [1.6, 2.8], life: [900, 1400] },
+    ],
+  },
+  // 1314：漫天金星雨 + 金色流星划过
+  '1314': {
+    duration: 4400,
+    gradient: ['#fff8e6', '#f0d78a', '#d4b060', '#9a7a28'],
+    glow: '#e8d090',
+    palette: ['#e8c878', '#d4b060', '#f0e0a8', '#ffedb8', '#c9a24a'],
+    text: { anim: 'dust', delay: 620, charStep: 45 },   // 金粉凝聚
+    emitters: [
+      { stream: [0, 1800], rate: 40, kind: 'star', spawn: 'rainTop', speed: [24, 40], size: [3.2, 6.2], life: [1700, 2700], gravity: -16, drag: 0.995, turb: 6 },
+      { at: 200, kind: 'spark', count: 2, spawn: 'meteor', size: [5, 7], life: [800, 1000] },
+      { at: 900, kind: 'spark', count: 2, spawn: 'meteor', size: [4.5, 6.5], life: [800, 1000] },
+      { at: 0, kind: 'spark', count: 34, spawn: 'burst', speed: [26, 60], size: [1.6, 3], life: [700, 1200], gravity: -4 },
+      { at: 0, kind: 'dot', count: 30, spawn: 'ring', speed: [24, 32], size: [1.5, 2.6], life: [900, 1400] },
+      { at: 520, kind: 'heart', count: 14, spawn: 'burst', speed: [12, 26], size: [3.5, 6], life: [1400, 2000], gravity: -10 },
+    ],
+  },
+  // 长长久久：双色双螺旋缠绕上升（深红链 × 浅粉链，DNA 般长久缠绵）
+  forever: {
+    duration: 4000,
+    gradient: ['#fff2f4', '#e0a0aa', '#b85f6c', '#7a303c'],
+    glow: '#d4909c',
+    palette: ['#c97a86', '#b85f6c', '#e0a8b0', '#f0c8d0', '#a84d5c'],
+    text: { anim: 'climb', delay: 700, charStep: 130 }, // 逐字攀升（呼应螺旋上升）
+    emitters: [
+      { stream: [0, 2600], rate: 30, kind: 'heart', spawn: 'helix', size: [3.2, 5.6], life: [1600, 2200], palette: ['#c45c72', '#b85f6c', '#a84d5c'], helix: { radius: 15, angSpeed: 2.4, rise: 18, from: -34 } },
+      { stream: [0, 2600], rate: 30, kind: 'heart', spawn: 'helix', size: [3, 5.2], life: [1600, 2200], palette: ['#f0c8d0', '#ffd9e0', '#e8b4c0'], helix: { radius: 15, angSpeed: 2.4, rise: 18, from: -34, phase: Math.PI } },
+      { stream: [200, 2400], rate: 16, kind: 'spark', spawn: 'helix', size: [1.6, 2.6], life: [1100, 1700], helix: { radius: 8, angSpeed: 3.1, rise: 18, from: -30, phase: Math.PI / 2 } },
+      { at: 0, kind: 'dot', count: 22, spawn: 'burst', speed: [10, 26], size: [1.4, 2.4], life: [1000, 1600], gravity: -4 },
+    ],
+  },
+  // 白头偕老：漫天白瓣如雪，铺满慢落（开场即有一批，随后持续飘落）
+  bald: {
+    duration: 4200,
+    gradient: ['#ffffff', '#f4efe6', '#ddd0b4', '#b8a878'],
+    glow: '#ebe2d2',
+    palette: ['#f8f4ec', '#f2ebe0', '#e6dcc8', '#fffdf8', '#d4c4a4'],
+    text: { anim: 'snow', delay: 650, charStep: 110 }, // 雪落显字
+    emitters: [
+      { at: 0, kind: 'petal', count: 14, spawn: 'rainTop', speed: [7, 14], size: [5, 9], life: [2600, 3600], gravity: -3.5, turb: 16, drag: 0.995 },
+      { stream: [80, 2500], rate: 34, kind: 'petal', spawn: 'rainTop', speed: [6, 13], size: [4.5, 8.5], life: [2400, 3600], gravity: -3.5, turb: 16, drag: 0.995 },
+      { at: 0, kind: 'spark', count: 18, spawn: 'burst', speed: [10, 28], size: [1.4, 2.4], life: [1200, 2000], gravity: -2 },
+    ],
+  },
+  // 天作之合：星河盘旋 + 三波流星划过夜空
+  heaven: {
+    duration: 4000,
+    gradient: ['#f2f7fc', '#a8c4e0', '#6a92b8', '#3d6288'],
+    glow: '#a8c4dc',
+    palette: ['#9eb8d8', '#b8d0e8', '#d4e4f4', '#eaf3fb', '#7a9ec4'],
+    camera: { yaw: 0.14 },
+    text: { anim: 'twinkle', delay: 780, charStep: 90 }, // 星光闪烁点亮
+    emitters: [
+      { at: 0, kind: 'star', count: 108, spawn: 'galaxy', size: [2, 5], life: [3400, 3900], galaxy: { rMin: 7, rMax: 32, flat: 0.24 } },
+      { at: 0, kind: 'dot', count: 36, spawn: 'galaxy', size: [1.2, 2.2], life: [3400, 3900], galaxy: { rMin: 18, rMax: 44, flat: 0.3, back: -18 } },
+      { at: 400, kind: 'spark', count: 2, spawn: 'meteor', size: [5.5, 7.5], life: [800, 1100] },
+      { at: 1200, kind: 'spark', count: 2, spawn: 'meteor', size: [5, 7], life: [800, 1100] },
+      { at: 2000, kind: 'spark', count: 2, spawn: 'meteor', size: [4.5, 6.5], life: [800, 1100] },
+      { at: 260, kind: 'spark', count: 18, spawn: 'burst', speed: [16, 40], size: [1.6, 3], life: [800, 1400], gravity: -3 },
+    ],
+  },
+  // 相濡以沫：一滴水坠落，激起层层涟漪 + 水花
+  moisten: {
+    duration: 4200,
+    gradient: ['#f0faf8', '#8ec8be', '#5a9e94', '#2f6a62'],
+    glow: '#8ec8be',
+    palette: ['#7eb8ae', '#9ed0c8', '#c4e8e2', '#e0f5f0', '#5a9e94'],
+    text: { anim: 'wave', delay: 720, charStep: 100 }, // 水面浮出（水滴落地后）
+    emitters: [
+      { at: 0, kind: 'dot', count: 1, spawn: 'drop', size: [5.5, 6.5], life: [560, 620], gravity: -30 },
+      { at: 520, kind: 'dot', count: 30, spawn: 'ring', speed: [26, 34], size: [1.8, 3], life: [1300, 1700] },
+      { at: 560, kind: 'spark', count: 26, spawn: 'shell', speed: [22, 26], size: [1.6, 2.8], life: [1200, 1600] },
+      { at: 860, kind: 'spark', count: 30, spawn: 'ring', speed: [30, 38], size: [1.6, 2.8], life: [1300, 1700] },
+      { at: 1180, kind: 'dot', count: 28, spawn: 'ring', speed: [34, 42], size: [1.5, 2.6], life: [1300, 1700] },
+      { at: 1400, kind: 'heart', count: 10, spawn: 'burst', speed: [8, 20], size: [3.2, 5.4], life: [1300, 1900], gravity: -8 },
+    ],
+  },
+  // 佳偶天成：暖棕与象牙白两团星互相环绕、渐渐靠近，相拥时迸发
+  match: {
+    duration: 4000,
+    gradient: ['#fff6f0', '#e0b0a0', '#c48878', '#8a5048'],
+    glow: '#d4a898',
+    palette: ['#d4a090', '#e0b8a8', '#f0d4c8', '#ffe4d6', '#c48878'],
+    text: { anim: 'meet', delay: 640, charStep: 80 }, // 双向合拢（呼应双星相遇）
+    emitters: [
+      { at: 0, kind: 'heart', count: 22, spawn: 'twin', size: [3.4, 6], life: [2600, 3200], palette: ['#c48878', '#d4a090', '#b87068'], twin: { radius: 12, angSpeed: 1.9, phase: 0, shrink: 2.6 } },
+      { at: 0, kind: 'heart', count: 22, spawn: 'twin', size: [3.4, 6], life: [2600, 3200], palette: ['#ffe4d6', '#fff2ea', '#f0d4c8'], twin: { radius: 12, angSpeed: 1.9, phase: Math.PI, shrink: 2.6 } },
+      { at: 0, kind: 'spark', count: 24, spawn: 'burst', speed: [16, 42], size: [1.5, 2.8], life: [800, 1400], gravity: -4 },
+      { at: 2050, kind: 'spark', count: 44, spawn: 'burst', speed: [26, 66], size: [1.8, 3.4], life: [800, 1400], gravity: -6 },
+      { at: 2050, kind: 'dot', count: 28, spawn: 'ring', speed: [24, 32], size: [1.5, 2.6], life: [900, 1300] },
+    ],
+  },
+  // 永结同心：万点聚合成心（轮廓清晰）→ 心跳 → 迸散
+  concentric: {
+    duration: 5600,
+    gradient: ['#fffaf2', '#ecd8bc', '#d4b080', '#a87860'],
+    glow: '#e0c8a8',
+    palette: ['#d4b896', '#e0c8b0', '#f0dcc8', '#ffe9d2', '#c9a090', '#e8b4bc'],
+    text: { anim: 'converge', delay: 1450, charStep: 60 }, // 聚拢成字（与粒子聚心同步）
+    emitters: [
+      { at: 0, kind: 'heart', count: isIOS ? 90 : 150, spawn: 'heartCloud', size: [2.4, 4.6], life: [5600, 5600], converge: { travel: [800, 1500], burstAt: 3500, burstSpeed: [22, 52] } },
+      { at: 0, kind: 'spark', count: isIOS ? 40 : 70, spawn: 'heartCloud', size: [1.5, 2.6], life: [5600, 5600], converge: { travel: [900, 1600], burstAt: 3500, burstSpeed: [26, 60] } },
+      { stream: [600, 3200], rate: 10, kind: 'star', spawn: 'orbitRim', size: [1.8, 3.4], life: [1400, 2200], orbitRim: { radius: 30, angSpeed: 0.9 } },
+      { at: 3500, kind: 'dot', count: 40, spawn: 'ring', speed: [28, 38], size: [1.6, 3], life: [1000, 1500] },
+      { at: 3620, kind: 'dot', count: 30, spawn: 'ring', speed: [20, 28], size: [1.4, 2.6], life: [1000, 1500] },
+    ],
+  },
+}
+
+/* ============ three 懒加载与渲染器 ============ */
+let THREE = null
+let renderer = null
+let scene = null
+let camera = null
+let groups = null            // kind -> { points, geo, mat, pool: [] }
+let rafId = 0
+let running = false
+let lastTs = 0
+let failed = false
+let readyPromise = null
+
+/* 播放状态 */
+let active = null            // { giftType, preset, start, emitters(计划), name, countTarget }
+let playQueue = []
+let queueTimer = null
+let countTweenRaf = 0
+let textTimers = []
+
+const rand = (a, b) => a + Math.random() * (b - a)
+const pick = (arr) => arr[Math.floor(Math.random() * arr.length)]
+
+function hexToRgb(hex) {
+  const n = parseInt(hex.slice(1), 16)
+  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]
+}
+
+function hexToRgbaStr(hex, a) {
+  const n = parseInt(hex.slice(1), 16)
+  return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${a})`
+}
+
+/* ---- 点精灵纹理（canvas 白色绘制，颜色由顶点色着色） ---- */
+function makeSpriteTexture(kind) {
+  const S = 64
+  const c = document.createElement('canvas')
+  c.width = S
+  c.height = S
+  const g = c.getContext('2d')
+  g.clearRect(0, 0, S, S)
+  if (kind === 'heart') {
+    g.translate(S / 2, S / 2 - 4)
+    const s = 22
+    g.beginPath()
+    g.moveTo(0, -s * 0.25)
+    g.bezierCurveTo(s * 0.5, -s * 0.65, s * 1.1, s * 0.15, 0, s * 0.85)
+    g.bezierCurveTo(-s * 1.1, s * 0.15, -s * 0.5, -s * 0.65, 0, -s * 0.25)
+    g.closePath()
+    g.fillStyle = '#fff'
+    g.fill()
+  } else if (kind === 'star') {
+    g.translate(S / 2, S / 2)
+    g.beginPath()
+    for (let i = 0; i < 8; i += 1) {
+      const r = i % 2 === 0 ? 26 : 10
+      const a = (i / 8) * Math.PI * 2 - Math.PI / 2
+      if (i === 0) g.moveTo(Math.cos(a) * r, Math.sin(a) * r)
+      else g.lineTo(Math.cos(a) * r, Math.sin(a) * r)
+    }
+    g.closePath()
+    g.fillStyle = '#fff'
+    g.fill()
+  } else if (kind === 'petal') {
+    g.translate(S / 2, S / 2)
+    const s = 24
+    g.beginPath()
+    g.moveTo(0, s * 0.5)
+    g.bezierCurveTo(-s * 0.8, s * 0.2, -s * 0.6, -s * 0.8, 0, -s)
+    g.bezierCurveTo(s * 0.6, -s * 0.8, s * 0.8, s * 0.2, 0, s * 0.5)
+    g.closePath()
+    g.fillStyle = '#fff'
+    g.fill()
+  } else if (kind === 'spark') {
+    const rg = g.createRadialGradient(S / 2, S / 2, 0, S / 2, S / 2, S / 2)
+    rg.addColorStop(0, 'rgba(255,255,255,1)')
+    rg.addColorStop(0.25, 'rgba(255,255,255,0.9)')
+    rg.addColorStop(0.6, 'rgba(255,255,255,0.22)')
+    rg.addColorStop(1, 'rgba(255,255,255,0)')
+    g.fillStyle = rg
+    g.fillRect(0, 0, S, S)
+  } else {
+    const rg = g.createRadialGradient(S / 2, S / 2, 0, S / 2, S / 2, S / 2)
+    rg.addColorStop(0, 'rgba(255,255,255,1)')
+    rg.addColorStop(0.55, 'rgba(255,255,255,0.75)')
+    rg.addColorStop(1, 'rgba(255,255,255,0)')
+    g.fillStyle = rg
+    g.fillRect(0, 0, S, S)
+  }
+  const tex = new THREE.CanvasTexture(c)
+  tex.needsUpdate = true
+  return tex
+}
+
+const VERT = `
+attribute float aSize;
+attribute vec3 aColor;
+attribute float aAlpha;
+attribute float aRot;
+varying vec3 vColor;
+varying float vAlpha;
+varying float vRot;
+void main() {
+  vColor = aColor;
+  vAlpha = aAlpha;
+  vRot = aRot;
+  vec4 mv = modelViewMatrix * vec4(position, 1.0);
+  gl_PointSize = aAlpha <= 0.001 ? 0.0 : aSize * (400.0 / -mv.z);
+  gl_Position = projectionMatrix * mv;
+}`
+
+const FRAG = `
+uniform sampler2D uMap;
+varying vec3 vColor;
+varying float vAlpha;
+varying float vRot;
+void main() {
+  if (vAlpha <= 0.001) discard;
+  vec2 uv = gl_PointCoord - 0.5;
+  float c = cos(vRot); float s = sin(vRot);
+  uv = vec2(uv.x * c - uv.y * s, uv.x * s + uv.y * c) + 0.5;
+  vec4 tex = texture2D(uMap, uv);
+  gl_FragColor = vec4(vColor, vAlpha) * tex;
+}`
+
+function makeGroup(kind, max) {
+  const geo = new THREE.BufferGeometry()
+  const pos = new Float32Array(max * 3)
+  const col = new Float32Array(max * 3)
+  const size = new Float32Array(max)
+  const alpha = new Float32Array(max)
+  const rot = new Float32Array(max)
+  geo.setAttribute('position', new THREE.BufferAttribute(pos, 3))
+  geo.setAttribute('aColor', new THREE.BufferAttribute(col, 3))
+  geo.setAttribute('aSize', new THREE.BufferAttribute(size, 1))
+  geo.setAttribute('aAlpha', new THREE.BufferAttribute(alpha, 1))
+  geo.setAttribute('aRot', new THREE.BufferAttribute(rot, 1))
+  // 全部普通 alpha 混合：请柬页面底色偏亮，加法混合会「加到白」而隐形；
+  // 光感由柔光纹理 + 暗场层承担
+  const mat = new THREE.ShaderMaterial({
+    uniforms: { uMap: { value: makeSpriteTexture(kind) } },
+    vertexShader: VERT,
+    fragmentShader: FRAG,
+    transparent: true,
+    depthWrite: false,
+    depthTest: false,
+    blending: THREE.NormalBlending,
+  })
+  const points = new THREE.Points(geo, mat)
+  points.frustumCulled = false
+  scene.add(points)
+  const pool = []
+  for (let i = 0; i < max; i += 1) pool.push({ alive: false })
+  return { geo, mat, points, pool, max }
+}
+
+async function ensureReady() {
+  if (failed) return false
+  if (renderer) return true
+  if (!readyPromise) {
+    readyPromise = (async () => {
+      try {
+        THREE = await import('three')
+        const canvas = document.createElement('canvas')
+        canvas.className = 'g3-canvas'
+        renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: false, powerPreference: 'high-performance' })
+        renderer.setClearColor(0x000000, 0)
+        scene = new THREE.Scene()
+        camera = new THREE.PerspectiveCamera(55, 1, 0.1, 500)
+        camera.position.set(0, 0, 86)
+        // 心/瓣不透明混合 => 大池；光效叠加 => 均分
+        groups = {
+          heart: makeGroup('heart', Math.floor(POOL_MAX * 0.34)),
+          star: makeGroup('star', Math.floor(POOL_MAX * 0.19)),
+          petal: makeGroup('petal', Math.floor(POOL_MAX * 0.16)),
+          spark: makeGroup('spark', Math.floor(POOL_MAX * 0.14)),
+          dot: makeGroup('dot', Math.floor(POOL_MAX * 0.17)),
+        }
+        stageRef.value?.appendChild(canvas)
+        onResize3D()
+        return true
+      } catch (err) {
+        failed = true
+        emit('fallback', err)
+        return false
+      }
+    })()
+  }
+  return readyPromise
+}
+
+function onResize3D() {
+  if (!renderer || !camera) return
+  const w = Math.max(1, window.innerWidth || 1)
+  const h = Math.max(1, window.innerHeight || 1)
+  renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, DPR_CAP))
+  renderer.setSize(w, h, true)
+  camera.aspect = w / h
+  camera.updateProjectionMatrix()
+}
+
+/* ---- 粒子生成 ---- */
+function spawnOne(emitter, preset, elapsed) {
+  const group = groups[emitter.kind]
+  if (!group) return
+  const p = group.pool.find((x) => !x.alive)
+  if (!p) return
+  const [s0, s1] = emitter.size || [2, 4]
+  const [l0, l1] = emitter.life || [1000, 1800]
+  // emitter 可覆盖配色（如双螺旋/双星的两股分色）
+  const rgb = hexToRgb(pick(emitter.palette || preset.palette))
+  Object.assign(p, {
+    alive: true,
+    age: 0,
+    life: rand(l0, l1),
+    size: rand(s0, s1),
+    r: rgb[0], g: rgb[1], b: rgb[2],
+    alpha: 0,
+    rot: rand(0, Math.PI * 2),
+    rotSpeed: rand(-2.4, 2.4),
+    mode: 'ballistic',
+    gravity: emitter.gravity || 0,
+    drag: emitter.drag != null ? emitter.drag : 0.985,
+    turb: emitter.turb || 0,
+    seed: Math.random() * 10,
+    x: 0, y: 0, z: 0, vx: 0, vy: 0, vz: 0,
+  })
+
+  const spawn = emitter.spawn
+  if (spawn === 'burst') {
+    const th = rand(0, Math.PI * 2)
+    const ph = Math.acos(rand(-1, 1))
+    const sp = rand(emitter.speed[0], emitter.speed[1])
+    p.x = rand(-3, 3); p.y = rand(-1, 5); p.z = rand(-3, 3)
+    p.vx = Math.sin(ph) * Math.cos(th) * sp
+    p.vy = Math.cos(ph) * sp * 1.08 + 6
+    // 完整球面：一部分粒子朝镜头飞来，掠过镜头前放大消失
+    p.vz = Math.sin(ph) * Math.sin(th) * sp
+  } else if (spawn === 'shell') {
+    const th = rand(0, Math.PI * 2)
+    const ph = Math.acos(rand(-1, 1))
+    const sp = rand(emitter.speed[0], emitter.speed[1])
+    p.x = 0; p.y = 2; p.z = 0
+    p.vx = Math.sin(ph) * Math.cos(th) * sp
+    p.vy = Math.cos(ph) * sp
+    p.vz = Math.sin(ph) * Math.sin(th) * sp
+    p.drag = 0.988
+  } else if (spawn === 'ring') {
+    const a = rand(0, Math.PI * 2)
+    const sp = rand(emitter.speed[0], emitter.speed[1])
+    p.x = Math.cos(a) * 2; p.y = rand(0, 3); p.z = Math.sin(a) * 2
+    p.vx = Math.cos(a) * sp
+    p.vy = rand(-2, 4)
+    p.vz = Math.sin(a) * sp * 0.55
+    p.drag = 0.975
+  } else if (spawn === 'rainTop') {
+    p.x = rand(-26, 26); p.y = rand(42, 58); p.z = rand(-14, 6)
+    p.vx = rand(-4, 4)
+    p.vy = -rand(emitter.speed[0], emitter.speed[1])
+    p.vz = rand(-2, 2)
+  } else if (spawn === 'helix') {
+    const hx = emitter.helix
+    const ang = elapsed * 0.001 * hx.angSpeed * Math.PI + (hx.phase || 0)
+    p.mode = 'orbit'
+    p.orbit = { r: hx.radius + rand(-1.6, 1.6), a: ang, w: hx.angSpeed, rise: hx.rise, rDrift: 0 }
+    p.y = hx.from + rand(-2, 2)
+    p.x = Math.cos(ang) * p.orbit.r
+    p.z = Math.sin(ang) * p.orbit.r
+  } else if (spawn === 'galaxy') {
+    const gx = emitter.galaxy
+    const r0 = rand(gx.rMin, gx.rMax)
+    const a = rand(0, Math.PI * 2)
+    p.mode = 'orbit'
+    p.orbit = { r: r0, a, w: 1.7 / Math.sqrt(Math.max(4, r0)) * 3.2, rise: 0, rDrift: 0, cz: gx.back || 0 }
+    p.y = rand(-1, 1) * r0 * gx.flat + 4
+    p.x = Math.cos(a) * r0
+    p.z = (gx.back || 0) + Math.sin(a) * r0 * 0.6
+  } else if (spawn === 'twin') {
+    const tw = emitter.twin
+    p.mode = 'orbit'
+    p.orbit = {
+      r: tw.radius + rand(-3, 3),
+      a: (tw.phase || 0) + rand(-0.5, 0.5),
+      w: tw.angSpeed,
+      rise: 0,
+      rDrift: -(tw.shrink || 0),
+    }
+    p.y = rand(-6, 8)
+    p.x = Math.cos(p.orbit.a) * p.orbit.r
+    p.z = Math.sin(p.orbit.a) * p.orbit.r * 0.7
+  } else if (spawn === 'orbitRim') {
+    const or = emitter.orbitRim
+    p.mode = 'orbit'
+    p.orbit = { r: or.radius + rand(-2, 2), a: rand(0, Math.PI * 2), w: or.angSpeed, rise: rand(-1.5, 1.5), rDrift: 0 }
+    p.y = rand(-14, 16)
+    p.x = Math.cos(p.orbit.a) * p.orbit.r
+    p.z = Math.sin(p.orbit.a) * p.orbit.r * 0.5
+  } else if (spawn === 'heartRing') {
+    // 心形轮廓冲击环：沿心形曲线取点，沿径向外扩（520 标志性）
+    const t = rand(0, Math.PI * 2)
+    const hx = 16 * Math.sin(t) ** 3
+    const hy = 13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t)
+    const s0h = 0.55
+    p.x = hx * s0h
+    p.y = hy * s0h + 4
+    p.z = rand(-2, 2)
+    const len = Math.hypot(hx, hy) || 1
+    const sp = rand(emitter.speed[0], emitter.speed[1])
+    p.vx = (hx / len) * sp
+    p.vy = (hy / len) * sp
+    p.vz = 0
+    p.drag = 0.985
+  } else if (spawn === 'meteor') {
+    // 流星斜穿（heaven 标志性）
+    const fromLeft = Math.random() < 0.5
+    p.x = fromLeft ? rand(-34, -26) : rand(26, 34)
+    p.y = rand(22, 42)
+    p.z = rand(-12, -2)
+    p.vx = (fromLeft ? 1 : -1) * rand(52, 82)
+    p.vy = -rand(16, 30)
+    p.vz = 0
+    p.drag = 0.997
+    p.rotSpeed = 0
+  } else if (spawn === 'drop') {
+    // 水滴坠落触发涟漪（moisten 标志性）
+    p.x = 0
+    p.y = rand(42, 48)
+    p.z = 0
+    p.vx = 0
+    p.vy = -rand(70, 84)
+    p.vz = 0
+    p.drag = 1
+  } else if (spawn === 'heartCloud') {
+    // 目标：3D 心形点云（经典心形参数方程 + 内部随机填充 + 厚度）
+    // 55% 粒子贴着轮廓分布，让聚合后的心形边界清晰可辨
+    const cv = emitter.converge
+    const t = rand(0, Math.PI * 2)
+    const fill = Math.random() < 0.55 ? rand(0.93, 1) : Math.sqrt(rand(0.3, 0.9))
+    const hx = 16 * Math.sin(t) ** 3
+    const hy = 13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t)
+    const scale = 1.45
+    p.mode = 'converge'
+    p.tx = hx * fill * scale
+    p.ty = hy * fill * scale + 4
+    p.tz = (1 - fill) * rand(-7, 7)
+    const th = rand(0, Math.PI * 2)
+    const ph = Math.acos(rand(-1, 1))
+    const r0 = rand(44, 62)
+    p.x = p.sx = Math.sin(ph) * Math.cos(th) * r0
+    p.y = p.sy = Math.cos(ph) * r0 + 4
+    p.z = p.sz = Math.sin(ph) * Math.sin(th) * r0 * 0.6
+    p.travel = rand(cv.travel[0], cv.travel[1])
+    p.burstAt = cv.burstAt
+    p.burstSpeed = cv.burstSpeed
+    p.held = false
+  }
+
+  // 近景层：约 1/3 的自由粒子直接生成在贴近镜头处，
+  // 与中景（文字平面）粒子拉开纵深 —— 从屏幕跟前一直铺到文字那里
+  if (Math.random() < 0.34 && (spawn === 'burst' || spawn === 'shell' || spawn === 'ring' || spawn === 'rainTop' || spawn === 'meteor')) {
+    p.z += rand(22, 56)
+    // 近景视野更窄，压缩横向出生范围避免生成在屏外
+    p.x *= 0.45
+    if (spawn === 'rainTop') p.y = rand(14, 26)
+    p.size *= 0.82
+  }
+}
+
+/* ---- 每帧更新 ---- */
+function updateParticles(dt, now) {
+  const elapsed = active ? now - active.start : Infinity
+  let anyAlive = false
+  for (const kind of Object.keys(groups)) {
+    const grp = groups[kind]
+    const posAttr = grp.geo.attributes.position
+    const colAttr = grp.geo.attributes.aColor
+    const sizeAttr = grp.geo.attributes.aSize
+    const alphaAttr = grp.geo.attributes.aAlpha
+    const rotAttr = grp.geo.attributes.aRot
+    for (let i = 0; i < grp.max; i += 1) {
+      const p = grp.pool[i]
+      if (!p.alive) {
+        alphaAttr.array[i] = 0
+        continue
+      }
+      p.age += dt * 1000
+      if (p.age >= p.life) {
+        p.alive = false
+        alphaAttr.array[i] = 0
+        continue
+      }
+      anyAlive = true
+      const lifeP = p.age / p.life
+
+      if (p.mode === 'converge') {
+        const tp = Math.min(1, p.age / p.travel)
+        const e = 1 - (1 - tp) ** 3
+        if (elapsed >= p.burstAt && !p.burst) {
+          // 聚合完成后爆发：沿当前位置方向飞散
+          p.burst = true
+          p.mode = 'ballistic'
+          const len = Math.hypot(p.x, p.y - 4, p.z) || 1
+          const sp = rand(p.burstSpeed[0], p.burstSpeed[1])
+          p.vx = (p.x / len) * sp
+          p.vy = ((p.y - 4) / len) * sp + 8
+          p.vz = (p.z / len) * sp
+          p.gravity = -14
+          p.drag = 0.97
+        } else if (tp >= 1) {
+          // 已就位：心跳脉冲（沿心中心缩放）
+          const beat = 1 + 0.055 * Math.sin((p.age - p.travel) * 0.006 + 0.4)
+          p.x = p.tx * beat
+          p.y = (p.ty - 4) * beat + 4
+          p.z = p.tz * beat
+        } else {
+          p.x = p.sx + (p.tx - p.sx) * e
+          p.y = p.sy + (p.ty - p.sy) * e
+          p.z = p.sz + (p.tz - p.sz) * e
+        }
+      } else if (p.mode === 'orbit') {
+        const o = p.orbit
+        o.a += o.w * dt
+        o.r = Math.max(1.5, o.r + o.rDrift * dt)
+        p.x = Math.cos(o.a) * o.r
+        p.z = (o.cz || 0) + Math.sin(o.a) * o.r * 0.62
+        p.y += (o.rise || 0) * dt
+      } else {
+        p.vy += p.gravity * dt
+        const dragK = p.drag ** (dt * 60)
+        p.vx *= dragK; p.vy *= dragK; p.vz *= dragK
+        if (p.turb) {
+          p.vx += Math.sin(p.age * 0.003 + p.seed * 7) * p.turb * dt
+          p.vz += Math.cos(p.age * 0.0026 + p.seed * 5) * p.turb * 0.6 * dt
+        }
+        p.x += p.vx * dt
+        p.y += p.vy * dt
+        p.z += p.vz * dt
+      }
+
+      p.rot += p.rotSpeed * dt
+      // 透明度：快进慢出
+      const a = lifeP < 0.1 ? lifeP / 0.1 : 1 - ((lifeP - 0.1) / 0.9) ** 1.6
+      const idx3 = i * 3
+      posAttr.array[idx3] = p.x
+      posAttr.array[idx3 + 1] = p.y
+      posAttr.array[idx3 + 2] = p.z
+      colAttr.array[idx3] = p.r
+      colAttr.array[idx3 + 1] = p.g
+      colAttr.array[idx3 + 2] = p.b
+      sizeAttr.array[i] = p.size * (lifeP < 0.12 ? 0.6 + lifeP * 3.4 : 1)
+      alphaAttr.array[i] = Math.max(0, a)
+      rotAttr.array[i] = p.rot
+    }
+    posAttr.needsUpdate = true
+    colAttr.needsUpdate = true
+    sizeAttr.needsUpdate = true
+    alphaAttr.needsUpdate = true
+    rotAttr.needsUpdate = true
+  }
+  return anyAlive
+}
+
+/* ---- 发射计划 ---- */
+function processEmitters(now) {
+  if (!active) return
+  const elapsed = now - active.start
+  for (const em of active.plan) {
+    if (em.done) continue
+    if (em.at != null) {
+      if (elapsed >= em.at) {
+        for (let i = 0; i < em.count; i += 1) spawnOne(em, active.preset, elapsed)
+        em.done = true
+      }
+    } else if (em.stream) {
+      const [from, to] = em.stream
+      if (elapsed < from) continue
+      const until = Math.min(elapsed, to)
+      // 按速率补齐应生成数
+      const should = Math.floor(((until - from) / 1000) * em.rate)
+      while (em.spawned < should) {
+        spawnOne(em, active.preset, elapsed)
+        em.spawned += 1
+      }
+      if (elapsed >= to) em.done = true
+    }
+  }
+}
+
+function animate() {
+  if (!running) return
+  const now = performance.now()
+  const dt = Math.min(0.05, lastTs ? (now - lastTs) / 1000 : 0.016)
+  lastTs = now
+
+  processEmitters(now)
+  const anyAlive = updateParticles(dt, now)
+
+  // 相机微动：轻推近 + 缓慢摇摆
+  if (active) {
+    const elapsed = now - active.start
+    const p = Math.min(1, elapsed / active.preset.duration)
+    const yawAmp = active.preset.camera?.yaw || 0.05
+    camera.position.z = 86 - 10 * (1 - (1 - Math.min(1, p * 2.4)) ** 3)
+    camera.position.x = Math.sin(elapsed * 0.00035) * yawAmp * 40
+    camera.lookAt(0, 2, 0)
+    if (elapsed >= active.preset.duration) {
+      finishActive()
+    }
+  }
+
+  renderer.render(scene, camera)
+
+  if (active || anyAlive || playQueue.length) {
+    rafId = requestAnimationFrame(animate)
+  } else {
+    running = false
+    lastTs = 0
+    renderer.clear()
+  }
+}
+
+function ensureLoop() {
+  if (running) return
+  running = true
+  lastTs = 0
+  rafId = requestAnimationFrame(animate)
+}
+
+/* ---- 文字层 ---- */
+function clearTextTimers() {
+  textTimers.forEach(clearTimeout)
+  textTimers = []
+  if (countTweenRaf) cancelAnimationFrame(countTweenRaf)
+  countTweenRaf = 0
+}
+
+function tweenCount(from, to) {
+  const t0 = performance.now()
+  const dur = 900
+  const step = () => {
+    const p = Math.min(1, (performance.now() - t0) / dur)
+    countShown.value = Math.max(from, Math.round(from + (to - from) * (1 - (1 - p) ** 3)))
+    if (p < 1) countTweenRaf = requestAnimationFrame(step)
+    else countTweenRaf = 0
+  }
+  countTweenRaf = requestAnimationFrame(step)
+}
+
+function showText(giftType, preset, count) {
+  const label = GIFT_LABEL_MAP[giftType] || giftType
+  const tcfg = preset.text || {}
+  textOn.value = false
+  countShown.value = 1
+  textAnim.value = tcfg.anim || 'beat'
+  textCharStep.value = tcfg.charStep != null ? tcfg.charStep : 70
+  const [g0, g1, g2, g3] = preset.gradient
+  textFillStyle.value = {
+    backgroundImage: `linear-gradient(180deg, ${g0} 4%, ${g1} 32%, ${g2} 64%, ${g3} 100%)`,
+    WebkitTextStroke: '1px rgba(255, 255, 255, 0.34)',
+  }
+  // 只留主题色光晕，不加深色投影（暗场已保证对比度，黑影会像污渍）
+  textGlowStyle.value = {
+    filter: `drop-shadow(0 0 18px ${preset.glow}) drop-shadow(0 0 40px ${hexToRgbaStr(preset.glow, 0.4)})`,
+  }
+  // 先看粒子起势，再按礼物专属方式出字
+  textTimers.push(setTimeout(() => {
+    textChars.value = Array.from(label)
+    textKey.value += 1
+    textLeaving.value = false
+    textOn.value = true
+  }, tcfg.delay || 0))
+  if (count > 1) {
+    const revealAt = Math.min(preset.duration * 0.42, 1100)
+    textTimers.push(setTimeout(() => {
+      if (!active) return
+      tweenCount(1, active.countTarget)
+      emit('play-start', { giftType, name: active.name, count: active.countTarget, phase: 'mult' })
+    }, revealAt))
+  }
+  // 收尾淡出
+  textTimers.push(setTimeout(() => { textLeaving.value = true }, preset.duration - 620))
+  textTimers.push(setTimeout(() => { textOn.value = false }, preset.duration))
+}
+
+/* ---- 播放调度（与 2D 版语义一致：队列 + 同礼物叠加 ×N） ---- */
+function normalizePlayItem(item) {
+  if (typeof item === 'string') return { giftType: item, name: '', count: 1 }
+  if (!item || typeof item !== 'object') return null
+  const giftType = item.giftType || item.gift_type || item.type
+  if (!giftType || !PRESETS[giftType]) return null
+  return {
+    giftType,
+    name: String(item.name || '').trim() || '匿名',
+    count: Math.max(1, Number(item.count) || 1),
+  }
+}
+
+function killAllParticles() {
+  if (!groups) return
+  for (const kind of Object.keys(groups)) {
+    for (const p of groups[kind].pool) p.alive = false
+    groups[kind].geo.attributes.aAlpha.array.fill(0)
+    groups[kind].geo.attributes.aAlpha.needsUpdate = true
+  }
+}
+
+function playOne(payload) {
+  const preset = PRESETS[payload.giftType]
+  killAllParticles()
+  clearTextTimers()
+  active = {
+    giftType: payload.giftType,
+    name: payload.name,
+    preset,
+    start: performance.now(),
+    countTarget: payload.count,
+    plan: preset.emitters.map((em) => ({ ...em, done: false, spawned: 0 })),
+  }
+  dimOn.value = true
+  // 中心辉光 + 开场爆闪（key 递增重放动画）
+  auraStyle.value = {
+    background: `radial-gradient(circle, ${hexToRgbaStr(preset.glow, 0.5)} 0%, ${hexToRgbaStr(preset.glow, 0.16)} 40%, rgba(0, 0, 0, 0) 68%)`,
+  }
+  flashStyle.value = {
+    background: `radial-gradient(85% 62% at 50% 44%, rgba(255, 255, 255, 0.95), ${hexToRgbaStr(preset.glow, 0.55)} 45%, rgba(255, 255, 255, 0) 76%)`,
+  }
+  flashKey.value += 1
+  showText(payload.giftType, preset, payload.count)
+  emit('play-start', { giftType: payload.giftType, name: payload.name, count: payload.count, phase: 'main' })
+  ensureLoop()
+}
+
+function finishActive() {
+  active = null
+  dimOn.value = false
+  if (playQueue.length) {
+    clearTimeout(queueTimer)
+    queueTimer = setTimeout(() => {
+      queueTimer = null
+      const next = playQueue.shift()
+      if (next) playOne(next)
+    }, 320)
+  }
+}
+
+function tryBumpSame(payload) {
+  const add = payload.count
+  const last = playQueue[playQueue.length - 1]
+  if (last && last.giftType === payload.giftType && last.name === payload.name) {
+    last.count += add
+    return true
+  }
+  if (active && active.giftType === payload.giftType && active.name === payload.name) {
+    const prevShown = countShown.value
+    active.countTarget += add
+    const preset = active.preset
+    const now = performance.now()
+    // preset.duration 是共享常量不可改；平移 start 保证至少还剩 1.8s 驻留
+    const remain = preset.duration - (now - active.start)
+    if (remain < 1800) active.start = now - (preset.duration - 1800)
+    const elapsed = now - active.start
+    // 补一波粒子
+    const burst = active.plan.find((em) => em.at === 0 && em.spawn === 'burst')
+    const em = burst || active.plan[0]
+    if (em) for (let i = 0; i < Math.min(24, em.count || 20); i += 1) spawnOne(em, preset, elapsed)
+    // 重排文字收尾计时（先清再启动 tween，避免误杀滚动动画）
+    clearTextTimers()
+    textLeaving.value = false
+    // 叠加可能发生在延迟出字之前：清掉的出字计时器需要立即补上
+    if (!textOn.value) {
+      textChars.value = Array.from(GIFT_LABEL_MAP[payload.giftType] || payload.giftType)
+      textKey.value += 1
+      textOn.value = true
+    }
+    tweenCount(Math.max(1, prevShown), active.countTarget)
+    const restMs = preset.duration - (now - active.start)
+    textTimers.push(setTimeout(() => { textLeaving.value = true }, Math.max(200, restMs - 620)))
+    textTimers.push(setTimeout(() => { textOn.value = false }, Math.max(400, restMs)))
+    emit('play-start', { giftType: payload.giftType, name: payload.name, count: active.countTarget, phase: 'mult' })
+    ensureLoop()
+    return true
+  }
+  return false
+}
+
+const play = async (item) => {
+  const payload = normalizePlayItem(item)
+  if (!payload) return
+  const ok = await ensureReady()
+  if (!ok) return
+  if (tryBumpSame(payload)) return
+  if (active) {
+    playQueue.push(payload)
+    return
+  }
+  playOne(payload)
+}
+
+const playSequence = async (items, opts = {}) => {
+  const max = opts.max != null ? opts.max : 10
+  const list = (Array.isArray(items) ? items : [])
+    .map(normalizePlayItem)
+    .filter(Boolean)
+    .slice(0, max)
+  if (!list.length) return
+  const ok = await ensureReady()
+  if (!ok) return
+  clearTimeout(queueTimer)
+  queueTimer = null
+  playQueue = list
+  if (!active) {
+    const next = playQueue.shift()
+    if (next) playOne(next)
+  }
+}
+
+function clearAll() {
+  clearTimeout(queueTimer)
+  queueTimer = null
+  playQueue = []
+  active = null
+  clearTextTimers()
+  textOn.value = false
+  dimOn.value = false
+  killAllParticles()
+  if (renderer) renderer.clear()
+  running = false
+  if (rafId) {
+    cancelAnimationFrame(rafId)
+    rafId = 0
+  }
+}
+
+const onResize = () => onResize3D()
+
+onMounted(() => {
+  window.addEventListener('resize', onResize)
+  // 空闲预热 three 与 WebGL 渲染器，避免首次送礼时等待加载
+  const idle = window.requestIdleCallback || ((fn) => setTimeout(fn, 1200))
+  idle(() => { ensureReady() })
+})
+
+onUnmounted(() => {
+  clearAll()
+  window.removeEventListener('resize', onResize)
+  if (groups) {
+    for (const kind of Object.keys(groups)) {
+      const grp = groups[kind]
+      grp.geo.dispose()
+      grp.mat.uniforms.uMap.value?.dispose?.()
+      grp.mat.dispose()
+      scene?.remove(grp.points)
+    }
+    groups = null
+  }
+  renderer?.dispose()
+  renderer = null
+  scene = null
+  camera = null
+})
+
+defineExpose({ play, playSequence, clear: clearAll, stop: clearAll })
+</script>
+
+<style scoped>
+.g3-stage {
+  position: fixed;
+  inset: 0;
+  z-index: 46;
+  pointer-events: none;
+}
+/* 粒子画布在文字之上：花瓣/爱心从字前飞过更有纵深（暗场/辉光在最底） */
+.g3-stage :deep(.g3-canvas),
+.g3-stage .g3-canvas {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 4;
+}
+/* 暗场：中心留光的压暗（要足够深，粒子与金字才有对比度） */
+.g3-dim {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  background: radial-gradient(95% 74% at 50% 44%, rgba(15, 13, 17, 0.32), rgba(15, 13, 17, 0.66));
+  opacity: 0;
+  transition: opacity 0.3s ease-out;
+}
+.g3-dim.on {
+  opacity: 1;
+}
+/* 中心辉光：礼物主题色的柔光呼吸 */
+.g3-aura {
+  position: absolute;
+  left: 50%;
+  top: 44%;
+  z-index: 1;
+  width: min(88vw, 420px);
+  aspect-ratio: 1;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  transition: opacity 0.45s ease;
+}
+.g3-aura.on {
+  opacity: 0.8;
+  animation: g3AuraPulse 2.4s ease-in-out infinite;
+}
+@keyframes g3AuraPulse {
+  0%, 100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 0.62;
+  }
+  50% {
+    transform: translate(-50%, -50%) scale(1.14);
+    opacity: 0.86;
+  }
+}
+/* 开场爆闪 */
+.g3-flash {
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  opacity: 0;
+  animation: g3Flash 0.55s ease-out forwards;
+}
+@keyframes g3Flash {
+  0% {
+    opacity: 0.95;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+/* 书法文字层 */
+.g3-text {
+  position: absolute;
+  left: 50%;
+  top: 44%;
+  z-index: 3;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+  transition: opacity 0.55s ease, filter 0.55s ease;
+}
+.g3-text.leaving {
+  opacity: 0;
+  filter: blur(6px);
+}
+.g3-text-main {
+  font-family: 'Ma Shan Zheng', var(--font-calligraphy, cursive);
+  font-size: clamp(44px, 17vw, 96px);
+  line-height: 1.15;
+}
+.g3-ch {
+  display: inline-block;
+  opacity: 0;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: g3ChBeat 0.7s cubic-bezier(0.22, 1.6, 0.36, 1) forwards;
+}
+
+/* ===== 每种礼物专属的文字入场 ===== */
+/* 520 · 心跳弹现：从一点猛地弹出，怦然心动 */
+.g3-anim-beat .g3-ch { animation-name: g3ChBeat; animation-duration: 0.7s; animation-timing-function: cubic-bezier(0.22, 1.6, 0.36, 1); }
+@keyframes g3ChBeat {
+  0% { opacity: 0; transform: scale(0.15); }
+  55% { opacity: 1; transform: scale(1.22); }
+  74% { transform: scale(0.94); }
+  100% { opacity: 1; transform: scale(1); }
+}
+/* 1314 · 金粉凝聚：从灼亮金雾中凝出字形 */
+.g3-anim-dust .g3-ch { animation-name: g3ChDust; animation-duration: 0.95s; animation-timing-function: ease-out; }
+@keyframes g3ChDust {
+  0% { opacity: 0; transform: scale(1.4); filter: blur(16px) brightness(2.2); }
+  55% { opacity: 1; filter: blur(4px) brightness(1.4); }
+  100% { opacity: 1; transform: scale(1); filter: blur(0) brightness(1); }
+}
+/* 长长久久 · 逐字攀升：交替左右旋着升起，如螺旋而上 */
+.g3-anim-climb .g3-ch { animation-name: g3ChClimbL; animation-duration: 0.62s; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
+.g3-anim-climb .g3-ch:nth-child(even) { animation-name: g3ChClimbR; }
+@keyframes g3ChClimbL {
+  0% { opacity: 0; transform: translateY(0.72em) rotate(10deg) scale(0.78); }
+  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
+}
+@keyframes g3ChClimbR {
+  0% { opacity: 0; transform: translateY(0.72em) rotate(-10deg) scale(0.78); }
+  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
+}
+/* 白头偕老 · 雪落显字：自上而下轻轻落定 */
+.g3-anim-snow .g3-ch { animation-name: g3ChSnow; animation-duration: 0.95s; animation-timing-function: cubic-bezier(0.3, 1, 0.4, 1); }
+@keyframes g3ChSnow {
+  0% { opacity: 0; transform: translateY(-0.6em) rotate(-3deg); filter: blur(5px); }
+  70% { opacity: 1; transform: translateY(0.03em) rotate(1deg); filter: blur(0.5px); }
+  100% { opacity: 1; transform: translateY(0) rotate(0); filter: blur(0); }
+}
+/* 天作之合 · 星光点亮：闪烁两下后骤然点亮 */
+.g3-anim-twinkle .g3-ch { animation-name: g3ChTwinkle; animation-duration: 0.85s; animation-timing-function: ease-out; }
+@keyframes g3ChTwinkle {
+  0% { opacity: 0; transform: scale(0.92); filter: brightness(2.4); }
+  26% { opacity: 0.9; }
+  36% { opacity: 0.12; }
+  50% { opacity: 1; filter: brightness(1.9); }
+  60% { opacity: 0.35; }
+  76%, 100% { opacity: 1; transform: scale(1); filter: brightness(1); }
+}
+/* 相濡以沫 · 水面浮出：字随波光从水下浮起 */
+.g3-anim-wave .g3-ch { animation-name: g3ChWave; animation-duration: 0.9s; animation-timing-function: cubic-bezier(0.34, 1.3, 0.5, 1); }
+@keyframes g3ChWave {
+  0% { opacity: 0; transform: translateY(0.5em) skewX(-9deg) scale(0.94); filter: blur(4px); }
+  55% { opacity: 1; transform: translateY(-0.08em) skewX(5deg) scale(1.02); filter: blur(1px); }
+  100% { opacity: 1; transform: none; filter: blur(0); }
+}
+/* 佳偶天成 · 双向合拢：字从两侧相向而行，在中线相遇 */
+.g3-anim-meet .g3-ch { animation-name: g3ChMeetL; animation-duration: 0.68s; animation-timing-function: cubic-bezier(0.3, 1.2, 0.4, 1); }
+.g3-anim-meet .g3-ch:nth-child(even) { animation-name: g3ChMeetR; }
+@keyframes g3ChMeetL {
+  0% { opacity: 0; transform: translateX(-1.15em) scale(0.82); filter: blur(3px); }
+  100% { opacity: 1; transform: none; filter: blur(0); }
+}
+@keyframes g3ChMeetR {
+  0% { opacity: 0; transform: translateX(1.15em) scale(0.82); filter: blur(3px); }
+  100% { opacity: 1; transform: none; filter: blur(0); }
+}
+/* 永结同心 · 聚拢成字：从弥散中收束，与粒子聚心同频 */
+.g3-anim-converge .g3-ch { animation-name: g3ChConverge; animation-duration: 1.05s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
+@keyframes g3ChConverge {
+  0% { opacity: 0; transform: scale(2.5); filter: blur(14px); }
+  65% { opacity: 1; filter: blur(1.5px); }
+  100% { opacity: 1; transform: scale(1); filter: blur(0); }
+}
+.g3-text-mult {
+  font-family: 'Ma Shan Zheng', var(--font-calligraphy, cursive);
+  font-size: clamp(30px, 11vw, 64px);
+  line-height: 1;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: g3MultPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+@keyframes g3MultPop {
+  0% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+</style>
diff --git a/vite-tailwindcss/src/components/ImageField.vue b/vite-tailwindcss/src/components/ImageField.vue
index 0f41057..0ddabf6 100644
--- a/vite-tailwindcss/src/components/ImageField.vue
+++ b/vite-tailwindcss/src/components/ImageField.vue
@@ -1,17 +1,17 @@
 <template>
   <div
-    class="relative w-[96px] h-[96px] rounded-xl border border-dashed border-[#a88c6b]/40 bg-[#Fdfbf7] overflow-hidden cursor-pointer hover:border-[#a88c6b] transition-colors group"
+    class="relative w-[96px] h-[96px] rounded-xl border border-dashed border-[var(--c-primary)]/40 bg-[var(--c-paper)] overflow-hidden cursor-pointer hover:border-[var(--c-primary)] transition-colors group"
     @click="$emit('pick')"
   >
     <img v-if="modelValue" :src="modelValue" class="w-full h-full object-cover" />
-    <div v-else class="w-full h-full flex flex-col items-center justify-center text-[#a88c6b]/70 gap-1">
+    <div v-else class="w-full h-full flex flex-col items-center justify-center text-[var(--c-primary)]/70 gap-1">
       <i class="fa-solid fa-image text-lg"></i>
       <span class="text-[10px]">{{ placeholder }}</span>
     </div>
     <div class="absolute inset-0 bg-black/35 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center text-white text-[10px]">
       <i class="fa-solid fa-images mr-1"></i>{{ uploading ? '上传中' : '选择图片' }}
     </div>
-    <div v-if="label" class="absolute left-1 bottom-1 bg-white/80 text-[#a88c6b] text-[9px] px-1 rounded">{{ label }}</div>
+    <div v-if="label" class="absolute left-1 bottom-1 bg-white/80 text-[var(--c-primary)] text-[9px] px-1 rounded">{{ label }}</div>
   </div>
 </template>
 
diff --git a/vite-tailwindcss/src/components/MediaPickerModal.vue b/vite-tailwindcss/src/components/MediaPickerModal.vue
index b8ebacd..1edd9b9 100644
--- a/vite-tailwindcss/src/components/MediaPickerModal.vue
+++ b/vite-tailwindcss/src/components/MediaPickerModal.vue
@@ -8,7 +8,7 @@
     @cancel="$emit('update:open', false)"
   >
     <div class="mp-toolbar">
-      <a-button type="primary" class="!bg-[#a88c6b]" :loading="uploading" @click="triggerUpload">
+      <a-button type="primary" class="!bg-[var(--c-primary)]" :loading="uploading" @click="triggerUpload">
         <i class="fa-solid fa-cloud-arrow-up mr-1"></i>上传新图
       </a-button>
       <a-button :loading="loading" @click="reloadFirstPage">
@@ -153,12 +153,12 @@ watch(
 }
 .mp-hint {
   font-size: 12px;
-  color: #8a8680;
+  color: var(--c-muted);
   margin-left: auto;
 }
 .mp-empty {
   text-align: center;
-  color: #8a8680;
+  color: var(--c-muted);
   padding: 48px 12px;
   font-size: 13px;
 }
@@ -170,8 +170,8 @@ watch(
 }
 .mp-item {
   appearance: none;
-  border: 1px solid rgba(168, 140, 107, 0.28);
-  background: #fdfbf7;
+  border: 1px solid rgba(var(--c-primary-rgb), 0.28);
+  background: var(--c-paper);
   border-radius: 10px;
   padding: 0;
   overflow: hidden;
@@ -181,21 +181,21 @@ watch(
 }
 .mp-item:hover,
 .mp-item.active {
-  border-color: #a88c6b;
-  box-shadow: 0 0 0 2px rgba(168, 140, 107, 0.2);
+  border-color: var(--c-primary);
+  box-shadow: 0 0 0 2px rgba(var(--c-primary-rgb), 0.2);
 }
 .mp-item img {
   display: block;
   width: 100%;
   height: 88px;
   object-fit: cover;
-  background: #f0ebe3;
+  background: var(--c-bg-deep);
 }
 .mp-name {
   display: block;
   padding: 4px 6px;
   font-size: 10px;
-  color: #8a8680;
+  color: var(--c-muted);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/vite-tailwindcss/src/components/PhotoGallery.vue b/vite-tailwindcss/src/components/PhotoGallery.vue
index 8182f59..b0d5e42 100644
--- a/vite-tailwindcss/src/components/PhotoGallery.vue
+++ b/vite-tailwindcss/src/components/PhotoGallery.vue
@@ -1,17 +1,26 @@
 <template>
   <div class="gallery">
-    <!-- 标题区 -->
-    <div v-reveal="'up'" class="text-center mb-5 px-4">
-      <span class="gallery-title calligraphy text-xl text-[#a88c6b] tracking-[0.3em] font-bold block mb-2">{{ page.title }}</span>
-      <span class="gallery-subtitle text-[9px] text-[#8A8680] first-letter:uppercase lowercase tracking-[0.4em] block mb-4">{{ page.subtitle }}</span>
-      <span class="gallery-desc text-[12px] text-[#6b6863] font-light leading-relaxed mx-auto max-w-[280px] tracking-widest block whitespace-pre-wrap">{{ page.desc }}</span>
+    <!-- 标题区：完整模板主题用统一章节头，风格包保留经典排版 -->
+    <SectionHeading
+      v-if="layoutTheme"
+      v-reveal="'up'"
+      :index="pageIndex"
+      :kicker="page.subtitle"
+      :title="page.title"
+      :note="page.desc"
+    />
+    <div v-else v-reveal="'up'" class="text-center mb-5 px-4">
+      <span class="gallery-title calligraphy text-xl text-[var(--c-primary)] tracking-[0.3em] font-bold block mb-2">{{ page.title }}</span>
+      <span class="gallery-subtitle text-[9px] text-[var(--c-muted)] first-letter:uppercase lowercase tracking-[0.4em] block mb-4">{{ page.subtitle }}</span>
+      <span class="gallery-desc text-[12px] text-[var(--c-muted)] font-light leading-relaxed mx-auto max-w-[280px] tracking-widest block whitespace-pre-wrap">{{ page.desc }}</span>
     </div>
 
     <!-- 单图（默认居中卡幅 / 可配置宽度铺满） -->
-    <div v-if="page.type === 'single'" v-reveal="{ variant: 'scale', delay: 100 }"
+    <div v-if="page.type === 'single'" v-reveal="{ variant: singleRevealVariant, delay: 100 }"
          class="w-full mx-auto mt-6" :class="singleWrapClass" :style="singleWrapStyle">
       <div :class="singleFrameClass">
         <img :src="displayImg1" class="preview-img" @click.stop="previewImage(originalImg1)" />
+        <span v-if="showPostmark" class="gf-postmark" aria-hidden="true"></span>
       </div>
     </div>
 
@@ -197,8 +206,13 @@
       </div>
     </div>
 
-    <!-- 爱心拼接：绝对定位心形轮廓 + 串行挂载 -->
-    <div v-else-if="page.type === 'heart-collage'" ref="multiRootRef" class="g-heart mt-6">
+    <!-- 爱心拼接：绝对定位心形轮廓 + 串行挂载；拼合完成后心跳一次并飘散小心心 -->
+    <div
+      v-else-if="page.type === 'heart-collage'"
+      ref="multiRootRef"
+      class="g-heart mt-6"
+      :class="{ 'g-heart-done': heartDone }"
+    >
       <div
         v-for="(slot, imgIdx) in HEART_SLOTS"
         :key="imgIdx"
@@ -211,6 +225,7 @@
           v-reveal="{ variant: heartReveal(imgIdx), immediate: true }"
           class="absolute inset-0 g-heart-cell"
           :class="frameClass"
+          :style="heartCellShape(imgIdx)"
         >
           <img
             :src="displayAt(imgIdx)"
@@ -221,17 +236,81 @@
           />
         </div>
       </div>
+      <template v-if="heartDone">
+        <span class="g-heart-spark g-heart-spark-1" aria-hidden="true">♥</span>
+        <span class="g-heart-spark g-heart-spark-2" aria-hidden="true">♥</span>
+        <span class="g-heart-spark g-heart-spark-3" aria-hidden="true">♥</span>
+      </template>
     </div>
 
-    <div v-else class="text-center text-[#8A8680] text-[12px] mt-6">未识别的版式：{{ page.type }}</div>
+    <!-- 三联屏：三竖条并排，中列上浮错落 -->
+    <div v-else-if="page.type === 'triptych'" class="g-triptych mt-6">
+      <div
+        v-for="(_, imgIdx) in (page.images || []).slice(0, 3)"
+        :key="imgIdx"
+        v-reveal="{ variant: imgIdx === 0 ? 'left' : imgIdx === 2 ? 'right' : 'up', delay: imgIdx * 130 }"
+        class="g-triptych-item"
+        :class="[frameClass, { 'g-triptych-mid': imgIdx === 1 }]"
+      >
+        <img :src="displayAt(imgIdx)" class="preview-img g-cover-img" decoding="async" @click.stop="previewImage(originalAt(imgIdx))" />
+      </div>
+    </div>
+
+    <!-- 胶片连拍：深色胶片条 + 横滑帧 -->
+    <div v-else-if="page.type === 'filmstrip'" v-reveal="{ variant: 'up', delay: 100 }" class="g-filmstrip mt-6">
+      <div class="g-filmstrip-track no-scrollbar">
+        <div
+          v-for="(_, imgIdx) in (page.images || [])"
+          :key="imgIdx"
+          class="g-filmstrip-frame"
+          :class="frameClass"
+        >
+          <img :src="displayAt(imgIdx)" class="preview-img g-cover-img" decoding="async" @click.stop="previewImage(originalAt(imgIdx))" />
+        </div>
+      </div>
+    </div>
+
+    <!-- 扇形叠影：五张卡入场后从底部枢轴展开成扇 -->
+    <div v-else-if="page.type === 'fan'" v-reveal="{ variant: 'scale', delay: 120 }" class="g-fan mt-4">
+      <div
+        v-for="(_, imgIdx) in (page.images || []).slice(0, 5)"
+        :key="imgIdx"
+        class="g-fan-item"
+        :class="frameClass"
+      >
+        <img :src="displayAt(imgIdx)" class="preview-img g-cover-img" decoding="async" @click.stop="previewImage(originalAt(imgIdx))" />
+      </div>
+    </div>
+
+    <!-- 杂志拼贴：横竖交错三行 grid + 串行挂载 -->
+    <div v-else-if="page.type === 'mosaic'" ref="multiRootRef" class="g-mosaic mt-6">
+      <div
+        v-for="(_, imgIdx) in (page.images || []).slice(0, 6)"
+        :key="imgIdx"
+        class="g-mosaic-slot"
+        :class="[`g-mosaic-area-${imgIdx + 1}`, { 'g-mosaic-placeholder': imgIdx >= shownCount }]"
+      >
+        <div
+          v-if="imgIdx < shownCount"
+          v-reveal="{ variant: imgIdx % 2 === 0 ? 'left' : 'right', immediate: true }"
+          class="absolute inset-0"
+          :class="frameClass"
+        >
+          <img :src="displayAt(imgIdx)" class="preview-img g-cover-img" decoding="async" @click.stop="previewImage(originalAt(imgIdx))" />
+        </div>
+      </div>
+    </div>
+
+    <div v-else class="text-center text-[var(--c-muted)] text-[12px] mt-6">未识别的版式：{{ page.type }}</div>
   </div>
 </template>
 
 <script setup>
 import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue'
-import { borderClass } from '@/composables/borderStyles'
+import { borderClass, borderStyleMeta } from '@/composables/borderStyles'
 import { createSequentialMount } from '@/composables/useSequentialMount'
-import { HEART_SLOTS, heartSlotStyle, heartFocusCssAt } from '@/composables/heartCollage'
+import { HEART_SLOTS, heartSlotStyle, heartFocusCssAt, heartCellShape } from '@/composables/heartCollage'
+import SectionHeading from '@/components/themes/SectionHeading.vue'
 
 const NINE_STEP_MS = 300
 const NINE_SETTLE_MS = 400
@@ -264,12 +343,17 @@ const SEQUENTIAL_SELF_TYPES = new Set([
   'nine-grid',
   'one-large-five-small',
   'heart-collage',
+  'mosaic',
 ])
 
 const props = defineProps({
   page: { type: Object, required: true },
   /** 九宫格：开启串行 v-reveal；关闭则一次展示 */
   nineGridAnimate: { type: Boolean, default: false },
+  /** 完整模板主题（magazine/newspaper/pixel/zen）：标题区换统一章节头 */
+  layoutTheme: { type: Boolean, default: false },
+  /** 章节序号（完整模板的编号章节头用） */
+  pageIndex: { type: Number, default: 0 },
 })
 const emit = defineEmits(['preview-image', 'ready'])
 
@@ -475,7 +559,7 @@ const runSequentialByType = async () => {
     await runOlfsSequential()
     return
   }
-  if (type === 'masonry' || type === 'polaroid' || type === 'heart-collage') {
+  if (type === 'masonry' || type === 'polaroid' || type === 'heart-collage' || type === 'mosaic') {
     await runMultiSequential()
   }
 }
@@ -592,15 +676,29 @@ function getRevealConfig(imgIdx) {
   }
 }
 
-const singleWrapClass = computed(() =>
-  props.page.singleWidth === 'full' ? 'max-w-none' : 'max-w-[300px]'
+/** 当前边框元数据（分组/是否异形裁切/推荐宽高比） */
+const singleStyleMeta = computed(() => borderStyleMeta(props.page.borderStyle))
+/** 明信片·异形/横幅风景分组用飞入入场，其余保持缩放入场 */
+const singleRevealVariant = computed(() =>
+  ['postcard', 'scenic'].includes(singleStyleMeta.value?.group) ? 'postcard' : 'scale'
 )
+/** 邮戳盖章：仅 明信片/邮票 两种边框叠加 */
+const showPostmark = computed(() => ['postcard', 'stamp'].includes(props.page.borderStyle))
+
+const singleWrapClass = computed(() => [
+  props.page.singleWidth === 'full'
+    ? 'max-w-none'
+    : (singleStyleMeta.value?.group === 'scenic' ? 'max-w-[340px]' : 'max-w-[300px]'),
+  // mask 裁切类的投影由外层 drop-shadow 提供（box-shadow 会被 mask 裁掉）
+  singleStyleMeta.value?.shaped ? 'gf-shape-shadow' : '',
+].filter(Boolean).join(' '))
 const singleWrapStyle = computed(() => {
+  const ratio = singleStyleMeta.value?.ratio || '4 / 5'
   if (props.page.singleWidth === 'full') {
     const bleed = { width: 'calc(100% + 48px)', marginLeft: '-24px', marginRight: '-24px' }
-    return props.page.singleKeepRatio ? bleed : { ...bleed, aspectRatio: '4 / 5' }
+    return props.page.singleKeepRatio ? bleed : { ...bleed, aspectRatio: ratio }
   }
-  return { aspectRatio: '4 / 5' }
+  return { aspectRatio: ratio }
 })
 const singleFrameClass = computed(() =>
   frameClass.value + (props.page.singleWidth === 'full' && props.page.singleKeepRatio ? ' gf-natural' : '')
@@ -644,6 +742,11 @@ function heartReveal(i) {
   return 'up'
 }
 
+/** 爱心拼合完成：触发一次心跳 + 小心心飘散 */
+const heartDone = computed(() =>
+  props.page?.type === 'heart-collage' && shownCount.value >= HEART_SLOTS.length
+)
+
 </script>
 
 <style scoped>
@@ -753,15 +856,15 @@ function heartReveal(i) {
 .g-arrow {
   position: absolute; top: 50%; transform: translateY(-50%);
   width: 34px; height: 34px; border-radius: 9999px; border: none;
-  background: rgba(255,255,255,0.78); color: #a88c6b; font-size: 20px; line-height: 1;
+  background: rgba(255,255,255,0.78); color: var(--c-primary); font-size: 20px; line-height: 1;
   display: flex; align-items: center; justify-content: center; cursor: pointer;
   box-shadow: 0 2px 8px rgba(0,0,0,0.12); backdrop-filter: blur(6px);
 }
 .g-prev { left: 8px; }
 .g-next { right: 8px; }
 .g-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
-.g-dot { width: 7px; height: 7px; border-radius: 9999px; border: none; background: rgba(168,140,107,0.3); padding: 0; cursor: pointer; transition: all 0.3s; }
-.g-dot.active { background: #a88c6b; width: 18px; border-radius: 9999px; }
+.g-dot { width: 7px; height: 7px; border-radius: 9999px; border: none; background: rgba(var(--c-primary-rgb),0.3); padding: 0; cursor: pointer; transition: all 0.3s; }
+.g-dot.active { background: var(--c-primary); width: 18px; border-radius: 9999px; }
 
 /* 爱心拼接：绝对定位块状心形 + 淡囍底纹 */
 .g-heart {
@@ -816,6 +919,7 @@ function heartReveal(i) {
 }
 .g-heart-cell {
   overflow: hidden;
+  border-radius: 5px;
   transition: transform 0.35s ease, box-shadow 0.35s ease;
 }
 @media (hover: hover) {
@@ -832,6 +936,41 @@ function heartReveal(i) {
   display: block;
 }
 
+/* 拼合完成：整颗心轻跳两下（transform 不影响 absolute 子块布局） */
+.g-heart-done {
+  animation: gHeartBeat 1.15s ease-in-out 0.2s 1;
+}
+@keyframes gHeartBeat {
+  0%, 100% { transform: scale(1); }
+  18% { transform: scale(1.035); }
+  36% { transform: scale(1); }
+  54% { transform: scale(1.02); }
+  70% { transform: scale(1); }
+}
+/* 完成后从心口飘散的小心心 */
+.g-heart-spark {
+  position: absolute;
+  z-index: 4;
+  color: #d9868d;
+  line-height: 1;
+  opacity: 0;
+  pointer-events: none;
+  user-select: none;
+  animation: gHeartSpark 1.6s ease-out forwards;
+}
+.g-heart-spark-1 { left: 20%; top: 24%; font-size: 15px; animation-delay: 0.35s; }
+.g-heart-spark-2 { right: 17%; top: 20%; font-size: 11px; animation-delay: 0.55s; }
+.g-heart-spark-3 { left: 47%; top: 7%; font-size: 13px; animation-delay: 0.75s; }
+@keyframes gHeartSpark {
+  0% { opacity: 0; transform: translateY(8px) scale(0.5); }
+  25% { opacity: 0.9; }
+  100% { opacity: 0; transform: translateY(-36px) scale(1.2) rotate(14deg); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .g-heart-done { animation: none; }
+  .g-heart-spark { display: none; }
+}
+
 .g-polaroid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 10px; padding: 14px 4px 4px; }
 .g-polaroid-slot {
   width: 42%;
@@ -849,5 +988,122 @@ function heartReveal(i) {
 .g-polaroid-item:hover { z-index: 10; }
 .g-polaroid-item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
 
+/* 通用：新版式内图片铺满裁切 */
+.g-cover-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* 三联屏：三竖条，中列上浮（用 margin 错位，避免与 v-reveal 的 transform 冲突） */
+.g-triptych {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+  padding: 14px 4px 0;
+}
+.g-triptych-item {
+  aspect-ratio: 10 / 17;
+  min-width: 0;
+}
+.g-triptych-mid {
+  margin-top: -14px;
+}
+
+/* 胶片连拍：深色胶片条 + 上下齿孔 + 横滑帧 */
+.g-filmstrip {
+  position: relative;
+  background: #26231f;
+  border-radius: 10px;
+  padding: 20px 10px;
+  box-shadow: 0 14px 30px rgba(30, 24, 18, 0.28);
+}
+.g-filmstrip::before,
+.g-filmstrip::after {
+  content: '';
+  position: absolute;
+  left: 10px;
+  right: 10px;
+  height: 8px;
+  background-image: repeating-linear-gradient(90deg, rgba(253, 251, 247, 0.8) 0 10px, transparent 10px 20px);
+  border-radius: 1px;
+  pointer-events: none;
+}
+.g-filmstrip::before { top: 6px; }
+.g-filmstrip::after { bottom: 6px; }
+.g-filmstrip-track {
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+.g-filmstrip-frame {
+  flex: 0 0 76%;
+  min-width: 76%;
+  aspect-ratio: 4 / 5;
+  scroll-snap-align: center;
+}
+
+/* 扇形叠影：五张卡绝对定位于底部枢轴，入场后展开成扇 */
+.g-fan {
+  position: relative;
+  width: 100%;
+  max-width: 340px;
+  margin-inline: auto;
+  aspect-ratio: 1 / 1.04;
+}
+.g-fan-item {
+  position: absolute;
+  left: 50%;
+  bottom: 3%;
+  width: 56%;
+  aspect-ratio: 3 / 4;
+  transform-origin: 50% 94%;
+  transform: translateX(-50%) rotate(0deg);
+  transition: transform 0.9s cubic-bezier(0.34, 1.45, 0.5, 1);
+}
+/* 入场（容器 reveal--in）后按序展开 */
+.reveal--in .g-fan-item:nth-child(1) { transform: translateX(-50%) rotate(-26deg); transition-delay: 0.08s; }
+.reveal--in .g-fan-item:nth-child(2) { transform: translateX(-50%) rotate(-13deg); transition-delay: 0.16s; }
+.reveal--in .g-fan-item:nth-child(3) { transform: translateX(-50%) rotate(0deg); transition-delay: 0.24s; }
+.reveal--in .g-fan-item:nth-child(4) { transform: translateX(-50%) rotate(13deg); transition-delay: 0.32s; }
+.reveal--in .g-fan-item:nth-child(5) { transform: translateX(-50%) rotate(26deg); transition-delay: 0.4s; }
+@media (prefers-reduced-motion: reduce) {
+  .g-fan-item { transition: none; }
+}
+
+/* 杂志拼贴：横竖交错三行 grid */
+.g-mosaic {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  grid-template-areas: 'a b b' 'c c d' 'e f f';
+  gap: 7px;
+  aspect-ratio: 3 / 3.1;
+  padding: 0 2px;
+}
+.g-mosaic-slot {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  contain: layout paint;
+}
+.g-mosaic-area-1 { grid-area: a; }
+.g-mosaic-area-2 { grid-area: b; }
+.g-mosaic-area-3 { grid-area: c; }
+.g-mosaic-area-4 { grid-area: d; }
+.g-mosaic-area-5 { grid-area: e; }
+.g-mosaic-area-6 { grid-area: f; }
+.g-mosaic-placeholder {
+  visibility: hidden;
+  pointer-events: none;
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
 .no-scrollbar::-webkit-scrollbar { display: none; }
 </style>
diff --git a/vite-tailwindcss/src/composables/borderStyles.js b/vite-tailwindcss/src/composables/borderStyles.js
index 4675d78..c8b7e3c 100644
--- a/vite-tailwindcss/src/composables/borderStyles.js
+++ b/vite-tailwindcss/src/composables/borderStyles.js
@@ -1,18 +1,54 @@
 // 相册边框样式定义：供前台 PhotoGallery 渲染与后台 AdminEditor 配置/预览共用
+// - group : base=常规矩形边框；postcard=明信片·异形（mask/clip 裁切类）
+// - shaped: mask/clip 裁切类（box-shadow 会随之被裁掉，需要父级加 .gf-shape-shadow 用 drop-shadow 补投影）
+// - ratio : 单图版式下推荐的宽高比（未设置时默认 4 / 5）
 export const BORDER_STYLES = [
-  { value: 'none', label: '无边框' },
-  { value: 'thin', label: '细金线' },
-  { value: 'mat', label: '白卡纸' },
-  { value: 'rounded', label: '柔圆角' },
-  { value: 'double', label: '双线框' },
-  { value: 'gold', label: '古典金框' },
-  { value: 'shadow', label: '阴影浮起' },
-  { value: 'ink', label: '墨黑描边' },
-  { value: 'card', label: '悬浮卡片' },
-  { value: 'lace', label: '虚线文艺' },
-  { value: 'glow', label: '柔光金晕' },
+  { value: 'none', label: '无边框', group: 'base' },
+  { value: 'thin', label: '细金线', group: 'base' },
+  { value: 'mat', label: '白卡纸', group: 'base' },
+  { value: 'rounded', label: '柔圆角', group: 'base' },
+  { value: 'double', label: '双线框', group: 'base' },
+  { value: 'gold', label: '古典金框', group: 'base' },
+  { value: 'shadow', label: '阴影浮起', group: 'base' },
+  { value: 'ink', label: '墨黑描边', group: 'base' },
+  { value: 'card', label: '悬浮卡片', group: 'base' },
+  { value: 'lace', label: '虚线文艺', group: 'base' },
+  { value: 'glow', label: '柔光金晕', group: 'base' },
+  { value: 'stamp', label: '邮票齿孔', group: 'postcard', shaped: true },
+  { value: 'postcard', label: '复古明信片', group: 'postcard' },
+  { value: 'arch', label: '拱门', group: 'postcard', ratio: '3 / 4' },
+  { value: 'oval', label: '椭圆相框', group: 'postcard', ratio: '3 / 4' },
+  { value: 'circle', label: '正圆相框', group: 'postcard', ratio: '1 / 1' },
+  { value: 'heart', label: '心形', group: 'postcard', shaped: true, ratio: '1 / 1' },
+  { value: 'flower', label: '八瓣花', group: 'postcard', shaped: true, ratio: '1 / 1' },
+  { value: 'leaf', label: '叶形花瓣', group: 'postcard', ratio: '1 / 1' },
+  { value: 'hexagon', label: '六边形', group: 'postcard', shaped: true, ratio: '1 / 1' },
+  { value: 'scallop', label: '扇贝花边', group: 'postcard', shaped: true },
+  { value: 'wave', label: '蕾丝波浪', group: 'postcard', shaped: true },
+  { value: 'zigzag', label: '锯齿花边', group: 'postcard', shaped: true },
+  { value: 'torn', label: '撕纸边', group: 'postcard', shaped: true },
+  { value: 'bevel', label: '切角相纸', group: 'postcard', shaped: true },
+  { value: 'ticket', label: '车票票根', group: 'postcard', shaped: true },
+  { value: 'film', label: '复古胶片', group: 'postcard' },
+  { value: 'cloud', label: '云朵相框', group: 'scenic', shaped: true, ratio: '4 / 3' },
+  { value: 'mist', label: '晨雾朦胧', group: 'scenic', ratio: '4 / 3' },
+  { value: 'bloom', label: '花语卡纸', group: 'scenic', ratio: '4 / 3' },
+  { value: 'panorama', label: '宽幅全景', group: 'scenic', ratio: '16 / 9' },
+  { value: 'ovalwide', label: '横椭圆框', group: 'scenic', ratio: '4 / 3' },
 ]
 
+// 供可视化选择器分组展示
+export const BORDER_STYLE_GROUPS = [
+  { key: 'base', label: '基础边框', items: BORDER_STYLES.filter((b) => b.group === 'base') },
+  { key: 'postcard', label: '明信片 · 异形', items: BORDER_STYLES.filter((b) => b.group === 'postcard') },
+  { key: 'scenic', label: '横幅 · 云雾花', items: BORDER_STYLES.filter((b) => b.group === 'scenic') },
+]
+
+/** 取样式元数据（未知值回落白卡纸） */
+export function borderStyleMeta(style) {
+  return BORDER_STYLES.find((b) => b.value === style) || BORDER_STYLES.find((b) => b.value === 'mat')
+}
+
 export function borderClass(style) {
   const v = BORDER_STYLES.some((b) => b.value === style) ? style : 'mat'
   return 'gf-frame gf-' + v
diff --git a/vite-tailwindcss/src/composables/heartCollage.js b/vite-tailwindcss/src/composables/heartCollage.js
index 59d39fa..e5d8701 100644
--- a/vite-tailwindcss/src/composables/heartCollage.js
+++ b/vite-tailwindcss/src/composables/heartCollage.js
@@ -1,20 +1,23 @@
 import { clampHeroFocus, heroFocusCss } from '@/composables/posterDefaults'
 
-/** 爱心拼接槽位：百分比绝对定位（顶开叉、中最宽、底收尖） */
+/** 爱心拼接槽位：百分比绝对定位（顶开叉、中最宽、底收尖）
+ *  r    : 格子圆角（外缘格用大弧度圆角把方块阶梯"磨"成心形弧线）
+ *  clip : 格子裁切（心尖用 V 形三角收出尖端）
+ *  槽位索引与角色保持不变，存量配置的图片顺序不受影响 */
 export const HEART_SLOTS = [
-  { l: 10, t: 0, w: 32, h: 13 },     // 0 左上叶
-  { l: 58, t: 0, w: 32, h: 13 },     // 1 右上叶
-  { l: 0, t: 14, w: 14, h: 15.5 },   // 2 左外上
-  { l: 0, t: 30.5, w: 14, h: 15.5 }, // 3 左外下
-  { l: 15, t: 14, w: 26, h: 32 },    // 4 左大图
-  { l: 42, t: 14, w: 16, h: 32 },    // 5 中轴
-  { l: 59, t: 14, w: 26, h: 32 },    // 6 右大图
-  { l: 86, t: 14, w: 14, h: 15.5 },  // 7 右外上
-  { l: 86, t: 30.5, w: 14, h: 15.5 }, // 8 右外下
-  { l: 10, t: 47, w: 13, h: 16 },    // 9 左下收腰
-  { l: 24, t: 47, w: 52, h: 16 },    // 10 中下横
-  { l: 77, t: 47, w: 13, h: 16 },    // 11 右下收腰
-  { l: 38, t: 64, w: 24, h: 14 },    // 12 心尖
+  { l: 6, t: 0, w: 38, h: 14, r: '50% 50% 6px 6px' },        // 0 左上叶（半圆顶）
+  { l: 56, t: 0, w: 38, h: 14, r: '50% 50% 6px 6px' },       // 1 右上叶（半圆顶）
+  { l: 0, t: 14.8, w: 13, h: 15, r: '55% 6px 6px 6px' },     // 2 左外上（肩部外弧）
+  { l: 0, t: 30.6, w: 13, h: 14.6, r: '6px 6px 6px 55%' },   // 3 左外下（收腰起弧）
+  { l: 14, t: 14.8, w: 26, h: 30.4 },                        // 4 左大图
+  { l: 41, t: 14.8, w: 18, h: 30.4 },                        // 5 中轴
+  { l: 60, t: 14.8, w: 26, h: 30.4 },                        // 6 右大图
+  { l: 87, t: 14.8, w: 13, h: 15, r: '6px 55% 6px 6px' },    // 7 右外上（肩部外弧）
+  { l: 87, t: 30.6, w: 13, h: 14.6, r: '6px 6px 55% 6px' },  // 8 右外下（收腰起弧）
+  { l: 8, t: 46.2, w: 16, h: 16, r: '6px 6px 6px 65%' },     // 9 左下收腰（底外弧）
+  { l: 25, t: 46.2, w: 50, h: 16 },                          // 10 中下横
+  { l: 76, t: 46.2, w: 16, h: 16, r: '6px 6px 65% 6px' },    // 11 右下收腰（底外弧）
+  { l: 34, t: 63, w: 32, h: 16.5, clip: 'polygon(0 0, 100% 0, 50% 100%)' }, // 12 心尖（V 形）
 ]
 
 export const HEART_SLOT_COUNT = HEART_SLOTS.length
@@ -37,6 +40,16 @@ export function heartSlotLabel(i) {
   return HEART_SLOT_LABELS[i] || `图${i + 1}`
 }
 
+/** 格子形状样式（圆角/裁切），作用在展示格上让整体轮廓贴近心形 */
+export function heartCellShape(i) {
+  const s = HEART_SLOTS[i]
+  if (!s) return {}
+  const style = {}
+  if (s.r) style.borderRadius = s.r
+  if (s.clip) style.clipPath = s.clip
+  return style
+}
+
 export function heartFocusAt(page, i, axis = 'x') {
   const arr = axis === 'y' ? page?.imagesFocusY : page?.imagesFocusX
   const v = Array.isArray(arr) ? arr[i] : 50
diff --git a/vite-tailwindcss/src/composables/posterDefaults.js b/vite-tailwindcss/src/composables/posterDefaults.js
index 6ffc8a9..2126e4f 100644
--- a/vite-tailwindcss/src/composables/posterDefaults.js
+++ b/vite-tailwindcss/src/composables/posterDefaults.js
@@ -16,6 +16,48 @@ export const POSTER_TEMPLATES = [
   { value: 'split', label: '左图右文', desc: '竖排书法 + 右侧宴席信息' },
 ]
 
+/**
+ * 海报风格模板（5 套配色皮肤，竖版/横版通用）
+ * - deep/mid/gold 供后台色卡预览
+ * - sealColor/sealFill：canvas 囍字印章用色（canvas 不认 CSS 变量）
+ * - shotBg：保存长图（html2canvas）的底色
+ */
+export const POSTER_THEMES = [
+  {
+    value: 'redgold', label: '朱红鎏金', desc: '经典中国红 + 鎏金描边',
+    deep: '#7a0000', mid: '#9b0000', gold: '#f0d78c',
+    sealColor: '#d4af37', sealFill: 'rgba(155, 0, 0, 0.5)', shotBg: '#7a0000',
+  },
+  {
+    value: 'burgundy', label: '酒红丝绒', desc: '深酒红绒面 + 玫瑰金',
+    deep: '#4a1220', mid: '#6b1d30', gold: '#e2b98f',
+    sealColor: '#d9a05b', sealFill: 'rgba(90, 22, 40, 0.55)', shotBg: '#4a1220',
+  },
+  {
+    value: 'navygold', label: '藏蓝烫金', desc: '午夜藏蓝 + 亮金烫印',
+    deep: '#101f38', mid: '#1a2f52', gold: '#e8cf96',
+    sealColor: '#d4b060', sealFill: 'rgba(16, 31, 56, 0.6)', shotBg: '#101f38',
+  },
+  {
+    value: 'inkjade', label: '黛绿描金', desc: '墨玉黛绿 + 青金描线',
+    deep: '#132a24', mid: '#1d3a32', gold: '#d8c493',
+    sealColor: '#c9b37e', sealFill: 'rgba(19, 42, 36, 0.6)', shotBg: '#132a24',
+  },
+  {
+    value: 'rosewood', label: '绯梅胭脂', desc: '绯梅粉绒 + 香槟金',
+    deep: '#5c1f30', mid: '#7d2c42', gold: '#f0d3b2',
+    sealColor: '#e0b487', sealFill: 'rgba(110, 38, 58, 0.55)', shotBg: '#5c1f30',
+  },
+]
+
+export function posterThemeMeta(value) {
+  return POSTER_THEMES.find((t) => t.value === value) || POSTER_THEMES[0]
+}
+
+export function normalizePosterTheme(value) {
+  return POSTER_THEMES.some((t) => t.value === value) ? value : 'redgold'
+}
+
 /** 手机端布局：仅影响窄屏；PC 仍按模板本身版式 */
 export const MOBILE_LAYOUTS = [
   { value: 'auto', label: '自动布局', desc: '按屏幕宽度自动切换（当前默认）' },
@@ -162,6 +204,7 @@ function baseFields(side) {
     side: resolvePosterSide(side) || 1,
     layout: 1,
     template: 'classic',
+    posterTheme: 'redgold',
     mobileLayout: 'auto',
     enabled: true,
     heroImg: '',
@@ -395,7 +438,7 @@ const SHARED_COPY_KEYS = [
   'musicUrl', 'invitePath', 'inviteButtonText', 'showInviteButton',
   'enabled', 'pageTitle', 'pageDescription', 'footer', 'title',
   'greeting', 'verticalSlogan', 'subSlogan1', 'subSlogan2', 'loveFooter',
-  'loadingEffect', 'enterEffect',
+  'loadingEffect', 'enterEffect', 'posterTheme',
 ]
 
 function copySharedFields(from, into) {
@@ -432,6 +475,7 @@ export function normalizePosterConfig(raw, side = 1, layout = 1) {
     side: s,
     layout: l,
     template,
+    posterTheme: normalizePosterTheme(loaded.posterTheme),
     mobileLayout,
     lines: lines.length ? lines : base.lines,
     groomName,
diff --git a/vite-tailwindcss/src/composables/resizeImage.js b/vite-tailwindcss/src/composables/resizeImage.js
index 05b33df..5764761 100644
--- a/vite-tailwindcss/src/composables/resizeImage.js
+++ b/vite-tailwindcss/src/composables/resizeImage.js
@@ -238,6 +238,18 @@ export function getSlotResizeSpecs(page) {
     boxForIndex = () => ({ maxWidth: 1200, maxHeight: 780 })
   } else if (page.type === 'polaroid') {
     boxForIndex = () => ({ maxWidth: 800, maxHeight: 1000 })
+  } else if (page.type === 'triptych') {
+    // 窄竖条（10:17）
+    boxForIndex = () => ({ maxWidth: 560, maxHeight: 960 })
+  } else if (page.type === 'filmstrip') {
+    // 横滑大帧（4:5）
+    boxForIndex = () => ({ maxWidth: 900, maxHeight: 1125 })
+  } else if (page.type === 'fan') {
+    // 扇形卡（3:4）
+    boxForIndex = () => ({ maxWidth: 700, maxHeight: 940 })
+  } else if (page.type === 'mosaic') {
+    // 横竖混排格
+    boxForIndex = () => ({ maxWidth: 900, maxHeight: 900 })
   } else if (page.type === 'heart-collage') {
     // 按槽位比例：大图 / 竖中轴 / 横图 / 小方图
     boxForIndex = (i) => {
diff --git a/vite-tailwindcss/src/directives/reveal.js b/vite-tailwindcss/src/directives/reveal.js
index 216ba9b..3549e64 100644
--- a/vite-tailwindcss/src/directives/reveal.js
+++ b/vite-tailwindcss/src/directives/reveal.js
@@ -7,7 +7,7 @@
  *   v-reveal="{ variant: 'scale', delay: 200 }"
  *   v-reveal="{ variant: 'up', immediate: true }"  -> 不建观察器，下一帧直接入场（串行挂载用）
  *
- * 支持的 variant: up | down | left | right | scale | blur
+ * 支持的 variant: up | down | left | right | scale | blur | postcard
  */
 const VARIANTS = {
   up: 'reveal-up',
@@ -16,6 +16,7 @@ const VARIANTS = {
   right: 'reveal-right',
   scale: 'reveal-scale',
   blur: 'reveal-blur',
+  postcard: 'reveal-postcard',
 }
 
 function parseBinding(value) {
diff --git a/vite-tailwindcss/src/main.js b/vite-tailwindcss/src/main.js
index be13f1b..ff6ee07 100644
--- a/vite-tailwindcss/src/main.js
+++ b/vite-tailwindcss/src/main.js
@@ -4,6 +4,7 @@ import Antd from 'ant-design-vue'
 import './style.css'
 import './styles/animations.css'
 import './styles/frames.css'
+import './styles/theme-packs.css'
 import App from './App.vue'
 import '@fortawesome/fontawesome-free/css/all.css' // 引入所有样式
 // 注册路由
diff --git a/vite-tailwindcss/src/style.css b/vite-tailwindcss/src/style.css
index bd8202a..c2ed8c7 100644
--- a/vite-tailwindcss/src/style.css
+++ b/vite-tailwindcss/src/style.css
@@ -9,6 +9,264 @@
 @import "@fontsource/pinyon-script/400.css";
 @import "@fontsource/cinzel/400.css";
 @import "@fontsource/cinzel/700.css";
+@import "@fontsource/fusion-pixel-12px-proportional-sc/400.css";
+
+/* ============================================================
+   整站风格模板（前后台共用）：html[data-theme] 切换整组变量
+   色板：
+   - --c-primary / --c-primary-deep / --c-primary-rgb  主品牌色
+   - --c-line / --c-line-rgb                           线条/描边
+   - --c-muted / --c-ink                               次要字 / 正文
+   - --c-paper / --c-bg / --c-bg-deep                  卡纸 / 页面底 / 深底
+   - --c-card                                          浮层卡片底（暗色主题为深卡）
+   - --c-on-primary                                    主色底上的文字色
+   风格：
+   - --t-font-title / --t-font-kicker / --t-font-body  标题 / 眉题 / 正文字体
+   - --t-radius-card / --t-radius-btn                  卡片 / 按钮圆角
+   - --t-bg-texture                                    页面背景纹理（none 或 SVG）
+   ============================================================ */
+:root,
+html[data-theme='champagne'] {
+  --c-primary: #a88c6b;
+  --c-primary-deep: #967b5c;
+  --c-primary-rgb: 168, 140, 107;
+  --c-line: #b89a78;
+  --c-line-rgb: 184, 154, 120;
+  --c-muted: #8a8680;
+  --c-ink: #2c2c2c;
+  --c-ink-soft: #5c4a35;
+  --c-paper: #fdfbf7;
+  --c-bg: #fbf6ef;
+  --c-bg-deep: #f3eee6;
+  --c-card: #ffffff;
+  --c-on-primary: #ffffff;
+  --t-font-title: var(--font-calligraphy);
+  --t-font-kicker: var(--font-calligraphy);
+  --t-font-body: var(--font-sans);
+  --t-radius-card: 12px;
+  --t-radius-btn: 999px;
+  --t-bg-texture: none;
+}
+/* 新中式：黛绿朱砂 · 宋体留白 · 竹枝细纹 */
+html[data-theme='guofeng-new'] {
+  --c-primary: #486156;
+  --c-primary-deep: #395046;
+  --c-primary-rgb: 72, 97, 86;
+  --c-line: #b0885a;
+  --c-line-rgb: 176, 136, 90;
+  --c-muted: #8b8a80;
+  --c-ink: #2c302c;
+  --c-ink-soft: #4a4f48;
+  --c-paper: #faf8f2;
+  --c-bg: #f6f3ec;
+  --c-bg-deep: #ece7db;
+  --c-card: #fffefa;
+  --c-on-primary: #f6f3ec;
+  --t-font-title: var(--font-serif);
+  --t-font-kicker: var(--font-kai);
+  --t-font-body: var(--font-serif);
+  --t-radius-card: 2px;
+  --t-radius-btn: 2px;
+  --t-bg-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23486156' stroke-opacity='0.04' stroke-width='1'%3E%3Cpath d='M24 96q2-26-6-44M24 74q10-4 14-14M24 60q-9-2-13-10'/%3E%3C/g%3E%3Cg fill='%23b5493f' fill-opacity='0.05'%3E%3Crect x='92' y='22' width='7' height='7'/%3E%3C/g%3E%3C/svg%3E");
+}
+/* 老中式：朱红鎏金 · 婚书囍字 · 宣纸噪点 */
+html[data-theme='guofeng-old'] {
+  --c-primary: #a8323e;
+  --c-primary-deep: #8c2833;
+  --c-primary-rgb: 168, 50, 62;
+  --c-line: #c9a24a;
+  --c-line-rgb: 201, 162, 74;
+  --c-muted: #9a8578;
+  --c-ink: #3a2428;
+  --c-ink-soft: #5c3a40;
+  --c-paper: #fdf6f0;
+  --c-bg: #f9efe6;
+  --c-bg-deep: #f2e3d4;
+  --c-card: #fffaf4;
+  --c-on-primary: #f7e7c3;
+  --t-font-title: var(--font-mashan);
+  --t-font-kicker: var(--font-kai);
+  --t-font-body: var(--font-serif);
+  --t-radius-card: 4px;
+  --t-radius-btn: 4px;
+  --t-bg-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg fill='%238c2833' fill-opacity='0.025'%3E%3Ccircle cx='12' cy='20' r='1'/%3E%3Ccircle cx='48' cy='8' r='1.4'/%3E%3Ccircle cx='76' cy='34' r='1'/%3E%3Ccircle cx='30' cy='52' r='1.2'/%3E%3Ccircle cx='64' cy='70' r='1'/%3E%3Ccircle cx='10' cy='80' r='1.3'/%3E%3Ccircle cx='86' cy='84' r='1'/%3E%3C/g%3E%3C/svg%3E");
+}
+/* 法式浪漫：奶油粉白 · 花体 · 细水彩点 */
+html[data-theme='french'] {
+  --c-primary: #c78a96;
+  --c-primary-deep: #b57683;
+  --c-primary-rgb: 199, 138, 150;
+  --c-line: #d9aab4;
+  --c-line-rgb: 217, 170, 180;
+  --c-muted: #9c8b90;
+  --c-ink: #3d3136;
+  --c-ink-soft: #5c454e;
+  --c-paper: #fdfafa;
+  --c-bg: #fdf6f4;
+  --c-bg-deep: #f7e9e7;
+  --c-card: #ffffff;
+  --c-on-primary: #ffffff;
+  --t-font-title: var(--font-calligraphy);
+  --t-font-kicker: "Pinyon Script", cursive;
+  --t-font-body: var(--font-sans);
+  --t-radius-card: 18px;
+  --t-radius-btn: 999px;
+  --t-bg-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23c78a96' fill-opacity='0.03'%3E%3Ccircle cx='24' cy='30' r='7'/%3E%3Ccircle cx='88' cy='16' r='5'/%3E%3Ccircle cx='104' cy='78' r='8'/%3E%3Ccircle cx='40' cy='96' r='6'/%3E%3C/g%3E%3C/svg%3E");
+}
+/* 现代简约：暖灰低饱和 · 无衬线 · 细几何 */
+html[data-theme='modern'] {
+  --c-primary: #8a8578;
+  --c-primary-deep: #757064;
+  --c-primary-rgb: 138, 133, 120;
+  --c-line: #a39e91;
+  --c-line-rgb: 163, 158, 145;
+  --c-muted: #8f8c85;
+  --c-ink: #2e2d2a;
+  --c-ink-soft: #4a4842;
+  --c-paper: #fbfaf8;
+  --c-bg: #f7f6f3;
+  --c-bg-deep: #edebe6;
+  --c-card: #ffffff;
+  --c-on-primary: #ffffff;
+  --t-font-title: var(--font-sans);
+  --t-font-kicker: var(--font-sans);
+  --t-font-body: var(--font-sans);
+  --t-radius-card: 8px;
+  --t-radius-btn: 10px;
+  --t-bg-texture: none;
+}
+/* 森系自然：青绿 · 手写 · 纸纹 */
+html[data-theme='forest'] {
+  --c-primary: #6f9678;
+  --c-primary-deep: #5d8266;
+  --c-primary-rgb: 111, 150, 120;
+  --c-line: #92b399;
+  --c-line-rgb: 146, 179, 153;
+  --c-muted: #86928a;
+  --c-ink: #29322c;
+  --c-ink-soft: #3d4a40;
+  --c-paper: #f9fcf9;
+  --c-bg: #f3f8f2;
+  --c-bg-deep: #e9f0e7;
+  --c-card: #ffffff;
+  --c-on-primary: #ffffff;
+  --t-font-title: var(--font-longcang);
+  --t-font-kicker: var(--font-liujian);
+  --t-font-body: var(--font-sans);
+  --t-radius-card: 14px;
+  --t-radius-btn: 999px;
+  --t-bg-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Cg fill='none' stroke='%235d8266' stroke-opacity='0.035' stroke-width='1'%3E%3Cpath d='M20 30q8-12 18-6M74 80q10-10 20-4M90 24q6 10-4 16M34 92q-10 4-14-6'/%3E%3C/g%3E%3C/svg%3E");
+}
+/* 星空夜色：深蓝烫金 · 暗色主题 · 星点 */
+html[data-theme='night'] {
+  --c-primary: #c9a96a;
+  --c-primary-deep: #b3945a;
+  --c-primary-rgb: 201, 169, 106;
+  --c-line: #8fa3c0;
+  --c-line-rgb: 143, 163, 192;
+  --c-muted: #93a0b5;
+  --c-ink: #e8e6df;
+  --c-ink-soft: #cfd4de;
+  --c-paper: #16233c;
+  --c-bg: #101b2e;
+  --c-bg-deep: #0a1322;
+  --c-card: #1a2946;
+  --c-on-primary: #14213a;
+  --t-font-title: var(--font-display);
+  --t-font-kicker: var(--font-cinzel);
+  --t-font-body: var(--font-sans);
+  --t-radius-card: 10px;
+  --t-radius-btn: 999px;
+  --t-bg-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='%23e8e6df'%3E%3Ccircle cx='16' cy='24' r='1' fill-opacity='0.3'/%3E%3Ccircle cx='72' cy='10' r='0.8' fill-opacity='0.2'/%3E%3Ccircle cx='120' cy='40' r='1.2' fill-opacity='0.34'/%3E%3Ccircle cx='44' cy='66' r='0.7' fill-opacity='0.18'/%3E%3Ccircle cx='98' cy='92' r='1' fill-opacity='0.26'/%3E%3Ccircle cx='20' cy='112' r='0.9' fill-opacity='0.22'/%3E%3Ccircle cx='132' cy='126' r='0.8' fill-opacity='0.2'/%3E%3C/g%3E%3C/svg%3E");
+}
+/* 杂志封面：高对比黑棕 · Didot 大字 · 方角 */
+html[data-theme='magazine'] {
+  --c-primary: #1f1c19;
+  --c-primary-deep: #000000;
+  --c-primary-rgb: 31, 28, 25;
+  --c-line: #8a8378;
+  --c-line-rgb: 138, 131, 120;
+  --c-muted: #7d786f;
+  --c-ink: #1f1c19;
+  --c-ink-soft: #3a352e;
+  --c-paper: #faf8f4;
+  --c-bg: #f5f2ec;
+  --c-bg-deep: #eae6dd;
+  --c-card: #ffffff;
+  --c-on-primary: #ffffff;
+  --t-font-title: var(--font-display);
+  --t-font-kicker: var(--font-cinzel);
+  --t-font-body: var(--font-sans);
+  --t-radius-card: 0px;
+  --t-radius-btn: 0px;
+  --t-bg-texture: none;
+}
+/* 日报编辑：报纸米黄 · 衬线排印 · 直角细框 */
+html[data-theme='newspaper'] {
+  --c-primary: #2b2822;
+  --c-primary-deep: #14120e;
+  --c-primary-rgb: 43, 40, 34;
+  --c-line: #6b675e;
+  --c-line-rgb: 107, 103, 94;
+  --c-muted: #6f6b62;
+  --c-ink: #262420;
+  --c-ink-soft: #423e35;
+  --c-paper: #fbf9f2;
+  --c-bg: #f6f3ea;
+  --c-bg-deep: #ebe7da;
+  --c-card: #fffdf6;
+  --c-on-primary: #fbf9f2;
+  --t-font-title: var(--font-serif);
+  --t-font-kicker: var(--font-display);
+  --t-font-body: var(--font-serif);
+  --t-radius-card: 0px;
+  --t-radius-btn: 2px;
+  --t-bg-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect x='0' y='0' width='1' height='1' fill='%232b2822' fill-opacity='0.016'/%3E%3C/svg%3E");
+}
+/* 复古像素：糖果撞色 · 像素字 · 棋盘点 */
+html[data-theme='pixel'] {
+  --c-primary: #c94f7c;
+  --c-primary-deep: #b03e69;
+  --c-primary-rgb: 201, 79, 124;
+  --c-line: #5f9ea0;
+  --c-line-rgb: 95, 158, 160;
+  --c-muted: #8a7f74;
+  --c-ink: #33261f;
+  --c-ink-soft: #54433a;
+  --c-paper: #fdf9ee;
+  --c-bg: #faf3e6;
+  --c-bg-deep: #f0e6d2;
+  --c-card: #fffdf4;
+  --c-on-primary: #fffdf4;
+  --t-font-title: var(--font-pixel);
+  --t-font-kicker: var(--font-pixel);
+  --t-font-body: var(--font-pixel);
+  --t-radius-card: 0px;
+  --t-radius-btn: 0px;
+  --t-bg-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect x='0' y='0' width='4' height='4' fill='%2333261f' fill-opacity='0.02'/%3E%3Crect x='4' y='4' width='4' height='4' fill='%2333261f' fill-opacity='0.02'/%3E%3C/svg%3E");
+}
+/* 极简主义：黑白留白 · 细线 · 轴线 */
+html[data-theme='zen'] {
+  --c-primary: #2a2a28;
+  --c-primary-deep: #111111;
+  --c-primary-rgb: 42, 42, 40;
+  --c-line: #8f8d88;
+  --c-line-rgb: 143, 141, 136;
+  --c-muted: #85837e;
+  --c-ink: #262624;
+  --c-ink-soft: #444442;
+  --c-paper: #fdfdfc;
+  --c-bg: #fafaf8;
+  --c-bg-deep: #f0f0ed;
+  --c-card: #ffffff;
+  --c-on-primary: #ffffff;
+  --t-font-title: var(--font-sans);
+  --t-font-kicker: var(--font-sans);
+  --t-font-body: var(--font-sans);
+  --t-radius-card: 0px;
+  --t-radius-btn: 0px;
+  --t-bg-texture: none;
+}
 
 :root {
   --font-sans: "Avenir Next", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
@@ -22,6 +280,8 @@
   --font-liujian: "Liu Jian Mao Cao", "Zhi Mang Xing", cursive, serif;
   --font-cinzel: "Cinzel", "Playfair Display", serif;
   --font-number: "Cochin", "Georgia", "Times New Roman", serif;
+  /* CDN 全量中日韩像素字优先（按 unicode-range 分片下载），本地 latin 子集兜底 */
+  --font-pixel: "Fusion Pixel 12px Mono latin", "Fusion Pixel 12px Proportional SC", "Courier New", monospace;
 }
 
 
@@ -32,6 +292,19 @@ body {
   overflow-anchor: none;
 }
 
+/* ---------- 后台实时预览（?preview=1 嵌入手机壳）：隐藏一切滚动条，模拟真机 ---------- */
+html.preview-mode,
+html.preview-mode * {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+html.preview-mode::-webkit-scrollbar,
+html.preview-mode *::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
 .calligraphy {
   font-family: var(--font-calligraphy) !important;
 }
@@ -44,3 +317,18 @@ body {
   font-family: var(--font-calligraphy) !important;
   font-weight: 700;
 }
+
+/* ---------- 图片预览灯箱（Ant Design 全局覆写：遮罩柔化 + 操作栏磨砂） ---------- */
+.ant-image-preview-mask {
+  background: rgba(30, 24, 17, 0.72) !important;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+.ant-image-preview-operations {
+  background: rgba(24, 19, 14, 0.45) !important;
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+}
+.ant-image-preview-img {
+  border-radius: 4px;
+}
diff --git a/vite-tailwindcss/src/styles/animations.css b/vite-tailwindcss/src/styles/animations.css
index 2a5cf5e..29822b7 100644
--- a/vite-tailwindcss/src/styles/animations.css
+++ b/vite-tailwindcss/src/styles/animations.css
@@ -18,11 +18,56 @@
 .reveal-right { transform: translateX(56px); }
 .reveal-scale { transform: scale(0.9); }
 .reveal-blur  { transform: scale(1.04); filter: blur(14px); }
+/* 明信片飞入：带轻微旋转，弹性回正（单图明信片/异形边框用） */
+.reveal-postcard {
+  transform: translateY(70px) rotate(-7deg) scale(0.94);
+  transform-origin: 50% 80%;
+  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
+}
 
 .reveal--in { opacity: 1; transform: none; filter: none; }
 
 @media (prefers-reduced-motion: reduce) {
-  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; transition: none; }
+  /* filter 只清 blur 变体：同元素可能还有 .gf-shape-shadow 的 drop-shadow */
+  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
+  .reveal-blur { filter: none !important; }
+}
+
+/* ---------- 邮戳盖章（单图 明信片/邮票 边框的入场收尾） ---------- */
+.gf-postmark {
+  position: absolute;
+  top: 16px;
+  right: 14px;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  border: 2px solid rgba(187, 72, 62, 0.85);
+  outline: 1px solid rgba(187, 72, 62, 0.5);
+  outline-offset: -7px;
+  color: rgba(187, 72, 62, 0.9);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-calligraphy, serif);
+  font-size: 22px;
+  line-height: 1;
+  transform: rotate(-14deg);
+  opacity: 0;
+  pointer-events: none;
+  z-index: 2;
+}
+.gf-postmark::before { content: '囍'; }
+.reveal--in .gf-postmark {
+  animation: postmarkStamp 0.55s cubic-bezier(0.2, 1.4, 0.45, 1) 0.65s both;
+}
+@keyframes postmarkStamp {
+  0%   { opacity: 0; transform: rotate(-14deg) scale(1.9); }
+  55%  { opacity: 0.95; transform: rotate(-14deg) scale(0.92); }
+  75%  { transform: rotate(-14deg) scale(1.05); }
+  100% { opacity: 0.9; transform: rotate(-14deg) scale(1); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .reveal--in .gf-postmark { animation: none; opacity: 0.9; }
 }
 
 /* ---------- 飘落花瓣（优雅：柔和渐变 + 轻微摇曳） ---------- */
@@ -132,7 +177,7 @@
 /* ---------- 渐变流光文字 ---------- */
 @keyframes gradientShift { to { background-position: 200% center; } }
 .gradient-text {
-  background: linear-gradient(90deg, #a88c6b, #e8a5b2, #d4af37, #a88c6b);
+  background: linear-gradient(90deg, var(--c-primary), #e8a5b2, #d4af37, var(--c-primary));
   background-size: 200% auto;
   -webkit-background-clip: text;
   background-clip: text;
@@ -160,7 +205,7 @@
   100% { background-position: 200% 0; }
 }
 .shimmer-line {
-  background: linear-gradient(90deg, transparent, rgba(168,140,107,0.6), transparent);
+  background: linear-gradient(90deg, transparent, rgba(var(--c-primary-rgb),0.6), transparent);
   background-size: 200% 100%;
   animation: shimmer 3s linear infinite;
 }
diff --git a/vite-tailwindcss/src/styles/frames.css b/vite-tailwindcss/src/styles/frames.css
index 491c6a0..a379275 100644
--- a/vite-tailwindcss/src/styles/frames.css
+++ b/vite-tailwindcss/src/styles/frames.css
@@ -117,6 +117,586 @@
   background: #fff;
 }
 
+/* ============================================================
+   明信片 · 异形边框（group: postcard）
+   - mask/clip 裁切类（stamp/scallop/torn/ticket/heart）box-shadow 会被
+     mask 一并裁掉，投影统一由父级 .gf-shape-shadow 的 drop-shadow 提供
+   - 装饰伪元素需要定位上下文：用零优先级 :where() 设 relative，
+     模板里 Tailwind 的 .absolute（0,1,0）永远能赢，不违背头部约定
+   ============================================================ */
+:where(.gf-postcard, .gf-film, .gf-stamp, .gf-arch, .gf-oval, .gf-circle, .gf-leaf,
+.gf-heart, .gf-flower, .gf-hexagon, .gf-scallop, .gf-wave, .gf-zigzag,
+.gf-torn, .gf-ticket, .gf-bevel,
+.gf-cloud, .gf-mist, .gf-bloom, .gf-panorama, .gf-ovalwide) {
+  position: relative;
+}
+
+/* 边缘渐隐内晕：照片边缘向纸色柔和过渡，与边框/裁切形状融为一体
+   （mask/clip 类的伪元素会随形状一并裁切，晕自动贴合轮廓） */
+.gf-heart::after, .gf-flower::after, .gf-scallop::after, .gf-wave::after,
+.gf-zigzag::after, .gf-torn::after, .gf-stamp::after, .gf-ticket::after,
+.gf-hexagon::after, .gf-bevel::after, .gf-arch::after, .gf-oval::after,
+.gf-circle::after, .gf-leaf::after, .gf-cloud::after, .gf-ovalwide::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(ellipse 62% 62% at 50% 50%, rgba(255, 252, 246, 0) 55%, rgba(255, 252, 246, 0.48) 100%);
+  pointer-events: none;
+}
+
+/* 邮票齿孔（四边半圆打孔，经典邮票纸边） */
+.gf-stamp {
+  --gf-r: 5px;
+  padding: 12px;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  background: #fff;
+  -webkit-mask:
+    radial-gradient(var(--gf-r), #0000 98%, #000) calc(-1.5 * var(--gf-r)) calc(-1.5 * var(--gf-r)) / calc(3 * var(--gf-r)) calc(3 * var(--gf-r)) round,
+    linear-gradient(#000 0 0) 50% / calc(100% - 3 * var(--gf-r)) calc(100% - 3 * var(--gf-r)) no-repeat;
+  mask:
+    radial-gradient(var(--gf-r), #0000 98%, #000) calc(-1.5 * var(--gf-r)) calc(-1.5 * var(--gf-r)) / calc(3 * var(--gf-r)) calc(3 * var(--gf-r)) round,
+    linear-gradient(#000 0 0) 50% / calc(100% - 3 * var(--gf-r)) calc(100% - 3 * var(--gf-r)) no-repeat;
+}
+/* 邮票内框线（贴照片边缘内侧，经典邮票图框） */
+.gf-stamp::before {
+  content: '';
+  position: absolute;
+  inset: 15px;
+  border: 1px solid rgba(255, 255, 255, 0.65);
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* 复古明信片（暖白卡 + POST CARD 字样 + 邮戳/邮票装饰） */
+.gf-postcard {
+  padding: 10px 10px 40px;
+  border: 1px solid rgba(184, 154, 120, 0.28);
+  border-radius: 4px;
+  box-shadow: 0 10px 26px rgba(120, 90, 60, 0.16);
+  background: #fffdf6;
+}
+.gf-postcard::before {
+  content: 'POST CARD';
+  position: absolute;
+  left: 14px;
+  bottom: 14px;
+  /* 窄格（九宫格/爱心拼贴）里给右侧邮戳让位，calc 为负时按 0 处理自动隐藏 */
+  max-width: calc(100% - 118px);
+  overflow: hidden;
+  white-space: nowrap;
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 9px;
+  line-height: 1;
+  letter-spacing: 0.35em;
+  color: #b89a78;
+  pointer-events: none;
+}
+.gf-postcard::after {
+  content: '';
+  position: absolute;
+  right: 8px;
+  bottom: 3px;
+  width: 96px;
+  height: 36px;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 48'%3E%3Cg fill='none' stroke='%23b89a78' stroke-width='1.5'%3E%3Ccircle cx='24' cy='24' r='15'/%3E%3Ccircle cx='24' cy='24' r='10.5'/%3E%3Cpath d='M48 14c5-3 9 3 14 0M48 22c5-3 9 3 14 0M48 30c5-3 9 3 14 0' stroke-width='1.2'/%3E%3C/g%3E%3Cg transform='translate(76,6)'%3E%3Crect width='30' height='36' fill='none' stroke='%23c9a978' stroke-width='1.5' stroke-dasharray='3 2.4'/%3E%3Cpath d='M15 26c-5-3.6-9-7-9-11a5 5 0 0 1 9-2.6a5 5 0 0 1 9 2.6c0 4-4 7.4-9 11z' fill='%23d9a0a5'/%3E%3C/g%3E%3C/svg%3E") no-repeat right center / contain;
+  opacity: 0.9;
+  pointer-events: none;
+}
+
+/* 拱门（顶部全圆，婚礼穹顶造型） */
+.gf-arch {
+  padding: 8px;
+  border: 1px solid rgba(201, 169, 120, 0.5);
+  border-radius: 999px 999px 14px 14px;
+  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.65), 0 14px 32px rgba(120, 90, 60, 0.16);
+  background: #fff;
+}
+.gf-arch > img {
+  border-radius: 992px 992px 8px 8px;
+}
+/* 拱顶花饰圆章（呼应尾页门框 keystone） */
+.gf-arch::before {
+  content: '❀';
+  position: absolute;
+  top: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  line-height: 1;
+  color: #b08e63;
+  background: rgba(253, 251, 247, 0.92);
+  box-shadow: 0 0 0 1px rgba(201, 169, 120, 0.45), 0 2px 6px rgba(120, 90, 60, 0.18);
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* 椭圆相框 */
+.gf-oval {
+  padding: 7px;
+  border: 1px solid rgba(201, 169, 120, 0.55);
+  border-radius: 50%;
+  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.7), 0 12px 30px rgba(120, 90, 60, 0.16);
+  background: #fff;
+}
+.gf-oval > img {
+  border-radius: 50%;
+}
+
+/* 正圆相框（推荐 1:1） */
+.gf-circle {
+  padding: 8px;
+  border: 1px solid rgba(201, 169, 120, 0.55);
+  border-radius: 50%;
+  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.7), 0 0 0 5px rgba(201, 169, 120, 0.35), 0 12px 30px rgba(120, 90, 60, 0.16);
+  background: #fff;
+}
+.gf-circle > img {
+  border-radius: 50%;
+}
+/* 椭圆/正圆：底部花饰小章 */
+.gf-oval::before,
+.gf-circle::before {
+  content: '❀';
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  line-height: 1;
+  color: #b08e63;
+  background: rgba(253, 251, 247, 0.92);
+  box-shadow: 0 0 0 1px rgba(201, 169, 120, 0.4), 0 2px 5px rgba(120, 90, 60, 0.15);
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* 叶形花瓣（两对角大圆两对角小圆，推荐 1:1） */
+.gf-leaf {
+  padding: 7px;
+  border: 1px solid rgba(201, 169, 120, 0.5);
+  border-radius: 60% 12% 60% 12%;
+  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.6), 0 12px 30px rgba(120, 90, 60, 0.15);
+  background: #fff;
+}
+.gf-leaf > img {
+  border-radius: 58% 9% 58% 9%;
+}
+
+/* 六边形（clip 直裁，推荐 1:1） */
+.gf-hexagon {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
+  -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
+}
+
+/* 八瓣花（多层 radial mask 合成花形，推荐 1:1） */
+.gf-flower {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  -webkit-mask:
+    radial-gradient(19% 19% at 50% 19%, #000 98%, #0000 100%),
+    radial-gradient(19% 19% at 71.9% 28.1%, #000 98%, #0000 100%),
+    radial-gradient(19% 19% at 81% 50%, #000 98%, #0000 100%),
+    radial-gradient(19% 19% at 71.9% 71.9%, #000 98%, #0000 100%),
+    radial-gradient(19% 19% at 50% 81%, #000 98%, #0000 100%),
+    radial-gradient(19% 19% at 28.1% 71.9%, #000 98%, #0000 100%),
+    radial-gradient(19% 19% at 19% 50%, #000 98%, #0000 100%),
+    radial-gradient(19% 19% at 28.1% 28.1%, #000 98%, #0000 100%),
+    radial-gradient(34% 34% at 50% 50%, #000 98%, #0000 100%);
+  mask:
+    radial-gradient(19% 19% at 50% 19%, #000 98%, #0000 100%),
+    radial-gradient(19% 19% at 71.9% 28.1%, #000 98%, #0000 100%),
+    radial-gradient(19% 19% at 81% 50%, #000 98%, #0000 100%),
+    radial-gradient(19% 19% at 71.9% 71.9%, #000 98%, #0000 100%),
+    radial-gradient(19% 19% at 50% 81%, #000 98%, #0000 100%),
+    radial-gradient(19% 19% at 28.1% 71.9%, #000 98%, #0000 100%),
+    radial-gradient(19% 19% at 19% 50%, #000 98%, #0000 100%),
+    radial-gradient(19% 19% at 28.1% 28.1%, #000 98%, #0000 100%),
+    radial-gradient(34% 34% at 50% 50%, #000 98%, #0000 100%);
+}
+
+/* 心形（SVG mask 裁切，推荐 1:1） */
+.gf-heart {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z'/%3E%3C/svg%3E") no-repeat 50% 50% / 100% 100%;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z'/%3E%3C/svg%3E") no-repeat 50% 50% / 100% 100%;
+}
+
+/* 扇贝花边（四边外凸圆弧波浪） */
+.gf-scallop {
+  --gf-r: 7px;
+  padding: 14px;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  background: #fff;
+  -webkit-mask:
+    radial-gradient(var(--gf-r), #000 98%, #0000) 0 0 / calc(2 * var(--gf-r)) calc(2 * var(--gf-r)) round,
+    linear-gradient(#000 0 0) 50% / calc(100% - 2 * var(--gf-r)) calc(100% - 2 * var(--gf-r)) no-repeat;
+  mask:
+    radial-gradient(var(--gf-r), #000 98%, #0000) 0 0 / calc(2 * var(--gf-r)) calc(2 * var(--gf-r)) round,
+    linear-gradient(#000 0 0) 50% / calc(100% - 2 * var(--gf-r)) calc(100% - 2 * var(--gf-r)) no-repeat;
+}
+/* 蕾丝缝线（内圈虚线） */
+.gf-scallop::before {
+  content: '';
+  position: absolute;
+  inset: 17px;
+  border: 1px dashed rgba(255, 255, 255, 0.7);
+  border-radius: 2px;
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* 蕾丝波浪（四边相切凹圆弧，剪纸蕾丝垫感） */
+.gf-wave {
+  --gf-r: 9px;
+  padding: 15px;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  background: #fff;
+  -webkit-mask:
+    radial-gradient(var(--gf-r), #0000 98%, #000) calc(-1 * var(--gf-r)) calc(-1 * var(--gf-r)) / calc(2 * var(--gf-r)) calc(2 * var(--gf-r)) round,
+    linear-gradient(#000 0 0) 50% / calc(100% - 2 * var(--gf-r)) calc(100% - 2 * var(--gf-r)) no-repeat;
+  mask:
+    radial-gradient(var(--gf-r), #0000 98%, #000) calc(-1 * var(--gf-r)) calc(-1 * var(--gf-r)) / calc(2 * var(--gf-r)) calc(2 * var(--gf-r)) round,
+    linear-gradient(#000 0 0) 50% / calc(100% - 2 * var(--gf-r)) calc(100% - 2 * var(--gf-r)) no-repeat;
+}
+/* 蕾丝点状缝线 */
+.gf-wave::before {
+  content: '';
+  position: absolute;
+  inset: 18px;
+  border: 1px dotted rgba(255, 255, 255, 0.75);
+  border-radius: 3px;
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* 锯齿花边（四边三角齿，花边剪刀裁切的相纸；齿深须为齿宽一半） */
+.gf-zigzag {
+  --gf-z: 16px;
+  --gf-zd: 8px;
+  padding: 14px;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  background: #fff;
+  -webkit-mask:
+    conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) 50% 0 / var(--gf-z) var(--gf-zd) repeat-x,
+    conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 50% 100% / var(--gf-z) var(--gf-zd) repeat-x,
+    conic-gradient(from 45deg at 0 50%, #000 90deg, #0000 0) 0 50% / var(--gf-zd) var(--gf-z) repeat-y,
+    conic-gradient(from 225deg at 100% 50%, #000 90deg, #0000 0) 100% 50% / var(--gf-zd) var(--gf-z) repeat-y,
+    linear-gradient(#000 0 0) 50% / calc(100% - 2 * var(--gf-zd) + 2px) calc(100% - 2 * var(--gf-zd) + 2px) no-repeat;
+  mask:
+    conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) 50% 0 / var(--gf-z) var(--gf-zd) repeat-x,
+    conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 50% 100% / var(--gf-z) var(--gf-zd) repeat-x,
+    conic-gradient(from 45deg at 0 50%, #000 90deg, #0000 0) 0 50% / var(--gf-zd) var(--gf-z) repeat-y,
+    conic-gradient(from 225deg at 100% 50%, #000 90deg, #0000 0) 100% 50% / var(--gf-zd) var(--gf-z) repeat-y,
+    linear-gradient(#000 0 0) 50% / calc(100% - 2 * var(--gf-zd) + 2px) calc(100% - 2 * var(--gf-zd) + 2px) no-repeat;
+}
+/* 剪纸内线 */
+.gf-zigzag::before {
+  content: '';
+  position: absolute;
+  inset: 17px;
+  border: 1px solid rgba(255, 255, 255, 0.55);
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* 切角相纸（八边形切角，复古照片角） */
+.gf-bevel {
+  padding: 10px;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  background: #fff;
+  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
+  -webkit-clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
+}
+
+/* 撕纸边（不规则毛边，像从相纸上撕下来） */
+.gf-torn {
+  padding: 12px;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  background: #fff;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 3L6 1.4L13 3.4L19 1.2L26 3L33 1.6L40 3.2L47 1.3L54 2.8L61 1.5L68 3.3L75 1.4L82 2.9L89 1.6L96 3.1L98.6 8L96.9 14L98.4 20L96.8 27L98.5 34L97 41L98.6 48L96.9 55L98.3 62L97 69L98.5 76L96.8 83L98.4 90L97.1 96L94 98.6L87 97L80 98.7L73 96.9L66 98.5L59 97.1L52 98.6L45 96.8L38 98.4L31 97L24 98.6L17 96.9L10 98.5L4 97.2L1.5 92L3.2 85L1.4 78L3 71L1.6 64L3.3 57L1.3 50L2.9 43L1.5 36L3.2 29L1.4 22L3 15L1.7 8Z'/%3E%3C/svg%3E") no-repeat 50% 50% / 100% 100%;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 3L6 1.4L13 3.4L19 1.2L26 3L33 1.6L40 3.2L47 1.3L54 2.8L61 1.5L68 3.3L75 1.4L82 2.9L89 1.6L96 3.1L98.6 8L96.9 14L98.4 20L96.8 27L98.5 34L97 41L98.6 48L96.9 55L98.3 62L97 69L98.5 76L96.8 83L98.4 90L97.1 96L94 98.6L87 97L80 98.7L73 96.9L66 98.5L59 97.1L52 98.6L45 96.8L38 98.4L31 97L24 98.6L17 96.9L10 98.5L4 97.2L1.5 92L3.2 85L1.4 78L3 71L1.6 64L3.3 57L1.3 50L2.9 43L1.5 36L3.2 29L1.4 22L3 15L1.7 8Z'/%3E%3C/svg%3E") no-repeat 50% 50% / 100% 100%;
+}
+/* 撕纸：顶部半透明胶带贴纸 */
+.gf-torn::before {
+  content: '';
+  position: absolute;
+  top: 4px;
+  left: 50%;
+  width: 72px;
+  height: 20px;
+  transform: translateX(-50%) rotate(-2.5deg);
+  background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.36));
+  box-shadow: 0 1px 4px rgba(96, 72, 50, 0.18);
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* 车票票根（两侧半圆缺口，缺口自带撕票线意象；
+   不画横穿虚线——会压在照片主体/人脸上） */
+.gf-ticket {
+  --gf-n: 11px;
+  padding: 10px 16px 26px;
+  border: 0;
+  border-radius: 14px;
+  box-shadow: none;
+  background: #fff;
+  -webkit-mask:
+    radial-gradient(var(--gf-n) at 0 50%, #0000 98%, #000) 0 0 / 51% 100% no-repeat,
+    radial-gradient(var(--gf-n) at 100% 50%, #0000 98%, #000) 100% 0 / 51% 100% no-repeat;
+  mask:
+    radial-gradient(var(--gf-n) at 0 50%, #0000 98%, #000) 0 0 / 51% 100% no-repeat,
+    radial-gradient(var(--gf-n) at 100% 50%, #0000 98%, #000) 100% 0 / 51% 100% no-repeat;
+}
+/* 票面字样（位于底部票边区，窄格自动截断居中） */
+.gf-ticket::before {
+  content: 'ADMIT ONE';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 8px;
+  text-align: center;
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 9px;
+  line-height: 1;
+  letter-spacing: 0.4em;
+  text-indent: 0.4em;
+  color: #b89a78;
+  white-space: nowrap;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+/* 复古胶片（深色框 + 上下齿孔） */
+.gf-film {
+  padding: 15px 6px;
+  border: 0;
+  border-radius: 6px;
+  box-shadow: 0 12px 28px rgba(30, 24, 18, 0.3);
+  background: #26231f;
+}
+.gf-film > img {
+  border-radius: 2px;
+}
+.gf-film::before,
+.gf-film::after {
+  content: '';
+  position: absolute;
+  left: 8px;
+  right: 8px;
+  height: 7px;
+  background-image: repeating-linear-gradient(90deg, rgba(253, 251, 247, 0.85) 0 9px, transparent 9px 18px);
+  pointer-events: none;
+}
+.gf-film::before {
+  top: 4px;
+}
+.gf-film::after {
+  bottom: 4px;
+}
+
+/* ============================================================
+   横幅 · 云雾花（group: scenic）—— 横向比例的风景明信片
+   装饰主题：云朵 / 晨雾 / 花卉；推荐 4:3 或 16:9
+   ============================================================ */
+
+/* 云朵相框（大小圆交替蓬松云边，推荐 4:3） */
+.gf-cloud {
+  --gf-c: 14px;
+  padding: 16px;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  background: #fff;
+  -webkit-mask:
+    radial-gradient(var(--gf-c), #000 98%, #0000) 0 0 / calc(3.4 * var(--gf-c)) calc(3.4 * var(--gf-c)) round,
+    radial-gradient(calc(0.68 * var(--gf-c)), #000 98%, #0000) calc(1.7 * var(--gf-c)) calc(1.7 * var(--gf-c)) / calc(3.4 * var(--gf-c)) calc(3.4 * var(--gf-c)) round,
+    linear-gradient(#000 0 0) 50% / calc(100% - 2.4 * var(--gf-c)) calc(100% - 2.4 * var(--gf-c)) no-repeat;
+  mask:
+    radial-gradient(var(--gf-c), #000 98%, #0000) 0 0 / calc(3.4 * var(--gf-c)) calc(3.4 * var(--gf-c)) round,
+    radial-gradient(calc(0.68 * var(--gf-c)), #000 98%, #0000) calc(1.7 * var(--gf-c)) calc(1.7 * var(--gf-c)) / calc(3.4 * var(--gf-c)) calc(3.4 * var(--gf-c)) round,
+    linear-gradient(#000 0 0) 50% / calc(100% - 2.4 * var(--gf-c)) calc(100% - 2.4 * var(--gf-c)) no-repeat;
+}
+/* 右上飘着的小云 */
+.gf-cloud::before {
+  content: '';
+  position: absolute;
+  top: 22px;
+  right: 24px;
+  width: 52px;
+  height: 22px;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 26'%3E%3Cpath d='M13 22a7 7 0 1 1 1.6-13.8A10 10 0 0 1 34 5a8 8 0 0 1 8.6 8A6.5 6.5 0 0 1 41 22z' fill='%23ffffff' fill-opacity='.92'/%3E%3Cellipse cx='54' cy='19' rx='8' ry='4.6' fill='%23ffffff' fill-opacity='.72'/%3E%3C/svg%3E") no-repeat center / contain;
+  filter: drop-shadow(0 2px 3px rgba(120, 90, 60, 0.14));
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* 晨雾朦胧（四周羽化渐隐 + 底部飘雾，推荐 4:3；无边框无投影更空灵） */
+.gf-mist {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  background: transparent;
+  -webkit-mask: radial-gradient(112% 112% at 50% 48%, #000 56%, #0000 90%);
+  mask: radial-gradient(112% 112% at 50% 48%, #000 56%, #0000 90%);
+}
+/* 底部两团晨雾 */
+.gf-mist::before {
+  content: '';
+  position: absolute;
+  left: 6%;
+  right: 6%;
+  bottom: 4%;
+  height: 30%;
+  background:
+    radial-gradient(58% 100% at 30% 100%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%),
+    radial-gradient(48% 88% at 72% 100%, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 72%);
+  filter: blur(6px);
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* 花语卡纸（暖白卡 + 对角花枝，推荐 4:3） */
+.gf-bloom {
+  padding: 14px;
+  border: 1px solid rgba(201, 169, 120, 0.4);
+  border-radius: 10px;
+  box-shadow: 0 10px 26px rgba(120, 90, 60, 0.14);
+  background: linear-gradient(160deg, #fffdf8, #fdf7ec);
+}
+.gf-bloom > img {
+  border-radius: 5px;
+}
+/* 左上 / 右下花枝（同一 SVG，右下旋转 180°） */
+.gf-bloom::before,
+.gf-bloom::after {
+  content: '';
+  position: absolute;
+  width: 56px;
+  height: 56px;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23b8a078' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M6 58C16 46 26 36 46 24'/%3E%3Cpath d='M22 42c7 1 12-2 14-8'/%3E%3Cpath d='M14 50c5 2 10 1 13-3'/%3E%3C/g%3E%3Cg fill='%23a8bfa0'%3E%3Cpath d='M30 33c-1-5 1-8 5-9 1 4-1 7-5 9z'/%3E%3Cpath d='M20 44c-4-2-5-6-3-9 3 2 4 5 3 9z'/%3E%3C/g%3E%3Cg transform='translate(48,20)'%3E%3Cg fill='%23e4aeb6'%3E%3Ccircle cx='0' cy='-5.2' r='3.6'/%3E%3Ccircle cx='4.9' cy='-1.6' r='3.6'/%3E%3Ccircle cx='3.1' cy='4.2' r='3.6'/%3E%3Ccircle cx='-3.1' cy='4.2' r='3.6'/%3E%3Ccircle cx='-4.9' cy='-1.6' r='3.6'/%3E%3C/g%3E%3Ccircle r='2.4' fill='%23c9a24a'/%3E%3C/g%3E%3Cg transform='translate(30,52) scale(.62)'%3E%3Cg fill='%23edc3ca'%3E%3Ccircle cx='0' cy='-5.2' r='3.6'/%3E%3Ccircle cx='4.9' cy='-1.6' r='3.6'/%3E%3Ccircle cx='3.1' cy='4.2' r='3.6'/%3E%3Ccircle cx='-3.1' cy='4.2' r='3.6'/%3E%3Ccircle cx='-4.9' cy='-1.6' r='3.6'/%3E%3C/g%3E%3Ccircle r='2.4' fill='%23c9a24a'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
+  pointer-events: none;
+  z-index: 1;
+}
+.gf-bloom::before {
+  top: 2px;
+  left: 2px;
+}
+.gf-bloom::after {
+  bottom: 2px;
+  right: 2px;
+  transform: rotate(180deg);
+}
+
+/* 宽幅全景（16:9 电影画幅白卡 + 云与飞鸟 + 手写落款） */
+.gf-panorama {
+  padding: 16px 14px 34px;
+  border: 1px solid rgba(184, 154, 120, 0.3);
+  border-radius: 4px;
+  box-shadow: 0 12px 30px rgba(120, 90, 60, 0.16);
+  background: #fffdf6;
+}
+/* 顶部白边区：淡云 + 三只飞鸟 */
+.gf-panorama::before {
+  content: '';
+  position: absolute;
+  top: 3px;
+  left: 14px;
+  right: 12px;
+  height: 12px;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 124 14'%3E%3Cpath d='M8 11a4 4 0 1 1 1-7.9A5.5 5.5 0 0 1 19 2a4.5 4.5 0 0 1 5 4.5A3.8 3.8 0 0 1 22 11z' fill='%23d8c8b0' fill-opacity='.55'/%3E%3Cg fill='none' stroke='%23a08a6a' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M78 8c2.5-2.6 4.5-2.6 7 0M85 8c2.5-2.6 4.5-2.6 7 0'/%3E%3Cpath d='M96 5c2-2.2 3.8-2.2 5.8 0M101.8 5c2-2.2 3.8-2.2 5.8 0'/%3E%3Cpath d='M110 10c1.6-1.8 3-1.8 4.6 0M114.6 10c1.6-1.8 3-1.8 4.6 0'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
+  opacity: 0.9;
+  pointer-events: none;
+  z-index: 1;
+}
+/* 底部白边区：手写体落款 */
+.gf-panorama::after {
+  content: 'with love';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 9px;
+  text-align: center;
+  font-family: 'Great Vibes', 'Segoe Script', cursive;
+  font-size: 15px;
+  line-height: 1;
+  color: #b89a78;
+  letter-spacing: 0.06em;
+  white-space: nowrap;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+/* 横椭圆框（椭圆随 4:3 容器自然拉宽 + 底部花饰小章） */
+.gf-ovalwide {
+  padding: 7px;
+  border: 1px solid rgba(201, 169, 120, 0.55);
+  border-radius: 50%;
+  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.7), 0 12px 30px rgba(120, 90, 60, 0.16);
+  background: #fff;
+}
+.gf-ovalwide > img {
+  border-radius: 50%;
+}
+.gf-ovalwide::before {
+  content: '❀';
+  position: absolute;
+  bottom: 6px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  line-height: 1;
+  color: #b08e63;
+  background: rgba(253, 251, 247, 0.92);
+  box-shadow: 0 0 0 1px rgba(201, 169, 120, 0.4), 0 2px 5px rgba(120, 90, 60, 0.15);
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* 异形裁切类的投影：mask 会裁掉 box-shadow，由父级 drop-shadow 跟随轮廓补投影 */
+.gf-shape-shadow {
+  filter: drop-shadow(0 10px 18px rgba(96, 72, 50, 0.22));
+}
+
 /* 辅助：图片保持原始宽高比（单图铺满+保比例时使用，覆盖 gf-frame 的 height:100%） */
 .gf-natural {
   height: auto !important;
diff --git a/vite-tailwindcss/src/utils/danmakuColors.js b/vite-tailwindcss/src/utils/danmakuColors.js
index 8e54c56..422d95d 100644
--- a/vite-tailwindcss/src/utils/danmakuColors.js
+++ b/vite-tailwindcss/src/utils/danmakuColors.js
@@ -1,6 +1,6 @@
 export const DEFAULT_DANMAKU_COLOR = 'champagne'
 
-/** @type {{ key: string, hex: string, label: string, gradient?: string, gradientBg?: string, glow?: string, textLight?: boolean }[]} */
+/** @type {{ key: string, hex: string, label: string, gradient?: string, textGradient?: string, edge?: string }[]} */
 export const DANMAKU_COLORS = [
   { key: 'champagne', hex: '#a88c6b', label: '香槟金' },
   { key: 'blush', hex: '#e8b4b8', label: '浅粉' },
@@ -14,64 +14,55 @@ export const DANMAKU_COLORS = [
 ]
 
 /**
- * 渐变配色：
- * - textLight=true → 浅色字（需整体偏深，保证对比度）
- * - textLight=false → 深色字（浅色/金色底）
+ * 渐变配色：渐变用于「文字」（background-clip: text），
+ * 气泡底统一为通透白纱，避免大色块遮挡照片内容。
+ * - gradient     : 色点预览 / 文字渐变
+ * - textGradient : 文字专用渐变（个别浅色渐变需加深保证白纱底上可读）
+ * - edge         : 气泡描边色（取渐变主色调、低透明度）
  */
 export const DANMAKU_GRADIENT_COLORS = [
   {
     key: 'gradSunset',
-    hex: '#fff6f2',
+    hex: '#e11d48',
     label: '晚霞',
-    textLight: true,
     gradient: 'linear-gradient(125deg, #f97316 0%, #e11d48 42%, #c026d3 78%, #7c3aed 100%)',
-    gradientBg: 'linear-gradient(125deg, rgba(234,88,12,0.94) 0%, rgba(225,29,72,0.93) 42%, rgba(192,38,211,0.93) 78%, rgba(124,58,237,0.94) 100%)',
-    glow: '0 6px 22px rgba(225,29,72,0.42), 0 2px 8px rgba(124,58,237,0.28)',
+    edge: 'rgba(225, 29, 72, 0.32)',
   },
   {
     key: 'gradChampagne',
-    hex: '#4a3420',
+    hex: '#a86a24',
     label: '流金',
-    textLight: false,
     gradient: 'linear-gradient(120deg, #fff1c9 0%, #f0c27a 28%, #e8a54b 55%, #c9832f 78%, #8b5a2b 100%)',
-    gradientBg: 'linear-gradient(120deg, rgba(255,241,201,0.96) 0%, rgba(240,194,122,0.94) 28%, rgba(232,165,75,0.92) 55%, rgba(201,131,47,0.9) 78%, rgba(180,140,80,0.88) 100%)',
-    glow: '0 6px 20px rgba(201,131,47,0.35), 0 2px 8px rgba(139,90,43,0.22)',
+    textGradient: 'linear-gradient(120deg, #d9a54a 0%, #c9832f 45%, #a86a24 75%, #8b5a2b 100%)',
+    edge: 'rgba(201, 131, 47, 0.34)',
   },
   {
     key: 'gradBlush',
-    hex: '#fff5fa',
+    hex: '#e11d74',
     label: '桃雾',
-    textLight: true,
     gradient: 'linear-gradient(130deg, #fb7185 0%, #e11d74 35%, #c026d3 68%, #7c3aed 100%)',
-    gradientBg: 'linear-gradient(130deg, rgba(244,63,94,0.93) 0%, rgba(219,39,119,0.92) 35%, rgba(192,38,211,0.92) 68%, rgba(124,58,237,0.93) 100%)',
-    glow: '0 6px 22px rgba(219,39,119,0.4), 0 2px 8px rgba(124,58,237,0.28)',
+    edge: 'rgba(219, 39, 119, 0.3)',
   },
   {
     key: 'gradOcean',
-    hex: '#f0f9ff',
+    hex: '#0284c7',
     label: '海暮',
-    textLight: true,
     gradient: 'linear-gradient(125deg, #0284c7 0%, #0d9488 32%, #4f46e5 68%, #9333ea 100%)',
-    gradientBg: 'linear-gradient(125deg, rgba(2,132,199,0.93) 0%, rgba(13,148,136,0.92) 32%, rgba(79,70,229,0.93) 68%, rgba(147,51,234,0.93) 100%)',
-    glow: '0 6px 22px rgba(2,132,199,0.38), 0 2px 8px rgba(147,51,234,0.26)',
+    edge: 'rgba(2, 132, 199, 0.3)',
   },
   {
     key: 'gradAurora',
-    hex: '#f4fffb',
+    hex: '#0891b2',
     label: '极光',
-    textLight: true,
     gradient: 'linear-gradient(120deg, #059669 0%, #0891b2 28%, #6366f1 58%, #db2777 100%)',
-    gradientBg: 'linear-gradient(120deg, rgba(5,150,105,0.93) 0%, rgba(8,145,178,0.92) 28%, rgba(99,102,241,0.93) 58%, rgba(219,39,119,0.93) 100%)',
-    glow: '0 6px 22px rgba(8,145,178,0.36), 0 2px 10px rgba(219,39,119,0.28)',
+    edge: 'rgba(8, 145, 178, 0.3)',
   },
   {
     key: 'gradEmber',
-    hex: '#fff7ed',
+    hex: '#dc2626',
     label: '暖焰',
-    textLight: true,
     gradient: 'linear-gradient(125deg, #ea580c 0%, #dc2626 40%, #be123c 70%, #9f1239 100%)',
-    gradientBg: 'linear-gradient(125deg, rgba(234,88,12,0.94) 0%, rgba(220,38,38,0.93) 40%, rgba(190,18,60,0.93) 70%, rgba(159,18,57,0.94) 100%)',
-    glow: '0 6px 22px rgba(220,38,38,0.42), 0 2px 8px rgba(190,18,60,0.3)',
+    edge: 'rgba(220, 38, 38, 0.3)',
   },
 ]
 
@@ -98,20 +89,21 @@ export function resolveDanmakuSwatch(key) {
 
 export function resolveDanmakuTint(key) {
   const entry = BY_KEY[key] || BY_KEY[DEFAULT_DANMAKU_COLOR]
-  if (entry.gradientBg) {
+  if (entry.gradient) {
+    // 渐变字 + 白纱底：彩色只落在文字上，底子通透不挡内容
     return {
-      background: entry.gradientBg,
-      borderColor: entry.textLight ? 'rgba(255, 255, 255, 0.5)' : 'rgba(74, 52, 32, 0.22)',
-      boxShadow: entry.glow || '0 6px 20px rgba(0,0,0,0.12)',
-      textLight: !!entry.textLight,
+      background: 'rgba(255, 253, 248, 0.4)',
+      borderColor: entry.edge || 'rgba(168, 140, 107, 0.3)',
+      boxShadow: '0 2px 10px rgba(88, 68, 42, 0.1)',
+      textGradient: entry.textGradient || entry.gradient,
     }
   }
   const { r, g, b } = hexToRgb(entry.hex)
   return {
-    background: `rgba(${r}, ${g}, ${b}, 0.18)`,
-    borderColor: `rgba(${r}, ${g}, ${b}, 0.42)`,
-    boxShadow: '0 4px 14px rgba(88, 68, 42, 0.08)',
-    textLight: false,
+    background: `rgba(${r}, ${g}, ${b}, 0.15)`,
+    borderColor: `rgba(${r}, ${g}, ${b}, 0.38)`,
+    boxShadow: '0 2px 8px rgba(88, 68, 42, 0.07)',
+    textGradient: '',
   }
 }
 
diff --git a/vite-tailwindcss/src/utils/themes.js b/vite-tailwindcss/src/utils/themes.js
new file mode 100644
index 0000000..f1cd362
--- /dev/null
+++ b/vite-tailwindcss/src/utils/themes.js
@@ -0,0 +1,125 @@
+/**
+ * 整站风格模板（前后台共用）：与 style.css 中 html[data-theme] 变量一一对应
+ * - kind: 'pack'   风格包 —— 布局不变，成套更换配色/字体/纹样/装饰
+ * - kind: 'layout' 完整模板 —— 首屏封面、章节头、尾页的排版结构也不同
+ * - dark: true     暗色主题（night）
+ */
+export const DEFAULT_SITE_THEME = 'champagne'
+
+export const SITE_THEMES = [
+  // ———— 风格包 ————
+  {
+    key: 'champagne', kind: 'pack', label: '典雅香槟',
+    desc: '金棕象牙 · 花体英文 · 细金线',
+    primary: '#a88c6b', line: '#b89a78', bg: '#fbf6ef',
+  },
+  {
+    key: 'french', kind: 'pack', label: '法式浪漫',
+    desc: '奶油粉白 · 花体字 · 花卉线描',
+    primary: '#c78a96', line: '#d9aab4', bg: '#fdf6f4',
+  },
+  {
+    key: 'modern', kind: 'pack', label: '现代简约',
+    desc: '暖灰低饱和 · 无衬线 · 细几何线',
+    primary: '#8a8578', line: '#a39e91', bg: '#f7f6f3',
+  },
+  {
+    key: 'forest', kind: 'pack', label: '森系自然',
+    desc: '青绿手写 · 枝叶元素 · 纸纹底',
+    primary: '#6f9678', line: '#92b399', bg: '#f3f8f2',
+  },
+  {
+    key: 'night', kind: 'pack', label: '星空夜色', dark: true,
+    desc: '深蓝烫金 · 暗色主题 · 星月点缀',
+    primary: '#c9a96a', line: '#8fa3c0', bg: '#101b2e',
+  },
+  // ———— 完整模板 ————
+  {
+    key: 'guofeng-new', kind: 'layout', label: '新中式',
+    desc: '黛绿朱砂 · 月洞门 · 宋体留白',
+    primary: '#486156', line: '#b0885a', bg: '#f6f3ec',
+  },
+  {
+    key: 'guofeng-old', kind: 'layout', label: '老中式',
+    desc: '朱红鎏金 · 婚书囍字 · 回纹灯彩',
+    primary: '#a8323e', line: '#c9a24a', bg: '#f9efe6',
+  },
+  {
+    key: 'magazine', kind: 'layout', label: '杂志封面',
+    desc: '全幅大图 · 贴边大字 · 编号章节',
+    primary: '#1f1c19', line: '#8a8378', bg: '#f5f2ec',
+  },
+  {
+    key: 'newspaper', kind: 'layout', label: '日报编辑',
+    desc: '报头栏线 · 衬线排印 · 日期栏',
+    primary: '#2b2822', line: '#6b675e', bg: '#f6f3ea',
+  },
+  {
+    key: 'pixel', kind: 'layout', label: '复古像素',
+    desc: '8-bit 像素字 · 游戏界面 · 马赛克心',
+    primary: '#c94f7c', line: '#5f9ea0', bg: '#faf3e6',
+  },
+  {
+    key: 'zen', kind: 'layout', label: '极简主义',
+    desc: '黑白留白 · 细线 · 轴线排版',
+    primary: '#2a2a28', line: '#8f8d88', bg: '#fafaf8',
+  },
+]
+
+export const SITE_THEME_GROUPS = [
+  { key: 'pack', label: '风格包 · 换装不换版', items: SITE_THEMES.filter((t) => t.kind === 'pack') },
+  { key: 'layout', label: '完整模板 · 排版重构', items: SITE_THEMES.filter((t) => t.kind === 'layout') },
+]
+
+/** 旧主题值映射（v1 纯色主题 / v2 中式风格包 → 现行风格模板） */
+const LEGACY_THEME_MAP = {
+  crimson: 'guofeng-old',
+  chinese: 'guofeng-old',
+  sage: 'forest',
+  ocean: 'night',
+  lilac: 'french',
+  sunset: 'champagne',
+}
+
+export function normalizeSiteTheme(key) {
+  if (SITE_THEMES.some((t) => t.key === key)) return key
+  if (LEGACY_THEME_MAP[key]) return LEGACY_THEME_MAP[key]
+  return DEFAULT_SITE_THEME
+}
+
+export function siteThemeMeta(key) {
+  const k = normalizeSiteTheme(key)
+  return SITE_THEMES.find((t) => t.key === k)
+}
+
+/** 是否完整模板（前台首屏/章节头/尾页走布局分支） */
+export function themeLayoutKind(key) {
+  return siteThemeMeta(key).kind
+}
+
+/** 是否暗色主题 */
+export function isDarkTheme(key) {
+  return !!siteThemeMeta(key).dark
+}
+
+/** 应用主题到整页（html[data-theme]），前台按配置、后台跟随编辑值 */
+export function applySiteTheme(key) {
+  const k = normalizeSiteTheme(key)
+  document.documentElement.dataset.theme = k
+  if (k === 'pixel') ensurePixelCjkFont()
+}
+
+/**
+ * 中文像素字形按需加载：
+ * 本地 @fontsource 包只含 latin 子集（英文/数字像素），中日韩全量字形
+ * 走 unicode-range 分片 CDN（cn-font-split 产物，只下载用到的分片）。
+ * 仅在选中 pixel 主题时注入，其他主题零开销。
+ */
+function ensurePixelCjkFont() {
+  if (typeof document === 'undefined' || document.getElementById('pixel-cjk-font')) return
+  const link = document.createElement('link')
+  link.id = 'pixel-cjk-font'
+  link.rel = 'stylesheet'
+  link.href = 'https://fontsapi.zeoseven.com/570/main/result.css'
+  document.head.appendChild(link)
+}
diff --git a/vite-tailwindcss/src/views/admin/AdminEditor.vue b/vite-tailwindcss/src/views/admin/AdminEditor.vue
index 97461c3..b2cd574 100644
--- a/vite-tailwindcss/src/views/admin/AdminEditor.vue
+++ b/vite-tailwindcss/src/views/admin/AdminEditor.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="min-h-screen bg-[#f6f4ef] text-[#2c2c2c]">
+  <div class="min-h-screen bg-[#f6f4ef] text-[var(--c-ink)]" :class="{ 'preview-open': livePreviewOn }">
     <!-- 顶部栏 -->
-    <header class="admin-header sticky top-0 z-30 bg-white/90 backdrop-blur border-b border-[#a88c6b]/15">
+    <header ref="adminHeaderRef" class="admin-header sticky top-0 z-30 bg-white/90 backdrop-blur border-b border-[var(--c-primary)]/15">
       <div class="admin-header-row">
         <div class="flex items-center gap-3 min-w-0 shrink-0">
-          <span class="text-xl text-[#a88c6b] font-serif shrink-0">❀</span>
+          <span class="text-xl text-[var(--c-primary)] font-serif shrink-0">❀</span>
           <div class="min-w-0">
             <div class="text-sm tracking-[0.18em] font-light truncate">婚礼邀请函 · 内容编辑后台</div>
-            <div class="text-[10px] text-[#8A8680] tracking-[0.12em] mt-0.5">
-              制作者 · <span class="text-[#a88c6b]">年糕崽崽</span>
+            <div class="text-[10px] text-[var(--c-muted)] tracking-[0.12em] mt-0.5">
+              制作者 · <span class="text-[var(--c-primary)]">年糕崽崽</span>
             </div>
           </div>
         </div>
@@ -38,6 +38,7 @@
                 <a-menu-item v-for="item in group.items" :key="item.key">
                   <i :class="item.icon" class="mr-2 text-[12px] opacity-80" />
                   {{ item.label }}
+                  <span v-if="dirtySections.includes(item.key)" class="nav-dirty-dot" title="有未保存的更改"></span>
                 </a-menu-item>
               </a-menu>
             </template>
@@ -51,12 +52,15 @@
             class="admin-layout-seg"
             :options="menuLayoutOptions"
           />
+          <a-button size="small" class="admin-live-toggle" :class="{ '!border-[var(--c-primary)] !text-[var(--c-primary)]': livePreviewOn }" @click="toggleLivePreview">
+            <i class="fa-solid fa-mobile-screen mr-1 text-[var(--c-primary)]"></i>{{ livePreviewOn ? '关闭实时预览' : '实时预览' }}
+          </a-button>
           <a-button size="small" @click="openPreview">
-            <i class="fa-solid fa-eye mr-1 text-[#a88c6b]"></i>预览请柬
+            <i class="fa-solid fa-eye mr-1 text-[var(--c-primary)]"></i>预览请柬
           </a-button>
           <a-dropdown>
             <a-button size="small">
-              <i class="fa-solid fa-scroll mr-1 text-[#a88c6b]"></i>预览海报 <i class="fa-solid fa-chevron-down ml-1 text-[10px]"></i>
+              <i class="fa-solid fa-scroll mr-1 text-[var(--c-primary)]"></i>预览海报 <i class="fa-solid fa-chevron-down ml-1 text-[10px]"></i>
             </a-button>
             <template #overlay>
               <a-menu>
@@ -72,13 +76,22 @@
               </a-menu>
             </template>
           </a-dropdown>
+          <span
+            v-if="isConfigTab && activeDirty"
+            class="admin-dirty-badge"
+            title="当前页有未保存的更改，Ctrl+S 可快速保存"
+          >
+            <i class="admin-dirty-dot"></i>未保存
+          </span>
           <a-button
             v-if="isConfigTab"
             type="primary"
             size="small"
             :loading="saving"
             @click="onSave"
-            class="!bg-[#a88c6b] hover:!bg-[#967b5c] !border-[#a88c6b]"
+            class="!bg-[var(--c-primary)] hover:!bg-[var(--c-primary-deep)] !border-[var(--c-primary)]"
+            :class="{ 'admin-save-attn': activeDirty }"
+            :title="activeDirty ? '有未保存更改（Ctrl+S）' : '保存当前页配置（Ctrl+S）'"
           >
             <i class="fa-solid fa-floppy-disk mr-1"></i>保存配置
           </a-button>
@@ -94,6 +107,24 @@
       </div>
     </header>
 
+    <!-- 手机壳实时预览面板（≥1280px 显示；改动自动同步，无需保存） -->
+    <aside v-if="livePreviewOn" class="admin-preview-panel" :style="{ top: previewPanelTop + 'px' }">
+      <div class="admin-preview-head">
+        <span class="admin-preview-title"><i class="fa-solid fa-mobile-screen mr-1"></i>实时预览</span>
+        <span class="admin-preview-tip">改动自动同步 · 无需保存</span>
+        <div class="admin-preview-actions">
+          <button type="button" title="重新加载" @click="reloadPreview"><i class="fa-solid fa-rotate-right"></i></button>
+          <button type="button" title="关闭" @click="toggleLivePreview"><i class="fa-solid fa-xmark"></i></button>
+        </div>
+      </div>
+      <div class="admin-preview-body">
+        <div class="admin-phone-shell">
+          <div class="admin-phone-notch"></div>
+          <iframe ref="previewFrameRef" :src="previewUrl" class="admin-preview-iframe" title="请柬实时预览"></iframe>
+        </div>
+      </div>
+    </aside>
+
     <div class="admin-shell" :class="menuLayout === 'side' ? 'admin-shell--side' : 'admin-shell--top'">
       <nav v-if="menuLayout === 'side'" class="admin-nav" aria-label="后台菜单">
         <div
@@ -113,6 +144,7 @@
             >
               <i :class="item.icon" class="admin-nav-icon" />
               <span>{{ item.label }}</span>
+              <span v-if="dirtySections.includes(item.key)" class="nav-dirty-dot" title="有未保存的更改"></span>
             </button>
           </div>
         </div>
@@ -125,8 +157,8 @@
           <div class="admin-panel" :class="{ 'opacity-60 pointer-events-none': tabLoading }">
             <div class="flex justify-between items-center mb-4 gap-3 flex-wrap">
               <div>
-                <div class="text-sm text-[#2c2c2c]">访客概览</div>
-                <div class="text-[11px] text-[#8A8680] mt-0.5">指纹去重访客 · 地区 / 机型画像</div>
+                <div class="text-sm text-[var(--c-ink)]">访客概览</div>
+                <div class="text-[11px] text-[var(--c-muted)] mt-0.5">指纹去重访客 · 地区 / 机型画像</div>
               </div>
               <a-button size="small" :loading="visitStatsLoading" @click="loadVisitStats">
                 <i class="fa-solid fa-rotate-right mr-1"></i>刷新
@@ -168,7 +200,7 @@
                   {{ selectedRegion }} · 市级分布
                   <span v-if="cityStatsLoading" class="text-[10px] text-[#a89a88] ml-2">加载中…</span>
                 </div>
-                <a-button size="small" type="text" class="!text-[#a88c6b]" @click="clearSelectedRegion">
+                <a-button size="small" type="text" class="!text-[var(--c-primary)]" @click="clearSelectedRegion">
                   <i class="fa-solid fa-xmark mr-1"></i>关闭
                 </a-button>
               </div>
@@ -177,7 +209,7 @@
 
             <div class="flex justify-between items-center mb-2 gap-2 flex-wrap">
               <div class="text-[12px] text-[#7a6550] tracking-wide">近期访客预览</div>
-              <a-button size="small" type="link" class="!text-[#a88c6b] !px-0" @click="activeTab = 'visits'">
+              <a-button size="small" type="link" class="!text-[var(--c-primary)] !px-0" @click="activeTab = 'visits'">
                 查看全部访客记录 <i class="fa-solid fa-arrow-right ml-1 text-[10px]"></i>
               </a-button>
             </div>
@@ -195,7 +227,7 @@
               >
                 <template #bodyCell="{ column, record }">
                   <template v-if="column.key === 'fingerprint'">
-                    <span class="font-mono text-[11px] text-[#a88c6b] underline-offset-2 hover:underline" :title="record.fingerprint">{{ shortFp(record.fingerprint) }}</span>
+                    <span class="font-mono text-[11px] text-[var(--c-primary)] underline-offset-2 hover:underline" :title="record.fingerprint">{{ shortFp(record.fingerprint) }}</span>
                   </template>
                   <template v-else-if="column.key === 'location'">
                     <span>{{ record.raw_location || [record.region, record.city].filter(Boolean).join(' ') || '未知' }}</span>
@@ -204,7 +236,7 @@
                     <span class="text-[12px]">{{ record.device || '未知' }}</span>
                   </template>
                   <template v-else-if="column.key === 'last_seen_at'">
-                    <span class="text-[12px] text-[#8A8680]">{{ formatTime(record.last_seen_at) }}</span>
+                    <span class="text-[12px] text-[var(--c-muted)]">{{ formatTime(record.last_seen_at) }}</span>
                   </template>
                 </template>
               </a-table>
@@ -217,8 +249,8 @@
           <div class="admin-panel" :class="{ 'opacity-60 pointer-events-none': tabLoading }">
             <div class="flex justify-between items-center mb-4 gap-3 flex-wrap">
               <div>
-                <div class="text-sm text-[#2c2c2c]">礼物统计</div>
-                <div class="text-[11px] text-[#8A8680] mt-0.5">各礼物收到次数 · 合计 {{ giftStats.total }}</div>
+                <div class="text-sm text-[var(--c-ink)]">礼物统计</div>
+                <div class="text-[11px] text-[var(--c-muted)] mt-0.5">各礼物收到次数 · 合计 {{ giftStats.total }}</div>
               </div>
               <a-button size="small" :loading="giftStatsLoading || giftListLoading" @click="() => Promise.all([loadGiftStats(), loadGiftList()])">
                 <i class="fa-solid fa-rotate-right mr-1"></i>刷新
@@ -228,18 +260,18 @@
               <div v-for="g in giftTypeList" :key="g.key" class="stat-card">
                 <div class="stat-label calligraphy">{{ g.label }}</div>
                 <div class="stat-value">{{ giftStats.counts[g.key] || 0 }}</div>
-                <div class="text-[10px] text-[#8A8680] mt-1">兑换 {{ giftCostsEdit[g.key] || g.cost }} 赞</div>
+                <div class="text-[10px] text-[var(--c-muted)] mt-1">兑换 {{ giftCostsEdit[g.key] || g.cost }} 赞</div>
               </div>
             </div>
 
             <div class="flex justify-between items-center mb-3 gap-3 flex-wrap">
               <div>
-                <div class="text-sm text-[#2c2c2c]">礼物兑换配置</div>
-                <div class="text-[11px] text-[#8A8680] mt-0.5">每个礼物消耗的点赞次数 · 默认阶梯 50 / 100 / 200</div>
+                <div class="text-sm text-[var(--c-ink)]">礼物兑换配置</div>
+                <div class="text-[11px] text-[var(--c-muted)] mt-0.5">每个礼物消耗的点赞次数 · 默认阶梯 50 / 100 / 200</div>
               </div>
               <div class="flex gap-2">
                 <a-button size="small" @click="resetGiftCostsEdit">恢复默认</a-button>
-                <a-button size="small" type="primary" class="!bg-[#a88c6b]" :loading="giftCostsSaving" @click="saveGiftCostsEdit">
+                <a-button size="small" type="primary" class="!bg-[var(--c-primary)]" :loading="giftCostsSaving" @click="saveGiftCostsEdit">
                   保存配置
                 </a-button>
               </div>
@@ -260,8 +292,8 @@
 
             <div class="flex justify-between items-center mt-8 mb-3 gap-3 flex-wrap">
               <div>
-                <div class="text-sm text-[#2c2c2c]">礼物明细</div>
-                <div class="text-[11px] text-[#8A8680] mt-0.5">共 {{ giftList.length }} 条送礼记录</div>
+                <div class="text-sm text-[var(--c-ink)]">礼物明细</div>
+                <div class="text-[11px] text-[var(--c-muted)] mt-0.5">共 {{ giftList.length }} 条送礼记录</div>
               </div>
               <a-button size="small" :loading="giftListLoading" @click="loadGiftList">
                 <i class="fa-solid fa-rotate-right mr-1"></i>刷新列表
@@ -285,7 +317,7 @@
                   <span>{{ record.cost || 0 }} 赞</span>
                 </template>
                 <template v-else-if="column.key === 'created_at'">
-                  <span class="text-[12px] text-[#8A8680]">{{ formatTime(record.created_at) }}</span>
+                  <span class="text-[12px] text-[var(--c-muted)]">{{ formatTime(record.created_at) }}</span>
                 </template>
                 <template v-else-if="column.key === 'actions'">
                   <a-button size="small" danger type="text" @click="onDeleteGift(record)">删除</a-button>
@@ -300,14 +332,14 @@
           <div class="admin-panel" :class="{ 'opacity-60 pointer-events-none': tabLoading }">
             <div class="flex justify-between items-center mb-4 gap-3 flex-wrap">
               <div>
-                <div class="text-sm text-[#2c2c2c]">访客记录</div>
-                <div class="text-[11px] text-[#8A8680] mt-0.5">共 {{ visitTotal }} 条，分页浏览</div>
+                <div class="text-sm text-[var(--c-ink)]">访客记录</div>
+                <div class="text-[11px] text-[var(--c-muted)] mt-0.5">共 {{ visitTotal }} 条，分页浏览</div>
               </div>
               <a-button size="small" :loading="visitListLoading" @click="loadVisitList">
                 <i class="fa-solid fa-rotate-right mr-1"></i>刷新
               </a-button>
             </div>
-            <div class="text-[11px] text-[#8A8680] mb-2">点击行查看该访客的回执、弹幕、点赞与礼物详情</div>
+            <div class="text-[11px] text-[var(--c-muted)] mb-2">点击行查看该访客的回执、弹幕、点赞与礼物详情</div>
             <div class="visit-list-wrap">
               <a-table
                 class="admin-table visit-table-clickable"
@@ -323,7 +355,7 @@
               >
                 <template #bodyCell="{ column, record }">
                   <template v-if="column.key === 'fingerprint'">
-                    <span class="font-mono text-[11px] text-[#a88c6b] underline-offset-2 hover:underline" :title="record.fingerprint">{{ shortFp(record.fingerprint) }}</span>
+                    <span class="font-mono text-[11px] text-[var(--c-primary)] underline-offset-2 hover:underline" :title="record.fingerprint">{{ shortFp(record.fingerprint) }}</span>
                   </template>
                   <template v-else-if="column.key === 'location'">
                     <span>{{ record.raw_location || [record.region, record.city].filter(Boolean).join(' ') || '未知' }}</span>
@@ -332,10 +364,10 @@
                     <span class="text-[12px]" :title="record.user_agent">{{ record.device || '未知' }}</span>
                   </template>
                   <template v-else-if="column.key === 'user_agent'">
-                    <span class="text-[11px] text-[#8A8680]" :title="record.user_agent">{{ shortUa(record.user_agent) }}</span>
+                    <span class="text-[11px] text-[var(--c-muted)]" :title="record.user_agent">{{ shortUa(record.user_agent) }}</span>
                   </template>
                   <template v-else-if="column.key === 'last_seen_at'">
-                    <span class="text-[12px] text-[#8A8680]">{{ formatTime(record.last_seen_at) }}</span>
+                    <span class="text-[12px] text-[var(--c-muted)]">{{ formatTime(record.last_seen_at) }}</span>
                   </template>
                 </template>
               </a-table>
@@ -350,7 +382,7 @@
           width="720px"
           destroy-on-close
         >
-          <div v-if="visitDetailLoading" class="py-10 text-center text-[#8A8680] text-[13px]">加载中…</div>
+          <div v-if="visitDetailLoading" class="py-10 text-center text-[var(--c-muted)] text-[13px]">加载中…</div>
           <div v-else-if="visitDetail" class="visit-detail">
             <div class="visit-detail-summary">
               <div class="stat-card !mb-0">
@@ -370,51 +402,51 @@
                 <div class="stat-value !text-xl">{{ (visitDetail.rsvps || []).length }}</div>
               </div>
             </div>
-            <div class="text-[12px] text-[#5c5348] mt-3 space-y-1">
+            <div class="text-[12px] text-[var(--c-ink-soft)] mt-3 space-y-1">
               <div>归属地：{{ visitDetail.visitor?.raw_location || [visitDetail.visitor?.region, visitDetail.visitor?.city].filter(Boolean).join(' ') || '未知' }}</div>
               <div>机型：{{ visitDetail.visitor?.device || '未知' }}</div>
               <div>首次：{{ formatTime(visitDetail.visitor?.first_seen_at) }} · 最近：{{ formatTime(visitDetail.visitor?.last_seen_at) }}</div>
-              <div class="font-mono text-[11px] text-[#8A8680] break-all">指纹：{{ visitDetail.visitor?.fingerprint }}</div>
+              <div class="font-mono text-[11px] text-[var(--c-muted)] break-all">指纹：{{ visitDetail.visitor?.fingerprint }}</div>
             </div>
 
             <div class="visit-detail-section">
               <div class="visit-detail-h">回执</div>
-              <div v-if="!(visitDetail.rsvps || []).length" class="text-[12px] text-[#8A8680]">暂无回执</div>
+              <div v-if="!(visitDetail.rsvps || []).length" class="text-[12px] text-[var(--c-muted)]">暂无回执</div>
               <ul v-else class="visit-detail-list">
                 <li v-for="r in visitDetail.rsvps" :key="'rsvp-' + r.id">
-                  <div class="font-medium text-[#2c2c2c]">{{ r.name || '—' }} · {{ r.guest_count || '1' }} 人</div>
-                  <div v-if="r.wishes" class="text-[#5c5348] mt-0.5 whitespace-pre-wrap">{{ r.wishes }}</div>
-                  <div class="text-[11px] text-[#8A8680] mt-0.5">{{ formatTime(r.created_at) }}</div>
+                  <div class="font-medium text-[var(--c-ink)]">{{ r.name || '—' }} · {{ r.guest_count || '1' }} 人</div>
+                  <div v-if="r.wishes" class="text-[var(--c-ink-soft)] mt-0.5 whitespace-pre-wrap">{{ r.wishes }}</div>
+                  <div class="text-[11px] text-[var(--c-muted)] mt-0.5">{{ formatTime(r.created_at) }}</div>
                 </li>
               </ul>
             </div>
 
             <div class="visit-detail-section">
               <div class="visit-detail-h">弹幕</div>
-              <div v-if="!(visitDetail.danmakus || []).length" class="text-[12px] text-[#8A8680]">暂无弹幕</div>
+              <div v-if="!(visitDetail.danmakus || []).length" class="text-[12px] text-[var(--c-muted)]">暂无弹幕</div>
               <ul v-else class="visit-detail-list">
                 <li v-for="d in visitDetail.danmakus" :key="'dm-' + d.id">
                   <div class="flex items-center gap-2 flex-wrap">
-                    <span class="font-medium text-[#2c2c2c]">{{ d.name || '—' }}</span>
+                    <span class="font-medium text-[var(--c-ink)]">{{ d.name || '—' }}</span>
                     <span class="admin-pill admin-pill--muted">{{ d.source === 'rsvp' ? '回执' : '弹幕' }}</span>
                     <span class="admin-pill" :class="danmakuStatusPill(d.status)">{{ danmakuStatusLabel(d.status) }}</span>
                   </div>
-                  <div class="text-[#5c5348] mt-0.5 whitespace-pre-wrap">{{ d.content }}</div>
-                  <div class="text-[11px] text-[#8A8680] mt-0.5">{{ formatTime(d.created_at) }}</div>
+                  <div class="text-[var(--c-ink-soft)] mt-0.5 whitespace-pre-wrap">{{ d.content }}</div>
+                  <div class="text-[11px] text-[var(--c-muted)] mt-0.5">{{ formatTime(d.created_at) }}</div>
                 </li>
               </ul>
             </div>
 
             <div class="visit-detail-section">
               <div class="visit-detail-h">礼物明细</div>
-              <div v-if="!(visitDetail.gifts || []).length" class="text-[12px] text-[#8A8680]">暂无礼物</div>
+              <div v-if="!(visitDetail.gifts || []).length" class="text-[12px] text-[var(--c-muted)]">暂无礼物</div>
               <ul v-else class="visit-detail-list">
                 <li v-for="g in visitDetail.gifts" :key="'gift-' + g.id">
-                  <div class="font-medium text-[#2c2c2c]">
+                  <div class="font-medium text-[var(--c-ink)]">
                     {{ g.name || '—' }} · {{ giftTypeLabel(g.gift_type) }}
-                    <span class="text-[#8A8680] font-normal">（消耗 {{ g.cost || 0 }}）</span>
+                    <span class="text-[var(--c-muted)] font-normal">（消耗 {{ g.cost || 0 }}）</span>
                   </div>
-                  <div class="text-[11px] text-[#8A8680] mt-0.5">{{ formatTime(g.created_at) }}</div>
+                  <div class="text-[11px] text-[var(--c-muted)] mt-0.5">{{ formatTime(g.created_at) }}</div>
                 </li>
               </ul>
             </div>
@@ -440,7 +472,7 @@
                 </a-form-item>
                 <a-form-item label="日历圈选日期">
                   <a-input v-model:value="cfg.calendarDate" placeholder="如 2026-09-04" />
-                  <div class="text-[11px] text-[#8A8680] mt-1">前台婚礼日历会展示该日期所在月份，并用爱心圈出这一天。</div>
+                  <div class="text-[11px] text-[var(--c-muted)] mt-1">前台婚礼日历会展示该日期所在月份，并用爱心圈出这一天。</div>
                 </a-form-item>
                 <a-form-item label="酒店名称">
                   <a-input v-model:value="cfg.hotel" placeholder="宴会酒店" />
@@ -450,14 +482,14 @@
                 </a-form-item>
               </div>
               <div class="flex flex-wrap items-center justify-between gap-2 mb-1">
-                <div class="text-[11px] text-[#8A8680]">
+                <div class="text-[11px] text-[var(--c-muted)]">
                   原图用于预览；展示图为等比缩放后的体积（不裁切），前台封面/揭幕/尾页优先用展示图。
-                  <span v-if="resizeProgress && resizingBasic" class="text-[#a88c6b] ml-1">{{ resizeProgress }}</span>
+                  <span v-if="resizeProgress && resizingBasic" class="text-[var(--c-primary)] ml-1">{{ resizeProgress }}</span>
                 </div>
                 <a-button
                   size="small"
                   type="primary"
-                  class="!bg-[#a88c6b] hover:!bg-[#967b5c] !border-[#a88c6b]"
+                  class="!bg-[var(--c-primary)] hover:!bg-[var(--c-primary-deep)] !border-[var(--c-primary)]"
                   :loading="resizingBasic"
                   :disabled="uploading || (!cfg.heroImg && !cfg.endImg)"
                   @click="batchResizeBasicImages"
@@ -475,11 +507,11 @@
                       :uploading="uploading"
                     />
                     <div v-if="cfg.heroImgResized" class="text-center mt-1">
-                      <div class="text-[9px] text-[#a88c6b]">展示已生成</div>
+                      <div class="text-[9px] text-[var(--c-primary)]">展示已生成</div>
                       <div v-if="cfg.heroImgResizedMeta" class="resized-meta">{{ cfg.heroImgResizedMeta }}</div>
                     </div>
                   </div>
-                  <div class="text-[11px] text-[#8A8680] mt-2">用于首页封面和入场揭幕背景。</div>
+                  <div class="text-[11px] text-[var(--c-muted)] mt-2">用于首页封面和入场揭幕背景。</div>
                 </a-form-item>
                 <a-form-item label="尾页图片">
                   <div class="relative w-[96px]">
@@ -490,11 +522,11 @@
                       :uploading="uploading"
                     />
                     <div v-if="cfg.endImgResized" class="text-center mt-1">
-                      <div class="text-[9px] text-[#a88c6b]">展示已生成</div>
+                      <div class="text-[9px] text-[var(--c-primary)]">展示已生成</div>
                       <div v-if="cfg.endImgResizedMeta" class="resized-meta">{{ cfg.endImgResizedMeta }}</div>
                     </div>
                   </div>
-                  <div class="text-[11px] text-[#8A8680] mt-2">用于最后的回执尾页，可与封面分开设置。</div>
+                  <div class="text-[11px] text-[var(--c-muted)] mt-2">用于最后的回执尾页，可与封面分开设置。</div>
                 </a-form-item>
               </div>
             </a-form>
@@ -520,7 +552,7 @@
                                   :value="customVhValue(cfg.formalPageHeight)" @change="(v) => onHeightFieldCustomVh(cfg, 'formalPageHeight', v)"
                                   :min="20" :max="200" addon-after="vh" class="w-[150px]" />
                 </div>
-                <div class="text-[11px] text-[#8A8680] mt-1">控制前台竖排邀请文案页的展示高度，默认满屏。</div>
+                <div class="text-[11px] text-[var(--c-muted)] mt-1">控制前台竖排邀请文案页的展示高度，默认满屏。</div>
               </a-form-item>
             </a-form>
           </a-card>
@@ -530,21 +562,49 @@
         <section v-if="activeTab === 'visual'">
           <a-card :bordered="false" class="!shadow-sm">
             <a-form layout="vertical">
+              <a-form-item label="整站风格模板">
+                <div v-for="group in SITE_THEME_GROUPS" :key="group.key" class="theme-group">
+                  <div class="theme-group-title">{{ group.label }}</div>
+                  <div class="theme-picker">
+                    <button
+                      v-for="t in group.items"
+                      :key="t.key"
+                      type="button"
+                      class="theme-card"
+                      :class="{ active: cfg.siteTheme === t.key }"
+                      :title="t.desc"
+                      @click="cfg.siteTheme = t.key"
+                    >
+                      <span class="theme-swatch" :style="{ background: t.bg }">
+                        <b :style="{ color: t.primary, fontFamily: themePreviewFont(t.key) }">囍</b>
+                        <i :style="{ background: t.primary }"></i>
+                        <i :style="{ background: t.line }"></i>
+                      </span>
+                      <span class="theme-name">{{ t.label }}</span>
+                      <span class="theme-desc">{{ t.desc }}</span>
+                      <i v-if="cfg.siteTheme === t.key" class="theme-check fa-solid fa-check"></i>
+                    </button>
+                  </div>
+                </div>
+                <div class="text-[11px] text-[var(--c-muted)] mt-1">
+                  风格包＝在经典排版上成套更换配色、字体与装饰纹样；完整模板＝首屏封面、章节标题与尾页的排版结构也随之重构（杂志 / 报纸 / 像素 / 极简）。选择后本页即时预览配色，保存后对宾客生效。
+                </div>
+              </a-form-item>
               <a-form-item label="背景音乐">
-                <div class="text-[12px] text-[#8A8680] leading-relaxed">多首背景音乐的上传、试听与「设为播放」请在 <span class="text-[#a88c6b]">背景音乐</span> 标签页管理。</div>
+                <div class="text-[12px] text-[var(--c-muted)] leading-relaxed">多首背景音乐的上传、试听与「设为播放」请在 <span class="text-[var(--c-primary)]">背景音乐</span> 标签页管理。</div>
               </a-form-item>
               <a-form-item label="入场揭幕退场方式">
                 <a-select v-model:value="cfg.introExitEffect">
                   <a-select-option v-for="opt in INTRO_EXIT_EFFECTS" :key="opt.value" :value="opt.value">{{ opt.label }}</a-select-option>
                 </a-select>
-                <div class="text-[11px] text-[#8A8680] mt-1">点击开启请柬时的退场动画，可按婚礼调性选择更轻盈或更有仪式感的方式。</div>
+                <div class="text-[11px] text-[var(--c-muted)] mt-1">点击开启请柬时的退场动画，可按婚礼调性选择更轻盈或更有仪式感的方式。</div>
               </a-form-item>
               <a-form-item label="滚动方式">
                 <a-radio-group v-model:value="cfg.scrollMode">
                   <a-radio value="snap">整页 / 分屏吸附滚动</a-radio>
                   <a-radio value="free">自由滚动</a-radio>
                 </a-radio-group>
-                <div class="text-[11px] text-[#8A8680] mt-1">整页模式会带来更有仪式感的逐屏切换效果。</div>
+                <div class="text-[11px] text-[var(--c-muted)] mt-1">整页模式会带来更有仪式感的逐屏切换效果。</div>
               </a-form-item>
               <div class="grid grid-cols-1 md:grid-cols-3 gap-x-6">
                 <a-form-item label="自由滚动速度（滚动间隔）">
@@ -552,21 +612,21 @@
                     <a-slider v-model:value="cfg.freeScrollInterval" :min="10" :max="500" class="flex-1" />
                     <a-input-number v-model:value="cfg.freeScrollInterval" :min="10" :max="500" addon-after="ms" class="w-[120px]" />
                   </div>
-                  <div class="text-[11px] text-[#8A8680] mt-1">间隔越小滚动越快，默认 50ms。仅在「自由滚动」模式下生效。</div>
+                  <div class="text-[11px] text-[var(--c-muted)] mt-1">间隔越小滚动越快，默认 50ms。仅在「自由滚动」模式下生效。</div>
                 </a-form-item>
                 <a-form-item label="页面切换速度（动画时长）">
                   <div class="flex gap-3 items-center">
                     <a-slider v-model:value="cfg.pageSwitchDuration" :min="200" :max="3000" :step="100" class="flex-1" />
                     <a-input-number v-model:value="cfg.pageSwitchDuration" :min="200" :max="3000" :step="100" addon-after="ms" class="w-[120px]" />
                   </div>
-                  <div class="text-[11px] text-[#8A8680] mt-1">整页/分屏模式下自动翻页的动画时长，默认 800ms。</div>
+                  <div class="text-[11px] text-[var(--c-muted)] mt-1">整页/分屏模式下自动翻页的动画时长，默认 800ms。</div>
                 </a-form-item>
                 <a-form-item label="首屏停留时间">
                   <div class="flex gap-3 items-center">
                     <a-slider v-model:value="cfg.firstScreenDuration" :min="0" :max="12000" :step="100" class="flex-1" />
                     <a-input-number v-model:value="cfg.firstScreenDuration" :min="0" :max="12000" :step="100" addon-after="ms" class="w-[120px]" />
                   </div>
-                  <div class="text-[11px] text-[#8A8680] mt-1">首屏效果结束后等待多久开始自动滚动，默认 4500ms。</div>
+                  <div class="text-[11px] text-[var(--c-muted)] mt-1">首屏效果结束后等待多久开始自动滚动，默认 4500ms。</div>
                 </a-form-item>
               </div>
               <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
@@ -583,17 +643,27 @@
               <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-2">
                 <a-form-item label="祝福弹幕">
                   <a-switch v-model:checked="cfg.danmakuEnabled" />
-                  <div class="text-[11px] text-[#8A8680] mt-1">关闭后前台不展示弹幕，也不显示送祝福入口。</div>
+                  <div class="text-[11px] text-[var(--c-muted)] mt-1">关闭后前台不展示弹幕，也不显示送祝福入口。</div>
                 </a-form-item>
                 <a-form-item label="弹幕显示时间">
                   <a-switch v-model:checked="cfg.danmakuShowTime" :disabled="!cfg.danmakuEnabled" />
-                  <div class="text-[11px] text-[#8A8680] mt-1">开启后弹幕后缀展示相对时间（刚刚、x分钟前等）。</div>
+                  <div class="text-[11px] text-[var(--c-muted)] mt-1">开启后弹幕后缀展示相对时间（刚刚、x分钟前等）。</div>
                 </a-form-item>
                 <a-form-item label="九宫格入场动画">
                   <a-switch v-model:checked="cfg.nineGridAnimate" />
-                  <div class="text-[11px] text-[#8A8680] mt-1">开启：进入视口后暂停滚动，每 300ms 入场一格（方向动效）；全部完成后再继续。关闭：直接展示，更稳（推荐 iOS）。</div>
+                  <div class="text-[11px] text-[var(--c-muted)] mt-1">开启：进入视口后暂停滚动，每 300ms 入场一格（方向动效）；全部完成后再继续。关闭：直接展示，更稳（推荐 iOS）。</div>
                 </a-form-item>
               </div>
+              <a-form-item label="礼物特效方案" class="mt-2">
+                <a-radio-group v-model:value="cfg.giftEffectMode">
+                  <a-radio-button value="classic">经典粒子（2D）</a-radio-button>
+                  <a-radio-button value="three">立体炫效（3D）</a-radio-button>
+                  <a-radio-button value="auto">智能选择</a-radio-button>
+                </a-radio-group>
+                <div class="text-[11px] text-[var(--c-muted)] mt-1">
+                  宾客送礼时的全屏特效渲染方式。经典粒子兼容性最好；立体炫效基于 WebGL（three.js），8 种礼物各有专属 3D 场景（爱心爆发、金雨、双螺旋、花瓣雪、星河、涟漪、双星环绕、聚合成心），按需加载不影响打开速度，不支持的设备自动回落经典粒子；智能选择按宾客机型自动决定（iOS / 低配用经典）。
+                </div>
+              </a-form-item>
             </a-form>
           </a-card>
         </section>
@@ -603,13 +673,13 @@
           <div class="admin-panel">
             <div class="flex flex-wrap items-start justify-between gap-3 mb-5">
               <div>
-                <div class="text-sm text-[#2c2c2c] tracking-wide">曲目列表</div>
-                <p class="text-[11px] text-[#8A8680] mt-1 leading-relaxed max-w-xl">
+                <div class="text-sm text-[var(--c-ink)] tracking-wide">曲目列表</div>
+                <p class="text-[11px] text-[var(--c-muted)] mt-1 leading-relaxed max-w-xl">
                   在下方选择<strong>播放设置</strong>。随机模式按权重抽曲；可开启「记忆曲目」让同一访客在设定时长内首次打开仍播同一首。
                 </p>
               </div>
               <a-button type="primary" size="small"
-                        class="!bg-[#a88c6b] hover:!bg-[#967b5c] !border-[#a88c6b]"
+                        class="!bg-[var(--c-primary)] hover:!bg-[var(--c-primary-deep)] !border-[var(--c-primary)]"
                         @click="openMusicUpload">
                 <i class="fa-solid fa-plus mr-1"></i>上传音乐
               </a-button>
@@ -623,18 +693,18 @@
                 <a-radio-button value="random">随机</a-radio-button>
                 <a-radio-button value="single">单曲循环</a-radio-button>
               </a-radio-group>
-              <div class="text-[10px] text-[#8A8680] mt-2 leading-relaxed">
+              <div class="text-[10px] text-[var(--c-muted)] mt-2 leading-relaxed">
                 {{ musicPlayModeHint }}
               </div>
               <div
                 v-if="cfg.musicPlayMode === 'random'"
                 class="mt-3 flex flex-wrap items-center gap-x-4 gap-y-2 border-t border-[#e7e3db] pt-3"
               >
-                <label class="inline-flex items-center gap-2 text-[12px] text-[#5c5348] cursor-pointer select-none">
+                <label class="inline-flex items-center gap-2 text-[12px] text-[var(--c-ink-soft)] cursor-pointer select-none">
                   <a-switch v-model:checked="cfg.musicCacheEnabled" size="small" />
                   记忆曲目
                 </label>
-                <div class="inline-flex items-center gap-2 text-[12px] text-[#5c5348]">
+                <div class="inline-flex items-center gap-2 text-[12px] text-[var(--c-ink-soft)]">
                   <span :class="{ 'opacity-40': !cfg.musicCacheEnabled }">记忆时长</span>
                   <a-input-number
                     v-model:value="cfg.musicCacheHours"
@@ -645,9 +715,9 @@
                     class="!w-[96px]"
                     :disabled="!cfg.musicCacheEnabled"
                   />
-                  <span :class="{ 'opacity-40': !cfg.musicCacheEnabled }" class="text-[#8A8680]">小时</span>
+                  <span :class="{ 'opacity-40': !cfg.musicCacheEnabled }" class="text-[var(--c-muted)]">小时</span>
                 </div>
-                <span class="text-[10px] text-[#8A8680]">
+                <span class="text-[10px] text-[var(--c-muted)]">
                   {{ cfg.musicCacheEnabled
                     ? `同一设备 ${cfg.musicCacheHours || 24} 小时内首次打开沿用上次抽中的歌；播完仍会换下一首。`
                     : '关闭后每次打开页面都会重新按权重抽曲。' }}
@@ -657,10 +727,10 @@
 
             <div v-if="!cfg.musicList.length" class="admin-empty">
               <div class="admin-empty-icon"><i class="fa-solid fa-music"></i></div>
-              <div class="text-[13px] text-[#5c5348]">尚未上传音乐</div>
-              <div class="text-[11px] text-[#8A8680] mt-1">支持 mp3 等常见音频格式</div>
+              <div class="text-[13px] text-[var(--c-ink-soft)]">尚未上传音乐</div>
+              <div class="text-[11px] text-[var(--c-muted)] mt-1">支持 mp3 等常见音频格式</div>
               <a-button class="mt-4" @click="openMusicUpload">
-                <i class="fa-solid fa-upload mr-1 text-[#a88c6b]"></i>上传第一首
+                <i class="fa-solid fa-upload mr-1 text-[var(--c-primary)]"></i>上传第一首
               </a-button>
             </div>
 
@@ -738,7 +808,7 @@
                     <a-button
                       size="small"
                       :type="t.url === cfg.activeMusicUrl ? 'primary' : 'default'"
-                      :class="t.url === cfg.activeMusicUrl ? '!bg-[#a88c6b] !border-[#a88c6b]' : ''"
+                      :class="t.url === cfg.activeMusicUrl ? '!bg-[var(--c-primary)] !border-[var(--c-primary)]' : ''"
                       @click="setActiveMusic(t.url)"
                     >
                       <i class="fa-solid fa-play mr-1 text-[10px]"></i>
@@ -793,11 +863,11 @@
                   <a-input v-model:value="uploadCfg.endpoint" placeholder="如 https://oss-cn-hangzhou.aliyuncs.com" />
                 </a-form-item>
               </div>
-              <div v-else class="text-[12px] text-[#8A8680] leading-relaxed mb-4">
+              <div v-else class="text-[12px] text-[var(--c-muted)] leading-relaxed mb-4">
                 本地上传会继续保存到后端 uploads 目录，返回 http://localhost:8080/uploads/ 开头的地址。
               </div>
               <a-button type="primary" :loading="uploadConfigSaving" @click="onSaveUploadConfig"
-                        class="!bg-[#a88c6b] hover:!bg-[#967b5c] !border-[#a88c6b]">
+                        class="!bg-[var(--c-primary)] hover:!bg-[var(--c-primary-deep)] !border-[var(--c-primary)]">
                 <i class="fa-solid fa-floppy-disk mr-1"></i>保存上传设置
               </a-button>
             </a-form>
@@ -827,7 +897,7 @@
               <a-form-item label="所属方 / 风格">
                 <a-tag color="gold">{{ currentPosterSide.key }} · {{ currentPosterSide.label }}</a-tag>
                 <a-tag color="orange">{{ currentPosterLayout.label }}</a-tag>
-                <span class="text-[11px] text-[#8A8680] ml-2">路由 {{ currentPosterPreviewPath }}</span>
+                <span class="text-[11px] text-[var(--c-muted)] ml-2">路由 {{ currentPosterPreviewPath }}</span>
               </a-form-item>
               <a-form-item label="版式模板">
                 <a-radio-group v-model:value="posterCfg.template" class="poster-tpl-group">
@@ -835,17 +905,42 @@
                     {{ t.label }}
                   </a-radio-button>
                 </a-radio-group>
-                <div class="text-[11px] text-[#8A8680] mt-1">
+                <div class="text-[11px] text-[var(--c-muted)] mt-1">
                   {{ POSTER_TEMPLATES.find(t => t.value === posterCfg.template)?.desc }}
                 </div>
               </a-form-item>
+              <a-form-item label="风格模板">
+                <div class="poster-theme-picker">
+                  <button
+                    v-for="t in POSTER_THEMES"
+                    :key="t.value"
+                    type="button"
+                    class="poster-theme-card"
+                    :class="{ active: posterCfg.posterTheme === t.value }"
+                    @click="posterCfg.posterTheme = t.value"
+                  >
+                    <span
+                      class="poster-theme-swatch"
+                      :style="{ background: `linear-gradient(150deg, ${t.mid}, ${t.deep})` }"
+                    >
+                      <i :style="{ borderColor: t.gold }"></i>
+                      <b :style="{ color: t.gold }">囍</b>
+                    </span>
+                    <span class="poster-theme-name">{{ t.label }}</span>
+                    <i v-if="posterCfg.posterTheme === t.value" class="poster-theme-check fa-solid fa-check"></i>
+                  </button>
+                </div>
+                <div class="text-[11px] text-[var(--c-muted)] mt-1">
+                  {{ POSTER_THEMES.find(t => t.value === posterCfg.posterTheme)?.desc }}。五套配色皮肤对竖版 / 横版模板都生效，长图导出与印章同步换色。
+                </div>
+              </a-form-item>
               <a-form-item label="手机端布局">
                 <a-radio-group v-model:value="posterCfg.mobileLayout">
                   <a-radio-button v-for="t in MOBILE_LAYOUTS" :key="t.value" :value="t.value">
                     {{ t.label }}
                   </a-radio-button>
                 </a-radio-group>
-                <div class="text-[11px] text-[#8A8680] mt-1">
+                <div class="text-[11px] text-[var(--c-muted)] mt-1">
                   {{ MOBILE_LAYOUTS.find(t => t.value === posterCfg.mobileLayout)?.desc }}（仅窄屏生效，PC 不受影响）
                 </div>
               </a-form-item>
@@ -885,9 +980,9 @@
                   :options="posterMusicSelectOptions"
                   :loading="posterMusicLoading"
                 />
-                <div class="text-[11px] text-[#8A8680] mt-1">
+                <div class="text-[11px] text-[var(--c-muted)] mt-1">
                   曲目来自「背景音乐」页；清空则该海报不播放。可到
-                  <a class="text-[#a88c6b] cursor-pointer" @click="activeTab = 'music'">背景音乐</a>
+                  <a class="text-[var(--c-primary)] cursor-pointer" @click="activeTab = 'music'">背景音乐</a>
                   上传管理。
                 </div>
               </a-form-item>
@@ -951,7 +1046,7 @@
                     <span class="hero-focus-dot" />
                   </button>
                 </div>
-                <div class="text-[11px] text-[#8A8680] mt-1">
+                <div class="text-[11px] text-[var(--c-muted)] mt-1">
                   {{ heroFocusDevice === 'mobile' ? '手机端' : 'PC 端' }}焦点：拖拽十字准星或点网格；当前
                   {{ Math.round(heroFocusActiveX) }}% · {{ Math.round(heroFocusActiveY) }}%
                 </div>
@@ -1071,7 +1166,7 @@
                 type="primary"
                 size="small"
                 :loading="posterSaving"
-                class="!bg-[#a88c6b] hover:!bg-[#967b5c] !border-[#a88c6b]"
+                class="!bg-[var(--c-primary)] hover:!bg-[var(--c-primary-deep)] !border-[var(--c-primary)]"
                 @click="onSavePosterConfig"
               >
                 <i class="fa-solid fa-floppy-disk mr-1"></i>保存
@@ -1084,43 +1179,61 @@
           <div class="admin-panel !p-4 mb-3">
             <div class="flex justify-between items-center gap-3 flex-wrap">
               <div>
-                <div class="text-sm text-[#2c2c2c]">相册页</div>
-                <div class="text-[11px] text-[#8A8680] mt-0.5">共 {{ cfg.photoPages.length }} 页</div>
+                <div class="text-sm text-[var(--c-ink)]">相册页</div>
+                <div class="text-[11px] text-[var(--c-muted)] mt-0.5">共 {{ cfg.photoPages.length }} 页</div>
               </div>
               <a-button size="small" type="primary"
-                        class="!bg-[#a88c6b] hover:!bg-[#967b5c] !border-[#a88c6b]"
+                        class="!bg-[var(--c-primary)] hover:!bg-[var(--c-primary-deep)] !border-[var(--c-primary)]"
                         @click="addPage">
                 <i class="fa-solid fa-plus mr-1"></i>新增相册页
               </a-button>
             </div>
-            <a-tabs
-              v-if="cfg.photoPages.length"
-              v-model:activeKey="activePhotoTab"
-              size="small"
-              type="card"
-              class="photo-page-tabs mt-3"
-              :destroyInactiveTabPane="true"
-            >
-              <a-tab-pane v-for="(page, idx) in cfg.photoPages" :key="String(idx)" :tab="`第 ${idx + 1} 页`" />
-            </a-tabs>
+            <div v-if="cfg.photoPages.length" class="photo-page-chips mt-3">
+              <button
+                v-for="(page, idx) in cfg.photoPages"
+                :key="idx"
+                type="button"
+                class="photo-chip"
+                :class="{
+                  active: idx === currentPhotoIndex,
+                  'drag-over': chipDragOver === idx && chipDragIndex !== idx,
+                  dragging: chipDragIndex === idx,
+                }"
+                draggable="true"
+                :title="`${pageTypeLabel(page.type)} · 拖拽可排序`"
+                @click="setActivePhotoIndex(idx)"
+                @dragstart="onChipDragStart(idx, $event)"
+                @dragover.prevent="chipDragOver = idx"
+                @dragleave="chipDragOver === idx && (chipDragOver = -1)"
+                @drop.prevent="onChipDrop(idx)"
+                @dragend="onChipDragEnd"
+              >
+                <span class="photo-chip-no">{{ String(idx + 1).padStart(2, '0') }}</span>
+                <span class="photo-chip-type">{{ pageTypeLabel(page.type) }}</span>
+              </button>
+              <span class="photo-chips-hint"><i class="fa-solid fa-up-down-left-right mr-1"></i>拖拽页签可排序</span>
+            </div>
           </div>
           <div v-if="!cfg.photoPages.length" class="admin-empty">
             <div class="admin-empty-icon"><i class="fa-regular fa-images"></i></div>
-            <div class="text-[13px] text-[#5c5348]">暂无相册页</div>
+            <div class="text-[13px] text-[var(--c-ink-soft)]">暂无相册页</div>
           </div>
           <template v-for="(page, idx) in cfg.photoPages" :key="idx">
-          <a-card v-if="idx === currentPhotoIndex" :bordered="false" class="!shadow-sm mb-4 !rounded-2xl !border !border-[#a88c6b]/10">
+          <a-card v-if="idx === currentPhotoIndex" :bordered="false" class="!shadow-sm mb-4 !rounded-2xl !border !border-[var(--c-primary)]/10">
             <div class="flex justify-between items-center mb-3">
-              <span class="inline-flex items-center gap-2 text-[#a88c6b] text-sm">
-                <span class="w-7 h-7 rounded-lg bg-[#a88c6b]/10 text-[11px] inline-flex items-center justify-center tracking-wider">
+              <span class="inline-flex items-center gap-2 text-[var(--c-primary)] text-sm">
+                <span class="w-7 h-7 rounded-lg bg-[var(--c-primary)]/10 text-[11px] inline-flex items-center justify-center tracking-wider">
                   {{ String(idx + 1).padStart(2, '0') }}
                 </span>
-                第 {{ idx + 1 }} 页
+                第 {{ idx + 1 }} 页 · {{ pageTypeLabel(page.type) }}
               </span>
               <div class="flex gap-1">
-                <a-button size="small" :disabled="idx===0" @click="movePage(idx,-1)"><i class="fa-solid fa-arrow-up"></i></a-button>
-                <a-button size="small" :disabled="idx===cfg.photoPages.length-1" @click="movePage(idx,1)"><i class="fa-solid fa-arrow-down"></i></a-button>
-                <a-button size="small" danger type="text" @click="removePage(idx)"><i class="fa-solid fa-trash"></i></a-button>
+                <a-button size="small" :disabled="idx===0" @click="movePage(idx,-1)" title="前移"><i class="fa-solid fa-arrow-up"></i></a-button>
+                <a-button size="small" :disabled="idx===cfg.photoPages.length-1" @click="movePage(idx,1)" title="后移"><i class="fa-solid fa-arrow-down"></i></a-button>
+                <a-button size="small" @click="duplicatePage(idx)" title="复制本页"><i class="fa-solid fa-copy"></i></a-button>
+                <a-popconfirm title="删除此相册页？" ok-text="删除" cancel-text="取消" @confirm="removePage(idx)">
+                  <a-button size="small" danger type="text" title="删除本页"><i class="fa-solid fa-trash"></i></a-button>
+                </a-popconfirm>
               </div>
             </div>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6">
@@ -1128,10 +1241,14 @@
                 <a-select v-model:value="page.type" @change="() => ensurePageShape(page)">
                   <a-select-option value="single">单图</a-select-option>
                   <a-select-option value="overlap">错落双图</a-select-option>
+                  <a-select-option value="triptych">三联屏（3 图）</a-select-option>
                   <a-select-option value="one-large-five-small">一大五小</a-select-option>
                   <a-select-option value="nine-grid">九宫格</a-select-option>
+                  <a-select-option value="mosaic">杂志拼贴（6 图）</a-select-option>
                   <a-select-option value="masonry">瀑布流</a-select-option>
                   <a-select-option value="carousel">轮播滑动</a-select-option>
+                  <a-select-option value="filmstrip">胶片连拍（4 图横滑）</a-select-option>
+                  <a-select-option value="fan">扇形叠影（5 图）</a-select-option>
                   <a-select-option value="polaroid">拍立得拼贴</a-select-option>
                   <a-select-option value="heart-collage">爱心拼接</a-select-option>
                 </a-select>
@@ -1147,21 +1264,9 @@
                 </div>
               </a-form-item>
             </div>
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 items-start">
-              <a-form-item label="边框样式">
-                <a-select v-model:value="page.borderStyle">
-                  <a-select-option v-for="b in BORDER_STYLES" :key="b.value" :value="b.value">{{ b.label }}</a-select-option>
-                </a-select>
-              </a-form-item>
-              <div class="flex items-center gap-3">
-                <span class="text-[11px] text-[#a88c6b]">预览</span>
-                <div class="w-[70px] h-[88px] shrink-0">
-                  <div :class="borderClass(page.borderStyle)" style="width:100%;height:100%">
-                    <img src="https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=200&q=80" />
-                  </div>
-                </div>
-              </div>
-            </div>
+            <a-form-item label="边框样式（点选即预览效果）">
+              <border-style-picker v-model="page.borderStyle" />
+            </a-form-item>
             <!-- 单图版式的宽度设置（逐页配置） -->
             <div v-if="page.type==='single'" class="grid grid-cols-1 md:grid-cols-2 gap-x-6 items-start">
               <a-form-item label="图片宽度">
@@ -1172,7 +1277,7 @@
               </a-form-item>
               <a-form-item v-if="page.singleWidth==='full'" label="保持原始宽高比">
                 <a-switch v-model:checked="page.singleKeepRatio" />
-                <div class="text-[11px] text-[#8A8680] mt-1">开启：按图片原始比例显示；关闭：固定 4:5 比例裁切铺满。</div>
+                <div class="text-[11px] text-[var(--c-muted)] mt-1">开启：按图片原始比例显示；关闭：固定 4:5 比例裁切铺满。</div>
               </a-form-item>
             </div>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6">
@@ -1188,14 +1293,14 @@
             </a-form-item>
             <!-- 图片上传区：按版式渲染 -->
             <div class="flex flex-wrap items-center justify-between gap-2 mt-2 mb-2">
-              <div class="text-[11px] text-[#8A8680]">
+              <div class="text-[11px] text-[var(--c-muted)]">
                 原图用于预览；展示图为等比缩放后的体积（不裁切）。
-                <span v-if="resizeProgress" class="text-[#a88c6b] ml-1">{{ resizeProgress }}</span>
+                <span v-if="resizeProgress" class="text-[var(--c-primary)] ml-1">{{ resizeProgress }}</span>
               </div>
               <a-button
                 size="small"
                 type="primary"
-                class="!bg-[#a88c6b] hover:!bg-[#967b5c] !border-[#a88c6b]"
+                class="!bg-[var(--c-primary)] hover:!bg-[var(--c-primary-deep)] !border-[var(--c-primary)]"
                 :loading="resizingPage"
                 :disabled="uploading || !pageHasOriginal(page)"
                 @click="batchResizeAndUpload(page)"
@@ -1208,7 +1313,7 @@
                 <div class="relative w-[96px]">
                   <image-field v-model="page.img1" @pick="openUpload(u => setOriginalAndClearResized(page, 'img1', u))" :uploading="uploading" />
                   <div v-if="page.img1Resized" class="text-center mt-1">
-                    <div class="text-[9px] text-[#a88c6b]">展示已生成</div>
+                    <div class="text-[9px] text-[var(--c-primary)]">展示已生成</div>
                     <div v-if="page.img1ResizedMeta" class="resized-meta">{{ page.img1ResizedMeta }}</div>
                   </div>
                 </div>
@@ -1217,21 +1322,21 @@
                 <div class="relative w-[96px]">
                   <image-field v-model="page.img1" label="图一" @pick="openUpload(u => setOriginalAndClearResized(page, 'img1', u))" :uploading="uploading" />
                   <div v-if="page.img1Resized" class="text-center mt-1">
-                    <div class="text-[9px] text-[#a88c6b]">展示已生成</div>
+                    <div class="text-[9px] text-[var(--c-primary)]">展示已生成</div>
                     <div v-if="page.img1ResizedMeta" class="resized-meta">{{ page.img1ResizedMeta }}</div>
                   </div>
                 </div>
                 <div class="relative w-[96px]">
                   <image-field v-model="page.img2" label="图二" @pick="openUpload(u => setOriginalAndClearResized(page, 'img2', u))" :uploading="uploading" />
                   <div v-if="page.img2Resized" class="text-center mt-1">
-                    <div class="text-[9px] text-[#a88c6b]">展示已生成</div>
+                    <div class="text-[9px] text-[var(--c-primary)]">展示已生成</div>
                     <div v-if="page.img2ResizedMeta" class="resized-meta">{{ page.img2ResizedMeta }}</div>
                   </div>
                 </div>
               </template>
               <template v-else-if="page.type === 'heart-collage'">
                 <div class="w-full">
-                  <div class="text-[11px] text-[#8A8680] mb-2 flex flex-wrap items-center gap-x-3 gap-y-1">
+                  <div class="text-[11px] text-[var(--c-muted)] mb-2 flex flex-wrap items-center gap-x-3 gap-y-1">
                     <span>
                       <strong>单击</strong>两格对调顺序；格内<strong>拖拽</strong>调整展示焦点（同海报）。
                       空格点击上传。
@@ -1240,7 +1345,7 @@
                       v-if="heartSwapSelected?.page === page"
                       size="small"
                       type="link"
-                      class="!px-0 !h-auto !text-[#a88c6b]"
+                      class="!px-0 !h-auto !text-[var(--c-primary)]"
                       @click="heartSwapSelected = null"
                     >取消选择（已选：{{ heartSlotLabel(heartSwapSelected.idx) }}）</a-button>
                   </div>
@@ -1259,6 +1364,7 @@
                           'swap-target': heartSwapSelected?.page === page && heartSwapSelected?.idx !== iidx,
                           dragging: heartFocusDrag?.page === page && heartFocusDrag?.idx === iidx && heartFocusDrag?.moved,
                         }"
+                        :style="{ borderRadius: HEART_SLOTS[iidx].r }"
                         @pointerdown="onHeartSlotPointerDown($event, page, iidx)"
                       >
                         <img
@@ -1266,7 +1372,7 @@
                           :src="page.imagesResized?.[iidx] || page.images[iidx]"
                           alt=""
                           draggable="false"
-                          :style="{ objectPosition: heartFocusCssAt(page, iidx) }"
+                          :style="{ objectPosition: heartFocusCssAt(page, iidx), clipPath: HEART_SLOTS[iidx].clip }"
                         />
                         <div v-else class="heart-admin-empty">
                           <span class="text-[16px] leading-none">+</span>
@@ -1308,21 +1414,21 @@
                                @pick="openUpload(u => setOriginalImageAt(page, iidx, u))"
                                :uploading="uploading" />
                   <div v-if="page.imagesResized?.[iidx]" class="text-center mt-1">
-                    <div class="text-[9px] text-[#a88c6b]">展示已生成</div>
+                    <div class="text-[9px] text-[var(--c-primary)]">展示已生成</div>
                     <div v-if="page.imagesResizedMeta?.[iidx]" class="resized-meta">{{ page.imagesResizedMeta[iidx] }}</div>
                   </div>
                   <button v-if="isFlexible(page.type) && page.images.length > 1"
-                          class="absolute -top-2 -right-2 w-5 h-5 rounded-full bg-[#a88c6b] text-white text-[10px] leading-none flex items-center justify-center shadow"
+                          class="absolute -top-2 -right-2 w-5 h-5 rounded-full bg-[var(--c-primary)] text-white text-[10px] leading-none flex items-center justify-center shadow"
                           @click="removeImage(page, iidx)" title="移除该图">✕</button>
                   <button v-if="iidx > 0"
-                          class="absolute -bottom-2 left-1 w-5 h-5 rounded-full bg-white border border-[#a88c6b]/50 text-[#a88c6b] text-[10px] leading-none flex items-center justify-center shadow hover:bg-[#a88c6b] hover:text-white transition-colors"
+                          class="absolute -bottom-2 left-1 w-5 h-5 rounded-full bg-white border border-[var(--c-primary)]/50 text-[var(--c-primary)] text-[10px] leading-none flex items-center justify-center shadow hover:bg-[var(--c-primary)] hover:text-white transition-colors"
                           @click="moveImage(page, iidx, -1)" title="前移"><i class="fa-solid fa-arrow-left"></i></button>
                   <button v-if="iidx < page.images.length - 1"
-                          class="absolute -bottom-2 right-1 w-5 h-5 rounded-full bg-white border border-[#a88c6b]/50 text-[#a88c6b] text-[10px] leading-none flex items-center justify-center shadow hover:bg-[#a88c6b] hover:text-white transition-colors"
+                          class="absolute -bottom-2 right-1 w-5 h-5 rounded-full bg-white border border-[var(--c-primary)]/50 text-[var(--c-primary)] text-[10px] leading-none flex items-center justify-center shadow hover:bg-[var(--c-primary)] hover:text-white transition-colors"
                           @click="moveImage(page, iidx, 1)" title="后移"><i class="fa-solid fa-arrow-right"></i></button>
                 </div>
                 <button v-if="isFlexible(page.type)"
-                        class="w-[96px] h-[96px] rounded-xl border border-dashed border-[#a88c6b]/40 text-[#a88c6b] text-[11px] flex items-center justify-center hover:border-[#a88c6b] transition-colors"
+                        class="w-[96px] h-[96px] rounded-xl border border-dashed border-[var(--c-primary)]/40 text-[var(--c-primary)] text-[11px] flex items-center justify-center hover:border-[var(--c-primary)] transition-colors"
                         @click="addImage(page)">+ 添加图片</button>
               </template>
             </div>
@@ -1335,18 +1441,18 @@
           <div class="admin-panel">
             <div class="flex justify-between items-center mb-4">
               <div>
-                <div class="text-sm text-[#2c2c2c]">流程环节</div>
-                <div class="text-[11px] text-[#8A8680] mt-0.5">共 {{ cfg.schedule.length }} 个环节</div>
+                <div class="text-sm text-[var(--c-ink)]">流程环节</div>
+                <div class="text-[11px] text-[var(--c-muted)] mt-0.5">共 {{ cfg.schedule.length }} 个环节</div>
               </div>
               <a-button size="small" type="primary"
-                        class="!bg-[#a88c6b] hover:!bg-[#967b5c] !border-[#a88c6b]"
+                        class="!bg-[var(--c-primary)] hover:!bg-[var(--c-primary-deep)] !border-[var(--c-primary)]"
                         @click="addSchedule">
                 <i class="fa-solid fa-plus mr-1"></i>新增环节
               </a-button>
             </div>
             <div v-if="!cfg.schedule.length" class="admin-empty">
               <div class="admin-empty-icon"><i class="fa-regular fa-clock"></i></div>
-              <div class="text-[13px] text-[#5c5348]">暂无流程</div>
+              <div class="text-[13px] text-[var(--c-ink-soft)]">暂无流程</div>
             </div>
             <ol v-else class="schedule-list">
               <li v-for="(item, idx) in cfg.schedule" :key="idx" class="schedule-row">
@@ -1378,8 +1484,8 @@
           <div class="admin-panel">
             <div class="flex justify-between items-center mb-4">
               <div>
-                <div class="text-sm text-[#2c2c2c]">出席回执</div>
-                <div class="text-[11px] text-[#8A8680] mt-0.5">共 {{ rsvpList.length }} 条</div>
+                <div class="text-sm text-[var(--c-ink)]">出席回执</div>
+                <div class="text-[11px] text-[var(--c-muted)] mt-0.5">共 {{ rsvpList.length }} 条</div>
               </div>
               <a-button size="small" @click="loadRsvp"><i class="fa-solid fa-rotate-right mr-1"></i>刷新</a-button>
             </div>
@@ -1400,7 +1506,7 @@
                   >{{ rsvpCountLabel(record.guest_count) }}</span>
                 </template>
                 <template v-else-if="column.key==='created_at'">
-                  <span class="text-[12px] text-[#8A8680]">{{ formatTime(record.created_at) }}</span>
+                  <span class="text-[12px] text-[var(--c-muted)]">{{ formatTime(record.created_at) }}</span>
                 </template>
                 <template v-else-if="column.key==='actions'">
                   <a-button size="small" danger type="text" @click="onDeleteRsvp(record)">删除</a-button>
@@ -1415,11 +1521,11 @@
           <div class="admin-panel">
             <div class="flex justify-between items-center mb-4 gap-3 flex-wrap">
               <div>
-                <div class="text-sm text-[#2c2c2c]">礼金记录</div>
-                <div class="text-[11px] text-[#8A8680] mt-0.5">
+                <div class="text-sm text-[var(--c-ink)]">礼金记录</div>
+                <div class="text-[11px] text-[var(--c-muted)] mt-0.5">
                   共 {{ cashGiftCount }} 笔 · 合计 ¥{{ cashGiftTotal }}
-                  · 前台录入 <a class="text-[#a88c6b]" href="/lijin" target="_blank">/lijin</a>
-                  · 明细 <a class="text-[#a88c6b]" href="/lijin/list" target="_blank">/lijin/list</a>
+                  · 前台录入 <a class="text-[var(--c-primary)]" href="/lijin" target="_blank">/lijin</a>
+                  · 明细 <a class="text-[var(--c-primary)]" href="/lijin/list" target="_blank">/lijin/list</a>
                 </div>
               </div>
               <div class="flex gap-2">
@@ -1440,14 +1546,14 @@
             >
               <template #bodyCell="{ column, record }">
                 <template v-if="column.key==='amount'">
-                  <span class="text-[#a88c6b] font-medium">¥{{ record.amount }}</span>
+                  <span class="text-[var(--c-primary)] font-medium">¥{{ record.amount }}</span>
                 </template>
                 <template v-else-if="column.key==='created_at'">
-                  <span class="text-[12px] text-[#8A8680]">{{ formatTime(record.created_at) }}</span>
+                  <span class="text-[12px] text-[var(--c-muted)]">{{ formatTime(record.created_at) }}</span>
                 </template>
                 <template v-else-if="column.key==='actions'">
                   <a-space>
-                    <a-button size="small" type="link" class="!text-[#a88c6b] !px-1" @click="openCashGiftEdit(record)">编辑</a-button>
+                    <a-button size="small" type="link" class="!text-[var(--c-primary)] !px-1" @click="openCashGiftEdit(record)">编辑</a-button>
                     <a-button size="small" danger type="text" @click="onDeleteCashGift(record)">删除</a-button>
                   </a-space>
                 </template>
@@ -1458,15 +1564,15 @@
           <div class="admin-panel mt-4">
             <div class="flex justify-between items-center mb-3 gap-3 flex-wrap">
               <div>
-                <div class="text-sm text-[#2c2c2c]">记账口令</div>
-                <div class="text-[11px] text-[#8A8680] mt-0.5">
-                  前台 <a class="text-[#a88c6b]" href="/lijin" target="_blank">/lijin</a> 登记礼金前需输入此口令
+                <div class="text-sm text-[var(--c-ink)]">记账口令</div>
+                <div class="text-[11px] text-[var(--c-muted)] mt-0.5">
+                  前台 <a class="text-[var(--c-primary)]" href="/lijin" target="_blank">/lijin</a> 登记礼金前需输入此口令
                 </div>
               </div>
               <a-button
                 size="small"
                 type="primary"
-                class="!bg-[#a88c6b] !border-[#a88c6b]"
+                class="!bg-[var(--c-primary)] !border-[var(--c-primary)]"
                 :loading="cashEntryPassSaving"
                 @click="saveCashEntryPass"
               >保存口令</a-button>
@@ -1482,15 +1588,15 @@
           <div class="admin-panel mt-4">
             <div class="flex justify-between items-center mb-3 gap-3 flex-wrap">
               <div>
-                <div class="text-sm text-[#2c2c2c]">查看全部口令</div>
-                <div class="text-[11px] text-[#8A8680] mt-0.5">
-                  前台 <a class="text-[#a88c6b]" href="/lijin/list" target="_blank">/lijin/list</a> 需输入口令后查看完整礼金列表
+                <div class="text-sm text-[var(--c-ink)]">查看全部口令</div>
+                <div class="text-[11px] text-[var(--c-muted)] mt-0.5">
+                  前台 <a class="text-[var(--c-primary)]" href="/lijin/list" target="_blank">/lijin/list</a> 需输入口令后查看完整礼金列表
                 </div>
               </div>
               <a-button
                 size="small"
                 type="primary"
-                class="!bg-[#a88c6b] !border-[#a88c6b]"
+                class="!bg-[var(--c-primary)] !border-[var(--c-primary)]"
                 :loading="cashViewPassSaving"
                 @click="saveCashViewPass"
               >保存口令</a-button>
@@ -1506,15 +1612,15 @@
           <div class="admin-panel mt-4">
             <div class="flex justify-between items-center mb-3 gap-3 flex-wrap">
               <div>
-                <div class="text-sm text-[#2c2c2c]">备注快捷选项</div>
-                <div class="text-[11px] text-[#8A8680] mt-0.5">前台礼金页可一键点选；男方 / 女方分开配置</div>
+                <div class="text-sm text-[var(--c-ink)]">备注快捷选项</div>
+                <div class="text-[11px] text-[var(--c-muted)] mt-0.5">前台礼金页可一键点选；男方 / 女方分开配置</div>
               </div>
               <div class="flex gap-2">
                 <a-button size="small" @click="resetCashNotePresets">恢复默认</a-button>
                 <a-button
                   size="small"
                   type="primary"
-                  class="!bg-[#a88c6b] !border-[#a88c6b]"
+                  class="!bg-[var(--c-primary)] !border-[var(--c-primary)]"
                   :loading="cashNotesSaving"
                   @click="saveCashNotePresets"
                 >保存选项</a-button>
@@ -1582,8 +1688,8 @@
           <div class="admin-panel">
             <div class="flex items-center justify-between mb-4 gap-3 flex-wrap">
               <div>
-                <div class="text-sm text-[#2c2c2c]">弹幕审核</div>
-                <div class="text-[11px] text-[#8A8680] mt-0.5">共 {{ danmakuList.length }} 条</div>
+                <div class="text-sm text-[var(--c-ink)]">弹幕审核</div>
+                <div class="text-[11px] text-[var(--c-muted)] mt-0.5">共 {{ danmakuList.length }} 条</div>
               </div>
               <div class="flex items-center gap-2 flex-wrap">
                 <a-radio-group v-model:value="danmakuFilter" button-style="solid" size="small" class="admin-filter">
@@ -1622,11 +1728,11 @@
                   </span>
                 </template>
                 <template v-else-if="column.key==='created_at'">
-                  <span class="text-[12px] text-[#8A8680]">{{ formatTime(record.created_at) }}</span>
+                  <span class="text-[12px] text-[var(--c-muted)]">{{ formatTime(record.created_at) }}</span>
                 </template>
                 <template v-else-if="column.key==='actions'">
                   <a-space>
-                    <a-button size="small" type="primary" class="!bg-[#a88c6b] !border-[#a88c6b]"
+                    <a-button size="small" type="primary" class="!bg-[var(--c-primary)] !border-[var(--c-primary)]"
                               :disabled="record.status === 'approved'"
                               @click="setDanmakuStatus(record.id, 'approved')">通过</a-button>
                     <a-button size="small" danger type="text"
@@ -1652,7 +1758,7 @@
 <script setup>
 import { computed, reactive, ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
-import { message } from 'ant-design-vue'
+import { message, Modal } from 'ant-design-vue'
 import * as echarts from 'echarts/core'
 import { PieChart } from 'echarts/charts'
 import { TooltipComponent, LegendComponent } from 'echarts/components'
@@ -1670,8 +1776,9 @@ import { useAdminStore } from '@/stores/admin'
 import ImageField from '@/components/ImageField.vue'
 import MediaPickerModal from '@/components/MediaPickerModal.vue'
 import HotelWelcomePosterAdmin from '@/views/admin/HotelWelcomePosterAdmin.vue'
-import { BORDER_STYLES, borderClass } from '@/composables/borderStyles'
+import BorderStylePicker from '@/components/BorderStylePicker.vue'
 import { resolveDanmakuSwatch } from '@/utils/danmakuColors'
+import { SITE_THEME_GROUPS, applySiteTheme } from '@/utils/themes'
 import {
   normalizeMusicWeight, normalizeMusicCacheHours, resolveMusicPlayMode,
 } from '@/utils/musicPick'
@@ -1685,7 +1792,7 @@ import {
 } from '@/composables/resizeImage'
 import {
   defaultPosterBundle, normalizePosterBundle, defaultPosterForLayout, normalizePosterConfig,
-  LOADING_EFFECTS, ENTER_EFFECTS, POSTER_SIDES, POSTER_LAYOUTS, POSTER_TEMPLATES, MOBILE_LAYOUTS,
+  LOADING_EFFECTS, ENTER_EFFECTS, POSTER_SIDES, POSTER_LAYOUTS, POSTER_TEMPLATES, POSTER_THEMES, MOBILE_LAYOUTS,
   HERO_FOCUS_GRID, heroFocusGridPoints, clampHeroFocus, heroFocusCss, sideKey, layoutKey,
   posterSideMeta, posterLayoutMeta, posterRoute,
 } from '@/composables/posterDefaults'
@@ -1763,6 +1870,7 @@ const SECTION_KEYS = {
   visual: [
     'introExitEffect', 'scrollMode', 'freeScrollInterval', 'pageSwitchDuration', 'firstScreenDuration',
     'petalEnabled', 'bubbleEnabled', 'introEnabled', 'danmakuEnabled', 'danmakuShowTime', 'nineGridAnimate',
+    'giftEffectMode', 'siteTheme',
   ],
   music: ['musicList', 'activeMusicUrl', 'musicPlayMode', 'musicRandomEnabled', 'musicCacheEnabled', 'musicCacheHours'],
   photos: ['photoPages'],
@@ -2088,6 +2196,8 @@ function defaultConfig() {
     danmakuEnabled: true,
     danmakuShowTime: true,
     nineGridAnimate: false,
+    giftEffectMode: 'classic',
+    siteTheme: 'champagne',
     scrollMode: 'snap', petalEnabled: true, bubbleEnabled: true, introEnabled: true,
     introExitEffect: 'wind',
     freeScrollInterval: 50, pageSwitchDuration: 800, firstScreenDuration: 4500,
@@ -2136,6 +2246,11 @@ const INTRO_EXIT_EFFECTS = [
   { label: '翻书开启', value: 'book' },
   { label: '上提淡出', value: 'lift' },
   { label: '双门揭幕', value: 'doors' },
+  { label: '信封启封（蜡封拆信）', value: 'envelope' },
+  { label: '贺卡掀页（纸张上翻）', value: 'paper' },
+  { label: '穿越景深（镜头推进）', value: 'zoom' },
+  { label: '圆窗收拢（虹膜谢幕）', value: 'iris' },
+  { label: '花瓣飘散（化作花瓣）', value: 'petal' },
 ]
 function heightSelectValue(page) {
   return heightFieldSelectValue(page.height)
@@ -2200,12 +2315,18 @@ function ensurePageShape(p) {
     delete p.imagesResized
     delete p.imagesResizedMeta
   } else {
-    // 固定数量版式：一大五小(6) / 九宫格(9) / 爱心拼接(13)；柔性版式：瀑布流/轮播/拍立得，仅首次补齐
-    const fixed = { 'one-large-five-small': 6, 'nine-grid': 9, 'heart-collage': HEART_SLOT_COUNT, 'masonry': 6, 'carousel': 5, 'polaroid': 6 }
+    // 固定数量版式：三联屏(3)/胶片连拍(4)/扇形叠影(5)/一大五小(6)/杂志拼贴(6)/九宫格(9)/爱心拼接(13)
+    // 柔性版式：瀑布流/轮播/拍立得，仅首次补齐
+    const fixed = {
+      'one-large-five-small': 6, 'nine-grid': 9, 'heart-collage': HEART_SLOT_COUNT,
+      'masonry': 6, 'carousel': 5, 'polaroid': 6,
+      'triptych': 3, 'filmstrip': 4, 'fan': 5, 'mosaic': 6,
+    }
+    const FIXED_LEN_TYPES = ['one-large-five-small', 'nine-grid', 'heart-collage', 'triptych', 'filmstrip', 'fan', 'mosaic']
     const need = fixed[p.type] || 6
     p.images = Array.isArray(p.images) ? p.images : []
     if (p.images.length === 0) while (p.images.length < need) p.images.push('')
-    else if (['one-large-five-small', 'nine-grid', 'heart-collage'].includes(p.type)) {
+    else if (FIXED_LEN_TYPES.includes(p.type)) {
       while (p.images.length < need) p.images.push('')
       if (p.images.length > need) p.images.length = need
     }
@@ -2526,6 +2647,22 @@ async function batchResizeAndUpload(page) {
 }
 
 // 相册页操作
+const PAGE_TYPE_LABELS = {
+  single: '单图',
+  overlap: '错落双图',
+  triptych: '三联屏',
+  'one-large-five-small': '一大五小',
+  'nine-grid': '九宫格',
+  mosaic: '杂志拼贴',
+  masonry: '瀑布流',
+  carousel: '轮播滑动',
+  filmstrip: '胶片连拍',
+  fan: '扇形叠影',
+  polaroid: '拍立得拼贴',
+  'heart-collage': '爱心拼接',
+}
+const pageTypeLabel = (t) => PAGE_TYPE_LABELS[t] || t || '未设置'
+
 function setActivePhotoIndex(i) {
   const max = Math.max(cfg.photoPages.length - 1, 0)
   activePhotoTab.value = String(Math.min(Math.max(i, 0), max))
@@ -2544,6 +2681,38 @@ function movePage(i, dir) {
   const t = cfg.photoPages[i]; cfg.photoPages[i] = cfg.photoPages[j]; cfg.photoPages[j] = t
   setActivePhotoIndex(j)
 }
+function duplicatePage(i) {
+  const src = cfg.photoPages[i]
+  if (!src) return
+  const copy = JSON.parse(JSON.stringify(src))
+  cfg.photoPages.splice(i + 1, 0, copy)
+  setActivePhotoIndex(i + 1)
+  message.success(`已复制第 ${i + 1} 页，请记得保存`)
+}
+
+// 页签拖拽排序
+const chipDragIndex = ref(-1)
+const chipDragOver = ref(-1)
+function onChipDragStart(idx, e) {
+  chipDragIndex.value = idx
+  if (e.dataTransfer) {
+    e.dataTransfer.effectAllowed = 'move'
+    try { e.dataTransfer.setData('text/plain', String(idx)) } catch { /* 部分浏览器限制 */ }
+  }
+}
+function onChipDrop(idx) {
+  const from = chipDragIndex.value
+  if (from >= 0 && from !== idx) {
+    const [moved] = cfg.photoPages.splice(from, 1)
+    cfg.photoPages.splice(idx, 0, moved)
+    setActivePhotoIndex(idx)
+  }
+  onChipDragEnd()
+}
+function onChipDragEnd() {
+  chipDragIndex.value = -1
+  chipDragOver.value = -1
+}
 // 流程操作
 function addSchedule() { cfg.schedule.push({ time: '', event: '', desc: '' }) }
 function removeSchedule(i) { cfg.schedule.splice(i, 1) }
@@ -2881,6 +3050,143 @@ function pickSectionData(section) {
   return cloned
 }
 
+// ---------- 未保存更改保护 ----------
+/** section -> 最近一次 加载/保存 后的 JSON 快照 */
+const sectionSnapshots = {}
+const dirtySections = ref([])
+const activeDirty = computed(() => dirtySections.value.includes(activeTab.value))
+
+/**
+ * 剔除 *ResizedMeta 字段后再比较：进入页签时 fillMissingResizedMeta 会异步探测
+ * 图片尺寸并写回 cfg，这些派生展示数据不应触发"未保存"提示。
+ */
+function stripResizedMeta(value) {
+  if (Array.isArray(value)) return value.map(stripResizedMeta)
+  if (value && typeof value === 'object') {
+    const out = {}
+    for (const k of Object.keys(value)) {
+      if (k.endsWith('ResizedMeta')) continue
+      out[k] = stripResizedMeta(value[k])
+    }
+    return out
+  }
+  return value
+}
+function dirtySignature(section) {
+  return JSON.stringify(stripResizedMeta(pickSectionData(section)))
+}
+
+function sectionIsDirty(section) {
+  const snap = sectionSnapshots[section]
+  if (!snap) return false
+  try { return dirtySignature(section) !== snap } catch { return false }
+}
+function snapshotSection(section) {
+  if (!CONFIG_SECTIONS.includes(section)) return
+  try { sectionSnapshots[section] = dirtySignature(section) } catch { /* ignore */ }
+  recomputeDirtySections()
+}
+function recomputeDirtySections() {
+  dirtySections.value = Object.keys(sectionSnapshots).filter((s) => sectionIsDirty(s))
+}
+let dirtyTimer = null
+watch(cfg, () => {
+  clearTimeout(dirtyTimer)
+  dirtyTimer = setTimeout(recomputeDirtySections, 350)
+}, { deep: true })
+
+// 整站主题：后台界面即时换肤预览（前台由配置下发生效）
+watch(() => cfg.siteTheme, (t) => applySiteTheme(t), { immediate: true })
+
+/** 主题色卡的字体样张（直观区分各风格的标题字体） */
+function themePreviewFont(key) {
+  return {
+    champagne: '"Great Vibes", cursive',
+    'guofeng-new': 'var(--font-serif)',
+    'guofeng-old': '"Ma Shan Zheng", cursive',
+    french: '"Great Vibes", cursive',
+    modern: 'var(--font-sans)',
+    forest: '"Long Cang", cursive',
+    night: '"Playfair Display", serif',
+    magazine: '"Playfair Display", serif',
+    newspaper: 'var(--font-serif)',
+    pixel: '"Fusion Pixel 12px Mono latin", "Fusion Pixel 12px Proportional SC", monospace',
+    zen: 'var(--font-sans)',
+  }[key] || 'var(--font-sans)'
+}
+
+function onBeforeUnload(e) {
+  recomputeDirtySections()
+  if (!dirtySections.value.length) return
+  e.preventDefault()
+  e.returnValue = ''
+}
+/** Ctrl/Cmd + S 保存当前页对应的配置 */
+function onGlobalKeydown(e) {
+  if (!(e.ctrlKey || e.metaKey) || String(e.key).toLowerCase() !== 's') return
+  e.preventDefault()
+  if (isConfigTab.value) {
+    if (!saving.value) onSave()
+  } else if (activeTab.value === 'poster') {
+    if (!posterSaving.value) onSavePosterConfig()
+  } else if (activeTab.value === 'upload') {
+    if (!uploadConfigSaving.value) onSaveUploadConfig()
+  }
+}
+
+// ---------- 手机壳实时预览 ----------
+const adminHeaderRef = ref(null)
+/** 顶栏 sticky 高度不定（顶部菜单模式可能换行），动态量出面板起始位置 */
+const previewPanelTop = ref(74)
+function measurePreviewTop() {
+  previewPanelTop.value = (adminHeaderRef.value?.offsetHeight || 64) + 10
+}
+watch(menuLayout, () => nextTick(measurePreviewTop))
+
+const LIVE_PREVIEW_KEY = 'wedding_admin_live_preview'
+const livePreviewOn = ref((() => {
+  try { return localStorage.getItem(LIVE_PREVIEW_KEY) === '1' } catch { return false }
+})())
+const previewFrameRef = ref(null)
+const previewReady = ref(false)
+const previewUrl = '/?preview=1'
+
+function toggleLivePreview() {
+  livePreviewOn.value = !livePreviewOn.value
+  if (!livePreviewOn.value) previewReady.value = false
+  try { localStorage.setItem(LIVE_PREVIEW_KEY, livePreviewOn.value ? '1' : '0') } catch { /* ignore */ }
+}
+function reloadPreview() {
+  previewReady.value = false
+  try { previewFrameRef.value?.contentWindow?.location.reload() } catch { /* ignore */ }
+}
+/** 把已加载过的配置段（含未保存修改）推给预览 iframe */
+function pushPreviewConfig() {
+  if (!livePreviewOn.value || !previewReady.value) return
+  const win = previewFrameRef.value?.contentWindow
+  if (!win) return
+  const payload = {}
+  for (const s of Object.keys(sectionSnapshots)) Object.assign(payload, pickSectionData(s))
+  if (!Object.keys(payload).length) return
+  try {
+    win.postMessage({ type: 'wedding-preview-config', data: payload }, window.location.origin)
+  } catch { /* ignore */ }
+}
+/** iframe 内请柬页就绪后发来握手，再开始推送 */
+function onAdminMessage(e) {
+  if (e.origin !== window.location.origin) return
+  if (e.data?.type === 'wedding-preview-ready') {
+    previewReady.value = true
+    pushPreviewConfig()
+  }
+}
+let previewPushTimer = null
+watch(cfg, () => {
+  if (!livePreviewOn.value) return
+  clearTimeout(previewPushTimer)
+  previewPushTimer = setTimeout(pushPreviewConfig, 400)
+}, { deep: true })
+
 function applySectionData(section, loaded) {
   if (!loaded || typeof loaded !== 'object') return
   if (section === 'music') {
@@ -2930,9 +3236,16 @@ function applySectionData(section, loaded) {
       if (page) fillMissingResizedMeta(page)
     })
   }
+  // 加载/保存后以最新数据为基准快照
+  snapshotSection(section)
 }
 
 async function loadConfigSection(section) {
+  // 本地有未保存修改时不重新拉取，避免服务端数据覆盖编辑内容
+  if (sectionIsDirty(section)) {
+    message.info('该页有未保存的修改，已保留本地编辑（保存后生效）')
+    return
+  }
   tabLoading.value = true
   try {
     const res = await getConfigSection(section)
@@ -3016,6 +3329,7 @@ async function openVisitDetail(fingerprint) {
   }
 }
 
+// echarts 走 canvas，不支持 CSS 变量，固定用香槟色板
 const PIE_COLORS = ['#a88c6b', '#c4a484', '#e8b4b8', '#7c9eb2', '#b5a4c9', '#d4a574', '#9b7e9a', '#64748b']
 
 function disposeVisitCharts() {
@@ -3069,7 +3383,7 @@ function renderPieChart(chartRef, holder, seriesData, emptyName = '暂无数据'
       selectedMode: opts.selectable ? 'single' : false,
       selectedOffset: 8,
       itemStyle: { borderRadius: 4, borderColor: '#fff', borderWidth: 2 },
-      label: { color: '#5c5348', fontSize: 11 },
+      label: { color: 'var(--c-ink-soft)', fontSize: 11 },
       data,
     }],
   }, { notMerge: true })
@@ -3309,8 +3623,23 @@ function openPosterPreview(side = 1, layout = 1) {
 }
 
 function onLogout() {
-  adminStore.logout()
-  router.replace({ name: 'Login', query: { redirect: '/admin' } })
+  recomputeDirtySections()
+  const doLogout = () => {
+    adminStore.logout()
+    router.replace({ name: 'Login', query: { redirect: '/admin' } })
+  }
+  if (dirtySections.value.length) {
+    Modal.confirm({
+      title: '有未保存的更改',
+      content: '退出登录将丢失未保存的编辑内容，确定退出吗？',
+      okText: '仍要退出',
+      okType: 'danger',
+      cancelText: '返回保存',
+      onOk: doLogout,
+    })
+    return
+  }
+  doLogout()
 }
 
 // RSVP
@@ -3573,14 +3902,24 @@ const onResize = () => {
   regionChart?.resize()
   deviceChart?.resize()
   cityChart?.resize()
+  measurePreviewTop()
 }
 
 onMounted(() => {
+  measurePreviewTop()
   window.addEventListener('resize', onResize)
+  window.addEventListener('beforeunload', onBeforeUnload)
+  window.addEventListener('keydown', onGlobalKeydown)
+  window.addEventListener('message', onAdminMessage)
 })
 
 onUnmounted(() => {
   window.removeEventListener('resize', onResize)
+  window.removeEventListener('beforeunload', onBeforeUnload)
+  window.removeEventListener('keydown', onGlobalKeydown)
+  window.removeEventListener('message', onAdminMessage)
+  clearTimeout(dirtyTimer)
+  clearTimeout(previewPushTimer)
   onHeroFocusPointerUp()
   clearHeartSlotPointer()
   disposeVisitCharts()
@@ -3592,11 +3931,235 @@ onUnmounted(() => {
   margin-top: 2px;
   font-size: 9px;
   line-height: 1.35;
-  color: #8A8680;
+  color: var(--c-muted);
   white-space: pre-line;
   word-break: break-all;
 }
 
+/* 相册页 chip 页签（可拖拽排序） */
+.photo-page-chips {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+.photo-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 10px 5px 7px;
+  border: 1px solid rgba(var(--c-primary-rgb), 0.25);
+  border-radius: 9999px;
+  background: #fff;
+  font-size: 11px;
+  color: var(--c-muted);
+  cursor: grab;
+  user-select: none;
+  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
+}
+.photo-chip:hover {
+  border-color: rgba(var(--c-primary-rgb), 0.55);
+  background: #fbf9f4;
+}
+.photo-chip.active {
+  border-color: var(--c-primary);
+  background: var(--c-primary);
+  color: #fff;
+  box-shadow: 0 3px 10px rgba(var(--c-primary-rgb), 0.35);
+}
+.photo-chip.dragging {
+  opacity: 0.5;
+  cursor: grabbing;
+}
+.photo-chip.drag-over {
+  border-style: dashed;
+  border-color: var(--c-primary);
+  transform: scale(1.06);
+}
+.photo-chip-no {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 9999px;
+  background: rgba(var(--c-primary-rgb), 0.12);
+  font-size: 9px;
+  letter-spacing: 0.05em;
+}
+.photo-chip.active .photo-chip-no {
+  background: rgba(255, 255, 255, 0.22);
+}
+.photo-chips-hint {
+  font-size: 10px;
+  color: #b3ada4;
+  margin-left: 2px;
+}
+
+/* 未保存更改提示 */
+.admin-dirty-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  line-height: 1;
+  color: #b45309;
+  background: #fef3c7;
+  border: 1px solid #fcd34d;
+  border-radius: 9999px;
+  padding: 4px 10px;
+  white-space: nowrap;
+}
+.admin-dirty-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #f59e0b;
+  animation: dirtyPulse 1.6s ease-in-out infinite;
+}
+@keyframes dirtyPulse {
+  50% { opacity: 0.3; }
+}
+.admin-save-attn {
+  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25) !important;
+}
+.nav-dirty-dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  margin-left: 6px;
+  border-radius: 50%;
+  background: #f59e0b;
+  vertical-align: middle;
+  animation: dirtyPulse 1.6s ease-in-out infinite;
+}
+
+/* 手机壳实时预览面板 */
+.admin-preview-panel {
+  position: fixed;
+  right: 14px;
+  bottom: 14px;
+  width: 360px;
+  z-index: 24;
+  display: none;
+  flex-direction: column;
+  background: rgba(255, 255, 255, 0.94);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(var(--c-primary-rgb), 0.22);
+  border-radius: 18px;
+  box-shadow: 0 18px 44px rgba(96, 72, 50, 0.16);
+  overflow: hidden;
+}
+@media (min-width: 1280px) {
+  .admin-preview-panel {
+    display: flex;
+  }
+  .preview-open .admin-shell {
+    width: auto;
+    max-width: none;
+    margin-left: 20px;
+    margin-right: 400px;
+  }
+}
+.admin-preview-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  border-bottom: 1px solid rgba(var(--c-primary-rgb), 0.16);
+}
+.admin-preview-title {
+  font-size: 12px;
+  color: var(--c-primary);
+  letter-spacing: 0.08em;
+  white-space: nowrap;
+}
+.admin-preview-tip {
+  font-size: 10px;
+  color: #b3ada4;
+  margin-right: auto;
+  white-space: nowrap;
+}
+.admin-preview-actions {
+  display: flex;
+  gap: 6px;
+}
+.admin-preview-actions button {
+  width: 24px;
+  height: 24px;
+  border-radius: 8px;
+  border: 1px solid rgba(var(--c-primary-rgb), 0.25);
+  background: #fff;
+  color: var(--c-primary);
+  cursor: pointer;
+  font-size: 11px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.18s ease, color 0.18s ease;
+}
+.admin-preview-actions button:hover {
+  background: var(--c-primary);
+  color: #fff;
+}
+.admin-preview-body {
+  flex: 1;
+  overflow: auto;
+  display: flex;
+  justify-content: center;
+  padding: 14px 0;
+  /* 纤细主题色滚动条：面板高度不足时不再出现粗灰原生滚动条 */
+  scrollbar-width: thin;
+  scrollbar-color: rgba(var(--c-primary-rgb), 0.35) transparent;
+}
+.admin-preview-body::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+.admin-preview-body::-webkit-scrollbar-track {
+  background: transparent;
+}
+.admin-preview-body::-webkit-scrollbar-thumb {
+  background: rgba(var(--c-primary-rgb), 0.32);
+  border-radius: 999px;
+}
+.admin-preview-body::-webkit-scrollbar-thumb:hover {
+  background: rgba(var(--c-primary-rgb), 0.55);
+}
+.admin-phone-shell {
+  --pv-scale: 0.78;
+  position: relative;
+  flex: none;
+  width: calc(390px * var(--pv-scale) + 20px);
+  height: calc(844px * var(--pv-scale) + 20px);
+  border-radius: 34px;
+  background: #1d1b19;
+  padding: 10px;
+  box-sizing: border-box;
+  box-shadow: 0 16px 40px rgba(30, 24, 18, 0.35);
+}
+.admin-phone-notch {
+  position: absolute;
+  top: 15px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 86px;
+  height: 8px;
+  border-radius: 9999px;
+  background: rgba(255, 255, 255, 0.16);
+  z-index: 2;
+  pointer-events: none;
+}
+.admin-preview-iframe {
+  width: 390px;
+  height: 844px;
+  border: 0;
+  border-radius: 26px;
+  background: var(--c-paper);
+  transform: scale(var(--pv-scale));
+  transform-origin: top left;
+}
+
 .heart-admin-board {
   position: relative;
   width: 100%;
@@ -3623,7 +4186,7 @@ onUnmounted(() => {
   height: 100%;
   border-radius: 4px;
   overflow: hidden;
-  background: #f0ebe3;
+  background: var(--c-bg-deep);
   border: 1px solid #e7e3db;
   user-select: none;
   touch-action: none;
@@ -3632,12 +4195,12 @@ onUnmounted(() => {
 }
 .heart-admin-cell.empty {
   border-style: dashed;
-  border-color: rgba(168, 140, 107, 0.45);
+  border-color: rgba(var(--c-primary-rgb), 0.45);
   background: #f7f4ef;
 }
 .heart-admin-cell.selected {
-  border-color: #a88c6b;
-  box-shadow: 0 0 0 2px rgba(168, 140, 107, 0.65);
+  border-color: var(--c-primary);
+  box-shadow: 0 0 0 2px rgba(var(--c-primary-rgb), 0.65);
   z-index: 3;
 }
 .heart-admin-cell.swap-target:hover {
@@ -3647,7 +4210,7 @@ onUnmounted(() => {
 }
 .heart-admin-cell.dragging {
   cursor: grabbing;
-  box-shadow: 0 0 0 2px rgba(168, 140, 107, 0.55);
+  box-shadow: 0 0 0 2px rgba(var(--c-primary-rgb), 0.55);
   z-index: 4;
 }
 .heart-admin-cell img {
@@ -3665,7 +4228,7 @@ onUnmounted(() => {
   align-items: center;
   justify-content: center;
   gap: 2px;
-  color: #a88c6b;
+  color: var(--c-primary);
   font-size: 10px;
   line-height: 1.2;
   padding: 2px;
@@ -3708,7 +4271,7 @@ onUnmounted(() => {
   border: none;
   border-radius: 4px;
   background: rgba(255, 255, 255, 0.92);
-  color: #a88c6b;
+  color: var(--c-primary);
   font-size: 10px;
   display: flex;
   align-items: center;
@@ -3718,7 +4281,7 @@ onUnmounted(() => {
   padding: 0;
 }
 .heart-admin-btn:hover {
-  background: #a88c6b;
+  background: var(--c-primary);
   color: #fff;
 }
 .heart-admin-meta {
@@ -3730,12 +4293,12 @@ onUnmounted(() => {
   line-height: 1;
   padding: 2px 3px;
   border-radius: 3px;
-  background: rgba(168, 140, 107, 0.9);
+  background: rgba(var(--c-primary-rgb), 0.9);
   color: #fff;
   pointer-events: none;
 }
 .admin-layout-seg :deep(.ant-segmented-item-selected) {
-  color: #a88c6b;
+  color: var(--c-primary);
 }
 .admin-header {
   padding: 10px 16px 10px;
@@ -3771,7 +4334,7 @@ onUnmounted(() => {
   gap: 6px;
   border: none;
   background: transparent;
-  color: #5c5348;
+  color: var(--c-ink-soft);
   font-size: 13px;
   letter-spacing: 0.04em;
   padding: 8px 12px;
@@ -3781,12 +4344,12 @@ onUnmounted(() => {
   transition: background 0.15s, color 0.15s;
 }
 .admin-top-menu-trigger:hover {
-  background: rgba(168, 140, 107, 0.08);
-  color: #967b5c;
+  background: rgba(var(--c-primary-rgb), 0.08);
+  color: var(--c-primary-deep);
 }
 .admin-top-menu-trigger.active {
-  color: #a88c6b;
-  background: rgba(168, 140, 107, 0.12);
+  color: var(--c-primary);
+  background: rgba(var(--c-primary-rgb), 0.12);
   font-weight: 500;
 }
 .admin-top-menu-caret {
@@ -3794,8 +4357,8 @@ onUnmounted(() => {
   opacity: 0.65;
 }
 .admin-top-dropdown :deep(.ant-dropdown-menu-item-selected) {
-  color: #a88c6b;
-  background: rgba(168, 140, 107, 0.12);
+  color: var(--c-primary);
+  background: rgba(var(--c-primary-rgb), 0.12);
 }
 .admin-shell {
   margin: 0 auto;
@@ -3814,7 +4377,7 @@ onUnmounted(() => {
 }
 .admin-nav {
   background: #fff;
-  border: 1px solid rgba(168, 140, 107, 0.14);
+  border: 1px solid rgba(var(--c-primary-rgb), 0.14);
   border-radius: 16px;
   box-shadow: 0 8px 28px rgba(88, 68, 42, 0.05);
   position: sticky;
@@ -3828,14 +4391,14 @@ onUnmounted(() => {
 .admin-nav-group-title {
   font-size: 11px;
   letter-spacing: 0.12em;
-  color: #8A8680;
+  color: var(--c-muted);
   margin-bottom: 6px;
   padding: 0 6px;
 }
 .admin-nav-group + .admin-nav-group {
   margin-top: 14px;
   padding-top: 12px;
-  border-top: 1px dashed rgba(168, 140, 107, 0.22);
+  border-top: 1px dashed rgba(var(--c-primary-rgb), 0.22);
 }
 .admin-nav-items {
   display: flex;
@@ -3849,7 +4412,7 @@ onUnmounted(() => {
   width: 100%;
   border: 1px solid transparent;
   background: transparent;
-  color: #5c5348;
+  color: var(--c-ink-soft);
   font-size: 13px;
   line-height: 1.2;
   padding: 7px 10px;
@@ -3859,13 +4422,13 @@ onUnmounted(() => {
   text-align: left;
 }
 .admin-nav-item:hover {
-  background: rgba(168, 140, 107, 0.08);
-  color: #967b5c;
+  background: rgba(var(--c-primary-rgb), 0.08);
+  color: var(--c-primary-deep);
 }
 .admin-nav-item.active {
-  background: rgba(168, 140, 107, 0.14);
-  border-color: rgba(168, 140, 107, 0.28);
-  color: #a88c6b;
+  background: rgba(var(--c-primary-rgb), 0.14);
+  border-color: rgba(var(--c-primary-rgb), 0.28);
+  color: var(--c-primary);
   font-weight: 500;
 }
 .admin-nav-icon {
@@ -3877,10 +4440,10 @@ onUnmounted(() => {
 .admin-nav-credit {
   margin-top: 14px;
   padding: 10px 8px 2px;
-  border-top: 1px dashed rgba(168, 140, 107, 0.22);
+  border-top: 1px dashed rgba(var(--c-primary-rgb), 0.22);
   font-size: 11px;
   letter-spacing: 0.08em;
-  color: #a88c6b;
+  color: var(--c-primary);
   text-align: center;
 }
 .admin-main {
@@ -3891,7 +4454,7 @@ onUnmounted(() => {
   .admin-top-menu {
     order: 3;
     flex: 1 1 100%;
-    border-top: 1px solid rgba(168, 140, 107, 0.12);
+    border-top: 1px solid rgba(var(--c-primary-rgb), 0.12);
     margin-top: 2px;
     padding-top: 8px;
   }
@@ -3916,7 +4479,7 @@ onUnmounted(() => {
 
 .admin-panel {
   background: #fff;
-  border: 1px solid rgba(168, 140, 107, 0.14);
+  border: 1px solid rgba(var(--c-primary-rgb), 0.14);
   border-radius: 16px;
   padding: 20px 20px 16px;
   box-shadow: 0 8px 28px rgba(88, 68, 42, 0.05);
@@ -3925,24 +4488,24 @@ onUnmounted(() => {
   border-radius: 14px;
   padding: 16px 18px;
   background: linear-gradient(145deg, #fff 0%, #f8f1e6 100%);
-  border: 1px solid rgba(168, 140, 107, 0.16);
+  border: 1px solid rgba(var(--c-primary-rgb), 0.16);
 }
 .stat-label {
   font-size: 11px;
-  color: #8A8680;
+  color: var(--c-muted);
   letter-spacing: 0.06em;
 }
 .stat-value {
   margin-top: 6px;
   font-size: 28px;
   font-weight: 500;
-  color: #a88c6b;
+  color: var(--c-primary);
   letter-spacing: 0.02em;
   line-height: 1.1;
 }
 .visit-preview-wrap,
 .visit-list-wrap {
-  border: 1px solid rgba(168, 140, 107, 0.12);
+  border: 1px solid rgba(var(--c-primary-rgb), 0.12);
   border-radius: 12px;
   overflow: hidden;
   background: #fffdf9;
@@ -3952,7 +4515,7 @@ onUnmounted(() => {
   max-height: inherit;
 }
 .visit-table-clickable :deep(.ant-table-tbody > tr:hover > td) {
-  background: rgba(168, 140, 107, 0.08) !important;
+  background: rgba(var(--c-primary-rgb), 0.08) !important;
 }
 .visit-detail-summary {
   display: grid;
@@ -3962,12 +4525,12 @@ onUnmounted(() => {
 .visit-detail-section {
   margin-top: 18px;
   padding-top: 14px;
-  border-top: 1px solid rgba(168, 140, 107, 0.14);
+  border-top: 1px solid rgba(var(--c-primary-rgb), 0.14);
 }
 .visit-detail-h {
   font-size: 13px;
   font-weight: 600;
-  color: #2c2c2c;
+  color: var(--c-ink);
   margin-bottom: 8px;
 }
 .visit-detail-list {
@@ -3984,8 +4547,8 @@ onUnmounted(() => {
   font-size: 12px;
   padding: 8px 10px;
   border-radius: 10px;
-  background: #fdfbf7;
-  border: 1px solid rgba(168, 140, 107, 0.1);
+  background: var(--c-paper);
+  border: 1px solid rgba(var(--c-primary-rgb), 0.1);
 }
 @media (max-width: 640px) {
   .visit-detail-summary {
@@ -3995,8 +4558,8 @@ onUnmounted(() => {
 .chart-card {
   border-radius: 14px;
   padding: 14px 16px;
-  background: #fdfbf7;
-  border: 1px solid rgba(168, 140, 107, 0.12);
+  background: var(--c-paper);
+  border: 1px solid rgba(var(--c-primary-rgb), 0.12);
   min-height: 300px;
 }
 
@@ -4007,8 +4570,8 @@ onUnmounted(() => {
   justify-content: center;
   padding: 48px 16px;
   border-radius: 14px;
-  background: linear-gradient(180deg, #fdfbf7 0%, #f7f3ec 100%);
-  border: 1px dashed rgba(168, 140, 107, 0.28);
+  background: linear-gradient(180deg, var(--c-paper) 0%, #f7f3ec 100%);
+  border: 1px dashed rgba(var(--c-primary-rgb), 0.28);
 }
 .admin-empty-icon {
   width: 48px;
@@ -4017,8 +4580,8 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(168, 140, 107, 0.12);
-  color: #a88c6b;
+  background: rgba(var(--c-primary-rgb), 0.12);
+  color: var(--c-primary);
   margin-bottom: 12px;
   font-size: 18px;
 }
@@ -4032,16 +4595,16 @@ onUnmounted(() => {
   gap: 10px;
 }
 .music-track {
-  border: 1px solid rgba(168, 140, 107, 0.14);
+  border: 1px solid rgba(var(--c-primary-rgb), 0.14);
   border-radius: 14px;
-  background: #fdfbf7;
+  background: var(--c-paper);
   padding: 12px 14px;
   transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
 }
 .music-track--active {
-  border-color: rgba(168, 140, 107, 0.55);
+  border-color: rgba(var(--c-primary-rgb), 0.55);
   background: linear-gradient(135deg, #fff 0%, #f8f1e6 100%);
-  box-shadow: 0 6px 18px rgba(168, 140, 107, 0.12);
+  box-shadow: 0 6px 18px rgba(var(--c-primary-rgb), 0.12);
 }
 .music-track-main {
   display: flex;
@@ -4055,8 +4618,8 @@ onUnmounted(() => {
   border-radius: 12px;
   overflow: hidden;
   flex-shrink: 0;
-  border: 1px solid rgba(168, 140, 107, 0.2);
-  background: #f0ebe3;
+  border: 1px solid rgba(var(--c-primary-rgb), 0.2);
+  background: var(--c-bg-deep);
   cursor: pointer;
   padding: 0;
 }
@@ -4072,7 +4635,7 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #a88c6b;
+  color: var(--c-primary);
   font-size: 22px;
   background: radial-gradient(circle at 30% 30%, #fff8ee, #efe4d4);
 }
@@ -4092,7 +4655,7 @@ onUnmounted(() => {
   padding: 0 !important;
   font-size: 14px !important;
   font-weight: 500;
-  color: #2c2c2c;
+  color: var(--c-ink);
 }
 .music-name-input :deep(.ant-input) {
   padding: 0;
@@ -4106,16 +4669,16 @@ onUnmounted(() => {
   gap: 8px;
   margin-top: 2px;
   font-size: 11px;
-  color: #8A8680;
+  color: var(--c-muted);
   min-width: 0;
 }
 .music-badge {
   flex-shrink: 0;
   font-size: 10px;
   letter-spacing: 0.04em;
-  color: #a88c6b;
-  background: rgba(168, 140, 107, 0.12);
-  border: 1px solid rgba(168, 140, 107, 0.25);
+  color: var(--c-primary);
+  background: rgba(var(--c-primary-rgb), 0.12);
+  border: 1px solid rgba(var(--c-primary-rgb), 0.25);
   border-radius: 999px;
   padding: 1px 8px;
 }
@@ -4129,7 +4692,7 @@ onUnmounted(() => {
   display: inline-flex;
   align-items: center;
   gap: 5px;
-  border: 1px solid rgba(168, 140, 107, 0.22);
+  border: 1px solid rgba(var(--c-primary-rgb), 0.22);
   background: #fff;
   color: #7a6550;
   font-size: 11px;
@@ -4139,11 +4702,11 @@ onUnmounted(() => {
   transition: border-color 0.15s, color 0.15s;
 }
 .music-chip:hover {
-  border-color: #a88c6b;
-  color: #a88c6b;
+  border-color: var(--c-primary);
+  color: var(--c-primary);
 }
 .music-chip--muted {
-  color: #9a9084;
+  color: var(--c-muted);
   border-color: transparent;
   background: transparent;
 }
@@ -4152,7 +4715,7 @@ onUnmounted(() => {
   gap: 6px;
 }
 .music-chip--weight:hover {
-  border-color: rgba(168, 140, 107, 0.22);
+  border-color: rgba(var(--c-primary-rgb), 0.22);
   color: #7a6550;
 }
 .music-weight-input {
@@ -4166,7 +4729,7 @@ onUnmounted(() => {
 }
 .music-weight-pct {
   font-size: 10px;
-  color: #a88c6b;
+  color: var(--c-primary);
   min-width: 2.2em;
 }
 .music-audio {
@@ -4207,8 +4770,8 @@ onUnmounted(() => {
   gap: 12px;
   padding: 14px;
   border-radius: 14px;
-  background: #fdfbf7;
-  border: 1px solid rgba(168, 140, 107, 0.12);
+  background: var(--c-paper);
+  border: 1px solid rgba(var(--c-primary-rgb), 0.12);
 }
 .schedule-index {
   width: 36px;
@@ -4219,8 +4782,8 @@ onUnmounted(() => {
   justify-content: center;
   font-size: 12px;
   letter-spacing: 0.06em;
-  color: #a88c6b;
-  background: rgba(168, 140, 107, 0.1);
+  color: var(--c-primary);
+  background: rgba(var(--c-primary-rgb), 0.1);
   flex-shrink: 0;
   margin-bottom: 2px;
 }
@@ -4237,7 +4800,7 @@ onUnmounted(() => {
 }
 .field-label {
   font-size: 11px;
-  color: #a88c6b;
+  color: var(--c-primary);
   margin-bottom: 4px;
   letter-spacing: 0.04em;
 }
@@ -4250,29 +4813,29 @@ onUnmounted(() => {
   color: #7a6550;
   font-weight: 500;
   font-size: 12px;
-  border-bottom: 1px solid rgba(168, 140, 107, 0.16) !important;
+  border-bottom: 1px solid rgba(var(--c-primary-rgb), 0.16) !important;
 }
 .admin-table :deep(.ant-table-tbody > tr > td) {
-  border-bottom: 1px solid rgba(168, 140, 107, 0.08) !important;
+  border-bottom: 1px solid rgba(var(--c-primary-rgb), 0.08) !important;
   font-size: 13px;
 }
 .admin-table :deep(.ant-table-tbody > tr:hover > td) {
-  background: #fdfbf7 !important;
+  background: var(--c-paper) !important;
 }
 .admin-table :deep(.ant-pagination-item-active) {
-  border-color: #a88c6b;
+  border-color: var(--c-primary);
 }
 .admin-table :deep(.ant-pagination-item-active a) {
-  color: #a88c6b;
+  color: var(--c-primary);
 }
 
 .admin-filter :deep(.ant-radio-button-wrapper-checked) {
-  background: #a88c6b !important;
-  border-color: #a88c6b !important;
+  background: var(--c-primary) !important;
+  border-color: var(--c-primary) !important;
   color: #fff !important;
 }
 .admin-filter :deep(.ant-radio-button-wrapper:hover) {
-  color: #a88c6b;
+  color: var(--c-primary);
 }
 
 .admin-pill {
@@ -4291,8 +4854,8 @@ onUnmounted(() => {
 }
 .admin-pill--gold {
   color: #8a7048;
-  background: rgba(168, 140, 107, 0.14);
-  border-color: rgba(168, 140, 107, 0.28);
+  background: rgba(var(--c-primary-rgb), 0.14);
+  border-color: rgba(var(--c-primary-rgb), 0.28);
 }
 .admin-pill--sky {
   color: #4d6f86;
@@ -4310,7 +4873,7 @@ onUnmounted(() => {
   border-color: rgba(134, 179, 143, 0.35);
 }
 .admin-pill--muted {
-  color: #8A8680;
+  color: var(--c-muted);
   background: #f3f1ec;
   border-color: #e7e3db;
 }
@@ -4343,10 +4906,10 @@ onUnmounted(() => {
   padding: 0;
   transition: border-color 0.15s, background 0.15s;
 }
-.hero-focus-cell:hover { border-color: #a88c6b; }
+.hero-focus-cell:hover { border-color: var(--c-primary); }
 .hero-focus-cell.active {
-  border-color: #a88c6b;
-  background: rgba(168, 140, 107, 0.14);
+  border-color: var(--c-primary);
+  background: rgba(var(--c-primary-rgb), 0.14);
 }
 .hero-focus-dot {
   width: 5px;
@@ -4354,7 +4917,7 @@ onUnmounted(() => {
   border-radius: 999px;
   background: #c4b8a4;
 }
-.hero-focus-cell.active .hero-focus-dot { background: #a88c6b; }
+.hero-focus-cell.active .hero-focus-dot { background: var(--c-primary); }
 .hero-focus-preview {
   position: relative;
   width: min(100%, 280px);
@@ -4362,7 +4925,7 @@ onUnmounted(() => {
   border-radius: 8px;
   overflow: hidden;
   border: 1px solid #e7e3db;
-  background: #f0ebe3;
+  background: var(--c-bg-deep);
   user-select: none;
   touch-action: none;
 }
@@ -4376,7 +4939,7 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #8A8680;
+  color: var(--c-muted);
   font-size: 12px;
   padding: 12px;
   text-align: center;
@@ -4395,8 +4958,8 @@ onUnmounted(() => {
   margin: -9px 0 0 -9px;
   border: 2px solid #fff;
   border-radius: 999px;
-  box-shadow: 0 0 0 1px rgba(168, 140, 107, 0.85), 0 1px 4px rgba(0, 0, 0, 0.25);
-  background: rgba(168, 140, 107, 0.35);
+  box-shadow: 0 0 0 1px rgba(var(--c-primary-rgb), 0.85), 0 1px 4px rgba(0, 0, 0, 0.25);
+  background: rgba(var(--c-primary-rgb), 0.35);
   pointer-events: none;
   z-index: 1;
 }
@@ -4413,7 +4976,7 @@ onUnmounted(() => {
   padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
   background: rgba(255, 255, 255, 0.94);
   backdrop-filter: blur(10px);
-  border-top: 1px solid rgba(168, 140, 107, 0.2);
+  border-top: 1px solid rgba(var(--c-primary-rgb), 0.2);
   box-shadow: 0 -8px 24px rgba(88, 68, 42, 0.08);
 }
 .poster-action-bar-inner {
@@ -4435,11 +4998,11 @@ onUnmounted(() => {
   gap: 2px;
   min-width: 0;
   font-size: 12px;
-  color: #5c5348;
+  color: var(--c-ink-soft);
 }
 .poster-action-bar-path {
   font-size: 11px;
-  color: #8A8680;
+  color: var(--c-muted);
 }
 .poster-action-bar-btns {
   display: flex;
@@ -4453,4 +5016,176 @@ onUnmounted(() => {
   .poster-action-bar-btns { width: 100%; justify-content: stretch; }
   .poster-action-bar-btns :deep(.ant-btn) { flex: 1 1 auto; }
 }
+
+/* ---------- 整站风格模板选择 ---------- */
+.theme-group + .theme-group {
+  margin-top: 14px;
+}
+.theme-group-title {
+  font-size: 11px;
+  color: var(--c-primary);
+  letter-spacing: 0.12em;
+  margin-bottom: 8px;
+}
+.theme-picker {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
+  gap: 10px;
+  max-width: 720px;
+}
+.theme-swatch b {
+  position: relative;
+  z-index: 1;
+  font-size: 22px;
+  line-height: 1;
+  font-weight: 700;
+}
+.theme-desc {
+  font-size: 9px;
+  color: var(--c-muted);
+  letter-spacing: 0.02em;
+  line-height: 1.4;
+  text-align: center;
+  padding: 0 2px;
+}
+.theme-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 7px;
+  padding: 10px 6px 8px;
+  border: 1px solid rgba(var(--c-primary-rgb), 0.16);
+  border-radius: 12px;
+  background: #fff;
+  cursor: pointer;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+.theme-card:hover {
+  border-color: rgba(var(--c-primary-rgb), 0.45);
+}
+.theme-card.active {
+  border-color: var(--c-primary);
+  box-shadow: 0 0 0 2px rgba(var(--c-primary-rgb), 0.18);
+}
+.theme-swatch {
+  width: 100%;
+  height: 40px;
+  border-radius: 8px;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+.theme-swatch i {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+}
+.theme-swatch i:last-child {
+  width: 11px;
+  height: 11px;
+}
+.theme-name {
+  font-size: 11px;
+  color: var(--c-ink-soft);
+  letter-spacing: 0.06em;
+}
+.theme-card.active .theme-name {
+  color: var(--c-primary);
+  font-weight: 600;
+}
+.theme-check {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--c-primary);
+  color: #fff;
+  font-size: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+}
+
+/* ---------- 海报风格模板选择 ---------- */
+.poster-theme-picker {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
+  gap: 10px;
+  max-width: 560px;
+}
+.poster-theme-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 6px 7px;
+  border: 1px solid rgba(var(--c-primary-rgb), 0.16);
+  border-radius: 12px;
+  background: #fff;
+  cursor: pointer;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+.poster-theme-card:hover {
+  border-color: rgba(var(--c-primary-rgb), 0.45);
+}
+.poster-theme-card.active {
+  border-color: var(--c-primary);
+  box-shadow: 0 0 0 2px rgba(var(--c-primary-rgb), 0.18);
+}
+.poster-theme-swatch {
+  position: relative;
+  width: 100%;
+  height: 46px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  overflow: hidden;
+}
+.poster-theme-swatch i {
+  position: absolute;
+  inset: 4px;
+  border-radius: 6px;
+  border: 1px solid;
+  opacity: 0.55;
+}
+.poster-theme-swatch b {
+  position: relative;
+  font-size: 20px;
+  line-height: 1;
+  font-weight: 700;
+}
+.poster-theme-name {
+  font-size: 11px;
+  color: var(--c-ink-soft);
+  letter-spacing: 0.06em;
+}
+.poster-theme-card.active .poster-theme-name {
+  color: var(--c-primary);
+  font-weight: 600;
+}
+.poster-theme-check {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--c-primary);
+  color: #fff;
+  font-size: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+}
 </style>
diff --git a/vite-tailwindcss/src/views/admin/AdminLogin.vue b/vite-tailwindcss/src/views/admin/AdminLogin.vue
index 117c6cc..437f04f 100644
--- a/vite-tailwindcss/src/views/admin/AdminLogin.vue
+++ b/vite-tailwindcss/src/views/admin/AdminLogin.vue
@@ -1,37 +1,37 @@
 <template>
-  <div class="min-h-screen w-full flex items-center justify-center bg-[#Fdfbf7] relative overflow-hidden">
+  <div class="min-h-screen w-full flex items-center justify-center bg-[var(--c-paper)] relative overflow-hidden">
     <!-- 背景装饰 -->
-    <div class="absolute -top-24 -right-24 w-80 h-80 rounded-full bg-[#a88c6b]/10 blur-3xl"></div>
+    <div class="absolute -top-24 -right-24 w-80 h-80 rounded-full bg-[var(--c-primary)]/10 blur-3xl"></div>
     <div class="absolute -bottom-24 -left-24 w-80 h-80 rounded-full bg-[#e8a5b2]/10 blur-3xl"></div>
     <div class="absolute inset-0 pointer-events-none opacity-[0.04]"
-         style="background-image: radial-gradient(#a88c6b 1px, transparent 1px); background-size: 22px 22px;"></div>
+         style="background-image: radial-gradient(var(--c-primary) 1px, transparent 1px); background-size: 22px 22px;"></div>
 
-    <div class="relative z-10 w-[360px] bg-white/80 backdrop-blur-xl border border-[#a88c6b]/15 rounded-3xl shadow-2xl p-9 animate-fade-up">
+    <div class="relative z-10 w-[360px] bg-white/80 backdrop-blur-xl border border-[var(--c-primary)]/15 rounded-3xl shadow-2xl p-9 animate-fade-up">
       <div class="text-center mb-8">
-        <div class="text-3xl mb-3 text-[#a88c6b] font-serif">❀</div>
-        <h1 class="text-xl tracking-[0.3em] text-[#2c2c2c] font-light">婚礼邀请函 · 后台</h1>
-        <p class="text-[11px] text-[#8A8680] tracking-[0.25em] mt-2">制作者 · 年糕崽崽</p>
+        <div class="text-3xl mb-3 text-[var(--c-primary)] font-serif">❀</div>
+        <h1 class="text-xl tracking-[0.3em] text-[var(--c-ink)] font-light">婚礼邀请函 · 后台</h1>
+        <p class="text-[11px] text-[var(--c-muted)] tracking-[0.25em] mt-2">制作者 · 年糕崽崽</p>
       </div>
 
       <a-form :model="form" layout="vertical" @finish="onSubmit">
         <a-form-item name="account" :rules="[{ required: true, message: '请输入账号' }]">
           <a-input v-model:value="form.account" size="large" placeholder="管理员账号">
-            <template #prefix><i class="fa-solid fa-user text-[#a88c6b]"></i></template>
+            <template #prefix><i class="fa-solid fa-user text-[var(--c-primary)]"></i></template>
           </a-input>
         </a-form-item>
         <a-form-item name="password" :rules="[{ required: true, message: '请输入密码' }]">
           <a-input-password v-model:value="form.password" size="large" placeholder="密码">
-            <template #prefix><i class="fa-solid fa-lock text-[#a88c6b]"></i></template>
+            <template #prefix><i class="fa-solid fa-lock text-[var(--c-primary)]"></i></template>
           </a-input-password>
         </a-form-item>
         <a-button type="primary" html-type="submit" size="large" block :loading="loading"
-                  class="!bg-[#a88c6b] hover:!bg-[#967b5c] !border-[#a88c6b] !rounded-xl !tracking-[0.2em]">
+                  class="!bg-[var(--c-primary)] hover:!bg-[var(--c-primary-deep)] !border-[var(--c-primary)] !rounded-xl !tracking-[0.2em]">
           登 录
         </a-button>
       </a-form>
 
       <div class="mt-6 text-center">
-        <router-link to="/" class="text-[12px] text-[#a88c6b] hover:underline">返回请柬预览</router-link>
+        <router-link to="/" class="text-[12px] text-[var(--c-primary)] hover:underline">返回请柬预览</router-link>
       </div>
     </div>
   </div>
diff --git a/vite-tailwindcss/src/views/admin/HotelWelcomePosterAdmin.vue b/vite-tailwindcss/src/views/admin/HotelWelcomePosterAdmin.vue
index 18e7c9d..b65c01c 100644
--- a/vite-tailwindcss/src/views/admin/HotelWelcomePosterAdmin.vue
+++ b/vite-tailwindcss/src/views/admin/HotelWelcomePosterAdmin.vue
@@ -4,13 +4,13 @@
     <div v-if="view === 'list'" class="admin-panel">
       <div class="flex justify-between items-center mb-4 gap-3 flex-wrap">
         <div>
-          <div class="text-sm text-[#2c2c2c]">婚礼迎宾易拉宝</div>
-          <div class="text-[11px] text-[#8A8680] mt-0.5">
+          <div class="text-sm text-[var(--c-ink)]">婚礼迎宾易拉宝</div>
+          <div class="text-[11px] text-[var(--c-muted)] mt-0.5">
             共 {{ list.length }} 张 · 酒店门口欢迎海报（新人姓名 / 日期 / WEDDING），非按贵宾制
           </div>
         </div>
         <div class="flex gap-2">
-          <a-button size="small" type="primary" class="!bg-[#a88c6b] !border-[#a88c6b]" @click="openCreate">
+          <a-button size="small" type="primary" class="!bg-[var(--c-primary)] !border-[var(--c-primary)]" @click="openCreate">
             <i class="fa-solid fa-plus mr-1"></i>新建海报
           </a-button>
           <a-button size="small" :loading="listLoading" @click="loadList">
@@ -33,11 +33,11 @@
             <span class="admin-pill admin-pill--gold">{{ templateLabel(record.template) }}</span>
           </template>
           <template v-else-if="column.key === 'updated_at'">
-            <span class="text-[12px] text-[#8A8680]">{{ formatTime(record.updated_at) }}</span>
+            <span class="text-[12px] text-[var(--c-muted)]">{{ formatTime(record.updated_at) }}</span>
           </template>
           <template v-else-if="column.key === 'actions'">
             <a-space>
-              <a-button size="small" type="link" class="!text-[#a88c6b] !px-1" @click="openDetail(record)">编辑</a-button>
+              <a-button size="small" type="link" class="!text-[var(--c-primary)] !px-1" @click="openDetail(record)">编辑</a-button>
               <a-button size="small" danger type="text" @click="onDelete(record)">删除</a-button>
             </a-space>
           </template>
@@ -54,8 +54,8 @@
               <i class="fa-solid fa-arrow-left mr-1"></i>返回列表
             </a-button>
             <div class="min-w-0">
-              <div class="text-sm text-[#2c2c2c] truncate">{{ detail?.name || '迎宾易拉宝' }}</div>
-              <div class="text-[11px] text-[#8A8680] mt-0.5">改新人姓名与日期 · 拖拽排版 · 导出酒店门口立牌 PNG</div>
+              <div class="text-sm text-[var(--c-ink)] truncate">{{ detail?.name || '迎宾易拉宝' }}</div>
+              <div class="text-[11px] text-[var(--c-muted)] mt-0.5">改新人姓名与日期 · 拖拽排版 · 导出酒店门口立牌 PNG</div>
             </div>
           </div>
           <div class="flex gap-2 flex-wrap">
@@ -65,7 +65,7 @@
             <a-button
               size="small"
               type="primary"
-              class="!bg-[#a88c6b] !border-[#a88c6b]"
+              class="!bg-[var(--c-primary)] !border-[var(--c-primary)]"
               :loading="saving"
               @click="saveDetail"
             >
@@ -75,7 +75,7 @@
         </div>
       </div>
 
-      <div v-if="detailLoading" class="admin-panel text-center text-[#8A8680] py-16">加载中…</div>
+      <div v-if="detailLoading" class="admin-panel text-center text-[var(--c-muted)] py-16">加载中…</div>
 
       <div v-else-if="detail" class="hw-editor-grid">
         <div class="admin-panel hw-canvas-panel">
@@ -111,7 +111,7 @@
               {{ t.content || ' ' }}
             </div>
           </div>
-          <div class="text-[10px] text-[#8A8680] mt-2 text-center">点击文字选中并拖拽；点击空白取消选中</div>
+          <div class="text-[10px] text-[var(--c-muted)] mt-2 text-center">点击文字选中并拖拽；点击空白取消选中</div>
         </div>
 
         <div class="admin-panel hw-side-panel">
@@ -156,7 +156,7 @@
               </a-button>
             </div>
 
-            <div v-if="!texts.length" class="text-[11px] text-[#8A8680] mb-3">暂无文字，可切换模板或手动添加</div>
+            <div v-if="!texts.length" class="text-[11px] text-[var(--c-muted)] mb-3">暂无文字，可切换模板或手动添加</div>
 
             <div
               v-for="t in texts"
@@ -166,7 +166,7 @@
               @click="selectedId = t.id"
             >
               <div class="flex justify-between gap-2 mb-2">
-                <span class="text-[11px] text-[#8A8680] truncate">{{ t.content || '（空）' }}</span>
+                <span class="text-[11px] text-[var(--c-muted)] truncate">{{ t.content || '（空）' }}</span>
                 <a-button size="small" danger type="text" class="!px-1" @click.stop="removeText(t.id)">删除</a-button>
               </div>
               <a-input v-model:value="t.content" placeholder="文字内容" class="mb-2" :maxlength="80" />
@@ -205,7 +205,7 @@
                 <a-checkbox v-model:checked="t.shadow">阴影</a-checkbox>
                 <a-checkbox v-model:checked="t.stroke">描边</a-checkbox>
               </div>
-              <div class="text-[10px] text-[#8A8680]">位置 X {{ Math.round(t.x) }}% · Y {{ Math.round(t.y) }}%</div>
+              <div class="text-[10px] text-[var(--c-muted)]">位置 X {{ Math.round(t.x) }}% · Y {{ Math.round(t.y) }}%</div>
             </div>
           </a-form>
         </div>
@@ -251,7 +251,7 @@
             :uploading="uploading"
             @pick="pickCreateImage"
           />
-          <div class="text-[10px] text-[#8A8680] mt-1">创建后改新人姓名、日期，并拖拽排版后导出</div>
+          <div class="text-[10px] text-[var(--c-muted)] mt-1">创建后改新人姓名、日期，并拖拽排版后导出</div>
         </a-form-item>
       </a-form>
     </a-modal>
@@ -267,7 +267,7 @@
       :body-style="{ padding: '12px 16px 8px', maxHeight: 'min(70vh, 640px)', overflow: 'hidden' }"
     >
       <div class="hw-tpl-modal-body">
-        <div class="text-[11px] text-[#8A8680] mb-3 sticky top-0 bg-white z-[1] pb-1">
+        <div class="text-[11px] text-[var(--c-muted)] mb-3 sticky top-0 bg-white z-[1] pb-1">
           每个卡片展示文字落点区域，点击即可选用；之后仍可在画布上拖拽微调
         </div>
         <div v-for="group in templateGroupList" :key="group.label" class="hw-tpl-group">
@@ -885,7 +885,7 @@ defineExpose({ loadList, refresh: loadList })
 <style scoped>
 .admin-panel {
   background: #fff;
-  border: 1px solid rgba(168, 140, 107, 0.14);
+  border: 1px solid rgba(var(--c-primary-rgb), 0.14);
   border-radius: 16px;
   padding: 20px 20px 16px;
   box-shadow: 0 8px 28px rgba(88, 68, 42, 0.05);
@@ -901,8 +901,8 @@ defineExpose({ loadList, refresh: loadList })
 }
 .admin-pill--gold {
   color: #8a7048;
-  background: rgba(168, 140, 107, 0.14);
-  border-color: rgba(168, 140, 107, 0.28);
+  background: rgba(var(--c-primary-rgb), 0.14);
+  border-color: rgba(var(--c-primary-rgb), 0.28);
 }
 .admin-table :deep(.ant-table-thead > tr > th) {
   background: #f7f3ec !important;
@@ -954,7 +954,7 @@ defineExpose({ loadList, refresh: loadList })
   pointer-events: none;
 }
 .hw-stage-empty {
-  color: #8a8680;
+  color: var(--c-muted);
   font-size: 13px;
   line-height: normal;
 }
@@ -991,21 +991,21 @@ defineExpose({ loadList, refresh: loadList })
   overflow: auto;
 }
 .hw-text-row {
-  border: 1px solid rgba(168, 140, 107, 0.2);
+  border: 1px solid rgba(var(--c-primary-rgb), 0.2);
   border-radius: 8px;
   padding: 10px;
   margin-bottom: 10px;
-  background: #fdfbf7;
+  background: var(--c-paper);
   cursor: pointer;
 }
 .hw-text-row.active {
-  border-color: #a88c6b;
-  box-shadow: 0 0 0 1px rgba(168, 140, 107, 0.25);
+  border-color: var(--c-primary);
+  box-shadow: 0 0 0 1px rgba(var(--c-primary-rgb), 0.25);
 }
 .hw-color {
   width: 100%;
   height: 32px;
-  border: 1px solid rgba(168, 140, 107, 0.35);
+  border: 1px solid rgba(var(--c-primary-rgb), 0.35);
   border-radius: 6px;
   padding: 2px;
   background: #fff;
@@ -1018,16 +1018,16 @@ defineExpose({ loadList, refresh: loadList })
   gap: 10px;
   width: 100%;
   padding: 8px 10px;
-  border: 1px solid rgba(168, 140, 107, 0.28);
+  border: 1px solid rgba(var(--c-primary-rgb), 0.28);
   border-radius: 10px;
-  background: #fdfbf7;
+  background: var(--c-paper);
   text-align: left;
   cursor: pointer;
   transition: border-color 0.15s, box-shadow 0.15s;
 }
 .hw-tpl-trigger:hover {
-  border-color: #a88c6b;
-  box-shadow: 0 0 0 1px rgba(168, 140, 107, 0.2);
+  border-color: var(--c-primary);
+  box-shadow: 0 0 0 1px rgba(var(--c-primary-rgb), 0.2);
 }
 .hw-tpl-mini {
   position: relative;
@@ -1059,12 +1059,12 @@ defineExpose({ loadList, refresh: loadList })
 }
 .hw-tpl-trigger-title {
   font-size: 13px;
-  color: #2c2c2c;
+  color: var(--c-ink);
 }
 .hw-tpl-trigger-desc {
   margin-top: 2px;
   font-size: 10px;
-  color: #8a8680;
+  color: var(--c-muted);
   line-height: 1.35;
   display: -webkit-box;
   -webkit-line-clamp: 2;
@@ -1072,7 +1072,7 @@ defineExpose({ loadList, refresh: loadList })
   overflow: hidden;
 }
 .hw-tpl-trigger-icon {
-  color: #a88c6b;
+  color: var(--c-primary);
   font-size: 14px;
   flex-shrink: 0;
 }
@@ -1102,7 +1102,7 @@ defineExpose({ loadList, refresh: loadList })
   }
 }
 .hw-tpl-card {
-  border: 1px solid rgba(168, 140, 107, 0.2);
+  border: 1px solid rgba(var(--c-primary-rgb), 0.2);
   border-radius: 12px;
   padding: 10px;
   background: #fff;
@@ -1111,12 +1111,12 @@ defineExpose({ loadList, refresh: loadList })
   transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
 }
 .hw-tpl-card:hover {
-  border-color: #a88c6b;
+  border-color: var(--c-primary);
   transform: translateY(-1px);
 }
 .hw-tpl-card.active {
-  border-color: #a88c6b;
-  box-shadow: 0 0 0 2px rgba(168, 140, 107, 0.22);
+  border-color: var(--c-primary);
+  box-shadow: 0 0 0 2px rgba(var(--c-primary-rgb), 0.22);
 }
 .hw-tpl-preview {
   position: relative;
@@ -1161,7 +1161,7 @@ defineExpose({ loadList, refresh: loadList })
 }
 .hw-tpl-card-label {
   font-size: 12px;
-  color: #2c2c2c;
+  color: var(--c-ink);
   font-weight: 500;
   display: flex;
   align-items: center;
@@ -1186,7 +1186,7 @@ defineExpose({ loadList, refresh: loadList })
 .hw-tpl-card-desc {
   margin-top: 2px;
   font-size: 10px;
-  color: #8a8680;
+  color: var(--c-muted);
   line-height: 1.35;
   display: -webkit-box;
   -webkit-line-clamp: 2;
diff --git a/vite-tailwindcss/src/views/hb/index.vue b/vite-tailwindcss/src/views/hb/index.vue
index dac3c90..a5410ef 100644
--- a/vite-tailwindcss/src/views/hb/index.vue
+++ b/vite-tailwindcss/src/views/hb/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="hb-root">
+  <div class="hb-root" :data-hb-theme="cfg.posterTheme || 'redgold'">
     <div class="hb-bg-decor" aria-hidden="true">
       <span class="hb-bg-xi hb-bg-xi-1">囍</span>
       <span class="hb-bg-xi hb-bg-xi-2">囍</span>
@@ -168,7 +168,7 @@ import { computed, nextTick, onMounted, onUnmounted, reactive, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import html2canvas from 'html2canvas'
 import { getConfig, getPosterConfig } from '@/api/wedding'
-import { normalizePosterConfig, posterLayoutMeta, posterSideMeta, resolvePosterLayout, resolvePosterSide } from '@/composables/posterDefaults'
+import { normalizePosterConfig, posterLayoutMeta, posterSideMeta, posterThemeMeta, resolvePosterLayout, resolvePosterSide } from '@/composables/posterDefaults'
 import { renderFestiveQr } from '@/composables/renderFestiveQr'
 import { drawXiSeal } from '@/composables/drawXiSeal'
 import { useAudio } from '@/composables/useAudio'
@@ -457,12 +457,13 @@ async function savePosterImage() {
     try { await document.fonts?.ready } catch { /* ignore */ }
     el.querySelectorAll('canvas.sp-xi-mid, canvas.hb-xi-circle').forEach((c) => {
       const isClassic = c.classList.contains('hb-xi-circle')
+      const theme = posterThemeMeta(cfg.posterTheme)
       drawXiSeal(c, {
         size: isClassic ? 22 : 28,
         fontSize: isClassic ? 11 : 13,
-        color: '#d4af37',
-        borderColor: '#d4af37',
-        fill: isClassic ? 'rgba(155, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.18)',
+        color: theme.sealColor,
+        borderColor: theme.sealColor,
+        fill: isClassic ? theme.sealFill : 'rgba(0, 0, 0, 0.18)',
       })
     })
     // 按元素实际宽度抬升倍率：目标约 1600px 宽，最高 3x，避免手机导出糊成一片
@@ -471,7 +472,7 @@ async function savePosterImage() {
     const canvas = await html2canvas(el, {
       useCORS: true,
       allowTaint: true,
-      backgroundColor: '#7a0000',
+      backgroundColor: posterThemeMeta(cfg.posterTheme).shotBg,
       scale,
       logging: false,
       imageTimeout: 20000,
@@ -601,20 +602,135 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-.hb-root {
+/* ============================================================
+   海报风格模板（5 套皮肤）：data-hb-theme 切换整组变量
+   - 面板红分三档 rgb（hi/mid/lo）保留原有明暗层次
+   - 所有模板（竖版/横版）共用这一组变量
+   ============================================================ */
+.hb-root,
+.hb-root[data-hb-theme='redgold'] {
   --hb-red: #9b0000;
   --hb-red-deep: #7a0000;
   --hb-red-bright: #c41e3a;
   --hb-gold: #d4af37;
+  --hb-gold-deep: #a8892e;
   --hb-gold-soft: #f0d78c;
   --hb-cream: #f7e7c3;
+  --hb-ivory: #f7efe0;
+  --hb-gold-rgb: 212, 175, 55;
+  --hb-gold-soft-rgb: 240, 215, 140;
+  --hb-accent-rgb: 196, 30, 58;
+  --hb-cream-rgb: 243, 230, 200;
+  --hb-ivory-rgb: 247, 239, 224;
+  --hb-panel: #8b0000;
+  --hb-panel-deep: #5c0000;
+  --hb-photo-bg: #c23a2b;
+  --hb-panel-hi-rgb: 145, 5, 5;
+  --hb-panel-rgb: 116, 0, 0;
+  --hb-panel-lo-rgb: 85, 0, 0;
+  --hb-page-hi: #c20808;
+  --hb-page-mid: #b30000;
+}
+.hb-root[data-hb-theme='burgundy'] {
+  --hb-red: #6b1d30;
+  --hb-red-deep: #4a1220;
+  --hb-red-bright: #a8465c;
+  --hb-gold: #d9a05b;
+  --hb-gold-deep: #a87840;
+  --hb-gold-soft: #e2b98f;
+  --hb-cream: #ecd9c2;
+  --hb-ivory: #f2e8dc;
+  --hb-gold-rgb: 217, 160, 91;
+  --hb-gold-soft-rgb: 226, 185, 143;
+  --hb-accent-rgb: 168, 70, 92;
+  --hb-cream-rgb: 236, 217, 194;
+  --hb-ivory-rgb: 242, 232, 220;
+  --hb-panel: #5a1728;
+  --hb-panel-deep: #380d18;
+  --hb-photo-bg: #7d3040;
+  --hb-panel-hi-rgb: 108, 32, 50;
+  --hb-panel-rgb: 84, 22, 38;
+  --hb-panel-lo-rgb: 60, 14, 26;
+  --hb-page-hi: #7d2438;
+  --hb-page-mid: #5f1a2a;
+}
+.hb-root[data-hb-theme='navygold'] {
+  --hb-red: #1a2f52;
+  --hb-red-deep: #101f38;
+  --hb-red-bright: #4a6a9e;
+  --hb-gold: #d4b060;
+  --hb-gold-deep: #a3833c;
+  --hb-gold-soft: #e8cf96;
+  --hb-cream: #ecdfc0;
+  --hb-ivory: #f0ead8;
+  --hb-gold-rgb: 212, 176, 96;
+  --hb-gold-soft-rgb: 232, 207, 150;
+  --hb-accent-rgb: 74, 106, 158;
+  --hb-cream-rgb: 236, 223, 192;
+  --hb-ivory-rgb: 240, 234, 216;
+  --hb-panel: #16294a;
+  --hb-panel-deep: #0b1526;
+  --hb-photo-bg: #27436d;
+  --hb-panel-hi-rgb: 30, 52, 88;
+  --hb-panel-rgb: 20, 38, 66;
+  --hb-panel-lo-rgb: 12, 24, 44;
+  --hb-page-hi: #24406b;
+  --hb-page-mid: #1a3054;
+}
+.hb-root[data-hb-theme='inkjade'] {
+  --hb-red: #1d3a32;
+  --hb-red-deep: #132a24;
+  --hb-red-bright: #4a8a74;
+  --hb-gold: #c9b37e;
+  --hb-gold-deep: #97824f;
+  --hb-gold-soft: #d8c493;
+  --hb-cream: #e6dcc0;
+  --hb-ivory: #eee9d8;
+  --hb-gold-rgb: 201, 179, 126;
+  --hb-gold-soft-rgb: 216, 196, 147;
+  --hb-accent-rgb: 74, 138, 116;
+  --hb-cream-rgb: 230, 220, 192;
+  --hb-ivory-rgb: 238, 233, 216;
+  --hb-panel: #1a342d;
+  --hb-panel-deep: #0e1e19;
+  --hb-photo-bg: #2c4f44;
+  --hb-panel-hi-rgb: 34, 62, 53;
+  --hb-panel-rgb: 24, 46, 39;
+  --hb-panel-lo-rgb: 15, 30, 25;
+  --hb-page-hi: #2a4c40;
+  --hb-page-mid: #203b32;
+}
+.hb-root[data-hb-theme='rosewood'] {
+  --hb-red: #7d2c42;
+  --hb-red-deep: #5c1f30;
+  --hb-red-bright: #c05a74;
+  --hb-gold: #e0b487;
+  --hb-gold-deep: #b08a5c;
+  --hb-gold-soft: #f0d3b2;
+  --hb-cream: #f5e4d0;
+  --hb-ivory: #f8eee2;
+  --hb-gold-rgb: 224, 180, 135;
+  --hb-gold-soft-rgb: 240, 211, 178;
+  --hb-accent-rgb: 192, 90, 116;
+  --hb-cream-rgb: 245, 228, 208;
+  --hb-ivory-rgb: 248, 238, 226;
+  --hb-panel: #6e2538;
+  --hb-panel-deep: #451522;
+  --hb-photo-bg: #94445a;
+  --hb-panel-hi-rgb: 130, 46, 68;
+  --hb-panel-rgb: 100, 32, 50;
+  --hb-panel-lo-rgb: 72, 22, 35;
+  --hb-page-hi: #963c56;
+  --hb-page-mid: #762c42;
+}
+.hb-root {
   position: relative;
   min-height: 100dvh;
   background:
-    radial-gradient(ellipse at 50% 18%, #c20808 0%, transparent 42%),
-    radial-gradient(circle at 12% 80%, rgba(212, 175, 55, 0.12), transparent 28%),
-    radial-gradient(circle at 88% 75%, rgba(212, 175, 55, 0.1), transparent 26%),
-    radial-gradient(ellipse at 50% 20%, #b30000 0%, var(--hb-red) 45%, var(--hb-red-deep) 100%);
+    radial-gradient(ellipse at 50% 18%, var(--hb-page-hi) 0%, transparent 42%),
+    radial-gradient(circle at 12% 80%, rgba(var(--hb-gold-rgb), 0.12), transparent 28%),
+    radial-gradient(circle at 88% 75%, rgba(var(--hb-gold-rgb), 0.1), transparent 26%),
+    radial-gradient(ellipse at 50% 20%, var(--hb-page-mid) 0%, var(--hb-red) 45%, var(--hb-red-deep) 100%);
   color: var(--hb-gold);
   display: flex;
   align-items: center;
@@ -667,7 +783,7 @@ onUnmounted(() => {
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  color: #f0d78c;
+  color: var(--hb-gold-soft);
   font-size: 13px;
   letter-spacing: 0.26em;
   animation: hb-hint-pulse 1.6s ease-in-out infinite;
@@ -676,8 +792,8 @@ onUnmounted(() => {
   width: 6px;
   height: 6px;
   border-radius: 999px;
-  background: #f0d78c;
-  box-shadow: 0 0 8px rgba(240, 215, 140, 0.7);
+  background: var(--hb-gold-soft);
+  box-shadow: 0 0 8px rgba(var(--hb-gold-soft-rgb), 0.7);
 }
 @keyframes hb-hint-pulse {
   0%, 100% { opacity: 0.75; }
@@ -691,9 +807,9 @@ onUnmounted(() => {
   width: 44px;
   height: 44px;
   border-radius: 999px;
-  border: 1.5px solid rgba(212, 175, 55, 0.85);
-  background: linear-gradient(160deg, rgba(212, 175, 55, 0.42), rgba(122, 0, 0, 0.82));
-  color: #f0d78c;
+  border: 1.5px solid rgba(var(--hb-gold-rgb), 0.85);
+  background: linear-gradient(160deg, rgba(var(--hb-gold-rgb), 0.42), rgba(var(--hb-panel-rgb), 0.82));
+  color: var(--hb-gold-soft);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -715,9 +831,9 @@ onUnmounted(() => {
 }
 .hb-save-btn {
   appearance: none;
-  border: 1.5px solid #d4af37;
-  background: linear-gradient(180deg, rgba(212, 175, 55, 0.45), rgba(155, 0, 0, 0.72));
-  color: #f0d78c;
+  border: 1.5px solid var(--hb-gold);
+  background: linear-gradient(180deg, rgba(var(--hb-gold-rgb), 0.45), rgba(var(--hb-panel-hi-rgb), 0.72));
+  color: var(--hb-gold-soft);
   padding: 10px 16px;
   border-radius: 999px;
   letter-spacing: 0.2em;
@@ -737,27 +853,27 @@ onUnmounted(() => {
 .hb-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
 .hb-bg-decor { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
 .hb-bg-xi {
-  position: absolute; color: rgba(240, 215, 140, 0.14); font-weight: 700; line-height: 1;
+  position: absolute; color: rgba(var(--hb-gold-soft-rgb), 0.14); font-weight: 700; line-height: 1;
   user-select: none; animation: hb-pulse-soft 7s ease-in-out infinite;
 }
 .hb-bg-xi-1 { top: 6%; left: 4%; font-size: 56px; transform: rotate(-12deg); }
-.hb-bg-xi-2 { top: 14%; right: 6%; font-size: 42px; transform: rotate(10deg); color: rgba(196, 30, 58, 0.22); animation-delay: 1.2s; }
+.hb-bg-xi-2 { top: 14%; right: 6%; font-size: 42px; transform: rotate(10deg); color: rgba(var(--hb-accent-rgb), 0.22); animation-delay: 1.2s; }
 .hb-bg-xi-3 { bottom: 18%; left: 8%; font-size: 48px; transform: rotate(8deg); animation-delay: 2s; }
-.hb-bg-xi-4 { bottom: 10%; right: 10%; font-size: 64px; transform: rotate(-8deg); color: rgba(196, 30, 58, 0.18); animation-delay: 0.6s; }
+.hb-bg-xi-4 { bottom: 10%; right: 10%; font-size: 64px; transform: rotate(-8deg); color: rgba(var(--hb-accent-rgb), 0.18); animation-delay: 0.6s; }
 .hb-bg-xi-5 { top: 42%; left: 2%; font-size: 36px; opacity: 0.8; animation-delay: 3s; }
 .hb-bg-xi-6 { top: 48%; right: 3%; font-size: 40px; opacity: 0.75; animation-delay: 2.4s; }
-.hb-bg-knot { position: absolute; color: rgba(212, 175, 55, 0.38); width: 56px; height: 70px; animation: hb-float 10s ease-in-out infinite; }
+.hb-bg-knot { position: absolute; color: rgba(var(--hb-gold-rgb), 0.38); width: 56px; height: 70px; animation: hb-float 10s ease-in-out infinite; }
 .hb-bg-knot-1 { top: 7%; left: 12%; width: 52px; height: 66px; }
-.hb-bg-knot-2 { top: 20%; right: 10%; width: 46px; height: 58px; color: rgba(240, 215, 140, 0.34); animation-delay: 1.8s; }
+.hb-bg-knot-2 { top: 20%; right: 10%; width: 46px; height: 58px; color: rgba(var(--hb-gold-soft-rgb), 0.34); animation-delay: 1.8s; }
 .hb-bg-knot-3 { bottom: 18%; left: 8%; width: 50px; height: 64px; animation-delay: 2.6s; }
-.hb-bg-knot-4 { bottom: 10%; right: 12%; width: 58px; height: 72px; color: rgba(240, 215, 140, 0.3); animation-delay: 1s; }
-.hb-bg-lantern { position: absolute; color: rgba(240, 215, 140, 0.48); width: 42px; height: 64px; animation: hb-swing 5.5s ease-in-out infinite; }
+.hb-bg-knot-4 { bottom: 10%; right: 12%; width: 58px; height: 72px; color: rgba(var(--hb-gold-soft-rgb), 0.3); animation-delay: 1s; }
+.hb-bg-lantern { position: absolute; color: rgba(var(--hb-gold-soft-rgb), 0.48); width: 42px; height: 64px; animation: hb-swing 5.5s ease-in-out infinite; }
 .hb-bg-lantern-1 { top: 3%; left: 20%; }
 .hb-bg-lantern-2 { top: 4%; right: 18%; animation-delay: 1.4s; }
 .hb-bg-spark {
   position: absolute; width: 6px; height: 6px; border-radius: 50%;
   background: radial-gradient(circle, var(--hb-gold-soft), transparent 70%);
-  box-shadow: 0 0 10px rgba(240, 215, 140, 0.55); animation: hb-twinkle 2.8s ease-in-out infinite;
+  box-shadow: 0 0 10px rgba(var(--hb-gold-soft-rgb), 0.55); animation: hb-twinkle 2.8s ease-in-out infinite;
 }
 .hb-bg-spark-1 { top: 18%; left: 30%; }
 .hb-bg-spark-2 { top: 28%; right: 28%; animation-delay: 0.7s; }
@@ -770,11 +886,11 @@ onUnmounted(() => {
 .hb-seal {
   width: 88px; height: 88px; border-radius: 50%; border: 3px solid var(--hb-gold); color: var(--hb-gold);
   display: flex; align-items: center; justify-content: center; font-size: 42px; font-weight: 700;
-  animation: hb-seal-pop 1s ease both; box-shadow: 0 0 0 6px rgba(212, 175, 55, 0.15);
+  animation: hb-seal-pop 1s ease both; box-shadow: 0 0 0 6px rgba(var(--hb-gold-rgb), 0.15);
 }
 .hb-shimmer {
   font-size: 28px; letter-spacing: 0.35em;
-  background: linear-gradient(90deg, #8a6a1a, var(--hb-gold-soft), #8a6a1a); background-size: 200% 100%;
+  background: linear-gradient(90deg, var(--hb-gold-deep), var(--hb-gold-soft), var(--hb-gold-deep)); background-size: 200% 100%;
   -webkit-background-clip: text; background-clip: text; color: transparent; animation: hb-shimmer 1.2s linear infinite;
 }
 .hb-fade-dot {
@@ -784,11 +900,11 @@ onUnmounted(() => {
 .hb-enter { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
 .hb-enter--curtain .hb-enter-panel {
   position: absolute; top: 0; bottom: 0; width: 50%;
-  background: linear-gradient(180deg, #8b0000, #5c0000);
+  background: linear-gradient(180deg, var(--hb-panel), var(--hb-panel-deep));
   transition: transform 0.95s cubic-bezier(0.65, 0, 0.35, 1);
 }
-.hb-enter--curtain .hb-enter-left { left: 0; border-right: 1px solid rgba(212, 175, 55, 0.35); }
-.hb-enter--curtain .hb-enter-right { right: 0; border-left: 1px solid rgba(212, 175, 55, 0.35); }
+.hb-enter--curtain .hb-enter-left { left: 0; border-right: 1px solid rgba(var(--hb-gold-rgb), 0.35); }
+.hb-enter--curtain .hb-enter-right { right: 0; border-left: 1px solid rgba(var(--hb-gold-rgb), 0.35); }
 .hb-enter--curtain.is-done .hb-enter-left { transform: translateX(-105%); }
 .hb-enter--curtain.is-done .hb-enter-right { transform: translateX(105%); }
 .hb-enter--fadeUp .hb-enter-veil,
@@ -801,11 +917,11 @@ onUnmounted(() => {
 .hb-disabled {
   position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column;
   align-items: center; justify-content: center; gap: 16px;
-  background: rgba(80, 0, 0, 0.92); color: var(--hb-cream);
+  background: rgba(var(--hb-panel-lo-rgb), 0.92); color: var(--hb-cream);
 }
 .hb-cta-btn {
   appearance: none; border: 1px solid var(--hb-gold);
-  background: linear-gradient(180deg, rgba(212, 175, 55, 0.22), rgba(212, 175, 55, 0.08));
+  background: linear-gradient(180deg, rgba(var(--hb-gold-rgb), 0.22), rgba(var(--hb-gold-rgb), 0.08));
   color: var(--hb-gold-soft); padding: 8px 22px; border-radius: 999px;
   letter-spacing: 0.28em; font-size: 13px; cursor: pointer;
 }
@@ -832,12 +948,12 @@ onUnmounted(() => {
   gap: 0;
   padding: 8px 10px;
   background:
-    radial-gradient(circle at 50% 0%, rgba(240, 215, 140, 0.28), transparent 55%),
-    linear-gradient(180deg, #9b0000, #6e0000);
-  border: 1.5px solid #d4af37;
+    radial-gradient(circle at 50% 0%, rgba(var(--hb-gold-soft-rgb), 0.28), transparent 55%),
+    linear-gradient(180deg, var(--hb-red), var(--hb-red-deep));
+  border: 1.5px solid var(--hb-gold);
   border-radius: 10px;
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
-  color: #f0d78c;
+  color: var(--hb-gold-soft);
   pointer-events: none;
   font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
 }
@@ -886,15 +1002,15 @@ onUnmounted(() => {
 [data-hb-capture-qr] .hb-cq-frame {
   position: relative;
   padding: 8px;
-  background: linear-gradient(145deg, #fff8e7, #f7e7c3);
-  border: 2px solid #d4af37;
+  background: linear-gradient(145deg, #fff8e7, var(--hb-cream));
+  border: 2px solid var(--hb-gold);
   border-radius: 8px;
 }
 [data-hb-capture-qr] .hb-cq-c {
   position: absolute;
   font-size: 10px;
   font-weight: 700;
-  color: #c41e3a;
+  color: var(--hb-red-bright);
   line-height: 1;
   z-index: 1;
   pointer-events: none;
@@ -913,7 +1029,7 @@ onUnmounted(() => {
   font-size: 10px;
   letter-spacing: 0.12em;
   line-height: 1.35;
-  color: rgba(240, 215, 140, 0.92);
+  color: rgba(var(--hb-gold-soft-rgb), 0.92);
   text-align: center;
   white-space: nowrap;
   flex-shrink: 0;
diff --git a/vite-tailwindcss/src/views/hb/templates/ClassicPoster.vue b/vite-tailwindcss/src/views/hb/templates/ClassicPoster.vue
index 8450b75..2c6c371 100644
--- a/vite-tailwindcss/src/views/hb/templates/ClassicPoster.vue
+++ b/vite-tailwindcss/src/views/hb/templates/ClassicPoster.vue
@@ -144,7 +144,7 @@
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import BlurText from '@/components/vue-bits/BlurText.vue'
 import TextType from '@/components/vue-bits/TextType.vue'
-import { heroFocusCss } from '@/composables/posterDefaults'
+import { heroFocusCss, posterThemeMeta } from '@/composables/posterDefaults'
 import { drawXiSeal } from '@/composables/drawXiSeal'
 
 const props = defineProps({
@@ -170,15 +170,19 @@ const nameRight = computed(() => `${props.cfg.daughterInLawLabel || ''}${props.c
 
 async function paintXiSeal() {
   try { await document.fonts?.ready } catch { /* ignore */ }
+  // canvas 不解析 CSS 变量，从海报主题元数据取印章色
+  const theme = posterThemeMeta(props.cfg.posterTheme)
   drawXiSeal(xiSealRef.value, {
     size: 22,
     fontSize: 11,
-    color: '#d4af37',
-    borderColor: '#d4af37',
-    fill: 'rgba(155, 0, 0, 0.5)',
+    color: theme.sealColor,
+    borderColor: theme.sealColor,
+    fill: theme.sealFill,
   })
 }
 
+watch(() => props.cfg.posterTheme, () => nextTick(paintXiSeal))
+
 function later(fn, ms) {
   const id = setTimeout(fn, ms)
   timers.push(id)
@@ -255,9 +259,9 @@ onBeforeUnmount(() => {
   border-radius: 10px;
   padding: 8px;
   background:
-    linear-gradient(135deg, rgba(212, 175, 55, 0.18), transparent 40%),
-    linear-gradient(180deg, rgba(155, 0, 0, 0.4), rgba(90, 0, 0, 0.25));
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(240, 215, 140, 0.2);
+    linear-gradient(135deg, rgba(var(--hb-gold-rgb), 0.18), transparent 40%),
+    linear-gradient(180deg, rgba(var(--hb-panel-hi-rgb), 0.4), rgba(var(--hb-panel-lo-rgb), 0.25));
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(var(--hb-gold-soft-rgb), 0.2);
 }
 .hb-frame-ornament {
   position: absolute;
@@ -275,13 +279,13 @@ onBeforeUnmount(() => {
 .hb-frame-ornament-br { bottom: 2px; right: 2px; transform: scale(-1); }
 .hb-inner {
   position: relative;
-  border: 1.5px solid rgba(212, 175, 55, 0.85);
+  border: 1.5px solid rgba(var(--hb-gold-rgb), 0.85);
   border-radius: 6px;
   padding: 14px 14px 20px;
   background:
-    linear-gradient(180deg, rgba(130, 0, 0, 0.58), rgba(110, 0, 0, 0.38)),
+    linear-gradient(180deg, rgba(var(--hb-panel-hi-rgb), 0.58), rgba(var(--hb-panel-rgb), 0.38)),
     radial-gradient(circle at 90% 8%, rgba(255, 255, 255, 0.08), transparent 28%),
-    radial-gradient(circle at 10% 92%, rgba(196, 30, 58, 0.2), transparent 30%);
+    radial-gradient(circle at 10% 92%, rgba(var(--hb-accent-rgb), 0.2), transparent 30%);
   min-height: min(780px, calc(100dvh - 40px));
   display: flex;
   flex-direction: column;
@@ -292,7 +296,7 @@ onBeforeUnmount(() => {
   content: '';
   position: absolute;
   inset: 5px;
-  border: 1px solid rgba(240, 215, 140, 0.35);
+  border: 1px solid rgba(var(--hb-gold-soft-rgb), 0.35);
   border-radius: 4px;
   pointer-events: none;
   z-index: 1;
@@ -304,28 +308,28 @@ onBeforeUnmount(() => {
   inset: 10px;
   pointer-events: none;
   z-index: 1;
-  border: 1px dashed rgba(212, 175, 55, 0.18);
+  border: 1px dashed rgba(var(--hb-gold-rgb), 0.18);
   border-radius: 2px;
 }
 .hb-paper-decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
 .hb-paper-watermark {
   position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
-  font-size: min(220px, 58vw); font-weight: 700; color: rgba(196, 30, 58, 0.1); line-height: 1;
+  font-size: min(220px, 58vw); font-weight: 700; color: rgba(var(--hb-accent-rgb), 0.1); line-height: 1;
 }
-.hb-paper-knot { position: absolute; width: 34px; height: 44px; color: rgba(212, 175, 55, 0.55); }
+.hb-paper-knot { position: absolute; width: 34px; height: 44px; color: rgba(var(--hb-gold-rgb), 0.55); }
 .hb-paper-knot-tl { top: 10px; left: 10px; }
 .hb-paper-knot-tr { top: 10px; right: 10px; transform: scaleX(-1); }
 .hb-paper-knot-bl { bottom: 12px; left: 10px; transform: scaleY(-1); }
 .hb-paper-knot-br { bottom: 12px; right: 10px; transform: scale(-1); }
-.hb-paper-cloud { position: absolute; width: 96px; height: 42px; color: rgba(212, 175, 55, 0.32); }
+.hb-paper-cloud { position: absolute; width: 96px; height: 42px; color: rgba(var(--hb-gold-rgb), 0.32); }
 .hb-paper-cloud-t { top: 8px; left: 50%; transform: translateX(-50%); }
-.hb-paper-cloud-b { bottom: 8px; left: 50%; transform: translateX(-50%) scaleY(-1); color: rgba(196, 30, 58, 0.28); }
-.hb-paper-xi { position: absolute; top: 46%; font-size: 22px; font-weight: 700; color: rgba(196, 30, 58, 0.28); }
+.hb-paper-cloud-b { bottom: 8px; left: 50%; transform: translateX(-50%) scaleY(-1); color: rgba(var(--hb-accent-rgb), 0.28); }
+.hb-paper-xi { position: absolute; top: 46%; font-size: 22px; font-weight: 700; color: rgba(var(--hb-accent-rgb), 0.28); }
 .hb-paper-xi-l { left: 8px; transform: rotate(-18deg); }
 .hb-paper-xi-r { right: 8px; transform: rotate(18deg); }
 .hb-paper-dot {
   position: absolute; width: 5px; height: 5px; border-radius: 50%;
-  background: rgba(212, 175, 55, 0.45); box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.12);
+  background: rgba(var(--hb-gold-rgb), 0.45); box-shadow: 0 0 0 3px rgba(var(--hb-accent-rgb), 0.12);
 }
 .hb-paper-dot-1 { top: 22%; left: 14px; }
 .hb-paper-dot-2 { top: 22%; right: 14px; }
@@ -333,11 +337,11 @@ onBeforeUnmount(() => {
 .hb-paper-dot-4 { bottom: 26%; right: 16px; }
 .hb-paper-side {
   position: absolute; top: 28%; bottom: 28%; width: 10px;
-  background: repeating-linear-gradient(180deg, transparent 0 10px, rgba(212, 175, 55, 0.22) 10px 11px, transparent 11px 20px);
+  background: repeating-linear-gradient(180deg, transparent 0 10px, rgba(var(--hb-gold-rgb), 0.22) 10px 11px, transparent 11px 20px);
   opacity: 0.7;
 }
-.hb-paper-side-l { left: 4px; border-left: 1px solid rgba(212, 175, 55, 0.25); }
-.hb-paper-side-r { right: 4px; border-right: 1px solid rgba(212, 175, 55, 0.25); }
+.hb-paper-side-l { left: 4px; border-left: 1px solid rgba(var(--hb-gold-rgb), 0.25); }
+.hb-paper-side-r { right: 4px; border-right: 1px solid rgba(var(--hb-gold-rgb), 0.25); }
 .hb-hero-wrap, .hb-names, .hb-title-wrap, .hb-body, .hb-footer, .hb-cta { position: relative; z-index: 2; }
 .hb-hero-wrap {
   width: 100%; opacity: 0; transform: translateY(12px);
@@ -351,10 +355,10 @@ onBeforeUnmount(() => {
 .hb-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }
 .hb-hero-placeholder {
   width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
-  color: rgba(240, 215, 140, 0.55); letter-spacing: 0.3em; font-size: 13px; background: rgba(0, 0, 0, 0.2);
+  color: rgba(var(--hb-gold-soft-rgb), 0.55); letter-spacing: 0.3em; font-size: 13px; background: rgba(0, 0, 0, 0.2);
 }
 .hb-xi {
-  position: absolute; top: 10%; font-size: 28px; color: #c41e3a; font-weight: 700;
+  position: absolute; top: 10%; font-size: 28px; color: var(--hb-red-bright); font-weight: 700;
   opacity: 0.92; pointer-events: none;
 }
 .hb-xi-l { left: 8%; }
@@ -374,7 +378,7 @@ onBeforeUnmount(() => {
 .hb-name {
   flex: 1 1 0;
   min-width: 0;
-  color: #f7efe0 !important;
+  color: var(--hb-ivory) !important;
   font-size: 12px;
   letter-spacing: 0.12em;
   justify-content: center;
@@ -409,11 +413,11 @@ onBeforeUnmount(() => {
 .hb-cursor { color: var(--hb-gold); }
 .hb-footer { margin-top: 8px; min-height: 24px; opacity: 0; transition: opacity 0.4s ease; }
 .hb-footer.is-show { opacity: 1; }
-.hb-footer-text { color: #f7efe0 !important; font-size: 12px; letter-spacing: 0.2em; justify-content: center; }
+.hb-footer-text { color: var(--hb-ivory) !important; font-size: 12px; letter-spacing: 0.2em; justify-content: center; }
 .hb-cta { margin-top: 16px; opacity: 0; transform: translateY(8px); animation: hb-cta-in 0.5s ease forwards; }
 .hb-cta-btn {
   appearance: none; border: 1px solid var(--hb-gold);
-  background: linear-gradient(180deg, rgba(212, 175, 55, 0.22), rgba(212, 175, 55, 0.08));
+  background: linear-gradient(180deg, rgba(var(--hb-gold-rgb), 0.22), rgba(var(--hb-gold-rgb), 0.08));
   color: var(--hb-gold-soft); padding: 8px 22px; border-radius: 999px;
   letter-spacing: 0.28em; font-size: 13px; cursor: pointer;
 }
diff --git a/vite-tailwindcss/src/views/hb/templates/SplitPoster.vue b/vite-tailwindcss/src/views/hb/templates/SplitPoster.vue
index bc50060..812ef0c 100644
--- a/vite-tailwindcss/src/views/hb/templates/SplitPoster.vue
+++ b/vite-tailwindcss/src/views/hb/templates/SplitPoster.vue
@@ -160,7 +160,7 @@
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import BlurText from '@/components/vue-bits/BlurText.vue'
 import TextType from '@/components/vue-bits/TextType.vue'
-import { heroFocusCss } from '@/composables/posterDefaults'
+import { heroFocusCss, posterThemeMeta } from '@/composables/posterDefaults'
 import { drawXiSeal } from '@/composables/drawXiSeal'
 
 const props = defineProps({
@@ -203,15 +203,19 @@ const roleRight = computed(() => {
 
 async function paintXiSeal() {
   try { await document.fonts?.ready } catch { /* ignore */ }
+  // canvas 不解析 CSS 变量，从海报主题元数据取印章色
+  const theme = posterThemeMeta(props.cfg.posterTheme)
   drawXiSeal(xiSealRef.value, {
     size: 28,
     fontSize: 13,
-    color: '#d4af37',
-    borderColor: '#d4af37',
+    color: theme.sealColor,
+    borderColor: theme.sealColor,
     fill: 'rgba(0, 0, 0, 0.18)',
   })
 }
 
+watch(() => props.cfg.posterTheme, () => nextTick(paintXiSeal))
+
 function later(fn, ms) {
   timers.push(setTimeout(fn, ms))
 }
@@ -280,29 +284,29 @@ onBeforeUnmount(() => {
 .sp-shell-outer {
   padding: 1px;
   border-radius: 14px;
-  background: linear-gradient(145deg, #f0d78c, #d4af37 45%, #a8892e);
+  background: linear-gradient(145deg, var(--hb-gold-soft), var(--hb-gold) 45%, var(--hb-gold-deep));
   box-shadow: 0 16px 42px rgba(0, 0, 0, 0.4);
 }
 .sp-shell-gap {
   padding: 4px;
   border-radius: 13px;
-  background: #7a0000;
-  border: 1px solid rgba(240, 215, 140, 0.28);
+  background: var(--hb-red-deep);
+  border: 1px solid rgba(var(--hb-gold-soft-rgb), 0.28);
 }
 .sp-card {
   position: relative;
   display: flex;
   flex-direction: column;
-  border: 2px solid #d4af37;
+  border: 2px solid var(--hb-gold);
   border-radius: 10px;
   overflow: hidden;
   min-height: min(720px, calc(100dvh - 48px));
-  background: #8b0000;
+  background: var(--hb-panel);
 }
 .sp-card-rim {
   position: absolute;
   inset: 5px;
-  border: 1px solid rgba(240, 215, 140, 0.45);
+  border: 1px solid rgba(var(--hb-gold-soft-rgb), 0.45);
   border-radius: 7px;
   pointer-events: none;
   z-index: 6;
@@ -311,7 +315,7 @@ onBeforeUnmount(() => {
   position: absolute;
   width: 28px;
   height: 28px;
-  color: rgba(240, 215, 140, 0.95);
+  color: rgba(var(--hb-gold-soft-rgb), 0.95);
   z-index: 7;
   pointer-events: none;
 }
@@ -353,7 +357,7 @@ onBeforeUnmount(() => {
 .sp-left {
   position: relative;
   min-height: 260px;
-  background: #c23a2b;
+  background: var(--hb-photo-bg);
   display: flex;
   flex-direction: column;
 }
@@ -369,11 +373,11 @@ onBeforeUnmount(() => {
 .sp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; }
 .sp-photo-ph {
   position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
-  color: rgba(255, 240, 220, 0.55); letter-spacing: 0.3em;
+  color: rgba(var(--hb-ivory-rgb), 0.55); letter-spacing: 0.3em;
 }
 .sp-photo-veil {
   position: absolute; inset: 0;
-  background: linear-gradient(180deg, transparent 40%, rgba(140, 20, 20, 0.55) 100%);
+  background: linear-gradient(180deg, transparent 40%, rgba(var(--hb-panel-hi-rgb), 0.55) 100%);
   pointer-events: none;
 }
 
@@ -405,7 +409,7 @@ onBeforeUnmount(() => {
 }
 
 .sp-slogan {
-  color: #f3e6c8 !important;
+  color: var(--hb-cream) !important;
   font-size: clamp(36px, 8vw, 52px);
   letter-spacing: 0.2em;
   text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
@@ -413,7 +417,7 @@ onBeforeUnmount(() => {
 }
 .sp-subs { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; }
 .sp-sub {
-  color: rgba(243, 230, 200, 0.88) !important;
+  color: rgba(var(--hb-cream-rgb), 0.88) !important;
   font-size: 13px;
   letter-spacing: 0.35em;
 }
@@ -423,7 +427,7 @@ onBeforeUnmount(() => {
   padding: 22px 20px 18px;
   background:
     radial-gradient(circle at 80% 10%, rgba(255, 255, 255, 0.06), transparent 30%),
-    linear-gradient(180deg, #9b0000, #7a0000);
+    linear-gradient(180deg, var(--hb-red), var(--hb-red-deep));
   color: var(--hb-gold-soft);
   display: flex;
   flex-direction: column;
@@ -434,7 +438,7 @@ onBeforeUnmount(() => {
 .sp-right-decor { position: absolute; inset: 0; pointer-events: none; }
 .sp-wm {
   position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%);
-  font-size: 180px; font-weight: 700; color: rgba(196, 30, 58, 0.12); line-height: 1;
+  font-size: 180px; font-weight: 700; color: rgba(var(--hb-accent-rgb), 0.12); line-height: 1;
 }
 
 .sp-xi-top {
@@ -445,7 +449,7 @@ onBeforeUnmount(() => {
 .sp-xi-top.is-show { opacity: 1; transform: scale(1); }
 
 .sp-greeting {
-  color: #f7efe0 !important; font-size: 14px; letter-spacing: 0.2em;
+  color: var(--hb-ivory) !important; font-size: 14px; letter-spacing: 0.2em;
   margin-bottom: 12px; justify-content: center; position: relative; z-index: 1;
 }
 
@@ -481,7 +485,7 @@ onBeforeUnmount(() => {
 }
 .sp-person-l { padding-right: 22px; }
 .sp-person-r { padding-left: 22px; }
-.sp-role { font-size: 11px; color: rgba(247, 239, 224, 0.7); letter-spacing: 0.3em; }
+.sp-role { font-size: 11px; color: rgba(var(--hb-ivory-rgb), 0.7); letter-spacing: 0.3em; }
 .sp-name { color: var(--hb-gold-soft) !important; font-size: 18px; letter-spacing: 0.2em; justify-content: center; }
 /* canvas 位图印章：不用 CSS transform，避免 html2canvas 错位 */
 .sp-xi-mid {
@@ -503,11 +507,11 @@ onBeforeUnmount(() => {
 }
 .sp-meta.is-show { opacity: 1; }
 .sp-meta-title {
-  font-size: 12px; letter-spacing: 0.35em; color: rgba(247, 239, 224, 0.75); margin-bottom: 4px;
+  font-size: 12px; letter-spacing: 0.35em; color: rgba(var(--hb-ivory-rgb), 0.75); margin-bottom: 4px;
 }
 .sp-meta-title.mt { margin-top: 12px; }
 .sp-meta-val { font-size: 14px; letter-spacing: 0.12em; color: var(--hb-gold-soft); }
-.sp-meta-sub { font-size: 12px; margin-top: 2px; color: rgba(240, 215, 140, 0.75); letter-spacing: 0.15em; }
+.sp-meta-sub { font-size: 12px; margin-top: 2px; color: rgba(var(--hb-gold-soft-rgb), 0.75); letter-spacing: 0.15em; }
 
 .sp-love {
   position: relative; z-index: 1;
@@ -516,13 +520,13 @@ onBeforeUnmount(() => {
   display: flex; align-items: center; gap: 6px;
 }
 .sp-love.is-show { opacity: 1; }
-.sp-love-text { font-size: 22px; color: #f3e6c8; }
-.sp-heart { color: #e85d5d; font-size: 14px; }
+.sp-love-text { font-size: 22px; color: var(--hb-cream); }
+.sp-heart { color: var(--hb-red-bright); font-size: 14px; }
 
 .sp-cta { position: relative; z-index: 1; margin-top: 12px; }
 .sp-cta-btn {
   appearance: none; border: 1px solid var(--hb-gold);
-  background: linear-gradient(180deg, rgba(212, 175, 55, 0.22), rgba(212, 175, 55, 0.08));
+  background: linear-gradient(180deg, rgba(var(--hb-gold-rgb), 0.22), rgba(var(--hb-gold-rgb), 0.08));
   color: var(--hb-gold-soft); padding: 7px 18px; border-radius: 999px;
   letter-spacing: 0.28em; font-size: 12px; cursor: pointer;
 }
diff --git a/vite-tailwindcss/src/views/index/index.vue b/vite-tailwindcss/src/views/index/index.vue
index 960cfd2..a839eae 100644
--- a/vite-tailwindcss/src/views/index/index.vue
+++ b/vite-tailwindcss/src/views/index/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="wrapper relative w-full min-h-[100dvh] bg-[#Fdfbf7] overflow-x-hidden text-[#2c2c2c]">
+  <div class="wrapper relative w-full min-h-[100dvh] bg-[var(--c-paper)] overflow-x-hidden text-[var(--c-ink)]">
 
     <!-- 揭幕前 Loading：主题色囍字 + 雅致装饰 -->
     <div
@@ -50,20 +50,86 @@
       <div class="curtain-door curtain-door-left"><span class="door-sheen"></span></div>
       <div class="curtain-door curtain-door-right"><span class="door-sheen"></span></div>
       <div class="curtain-emblem">
+        <!-- 花瓣飘散退场的花瓣（仅 intro-exit-petal 播放时显示） -->
+        <span v-for="n in 7" :key="`pt${n}`" class="petal-piece" :class="`pp-${n}`" aria-hidden="true"></span>
         <div class="invite-cover">
+          <!-- 信封启封模式的翻盖 + 蜡封（仅 intro-exit-envelope 显示） -->
+          <span class="envelope-flap" aria-hidden="true">
+            <i class="envelope-seal calligraphy">囍</i>
+          </span>
+          <!-- 贺卡掀页模式：纸背面 + 柔皱光影层（仅 intro-exit-paper 显示） -->
+          <span class="paper-back" aria-hidden="true"></span>
+          <span class="paper-fold" aria-hidden="true"></span>
           <span class="cover-filigree cover-filigree-top" aria-hidden="true"></span>
           <span class="cover-filigree cover-filigree-bottom" aria-hidden="true"></span>
           <div class="emblem-inner">
-            <span class="emblem-kicker first-letter:uppercase lowercase calligraphy">WEDDING INVITATION</span>
-            <div class="emblem-seal" aria-hidden="true">
-              <i class="fa-solid fa-feather-pointed"></i>
-            </div>
-            <div class="emblem-names calligraphy-strong">{{ data.groom }}<span class="amp">&amp;</span>{{ data.bride }}</div>
-            <div class="emblem-rule"></div>
-            <div class="emblem-date calligraphy">{{ data.date }}</div>
-            <div class="emblem-invite-title calligraphy-strong">岁序更替</div>
-            <div class="emblem-invite-copy calligraphy">始于初见，止于终老，时光煮雨，人事静好，盼与您分享我们的幸福时刻。</div>
-            <div class="emblem-hint"><span class="dot"></span>轻触开启请柬</div>
+            <!-- 新中式：月洞门帖 -->
+            <template v-if="siteThemeKey === 'guofeng-new'">
+              <span class="em-gn-kicker">谨 呈 · 台 启</span>
+              <i class="em-gn-line" aria-hidden="true"></i>
+              <div class="em-gn-names">{{ data.groom }}<span class="em-gn-seal">囍</span>{{ data.bride }}</div>
+              <div class="em-gn-date">{{ data.date }} · {{ data.lunar }}</div>
+              <div class="em-gn-copy">谨定良辰，敬备喜筵，恭候台光</div>
+              <div class="emblem-hint"><span class="dot"></span>轻触启帖</div>
+            </template>
+            <!-- 老中式：红金婚书 -->
+            <template v-else-if="siteThemeKey === 'guofeng-old'">
+              <span class="em-go-top" aria-hidden="true">❖ ❖ ❖</span>
+              <div class="em-go-xi calligraphy-strong">囍</div>
+              <div class="em-go-title">婚 书</div>
+              <div class="em-go-names">{{ data.groom }} 偕 {{ data.bride }}</div>
+              <div class="em-go-date">谨定于 {{ data.date }}</div>
+              <div class="em-go-date em-go-lunar">{{ data.lunar }} 恭候光临</div>
+              <div class="emblem-hint"><span class="dot"></span>轻触展开婚书</div>
+            </template>
+            <!-- 杂志封面：刊头式幕布 -->
+            <template v-else-if="siteThemeKey === 'magazine'">
+              <span class="em-mag-logo">VOWS</span>
+              <span class="em-mag-issue">WEDDING ISSUE · {{ data.date }}</span>
+              <div class="em-mag-names">{{ data.groom }}<i>&amp;</i>{{ data.bride }}</div>
+              <div class="em-mag-bar" aria-hidden="true"></div>
+              <div class="em-mag-copy">A LOVE STORY IN PRINT</div>
+              <div class="emblem-hint"><span class="dot"></span>轻触翻开本期</div>
+            </template>
+            <!-- 日报编辑：号外报头式幕布 -->
+            <template v-else-if="siteThemeKey === 'newspaper'">
+              <span class="em-news-vol">— 号外 · EXTRA —</span>
+              <div class="em-news-mast">囍事日报</div>
+              <div class="em-news-rule" aria-hidden="true"></div>
+              <div class="em-news-head">{{ data.groom }} 与 {{ data.bride }} 完婚在即</div>
+              <div class="em-news-date">{{ data.date }} · {{ data.lunar }}</div>
+              <div class="emblem-hint"><span class="dot"></span>轻触阅读头版</div>
+            </template>
+            <!-- 复古像素：游戏标题屏式幕布 -->
+            <template v-else-if="siteThemeKey === 'pixel'">
+              <span class="em-px-top">WEDDING QUEST</span>
+              <div class="em-px-heart" aria-hidden="true">♥</div>
+              <div class="em-px-names">{{ data.groom }} × {{ data.bride }}</div>
+              <div class="em-px-date">{{ data.date }}</div>
+              <div class="em-px-start">- PRESS START -</div>
+            </template>
+            <!-- 极简主义：轴线幕布 -->
+            <template v-else-if="siteThemeKey === 'zen'">
+              <span class="em-zen-kicker">INVITATION</span>
+              <i class="em-zen-line" aria-hidden="true"></i>
+              <div class="em-zen-names">{{ data.groom }} <em>/</em> {{ data.bride }}</div>
+              <div class="em-zen-date">{{ data.date }}</div>
+              <div class="emblem-hint"><span class="dot"></span>轻触开启</div>
+            </template>
+            <!-- 经典（风格包共用；印章符号随主题变） -->
+            <template v-else>
+              <span class="emblem-kicker first-letter:uppercase lowercase calligraphy">WEDDING INVITATION</span>
+              <div class="emblem-seal" aria-hidden="true">
+                <span v-if="curtainSealChar" class="emblem-seal-char">{{ curtainSealChar }}</span>
+                <i v-else class="fa-solid fa-feather-pointed"></i>
+              </div>
+              <div class="emblem-names calligraphy-strong">{{ data.groom }}<span class="amp">&amp;</span>{{ data.bride }}</div>
+              <div class="emblem-rule"></div>
+              <div class="emblem-date calligraphy">{{ data.date }}</div>
+              <div class="emblem-invite-title calligraphy-strong">岁序更替</div>
+              <div class="emblem-invite-copy calligraphy">始于初见，止于终老，时光煮雨，人事静好，盼与您分享我们的幸福时刻。</div>
+              <div class="emblem-hint"><span class="dot"></span>轻触开启请柬</div>
+            </template>
           </div>
         </div>
       </div>
@@ -100,7 +166,7 @@
     <!-- 右上角：自动滚动 / 弹幕 / 礼物特效 -->
     <div class="fixed top-6 right-5 z-[80] flex flex-col items-end gap-3 pointer-events-auto">
       <div @click.stop="toggleAutoScroll" class="control-btn cursor-pointer transition-all duration-300"
-           :class="isAutoScroll ? 'bg-[#a88c6b]/15 !border-[#a88c6b]/60 shadow-sm' : 'bg-white/60 shadow-sm border-[#a88c6b]/30'"
+           :class="isAutoScroll ? 'bg-[var(--c-primary)]/15 !border-[var(--c-primary)]/60 shadow-sm' : 'bg-[var(--c-card)]/60 shadow-sm border-[var(--c-primary)]/30'"
            title="自动滚动">
         <img v-if="isAutoScroll" src="https://api.iconify.design/lucide:pause.svg?color=%23a88c6b" class="w-4 h-4" />
         <img v-else src="https://api.iconify.design/lucide:play.svg?color=%23a88c6b" class="w-4 h-4 ml-0.5" />
@@ -109,7 +175,7 @@
         <button
           type="button"
           class="control-btn cursor-pointer transition-all duration-300"
-          :class="showDanmaku ? 'bg-[#a88c6b]/15 !border-[#a88c6b]/60 shadow-sm' : 'bg-white/60 shadow-sm border-[#a88c6b]/30 opacity-55'"
+          :class="showDanmaku ? 'bg-[var(--c-primary)]/15 !border-[var(--c-primary)]/60 shadow-sm' : 'bg-[var(--c-card)]/60 shadow-sm border-[var(--c-primary)]/30 opacity-55'"
           :title="showDanmaku ? '关闭弹幕（长按设范围）' : '开启弹幕（长按设范围）'"
           style="touch-action: manipulation; user-select: none; -webkit-user-select: none;"
           @click.stop="onDanmakuBtnClick"
@@ -120,7 +186,7 @@
           @mouseup="onDanmakuPressEnd"
           @mouseleave="onDanmakuPressCancel"
         >
-          <i class="fa-solid fa-comment-dots text-[13px]" :class="showDanmaku ? 'text-[#a88c6b]' : 'text-[#a88c6b]/70'"></i>
+          <i class="fa-solid fa-comment-dots text-[13px]" :class="showDanmaku ? 'text-[var(--c-primary)]' : 'text-[var(--c-primary)]/70'"></i>
         </button>
         <div
           v-if="showDanmakuAreaMenu"
@@ -145,11 +211,11 @@
       <button
         type="button"
         class="control-btn cursor-pointer transition-all duration-300"
-        :class="showGiftFx ? 'bg-[#a88c6b]/15 !border-[#a88c6b]/60 shadow-sm' : 'bg-white/60 shadow-sm border-[#a88c6b]/30 opacity-55'"
+        :class="showGiftFx ? 'bg-[var(--c-primary)]/15 !border-[var(--c-primary)]/60 shadow-sm' : 'bg-[var(--c-card)]/60 shadow-sm border-[var(--c-primary)]/30 opacity-55'"
         :title="showGiftFx ? '关闭礼物特效' : '开启礼物特效'"
         @click.stop="toggleShowGiftFx"
       >
-        <i class="fa-solid fa-gift text-[13px]" :class="showGiftFx ? 'text-[#a88c6b]' : 'text-[#a88c6b]/70'"></i>
+        <i class="fa-solid fa-gift text-[13px]" :class="showGiftFx ? 'text-[var(--c-primary)]' : 'text-[var(--c-primary)]/70'"></i>
       </button>
     </div>
 
@@ -382,7 +448,8 @@
     </div>
 
     <LikeBurst ref="likeBurstRef" />
-    <GiftEffect ref="giftEffectRef" @play-start="onGiftPlayStart" />
+    <GiftEffect v-if="giftFxBackend === 'classic'" ref="giftEffectRef" @play-start="onGiftPlayStart" />
+    <GiftEffect3D v-else ref="giftEffectRef" @play-start="onGiftPlayStart" @fallback="onGiftFxFallback" />
     <GiftFeed ref="giftFeedRef" />
 
     <!-- 礼物面板 -->
@@ -450,10 +517,10 @@
         class="fixed inset-0 z-[80] bg-black/40 flex items-center justify-center px-5"
         @click.self="closeGiftNameModal"
       >
-        <div class="gift-name-modal w-full max-w-[360px] bg-white rounded-2xl shadow-2xl px-5 pt-5 pb-4">
+        <div class="gift-name-modal w-full max-w-[360px] bg-[var(--c-card)] rounded-2xl shadow-2xl px-5 pt-5 pb-4">
           <div class="text-center mb-4">
-            <div class="text-[15px] text-[#2c2c2c] tracking-[0.12em]">留下您的姓名</div>
-            <div class="text-[11px] text-[#8A8680] mt-1.5 leading-relaxed">送礼需要署名，方便新人知道心意来自谁</div>
+            <div class="text-[15px] text-[var(--c-ink)] tracking-[0.12em]">留下您的姓名</div>
+            <div class="text-[11px] text-[var(--c-muted)] mt-1.5 leading-relaxed">送礼需要署名，方便新人知道心意来自谁</div>
           </div>
           <input
             ref="giftNameInputRef"
@@ -461,18 +528,18 @@
             type="text"
             maxlength="20"
             placeholder="您的姓名"
-            class="w-full bg-[#Fdfbf7] border-[0.5px] border-[#a88c6b]/35 rounded-xl px-4 py-3 text-[14px] focus:outline-none focus:border-[#a88c6b]"
+            class="w-full bg-[var(--c-paper)] border-[0.5px] border-[var(--c-primary)]/35 rounded-xl px-4 py-3 text-[14px] focus:outline-none focus:border-[var(--c-primary)]"
             @keyup.enter="confirmGiftName"
           />
           <div class="flex gap-2 mt-4">
             <button
               type="button"
-              class="flex-1 py-3 rounded-full text-[12px] tracking-[0.2em] border border-[#a88c6b]/30 text-[#8A8680]"
+              class="flex-1 py-3 rounded-full text-[12px] tracking-[0.2em] border border-[var(--c-primary)]/30 text-[var(--c-muted)]"
               @click="closeGiftNameModal"
             >取消</button>
             <button
               type="button"
-              class="flex-1 py-3 rounded-full text-[12px] tracking-[0.2em] bg-[#a88c6b] text-white"
+              class="flex-1 py-3 rounded-full text-[12px] tracking-[0.2em] bg-[var(--c-primary)] text-[var(--c-on-primary)]"
               :disabled="giftBusy"
               @click="confirmGiftName"
             >确认送礼</button>
@@ -488,46 +555,84 @@
          @touchstart="handleUserInteraction" @touchmove="handleUserInteraction"
          @wheel="handleUserInteraction" @mousedown="handleUserInteraction">
 
-      <!-- 1. 封面页 -->
+      <!-- 1. 封面页（风格包=经典排版；完整模板=杂志/报纸/像素/极简各自专属排版） -->
       <div class="page-section" :class="data.scrollMode === 'snap' ? 'snap-start' : ''">
-        <div class="flex flex-col items-center justify-between py-12 h-full w-full relative border-[0.5px] border-[#a88c6b]/20 bg-white/40">
-          <div v-reveal="'down'" class="text-center mt-6 z-10">
-            <span class="cover-kicker calligraphy text-[10px] tracking-[0.5em] uppercase text-[#a88c6b] font-bold block">Wedding Invitation</span>
-            <div class="w-6 h-[0.5px] bg-[#a88c6b] mx-auto opacity-50 mt-4"></div>
-          </div>
-
-          <div v-reveal="{ variant: 'scale', delay: 120 }" class="w-full max-w-[260px] aspect-[3/4] relative z-10">
-            <div class="absolute inset-0 border border-[#a88c6b] translate-x-3 translate-y-3 opacity-30"></div>
-            <div class="relative w-full h-full z-10 bg-[#F7F6F2] shadow-md overflow-hidden">
-              <img :src="heroDisplayImg" class="w-full h-full object-cover" fetchpriority="high" decoding="async" alt="封面" />
-            </div>
-          </div>
-
-          <div v-reveal="{ variant: 'up', delay: 200 }" class="text-center z-10 mb-10 space-y-4 px-4 mt-8">
-            <div class="cover-names calligraphy-strong flex items-end justify-center gap-6 text-3xl font-light tracking-[0.2em]">
-              <span>{{ data.groom }}</span>
-              <span class="text-[#a88c6b] text-xl pb-1 italic calligraphy">&amp;</span>
-              <span>{{ data.bride }}</span>
-            </div>
-            <div class="cover-date flex flex-col items-center text-[11px] text-[#8A8680] tracking-[0.2em] mt-4 uppercase">
-              <span>{{ data.date }}</span>
-              <div class="w-4 h-[0.5px] bg-[#a88c6b]/40 my-2"></div>
-              <span>{{ data.lunar }}</span>
-            </div>
-          </div>
-        </div>
+        <component
+          :is="coverComponent"
+          :key="siteThemeKey"
+          :hero-img="heroDisplayImg"
+          :groom="data.groom"
+          :bride="data.bride"
+          :date="data.date"
+          :lunar="data.lunar"
+        />
       </div>
 
-      <!-- 2. 竖排文案页 -->
-      <div class="page-section bg-[#F7F6F2] items-center px-8 relative justify-center" :class="data.scrollMode === 'snap' ? 'snap-start' : ''" :style="formalPageHeightStyle">
-        <div class="absolute top-0 left-0 w-32 h-32 border-l-[0.5px] border-t-[0.5px] border-[#a88c6b]/30 m-6"></div>
-        <div class="absolute bottom-0 right-0 w-32 h-32 border-r-[0.5px] border-b-[0.5px] border-[#a88c6b]/30 m-6"></div>
-        <div v-reveal="'blur'" class="flex flex-col items-center w-full">
-          <div class="text-3xl opacity-60 mb-12 text-[#a88c6b] font-serif float-soft">❀</div>
+      <!-- 2. 邀请文案页（风格包=经典竖排；完整模板=各自专属排版） -->
+      <div class="page-section bg-[var(--c-bg)] items-center px-8 relative justify-center" :class="data.scrollMode === 'snap' ? 'snap-start' : ''" :style="formalPageHeightStyle">
+        <template v-if="!isLayoutTheme">
+          <div class="absolute top-0 left-0 w-32 h-32 border-l-[0.5px] border-t-[0.5px] border-[var(--c-primary)]/30 m-6"></div>
+          <div class="absolute bottom-0 right-0 w-32 h-32 border-r-[0.5px] border-b-[0.5px] border-[var(--c-primary)]/30 m-6"></div>
+        </template>
+        <!-- 新中式：竖排 + 窗棂角饰 + 朱砂印 -->
+        <div v-if="siteThemeKey === 'guofeng-new'" v-reveal="'blur'" class="formal-gfnew">
+          <span class="fgn-corner fgn-corner-tl" aria-hidden="true"></span>
+          <span class="fgn-corner fgn-corner-br" aria-hidden="true"></span>
+          <div class="fgn-cols">
+            <span class="vertical-text fgn-main">{{ data.formalText1 }}</span>
+            <span class="vertical-text fgn-main fgn-main-2">{{ data.formalText2 }}</span>
+            <span class="vertical-text fgn-side">诚邀台驾 见证之喜</span>
+          </div>
+          <span class="fgn-seal" aria-hidden="true">囍</span>
+        </div>
+        <!-- 老中式：红底金框婚书卷 -->
+        <div v-else-if="siteThemeKey === 'guofeng-old'" v-reveal="'blur'" class="formal-gfold">
+          <div class="fgo-scroll">
+            <span class="fgo-head">— 喜 帖 —</span>
+            <div class="fgo-cols">
+              <span class="vertical-text fgo-main">{{ data.formalText1 }}</span>
+              <span class="vertical-text fgo-main fgo-main-2">{{ data.formalText2 }}</span>
+            </div>
+            <span class="fgo-foot">两 姓 联 姻 · 一 堂 缔 约</span>
+          </div>
+        </div>
+        <!-- 杂志：编辑部引言（pull-quote） -->
+        <div v-else-if="siteThemeKey === 'magazine'" v-reveal="'up'" class="formal-mag">
+          <span class="fm-quote" aria-hidden="true">“</span>
+          <p class="fm-text">{{ data.formalText1 }}</p>
+          <p class="fm-text fm-text-2">{{ data.formalText2 }}</p>
+          <div class="fm-foot"><i aria-hidden="true"></i><span>EDITOR'S NOTE · 诚挚邀请您见证</span></div>
+        </div>
+        <!-- 日报：结婚启事公告 -->
+        <div v-else-if="siteThemeKey === 'newspaper'" v-reveal="'up'" class="formal-news">
+          <div class="fn-title">结 婚 启 事</div>
+          <div class="fn-rule" aria-hidden="true"></div>
+          <p class="fn-body">{{ data.formalText1 }}</p>
+          <p class="fn-body">{{ data.formalText2 }}</p>
+          <div class="fn-sign">— {{ data.groom }} · {{ data.bride }} 敬启 —</div>
+        </div>
+        <!-- 像素：游戏对话框 -->
+        <div v-else-if="siteThemeKey === 'pixel'" v-reveal="'up'" class="formal-px">
+          <div class="fp-box">
+            <span class="fp-tag">SYSTEM</span>
+            <p class="fp-line">{{ data.formalText1 }}</p>
+            <p class="fp-line">{{ data.formalText2 }}</p>
+            <span class="fp-next" aria-hidden="true">▼</span>
+          </div>
+        </div>
+        <!-- 极简：横排轴线 -->
+        <div v-else-if="siteThemeKey === 'zen'" v-reveal="'up'" class="formal-zen">
+          <p>{{ data.formalText1 }}</p>
+          <i aria-hidden="true"></i>
+          <p>{{ data.formalText2 }}</p>
+        </div>
+        <!-- 经典竖排（风格包共用；页首符号随主题变） -->
+        <div v-else v-reveal="'blur'" class="flex flex-col items-center w-full">
+          <div class="text-3xl opacity-60 mb-12 text-[var(--c-primary)] font-serif float-soft">{{ formalMark }}</div>
           <div class="formal-copy flex justify-center gap-9 h-[22rem] text-[#3A3A3A]">
             <span class="vertical-text formal-main calligraphy-strong">{{ data.formalText1 }}</span>
             <span class="vertical-text formal-main formal-main-offset calligraphy-strong">{{ data.formalText2 }}</span>
-            <span class="vertical-text formal-side calligraphy ml-4 border-l-[0.5px] border-[#a88c6b]/30 pl-6 h-64 mt-28 tracking-[0.28em]">见证我们的幸福</span>
+            <span class="vertical-text formal-side calligraphy ml-4 border-l-[0.5px] border-[var(--c-primary)]/30 pl-6 h-64 mt-28 tracking-[0.28em]">见证我们的幸福</span>
             <span class="vertical-text formal-side calligraphy ml-4 h-64 mt-8 tracking-[0.28em]">诚挚邀请您</span>
           </div>
         </div>
@@ -538,13 +643,15 @@
            class="page-section p-6 relative"
            :class="data.scrollMode === 'snap' ? 'snap-start' : ''"
            :style="pageHeightStyle(page)">
-        <div class="absolute inset-0 bg-white/40 -z-10"></div>
-        <div class="absolute top-0 left-0 w-24 h-24 border-l-[0.5px] border-t-[0.5px] border-[#a88c6b]/30 m-6 pointer-events-none z-0"></div>
-        <div class="absolute bottom-0 right-0 w-24 h-24 border-r-[0.5px] border-b-[0.5px] border-[#a88c6b]/30 m-6 pointer-events-none z-0"></div>
+        <div class="absolute inset-0 bg-[var(--c-card)]/40 -z-10"></div>
+        <div class="absolute top-0 left-0 w-24 h-24 border-l-[0.5px] border-t-[0.5px] border-[var(--c-primary)]/30 m-6 pointer-events-none z-0"></div>
+        <div class="absolute bottom-0 right-0 w-24 h-24 border-r-[0.5px] border-b-[0.5px] border-[var(--c-primary)]/30 m-6 pointer-events-none z-0"></div>
         <div class="w-full h-full flex flex-col justify-center py-6 relative z-10">
           <PhotoGallery
             :page="page"
             :nine-grid-animate="!!data.nineGridAnimate"
+            :layout-theme="isLayoutTheme"
+            :page-index="pIdx + 2"
             @preview-image="openImagePreview"
             @ready="onGalleryReady"
           />
@@ -554,12 +661,20 @@
       <!-- 婚礼日历 -->
       <div class="page-section wedding-calendar-page px-6 py-10 relative" :class="data.scrollMode === 'snap' ? 'snap-start' : ''">
         <div v-reveal="'up'" class="calendar-card">
-          <div class="calendar-kicker">Save The Date</div>
-          <div class="calendar-title">
-            <span>{{ calendarTitle.year }}</span>
-            <i></i>
-            <span>{{ calendarTitle.monthText }}</span>
-          </div>
+          <SectionHeading
+            v-if="isLayoutTheme"
+            :index="(data.photoPages?.length || 0) + 2"
+            kicker="Save The Date"
+            :title="`${calendarTitle.year} · ${calendarTitle.monthText}`"
+          />
+          <template v-else>
+            <div class="calendar-kicker">Save The Date</div>
+            <div class="calendar-title">
+              <span>{{ calendarTitle.year }}</span>
+              <i></i>
+              <span>{{ calendarTitle.monthText }}</span>
+            </div>
+          </template>
           <div class="calendar-date-line">{{ data.groom }} &amp; {{ data.bride }} · {{ weddingDateText }}</div>
           <div class="calendar-weekdays">
             <span v-for="w in calendarWeekdays" :key="w">{{ w }}</span>
@@ -612,7 +727,14 @@
 
       <!-- 婚礼流程 -->
       <div class="page-section schedule-page px-6 z-10 justify-center relative" :class="data.scrollMode === 'snap' ? 'snap-start' : ''">
-        <div v-reveal="'up'" class="schedule-heading">
+        <SectionHeading
+          v-if="isLayoutTheme"
+          v-reveal="'up'"
+          :index="(data.photoPages?.length || 0) + 3"
+          kicker="Wedding Schedule"
+          title="婚礼流程"
+        />
+        <div v-else v-reveal="'up'" class="schedule-heading">
           <span class="schedule-title calligraphy">婚礼流程</span>
           <span class="schedule-kicker">Wedding Schedule</span>
         </div>
@@ -634,15 +756,27 @@
 
       <!-- 尾页 -->
       <div class="page-section ending-page px-6 py-8 flex flex-col items-center justify-center relative" :class="data.scrollMode === 'snap' ? 'snap-start' : ''">
-        <div class="ending-frame" aria-hidden="true"></div>
-        <div class="ending-corners" aria-hidden="true"><i></i><i></i></div>
+        <!-- 门框装饰仅风格包主题渲染；完整模板走各自的收尾排版 -->
+        <template v-if="!isLayoutTheme">
+          <div v-reveal="'blur'" class="ending-frame" aria-hidden="true">
+            <span class="ending-keystone">
+              <i class="ek-line"></i>
+              <span class="ek-mark">❀</span>
+              <i class="ek-line ek-line-r"></i>
+            </span>
+            <span class="ending-vine ending-vine-l"></span>
+            <span class="ending-vine ending-vine-r"></span>
+          </div>
+          <div v-reveal="{ variant: 'scale', delay: 220 }" class="ending-corners" aria-hidden="true"><i></i><i></i><i></i><i></i></div>
+        </template>
         <div class="w-full max-w-[340px] flex flex-col items-center z-10 relative">
-          <div v-reveal="'down'" class="ending-kicker">
+          <SectionHeading v-if="isLayoutTheme" v-reveal="'down'" title="With Love" kicker="Ending" />
+          <div v-else v-reveal="'down'" class="ending-kicker">
             <span>With Love</span>
             <i></i>
           </div>
           <div v-reveal="{ variant: 'scale', delay: 100 }" class="ending-photo">
-            <img :src="endImage" class="w-full h-full bg-[#F7F6F2] object-cover" loading="lazy" decoding="async" alt="婚礼尾页照片" />
+            <img :src="endImage" class="w-full h-full bg-[var(--c-bg)] object-cover" loading="lazy" decoding="async" alt="婚礼尾页照片" />
           </div>
           <div v-reveal="{ variant: 'up', delay: 180 }" class="ending-copy">
             <span class="ending-title calligraphy">期待您的光临</span>
@@ -668,28 +802,55 @@
               <span class="map-cta-arrow">导航</span>
             </button>
           </div>
+          <!-- 完整模板的专属收尾落款 -->
+          <div v-if="isLayoutTheme" v-reveal="{ variant: 'up', delay: 360 }" class="ending-layout-foot" aria-hidden="true">
+            <span v-if="siteThemeKey === 'guofeng-new'" class="elf elf-gfnew">佳期如许 <b>囍</b> 静候光临</span>
+            <span v-else-if="siteThemeKey === 'guofeng-old'" class="elf elf-gfold">囍 · 百年好合 · 永结同心 · 囍</span>
+            <span v-else-if="siteThemeKey === 'newspaper'" class="elf elf-news">── 本版终 · THE END ──</span>
+            <span v-else-if="siteThemeKey === 'magazine'" class="elf elf-mag">BACK COVER · VOWS MAGAZINE</span>
+            <span v-else-if="siteThemeKey === 'pixel'" class="elf elf-pixel">♥ GAME CLEAR · THANK YOU FOR PLAYING ♥</span>
+            <span v-else class="elf elf-zen">fin</span>
+          </div>
         </div>
       </div>
     </div>
 
+    <!-- 章节指示点（首屏隐藏，点按跳转对应章节） -->
+    <nav
+      v-if="sectionDotCount > 1"
+      class="section-dots"
+      :class="{ visible: currentSectionIdx > 0 && !showBootLoading }"
+      aria-label="章节导航"
+    >
+      <button
+        v-for="i in sectionDotCount"
+        :key="i"
+        type="button"
+        class="section-dot"
+        :class="{ active: currentSectionIdx === i - 1 }"
+        :aria-label="`第 ${i} 屏`"
+        @click="goToSection(i - 1)"
+      ></button>
+    </nav>
+
     <!-- RSVP 抽屉 -->
     <div v-if="isDrawerOpen" class="fixed inset-0 z-[60] bg-black/40 backdrop-blur-sm transition-opacity duration-500" @click="closeDrawer"></div>
     <div
-      class="fixed bottom-0 left-0 w-full bg-white rounded-t-[2.5rem] shadow-2xl transition-transform duration-500 z-[70] p-10 flex flex-col"
+      class="fixed bottom-0 left-0 w-full bg-[var(--c-card)] rounded-t-[2.5rem] shadow-2xl transition-transform duration-500 z-[70] p-10 flex flex-col"
       :class="{ 'pointer-events-none': !isDrawerOpen }"
       :style="{ transform: isDrawerOpen ? 'translateY(0)' : 'translateY(100%)' }"
     >
-      <div @click="closeDrawer" class="absolute top-6 right-6 p-2 text-[#a88c6b] cursor-pointer hover:text-[#2c2c2c] transition-colors text-xl">✕</div>
-      <span class="text-xl text-center text-[#a88c6b] mb-1 tracking-[0.3em] font-light mt-2">出席回执</span>
-      <span class="text-center text-[10px] text-[#8A8680] mb-10 tracking-[0.4em]">敬 请 回 复</span>
+      <div @click="closeDrawer" class="absolute top-6 right-6 p-2 text-[var(--c-primary)] cursor-pointer hover:text-[var(--c-ink)] transition-colors text-xl">✕</div>
+      <span class="text-xl text-center text-[var(--c-primary)] mb-1 tracking-[0.3em] font-light mt-2">出席回执</span>
+      <span class="text-center text-[10px] text-[var(--c-muted)] mb-10 tracking-[0.4em]">敬 请 回 复</span>
 
       <div v-if="!isSubmitted" class="space-y-6">
         <div>
-          <span class="block text-[10px] text-[#a88c6b] mb-1.5 tracking-widest pl-1">姓名</span>
-          <input v-model="rsvpForm.name" placeholder="您的姓名" class="w-full bg-[#Fdfbf7] border-[0.5px] border-[#a88c6b]/30 rounded-xl px-5 py-4 text-[13px] focus:outline-none focus:border-[#a88c6b] shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)]" />
+          <span class="block text-[10px] text-[var(--c-primary)] mb-1.5 tracking-widest pl-1">姓名</span>
+          <input v-model="rsvpForm.name" placeholder="您的姓名" class="w-full bg-[var(--c-paper)] border-[0.5px] border-[var(--c-primary)]/30 rounded-xl px-5 py-4 text-[13px] focus:outline-none focus:border-[var(--c-primary)] shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)]" />
         </div>
         <div>
-          <span class="block text-[10px] text-[#a88c6b] mb-2 tracking-widest pl-1">出席情况</span>
+          <span class="block text-[10px] text-[var(--c-primary)] mb-2 tracking-widest pl-1">出席情况</span>
           <div class="flex flex-wrap gap-2">
             <button v-for="opt in rsvpOptions" :key="opt.value" type="button"
                     class="rsvp-tag" :class="{ active: rsvpForm.guest_count === opt.value }"
@@ -698,7 +859,7 @@
         </div>
         <div class="relative">
           <div class="flex items-center justify-between mb-1.5 pl-1 pr-0.5">
-            <span class="text-[10px] text-[#a88c6b] tracking-widest">祝福语</span>
+            <span class="text-[10px] text-[var(--c-primary)] tracking-widest">祝福语</span>
             <div class="ai-bless-wrap">
               <button type="button" class="ai-bless-btn" :disabled="aiBlessingLoading" @click.stop="toggleAiStyle('rsvp')">
                 {{ aiBlessingLoading && aiBlessingTarget === 'rsvp' ? '生成中…' : 'AI 生成祝福' }}
@@ -715,14 +876,14 @@
               </div>
             </div>
           </div>
-          <textarea v-model="rsvpForm.wishes" placeholder="写下您的祝福..." class="w-full bg-[#Fdfbf7] border-[0.5px] border-[#a88c6b]/30 rounded-xl px-5 py-4 text-[13px] h-24 focus:outline-none resize-none shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)]"></textarea>
+          <textarea v-model="rsvpForm.wishes" placeholder="写下您的祝福..." class="w-full bg-[var(--c-paper)] border-[0.5px] border-[var(--c-primary)]/30 rounded-xl px-5 py-4 text-[13px] h-24 focus:outline-none resize-none shadow-[inset_0_2px_4px_rgba(0,0,0,0.02)]"></textarea>
         </div>
-        <div @click="handleSubmitRsvp" class="w-full bg-[#a88c6b] text-white py-4 rounded-full text-center tracking-[0.3em] text-[12px] cursor-pointer hover:bg-[#967b5c] transition-all shadow-md">确认发送</div>
+        <div @click="handleSubmitRsvp" class="w-full bg-[var(--c-primary)] text-[var(--c-on-primary)] py-4 rounded-full text-center tracking-[0.3em] text-[12px] cursor-pointer hover:bg-[var(--c-primary-deep)] transition-all shadow-md">确认发送</div>
       </div>
       <div v-else class="text-center py-10 flex flex-col items-center animate-fade-up">
-        <span class="text-3xl text-[#a88c6b] mb-6 animate-pulse-heart">♥</span>
-        <span class="text-lg text-[#2c2c2c] mb-3 tracking-[0.2em] font-light">感恩您的祝福</span>
-        <span class="text-[13px] text-[#8A8680] leading-loose tracking-widest font-light">回执已妥投，期待与您共享喜悦</span>
+        <span class="text-3xl text-[var(--c-primary)] mb-6 animate-pulse-heart">♥</span>
+        <span class="text-lg text-[var(--c-ink)] mb-3 tracking-[0.2em] font-light">感恩您的祝福</span>
+        <span class="text-[13px] text-[var(--c-muted)] leading-loose tracking-widest font-light">回执已妥投，期待与您共享喜悦</span>
         <button class="map-cta mt-8 w-full max-w-[280px]" type="button" @click="openNavigation">
           <span class="map-cta-icon"><i class="fa-solid fa-location-dot"></i></span>
           <span class="map-cta-copy">
@@ -761,21 +922,21 @@
     <!-- 送祝福抽屉 -->
     <div v-if="showBlessingDrawer" class="fixed inset-0 z-[60] bg-black/40 backdrop-blur-sm" @click="closeBlessingDrawer"></div>
     <div
-      class="fixed bottom-0 left-0 w-full bg-white rounded-t-[2.5rem] shadow-2xl transition-transform duration-500 z-[70] p-10 flex flex-col"
+      class="fixed bottom-0 left-0 w-full bg-[var(--c-card)] rounded-t-[2.5rem] shadow-2xl transition-transform duration-500 z-[70] p-10 flex flex-col"
       :class="{ 'pointer-events-none': !showBlessingDrawer }"
       :style="{ transform: showBlessingDrawer ? 'translateY(0)' : 'translateY(100%)' }"
     >
-      <div @click="closeBlessingDrawer" class="absolute top-6 right-6 p-2 text-[#a88c6b] cursor-pointer hover:text-[#2c2c2c] transition-colors text-xl">✕</div>
-      <span class="text-xl text-center text-[#a88c6b] mb-1 tracking-[0.3em] font-light mt-2">送上祝福</span>
-      <span class="text-center text-[10px] text-[#8A8680] mb-8 tracking-[0.4em]">即 时 展 示</span>
+      <div @click="closeBlessingDrawer" class="absolute top-6 right-6 p-2 text-[var(--c-primary)] cursor-pointer hover:text-[var(--c-ink)] transition-colors text-xl">✕</div>
+      <span class="text-xl text-center text-[var(--c-primary)] mb-1 tracking-[0.3em] font-light mt-2">送上祝福</span>
+      <span class="text-center text-[10px] text-[var(--c-muted)] mb-8 tracking-[0.4em]">即 时 展 示</span>
       <div v-if="!blessingSubmitted" class="space-y-6">
         <div>
-          <span class="block text-[10px] text-[#a88c6b] mb-1.5 tracking-widest pl-1">姓名</span>
-          <input v-model="blessingForm.name" placeholder="您的姓名" class="w-full bg-[#Fdfbf7] border-[0.5px] border-[#a88c6b]/30 rounded-xl px-5 py-4 text-[13px] focus:outline-none focus:border-[#a88c6b]" />
+          <span class="block text-[10px] text-[var(--c-primary)] mb-1.5 tracking-widest pl-1">姓名</span>
+          <input v-model="blessingForm.name" placeholder="您的姓名" class="w-full bg-[var(--c-paper)] border-[0.5px] border-[var(--c-primary)]/30 rounded-xl px-5 py-4 text-[13px] focus:outline-none focus:border-[var(--c-primary)]" />
         </div>
         <div class="relative">
           <div class="flex items-center justify-between mb-1.5 pl-1 pr-0.5">
-            <span class="text-[10px] text-[#a88c6b] tracking-widest">祝福</span>
+            <span class="text-[10px] text-[var(--c-primary)] tracking-widest">祝福</span>
             <div class="ai-bless-wrap">
               <button type="button" class="ai-bless-btn" :disabled="aiBlessingLoading" @click.stop="toggleAiStyle('blessing')">
                 {{ aiBlessingLoading && aiBlessingTarget === 'blessing' ? '生成中…' : 'AI 生成祝福' }}
@@ -792,10 +953,10 @@
               </div>
             </div>
           </div>
-          <textarea v-model="blessingForm.content" placeholder="写下您的祝福..." class="w-full bg-[#Fdfbf7] border-[0.5px] border-[#a88c6b]/30 rounded-xl px-5 py-4 text-[13px] h-24 focus:outline-none resize-none"></textarea>
+          <textarea v-model="blessingForm.content" placeholder="写下您的祝福..." class="w-full bg-[var(--c-paper)] border-[0.5px] border-[var(--c-primary)]/30 rounded-xl px-5 py-4 text-[13px] h-24 focus:outline-none resize-none"></textarea>
         </div>
         <div>
-          <span class="block text-[10px] text-[#a88c6b] mb-2 tracking-widest pl-1">弹幕颜色</span>
+          <span class="block text-[10px] text-[var(--c-primary)] mb-2 tracking-widest pl-1">弹幕颜色</span>
           <div class="danmaku-color-row">
             <button
               v-for="c in danmakuColorOptions"
@@ -808,7 +969,7 @@
               @click="blessingForm.color = c.key"
             />
           </div>
-          <span class="block text-[10px] text-[#a88c6b] mb-2 mt-3 tracking-widest pl-1">渐变配色</span>
+          <span class="block text-[10px] text-[var(--c-primary)] mb-2 mt-3 tracking-widest pl-1">渐变配色</span>
           <div class="danmaku-color-row">
             <button
               v-for="c in danmakuGradientOptions"
@@ -822,18 +983,18 @@
             />
           </div>
         </div>
-        <div @click="handleSubmitBlessing" class="w-full bg-[#a88c6b] text-white py-4 rounded-full text-center tracking-[0.3em] text-[12px] cursor-pointer hover:bg-[#967b5c] transition-all shadow-md">发送祝福</div>
+        <div @click="handleSubmitBlessing" class="w-full bg-[var(--c-primary)] text-[var(--c-on-primary)] py-4 rounded-full text-center tracking-[0.3em] text-[12px] cursor-pointer hover:bg-[var(--c-primary-deep)] transition-all shadow-md">发送祝福</div>
       </div>
       <div v-else class="text-center py-8 flex flex-col items-center">
-        <span class="text-3xl text-[#a88c6b] mb-5">♥</span>
-        <span class="text-lg text-[#2c2c2c] mb-2 tracking-[0.2em] font-light">祝福已送达</span>
-        <span class="text-[13px] text-[#8A8680] leading-loose tracking-widest font-light mb-8">已展示在弹幕中</span>
+        <span class="text-3xl text-[var(--c-primary)] mb-5">♥</span>
+        <span class="text-lg text-[var(--c-ink)] mb-2 tracking-[0.2em] font-light">祝福已送达</span>
+        <span class="text-[13px] text-[var(--c-muted)] leading-loose tracking-widest font-light mb-8">已展示在弹幕中</span>
         <button
           type="button"
-          class="w-full max-w-[280px] bg-[#a88c6b] text-white py-4 rounded-full tracking-[0.3em] text-[12px] hover:bg-[#967b5c] transition-all shadow-md"
+          class="w-full max-w-[280px] bg-[var(--c-primary)] text-[var(--c-on-primary)] py-4 rounded-full tracking-[0.3em] text-[12px] hover:bg-[var(--c-primary-deep)] transition-all shadow-md"
           @click="closeBlessingDrawer"
         >确认</button>
-        <span class="mt-4 text-[11px] text-[#8A8680] tracking-widest">{{ blessingCloseLeft }} 秒后自动关闭</span>
+        <span class="mt-4 text-[11px] text-[var(--c-muted)] tracking-widest">{{ blessingCloseLeft }} 秒后自动关闭</span>
       </div>
     </div>
 
@@ -848,7 +1009,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, computed, nextTick, onMounted, onUnmounted, watch } from 'vue'
+import { ref, reactive, computed, nextTick, onMounted, onUnmounted, watch, defineAsyncComponent } from 'vue'
 import { getAlbumImages, getConfig, submitRsvp, submitDanmaku, generateAiBlessing, getLikeStatus, submitLike, getGiftStatus, submitGift } from '@/api/wedding'
 import { useAudio } from '@/composables/useAudio'
 import { toast } from '@/composables/useToast'
@@ -868,6 +1029,15 @@ import {
 import { sendVisitBeacon, getFingerprint } from '@/utils/visitBeacon'
 import { optimizeImageUrl, isIOS } from '@/composables/useAndroidOptimize'
 import { DANMAKU_COLORS, DANMAKU_GRADIENT_COLORS, DEFAULT_DANMAKU_COLOR, BLESSING_STYLES } from '@/utils/danmakuColors'
+import { applySiteTheme, normalizeSiteTheme, themeLayoutKind } from '@/utils/themes'
+import SectionHeading from '@/components/themes/SectionHeading.vue'
+import CoverClassic from '@/components/themes/covers/CoverClassic.vue'
+import CoverMagazine from '@/components/themes/covers/CoverMagazine.vue'
+import CoverNewspaper from '@/components/themes/covers/CoverNewspaper.vue'
+import CoverPixel from '@/components/themes/covers/CoverPixel.vue'
+import CoverZen from '@/components/themes/covers/CoverZen.vue'
+import CoverGuofengNew from '@/components/themes/covers/CoverGuofengNew.vue'
+import CoverGuofengOld from '@/components/themes/covers/CoverGuofengOld.vue'
 import { parseLrc, formatAudioTime, findLrcIndex } from '@/utils/parseLrc'
 import CanvasEffects from '@/components/CanvasEffects.vue'
 import DanmakuLayer from '@/components/DanmakuLayer.vue'
@@ -875,6 +1045,8 @@ import { DANMAKU_AREA_OPTIONS, DEFAULT_DANMAKU_AREA } from '@/utils/danmakuArea'
 import LikeBurst from '@/components/LikeBurst.vue'
 import GiftEffect from '@/components/GiftEffect.vue'
 import GiftFeed from '@/components/GiftFeed.vue'
+// 3D 特效渲染器按需加载（three 依赖在组件内部再动态 import，不影响首屏）
+const GiftEffect3D = defineAsyncComponent(() => import('@/components/GiftEffect3D.vue'))
 import PhotoGallery from '@/components/PhotoGallery.vue'
 
 const DEFAULTS = {
@@ -882,6 +1054,9 @@ const DEFAULTS = {
   musicList: [], activeMusicUrl: '', musicPlayMode: 'random', musicRandomEnabled: true,
   musicCacheEnabled: true, musicCacheHours: 24,
   danmakuEnabled: true, danmakuShowTime: true, nineGridAnimate: false,
+  giftEffectMode: 'classic', // 礼物特效方案：classic 经典粒子 / three 立体炫效 / auto 按设备
+  siteTheme: 'champagne', // 整站主题：champagne/crimson/sage/ocean/lilac/sunset
+
   freeScrollInterval: 50,    // 自由滚动速度：滚动间隔 ms（越小越快）
   pageSwitchDuration: 800,   // 页面切换速度：翻页动画时长 ms
   firstScreenDuration: 4500, // 首屏停留时间：首屏效果结束后再开始自动滚动
@@ -1030,6 +1205,49 @@ const blessingStyles = BLESSING_STYLES
 const likeBurstRef = ref(null)
 const giftEffectRef = ref(null)
 const giftFeedRef = ref(null)
+/** 礼物特效渲染后端：后台可配 classic / three / auto；WebGL 初始化失败自动回落 classic */
+const giftFxFallback = ref(false)
+const giftFxBackend = computed(() => {
+  if (giftFxFallback.value) return 'classic'
+  const mode = data.value.giftEffectMode || 'classic'
+  if (mode === 'three') return 'three'
+  if (mode === 'auto') {
+    const mem = navigator.deviceMemory
+    const cores = navigator.hardwareConcurrency || 4
+    return !isIOS && (mem == null || mem >= 4) && cores >= 4 ? 'three' : 'classic'
+  }
+  return 'classic'
+})
+const onGiftFxFallback = () => { giftFxFallback.value = true }
+
+// 整站主题：跟随配置切换（含后台预览 postMessage 实时推送）
+watch(() => data.value.siteTheme, (t) => applySiteTheme(t), { immediate: true })
+/** 当前主题（归一化后）与布局类型（pack=风格包沿用经典排版 / layout=完整模板） */
+const siteThemeKey = computed(() => normalizeSiteTheme(data.value.siteTheme))
+const isLayoutTheme = computed(() => themeLayoutKind(siteThemeKey.value) === 'layout')
+/** 封面组件：风格包共用经典封面，完整模板各用专属排版 */
+const coverComponent = computed(() => ({
+  'guofeng-new': CoverGuofengNew,
+  'guofeng-old': CoverGuofengOld,
+  magazine: CoverMagazine,
+  newspaper: CoverNewspaper,
+  pixel: CoverPixel,
+  zen: CoverZen,
+}[siteThemeKey.value] || CoverClassic))
+/** 幕布印章符号：各风格包的辨识元素（空 = 默认羽毛图标） */
+const curtainSealChar = computed(() => ({
+  french: '❀',
+  forest: '❧',
+  night: '☾',
+  modern: '◆',
+}[siteThemeKey.value] || ''))
+/** 邀请文案页首符号：随风格包变化 */
+const formalMark = computed(() => ({
+  french: '✿',
+  forest: '❦',
+  night: '☾',
+  modern: '◇',
+}[siteThemeKey.value] || '❀'))
 const likeCount = ref(0)
 const likePulse = ref(false)
 const likeBusy = ref(false)
@@ -1452,11 +1670,15 @@ const endImage = computed(() => optimizeImageUrl(
   || data.value.heroImgResized
   || data.value.heroImg,
 ))
+const INTRO_EXIT_WHITELIST = ['wind', 'book', 'lift', 'doors', 'envelope', 'paper', 'zoom', 'iris', 'petal']
 const introExitClass = computed(() => {
-  const effect = ['wind', 'book', 'lift', 'doors'].includes(data.value.introExitEffect) ? data.value.introExitEffect : 'wind'
+  const effect = INTRO_EXIT_WHITELIST.includes(data.value.introExitEffect) ? data.value.introExitEffect : 'wind'
   return `intro-exit-${effect}`
 })
-const introExitDuration = computed(() => ({ wind: 1280, book: 1680, lift: 980, doors: 1180 }[data.value.introExitEffect] || 1280))
+const introExitDuration = computed(() => ({
+  wind: 1280, book: 1680, lift: 980, doors: 1180,
+  envelope: 1780, paper: 1300, zoom: 1200, iris: 1320, petal: 1760,
+}[data.value.introExitEffect] || 1280))
 
 const calendarWeekdays = ['一', '二', '三', '四', '五', '六', '日']
 const monthNames = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
@@ -2189,12 +2411,81 @@ const handleLike = async (count = 1) => {
   }
 }
 
+// ---------- 后台实时预览模式（/?preview=1，被 AdminEditor iframe 嵌入） ----------
+const isPreviewMode = typeof window !== 'undefined'
+  && new URLSearchParams(window.location.search).has('preview')
+// 预览挂在后台手机壳里：隐藏所有滚动条，模拟真机观感（样式见 style.css html.preview-mode）
+if (isPreviewMode) {
+  try { document.documentElement.classList.add('preview-mode') } catch { /* ignore */ }
+}
+/** 后台推来的配置覆盖：正式配置加载完成后需再套用一次，避免被覆盖 */
+let previewOverrides = null
+
+function applyPreviewOverrides(partial) {
+  if (!partial || typeof partial !== 'object') return
+  const merged = { ...partial }
+  if (merged.musicUrl && !(merged.musicList && merged.musicList.length)) {
+    merged.musicList = [{ url: merged.musicUrl, name: '背景音乐' }]
+  }
+  data.value = { ...data.value, ...merged }
+  syncPageScrollMode()
+  nextTick(() => invalidateScrollMax())
+}
+
+function onPreviewMessage(e) {
+  if (e.origin !== window.location.origin) return
+  const msg = e.data
+  if (!msg || msg.type !== 'wedding-preview-config' || !msg.data) return
+  previewOverrides = msg.data
+  applyPreviewOverrides(previewOverrides)
+}
+
+// ---------- 章节指示点 ----------
+const sectionDotCount = ref(0)
+const currentSectionIdx = ref(0)
+let sectionObserver = null
+let dotSectionEls = []
+
+function setupSectionDots() {
+  sectionObserver?.disconnect()
+  sectionObserver = null
+  dotSectionEls = sectionEls()
+  sectionDotCount.value = dotSectionEls.length
+  if (dotSectionEls.length < 2 || typeof IntersectionObserver === 'undefined') return
+  // 中线带检测：视口中部落在哪个章节内即为当前章节（对超高章节同样可靠）
+  sectionObserver = new IntersectionObserver((entries) => {
+    for (const en of entries) {
+      if (!en.isIntersecting) continue
+      const i = dotSectionEls.indexOf(en.target)
+      if (i >= 0) currentSectionIdx.value = i
+    }
+  }, { rootMargin: '-45% 0px -45% 0px', threshold: 0 })
+  dotSectionEls.forEach((el) => sectionObserver.observe(el))
+}
+
+function goToSection(i) {
+  const el = dotSectionEls[i]
+  if (!el) return
+  // 与手动触摸一致：先交还滚动控制权（退出 transform/自动滚），再平滑跳转
+  handleUserInteraction()
+  el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+}
+
 onMounted(async () => {
   if ('scrollRestoration' in history) history.scrollRestoration = 'manual'
   window.scrollTo(0, 0)
   const bootStartedAt = Date.now()
   const BOOT_MIN_MS = 1100
 
+  if (isPreviewMode) {
+    window.addEventListener('message', onPreviewMessage)
+    if (window.parent && window.parent !== window) {
+      try {
+        window.parent.postMessage({ type: 'wedding-preview-ready' }, window.location.origin)
+      } catch { /* ignore */ }
+    }
+  }
+
   try {
     const res = await getConfig()
     if (res.data && res.data !== '{}') {
@@ -2234,6 +2525,9 @@ onMounted(async () => {
     }
   } catch (e) { /* 使用默认配置 */ }
 
+  // 预览模式：正式配置加载后重放后台推送的覆盖，保证编辑内容优先
+  if (isPreviewMode && previewOverrides) applyPreviewOverrides(previewOverrides)
+
   syncPageScrollMode()
   albumLoaded.value = false
   // 安卓专项：不在首屏预挂载整本相册，避免 <a-image> 全量创建导致主线程卡顿
@@ -2241,7 +2535,7 @@ onMounted(async () => {
   albumPreviewImages.value = []
   loadLikeStatus()
   loadGiftStatus()
-  sendVisitBeacon()
+  if (!isPreviewMode) sendVisitBeacon()
 
   // Loading 期间预热封面，避免揭幕后闪空图
   await preloadImage(data.value.heroImgResized || data.value.heroImg)
@@ -2302,6 +2596,7 @@ onMounted(async () => {
     scrollHeightObserver.observe(scrollContainerRef.value)
   }
   handleScroll()
+  setupSectionDots()
 })
 
 onUnmounted(() => {
@@ -2309,9 +2604,12 @@ onUnmounted(() => {
   document.documentElement.classList.remove('page-scroll-snap', 'free-auto-scrolling', 'ios-free-transform-scroll')
   window.removeEventListener('scroll', handleScroll)
   window.removeEventListener('resize', invalidateScrollMax)
+  window.removeEventListener('message', onPreviewMessage)
   window.visualViewport?.removeEventListener('resize', invalidateScrollMax)
   scrollHeightObserver?.disconnect()
   scrollHeightObserver = null
+  sectionObserver?.disconnect()
+  sectionObserver = null
   cancelAnimationFrame(scrollRaf)
   scrollRaf = 0
   cancelAnimationFrame(rafId)
@@ -2337,6 +2635,7 @@ watch(
   async () => {
     await nextTick()
     refreshScrollMax()
+    setupSectionDots()
   },
   { deep: true }
 )
@@ -2385,7 +2684,7 @@ watch(
 .wrapper .font-sans { font-family: var(--font-sans); }
 .control-btn {
   width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 9999px;
-  backdrop-filter: blur(12px); border: 0.5px solid rgba(168, 140, 107, 0.3); color: #a88c6b; background: rgba(255,255,255,0.6);
+  backdrop-filter: blur(12px); border: 0.5px solid rgba(var(--c-primary-rgb), 0.3); color: var(--c-primary); background: color-mix(in srgb, var(--c-card) 62%, transparent);
 }
 .danmaku-area-menu {
   position: absolute;
@@ -2396,7 +2695,7 @@ watch(
   padding: 8px;
   border-radius: 14px;
   background: rgba(255, 252, 247, 0.96);
-  border: 1px solid rgba(168, 140, 107, 0.22);
+  border: 1px solid rgba(var(--c-primary-rgb), 0.22);
   box-shadow: 0 10px 28px rgba(88, 68, 42, 0.14);
   backdrop-filter: blur(10px);
   z-index: 5;
@@ -2413,11 +2712,11 @@ watch(
   transition: background 0.15s, border-color 0.15s;
 }
 .danmaku-area-opt:hover {
-  background: rgba(168, 140, 107, 0.1);
+  background: rgba(var(--c-primary-rgb), 0.1);
 }
 .danmaku-area-opt.active {
-  background: rgba(168, 140, 107, 0.16);
-  border-color: rgba(168, 140, 107, 0.35);
+  background: rgba(var(--c-primary-rgb), 0.16);
+  border-color: rgba(var(--c-primary-rgb), 0.35);
 }
 .danmaku-area-phone {
   position: relative;
@@ -2433,17 +2732,17 @@ watch(
   position: absolute;
   left: 0;
   right: 0;
-  background: rgba(168, 140, 107, 0.72);
+  background: rgba(var(--c-primary-rgb), 0.72);
 }
 .danmaku-area-zone[data-area='top30'] { top: 0; height: 30%; }
 .danmaku-area-zone[data-area='top'] { top: 0; height: 50%; }
 .danmaku-area-zone[data-area='bottom'] { bottom: 0; height: 50%; }
 .danmaku-area-zone[data-area='full'] { inset: 0; }
 .danmaku-area-opt.active .danmaku-area-zone {
-  background: #a88c6b;
+  background: var(--c-primary);
 }
 .danmaku-area-opt.active .danmaku-area-phone {
-  border-color: #a88c6b;
+  border-color: var(--c-primary);
 }
 .action-dock {
   position: fixed;
@@ -2546,9 +2845,9 @@ watch(
   cursor: pointer;
   backdrop-filter: blur(14px);
   -webkit-backdrop-filter: blur(14px);
-  border: 0.5px solid rgba(168, 140, 107, 0.28);
+  border: 0.5px solid rgba(var(--c-primary-rgb), 0.28);
   background: rgba(255, 253, 249, 0.42);
-  color: #a88c6b;
+  color: var(--c-primary);
   box-shadow: 0 6px 18px rgba(92, 74, 53, 0.08);
   transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
   /* 防长按选字 / iOS 连点双击放大 */
@@ -2576,10 +2875,10 @@ watch(
   background: rgba(255, 241, 247, 0.5);
 }
 .like-fab.busy { opacity: 0.7; pointer-events: none; }
-.like-icon { font-size: 18px; color: #a88c6b; line-height: 1; }
+.like-icon { font-size: 18px; color: var(--c-primary); line-height: 1; }
 .like-fab.liked .like-icon { color: #f472b6; }
 .like-count {
-  font-size: 11px; letter-spacing: 0.02em; color: #a88c6b;
+  font-size: 11px; letter-spacing: 0.02em; color: var(--c-primary);
   line-height: 1; text-align: center; max-width: 100%;
 }
 .like-fab.liked .like-count { color: #f472b6; font-weight: 600; }
@@ -2590,7 +2889,7 @@ watch(
   min-width: 52px;
 }
 .gift-fab.busy { opacity: 0.7; pointer-events: none; }
-.gift-icon { font-size: 16px; color: #a88c6b; line-height: 1; }
+.gift-icon { font-size: 16px; color: var(--c-primary); line-height: 1; }
 .gift-panel {
   height: calc(268px + env(safe-area-inset-bottom, 0px));
   max-height: calc(268px + env(safe-area-inset-bottom, 0px));
@@ -2757,9 +3056,9 @@ watch(
   cursor: pointer;
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
-  border: 0.5px solid rgba(168, 140, 107, 0.26);
+  border: 0.5px solid rgba(var(--c-primary-rgb), 0.26);
   background: rgba(255, 253, 249, 0.38);
-  color: #a88c6b;
+  color: var(--c-primary);
   font-size: 13px;
   letter-spacing: 0.28em;
   box-shadow: 0 8px 22px rgba(92, 74, 53, 0.1);
@@ -2866,7 +3165,7 @@ watch(
   height: 5px;
   margin: -2.5px 0 0 -2.5px;
   border-radius: 999px;
-  background: radial-gradient(circle at 35% 30%, #f0e0c8, #8a704f 70%, #5c4a35);
+  background: radial-gradient(circle at 35% 30%, #f0e0c8, var(--c-primary-deep) 70%, var(--c-ink-soft));
   box-shadow: 0 0 0 1px rgba(40, 28, 18, 0.35);
   pointer-events: none;
   z-index: 2;
@@ -2883,7 +3182,7 @@ watch(
   justify-content: center;
   font-size: 11px;
   color: #fff;
-  background: linear-gradient(145deg, #c4a484, #a88c6b);
+  background: linear-gradient(145deg, #c4a484, var(--c-primary));
   box-shadow: 0 3px 10px rgba(92, 74, 53, 0.28);
   z-index: 2;
 }
@@ -2906,9 +3205,9 @@ watch(
   height: 3px;
   background: linear-gradient(
     90deg,
-    rgba(168, 140, 107, 0.08),
-    rgba(168, 140, 107, 0.18),
-    rgba(168, 140, 107, 0.08)
+    rgba(var(--c-primary-rgb), 0.08),
+    rgba(var(--c-primary-rgb), 0.18),
+    rgba(var(--c-primary-rgb), 0.08)
   );
   box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.35);
 }
@@ -2918,8 +3217,8 @@ watch(
   left: 0;
   width: 100%;
   height: 3px;
-  background: linear-gradient(90deg, #d4b48a 0%, #a88c6b 55%, #8a704f 100%);
-  box-shadow: 0 0 8px rgba(168, 140, 107, 0.45);
+  background: linear-gradient(90deg, #d4b48a 0%, var(--c-primary) 55%, var(--c-primary-deep) 100%);
+  box-shadow: 0 0 8px rgba(var(--c-primary-rgb), 0.45);
   transform: scaleX(var(--scroll-p, 0));
   transform-origin: left center;
   will-change: transform;
@@ -2994,7 +3293,7 @@ watch(
 }
 .player-panel-title {
   font-size: 14px;
-  color: #5c4a35;
+  color: var(--c-ink-soft);
   letter-spacing: 0.06em;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -3005,9 +3304,9 @@ watch(
   width: 28px;
   height: 28px;
   border-radius: 999px;
-  color: #9a9084;
+  color: var(--c-muted);
   font-size: 12px;
-  background: rgba(168, 140, 107, 0.1);
+  background: rgba(var(--c-primary-rgb), 0.1);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3018,7 +3317,7 @@ watch(
   overflow-y: auto;
   padding: 10px 8px;
   border-radius: 18px;
-  background: rgba(168, 140, 107, 0.07);
+  background: rgba(var(--c-primary-rgb), 0.07);
   border: none;
 }
 .player-lrc-line {
@@ -3033,9 +3332,9 @@ watch(
   border-radius: 999px;
 }
 .player-lrc-line.active {
-  color: #5c4a35;
+  color: var(--c-ink-soft);
   font-weight: 600;
-  background: rgba(255, 255, 255, 0.36);
+  background: color-mix(in srgb, var(--c-card) 40%, transparent);
   transform: scale(1.02);
 }
 .player-lrc-empty {
@@ -3043,7 +3342,7 @@ watch(
   padding: 18px 8px;
   text-align: center;
   font-size: 12px;
-  color: #9a9084;
+  color: var(--c-muted);
 }
 .player-panel-footer {
   display: flex;
@@ -3064,9 +3363,9 @@ watch(
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: #a88c6b;
+  color: var(--c-primary);
   font-size: 12px;
-  background: rgba(168, 140, 107, 0.1);
+  background: rgba(var(--c-primary-rgb), 0.1);
 }
 .player-skip-btn:disabled {
   opacity: 0.35;
@@ -3076,13 +3375,13 @@ watch(
   width: 42px;
   height: 42px;
   border-radius: 999px;
-  background: linear-gradient(145deg, #c4a484, #a88c6b);
+  background: linear-gradient(145deg, #c4a484, var(--c-primary));
   color: #fff;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex: 0 0 auto;
-  box-shadow: 0 6px 14px rgba(168, 140, 107, 0.35);
+  box-shadow: 0 6px 14px rgba(var(--c-primary-rgb), 0.35);
   font-size: 14px;
 }
 .player-play-btn .fa-play { margin-left: 2px; }
@@ -3097,7 +3396,7 @@ watch(
   display: flex;
   align-items: center;
   gap: 4px;
-  color: #a88c6b;
+  color: var(--c-primary);
   min-height: 28px;
 }
 .player-list-wrap {
@@ -3111,10 +3410,10 @@ watch(
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: #a88c6b;
+  color: var(--c-primary);
   font-size: 12px;
   flex: 0 0 auto;
-  background: rgba(168, 140, 107, 0.1);
+  background: rgba(var(--c-primary-rgb), 0.1);
 }
 .player-track-pop {
   position: absolute;
@@ -3132,7 +3431,7 @@ watch(
 }
 .player-track-pop-title {
   font-size: 11px;
-  color: #9a9084;
+  color: var(--c-muted);
   letter-spacing: 0.12em;
   padding: 0 6px 6px;
 }
@@ -3151,11 +3450,11 @@ watch(
   padding: 8px 10px;
   border-radius: 12px;
   font-size: 12px;
-  color: #5c4a35;
+  color: var(--c-ink-soft);
 }
 .player-track-item.active {
-  background: rgba(168, 140, 107, 0.14);
-  color: #a88c6b;
+  background: rgba(var(--c-primary-rgb), 0.14);
+  color: var(--c-primary);
   font-weight: 600;
 }
 .player-track-item .tname {
@@ -3182,9 +3481,9 @@ watch(
   background: linear-gradient(
     90deg,
     #c4a484 0%,
-    #a88c6b var(--vol, 50%),
-    rgba(168, 140, 107, 0.18) var(--vol, 50%),
-    rgba(168, 140, 107, 0.18) 100%
+    var(--c-primary) var(--vol, 50%),
+    rgba(var(--c-primary-rgb), 0.18) var(--vol, 50%),
+    rgba(var(--c-primary-rgb), 0.18) 100%
   );
   cursor: pointer;
 }
@@ -3196,7 +3495,7 @@ watch(
   border-radius: 999px;
   background: #fff;
   border: none;
-  box-shadow: 0 1px 4px rgba(92, 74, 53, 0.28), 0 0 0 1px rgba(168, 140, 107, 0.35);
+  box-shadow: 0 1px 4px rgba(92, 74, 53, 0.28), 0 0 0 1px rgba(var(--c-primary-rgb), 0.35);
   cursor: pointer;
   transition: transform 0.15s ease;
 }
@@ -3207,7 +3506,7 @@ watch(
   border-radius: 999px;
   background: #fff;
   border: none;
-  box-shadow: 0 1px 4px rgba(92, 74, 53, 0.28), 0 0 0 1px rgba(168, 140, 107, 0.35);
+  box-shadow: 0 1px 4px rgba(92, 74, 53, 0.28), 0 0 0 1px rgba(var(--c-primary-rgb), 0.35);
   cursor: pointer;
 }
 .player-seek-wrap { width: 100%; }
@@ -3215,7 +3514,7 @@ watch(
   display: flex;
   justify-content: space-between;
   font-size: 10px;
-  color: #9a9084;
+  color: var(--c-muted);
   margin-top: 3px;
   padding: 0 2px;
 }
@@ -3229,9 +3528,9 @@ watch(
   background: linear-gradient(
     90deg,
     #c4a484 0%,
-    #a88c6b var(--seek, 0%),
-    rgba(168, 140, 107, 0.18) var(--seek, 0%),
-    rgba(168, 140, 107, 0.18) 100%
+    var(--c-primary) var(--seek, 0%),
+    rgba(var(--c-primary-rgb), 0.18) var(--seek, 0%),
+    rgba(var(--c-primary-rgb), 0.18) 100%
   );
   cursor: pointer;
 }
@@ -3243,7 +3542,7 @@ watch(
   border-radius: 999px;
   background: #fff;
   border: none;
-  box-shadow: 0 1px 4px rgba(92, 74, 53, 0.28), 0 0 0 1px rgba(168, 140, 107, 0.35);
+  box-shadow: 0 1px 4px rgba(92, 74, 53, 0.28), 0 0 0 1px rgba(var(--c-primary-rgb), 0.35);
   cursor: pointer;
 }
 .player-range::-moz-range-thumb {
@@ -3252,7 +3551,7 @@ watch(
   border-radius: 999px;
   background: #fff;
   border: none;
-  box-shadow: 0 1px 4px rgba(92, 74, 53, 0.28), 0 0 0 1px rgba(168, 140, 107, 0.35);
+  box-shadow: 0 1px 4px rgba(92, 74, 53, 0.28), 0 0 0 1px rgba(var(--c-primary-rgb), 0.35);
   cursor: pointer;
 }
 @keyframes vinyl-spin {
@@ -3268,8 +3567,8 @@ watch(
   transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
 }
 .danmaku-color-dot.active {
-  border-color: #2c2c2c;
-  box-shadow: 0 0 0 2px rgba(168,140,107,0.35);
+  border-color: var(--c-ink);
+  box-shadow: 0 0 0 2px rgba(var(--c-primary-rgb),0.35);
   transform: scale(1.08);
 }
 .danmaku-color-dot--grad {
@@ -3282,28 +3581,28 @@ watch(
 }
 .ai-bless-wrap { position: relative; }
 .ai-bless-btn {
-  font-size: 10px; letter-spacing: 0.12em; color: #a88c6b;
-  background: transparent; border: 0.5px solid rgba(168,140,107,0.45);
+  font-size: 10px; letter-spacing: 0.12em; color: var(--c-primary);
+  background: transparent; border: 0.5px solid rgba(var(--c-primary-rgb),0.45);
   border-radius: 999px; padding: 3px 10px; line-height: 1.4;
   transition: background .2s, color .2s;
 }
-.ai-bless-btn:hover:not(:disabled) { background: rgba(168,140,107,0.1); }
+.ai-bless-btn:hover:not(:disabled) { background: rgba(var(--c-primary-rgb),0.1); }
 .ai-bless-btn:disabled { opacity: .55; cursor: wait; }
 .ai-style-card {
   position: absolute; right: 0; top: calc(100% + 6px); z-index: 5;
   width: 148px; padding: 10px 8px; background: #fffdf9;
-  border: 0.5px solid rgba(168,140,107,0.35); border-radius: 14px;
+  border: 0.5px solid rgba(var(--c-primary-rgb),0.35); border-radius: 14px;
   box-shadow: 0 10px 28px rgba(92,74,53,0.12);
   display: flex; flex-direction: column; gap: 4px;
 }
 .ai-style-title {
-  font-size: 10px; letter-spacing: 0.2em; color: #8a8680; padding: 2px 6px 6px;
+  font-size: 10px; letter-spacing: 0.2em; color: var(--c-muted); padding: 2px 6px 6px;
 }
 .ai-style-item {
-  text-align: left; font-size: 12px; color: #5c4a35;
+  text-align: left; font-size: 12px; color: var(--c-ink-soft);
   padding: 8px 10px; border-radius: 10px; transition: background .15s;
 }
-.ai-style-item:hover { background: rgba(168,140,107,0.12); }
+.ai-style-item:hover { background: rgba(var(--c-primary-rgb),0.12); }
 .vertical-text { writing-mode: vertical-rl; letter-spacing: 0.4em; text-orientation: upright; font-family: var(--font-kai); }
 .formal-copy {
   align-items: center;
@@ -3366,7 +3665,7 @@ watch(
 .schedule-page::after {
   content: ''; position: absolute; left: 50%; transform: translateX(-50%);
   width: min(62vw, 230px); height: 1px; pointer-events: none;
-  background: linear-gradient(90deg, transparent, rgba(168,140,107,0.34), transparent);
+  background: linear-gradient(90deg, transparent, rgba(var(--c-primary-rgb),0.34), transparent);
 }
 .schedule-page::before { top: 42px; }
 .schedule-page::after { bottom: 42px; }
@@ -3374,11 +3673,11 @@ watch(
   text-align: center; margin-bottom: 38px; position: relative; z-index: 1;
 }
 .schedule-title {
-  display: block; color: #a88c6b; font-size: 26px; line-height: 1.25;
+  display: block; color: var(--c-primary); font-size: 26px; line-height: 1.25;
   letter-spacing: 0.28em; padding-left: 0.28em; font-weight: 700;
 }
 .schedule-kicker {
-  display: block; margin-top: 10px; color: #8A8680; font-size: 10px;
+  display: block; margin-top: 10px; color: var(--c-muted); font-size: 10px;
   letter-spacing: 0.4em; padding-left: 0.4em; text-transform: uppercase;
 }
 .schedule-list {
@@ -3387,7 +3686,7 @@ watch(
 }
 .schedule-list::before {
   content: ''; position: absolute; top: 16px; bottom: 16px; left: 104px;
-  width: 1px; background: linear-gradient(180deg, transparent, rgba(168,140,107,0.54) 12%, rgba(168,140,107,0.54) 88%, transparent);
+  width: 1px; background: linear-gradient(180deg, transparent, rgba(var(--c-primary-rgb),0.54) 12%, rgba(var(--c-primary-rgb),0.54) 88%, transparent);
 }
 .schedule-row {
   position: relative; display: grid; grid-template-columns: 78px 52px 1fr;
@@ -3397,8 +3696,8 @@ watch(
   justify-self: end; min-width: 72px; padding: 9px 10px 8px;
   color: #8f7250; font-family: var(--font-number); font-size: 19px;
   letter-spacing: 0.08em; text-align: center;
-  border-top: 1px solid rgba(168,140,107,0.28);
-  border-bottom: 1px solid rgba(168,140,107,0.2);
+  border-top: 1px solid rgba(var(--c-primary-rgb),0.28);
+  border-bottom: 1px solid rgba(var(--c-primary-rgb),0.2);
   background: rgba(255,255,255,0.26);
 }
 .schedule-axis {
@@ -3407,23 +3706,23 @@ watch(
 .schedule-node {
   width: 18px; height: 18px; border-radius: 9999px; position: relative;
   display: flex; align-items: center; justify-content: center;
-  background: #fbf7ef; border: 1px solid rgba(168,140,107,0.52);
-  box-shadow: 0 0 0 5px rgba(168,140,107,0.09), 0 6px 16px rgba(112,78,40,0.12);
+  background: var(--c-bg); border: 1px solid rgba(var(--c-primary-rgb),0.52);
+  box-shadow: 0 0 0 5px rgba(var(--c-primary-rgb),0.09), 0 6px 16px rgba(112,78,40,0.12);
 }
 .schedule-node i {
   width: 6px; height: 6px; border-radius: 9999px; display: block;
-  background: #a88c6b;
+  background: var(--c-primary);
 }
 .schedule-copy {
   min-width: 0; padding: 13px 0 13px 2px; text-align: left;
-  border-bottom: 1px solid rgba(168,140,107,0.14);
+  border-bottom: 1px solid rgba(var(--c-primary-rgb),0.14);
 }
 .schedule-event {
   display: block; color: #3f3428; font-family: var(--font-serif);
   font-size: 16px; line-height: 1.4; letter-spacing: 0.16em; font-weight: 600;
 }
 .schedule-desc {
-  display: block; margin-top: 5px; color: #8A8680; font-size: 10px;
+  display: block; margin-top: 5px; color: var(--c-muted); font-size: 10px;
   line-height: 1.5; letter-spacing: 0.2em; text-transform: uppercase;
 }
 
@@ -3433,24 +3732,24 @@ watch(
   background:
     linear-gradient(180deg, rgba(253,251,247,0.72), rgba(247,246,242,0.94)),
     radial-gradient(circle at 18% 12%, rgba(232,201,210,0.18), transparent 30%),
-    radial-gradient(circle at 82% 82%, rgba(168,140,107,0.12), transparent 28%);
+    radial-gradient(circle at 82% 82%, rgba(var(--c-primary-rgb),0.12), transparent 28%);
 }
 .calendar-card {
   width: min(100%, 352px); margin: 0 auto; padding: 30px 24px 28px;
-  color: #4a3f30; text-align: center; position: relative;
+  color: var(--c-ink-soft); text-align: center; position: relative;
   background:
     linear-gradient(135deg, rgba(255,255,255,0.66), rgba(255,255,255,0.28)),
     repeating-linear-gradient(0deg, rgba(112,82,47,0.025) 0 1px, transparent 1px 8px),
     rgba(253,251,247,0.72);
-  border: 1px solid rgba(168,140,107,0.24);
+  border: 1px solid rgba(var(--c-primary-rgb),0.24);
   box-shadow: 0 18px 50px rgba(95,70,39,0.13), inset 0 0 0 8px rgba(255,255,255,0.34);
 }
 .calendar-card::before {
   content: ''; position: absolute; inset: 12px;
-  border: 1px solid rgba(168,140,107,0.16); pointer-events: none;
+  border: 1px solid rgba(var(--c-primary-rgb),0.16); pointer-events: none;
 }
 .calendar-kicker {
-  color: #a88c6b; font-family: var(--font-display);
+  color: var(--c-primary); font-family: var(--font-display);
   font-size: 10px; letter-spacing: 0.46em; padding-left: 0.46em; text-transform: uppercase;
 }
 .calendar-title {
@@ -3459,7 +3758,7 @@ watch(
   font-size: 30px; line-height: 1.2; letter-spacing: 0.12em;
 }
 .calendar-title i {
-  width: 34px; height: 1px; background: linear-gradient(90deg, transparent, rgba(168,140,107,0.8), transparent);
+  width: 34px; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--c-primary-rgb),0.8), transparent);
 }
 .calendar-date-line {
   margin: 10px auto 22px; color: #806f5c; font-size: 11px;
@@ -3470,7 +3769,7 @@ watch(
   display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px;
 }
 .calendar-weekdays {
-  margin-bottom: 9px; color: #a88c6b; font-size: 10px;
+  margin-bottom: 9px; color: var(--c-primary); font-size: 10px;
   font-family: var(--font-kai); font-weight: 700;
 }
 .calendar-day {
@@ -3548,15 +3847,15 @@ watch(
   font-size: 13px; font-weight: 700; letter-spacing: 0.2em;
 }
 .calendar-note i {
-  width: 20px; height: 1px; background: rgba(168,140,107,0.45);
+  width: 20px; height: 1px; background: rgba(var(--c-primary-rgb),0.45);
 }
 
 /* ---------- 揭幕前 Loading（象牙金主题） ---------- */
 .boot-loading {
-  --boot-gold: #a88c6b;
-  --boot-gold-soft: #b89a78;
-  --boot-ink: #5b4a36;
-  --boot-cream: #fbf6ef;
+  --boot-gold: var(--c-primary);
+  --boot-gold-soft: var(--c-line);
+  --boot-ink: var(--c-ink-soft);
+  --boot-cream: var(--c-bg);
   position: fixed;
   inset: 0;
   z-index: 200;
@@ -3566,9 +3865,9 @@ watch(
   overflow: hidden;
   background:
     radial-gradient(ellipse at 50% 42%, rgba(255, 252, 246, 0.96), transparent 55%),
-    radial-gradient(ellipse at 18% 78%, rgba(184, 154, 120, 0.14), transparent 42%),
-    radial-gradient(ellipse at 82% 18%, rgba(168, 140, 107, 0.12), transparent 40%),
-    linear-gradient(165deg, #fdfbf7 0%, #f7efe4 46%, #eddcc6 100%);
+    radial-gradient(ellipse at 18% 78%, rgba(var(--c-line-rgb), 0.14), transparent 42%),
+    radial-gradient(ellipse at 82% 18%, rgba(var(--c-primary-rgb), 0.12), transparent 40%),
+    linear-gradient(165deg, var(--c-paper) 0%, #f7efe4 46%, #eddcc6 100%);
   transition: opacity 0.48s ease, visibility 0.48s ease, transform 0.48s ease;
 }
 .boot-loading.is-leaving {
@@ -3591,11 +3890,11 @@ watch(
 }
 .boot-glow-1 {
   width: 180px; height: 180px; left: 8%; top: 18%;
-  background: rgba(184, 154, 120, 0.28);
+  background: rgba(var(--c-line-rgb), 0.28);
 }
 .boot-glow-2 {
   width: 220px; height: 220px; right: 4%; bottom: 16%;
-  background: rgba(168, 140, 107, 0.22);
+  background: rgba(var(--c-primary-rgb), 0.22);
   animation-delay: -2s;
 }
 .boot-glow-3 {
@@ -3620,7 +3919,7 @@ watch(
   height: 4px;
   border-radius: 50%;
   background: var(--boot-gold-soft);
-  box-shadow: 0 0 8px rgba(184, 154, 120, 0.55);
+  box-shadow: 0 0 8px rgba(var(--c-line-rgb), 0.55);
   animation: boot-twinkle 2.4s ease-in-out infinite;
 }
 .boot-spark-1 { left: 22%; top: 18%; animation-delay: 0s; }
@@ -3632,7 +3931,7 @@ watch(
   position: absolute;
   width: 52px;
   height: 52px;
-  border-color: rgba(168, 140, 107, 0.38);
+  border-color: rgba(var(--c-primary-rgb), 0.38);
   border-style: solid;
   border-width: 0;
   opacity: 0;
@@ -3675,10 +3974,10 @@ watch(
   display: block;
   width: 42px;
   height: 1px;
-  background: linear-gradient(90deg, transparent, rgba(168, 140, 107, 0.55));
+  background: linear-gradient(90deg, transparent, rgba(var(--c-primary-rgb), 0.55));
 }
 .boot-rule span:last-child {
-  background: linear-gradient(90deg, rgba(168, 140, 107, 0.55), transparent);
+  background: linear-gradient(90deg, rgba(var(--c-primary-rgb), 0.55), transparent);
 }
 .boot-rule-flip { margin-top: 22px; margin-bottom: 0; }
 .boot-seal-wrap {
@@ -3699,15 +3998,15 @@ watch(
 .boot-seal-ring-a {
   inset: -10px;
   border-width: 1.5px;
-  border-top-color: rgba(168, 140, 107, 0.72);
-  border-right-color: rgba(184, 154, 120, 0.18);
+  border-top-color: rgba(var(--c-primary-rgb), 0.72);
+  border-right-color: rgba(var(--c-line-rgb), 0.18);
   animation: boot-ring-spin 1.8s linear infinite;
 }
 .boot-seal-ring-b {
   inset: -2px;
   border-width: 1px;
-  border-bottom-color: rgba(184, 154, 120, 0.55);
-  border-left-color: rgba(168, 140, 107, 0.12);
+  border-bottom-color: rgba(var(--c-line-rgb), 0.55);
+  border-left-color: rgba(var(--c-primary-rgb), 0.12);
   animation: boot-ring-spin-rev 2.6s linear infinite;
 }
 .boot-seal {
@@ -3724,9 +4023,9 @@ watch(
   background:
     radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.65), transparent 46%),
     linear-gradient(160deg, #fffaf3, #f3e6d6);
-  border: 1.5px solid rgba(168, 140, 107, 0.55);
+  border: 1.5px solid rgba(var(--c-primary-rgb), 0.55);
   box-shadow:
-    inset 0 0 0 5px rgba(168, 140, 107, 0.08),
+    inset 0 0 0 5px rgba(var(--c-primary-rgb), 0.08),
     0 12px 32px rgba(120, 90, 55, 0.14);
   animation:
     boot-seal-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) both,
@@ -3783,8 +4082,8 @@ watch(
   100% { opacity: 1; transform: scale(1) rotate(0); }
 }
 @keyframes boot-seal-breathe {
-  0%, 100% { transform: scale(1); box-shadow: inset 0 0 0 5px rgba(168, 140, 107, 0.08), 0 12px 32px rgba(120, 90, 55, 0.14); }
-  50% { transform: scale(1.035); box-shadow: inset 0 0 0 5px rgba(168, 140, 107, 0.12), 0 14px 36px rgba(120, 90, 55, 0.18); }
+  0%, 100% { transform: scale(1); box-shadow: inset 0 0 0 5px rgba(var(--c-primary-rgb), 0.08), 0 12px 32px rgba(120, 90, 55, 0.14); }
+  50% { transform: scale(1.035); box-shadow: inset 0 0 0 5px rgba(var(--c-primary-rgb), 0.12), 0 14px 36px rgba(120, 90, 55, 0.18); }
 }
 @keyframes boot-ring-spin {
   to { transform: rotate(360deg); }
@@ -3810,7 +4109,7 @@ watch(
 }
 
 /* ---------- 入场揭幕（雅致象牙金） ---------- */
-.curtain-root { position: fixed; inset: 0; z-index: 100; overflow: hidden; cursor: pointer; font-family: var(--font-sans); background: #fbf6ef; perspective: 1200px; }
+.curtain-root { position: fixed; inset: 0; z-index: 100; overflow: hidden; cursor: pointer; font-family: var(--font-sans); background: var(--c-bg); perspective: 1200px; }
 .curtain-bg {
   position: absolute; inset: -24px; background-size: cover; background-position: center;
   filter: blur(18px) brightness(0.68) saturate(1.02); transform: scale(1.12);
@@ -3826,16 +4125,16 @@ watch(
   background:
     linear-gradient(90deg, rgba(92,64,42,0.06), transparent 18%, transparent 78%, rgba(255,255,255,0.28)),
     repeating-linear-gradient(90deg, rgba(166,128,87,0.04) 0 1px, transparent 1px 10px),
-    linear-gradient(160deg, #fbf6ef 0%, #f5e9dc 45%, #ecd9c4 100%);
-  box-shadow: inset 0 0 58px rgba(184,154,120,0.16), inset 0 0 0 1px rgba(255,255,255,0.42);
+    linear-gradient(160deg, var(--c-bg) 0%, var(--c-bg-deep) 100%);
+  box-shadow: inset 0 0 58px rgba(var(--c-line-rgb),0.16), inset 0 0 0 1px rgba(255,255,255,0.42);
   transition: transform 1.4s cubic-bezier(0.76, 0, 0.24, 1);
   transform-style: preserve-3d;
 }
-.curtain-door::before { content: ''; position: absolute; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, rgba(184,154,120,0.5), transparent); }
+.curtain-door::before { content: ''; position: absolute; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, rgba(var(--c-line-rgb),0.5), transparent); }
 .curtain-door::after {
   content: ''; position: absolute; inset: 20px 18px;
-  border-top: 1px solid rgba(168,140,107,0.14);
-  border-bottom: 1px solid rgba(168,140,107,0.12);
+  border-top: 1px solid rgba(var(--c-primary-rgb),0.14);
+  border-bottom: 1px solid rgba(var(--c-primary-rgb),0.12);
   pointer-events: none;
 }
 .curtain-door-left { left: 0; }
@@ -3904,69 +4203,306 @@ watch(
 .curtain-root.is-opening.intro-exit-doors .invite-cover {
   animation: inviteDoorsExit 860ms cubic-bezier(0.4, 0, 1, 1) forwards;
 }
+
+/* —— 信封启封：蜡封弹开 → 翻盖掀起 → 请柬向上抽出 —— */
+.envelope-flap {
+  display: none;
+  position: absolute; left: -1px; right: -1px; top: -1px; height: 150px;
+  z-index: 3;
+  clip-path: polygon(0 0, 100% 0, 100% 24%, 50% 100%, 0 24%);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 42%),
+    linear-gradient(180deg, #f9f1e3, #efdfc8 62%, #e6d2b4);
+  border-bottom: 1px solid rgba(var(--c-primary-rgb), 0.35);
+  box-shadow: inset 0 -3px 10px rgba(var(--c-primary-rgb), 0.2);
+  transform-origin: 50% 0;
+  transform-style: preserve-3d;
+  pointer-events: none;
+}
+.curtain-root.intro-exit-envelope .envelope-flap { display: block; }
+.envelope-seal {
+  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
+  width: 46px; height: 46px; border-radius: 50%;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 20px; line-height: 1; color: rgba(255, 246, 238, 0.94);
+  background: radial-gradient(circle at 35% 30%, #d98a94, #b8505e 62%, #93394a);
+  box-shadow: 0 3px 10px rgba(110, 38, 50, 0.4), inset 0 0 0 3px rgba(255, 255, 255, 0.16), inset 0 -2px 6px rgba(70, 20, 28, 0.35);
+}
+.curtain-root.is-opening.intro-exit-envelope .curtain-emblem {
+  opacity: 1; transform: none; perspective: 1300px;
+}
+.curtain-root.is-opening.intro-exit-envelope .envelope-seal {
+  animation: envelopeSealPop 380ms cubic-bezier(0.4, 0, 1, 1) forwards;
+}
+.curtain-root.is-opening.intro-exit-envelope .envelope-flap {
+  animation: envelopeFlapOpen 860ms cubic-bezier(0.6, 0, 0.3, 1) 240ms forwards;
+}
+.curtain-root.is-opening.intro-exit-envelope .invite-cover {
+  will-change: transform, opacity;
+  animation: envelopeCardOut 1080ms cubic-bezier(0.55, 0, 0.25, 1) 640ms forwards;
+}
+.curtain-root.is-opening.intro-exit-envelope .emblem-inner {
+  animation: inviteContentExit 480ms cubic-bezier(0.4, 0, 1, 1) 780ms forwards;
+}
+.curtain-root.is-opening.intro-exit-envelope .curtain-door-left,
+.curtain-root.is-opening.intro-exit-envelope .curtain-door-right { transform: none; }
+.curtain-root.is-opening.intro-exit-envelope .curtain-bg,
+.curtain-root.is-opening.intro-exit-envelope .curtain-veil,
+.curtain-root.is-opening.intro-exit-envelope .curtain-door {
+  animation: bookBackdropFade 460ms ease-out 900ms forwards;
+}
+
+/* —— 贺卡掀页：整卡沿顶边 3D 上翻，带纸张柔皱与纸背 —— */
+.paper-back,
+.paper-fold { display: none; }
+/* 纸背面：翻过 90° 后露出（米白纸背 + 淡淡透印），backface 由统一规则控制 */
+.curtain-root.intro-exit-paper .paper-back {
+  display: block;
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  transform: rotateX(180deg) translateZ(0.6px);
+  background:
+    repeating-linear-gradient(0deg, rgba(120, 88, 55, 0.022) 0 1px, transparent 1px 7px),
+    linear-gradient(160deg, #f6efe2, #efe5d2 55%, #e9dcc4);
+  border: 1px solid rgba(var(--c-primary-rgb), 0.3);
+  pointer-events: none;
+}
+.curtain-root.intro-exit-paper .paper-back::after {
+  content: '';
+  position: absolute;
+  inset: 18px;
+  border: 1px solid rgba(var(--c-primary-rgb), 0.12);
+  background: radial-gradient(42% 32% at 50% 46%, rgba(var(--c-primary-rgb), 0.09), transparent 72%);
+}
+/* 柔皱光影：横向波纹随翻页从底部滚向顶部，模拟纸面弯曲传播 */
+.curtain-root.intro-exit-paper .paper-fold {
+  display: block;
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  opacity: 0;
+  pointer-events: none;
+  background:
+    linear-gradient(180deg, rgba(96, 66, 38, 0.16), rgba(255, 255, 255, 0) 24%),
+    repeating-linear-gradient(180deg,
+      rgba(255, 255, 255, 0) 0 9%,
+      rgba(113, 82, 50, 0.08) 12% 15%,
+      rgba(255, 255, 255, 0.22) 18% 21%,
+      rgba(255, 255, 255, 0) 25% 34%);
+  background-size: 100% 100%, 100% 240%;
+  background-position: 0 0, 0 130%;
+}
+.curtain-root.is-opening.intro-exit-paper .curtain-emblem {
+  opacity: 1; transform: none; perspective: 1400px;
+}
+.curtain-root.is-opening.intro-exit-paper .invite-cover {
+  transform-origin: 50% 0;
+  transform-style: preserve-3d;
+  backface-visibility: hidden;
+  will-change: transform, opacity, filter;
+  animation: paperFlipExit 1180ms cubic-bezier(0.55, 0, 0.3, 1) forwards;
+}
+/* 翻过 90° 后正面内容/装饰隐藏，只留纸背层（其自身反转 180° 恰好转正显示） */
+.curtain-root.is-opening.intro-exit-paper .invite-cover > * {
+  backface-visibility: hidden;
+}
+.curtain-root.is-opening.intro-exit-paper .paper-fold {
+  animation: paperFoldWave 1180ms cubic-bezier(0.55, 0, 0.3, 1) forwards;
+}
+.curtain-root.is-opening.intro-exit-paper .emblem-inner {
+  animation: inviteContentExit 420ms cubic-bezier(0.4, 0, 1, 1) 220ms forwards;
+}
+.curtain-root.is-opening.intro-exit-paper .curtain-door-left,
+.curtain-root.is-opening.intro-exit-paper .curtain-door-right { transform: none; }
+.curtain-root.is-opening.intro-exit-paper .curtain-bg,
+.curtain-root.is-opening.intro-exit-paper .curtain-veil,
+.curtain-root.is-opening.intro-exit-paper .curtain-door {
+  animation: bookBackdropFade 420ms ease-out 560ms forwards;
+}
+
+/* —— 穿越景深：镜头推进穿过请柬，背景同步放大退后 —— */
+.curtain-root.is-opening.intro-exit-zoom .curtain-emblem {
+  opacity: 1; transform: none;
+}
+.curtain-root.is-opening.intro-exit-zoom .invite-cover {
+  will-change: transform, opacity, filter;
+  animation: zoomThroughExit 1140ms cubic-bezier(0.62, 0, 0.22, 1) forwards;
+}
+.curtain-root.is-opening.intro-exit-zoom .emblem-inner {
+  animation: inviteContentExit 400ms cubic-bezier(0.4, 0, 1, 1) 180ms forwards;
+}
+.curtain-root.is-opening.intro-exit-zoom .curtain-door-left,
+.curtain-root.is-opening.intro-exit-zoom .curtain-door-right { transform: none; }
+.curtain-root.is-opening.intro-exit-zoom .curtain-bg {
+  animation: zoomBackdropBg 1140ms cubic-bezier(0.62, 0, 0.22, 1) forwards;
+}
+.curtain-root.is-opening.intro-exit-zoom .curtain-veil,
+.curtain-root.is-opening.intro-exit-zoom .curtain-door {
+  animation: zoomBackdropFade 1140ms cubic-bezier(0.62, 0, 0.22, 1) forwards;
+}
+
+/* —— 圆窗收拢：整幅幕布以虹膜圆孔收拢谢幕 —— */
+.curtain-root.is-opening.intro-exit-iris {
+  animation: irisClose 1200ms cubic-bezier(0.72, 0, 0.28, 1) 60ms forwards;
+}
+.curtain-root.is-opening.intro-exit-iris .curtain-emblem {
+  opacity: 1; transform: none;
+}
+.curtain-root.is-opening.intro-exit-iris .invite-cover {
+  animation: irisCardSettle 1200ms ease forwards;
+}
+.curtain-root.is-opening.intro-exit-iris .emblem-inner {
+  animation: inviteContentExit 420ms cubic-bezier(0.4, 0, 1, 1) forwards;
+}
+
+/* —— 花瓣飘散：请柬化作花瓣散去 —— */
+.petal-piece {
+  display: none;
+  position: absolute;
+  left: 50%;
+  top: 44%;
+  width: 16px;
+  height: 12px;
+  z-index: 4;
+  border-radius: 62% 38% 58% 42% / 55% 45% 55% 45%;
+  background: linear-gradient(135deg, #f5cfd6, #e0a0ac);
+  box-shadow: 0 1px 3px rgba(150, 80, 95, 0.25);
+  opacity: 0;
+  pointer-events: none;
+}
+.curtain-root.is-opening.intro-exit-petal .petal-piece {
+  display: block;
+  animation: petalDrift 1420ms ease-out forwards;
+}
+.pp-1 { --dx: -34vw; --dy: -20vh; --rot: -240deg; animation-delay: 40ms; width: 15px; }
+.pp-2 { --dx: 30vw; --dy: -26vh; --rot: 300deg; animation-delay: 120ms; background: linear-gradient(135deg, #fbe3e7, #e8b4bd); }
+.pp-3 { --dx: -40vw; --dy: 8vh; --rot: -420deg; animation-delay: 200ms; width: 12px; height: 9px; }
+.pp-4 { --dx: 38vw; --dy: 14vh; --rot: 380deg; animation-delay: 90ms; }
+.pp-5 { --dx: -18vw; --dy: -34vh; --rot: -320deg; animation-delay: 260ms; width: 13px; height: 10px; background: linear-gradient(135deg, #f9dade, #dfa4ae); }
+.pp-6 { --dx: 16vw; --dy: 30vh; --rot: 260deg; animation-delay: 170ms; }
+.pp-7 { --dx: 2vw; --dy: -40vh; --rot: 200deg; animation-delay: 320ms; width: 11px; height: 8px; }
+.curtain-root.is-opening.intro-exit-petal .curtain-emblem {
+  opacity: 1; transform: none;
+}
+.curtain-root.is-opening.intro-exit-petal .invite-cover {
+  will-change: transform, opacity, filter;
+  animation: petalCoverExit 1260ms cubic-bezier(0.5, 0, 0.3, 1) forwards;
+}
+.curtain-root.is-opening.intro-exit-petal .emblem-inner {
+  animation: inviteContentExit 460ms cubic-bezier(0.4, 0, 1, 1) 120ms forwards;
+}
+.curtain-root.is-opening.intro-exit-petal .curtain-bg,
+.curtain-root.is-opening.intro-exit-petal .curtain-veil,
+.curtain-root.is-opening.intro-exit-petal .curtain-door {
+  animation: bookBackdropFade 560ms ease-out 620ms forwards;
+}
+.curtain-root.is-opening.intro-exit-petal .curtain-door-left,
+.curtain-root.is-opening.intro-exit-petal .curtain-door-right { transform: none; }
 .invite-cover {
   position: relative; width: min(82vw, 360px); min-height: min(72vh, 560px);
   display: flex; align-items: center; justify-content: center; padding: 34px 24px;
-  color: #5b4a36; text-align: center;
+  color: var(--c-ink-soft); text-align: center;
   background:
     linear-gradient(135deg, rgba(255,255,255,0.5), transparent 28%, rgba(183,145,96,0.08) 100%),
     repeating-linear-gradient(0deg, rgba(120,88,55,0.025) 0 1px, transparent 1px 7px),
-    #fbf7ef;
-  border: 1px solid rgba(168,140,107,0.35);
-  box-shadow: 0 28px 70px rgba(59,39,22,0.24), inset 0 0 0 10px rgba(255,255,255,0.34), inset 0 0 0 11px rgba(168,140,107,0.14);
+    var(--c-paper);
+  border: 1px solid rgba(var(--c-primary-rgb),0.35);
+  box-shadow: 0 28px 70px rgba(59,39,22,0.24), inset 0 0 0 10px rgba(255,255,255,0.34), inset 0 0 0 11px rgba(var(--c-primary-rgb),0.14);
 }
 .invite-cover::before,
 .invite-cover::after {
   content: ''; position: absolute; pointer-events: none;
 }
 .invite-cover::before {
-  inset: 18px; border: 1px solid rgba(168,140,107,0.25);
+  inset: 18px; border: 1px solid rgba(var(--c-primary-rgb),0.25);
 }
 .invite-cover::after {
-  inset: 28px; border: 1px solid rgba(168,140,107,0.11);
+  inset: 28px; border: 1px solid rgba(var(--c-primary-rgb),0.11);
   background:
-    linear-gradient(45deg, transparent 0 49.6%, rgba(168,140,107,0.15) 50%, transparent 50.4%),
-    linear-gradient(-45deg, transparent 0 49.6%, rgba(168,140,107,0.12) 50%, transparent 50.4%);
+    linear-gradient(45deg, transparent 0 49.6%, rgba(var(--c-primary-rgb),0.15) 50%, transparent 50.4%),
+    linear-gradient(-45deg, transparent 0 49.6%, rgba(var(--c-primary-rgb),0.12) 50%, transparent 50.4%);
   opacity: .52;
 }
 .cover-filigree {
   position: absolute; left: 50%; width: 122px; height: 22px; transform: translateX(-50%);
-  border-top: 1px solid rgba(168,140,107,0.42);
+  border-top: 1px solid rgba(var(--c-primary-rgb),0.42);
 }
 .cover-filigree::before,
 .cover-filigree::after {
   content: ''; position: absolute; top: -4px; width: 26px; height: 8px;
-  border-top: 1px solid rgba(168,140,107,0.42); border-radius: 50%;
+  border-top: 1px solid rgba(var(--c-primary-rgb),0.42); border-radius: 50%;
 }
 .cover-filigree::before { left: 20px; transform: rotate(-18deg); }
 .cover-filigree::after { right: 20px; transform: rotate(18deg); }
 .cover-filigree-top { top: 42px; }
 .cover-filigree-bottom { bottom: 42px; transform: translateX(-50%) rotate(180deg); }
-.emblem-inner { position: relative; z-index: 1; width: 100%; text-align: center; color: #5b4a36; padding: 42px 16px 34px; }
-.emblem-kicker { display: block; letter-spacing: 0.48em; font-size: 18px; color: #a88c6b; margin-bottom: 24px; padding-left: 0.48em; font-family: var(--font-calligraphy); font-weight: 700; }
+.emblem-inner { position: relative; z-index: 1; width: 100%; text-align: center; color: var(--c-ink-soft); padding: 42px 16px 34px; }
+.emblem-kicker { display: block; letter-spacing: 0.48em; font-size: 18px; color: var(--c-primary); margin-bottom: 24px; padding-left: 0.48em; font-family: var(--font-calligraphy); font-weight: 700; }
 .emblem-seal {
   width: 56px; height: 56px; margin: 0 auto 22px; border-radius: 9999px;
   display: flex; align-items: center; justify-content: center;
-  border: 1px solid rgba(168,140,107,0.46); color: #a88c6b;
-  background: rgba(255,255,255,0.34); box-shadow: inset 0 0 0 5px rgba(168,140,107,0.07);
+  border: 1px solid rgba(var(--c-primary-rgb),0.46); color: var(--c-primary);
+  background: rgba(255,255,255,0.34); box-shadow: inset 0 0 0 5px rgba(var(--c-primary-rgb),0.07);
 }
 .emblem-seal i { font-size: 18px; }
-.emblem-names { font-family: var(--font-calligraphy); font-size: clamp(25px, 8vw, 35px); line-height: 1.22; letter-spacing: 0.14em; font-weight: 700; color: #403527; }
-.emblem-names .amp { font-style: italic; color: #b89a78; margin: 0 9px; font-family: var(--font-calligraphy); font-weight: 700; }
-.emblem-rule { width: 72px; height: 1px; background: linear-gradient(90deg, transparent, #b89a78, transparent); margin: 22px auto 18px; }
-.emblem-date { font-family: var(--font-calligraphy); font-size: 12px; letter-spacing: 0.34em; padding-left: 0.34em; color: #806a4d; }
+.emblem-names { font-family: var(--font-calligraphy); font-size: clamp(25px, 8vw, 35px); line-height: 1.22; letter-spacing: 0.14em; font-weight: 700; color: var(--c-ink-soft); }
+.emblem-names .amp { font-style: italic; color: var(--c-line); margin: 0 9px; font-family: var(--font-calligraphy); font-weight: 700; }
+.emblem-rule { width: 72px; height: 1px; background: linear-gradient(90deg, transparent, var(--c-line), transparent); margin: 22px auto 18px; }
+.emblem-date { font-family: var(--font-calligraphy); font-size: 12px; letter-spacing: 0.34em; padding-left: 0.34em; color: var(--c-primary-deep); }
 .emblem-invite-title {
-  margin-top: 30px; color: #4a3f30; font-family: var(--font-calligraphy);
+  margin-top: 30px; color: var(--c-ink-soft); font-family: var(--font-calligraphy);
   font-size: 24px; line-height: 1.35; letter-spacing: 0.1em; font-weight: 800;
 }
 .emblem-invite-copy {
-  max-width: 276px; margin: 13px auto 0; color: #5f503d;
+  max-width: 276px; margin: 13px auto 0; color: var(--c-ink-soft);
   font-family: var(--font-calligraphy); font-size: 15px; line-height: 2.05;
   letter-spacing: 0.09em; font-weight: 600;
 }
-.emblem-hint { margin-top: 30px; font-size: 12px; letter-spacing: 0.26em; color: #9b825e;
+.emblem-hint { margin-top: 30px; font-size: 12px; letter-spacing: 0.26em; color: var(--c-primary-deep);
   display: flex; align-items: center; justify-content: center; gap: 8px; }
-.emblem-hint .dot { width: 6px; height: 6px; border-radius: 9999px; background: #b89a78; animation: hintPulse 1.6s infinite; }
+.emblem-hint .dot { width: 6px; height: 6px; border-radius: 9999px; background: var(--c-line); animation: hintPulse 1.6s infinite; }
+
+/* ---------- 章节指示点 ---------- */
+.section-dots {
+  position: fixed;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  z-index: 35;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.5s ease;
+}
+.section-dots.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+.section-dot {
+  position: relative;
+  width: 6px;
+  height: 6px;
+  padding: 0;
+  border-radius: 9999px;
+  border: 1px solid rgba(var(--c-primary-rgb), 0.55);
+  background: rgba(255, 255, 255, 0.65);
+  cursor: pointer;
+  transition: height 0.3s ease, background 0.3s ease, border-color 0.3s ease;
+}
+.section-dot::before {
+  /* 扩大触控热区 */
+  content: '';
+  position: absolute;
+  inset: -7px;
+}
+.section-dot.active {
+  height: 18px;
+  background: linear-gradient(180deg, #c9a978, var(--c-primary));
+  border-color: var(--c-primary);
+}
 
 /* ---------- 尾页 ---------- */
 .ending-page {
@@ -3976,39 +4512,95 @@ watch(
 }
 .ending-frame {
   position: absolute; top: 28px; right: 22px; bottom: 28px; left: 22px;
-  border: 1px solid rgba(168,140,107,0.26); border-radius: 160px 160px 24px 24px;
+  border: 1px solid rgba(var(--c-primary-rgb),0.26); border-radius: 160px 160px 24px 24px;
   background: rgba(255,255,255,0.28); pointer-events: none;
+  /* 内侧淡金光晕，增强"门内"纵深感 */
+  box-shadow: inset 0 0 46px rgba(201, 169, 120, 0.13);
 }
 .ending-frame::before {
   content: ''; position: absolute; inset: 9px;
-  border: 0.5px solid rgba(168,140,107,0.18); border-radius: 150px 150px 18px 18px;
+  border: 0.5px solid rgba(var(--c-primary-rgb),0.18); border-radius: 150px 150px 18px 18px;
+}
+/* 拱顶 keystone：花饰圆章 + 两侧延伸细线，圆章用页面底色垫片盖住穿过的拱线 */
+.ending-keystone {
+  position: absolute; top: 0; left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex; align-items: center; gap: 7px;
+  color: #b08e63;
+}
+.ek-mark {
+  width: 34px; height: 34px; border-radius: 50%;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 15px; line-height: 1;
+  background: var(--c-paper);
+  border: 1px solid rgba(var(--c-primary-rgb), 0.38);
+  box-shadow: 0 0 0 4px var(--c-paper), inset 0 0 8px rgba(201, 169, 120, 0.2);
+}
+.ek-line {
+  width: 24px; height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(var(--c-primary-rgb), 0.55));
+}
+.ek-line-r { transform: scaleX(-1); }
+.reveal--in .ek-mark {
+  animation: keystonePop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s both;
+}
+@keyframes keystonePop {
+  0%   { opacity: 0; transform: scale(0.4) rotate(-90deg); }
+  100% { opacity: 1; transform: scale(1) rotate(0deg); }
+}
+/* 门框底部两侧对称藤蔓花枝 */
+.ending-vine {
+  position: absolute; bottom: 10px;
+  width: 74px; height: 48px;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 60'%3E%3Cg fill='none' stroke='%23a88c6b' stroke-width='1.2'%3E%3Cpath d='M4 56C24 50 44 40 60 26 70 17 78 10 92 6'/%3E%3Cpath d='M24 48q-3-9 4-14 4 7-4 14z' fill='%23c9a978' stroke='none' opacity='.6'/%3E%3Cpath d='M42 38q-1-9 7-12 2 8-7 12z' fill='%23c9a978' stroke='none' opacity='.55'/%3E%3Cpath d='M60 26q0-9 8-11 1 8-8 11z' fill='%23c9a978' stroke='none' opacity='.5'/%3E%3Cpath d='M76 15q1-8 9-9 0 8-9 9z' fill='%23c9a978' stroke='none' opacity='.45'/%3E%3Ccircle cx='92' cy='6' r='2' fill='%23d9a0a5' stroke='none' opacity='.65'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
+  opacity: 0.55;
+}
+.ending-vine-l { left: 10px; }
+.ending-vine-r { right: 10px; transform: scaleX(-1); }
+/* 四角雕花：细线 L 角 + 圆点收尾
+   容器必须自带 absolute 尺寸：v-reveal 的 transform 会把它变成
+   absolute 子元素的 containing block，没有 inset 时入场动画期间四角会错位 */
+.ending-corners {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
 }
 .ending-corners i {
-  position: absolute; width: 54px; height: 54px; border-color: rgba(168,140,107,0.28);
+  position: absolute; width: 46px; height: 46px; border-color: rgba(var(--c-primary-rgb),0.3);
 }
-.ending-corners i:first-child { top: 44px; left: 38px; border-top: 1px solid; border-left: 1px solid; }
-.ending-corners i:last-child { right: 38px; bottom: 44px; border-right: 1px solid; border-bottom: 1px solid; }
+.ending-corners i::after {
+  content: ''; position: absolute; width: 4px; height: 4px;
+  border-radius: 50%; background: rgba(var(--c-primary-rgb), 0.42);
+}
+.ending-corners i:nth-child(1) { top: 44px; left: 38px; border-top: 1px solid; border-left: 1px solid; }
+.ending-corners i:nth-child(1)::after { top: -2.5px; left: -2.5px; }
+.ending-corners i:nth-child(2) { top: 44px; right: 38px; border-top: 1px solid; border-right: 1px solid; }
+.ending-corners i:nth-child(2)::after { top: -2.5px; right: -2.5px; }
+.ending-corners i:nth-child(3) { left: 38px; bottom: 44px; border-bottom: 1px solid; border-left: 1px solid; }
+.ending-corners i:nth-child(3)::after { bottom: -2.5px; left: -2.5px; }
+.ending-corners i:nth-child(4) { right: 38px; bottom: 44px; border-right: 1px solid; border-bottom: 1px solid; }
+.ending-corners i:nth-child(4)::after { bottom: -2.5px; right: -2.5px; }
 .ending-kicker {
   display: flex; flex-direction: column; align-items: center; gap: 10px;
-  margin-bottom: 18px; color: #a88c6b; font-size: 10px; letter-spacing: 0.45em;
+  margin-bottom: 18px; color: var(--c-primary); font-size: 10px; letter-spacing: 0.45em;
   text-transform: uppercase; padding-left: 0.45em; font-family: var(--font-calligraphy); font-weight: 700;
 }
 .ending-kicker i {
   display: block; width: 34px; height: 1px;
-  background: linear-gradient(90deg, transparent, rgba(168,140,107,0.75), transparent);
+  background: linear-gradient(90deg, transparent, rgba(var(--c-primary-rgb),0.75), transparent);
 }
 .ending-photo {
   width: min(54vw, 188px); aspect-ratio: 3 / 4; overflow: hidden;
   border-radius: 9999px 9999px 16px 16px; border: 5px solid rgba(255,255,255,0.86);
-  box-shadow: 0 18px 42px rgba(100,78,48,0.18), 0 0 0 1px rgba(168,140,107,0.18);
-  background: #F7F6F2;
+  box-shadow: 0 18px 42px rgba(100,78,48,0.18), 0 0 0 1px rgba(var(--c-primary-rgb),0.18);
+  background: var(--c-bg);
 }
 .ending-copy {
   display: flex; flex-direction: column; align-items: center; text-align: center;
   margin-top: 22px; margin-bottom: 18px; padding: 0 12px;
 }
 .ending-title {
-  display: block; color: #a88c6b; font-size: 20px; line-height: 1.3;
+  display: block; color: var(--c-primary); font-size: 20px; line-height: 1.3;
   letter-spacing: 0.28em; padding-left: 0.28em; font-weight: 700; font-family: var(--font-calligraphy);
 }
 .ending-names {
@@ -4016,13 +4608,13 @@ watch(
   letter-spacing: 0.16em; font-family: var(--font-calligraphy); font-weight: 700;
 }
 .ending-date {
-  display: block; margin-top: 8px; color: #8A8680; font-size: 10px;
+  display: block; margin-top: 8px; color: var(--c-muted); font-size: 10px;
   letter-spacing: 0.28em; padding-left: 0.28em; font-family: var(--font-number);
 }
 .ending-venue {
   width: 100%; margin-bottom: 24px; padding: 14px 18px;
-  border-top: 1px solid rgba(168,140,107,0.18);
-  border-bottom: 1px solid rgba(168,140,107,0.18);
+  border-top: 1px solid rgba(var(--c-primary-rgb),0.18);
+  border-bottom: 1px solid rgba(var(--c-primary-rgb),0.18);
   text-align: center; background: rgba(255,255,255,0.32);
 }
 .ending-hotel {
@@ -4042,33 +4634,35 @@ watch(
 }
 .rsvp-cta {
   position: relative; width: 100%; padding: 16px 0; border-radius: 9999px;
-  border: 1px solid #c9a978; background: rgba(255,255,255,0.6);
-  color: #8a704f; font-size: 12px; letter-spacing: 0.28em; cursor: pointer;
+  border: 1px solid #c9a978; background: color-mix(in srgb, var(--c-card) 62%, transparent);
+  color: var(--c-primary-deep); font-size: 12px; letter-spacing: 0.28em; cursor: pointer;
   display: flex; align-items: center; justify-content: center; gap: 10px;
   backdrop-filter: blur(8px); transition: all .35s ease;
-  box-shadow: 0 6px 18px rgba(184,154,120,0.12);
+  box-shadow: 0 6px 18px rgba(var(--c-line-rgb),0.12);
 }
-.rsvp-cta:hover { background: #a88c6b; color: #fff; border-color: #a88c6b; box-shadow: 0 10px 26px rgba(184,154,120,0.28); }
+.rsvp-cta:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); box-shadow: 0 10px 26px rgba(var(--c-line-rgb),0.28); }
+.rsvp-cta:active { transform: scale(0.97); transition-duration: 0.12s; }
 .rsvp-cta-deco { font-size: 13px; opacity: .9; }
 .rsvp-cta-line { width: 18px; height: 1px; background: currentColor; opacity: .6; }
 .map-cta {
   position: relative; width: 100%; min-height: 54px; border: 0;
-  border-top: 1px solid rgba(168,140,107,0.22);
-  border-bottom: 1px solid rgba(168,140,107,0.16);
+  border-top: 1px solid rgba(var(--c-primary-rgb),0.22);
+  border-bottom: 1px solid rgba(var(--c-primary-rgb),0.16);
   background: rgba(255,255,255,0.2);
   color: #7a6244; cursor: pointer; padding: 10px 2px;
   display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px;
   text-align: left;
-  transition: background .25s ease, border-color .25s ease, color .25s ease;
+  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .2s ease;
 }
 .map-cta:hover {
   background: rgba(255,255,255,0.42);
-  border-color: rgba(168,140,107,0.34);
+  border-color: rgba(var(--c-primary-rgb),0.34);
 }
+.map-cta:active { transform: scale(0.985); transition-duration: 0.1s; }
 .map-cta-icon {
   width: 28px; height: 28px; border-radius: 9999px;
   display: flex; align-items: center; justify-content: center;
-  border: 1px solid rgba(168,140,107,0.38); color: #a88c6b;
+  border: 1px solid rgba(var(--c-primary-rgb),0.38); color: var(--c-primary);
   background: rgba(255,255,255,0.28);
 }
 .map-cta-icon i { font-size: 12px; }
@@ -4079,32 +4673,32 @@ watch(
   font-family: var(--font-serif); font-size: 13px; letter-spacing: 0.2em; font-weight: 600;
 }
 .map-cta-copy small {
-  color: #8A8680; font-size: 9px; letter-spacing: 0.08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  color: var(--c-muted); font-size: 9px; letter-spacing: 0.08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
 .map-cta-arrow {
-  color: #a88c6b; font-size: 10px; letter-spacing: 0.18em; padding: 0 1px 0 10px;
-  border-left: 1px solid rgba(168,140,107,0.2);
+  color: var(--c-primary); font-size: 10px; letter-spacing: 0.18em; padding: 0 1px 0 10px;
+  border-left: 1px solid rgba(var(--c-primary-rgb),0.2);
 }
 
 /* ---------- 地图选择 ---------- */
 .map-sheet {
   width: min(100%, 360px); border-radius: 20px; padding: 14px;
-  background: rgba(255,255,255,0.96); border: 1px solid rgba(168,140,107,0.18);
+  background: color-mix(in srgb, var(--c-card) 96%, transparent); border: 1px solid rgba(var(--c-primary-rgb),0.18);
   box-shadow: 0 20px 60px rgba(0,0,0,0.24); backdrop-filter: blur(14px);
 }
 .map-sheet-title {
-  text-align: center; color: #8a704f; font-size: 12px; letter-spacing: 0.22em;
+  text-align: center; color: var(--c-primary-deep); font-size: 12px; letter-spacing: 0.22em;
   padding: 8px 0 12px;
 }
 .map-sheet button {
   width: 100%; min-height: 44px; border: none; border-radius: 12px; margin-top: 8px;
-  background: #Fdfbf7; color: #4a3f30; font-size: 13px; letter-spacing: 0.12em;
+  background: var(--c-paper); color: var(--c-ink-soft); font-size: 13px; letter-spacing: 0.12em;
   cursor: pointer; transition: background .2s ease, color .2s ease;
   display: flex; align-items: center; justify-content: center; gap: 9px;
 }
-.map-sheet button i { width: 15px; color: #a88c6b; }
-.map-sheet button:hover { background: rgba(168,140,107,0.14); color: #8a704f; }
-.map-sheet .map-sheet-cancel { color: #8A8680; background: transparent; }
+.map-sheet button i { width: 15px; color: var(--c-primary); }
+.map-sheet button:hover { background: rgba(var(--c-primary-rgb),0.14); color: var(--c-primary-deep); }
+.map-sheet .map-sheet-cancel { color: var(--c-muted); background: transparent; }
 
 /* ---------- 微信内打开浏览器引导 ---------- */
 .open-browser-mask {
@@ -4132,7 +4726,7 @@ watch(
   color: rgba(232, 213, 181, 0.88); font-size: 13px; letter-spacing: 0.14em; line-height: 1.7;
 }
 .open-browser-hint {
-  margin-top: 18px; color: rgba(168, 140, 107, 0.75); font-size: 10px; letter-spacing: 0.22em;
+  margin-top: 18px; color: rgba(var(--c-primary-rgb), 0.75); font-size: 10px; letter-spacing: 0.22em;
 }
 @keyframes open-browser-pulse {
   0%, 100% { transform: translateY(0); opacity: 0.85; }
@@ -4142,11 +4736,11 @@ watch(
 /* ---------- 出席情况单选标签 ---------- */
 .rsvp-tag {
   flex: 1 1 auto; min-width: 72px; padding: 10px 12px; border-radius: 12px;
-  border: 1px solid rgba(168,140,107,0.35); background: #Fdfbf7; color: #6b6863;
+  border: 1px solid rgba(var(--c-primary-rgb),0.35); background: var(--c-paper); color: var(--c-muted);
   font-size: 12px; letter-spacing: 0.1em; cursor: pointer; transition: all .25s ease;
 }
-.rsvp-tag:hover { border-color: #a88c6b; }
-.rsvp-tag.active { background: #a88c6b; border-color: #a88c6b; color: #fff; box-shadow: 0 4px 12px rgba(168,140,107,0.25); }
+.rsvp-tag:hover { border-color: var(--c-primary); }
+.rsvp-tag.active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; box-shadow: 0 4px 12px rgba(var(--c-primary-rgb),0.25); }
 
 /* ---------- 音乐曲目弹层 ---------- */
 .music-wrap { position: relative; }
@@ -4154,19 +4748,19 @@ watch(
   position: absolute; right: 46px; top: 0; width: 200px;
   max-height: min(320px, calc(100vh - 3rem - 12px));
   display: flex; flex-direction: column;
-  background: rgba(255,255,255,0.95);
-  border: 1px solid rgba(168,140,107,0.25); border-radius: 14px; box-shadow: 0 12px 30px rgba(0,0,0,0.18);
+  background: color-mix(in srgb, var(--c-card) 95%, transparent);
+  border: 1px solid rgba(var(--c-primary-rgb),0.25); border-radius: 14px; box-shadow: 0 12px 30px rgba(0,0,0,0.18);
   padding: 8px; backdrop-filter: blur(12px); z-index: 60;
 }
-.track-pop-title { flex-shrink: 0; font-size: 10px; color: #a88c6b; letter-spacing: 0.2em; padding: 4px 8px 6px; }
+.track-pop-title { flex-shrink: 0; font-size: 10px; color: var(--c-primary); letter-spacing: 0.2em; padding: 4px 8px 6px; }
 .track-pop-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
 .track-item { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 10px; cursor: pointer; transition: background 0.2s; }
-.track-item:hover { background: rgba(168,140,107,0.1); }
-.track-item.active { background: rgba(168,140,107,0.16); color: #a88c6b; }
+.track-item:hover { background: rgba(var(--c-primary-rgb),0.1); }
+.track-item.active { background: rgba(var(--c-primary-rgb),0.16); color: var(--c-primary); }
 .track-item .tname { font-size: 12px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.track-item .tcheck { font-size: 12px; color: #a88c6b; }
+.track-item .tcheck { font-size: 12px; color: var(--c-primary); }
 .eq { display: inline-flex; align-items: flex-end; gap: 2px; width: 14px; }
-.eq i { width: 3px; background: #a88c6b; border-radius: 2px; animation: eqJump 0.9s ease-in-out infinite; }
+.eq i { width: 3px; background: var(--c-primary); border-radius: 2px; animation: eqJump 0.9s ease-in-out infinite; }
 .eq i:nth-child(1) { height: 8px; animation-delay: 0s; }
 .eq i:nth-child(2) { height: 12px; animation-delay: 0.2s; }
 .eq i:nth-child(3) { height: 6px; animation-delay: 0.4s; }
@@ -4221,7 +4815,7 @@ watch(
     opacity: 1;
     transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg) scale(1);
     filter: brightness(1) blur(0);
-    box-shadow: 0 28px 70px rgba(59,39,22,0.24), inset 0 0 0 10px rgba(255,255,255,0.34), inset 0 0 0 11px rgba(168,140,107,0.14);
+    box-shadow: 0 28px 70px rgba(59,39,22,0.24), inset 0 0 0 10px rgba(255,255,255,0.34), inset 0 0 0 11px rgba(var(--c-primary-rgb),0.14);
   }
   10% {
     opacity: 1;
@@ -4232,13 +4826,13 @@ watch(
     opacity: 1;
     transform: translate3d(-10px, -14px, 42px) rotateX(-12deg) rotateY(18deg) rotateZ(-2deg) skew(1.2deg) scale(.992);
     filter: brightness(1.04) blur(0);
-    box-shadow: 22px 30px 58px rgba(59,39,22,0.22), inset 14px 14px 24px rgba(87,57,31,0.1), inset 0 0 0 11px rgba(168,140,107,0.13);
+    box-shadow: 22px 30px 58px rgba(59,39,22,0.22), inset 14px 14px 24px rgba(87,57,31,0.1), inset 0 0 0 11px rgba(var(--c-primary-rgb),0.13);
   }
   48% {
     opacity: .96;
     transform: translate3d(-60px, -66px, 86px) rotateX(-32deg) rotateY(56deg) rotateZ(-8deg) skew(2.6deg) scale(.965);
     filter: brightness(.96) blur(.15px);
-    box-shadow: 44px 42px 66px rgba(59,39,22,0.27), inset 28px 24px 36px rgba(87,57,31,0.18), inset 0 0 0 11px rgba(168,140,107,0.1);
+    box-shadow: 44px 42px 66px rgba(59,39,22,0.27), inset 28px 24px 36px rgba(87,57,31,0.18), inset 0 0 0 11px rgba(var(--c-primary-rgb),0.1);
   }
   74% {
     opacity: .58;
@@ -4254,15 +4848,15 @@ watch(
 }
 @keyframes bookCurlShadow {
   0%, 12% {
-    border-color: rgba(168,140,107,0.25);
+    border-color: rgba(var(--c-primary-rgb),0.25);
     box-shadow: none;
   }
   34% {
-    border-color: rgba(168,140,107,0.2);
+    border-color: rgba(var(--c-primary-rgb),0.2);
     box-shadow: inset 18px 16px 24px rgba(79,51,28,0.14), inset -8px 0 18px rgba(255,255,255,0.48);
   }
   72%, 100% {
-    border-color: rgba(168,140,107,0.08);
+    border-color: rgba(var(--c-primary-rgb),0.08);
     box-shadow: inset 28px 30px 38px rgba(79,51,28,0.18);
   }
 }
@@ -4272,7 +4866,7 @@ watch(
     clip-path: polygon(0 0, 0 0, 0 0);
     background:
       radial-gradient(circle at 0 0, rgba(255,255,255,0.9), rgba(236,219,198,0.5) 34%, rgba(93,58,32,0.22) 58%, transparent 62%),
-      linear-gradient(135deg, rgba(168,140,107,0.15) 0 1px, transparent 2px);
+      linear-gradient(135deg, rgba(var(--c-primary-rgb),0.15) 0 1px, transparent 2px);
   }
   22% {
     opacity: .96;
@@ -4305,6 +4899,78 @@ watch(
   12% { opacity: 1; transform: translateY(4px) scale(.98); filter: blur(0); }
   100% { opacity: 0; transform: translateY(-12px) scale(.94); filter: blur(1.4px); }
 }
+/* 信封启封 */
+@keyframes envelopeSealPop {
+  0% { transform: translateX(-50%) scale(1) rotate(0); opacity: 1; }
+  42% { transform: translateX(-50%) scale(1.16) rotate(-9deg); opacity: 1; }
+  100% { transform: translateX(-50%) scale(0.55) rotate(16deg) translateY(-10px); opacity: 0; }
+}
+@keyframes envelopeFlapOpen {
+  0% { transform: rotateX(0); }
+  100% { transform: rotateX(-176deg); }
+}
+@keyframes envelopeCardOut {
+  0% { opacity: 1; transform: translateY(0) rotate(0); }
+  16% { opacity: 1; transform: translateY(10px) rotate(0.4deg); }
+  100% { opacity: 0; transform: translateY(-118vh) rotate(-2.6deg); }
+}
+/* 贺卡掀页：先压角蓄力，翻页中段最快并带柔性左右摆动（skew），落定前减速 */
+@keyframes paperFlipExit {
+  0% { opacity: 1; transform: rotateX(0) skewX(0) translateZ(0); filter: brightness(1); }
+  10% { opacity: 1; transform: rotateX(5deg) skewX(0.5deg) translateZ(2px); filter: brightness(1.01); }
+  24% { opacity: 1; transform: rotateX(-22deg) skewX(-1.2deg) translateZ(9px); filter: brightness(1.05); }
+  44% { opacity: 1; transform: rotateX(-74deg) skewX(1.6deg) translateZ(17px); filter: brightness(1.08); }
+  62% { opacity: 1; transform: rotateX(-124deg) skewX(-1.3deg) translateZ(19px); filter: brightness(0.97); }
+  82% { opacity: 0.95; transform: rotateX(-161deg) skewX(0.7deg) translateZ(11px); filter: brightness(0.9); }
+  100% { opacity: 0; transform: rotateX(-179deg) skewX(0) translateZ(4px); filter: brightness(0.85); }
+}
+/* 纸面柔皱波纹：翻页时从底部滚向顶部并淡出 */
+@keyframes paperFoldWave {
+  0% { opacity: 0; background-position: 0 0, 0 130%; }
+  16% { opacity: 0.95; }
+  46% { opacity: 0.88; background-position: 0 0, 0 22%; }
+  74% { opacity: 0.75; background-position: 0 0, 0 -52%; }
+  100% { opacity: 0; background-position: 0 0, 0 -130%; }
+}
+/* 穿越景深 */
+@keyframes zoomThroughExit {
+  0% { opacity: 1; transform: scale(1); filter: blur(0); }
+  22% { opacity: 1; transform: scale(0.965); filter: blur(0); }
+  62% { opacity: 1; filter: blur(1px); }
+  100% { opacity: 0; transform: scale(7.4); filter: blur(12px); }
+}
+@keyframes zoomBackdropBg {
+  0% { opacity: 1; transform: scale(1.12); }
+  100% { opacity: 0; transform: scale(1.78); }
+}
+@keyframes zoomBackdropFade {
+  0% { opacity: 1; transform: scale(1); }
+  100% { opacity: 0; transform: scale(1.32); }
+}
+/* 圆窗收拢 */
+@keyframes irisClose {
+  0% { clip-path: circle(142% at 50% 46%); }
+  100% { clip-path: circle(0% at 50% 46%); }
+}
+@keyframes irisCardSettle {
+  0% { transform: scale(1); opacity: 1; }
+  100% { transform: scale(0.9); opacity: 0.55; }
+}
+/* 花瓣飘散 */
+@keyframes petalDrift {
+  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(0); }
+  12% { opacity: 0.96; }
+  70% { opacity: 0.8; }
+  100% {
+    opacity: 0;
+    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.05) rotate(var(--rot));
+  }
+}
+@keyframes petalCoverExit {
+  0% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
+  18% { opacity: 1; transform: scale(1.015) translateY(-4px); filter: blur(0); }
+  100% { opacity: 0; transform: scale(0.84) translateY(-30px); filter: blur(9px); }
+}
 
 /* ---------- PC：内容列限宽居中（缩略图不宜铺满大屏） ---------- */
 @media (min-width: 768px) {
@@ -4312,15 +4978,15 @@ watch(
     --pc-invite-width: 430px;
     background:
       radial-gradient(ellipse at 50% 12%, rgba(232, 201, 210, 0.12), transparent 42%),
-      linear-gradient(180deg, #f3eee6 0%, #ebe4d8 100%);
+      linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg-deep) 100%);
   }
   .scroll-transform-host {
     max-width: var(--pc-invite-width);
     margin-left: auto;
     margin-right: auto;
-    background: #fdfbf7;
+    background: var(--c-paper);
     box-shadow:
-      0 0 0 1px rgba(168, 140, 107, 0.12),
+      0 0 0 1px rgba(var(--c-primary-rgb), 0.12),
       0 28px 80px rgba(95, 70, 39, 0.12);
   }
   .scroll-progress {