Playable frontend: FastAPI + canvas shop UI

web/play/app.js

@@ -30,12 +30,29 @@ createApp({
     const stockSlot = ref("");
     const toasts = ref([]);
     const floaters = ref([]);
+    const flavor = ref(
+      localStorage.getItem("town-shop-flavor") === "latte" ? "latte" : "mocha"
+    );
     let autoTimer = null;
     let autoInFlight = false;
     let toastSeq = 0;
     let floatSeq = 0;
     const imgCache = new Map();
 
+    function setFlavor(name) {
+      flavor.value = name === "latte" ? "latte" : "mocha";
+      document.documentElement.setAttribute("data-flavor", flavor.value);
+      localStorage.setItem("town-shop-flavor", flavor.value);
+      const meta = document.querySelector('meta[name="theme-color"]');
+      if (meta) meta.setAttribute("content", flavor.value === "latte" ? "#eff1f5" : "#1e1e2e");
+      nextTick(draw);
+    }
+
+    function ctp(name, fallback) {
+      const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+      return v || fallback;
+    }
+
     const reversedLog = computed(() => [...(view.value?.log || [])].reverse());
     const catalogOptions = computed(() => view.value?.catalog || []);
     const stockOptions = computed(() => {
@@ -304,18 +321,21 @@ createApp({
 
     function drawBubble(ctx, x, y, text) {
       const t = String(text).slice(0, 18);
-      ctx.font = "12px 'PingFang SC','Microsoft YaHei',sans-serif";
+      const peach = ctp("--ctp-peach", "#fab387");
+      const base = ctp("--ctp-mantle", "#181825");
+      const ink = ctp("--ctp-text", "#cdd6f4");
+      ctx.font = "12px 'JetBrains Mono','PingFang SC','Microsoft YaHei',sans-serif";
       const tw = ctx.measureText(t).width;
       const bw = tw + 16;
       const bh = 24;
       const bx = x - bw / 2;
       const by = y - bh - 10;
-      ctx.fillStyle = "rgba(255,253,249,0.96)";
-      ctx.strokeStyle = "rgba(196,137,102,0.75)";
+      ctx.fillStyle = base;
+      ctx.strokeStyle = peach;
       roundRect(ctx, bx, by, bw, bh, 10);
       ctx.fill();
       ctx.stroke();
-      ctx.fillStyle = "#3a2f2a";
+      ctx.fillStyle = ink;
       ctx.textAlign = "center";
       ctx.fillText(t, x, by + 16);
       ctx.textAlign = "left";
@@ -327,8 +347,17 @@ createApp({
       const ctx = el.getContext("2d");
       const w = el.width;
       const h = el.height;
+      const base = ctp("--ctp-base", "#1e1e2e");
+      const surface0 = ctp("--ctp-surface0", "#313244");
+      const surface1 = ctp("--ctp-surface1", "#45475a");
+      const text = ctp("--ctp-text", "#cdd6f4");
+      const subtext = ctp("--ctp-subtext0", "#a6adc8");
+      const peach = ctp("--ctp-peach", "#fab387");
+      const sky = ctp("--ctp-sky", "#89dceb");
+      const crust = ctp("--ctp-crust", "#11111b");
+
       ctx.clearRect(0, 0, w, h);
-      ctx.fillStyle = "rgba(250,244,236,0.9)";
+      ctx.fillStyle = base;
       ctx.fillRect(0, 0, w, h);
 
       const v = view.value;
@@ -342,12 +371,10 @@ createApp({
           const px = x * CELL;
           const py = y * CELL;
           const t = tags[`${x},${y}`] || [];
-          if (t.includes("wall") && t.includes("window")) ctx.fillStyle = "rgba(170,205,225,0.55)";
-          else if (t.includes("wall")) ctx.fillStyle = "rgba(90,70,60,0.32)";
-          else if (t.includes("is_entrance")) ctx.fillStyle = "rgba(196,137,102,0.35)";
-          else
-            ctx.fillStyle =
-              (x + y) % 2 === 0 ? "rgba(255,255,255,0.28)" : "rgba(230,210,190,0.22)";
+          if (t.includes("wall") && t.includes("window")) ctx.fillStyle = sky + "66";
+          else if (t.includes("wall")) ctx.fillStyle = surface1 + "cc";
+          else if (t.includes("is_entrance")) ctx.fillStyle = peach + "55";
+          else ctx.fillStyle = (x + y) % 2 === 0 ? surface0 + "aa" : surface1 + "66";
           ctx.fillRect(px, py, CELL, CELL);
         }
       }
@@ -367,8 +394,8 @@ createApp({
           roundRect(ctx, px + 6, py + 6, CELL - 12, CELL - 12, 6);
           ctx.fill();
         }
-        ctx.fillStyle = "rgba(40,30,25,0.85)";
-        ctx.font = "11px 'PingFang SC','Microsoft YaHei',sans-serif";
+        ctx.fillStyle = text;
+        ctx.font = "11px 'JetBrains Mono','PingFang SC','Microsoft YaHei',sans-serif";
         ctx.fillText(String(f.name || "").slice(0, 6), px + 4, py + CELL - 5);
       }
 
@@ -396,14 +423,14 @@ createApp({
           ctx.drawImage(im, px - 12, py + 2, 24, 24);
           ctx.restore();
         }
-        ctx.fillStyle = "#3a2f2a";
-        ctx.font = "bold 11px sans-serif";
+        ctx.fillStyle = text;
+        ctx.font = "bold 11px 'JetBrains Mono',sans-serif";
         ctx.fillText("×" + d.qty, px + 12, py + 18);
       }
 
       for (const [name, xy] of Object.entries(v.grid.markers || {})) {
-        ctx.fillStyle = "rgba(80,60,50,0.4)";
-        ctx.font = "10px 'PingFang SC','Microsoft YaHei',sans-serif";
+        ctx.fillStyle = subtext;
+        ctx.font = "10px 'JetBrains Mono','PingFang SC','Microsoft YaHei',sans-serif";
         ctx.fillText(markersZh[name] || name, xy[0] * CELL + 3, xy[1] * CELL + 12);
       }
 
@@ -434,11 +461,11 @@ createApp({
           ctx.drawImage(portrait, px - 15, py - 15, 30, 30);
           ctx.restore();
         }
-        ctx.fillStyle = "#2a2018";
-        ctx.font = "bold 12px 'PingFang SC','Microsoft YaHei',sans-serif";
+        ctx.fillStyle = text;
+        ctx.font = "bold 12px 'JetBrains Mono','PingFang SC','Microsoft YaHei',sans-serif";
         ctx.textAlign = "center";
         ctx.fillText(a.name || "", px, py + 32);
-        ctx.font = "11px 'PingFang SC','Microsoft YaHei',sans-serif";
+        ctx.font = "11px 'JetBrains Mono','PingFang SC','Microsoft YaHei',sans-serif";
         ctx.fillStyle = col;
         ctx.fillText(a.state_zh || "", px, py + 46);
         ctx.textAlign = "left";
@@ -449,6 +476,7 @@ createApp({
     watch(view, () => nextTick(draw), { deep: true });
 
     onMounted(async () => {
+      setFlavor(flavor.value);
       await newGame();
       setInterval(() => {
         if (view.value) draw();
@@ -472,6 +500,8 @@ createApp({
       bgStyle,
       toasts,
       floaters,
+      flavor,
+      setFlavor,
       isHere,
       newGame,
       openShop,

web/play/index.html

@@ -1,56 +1,76 @@
 <!doctype html>
-<html lang="zh-CN">
+<html lang="zh-CN" data-flavor="mocha">
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="color-scheme" content="dark light" />
+  <meta name="theme-color" content="#1e1e2e" />
   <title>小镇角落小店</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet" />
   <link rel="stylesheet" href="/play/styles.css" />
   <script src="https://unpkg.com/vue@3.5.13/dist/vue.global.prod.js"></script>
 </head>
 <body>
   <div id="app" v-cloak>
-    <header class="topbar">
+    <a class="skip-link" href="#main">跳到主内容</a>
+
+    <header class="topbar" role="banner">
       <div class="brand">
-        <div class="logo">🌷</div>
+        <div class="logo" aria-hidden="true">🌷</div>
         <div>
           <h1>小镇角落小店</h1>
           <p class="guide">{{ view?.guide || '正在布置小店…' }}</p>
         </div>
       </div>
-      <div class="phase-track" v-if="view">
+
+      <nav class="phase-track" v-if="view" aria-label="营业时辰">
         <span
           v-for="p in view.phases"
           :key="p.id"
           class="phase-pill"
           :class="{ on: p.active }"
+          :aria-current="p.active ? 'step' : null"
         >{{ p.label }}</span>
-      </div>
+      </nav>
+
       <div class="top-meta" v-if="view">
         <strong>{{ view.meta.day_label }}</strong>
         <span>{{ view.meta.phase_zh }}</span>
-        <span class="money-pill">¥ {{ view.wallet }}</span>
+        <span class="money-pill" aria-label="店内现金">¥ {{ view.wallet }}</span>
+        <div class="flavor-switch" role="group" aria-label="Catppuccin 主题">
+          <button
+            type="button"
+            :aria-pressed="flavor === 'mocha'"
+            @click="setFlavor('mocha')"
+          >Mocha</button>
+          <button
+            type="button"
+            :aria-pressed="flavor === 'latte'"
+            @click="setFlavor('latte')"
+          >Latte</button>
+        </div>
       </div>
     </header>
 
-    <main class="shell" v-if="view">
-      <section class="stage-card" :class="'light-' + view.atmosphere.light">
-        <div class="stage-bg" :style="bgStyle"></div>
-        <canvas ref="canvas" width="576" height="480"></canvas>
+    <main id="main" class="shell" v-if="view">
+      <section class="stage-card" :class="'light-' + view.atmosphere.light" aria-label="店铺舞台">
+        <div class="stage-bg" :style="bgStyle" aria-hidden="true"></div>
+        <canvas ref="canvas" width="576" height="480" role="img" aria-label="店铺俯视图"></canvas>
 
-        <!-- 浮动成交提示 -->
-        <div class="floaters">
+        <div class="floaters" aria-live="polite">
           <div v-for="f in floaters" :key="f.id" class="floater" :class="f.kind">{{ f.text }}</div>
         </div>
 
         <div class="mood-bar">
-          <span>💭</span>
+          <span aria-hidden="true">💭</span>
           <span>{{ view.atmosphere.mood_line || '店里还很安静。' }}</span>
           <span class="live" v-if="view.agents.length">店内 {{ view.agents.length }} 人</span>
           <span class="live dim" v-else-if="view.ui.can_tick">等待客人中…</span>
         </div>
 
-        <!-- 今日来客（离开也保留，避免「看不见人」） -->
-        <div class="guest-rail">
+        <div class="guest-rail" aria-label="今日来客">
           <div class="rail-title">今日来客</div>
           <div class="rail-body" v-if="(view.guests_today || []).length">
             <div
@@ -59,8 +79,8 @@
               :key="g.agent_id"
               :class="{ left: g.left, here: isHere(g.agent_id) }"
             >
-              <img v-if="g.portrait" :src="'/' + g.portrait" :alt="g.name" />
-              <div class="avatar-fallback" v-else>{{ (g.name || '?')[0] }}</div>
+              <img v-if="g.portrait" :src="'/' + g.portrait" :alt="g.name + ' 肖像'" />
+              <div class="avatar-fallback" v-else aria-hidden="true">{{ (g.name || '?')[0] }}</div>
               <div>
                 <b>{{ g.name }}</b>
                 <small>{{ g.kind_zh }} · {{ g.left ? '已离开' : g.state_zh }}</small>
@@ -73,16 +93,15 @@
         </div>
       </section>
 
-      <aside class="hud">
-        <!-- 主操作：按阶段只突出一个 -->
+      <aside class="hud" aria-label="经营面板">
         <div class="card hero-actions">
           <template v-if="view.meta.phase === 'PREP'">
             <h2>营业前 · 开张准备</h2>
             <p class="hint ok">现在可以进货、上架、调灯光。</p>
-            <button class="primary big" @click="openShop" :disabled="busy">🚪 开始营业</button>
+            <button class="primary big" @click="openShop" :disabled="busy">开始营业</button>
             <div class="btn-grid">
-              <button @click="quickPrep" :disabled="busy">一键备货</button>
-              <button class="ghost" @click="newGame" :disabled="busy">新开一局</button>
+              <button type="button" @click="quickPrep" :disabled="busy">一键备货</button>
+              <button type="button" class="ghost" @click="newGame" :disabled="busy">新开一局</button>
             </div>
           </template>
 
@@ -93,8 +112,8 @@
               <div><em>成交</em><b>{{ view.stats.sales }}</b></div>
               <div><em>营收</em><b>¥{{ view.stats.revenue }}</b></div>
             </div>
-            <button class="primary big" @click="sleep" :disabled="busy">🌙 入睡 · 下一天</button>
-            <button class="ghost" @click="newGame" :disabled="busy">新开一局</button>
+            <button class="primary big" @click="sleep" :disabled="busy">入睡 · 下一天</button>
+            <button type="button" class="ghost" @click="newGame" :disabled="busy">新开一局</button>
           </template>
 
           <template v-else>
@@ -106,7 +125,7 @@
             </div>
             <div class="btn-grid">
               <button type="button" class="stable" @click="togglePause">
-                {{ view.meta.paused ? '▶ 继续' : '⏸ 暂停' }}
+                {{ view.meta.paused ? '继续' : '暂停' }}
               </button>
               <button type="button" class="stable" @click="tickOnce" :disabled="view.meta.paused">
                 推进一步
@@ -115,8 +134,8 @@
               <button type="button" class="ghost stable" @click="newGame">新开一局</button>
             </div>
             <div class="speed-row">
-              <span>自动流逝</span>
-              <select v-model.number="speed" @change="setupAuto">
+              <label for="speed">自动流逝</label>
+              <select id="speed" v-model.number="speed" @change="setupAuto">
                 <option :value="0">关闭</option>
                 <option :value="350">正常</option>
                 <option :value="180">两倍速</option>
@@ -131,31 +150,31 @@
           <h2>进货与上架</h2>
           <p class="hint" :class="{ ok: view.ui.can_restock }">{{ view.ui.restock_hint }}</p>
           <div class="form-row">
-            <select v-model="restockId" :disabled="!view.ui.can_restock">
+            <select v-model="restockId" :disabled="!view.ui.can_restock" aria-label="进货商品">
               <option v-for="p in catalogOptions" :key="'r'+p.product_id" :value="p.product_id">
                 {{ p.name }}（¥{{ p.price }}）
               </option>
             </select>
-            <button @click="restock" :disabled="busy || !view.ui.can_restock">进货 +1</button>
+            <button type="button" @click="restock" :disabled="busy || !view.ui.can_restock">进货 +1</button>
           </div>
           <p class="hint" :class="{ ok: view.ui.can_stock_display }">{{ view.ui.stock_hint }}</p>
           <div class="form-row triple" v-if="view.ui.can_stock_display">
-            <select v-model="stockPid">
+            <select v-model="stockPid" aria-label="上架商品">
               <option v-for="p in stockOptions" :key="'s'+p.product_id" :value="p.product_id">
                 {{ p.name }} ×{{ p.qty ?? '—' }}
               </option>
             </select>
-            <select v-model="stockSlot">
+            <select v-model="stockSlot" aria-label="货架位">
               <option v-for="d in view.displays" :key="d.slot" :value="d.slot">
                 {{ d.name }} / {{ d.slot }}
               </option>
             </select>
-            <button @click="stock" :disabled="busy">上架</button>
+            <button type="button" @click="stock" :disabled="busy">上架</button>
           </div>
-          <div class="btn-grid three light-row">
-            <button :class="{ active: view.atmosphere.light==='warm' }" @click="setLight('warm')">暖光</button>
-            <button :class="{ active: view.atmosphere.light==='cool' }" @click="setLight('cool')">冷光</button>
-            <button :class="{ active: view.atmosphere.light==='off' }" @click="setLight('off')">关灯</button>
+          <div class="btn-grid three light-row" role="group" aria-label="灯光">
+            <button type="button" :class="{ active: view.atmosphere.light==='warm' }" @click="setLight('warm')">暖光</button>
+            <button type="button" :class="{ active: view.atmosphere.light==='cool' }" @click="setLight('cool')">冷光</button>
+            <button type="button" :class="{ active: view.atmosphere.light==='off' }" @click="setLight('off')">关灯</button>
           </div>
         </div>
 
@@ -163,31 +182,32 @@
           <h2>氛围</h2>
           <div class="atm" v-for="d in view.atmosphere.dims" :key="d.key">
             <span>{{ d.label }}</span>
-            <div class="bar"><i :style="{ width: d.pct + '%' }"></i></div>
+            <div class="bar" role="progressbar" :aria-valuenow="d.pct" aria-valuemin="0" aria-valuemax="100" :aria-label="d.label">
+              <i :style="{ width: d.pct + '%' }"></i>
+            </div>
             <span class="pct">{{ d.pct }}</span>
           </div>
         </div>
 
         <div class="card">
           <h2>店内见闻</h2>
-          <ul class="log">
+          <ul class="log" aria-live="polite">
             <li v-for="(line, i) in reversedLog" :key="i">{{ line }}</li>
           </ul>
         </div>
       </aside>
     </main>
 
-    <div class="loading" v-else>
-      <div class="spinner"></div>
+    <div class="loading" v-else role="status">
+      <div class="spinner" aria-hidden="true"></div>
       <p>{{ error || '正在布置小店…' }}</p>
-      <button v-if="error" class="primary" @click="newGame">重试</button>
+      <button v-if="error" type="button" class="primary" @click="newGame">重试</button>
     </div>
 
-    <!-- 夜记 -->
-    <div class="modal" v-if="showNight && view?.night" @click.self="showNight=false">
+    <div class="modal" v-if="showNight && view?.night" @click.self="showNight=false" role="dialog" aria-modal="true" aria-labelledby="night-title">
       <div class="modal-card">
         <div class="modal-kicker">夜记</div>
-        <h2>{{ view.meta.day_label }} · 打烊了</h2>
+        <h2 id="night-title">{{ view.meta.day_label }} · 打烊了</h2>
         <p class="lead">{{ view.night.mood }}</p>
         <p class="diary">「{{ view.night.diary }}」</p>
         <div class="night-stats">
@@ -196,31 +216,49 @@
           <div><em>营收</em><b>¥{{ view.night.revenue }}</b></div>
         </div>
         <p class="vibe" v-if="view.night.top_dims?.length">今日气息：{{ view.night.top_dims.join(' · ') }}</p>
-        <button class="primary wide" @click="showNight=false">收下这份夜晚</button>
+        <button type="button" class="primary wide" @click="showNight=false">收下这份夜晚</button>
       </div>
     </div>
 
-    <!-- 首次引导 -->
-    <div class="modal" v-if="showHelp" @click.self="showHelp=false">
+    <div class="modal" v-if="showHelp" @click.self="showHelp=false" role="dialog" aria-modal="true" aria-labelledby="help-title">
       <div class="modal-card">
-        <div class="modal-kicker">怎么玩</div>
-        <h2>三步经营你的花店</h2>
+        <div class="modal-kicker">怎么玩 · Catppuccin</div>
+        <h2 id="help-title">三步经营你的花店</h2>
         <ol class="help-list">
           <li><b>营业前</b>：进货、上架，然后点「开始营业」</li>
           <li><b>营业中</b>：自动流逝，看客人进店、闲逛、结账</li>
           <li><b>夜晚</b>：读夜记，点「入睡」进入下一天</li>
         </ol>
-        <p class="hint ok">演示已加速：不会空等很久，客人会更常出现。</p>
-        <button class="primary wide" @click="showHelp=false">我知道了，开始</button>
+        <p class="hint ok">界面使用 Catppuccin 配色；右上角可在 Mocha / Latte 间切换。</p>
+        <button type="button" class="primary wide" @click="showHelp=false">我知道了，开始</button>
       </div>
     </div>
 
-    <div class="toast-stack">
+    <div class="toast-stack" aria-live="polite" aria-relevant="additions">
       <div v-for="t in toasts" :key="t.id" class="toast" :class="t.kind">{{ t.text }}</div>
     </div>
 
-    <footer class="foot">毕业设计演示 · Vue 3 前端 + Python 模拟</footer>
+    <footer class="foot">
+      毕业设计演示 · Vue 3 ·
+      <span>Catppuccin {{ flavor === 'mocha' ? 'Mocha' : 'Latte' }}</span>
+    </footer>
   </div>
+  <style>
+    .skip-link {
+      position: absolute;
+      left: -9999px;
+      top: 0;
+      z-index: 100;
+      padding: 0.5rem 0.75rem;
+      background: var(--ctp-mauve, #cba6f7);
+      color: var(--ctp-crust, #11111b);
+      border-radius: 0 0 8px 0;
+      font-weight: 700;
+    }
+    .skip-link:focus {
+      left: 0;
+    }
+  </style>
   <script src="/play/app.js"></script>
 </body>
 </html>

web/play/styles.css

@@ -1,290 +1,484 @@
-:root {
-  --bg: #f3ebe2;
-  --ink: #3a2f2a;
-  --muted: #6d5c53;
-  --card: #fffdf9;
-  --line: #e4d5c6;
-  --accent: #c48966;
-  --accent2: #a36a4c;
-  --green: #5d8f6c;
-  --shadow: 0 14px 36px rgba(58, 40, 28, 0.08);
-  --radius: 18px;
-  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
+/* =========================================================
+   小镇角落小店 · Catppuccin Userstyles + UX tokens
+   Flavors: Mocha (default, cozy dark) / Latte (light)
+   Spacing: 4/8/12/16/24/32 · Radius: 8/12/16/999
+   ========================================================= */
+
+/* --- Catppuccin Mocha (default) --- */
+:root,
+[data-flavor="mocha"] {
+  --ctp-rosewater: #f5e0dc;
+  --ctp-flamingo: #f2cdcd;
+  --ctp-pink: #f5c2e7;
+  --ctp-mauve: #cba6f7;
+  --ctp-red: #f38ba8;
+  --ctp-maroon: #eba0ac;
+  --ctp-peach: #fab387;
+  --ctp-yellow: #f9e2af;
+  --ctp-green: #a6e3a1;
+  --ctp-teal: #94e2d5;
+  --ctp-sky: #89dceb;
+  --ctp-sapphire: #74c7ec;
+  --ctp-blue: #89b4fa;
+  --ctp-lavender: #b4befe;
+  --ctp-text: #cdd6f4;
+  --ctp-subtext1: #bac2de;
+  --ctp-subtext0: #a6adc8;
+  --ctp-overlay2: #9399b2;
+  --ctp-overlay1: #7f849c;
+  --ctp-overlay0: #6c7086;
+  --ctp-surface2: #585b70;
+  --ctp-surface1: #45475a;
+  --ctp-surface0: #313244;
+  --ctp-base: #1e1e2e;
+  --ctp-mantle: #181825;
+  --ctp-crust: #11111b;
+
+  --bg: var(--ctp-base);
+  --bg-deep: var(--ctp-crust);
+  --bg-elevated: var(--ctp-mantle);
+  --surface: var(--ctp-surface0);
+  --surface-2: var(--ctp-surface1);
+  --border: color-mix(in srgb, var(--ctp-overlay0) 45%, transparent);
+  --border-strong: var(--ctp-surface2);
+  --text: var(--ctp-text);
+  --text-muted: var(--ctp-subtext0);
+  --text-faint: var(--ctp-overlay1);
+  --accent: var(--ctp-peach);
+  --accent-2: var(--ctp-pink);
+  --accent-soft: color-mix(in srgb, var(--ctp-peach) 18%, var(--ctp-surface0));
+  --on-accent: #11111b;
+  --ok: var(--ctp-green);
+  --warn: var(--ctp-yellow);
+  --danger: var(--ctp-red);
+  --info: var(--ctp-blue);
+  --focus: var(--ctp-lavender);
+  --shadow: 0 12px 40px color-mix(in srgb, var(--ctp-crust) 65%, transparent);
+  --shadow-sm: 0 4px 14px color-mix(in srgb, var(--ctp-crust) 45%, transparent);
+  --glow: 0 0 0 3px color-mix(in srgb, var(--ctp-peach) 35%, transparent);
+  --radius-sm: 8px;
+  --radius: 14px;
+  --radius-lg: 18px;
+  --radius-pill: 999px;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 24px;
+  --space-6: 32px;
+  --font: "JetBrains Mono", "SF Mono", "Cascadia Code", "PingFang SC",
+    "Microsoft YaHei", "Noto Sans SC", ui-sans-serif, system-ui, sans-serif;
+  --font-ui: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
     "Noto Sans SC", system-ui, sans-serif;
+  --stage-floor-a: color-mix(in srgb, var(--ctp-surface0) 80%, var(--ctp-base));
+  --stage-floor-b: color-mix(in srgb, var(--ctp-surface1) 55%, var(--ctp-base));
 }
 
-* { box-sizing: border-box; }
+/* --- Catppuccin Latte (light) --- */
+[data-flavor="latte"] {
+  --ctp-rosewater: #dc8a78;
+  --ctp-flamingo: #dd7878;
+  --ctp-pink: #ea76cb;
+  --ctp-mauve: #8839ef;
+  --ctp-red: #d20f39;
+  --ctp-maroon: #e64553;
+  --ctp-peach: #fe640b;
+  --ctp-yellow: #df8e1d;
+  --ctp-green: #40a02b;
+  --ctp-teal: #179299;
+  --ctp-sky: #04a5e5;
+  --ctp-sapphire: #209fb5;
+  --ctp-blue: #1e66f5;
+  --ctp-lavender: #7287fd;
+  --ctp-text: #4c4f69;
+  --ctp-subtext1: #5c5f77;
+  --ctp-subtext0: #6c6f85;
+  --ctp-overlay2: #7c7f93;
+  --ctp-overlay1: #8c8fa1;
+  --ctp-overlay0: #9ca0b0;
+  --ctp-surface2: #acb0be;
+  --ctp-surface1: #bcc0cc;
+  --ctp-surface0: #ccd0da;
+  --ctp-base: #eff1f5;
+  --ctp-mantle: #e6e9ef;
+  --ctp-crust: #dce0e8;
+
+  --bg: var(--ctp-base);
+  --bg-deep: var(--ctp-crust);
+  --bg-elevated: #ffffff;
+  --surface: #ffffff;
+  --surface-2: var(--ctp-mantle);
+  --border: color-mix(in srgb, var(--ctp-overlay0) 55%, transparent);
+  --border-strong: var(--ctp-surface1);
+  --text: var(--ctp-text);
+  --text-muted: var(--ctp-subtext0);
+  --text-faint: var(--ctp-overlay1);
+  --accent: var(--ctp-peach);
+  --accent-2: var(--ctp-mauve);
+  --accent-soft: color-mix(in srgb, var(--ctp-peach) 14%, #fff);
+  --on-accent: #ffffff;
+  --ok: var(--ctp-green);
+  --warn: var(--ctp-yellow);
+  --danger: var(--ctp-red);
+  --info: var(--ctp-blue);
+  --focus: var(--ctp-lavender);
+  --shadow: 0 12px 32px color-mix(in srgb, var(--ctp-overlay0) 28%, transparent);
+  --shadow-sm: 0 4px 12px color-mix(in srgb, var(--ctp-overlay0) 18%, transparent);
+  --glow: 0 0 0 3px color-mix(in srgb, var(--ctp-mauve) 30%, transparent);
+  --stage-floor-a: #f8f9fc;
+  --stage-floor-b: #eef0f6;
+}
+
+/* --- Reset / base --- */
+*,
+*::before,
+*::after { box-sizing: border-box; }
+
 html, body {
   margin: 0;
   min-height: 100%;
-  color: var(--ink);
+  color: var(--text);
+  font-family: var(--font-ui);
+  font-size: 15px;
+  line-height: 1.5;
   background:
-    radial-gradient(circle at 12% -10%, #f8e6d2 0%, transparent 42%),
-    radial-gradient(circle at 90% 0%, #e7f0e5 0%, transparent 34%),
+    radial-gradient(ellipse 80% 50% at 10% -10%, color-mix(in srgb, var(--ctp-mauve) 18%, transparent), transparent 55%),
+    radial-gradient(ellipse 60% 40% at 90% 0%, color-mix(in srgb, var(--ctp-peach) 14%, transparent), transparent 50%),
+    radial-gradient(ellipse 50% 30% at 50% 100%, color-mix(in srgb, var(--ctp-pink) 10%, transparent), transparent 45%),
     var(--bg);
+  background-attachment: fixed;
+  -webkit-font-smoothing: antialiased;
+}
+
+[v-cloak] { display: none !important; }
+
+:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+
+::selection {
+  background: color-mix(in srgb, var(--ctp-mauve) 40%, transparent);
+  color: var(--text);
 }
-[v-cloak] { display: none; }
 
 #app {
-  max-width: 1220px;
+  max-width: 1240px;
   margin: 0 auto;
-  padding: 1rem 1rem 2rem;
+  padding: var(--space-4) var(--space-4) var(--space-6);
 }
 
+/* --- Top bar --- */
 .topbar {
-  display: flex;
-  flex-wrap: wrap;
-  gap: .8rem 1rem;
+  display: grid;
+  grid-template-columns: minmax(200px, 1.2fr) minmax(0, 1.4fr) auto;
+  gap: var(--space-3) var(--space-4);
   align-items: center;
-  justify-content: space-between;
-  margin-bottom: 1rem;
+  margin-bottom: var(--space-5);
+  padding: var(--space-3) var(--space-4);
+  background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  backdrop-filter: blur(12px);
 }
+
 .brand {
   display: flex;
-  gap: .7rem;
+  gap: var(--space-3);
   align-items: center;
+  min-width: 0;
 }
+
 .logo {
   width: 48px;
   height: 48px;
-  border-radius: 14px;
-  background: linear-gradient(145deg, #f0d2b8, #d8a07d);
+  flex-shrink: 0;
+  border-radius: var(--radius);
+  background: linear-gradient(145deg, var(--ctp-peach), var(--ctp-pink));
   display: grid;
   place-items: center;
-  font-size: 1.4rem;
-  box-shadow: var(--shadow);
+  font-size: 1.35rem;
+  box-shadow: var(--shadow-sm), inset 0 1px 0 color-mix(in srgb, #fff 25%, transparent);
 }
+
 .brand h1 {
   margin: 0;
-  font-size: 1.35rem;
-  letter-spacing: .02em;
+  font-size: 1.2rem;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
+
+.brand .guide,
 .brand p {
-  margin: .15rem 0 0;
-  color: var(--muted);
-  font-size: .88rem;
+  margin: 2px 0 0;
+  color: var(--text-muted);
+  font-size: 0.82rem;
+  line-height: 1.35;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 
 .phase-track {
   display: flex;
   flex-wrap: wrap;
-  gap: .35rem;
+  gap: 6px;
+  justify-content: center;
 }
+
 .phase-pill {
-  font-size: .75rem;
-  padding: .3rem .65rem;
-  border-radius: 999px;
-  border: 1px solid var(--line);
-  background: #fff;
-  color: var(--muted);
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  padding: 0.28rem 0.65rem;
+  border-radius: var(--radius-pill);
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--text-faint);
+  transition: color 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s;
 }
+
 .phase-pill.on {
-  color: #fff;
+  color: var(--ctp-crust);
   border-color: transparent;
-  background: linear-gradient(135deg, #d8a78a, var(--accent));
-  box-shadow: 0 4px 12px rgba(196, 137, 102, .35);
+  background: linear-gradient(135deg, var(--ctp-peach), var(--ctp-pink));
+  box-shadow: 0 4px 14px color-mix(in srgb, var(--ctp-peach) 35%, transparent);
 }
+
 .top-meta {
   display: flex;
   flex-wrap: wrap;
-  gap: .45rem .7rem;
+  gap: 0.4rem 0.65rem;
   align-items: center;
-  color: var(--muted);
-  font-size: .9rem;
+  justify-content: flex-end;
+  color: var(--text-muted);
+  font-size: 0.88rem;
+}
+
+.top-meta strong { color: var(--text); font-weight: 700; }
+
+.money-pill {
+  background: var(--accent-soft);
+  color: var(--accent);
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  padding: 0.22rem 0.65rem;
+  border-radius: var(--radius-pill);
+  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
+}
+
+.flavor-switch {
+  display: inline-flex;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-pill);
+  overflow: hidden;
+  background: var(--surface);
+}
+
+.flavor-switch button {
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--text-muted);
+  padding: 0.28rem 0.7rem;
+  font-size: 0.75rem;
+  font-weight: 600;
 }
-.top-meta strong { color: var(--ink); }
-.tag-pause {
-  background: #fff4df;
-  color: #9a6a18;
-  border-radius: 999px;
-  padding: .15rem .55rem;
-  font-size: .78rem;
+
+.flavor-switch button[aria-pressed="true"] {
+  background: color-mix(in srgb, var(--ctp-mauve) 28%, var(--surface));
+  color: var(--text);
 }
 
+/* --- Layout --- */
 .shell {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 340px;
-  gap: 1rem;
+  gap: var(--space-4);
   align-items: start;
 }
 
+/* --- Stage --- */
 .stage-card {
   position: relative;
-  background: var(--card);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
   overflow: hidden;
   box-shadow: var(--shadow);
 }
+
 .stage-bg {
   position: absolute;
   inset: 0;
   background-size: cover;
   background-position: center;
-  opacity: .32;
+  opacity: 0.22;
   pointer-events: none;
+  filter: saturate(1.05);
 }
-.stage-card.light-warm .stage-bg { filter: sepia(.18) saturate(1.12); }
-.stage-card.light-cool .stage-bg { filter: hue-rotate(18deg) brightness(1.05) saturate(.92); }
-.stage-card.light-off .stage-bg { filter: brightness(.42) saturate(.55); }
+
+.stage-card.light-warm .stage-bg { filter: sepia(0.2) saturate(1.15); opacity: 0.28; }
+.stage-card.light-cool .stage-bg { filter: hue-rotate(20deg) brightness(1.05); opacity: 0.26; }
+.stage-card.light-off .stage-bg { filter: brightness(0.4) saturate(0.5); opacity: 0.18; }
+
 canvas {
   position: relative;
   display: block;
   width: 100%;
   height: auto;
+  background: linear-gradient(180deg, var(--stage-floor-a), var(--stage-floor-b));
 }
+
 .mood-bar {
   position: relative;
   display: flex;
-  gap: .5rem;
-  align-items: center;
-  padding: .7rem 1rem;
-  border-top: 1px solid var(--line);
-  background: rgba(255, 253, 249, .92);
-  color: var(--muted);
-}
-.agent-strip {
-  display: flex;
-  gap: .55rem;
-  overflow-x: auto;
-  padding: .65rem .85rem .85rem;
-  border-top: 1px solid var(--line);
-  background: #fbf6f0;
-}
-.agent-strip.empty {
-  color: var(--muted);
-  font-size: .9rem;
-}
-.agent-chip {
-  display: flex;
-  gap: .45rem;
+  gap: var(--space-2);
   align-items: center;
-  min-width: 160px;
-  background: #fff;
-  border: 1px solid var(--line);
-  border-radius: 12px;
-  padding: .4rem .55rem;
+  padding: 0.7rem 1rem;
+  border-top: 1px solid var(--border);
+  background: color-mix(in srgb, var(--bg-elevated) 92%, var(--surface));
+  color: var(--text-muted);
+  font-size: 0.92rem;
 }
-.agent-chip img {
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  object-fit: cover;
-}
-.agent-chip b { display: block; font-size: .88rem; }
-.agent-chip small { color: var(--muted); font-size: .74rem; }
 
-.hud { display: flex; flex-direction: column; gap: .75rem; }
-.card {
-  background: var(--card);
-  border: 1px solid var(--line);
-  border-radius: 16px;
-  padding: .9rem 1rem;
-  box-shadow: var(--shadow);
-}
-.card h2 {
-  margin: 0 0 .65rem;
-  font-size: .82rem;
-  letter-spacing: .08em;
-  color: var(--muted);
-  font-weight: 700;
-}
-.money-pill {
-  background: #f3e2d2;
-  color: var(--accent2);
-  font-weight: 700;
-  padding: .2rem .55rem;
-  border-radius: 999px;
-}
-.guide { max-width: 28rem; }
-button.big {
-  width: 100%;
-  padding: .85rem 1rem;
-  font-size: 1.05rem;
-  margin: .35rem 0 .55rem;
-}
-.hero-actions .hint { margin-bottom: .55rem; }
-.form-row.triple {
-  grid-template-columns: 1fr 1fr auto;
-}
-.light-row { margin-top: .55rem; }
 .live {
   margin-left: auto;
-  font-size: .8rem;
-  color: var(--accent2);
-  font-weight: 650;
+  font-size: 0.78rem;
+  font-weight: 700;
+  color: var(--ctp-teal);
+  background: color-mix(in srgb, var(--ctp-teal) 14%, transparent);
+  padding: 0.15rem 0.55rem;
+  border-radius: var(--radius-pill);
 }
-.live.dim { color: var(--muted); font-weight: 500; }
 
+.live.dim {
+  color: var(--text-faint);
+  background: var(--surface);
+  font-weight: 500;
+}
+
+/* Guest rail */
 .guest-rail {
-  border-top: 1px solid var(--line);
-  background: #fbf6f0;
-  padding: .55rem .75rem .7rem;
+  border-top: 1px solid var(--border);
+  background: var(--bg-deep);
+  padding: 0.65rem 0.85rem 0.8rem;
 }
+
 .rail-title {
-  font-size: .75rem;
-  letter-spacing: .08em;
-  color: var(--muted);
+  font-size: 0.72rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-faint);
   font-weight: 700;
-  margin-bottom: .4rem;
+  margin-bottom: 0.45rem;
 }
+
 .rail-body {
   display: flex;
-  gap: .5rem;
+  gap: 0.5rem;
   overflow-x: auto;
-  padding-bottom: .15rem;
+  padding-bottom: 2px;
+  scrollbar-width: thin;
+  scrollbar-color: var(--surface-2) transparent;
 }
+
 .guest-card {
   display: flex;
-  gap: .4rem;
+  gap: 0.45rem;
   align-items: center;
-  min-width: 148px;
-  background: #fff;
-  border: 1px solid var(--line);
-  border-radius: 12px;
-  padding: .4rem .5rem;
-}
-.guest-card.here { border-color: var(--accent); box-shadow: 0 0 0 2px #f0d8c6; }
-.guest-card.left { opacity: .55; }
-.guest-card img, .avatar-fallback {
+  min-width: 152px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 0.4rem 0.55rem;
+  transition: border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
+}
+
+.guest-card.here {
+  border-color: color-mix(in srgb, var(--ctp-peach) 55%, var(--border));
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ctp-peach) 22%, transparent);
+}
+
+.guest-card.left { opacity: 0.5; }
+
+.guest-card img,
+.avatar-fallback {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   object-fit: cover;
+  flex-shrink: 0;
 }
+
 .avatar-fallback {
   display: grid;
   place-items: center;
-  background: #e8d5c4;
+  background: linear-gradient(145deg, var(--ctp-mauve), var(--ctp-blue));
+  color: var(--ctp-crust);
   font-weight: 700;
+  font-size: 0.9rem;
+}
+
+.guest-card b {
+  display: block;
+  font-size: 0.86rem;
+  color: var(--text);
 }
-.guest-card b { display: block; font-size: .86rem; }
-.guest-card small { color: var(--muted); font-size: .72rem; }
-.rail-empty { color: var(--muted); font-size: .88rem; }
 
+.guest-card small {
+  color: var(--text-muted);
+  font-size: 0.72rem;
+}
+
+.rail-empty {
+  color: var(--text-faint);
+  font-size: 0.88rem;
+  padding: 0.35rem 0;
+}
+
+/* Floaters / toasts */
 .floaters {
   pointer-events: none;
   position: absolute;
   left: 50%;
-  top: 18%;
+  top: 16%;
   transform: translateX(-50%);
   z-index: 5;
   display: flex;
   flex-direction: column;
-  gap: .35rem;
+  gap: 0.35rem;
   align-items: center;
 }
+
 .floater {
-  background: rgba(255,253,249,.95);
-  border: 1px solid var(--line);
-  border-radius: 999px;
-  padding: .35rem .8rem;
+  background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-pill);
+  padding: 0.35rem 0.85rem;
   font-weight: 700;
+  color: var(--text);
   animation: rise 1.5s ease-out forwards;
-  box-shadow: var(--shadow);
+  box-shadow: var(--shadow-sm);
+  backdrop-filter: blur(8px);
 }
-.floater.sale { color: var(--green); border-color: #b7d4be; }
-.floater.enter { color: var(--accent2); }
+
+.floater.sale {
+  color: var(--ok);
+  border-color: color-mix(in srgb, var(--ok) 45%, var(--border));
+}
+
+.floater.enter {
+  color: var(--ctp-peach);
+  border-color: color-mix(in srgb, var(--ctp-peach) 40%, var(--border));
+}
+
 @keyframes rise {
   from { opacity: 0; transform: translateY(12px); }
   20% { opacity: 1; }
@@ -293,279 +487,416 @@ button.big {
 
 .toast-stack {
   position: fixed;
-  right: 1rem;
-  bottom: 1rem;
+  right: var(--space-4);
+  bottom: var(--space-4);
   z-index: 40;
   display: flex;
   flex-direction: column;
-  gap: .4rem;
+  gap: 0.4rem;
   max-width: min(320px, 92vw);
 }
+
 .toast {
-  background: #fffdf9;
-  border: 1px solid var(--line);
-  border-radius: 12px;
-  padding: .65rem .8rem;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--ctp-lavender);
+  border-radius: var(--radius);
+  padding: 0.7rem 0.85rem;
   box-shadow: var(--shadow);
-  animation: slidein .25s ease-out;
-  font-size: .9rem;
+  animation: slidein 0.22s ease-out;
+  font-size: 0.9rem;
+  color: var(--text);
 }
-.toast.sale { border-color: #b7d4be; }
-.toast.enter { border-color: #e0b08c; }
-.toast.err { border-color: #e0a0a0; color: #8a3030; }
+
+.toast.sale { border-left-color: var(--ok); }
+.toast.enter { border-left-color: var(--ctp-peach); }
+.toast.err { border-left-color: var(--danger); color: var(--danger); }
+.toast.phase { border-left-color: var(--ctp-mauve); }
+
 @keyframes slidein {
   from { opacity: 0; transform: translateY(8px); }
   to { opacity: 1; transform: none; }
 }
-.help-list {
-  margin: .4rem 0 1rem;
-  padding-left: 1.2rem;
-  color: var(--muted);
-  line-height: 1.7;
-}
-.help-list b { color: var(--ink); }
 
-.money-row {
+/* --- HUD cards --- */
+.hud {
   display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  margin-bottom: .55rem;
+  flex-direction: column;
+  gap: var(--space-3);
 }
-.money-row span { color: var(--muted); }
-.money-row strong {
-  font-size: 1.85rem;
-  letter-spacing: -.02em;
-  color: var(--accent2);
+
+.card {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: var(--space-4);
+  box-shadow: var(--shadow-sm);
+}
+
+.card h2 {
+  margin: 0 0 var(--space-3);
+  font-size: 0.72rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  font-weight: 700;
 }
+
 .stat-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: .4rem;
+  gap: var(--space-2);
+  margin-bottom: var(--space-3);
 }
+
 .stat-grid div {
-  background: #f7f0e8;
-  border-radius: 10px;
-  padding: .45rem .4rem;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 0.5rem 0.35rem;
   text-align: center;
 }
+
 .stat-grid em {
   display: block;
   font-style: normal;
-  color: var(--muted);
-  font-size: .72rem;
+  color: var(--text-faint);
+  font-size: 0.7rem;
+  margin-bottom: 2px;
 }
-.stat-grid b { font-size: 1rem; }
 
+.stat-grid b {
+  font-size: 1.05rem;
+  font-variant-numeric: tabular-nums;
+  color: var(--text);
+}
+
+/* Atmosphere bars */
 .atm {
   display: grid;
   grid-template-columns: 48px 1fr 34px;
-  gap: .4rem;
+  gap: 0.4rem;
   align-items: center;
-  font-size: .8rem;
-  margin-bottom: .35rem;
+  font-size: 0.8rem;
+  margin-bottom: 0.4rem;
+  color: var(--text-muted);
 }
+
 .bar {
   height: 8px;
-  background: #efe4d8;
-  border-radius: 99px;
+  background: var(--surface);
+  border-radius: var(--radius-pill);
   overflow: hidden;
+  border: 1px solid var(--border);
 }
+
 .bar > i {
   display: block;
   height: 100%;
-  background: linear-gradient(90deg, #e2b28f, var(--accent2));
-  border-radius: 99px;
+  background: linear-gradient(90deg, var(--ctp-mauve), var(--ctp-peach));
+  border-radius: var(--radius-pill);
+  transition: width 0.35s ease;
+}
+
+.pct {
+  color: var(--text-faint);
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  font-size: 0.75rem;
 }
-.pct { color: var(--muted); text-align: right; }
 
+/* Buttons & forms */
 .btn-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: .45rem;
+  gap: 0.45rem;
 }
+
 .btn-grid.three { grid-template-columns: repeat(3, 1fr); }
-button, select {
+
+button,
+select {
   font: inherit;
-  border-radius: 999px;
-  border: 1px solid var(--line);
-  background: #fff;
-  color: var(--ink);
-  padding: .48rem .7rem;
+  border-radius: var(--radius-pill);
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--text);
+  padding: 0.5rem 0.85rem;
   cursor: pointer;
+  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s, opacity 0.12s;
+}
+
+button:hover:not(:disabled) {
+  border-color: var(--border-strong);
+  background: var(--surface-2);
 }
-button:hover:not(:disabled) { box-shadow: 0 5px 14px rgba(0,0,0,.08); }
-button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
-/* 营业中主按钮：不跟自动 tick 的 busy 绑在一起，避免视觉狂闪 */
-button.stable {
-  transition: none;
+
+button:active:not(:disabled) {
+  transform: translateY(1px);
 }
-button.stable:active {
-  transform: none;
+
+button:disabled {
+  opacity: 0.42;
+  cursor: not-allowed;
 }
+
 button.primary {
-  background: linear-gradient(135deg, #d8a78a, var(--accent));
+  background: linear-gradient(135deg, var(--ctp-peach), var(--ctp-pink));
   border-color: transparent;
-  color: #fff;
-  font-weight: 650;
+  color: var(--on-accent);
+  font-weight: 700;
+  box-shadow: 0 6px 18px color-mix(in srgb, var(--ctp-peach) 30%, transparent);
 }
-button.ghost { background: #f6efe7; }
+
+button.primary:hover:not(:disabled) {
+  filter: brightness(1.05);
+  background: linear-gradient(135deg, var(--ctp-peach), var(--ctp-pink));
+}
+
+button.ghost {
+  background: transparent;
+  border-color: var(--border);
+  color: var(--text-muted);
+}
+
+button.ghost:hover:not(:disabled) {
+  background: var(--surface);
+  color: var(--text);
+}
+
 button.active {
-  border-color: var(--accent);
-  background: #f8e8db;
-  color: var(--accent2);
+  border-color: color-mix(in srgb, var(--ctp-mauve) 55%, var(--border));
+  background: color-mix(in srgb, var(--ctp-mauve) 22%, var(--surface));
+  color: var(--ctp-lavender);
   font-weight: 650;
 }
-button.wide { width: 100%; }
+
+button.big {
+  width: 100%;
+  padding: 0.9rem 1rem;
+  font-size: 1.05rem;
+  margin: 0.2rem 0 0.55rem;
+  border-radius: var(--radius);
+}
+
+button.wide { width: 100%; border-radius: var(--radius); }
+button.stable { transition: background 0.12s, border-color 0.12s; }
+button.stable:active { transform: none; }
+
+select {
+  min-width: 0;
+  width: 100%;
+  appearance: none;
+  background-image: linear-gradient(45deg, transparent 50%, var(--text-faint) 50%),
+    linear-gradient(135deg, var(--text-faint) 50%, transparent 50%);
+  background-position: calc(100% - 16px) calc(50% - 2px), calc(100% - 11px) calc(50% - 2px);
+  background-size: 5px 5px, 5px 5px;
+  background-repeat: no-repeat;
+  padding-right: 1.6rem;
+}
+
 .speed-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: .6rem;
-  margin-top: .65rem;
-  color: var(--muted);
-  font-size: .88rem;
-}
-.hint {
-  margin: 0 0 .45rem;
-  font-size: .78rem;
-  color: #9a6a18;
-  background: #fff6e8;
-  border-radius: 8px;
-  padding: .35rem .55rem;
-  line-height: 1.4;
-}
-.hint.ok {
-  color: var(--green);
-  background: #eef6f0;
+  gap: 0.6rem;
+  margin-top: 0.65rem;
+  color: var(--text-muted);
+  font-size: 0.88rem;
 }
+
+.speed-row select { width: auto; min-width: 7.5rem; }
+
 .form-row {
   display: grid;
   grid-template-columns: 1fr auto;
-  gap: .4rem;
-  margin-bottom: .45rem;
+  gap: 0.4rem;
+  margin-bottom: 0.45rem;
 }
-.form-row:has(select + select) {
+
+.form-row.triple {
   grid-template-columns: 1fr 1fr auto;
 }
-select { min-width: 0; width: 100%; }
 
-.shelf-list {
-  display: flex;
-  flex-direction: column;
-  gap: .4rem;
-  margin-top: .35rem;
-  max-height: 150px;
-  overflow: auto;
+.hint {
+  margin: 0 0 0.5rem;
+  font-size: 0.78rem;
+  color: var(--warn);
+  background: color-mix(in srgb, var(--warn) 12%, var(--surface));
+  border: 1px solid color-mix(in srgb, var(--warn) 28%, var(--border));
+  border-radius: var(--radius-sm);
+  padding: 0.4rem 0.6rem;
+  line-height: 1.4;
 }
-.shelf {
-  display: flex;
-  gap: .5rem;
-  align-items: center;
-  background: #f8f1e9;
-  border-radius: 10px;
-  padding: .35rem .45rem;
-}
-.shelf img {
-  width: 34px;
-  height: 34px;
-  border-radius: 8px;
-  object-fit: cover;
+
+.hint.ok {
+  color: var(--ok);
+  background: color-mix(in srgb, var(--ok) 12%, var(--surface));
+  border-color: color-mix(in srgb, var(--ok) 28%, var(--border));
 }
-.shelf b { display: block; font-size: .84rem; }
-.shelf small { color: var(--muted); font-size: .74rem; }
 
+.light-row { margin-top: 0.55rem; }
+
+.hero-actions .hint { margin-bottom: 0.55rem; }
+
+/* Log */
 .log {
   list-style: none;
   margin: 0;
   padding: 0;
   max-height: 180px;
   overflow: auto;
-  font-size: .84rem;
-  color: var(--muted);
+  font-size: 0.84rem;
+  color: var(--text-muted);
+  scrollbar-width: thin;
+  scrollbar-color: var(--surface-2) transparent;
 }
+
 .log li {
-  padding: .35rem 0;
-  border-bottom: 1px dashed #eadfdf;
+  padding: 0.4rem 0;
+  border-bottom: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
 }
-.log li:first-child { color: var(--ink); font-weight: 550; }
 
+.log li:first-child {
+  color: var(--text);
+  font-weight: 600;
+}
+
+/* Loading */
 .loading {
   min-height: 50vh;
   display: grid;
   place-items: center;
-  gap: .6rem;
-  color: var(--muted);
+  gap: 0.7rem;
+  color: var(--text-muted);
+  text-align: center;
 }
+
 .spinner {
-  width: 36px;
-  height: 36px;
+  width: 40px;
+  height: 40px;
   border-radius: 50%;
-  border: 3px solid #e8d8c8;
-  border-top-color: var(--accent);
-  animation: spin .8s linear infinite;
+  border: 3px solid var(--surface);
+  border-top-color: var(--ctp-peach);
+  animation: spin 0.75s linear infinite;
 }
+
 @keyframes spin { to { transform: rotate(360deg); } }
 
+/* Modal */
 .modal {
   position: fixed;
   inset: 0;
-  background: rgba(42, 30, 24, .48);
+  background: color-mix(in srgb, var(--ctp-crust) 62%, transparent);
   display: grid;
   place-items: center;
-  padding: 1rem;
+  padding: var(--space-4);
   z-index: 30;
-  backdrop-filter: blur(3px);
+  backdrop-filter: blur(6px);
 }
+
 .modal-card {
   width: min(440px, 100%);
-  background: var(--card);
-  border-radius: 20px;
-  border: 1px solid var(--line);
-  padding: 1.25rem 1.35rem 1.2rem;
-  box-shadow: 0 24px 60px rgba(0,0,0,.2);
+  background: var(--bg-elevated);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border);
+  padding: 1.35rem 1.4rem 1.25rem;
+  box-shadow: var(--shadow);
 }
+
 .modal-kicker {
-  color: var(--accent2);
-  font-size: .78rem;
-  letter-spacing: .12em;
+  color: var(--ctp-mauve);
+  font-size: 0.75rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
   font-weight: 700;
 }
-.modal-card h2 { margin: .25rem 0 .6rem; }
-.modal-card .lead { color: var(--ink); margin: 0 0 .5rem; }
+
+.modal-card h2 {
+  margin: 0.3rem 0 0.65rem;
+  color: var(--text);
+  text-transform: none;
+  letter-spacing: 0;
+  font-size: 1.25rem;
+}
+
+.modal-card .lead {
+  color: var(--text);
+  margin: 0 0 0.5rem;
+}
+
 .modal-card .diary {
-  color: var(--muted);
+  color: var(--text-muted);
   font-style: italic;
   margin: 0 0 1rem;
 }
+
 .night-stats {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: .45rem;
-  margin-bottom: .8rem;
+  gap: 0.45rem;
+  margin-bottom: 0.85rem;
 }
+
 .night-stats div {
-  background: #f6eee5;
-  border-radius: 12px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
   text-align: center;
-  padding: .55rem .3rem;
+  padding: 0.55rem 0.3rem;
 }
+
 .night-stats em {
   display: block;
   font-style: normal;
-  color: var(--muted);
-  font-size: .75rem;
+  color: var(--text-faint);
+  font-size: 0.72rem;
 }
-.vibe { color: var(--muted); font-size: .9rem; }
 
+.vibe {
+  color: var(--text-muted);
+  font-size: 0.9rem;
+}
+
+.help-list {
+  margin: 0.4rem 0 1rem;
+  padding-left: 1.2rem;
+  color: var(--text-muted);
+  line-height: 1.75;
+}
+
+.help-list b { color: var(--text); }
+
+/* Footer */
 .foot {
-  margin-top: 1.2rem;
+  margin-top: var(--space-5);
   text-align: center;
-  color: var(--muted);
-  font-size: .82rem;
+  color: var(--text-faint);
+  font-size: 0.8rem;
+}
+
+.foot a {
+  color: var(--ctp-lavender);
+  text-decoration: none;
 }
-.foot a { color: var(--accent2); }
 
-@media (max-width: 920px) {
+.foot a:hover { text-decoration: underline; }
+
+/* Responsive */
+@media (max-width: 960px) {
+  .topbar {
+    grid-template-columns: 1fr;
+  }
+  .top-meta { justify-content: flex-start; }
+  .phase-track { justify-content: flex-start; }
   .shell { grid-template-columns: 1fr; }
-  .form-row:has(select + select) { grid-template-columns: 1fr; }
+  .form-row.triple { grid-template-columns: 1fr; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
 }