dsh-remote-plugin 0.5.3 → 0.5.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/apk/dsh-remote.apk +0 -0
  2. package/package.json +1 -1
  3. package/public/admin.html +80 -30
  4. package/public/admin.js +49 -1
  5. package/public/app.js +74 -1
  6. package/public/i18n.js +6 -1
  7. package/public/index.html +28 -2
  8. package/public/styles.css +542 -173
  9. package/public/theme.js +57 -0
  10. package/public/update.json +3 -3
  11. package/public/version.json +1 -1
package/public/styles.css CHANGED
@@ -1,63 +1,398 @@
1
- /* DSH Remote · 移动优先深色蓝紫主题(红绿色弱友好: 蓝/青 + 橙/紫) */
1
+ /* DSH Remote · 移动优先 · 四皮肤(默认深空/深色落日/亮色易北爱乐厅/中性草原孤塔)
2
+ * 统一 --dsr-* 变量; 主题由 <html data-theme="dark|light|neutral"> 驱动, theme.js 持久化。
3
+ * 红绿色弱友好原则: 状态语义色之外, 品牌色使用蓝/青 + 橙/紫系, 避免红绿配对。 */
4
+
5
+ /* ============ 通用变量 ============ */
2
6
  :root {
3
- --bg: #0b0e1a;
4
- --bg-2: #101528;
5
- --panel: #151b33;
6
- --panel-2: #1b2340;
7
- --line: #263056;
8
- --text: #e8ecff;
9
- --muted: #8b94bd;
10
- --blue: #5b8cff;
11
- --cyan: #7dcfff;
12
- --orange: #ff9e64;
13
- --purple: #b48cff;
14
- --danger: #ff8f6b;
15
- --ok: #7dcfff;
16
- --radius: 14px;
17
- --safe-top: max(env(safe-area-inset-top, 0px), var(--native-top, 0px));
18
- --safe-b: max(env(safe-area-inset-bottom, 0px), var(--native-bottom, 0px));
7
+ --dsr-radius: 14px;
8
+ --dsr-safe-top: max(env(safe-area-inset-top, 0px), var(--native-top, 0px));
9
+ --dsr-safe-b: max(env(safe-area-inset-bottom, 0px), var(--native-bottom, 0px));
10
+ }
11
+
12
+ /* ============ 深空「默认」: 经典深蓝紫(保留原配色) ============ */
13
+ :root,
14
+ html[data-theme="default"] {
15
+ /* 中性灰阶 0(白) → 9(近黑) */
16
+ --dsr-neutral-0: #FFFFFF;
17
+ --dsr-neutral-1: #F4F6F9;
18
+ --dsr-neutral-2: #E6EAF0;
19
+ --dsr-neutral-3: #C9D1DC;
20
+ --dsr-neutral-4: #A6B0BE;
21
+ --dsr-neutral-5: #828D9E;
22
+ --dsr-neutral-6: #616C7E;
23
+ --dsr-neutral-7: #444E5E;
24
+ --dsr-neutral-8: #2B3442;
25
+ --dsr-neutral-9: #1A212C;
26
+
27
+ --dsr-bg: #0B0E1A;
28
+ --dsr-bg-2: #101528;
29
+ --dsr-panel: #151B33;
30
+ --dsr-panel-2: #1B2340;
31
+ --dsr-line: #263056;
32
+ --dsr-divider: rgba(232, 236, 255, .16);
33
+ --dsr-text: #E8ECFF;
34
+ --dsr-muted: #8B94BD;
35
+ --dsr-text-disabled: rgba(232, 236, 255, .45);
36
+
37
+ --dsr-accent: #5B8CFF;
38
+ --dsr-on-accent: #FFFFFF;
39
+ --dsr-accent-strong: #6FA0FF;
40
+ --dsr-accent-soft: #5B8CFF1F;
41
+ --dsr-accent-line: #5B8CFF66;
42
+ --dsr-accent-2: #B48CFF;
43
+ --dsr-accent-2-strong: #B48CFF;
44
+ --dsr-accent-2-soft: #B48CFF21;
45
+ --dsr-accent-2-line: #B48CFF66;
46
+ --dsr-brand-a: #5B8CFF;
47
+ --dsr-brand-b: #B48CFF;
48
+
49
+ --dsr-success: #4BCF7E;
50
+ --dsr-success-soft: #4BCF7E21;
51
+ --dsr-success-line: #4BCF7E66;
52
+ --dsr-warning: #FF9E64;
53
+ --dsr-warning-soft: #FF9E6421;
54
+ --dsr-warning-line: #FF9E6466;
55
+ --dsr-on-warning: #1A120B;
56
+ --dsr-error: #FF8F6B;
57
+ --dsr-error-soft: #FF8F6B24;
58
+ --dsr-error-line: #FF8F6B66;
59
+ --dsr-info: #7DCFFF;
60
+ --dsr-info-soft: #7DCFFF21;
61
+ --dsr-info-line: #7DCFFF66;
62
+
63
+ --dsr-head-bg: rgba(11, 14, 26, .94);
64
+ --dsr-nav-bg: rgba(16, 21, 40, .94);
65
+ --dsr-nav-muted: #8B94BD;
66
+ --dsr-nav-active: #6FA0FF;
67
+ --dsr-nav-badge-bg: #FF9E64;
68
+ --dsr-nav-badge-text: #1A120B;
69
+ --dsr-composer-bg: rgba(11, 14, 26, .92);
70
+ --dsr-overlay: rgba(5, 7, 14, .66);
71
+ --dsr-code-bg: rgba(0, 0, 0, .28);
72
+ --dsr-shadow: rgba(0, 0, 0, .4);
73
+ --dsr-glow: rgba(91, 140, 255, .8);
74
+ --dsr-head-running-bg: linear-gradient(90deg, rgba(11, 14, 26, .94), rgba(35, 65, 150, .92), rgba(125, 207, 255, .6), rgba(35, 65, 150, .92), rgba(11, 14, 26, .94));
75
+ --dsr-head-running-line: rgba(91, 140, 255, .55);
76
+ --dsr-head-interrupted-bg: linear-gradient(90deg, rgba(11, 14, 26, .94), rgba(90, 26, 12, .92), rgba(255, 158, 100, .55), rgba(90, 26, 12, .92), rgba(11, 14, 26, .94));
77
+ --dsr-head-interrupted-line: rgba(255, 158, 100, .55);
78
+ }
79
+
80
+ /* ============ 深色「落日」: 深钴蓝底 + 琥珀橙强调 ============ */
81
+ html[data-theme="dark"] {
82
+ /* 中性灰阶 0(白) → 9(近黑) */
83
+ --dsr-neutral-0: #FFFFFF;
84
+ --dsr-neutral-1: #F4F6F9;
85
+ --dsr-neutral-2: #E6EAF0;
86
+ --dsr-neutral-3: #C9D1DC;
87
+ --dsr-neutral-4: #A6B0BE;
88
+ --dsr-neutral-5: #828D9E;
89
+ --dsr-neutral-6: #616C7E;
90
+ --dsr-neutral-7: #444E5E;
91
+ --dsr-neutral-8: #2B3442;
92
+ --dsr-neutral-9: #1A212C;
93
+
94
+ /* 表面与文字 */
95
+ --dsr-bg: #05348B;
96
+ --dsr-bg-2: #0B3E86;
97
+ --dsr-panel: #0D438F;
98
+ --dsr-panel-2: #164E9E;
99
+ --dsr-line: #2E5A8C;
100
+ --dsr-divider: rgba(255, 255, 255, .16);
101
+ --dsr-text: #FFFFFF;
102
+ --dsr-muted: rgba(255, 255, 255, .85);
103
+ --dsr-text-disabled: rgba(255, 255, 255, .48);
104
+
105
+ /* 品牌强调(琥珀橙)与点缀(米色) */
106
+ --dsr-accent: #F9A647;
107
+ --dsr-on-accent: #1A120B;
108
+ --dsr-accent-strong: #F9A647;
109
+ --dsr-accent-soft: #F9A64721;
110
+ --dsr-accent-line: #F9A64766;
111
+ --dsr-accent-2: #EDCFAB;
112
+ --dsr-accent-2-strong: #EDCFAB;
113
+ --dsr-accent-2-soft: #EDCFAB21;
114
+ --dsr-accent-2-line: #EDCFAB66;
115
+ --dsr-brand-a: #F9A647;
116
+ --dsr-brand-b: #EDCFAB;
117
+
118
+ /* 状态色(WCAG 对比度按深钴蓝底校准) */
119
+ --dsr-success: #7EE2A8;
120
+ --dsr-success-soft: #7EE2A821;
121
+ --dsr-success-line: #7EE2A866;
122
+ --dsr-warning: #F9A647;
123
+ --dsr-warning-soft: #F9A64721;
124
+ --dsr-warning-line: #F9A64766;
125
+ --dsr-on-warning: #1A120B;
126
+ --dsr-error: #FFB4A6;
127
+ --dsr-error-soft: #FFB4A624;
128
+ --dsr-error-line: #FFB4A666;
129
+ --dsr-info: #7DCFFF;
130
+ --dsr-info-soft: #7DCFFF21;
131
+ --dsr-info-line: #7DCFFF66;
132
+
133
+ /* 悬浮/遮罩/特殊表面 */
134
+ --dsr-head-bg: rgba(4, 32, 90, .94);
135
+ --dsr-nav-bg: rgba(7, 38, 104, .94);
136
+ --dsr-nav-muted: rgba(255, 255, 255, .85);
137
+ --dsr-nav-active: #F9A647;
138
+ --dsr-nav-badge-bg: #F9A647;
139
+ --dsr-nav-badge-text: #1A120B;
140
+ --dsr-composer-bg: rgba(5, 42, 110, .92);
141
+ --dsr-overlay: rgba(2, 10, 32, .66);
142
+ --dsr-code-bg: rgba(0, 0, 0, .28);
143
+ --dsr-shadow: rgba(0, 0, 0, .4);
144
+ --dsr-glow: rgba(249, 166, 71, .55);
145
+ --dsr-head-running-bg: linear-gradient(90deg, rgba(4, 32, 90, .94), rgba(30, 77, 123, .92), rgba(125, 207, 255, .55), rgba(30, 77, 123, .92), rgba(4, 32, 90, .94));
146
+ --dsr-head-running-line: rgba(249, 166, 71, .55);
147
+ --dsr-head-interrupted-bg: linear-gradient(90deg, rgba(4, 32, 90, .94), rgba(90, 26, 12, .92), rgba(255, 180, 166, .55), rgba(90, 26, 12, .92), rgba(4, 32, 90, .94));
148
+ --dsr-head-interrupted-line: rgba(255, 180, 166, .55);
149
+ }
150
+
151
+ /* ============ 亮色「易北爱乐厅」: 米白底 + 沙金强调 ============ */
152
+ html[data-theme="light"] {
153
+ --dsr-neutral-0: #FFFFFF;
154
+ --dsr-neutral-1: #FAF9F7;
155
+ --dsr-neutral-2: #F3F1ED;
156
+ --dsr-neutral-3: #E8E5DF;
157
+ --dsr-neutral-4: #D8D4CC;
158
+ --dsr-neutral-5: #B8B3A9;
159
+ --dsr-neutral-6: #8A857C;
160
+ --dsr-neutral-7: #615D56;
161
+ --dsr-neutral-8: #3F3C37;
162
+ --dsr-neutral-9: #2B2B2B;
163
+
164
+ --dsr-bg: #EFEEEC;
165
+ --dsr-bg-2: #E5E1D9;
166
+ --dsr-panel: #FAF8F5;
167
+ --dsr-panel-2: #FFFFFF;
168
+ --dsr-line: #D8D2C6;
169
+ --dsr-divider: rgba(43, 43, 43, .12);
170
+ --dsr-text: #2B2B2B;
171
+ --dsr-muted: #6E6A63;
172
+ --dsr-text-disabled: #A8A39A;
173
+
174
+ /* 沙金(填充/按钮) + 深沙金(小字号文字) + 浅桃粉(点缀) */
175
+ --dsr-accent: #E6BC7B;
176
+ --dsr-on-accent: #2B2B2B;
177
+ --dsr-accent-strong: #7A5A24;
178
+ --dsr-accent-soft: #E6BC7B40;
179
+ --dsr-accent-line: #C89A4E66;
180
+ --dsr-accent-2: #6E5A8C;
181
+ --dsr-accent-2-strong: #6E5A8C;
182
+ --dsr-accent-2-soft: #6E5A8C1F;
183
+ --dsr-accent-2-line: #6E5A8C59;
184
+ --dsr-brand-a: #E6BC7B;
185
+ --dsr-brand-b: #EDD4C2;
186
+
187
+ --dsr-success: #237A46;
188
+ --dsr-success-soft: #237A461A;
189
+ --dsr-success-line: #237A4659;
190
+ --dsr-warning: #965A0B;
191
+ --dsr-warning-soft: #B96A0E1F;
192
+ --dsr-warning-line: #B96A0E59;
193
+ --dsr-on-warning: #FFFFFF;
194
+ --dsr-error: #B7423F;
195
+ --dsr-error-soft: #B7423F1F;
196
+ --dsr-error-line: #B7423F59;
197
+ --dsr-info: #2563C0;
198
+ --dsr-info-soft: #2563C01A;
199
+ --dsr-info-line: #2563C059;
200
+
201
+ --dsr-head-bg: rgba(239, 238, 236, .94);
202
+ --dsr-nav-bg: rgba(250, 248, 245, .94);
203
+ --dsr-nav-muted: #6E6A63;
204
+ --dsr-nav-active: #7A5A24;
205
+ --dsr-nav-badge-bg: #965A0B;
206
+ --dsr-nav-badge-text: #FFFFFF;
207
+ --dsr-composer-bg: rgba(250, 248, 245, .92);
208
+ --dsr-overlay: rgba(43, 43, 43, .4);
209
+ --dsr-code-bg: rgba(0, 0, 0, .06);
210
+ --dsr-shadow: rgba(43, 43, 43, .18);
211
+ --dsr-glow: rgba(198, 154, 78, .45);
212
+ --dsr-head-running-bg: linear-gradient(90deg, rgba(239, 238, 236, .94), rgba(230, 188, 123, .45), rgba(255, 255, 255, .65), rgba(230, 188, 123, .45), rgba(239, 238, 236, .94));
213
+ --dsr-head-running-line: rgba(122, 90, 36, .55);
214
+ --dsr-head-interrupted-bg: linear-gradient(90deg, rgba(239, 238, 236, .94), rgba(183, 66, 63, .18), rgba(255, 255, 255, .65), rgba(183, 66, 63, .18), rgba(239, 238, 236, .94));
215
+ --dsr-head-interrupted-line: rgba(183, 66, 63, .55);
216
+ }
217
+
218
+ /* ============ 中性「草原孤塔」: 鼠尾草底 + 橄榄绿块 + 陶土红点缀(莫兰迪自然系) ============ */
219
+ html[data-theme="neutral"] {
220
+ --dsr-neutral-0: #FFFFFF;
221
+ --dsr-neutral-1: #FAF7EE;
222
+ --dsr-neutral-2: #F1EDDF;
223
+ --dsr-neutral-3: #E6DFC8;
224
+ --dsr-neutral-4: #D5CDB4;
225
+ --dsr-neutral-5: #B8AF91;
226
+ --dsr-neutral-6: #8E866D;
227
+ --dsr-neutral-7: #6B6450;
228
+ --dsr-neutral-8: #454133;
229
+ --dsr-neutral-9: #2B2B2B;
230
+
231
+ --dsr-bg: #DDD4B8;
232
+ --dsr-bg-2: #D2C9AC;
233
+ --dsr-panel: #E6DFC8;
234
+ --dsr-panel-2: #F1EDDF;
235
+ --dsr-line: #B8AF91;
236
+ --dsr-divider: rgba(43, 43, 43, .14);
237
+ --dsr-text: #2B2B2B;
238
+ --dsr-muted: #5E5A45;
239
+ --dsr-text-disabled: #9A937C;
240
+
241
+ /* 橄榄军绿 = 主色(按钮/开关/底部导航块); 陶土砖红 = 强调(徽标/图标/链接) */
242
+ --dsr-accent: #585818;
243
+ --dsr-on-accent: #F5F1E3;
244
+ --dsr-accent-strong: #585818;
245
+ --dsr-accent-soft: #5858181F;
246
+ --dsr-accent-line: #58581866;
247
+ --dsr-accent-2: #832D15;
248
+ --dsr-accent-2-strong: #832D15;
249
+ --dsr-accent-2-soft: #832D151F;
250
+ --dsr-accent-2-line: #832D1566;
251
+ --dsr-brand-a: #585818;
252
+ --dsr-brand-b: #832D15;
253
+
254
+ --dsr-success: #1E5C33;
255
+ --dsr-success-soft: #1E5C331F;
256
+ --dsr-success-line: #1E5C3366;
257
+ --dsr-warning: #8A4B0C;
258
+ --dsr-warning-soft: #8A4B0C1F;
259
+ --dsr-warning-line: #8A4B0C66;
260
+ --dsr-on-warning: #FFFFFF;
261
+ --dsr-error: #8A2A1F;
262
+ --dsr-error-soft: #8A2A1F1F;
263
+ --dsr-error-line: #8A2A1F66;
264
+ --dsr-info: #1F4E7A;
265
+ --dsr-info-soft: #1F4E7A1F;
266
+ --dsr-info-line: #1F4E7A66;
267
+
268
+ --dsr-head-bg: rgba(221, 212, 184, .94);
269
+ --dsr-nav-bg: #585818;
270
+ --dsr-nav-muted: rgba(245, 241, 227, .8);
271
+ --dsr-nav-active: #F5F1E3;
272
+ --dsr-nav-badge-bg: #832D15;
273
+ --dsr-nav-badge-text: #F5F1E3;
274
+ --dsr-composer-bg: rgba(230, 223, 200, .92);
275
+ --dsr-overlay: rgba(43, 43, 43, .4);
276
+ --dsr-code-bg: rgba(0, 0, 0, .07);
277
+ --dsr-shadow: rgba(43, 43, 43, .2);
278
+ --dsr-glow: rgba(88, 88, 24, .5);
279
+ --dsr-head-running-bg: linear-gradient(90deg, rgba(221, 212, 184, .94), rgba(88, 88, 24, .30), rgba(245, 241, 227, .65), rgba(88, 88, 24, .30), rgba(221, 212, 184, .94));
280
+ --dsr-head-running-line: rgba(88, 88, 24, .55);
281
+ --dsr-head-interrupted-bg: linear-gradient(90deg, rgba(221, 212, 184, .94), rgba(131, 45, 21, .20), rgba(245, 241, 227, .65), rgba(131, 45, 21, .20), rgba(221, 212, 184, .94));
282
+ --dsr-head-interrupted-line: rgba(131, 45, 21, .55);
283
+ }
284
+
285
+ /* 无 JS 或 JS 前: 跟随系统深浅偏好 */
286
+ @media (prefers-color-scheme: light) {
287
+ :root:not([data-theme]) {
288
+ --dsr-neutral-0: #FFFFFF;
289
+ --dsr-neutral-1: #FAF9F7;
290
+ --dsr-neutral-2: #F3F1ED;
291
+ --dsr-neutral-3: #E8E5DF;
292
+ --dsr-neutral-4: #D8D4CC;
293
+ --dsr-neutral-5: #B8B3A9;
294
+ --dsr-neutral-6: #8A857C;
295
+ --dsr-neutral-7: #615D56;
296
+ --dsr-neutral-8: #3F3C37;
297
+ --dsr-neutral-9: #2B2B2B;
298
+
299
+ --dsr-bg: #EFEEEC;
300
+ --dsr-bg-2: #E5E1D9;
301
+ --dsr-panel: #FAF8F5;
302
+ --dsr-panel-2: #FFFFFF;
303
+ --dsr-line: #D8D2C6;
304
+ --dsr-divider: rgba(43, 43, 43, .12);
305
+ --dsr-text: #2B2B2B;
306
+ --dsr-muted: #6E6A63;
307
+ --dsr-text-disabled: #A8A39A;
308
+
309
+ --dsr-accent: #E6BC7B;
310
+ --dsr-on-accent: #2B2B2B;
311
+ --dsr-accent-strong: #7A5A24;
312
+ --dsr-accent-soft: #E6BC7B40;
313
+ --dsr-accent-line: #C89A4E66;
314
+ --dsr-accent-2: #6E5A8C;
315
+ --dsr-accent-2-strong: #6E5A8C;
316
+ --dsr-accent-2-soft: #6E5A8C1F;
317
+ --dsr-accent-2-line: #6E5A8C59;
318
+ --dsr-brand-a: #E6BC7B;
319
+ --dsr-brand-b: #EDD4C2;
320
+
321
+ --dsr-success: #237A46;
322
+ --dsr-success-soft: #237A461A;
323
+ --dsr-success-line: #237A4659;
324
+ --dsr-warning: #965A0B;
325
+ --dsr-warning-soft: #B96A0E1F;
326
+ --dsr-warning-line: #B96A0E59;
327
+ --dsr-on-warning: #FFFFFF;
328
+ --dsr-error: #B7423F;
329
+ --dsr-error-soft: #B7423F1F;
330
+ --dsr-error-line: #B7423F59;
331
+ --dsr-info: #2563C0;
332
+ --dsr-info-soft: #2563C01A;
333
+ --dsr-info-line: #2563C059;
334
+
335
+ --dsr-head-bg: rgba(239, 238, 236, .94);
336
+ --dsr-nav-bg: rgba(250, 248, 245, .94);
337
+ --dsr-nav-muted: #6E6A63;
338
+ --dsr-nav-active: #7A5A24;
339
+ --dsr-nav-badge-bg: #965A0B;
340
+ --dsr-nav-badge-text: #FFFFFF;
341
+ --dsr-composer-bg: rgba(250, 248, 245, .92);
342
+ --dsr-overlay: rgba(43, 43, 43, .4);
343
+ --dsr-code-bg: rgba(0, 0, 0, .06);
344
+ --dsr-shadow: rgba(43, 43, 43, .18);
345
+ --dsr-glow: rgba(198, 154, 78, .45);
346
+ --dsr-head-running-bg: linear-gradient(90deg, rgba(239, 238, 236, .94), rgba(230, 188, 123, .45), rgba(255, 255, 255, .65), rgba(230, 188, 123, .45), rgba(239, 238, 236, .94));
347
+ --dsr-head-running-line: rgba(122, 90, 36, .55);
348
+ --dsr-head-interrupted-bg: linear-gradient(90deg, rgba(239, 238, 236, .94), rgba(183, 66, 63, .18), rgba(255, 255, 255, .65), rgba(183, 66, 63, .18), rgba(239, 238, 236, .94));
349
+ --dsr-head-interrupted-line: rgba(183, 66, 63, .55);
350
+ }
19
351
  }
