protocol-proxy 2.5.1 → 2.7.0

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.
package/public/style.css CHANGED
@@ -1,9 +1,114 @@
1
+ :root {
2
+ --bg-body: #030712;
3
+ --bg-card: rgba(15, 23, 42, 0.5);
4
+ --bg-surface: rgba(6, 8, 15, 0.6);
5
+ --bg-surface-alt: rgba(15, 23, 42, 0.4);
6
+ --bg-elevated: rgba(15, 23, 42, 0.7);
7
+ --bg-dropdown: rgba(15, 23, 42, 0.95);
8
+ --text-primary: #f1f5f9;
9
+ --text-secondary: #e2e8f0;
10
+ --text-muted: #94a3b8;
11
+ --text-dim: #64748b;
12
+ --text-faint: #475569;
13
+ --border-main: rgba(51, 65, 85, 0.4);
14
+ --border-light: rgba(51, 65, 85, 0.35);
15
+ --border-input: rgba(51, 65, 85, 0.5);
16
+ --grid-opacity: 0.03;
17
+ --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
18
+ --accent: #60a5fa;
19
+ --accent-dim: #3b82f6;
20
+ }
21
+
22
+ [data-theme="light"] {
23
+ --bg-body: #f1f5f9;
24
+ --bg-card: rgba(255, 255, 255, 0.85);
25
+ --bg-surface: rgba(241, 245, 249, 0.8);
26
+ --bg-surface-alt: rgba(241, 245, 249, 0.6);
27
+ --bg-elevated: rgba(255, 255, 255, 0.92);
28
+ --bg-dropdown: rgba(255, 255, 255, 0.97);
29
+ --text-primary: #0f172a;
30
+ --text-secondary: #1e293b;
31
+ --text-muted: #475569;
32
+ --text-dim: #64748b;
33
+ --text-faint: #94a3b8;
34
+ --border-main: rgba(203, 213, 225, 0.6);
35
+ --border-light: rgba(203, 213, 225, 0.5);
36
+ --border-input: rgba(203, 213, 225, 0.7);
37
+ --grid-opacity: 0.4;
38
+ --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
39
+ --accent: #2563eb;
40
+ --accent-dim: #1d4ed8;
41
+ }
42
+
43
+ [data-theme="pure-black"] {
44
+ --bg-body: #000000;
45
+ --bg-card: rgba(10, 10, 10, 0.7);
46
+ --bg-surface: rgba(5, 5, 5, 0.8);
47
+ --bg-surface-alt: rgba(10, 10, 10, 0.5);
48
+ --bg-elevated: rgba(10, 10, 10, 0.85);
49
+ --bg-dropdown: rgba(10, 10, 10, 0.97);
50
+ --text-primary: #e5e5e5;
51
+ --text-secondary: #d4d4d4;
52
+ --text-muted: #a3a3a3;
53
+ --text-dim: #737373;
54
+ --text-faint: #525252;
55
+ --border-main: rgba(64, 64, 64, 0.4);
56
+ --border-light: rgba(64, 64, 64, 0.3);
57
+ --border-input: rgba(64, 64, 64, 0.5);
58
+ --grid-opacity: 0.02;
59
+ --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
60
+ --accent: #a3a3a3;
61
+ --accent-dim: #737373;
62
+ }
63
+
64
+ [data-theme="neon"] {
65
+ --bg-body: #0a0a1a;
66
+ --bg-card: rgba(10, 10, 30, 0.6);
67
+ --bg-surface: rgba(10, 10, 30, 0.7);
68
+ --bg-surface-alt: rgba(15, 15, 40, 0.4);
69
+ --bg-elevated: rgba(10, 10, 30, 0.8);
70
+ --bg-dropdown: rgba(10, 10, 30, 0.95);
71
+ --text-primary: #e0f7ff;
72
+ --text-secondary: #c5e8f5;
73
+ --text-muted: #7ec8e8;
74
+ --text-dim: #4a9ab5;
75
+ --text-faint: #2d6a80;
76
+ --border-main: rgba(0, 200, 255, 0.2);
77
+ --border-light: rgba(0, 200, 255, 0.15);
78
+ --border-input: rgba(0, 200, 255, 0.25);
79
+ --grid-opacity: 0.06;
80
+ --card-shadow: 0 4px 24px rgba(0, 200, 255, 0.08);
81
+ --accent: #00d4ff;
82
+ --accent-dim: #0099cc;
83
+ }
84
+
85
+ [data-theme="amber"] {
86
+ --bg-body: #0f0a05;
87
+ --bg-card: rgba(20, 15, 8, 0.6);
88
+ --bg-surface: rgba(15, 10, 5, 0.7);
89
+ --bg-surface-alt: rgba(20, 15, 8, 0.45);
90
+ --bg-elevated: rgba(20, 15, 8, 0.8);
91
+ --bg-dropdown: rgba(20, 15, 8, 0.95);
92
+ --text-primary: #fef3c7;
93
+ --text-secondary: #fde68a;
94
+ --text-muted: #c8a55a;
95
+ --text-dim: #92703a;
96
+ --text-faint: #6b5025;
97
+ --border-main: rgba(180, 130, 50, 0.25);
98
+ --border-light: rgba(180, 130, 50, 0.18);
99
+ --border-input: rgba(180, 130, 50, 0.3);
100
+ --grid-opacity: 0.04;
101
+ --card-shadow: 0 4px 24px rgba(180, 130, 50, 0.06);
102
+ --accent: #f59e0b;
103
+ --accent-dim: #d97706;
104
+ }
105
+
1
106
  * { box-sizing: border-box; margin: 0; padding: 0; }
