feat: 添加5套主题切换：深邃暗/纯净白/赛博朋克/莫兰迪/护眼绿

style.css

@@ -2,7 +2,9 @@
 
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
-:root {
+/* ── Theme: 深邃暗（默认）─ */
+:root,
+[data-theme="dark"] {
   --bg:       #0f0f13;
   --surface:  #18181f;
   --surface2: #1f1f28;
@@ -18,6 +20,74 @@
   --ease:     cubic-bezier(0.16, 1, 0.3, 1);
 }
 
+/* ── Theme: 纯净白 ─ */
+[data-theme="light"] {
+  --bg:       #f5f5f7;
+  --surface:  #ffffff;
+  --surface2: #f0f0f4;
+  --border:   rgba(0,0,0,0.08);
+  --accent:   #6c5ce7;
+  --accent2:  #5a4bd4;
+  --text:     #1a1a2e;
+  --text2:    #555570;
+  --text3:    #9999aa;
+  --danger:   #e74c3c;
+  --radius:   12px;
+  --radius2:  8px;
+  --ease:     cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* ── Theme: 赛博朋克 ─ */
+[data-theme="cyber"] {
+  --bg:       #0a0a14;
+  --surface:  #10102a;
+  --surface2: #181840;
+  --border:   rgba(0,255,255,0.12);
+  --accent:   #00f0ff;
+  --accent2:  #ff00aa;
+  --text:     #e0f8ff;
+  --text2:    #7aaccc;
+  --text3:    #3a5a7a;
+  --danger:   #ff2d55;
+  --radius:   12px;
+  --radius2:  8px;
+  --ease:     cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* ── Theme: 莫兰迪 ─ */
+[data-theme="morandi"] {
+  --bg:       #e8e4df;
+  --surface:  #f2ede8;
+  --surface2: #ddd8d0;
+  --border:   rgba(0,0,0,0.08);
+  --accent:   #9b8fa0;
+  --accent2:  #7a6f80;
+  --text:     #4a4540;
+  --text2:    #7a7068;
+  --text3:    #a09890;
+  --danger:   #c09080;
+  --radius:   12px;
+  --radius2:  8px;
+  --ease:     cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* ── Theme: 护眼绿 ─ */
+[data-theme="green"] {
+  --bg:       #1a2416;
+  --surface:  #222e1e;
+  --surface2: #2a3a24;
+  --border:   rgba(120,200,80,0.12);
+  --accent:   #78c850;
+  --accent2:  #9fd878;
+  --text:     #d4e8c0;
+  --text2:    #90b888;
+  --text3:    #5a7848;
+  --danger:   #e87070;
+  --radius:   12px;
+  --radius2:  8px;
+  --ease:     cubic-bezier(0.16, 1, 0.3, 1);
+}
+
 html, body {
   height: 100%;
   background: var(--bg);
@@ -26,8 +96,11 @@ html, body {
   font-size: 15px;
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
+  transition: background 0.3s, color 0.3s;
 }
 
+#app { transition: background 0.3s; }
+
 button { cursor: pointer; font-family: inherit; }
 a { color: var(--accent2); text-decoration: none; }
 a:hover { text-decoration: underline; }
@@ -50,6 +123,51 @@ header {
   padding: 22px 0 24px;
 }
 
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* ── Theme Switcher ─────────────────────────────────────────── */
+
+.theme-switcher {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 24px;
+  padding: 3px 6px;
+}
+
+.theme-btn {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  border: none;
+  background: transparent;
+  color: var(--text3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s, transform 0.15s;
+}
+
+.theme-btn:hover {
+  color: var(--text);
+  background: var(--surface2);
+  transform: scale(1.1);
+}
+
+.theme-btn.active {
+  background: var(--accent);
+  color: #fff;
+}
+
+.theme-btn.active svg { stroke: #fff; fill: #fff; }
+
 .logo {
   display: flex;
   align-items: center;