20
352
 
353
+ /* ============ 基础 ============ */
21
354
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
22
355
 
356
+ input::placeholder, textarea::placeholder { color: var(--dsr-text-disabled); opacity: 1; }
357
+
23
358
  html, body {
24
359
  margin: 0;
25
360
  padding: 0;
26
- background: var(--bg);
27
- color: var(--text);
361
+ background: var(--dsr-bg);
362
+ color: var(--dsr-text);
28
363
  font-family: system-ui, -apple-system, "PingFang SC", "Noto Sans CJK SC", sans-serif;
29
364
  font-size: 15px;
30
365
  line-height: 1.5;
31
366
  overscroll-behavior-y: none;
32
367
  }
33
368
 
34
- body { padding-bottom: calc(64px + var(--safe-b)); }
369
+ body { padding-bottom: calc(64px + var(--dsr-safe-b)); }
35
370
 
36
371
  .hidden { display: none !important; }
37
- .muted { color: var(--muted); font-size: 12px; }
372
+ .muted { color: var(--dsr-muted); font-size: 12px; }
38
373
 
39
374
  /* ---------- 顶栏 ---------- */
40
375
  .topbar {
41
376
  position: sticky; top: 0; z-index: 30;
42
377
  display: flex; align-items: center; justify-content: space-between;
43
- padding: calc(var(--safe-top) + 10px) 14px 10px;
378
+ padding: calc(var(--dsr-safe-top) + 10px) 14px 10px;
44
379
  /* 实色背景: 小米/MIUI WebView 后台恢复时 backdrop-filter 图层会丢, 顶栏整块消失 */
45
- background: var(--bg);
46
- border-bottom: 1px solid var(--line);
380
+ background: var(--dsr-bg);
381
+ border-bottom: 1px solid var(--dsr-line);
47
382
  }
