pi-antigravity-rotator 2.2.2 → 2.3.1

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,1224 @@
1
+
2
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
3
+
4
+ :root {
5
+ --bg: #0a0a0f;
6
+ --surface: #12121a;
7
+ --surface-hover: #1a1a25;
8
+ --border: #1e1e2e;
9
+ --text: #e0e0e8;
10
+ --text-dim: #6e6e82;
11
+ --accent: #7c5cfc;
12
+ --accent-glow: rgba(124, 92, 252, 0.15);
13
+ --green: #34d399;
14
+ --yellow: #fbbf24;
15
+ --red: #f87171;
16
+ --blue: #60a5fa;
17
+ --orange: #fb923c;
18
+ --radius: 12px;
19
+ --font: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
20
+ }
21
+
22
+ * { margin: 0; padding: 0; box-sizing: border-box; }
23
+
24
+ body {
25
+ background: var(--bg);
26
+ color: var(--text);
27
+ font-family: var(--font);
28
+ min-height: 100vh;
29
+ padding: 24px;
30
+ }
31
+
32
+ .header {
33
+ display: flex;
34
+ align-items: flex-start;
35
+ justify-content: space-between;
36
+ gap: 16px;
37
+ margin-bottom: 28px;
38
+ padding-bottom: 20px;
39
+ border-bottom: 1px solid var(--border);
40
+ }
41
+
42
+ .header-main {
43
+ min-width: 0;
44
+ flex: 1;
45
+ }
46
+
47
+ .header-title-row {
48
+ display: flex;
49
+ align-items: center;
50
+ gap: 12px;
51
+ flex-wrap: wrap;
52
+ margin-bottom: 8px;
53
+ }
54
+
55
+ .header h1 {
56
+ font-size: 22px;
57
+ font-weight: 700;
58
+ background: linear-gradient(135deg, var(--accent), #a78bfa);
59
+ -webkit-background-clip: text;
60
+ -webkit-text-fill-color: transparent;
61
+ letter-spacing: -0.5px;
62
+ }
63
+
64
+ .header-version {
65
+ font-size: 11px;
66
+ font-family: 'JetBrains Mono', monospace;
67
+ color: var(--text-dim);
68
+ background: rgba(255, 255, 255, 0.05);
69
+ padding: 2px 6px;
70
+ border-radius: 4px;
71
+ border: 1px solid rgba(255, 255, 255, 0.1);
72
+ transform: translateY(1px);
73
+ }
74
+
75
+ .header-stats {
76
+ display: flex;
77
+ align-items: center;
78
+ gap: 14px;
79
+ flex-wrap: wrap;
80
+ font-size: 13px;
81
+ color: var(--text-dim);
82
+ }
83
+
84
+ .header-stats span {
85
+ font-family: 'JetBrains Mono', monospace;
86
+ color: var(--text);
87
+ font-weight: 500;
88
+ }
89
+
90
+ .mask-btn {
91
+ background: none;
92
+ border: 1px solid var(--border);
93
+ color: var(--text-dim);
94
+ padding: 4px 10px;
95
+ border-radius: 999px;
96
+ cursor: pointer;
97
+ font-size: 12px;
98
+ font-family: inherit;
99
+ line-height: 1;
100
+ transition: border-color 0.2s, color 0.2s, background 0.2s;
101
+ }
102
+
103
+ .mask-btn:hover {
104
+ border-color: #35354b;
105
+ color: var(--text);
106
+ background: rgba(255,255,255,0.04);
107
+ }
108
+
109
+ .header-actions {
110
+ display: flex;
111
+ align-items: center;
112
+ gap: 10px;
113
+ flex-shrink: 0;
114
+ }
115
+
116
+ .header-icon-btn {
117
+ width: 40px;
118
+ height: 40px;
119
+ border-radius: 999px;
120
+ border: 1px solid var(--border);
121
+ background: rgba(255,255,255,0.03);
122
+ color: var(--text-dim);
123
+ display: inline-flex;
124
+ align-items: center;
125
+ justify-content: center;
126
+ cursor: pointer;
127
+ position: relative;
128
+ transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.2s;
129
+ }
130
+
131
+ .header-icon-btn:hover {
132
+ border-color: #35354b;
133
+ background: rgba(255,255,255,0.06);
134
+ color: var(--text);
135
+ transform: translateY(-1px);
136
+ }
137
+
138
+ .header-icon-btn svg {
139
+ width: 18px;
140
+ height: 18px;
141
+ stroke: currentColor;
142
+ fill: none;
143
+ stroke-width: 1.8;
144
+ }
145
+
146
+ .header-icon-btn.attention.has-items {
147
+ color: var(--yellow);
148
+ border-color: rgba(251, 191, 36, 0.4);
149
+ }
150
+
151
+ .header-icon-btn.advisor.has-items {
152
+ color: var(--accent);
153
+ border-color: rgba(124, 92, 252, 0.42);
154
+ }
155
+
156
+ .header-icon-badge {
157
+ position: absolute;
158
+ top: -5px;
159
+ right: -5px;
160
+ min-width: 18px;
161
+ height: 18px;
162
+ border-radius: 999px;
163
+ display: inline-flex;
164
+ align-items: center;
165
+ justify-content: center;
166
+ padding: 0 5px;
167
+ font-size: 10px;
168
+ font-family: 'JetBrains Mono', monospace;
169
+ font-weight: 700;
170
+ color: #fff;
171
+ background: var(--red);
172
+ border: 2px solid var(--bg);
173
+ }
174
+
175
+ .header-icon-badge.attention { background: var(--yellow); color: #17120a; }
176
+ .header-icon-badge.advisor { background: var(--accent); }
177
+
178
+ .accounts-grid {
179
+ display: grid;
180
+ grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
181
+ gap: 14px;
182
+ margin-bottom: 24px;
183
+ }
184
+
185
+ .account-card {
186
+ background: var(--surface);
187
+ border: 1px solid var(--border);
188
+ border-radius: var(--radius);
189
+ padding: 18px;
190
+ transition: border-color 0.2s, box-shadow 0.2s;
191
+ position: relative;
192
+ overflow: hidden;
193
+ }
194
+
195
+ .account-card:hover { border-color: #2a2a3e; }
196
+ .account-card.active { border-color: var(--accent); box-shadow: 0 0 20px var(--accent-glow); }
197
+ .account-card.cooldown { border-color: rgba(251, 191, 36, 0.3); }
198
+ .account-card.disabled { opacity: 0.5; }
199
+ .account-card.flagged { opacity: 0.6; border-color: rgba(255, 68, 68, 0.4); }
200
+
201
+ .card-header {
202
+ display: flex;
203
+ align-items: center;
204
+ justify-content: space-between;
205
+ margin-bottom: 14px;
206
+ }
207
+
208
+ .card-label {
209
+ font-weight: 600;
210
+ font-size: 14px;
211
+ white-space: nowrap;
212
+ overflow: hidden;
213
+ text-overflow: ellipsis;
214
+ max-width: 180px;
215
+ }
216
+
217
+ .card-badges { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
218
+
219
+ .badge {
220
+ font-size: 10px;
221
+ font-weight: 600;
222
+ text-transform: uppercase;
223
+ letter-spacing: 0.5px;
224
+ padding: 3px 8px;
225
+ border-radius: 6px;
226
+ white-space: nowrap;
227
+ }
228
+
229
+ .badge-active { background: rgba(52, 211, 153, 0.15); color: var(--green); }
230
+ .badge-ready { background: rgba(110, 110, 130, 0.1); color: var(--text-dim); }
231
+ .badge-cooldown { background: rgba(251, 191, 36, 0.15); color: var(--yellow); }
232
+ .badge-exhausted { background: rgba(248, 113, 113, 0.15); color: var(--red); }
233
+ .badge-disabled { background: rgba(248, 113, 113, 0.1); color: #888; }
234
+ .badge-error { background: rgba(251, 146, 60, 0.15); color: var(--orange); }
235
+ .badge-flagged { background: rgba(248, 113, 113, 0.25); color: #ff4444; font-weight: 700; }
236
+ .badge-model { background: rgba(124, 92, 252, 0.1); color: var(--accent); }
237
+
238
+ .card-email {
239
+ font-size: 12px;
240
+ color: var(--text-dim);
241
+ margin-bottom: 12px;
242
+ font-family: 'JetBrains Mono', monospace;
243
+ white-space: nowrap;
244
+ overflow: hidden;
245
+ text-overflow: ellipsis;
246
+ }
247
+
248
+ .card-stats {
249
+ display: grid;
250
+ grid-template-columns: 1fr 1fr;
251
+ gap: 8px;
252
+ }
253
+
254
+ .card-stat { font-size: 12px; }
255
+ .card-stat .stat-label { color: var(--text-dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
256
+ .card-stat .stat-value { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 13px; margin-top: 2px; }
257
+
258
+ .card-error {
259
+ margin-top: 10px;
260
+ padding: 8px 10px;
261
+ background: rgba(248, 113, 113, 0.08);
262
+ border-radius: 8px;
263
+ font-size: 11px;
264
+ color: var(--red);
265
+ font-family: 'JetBrains Mono', monospace;
266
+ word-break: break-all;
267
+ }
268
+
269
+ .card-hint {
270
+ margin-top: 6px;
271
+ padding: 8px 10px;
272
+ background: rgba(250, 204, 21, 0.08);
273
+ border-radius: 8px;
274
+ border-left: 3px solid var(--yellow);
275
+ font-size: 11px;
276
+ color: var(--yellow);
277
+ line-height: 1.4;
278
+ }
279
+
280
+ .card-actions { margin-top: 10px; display: flex; gap: 8px; }
281
+
282
+ .btn-enable {
283
+ font-size: 11px;
284
+ padding: 4px 12px;
285
+ border: 1px solid var(--accent);
286
+ background: transparent;
287
+ color: var(--accent);
288
+ border-radius: 6px;
289
+ cursor: pointer;
290
+ font-family: var(--font);
291
+ font-weight: 500;
292
+ transition: background 0.2s;
293
+ }
294
+ .btn-enable:hover { background: var(--accent-glow); }
295
+
296
+ .cooldown-bar {
297
+ position: absolute;
298
+ bottom: 0;
299
+ left: 0;
300
+ height: 3px;
301
+ background: linear-gradient(90deg, var(--yellow), var(--orange));
302
+ transition: width 1s linear;
303
+ border-radius: 0 3px 0 0;
304
+ }
305
+
306
+ .quota-section {
307
+ margin-top: 10px;
308
+ padding-top: 10px;
309
+ border-top: 1px solid var(--border);
310
+ }
311
+
312
+ .quota-section-title {
313
+ font-size: 10px;
314
+ text-transform: uppercase;
315
+ letter-spacing: 0.5px;
316
+ color: var(--text-dim);
317
+ margin-bottom: 6px;
318
+ }
319
+
320
+ .quota-row {
321
+ display: flex;
322
+ align-items: center;
323
+ gap: 8px;
324
+ margin-bottom: 5px;
325
+ }
326
+
327
+ .quota-model {
328
+ font-size: 11px;
329
+ font-family: 'JetBrains Mono', monospace;
330
+ color: var(--text-dim);
331
+ width: 52px;
332
+ flex-shrink: 0;
333
+ }
334
+
335
+ .quota-timer {
336
+ font-size: 9px;
337
+ font-family: 'JetBrains Mono', monospace;
338
+ padding: 1px 4px;
339
+ border-radius: 3px;
340
+ flex-shrink: 0;
341
+ }
342
+
343
+ .timer-fresh { background: rgba(52, 211, 153, 0.1); color: var(--green); }
344
+ .timer-7d { background: rgba(96, 165, 250, 0.1); color: var(--blue); }
345
+ .timer-5h { background: rgba(251, 191, 36, 0.1); color: var(--yellow); }
346
+
347
+ .quota-bar-bg {
348
+ flex: 1;
349
+ height: 8px;
350
+ background: rgba(255,255,255,0.05);
351
+ border-radius: 4px;
352
+ overflow: hidden;
353
+ }
354
+
355
+ .quota-bar-fill {
356
+ height: 100%;
357
+ border-radius: 4px;
358
+ transition: width 0.5s ease;
359
+ }
360
+
361
+ .quota-pct {
362
+ font-size: 11px;
363
+ font-family: 'JetBrains Mono', monospace;
364
+ font-weight: 600;
365
+ width: 36px;
366
+ text-align: right;
367
+ flex-shrink: 0;
368
+ }
369
+
370
+ .quota-reset {
371
+ font-size: 9px;
372
+ font-family: 'JetBrains Mono', monospace;
373
+ color: var(--text-dim);
374
+ width: 55px;
375
+ text-align: right;
376
+ flex-shrink: 0;
377
+ }
378
+
379
+ .quota-action {
380
+ width: 54px;
381
+ flex-shrink: 0;
382
+ }
383
+
384
+ .btn-clear-flight {
385
+ width: 54px;
386
+ border: 1px solid rgba(96, 165, 250, 0.28);
387
+ background: rgba(96, 165, 250, 0.08);
388
+ color: var(--blue);
389
+ border-radius: 4px;
390
+ font-size: 9px;
391
+ font-family: var(--font);
392
+ font-weight: 700;
393
+ padding: 2px 4px;
394
+ cursor: pointer;
395
+ }
396
+
397
+ .btn-clear-flight:hover { background: rgba(96, 165, 250, 0.16); }
398
+ .btn-clear-flight:disabled {
399
+ border-color: var(--border);
400
+ background: rgba(255,255,255,0.03);
401
+ color: var(--text-dim);
402
+ cursor: not-allowed;
403
+ opacity: 0.55;
404
+ }
405
+
406
+ .pulse { animation: pulse 2s ease-in-out infinite; }
407
+ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
408
+
409
+ @keyframes heartbeat {
410
+ 0% { transform: scale(1); }
411
+ 15% { transform: scale(1.25); }
412
+ 30% { transform: scale(1); }
413
+ 45% { transform: scale(1.25); }
414
+ 60% { transform: scale(1); }
415
+ 100% { transform: scale(1); }
416
+ }
417
+ .heart-beat svg {
418
+ color: #FF5E5B !important;
419
+ fill: rgba(255, 94, 91, 0.4) !important;
420
+ animation: heartbeat 1.8s infinite;
421
+ transform-origin: center;
422
+ }
423
+
424
+ .discord-btn svg {
425
+ fill: currentColor !important;
426
+ stroke: none !important;
427
+ transition: transform 0.2s, color 0.2s;
428
+ }
429
+ .discord-btn:hover {
430
+ border-color: rgba(88, 101, 242, 0.4) !important;
431
+ background: rgba(88, 101, 242, 0.08) !important;
432
+ }
433
+ .discord-btn:hover svg {
434
+ color: #5865F2 !important;
435
+ transform: scale(1.12);
436
+ }
437
+
438
+ .badge-pro { background: rgba(52, 211, 153, 0.15); color: var(--green); }
439
+ .badge-free { background: rgba(110, 110, 130, 0.08); color: var(--text-dim); }
440
+ .badge-fmgr { background: rgba(124, 92, 252, 0.15); color: var(--accent); font-size: 9px; }
441
+
442
+ .dw-section {
443
+ margin-top: 6px;
444
+ padding: 8px 10px;
445
+ background: rgba(124, 92, 252, 0.04);
446
+ border: 1px solid rgba(124, 92, 252, 0.12);
447
+ border-radius: 6px;
448
+ }
449
+ .dw-title {
450
+ font-size: 10px;
451
+ font-weight: 700;
452
+ color: var(--accent);
453
+ text-transform: uppercase;
454
+ letter-spacing: 0.5px;
455
+ margin-bottom: 6px;
456
+ }
457
+ .dw-model {
458
+ margin-bottom: 6px;
459
+ }
460
+ .dw-model-name {
461
+ font-size: 10px;
462
+ color: var(--text-dim);
463
+ font-weight: 600;
464
+ margin-bottom: 2px;
465
+ }
466
+ .dw-row {
467
+ display: flex;
468
+ align-items: center;
469
+ gap: 6px;
470
+ font-size: 10px;
471
+ line-height: 1.6;
472
+ }
473
+
474
+ .routing-panel {
475
+ border-radius: var(--radius);
476
+ padding: 12px 14px;
477
+ margin-bottom: 24px;
478
+ }
479
+ .routing-panel strong { display: inline-block; margin-right: 10px; }
480
+ .routing-summary {
481
+ display: flex;
482
+ flex-wrap: wrap;
483
+ gap: 10px;
484
+ align-items: center;
485
+ margin-bottom: 8px;
486
+ }
487
+ .routing-summary div {
488
+ font-size: 12px;
489
+ color: var(--text);
490
+ }
491
+ .routing-inline-note {
492
+ font-family: 'JetBrains Mono', monospace;
493
+ color: var(--text-dim);
494
+ font-size: 11px;
495
+ }
496
+ .routing-panel.state-healthy {
497
+ background: rgba(52, 211, 153, 0.08);
498
+ border: 1px solid rgba(52, 211, 153, 0.24);
499
+ border-left: 4px solid var(--green);
500
+ }
501
+ .routing-panel.state-healthy strong { color: var(--green); }
502
+ .routing-panel.state-cooldown_wait {
503
+ background: rgba(251, 191, 36, 0.08);
504
+ border: 1px solid rgba(251, 191, 36, 0.24);
505
+ border-left: 4px solid var(--yellow);
506
+ }
507
+ .routing-panel.state-cooldown_wait strong { color: var(--yellow); }
508
+ .routing-panel.state-busy {
509
+ background: rgba(96, 165, 250, 0.08);
510
+ border: 1px solid rgba(96, 165, 250, 0.24);
511
+ border-left: 4px solid var(--blue);
512
+ }
513
+ .routing-panel.state-busy strong { color: var(--blue); }
514
+ .routing-panel.state-paused,
515
+ .routing-panel.state-stopped {
516
+ background: rgba(248, 113, 113, 0.08);
517
+ border: 1px solid rgba(248, 113, 113, 0.25);
518
+ border-left: 4px solid var(--red);
519
+ }
520
+ .routing-panel.state-paused strong,
521
+ .routing-panel.state-stopped strong { color: var(--red); }
522
+ .ops-buttons { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
523
+ .ops-warning { margin-top:8px; font-size:10px; color: var(--text-dim); line-height:1.35; }
524
+ .btn-secondary {
525
+ font-size: 11px;
526
+ padding: 4px 12px;
527
+ border: 1px solid var(--border);
528
+ background: transparent;
529
+ color: var(--text);
530
+ border-radius: 6px;
531
+ cursor: pointer;
532
+ font-family: var(--font);
533
+ font-weight: 500;
534
+ }
535
+ .btn-sm { padding: 2px 8px; font-size: 10px; }
536
+ .btn-sm.active { background: var(--accent); color: #000; border-color: var(--accent); }
537
+ .health-grid {
538
+ display:grid;
539
+ grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
540
+ gap: 8px;
541
+ margin-top: 8px;
542
+ }
543
+ .health-pill {
544
+ background: rgba(255,255,255,0.04);
545
+ border: 1px solid var(--border);
546
+ border-radius: 8px;
547
+ padding: 8px 10px;
548
+ display: flex;
549
+ align-items: center;
550
+ justify-content: space-between;
551
+ gap: 10px;
552
+ }
553
+ .health-pill .label {
554
+ font-size: 12px;
555
+ text-transform: uppercase;
556
+ letter-spacing: 0.35px;
557
+ color: var(--text-dim);
558
+ line-height: 1;
559
+ }
560
+ .health-pill .value {
561
+ font-size: 18px;
562
+ font-family: 'JetBrains Mono', monospace;
563
+ font-weight: 700;
564
+ line-height: 1;
565
+ }
566
+ .operator-panel {
567
+ background: var(--surface);
568
+ border: 1px solid var(--border);
569
+ border-radius: var(--radius);
570
+ padding: 16px 18px;
571
+ margin-bottom: 24px;
572
+ }
573
+ .operator-title {
574
+ font-size: 11px;
575
+ text-transform: uppercase;
576
+ letter-spacing: 0.8px;
577
+ color: var(--text-dim);
578
+ margin-bottom: 10px;
579
+ }
580
+ .operator-list {
581
+ display: grid;
582
+ gap: 8px;
583
+ }
584
+ .operator-item {
585
+ display: flex;
586
+ align-items: flex-start;
587
+ gap: 14px;
588
+ padding: 14px;
589
+ border-radius: 8px;
590
+ background: var(--card-bg);
591
+ border: 1px solid var(--border);
592
+ }
593
+ .operator-item.operator-red { border-left: 4px solid var(--red); }
594
+ .operator-item.operator-yellow { border-left: 4px solid var(--yellow); }
595
+ .operator-item.operator-gray { border-left: 4px solid var(--text-dim); }
596
+ .operator-item.operator-orange { border-left: 4px solid #f97316; }
597
+
598
+ .operator-icon {
599
+ width: 24px;
600
+ height: 24px;
601
+ flex-shrink: 0;
602
+ margin-top: 2px;
603
+ }
604
+ .operator-red .operator-icon { color: var(--red); }
605
+ .operator-yellow .operator-icon { color: var(--yellow); }
606
+ .operator-gray .operator-icon { color: var(--text-dim); }
607
+ .operator-orange .operator-icon { color: #f97316; }
608
+
609
+ .operator-content {
610
+ flex: 1;
611
+ min-width: 0;
612
+ }
613
+ .operator-content strong {
614
+ display: block;
615
+ font-size: 14px;
616
+ margin-bottom: 4px;
617
+ color: var(--text);
618
+ }
619
+ .operator-content p {
620
+ margin: 0 0 10px 0;
621
+ font-size: 13px;
622
+ color: var(--text-dim);
623
+ line-height: 1.4;
624
+ }
625
+ .operator-tags {
626
+ display: flex;
627
+ flex-wrap: wrap;
628
+ gap: 6px;
629
+ }
630
+ .operator-tag {
631
+ font-family: 'JetBrains Mono', monospace;
632
+ font-size: 11px;
633
+ padding: 3px 8px;
634
+ border-radius: 4px;
635
+ background: rgba(255,255,255,0.06);
636
+ color: var(--text);
637
+ border: 1px solid rgba(255,255,255,0.1);
638
+ }
639
+ .events-panel {
640
+ background: var(--surface);
641
+ border: 1px solid var(--border);
642
+ border-radius: var(--radius);
643
+ padding: 16px 18px;
644
+ margin-bottom: 24px;
645
+ }
646
+ .events-list {
647
+ display: grid;
648
+ gap: 8px;
649
+ }
650
+ .events-toolbar {
651
+ display: flex;
652
+ gap: 8px;
653
+ flex-wrap: wrap;
654
+ margin-bottom: 12px;
655
+ }
656
+ .event-filter {
657
+ font-size: 11px;
658
+ padding: 5px 10px;
659
+ border: 1px solid var(--border);
660
+ background: transparent;
661
+ color: var(--text-dim);
662
+ border-radius: 999px;
663
+ cursor: pointer;
664
+ font-family: var(--font);
665
+ font-weight: 600;
666
+ }
667
+ .event-filter.active {
668
+ background: rgba(124, 92, 252, 0.14);
669
+ border-color: rgba(124, 92, 252, 0.28);
670
+ color: var(--text);
671
+ }
672
+ .event-item {
673
+ display: grid;
674
+ grid-template-columns: 90px 56px 1fr;
675
+ gap: 10px;
676
+ align-items: start;
677
+ padding: 10px 12px;
678
+ border-radius: 8px;
679
+ background: rgba(255,255,255,0.03);
680
+ border: 1px solid var(--border);
681
+ }
682
+ .event-item.level-warn {
683
+ border-color: rgba(251, 191, 36, 0.22);
684
+ }
685
+ .event-item.level-error {
686
+ border-color: rgba(248, 113, 113, 0.22);
687
+ }
688
+ .event-time {
689
+ font-family: 'JetBrains Mono', monospace;
690
+ font-size: 11px;
691
+ color: var(--text-dim);
692
+ white-space: nowrap;
693
+ }
694
+ .event-source {
695
+ font-size: 10px;
696
+ font-weight: 700;
697
+ text-transform: uppercase;
698
+ letter-spacing: 0.5px;
699
+ padding: 2px 6px;
700
+ border-radius: 999px;
701
+ text-align: center;
702
+ }
703
+ .event-source.rotator {
704
+ background: rgba(124, 92, 252, 0.14);
705
+ color: var(--accent);
706
+ }
707
+ .event-source.proxy {
708
+ background: rgba(96, 165, 250, 0.14);
709
+ color: var(--blue);
710
+ }
711
+ .event-message {
712
+ font-size: 12px;
713
+ line-height: 1.45;
714
+ color: var(--text);
715
+ word-break: break-word;
716
+ }
717
+ .events-empty {
718
+ font-size: 12px;
719
+ color: var(--text-dim);
720
+ padding: 10px 2px 2px;
721
+ }
722
+ .modal {
723
+ position: fixed;
724
+ inset: 0;
725
+ display: none;
726
+ align-items: center;
727
+ justify-content: center;
728
+ padding: 24px;
729
+ background: rgba(5, 5, 10, 0.72);
730
+ backdrop-filter: blur(10px);
731
+ z-index: 50;
732
+ }
733
+ .modal.open { display: flex; }
734
+ .modal-card {
735
+ width: min(820px, 100%);
736
+ max-height: min(78vh, 920px);
737
+ overflow: auto;
738
+ background: linear-gradient(180deg, rgba(20,20,31,0.98), rgba(14,14,22,0.98));
739
+ border: 1px solid rgba(255,255,255,0.08);
740
+ border-radius: 18px;
741
+ box-shadow: 0 28px 120px rgba(0,0,0,0.45);
742
+ padding: 18px;
743
+ }
744
+ .modal-header {
745
+ display: flex;
746
+ align-items: center;
747
+ justify-content: space-between;
748
+ gap: 12px;
749
+ margin-bottom: 14px;
750
+ }
751
+ .modal-header strong {
752
+ font-size: 14px;
753
+ letter-spacing: 0.02em;
754
+ }
755
+ .modal-close {
756
+ width: 34px;
757
+ height: 34px;
758
+ border-radius: 999px;
759
+ border: 1px solid var(--border);
760
+ background: transparent;
761
+ color: var(--text-dim);
762
+ cursor: pointer;
763
+ font-size: 18px;
764
+ line-height: 1;
765
+ }
766
+ .modal-close:hover {
767
+ color: var(--text);
768
+ border-color: #35354b;
769
+ }
770
+ .modal-empty {
771
+ font-size: 12px;
772
+ color: var(--text-dim);
773
+ padding: 8px 2px 2px;
774
+ }
775
+ @media (max-width: 820px) {
776
+ body { padding: 18px; }
777
+ .header { flex-direction: column; align-items: stretch; }
778
+ .header-actions { justify-content: flex-start; }
779
+ .update-banner { flex-direction: column; align-items: stretch; gap: 10px; }
780
+ .update-banner-actions { justify-content: flex-start; }
781
+ }
782
+
783
+ .update-banner {
784
+ display: none;
785
+ align-items: center;
786
+ gap: 14px;
787
+ padding: 12px 18px;
788
+ margin-bottom: 16px;
789
+ border-radius: var(--radius);
790
+ background: linear-gradient(135deg, rgba(124, 92, 252, 0.12), rgba(167, 139, 250, 0.08));
791
+ border: 1px solid rgba(124, 92, 252, 0.35);
792
+ animation: bannerSlideIn 0.4s ease-out;
793
+ }
794
+
795
+ @keyframes bannerSlideIn {
796
+ from { opacity: 0; transform: translateY(-10px); }
797
+ to { opacity: 1; transform: translateY(0); }
798
+ }
799
+
800
+ .update-banner.visible { display: flex; }
801
+ .update-banner.success {
802
+ background: linear-gradient(135deg, rgba(52, 211, 153, 0.12), rgba(52, 211, 153, 0.06));
803
+ border-color: rgba(52, 211, 153, 0.35);
804
+ }
805
+
806
+ .update-badge {
807
+ font-size: 9px;
808
+ font-weight: 800;
809
+ text-transform: uppercase;
810
+ letter-spacing: 1px;
811
+ padding: 3px 8px;
812
+ border-radius: 6px;
813
+ background: var(--accent);
814
+ color: #fff;
815
+ flex-shrink: 0;
816
+ animation: badgePulse 2s ease-in-out infinite;
817
+ }
818
+
819
+ .update-banner.success .update-badge {
820
+ background: var(--green);
821
+ animation: none;
822
+ }
823
+
824
+ @keyframes badgePulse {
825
+ 0%, 100% { opacity: 1; }
826
+ 50% { opacity: 0.7; }
827
+ }
828
+
829
+ .update-message {
830
+ flex: 1;
831
+ font-size: 13px;
832
+ color: var(--text);
833
+ min-width: 0;
834
+ }
835
+
836
+ .update-message strong {
837
+ color: var(--accent);
838
+ }
839
+
840
+ .update-banner.success .update-message strong {
841
+ color: var(--green);
842
+ }
843
+
844
+ .update-banner-actions {
845
+ display: flex;
846
+ gap: 8px;
847
+ align-items: center;
848
+ flex-shrink: 0;
849
+ }
850
+
851
+ .btn-update {
852
+ font-size: 11px;
853
+ padding: 5px 14px;
854
+ border: 1px solid var(--accent);
855
+ background: var(--accent);
856
+ color: #fff;
857
+ border-radius: 6px;
858
+ cursor: pointer;
859
+ font-family: var(--font);
860
+ font-weight: 600;
861
+ transition: opacity 0.2s, transform 0.2s;
862
+ }
863
+
864
+ .btn-update:hover {
865
+ opacity: 0.9;
866
+ transform: translateY(-1px);
867
+ }
868
+
869
+ .btn-update:disabled {
870
+ opacity: 0.5;
871
+ cursor: not-allowed;
872
+ transform: none;
873
+ }
874
+
875
+ .btn-update-link {
876
+ font-size: 11px;
877
+ padding: 5px 14px;
878
+ border: 1px solid rgba(124, 92, 252, 0.3);
879
+ background: transparent;
880
+ color: var(--accent);
881
+ border-radius: 6px;
882
+ cursor: pointer;
883
+ font-family: var(--font);
884
+ font-weight: 500;
885
+ text-decoration: none;
886
+ transition: background 0.2s;
887
+ }
888
+
889
+ .btn-update-link:hover {
890
+ background: rgba(124, 92, 252, 0.08);
891
+ }
892
+
893
+ .btn-update-dismiss {
894
+ font-size: 11px;
895
+ padding: 5px 10px;
896
+ border: none;
897
+ background: transparent;
898
+ color: var(--text-dim);
899
+ cursor: pointer;
900
+ font-family: var(--font);
901
+ transition: color 0.2s;
902
+ }
903
+
904
+ .btn-update-dismiss:hover {
905
+ color: var(--text);
906
+ }
907
+
908
+ /* ── Admin Notification Banners ── */
909
+ .notif-container {
910
+ display: flex;
911
+ flex-direction: column;
912
+ gap: 10px;
913
+ margin-bottom: 2px;
914
+ }
915
+
916
+ .notif-banner {
917
+ display: flex;
918
+ align-items: flex-start;
919
+ gap: 12px;
920
+ padding: 12px 18px;
921
+ border-radius: var(--radius);
922
+ animation: bannerSlideIn 0.4s ease-out;
923
+ }
924
+
925
+ .notif-banner.notif-info {
926
+ background: linear-gradient(135deg, rgba(96, 165, 250, 0.10), rgba(99, 179, 237, 0.06));
927
+ border: 1px solid rgba(96, 165, 250, 0.30);
928
+ }
929
+
930
+ .notif-banner.notif-warning {
931
+ background: linear-gradient(135deg, rgba(251, 191, 36, 0.10), rgba(246, 224, 94, 0.06));
932
+ border: 1px solid rgba(251, 191, 36, 0.30);
933
+ }
934
+
935
+ .notif-banner.notif-critical {
936
+ background: linear-gradient(135deg, rgba(248, 113, 113, 0.12), rgba(252, 129, 129, 0.06));
937
+ border: 1px solid rgba(248, 113, 113, 0.35);
938
+ animation: bannerSlideIn 0.4s ease-out, notifPulse 3s ease-in-out 1;
939
+ }
940
+
941
+ @keyframes notifPulse {
942
+ 0%, 100% { box-shadow: none; }
943
+ 50% { box-shadow: 0 0 16px rgba(248, 113, 113, 0.25); }
944
+ }
945
+
946
+ .notif-icon {
947
+ font-size: 18px;
948
+ flex-shrink: 0;
949
+ margin-top: 1px;
950
+ }
951
+
952
+ .notif-content {
953
+ flex: 1;
954
+ min-width: 0;
955
+ }
956
+
957
+ .notif-title {
958
+ font-weight: 700;
959
+ font-size: 13px;
960
+ margin-bottom: 3px;
961
+ }
962
+
963
+ .notif-info .notif-title { color: var(--blue); }
964
+ .notif-warning .notif-title { color: var(--yellow); }
965
+ .notif-critical .notif-title { color: var(--red); }
966
+
967
+ .notif-msg {
968
+ font-size: 12px;
969
+ color: var(--text-dim);
970
+ line-height: 1.45;
971
+ }
972
+
973
+ .notif-actions {
974
+ display: flex;
975
+ gap: 8px;
976
+ margin-top: 8px;
977
+ align-items: center;
978
+ }
979
+
980
+ .notif-action-btn {
981
+ display: inline-block;
982
+ padding: 4px 12px;
983
+ border-radius: 6px;
984
+ font-size: 11px;
985
+ font-weight: 600;
986
+ text-decoration: none;
987
+ border: 1px solid rgba(255,255,255,0.15);
988
+ color: var(--text);
989
+ background: rgba(255,255,255,0.06);
990
+ cursor: pointer;
991
+ font-family: var(--font);
992
+ transition: background 0.2s;
993
+ }
994
+
995
+ .notif-action-btn:hover {
996
+ background: rgba(255,255,255,0.12);
997
+ }
998
+
999
+ .notif-dismiss {
1000
+ background: none;
1001
+ border: none;
1002
+ color: var(--text-dim);
1003
+ cursor: pointer;
1004
+ font-size: 16px;
1005
+ padding: 4px;
1006
+ line-height: 1;
1007
+ opacity: 0.6;
1008
+ transition: opacity 0.2s;
1009
+ flex-shrink: 0;
1010
+ margin-left: auto;
1011
+ }
1012
+
1013
+ .notif-dismiss:hover {
1014
+ opacity: 1;
1015
+ color: var(--text);
1016
+ }
1017
+
1018
+ .notif-bell-dot {
1019
+ background: var(--yellow);
1020
+ }
1021
+
1022
+ /* ── List View ── */
1023
+ .view-toggle-bar {
1024
+ display: flex;
1025
+ align-items: center;
1026
+ gap: 8px;
1027
+ margin-bottom: 16px;
1028
+ }
1029
+
1030
+ .view-tab {
1031
+ font-size: 12px;
1032
+ font-weight: 600;
1033
+ padding: 5px 14px;
1034
+ border-radius: 999px;
1035
+ border: 1px solid var(--border);
1036
+ background: transparent;
1037
+ color: var(--text-dim);
1038
+ cursor: pointer;
1039
+ font-family: var(--font);
1040
+ transition: background 0.2s, color 0.2s, border-color 0.2s;
1041
+ }
1042
+
1043
+ .view-tab.active {
1044
+ background: rgba(124, 92, 252, 0.14);
1045
+ border-color: rgba(124, 92, 252, 0.35);
1046
+ color: var(--text);
1047
+ }
1048
+
1049
+ .view-tab:hover:not(.active) {
1050
+ background: rgba(255,255,255,0.04);
1051
+ color: var(--text);
1052
+ }
1053
+
1054
+ .list-panel {
1055
+ background: var(--surface);
1056
+ border: 1px solid var(--border);
1057
+ border-radius: var(--radius);
1058
+ overflow: hidden;
1059
+ margin-bottom: 24px;
1060
+ }
1061
+
1062
+ .list-toolbar {
1063
+ display: flex;
1064
+ align-items: center;
1065
+ gap: 10px;
1066
+ padding: 12px 16px;
1067
+ border-bottom: 1px solid var(--border);
1068
+ flex-wrap: wrap;
1069
+ }
1070
+
1071
+ .list-toolbar-label {
1072
+ font-size: 11px;
1073
+ text-transform: uppercase;
1074
+ letter-spacing: 0.6px;
1075
+ color: var(--text-dim);
1076
+ margin-right: auto;
1077
+ }
1078
+
1079
+ .list-search {
1080
+ background: rgba(255,255,255,0.04);
1081
+ border: 1px solid var(--border);
1082
+ color: var(--text);
1083
+ padding: 4px 10px;
1084
+ border-radius: 6px;
1085
+ font-size: 12px;
1086
+ font-family: var(--font);
1087
+ width: 180px;
1088
+ outline: none;
1089
+ transition: border-color 0.2s;
1090
+ }
1091
+
1092
+ .list-search:focus {
1093
+ border-color: rgba(124, 92, 252, 0.4);
1094
+ }
1095
+
1096
+ .list-sort-btn {
1097
+ font-size: 11px;
1098
+ padding: 4px 10px;
1099
+ border: 1px solid var(--border);
1100
+ background: transparent;
1101
+ color: var(--text-dim);
1102
+ border-radius: 6px;
1103
+ cursor: pointer;
1104
+ font-family: var(--font);
1105
+ font-weight: 600;
1106
+ transition: background 0.2s, color 0.2s;
1107
+ }
1108
+
1109
+ .list-sort-btn.active {
1110
+ border-color: rgba(124, 92, 252, 0.35);
1111
+ color: var(--accent);
1112
+ background: rgba(124, 92, 252, 0.08);
1113
+ }
1114
+
1115
+ .list-table {
1116
+ width: 100%;
1117
+ border-collapse: collapse;
1118
+ }
1119
+
1120
+ .list-table th {
1121
+ font-size: 10px;
1122
+ font-weight: 700;
1123
+ text-transform: uppercase;
1124
+ letter-spacing: 0.5px;
1125
+ color: var(--text-dim);
1126
+ padding: 8px 14px;
1127
+ text-align: left;
1128
+ border-bottom: 1px solid var(--border);
1129
+ background: rgba(255,255,255,0.02);
1130
+ white-space: nowrap;
1131
+ cursor: pointer;
1132
+ user-select: none;
1133
+ }
1134
+
1135
+ .list-table th:hover { color: var(--text); }
1136
+
1137
+ .list-table th .sort-arrow {
1138
+ display: inline-block;
1139
+ margin-left: 4px;
1140
+ opacity: 0.4;
1141
+ font-size: 9px;
1142
+ }
1143
+
1144
+ .list-table th.sort-active .sort-arrow { opacity: 1; color: var(--accent); }
1145
+
1146
+ .list-table td {
1147
+ padding: 9px 14px;
1148
+ font-size: 12px;
1149
+ border-bottom: 1px solid rgba(255,255,255,0.04);
1150
+ vertical-align: middle;
1151
+ }
1152
+
1153
+ .list-table tr:last-child td { border-bottom: none; }
1154
+
1155
+ .list-table tr.list-row {
1156
+ cursor: pointer;
1157
+ transition: background 0.15s;
1158
+ }
1159
+
1160
+ .list-table tr.list-row:hover td {
1161
+ background: rgba(124, 92, 252, 0.05);
1162
+ }
1163
+
1164
+ .list-row-label {
1165
+ font-weight: 600;
1166
+ font-size: 13px;
1167
+ }
1168
+
1169
+ .list-row-email {
1170
+ font-family: 'JetBrains Mono', monospace;
1171
+ font-size: 10px;
1172
+ color: var(--text-dim);
1173
+ margin-top: 2px;
1174
+ }
1175
+
1176
+ .list-quota-bar {
1177
+ display: flex;
1178
+ align-items: center;
1179
+ gap: 6px;
1180
+ }
1181
+
1182
+ .list-quota-bar-bg {
1183
+ width: 60px;
1184
+ height: 5px;
1185
+ background: rgba(255,255,255,0.07);
1186
+ border-radius: 3px;
1187
+ overflow: hidden;
1188
+ flex-shrink: 0;
1189
+ }
1190
+
1191
+ .list-quota-bar-fill {
1192
+ height: 100%;
1193
+ border-radius: 3px;
1194
+ }
1195
+
1196
+ .list-highlight td {
1197
+ background: rgba(124, 92, 252, 0.12) !important;
1198
+ transition: background 0.8s ease-out !important;
1199
+ }
1200
+
1201
+ .list-empty {
1202
+ text-align: center;
1203
+ color: var(--text-dim);
1204
+ padding: 32px;
1205
+ font-size: 13px;
1206
+ }
1207
+
1208
+ .tier-option {
1209
+ padding: 6px 14px;
1210
+ font-size: 11px;
1211
+ font-weight: 600;
1212
+ cursor: pointer;
1213
+ letter-spacing: 0.05em;
1214
+ color: var(--text);
1215
+ }
1216
+ .tier-option:hover {
1217
+ background: var(--surface-hover);
1218
+ }
1219
+ .tier-option:first-child {
1220
+ border-radius: 8px 8px 0 0;
1221
+ }
1222
+ .tier-option:last-child {
1223
+ border-radius: 0 0 8px 8px;
1224
+ }