diff --git a/modules/story-summary/story-summary-a.css b/modules/story-summary/story-summary-a.css
index b909ea1..83157dc 100644
--- a/modules/story-summary/story-summary-a.css
+++ b/modules/story-summary/story-summary-a.css
@@ -73,6 +73,7 @@
    ═══════════════════════════════════════════════════════════════════════════ */
 
 :root {
+    /* ── Base ── */
     --bg: #f0f0f0;
     --bg2: #ffffff;
     --bg3: #eeeeee;
@@ -80,36 +81,127 @@
     --txt2: #333333;
     --txt3: #555555;
 
-    /* Neo-Brutalism Core */
+    /* ── Neo-Brutalism Core ── */
     --bdr: #000000;
     --bdr2: #000000;
-    /* Secondary border is also black/high contrast */
     --shadow: 4px 4px 0 var(--txt);
     --shadow-hover: 2px 2px 0 var(--txt);
-
     --acc: #000000;
     --hl: #ff4444;
-    /* Harsh Red */
+    --hl2: #d85858;
     --hl-soft: #ffeaea;
-    /* Light Red bg */
+    --inv: #fff;
+
+    /* ── Buttons ── */
+    --btn-p-hover: #333;
+    --btn-p-disabled: #999;
+
+    /* ── Status ── */
+    --warn: #ff9800;
+    --success: #22c55e;
+    --info: #3b82f6;
+    --downloading: #f59e0b;
+    --error: #ef4444;
+
+    /* ── Code blocks ── */
+    --code-bg: #1e1e1e;
+    --code-txt: #d4d4d4;
+    --muted: #999;
+
+    /* ── Overlay ── */
+    --overlay: rgba(0, 0, 0, .5);
+
+    /* ── Tag ── */
+    --tag-s-bdr: rgba(255, 68, 68, .2);
+    --tag-shadow: rgba(0, 0, 0, .12);
+
+    /* ── Category colors ── */
+    --cat-status: #e57373;
+    --cat-inventory: #64b5f6;
+    --cat-relation: #ba68c8;
+    --cat-knowledge: #4db6ac;
+    --cat-rule: #ffd54f;
+
+    /* ── Trend colors ── */
+    --trend-broken: #444;
+    --trend-broken-bg: rgba(68, 68, 68, .15);
+    --trend-hate: #8b0000;
+    --trend-hate-bg: rgba(139, 0, 0, .15);
+    --trend-dislike: #cd5c5c;
+    --trend-dislike-bg: rgba(205, 92, 92, .15);
+    --trend-stranger: #888;
+    --trend-stranger-bg: rgba(136, 136, 136, .15);
+    --trend-click: #4a9a7e;
+    --trend-click-bg: rgba(102, 205, 170, .15);
+    --trend-close-bg: rgba(235, 106, 106, .15);
+    --trend-merge: #c71585;
+    --trend-merge-bg: rgba(199, 21, 133, .2);
 }
 