48
383
  .brand { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: .5px; }
49
384
  .brand-dot {
50
385
  width: 10px; height: 10px; border-radius: 50%;
51
- background: linear-gradient(135deg, var(--blue), var(--purple));
52
- box-shadow: 0 0 12px rgba(91, 140, 255, .8);
386
+ background: linear-gradient(135deg, var(--dsr-brand-a), var(--dsr-brand-b));
387
+ box-shadow: 0 0 12px var(--dsr-glow);
53
388
  }
54
389
  .topbar-right { display: flex; align-items: center; gap: 8px; }
55
390
  .conn-badge {
56
391
  font-size: 12px; padding: 3px 9px; border-radius: 999px;
57
- border: 1px solid var(--line); color: var(--muted);
392
+ border: 1px solid var(--dsr-line); color: var(--dsr-muted);
58
393
  }
59
- .conn-badge.on { color: var(--cyan); border-color: rgba(125, 207, 255, .45); background: rgba(125, 207, 255, .08); }
60
- .conn-badge.off { color: var(--orange); border-color: rgba(255, 158, 100, .45); background: rgba(255, 158, 100, .08); }
394
+ .conn-badge.on { color: var(--dsr-success); border-color: var(--dsr-success-line); background: var(--dsr-success-soft); }
395
+ .conn-badge.off { color: var(--dsr-warning); border-color: var(--dsr-warning-line); background: var(--dsr-warning-soft); }
61
396
 
