codexmate 0.1.27 → 0.1.28

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.
@@ -0,0 +1,1355 @@
1
+ /*
2
+ * Codex Mate Web UI - dark theme overrides.
3
+ *
4
+ * The token section is hand maintained in web-ui/styles/theme-dark-tokens.css.
5
+ * The component section below is GENERATED - do not edit by hand.
6
+ * Regenerate after changing any stylesheet:
7
+ * node scripts/generate-dark-theme-css.mjs
8
+ */
9
+
10
+ /* ============================================
11
+ Codex Mate Web UI - 暗色主题令牌覆盖
12
+ 作用于 <html data-theme="dark">;浅色默认值见 base-theme.css
13
+ ============================================ */
14
+ :root[data-theme="dark"] {
15
+ color-scheme: dark;
16
+
17
+ /* 品牌色:保留暖橙 accent,提亮适配暗底 */
18
+ --color-brand: #D68F79;
19
+ --color-brand-dark: #C07A63;
20
+ --color-brand-light: rgba(214, 143, 121, 0.16);
21
+ --color-brand-subtle: rgba(214, 143, 121, 0.24);
22
+
23
+ /* 中性灰层级底色 */
24
+ --color-bg: #17181A;
25
+ --color-surface: #1E1F22;
26
+ --color-surface-alt: #232427;
27
+ --color-surface-elevated: #26272B;
28
+ --color-surface-tint: rgba(30, 31, 34, 0.86);
29
+ --color-surface-chip: rgba(30, 31, 34, 0.76);
30
+ --color-text-primary: #ECE8E4;
31
+ --color-text-secondary: #B5ABA4;
32
+ --color-text-tertiary: #8F847D;
33
+ --color-text-muted: #6E6259;
34
+ --color-border: rgba(255, 255, 255, 0.09);
35
+ --color-border-soft: rgba(255, 255, 255, 0.06);
36
+ --color-border-strong: rgba(255, 255, 255, 0.2);
37
+
38
+ --color-success: #6DB08E;
39
+ --color-error: #D6766B;
40
+
41
+ /* Delta 指示色 */
42
+ --color-delta-up: #6FBE7C;
43
+ --color-delta-down: #EE7B6E;
44
+
45
+ /* 热力图色阶:品牌橙 alpha 阶梯 */
46
+ --color-heatmap-1: rgba(214, 143, 121, 0.18);
47
+ --color-heatmap-2: rgba(214, 143, 121, 0.38);
48
+ --color-heatmap-3: rgba(214, 143, 121, 0.58);
49
+ --color-heatmap-4: rgba(214, 143, 121, 0.85);
50
+
51
+ --bg-warm-gradient:
52
+ radial-gradient(circle at 14% 8%, rgba(214, 143, 121, 0.05) 0%, rgba(214, 143, 121, 0) 32%),
53
+ radial-gradient(circle at 88% 0%, rgba(120, 132, 158, 0.05) 0%, rgba(120, 132, 158, 0) 30%),
54
+ linear-gradient(135deg, #1A1B1E 0%, #17181A 46%, #141517 100%);
55
+
56
+ --color-bg-topbar-strong: rgba(23, 24, 26, 0.96);
57
+ --color-bg-topbar-soft: rgba(23, 24, 26, 0.86);
58
+ --color-bg-topbar-clear: rgba(23, 24, 26, 0);
59
+
60
+ /* 阴影:黑色系浮层 */
61
+ --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.3);
62
+ --shadow-card: 0 12px 30px rgba(0, 0, 0, 0.35);
63
+ --shadow-card-hover: 0 18px 44px rgba(0, 0, 0, 0.45);
64
+ --shadow-float: 0 22px 56px rgba(0, 0, 0, 0.5);
65
+ --shadow-raised: 0 14px 30px rgba(0, 0, 0, 0.4);
66
+ --shadow-modal:
67
+ 0 16px 42px rgba(0, 0, 0, 0.45),
68
+ 0 34px 84px rgba(0, 0, 0, 0.45);
69
+ --shadow-input-focus:
70
+ 0 0 0 3px var(--color-brand-light),
71
+ 0 1px 2px rgba(0, 0, 0, 0.4);
72
+ }
73
+
74
+ /* 全局背景光斑:暗色下收敛为微弱冷光 */
75
+ :root[data-theme="dark"] body::before {
76
+ background:
77
+ radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0) 26%),
78
+ radial-gradient(circle at 86% 18%, rgba(214, 143, 121, 0.04), rgba(214, 143, 121, 0) 30%);
79
+ }
80
+
81
+ /* 滚动条 */
82
+ :root[data-theme="dark"] * {
83
+ scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
84
+ }
85
+
86
+ :root[data-theme="dark"] ::-webkit-scrollbar-thumb {
87
+ background: rgba(255, 255, 255, 0.22);
88
+ }
89
+
90
+ :root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
91
+ background: rgba(255, 255, 255, 0.34);
92
+ }
93
+
94
+ /* ==========================================================================
95
+ GENERATED COMPONENT OVERRIDES - do not edit by hand
96
+ ========================================================================== */
97
+
98
+ [data-theme="dark"] .side-rail {
99
+ background-image:linear-gradient(180deg, rgba(30, 31, 34, 0.95) 0%, rgba(30, 31, 34, 0.89) 100%);
100
+ border-right:1px solid rgba(255, 255, 255, 0.07);
101
+ box-shadow:8px 0 28px rgba(0, 0, 0, 0.12), 1px 0 0 rgba(255, 255, 255, 0.5);
102
+ }
103
+ [data-theme="dark"] .side-rail-collapse-toggle {
104
+ border:1px solid rgba(255, 255, 255, 0.13);
105
+ background-color:rgba(30, 31, 34, 0.96);
106
+ box-shadow:0 8px 18px rgba(0, 0, 0, 0.24);
107
+ }
108
+ [data-theme="dark"] .side-rail-collapse-toggle:hover {
109
+ border-color:rgba(255, 255, 255, 0.24);
110
+ }
111
+ [data-theme="dark"] .side-section + .side-section {
112
+ border-top:1px solid rgba(255, 255, 255, 0.06);
113
+ }
114
+ [data-theme="dark"] .lang-choice {
115
+ border:1px solid rgba(255, 255, 255, 0.22);
116
+ background-color:rgba(30, 31, 34, 0.92);
117
+ }
118
+ [data-theme="dark"] .lang-choice-btn:hover {
119
+ border-color:rgba(255, 255, 255, 0.22);
120
+ background-color:rgba(30, 31, 34, 0.72);
121
+ }
122
+ [data-theme="dark"] .lang-choice-btn.active {
123
+ border-color:rgba(255, 255, 255, 0.3);
124
+ background-color:rgba(255, 255, 255, 0.1);
125
+ }
126
+ [data-theme="dark"] .lang-fab .lang-switch-track {
127
+ background-color:rgba(30, 31, 34, 0.92);
128
+ border-color:rgba(255, 255, 255, 0.22);
129
+ }
130
+ [data-theme="dark"] .lang-fab::before {
131
+ background-image:radial-gradient(circle at 50% 70%, rgba(30, 31, 34, 0.92), rgba(255, 255, 255, 0));
132
+ }
133
+ [data-theme="dark"] .lang-fab .lang-switch:hover .lang-switch-track {
134
+ border-color:rgba(255, 255, 255, 0.3);
135
+ }
136
+ [data-theme="dark"] .side-rail-lang {
137
+ background-image:linear-gradient(180deg, rgba(255, 255, 255, 0.02), #202124 28%);
138
+ border-top:1px solid rgba(255, 255, 255, 0.06);
139
+ }
140
+ [data-theme="dark"] .side-rail-lang .lang-choice {
141
+ background-color:rgba(30, 31, 34, 0.9);
142
+ }
143
+ [data-theme="dark"] .lang-switch-track {
144
+ border:1px solid rgba(255, 255, 255, 0.27);
145
+ background-color:rgba(30, 31, 34, 0.78);
146
+ }
147
+ [data-theme="dark"] .lang-switch:hover .lang-switch-track {
148
+ border-color:rgba(255, 255, 255, 0.3);
149
+ background-color:rgba(30, 31, 34, 0.92);
150
+ }
151
+ [data-theme="dark"] .lang-switch-track::after {
152
+ background-image:radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0) 55%);
153
+ }
154
+ [data-theme="dark"] .side-item:hover {
155
+ background-color:rgba(30, 31, 34, 0.64);
156
+ }
157
+ [data-theme="dark"] .side-item.active,
158
+ [data-theme="dark"] .side-item.nav-intent-active {
159
+ border-color:rgba(255, 255, 255, 0.15);
160
+ background-image:linear-gradient(135deg, rgba(30, 31, 34, 0.86), rgba(255, 255, 255, 0.07));
161
+ box-shadow:0 8px 20px rgba(0, 0, 0, 0.14);
162
+ }
163
+ [data-theme="dark"] .sidebar-collapsed .side-section + .side-section {
164
+ border-top-color:rgba(255, 255, 255, 0.04);
165
+ }
166
+ [data-theme="dark"] .brand-block {
167
+ background-image:linear-gradient(180deg, rgba(30, 31, 34, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
168
+ }
169
+ [data-theme="dark"] .brand-logo::after {
170
+ background-image:radial-gradient(circle, rgba(71, 159, 255, 0.12), transparent 70%);
171
+ }
172
+ [data-theme="dark"] .brand-kicker {
173
+ color:#ECE8E4;
174
+ }
175
+ [data-theme="dark"] .brand-version {
176
+ color:#A6A6AB;
177
+ -webkit-text-fill-color:#A6A6AB;
178
+ }
179
+ [data-theme="dark"] .mobile-update-chip {
180
+ border:1px solid rgba(255, 255, 255, 0.11);
181
+ background-color:rgba(30, 31, 34, 0.58);
182
+ }
183
+ [data-theme="dark"] .mobile-update-chip--current {
184
+ border-color:rgba(105, 177, 137, 0.14);
185
+ }
186
+ [data-theme="dark"] .mobile-update-chip--current .side-update-dot {
187
+ background-color:rgba(105, 177, 137, 0.7);
188
+ box-shadow:0 0 0 4px rgba(105, 177, 137, 0.08);
189
+ }
190
+ [data-theme="dark"] .mobile-update-chip--error {
191
+ border-color:rgba(219, 130, 130, 0.18);
192
+ }
193
+ [data-theme="dark"] .mobile-update-chip--error .side-update-dot {
194
+ background-color:rgba(219, 130, 130, 0.78);
195
+ box-shadow:0 0 0 4px rgba(219, 130, 130, 0.08);
196
+ }
197
+ [data-theme="dark"] .side-update-notice {
198
+ border:1px solid rgba(255, 255, 255, 0.11);
199
+ background-color:rgba(30, 31, 34, 0.52);
200
+ }
201
+ [data-theme="dark"] .side-update-notice:hover {
202
+ border-color:rgba(255, 255, 255, 0.21);
203
+ background-color:rgba(30, 31, 34, 0.74);
204
+ }
205
+ [data-theme="dark"] .side-update-notice--current {
206
+ border-color:rgba(105, 177, 137, 0.14);
207
+ }
208
+ [data-theme="dark"] .side-update-notice--current .side-update-dot {
209
+ background-color:rgba(105, 177, 137, 0.7);
210
+ box-shadow:0 0 0 4px rgba(105, 177, 137, 0.08);
211
+ }
212
+ [data-theme="dark"] .side-update-notice--error {
213
+ border-color:rgba(219, 130, 130, 0.18);
214
+ }
215
+ [data-theme="dark"] .side-update-notice--error .side-update-dot {
216
+ background-color:rgba(219, 130, 130, 0.78);
217
+ box-shadow:0 0 0 4px rgba(219, 130, 130, 0.08);
218
+ }
219
+ [data-theme="dark"] .side-update-dot {
220
+ background-color:rgba(255, 255, 255, 0.3);
221
+ box-shadow:0 0 0 4px rgba(255, 255, 255, 0.06);
222
+ }
223
+ [data-theme="dark"] .github-badge-rail {
224
+ background-color:rgba(30, 31, 34, 0.62);
225
+ border:1px solid rgba(255, 255, 255, 0.11);
226
+ }
227
+ [data-theme="dark"] .github-badge:focus-visible {
228
+ outline:3px solid rgba(255, 255, 255, 0.13);
229
+ }
230
+ [data-theme="dark"] .side-item-badge {
231
+ box-shadow:0 2px 6px rgba(255, 255, 255, 0.2);
232
+ }
233
+ [data-theme="dark"] .language-settings-link {
234
+ border:1px solid rgba(255, 255, 255, 0.2);
235
+ background-color:rgba(30, 31, 34, 0.92);
236
+ }
237
+ [data-theme="dark"] .language-settings-link:hover {
238
+ border-color:rgba(255, 255, 255, 0.3);
239
+ background-color:rgba(30, 31, 34, 0.96);
240
+ }
241
+ [data-theme="dark"] .side-announcement-button {
242
+ border:1px solid rgba(255, 255, 255, 0.2);
243
+ background-color:rgba(30, 31, 34, 0.92);
244
+ }
245
+ [data-theme="dark"] .side-announcement-button:hover {
246
+ border-color:rgba(255, 255, 255, 0.3);
247
+ background-color:rgba(30, 31, 34, 0.96);
248
+ }
249
+ [data-theme="dark"] .lang-toggle-btn.active {
250
+ border-color:rgba(255, 255, 255, 0.2);
251
+ }
252
+ [data-theme="dark"] .status-chip {
253
+ background-color:rgba(30, 31, 34, 0.62);
254
+ }
255
+ [data-theme="dark"] .provider-fast-switch {
256
+ background-color:rgba(30, 31, 34, 0.58);
257
+ }
258
+ [data-theme="dark"] .provider-fast-switch-select {
259
+ background-color:rgba(30, 31, 34, 0.72);
260
+ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%236F7D8E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
261
+ }
262
+ [data-theme="dark"] .panel-header-refined {
263
+ border-bottom:1px solid rgba(255, 255, 255, 0.1);
264
+ }
265
+ [data-theme="dark"] .top-tab {
266
+ background-color:rgba(30, 31, 34, 0.66);
267
+ }
268
+ [data-theme="dark"] .top-tab.top-tab-disabled,
269
+ [data-theme="dark"] .top-tab.top-tab-disabled:hover {
270
+ background-color:rgba(255, 255, 255, 0.06);
271
+ }
272
+ [data-theme="dark"] .top-tab.active,
273
+ [data-theme="dark"] .top-tab.nav-intent-active {
274
+ border-color:rgba(255, 255, 255, 0.2);
275
+ background-color:rgba(30, 31, 34, 0.82);
276
+ box-shadow:0 10px 24px rgba(0, 0, 0, 0.24);
277
+ }
278
+ [data-theme="dark"] .config-subtabs {
279
+ background-color:rgba(255, 255, 255, 0.06);
280
+ }
281
+ [data-theme="dark"] .config-subtab {
282
+ border:1px solid rgba(255, 255, 255, 0.21);
283
+ background-color:rgba(30, 31, 34, 0.62);
284
+ }
285
+ [data-theme="dark"] .config-subtab.active {
286
+ border-color:rgba(255, 255, 255, 0.24);
287
+ background-color:rgba(30, 31, 34, 0.98);
288
+ box-shadow:0 8px 20px rgba(0, 0, 0, 0.19);
289
+ }
290
+ [data-theme="dark"] .settings-tab-badge {
291
+ background-color:rgba(255, 255, 255, 0.1);
292
+ }
293
+ [data-theme="dark"] .segmented-control {
294
+ background-color:rgba(255, 255, 255, 0.07);
295
+ }
296
+ [data-theme="dark"] .segment.active {
297
+ background-color:rgba(30, 31, 34, 0.78);
298
+ box-shadow:0 8px 18px rgba(0, 0, 0, 0.19), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
299
+ }
300
+ [data-theme="dark"] .card {
301
+ background-image:linear-gradient(180deg, rgba(30, 31, 34, 0.86), rgba(30, 31, 34, 0.76));
302
+ }
303
+ [data-theme="dark"] .card::after {
304
+ background-image:linear-gradient(120deg, rgba(30, 31, 34, 0.55) 0%, transparent 58%);
305
+ }
306
+ [data-theme="dark"] .card.active {
307
+ background-image:linear-gradient(135deg, rgba(30, 31, 34, 0.9), rgba(255, 255, 255, 0.11));
308
+ border-color:rgba(255, 255, 255, 0.2);
309
+ box-shadow:0 14px 34px rgba(0, 0, 0, 0.29);
310
+ }
311
+ [data-theme="dark"] .card-icon {
312
+ background-color:rgba(255, 255, 255, 0.08);
313
+ box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.06);
314
+ }
315
+ [data-theme="dark"] .card.active .card-icon {
316
+ background-color:rgba(255, 255, 255, 0.13);
317
+ box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.1);
318
+ }
319
+ [data-theme="dark"] .provider-readonly-badge {
320
+ color:rgb(213, 144, 0);
321
+ background-image:linear-gradient(135deg, rgba(247, 218, 130, 0.32) 0%, rgba(247, 218, 130, 0.2) 100%);
322
+ border:1px solid rgba(219, 183, 83, 0.35);
323
+ }
324
+ [data-theme="dark"] .card-action-btn {
325
+ border:1px solid rgba(98, 120, 154, 0.22);
326
+ background-image:linear-gradient(180deg, rgba(30, 31, 34, 0.98), rgba(30, 31, 34, 0.9));
327
+ }
328
+ [data-theme="dark"] .card-action-btn:hover {
329
+ background-image:linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(30, 31, 34, 0.95) 100%);
330
+ }
331
+ [data-theme="dark"] .card-action-btn.delete:hover {
332
+ background-image:linear-gradient(135deg, rgba(216, 125, 114, 0.1) 0%, rgba(216, 125, 114, 0.05) 100%);
333
+ }
334
+ [data-theme="dark"] .card-action-btn.delete:disabled:hover,
335
+ [data-theme="dark"] .card-action-btn.delete.disabled:hover {
336
+ background-image:linear-gradient(180deg, rgba(30, 31, 34, 0.98), rgba(30, 31, 34, 0.9));
337
+ }
338
+ [data-theme="dark"] .pill {
339
+ background-color:rgba(30, 31, 34, 0.8);
340
+ }
341
+ [data-theme="dark"] .pill.configured {
342
+ background-image:linear-gradient(135deg, rgba(128, 173, 142, 0.15) 0%, rgba(128, 173, 142, 0.08) 100%);
343
+ box-shadow:inset 0 0.5px 1px rgba(128, 173, 142, 0.2);
344
+ }
345
+ [data-theme="dark"] .pill.empty {
346
+ background-image:linear-gradient(135deg, rgba(216, 125, 114, 0.1) 0%, rgba(216, 125, 114, 0.05) 100%);
347
+ box-shadow:inset 0 0.5px 1px rgba(216, 125, 114, 0.15);
348
+ }
349
+ [data-theme="dark"] .latency.ok {
350
+ background-color:rgba(128, 173, 142, 0.1);
351
+ }
352
+ [data-theme="dark"] .latency.error {
353
+ background-color:rgba(216, 125, 114, 0.08);
354
+ }
355
+ [data-theme="dark"] .card-icon-dot {
356
+ background-color:rgb(78, 224, 132);
357
+ box-shadow:0 0 4px rgba(78, 224, 132, 0.6), 0 0 8px rgba(78, 224, 132, 0.3);
358
+ }
359
+ [data-theme="dark"] 0%,
360
+ [data-theme="dark"] 100% {
361
+ box-shadow:0 0 4px rgba(78, 224, 132, 0.6), 0 0 8px rgba(78, 224, 132, 0.3);
362
+ box-shadow:0 0 8px rgba(255, 255, 255, 0.21);
363
+ }
364
+ [data-theme="dark"] 50% {
365
+ box-shadow:0 0 10px rgba(78, 224, 132, 0.8), 0 0 18px rgba(78, 224, 132, 0.5);
366
+ box-shadow:0 0 14px rgba(255, 255, 255, 0.3);
367
+ }
368
+ [data-theme="dark"] .selector-section {
369
+ background-color:rgba(255, 255, 255, 0.05);
370
+ }
371
+ [data-theme="dark"] .health-issue {
372
+ background-color:#3A2326;
373
+ }
374
+ [data-theme="dark"] .btn-icon {
375
+ box-shadow:0 8px 18px rgba(0, 0, 0, 0.29);
376
+ }
377
+ [data-theme="dark"] .btn-icon:hover {
378
+ box-shadow:0 12px 24px rgba(0, 0, 0, 0.38);
379
+ }
380
+ [data-theme="dark"] .model-select {
381
+ background-color:rgba(30, 31, 34, 0.72);
382
+ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%236F7D8E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
383
+ background-color:rgba(30, 31, 34, 0.5);
384
+ border:1px solid rgba(255, 255, 255, 0.11);
385
+ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23958A80' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
386
+ }
387
+ [data-theme="dark"] .model-select:hover {
388
+ background-color:rgba(30, 31, 34, 0.9);
389
+ border-color:rgba(255, 255, 255, 0.18);
390
+ background-color:rgba(30, 31, 34, 0.7);
391
+ }
392
+ [data-theme="dark"] .model-input {
393
+ background-color:rgba(30, 31, 34, 0.72);
394
+ }
395
+ [data-theme="dark"] .model-input:hover {
396
+ background-color:rgba(30, 31, 34, 0.9);
397
+ }
398
+ [data-theme="dark"] .config-template-hint.error-text {
399
+ color:rgb(201, 63, 46);
400
+ }
401
+ [data-theme="dark"] .template-textarea {
402
+ background-color:rgba(30, 31, 34, 0.72);
403
+ }
404
+ [data-theme="dark"] .template-textarea[readonly]:focus {
405
+ background-color:rgba(30, 31, 34, 0.72);
406
+ }
407
+ [data-theme="dark"] .btn-add {
408
+ border:1px dashed rgba(255, 255, 255, 0.2);
409
+ background-color:rgba(255, 255, 255, 0.06);
410
+ }
411
+ [data-theme="dark"] .btn-add:hover {
412
+ background-image:linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 0%, rgba(30, 31, 34, 0.52) 100%);
413
+ }
414
+ [data-theme="dark"] .btn-tool {
415
+ background-color:rgba(30, 31, 34, 0.68);
416
+ }
417
+ [data-theme="dark"] .btn-tool:not(:disabled):hover {
418
+ box-shadow:0 10px 22px rgba(0, 0, 0, 0.24);
419
+ }
420
+ [data-theme="dark"] .tool-config-write-overlay {
421
+ background-color:rgba(30, 31, 34, 0.78);
422
+ }
423
+ [data-theme="dark"] .settings-tab-header .segmented-control {
424
+ background-color:rgba(255, 255, 255, 0.06);
425
+ }
426
+ [data-theme="dark"] .settings-tab-header .segmented-option.active {
427
+ background-color:#202124;
428
+ }
429
+ [data-theme="dark"] .settings-card {
430
+ background-color:#202124;
431
+ border:1px solid rgba(255, 255, 255, 0.07);
432
+ }
433
+ [data-theme="dark"] .settings-card:hover {
434
+ border-color:rgba(255, 255, 255, 0.11);
435
+ }
436
+ [data-theme="dark"] .model-select:focus {
437
+ background-color:#202124;
438
+ box-shadow:0 0 0 3px rgba(255, 255, 255, 0.08);
439
+ }
440
+ [data-theme="dark"] .settings-toggle-row .toggle-track {
441
+ background-color:rgba(255, 255, 255, 0.14);
442
+ }
443
+ [data-theme="dark"] .settings-toggle-group .toggle-btn.active {
444
+ box-shadow:0 1px 3px rgba(255, 255, 255, 0.24);
445
+ }
446
+ [data-theme="dark"] .settings-retention {
447
+ background-color:rgba(30, 31, 34, 0.5);
448
+ border:1px solid rgba(255, 255, 255, 0.07);
449
+ }
450
+ [data-theme="dark"] .settings-card-action {
451
+ background-color:#202124;
452
+ border:1px solid rgba(255, 255, 255, 0.14);
453
+ }
454
+ [data-theme="dark"] .settings-card-action:hover:not(:disabled) {
455
+ background-color:#202124;
456
+ box-shadow:0 4px 12px rgba(255, 255, 255, 0.11);
457
+ }
458
+ [data-theme="dark"] .settings-card--destructive {
459
+ background-image:linear-gradient(135deg, rgba(251, 137, 171, 0.04) 0%, rgba(254, 229, 89, 0.04) 100%);
460
+ border-color:rgba(251, 137, 171, 0.12);
461
+ }
462
+ [data-theme="dark"] .settings-card--destructive:hover {
463
+ background-image:linear-gradient(135deg, rgba(251, 137, 171, 0.08) 0%, rgba(254, 229, 89, 0.08) 100%);
464
+ border-color:rgba(251, 137, 171, 0.2);
465
+ }
466
+ [data-theme="dark"] .settings-card-action--danger {
467
+ color:rgb(235, 115, 136);
468
+ border-color:rgba(235, 115, 136, 0.25);
469
+ background-color:#202124;
470
+ }
471
+ [data-theme="dark"] .settings-card-action--danger:hover:not(:disabled) {
472
+ color:rgb(226, 110, 133);
473
+ border-color:rgb(226, 110, 133);
474
+ background-color:#202124;
475
+ box-shadow:0 4px 12px rgba(226, 110, 133, 0.15);
476
+ }
477
+ [data-theme="dark"] .webhook-status-dot {
478
+ background-color:rgba(255, 255, 255, 0.18);
479
+ }
480
+ [data-theme="dark"] .webhook-status-dot.active {
481
+ box-shadow:0 0 0 3px rgba(109, 176, 142, 0.2);
482
+ }
483
+ [data-theme="dark"] .webhook-url {
484
+ background-color:rgba(255, 255, 255, 0.06);
485
+ }
486
+ [data-theme="dark"] .project-announcement-overlay {
487
+ background-image:radial-gradient(circle at 50% 15%, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.02) 34%),
488
+ linear-gradient(to bottom, rgba(31, 26, 23, 0.48) 0%, rgba(31, 26, 23, 0.68) 100%);
489
+ }
490
+ [data-theme="dark"] .provider-cache-announcement-modal {
491
+ background-color:rgba(30, 31, 34, 0.99);
492
+ border-color:rgba(255, 255, 255, 0.15);
493
+ }
494
+ [data-theme="dark"] .project-announcement-close {
495
+ border:1px solid rgba(255, 255, 255, 0.13);
496
+ background-color:rgba(30, 31, 34, 0.74);
497
+ }
498
+ [data-theme="dark"] .project-announcement-close:hover {
499
+ border-color:rgba(255, 255, 255, 0.29);
500
+ }
501
+ [data-theme="dark"] .project-announcement-feature-card {
502
+ border:1px solid rgba(255, 255, 255, 0.09);
503
+ background-color:rgba(30, 31, 34, 0.86);
504
+ }
505
+ [data-theme="dark"] .project-announcement-mini-status {
506
+ background-color:rgba(30, 31, 34, 0.52);
507
+ }
508
+ [data-theme="dark"] .project-announcement-cache-section {
509
+ border:1px solid rgba(255, 255, 255, 0.07);
510
+ background-color:rgba(255, 255, 255, 0.06);
511
+ }
512
+ [data-theme="dark"] .provider-cache-summary-card {
513
+ border:1px solid rgba(255, 255, 255, 0.08);
514
+ background-color:rgba(30, 31, 34, 0.72);
515
+ }
516
+ [data-theme="dark"] .provider-cache-announcement-row {
517
+ border:1px solid rgba(255, 255, 255, 0.07);
518
+ background-color:rgba(30, 31, 34, 0.58);
519
+ }
520
+ [data-theme="dark"] .provider-cache-group {
521
+ border:1px solid rgba(255, 255, 255, 0.1);
522
+ background-color:rgba(30, 31, 34, 0.76);
523
+ }
524
+ [data-theme="dark"] .provider-cache-file {
525
+ border:1px solid rgba(255, 255, 255, 0.08);
526
+ background-color:rgba(255, 255, 255, 0.12);
527
+ }
528
+ [data-theme="dark"] .provider-cache-provider,
529
+ [data-theme="dark"] .provider-cache-raw {
530
+ border:1px solid rgba(255, 255, 255, 0.1);
531
+ background-color:rgba(30, 31, 34, 0.72);
532
+ }
533
+ [data-theme="dark"] .provider-cache-provider-badge {
534
+ background-color:rgba(255, 255, 255, 0.07);
535
+ }
536
+ [data-theme="dark"] .provider-cache-json {
537
+ border:1px solid rgba(255, 255, 255, 0.1);
538
+ background-color:rgba(0, 0, 0, 0.55);
539
+ color:rgb(236, 232, 228);
540
+ }
541
+ [data-theme="dark"] .provider-cache-json.error {
542
+ color:#F0A79B;
543
+ }
544
+ [data-theme="dark"] .provider-cache-footer {
545
+ border-top:1px solid rgba(255, 255, 255, 0.1);
546
+ background-color:rgba(30, 31, 34, 0.92);
547
+ }
548
+ [data-theme="dark"] .pi-model-import-item {
549
+ background-image:linear-gradient(180deg, rgba(30, 31, 34, 0.86), rgba(30, 31, 34, 0.76));
550
+ }
551
+ [data-theme="dark"] .bridge-pool-trigger {
552
+ background-color:rgba(255, 255, 255, 0.06);
553
+ }
554
+ [data-theme="dark"] .bridge-pool-trigger:hover {
555
+ background-color:rgba(255, 255, 255, 0.11);
556
+ }
557
+ [data-theme="dark"] .bridge-pool-panel {
558
+ border:1px solid rgba(255, 255, 255, 0.29);
559
+ background-image:linear-gradient(180deg, rgba(30, 31, 34, 0.96) 0%, rgba(30, 31, 34, 0.9) 100%);
560
+ }
561
+ [data-theme="dark"] .bridge-pool-empty {
562
+ background-color:rgba(30, 31, 34, 0.5);
563
+ }
564
+ [data-theme="dark"] .bridge-pool-item:hover {
565
+ background-color:rgba(255, 255, 255, 0.04);
566
+ }
567
+ [data-theme="dark"] .bridge-pool-item:active {
568
+ background-color:rgba(255, 255, 255, 0.07);
569
+ }
570
+ [data-theme="dark"] .bridge-pool-item-status {
571
+ background-color:rgba(255, 255, 255, 0.06);
572
+ }
573
+ [data-theme="dark"] .bridge-pool-item input[type="checkbox"] {
574
+ background-color:rgba(255, 255, 255, 0.15);
575
+ border:1px solid rgba(255, 255, 255, 0.11);
576
+ }
577
+ [data-theme="dark"] .session-filter-chip:focus-visible {
578
+ outline:3px solid rgba(255, 255, 255, 0.14);
579
+ }
580
+ [data-theme="dark"] .session-source-pill.active {
581
+ box-shadow:0 1px 3px rgba(255, 255, 255, 0.24);
582
+ }
583
+ [data-theme="dark"] .session-source-pill.active .session-source-pill-dot {
584
+ background-color:rgba(30, 31, 34, 0.9);
585
+ }
586
+ [data-theme="dark"] .session-source-pill[data-source="codex"] .session-source-pill-dot {
587
+ background-color:#DE8370;
588
+ }
589
+ [data-theme="dark"] .session-source-pill[data-source="claude"] .session-source-pill-dot {
590
+ background-color:#E08A6F;
591
+ }
592
+ [data-theme="dark"] .session-source-pill[data-source="gemini"] .session-source-pill-dot {
593
+ background-color:rgba(255, 255, 255, 0.32);
594
+ }
595
+ [data-theme="dark"] .session-source-pill[data-source="codebuddy"] .session-source-pill-dot {
596
+ background-color:rgb(155, 178, 205);
597
+ }
598
+ [data-theme="dark"] .session-source[data-source="codex"],
599
+ [data-theme="dark"] .session-source.codex {
600
+ background-color:rgba(255, 255, 255, 0.06);
601
+ color:rgb(207, 117, 104);
602
+ border-color:rgba(255, 255, 255, 0.14);
603
+ }
604
+ [data-theme="dark"] .session-source[data-source="claude"],
605
+ [data-theme="dark"] .session-source.claude {
606
+ background-color:rgba(255, 255, 255, 0.06);
607
+ color:rgb(214, 143, 121);
608
+ border-color:rgba(255, 255, 255, 0.14);
609
+ }
610
+ [data-theme="dark"] .session-source[data-source="gemini"],
611
+ [data-theme="dark"] .session-source.gemini {
612
+ background-color:rgba(255, 255, 255, 0.06);
613
+ color:rgb(83, 154, 81);
614
+ border-color:rgba(255, 255, 255, 0.14);
615
+ }
616
+ [data-theme="dark"] .session-source[data-source="codebuddy"],
617
+ [data-theme="dark"] .session-source.codebuddy {
618
+ background-color:rgba(155, 178, 205, 0.08);
619
+ color:rgb(81, 126, 170);
620
+ border-color:rgba(155, 178, 205, 0.2);
621
+ }
622
+ [data-theme="dark"] .session-derived-badge {
623
+ border:1px solid rgba(214, 143, 121, 0.28);
624
+ background-color:rgba(214, 143, 121, 0.08);
625
+ }
626
+ [data-theme="dark"] .session-count-badge {
627
+ box-shadow:0 4px 10px rgba(214, 143, 121, 0.16);
628
+ }
629
+ [data-theme="dark"] .btn-session-delete {
630
+ border:1px solid rgba(208, 122, 121, 0.4);
631
+ color:rgb(204, 119, 119);
632
+ }
633
+ [data-theme="dark"] .btn-session-delete:hover {
634
+ border-color:rgba(208, 122, 121, 0.8);
635
+ background-color:rgba(208, 122, 121, 0.06);
636
+ color:rgb(195, 94, 94);
637
+ }
638
+ [data-theme="dark"] .trash-action-btn.restore:hover:not(:disabled) {
639
+ background-color:rgba(109, 176, 142, 0.06);
640
+ }
641
+ [data-theme="dark"] .trash-action-btn.delete:hover:not(:disabled) {
642
+ background-color:rgba(214, 118, 107, 0.06);
643
+ }
644
+ [data-theme="dark"] .trash-item.session-item:hover,
645
+ [data-theme="dark"] .trash-item.session-item:active {
646
+ background-image:linear-gradient(to bottom, var(--color-surface) 0%, rgba(30, 31, 34, 0.92) 100%);
647
+ }
648
+ [data-theme="dark"] .session-item:hover {
649
+ background-image:linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 0%, rgba(30, 31, 34, 0.98) 100%);
650
+ }
651
+ [data-theme="dark"] .session-item:focus-visible {
652
+ outline:3px solid rgba(255, 255, 255, 0.14);
653
+ background-image:linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 0%, rgba(30, 31, 34, 0.98) 100%);
654
+ }
655
+ [data-theme="dark"] .session-item.active {
656
+ background-image:linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 0%, rgba(30, 31, 34, 0.98) 100%);
657
+ }
658
+ [data-theme="dark"] .session-item.pinned {
659
+ background-image:linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 0%, rgba(30, 31, 34, 0.98) 100%);
660
+ box-shadow:0 4px 12px rgba(255, 255, 255, 0.06);
661
+ }
662
+ [data-theme="dark"] .session-context-normal {
663
+ background-color:rgba(109, 176, 142, 0.12);
664
+ color:rgb(109, 176, 142);
665
+ }
666
+ [data-theme="dark"] .session-context-warning {
667
+ background-color:rgba(249, 154, 45, 0.15);
668
+ color:rgb(243, 115, 17);
669
+ }
670
+ [data-theme="dark"] .session-context-critical {
671
+ background-color:rgba(214, 118, 107, 0.18);
672
+ color:rgb(241, 96, 36);
673
+ }
674
+ [data-theme="dark"] .session-preview-header {
675
+ background-color:rgba(30, 31, 34, 0.92);
676
+ }
677
+ [data-theme="dark"] .session-workspace {
678
+ border:1px solid rgba(121, 129, 150, 0.12);
679
+ background-image:linear-gradient(135deg, rgba(30, 31, 34, 0.94), #202124),
680
+ var(--color-surface-elevated);
681
+ box-shadow:0 14px 34px rgba(0, 0, 0, 0.13);
682
+ }
683
+ [data-theme="dark"] .session-workspace-metric {
684
+ background-color:rgba(30, 31, 34, 0.72);
685
+ }
686
+ [data-theme="dark"] .session-workspace-card {
687
+ background-color:rgba(30, 31, 34, 0.7);
688
+ }
689
+ [data-theme="dark"] .session-workspace-card-alert {
690
+ border-color:rgba(255, 255, 255, 0.2);
691
+ background-color:rgba(255, 255, 255, 0.04);
692
+ }
693
+ [data-theme="dark"] .session-workspace-code-list code {
694
+ background-color:rgba(0, 0, 0, 0.1);
695
+ }
696
+ [data-theme="dark"] .session-timeline-node:hover {
697
+ box-shadow:0 0 0 3px rgba(255, 255, 255, 0.11);
698
+ }
699
+ [data-theme="dark"] .session-timeline-node.active {
700
+ box-shadow:0 0 0 3px rgba(255, 255, 255, 0.14);
701
+ }
702
+ [data-theme="dark"] .session-timeline-bar-node:hover {
703
+ box-shadow:0 0 0 3px rgba(255, 255, 255, 0.11);
704
+ }
705
+ [data-theme="dark"] .session-timeline-bar-node.active {
706
+ box-shadow:0 0 0 3px rgba(255, 255, 255, 0.14);
707
+ }
708
+ [data-theme="dark"] .session-msg.user {
709
+ border-color:rgba(255, 255, 255, 0.21);
710
+ background-color:rgba(255, 255, 255, 0.03);
711
+ }
712
+ [data-theme="dark"] .session-msg.assistant::before {
713
+ background-color:rgba(128, 173, 142, 0.5);
714
+ }
715
+ [data-theme="dark"] .session-preview-jump .session-match-nav-btn {
716
+ background-color:var(--color-surface-elevated, rgba(30, 31, 34, 0.92));
717
+ }
718
+ [data-theme="dark"] .usage-range-group {
719
+ background-image:linear-gradient(135deg, rgba(30, 31, 34, 0.9), rgba(30, 31, 34, 0.7));
720
+ border:1px solid rgba(255, 255, 255, 0.06);
721
+ box-shadow:0 2px 12px rgba(0, 0, 0, 0.14);
722
+ }
723
+ [data-theme="dark"] .usage-range-btn:hover:not(:disabled):not(.active) {
724
+ background-color:rgba(255, 255, 255, 0.06);
725
+ }
726
+ [data-theme="dark"] .usage-range-btn.active {
727
+ box-shadow:0 4px 16px rgba(255, 255, 255, 0.24), 0 0 0 1px rgba(255,255,255,0.1) inset;
728
+ }
729
+ [data-theme="dark"] .usage-active-strip {
730
+ background-image:linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
731
+ border:1px solid rgba(255, 255, 255, 0.08);
732
+ }
733
+ [data-theme="dark"] .usage-hero-active-dot {
734
+ box-shadow:0 0 12px rgba(109, 176, 142, 0.4);
735
+ }
736
+ [data-theme="dark"] .usage-kpi-card {
737
+ background-image:linear-gradient(135deg, rgba(30, 31, 34, 0.9), rgba(30, 31, 34, 0.7));
738
+ border:1px solid rgba(255, 255, 255, 0.06);
739
+ box-shadow:0 4px 16px rgba(0, 0, 0, 0.12);
740
+ }
741
+ [data-theme="dark"] .usage-hero-delta.delta-up {
742
+ background-image:linear-gradient(135deg, rgba(109, 176, 142, 0.15), rgba(109, 176, 142, 0.08));
743
+ }
744
+ [data-theme="dark"] .usage-hero-delta.delta-down {
745
+ background-image:linear-gradient(135deg, rgba(214, 118, 107, 0.15), rgba(214, 118, 107, 0.08));
746
+ }
747
+ [data-theme="dark"] .usage-wave-container {
748
+ background-image:linear-gradient(135deg, rgba(30, 31, 34, 0.8), rgba(30, 31, 34, 0.6));
749
+ border:1px solid rgba(255, 255, 255, 0.04);
750
+ box-shadow:0 4px 20px rgba(0, 0, 0, 0.12);
751
+ }
752
+ [data-theme="dark"] .usage-wave-line {
753
+ filter:drop-shadow(0 4px 12px rgba(255, 255, 255, 0.18));
754
+ }
755
+ [data-theme="dark"] .usage-wave-hover-point {
756
+ filter:drop-shadow(0 0 8px rgba(255, 255, 255, 0.28));
757
+ }
758
+ [data-theme="dark"] .usage-wave-label:hover {
759
+ background-color:rgba(255, 255, 255, 0.06);
760
+ }
761
+ [data-theme="dark"] .usage-wave-label.active {
762
+ background-image:linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
763
+ }
764
+ [data-theme="dark"] .usage-daydetail {
765
+ background-color:rgba(30, 31, 34, 0.94);
766
+ border:1px solid rgba(255, 255, 255, 0.07);
767
+ box-shadow:0 6px 20px rgba(0, 0, 0, 0.19);
768
+ }
769
+ [data-theme="dark"] .hourly-heatmap-wrapper {
770
+ background-image:linear-gradient(135deg, rgba(30, 31, 34, 0.8), rgba(30, 31, 34, 0.6));
771
+ border:1px solid rgba(255, 255, 255, 0.04);
772
+ box-shadow:0 4px 20px rgba(0, 0, 0, 0.12);
773
+ }
774
+ [data-theme="dark"] .hourly-heatmap-cell.level-4 {
775
+ box-shadow:0 0 8px rgba(255, 255, 255, 0.21);
776
+ }
777
+ [data-theme="dark"] .usage-list-compact-item:hover {
778
+ background-image:linear-gradient(135deg, rgba(30, 31, 34, 0.9), rgba(30, 31, 34, 0.7));
779
+ box-shadow:0 2px 8px rgba(0, 0, 0, 0.14);
780
+ }
781
+ [data-theme="dark"] .usage-list-bar {
782
+ background-color:rgba(255, 255, 255, 0.08);
783
+ }
784
+ [data-theme="dark"] .usage-list-bar-fill {
785
+ background-image:linear-gradient(90deg, var(--color-brand), rgba(255, 255, 255, 0.3));
786
+ }
787
+ [data-theme="dark"] .usage-list-paths {
788
+ background-image:linear-gradient(135deg, rgba(30, 31, 34, 0.8), rgba(30, 31, 34, 0.6));
789
+ border:1px solid rgba(255, 255, 255, 0.04);
790
+ box-shadow:0 4px 20px rgba(0, 0, 0, 0.12);
791
+ }
792
+ [data-theme="dark"] .usage-list-path-row:hover {
793
+ background-color:rgba(30, 31, 34, 0.7);
794
+ }
795
+ [data-theme="dark"] .usage-list-path-rank {
796
+ background-image:linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
797
+ }
798
+ [data-theme="dark"] .usage-chart-grid > .usage-card:not(.usage-paths-section):not(.usage-wave-section):not(.usage-card-hourly-heatmap) {
799
+ background-image:linear-gradient(135deg, rgba(30, 31, 34, 0.8), rgba(30, 31, 34, 0.6));
800
+ border:1px solid rgba(255, 255, 255, 0.04);
801
+ box-shadow:0 4px 20px rgba(0, 0, 0, 0.12);
802
+ }
803
+ [data-theme="dark"] .usage-spinner {
804
+ border:2px solid rgba(255, 255, 255, 0.11);
805
+ }
806
+ [data-theme="dark"] .doctor-card {
807
+ background-image:linear-gradient(to bottom, rgba(30, 31, 34, 0.92) 0%, #202124 100%);
808
+ }
809
+ [data-theme="dark"] .doctor-kv-error {
810
+ color:rgb(191, 66, 75);
811
+ }
812
+ [data-theme="dark"] .doctor-status-chip {
813
+ background-color:rgba(30, 31, 34, 0.78);
814
+ }
815
+ [data-theme="dark"] .doctor-status-chip.ok {
816
+ border-color:rgba(102, 207, 136, 0.25);
817
+ background-color:rgba(102, 207, 136, 0.08);
818
+ color:rgb(72, 179, 99);
819
+ }
820
+ [data-theme="dark"] .doctor-status-chip.warn {
821
+ border-color:rgba(247, 218, 130, 0.45);
822
+ background-color:rgba(247, 218, 130, 0.16);
823
+ color:rgb(213, 144, 0);
824
+ }
825
+ [data-theme="dark"] .doctor-status-chip.error {
826
+ border-color:rgba(255, 255, 255, 0.2);
827
+ background-color:rgba(255, 255, 255, 0.06);
828
+ color:rgb(191, 66, 75);
829
+ }
830
+ [data-theme="dark"] .doctor-health-result {
831
+ background-color:rgba(30, 31, 34, 0.78);
832
+ }
833
+ [data-theme="dark"] .doctor-health-result.ok {
834
+ border-color:rgba(102, 207, 136, 0.25);
835
+ background-color:rgba(102, 207, 136, 0.08);
836
+ color:rgb(72, 179, 99);
837
+ }
838
+ [data-theme="dark"] .doctor-health-result.error {
839
+ border-color:rgba(255, 255, 255, 0.2);
840
+ background-color:rgba(255, 255, 255, 0.06);
841
+ color:rgb(191, 66, 75);
842
+ }
843
+ [data-theme="dark"] .doctor-action-card {
844
+ background-color:rgba(30, 31, 34, 0.78);
845
+ }
846
+ [data-theme="dark"] .doctor-action-severity {
847
+ background-color:rgba(30, 31, 34, 0.85);
848
+ }
849
+ [data-theme="dark"] .doctor-action-severity.error {
850
+ border-color:rgba(255, 255, 255, 0.2);
851
+ background-color:rgba(255, 255, 255, 0.06);
852
+ color:rgb(191, 66, 75);
853
+ }
854
+ [data-theme="dark"] .doctor-action-severity.warn {
855
+ border-color:rgba(247, 218, 130, 0.45);
856
+ background-color:rgba(247, 218, 130, 0.16);
857
+ color:rgb(213, 144, 0);
858
+ }
859
+ [data-theme="dark"] .doctor-action-severity.info {
860
+ border-color:rgba(145, 177, 221, 0.35);
861
+ background-color:rgba(145, 177, 221, 0.14);
862
+ color:rgb(56, 109, 175);
863
+ }
864
+ [data-theme="dark"] .doctor-result-empty {
865
+ background-color:rgba(30, 31, 34, 0.5);
866
+ }
867
+ [data-theme="dark"] .modal-overlay {
868
+ background-image:radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02) 36%),
869
+ linear-gradient(to bottom, rgba(31, 26, 23, 0.28) 0%, rgba(31, 26, 23, 0.48) 100%);
870
+ }
871
+ [data-theme="dark"] .modal {
872
+ background-image:linear-gradient(to bottom, rgba(30, 31, 34, 0.96) 0%, rgba(30, 31, 34, 0.94) 100%);
873
+ }
874
+ [data-theme="dark"] .agents-modal:has(.modal-editor-body--openclaw-workspace) {
875
+ background-image:linear-gradient(180deg, rgba(30, 31, 34, 0.98) 0%, #202124 100%);
876
+ }
877
+ [data-theme="dark"] .agents-modal:has(.modal-editor-body--openclaw-workspace) .modal-editor-header {
878
+ border-bottom:1px solid rgba(255, 255, 255, 0.07);
879
+ background-image:linear-gradient(135deg, rgba(30, 31, 34, 0.92), rgba(30, 31, 34, 0.82));
880
+ }
881
+ [data-theme="dark"] .agents-modal:has(.modal-editor-body--openclaw-workspace) .agents-target-file-group {
882
+ border:1px solid rgba(255, 255, 255, 0.08);
883
+ background-color:rgba(30, 31, 34, 0.72);
884
+ }
885
+ [data-theme="dark"] .agents-modal:has(.modal-editor-body--openclaw-workspace) .template-editor,
886
+ [data-theme="dark"] .agents-modal:has(.modal-editor-body--openclaw-workspace) .agents-diff-editor {
887
+ border-color:rgba(255, 255, 255, 0.1);
888
+ background-color:rgba(30, 31, 34, 0.88);
889
+ }
890
+ [data-theme="dark"] .agents-modal:has(.modal-editor-body--openclaw-workspace) .template-editor-warning {
891
+ background-color:rgba(255, 255, 255, 0.04);
892
+ }
893
+ [data-theme="dark"] .modal-editor-footer {
894
+ background-image:linear-gradient(to bottom, rgba(30, 31, 34, 0.78) 0%, rgba(30, 31, 34, 0.96) 100%);
895
+ }
896
+ [data-theme="dark"] .install-row {
897
+ background-color:rgba(255, 255, 255, 0.07);
898
+ }
899
+ [data-theme="dark"] .install-command {
900
+ background-color:rgba(30, 31, 34, 0.72);
901
+ }
902
+ [data-theme="dark"] .install-action-tabs .btn-mini.active {
903
+ border-color:rgba(255, 255, 255, 0.15);
904
+ }
905
+ [data-theme="dark"] .form-input.invalid:focus {
906
+ box-shadow:0 0 0 3px rgba(214, 118, 107, 0.14);
907
+ }
908
+ [data-theme="dark"] .form-select {
909
+ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%236F7D8E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
910
+ }
911
+ [data-theme="dark"] .form-select:disabled {
912
+ background-image:linear-gradient(to right, var(--color-bg) 0%, rgba(30, 31, 34, 0.5) 100%);
913
+ }
914
+ [data-theme="dark"] .template-editor-warning {
915
+ color:rgb(191, 125, 71);
916
+ }
917
+ [data-theme="dark"] .agents-diff-save-alert {
918
+ border:1px solid rgba(240, 189, 113, 0.45);
919
+ background-color:rgba(30, 31, 34, 0.72);
920
+ color:rgb(191, 125, 71);
921
+ }
922
+ [data-theme="dark"] .agents-diff-token-delta--add {
923
+ color:rgb(72, 179, 99);
924
+ background-color:rgba(102, 207, 136, 0.12);
925
+ border-color:rgba(102, 207, 136, 0.2);
926
+ }
927
+ [data-theme="dark"] .agents-diff-token-delta--del {
928
+ color:rgb(191, 66, 75);
929
+ background-color:rgba(255, 255, 255, 0.08);
930
+ border-color:rgba(255, 255, 255, 0.14);
931
+ }
932
+ [data-theme="dark"] .agents-diff-token-delta--same {
933
+ background-color:rgba(255, 255, 255, 0.07);
934
+ border-color:rgba(255, 255, 255, 0.14);
935
+ }
936
+ [data-theme="dark"] .agents-diff-stat.add {
937
+ color:rgb(72, 179, 99);
938
+ background-color:rgba(102, 207, 136, 0.12);
939
+ border-color:rgba(102, 207, 136, 0.2);
940
+ }
941
+ [data-theme="dark"] .agents-diff-stat.del {
942
+ color:rgb(191, 66, 75);
943
+ background-color:rgba(255, 255, 255, 0.08);
944
+ border-color:rgba(255, 255, 255, 0.14);
945
+ }
946
+ [data-theme="dark"] .agents-diff-empty {
947
+ background-color:rgba(30, 31, 34, 0.6);
948
+ }
949
+ [data-theme="dark"] .agents-diff-view {
950
+ background-color:rgba(30, 31, 34, 0.7);
951
+ }
952
+ [data-theme="dark"] .agents-diff-line.add {
953
+ background-color:rgba(102, 207, 136, 0.08);
954
+ }
955
+ [data-theme="dark"] .agents-diff-line.del {
956
+ background-color:rgba(255, 255, 255, 0.07);
957
+ }
958
+ [data-theme="dark"] .form-input:disabled,
959
+ [data-theme="dark"] .form-input[readonly] {
960
+ background-image:linear-gradient(to right, var(--color-bg) 0%, rgba(30, 31, 34, 0.5) 100%);
961
+ }
962
+ [data-theme="dark"] .btn-confirm-mini {
963
+ box-shadow:0 2px 4px rgba(255, 255, 255, 0.14);
964
+ }
965
+ [data-theme="dark"] .btn-confirm-mini:hover {
966
+ box-shadow:0 4px 8px rgba(255, 255, 255, 0.18);
967
+ }
968
+ [data-theme="dark"] .skeleton-line {
969
+ background-image:linear-gradient(90deg, var(--color-border-soft) 25%, rgba(30, 31, 34, 0.6) 50%, var(--color-border-soft) 75%);
970
+ }
971
+ [data-theme="dark"] .prompts-context-hint--warn {
972
+ color:rgb(191, 125, 71);
973
+ }
974
+ [data-theme="dark"] .health-check-dialog-lock {
975
+ background-color:rgba(214, 143, 121, 0.12);
976
+ }
977
+ [data-theme="dark"] .health-check-dialog-result {
978
+ background-color:rgba(30, 31, 34, 0.72);
979
+ }
980
+ [data-theme="dark"] .health-check-dialog-result.ok {
981
+ border-color:rgba(102, 207, 136, 0.25);
982
+ background-color:rgba(102, 207, 136, 0.08);
983
+ color:rgb(72, 179, 99);
984
+ }
985
+ [data-theme="dark"] .health-check-dialog-result.error {
986
+ border-color:rgba(255, 255, 255, 0.2);
987
+ background-color:rgba(255, 255, 255, 0.06);
988
+ color:rgb(191, 66, 75);
989
+ }
990
+ [data-theme="dark"] .health-check-dialog-thread {
991
+ background-image:linear-gradient(to bottom, rgba(30, 31, 34, 0.92) 0%, #202124 100%);
992
+ }
993
+ [data-theme="dark"] .health-check-dialog-empty {
994
+ background-color:rgba(30, 31, 34, 0.7);
995
+ }
996
+ [data-theme="dark"] .health-check-message {
997
+ border:1px solid rgba(214, 143, 121, 0.12);
998
+ background-color:rgba(30, 31, 34, 0.84);
999
+ }
1000
+ [data-theme="dark"] .health-check-message.user {
1001
+ background-image:linear-gradient(to bottom, rgba(214, 143, 121, 0.12) 0%, rgba(214, 143, 121, 0.06) 100%);
1002
+ }
1003
+ [data-theme="dark"] .health-check-message.error {
1004
+ border-color:rgba(255, 255, 255, 0.17);
1005
+ background-color:rgba(255, 255, 255, 0.06);
1006
+ }
1007
+ [data-theme="dark"] .accordion-panel.active {
1008
+ border-color:rgba(255, 255, 255, 0.18);
1009
+ box-shadow:0 2px 12px rgba(255, 255, 255, 0.06);
1010
+ }
1011
+ [data-theme="dark"] .accordion-panel.completed {
1012
+ border-color:rgba(128, 173, 142, 0.2);
1013
+ }
1014
+ [data-theme="dark"] .accordion-trigger:hover {
1015
+ background-color:rgba(255, 255, 255, 0.03);
1016
+ }
1017
+ [data-theme="dark"] .accordion-panel.completed .accordion-step-badge {
1018
+ background-color:rgba(128, 173, 142, 0.2);
1019
+ }
1020
+ [data-theme="dark"] .structured-section {
1021
+ background-color:rgba(30, 31, 34, 0.6);
1022
+ }
1023
+ [data-theme="dark"] .auth-profile-item {
1024
+ background-image:linear-gradient(to bottom, rgba(30, 31, 34, 0.82) 0%, rgba(255, 255, 255, 0.11) 100%);
1025
+ }
1026
+ [data-theme="dark"] .openclaw-summary-card > .settings-card-body {
1027
+ border:1px solid rgba(255, 255, 255, 0.08);
1028
+ background-image:linear-gradient(135deg, rgba(30, 31, 34, 0.86), rgba(30, 31, 34, 0.72));
1029
+ }
1030
+ [data-theme="dark"] .openclaw-summary-item {
1031
+ border:1px solid rgba(255, 255, 255, 0.07);
1032
+ background-color:rgba(30, 31, 34, 0.72);
1033
+ }
1034
+ [data-theme="dark"] .openclaw-tool-btn {
1035
+ border:1px solid rgba(255, 255, 255, 0.08);
1036
+ background-color:rgba(30, 31, 34, 0.76);
1037
+ }
1038
+ [data-theme="dark"] .openclaw-tool-btn:hover:not(:disabled) {
1039
+ border-color:rgba(255, 255, 255, 0.15);
1040
+ box-shadow:0 8px 22px rgba(0, 0, 0, 0.19);
1041
+ }
1042
+ [data-theme="dark"] .tool-icon {
1043
+ background-color:rgba(255, 255, 255, 0.06);
1044
+ }
1045
+ [data-theme="dark"] .openclaw-card-list .card {
1046
+ background-color:rgba(30, 31, 34, 0.76);
1047
+ border-color:rgba(255, 255, 255, 0.08);
1048
+ }
1049
+ [data-theme="dark"] .openclaw-config-summary-mini span {
1050
+ background-color:rgba(255, 255, 255, 0.06);
1051
+ }
1052
+ [data-theme="dark"] .skills-flow-header {
1053
+ background-image:linear-gradient(to bottom, rgba(30, 31, 34, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
1054
+ }
1055
+ [data-theme="dark"] .skills-flow-item:hover {
1056
+ background-color:rgba(255, 255, 255, 0.06);
1057
+ }
1058
+ [data-theme="dark"] .skills-flow-item.has-issue {
1059
+ background-color:rgba(255, 255, 255, 0.08);
1060
+ }
1061
+ [data-theme="dark"] .skills-flow-item.has-issue:hover {
1062
+ background-color:rgba(30, 31, 34, 0.5);
1063
+ }
1064
+ [data-theme="dark"] .skills-flow-status.success {
1065
+ background-color:rgba(88, 203, 119, 0.1);
1066
+ color:rgba(88, 203, 119, 0.9);
1067
+ }
1068
+ [data-theme="dark"] .skills-flow-status.warning {
1069
+ background-color:rgba(255, 187, 81, 0.1);
1070
+ color:rgba(255, 187, 81, 0.9);
1071
+ }
1072
+ [data-theme="dark"] .skills-flow-actions {
1073
+ background-color:rgba(255, 255, 255, 0.05);
1074
+ }
1075
+ [data-theme="dark"] .skills-action-btn:hover:not(:disabled) {
1076
+ background-color:rgba(30, 31, 34, 0.5);
1077
+ }
1078
+ [data-theme="dark"] .skills-root-box {
1079
+ background-image:linear-gradient(to bottom, rgba(30, 31, 34, 0.86) 0%, rgba(30, 31, 34, 0.66) 100%);
1080
+ }
1081
+ [data-theme="dark"] .skills-summary-item {
1082
+ background-image:linear-gradient(to bottom, rgba(30, 31, 34, 0.96) 0%, rgba(30, 31, 34, 0.7) 100%);
1083
+ }
1084
+ [data-theme="dark"] .skills-summary-item:hover {
1085
+ box-shadow:0 4px 12px rgba(0, 0, 0, 0.19);
1086
+ }
1087
+ [data-theme="dark"] .skills-panel {
1088
+ background-image:linear-gradient(to bottom, rgba(30, 31, 34, 0.92) 0%, rgba(30, 31, 34, 0.7) 100%);
1089
+ }
1090
+ [data-theme="dark"] .market-target-chip {
1091
+ background-color:rgba(30, 31, 34, 0.9);
1092
+ }
1093
+ [data-theme="dark"] .market-target-chip.active {
1094
+ border-color:rgba(255, 255, 255, 0.28);
1095
+ background-image:linear-gradient(to bottom, #202124 0%, rgba(30, 31, 34, 0.86) 100%);
1096
+ box-shadow:0 2px 8px rgba(255, 255, 255, 0.08);
1097
+ }
1098
+ [data-theme="dark"] .market-target-chip:hover:not(.active):not(:disabled) {
1099
+ border-color:rgba(255, 255, 255, 0.21);
1100
+ background-color:rgba(255, 255, 255, 0.11);
1101
+ }
1102
+ [data-theme="dark"] .market-preview-item {
1103
+ background-color:rgba(30, 31, 34, 0.55);
1104
+ }
1105
+ [data-theme="dark"] .market-preview-item:hover {
1106
+ background-color:rgba(30, 31, 34, 0.75);
1107
+ }
1108
+ [data-theme="dark"] .market-action-card {
1109
+ background-image:linear-gradient(to bottom, rgba(30, 31, 34, 0.96) 0%, rgba(30, 31, 34, 0.8) 100%);
1110
+ }
1111
+ [data-theme="dark"] .market-action-card:hover:not(:disabled) {
1112
+ border-color:rgba(255, 255, 255, 0.28);
1113
+ }
1114
+ [data-theme="dark"] .skill-item {
1115
+ background-color:rgba(30, 31, 34, 0.5);
1116
+ }
1117
+ [data-theme="dark"] .skill-item:hover {
1118
+ border-color:rgba(255, 255, 255, 0.24);
1119
+ background-color:rgba(255, 255, 255, 0.08);
1120
+ }
1121
+ [data-theme="dark"] .skill-item.selected {
1122
+ border-color:rgba(255, 255, 255, 0.3);
1123
+ background-image:linear-gradient(to right, rgba(30, 31, 34, 0.7) 0%, rgba(30, 31, 34, 0.6) 100%);
1124
+ }
1125
+ [data-theme="dark"] .skills-empty-state {
1126
+ background-image:linear-gradient(to bottom, rgba(30, 31, 34, 0.7) 0%, rgba(30, 31, 34, 0.5) 100%);
1127
+ }
1128
+ [data-theme="dark"] .btn-mini {
1129
+ background-image:linear-gradient(to bottom, rgba(30, 31, 34, 0.95) 0%, rgba(30, 31, 34, 0.85) 100%);
1130
+ }
1131
+ [data-theme="dark"] .btn-mini.delete {
1132
+ border-color:rgba(211, 122, 112, 0.35);
1133
+ }
1134
+ [data-theme="dark"] .btn-mini.delete:hover {
1135
+ border-color:rgba(211, 122, 112, 0.7);
1136
+ }
1137
+ [data-theme="dark"] .btn {
1138
+ background-image:linear-gradient(to bottom, var(--color-surface) 0%, rgba(30, 31, 34, 0.95) 100%);
1139
+ }
1140
+ [data-theme="dark"] .btn-cancel {
1141
+ background-image:linear-gradient(to bottom, var(--color-bg) 0%, rgba(30, 31, 34, 0.8) 100%);
1142
+ }
1143
+ [data-theme="dark"] .btn-cancel:hover {
1144
+ background-image:linear-gradient(to bottom, var(--color-border) 0%, rgba(255, 255, 255, 0.3) 100%);
1145
+ }
1146
+ [data-theme="dark"] .btn-confirm {
1147
+ box-shadow:0 2px 4px rgba(255, 255, 255, 0.14);
1148
+ }
1149
+ [data-theme="dark"] .btn-confirm:hover {
1150
+ box-shadow:0 4px 8px rgba(255, 255, 255, 0.18);
1151
+ }
1152
+ [data-theme="dark"] .btn-confirm.secondary {
1153
+ background-image:linear-gradient(135deg, var(--color-success) 0%, rgba(128, 173, 142, 0.85) 100%);
1154
+ box-shadow:0 2px 4px rgba(128, 173, 142, 0.2);
1155
+ }
1156
+ [data-theme="dark"] .btn-confirm.secondary:hover {
1157
+ box-shadow:0 4px 8px rgba(128, 173, 142, 0.25);
1158
+ }
1159
+ [data-theme="dark"] .btn-confirm.btn-danger {
1160
+ background-image:linear-gradient(135deg, rgb(214, 143, 121) 0%, rgb(204, 86, 70) 100%);
1161
+ box-shadow:0 2px 4px rgba(210, 78, 62, 0.24);
1162
+ }
1163
+ [data-theme="dark"] .btn-confirm.btn-danger:hover {
1164
+ box-shadow:0 4px 10px rgba(210, 78, 62, 0.28);
1165
+ }
1166
+ [data-theme="dark"] .model-list {
1167
+ border:1px solid rgba(255, 255, 255, 0.28);
1168
+ background-image:linear-gradient(to bottom, var(--color-surface) 0%, rgba(30, 31, 34, 0.8) 100%);
1169
+ }
1170
+ [data-theme="dark"] .model-item {
1171
+ border-bottom:1px solid rgba(255, 255, 255, 0.21);
1172
+ }
1173
+ [data-theme="dark"] .model-item:hover {
1174
+ background-image:linear-gradient(to right, rgba(30, 31, 34, 0.6) 0%, rgba(255, 255, 255, 0.08) 100%);
1175
+ }
1176
+ [data-theme="dark"] .btn-remove-model {
1177
+ border:1px solid rgba(255, 255, 255, 0.14);
1178
+ }
1179
+ [data-theme="dark"] .btn-remove-model:hover {
1180
+ background-image:linear-gradient(135deg, var(--color-error) 0%, rgba(216, 125, 114, 0.9) 100%);
1181
+ box-shadow:0 2px 6px rgba(216, 125, 114, 0.25);
1182
+ }
1183
+ [data-theme="dark"] .health-failed-provider-header {
1184
+ background-color:rgba(210, 95, 83, 0.08);
1185
+ background-image:linear-gradient(135deg, rgba(210, 95, 83, 0.11), rgba(255, 255, 255, 0.05));
1186
+ }
1187
+ [data-theme="dark"] .health-check-modal-actions {
1188
+ background-image:linear-gradient(to bottom, rgba(30, 31, 34, 0.78) 0%, rgba(30, 31, 34, 0.98) 100%);
1189
+ }
1190
+ [data-theme="dark"] .health-failed-provider-list {
1191
+ border-color:rgba(210, 95, 83, 0.18);
1192
+ background-image:linear-gradient(180deg, rgba(30, 31, 34, 0.98), rgba(30, 31, 34, 0.92));
1193
+ }
1194
+ [data-theme="dark"] .btn-link:hover:not(:disabled) {
1195
+ background-color:rgba(255, 255, 255, 0.07);
1196
+ }
1197
+ [data-theme="dark"] .plugins-sidebar {
1198
+ background-image:linear-gradient(to bottom, rgba(30, 31, 34, 0.92) 0%, rgba(30, 31, 34, 0.72) 100%);
1199
+ }
1200
+ [data-theme="dark"] .plugins-item:hover {
1201
+ background-color:rgba(30, 31, 34, 0.7);
1202
+ }
1203
+ [data-theme="dark"] .plugins-item.active {
1204
+ border-color:rgba(214, 143, 121, 0.2);
1205
+ background-image:linear-gradient(to right, #202124 0%, rgba(30, 31, 34, 0.86) 100%);
1206
+ box-shadow:0 2px 8px rgba(255, 255, 255, 0.07);
1207
+ }
1208
+ [data-theme="dark"] .plugins-panel {
1209
+ background-image:linear-gradient(to bottom, rgba(30, 31, 34, 0.95) 0%, rgba(30, 31, 34, 0.72) 100%);
1210
+ }
1211
+ [data-theme="dark"] .prompt-templates-modebar {
1212
+ background-image:linear-gradient(to bottom, rgba(30, 31, 34, 0.82) 0%, rgba(30, 31, 34, 0.58) 100%);
1213
+ }
1214
+ [data-theme="dark"] .mode-pill.active {
1215
+ box-shadow:0 1px 4px rgba(0, 0, 0, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
1216
+ }
1217
+ [data-theme="dark"] .mode-pill:hover:not(.active) {
1218
+ background-color:rgba(30, 31, 34, 0.5);
1219
+ }
1220
+ [data-theme="dark"] .prompt-compose-form {
1221
+ background-color:rgba(30, 31, 34, 0.6);
1222
+ }
1223
+ [data-theme="dark"] .prompt-compose-modal-dialog {
1224
+ border:1px solid rgba(255, 255, 255, 0.24);
1225
+ background-image:linear-gradient(to bottom, rgba(30, 31, 34, 0.98) 0%, rgba(30, 31, 34, 0.86) 100%);
1226
+ }
1227
+ [data-theme="dark"] .prompt-compose-picker-item {
1228
+ background-color:rgba(30, 31, 34, 0.5);
1229
+ }
1230
+ [data-theme="dark"] .prompt-compose-picker-item:hover {
1231
+ border-color:rgba(255, 255, 255, 0.28);
1232
+ background-color:rgba(255, 255, 255, 0.11);
1233
+ }
1234
+ [data-theme="dark"] .prompt-compose-canvas {
1235
+ background-color:rgba(30, 31, 34, 0.6);
1236
+ }
1237
+ [data-theme="dark"] .prompt-fragment-var {
1238
+ border:1px solid rgba(255, 255, 255, 0.24);
1239
+ background-image:linear-gradient(to bottom, rgba(30, 31, 34, 0.98) 0%, rgba(30, 31, 34, 0.7) 100%);
1240
+ }
1241
+ [data-theme="dark"] .prompt-template-item {
1242
+ background-color:rgba(30, 31, 34, 0.5);
1243
+ }
1244
+ [data-theme="dark"] .prompt-template-item:hover {
1245
+ background-color:rgba(30, 31, 34, 0.75);
1246
+ }
1247
+ [data-theme="dark"] .prompt-template-item.active {
1248
+ border-color:rgba(255, 255, 255, 0.28);
1249
+ background-image:linear-gradient(to right, rgba(30, 31, 34, 0.8) 0%, rgba(30, 31, 34, 0.7) 100%);
1250
+ }
1251
+ [data-theme="dark"] .prompt-editor-head {
1252
+ background-image:linear-gradient(to bottom, rgba(30, 31, 34, 0.88) 0%, rgba(30, 31, 34, 0.6) 100%);
1253
+ }
1254
+ [data-theme="dark"] .prompt-vars-block,
1255
+ [data-theme="dark"] .prompt-preview-block {
1256
+ background-color:rgba(30, 31, 34, 0.6);
1257
+ }
1258
+ [data-theme="dark"] .prompt-var-input.is-missing {
1259
+ box-shadow:0 0 0 2px rgba(214, 118, 107, 0.12);
1260
+ }
1261
+ [data-theme="dark"] .docs-toolbar-card .install-action-tabs .btn-mini.active {
1262
+ border-color:rgba(255, 255, 255, 0.15);
1263
+ }
1264
+ [data-theme="dark"] .docs-command-prefix {
1265
+ border:1px solid rgba(255, 255, 255, 0.13);
1266
+ }
1267
+ [data-theme="dark"] .toast {
1268
+ background-image:linear-gradient(to bottom, var(--color-surface) 0%, rgba(30, 31, 34, 0.95) 100%);
1269
+ }
1270
+ [data-theme="dark"] button:focus-visible,
1271
+ [data-theme="dark"] select:focus-visible,
1272
+ [data-theme="dark"] input:focus-visible,
1273
+ [data-theme="dark"] textarea:focus-visible {
1274
+ outline:3px solid rgba(214, 143, 121, 0.25);
1275
+ }
1276
+ [data-theme="dark"] .webhook-event-checkbox-item:hover {
1277
+ background-color:rgba(255, 255, 255, 0.04);
1278
+ }
1279
+ [data-theme="dark"] .webhook-readonly-value {
1280
+ background-color:rgba(30, 31, 34, 0.55);
1281
+ }
1282
+ [data-theme="dark"] .prompts-split-collapse-btn {
1283
+ background-color:rgba(30, 31, 34, 0.95);
1284
+ }
1285
+ [data-theme="dark"] .prompts-preview-pane {
1286
+ background-color:rgba(30, 31, 34, 0.55);
1287
+ }
1288
+ [data-theme="dark"] .prompts-preview-body code {
1289
+ background-color:rgba(255, 255, 255, 0.08);
1290
+ }
1291
+ [data-theme="dark"] .prompts-preview-body pre {
1292
+ background-color:rgba(255, 255, 255, 0.08);
1293
+ }
1294
+ [data-theme="dark"] .prompts-change-tick--add {
1295
+ background-color:rgba(102, 207, 136, 0.5);
1296
+ }
1297
+ [data-theme="dark"] .prompts-change-tick--add:hover,
1298
+ [data-theme="dark"] .prompts-change-tick--add:focus-visible {
1299
+ background-color:rgba(102, 207, 136, 0.85);
1300
+ }
1301
+ [data-theme="dark"] .prompts-change-tick--del {
1302
+ background-color:rgba(255, 255, 255, 0.3);
1303
+ }
1304
+ [data-theme="dark"] .prompts-change-tick--del:hover,
1305
+ [data-theme="dark"] .prompts-change-tick--del:focus-visible {
1306
+ background-color:rgba(255, 255, 255, 0.3);
1307
+ }
1308
+ [data-theme="dark"] .prompts-change-tick--mixed {
1309
+ background-image:linear-gradient(180deg,
1310
+ rgba(255, 255, 255, 0.3) 0%,
1311
+ rgba(255, 255, 255, 0.3) 50%,
1312
+ rgba(102, 207, 136, 0.5) 50%,
1313
+ rgba(102, 207, 136, 0.5) 100%);
1314
+ }
1315
+ [data-theme="dark"] .prompts-change-tick--mixed:hover,
1316
+ [data-theme="dark"] .prompts-change-tick--mixed:focus-visible {
1317
+ background-image:linear-gradient(180deg,
1318
+ rgba(255, 255, 255, 0.3) 0%,
1319
+ rgba(255, 255, 255, 0.3) 50%,
1320
+ rgba(102, 207, 136, 0.85) 50%,
1321
+ rgba(102, 207, 136, 0.85) 100%);
1322
+ }
1323
+
1324
+ @supports (-webkit-background-clip: text) or (background-clip: text) {
1325
+ [data-theme="dark"] .brand-kicker {
1326
+ background-image:linear-gradient(180deg, #ECE8E4 0%, #D8D3CE 100%);
1327
+ }
1328
+ }
1329
+
1330
+ @media (max-width: 720px) {
1331
+ [data-theme="dark"] .mobile-brand-bar {
1332
+ background-color:#202124;
1333
+ }
1334
+ [data-theme="dark"] .top-tabs {
1335
+ background-color:#202124;
1336
+ }
1337
+ [data-theme="dark"] .main-panel-topbar {
1338
+ background-color:#202124;
1339
+ }
1340
+ }
1341
+
1342
+ @media (max-width: 540px) {
1343
+ [data-theme="dark"] .auth-profile-row {
1344
+ border-bottom:1px dashed rgba(255, 255, 255, 0.18);
1345
+ }
1346
+ }
1347
+
1348
+ @media (max-width: 820px) {
1349
+ [data-theme="dark"] .top-tabs {
1350
+ background-color:#202124;
1351
+ }
1352
+ [data-theme="dark"] .main-panel-topbar {
1353
+ background-color:#202124;
1354
+ }
1355
+ }