-@media (prefers-color-scheme: dark) {
-    :root {
-        --bg: #111111;
-        --bg2: #222222;
-        --bg3: #333333;
-        --txt: #ffffff;
-        --txt2: #eeeeee;
-        --txt3: #cccccc;
+:root[data-theme="dark"] {
+    /* ── Base ── */
+    --bg: #111111;
+    --bg2: #222222;
+    --bg3: #333333;
+    --txt: #ffffff;
+    --txt2: #eeeeee;
+    --txt3: #cccccc;
 
-        --bdr: #ffffff;
-        --bdr2: #ffffff;
+    /* ── Neo-Brutalism Core ── */
+    --bdr: #ffffff;
+    --bdr2: #ffffff;
+    --shadow: 4px 4px 0 var(--txt);
+    --shadow-hover: 2px 2px 0 var(--txt);
+    --acc: #ffffff;
+    --hl: #ff6b6b;
+    --hl2: #e07070;
+    --hl-soft: #442222;
+    --inv: #222;
 
-        --acc: #ffffff;
-        --hl: #ff6b6b;
-        --hl-soft: #442222;
-    }
+    /* ── Buttons ── */
+    --btn-p-hover: #ddd;
+    --btn-p-disabled: #666;
+
+    /* ── Status ── */
+    --warn: #ffb74d;
+    --success: #4caf50;
+    --info: #64b5f6;
+    --downloading: #ffa726;
+    --error: #ef5350;
+
+    /* ── Code blocks ── */
+    --code-bg: #0d0d0d;
+    --code-txt: #d4d4d4;
+    --muted: #777;
+
+    /* ── Overlay ── */
+    --overlay: rgba(0, 0, 0, .7);
+
+    /* ── Tag ── */
+    --tag-s-bdr: rgba(255, 107, 107, .3);
+    --tag-shadow: rgba(0, 0, 0, .4);
+
+    /* ── Category colors ── */
+    --cat-status: #ef9a9a;
+    --cat-inventory: #90caf9;
+    --cat-relation: #ce93d8;
+    --cat-knowledge: #80cbc4;
+    --cat-rule: #ffe082;
+
+    /* ── Trend colors ── */
+    --trend-broken: #999;
+    --trend-broken-bg: rgba(153, 153, 153, .15);
+    --trend-hate: #ef5350;
+    --trend-hate-bg: rgba(239, 83, 80, .15);
+    --trend-dislike: #e57373;
+    --trend-dislike-bg: rgba(229, 115, 115, .15);
+    --trend-stranger: #aaa;
+    --trend-stranger-bg: rgba(170, 170, 170, .12);
+    --trend-click: #66bb6a;
+    --trend-click-bg: rgba(102, 187, 106, .15);
+    --trend-close-bg: rgba(255, 107, 107, .15);
+    --trend-merge: #f06292;
+    --trend-merge-bg: rgba(240, 98, 146, .15);
 }
 
 body {
@@ -218,7 +310,7 @@ h1 {
 
 .stat-warning {
     font-size: .625rem;
-    color: #ff9800;
+    color: var(--warn);
     margin-top: 4px;
 }
 
@@ -705,7 +797,7 @@ h1 {
 
 .prof-prog-inner {
     height: 100%;
-    background: linear-gradient(90deg, var(--hl), #d85858);
+    background: linear-gradient(90deg, var(--hl), var(--hl2));
     border-radius: 2px;
     transition: width .6s;
 }
@@ -810,38 +902,38 @@ h1 {
 }
 
 .trend-broken {
-    background: rgba(68, 68, 68, .15);
-    color: #444;
+    background: var(--trend-broken-bg);
+    color: var(--trend-broken);
 }
 
 .trend-hate {
-    background: rgba(139, 0, 0, .15);
-    color: #8b0000;
+    background: var(--trend-hate-bg);
+    color: var(--trend-hate);
 }
 
 .trend-dislike {
-    background: rgba(205, 92, 92, .15);
-    color: #cd5c5c;
+    background: var(--trend-dislike-bg);
+    color: var(--trend-dislike);
 }
 
 .trend-stranger {
-    background: rgba(136, 136, 136, .15);
-    color: #888;
+    background: var(--trend-stranger-bg);
+    color: var(--trend-stranger);
 }
 
 .trend-click {
-    background: rgba(102, 205, 170, .15);
-    color: #4a9a7e;
+    background: var(--trend-click-bg);
+    color: var(--trend-click);
 }
 
 .trend-close {
-    background: rgba(235, 106, 106, .15);
+    background: var(--trend-close-bg);
     color: var(--hl);
 }
 
 .trend-merge {
-    background: rgba(199, 21, 133, .2);
-    color: #c71585;
+    background: var(--trend-merge-bg);
+    color: var(--trend-merge);
 }
 
 /* ═══════════════════════════════════════════════════════════════════════════
@@ -1009,7 +1101,7 @@ h1 {
 }
 
 .modal-close:hover svg {
-    stroke: #fff;
+    stroke: var(--inv);
 }
 
 .modal-close svg {
@@ -1361,24 +1453,24 @@ h1 {
 }
 
 .status-dot.ready {
-    background: #22c55e;
+    background: var(--success);
 }
 
 .status-dot.cached {
-    background: #3b82f6;
+    background: var(--info);
 }
 
 .status-dot.downloading {
-    background: #f59e0b;
+    background: var(--downloading);
     animation: pulse 1s infinite;
 }
 
 .status-dot.error {
-    background: #ef4444;
+    background: var(--error);
 }
 
 .status-dot.success {
-    background: #22c55e;
+    background: var(--success);
 }
 
 @keyframes pulse {
@@ -1406,7 +1498,7 @@ h1 {
 
 .progress-inner {
     height: 100%;
-    background: linear-gradient(90deg, var(--hl), #d85858);
+    background: linear-gradient(90deg, var(--hl), var(--hl2));
     border-radius: 3px;
     width: 0%;
     transition: width .3s;
@@ -1445,7 +1537,7 @@ h1 {
 
 .vector-mismatch-warning {
     font-size: .75rem;
-    color: #f59e0b;
+    color: var(--downloading);
     margin-top: 6px;
 }
 
@@ -1499,7 +1591,7 @@ h1 {
     font-family: 'Consolas', 'Monaco', 'SF Mono', monospace;
     font-size: 12px;
     line-height: 1.6;
-    color: #e8e8e8;
+    color: var(--code-txt);
     white-space: pre-wrap !important;
     overflow-x: hidden !important;
     word-break: break-word;
@@ -1570,7 +1662,7 @@ h1 {
     width: 28px;
     height: 28px;
     background: var(--acc);
-    color: #fff;
+    color: var(--inv);
     border-radius: 50%;
     display: flex;
     align-items: center;
@@ -1660,7 +1752,7 @@ h1 {
 .hf-code {
     margin: 0;
     padding: 14px;
-    background: #1e1e1e;
+    background: var(--code-bg);
     overflow-x: auto;
     position: relative;
 }
@@ -1669,7 +1761,7 @@ h1 {
     font-family: 'SF Mono', Monaco, Consolas, 'Courier New', monospace;
     font-size: .75rem;
     line-height: 1.5;
-    color: #d4d4d4;
+    color: var(--code-txt);
     display: block;
     white-space: pre;
 }
@@ -1681,7 +1773,7 @@ h1 {
     padding: 4px 10px;
     background: rgba(255, 255, 255, .1);
     border: 1px solid rgba(255, 255, 255, .2);
-    color: #999;
+    color: var(--muted);
     font-size: .6875rem;
     cursor: pointer;
     border-radius: 4px;
@@ -1690,14 +1782,14 @@ h1 {
 
 .hf-code .copy-btn:hover {
     background: rgba(255, 255, 255, .2);
-    color: #fff;
+    color: var(--inv);
 }
 
 .hf-status-badge {
     display: inline-block;
     padding: 2px 10px;
     background: rgba(34, 197, 94, .15);
-    color: #22c55e;
+    color: var(--success);
     border-radius: 10px;
     font-size: .75rem;
 }
@@ -1856,23 +1948,23 @@ h1 {
 
 /* Category Icon Colors */
 .world-group[data-category="status"] .world-group-title {
-    color: #e57373;
+    color: var(--cat-status);
 }
 
 .world-group[data-category="inventory"] .world-group-title {
-    color: #64b5f6;
+    color: var(--cat-inventory);
 }
 
 .world-group[data-category="relation"] .world-group-title {
-    color: #ba68c8;
+    color: var(--cat-relation);
 }
 
 .world-group[data-category="knowledge"] .world-group-title {
-    color: #4db6ac;
+    color: var(--cat-knowledge);
 }
 
 .world-group[data-category="rule"] .world-group-title {
-    color: #ffd54f;
+    color: var(--cat-rule);
 }
 
 /* Empty State */
@@ -1971,7 +2063,7 @@ h1 {
     top: 2px;
     width: 5px;
     height: 10px;
-    border: solid #fff;
+    border: solid var(--inv);
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
 }
@@ -2205,8 +2297,8 @@ h1 {
    ═══════════════════════════════════════════════════════════════════════════ */
 
 .debug-log-viewer {
-    background: #1a1a1a;
-    color: #e0e0e0;
+    background: var(--code-bg);
+    color: var(--code-txt);
     padding: 16px;
     border-radius: 8px;
     font-family: 'Consolas', 'Monaco', 'SF Mono', monospace;
@@ -2221,7 +2313,7 @@ h1 {
 }
 
 .recall-empty {
-    color: #999;
+    color: var(--muted);
     text-align: center;
     padding: 40px;
     font-style: italic;
@@ -2234,15 +2326,15 @@ h1 {
    ═══════════════════════════════════════════════════════════════════════════ */
 
 #recall-log-content .metric-warn {
-    color: #f59e0b;
+    color: var(--downloading);
 }
 
 #recall-log-content .metric-error {
-    color: #ef4444;
+    color: var(--error);
 }
 
 #recall-log-content .metric-good {
-    color: #22c55e;
+    color: var(--success);
 }
 
 /* ═══════════════════════════════════════════════════════════════════════════
@@ -2485,8 +2577,8 @@ h1 {
 
 .neo-badge {
     /* Explicitly requested Black Background & White Text */
-    background: #000;
-    color: #fff;
+    background: var(--acc);
+    color: var(--inv);
     padding: 2px 8px;
     border-radius: 4px;
     font-size: 0.75rem;
diff --git a/modules/story-summary/story-summary-ui.js b/modules/story-summary/story-summary-ui.js
index 5dca268..7cff296 100644
--- a/modules/story-summary/story-summary-ui.js
+++ b/modules/story-summary/story-summary-ui.js
@@ -1640,42 +1640,34 @@
 
         bindEvents();
 
-        // === EASTER EGG: 连续点击标题「总结」5 次切换新野兽派主题（localStorage 持久化）===
+        // === THEME SWITCHER ===
         (function () {
             const STORAGE_KEY = 'xb-theme-alt';
-            const CSS_A = 'story-summary.css';
-            const CSS_B = 'story-summary-a.css';
+            const CSS_MAP = { default: 'story-summary.css', dark: 'story-summary.css', neo: 'story-summary-a.css', 'neo-dark': 'story-summary-a.css' };
             const link = document.querySelector('link[rel="stylesheet"]');
-            if (!link) return;
+            const sel = document.getElementById('theme-select');
+            if (!link || !sel) return;
 
-            // 启动时：根据持久化状态设置 CSS
-            if (localStorage.getItem(STORAGE_KEY) === '1') {
-                link.setAttribute('href', CSS_B);
+            function applyTheme(theme) {
+                if (!CSS_MAP[theme]) return;
+                link.setAttribute('href', CSS_MAP[theme]);
+                document.documentElement.setAttribute('data-theme', (theme === 'dark' || theme === 'neo-dark') ? 'dark' : '');
             }
 
-            // 点击计数器
-            let clickCount = 0, clickTimer = null;
-            const trigger = document.querySelector('h1 span');
-            if (!trigger) return;
+            // 启动时恢复主题
+            const saved = localStorage.getItem(STORAGE_KEY) || 'default';
+            applyTheme(saved);
+            sel.value = saved;
 
-            trigger.style.cursor = 'default';
-            trigger.addEventListener('click', function () {
-                clickCount++;
-                clearTimeout(clickTimer);
-                clickTimer = setTimeout(() => { clickCount = 0; }, 2000);
-
-                if (clickCount >= 5) {
-                    clickCount = 0;
-                    clearTimeout(clickTimer);
-                    const isAlt = localStorage.getItem(STORAGE_KEY) === '1';
-                    const next = isAlt ? CSS_A : CSS_B;
-                    localStorage.setItem(STORAGE_KEY, isAlt ? '0' : '1');
-                    link.setAttribute('href', next);
-                    console.log(`[Easter Egg] Theme toggled → ${next}`);
-                }
+            // 下拉框切换
+            sel.addEventListener('change', function () {
+                const theme = sel.value;
+                applyTheme(theme);
+                localStorage.setItem(STORAGE_KEY, theme);
+                console.log(`[Theme] Switched → ${theme} (${CSS_MAP[theme]})`);
             });
         })();
-        // === END EASTER EGG ===
+        // === END THEME SWITCHER ===
 
         // Notify parent
         postMsg('FRAME_READY');
diff --git a/modules/story-summary/story-summary.css b/modules/story-summary/story-summary.css
index 403bc1d..3e26a78 100644
--- a/modules/story-summary/story-summary.css
+++ b/modules/story-summary/story-summary.css
@@ -80,6 +80,7 @@
 }
 
 :root {
+    /* ── Base ── */
     --bg: #fafafa;
     --bg2: #fff;
     --bg3: #f5f5f5;
@@ -90,7 +91,117 @@
     --bdr2: #e8e8e8;
     --acc: #1a1a1a;
     --hl: #d87a7a;
+    --hl2: #d85858;
     --hl-soft: rgba(184, 90, 90, .1);
+    --inv: #fff;
+    /* text on accent/primary bg */
+
+    /* ── Buttons ── */
+    --btn-p-hover: #555;
+    --btn-p-disabled: #999;
+
+    /* ── Status ── */
+    --warn: #ff9800;
+    --success: #22c55e;
+    --info: #3b82f6;
+    --downloading: #f59e0b;
+    --error: #ef4444;
+
+    /* ── Code blocks ── */
+    --code-bg: #1e1e1e;
+    --code-txt: #d4d4d4;
+    --muted: #999;
+
+    /* ── Overlay ── */
+    --overlay: rgba(0, 0, 0, .5);
+
+    /* ── Tag highlight border ── */
+    --tag-s-bdr: rgba(255, 68, 68, .2);
+    --tag-shadow: rgba(0, 0, 0, .08);
+
+    /* ── Category colors ── */
+    --cat-status: #e57373;
+    --cat-inventory: #64b5f6;
+    --cat-relation: #ba68c8;
+    --cat-knowledge: #4db6ac;
+    --cat-rule: #ffd54f;
+
+    /* ── Trend colors ── */
+    --trend-broken: #444;
+    --trend-broken-bg: rgba(68, 68, 68, .15);
+    --trend-hate: #8b0000;
+    --trend-hate-bg: rgba(139, 0, 0, .15);
+    --trend-dislike: #cd5c5c;
+    --trend-dislike-bg: rgba(205, 92, 92, .15);
+    --trend-stranger: #888;
+    --trend-stranger-bg: rgba(136, 136, 136, .15);
+    --trend-click: #4a9a7e;
+    --trend-click-bg: rgba(102, 205, 170, .15);
+    --trend-close-bg: rgba(235, 106, 106, .15);
+    --trend-merge: #c71585;
+    --trend-merge-bg: rgba(199, 21, 133, .2);
+}
+
+:root[data-theme="dark"] {
+    /* ── Base ── */
+    --bg: #121212;
+    --bg2: #1e1e1e;
+    --bg3: #2a2a2a;
+    --txt: #e0e0e0;
+    --txt2: #b0b0b0;
+    --txt3: #808080;
+    --bdr: #3a3a3a;
+    --bdr2: #333;
+    --acc: #e0e0e0;
+    --hl: #e8928a;
+    --hl2: #e07070;
+    --hl-soft: rgba(232, 146, 138, .12);
+    --inv: #1e1e1e;
+
+    /* ── Buttons ── */
+    --btn-p-hover: #ccc;
+    --btn-p-disabled: #666;
+
+    /* ── Status ── */
+    --warn: #ffb74d;
+    --success: #4caf50;
+    --info: #64b5f6;
+    --downloading: #ffa726;
+    --error: #ef5350;
+
+    /* ── Code blocks ── */
+    --code-bg: #0d0d0d;
+    --code-txt: #d4d4d4;
+    --muted: #777;
+
+    /* ── Overlay ── */
+    --overlay: rgba(0, 0, 0, .7);
+
+    /* ── Tag ── */
+    --tag-s-bdr: rgba(232, 146, 138, .3);
+    --tag-shadow: rgba(0, 0, 0, .3);
+
+    /* ── Category colors (softer for dark) ── */
+    --cat-status: #ef9a9a;
+    --cat-inventory: #90caf9;
+    --cat-relation: #ce93d8;
+    --cat-knowledge: #80cbc4;
+    --cat-rule: #ffe082;
+
+    /* ── Trend colors ── */
+    --trend-broken: #999;
+    --trend-broken-bg: rgba(153, 153, 153, .15);
+    --trend-hate: #ef5350;
+    --trend-hate-bg: rgba(239, 83, 80, .15);
+    --trend-dislike: #e57373;
+    --trend-dislike-bg: rgba(229, 115, 115, .15);
+    --trend-stranger: #aaa;
+    --trend-stranger-bg: rgba(170, 170, 170, .12);
+    --trend-click: #66bb6a;
+    --trend-click-bg: rgba(102, 187, 106, .15);
+    --trend-close-bg: rgba(232, 146, 138, .15);
+    --trend-merge: #f06292;
+    --trend-merge-bg: rgba(240, 98, 146, .15);
 }
 
 body {
@@ -204,7 +315,7 @@ h1 span {
 
 .stat-warning {
     font-size: .625rem;
-    color: #ff9800;
+    color: var(--warn);
     margin-top: 4px;
 }
 
@@ -306,17 +417,17 @@ h1 span {
 
 .btn-p {
     background: var(--acc);
-    color: #fff;
+    color: var(--inv);
     border-color: var(--acc);
 }
 
 .btn-p:hover {
-    background: #555;
+    background: var(--btn-p-hover);
 }
 
 .btn-p:disabled {
-    background: #999;
-    border-color: #999;
+    background: var(--btn-p-disabled);
+    border-color: var(--btn-p-disabled);
     cursor: not-allowed;
     opacity: .7;
 }
@@ -466,20 +577,20 @@ h1 span {
 
 .tag.p {
     background: var(--acc);
-    color: #fff;
+    color: var(--inv);
     border-color: var(--acc);
     font-weight: 500;
 }
 
 .tag.s {
     background: var(--hl-soft);
-    border-color: rgba(255, 68, 68, .2);
+    border-color: var(--tag-s-bdr);
     color: var(--hl);
 }
 
 .tag:hover {
     transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
+    box-shadow: 0 4px 12px var(--tag-shadow);
 }
 
 /* ═══════════════════════════════════════════════════════════════════════════
@@ -662,7 +773,7 @@ h1 span {
 
 .prof-prog-inner {
     height: 100%;
-    background: linear-gradient(90deg, var(--hl), #d85858);
+    background: linear-gradient(90deg, var(--hl), var(--hl2));
     border-radius: 2px;
     transition: width .6s;
 }
@@ -769,38 +880,38 @@ h1 span {
 }
 
 .trend-broken {
-    background: rgba(68, 68, 68, .15);
-    color: #444;
+    background: var(--trend-broken-bg);
+    color: var(--trend-broken);
 }
 
 .trend-hate {
-    background: rgba(139, 0, 0, .15);
-    color: #8b0000;
+    background: var(--trend-hate-bg);
+    color: var(--trend-hate);
 }
 
 .trend-dislike {
-    background: rgba(205, 92, 92, .15);
-    color: #cd5c5c;
+    background: var(--trend-dislike-bg);
+    color: var(--trend-dislike);
 }
 
 .trend-stranger {
-    background: rgba(136, 136, 136, .15);
-    color: #888;
+    background: var(--trend-stranger-bg);
+    color: var(--trend-stranger);
 }
 
 .trend-click {
-    background: rgba(102, 205, 170, .15);
-    color: #4a9a7e;
+    background: var(--trend-click-bg);
+    color: var(--trend-click);
 }
 
 .trend-close {
-    background: rgba(235, 106, 106, .15);
+    background: var(--trend-close-bg);
     color: var(--hl);
 }
 
 .trend-merge {
-    background: rgba(199, 21, 133, .2);
-    color: #c71585;
+    background: var(--trend-merge-bg);
+    color: var(--trend-merge);
 }
 
 /* ═══════════════════════════════════════════════════════════════════════════
@@ -913,7 +1024,7 @@ h1 span {
 .modal-bg {
     position: absolute;
     inset: 0;
-    background: rgba(0, 0, 0, .5);
+    background: var(--overlay);
     backdrop-filter: blur(4px);
 }
 
@@ -964,6 +1075,7 @@ h1 span {
 .modal-close svg {
     width: 14px;
     height: 14px;
+    color: var(--txt);
 }
 
 .modal-body {
@@ -1031,7 +1143,7 @@ h1 span {
 .editor-err {
     padding: 12px;
     background: var(--hl-soft);
-    border: 1px solid rgba(255, 68, 68, .3);
+    border: 1px solid var(--tag-s-bdr);
     color: var(--hl);
     font-size: .8125rem;
     margin-top: 12px;
@@ -1301,24 +1413,24 @@ h1 span {
 }
 
 .status-dot.ready {
-    background: #22c55e;
+    background: var(--success);
 }
 
 .status-dot.cached {
-    background: #3b82f6;
+    background: var(--info);
 }
 
 .status-dot.downloading {
-    background: #f59e0b;
+    background: var(--downloading);
     animation: pulse 1s infinite;
 }
 
 .status-dot.error {
-    background: #ef4444;
+    background: var(--error);
 }
 
 .status-dot.success {
-    background: #22c55e;
+    background: var(--success);
 }
 
 @keyframes pulse {
@@ -1346,7 +1458,7 @@ h1 span {
 
 .progress-inner {
     height: 100%;
-    background: linear-gradient(90deg, var(--hl), #d85858);
+    background: linear-gradient(90deg, var(--hl), var(--hl2));
     border-radius: 3px;
     width: 0%;
     transition: width .3s;
@@ -1404,7 +1516,7 @@ h1 span {
 
 .vector-mismatch-warning {
     font-size: .75rem;
-    color: #f59e0b;
+    color: var(--downloading);
     margin-top: 6px;
 }
 
@@ -1458,7 +1570,7 @@ h1 span {
     font-family: 'Consolas', 'Monaco', 'SF Mono', monospace;
     font-size: 12px;
     line-height: 1.6;
-    color: #e8e8e8;
+    color: var(--code-txt);
     white-space: pre-wrap !important;
     overflow-x: hidden !important;
     word-break: break-word;
@@ -1468,7 +1580,7 @@ h1 span {
 }
 
 .recall-empty {
-    color: #999;
+    color: var(--muted);
     text-align: center;
     padding: 40px;
     font-style: italic;
@@ -1555,7 +1667,7 @@ h1 span {
     width: 28px;
     height: 28px;
     background: var(--acc);
-    color: #fff;
+    color: var(--inv);
     border-radius: 50%;
     display: flex;
     align-items: center;
@@ -1648,7 +1760,7 @@ h1 span {
 .hf-code {
     margin: 0;
     padding: 14px;
-    background: #1e1e1e;
+    background: var(--code-bg);
     overflow-x: auto;
     position: relative;
 }
@@ -1657,7 +1769,7 @@ h1 span {
     font-family: 'SF Mono', Monaco, Consolas, 'Courier New', monospace;
     font-size: .75rem;
     line-height: 1.5;
-    color: #d4d4d4;
+    color: var(--code-txt);
     display: block;
     white-space: pre;
 }
@@ -1669,7 +1781,7 @@ h1 span {
     padding: 4px 10px;
     background: rgba(255, 255, 255, .1);
     border: 1px solid rgba(255, 255, 255, .2);
-    color: #999;
+    color: var(--muted);
     font-size: .6875rem;
     cursor: pointer;
     border-radius: 4px;
@@ -1678,14 +1790,14 @@ h1 span {
 
 .hf-code .copy-btn:hover {
     background: rgba(255, 255, 255, .2);
-    color: #fff;
+    color: var(--inv);
 }
 
 .hf-status-badge {
     display: inline-block;
     padding: 2px 10px;
     background: rgba(34, 197, 94, .15);
-    color: #22c55e;
+    color: var(--success);
     border-radius: 10px;
     font-size: .75rem;
     font-weight: 500;
@@ -2291,23 +2403,23 @@ h1 span {
 
 /* 分类图标颜色 */
 .world-group[data-category="status"] .world-group-title {
-    color: #e57373;
+    color: var(--cat-status);
 }
 
 .world-group[data-category="inventory"] .world-group-title {
-    color: #64b5f6;
+    color: var(--cat-inventory);
 }
 
 .world-group[data-category="relation"] .world-group-title {
-    color: #ba68c8;
+    color: var(--cat-relation);
 }
 
 .world-group[data-category="knowledge"] .world-group-title {
-    color: #4db6ac;
+    color: var(--cat-knowledge);
 }
 
 .world-group[data-category="rule"] .world-group-title {
-    color: #ffd54f;
+    color: var(--cat-rule);
 }
 
 /* 空状态 */
@@ -2444,7 +2556,7 @@ h1 span {
     top: 2px;
     width: 5px;
     height: 10px;
-    border: solid #fff;
+    border: solid var(--inv);
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
 }
@@ -2740,8 +2852,8 @@ h1 span {
    ═══════════════════════════════════════════════════════════════════════════ */
 
 .debug-log-viewer {
-    background: #1a1a1a;
-    color: #e0e0e0;
+    background: var(--code-bg);
+    color: var(--code-txt);
     padding: 16px;
     border-radius: 8px;
     font-family: 'Consolas', 'Monaco', 'SF Mono', monospace;
@@ -2756,7 +2868,7 @@ h1 span {
 }
 
 .recall-empty {
-    color: #999;
+    color: var(--muted);
     text-align: center;
     padding: 40px;
     font-style: italic;
@@ -2775,15 +2887,15 @@ h1 span {
    ═══════════════════════════════════════════════════════════════════════════ */
 
 #recall-log-content .metric-warn {
-    color: #f59e0b;
+    color: var(--downloading);
 }
 
 #recall-log-content .metric-error {
-    color: #ef4444;
+    color: var(--error);
 }
 
 #recall-log-content .metric-good {
-    color: #22c55e;
+    color: var(--success);
 }
 
 /* ═══════════════════════════════════════════════════════════════════════════
@@ -2825,7 +2937,7 @@ h1 span {
     width: 26px;
     height: 26px;
     background: var(--acc);
-    color: #fff;
+    color: var(--inv);
     border-radius: 50%;
     display: flex;
     align-items: center;
@@ -2872,7 +2984,7 @@ h1 span {
     width: 22px;
     height: 22px;
     background: var(--hl);
-    color: #fff;
+    color: var(--inv);
     border-radius: 50%;
     display: flex;
     align-items: center;
@@ -3103,7 +3215,7 @@ h1 span {
     width: 18px;
     height: 18px;
     background: var(--acc);
-    color: #fff;
+    color: var(--inv);
     border-radius: 3px;
     font-size: .625rem;
     font-weight: 700;
@@ -3304,8 +3416,8 @@ h1 span {
 
 .neo-badge {
     /* Explicitly requested Black Background & White Text */
-    background: #000;
-    color: #fff;
+    background: var(--acc);
+    color: var(--inv);
     padding: 2px 8px;
     border-radius: 4px;
     font-size: 0.75rem;
diff --git a/modules/story-summary/story-summary.html b/modules/story-summary/story-summary.html
index 2a0f148..bf666ef 100644
--- a/modules/story-summary/story-summary.html
+++ b/modules/story-summary/story-summary.html
@@ -176,6 +176,22 @@
             <div class="modal-body">
                 <!-- Tab 1: Summary Settings -->
                 <div class="tab-pane active" id="tab-summary">
+                    <!-- Theme Settings -->
+                    <div class="settings-section">
+                        <div class="settings-section-title">主题设置</div>
+                        <div class="settings-row">
+                            <div class="settings-field full">
+                                <label>界面主题</label>
+                                <select id="theme-select">
+                                    <option value="default">默认主题 · 亮色</option>
+                                    <option value="dark">默认主题 · 暗色</option>
+                                    <option value="neo">Neo主题 · 亮色</option>
+                                    <option value="neo-dark">Neo主题 · 暗色</option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+
                     <!-- API Config & Gen Params Combined -->
                     <div class="settings-section">
                         <div class="settings-section-title">API 配置</div>