62
397
  /* ---------- 按钮 ---------- */
63
398
  button {
@@ -66,27 +401,29 @@ button {
66
401
  }
67
402
  .icon-btn {
68
403
  width: 34px; height: 34px; border-radius: 10px;
69
- background: var(--panel); border: 1px solid var(--line);
404
+ background: var(--dsr-panel); border: 1px solid var(--dsr-line);
70
405
  font-size: 17px; display: grid; place-items: center;
71
406
  }
72
- .icon-btn:active { background: var(--panel-2); }
407
+ .icon-btn:active { background: var(--dsr-panel-2); }
73
408
  .mini-btn {
74
409
  padding: 5px 11px; border-radius: 9px; font-size: 13px;
75
- background: var(--panel); border: 1px solid var(--line); color: var(--cyan);
410
+ background: var(--dsr-panel); border: 1px solid var(--dsr-line); color: var(--dsr-accent-strong);
411
+ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
412
+ flex-shrink: 0;
76
413
  }
77
- .mini-btn:active { background: var(--panel-2); }
414
+ .mini-btn:active { background: var(--dsr-panel-2); }
78
415
  .btn {
79
416
  flex: 1; padding: 11px 14px; border-radius: 12px; font-size: 15px; font-weight: 600;
80
- border: 1px solid var(--line);
417
+ border: 1px solid var(--dsr-line);
81
418
  }
82
- .btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
83
- .btn.subtle { background: var(--panel); color: var(--muted); }
419
+ .btn.primary { background: var(--dsr-accent); border-color: var(--dsr-accent); color: var(--dsr-on-accent); }
420
+ .btn.subtle { background: var(--dsr-panel); color: var(--dsr-muted); }
84
421
  .danger-btn {
85
422
  padding: 7px 13px; border-radius: 10px; font-size: 13px; font-weight: 600;
86
- background: rgba(255, 143, 107, .14); color: var(--danger);
87
- border: 1px solid rgba(255, 143, 107, .4);
423
+ background: var(--dsr-error-soft); color: var(--dsr-error);
424
+ border: 1px solid var(--dsr-error-line);
88
425
  }
89
- .danger-btn:active { background: rgba(255, 143, 107, .25); }
426
+ .danger-btn:active { background: var(--dsr-error-line); }
90
427
 
91
428
  /* ---------- 主体 ---------- */
92
429
  .main { padding: 12px 12px 20px; max-width: 720px; margin: 0 auto; }
@@ -97,18 +434,18 @@ button {
97
434
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px;
98
435
  }
99
436
  .stat {
100
- background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
437
+ background: var(--dsr-panel); border: 1px solid var(--dsr-line); border-radius: var(--dsr-radius);
101
438
  padding: 10px 12px;
102
439
  }
103
440
  .stat .v { font-size: 21px; font-weight: 700; }
104
- .stat .k { font-size: 11px; color: var(--muted); }
105
- .stat.running .v { color: var(--orange); }
106
- .stat.pending .v { color: var(--purple); }
107
- .stat.ctx .v { color: var(--cyan); }
441
+ .stat .k { font-size: 11px; color: var(--dsr-muted); }
442
+ .stat.running .v { color: var(--dsr-warning); }
443
+ .stat.pending .v { color: var(--dsr-accent-2); }
444
+ .stat.ctx .v { color: var(--dsr-info); }
108
445
 
109
446
  .section-head {
110
447
  display: flex; align-items: center; justify-content: space-between;
111
- margin: 14px 2px 8px; font-size: 13px; font-weight: 700; color: var(--muted);
448
+ margin: 14px 2px 8px; font-size: 13px; font-weight: 700; color: var(--dsr-muted);
112
449
  letter-spacing: 1px;
113
450
  }
114
451
  .section-head.small { margin-top: 6px; }
@@ -116,27 +453,27 @@ button {
116
453
  /* ---------- 会话列表 ---------- */
117
454
  .session-list { display: flex; flex-direction: column; gap: 8px; }
118
455
  .session-card {
119
- background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
456
+ background: var(--dsr-panel); border: 1px solid var(--dsr-line); border-radius: var(--dsr-radius);
120
457
  padding: 12px 13px; position: relative; overflow: hidden;
121
458
  }
122
- .session-card:active { background: var(--panel-2); }
123
- .session-card.current { border-color: rgba(91, 140, 255, .6); box-shadow: 0 0 0 1px rgba(91, 140, 255, .25); }
459
+ .session-card:active { background: var(--dsr-panel-2); }
460
+ .session-card.current { border-color: var(--dsr-accent-line); box-shadow: 0 0 0 1px var(--dsr-accent-soft); }
124
461
  .sc-title {
125
462
  font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden;
126
463
  text-overflow: ellipsis; padding-right: 44px;
127
464
  }
128
- .sc-meta { display: flex; gap: 8px; align-items: center; margin-top: 4px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
129
- .sc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); display: inline-block; }
130
- .sc-dot.running { background: var(--orange); box-shadow: 0 0 8px rgba(255, 158, 100, .9); animation: pulse 1.6s infinite; }
131
- .sc-dot.pending { background: var(--purple); box-shadow: 0 0 8px rgba(180, 140, 255, .9); }
465
+ .sc-meta { display: flex; gap: 8px; align-items: center; margin-top: 4px; font-size: 12px; color: var(--dsr-muted); flex-wrap: wrap; }
466
+ .sc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dsr-line); display: inline-block; }
467
+ .sc-dot.running { background: var(--dsr-warning); box-shadow: 0 0 8px var(--dsr-warning-line); animation: pulse 1.6s infinite; }
468
+ .sc-dot.pending { background: var(--dsr-accent-2); box-shadow: 0 0 8px var(--dsr-accent-2-line); }
132
469
  @keyframes pulse { 50% { opacity: .45; } }
133
470
  .sc-badge {
134
471
  font-size: 11px; padding: 1px 7px; border-radius: 999px;
135
- background: rgba(180, 140, 255, .13); color: var(--purple); border: 1px solid rgba(180, 140, 255, .3);
472
+ background: var(--dsr-accent-2-soft); color: var(--dsr-accent-2); border: 1px solid var(--dsr-accent-2-line);
136
473
  }
137
- .sc-badge.goal-active { background: rgba(125, 207, 255, .12); color: var(--cyan); border-color: rgba(125, 207, 255, .35); }
138
- .sc-arrow { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
139
- .empty { text-align: center; color: var(--muted); padding: 34px 0; }
474
+ .sc-badge.goal-active { background: var(--dsr-info-soft); color: var(--dsr-info); border-color: var(--dsr-info-line); }
475
+ .sc-arrow { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--dsr-muted); }
476
+ .empty { text-align: center; color: var(--dsr-muted); padding: 34px 0; }
140
477
 
141
478
  /* ---------- 会话详情 ---------- */
142
479
  body.in-session { overflow: hidden; height: 100vh; height: 100dvh; }