2
107
 
3
108
  body {
4
109
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
5
- background: #030712;
6
- color: #e2e8f0;
110
+ background: var(--bg-body);
111
+ color: var(--text-secondary);
7
112
  line-height: 1.6;
8
113
  min-height: 100vh;
9
114
  }
@@ -14,8 +119,8 @@ body::before {
14
119
  position: fixed;
15
120
  top: 0; left: 0; right: 0; bottom: 0;
16
121
  background-image:
17
- linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
18
- linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px);
122
+ linear-gradient(rgba(59, 130, 246, var(--grid-opacity)) 1px, transparent 1px),
123
+ linear-gradient(90deg, rgba(59, 130, 246, var(--grid-opacity)) 1px, transparent 1px);
19
124
  background-size: 60px 60px;
20
125
  pointer-events: none;
21
126
  z-index: 0;
@@ -29,6 +134,39 @@ body::before {
29
134
  padding: 40px 20px;
30
135
  }
31
136
 
137
+ /* Theme toggle */
138
+ .theme-toggle {
139
+ position: fixed;
140
+ top: 20px;
141
+ right: 20px;
142
+ z-index: 100;
143
+ height: 36px;
144
+ padding: 0 14px 0 10px;
145
+ border-radius: 10px;
146
+ border: 1px solid var(--border-input);
147
+ background: var(--bg-card);
148
+ backdrop-filter: blur(12px);
149
+ color: var(--text-muted);
150
+ font-size: 1rem;
151
+ cursor: pointer;
152
+ display: flex;
153
+ align-items: center;
154
+ gap: 6px;
155
+ transition: all 0.25s;
156
+ white-space: nowrap;
157
+ }
158
+
159
+ .theme-label {
160
+ font-size: 0.78rem;
161
+ font-weight: 500;
162
+ }
163
+
164
+ .theme-toggle:hover {
165
+ border-color: var(--accent);
166
+ color: var(--accent);
167
+ box-shadow: 0 0 12px rgba(59, 130, 246, 0.15);
168
+ }
169
+
32
170
  /* Header */
