protocol-proxy 2.3.4 → 2.5.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.
Files changed (13) hide show
  1. package/lib/config-store.js +295 -225
  2. package/lib/converters/gemini-to-anthropic.js +286 -277
  3. package/lib/converters/gemini-to-openai.js +255 -240
  4. package/lib/converters/openai-to-anthropic.js +368 -329
  5. package/lib/logger.js +58 -0
  6. package/lib/proxy-manager.js +4 -0
  7. package/lib/proxy-server.js +636 -357
  8. package/lib/stats-store.js +3 -5
  9. package/package.json +51 -51
  10. package/public/app.js +1296 -972
  11. package/public/index.html +321 -277
  12. package/public/style.css +1448 -1189
  13. package/server.js +767 -655
package/public/style.css CHANGED
@@ -1,1189 +1,1448 @@
1
- * { box-sizing: border-box; margin: 0; padding: 0; }
2
-
3
- body {
4
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
5
- background: #030712;
6
- color: #e2e8f0;
7
- line-height: 1.6;
8
- min-height: 100vh;
9
- }
10
-
11
- /* 科技网格背景 */
12
- body::before {
13
- content: '';
14
- position: fixed;
15
- top: 0; left: 0; right: 0; bottom: 0;
16
- 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);
19
- background-size: 60px 60px;
20
- pointer-events: none;
21
- z-index: 0;
22
- }
23
-
24
- .container {
25
- position: relative;
26
- z-index: 1;
27
- max-width: 1200px;
28
- margin: 0 auto;
29
- padding: 40px 20px;
30
- }
31
-
32
- /* Header */
33
- header {
34
- text-align: center;
35
- margin-bottom: 40px;
36
- }
37
-
38
- header h1 {
39
- font-size: 2.8rem;
40
- font-weight: 800;
41
- letter-spacing: -0.02em;
42
- background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #22d3ee 100%);
43
- -webkit-background-clip: text;
44
- -webkit-text-fill-color: transparent;
45
- background-clip: text;
46
- margin-bottom: 10px;
47
- text-shadow: 0 0 40px rgba(96, 165, 250, 0.15);
48
- }
49
-
50
- header p {
51
- color: #64748b;
52
- font-size: 1.05rem;
53
- letter-spacing: 0.02em;
54
- }
55
-
56
- /* Stats */
57
- .stats {
58
- display: flex;
59
- gap: 20px;
60
- justify-content: center;
61
- margin-bottom: 40px;
62
- }
63
-
64
- .stat-item {
65
- background: rgba(15, 23, 42, 0.6);
66
- backdrop-filter: blur(12px);
67
- border: 1px solid rgba(51, 65, 85, 0.5);
68
- border-radius: 16px;
69
- padding: 24px 48px;
70
- text-align: center;
71
- min-width: 160px;
72
- position: relative;
73
- overflow: hidden;
74
- transition: all 0.3s ease;
75
- }
76
-
77
- .stat-item::before {
78
- content: '';
79
- position: absolute;
80
- top: 0; left: 0; right: 0;
81
- height: 2px;
82
- background: linear-gradient(90deg, transparent, #3b82f6, transparent);
83
- opacity: 0.5;
84
- }
85
-
86
- .stat-item:hover {
87
- border-color: rgba(59, 130, 246, 0.3);
88
- box-shadow: 0 0 30px rgba(59, 130, 246, 0.08);
89
- transform: translateY(-2px);
90
- }
91
-
92
- .stat-value {
93
- display: block;
94
- font-size: 2.2rem;
95
- font-weight: 700;
96
- color: #60a5fa;
97
- font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
98
- }
99
-
100
- .stat-label {
101
- color: #64748b;
102
- font-size: 0.85rem;
103
- text-transform: uppercase;
104
- letter-spacing: 0.08em;
105
- margin-top: 4px;
106
- }
107
-
108
- /* Card */
109
- .card {
110
- background: rgba(15, 23, 42, 0.5);
111
- backdrop-filter: blur(16px);
112
- border: 1px solid rgba(51, 65, 85, 0.4);
113
- border-radius: 20px;
114
- overflow: hidden;
115
- box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
116
- }
117
-
118
- .card-header {
119
- display: flex;
120
- justify-content: space-between;
121
- align-items: center;
122
- padding: 24px 28px;
123
- border-bottom: 1px solid rgba(51, 65, 85, 0.4);
124
- }
125
-
126
- .card-header h2 {
127
- font-size: 1.15rem;
128
- font-weight: 600;
129
- color: #f1f5f9;
130
- letter-spacing: -0.01em;
131
- }
132
-
133
- /* Buttons */
134
- .btn {
135
- padding: 9px 18px;
136
- border-radius: 10px;
137
- border: 1px solid rgba(71, 85, 105, 0.6);
138
- background: rgba(51, 65, 85, 0.4);
139
- color: #cbd5e1;
140
- cursor: pointer;
141
- font-size: 0.9rem;
142
- font-weight: 500;
143
- transition: all 0.25s ease;
144
- backdrop-filter: blur(8px);
145
- }
146
-
147
- .btn:hover {
148
- background: rgba(71, 85, 105, 0.5);
149
- border-color: rgba(100, 116, 139, 0.8);
150
- transform: translateY(-1px);
151
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
152
- }
153
-
154
- .btn-primary {
155
- background: linear-gradient(135deg, #3b82f6, #2563eb);
156
- border-color: transparent;
157
- color: white;
158
- box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
159
- }
160
-
161
- .btn-primary:hover {
162
- background: linear-gradient(135deg, #4b92ff, #3573fb);
163
- box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
164
- transform: translateY(-1px);
165
- }
166
-
167
- .btn-sm {
168
- padding: 5px 14px;
169
- font-size: 0.85rem;
170
- }
171
-
172
- .btn-danger {
173
- background: linear-gradient(135deg, #ef4444, #dc2626);
174
- border-color: transparent;
175
- color: white;
176
- box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
177
- }
178
-
179
- .btn-danger:hover {
180
- background: linear-gradient(135deg, #ff5555, #ec3636);
181
- box-shadow: 0 4px 16px rgba(239, 68, 68, 0.35);
182
- }
183
-
184
- .btn-success {
185
- background: linear-gradient(135deg, #22c55e, #16a34a);
186
- border-color: transparent;
187
- color: white;
188
- box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2);
189
- }
190
-
191
- .btn-success:hover {
192
- background: linear-gradient(135deg, #32d56e, #26b34a);
193
- box-shadow: 0 4px 16px rgba(34, 197, 94, 0.35);
194
- }
195
-
196
- /* Proxy list */
197
- .proxy-list {
198
- padding: 20px;
199
- }
200
-
201
- .empty {
202
- text-align: center;
203
- padding: 80px 20px;
204
- color: #475569;
205
- font-size: 0.95rem;
206
- }
207
-
208
- .empty::before {
209
- content: '◈';
210
- display: block;
211
- font-size: 3rem;
212
- color: #334155;
213
- margin-bottom: 16px;
214
- }
215
-
216
- /* Proxy Item */
217
- .proxy-item {
218
- background: rgba(6, 8, 15, 0.6);
219
- backdrop-filter: blur(12px);
220
- border: 1px solid rgba(51, 65, 85, 0.35);
221
- border-radius: 16px;
222
- padding: 24px;
223
- margin-bottom: 16px;
224
- position: relative;
225
- overflow: hidden;
226
- transition: all 0.3s ease;
227
- }
228
-
229
- .proxy-item::before {
230
- content: '';
231
- position: absolute;
232
- left: 0; top: 0; bottom: 0;
233
- width: 3px;
234
- background: #475569;
235
- transition: background 0.3s ease;
236
- }
237
-
238
- .proxy-item:hover {
239
- border-color: rgba(71, 85, 105, 0.6);
240
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
241
- transform: translateY(-2px);
242
- }
243
-
244
- .proxy-item:hover::before {
245
- background: #3b82f6;
246
- box-shadow: 0 0 12px rgba(59, 130, 246, 0.5);
247
- }
248
-
249
- .proxy-header {
250
- display: flex;
251
- justify-content: space-between;
252
- align-items: flex-start;
253
- margin-bottom: 14px;
254
- }
255
-
256
- .proxy-title {
257
- display: flex;
258
- align-items: center;
259
- gap: 12px;
260
- }
261
-
262
- .proxy-title h3 {
263
- font-size: 1.15rem;
264
- font-weight: 600;
265
- color: #f8fafc;
266
- }
267
-
268
- /* Badge */
269
- .badge {
270
- padding: 3px 12px;
271
- border-radius: 20px;
272
- font-size: 0.75rem;
273
- font-weight: 600;
274
- letter-spacing: 0.03em;
275
- backdrop-filter: blur(8px);
276
- }
277
-
278
- .badge-running {
279
- background: rgba(6, 78, 59, 0.4);
280
- color: #34d399;
281
- border: 1px solid rgba(52, 211, 153, 0.2);
282
- box-shadow: 0 0 8px rgba(52, 211, 153, 0.1);
283
- }
284
-
285
- .badge-stopped {
286
- background: rgba(69, 26, 3, 0.4);
287
- color: #fbbf24;
288
- border: 1px solid rgba(251, 191, 36, 0.2);
289
- }
290
-
291
- .proxy-meta {
292
- display: flex;
293
- gap: 24px;
294
- color: #64748b;
295
- font-size: 0.9rem;
296
- margin-bottom: 16px;
297
- }
298
-
299
- .proxy-meta span {
300
- display: flex;
301
- align-items: center;
302
- gap: 6px;
303
- }
304
-
305
- /* Target Table */
306
- .target-table {
307
- width: 100%;
308
- border-collapse: separate;
309
- border-spacing: 0;
310
- font-size: 0.85rem;
311
- table-layout: fixed;
312
- border-radius: 10px;
313
- overflow: hidden;
314
- }
315
-
316
- .target-table th:nth-child(1),
317
- .target-table td:nth-child(1) { width: 55%; }
318
-
319
- .target-table th:nth-child(2),
320
- .target-table td:nth-child(2) { width: 15%; }
321
-
322
- .target-table th:nth-child(3),
323
- .target-table td:nth-child(3) { width: 30%; }
324
-
325
- .target-table th,
326
- .target-table td {
327
- text-align: left;
328
- padding: 10px 14px;
329
- border-bottom: 1px solid rgba(30, 41, 59, 0.6);
330
- }
331
-
332
- .target-table th {
333
- color: #475569;
334
- font-weight: 600;
335
- text-transform: uppercase;
336
- font-size: 0.7rem;
337
- letter-spacing: 0.08em;
338
- background: rgba(15, 23, 42, 0.4);
339
- }
340
-
341
- .target-table td {
342
- color: #94a3b8;
343
- word-break: break-all;
344
- }
345
-
346
- .target-table tbody tr:last-child td {
347
- border-bottom: none;
348
- }
349
-
350
- .proxy-actions {
351
- display: flex;
352
- gap: 10px;
353
- margin-top: 18px;
354
- padding-top: 18px;
355
- border-top: 1px solid rgba(30, 41, 59, 0.5);
356
- }
357
-
358
- /* Modal */
359
- .modal {
360
- display: none;
361
- position: fixed;
362
- top: 0;
363
- left: 0;
364
- width: 100%;
365
- height: 100%;
366
- background: rgba(3, 7, 18, 0.85);
367
- backdrop-filter: blur(8px);
368
- z-index: 1000;
369
- justify-content: center;
370
- align-items: center;
371
- padding: 20px;
372
- overflow-y: auto;
373
- }
374
-
375
- .modal.active {
376
- display: flex;
377
- }
378
-
379
- .modal-content {
380
- background: rgba(15, 23, 42, 0.7);
381
- backdrop-filter: blur(24px);
382
- border: 1px solid rgba(71, 85, 105, 0.4);
383
- border-radius: 20px;
384
- width: 100%;
385
- max-width: 700px;
386
- box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(59, 130, 246, 0.05);
387
- animation: modal-in 0.3s ease;
388
- }
389
-
390
- @keyframes modal-in {
391
- from { opacity: 0; transform: translateY(20px) scale(0.97); }
392
- to { opacity: 1; transform: translateY(0) scale(1); }
393
- }
394
-
395
- .modal-header {
396
- display: flex;
397
- justify-content: space-between;
398
- align-items: center;
399
- padding: 22px 28px;
400
- border-bottom: 1px solid rgba(51, 65, 85, 0.4);
401
- }
402
-
403
- .modal-header h3 {
404
- font-size: 1.2rem;
405
- font-weight: 600;
406
- color: #f8fafc;
407
- }
408
-
409
- .btn-close {
410
- background: none;
411
- border: none;
412
- color: #64748b;
413
- font-size: 1.5rem;
414
- cursor: pointer;
415
- line-height: 1;
416
- width: 36px;
417
- height: 36px;
418
- border-radius: 10px;
419
- display: flex;
420
- align-items: center;
421
- justify-content: center;
422
- transition: all 0.2s;
423
- }
424
-
425
- .btn-close:hover {
426
- color: #e2e8f0;
427
- background: rgba(71, 85, 105, 0.3);
428
- }
429
-
430
- /* Form */
431
- form {
432
- padding: 24px 28px;
433
- }
434
-
435
- .form-group {
436
- margin-bottom: 18px;
437
- }
438
-
439
- .form-group label {
440
- display: block;
441
- margin-bottom: 8px;
442
- color: #94a3b8;
443
- font-size: 0.85rem;
444
- font-weight: 500;
445
- letter-spacing: 0.02em;
446
- }
447
-
448
- .form-group input,
449
- .form-group select,
450
- .form-group textarea {
451
- width: 100%;
452
- padding: 11px 16px;
453
- background: rgba(6, 8, 15, 0.6);
454
- border: 1px solid rgba(51, 65, 85, 0.5);
455
- border-radius: 10px;
456
- color: #f1f5f9;
457
- font-size: 0.95rem;
458
- transition: all 0.25s ease;
459
- appearance: none;
460
- -webkit-appearance: none;
461
- }
462
-
463
- .form-group input::placeholder,
464
- .form-group select::placeholder {
465
- color: #475569;
466
- }
467
-
468
- .form-group input:focus,
469
- .form-group select:focus {
470
- outline: none;
471
- border-color: rgba(59, 130, 246, 0.5);
472
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), 0 0 20px rgba(59, 130, 246, 0.08);
473
- background: rgba(6, 8, 15, 0.8);
474
- }
475
-
476
- /* Select 下拉框 - 科技感 */
477
- .form-group select {
478
- cursor: pointer;
479
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
480
- background-repeat: no-repeat;
481
- background-position: right 14px center;
482
- padding-right: 42px;
483
- }
484
-
485
- .form-group select:hover {
486
- border-color: rgba(100, 116, 139, 0.7);
487
- }
488
-
489
- .form-group select option {
490
- background: #0f172a;
491
- color: #e2e8f0;
492
- padding: 10px;
493
- }
494
-
495
- /* Form row */
496
- .form-row {
497
- display: grid;
498
- grid-template-columns: 1fr 1fr;
499
- gap: 18px;
500
- }
501
-
502
- /* Target section */
503
- .target-section {
504
- margin-top: 24px;
505
- padding-top: 24px;
506
- border-top: 1px solid rgba(51, 65, 85, 0.4);
507
- }
508
-
509
- .target-section h4 {
510
- font-size: 0.9rem;
511
- font-weight: 600;
512
- color: #64748b;
513
- text-transform: uppercase;
514
- letter-spacing: 0.08em;
515
- margin-bottom: 16px;
516
- }
517
-
518
- .target-item {
519
- background: rgba(6, 8, 15, 0.5);
520
- border: 1px solid rgba(51, 65, 85, 0.35);
521
- border-radius: 14px;
522
- padding: 20px;
523
- margin-bottom: 12px;
524
- transition: border-color 0.25s;
525
- }
526
-
527
- .target-item:hover {
528
- border-color: rgba(71, 85, 105, 0.5);
529
- }
530
-
531
- .target-item .form-row {
532
- margin-bottom: 14px;
533
- }
534
-
535
- .target-item .form-row:last-child {
536
- margin-bottom: 0;
537
- }
538
-
539
- .target-remove {
540
- text-align: right;
541
- margin-top: 8px;
542
- }
543
-
544
- .modal-footer {
545
- display: flex;
546
- justify-content: flex-end;
547
- gap: 12px;
548
- padding-top: 20px;
549
- margin-top: 20px;
550
- border-top: 1px solid rgba(51, 65, 85, 0.4);
551
- }
552
-
553
- /* Proxy address */
554
- .proxy-address {
555
- display: flex;
556
- align-items: center;
557
- gap: 10px;
558
- margin-top: 14px;
559
- padding: 12px 16px;
560
- background: rgba(15, 23, 42, 0.5);
561
- border: 1px solid rgba(51, 65, 85, 0.35);
562
- border-radius: 12px;
563
- font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
564
- transition: all 0.25s;
565
- }
566
-
567
- .proxy-address:hover {
568
- border-color: rgba(59, 130, 246, 0.3);
569
- box-shadow: 0 0 16px rgba(59, 130, 246, 0.06);
570
- }
571
-
572
- .proxy-address code {
573
- flex: 1;
574
- font-size: 0.85rem;
575
- color: #7dd3fc;
576
- word-break: break-all;
577
- }
578
-
579
- .copy-btn {
580
- flex-shrink: 0;
581
- display: flex;
582
- align-items: center;
583
- gap: 6px;
584
- padding: 6px 12px;
585
- background: rgba(51, 65, 85, 0.4);
586
- border: 1px solid rgba(71, 85, 105, 0.5);
587
- border-radius: 8px;
588
- color: #94a3b8;
589
- font-size: 0.8rem;
590
- cursor: pointer;
591
- transition: all 0.25s;
592
- backdrop-filter: blur(8px);
593
- }
594
-
595
- .copy-btn:hover {
596
- background: rgba(59, 130, 246, 0.15);
597
- border-color: rgba(59, 130, 246, 0.4);
598
- color: #60a5fa;
599
- box-shadow: 0 0 12px rgba(59, 130, 246, 0.15);
600
- }
601
-
602
- .copy-btn svg {
603
- width: 14px;
604
- height: 14px;
605
- }
606
-
607
- /* Toast */
608
- .toast {
609
- position: fixed;
610
- bottom: 28px;
611
- right: 28px;
612
- padding: 12px 24px;
613
- background: linear-gradient(135deg, #22c55e, #16a34a);
614
- color: white;
615
- border-radius: 12px;
616
- font-size: 0.9rem;
617
- font-weight: 500;
618
- z-index: 9999;
619
- animation: toast-in 0.35s ease, toast-out 0.35s ease 2.3s forwards;
620
- box-shadow: 0 8px 24px rgba(34, 197, 94, 0.3);
621
- backdrop-filter: blur(12px);
622
- }
623
-
624
- @keyframes toast-in {
625
- from { opacity: 0; transform: translateY(16px) scale(0.95); }
626
- to { opacity: 1; transform: translateY(0) scale(1); }
627
- }
628
-
629
- @keyframes toast-out {
630
- from { opacity: 1; }
631
- to { opacity: 0; }
632
- }
633
-
634
- /* Custom model dropdown */
635
- .model-dropdown {
636
- position: relative;
637
- width: 100%;
638
- }
639
-
640
- .model-dropdown-trigger {
641
- display: flex;
642
- align-items: center;
643
- justify-content: space-between;
644
- width: 100%;
645
- padding: 11px 16px;
646
- background: rgba(6, 8, 15, 0.6);
647
- border: 1px solid rgba(51, 65, 85, 0.5);
648
- border-radius: 10px;
649
- color: #f1f5f9;
650
- font-size: 0.95rem;
651
- cursor: pointer;
652
- transition: all 0.25s ease;
653
- user-select: none;
654
- }
655
-
656
- .model-dropdown-trigger:hover {
657
- border-color: rgba(100, 116, 139, 0.6);
658
- }
659
-
660
- .model-dropdown.open .model-dropdown-trigger {
661
- border-color: rgba(59, 130, 246, 0.5);
662
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), 0 0 20px rgba(59, 130, 246, 0.08);
663
- }
664
-
665
- .model-dropdown-arrow {
666
- font-size: 0.7rem;
667
- color: #64748b;
668
- transition: transform 0.25s ease;
669
- }
670
-
671
- .model-dropdown.open .model-dropdown-arrow {
672
- transform: rotate(180deg);
673
- }
674
-
675
- .model-dropdown-menu {
676
- display: none;
677
- position: absolute;
678
- top: calc(100% + 6px);
679
- left: 0;
680
- right: 0;
681
- background: rgba(15, 23, 42, 0.95);
682
- backdrop-filter: blur(24px);
683
- border: 1px solid rgba(71, 85, 105, 0.5);
684
- border-radius: 12px;
685
- z-index: 100;
686
- overflow: hidden;
687
- box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(59, 130, 246, 0.05);
688
- animation: dropdown-in 0.2s ease;
689
- }
690
-
691
- @keyframes dropdown-in {
692
- from { opacity: 0; transform: translateY(-6px); }
693
- to { opacity: 1; transform: translateY(0); }
694
- }
695
-
696
- .model-dropdown.open .model-dropdown-menu {
697
- display: block;
698
- }
699
-
700
- .model-dropdown-options {
701
- max-height: 220px;
702
- overflow-y: auto;
703
- }
704
-
705
- .model-dropdown-options::-webkit-scrollbar {
706
- width: 6px;
707
- }
708
-
709
- .model-dropdown-options::-webkit-scrollbar-track {
710
- background: transparent;
711
- }
712
-
713
- .model-dropdown-options::-webkit-scrollbar-thumb {
714
- background: rgba(71, 85, 105, 0.5);
715
- border-radius: 3px;
716
- }
717
-
718
- .model-option {
719
- display: flex;
720
- align-items: center;
721
- justify-content: space-between;
722
- padding: 10px 16px;
723
- cursor: pointer;
724
- transition: all 0.15s ease;
725
- border-left: 2px solid transparent;
726
- }
727
-
728
- .model-option:hover {
729
- background: rgba(59, 130, 246, 0.08);
730
- border-left-color: rgba(59, 130, 246, 0.4);
731
- }
732
-
733
- .model-option.selected {
734
- background: rgba(59, 130, 246, 0.12);
735
- color: #7dd3fc;
736
- border-left-color: #3b82f6;
737
- }
738
-
739
- .model-option-name {
740
- flex: 1;
741
- font-size: 0.9rem;
742
- }
743
-
744
- .model-option-delete {
745
- display: flex;
746
- align-items: center;
747
- justify-content: center;
748
- width: 24px;
749
- height: 24px;
750
- border-radius: 6px;
751
- border: none;
752
- background: transparent;
753
- color: #64748b;
754
- font-size: 1rem;
755
- cursor: pointer;
756
- transition: all 0.15s;
757
- line-height: 1;
758
- padding: 0;
759
- }
760
-
761
- .model-option-delete:hover {
762
- background: rgba(239, 68, 68, 0.15);
763
- color: #ef4444;
764
- }
765
-
766
- .model-add-section {
767
- display: flex;
768
- gap: 8px;
769
- padding: 10px 16px;
770
- border-top: 1px solid rgba(51, 65, 85, 0.4);
771
- background: rgba(6, 8, 15, 0.3);
772
- }
773
-
774
- .model-add-input {
775
- flex: 1;
776
- padding: 7px 12px;
777
- background: rgba(6, 8, 15, 0.5);
778
- border: 1px solid rgba(51, 65, 85, 0.5);
779
- border-radius: 8px;
780
- color: #e2e8f0;
781
- font-size: 0.85rem;
782
- transition: all 0.2s;
783
- }
784
-
785
- .model-add-input:focus {
786
- outline: none;
787
- border-color: rgba(59, 130, 246, 0.4);
788
- box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.08);
789
- }
790
-
791
- /* Confirm modal */
792
- .confirm-modal .confirm-box {
793
- background: rgba(15, 23, 42, 0.8);
794
- backdrop-filter: blur(24px);
795
- border: 1px solid rgba(71, 85, 105, 0.4);
796
- border-radius: 20px;
797
- padding: 32px 36px;
798
- max-width: 380px;
799
- width: 90%;
800
- text-align: center;
801
- box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(239, 68, 68, 0.05);
802
- animation: confirm-pop 0.25s ease;
803
- }
804
-
805
- @keyframes confirm-pop {
806
- from { opacity: 0; transform: scale(0.92) translateY(10px); }
807
- to { opacity: 1; transform: scale(1) translateY(0); }
808
- }
809
-
810
- .confirm-icon {
811
- display: inline-flex;
812
- align-items: center;
813
- justify-content: center;
814
- width: 56px;
815
- height: 56px;
816
- border-radius: 16px;
817
- background: rgba(69, 26, 3, 0.4);
818
- color: #fbbf24;
819
- font-size: 1.6rem;
820
- font-weight: 700;
821
- margin-bottom: 20px;
822
- border: 1px solid rgba(251, 191, 36, 0.15);
823
- }
824
-
825
- .confirm-text {
826
- color: #94a3b8;
827
- font-size: 0.95rem;
828
- line-height: 1.6;
829
- margin-bottom: 28px;
830
- }
831
-
832
- .confirm-text strong {
833
- color: #f1f5f9;
834
- }
835
-
836
- .confirm-actions {
837
- display: flex;
838
- gap: 12px;
839
- justify-content: center;
840
- }
841
-
842
- .confirm-actions .btn {
843
- min-width: 90px;
844
- }
845
-
846
- /* Card header actions */
847
- .card-header-actions {
848
- display: flex;
849
- gap: 8px;
850
- align-items: center;
851
- }
852
-
853
- /* Import modal */
854
- .import-preview {
855
- padding: 24px 28px;
856
- }
857
-
858
- .import-stats {
859
- display: flex;
860
- gap: 16px;
861
- margin-bottom: 24px;
862
- }
863
-
864
- .import-stat {
865
- flex: 1;
866
- background: rgba(6, 8, 15, 0.4);
867
- border: 1px solid rgba(51, 65, 85, 0.3);
868
- border-radius: 12px;
869
- padding: 16px;
870
- text-align: center;
871
- }
872
-
873
- .import-stat-value {
874
- display: block;
875
- font-size: 1.8rem;
876
- font-weight: 700;
877
- color: #60a5fa;
878
- font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
879
- }
880
-
881
- .import-stat-label {
882
- color: #64748b;
883
- font-size: 0.8rem;
884
- text-transform: uppercase;
885
- letter-spacing: 0.06em;
886
- }
887
-
888
- .import-mode label {
889
- display: block;
890
- margin-bottom: 10px;
891
- color: #94a3b8;
892
- font-size: 0.85rem;
893
- font-weight: 500;
894
- }
895
-
896
- .import-mode-options {
897
- display: flex;
898
- flex-direction: column;
899
- gap: 10px;
900
- }
901
-
902
- .import-mode-option {
903
- display: flex;
904
- align-items: flex-start;
905
- gap: 12px;
906
- padding: 14px 16px;
907
- background: rgba(6, 8, 15, 0.4);
908
- border: 1px solid rgba(51, 65, 85, 0.3);
909
- border-radius: 10px;
910
- cursor: pointer;
911
- transition: all 0.2s;
912
- }
913
-
914
- .import-mode-option:hover {
915
- border-color: rgba(59, 130, 246, 0.3);
916
- }
917
-
918
- .import-mode-option input[type="radio"] {
919
- margin-top: 3px;
920
- accent-color: #3b82f6;
921
- }
922
-
923
- .import-mode-option strong {
924
- display: block;
925
- color: #e2e8f0;
926
- font-size: 0.9rem;
927
- margin-bottom: 2px;
928
- }
929
-
930
- .import-mode-option small {
931
- color: #64748b;
932
- font-size: 0.8rem;
933
- }
934
-
935
- /* Stats Panel */
936
- .stats-panel .card-header {
937
- flex-wrap: wrap;
938
- gap: 12px;
939
- }
940
-
941
- .stats-estimated-badge {
942
- display: inline-block;
943
- padding: 2px 10px;
944
- border-radius: 12px;
945
- font-size: 0.7rem;
946
- font-weight: 500;
947
- background: rgba(251, 191, 36, 0.15);
948
- color: #fbbf24;
949
- border: 1px solid rgba(251, 191, 36, 0.2);
950
- vertical-align: middle;
951
- letter-spacing: 0.02em;
952
- }
953
-
954
- .stats-controls {
955
- display: flex;
956
- gap: 12px;
957
- flex-wrap: wrap;
958
- justify-content: flex-end; align-items: center;
959
- }
960
-
961
- .stats-controls .model-dropdown {
962
- width: 180px;
963
- }
964
-
965
- .stats-filter-trigger {
966
- padding: 7px 14px !important;
967
- font-size: 0.85rem !important;
968
- background: rgba(51, 65, 85, 0.3) !important;
969
- }
970
-
971
- .stats-range-btns {
972
- display: flex;
973
- gap: 4px;
974
- align-items: center;
975
- background: rgba(6, 8, 15, 0.4);
976
- border-radius: 10px;
977
- padding: 3px;
978
- border: 1px solid rgba(51, 65, 85, 0.3);
979
- }
980
-
981
- .stats-range-btn {
982
- border: none !important;
983
- background: transparent !important;
984
- box-shadow: none !important;
985
- padding: 6px 16px !important;
986
- border-radius: 8px !important;
987
- color: #64748b !important;
988
- font-size: 0.82rem !important;
989
- transition: all 0.2s !important;
990
- }
991
-
992
- .stats-range-btn:hover {
993
- color: #94a3b8 !important;
994
- background: rgba(51, 65, 85, 0.3) !important;
995
- }
996
-
997
- .stats-range-btn.active {
998
- background: rgba(59, 130, 246, 0.2) !important;
999
- color: #60a5fa !important;
1000
- }
1001
-
1002
- .stats-date-range {
1003
- display: flex;
1004
- align-items: center;
1005
- gap: 4px;
1006
- }
1007
-
1008
- .stats-date-input {
1009
- background: rgba(15, 23, 42, 0.6);
1010
- border: 1px solid rgba(51, 65, 85, 0.5);
1011
- border-radius: 6px;
1012
- color: #e2e8f0;
1013
- padding: 6px 8px;
1014
- font-size: 0.78rem;
1015
- outline: none;
1016
- transition: border-color 0.2s;
1017
- width: 125px;
1018
- }
1019
-
1020
- .stats-date-input:focus {
1021
- border-color: #3b82f6;
1022
- }
1023
-
1024
- .stats-date-input::-webkit-calendar-picker-indicator {
1025
- filter: invert(0.7);
1026
- cursor: pointer;
1027
- }
1028
-
1029
- .stats-date-sep {
1030
- color: #475569;
1031
- font-size: 0.85rem;
1032
- }
1033
-
1034
- .stats-summary {
1035
- display: grid;
1036
- grid-template-columns: repeat(4, 1fr);
1037
- gap: 16px;
1038
- padding: 0 28px;
1039
- margin-top: 8px;
1040
- }
1041
-
1042
- .stats-summary-item {
1043
- background: rgba(6, 8, 15, 0.4);
1044
- border: 1px solid rgba(51, 65, 85, 0.3);
1045
- border-radius: 12px;
1046
- padding: 18px 16px;
1047
- text-align: center;
1048
- transition: all 0.25s;
1049
- }
1050
-
1051
- .stats-summary-item:hover {
1052
- border-color: rgba(59, 130, 246, 0.25);
1053
- box-shadow: 0 0 16px rgba(59, 130, 246, 0.06);
1054
- }
1055
-
1056
- .stats-summary-value {
1057
- display: block;
1058
- font-size: 1.5rem;
1059
- font-weight: 700;
1060
- color: #60a5fa;
1061
- font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
1062
- margin-bottom: 4px;
1063
- }
1064
-
1065
- .stats-summary-label {
1066
- color: #64748b;
1067
- font-size: 0.78rem;
1068
- text-transform: uppercase;
1069
- letter-spacing: 0.06em;
1070
- }
1071
-
1072
- .stats-breakdown {
1073
- padding: 20px 28px 28px;
1074
- }
1075
-
1076
- .stats-table {
1077
- width: 100%;
1078
- border-collapse: separate;
1079
- border-spacing: 0;
1080
- font-size: 0.85rem;
1081
- border-radius: 10px;
1082
- overflow: hidden;
1083
- }
1084
-
1085
- .stats-table th,
1086
- .stats-table td {
1087
- text-align: left;
1088
- padding: 10px 14px;
1089
- border-bottom: 1px solid rgba(30, 41, 59, 0.6);
1090
- }
1091
-
1092
- .stats-table th {
1093
- color: #475569;
1094
- font-weight: 600;
1095
- text-transform: uppercase;
1096
- font-size: 0.7rem;
1097
- letter-spacing: 0.08em;
1098
- background: rgba(15, 23, 42, 0.4);
1099
- }
1100
-
1101
- .stats-table td {
1102
- color: #94a3b8;
1103
- word-break: break-all;
1104
- }
1105
-
1106
- .stats-table tbody tr {
1107
- transition: background 0.15s;
1108
- }
1109
-
1110
- .stats-table tbody tr:hover {
1111
- background: rgba(59, 130, 246, 0.04);
1112
- }
1113
-
1114
- .stats-table tbody tr:last-child td {
1115
- border-bottom: none;
1116
- }
1117
-
1118
- .stats-table td.num {
1119
- text-align: right;
1120
- font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
1121
- font-size: 0.82rem;
1122
- color: #7dd3fc;
1123
- }
1124
-
1125
- .stats-table tfoot td {
1126
- font-weight: 600;
1127
- color: #e2e8f0;
1128
- background: rgba(15, 23, 42, 0.3);
1129
- }
1130
-
1131
- .stats-table .provider-cell {
1132
- color: #a78bfa;
1133
- }
1134
-
1135
- .stats-table .model-cell {
1136
- color: #94a3b8;
1137
- }
1138
-
1139
- .num-estimated {
1140
- color: #fbbf24;
1141
- font-size: 0.75rem;
1142
- margin-right: 2px;
1143
- cursor: help;
1144
- }
1145
-
1146
- @media (max-width: 640px) {
1147
- .stats-summary {
1148
- grid-template-columns: repeat(2, 1fr);
1149
- }
1150
-
1151
- .stats-controls {
1152
- flex-direction: column;
1153
- align-items: stretch;
1154
- }
1155
-
1156
- .stats-controls .model-dropdown {
1157
- width: 100%;
1158
- }
1159
-
1160
- .stats-date-range {
1161
- width: 100%;
1162
- }
1163
-
1164
- .stats-date-input {
1165
- flex: 1;
1166
- min-width: 0;
1167
- }
1168
- }
1169
-
1170
- /* Responsive */
1171
- @media (max-width: 640px) {
1172
- .form-row {
1173
- grid-template-columns: 1fr;
1174
- }
1175
-
1176
- .stats {
1177
- flex-direction: column;
1178
- align-items: center;
1179
- }
1180
-
1181
- .proxy-meta {
1182
- flex-direction: column;
1183
- gap: 8px;
1184
- }
1185
-
1186
- header h1 {
1187
- font-size: 2rem;
1188
- }
1189
- }
1
+ * { box-sizing: border-box; margin: 0; padding: 0; }
2
+
3
+ body {
4
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
5
+ background: #030712;
6
+ color: #e2e8f0;
7
+ line-height: 1.6;
8
+ min-height: 100vh;
9
+ }
10
+
11
+ /* 科技网格背景 */
12
+ body::before {
13
+ content: '';
14
+ position: fixed;
15
+ top: 0; left: 0; right: 0; bottom: 0;
16
+ 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);
19
+ background-size: 60px 60px;
20
+ pointer-events: none;
21
+ z-index: 0;
22
+ }
23
+
24
+ .container {
25
+ position: relative;
26
+ z-index: 1;
27
+ max-width: 1200px;
28
+ margin: 0 auto;
29
+ padding: 40px 20px;
30
+ }
31
+
32
+ /* Header */
33
+ header {
34
+ text-align: center;
35
+ margin-bottom: 40px;
36
+ }
37
+
38
+ header h1 {
39
+ font-size: 2.8rem;
40
+ font-weight: 800;
41
+ letter-spacing: -0.02em;
42
+ background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #22d3ee 100%);
43
+ -webkit-background-clip: text;
44
+ -webkit-text-fill-color: transparent;
45
+ background-clip: text;
46
+ margin-bottom: 10px;
47
+ text-shadow: 0 0 40px rgba(96, 165, 250, 0.15);
48
+ }
49
+
50
+ header p {
51
+ color: #64748b;
52
+ font-size: 1.05rem;
53
+ letter-spacing: 0.02em;
54
+ }
55
+
56
+ /* Stats */
57
+ .stats {
58
+ display: flex;
59
+ gap: 20px;
60
+ justify-content: center;
61
+ margin-bottom: 40px;
62
+ }
63
+
64
+ .stat-item {
65
+ background: rgba(15, 23, 42, 0.6);
66
+ backdrop-filter: blur(12px);
67
+ border: 1px solid rgba(51, 65, 85, 0.5);
68
+ border-radius: 16px;
69
+ padding: 24px 48px;
70
+ text-align: center;
71
+ min-width: 160px;
72
+ position: relative;
73
+ overflow: hidden;
74
+ transition: all 0.3s ease;
75
+ }
76
+
77
+ .stat-item::before {
78
+ content: '';
79
+ position: absolute;
80
+ top: 0; left: 0; right: 0;
81
+ height: 2px;
82
+ background: linear-gradient(90deg, transparent, #3b82f6, transparent);
83
+ opacity: 0.5;
84
+ }
85
+
86
+ .stat-item:hover {
87
+ border-color: rgba(59, 130, 246, 0.3);
88
+ box-shadow: 0 0 30px rgba(59, 130, 246, 0.08);
89
+ transform: translateY(-2px);
90
+ }
91
+
92
+ .stat-value {
93
+ display: block;
94
+ font-size: 2.2rem;
95
+ font-weight: 700;
96
+ color: #60a5fa;
97
+ font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
98
+ }
99
+
100
+ .stat-label {
101
+ color: #64748b;
102
+ font-size: 0.85rem;
103
+ text-transform: uppercase;
104
+ letter-spacing: 0.08em;
105
+ margin-top: 4px;
106
+ }
107
+
108
+ /* Card */
109
+ .card {
110
+ background: rgba(15, 23, 42, 0.5);
111
+ backdrop-filter: blur(16px);
112
+ border: 1px solid rgba(51, 65, 85, 0.4);
113
+ border-radius: 20px;
114
+ overflow: hidden;
115
+ box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
116
+ }
117
+
118
+ .card-header {
119
+ display: flex;
120
+ justify-content: space-between;
121
+ align-items: center;
122
+ padding: 24px 28px;
123
+ border-bottom: 1px solid rgba(51, 65, 85, 0.4);
124
+ }
125
+
126
+ .card-header h2 {
127
+ font-size: 1.15rem;
128
+ font-weight: 600;
129
+ color: #f1f5f9;
130
+ letter-spacing: -0.01em;
131
+ }
132
+
133
+ /* Buttons */
134
+ .btn {
135
+ padding: 9px 18px;
136
+ border-radius: 10px;
137
+ border: 1px solid rgba(71, 85, 105, 0.6);
138
+ background: rgba(51, 65, 85, 0.4);
139
+ color: #cbd5e1;
140
+ cursor: pointer;
141
+ font-size: 0.9rem;
142
+ font-weight: 500;
143
+ transition: all 0.25s ease;
144
+ backdrop-filter: blur(8px);
145
+ }
146
+
147
+ .btn:hover {
148
+ background: rgba(71, 85, 105, 0.5);
149
+ border-color: rgba(100, 116, 139, 0.8);
150
+ transform: translateY(-1px);
151
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
152
+ }
153
+
154
+ .btn-primary {
155
+ background: linear-gradient(135deg, #3b82f6, #2563eb);
156
+ border-color: transparent;
157
+ color: white;
158
+ box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
159
+ }
160
+
161
+ .btn-primary:hover {
162
+ background: linear-gradient(135deg, #4b92ff, #3573fb);
163
+ box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
164
+ transform: translateY(-1px);
165
+ }
166
+
167
+ .btn-sm {
168
+ padding: 5px 14px;
169
+ font-size: 0.85rem;
170
+ }
171
+
172
+ .btn-danger {
173
+ background: linear-gradient(135deg, #ef4444, #dc2626);
174
+ border-color: transparent;
175
+ color: white;
176
+ box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
177
+ }
178
+
179
+ .btn-danger:hover {
180
+ background: linear-gradient(135deg, #ff5555, #ec3636);
181
+ box-shadow: 0 4px 16px rgba(239, 68, 68, 0.35);
182
+ }
183
+
184
+ .btn-success {
185
+ background: linear-gradient(135deg, #22c55e, #16a34a);
186
+ border-color: transparent;
187
+ color: white;
188
+ box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2);
189
+ }
190
+
191
+ .btn-success:hover {
192
+ background: linear-gradient(135deg, #32d56e, #26b34a);
193
+ box-shadow: 0 4px 16px rgba(34, 197, 94, 0.35);
194
+ }
195
+
196
+ /* Proxy list */
197
+ .proxy-list {
198
+ padding: 20px;
199
+ }
200
+
201
+ .empty {
202
+ text-align: center;
203
+ padding: 80px 20px;
204
+ color: #475569;
205
+ font-size: 0.95rem;
206
+ }
207
+
208
+ .empty::before {
209
+ content: '◈';
210
+ display: block;
211
+ font-size: 3rem;
212
+ color: #334155;
213
+ margin-bottom: 16px;
214
+ }
215
+
216
+ /* Proxy Item */
217
+ .proxy-item {
218
+ background: rgba(6, 8, 15, 0.6);
219
+ backdrop-filter: blur(12px);
220
+ border: 1px solid rgba(51, 65, 85, 0.35);
221
+ border-radius: 16px;
222
+ padding: 24px;
223
+ margin-bottom: 16px;
224
+ position: relative;
225
+ overflow: hidden;
226
+ transition: all 0.3s ease;
227
+ }
228
+
229
+ .proxy-item::before {
230
+ content: '';
231
+ position: absolute;
232
+ left: 0; top: 0; bottom: 0;
233
+ width: 3px;
234
+ background: #475569;
235
+ transition: background 0.3s ease;
236
+ }
237
+
238
+ .proxy-item:hover {
239
+ border-color: rgba(71, 85, 105, 0.6);
240
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
241
+ transform: translateY(-2px);
242
+ }
243
+
244
+ .proxy-item:hover::before {
245
+ background: #3b82f6;
246
+ box-shadow: 0 0 12px rgba(59, 130, 246, 0.5);
247
+ }
248
+
249
+ .proxy-header {
250
+ display: flex;
251
+ justify-content: space-between;
252
+ align-items: center;
253
+ margin-bottom: 14px;
254
+ }
255
+
256
+ .proxy-title {
257
+ display: flex;
258
+ align-items: center;
259
+ gap: 12px;
260
+ }
261
+
262
+ .proxy-title h3 {
263
+ font-size: 1.15rem;
264
+ font-weight: 600;
265
+ color: #f8fafc;
266
+ }
267
+
268
+ /* Badge */
269
+ .badge {
270
+ padding: 3px 12px;
271
+ border-radius: 20px;
272
+ font-size: 0.75rem;
273
+ font-weight: 600;
274
+ letter-spacing: 0.03em;
275
+ backdrop-filter: blur(8px);
276
+ }
277
+
278
+ .badge-running {
279
+ background: rgba(6, 78, 59, 0.4);
280
+ color: #34d399;
281
+ border: 1px solid rgba(52, 211, 153, 0.2);
282
+ box-shadow: 0 0 8px rgba(52, 211, 153, 0.1);
283
+ }
284
+
285
+ .badge-stopped {
286
+ background: rgba(69, 26, 3, 0.4);
287
+ color: #fbbf24;
288
+ border: 1px solid rgba(251, 191, 36, 0.2);
289
+ }
290
+
291
+ .proxy-meta {
292
+ display: flex;
293
+ gap: 24px;
294
+ color: #64748b;
295
+ font-size: 0.9rem;
296
+ margin-bottom: 16px;
297
+ }
298
+
299
+ .proxy-meta span {
300
+ display: flex;
301
+ align-items: center;
302
+ gap: 6px;
303
+ }
304
+
305
+ /* Target Table */
306
+ .target-table {
307
+ width: 100%;
308
+ border-collapse: separate;
309
+ border-spacing: 0;
310
+ font-size: 0.85rem;
311
+ table-layout: fixed;
312
+ border-radius: 10px;
313
+ overflow: hidden;
314
+ }
315
+
316
+ .target-table th:nth-child(1),
317
+ .target-table td:nth-child(1) { width: 25%; }
318
+
319
+ .target-table th:nth-child(2),
320
+ .target-table td:nth-child(2) { width: 25%; }
321
+
322
+ .target-table th:nth-child(3),
323
+ .target-table td:nth-child(3) { width: 25%; }
324
+
325
+ .target-table th:nth-child(4),
326
+ .target-table td:nth-child(4) { width: 25%; text-align: center; }
327
+
328
+ .target-table th,
329
+ .target-table td {
330
+ text-align: left;
331
+ padding: 10px 14px;
332
+ border-bottom: 1px solid rgba(30, 41, 59, 0.6);
333
+ }
334
+
335
+ .target-table th {
336
+ color: #475569;
337
+ font-weight: 600;
338
+ text-transform: uppercase;
339
+ font-size: 0.7rem;
340
+ letter-spacing: 0.08em;
341
+ background: rgba(15, 23, 42, 0.4);
342
+ }
343
+
344
+ .target-table td {
345
+ color: #94a3b8;
346
+ word-break: break-all;
347
+ }
348
+
349
+ .target-table tbody tr:last-child td {
350
+ border-bottom: none;
351
+ }
352
+
353
+ .proxy-actions {
354
+ display: flex;
355
+ gap: 10px;
356
+ margin-top: 18px;
357
+ padding-top: 18px;
358
+ border-top: 1px solid rgba(30, 41, 59, 0.5);
359
+ }
360
+
361
+ /* Modal */
362
+ .modal {
363
+ display: none;
364
+ position: fixed;
365
+ top: 0;
366
+ left: 0;
367
+ width: 100%;
368
+ height: 100%;
369
+ background: rgba(3, 7, 18, 0.85);
370
+ backdrop-filter: blur(8px);
371
+ z-index: 1000;
372
+ justify-content: center;
373
+ align-items: flex-start;
374
+ padding: 20px;
375
+ overflow-y: auto;
376
+ }
377
+
378
+ .modal.active {
379
+ display: flex;
380
+ }
381
+
382
+ .modal-content {
383
+ background: rgba(15, 23, 42, 0.7);
384
+ backdrop-filter: blur(24px);
385
+ border: 1px solid rgba(71, 85, 105, 0.4);
386
+ border-radius: 20px;
387
+ width: 100%;
388
+ max-width: 700px;
389
+ margin: auto;
390
+ box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(59, 130, 246, 0.05);
391
+ animation: modal-in 0.3s ease;
392
+ }
393
+
394
+ @keyframes modal-in {
395
+ from { opacity: 0; transform: translateY(20px) scale(0.97); }
396
+ to { opacity: 1; transform: translateY(0) scale(1); }
397
+ }
398
+
399
+ .modal-header {
400
+ display: flex;
401
+ justify-content: space-between;
402
+ align-items: center;
403
+ padding: 22px 28px;
404
+ border-bottom: 1px solid rgba(51, 65, 85, 0.4);
405
+ }
406
+
407
+ .modal-header h3 {
408
+ font-size: 1.2rem;
409
+ font-weight: 600;
410
+ color: #f8fafc;
411
+ }
412
+
413
+ .btn-close {
414
+ background: none;
415
+ border: none;
416
+ color: #64748b;
417
+ font-size: 1.5rem;
418
+ cursor: pointer;
419
+ line-height: 1;
420
+ width: 36px;
421
+ height: 36px;
422
+ border-radius: 10px;
423
+ display: flex;
424
+ align-items: center;
425
+ justify-content: center;
426
+ transition: all 0.2s;
427
+ }
428
+
429
+ .btn-close:hover {
430
+ color: #e2e8f0;
431
+ background: rgba(71, 85, 105, 0.3);
432
+ }
433
+
434
+ /* Form */
435
+ form {
436
+ padding: 24px 28px;
437
+ }
438
+
439
+ .form-group {
440
+ margin-bottom: 18px;
441
+ }
442
+
443
+ .form-group label {
444
+ display: block;
445
+ margin-bottom: 8px;
446
+ color: #94a3b8;
447
+ font-size: 0.85rem;
448
+ font-weight: 500;
449
+ letter-spacing: 0.02em;
450
+ }
451
+
452
+ .form-group input,
453
+ .form-group select,
454
+ .form-group textarea {
455
+ width: 100%;
456
+ padding: 11px 16px;
457
+ background: rgba(6, 8, 15, 0.6);
458
+ border: 1px solid rgba(51, 65, 85, 0.5);
459
+ border-radius: 10px;
460
+ color: #f1f5f9;
461
+ font-size: 0.95rem;
462
+ transition: all 0.25s ease;
463
+ appearance: none;
464
+ -webkit-appearance: none;
465
+ }
466
+
467
+ .form-group input::placeholder,
468
+ .form-group select::placeholder {
469
+ color: #475569;
470
+ }
471
+
472
+ .form-group input:focus,
473
+ .form-group select:focus {
474
+ outline: none;
475
+ border-color: rgba(59, 130, 246, 0.5);
476
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), 0 0 20px rgba(59, 130, 246, 0.08);
477
+ background: rgba(6, 8, 15, 0.8);
478
+ }
479
+
480
+ /* Select 下拉框 - 科技感 */
481
+ .form-group select {
482
+ cursor: pointer;
483
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
484
+ background-repeat: no-repeat;
485
+ background-position: right 14px center;
486
+ padding-right: 42px;
487
+ }
488
+
489
+ .form-group select:hover {
490
+ border-color: rgba(100, 116, 139, 0.7);
491
+ }
492
+
493
+ .form-group select option {
494
+ background: #0f172a;
495
+ color: #e2e8f0;
496
+ padding: 10px;
497
+ }
498
+
499
+ /* Form row */
500
+ .form-row {
501
+ display: grid;
502
+ grid-template-columns: 1fr 1fr;
503
+ gap: 18px;
504
+ }
505
+
506
+ /* Target section */
507
+ .target-section {
508
+ margin-top: 24px;
509
+ padding-top: 24px;
510
+ border-top: 1px solid rgba(51, 65, 85, 0.4);
511
+ }
512
+
513
+ .target-section h4 {
514
+ font-size: 0.9rem;
515
+ font-weight: 600;
516
+ color: #64748b;
517
+ text-transform: uppercase;
518
+ letter-spacing: 0.08em;
519
+ margin-bottom: 16px;
520
+ }
521
+
522
+ .target-item {
523
+ background: rgba(6, 8, 15, 0.5);
524
+ border: 1px solid rgba(51, 65, 85, 0.35);
525
+ border-radius: 14px;
526
+ padding: 20px;
527
+ margin-bottom: 12px;
528
+ transition: border-color 0.25s;
529
+ }
530
+
531
+ .target-item:hover {
532
+ border-color: rgba(71, 85, 105, 0.5);
533
+ }
534
+
535
+ .target-item .form-row {
536
+ margin-bottom: 14px;
537
+ }
538
+
539
+ .target-item .form-row:last-child {
540
+ margin-bottom: 0;
541
+ }
542
+
543
+ .target-remove {
544
+ text-align: right;
545
+ margin-top: 8px;
546
+ }
547
+
548
+ .modal-footer {
549
+ display: flex;
550
+ justify-content: flex-end;
551
+ gap: 12px;
552
+ padding-top: 20px;
553
+ margin-top: 20px;
554
+ border-top: 1px solid rgba(51, 65, 85, 0.4);
555
+ }
556
+
557
+ /* Proxy address */
558
+ .proxy-address {
559
+ display: flex;
560
+ align-items: center;
561
+ gap: 10px;
562
+ margin-top: 14px;
563
+ padding: 12px 16px;
564
+ background: rgba(15, 23, 42, 0.5);
565
+ border: 1px solid rgba(51, 65, 85, 0.35);
566
+ border-radius: 12px;
567
+ font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
568
+ transition: all 0.25s;
569
+ }
570
+
571
+ .proxy-address:hover {
572
+ border-color: rgba(59, 130, 246, 0.3);
573
+ box-shadow: 0 0 16px rgba(59, 130, 246, 0.06);
574
+ }
575
+
576
+ .proxy-address code {
577
+ flex: 1;
578
+ font-size: 0.85rem;
579
+ color: #7dd3fc;
580
+ word-break: break-all;
581
+ }
582
+
583
+ .copy-btn {
584
+ flex-shrink: 0;
585
+ display: flex;
586
+ align-items: center;
587
+ gap: 6px;
588
+ padding: 6px 12px;
589
+ background: rgba(51, 65, 85, 0.4);
590
+ border: 1px solid rgba(71, 85, 105, 0.5);
591
+ border-radius: 8px;
592
+ color: #94a3b8;
593
+ font-size: 0.8rem;
594
+ cursor: pointer;
595
+ transition: all 0.25s;
596
+ backdrop-filter: blur(8px);
597
+ }
598
+
599
+ .copy-btn:hover {
600
+ background: rgba(59, 130, 246, 0.15);
601
+ border-color: rgba(59, 130, 246, 0.4);
602
+ color: #60a5fa;
603
+ box-shadow: 0 0 12px rgba(59, 130, 246, 0.15);
604
+ }
605
+
606
+ .copy-btn svg {
607
+ width: 14px;
608
+ height: 14px;
609
+ }
610
+
611
+ /* Toast */
612
+ .toast {
613
+ position: fixed;
614
+ bottom: 28px;
615
+ right: 28px;
616
+ padding: 12px 24px;
617
+ background: linear-gradient(135deg, #22c55e, #16a34a);
618
+ color: white;
619
+ border-radius: 12px;
620
+ font-size: 0.9rem;
621
+ font-weight: 500;
622
+ z-index: 9999;
623
+ animation: toast-in 0.35s ease, toast-out 0.35s ease 2.3s forwards;
624
+ box-shadow: 0 8px 24px rgba(34, 197, 94, 0.3);
625
+ backdrop-filter: blur(12px);
626
+ }
627
+
628
+ @keyframes toast-in {
629
+ from { opacity: 0; transform: translateY(16px) scale(0.95); }
630
+ to { opacity: 1; transform: translateY(0) scale(1); }
631
+ }
632
+
633
+ @keyframes toast-out {
634
+ from { opacity: 1; }
635
+ to { opacity: 0; }
636
+ }
637
+
638
+ /* Custom model dropdown */
639
+ .model-dropdown {
640
+ position: relative;
641
+ width: 100%;
642
+ }
643
+
644
+ .model-dropdown-trigger {
645
+ display: flex;
646
+ align-items: center;
647
+ justify-content: space-between;
648
+ width: 100%;
649
+ padding: 11px 16px;
650
+ background: rgba(6, 8, 15, 0.6);
651
+ border: 1px solid rgba(51, 65, 85, 0.5);
652
+ border-radius: 10px;
653
+ color: #f1f5f9;
654
+ font-size: 0.95rem;
655
+ cursor: pointer;
656
+ transition: all 0.25s ease;
657
+ user-select: none;
658
+ }
659
+
660
+ .model-dropdown-trigger:hover {
661
+ border-color: rgba(100, 116, 139, 0.6);
662
+ }
663
+
664
+ .model-dropdown.open .model-dropdown-trigger {
665
+ border-color: rgba(59, 130, 246, 0.5);
666
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), 0 0 20px rgba(59, 130, 246, 0.08);
667
+ }
668
+
669
+ .model-dropdown-arrow {
670
+ font-size: 0.7rem;
671
+ color: #64748b;
672
+ transition: transform 0.25s ease;
673
+ }
674
+
675
+ .model-dropdown.open .model-dropdown-arrow {
676
+ transform: rotate(180deg);
677
+ }
678
+
679
+ .model-dropdown-menu {
680
+ display: none;
681
+ position: absolute;
682
+ top: calc(100% + 6px);
683
+ left: 0;
684
+ right: 0;
685
+ background: rgba(15, 23, 42, 0.95);
686
+ backdrop-filter: blur(24px);
687
+ border: 1px solid rgba(71, 85, 105, 0.5);
688
+ border-radius: 12px;
689
+ z-index: 100;
690
+ overflow: hidden;
691
+ box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(59, 130, 246, 0.05);
692
+ animation: dropdown-in 0.2s ease;
693
+ }
694
+
695
+ @keyframes dropdown-in {
696
+ from { opacity: 0; transform: translateY(-6px); }
697
+ to { opacity: 1; transform: translateY(0); }
698
+ }
699
+
700
+ .model-dropdown.open .model-dropdown-menu {
701
+ display: block;
702
+ }
703
+
704
+ .model-dropdown-options {
705
+ max-height: 220px;
706
+ overflow-y: auto;
707
+ }
708
+
709
+ .model-dropdown-options::-webkit-scrollbar {
710
+ width: 6px;
711
+ }
712
+
713
+ .model-dropdown-options::-webkit-scrollbar-track {
714
+ background: transparent;
715
+ }
716
+
717
+ .model-dropdown-options::-webkit-scrollbar-thumb {
718
+ background: rgba(71, 85, 105, 0.5);
719
+ border-radius: 3px;
720
+ }
721
+
722
+ .model-option {
723
+ display: flex;
724
+ align-items: center;
725
+ justify-content: space-between;
726
+ padding: 10px 16px;
727
+ cursor: pointer;
728
+ transition: all 0.15s ease;
729
+ border-left: 2px solid transparent;
730
+ }
731
+
732
+ .model-option:hover {
733
+ background: rgba(59, 130, 246, 0.08);
734
+ border-left-color: rgba(59, 130, 246, 0.4);
735
+ }
736
+
737
+ .model-option.selected {
738
+ background: rgba(59, 130, 246, 0.12);
739
+ color: #7dd3fc;
740
+ border-left-color: #3b82f6;
741
+ }
742
+
743
+ .model-option-name {
744
+ flex: 1;
745
+ font-size: 0.9rem;
746
+ }
747
+
748
+ .model-option-delete {
749
+ display: flex;
750
+ align-items: center;
751
+ justify-content: center;
752
+ width: 24px;
753
+ height: 24px;
754
+ border-radius: 6px;
755
+ border: none;
756
+ background: transparent;
757
+ color: #64748b;
758
+ font-size: 1rem;
759
+ cursor: pointer;
760
+ transition: all 0.15s;
761
+ line-height: 1;
762
+ padding: 0;
763
+ }
764
+
765
+ .model-option-delete:hover {
766
+ background: rgba(239, 68, 68, 0.15);
767
+ color: #ef4444;
768
+ }
769
+
770
+ .model-add-section {
771
+ display: flex;
772
+ gap: 8px;
773
+ padding: 10px 16px;
774
+ border-top: 1px solid rgba(51, 65, 85, 0.4);
775
+ background: rgba(6, 8, 15, 0.3);
776
+ }
777
+
778
+ .model-add-input {
779
+ flex: 1;
780
+ padding: 7px 12px;
781
+ background: rgba(6, 8, 15, 0.5);
782
+ border: 1px solid rgba(51, 65, 85, 0.5);
783
+ border-radius: 8px;
784
+ color: #e2e8f0;
785
+ font-size: 0.85rem;
786
+ transition: all 0.2s;
787
+ }
788
+
789
+ .model-add-input:focus {
790
+ outline: none;
791
+ border-color: rgba(59, 130, 246, 0.4);
792
+ box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.08);
793
+ }
794
+
795
+ /* Confirm modal */
796
+ .confirm-modal .confirm-box {
797
+ background: rgba(15, 23, 42, 0.8);
798
+ backdrop-filter: blur(24px);
799
+ border: 1px solid rgba(71, 85, 105, 0.4);
800
+ border-radius: 20px;
801
+ padding: 32px 36px;
802
+ max-width: 380px;
803
+ width: 90%;
804
+ text-align: center;
805
+ box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(239, 68, 68, 0.05);
806
+ animation: confirm-pop 0.25s ease;
807
+ }
808
+
809
+ @keyframes confirm-pop {
810
+ from { opacity: 0; transform: scale(0.92) translateY(10px); }
811
+ to { opacity: 1; transform: scale(1) translateY(0); }
812
+ }
813
+
814
+ .confirm-icon {
815
+ display: inline-flex;
816
+ align-items: center;
817
+ justify-content: center;
818
+ width: 56px;
819
+ height: 56px;
820
+ border-radius: 16px;
821
+ background: rgba(69, 26, 3, 0.4);
822
+ color: #fbbf24;
823
+ font-size: 1.6rem;
824
+ font-weight: 700;
825
+ margin-bottom: 20px;
826
+ border: 1px solid rgba(251, 191, 36, 0.15);
827
+ }
828
+
829
+ .confirm-text {
830
+ color: #94a3b8;
831
+ font-size: 0.95rem;
832
+ line-height: 1.6;
833
+ margin-bottom: 28px;
834
+ }
835
+
836
+ .confirm-text strong {
837
+ color: #f1f5f9;
838
+ }
839
+
840
+ .confirm-actions {
841
+ display: flex;
842
+ gap: 12px;
843
+ justify-content: center;
844
+ }
845
+
846
+ .confirm-actions .btn {
847
+ min-width: 90px;
848
+ }
849
+
850
+ /* Card header actions */
851
+ .card-header-actions {
852
+ display: flex;
853
+ gap: 8px;
854
+ align-items: center;
855
+ }
856
+
857
+ /* Import modal */
858
+ .import-preview {
859
+ padding: 24px 28px;
860
+ }
861
+
862
+ .import-stats {
863
+ display: flex;
864
+ gap: 16px;
865
+ margin-bottom: 24px;
866
+ }
867
+
868
+ .import-stat {
869
+ flex: 1;
870
+ background: rgba(6, 8, 15, 0.4);
871
+ border: 1px solid rgba(51, 65, 85, 0.3);
872
+ border-radius: 12px;
873
+ padding: 16px;
874
+ text-align: center;
875
+ }
876
+
877
+ .import-stat-value {
878
+ display: block;
879
+ font-size: 1.8rem;
880
+ font-weight: 700;
881
+ color: #60a5fa;
882
+ font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
883
+ }
884
+
885
+ .import-stat-label {
886
+ color: #64748b;
887
+ font-size: 0.8rem;
888
+ text-transform: uppercase;
889
+ letter-spacing: 0.06em;
890
+ }
891
+
892
+ .import-mode label {
893
+ display: block;
894
+ margin-bottom: 10px;
895
+ color: #94a3b8;
896
+ font-size: 0.85rem;
897
+ font-weight: 500;
898
+ }
899
+
900
+ .import-mode-options {
901
+ display: flex;
902
+ flex-direction: column;
903
+ gap: 10px;
904
+ }
905
+
906
+ .import-mode-option {
907
+ display: flex;
908
+ align-items: flex-start;
909
+ gap: 12px;
910
+ padding: 14px 16px;
911
+ background: rgba(6, 8, 15, 0.4);
912
+ border: 1px solid rgba(51, 65, 85, 0.3);
913
+ border-radius: 10px;
914
+ cursor: pointer;
915
+ transition: all 0.2s;
916
+ }
917
+
918
+ .import-mode-option:hover {
919
+ border-color: rgba(59, 130, 246, 0.3);
920
+ }
921
+
922
+ .import-mode-option input[type="radio"] {
923
+ margin-top: 3px;
924
+ accent-color: #3b82f6;
925
+ }
926
+
927
+ .import-mode-option strong {
928
+ display: block;
929
+ color: #e2e8f0;
930
+ font-size: 0.9rem;
931
+ margin-bottom: 2px;
932
+ }
933
+
934
+ .import-mode-option small {
935
+ color: #64748b;
936
+ font-size: 0.8rem;
937
+ }
938
+
939
+ /* Stats Panel */
940
+ .stats-panel .card-header {
941
+ flex-wrap: wrap;
942
+ gap: 12px;
943
+ }
944
+
945
+ .stats-estimated-badge {
946
+ display: inline-block;
947
+ padding: 2px 10px;
948
+ border-radius: 12px;
949
+ font-size: 0.7rem;
950
+ font-weight: 500;
951
+ background: rgba(251, 191, 36, 0.15);
952
+ color: #fbbf24;
953
+ border: 1px solid rgba(251, 191, 36, 0.2);
954
+ vertical-align: middle;
955
+ letter-spacing: 0.02em;
956
+ }
957
+
958
+ .stats-controls {
959
+ display: flex;
960
+ gap: 12px;
961
+ flex-wrap: wrap;
962
+ justify-content: flex-end; align-items: center;
963
+ }
964
+
965
+ .stats-controls .model-dropdown {
966
+ width: 180px;
967
+ }
968
+
969
+ .stats-filter-trigger {
970
+ padding: 7px 14px !important;
971
+ font-size: 0.85rem !important;
972
+ background: rgba(51, 65, 85, 0.3) !important;
973
+ }
974
+
975
+ .stats-range-btns {
976
+ display: flex;
977
+ gap: 4px;
978
+ align-items: center;
979
+ background: rgba(6, 8, 15, 0.4);
980
+ border-radius: 10px;
981
+ padding: 3px;
982
+ border: 1px solid rgba(51, 65, 85, 0.3);
983
+ }
984
+
985
+ .stats-range-btn {
986
+ border: none !important;
987
+ background: transparent !important;
988
+ box-shadow: none !important;
989
+ padding: 6px 16px !important;
990
+ border-radius: 8px !important;
991
+ color: #64748b !important;
992
+ font-size: 0.82rem !important;
993
+ transition: all 0.2s !important;
994
+ }
995
+
996
+ .stats-range-btn:hover {
997
+ color: #94a3b8 !important;
998
+ background: rgba(51, 65, 85, 0.3) !important;
999
+ }
1000
+
1001
+ .stats-range-btn.active {
1002
+ background: rgba(59, 130, 246, 0.2) !important;
1003
+ color: #60a5fa !important;
1004
+ }
1005
+
1006
+ .stats-date-range {
1007
+ display: flex;
1008
+ align-items: center;
1009
+ gap: 4px;
1010
+ }
1011
+
1012
+ .stats-date-input {
1013
+ background: rgba(15, 23, 42, 0.6);
1014
+ border: 1px solid rgba(51, 65, 85, 0.5);
1015
+ border-radius: 6px;
1016
+ color: #e2e8f0;
1017
+ padding: 6px 8px;
1018
+ font-size: 0.78rem;
1019
+ outline: none;
1020
+ transition: border-color 0.2s;
1021
+ width: 125px;
1022
+ }
1023
+
1024
+ .stats-date-input:focus {
1025
+ border-color: #3b82f6;
1026
+ }
1027
+
1028
+ .stats-date-input::-webkit-calendar-picker-indicator {
1029
+ filter: invert(0.7);
1030
+ cursor: pointer;
1031
+ }
1032
+
1033
+ .stats-date-sep {
1034
+ color: #475569;
1035
+ font-size: 0.85rem;
1036
+ }
1037
+
1038
+ .stats-summary {
1039
+ display: grid;
1040
+ grid-template-columns: repeat(4, 1fr);
1041
+ gap: 16px;
1042
+ padding: 0 28px;
1043
+ margin-top: 8px;
1044
+ }
1045
+
1046
+ .stats-summary-item {
1047
+ background: rgba(6, 8, 15, 0.4);
1048
+ border: 1px solid rgba(51, 65, 85, 0.3);
1049
+ border-radius: 12px;
1050
+ padding: 18px 16px;
1051
+ text-align: center;
1052
+ transition: all 0.25s;
1053
+ }
1054
+
1055
+ .stats-summary-item:hover {
1056
+ border-color: rgba(59, 130, 246, 0.25);
1057
+ box-shadow: 0 0 16px rgba(59, 130, 246, 0.06);
1058
+ }
1059
+
1060
+ .stats-summary-value {
1061
+ display: block;
1062
+ font-size: 1.5rem;
1063
+ font-weight: 700;
1064
+ color: #60a5fa;
1065
+ font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
1066
+ margin-bottom: 4px;
1067
+ }
1068
+
1069
+ .stats-summary-label {
1070
+ color: #64748b;
1071
+ font-size: 0.78rem;
1072
+ text-transform: uppercase;
1073
+ letter-spacing: 0.06em;
1074
+ }
1075
+
1076
+ .stats-breakdown {
1077
+ padding: 20px 28px 28px;
1078
+ }
1079
+
1080
+ .stats-table {
1081
+ width: 100%;
1082
+ border-collapse: separate;
1083
+ border-spacing: 0;
1084
+ font-size: 0.85rem;
1085
+ border-radius: 10px;
1086
+ overflow: hidden;
1087
+ }
1088
+
1089
+ .stats-table th,
1090
+ .stats-table td {
1091
+ text-align: left;
1092
+ padding: 10px 14px;
1093
+ border-bottom: 1px solid rgba(30, 41, 59, 0.6);
1094
+ }
1095
+
1096
+ .stats-table th {
1097
+ color: #475569;
1098
+ font-weight: 600;
1099
+ text-transform: uppercase;
1100
+ font-size: 0.7rem;
1101
+ letter-spacing: 0.08em;
1102
+ background: rgba(15, 23, 42, 0.4);
1103
+ }
1104
+
1105
+ .stats-table td {
1106
+ color: #94a3b8;
1107
+ word-break: break-all;
1108
+ }
1109
+
1110
+ .stats-table tbody tr {
1111
+ transition: background 0.15s;
1112
+ }
1113
+
1114
+ .stats-table tbody tr:hover {
1115
+ background: rgba(59, 130, 246, 0.04);
1116
+ }
1117
+
1118
+ .stats-table tbody tr:last-child td {
1119
+ border-bottom: none;
1120
+ }
1121
+
1122
+ .stats-table td.num {
1123
+ text-align: right;
1124
+ font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
1125
+ font-size: 0.82rem;
1126
+ color: #7dd3fc;
1127
+ }
1128
+
1129
+ .stats-table tfoot td {
1130
+ font-weight: 600;
1131
+ color: #e2e8f0;
1132
+ background: rgba(15, 23, 42, 0.3);
1133
+ }
1134
+
1135
+ .stats-table .provider-cell {
1136
+ color: #a78bfa;
1137
+ }
1138
+
1139
+ .stats-table .model-cell {
1140
+ color: #94a3b8;
1141
+ }
1142
+
1143
+ .num-estimated {
1144
+ color: #fbbf24;
1145
+ font-size: 0.75rem;
1146
+ margin-right: 2px;
1147
+ cursor: help;
1148
+ }
1149
+
1150
+ @media (max-width: 640px) {
1151
+ .stats-summary {
1152
+ grid-template-columns: repeat(2, 1fr);
1153
+ }
1154
+
1155
+ .stats-controls {
1156
+ flex-direction: column;
1157
+ align-items: stretch;
1158
+ }
1159
+
1160
+ .stats-controls .model-dropdown {
1161
+ width: 100%;
1162
+ }
1163
+
1164
+ .stats-date-range {
1165
+ width: 100%;
1166
+ }
1167
+
1168
+ .stats-date-input {
1169
+ flex: 1;
1170
+ min-width: 0;
1171
+ }
1172
+ }
1173
+
1174
+ /* Responsive */
1175
+ @media (max-width: 640px) {
1176
+ .form-row {
1177
+ grid-template-columns: 1fr;
1178
+ }
1179
+
1180
+ .stats {
1181
+ flex-direction: column;
1182
+ align-items: center;
1183
+ }
1184
+
1185
+ .proxy-meta {
1186
+ flex-direction: column;
1187
+ gap: 8px;
1188
+ }
1189
+
1190
+ header h1 {
1191
+ font-size: 2rem;
1192
+ }
1193
+ }
1194
+
1195
+ .api-keys-header {
1196
+ display: flex;
1197
+ justify-content: space-between;
1198
+ align-items: center;
1199
+ margin-bottom: 10px;
1200
+ }
1201
+
1202
+ .api-keys-header span {
1203
+ font-size: 0.85rem;
1204
+ color: #94a3b8;
1205
+ font-weight: 500;
1206
+ }
1207
+
1208
+ .api-keys-row {
1209
+ grid-template-columns: 1fr;
1210
+ }
1211
+
1212
+ .api-key-entry {
1213
+ display: grid;
1214
+ grid-template-columns: 1fr 1fr auto auto;
1215
+ align-items: start;
1216
+ gap: 18px;
1217
+ margin-bottom: 10px;
1218
+ }
1219
+
1220
+ /* Toggle switch */
1221
+ .toggle-switch {
1222
+ position: relative;
1223
+ display: inline-block;
1224
+ width: 36px;
1225
+ height: 20px;
1226
+ margin-top: 40px;
1227
+ cursor: pointer;
1228
+ }
1229
+
1230
+ .toggle-switch input {
1231
+ opacity: 0;
1232
+ width: 0;
1233
+ height: 0;
1234
+ }
1235
+
1236
+ .toggle-slider {
1237
+ position: absolute;
1238
+ inset: 0;
1239
+ background: rgba(51, 65, 85, 0.6);
1240
+ border-radius: 20px;
1241
+ border: 1px solid rgba(71, 85, 105, 0.5);
1242
+ transition: all 0.25s;
1243
+ }
1244
+
1245
+ .toggle-slider::before {
1246
+ content: '';
1247
+ position: absolute;
1248
+ width: 14px;
1249
+ height: 14px;
1250
+ left: 2px;
1251
+ top: 2px;
1252
+ background: #94a3b8;
1253
+ border-radius: 50%;
1254
+ transition: all 0.25s;
1255
+ }
1256
+
1257
+ .toggle-switch input:checked + .toggle-slider {
1258
+ background: rgba(59, 130, 246, 0.3);
1259
+ border-color: rgba(59, 130, 246, 0.5);
1260
+ }
1261
+
1262
+ .toggle-switch input:checked + .toggle-slider::before {
1263
+ transform: translateX(16px);
1264
+ background: #60a5fa;
1265
+ }
1266
+
1267
+ .api-key-remove {
1268
+ margin-top: 35px;
1269
+ }
1270
+
1271
+ .api-key-display {
1272
+ display: block;
1273
+ padding: 11px 16px;
1274
+ background: rgba(6, 8, 15, 0.6);
1275
+ border: 1px solid rgba(51, 65, 85, 0.5);
1276
+ border-radius: 10px;
1277
+ color: #64748b;
1278
+ font-size: 0.9rem;
1279
+ letter-spacing: 2px;
1280
+ }
1281
+
1282
+ .api-key-remove {
1283
+ padding: 11px 14px;
1284
+ border-radius: 10px;
1285
+ border: 1px solid rgba(127, 29, 29, 0.5);
1286
+ background: rgba(127, 29, 29, 0.15);
1287
+ color: #fca5a5;
1288
+ cursor: pointer;
1289
+ font-size: 14px;
1290
+ line-height: 1;
1291
+ }
1292
+
1293
+ .api-key-remove:hover {
1294
+ background: rgba(127, 29, 29, 0.3);
1295
+ border-color: rgba(248, 113, 113, 0.7);
1296
+ }
1297
+
1298
+ .proxy-routing-badge {
1299
+ font-size: 0.75rem;
1300
+ padding: 3px 10px;
1301
+ border-radius: 6px;
1302
+ background: rgba(51, 65, 85, 0.5);
1303
+ color: #94a3b8;
1304
+ font-weight: 500;
1305
+ white-space: nowrap;
1306
+ }
1307
+
1308
+ .provider-tag {
1309
+ font-size: 0.7rem;
1310
+ padding: 1px 6px;
1311
+ border-radius: 4px;
1312
+ background: rgba(148, 163, 184, 0.15);
1313
+ color: #94a3b8;
1314
+ margin-left: 6px;
1315
+ vertical-align: middle;
1316
+ }
1317
+
1318
+ .provider-pool-group {
1319
+ grid-column: 1 / -1;
1320
+ }
1321
+
1322
+ .provider-pool-picker {
1323
+ margin-bottom: 12px;
1324
+ }
1325
+
1326
+ .provider-pool-list {
1327
+ display: flex;
1328
+ flex-direction: column;
1329
+ gap: 10px;
1330
+ }
1331
+
1332
+ .provider-pool-empty {
1333
+ padding: 12px 14px;
1334
+ border: 1px dashed rgba(71, 85, 105, 0.6);
1335
+ border-radius: 10px;
1336
+ color: #64748b;
1337
+ font-size: 0.9rem;
1338
+ background: rgba(6, 8, 15, 0.35);
1339
+ }
1340
+
1341
+ .provider-pool-item {
1342
+ display: grid;
1343
+ grid-template-columns: minmax(0, 1fr) 140px 120px auto;
1344
+ gap: 12px;
1345
+ align-items: center;
1346
+ padding: 12px 14px;
1347
+ border: 1px solid rgba(51, 65, 85, 0.5);
1348
+ border-radius: 12px;
1349
+ background: rgba(6, 8, 15, 0.45);
1350
+ }
1351
+
1352
+ .provider-pool-main {
1353
+ min-width: 0;
1354
+ }
1355
+
1356
+ .provider-pool-name {
1357
+ color: #e2e8f0;
1358
+ font-weight: 600;
1359
+ overflow: hidden;
1360
+ text-overflow: ellipsis;
1361
+ white-space: nowrap;
1362
+ }
1363
+
1364
+ .provider-pool-meta {
1365
+ color: #64748b;
1366
+ font-size: 0.82rem;
1367
+ overflow: hidden;
1368
+ text-overflow: ellipsis;
1369
+ white-space: nowrap;
1370
+ }
1371
+
1372
+ .provider-pool-model label {
1373
+ display: block;
1374
+ margin-bottom: 4px;
1375
+ font-size: 0.75rem;
1376
+ color: #94a3b8;
1377
+ }
1378
+
1379
+ .provider-pool-model-value {
1380
+ color: #e2e8f0;
1381
+ font-size: 0.85rem;
1382
+ overflow: hidden;
1383
+ text-overflow: ellipsis;
1384
+ white-space: nowrap;
1385
+ display: block;
1386
+ }
1387
+
1388
+ .pool-provider-group {
1389
+ position: relative;
1390
+ }
1391
+
1392
+ .pool-provider-trigger {
1393
+ display: flex;
1394
+ align-items: center;
1395
+ gap: 4px;
1396
+ }
1397
+
1398
+ .pool-provider-arrow {
1399
+ margin-left: auto;
1400
+ font-size: 12px;
1401
+ color: #64748b;
1402
+ transition: transform 0.15s;
1403
+ }
1404
+
1405
+ .pool-provider-group.open > .pool-provider-trigger .pool-provider-arrow {
1406
+ transform: rotate(90deg);
1407
+ }
1408
+
1409
+ .pool-model-sublist {
1410
+ display: none;
1411
+ padding-left: 16px;
1412
+ border-left: 2px solid rgba(71, 85, 105, 0.3);
1413
+ margin-left: 8px;
1414
+ }
1415
+
1416
+ .pool-provider-group.open > .pool-model-sublist {
1417
+ display: block;
1418
+ }
1419
+
1420
+ .pool-model-sublist .model-option {
1421
+ font-size: 13px;
1422
+ padding: 6px 12px;
1423
+ }
1424
+
1425
+ .provider-pool-weight label {
1426
+ display: block;
1427
+ margin-bottom: 4px;
1428
+ font-size: 0.75rem;
1429
+ color: #94a3b8;
1430
+ }
1431
+
1432
+ .provider-pool-weight input {
1433
+ width: 100%;
1434
+ }
1435
+
1436
+ .provider-pool-remove {
1437
+ padding: 8px 12px;
1438
+ border-radius: 10px;
1439
+ border: 1px solid rgba(127, 29, 29, 0.6);
1440
+ background: rgba(127, 29, 29, 0.2);
1441
+ color: #fca5a5;
1442
+ cursor: pointer;
1443
+ }
1444
+
1445
+ .provider-pool-remove:hover {
1446
+ background: rgba(127, 29, 29, 0.35);
1447
+ border-color: rgba(248, 113, 113, 0.8);
1448
+ }