@@ -157,25 +494,25 @@ body.in-session .view {
157
494
  .session-head {
158
495
  display: flex; align-items: center; gap: 8px;
159
496
  flex-shrink: 0;
160
- padding: calc(var(--safe-top) + 8px) 12px 8px;
497
+ padding: calc(var(--dsr-safe-top) + 8px) 12px 8px;
161
498
  margin: -12px -12px 6px;
162
- background: rgba(11, 14, 26, .94);
499
+ background: var(--dsr-head-bg);
163
500
  backdrop-filter: blur(12px);
164
- border-bottom: 1px solid var(--line);
501
+ border-bottom: 1px solid var(--dsr-line);
165
502
  }
166
- /* 会话运行状态可视化(类似 Web UI deepdiving):
167
- 运行中 = 蓝色流动渐变; 出错/中断 = 橙红; 空闲 = 原始样式 */
503
+ /* 会话运行状态可视化:
504
+ 运行中 = 流动渐变; 出错/中断 = 暖色; 空闲 = 原始样式 */
168
505
  .session-head.running {
169
- background: linear-gradient(90deg, rgba(11, 14, 26, .94), rgba(35, 65, 150, .92), rgba(125, 207, 255, .6), rgba(35, 65, 150, .92), rgba(11, 14, 26, .94));
506
+ background: var(--dsr-head-running-bg);
170
507
  background-size: 200% 100%;
171
508
  animation: session-running-flow 2.6s ease-in-out infinite alternate;
172
- border-bottom-color: rgba(91, 140, 255, .55);
509
+ border-bottom-color: var(--dsr-head-running-line);
173
510
  }
174
511
  .session-head.interrupted {
175
- background: linear-gradient(90deg, rgba(11, 14, 26, .94), rgba(90, 26, 12, .92), rgba(255, 158, 100, .55), rgba(90, 26, 12, .92), rgba(11, 14, 26, .94));
512
+ background: var(--dsr-head-interrupted-bg);
176
513
  background-size: 200% 100%;
177
514
  animation: session-running-flow 1.8s ease-in-out infinite alternate;
178
- border-bottom-color: rgba(255, 158, 100, .55);
515
+ border-bottom-color: var(--dsr-head-interrupted-line);
179
516
  }
180
517
  @keyframes session-running-flow {
181
518
  from { background-position: 0% 50%; }
@@ -186,30 +523,30 @@ body.in-session .view {
186
523
  .session-title {
187
524
  font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
188
525
  }
189
- .session-sub { font-size: 12px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
526
+ .session-sub { font-size: 12px; color: var(--dsr-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
190
527
  .cards {
191
528
  display: flex; flex-direction: column; gap: 8px; margin-top: 8px;
192
529
  flex-shrink: 0; max-height: 42vh; overflow-y: auto;
193
530
  }
194
531
  .card {
195
- background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
532
+ background: var(--dsr-panel); border: 1px solid var(--dsr-line); border-radius: var(--dsr-radius);
196
533
  padding: 11px 13px;
197
534
  }
198
- .card-title { font-size: 12px; color: var(--muted); font-weight: 700; letter-spacing: .6px; margin-bottom: 6px; }
535
+ .card-title { font-size: 12px; color: var(--dsr-muted); font-weight: 700; letter-spacing: .6px; margin-bottom: 6px; }
199
536
  .card-row { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 13px; }
200
- .card-row .k { color: var(--muted); }
537
+ .card-row .k { color: var(--dsr-muted); }
201
538
  .card-row .v { text-align: right; word-break: break-all; }
202
- .goal-obj { font-size: 13px; line-height: 1.55; color: var(--text); }
203
- .goal-phase { font-size: 12px; color: var(--cyan); margin-top: 3px; }
539
+ .goal-obj { font-size: 13px; line-height: 1.55; color: var(--dsr-text); }
540
+ .goal-phase { font-size: 12px; color: var(--dsr-info); margin-top: 3px; }
204
541
  .goal-actions { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
205
542
  .goal-actions .mini-btn { flex: 1; text-align: center; min-width: 64px; }
206
543
  .pill {
207
544
  display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 999px;
208
- background: rgba(91, 140, 255, .12); color: var(--blue); border: 1px solid rgba(91, 140, 255, .3);
545
+ background: var(--dsr-accent-soft); color: var(--dsr-accent-strong); border: 1px solid var(--dsr-accent-line);
209
546
  margin: 1px 3px 1px 0;
210
547
  }
211
- .pill.done { background: rgba(125, 207, 255, .12); color: var(--cyan); border-color: rgba(125, 207, 255, .3); }
212
- .pill.active { background: rgba(255, 158, 100, .12); color: var(--orange); border-color: rgba(255, 158, 100, .3); }
548
+ .pill.done { background: var(--dsr-success-soft); color: var(--dsr-success); border-color: var(--dsr-success-line); }
549
+ .pill.active { background: var(--dsr-warning-soft); color: var(--dsr-warning); border-color: var(--dsr-warning-line); }
213
550
 
214
551
  /* ---------- 历史 ---------- */
215
552
  .history-wrap {
@@ -234,286 +571,318 @@ body.in-session .view {
234
571
  }
235
572
  .rail-track {
236
573
  position: absolute; right: 8px; top: 4px; bottom: 4px; width: 4px;
237
- border-radius: 2px; background: var(--line);
574
+ border-radius: 2px; background: var(--dsr-line);
238
575
  }
239
576
  .rail-thumb {
240
577
  position: absolute; right: 6px; width: 8px; min-height: 32px;
241
- border-radius: 4px; background: var(--blue); opacity: .85;
578
+ border-radius: 4px; background: var(--dsr-accent); opacity: .85;
242
579
  }
243
580
  .rail-nodes { position: absolute; inset: 0; }
244
581
  .rail-node {
245
582
  position: absolute; right: 7px; width: 6px; height: 6px;
246
- border-radius: 50%; background: var(--orange); transform: translateY(-3px);
247
- box-shadow: 0 0 4px rgba(255, 158, 100, .8);
583
+ border-radius: 50%; background: var(--dsr-warning); transform: translateY(-3px);
584
+ box-shadow: 0 0 4px var(--dsr-warning-line);
248
585
  }
249
- .rail-node.active { background: #fff; width: 8px; height: 8px; right: 6px; }
250
- .msg { max-width: 94%; border-radius: var(--radius); padding: 10px 12px; word-break: break-word; }
251
- .msg.user { align-self: flex-end; background: var(--blue); color: #fff; }
252
- .msg.assistant { align-self: flex-start; background: var(--panel); border: 1px solid var(--line); }
586
+ .rail-node.active { background: var(--dsr-text); width: 8px; height: 8px; right: 6px; }
587
+ .msg { max-width: 94%; border-radius: var(--dsr-radius); padding: 10px 12px; word-break: break-word; }
588
+ .msg.user { align-self: flex-end; background: var(--dsr-accent); color: var(--dsr-on-accent); }
589
+ .msg.assistant { align-self: flex-start; background: var(--dsr-panel); border: 1px solid var(--dsr-line); }
253
590
  .msg .role { font-size: 11px; opacity: .65; margin-bottom: 3px; }
254
591
  .msg pre {
255
- background: rgba(0,0,0,.28); border-radius: 8px; padding: 8px 10px; overflow-x: auto;
592
+ background: var(--dsr-code-bg); border-radius: 8px; padding: 8px 10px; overflow-x: auto;
256
593
  font-size: 12px; max-height: 220px; overflow-y: auto;
257
594
  }
258
595
  .msg img { max-width: 100%; border-radius: 8px; }
259
596
  .msg p { margin: 4px 0; }
260
597
  .msg p:first-child { margin-top: 0; } .msg p:last-child { margin-bottom: 0; }
261
598
  .msg ul, .msg ol { margin: 4px 0; padding-left: 20px; }
262
- .msg code { font-family: ui-monospace, monospace; font-size: .9em; background: rgba(91,140,255,.12); padding: 0 4px; border-radius: 4px; }
599
+ .msg code { font-family: ui-monospace, monospace; font-size: .9em; background: var(--dsr-accent-soft); padding: 0 4px; border-radius: 4px; }
263
600
 
264
601
  .event {
265
- align-self: center; font-size: 11px; color: var(--muted);
266
- background: var(--panel); border: 1px dashed var(--line);
602
+ align-self: center; font-size: 11px; color: var(--dsr-muted);
603
+ background: var(--dsr-panel); border: 1px dashed var(--dsr-divider);
267
604
  padding: 5px 12px; border-radius: 999px; max-width: 92%;
268
605
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
269
606
  }
270
607
  .tool {
271
- align-self: flex-start; max-width: 96%; background: var(--panel);
272
- border: 1px solid var(--line); border-left: 3px solid var(--purple);
608
+ align-self: flex-start; max-width: 96%; background: var(--dsr-panel);
609
+ border: 1px solid var(--dsr-line); border-left: 3px solid var(--dsr-accent-2);
273
610
  border-radius: 10px; padding: 8px 11px; font-size: 13px;
274
611
  }
275
- .tool summary { cursor: pointer; color: var(--purple); font-weight: 600; }
276
- .tool-meta-inline { font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 6px; }
277
- .tool pre { margin: 6px 0 0; font-size: 11.5px; background: rgba(0,0,0,.28); border-radius: 8px; padding: 8px; overflow-x: auto; max-height: 180px; overflow-y: auto; }
278
- .tool .tool-meta { font-size: 11px; color: var(--muted); margin-top: 4px; }
612
+ .tool summary { cursor: pointer; color: var(--dsr-accent-2); font-weight: 600; }
613
+ .tool-meta-inline { font-size: 11px; color: var(--dsr-muted); font-weight: 400; margin-left: 6px; }
614
+ .tool pre { margin: 6px 0 0; font-size: 11.5px; background: var(--dsr-code-bg); border-radius: 8px; padding: 8px; overflow-x: auto; max-height: 180px; overflow-y: auto; }
615
+ .tool .tool-meta { font-size: 11px; color: var(--dsr-muted); margin-top: 4px; }
279
616
  .tool-text {
280
617
  white-space: pre-wrap; word-break: break-word;
281
618
  font-size: 12.5px; line-height: 1.6;
282
- background: rgba(0,0,0,.28); border-radius: 8px;
619
+ background: var(--dsr-code-bg); border-radius: 8px;
283
620
  padding: 8px 10px; margin-top: 6px;
284
621
  max-height: 320px; overflow-y: auto;
285
622
  }
286
- .tool.result { border-left-color: var(--cyan); }
287
- .tool.result summary { color: var(--cyan); }
288
- .tool.error { border-left-color: var(--orange); }
289
- .tool.error summary { color: var(--orange); }
623
+ .tool.result { border-left-color: var(--dsr-info); }
624
+ .tool.result summary { color: var(--dsr-info); }
625
+ .tool.error { border-left-color: var(--dsr-error); }
626
+ .tool.error summary { color: var(--dsr-error); }
290
627
 
291
628
  /* ---------- composer ---------- */
292
629
  .composer-wrap {
293
- position: fixed; left: 0; right: 0; bottom: calc(58px + var(--safe-b)); z-index: 20;
630
+ position: fixed; left: 0; right: 0; bottom: calc(58px + var(--dsr-safe-b)); z-index: 20;
294
631
  max-width: 720px; margin: 0 auto;
295
- background: rgba(11, 14, 26, .92); backdrop-filter: blur(10px);
296
- border-top: 1px solid var(--line);
632
+ background: var(--dsr-composer-bg); backdrop-filter: blur(10px);
633
+ border-top: 1px solid var(--dsr-line);
297
634
  }
298
635
  .composer {
299
636
  display: flex; gap: 8px; align-items: flex-end;
300
- padding: 8px 12px calc(8px + var(--safe-b));
637
+ padding: 8px 12px calc(8px + var(--dsr-safe-b));
301
638
  }
302
639
  .composer textarea {
303
- flex: 1; resize: none; background: var(--panel); color: var(--text);
304
- border: 1px solid var(--line); border-radius: 16px;
640
+ flex: 1; resize: none; background: var(--dsr-panel); color: var(--dsr-text);
641
+ border: 1px solid var(--dsr-line); border-radius: 16px;
305
642
  padding: 10px 14px; font: inherit; font-size: 15px; line-height: 1.4;
306
643
  max-height: 120px; outline: none;
307
644
  }
308
- .composer textarea:focus { border-color: rgba(91, 140, 255, .6); }
645
+ .composer textarea:focus { border-color: var(--dsr-accent-line); }
309
646
  .plus-btn {
310
647
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 14px;
311
- background: var(--panel); color: var(--cyan); border: 1px solid var(--line);
648
+ background: var(--dsr-panel); color: var(--dsr-info); border: 1px solid var(--dsr-line);
312
649
  font-size: 22px; font-weight: 700; line-height: 1;
313
650
  }
314
- .plus-btn.active { background: rgba(125, 207, 255, .14); border-color: rgba(125, 207, 255, .45); }
651
+ .plus-btn.active { background: var(--dsr-info-soft); border-color: var(--dsr-info-line); }
315
652
  .send-btn {
316
653
  flex-shrink: 0; width: 46px; height: 42px; border-radius: 14px;
317
- background: var(--blue); color: #fff; font-weight: 700; font-size: 14px;
654
+ background: var(--dsr-accent); color: var(--dsr-on-accent); font-weight: 700; font-size: 14px;
318
655
  }
319
656
  .send-btn:disabled { opacity: .45; }
320
657
  .composer-menu {
321
658
  max-height: min(46vh, 340px); overflow-y: auto;
322
659
  padding: 10px 12px; display: flex; flex-direction: column; gap: 12px;
323
- border-bottom: 1px solid var(--line);
660
+ border-bottom: 1px solid var(--dsr-line);
324
661
  }
325
662
  .menu-title {
326
- font-size: 12px; color: var(--muted); font-weight: 700; letter-spacing: .5px;
663
+ font-size: 12px; color: var(--dsr-muted); font-weight: 700; letter-spacing: .5px;
327
664
  margin-bottom: 7px; display: flex; align-items: center; justify-content: space-between;
328
665
  }
329
666
  .menu-chips { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
330
667
  .menu-chip {
331
- background: var(--panel); color: var(--text); border: 1px solid var(--line);
668
+ background: var(--dsr-panel); color: var(--dsr-text); border: 1px solid var(--dsr-line);
332
669
  border-radius: 999px; padding: 6px 11px; font-size: 12.5px; cursor: pointer;
333
670
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
334
671
  }
335
- .menu-chip:active { background: rgba(91, 140, 255, .16); border-color: rgba(91, 140, 255, .5); }
336
- .menu-chip.current { color: var(--cyan); border-color: rgba(125, 207, 255, .45); background: rgba(125, 207, 255, .08); }
337
- .menu-chip.danger { color: var(--orange); border-color: rgba(255, 158, 100, .4); }
672
+ .menu-chip:active { background: var(--dsr-accent-soft); border-color: var(--dsr-accent-line); }
673
+ .menu-chip.current { color: var(--dsr-info); border-color: var(--dsr-info-line); background: var(--dsr-info-soft); }
674
+ .menu-chip.danger { color: var(--dsr-warning); border-color: var(--dsr-warning-line); }
338
675
  .menu-models { display: flex; flex-wrap: wrap; gap: 7px; }
339
676
  .model-chip {
340
- background: var(--panel); border: 1px solid var(--line); color: var(--text);
677
+ background: var(--dsr-panel); border: 1px solid var(--dsr-line); color: var(--dsr-text);
341
678
  border-radius: 999px; padding: 6px 11px; font-size: 12.5px; cursor: pointer;
342
679
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
343
680
  }
344
- .model-chip.current { color: var(--cyan); border-color: rgba(125, 207, 255, .45); background: rgba(125, 207, 255, .08); }
345
- .model-provider { font-size: 11px; color: var(--muted); margin: 7px 0 5px; }
681
+ .model-chip.current { color: var(--dsr-info); border-color: var(--dsr-info-line); background: var(--dsr-info-soft); }
682
+ .model-provider { font-size: 11px; color: var(--dsr-muted); margin: 7px 0 5px; }
346
683
  body.in-session .main { padding-bottom: 84px; }
347
684
 
348
685
  /* ---------- 待办 ---------- */
349
686
  .pending-list, .jobs-list { display: flex; flex-direction: column; gap: 8px; }
350
687
  .pending-card, .job-card {
351
- background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
688
+ background: var(--dsr-panel); border: 1px solid var(--dsr-line); border-radius: var(--dsr-radius);
352
689
  padding: 11px 13px;
353
690
  }
354
- .pending-card.approval { border-left: 3px solid var(--orange); }
355
- .pending-card.question { border-left: 3px solid var(--purple); }
691
+ .pending-card.approval { border-left: 3px solid var(--dsr-warning); }
692
+ .pending-card.question { border-left: 3px solid var(--dsr-accent-2); }
356
693
  .pc-title { font-weight: 600; font-size: 14px; }
357
- .pc-desc { font-size: 12.5px; color: var(--muted); margin-top: 3px; overflow-wrap: anywhere; }
358
- .pc-session { font-size: 11px; color: var(--blue); margin-top: 5px; }
694
+ .pc-desc { font-size: 12.5px; color: var(--dsr-muted); margin-top: 3px; overflow-wrap: anywhere; }
695
+ .pc-session { font-size: 11px; color: var(--dsr-accent-strong); margin-top: 5px; }
359
696
  .job-card .job-name { font-weight: 600; font-size: 14px; }
360
- .job-state { font-size: 12px; color: var(--muted); margin-top: 3px; }
697
+ .job-state { font-size: 12px; color: var(--dsr-muted); margin-top: 3px; }
361
698
 
362
699
  /* ---------- 文件传输 ---------- */
363
700
  .fs-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
364
701
  .fs-path {
365
- flex: 1; min-width: 0; font-size: 12.5px; color: var(--muted);
366
- background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
702
+ flex: 1; min-width: 0; font-size: 12.5px; color: var(--dsr-muted);
703
+ background: var(--dsr-panel); border: 1px solid var(--dsr-line); border-radius: 10px;
367
704
  padding: 8px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
368
705
  }
369
706
  .fs-progress {
370
707
  display: flex; align-items: center; gap: 10px;
371
- background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
708
+ background: var(--dsr-panel); border: 1px solid var(--dsr-line); border-radius: 10px;
372
709
  padding: 9px 11px; margin-bottom: 10px;
373
710
  }
374
711
  .fs-progress-track {
375
- flex: 1; height: 7px; border-radius: 999px; background: var(--panel-2); overflow: hidden;
712
+ flex: 1; height: 7px; border-radius: 999px; background: var(--dsr-panel-2); overflow: hidden;
376
713
  }
377
714
  .fs-progress-bar {
378
715
  height: 100%; width: 0%; border-radius: 999px;
379
- background: linear-gradient(90deg, var(--blue), var(--cyan));
716
+ background: linear-gradient(90deg, var(--dsr-accent), var(--dsr-info));
380
717
  transition: width .15s ease;
381
718
  }
382
719
  .fs-progress-text { flex-shrink: 0; min-width: 112px; text-align: right; }
383
720
  .fs-progress-actions { flex-shrink: 0; display: flex; gap: 6px; }
384
721
  .fs-progress-actions .mini-btn { padding: 4px 10px; font-size: 12px; }
385
722
  .fs-pull {
386
- height: 0; overflow: hidden; text-align: center; font-size: 12px; color: var(--cyan);
723
+ height: 0; overflow: hidden; text-align: center; font-size: 12px; color: var(--dsr-info);
387
724
  transition: height .12s ease; line-height: 26px;
388
725
  }
389
726
  .fs-list { display: flex; flex-direction: column; gap: 8px; }
390
727
  .fs-row {
391
728
  display: flex; align-items: center; gap: 11px;
392
- background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
729
+ background: var(--dsr-panel); border: 1px solid var(--dsr-line); border-radius: var(--dsr-radius);
393
730
  padding: 11px 13px; min-width: 0;
394
731
  }
395
- .fs-row:active { background: var(--panel-2); }
732
+ .fs-row:active { background: var(--dsr-panel-2); }
396
733
  .fs-ico { flex-shrink: 0; font-size: 22px; }
397
734
  .fs-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
398
735
  .fs-name {
399
736
  font-size: 14.5px; font-weight: 600; white-space: nowrap;
400
737
  overflow: hidden; text-overflow: ellipsis;
401
738
  }
402
- .fs-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
403
- .fs-arrow { flex-shrink: 0; color: var(--muted); font-size: 18px; }
739
+ .fs-sub { font-size: 12px; color: var(--dsr-muted); margin-top: 1px; }
740
+ .fs-arrow { flex-shrink: 0; color: var(--dsr-muted); font-size: 18px; }
404
741
 
405
742
  /* ---------- 设置 ---------- */
406
743
  .settings-group {
407
- background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
744
+ background: var(--dsr-panel); border: 1px solid var(--dsr-line); border-radius: var(--dsr-radius);
408
745
  margin-bottom: 10px; overflow: hidden;
409
746
  }
410
747
  .setting-row {
411
748
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
412
749
  padding: 13px 14px;
413
750
  }
414
- .setting-row + .setting-row { border-top: 1px solid var(--line); }
415
- .setting-name { font-size: 14.5px; font-weight: 600; }
416
- .setting-desc { font-size: 12px; color: var(--muted); margin-top: 2px; word-break: break-all; }
417
- .about { text-align: center; color: var(--muted); font-size: 12px; margin-top: 16px; line-height: 1.8; }
751
+ .setting-row > div:first-child { flex: 1; min-width: 0; }
752
+ .setting-row + .setting-row { border-top: 1px solid var(--dsr-line); }
753
+ .setting-name { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
754
+ .setting-desc { font-size: 12px; color: var(--dsr-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
755
+ .setting-desc.expanded { white-space: normal; overflow: visible; text-overflow: clip; word-break: break-word; }
756
+ .about { text-align: center; color: var(--dsr-muted); font-size: 12px; margin-top: 16px; line-height: 1.8; }
418
757
 
419
758
  /* 多服务器列表 */
420
759
  .server-list { padding: 0 14px 10px; display: flex; flex-direction: column; gap: 6px; }
421
- .server-empty { font-size: 12px; color: var(--muted); }
760
+ .server-empty { font-size: 12px; color: var(--dsr-muted); }
422
761
  .server-row {
423
762
  display: flex; align-items: center; gap: 8px;
424
- background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
763
+ background: var(--dsr-bg-2); border: 1px solid var(--dsr-line); border-radius: 10px;
425
764
  padding: 8px 10px;
426
765
  }
427
- .server-row.active { border-color: rgba(125, 207, 255, .55); background: rgba(125, 207, 255, .06); }
766
+ .server-row.active { border-color: var(--dsr-info-line); background: var(--dsr-info-soft); }
428
767
  .server-url { flex: 1; min-width: 0; font-size: 12.5px; word-break: break-all; }
429
768
  .server-badge {
430
769
  flex-shrink: 0; font-size: 11px; padding: 1px 7px; border-radius: 999px;
431
- background: rgba(91, 140, 255, .12); color: var(--blue);
432
- border: 1px solid rgba(91, 140, 255, .3); white-space: nowrap;
770
+ background: var(--dsr-accent-soft); color: var(--dsr-accent-strong);
771
+ border: 1px solid var(--dsr-accent-line); white-space: nowrap;
433
772
  }
434
- .server-badge.good { background: rgba(125, 207, 255, .1); color: var(--cyan); border-color: rgba(125, 207, 255, .35); }
435
- .server-badge.bad { background: rgba(255, 158, 100, .1); color: var(--orange); border-color: rgba(255, 158, 100, .35); }
773
+ .server-badge.good { background: var(--dsr-success-soft); color: var(--dsr-success); border-color: var(--dsr-success-line); }
774
+ .server-badge.bad { background: var(--dsr-warning-soft); color: var(--dsr-warning); border-color: var(--dsr-warning-line); }
436
775
  .server-del {
437
776
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px;
438
- background: var(--panel); border: 1px solid var(--line); color: var(--muted); font-size: 12px;
777
+ background: var(--dsr-panel); border: 1px solid var(--dsr-line); color: var(--dsr-muted); font-size: 12px;
439
778
  }
440
- .server-del:active { color: var(--danger); }
779
+ .server-del:active { color: var(--dsr-error); }
441
780
  .server-add { display: flex; gap: 8px; padding: 0 14px 13px; }
442
781
  .server-add input {
443
- flex: 1; min-width: 0; background: var(--bg-2); color: var(--text);
444
- border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px;
782
+ flex: 1; min-width: 0; background: var(--dsr-bg-2); color: var(--dsr-text);
783
+ border: 1px solid var(--dsr-line); border-radius: 10px; padding: 8px 10px;
445
784
  font: inherit; font-size: 13px; outline: none;
446
785
  }
447
- .server-add input:focus { border-color: rgba(91, 140, 255, .6); }
786
+ .server-add input:focus { border-color: var(--dsr-accent-line); }
448
787
 
449
788
  /* 开关 */
450
789
  .switch { position: relative; display: inline-block; width: 46px; height: 27px; flex-shrink: 0; }
451
790
  .switch input { opacity: 0; width: 0; height: 0; }
452
791
  .slider {
453
- position: absolute; inset: 0; border-radius: 999px; background: var(--panel-2);
454
- border: 1px solid var(--line); transition: .2s;
792
+ position: absolute; inset: 0; border-radius: 999px; background: var(--dsr-panel-2);
793
+ border: 1px solid var(--dsr-line); transition: .2s;
455
794
  }
456
795
  .slider::before {
457
796
  content: ''; position: absolute; width: 19px; height: 19px; border-radius: 50%;
458
- left: 3px; top: 3px; background: var(--muted); transition: .2s;
797
+ left: 3px; top: 3px; background: var(--dsr-muted); transition: .2s;
459
798
  }
460
- .switch input:checked + .slider { background: rgba(91, 140, 255, .3); border-color: var(--blue); }
461
- .switch input:checked + .slider::before { transform: translateX(19px); background: var(--blue); }
799
+ .switch input:checked + .slider { background: var(--dsr-accent-soft); border-color: var(--dsr-accent); }
800
+ .switch input:checked + .slider::before { transform: translateX(19px); background: var(--dsr-accent); }
462
801
 
463
802
  /* ---------- 底部导航 ---------- */
464
803
  .bottom-nav {
465
804
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
466
- display: flex; background: rgba(16, 21, 40, .94); backdrop-filter: blur(12px);
467
- border-top: 1px solid var(--line);
468
- padding-bottom: var(--safe-b);
805
+ display: flex; background: var(--dsr-nav-bg); backdrop-filter: blur(12px);
806
+ border-top: 1px solid var(--dsr-line);
807
+ padding-bottom: var(--dsr-safe-b);
469
808
  }
470
809
  .nav-btn {
471
810
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
472
- padding: 8px 0 7px; color: var(--muted); font-size: 11px; position: relative;
811
+ padding: 8px 0 7px; color: var(--dsr-nav-muted); font-size: 11px; position: relative;
473
812
  }
474
813
  .nav-btn .nav-ico { font-size: 19px; line-height: 1; }
475
- .nav-btn.active { color: var(--blue); }
814
+ .nav-btn.active { color: var(--dsr-nav-active); }
476
815
  .nav-badge {
477
816
  position: absolute; top: 4px; left: calc(50% + 10px);
478
- background: var(--orange); color: #1a120b; border-radius: 999px;
817
+ background: var(--dsr-nav-badge-bg); color: var(--dsr-nav-badge-text); border-radius: 999px;
479
818
  font-size: 10px; font-weight: 800; padding: 0 6px; line-height: 16px;
480
819
  }
481
820
 
482
821
  /* ---------- 模态 ---------- */
483
822
  .modal {
484
823
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center;
485
- background: rgba(5, 7, 14, .66); backdrop-filter: blur(3px); padding: 18px;
824
+ background: var(--dsr-overlay); backdrop-filter: blur(3px); padding: 18px;
486
825
  }
487
826
  .modal-card {
488
827
  width: 100%; max-width: 460px; max-height: 82vh; overflow-y: auto;
489
- background: var(--bg-2); border: 1px solid var(--line); border-radius: 18px;
828
+ background: var(--dsr-bg-2); border: 1px solid var(--dsr-line); border-radius: 18px;
490
829
  padding: 16px;
491
830
  }
492
831
  .modal-title { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
493
832
  .modal-body { font-size: 14px; }
494
- .modal-body .q-item { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; margin-bottom: 10px; }
833
+ .modal-body .q-item { background: var(--dsr-panel); border: 1px solid var(--dsr-line); border-radius: 12px; padding: 11px 12px; margin-bottom: 10px; }
495
834
  .modal-body .q-text { font-weight: 600; margin-bottom: 8px; }
496
835
  .modal-body .q-option {
497
836
  display: flex; gap: 8px; align-items: flex-start; padding: 7px 6px; border-radius: 8px;
498
837
  }
499
- .modal-body input[type='radio'], .modal-body input[type='checkbox'] { accent-color: var(--blue); margin-top: 3px; }
838
+ .modal-body input[type='radio'], .modal-body input[type='checkbox'] { accent-color: var(--dsr-accent); margin-top: 3px; }
500
839
  .modal-body textarea {
501
- width: 100%; margin-top: 8px; background: var(--panel); color: var(--text);
502
- border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; font: inherit; outline: none;
840
+ width: 100%; margin-top: 8px; background: var(--dsr-panel); color: var(--dsr-text);
841
+ border: 1px solid var(--dsr-line); border-radius: 10px; padding: 9px 11px; font: inherit; outline: none;
503
842
  }
504
843
  .modal-actions { display: flex; gap: 9px; margin-top: 14px; }
505
844
  .kv { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 3px 0; }
506
- .kv .k { color: var(--muted); } .kv .v { word-break: break-all; text-align: right; }
845
+ .kv .k { color: var(--dsr-muted); } .kv .v { word-break: break-all; text-align: right; }
846
+
847
+ /* ---------- 皮肤选择面板 ---------- */
848
+ .theme-swatch-dot {
849
+ width: 10px; height: 10px; border-radius: 50%; display: inline-block;
850
+ margin-right: 5px; vertical-align: -1px; background: var(--dsr-bg);
851
+ border: 1px solid rgba(127, 127, 127, .35); flex-shrink: 0;
852
+ }
853
+ @media (max-width: 720px) {
854
+ #btn-theme .t-label { display: none; }
855
+ #btn-theme .theme-swatch-dot { margin-right: 0; }
856
+ }
857
+ .theme-panel-list { display: flex; flex-direction: column; gap: 8px; }
858
+ .theme-option {
859
+ display: flex; align-items: center; gap: 10px; min-width: 0; width: 100%;
860
+ padding: 11px 12px; border-radius: 12px; text-align: left;
861
+ background: var(--dsr-panel); border: 1px solid var(--dsr-line);
862
+ white-space: nowrap;
863
+ }
864
+ .theme-option:active { background: var(--dsr-panel-2); }
865
+ .theme-option.current { border-color: var(--dsr-accent-line); box-shadow: 0 0 0 1px var(--dsr-accent-soft); }
866
+ .theme-swatches { display: inline-flex; gap: 4px; flex-shrink: 0; }
867
+ .theme-swatches i {
868
+ width: 14px; height: 14px; border-radius: 50%; display: block;
869
+ border: 1px solid rgba(127, 127, 127, .35);
870
+ }
871
+ .theme-option .theme-name {
872
+ flex: 1; min-width: 0; font-size: 14px; font-weight: 600;
873
+ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
874
+ }
875
+ .theme-option .theme-check { flex-shrink: 0; color: var(--dsr-accent-strong); font-size: 14px; font-weight: 700; }
507
876
 
508
877
  /* ---------- toast ---------- */
509
878
  .toast {
510
- position: fixed; top: calc(58px + var(--safe-top)); left: 50%; transform: translateX(-50%);
511
- z-index: 60; background: var(--panel-2); border: 1px solid var(--line);
512
- color: var(--text); padding: 9px 16px; border-radius: 999px; font-size: 13px;
513
- max-width: 88vw; box-shadow: 0 6px 24px rgba(0,0,0,.4);
879
+ position: fixed; top: calc(58px + var(--dsr-safe-top)); left: 50%; transform: translateX(-50%);
880
+ z-index: 60; background: var(--dsr-panel-2); border: 1px solid var(--dsr-line);
881
+ color: var(--dsr-text); padding: 9px 16px; border-radius: 999px; font-size: 13px;
882
+ max-width: 88vw; box-shadow: 0 6px 24px var(--dsr-shadow);
514
883
  }
515
- .toast.err { border-color: rgba(255, 143, 107, .6); color: var(--danger); }
516
- .toast.ok { border-color: rgba(125, 207, 255, .6); color: var(--cyan); }
884
+ .toast.err { border-color: var(--dsr-error-line); color: var(--dsr-error); }
885
+ .toast.ok { border-color: var(--dsr-success-line); color: var(--dsr-success); }
517
886
 
518
887
  @media (min-width: 560px) {
519
888
  .stat-strip { grid-template-columns: repeat(3, 1fr); }