33
171
  header {
34
172
  text-align: center;
@@ -62,9 +200,9 @@ header p {
62
200
  }
63
201
 
64
202
  .stat-item {
65
- background: rgba(15, 23, 42, 0.6);
203
+ background: var(--bg-surface);
66
204
  backdrop-filter: blur(12px);
67
- border: 1px solid rgba(51, 65, 85, 0.5);
205
+ border: 1px solid var(--border-input);
68
206
  border-radius: 16px;
69
207
  padding: 24px 48px;
70
208
  text-align: center;
@@ -93,7 +231,7 @@ header p {
93
231
  display: block;
94
232
  font-size: 2.2rem;
95
233
  font-weight: 700;
96
- color: #60a5fa;
234
+ color: var(--accent);
97
235
  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
98
236
  }
99
237
 
@@ -107,12 +245,12 @@ header p {
107
245
 
108
246
  /* Card */
109
247
  .card {
110
- background: rgba(15, 23, 42, 0.5);
248
+ background: var(--bg-card);
111
249
  backdrop-filter: blur(16px);
112
- border: 1px solid rgba(51, 65, 85, 0.4);
250
+ border: 1px solid var(--border-main);
113
251
  border-radius: 20px;
114
252
  overflow: hidden;
115
- box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
253
+ box-shadow: var(--card-shadow);
116
254
  }
117
255
 
118
256
  .card-header {
@@ -120,7 +258,7 @@ header p {
120
258
  justify-content: space-between;
121
259
  align-items: center;
122
260
  padding: 24px 28px;
123
- border-bottom: 1px solid rgba(51, 65, 85, 0.4);
261
+ border-bottom: 1px solid var(--border-main);
124
262
  }
125
263
 
126
264
  .card-header h2 {
@@ -152,14 +290,13 @@ header p {
152
290
  }
153
291
 
154
292
  .btn-primary {
155
- background: linear-gradient(135deg, #3b82f6, #2563eb);
293
+ background: linear-gradient(135deg, var(--accent), var(--accent-dim));
156
294
  border-color: transparent;
157
295
  color: white;
158
296
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
159
297
  }
160
298
 
161
299
  .btn-primary:hover {
162
- background: linear-gradient(135deg, #4b92ff, #3573fb);
163
300
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
164
301
  transform: translateY(-1px);
165
302
  }
@@ -193,6 +330,47 @@ header p {
193
330
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.35);
194
331
  }
195
332
 
333
+ /* Proxy toolbar */
334
+ .proxy-toolbar {
335
+ display: flex;
336
+ align-items: center;
337
+ gap: 12px;
338
+ padding: 14px 28px;
339
+ border-bottom: 1px solid var(--border-light);
340
+ background: var(--bg-surface-alt);
341
+ }
342
+
343
+ .proxy-search {
344
+ flex: 1;
345
+ }
346
+
347
+ .proxy-search input {
348
+ width: 100%;
349
+ padding: 8px 14px;
350
+ background: var(--bg-surface);
351
+ border: 1px solid var(--border-input);
352
+ border-radius: 8px;
353
+ color: var(--text-secondary);
354
+ font-size: 0.85rem;
355
+ transition: all 0.2s;
356
+ }
357
+
358
+ .proxy-search input::placeholder {
359
+ color: #475569;
360
+ }
361
+
362
+ .proxy-search input:focus {
363
+ outline: none;
364
+ border-color: rgba(59, 130, 246, 0.5);
365
+ box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
366
+ }
367
+
368
+ .proxy-toolbar-actions {
369
+ display: flex;
370
+ gap: 6px;
371
+ flex-shrink: 0;
372
+ }
373
+
196
374
  /* Proxy list */
197
375
  .proxy-list {
198
376
  padding: 20px;
@@ -201,7 +379,7 @@ header p {
201
379
  .empty {
202
380
  text-align: center;
203
381
  padding: 80px 20px;
204
- color: #475569;
382
+ color: var(--text-faint);
205
383
  font-size: 0.95rem;
206
384
  }
207
385
 
@@ -209,15 +387,15 @@ header p {
209
387
  content: '◈';
210
388
  display: block;
211
389
  font-size: 3rem;
212
- color: #334155;
390
+ color: var(--text-faint);
213
391
  margin-bottom: 16px;
214
392
  }
215
393
 
216
394
  /* Proxy Item */
217
395
  .proxy-item {
218
- background: rgba(6, 8, 15, 0.6);
396
+ background: var(--bg-surface);
219
397
  backdrop-filter: blur(12px);
220
- border: 1px solid rgba(51, 65, 85, 0.35);
398
+ border: 1px solid var(--border-light);
221
399
  border-radius: 16px;
222
400
  padding: 24px;
223
401
  margin-bottom: 16px;
@@ -355,7 +533,7 @@ header p {
355
533
  gap: 10px;
356
534
  margin-top: 18px;
357
535
  padding-top: 18px;
358
- border-top: 1px solid rgba(30, 41, 59, 0.5);
536
+ border-top: 1px solid var(--border-light);
359
537
  }
360
538
 
361
539
  /* Modal */
@@ -380,9 +558,9 @@ header p {
380
558
  }
381
559
 
382
560
  .modal-content {
383
- background: rgba(15, 23, 42, 0.7);
561
+ background: var(--bg-elevated);
384
562
  backdrop-filter: blur(24px);
385
- border: 1px solid rgba(71, 85, 105, 0.4);
563
+ border: 1px solid var(--border-main);
386
564
  border-radius: 20px;
387
565
  width: 100%;
388
566
  max-width: 700px;
@@ -401,7 +579,7 @@ header p {
401
579
  justify-content: space-between;
402
580
  align-items: center;
403
581
  padding: 22px 28px;
404
- border-bottom: 1px solid rgba(51, 65, 85, 0.4);
582
+ border-bottom: 1px solid var(--border-main);
405
583
  }
406
584
 
407
585
  .modal-header h3 {
@@ -454,10 +632,10 @@ form {
454
632
  .form-group textarea {
455
633
  width: 100%;
456
634
  padding: 11px 16px;
457
- background: rgba(6, 8, 15, 0.6);
458
- border: 1px solid rgba(51, 65, 85, 0.5);
635
+ background: var(--bg-surface);
636
+ border: 1px solid var(--border-input);
459
637
  border-radius: 10px;
460
- color: #f1f5f9;
638
+ color: var(--text-primary);
461
639
  font-size: 0.95rem;
462
640
  transition: all 0.25s ease;
463
641
  appearance: none;
@@ -507,7 +685,7 @@ form {
507
685
  .target-section {
508
686
  margin-top: 24px;
509
687
  padding-top: 24px;
510
- border-top: 1px solid rgba(51, 65, 85, 0.4);
688
+ border-top: 1px solid var(--border-main);
511
689
  }
512
690
 
513
691
  .target-section h4 {
@@ -520,8 +698,8 @@ form {
520
698
  }
521
699
 
522
700
  .target-item {
523
- background: rgba(6, 8, 15, 0.5);
524
- border: 1px solid rgba(51, 65, 85, 0.35);
701
+ background: var(--bg-surface-alt);
702
+ border: 1px solid var(--border-light);
525
703
  border-radius: 14px;
526
704
  padding: 20px;
527
705
  margin-bottom: 12px;
@@ -551,7 +729,7 @@ form {
551
729
  gap: 12px;
552
730
  padding-top: 20px;
553
731
  margin-top: 20px;
554
- border-top: 1px solid rgba(51, 65, 85, 0.4);
732
+ border-top: 1px solid var(--border-main);
555
733
  }
556
734
 
557
735
  /* Proxy address */
@@ -561,8 +739,8 @@ form {
561
739
  gap: 10px;
562
740
  margin-top: 14px;
563
741
  padding: 12px 16px;
564
- background: rgba(15, 23, 42, 0.5);
565
- border: 1px solid rgba(51, 65, 85, 0.35);
742
+ background: var(--bg-surface-alt);
743
+ border: 1px solid var(--border-light);
566
744
  border-radius: 12px;
567
745
  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
568
746
  transition: all 0.25s;
@@ -576,7 +754,7 @@ form {
576
754
  .proxy-address code {
577
755
  flex: 1;
578
756
  font-size: 0.85rem;
579
- color: #7dd3fc;
757
+ color: var(--accent);
580
758
  word-break: break-all;
581
759
  }
582
760
 
@@ -611,8 +789,9 @@ form {
611
789
  /* Toast */
612
790
  .toast {
613
791
  position: fixed;
614
- bottom: 28px;
615
- right: 28px;
792
+ top: 50%;
793
+ left: 50%;
794
+ transform: translate(-50%, -50%);
616
795
  padding: 12px 24px;
617
796
  background: linear-gradient(135deg, #22c55e, #16a34a);
618
797
  color: white;
@@ -626,8 +805,8 @@ form {
626
805
  }
627
806
 
628
807
  @keyframes toast-in {
629
- from { opacity: 0; transform: translateY(16px) scale(0.95); }
630
- to { opacity: 1; transform: translateY(0) scale(1); }
808
+ from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
809
+ to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
631
810
  }
632
811
 
633
812
  @keyframes toast-out {
@@ -647,10 +826,10 @@ form {
647
826
  justify-content: space-between;
648
827
  width: 100%;
649
828
  padding: 11px 16px;
650
- background: rgba(6, 8, 15, 0.6);
651
- border: 1px solid rgba(51, 65, 85, 0.5);
829
+ background: var(--bg-surface);
830
+ border: 1px solid var(--border-input);
652
831
  border-radius: 10px;
653
- color: #f1f5f9;
832
+ color: var(--text-primary);
654
833
  font-size: 0.95rem;
655
834
  cursor: pointer;
656
835
  transition: all 0.25s ease;
@@ -682,9 +861,9 @@ form {
682
861
  top: calc(100% + 6px);
683
862
  left: 0;
684
863
  right: 0;
685
- background: rgba(15, 23, 42, 0.95);
864
+ background: var(--bg-dropdown);
686
865
  backdrop-filter: blur(24px);
687
- border: 1px solid rgba(71, 85, 105, 0.5);
866
+ border: 1px solid var(--border-input);
688
867
  border-radius: 12px;
689
868
  z-index: 100;
690
869
  overflow: hidden;
@@ -771,17 +950,17 @@ form {
771
950
  display: flex;
772
951
  gap: 8px;
773
952
  padding: 10px 16px;
774
- border-top: 1px solid rgba(51, 65, 85, 0.4);
775
- background: rgba(6, 8, 15, 0.3);
953
+ border-top: 1px solid var(--border-main);
954
+ background: var(--bg-surface-alt);
776
955
  }
777
956
 
778
957
  .model-add-input {
779
958
  flex: 1;
780
959
  padding: 7px 12px;
781
- background: rgba(6, 8, 15, 0.5);
782
- border: 1px solid rgba(51, 65, 85, 0.5);
960
+ background: var(--bg-surface);
961
+ border: 1px solid var(--border-input);
783
962
  border-radius: 8px;
784
- color: #e2e8f0;
963
+ color: var(--text-secondary);
785
964
  font-size: 0.85rem;
786
965
  transition: all 0.2s;
787
966
  }
@@ -798,9 +977,9 @@ form {
798
977
  }
799
978
 
800
979
  .confirm-modal .confirm-box {
801
- background: rgba(15, 23, 42, 0.8);
980
+ background: var(--bg-elevated);
802
981
  backdrop-filter: blur(24px);
803
- border: 1px solid rgba(71, 85, 105, 0.4);
982
+ border: 1px solid var(--border-main);
804
983
  border-radius: 20px;
805
984
  padding: 32px 36px;
806
985
  max-width: 380px;
@@ -871,8 +1050,8 @@ form {
871
1050
 
872
1051
  .import-stat {
873
1052
  flex: 1;
874
- background: rgba(6, 8, 15, 0.4);
875
- border: 1px solid rgba(51, 65, 85, 0.3);
1053
+ background: var(--bg-surface-alt);
1054
+ border: 1px solid var(--border-light);
876
1055
  border-radius: 12px;
877
1056
  padding: 16px;
878
1057
  text-align: center;
@@ -882,7 +1061,7 @@ form {
882
1061
  display: block;
883
1062
  font-size: 1.8rem;
884
1063
  font-weight: 700;
885
- color: #60a5fa;
1064
+ color: var(--accent);
886
1065
  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
887
1066
  }
888
1067
 
@@ -912,8 +1091,8 @@ form {
912
1091
  align-items: flex-start;
913
1092
  gap: 12px;
914
1093
  padding: 14px 16px;
915
- background: rgba(6, 8, 15, 0.4);
916
- border: 1px solid rgba(51, 65, 85, 0.3);
1094
+ background: var(--bg-surface-alt);
1095
+ border: 1px solid var(--border-light);
917
1096
  border-radius: 10px;
918
1097
  cursor: pointer;
919
1098
  transition: all 0.2s;
@@ -973,17 +1152,17 @@ form {
973
1152
  .stats-filter-trigger {
974
1153
  padding: 7px 14px !important;
975
1154
  font-size: 0.85rem !important;
976
- background: rgba(51, 65, 85, 0.3) !important;
1155
+ background: var(--bg-surface-alt) !important;
977
1156
  }
978
1157
 
979
1158
  .stats-range-btns {
980
1159
  display: flex;
981
1160
  gap: 4px;
982
1161
  align-items: center;
983
- background: rgba(6, 8, 15, 0.4);
1162
+ background: var(--bg-surface-alt);
984
1163
  border-radius: 10px;
985
1164
  padding: 3px;
986
- border: 1px solid rgba(51, 65, 85, 0.3);
1165
+ border: 1px solid var(--border-light);
987
1166
  }
988
1167
 
989
1168
  .stats-range-btn {
@@ -1014,8 +1193,8 @@ form {
1014
1193
  }
1015
1194
 
1016
1195
  .stats-date-input {
1017
- background: rgba(15, 23, 42, 0.6);
1018
- border: 1px solid rgba(51, 65, 85, 0.5);
1196
+ background: var(--bg-surface);
1197
+ border: 1px solid var(--border-input);
1019
1198
  border-radius: 6px;
1020
1199
  color: #e2e8f0;
1021
1200
  padding: 6px 8px;
@@ -1048,8 +1227,8 @@ form {
1048
1227
  }
1049
1228
 
1050
1229
  .stats-summary-item {
1051
- background: rgba(6, 8, 15, 0.4);
1052
- border: 1px solid rgba(51, 65, 85, 0.3);
1230
+ background: var(--bg-surface-alt);
1231
+ border: 1px solid var(--border-light);
1053
1232
  border-radius: 12px;
1054
1233
  padding: 18px 16px;
1055
1234
  text-align: center;
@@ -1065,7 +1244,7 @@ form {
1065
1244
  display: block;
1066
1245
  font-size: 1.5rem;
1067
1246
  font-weight: 700;
1068
- color: #60a5fa;
1247
+ color: var(--accent);
1069
1248
  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
1070
1249
  margin-bottom: 4px;
1071
1250
  }
@@ -1127,7 +1306,7 @@ form {
1127
1306
  text-align: right;
1128
1307
  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
1129
1308
  font-size: 0.82rem;
1130
- color: #7dd3fc;
1309
+ color: var(--accent);
1131
1310
  }
1132
1311
 
1133
1312
  .stats-table tfoot td {
@@ -1275,10 +1454,10 @@ form {
1275
1454
  .api-key-display {
1276
1455
  display: block;
1277
1456
  padding: 11px 16px;
1278
- background: rgba(6, 8, 15, 0.6);
1279
- border: 1px solid rgba(51, 65, 85, 0.5);
1457
+ background: var(--bg-surface);
1458
+ border: 1px solid var(--border-input);
1280
1459
  border-radius: 10px;
1281
- color: #64748b;
1460
+ color: var(--text-dim);
1282
1461
  font-size: 0.9rem;
1283
1462
  letter-spacing: 2px;
1284
1463
  cursor: pointer;
@@ -1342,11 +1521,11 @@ form {
1342
1521
 
1343
1522
  .provider-pool-empty {
1344
1523
  padding: 12px 14px;
1345
- border: 1px dashed rgba(71, 85, 105, 0.6);
1524
+ border: 1px dashed var(--border-input);
1346
1525
  border-radius: 10px;
1347
- color: #64748b;
1526
+ color: var(--text-dim);
1348
1527
  font-size: 0.9rem;
1349
- background: rgba(6, 8, 15, 0.35);
1528
+ background: var(--bg-surface-alt);
1350
1529
  }
1351
1530
 
1352
1531
  .provider-pool-item {
@@ -1355,9 +1534,9 @@ form {
1355
1534
  gap: 12px;
1356
1535
  align-items: center;
1357
1536
  padding: 12px 14px;
1358
- border: 1px solid rgba(51, 65, 85, 0.5);
1537
+ border: 1px solid var(--border-input);
1359
1538
  border-radius: 12px;
1360
- background: rgba(6, 8, 15, 0.45);
1539
+ background: var(--bg-surface);
1361
1540
  }
1362
1541
 
1363
1542
  .provider-pool-main {
@@ -1457,3 +1636,238 @@ form {
1457
1636
  background: rgba(127, 29, 29, 0.35);
1458
1637
  border-color: rgba(248, 113, 113, 0.8);
1459
1638
  }
1639
+
1640
+ /* Inline API Key error */
1641
+ .api-key-error {
1642
+ margin-top: 6px;
1643
+ padding: 6px 10px;
1644
+ background: rgba(127, 29, 29, 0.15);
1645
+ border: 1px solid rgba(248, 113, 113, 0.2);
1646
+ border-radius: 6px;
1647
+ color: #fca5a5;
1648
+ font-size: 0.78rem;
1649
+ line-height: 1.4;
1650
+ }
1651
+
1652
+ /* Test result modal items */
1653
+ .test-result-box {
1654
+ max-width: 460px !important;
1655
+ }
1656
+
1657
+ .test-result-list {
1658
+ display: flex;
1659
+ flex-direction: column;
1660
+ gap: 8px;
1661
+ margin-bottom: 20px;
1662
+ max-height: 300px;
1663
+ overflow-y: auto;
1664
+ }
1665
+
1666
+ .test-result-item {
1667
+ padding: 10px 14px;
1668
+ border-radius: 10px;
1669
+ background: rgba(6, 8, 15, 0.4);
1670
+ border: 1px solid rgba(51, 65, 85, 0.3);
1671
+ }
1672
+
1673
+ .test-result-item.test-ok {
1674
+ border-color: rgba(52, 211, 153, 0.2);
1675
+ }
1676
+
1677
+ .test-result-item.test-fail {
1678
+ border-color: rgba(248, 113, 113, 0.3);
1679
+ background: rgba(127, 29, 29, 0.1);
1680
+ }
1681
+
1682
+ .test-result-row {
1683
+ display: flex;
1684
+ align-items: center;
1685
+ gap: 10px;
1686
+ }
1687
+
1688
+ .test-result-status {
1689
+ font-size: 1rem;
1690
+ font-weight: 700;
1691
+ width: 20px;
1692
+ text-align: center;
1693
+ }
1694
+
1695
+ .test-ok .test-result-status {
1696
+ color: #34d399;
1697
+ }
1698
+
1699
+ .test-fail .test-result-status {
1700
+ color: #f87171;
1701
+ }
1702
+
1703
+ .test-result-alias {
1704
+ flex: 1;
1705
+ color: #e2e8f0;
1706
+ font-size: 0.9rem;
1707
+ font-weight: 500;
1708
+ }
1709
+
1710
+ .test-result-latency {
1711
+ color: #60a5fa;
1712
+ font-size: 0.82rem;
1713
+ font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
1714
+ }
1715
+
1716
+ .test-result-error {
1717
+ margin-top: 6px;
1718
+ padding: 5px 10px;
1719
+ color: #fca5a5;
1720
+ font-size: 0.78rem;
1721
+ background: rgba(127, 29, 29, 0.15);
1722
+ border-radius: 6px;
1723
+ border: 1px solid rgba(248, 113, 113, 0.1);
1724
+ }
1725
+
1726
+ /* test-result-list scrollbar */
1727
+ .test-result-list::-webkit-scrollbar {
1728
+ width: 6px;
1729
+ }
1730
+
1731
+ .test-result-list::-webkit-scrollbar-track {
1732
+ background: transparent;
1733
+ }
1734
+
1735
+ .test-result-list::-webkit-scrollbar-thumb {
1736
+ background: rgba(71, 85, 105, 0.5);
1737
+ border-radius: 3px;
1738
+ }
1739
+
1740
+ /* Log viewer */
1741
+ .log-toolbar {
1742
+ display: flex;
1743
+ gap: 10px;
1744
+ align-items: center;
1745
+ padding: 14px 28px;
1746
+ border-bottom: 1px solid var(--border-light);
1747
+ background: var(--bg-surface-alt);
1748
+ }
1749
+
1750
+ .log-toolbar select {
1751
+ padding: 6px 10px;
1752
+ background: var(--bg-surface);
1753
+ border: 1px solid var(--border-input);
1754
+ border-radius: 8px;
1755
+ color: #e2e8f0;
1756
+ font-size: 0.85rem;
1757
+ cursor: pointer;
1758
+ appearance: auto;
1759
+ }
1760
+
1761
+ .log-toolbar select option {
1762
+ background: #0f172a;
1763
+ color: #e2e8f0;
1764
+ }
1765
+
1766
+ .log-content {
1767
+ padding: 16px 28px 28px;
1768
+ max-height: 500px;
1769
+ overflow-y: auto;
1770
+ font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
1771
+ font-size: 0.78rem;
1772
+ line-height: 1.7;
1773
+ color: var(--text-muted);
1774
+ background: var(--bg-surface-alt);
1775
+ }
1776
+
1777
+ .log-content::-webkit-scrollbar {
1778
+ width: 6px;
1779
+ }
1780
+
1781
+ .log-content::-webkit-scrollbar-track {
1782
+ background: transparent;
1783
+ }
1784
+
1785
+ .log-content::-webkit-scrollbar-thumb {
1786
+ background: rgba(71, 85, 105, 0.5);
1787
+ border-radius: 3px;
1788
+ }
1789
+
1790
+ .log-line {
1791
+ padding: 1px 0;
1792
+ white-space: pre-wrap;
1793
+ word-break: break-all;
1794
+ }
1795
+
1796
+ .log-line.log-error {
1797
+ color: #fca5a5;
1798
+ }
1799
+
1800
+ .log-line.log-warn {
1801
+ color: #fbbf24;
1802
+ }
1803
+
1804
+ /* History viewer */
1805
+ .history-content {
1806
+ padding: 20px 28px 28px;
1807
+ max-height: 500px;
1808
+ overflow-y: auto;
1809
+ }
1810
+
1811
+ .history-content::-webkit-scrollbar {
1812
+ width: 6px;
1813
+ }
1814
+
1815
+ .history-content::-webkit-scrollbar-track {
1816
+ background: transparent;
1817
+ }
1818
+
1819
+ .history-content::-webkit-scrollbar-thumb {
1820
+ background: rgba(71, 85, 105, 0.5);
1821
+ border-radius: 3px;
1822
+ }
1823
+
1824
+ .history-list {
1825
+ display: flex;
1826
+ flex-direction: column;
1827
+ gap: 8px;
1828
+ }
1829
+
1830
+ .history-item {
1831
+ display: flex;
1832
+ align-items: center;
1833
+ justify-content: space-between;
1834
+ padding: 12px 16px;
1835
+ background: var(--bg-surface-alt);
1836
+ border: 1px solid var(--border-light);
1837
+ border-radius: 10px;
1838
+ transition: border-color 0.2s;
1839
+ }
1840
+
1841
+ .history-item:hover {
1842
+ border-color: rgba(59, 130, 246, 0.3);
1843
+ }
1844
+
1845
+ .history-info {
1846
+ display: flex;
1847
+ align-items: center;
1848
+ gap: 14px;
1849
+ flex: 1;
1850
+ min-width: 0;
1851
+ }
1852
+
1853
+ .history-time {
1854
+ color: #e2e8f0;
1855
+ font-size: 0.85rem;
1856
+ font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
1857
+ white-space: nowrap;
1858
+ }
1859
+
1860
+ .history-reason {
1861
+ color: #94a3b8;
1862
+ font-size: 0.82rem;
1863
+ padding: 2px 8px;
1864
+ background: rgba(51, 65, 85, 0.3);
1865
+ border-radius: 6px;
1866
+ white-space: nowrap;
1867
+ }
1868
+
1869
+ .history-size {
1870
+ color: #64748b;
1871
+ font-size: 0.78rem;
1872
+ white-space: nowrap;
1873
+ }