ondeckllm 1.1.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.
@@ -0,0 +1,1152 @@
1
+ /* ── Reset & Base ── */
2
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
3
+
4
+ :root {
5
+ --bg-primary: #0d1117;
6
+ --bg-secondary: #161b22;
7
+ --bg-tertiary: #1c2128;
8
+ --bg-card: #1c2128;
9
+ --bg-card-hover: #22272e;
10
+ --bg-input: #0d1117;
11
+ --border: #30363d;
12
+ --border-light: #3d444d;
13
+ --text-primary: #e6edf3;
14
+ --text-secondary: #8b949e;
15
+ --text-muted: #6e7681;
16
+ --accent: #58a6ff;
17
+ --accent-dim: #1f6feb;
18
+ --green: #3fb950;
19
+ --green-dim: #238636;
20
+ --yellow: #d29922;
21
+ --red: #f85149;
22
+ --red-dim: #da3633;
23
+ --purple: #bc8cff;
24
+ --orange: #f0883e;
25
+ --gold: #f5c542;
26
+ --gold-dim: #b8941f;
27
+ --radius: 8px;
28
+ --radius-lg: 12px;
29
+ --shadow: 0 2px 8px rgba(0,0,0,0.3);
30
+ --shadow-lg: 0 8px 24px rgba(0,0,0,0.4);
31
+ --transition: 150ms ease;
32
+ }
33
+
34
+ body {
35
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
36
+ background: var(--bg-primary);
37
+ color: var(--text-primary);
38
+ line-height: 1.5;
39
+ overflow: hidden;
40
+ height: 100vh;
41
+ }
42
+
43
+ /* ── Layout ── */
44
+ .app {
45
+ display: flex;
46
+ height: 100vh;
47
+ }
48
+
49
+ /* ── Sidebar ── */
50
+ .sidebar {
51
+ width: 240px;
52
+ min-width: 240px;
53
+ background: var(--bg-secondary);
54
+ border-right: 1px solid var(--border);
55
+ display: flex;
56
+ flex-direction: column;
57
+ z-index: 10;
58
+ }
59
+
60
+ .sidebar-brand {
61
+ padding: 20px 16px;
62
+ display: flex;
63
+ align-items: center;
64
+ gap: 10px;
65
+ border-bottom: 1px solid var(--border);
66
+ }
67
+
68
+ .brand-icon {
69
+ font-size: 26px;
70
+ color: var(--gold);
71
+ filter: drop-shadow(0 0 8px rgba(245,197,66,0.5));
72
+ }
73
+
74
+ .brand-text {
75
+ font-weight: 700;
76
+ font-size: 16px;
77
+ letter-spacing: -0.3px;
78
+ }
79
+
80
+ .brand-version {
81
+ font-size: 11px;
82
+ color: var(--text-muted);
83
+ background: var(--bg-tertiary);
84
+ padding: 2px 6px;
85
+ border-radius: 4px;
86
+ margin-left: auto;
87
+ }
88
+
89
+ .sidebar-nav {
90
+ flex: 1;
91
+ padding: 12px 8px;
92
+ display: flex;
93
+ flex-direction: column;
94
+ gap: 2px;
95
+ }
96
+
97
+ .nav-item {
98
+ display: flex;
99
+ align-items: center;
100
+ gap: 10px;
101
+ padding: 10px 12px;
102
+ border-radius: var(--radius);
103
+ color: var(--text-secondary);
104
+ text-decoration: none;
105
+ transition: all var(--transition);
106
+ cursor: pointer;
107
+ font-size: 14px;
108
+ }
109
+
110
+ .nav-item:hover {
111
+ background: var(--bg-tertiary);
112
+ color: var(--text-primary);
113
+ }
114
+
115
+ .nav-item.active {
116
+ background: rgba(245,197,66,0.08);
117
+ color: var(--gold);
118
+ }
119
+
120
+ .nav-icon {
121
+ font-size: 18px;
122
+ width: 24px;
123
+ text-align: center;
124
+ }
125
+
126
+ .sidebar-footer {
127
+ padding: 16px;
128
+ border-top: 1px solid var(--border);
129
+ display: flex;
130
+ align-items: center;
131
+ gap: 8px;
132
+ font-size: 12px;
133
+ color: var(--text-muted);
134
+ }
135
+
136
+ .status-dot {
137
+ width: 8px;
138
+ height: 8px;
139
+ border-radius: 50%;
140
+ background: var(--text-muted);
141
+ }
142
+
143
+ .status-dot.active {
144
+ background: var(--green);
145
+ box-shadow: 0 0 6px rgba(63,185,80,0.5);
146
+ }
147
+
148
+ /* ── Main Content ── */
149
+ .main {
150
+ flex: 1;
151
+ overflow-y: auto;
152
+ padding: 32px;
153
+ }
154
+
155
+ .page {
156
+ display: none;
157
+ animation: fadeIn 200ms ease;
158
+ }
159
+
160
+ .page.active {
161
+ display: block;
162
+ }
163
+
164
+ @keyframes fadeIn {
165
+ from { opacity: 0; transform: translateY(4px); }
166
+ to { opacity: 1; transform: translateY(0); }
167
+ }
168
+
169
+ .page-header {
170
+ margin-bottom: 28px;
171
+ }
172
+
173
+ .page-header h1 {
174
+ font-size: 24px;
175
+ font-weight: 700;
176
+ letter-spacing: -0.5px;
177
+ margin-bottom: 6px;
178
+ }
179
+
180
+ .page-header p {
181
+ color: var(--text-secondary);
182
+ font-size: 14px;
183
+ }
184
+
185
+ /* ── Welcome Banner ── */
186
+ .welcome-banner {
187
+ background: linear-gradient(135deg, rgba(245,197,66,0.08) 0%, rgba(63,185,80,0.06) 100%);
188
+ border: 1px solid rgba(245,197,66,0.2);
189
+ border-radius: var(--radius-lg);
190
+ padding: 16px 24px;
191
+ margin-bottom: 24px;
192
+ display: flex;
193
+ align-items: center;
194
+ gap: 16px;
195
+ animation: bannerIn 500ms ease;
196
+ }
197
+
198
+ .welcome-banner .banner-icon {
199
+ font-size: 28px;
200
+ flex-shrink: 0;
201
+ }
202
+
203
+ .welcome-banner .banner-text {
204
+ flex: 1;
205
+ }
206
+
207
+ .welcome-banner .banner-text h3 {
208
+ font-size: 14px;
209
+ font-weight: 600;
210
+ color: var(--gold);
211
+ margin-bottom: 2px;
212
+ }
213
+
214
+ .welcome-banner .banner-text p {
215
+ font-size: 13px;
216
+ color: var(--text-secondary);
217
+ }
218
+
219
+ .welcome-banner .banner-providers {
220
+ display: flex;
221
+ gap: 6px;
222
+ flex-wrap: wrap;
223
+ }
224
+
225
+ .welcome-banner .provider-chip {
226
+ display: inline-flex;
227
+ align-items: center;
228
+ gap: 6px;
229
+ padding: 4px 10px;
230
+ background: rgba(255,255,255,0.05);
231
+ border: 1px solid var(--border);
232
+ border-radius: 20px;
233
+ font-size: 12px;
234
+ color: var(--text-primary);
235
+ }
236
+
237
+ .provider-chip .chip-dot {
238
+ width: 6px;
239
+ height: 6px;
240
+ border-radius: 50%;
241
+ }
242
+
243
+ .welcome-banner .banner-dismiss {
244
+ background: none;
245
+ border: none;
246
+ color: var(--text-muted);
247
+ cursor: pointer;
248
+ font-size: 18px;
249
+ padding: 4px;
250
+ line-height: 1;
251
+ }
252
+
253
+ @keyframes bannerIn {
254
+ from { opacity: 0; transform: translateY(-8px); }
255
+ to { opacity: 1; transform: translateY(0); }
256
+ }
257
+
258
+ /* ── Cards ── */
259
+ .card-grid {
260
+ display: grid;
261
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
262
+ gap: 16px;
263
+ }
264
+
265
+ .card {
266
+ background: var(--bg-card);
267
+ border: 1px solid var(--border);
268
+ border-radius: var(--radius-lg);
269
+ padding: 20px;
270
+ transition: all var(--transition);
271
+ }
272
+
273
+ .card:hover {
274
+ border-color: var(--border-light);
275
+ background: var(--bg-card-hover);
276
+ }
277
+
278
+ .card-header {
279
+ display: flex;
280
+ align-items: center;
281
+ justify-content: space-between;
282
+ margin-bottom: 16px;
283
+ }
284
+
285
+ .card-title {
286
+ display: flex;
287
+ align-items: center;
288
+ gap: 10px;
289
+ }
290
+
291
+ .provider-dot {
292
+ width: 10px;
293
+ height: 10px;
294
+ border-radius: 50%;
295
+ flex-shrink: 0;
296
+ }
297
+
298
+ .card-title h3 {
299
+ font-size: 15px;
300
+ font-weight: 600;
301
+ }
302
+
303
+ .status-badge {
304
+ font-size: 11px;
305
+ padding: 3px 8px;
306
+ border-radius: 12px;
307
+ font-weight: 500;
308
+ text-transform: uppercase;
309
+ letter-spacing: 0.5px;
310
+ }
311
+
312
+ .status-badge.active {
313
+ background: rgba(63,185,80,0.15);
314
+ color: var(--green);
315
+ }
316
+
317
+ .status-badge.configured {
318
+ background: rgba(210,153,34,0.15);
319
+ color: var(--yellow);
320
+ }
321
+
322
+ .status-badge.error {
323
+ background: rgba(248,81,73,0.15);
324
+ color: var(--red);
325
+ }
326
+
327
+ .status-badge.unconfigured {
328
+ background: rgba(110,118,129,0.15);
329
+ color: var(--text-muted);
330
+ }
331
+
332
+ .auto-discovered-badge {
333
+ font-size: 10px;
334
+ padding: 2px 6px;
335
+ border-radius: 4px;
336
+ background: rgba(245,197,66,0.12);
337
+ color: var(--gold);
338
+ font-weight: 500;
339
+ letter-spacing: 0.3px;
340
+ margin-left: 8px;
341
+ }
342
+
343
+ /* ── Forms & Inputs ── */
344
+ .input-group {
345
+ margin-bottom: 12px;
346
+ }
347
+
348
+ .input-group label {
349
+ display: block;
350
+ font-size: 12px;
351
+ font-weight: 500;
352
+ color: var(--text-secondary);
353
+ margin-bottom: 6px;
354
+ text-transform: uppercase;
355
+ letter-spacing: 0.5px;
356
+ }
357
+
358
+ input[type="text"],
359
+ input[type="password"] {
360
+ width: 100%;
361
+ padding: 8px 12px;
362
+ background: var(--bg-input);
363
+ border: 1px solid var(--border);
364
+ border-radius: var(--radius);
365
+ color: var(--text-primary);
366
+ font-size: 13px;
367
+ font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
368
+ transition: border-color var(--transition);
369
+ outline: none;
370
+ }
371
+
372
+ input[type="text"]:focus,
373
+ input[type="password"]:focus {
374
+ border-color: var(--accent);
375
+ box-shadow: 0 0 0 3px rgba(88,166,255,0.1);
376
+ }
377
+
378
+ /* ── Buttons ── */
379
+ .btn {
380
+ display: inline-flex;
381
+ align-items: center;
382
+ gap: 6px;
383
+ padding: 7px 14px;
384
+ border-radius: var(--radius);
385
+ font-size: 13px;
386
+ font-weight: 500;
387
+ border: 1px solid transparent;
388
+ cursor: pointer;
389
+ transition: all var(--transition);
390
+ font-family: inherit;
391
+ line-height: 1;
392
+ }
393
+
394
+ .btn-primary {
395
+ background: var(--accent-dim);
396
+ color: #fff;
397
+ border-color: var(--accent-dim);
398
+ }
399
+
400
+ .btn-primary:hover {
401
+ background: var(--accent);
402
+ border-color: var(--accent);
403
+ }
404
+
405
+ .btn-secondary {
406
+ background: transparent;
407
+ color: var(--text-secondary);
408
+ border-color: var(--border);
409
+ }
410
+
411
+ .btn-secondary:hover {
412
+ background: var(--bg-tertiary);
413
+ color: var(--text-primary);
414
+ border-color: var(--border-light);
415
+ }
416
+
417
+ .btn-danger {
418
+ background: transparent;
419
+ color: var(--red);
420
+ border-color: var(--border);
421
+ }
422
+
423
+ .btn-danger:hover {
424
+ background: rgba(248,81,73,0.1);
425
+ border-color: var(--red-dim);
426
+ }
427
+
428
+ .btn-success {
429
+ background: var(--green-dim);
430
+ color: #fff;
431
+ border-color: var(--green-dim);
432
+ }
433
+
434
+ .btn-success:hover {
435
+ background: var(--green);
436
+ border-color: var(--green);
437
+ }
438
+
439
+ .btn-sm {
440
+ padding: 5px 10px;
441
+ font-size: 12px;
442
+ }
443
+
444
+ .btn-group {
445
+ display: flex;
446
+ gap: 8px;
447
+ margin-top: 12px;
448
+ }
449
+
450
+ .btn:disabled {
451
+ opacity: 0.5;
452
+ cursor: not-allowed;
453
+ }
454
+
455
+ .btn .spinner {
456
+ display: inline-block;
457
+ width: 12px;
458
+ height: 12px;
459
+ border: 2px solid rgba(255,255,255,0.3);
460
+ border-top-color: #fff;
461
+ border-radius: 50%;
462
+ animation: spin 600ms linear infinite;
463
+ }
464
+
465
+ @keyframes spin {
466
+ to { transform: rotate(360deg); }
467
+ }
468
+
469
+ /* ── Model Tags ── */
470
+ .model-tags {
471
+ display: flex;
472
+ flex-wrap: wrap;
473
+ gap: 4px;
474
+ margin-top: 12px;
475
+ }
476
+
477
+ .model-tag {
478
+ font-size: 11px;
479
+ padding: 2px 8px;
480
+ background: var(--bg-primary);
481
+ border: 1px solid var(--border);
482
+ border-radius: 4px;
483
+ color: var(--text-secondary);
484
+ font-family: 'SF Mono', Monaco, monospace;
485
+ }
486
+
487
+ /* ══════════════════════════════════════════
488
+ ── Batting Order (Task Router)
489
+ ══════════════════════════════════════════ */
490
+
491
+ .task-section {
492
+ margin-bottom: 32px;
493
+ }
494
+
495
+ .task-header {
496
+ display: flex;
497
+ align-items: center;
498
+ gap: 10px;
499
+ margin-bottom: 14px;
500
+ padding-bottom: 10px;
501
+ border-bottom: 1px solid var(--border);
502
+ }
503
+
504
+ .task-icon {
505
+ font-size: 20px;
506
+ }
507
+
508
+ .task-header h3 {
509
+ font-size: 15px;
510
+ font-weight: 600;
511
+ }
512
+
513
+ .task-header .task-desc {
514
+ font-size: 12px;
515
+ color: var(--text-muted);
516
+ margin-left: auto;
517
+ }
518
+
519
+ /* Lineup card container */
520
+ .lineup-card {
521
+ background: var(--bg-secondary);
522
+ border: 1px solid var(--border);
523
+ border-radius: var(--radius-lg);
524
+ overflow: hidden;
525
+ }
526
+
527
+ .lineup-card-header {
528
+ display: flex;
529
+ align-items: center;
530
+ justify-content: space-between;
531
+ padding: 12px 16px;
532
+ background: rgba(245,197,66,0.04);
533
+ border-bottom: 1px solid var(--border);
534
+ font-size: 11px;
535
+ text-transform: uppercase;
536
+ letter-spacing: 1px;
537
+ color: var(--text-muted);
538
+ font-weight: 600;
539
+ }
540
+
541
+ .lineup-card-header .lineup-title {
542
+ display: flex;
543
+ align-items: center;
544
+ gap: 8px;
545
+ }
546
+
547
+ .lineup-list {
548
+ display: flex;
549
+ flex-direction: column;
550
+ min-height: 48px;
551
+ padding: 4px;
552
+ transition: background var(--transition);
553
+ }
554
+
555
+ .lineup-list.drag-over {
556
+ background: rgba(245,197,66,0.03);
557
+ }
558
+
559
+ .lineup-list .empty-state {
560
+ text-align: center;
561
+ padding: 24px 20px;
562
+ color: var(--text-muted);
563
+ font-size: 13px;
564
+ font-style: italic;
565
+ }
566
+
567
+ /* Individual lineup entry */
568
+ .lineup-entry {
569
+ display: flex;
570
+ align-items: center;
571
+ gap: 12px;
572
+ padding: 10px 16px;
573
+ border-bottom: 1px solid rgba(48,54,61,0.5);
574
+ cursor: grab;
575
+ transition: all var(--transition);
576
+ user-select: none;
577
+ position: relative;
578
+ }
579
+
580
+ .lineup-entry:last-child {
581
+ border-bottom: none;
582
+ }
583
+
584
+ .lineup-entry:hover {
585
+ background: var(--bg-card-hover);
586
+ }
587
+
588
+ .lineup-entry.dragging {
589
+ opacity: 0.4;
590
+ background: rgba(245,197,66,0.05);
591
+ }
592
+
593
+ .lineup-entry .drag-handle {
594
+ color: var(--text-muted);
595
+ cursor: grab;
596
+ font-size: 13px;
597
+ line-height: 1;
598
+ opacity: 0.5;
599
+ transition: opacity var(--transition);
600
+ }
601
+
602
+ .lineup-entry:hover .drag-handle {
603
+ opacity: 1;
604
+ }
605
+
606
+ /* Rank badge */
607
+ .rank-badge {
608
+ width: 28px;
609
+ height: 28px;
610
+ display: flex;
611
+ align-items: center;
612
+ justify-content: center;
613
+ border-radius: 50%;
614
+ font-size: 12px;
615
+ font-weight: 800;
616
+ flex-shrink: 0;
617
+ letter-spacing: -0.5px;
618
+ }
619
+
620
+ .rank-badge.rank-1 {
621
+ background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%);
622
+ color: #000;
623
+ box-shadow: 0 0 10px rgba(245,197,66,0.3);
624
+ }
625
+
626
+ .rank-badge.rank-2 {
627
+ background: linear-gradient(135deg, #c0c0c0 0%, #8a8a8a 100%);
628
+ color: #000;
629
+ }
630
+
631
+ .rank-badge.rank-3 {
632
+ background: linear-gradient(135deg, #cd7f32 0%, #8b5e3c 100%);
633
+ color: #fff;
634
+ }
635
+
636
+ .rank-badge.rank-n {
637
+ background: var(--bg-primary);
638
+ border: 1px solid var(--border);
639
+ color: var(--text-muted);
640
+ }
641
+
642
+ /* Provider pill in lineup */
643
+ .lineup-provider {
644
+ display: flex;
645
+ align-items: center;
646
+ gap: 6px;
647
+ min-width: 110px;
648
+ }
649
+
650
+ .lineup-provider .prov-dot {
651
+ width: 8px;
652
+ height: 8px;
653
+ border-radius: 50%;
654
+ flex-shrink: 0;
655
+ }
656
+
657
+ .lineup-provider .prov-name {
658
+ font-size: 12px;
659
+ color: var(--text-secondary);
660
+ font-weight: 500;
661
+ }
662
+
663
+ /* Model name in lineup */
664
+ .lineup-model {
665
+ font-size: 13px;
666
+ font-weight: 600;
667
+ font-family: 'SF Mono', Monaco, monospace;
668
+ color: var(--text-primary);
669
+ flex: 1;
670
+ }
671
+
672
+ /* Role label */
673
+ .lineup-role {
674
+ font-size: 10px;
675
+ padding: 2px 8px;
676
+ border-radius: 10px;
677
+ font-weight: 600;
678
+ letter-spacing: 0.3px;
679
+ text-transform: uppercase;
680
+ flex-shrink: 0;
681
+ }
682
+
683
+ .lineup-role.role-primary {
684
+ background: rgba(245,197,66,0.15);
685
+ color: var(--gold);
686
+ }
687
+
688
+ .lineup-role.role-fallback {
689
+ background: rgba(139,148,158,0.1);
690
+ color: var(--text-muted);
691
+ }
692
+
693
+ /* Remove button */
694
+ .lineup-remove {
695
+ background: none;
696
+ border: none;
697
+ color: var(--text-muted);
698
+ cursor: pointer;
699
+ font-size: 16px;
700
+ padding: 4px 6px;
701
+ border-radius: 4px;
702
+ transition: all var(--transition);
703
+ opacity: 0;
704
+ flex-shrink: 0;
705
+ }
706
+
707
+ .lineup-entry:hover .lineup-remove {
708
+ opacity: 1;
709
+ }
710
+
711
+ .lineup-remove:hover {
712
+ color: var(--red);
713
+ background: rgba(248,81,73,0.1);
714
+ }
715
+
716
+ /* Add model button row */
717
+ .lineup-add-btn {
718
+ padding: 8px 16px;
719
+ border-top: 1px solid rgba(48,54,61,0.5);
720
+ }
721
+
722
+ .lineup-add-btn .btn {
723
+ width: 100%;
724
+ justify-content: center;
725
+ padding: 8px 14px;
726
+ background: transparent;
727
+ border: 1px dashed var(--border);
728
+ color: var(--text-muted);
729
+ font-size: 12px;
730
+ }
731
+
732
+ .lineup-add-btn .btn:hover {
733
+ border-color: var(--gold);
734
+ color: var(--gold);
735
+ background: rgba(245,197,66,0.04);
736
+ }
737
+
738
+ /* ── Add Model Modal ── */
739
+ .modal-overlay {
740
+ position: fixed;
741
+ inset: 0;
742
+ background: rgba(0,0,0,0.6);
743
+ backdrop-filter: blur(4px);
744
+ display: flex;
745
+ align-items: center;
746
+ justify-content: center;
747
+ z-index: 100;
748
+ animation: fadeIn 150ms ease;
749
+ }
750
+
751
+ .modal {
752
+ background: var(--bg-secondary);
753
+ border: 1px solid var(--border);
754
+ border-radius: var(--radius-lg);
755
+ padding: 0;
756
+ width: 480px;
757
+ max-width: 90vw;
758
+ max-height: 80vh;
759
+ box-shadow: var(--shadow-lg);
760
+ overflow: hidden;
761
+ display: flex;
762
+ flex-direction: column;
763
+ }
764
+
765
+ .modal-header {
766
+ padding: 20px 24px 16px;
767
+ border-bottom: 1px solid var(--border);
768
+ }
769
+
770
+ .modal-header h2 {
771
+ font-size: 16px;
772
+ font-weight: 600;
773
+ margin-bottom: 4px;
774
+ }
775
+
776
+ .modal-header p {
777
+ font-size: 12px;
778
+ color: var(--text-muted);
779
+ }
780
+
781
+ .modal-body {
782
+ padding: 16px 24px;
783
+ overflow-y: auto;
784
+ flex: 1;
785
+ }
786
+
787
+ .modal-footer {
788
+ padding: 12px 24px;
789
+ border-top: 1px solid var(--border);
790
+ display: flex;
791
+ justify-content: flex-end;
792
+ gap: 8px;
793
+ }
794
+
795
+ /* Provider section in modal */
796
+ .modal-provider-section {
797
+ margin-bottom: 16px;
798
+ }
799
+
800
+ .modal-provider-header {
801
+ display: flex;
802
+ align-items: center;
803
+ gap: 8px;
804
+ padding: 8px 0 6px;
805
+ font-size: 12px;
806
+ font-weight: 600;
807
+ color: var(--text-secondary);
808
+ text-transform: uppercase;
809
+ letter-spacing: 0.5px;
810
+ }
811
+
812
+ .modal-provider-header .prov-dot {
813
+ width: 8px;
814
+ height: 8px;
815
+ border-radius: 50%;
816
+ }
817
+
818
+ .modal-model-list {
819
+ display: flex;
820
+ flex-direction: column;
821
+ gap: 2px;
822
+ }
823
+
824
+ .modal-model-item {
825
+ display: flex;
826
+ align-items: center;
827
+ gap: 10px;
828
+ padding: 8px 12px;
829
+ border-radius: var(--radius);
830
+ cursor: pointer;
831
+ transition: all var(--transition);
832
+ font-size: 13px;
833
+ font-family: 'SF Mono', Monaco, monospace;
834
+ color: var(--text-primary);
835
+ }
836
+
837
+ .modal-model-item:hover {
838
+ background: rgba(245,197,66,0.06);
839
+ color: var(--gold);
840
+ }
841
+
842
+ .modal-model-item.already-added {
843
+ opacity: 0.35;
844
+ cursor: default;
845
+ pointer-events: none;
846
+ }
847
+
848
+ .modal-model-item .model-check {
849
+ color: var(--green);
850
+ font-size: 14px;
851
+ }
852
+
853
+ /* ── Profiles ── */
854
+ .profile-grid {
855
+ display: grid;
856
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
857
+ gap: 16px;
858
+ }
859
+
860
+ .profile-card {
861
+ background: var(--bg-card);
862
+ border: 1px solid var(--border);
863
+ border-radius: var(--radius-lg);
864
+ padding: 24px;
865
+ transition: all var(--transition);
866
+ cursor: pointer;
867
+ position: relative;
868
+ }
869
+
870
+ .profile-card:hover {
871
+ border-color: var(--border-light);
872
+ background: var(--bg-card-hover);
873
+ transform: translateY(-2px);
874
+ box-shadow: var(--shadow-lg);
875
+ }
876
+
877
+ .profile-card.active {
878
+ border-color: var(--gold);
879
+ box-shadow: 0 0 0 1px var(--gold), var(--shadow-lg);
880
+ }
881
+
882
+ .profile-card.active::after {
883
+ content: 'ACTIVE';
884
+ position: absolute;
885
+ top: 12px;
886
+ right: 12px;
887
+ font-size: 10px;
888
+ font-weight: 700;
889
+ letter-spacing: 1px;
890
+ color: var(--gold);
891
+ background: rgba(245,197,66,0.1);
892
+ padding: 3px 8px;
893
+ border-radius: 4px;
894
+ }
895
+
896
+ .profile-icon {
897
+ font-size: 32px;
898
+ margin-bottom: 12px;
899
+ }
900
+
901
+ .profile-card h3 {
902
+ font-size: 16px;
903
+ font-weight: 600;
904
+ margin-bottom: 6px;
905
+ }
906
+
907
+ .profile-card p {
908
+ font-size: 13px;
909
+ color: var(--text-secondary);
910
+ margin-bottom: 16px;
911
+ line-height: 1.5;
912
+ }
913
+
914
+ .profile-models {
915
+ display: flex;
916
+ flex-wrap: wrap;
917
+ gap: 4px;
918
+ }
919
+
920
+ .profile-models .model-tag {
921
+ font-size: 10px;
922
+ }
923
+
924
+ /* ── Toast Notifications ── */
925
+ #toast-container {
926
+ position: fixed;
927
+ bottom: 24px;
928
+ right: 24px;
929
+ display: flex;
930
+ flex-direction: column-reverse;
931
+ gap: 8px;
932
+ z-index: 1000;
933
+ }
934
+
935
+ .toast {
936
+ padding: 12px 20px;
937
+ background: var(--bg-tertiary);
938
+ border: 1px solid var(--border);
939
+ border-radius: var(--radius);
940
+ color: var(--text-primary);
941
+ font-size: 13px;
942
+ box-shadow: var(--shadow-lg);
943
+ animation: toastIn 300ms ease;
944
+ max-width: 360px;
945
+ }
946
+
947
+ .toast.success { border-left: 3px solid var(--green); }
948
+ .toast.error { border-left: 3px solid var(--red); }
949
+ .toast.info { border-left: 3px solid var(--accent); }
950
+
951
+ @keyframes toastIn {
952
+ from { opacity: 0; transform: translateY(10px) scale(0.95); }
953
+ to { opacity: 1; transform: translateY(0) scale(1); }
954
+ }
955
+
956
+ @keyframes toastOut {
957
+ to { opacity: 0; transform: translateY(10px) scale(0.95); }
958
+ }
959
+
960
+ /* ── Sync indicator ── */
961
+ .sync-badge {
962
+ display: inline-flex;
963
+ align-items: center;
964
+ gap: 4px;
965
+ font-size: 10px;
966
+ color: var(--green);
967
+ padding: 2px 8px;
968
+ background: rgba(63,185,80,0.1);
969
+ border-radius: 10px;
970
+ font-weight: 500;
971
+ }
972
+
973
+ /* ── Scrollbar ── */
974
+ ::-webkit-scrollbar { width: 8px; }
975
+ ::-webkit-scrollbar-track { background: transparent; }
976
+ ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
977
+ ::-webkit-scrollbar-thumb:hover { background: var(--border-light); }
978
+
979
+ /* ── Provider key visibility toggle ── */
980
+ .input-wrapper {
981
+ position: relative;
982
+ }
983
+
984
+ .input-wrapper .toggle-vis {
985
+ position: absolute;
986
+ right: 8px;
987
+ top: 50%;
988
+ transform: translateY(-50%);
989
+ background: none;
990
+ border: none;
991
+ color: var(--text-muted);
992
+ cursor: pointer;
993
+ font-size: 14px;
994
+ padding: 4px;
995
+ }
996
+
997
+ .input-wrapper .toggle-vis:hover {
998
+ color: var(--text-secondary);
999
+ }
1000
+
1001
+ /* ══════════════════════════════════════════
1002
+ ── Support Page
1003
+ ══════════════════════════════════════════ */
1004
+
1005
+ .support-links {
1006
+ display: grid;
1007
+ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
1008
+ gap: 12px;
1009
+ margin-bottom: 36px;
1010
+ }
1011
+
1012
+ .support-link-card {
1013
+ display: flex;
1014
+ align-items: center;
1015
+ gap: 14px;
1016
+ padding: 18px 20px;
1017
+ background: var(--bg-card);
1018
+ border: 1px solid var(--border);
1019
+ border-radius: var(--radius-lg);
1020
+ text-decoration: none;
1021
+ color: var(--text-primary);
1022
+ transition: all var(--transition);
1023
+ }
1024
+
1025
+ .support-link-card:hover {
1026
+ border-color: var(--gold);
1027
+ background: var(--bg-card-hover);
1028
+ transform: translateY(-2px);
1029
+ box-shadow: var(--shadow-lg);
1030
+ }
1031
+
1032
+ .support-link-icon {
1033
+ font-size: 28px;
1034
+ flex-shrink: 0;
1035
+ width: 40px;
1036
+ text-align: center;
1037
+ }
1038
+
1039
+ .support-link-card h3 {
1040
+ font-size: 14px;
1041
+ font-weight: 600;
1042
+ margin-bottom: 2px;
1043
+ }
1044
+
1045
+ .support-link-card p {
1046
+ font-size: 12px;
1047
+ color: var(--text-secondary);
1048
+ }
1049
+
1050
+ .provider-getstarted-section {
1051
+ margin-bottom: 36px;
1052
+ }
1053
+
1054
+ .provider-getstarted-section h2 {
1055
+ font-size: 18px;
1056
+ font-weight: 700;
1057
+ margin-bottom: 4px;
1058
+ }
1059
+
1060
+ .provider-getstarted-section > p {
1061
+ font-size: 13px;
1062
+ color: var(--text-secondary);
1063
+ margin-bottom: 16px;
1064
+ }
1065
+
1066
+ .provider-getstarted-grid {
1067
+ display: grid;
1068
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
1069
+ gap: 10px;
1070
+ }
1071
+
1072
+ .provider-signup-card {
1073
+ display: flex;
1074
+ align-items: center;
1075
+ gap: 12px;
1076
+ padding: 14px 16px;
1077
+ background: var(--bg-card);
1078
+ border: 1px solid var(--border);
1079
+ border-radius: var(--radius);
1080
+ text-decoration: none;
1081
+ color: var(--text-primary);
1082
+ transition: all var(--transition);
1083
+ }
1084
+
1085
+ .provider-signup-card:hover {
1086
+ border-color: var(--border-light);
1087
+ background: var(--bg-card-hover);
1088
+ }
1089
+
1090
+ .provider-signup-card .prov-dot {
1091
+ width: 10px;
1092
+ height: 10px;
1093
+ border-radius: 50%;
1094
+ flex-shrink: 0;
1095
+ }
1096
+
1097
+ .provider-signup-card h4 {
1098
+ font-size: 13px;
1099
+ font-weight: 600;
1100
+ margin-bottom: 1px;
1101
+ }
1102
+
1103
+ .provider-signup-card p {
1104
+ font-size: 11px;
1105
+ color: var(--text-muted);
1106
+ }
1107
+
1108
+ .provider-signup-card .signup-arrow {
1109
+ margin-left: auto;
1110
+ color: var(--text-muted);
1111
+ font-size: 16px;
1112
+ transition: transform var(--transition);
1113
+ }
1114
+
1115
+ .provider-signup-card:hover .signup-arrow {
1116
+ transform: translateX(3px);
1117
+ color: var(--text-secondary);
1118
+ }
1119
+
1120
+ .support-footer {
1121
+ margin-top: 40px;
1122
+ padding-top: 20px;
1123
+ border-top: 1px solid var(--border);
1124
+ font-size: 13px;
1125
+ color: var(--text-muted);
1126
+ text-align: center;
1127
+ }
1128
+
1129
+ .support-footer a {
1130
+ color: var(--gold);
1131
+ text-decoration: none;
1132
+ font-weight: 500;
1133
+ }
1134
+
1135
+ .support-footer a:hover {
1136
+ text-decoration: underline;
1137
+ }
1138
+
1139
+ /* ── Responsive ── */
1140
+ @media (max-width: 768px) {
1141
+ .sidebar {
1142
+ width: 60px;
1143
+ min-width: 60px;
1144
+ }
1145
+ .brand-text, .brand-version, .nav-label, .sidebar-footer span {
1146
+ display: none;
1147
+ }
1148
+ .sidebar-brand { justify-content: center; padding: 16px 8px; }
1149
+ .nav-item { justify-content: center; padding: 10px; }
1150
+ .main { padding: 20px; }
1151
+ .card-grid { grid-template-columns: 1fr; }
1152
+ }