@proveanything/smartlinks-utils-ui 0.9.0 → 0.9.2

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,3646 @@
1
+ /* src/styles.css */
2
+ .sr-only {
3
+ position: absolute;
4
+ width: 1px;
5
+ height: 1px;
6
+ padding: 0;
7
+ margin: -1px;
8
+ overflow: hidden;
9
+ clip: rect(0, 0, 0, 0);
10
+ white-space: nowrap;
11
+ border-width: 0;
12
+ }
13
+ .pointer-events-none {
14
+ pointer-events: none;
15
+ }
16
+ .visible {
17
+ visibility: visible;
18
+ }
19
+ .invisible {
20
+ visibility: hidden;
21
+ }
22
+ .collapse {
23
+ visibility: collapse;
24
+ }
25
+ .fixed {
26
+ position: fixed;
27
+ }
28
+ .absolute {
29
+ position: absolute;
30
+ }
31
+ .relative {
32
+ position: relative;
33
+ }
34
+ .sticky {
35
+ position: sticky;
36
+ }
37
+ .inset-0 {
38
+ inset: 0px;
39
+ }
40
+ .inset-x-0 {
41
+ left: 0px;
42
+ right: 0px;
43
+ }
44
+ .bottom-0 {
45
+ bottom: 0px;
46
+ }
47
+ .left-0 {
48
+ left: 0px;
49
+ }
50
+ .left-1\.5 {
51
+ left: 0.375rem;
52
+ }
53
+ .left-2 {
54
+ left: 0.5rem;
55
+ }
56
+ .left-2\.5 {
57
+ left: 0.625rem;
58
+ }
59
+ .left-3 {
60
+ left: 0.75rem;
61
+ }
62
+ .right-0 {
63
+ right: 0px;
64
+ }
65
+ .right-1\.5 {
66
+ right: 0.375rem;
67
+ }
68
+ .right-2 {
69
+ right: 0.5rem;
70
+ }
71
+ .right-3 {
72
+ right: 0.75rem;
73
+ }
74
+ .top-0 {
75
+ top: 0px;
76
+ }
77
+ .top-0\.5 {
78
+ top: 0.125rem;
79
+ }
80
+ .top-1\.5 {
81
+ top: 0.375rem;
82
+ }
83
+ .top-1\/2 {
84
+ top: 50%;
85
+ }
86
+ .top-2 {
87
+ top: 0.5rem;
88
+ }
89
+ .z-10 {
90
+ z-index: 10;
91
+ }
92
+ .z-20 {
93
+ z-index: 20;
94
+ }
95
+ .z-40 {
96
+ z-index: 40;
97
+ }
98
+ .z-50 {
99
+ z-index: 50;
100
+ }
101
+ .col-span-2 {
102
+ grid-column: span 2 / span 2;
103
+ }
104
+ .m-0 {
105
+ margin: 0px;
106
+ }
107
+ .-mx-1 {
108
+ margin-left: -0.25rem;
109
+ margin-right: -0.25rem;
110
+ }
111
+ .mx-3 {
112
+ margin-left: 0.75rem;
113
+ margin-right: 0.75rem;
114
+ }
115
+ .mx-4 {
116
+ margin-left: 1rem;
117
+ margin-right: 1rem;
118
+ }
119
+ .mx-auto {
120
+ margin-left: auto;
121
+ margin-right: auto;
122
+ }
123
+ .-mb-px {
124
+ margin-bottom: -1px;
125
+ }
126
+ .mb-0\.5 {
127
+ margin-bottom: 0.125rem;
128
+ }
129
+ .mb-1 {
130
+ margin-bottom: 0.25rem;
131
+ }
132
+ .mb-2 {
133
+ margin-bottom: 0.5rem;
134
+ }
135
+ .mb-3 {
136
+ margin-bottom: 0.75rem;
137
+ }
138
+ .mb-4 {
139
+ margin-bottom: 1rem;
140
+ }
141
+ .ml-1 {
142
+ margin-left: 0.25rem;
143
+ }
144
+ .ml-1\.5 {
145
+ margin-left: 0.375rem;
146
+ }
147
+ .ml-auto {
148
+ margin-left: auto;
149
+ }
150
+ .mt-0\.5 {
151
+ margin-top: 0.125rem;
152
+ }
153
+ .mt-1 {
154
+ margin-top: 0.25rem;
155
+ }
156
+ .mt-1\.5 {
157
+ margin-top: 0.375rem;
158
+ }
159
+ .mt-2 {
160
+ margin-top: 0.5rem;
161
+ }
162
+ .mt-4 {
163
+ margin-top: 1rem;
164
+ }
165
+ .block {
166
+ display: block;
167
+ }
168
+ .inline-block {
169
+ display: inline-block;
170
+ }
171
+ .inline {
172
+ display: inline;
173
+ }
174
+ .flex {
175
+ display: flex;
176
+ }
177
+ .inline-flex {
178
+ display: inline-flex;
179
+ }
180
+ .table {
181
+ display: table;
182
+ }
183
+ .grid {
184
+ display: grid;
185
+ }
186
+ .contents {
187
+ display: contents;
188
+ }
189
+ .hidden {
190
+ display: none;
191
+ }
192
+ .aspect-square {
193
+ aspect-ratio: 1 / 1;
194
+ }
195
+ .aspect-video {
196
+ aspect-ratio: 16 / 9;
197
+ }
198
+ .h-1\.5 {
199
+ height: 0.375rem;
200
+ }
201
+ .h-10 {
202
+ height: 2.5rem;
203
+ }
204
+ .h-11 {
205
+ height: 2.75rem;
206
+ }
207
+ .h-16 {
208
+ height: 4rem;
209
+ }
210
+ .h-2 {
211
+ height: 0.5rem;
212
+ }
213
+ .h-2\.5 {
214
+ height: 0.625rem;
215
+ }
216
+ .h-3 {
217
+ height: 0.75rem;
218
+ }
219
+ .h-3\.5 {
220
+ height: 0.875rem;
221
+ }
222
+ .h-4 {
223
+ height: 1rem;
224
+ }
225
+ .h-5 {
226
+ height: 1.25rem;
227
+ }
228
+ .h-6 {
229
+ height: 1.5rem;
230
+ }
231
+ .h-7 {
232
+ height: 1.75rem;
233
+ }
234
+ .h-8 {
235
+ height: 2rem;
236
+ }
237
+ .h-9 {
238
+ height: 2.25rem;
239
+ }
240
+ .h-full {
241
+ height: 100%;
242
+ }
243
+ .max-h-32 {
244
+ max-height: 8rem;
245
+ }
246
+ .max-h-80 {
247
+ max-height: 20rem;
248
+ }
249
+ .max-h-\[300px\] {
250
+ max-height: 300px;
251
+ }
252
+ .max-h-\[400px\] {
253
+ max-height: 400px;
254
+ }
255
+ .max-h-\[80vh\] {
256
+ max-height: 80vh;
257
+ }
258
+ .max-h-\[85vh\] {
259
+ max-height: 85vh;
260
+ }
261
+ .min-h-0 {
262
+ min-height: 0px;
263
+ }
264
+ .w-1\.5 {
265
+ width: 0.375rem;
266
+ }
267
+ .w-10 {
268
+ width: 2.5rem;
269
+ }
270
+ .w-16 {
271
+ width: 4rem;
272
+ }
273
+ .w-2 {
274
+ width: 0.5rem;
275
+ }
276
+ .w-2\.5 {
277
+ width: 0.625rem;
278
+ }
279
+ .w-3 {
280
+ width: 0.75rem;
281
+ }
282
+ .w-3\.5 {
283
+ width: 0.875rem;
284
+ }
285
+ .w-36 {
286
+ width: 9rem;
287
+ }
288
+ .w-4 {
289
+ width: 1rem;
290
+ }
291
+ .w-5 {
292
+ width: 1.25rem;
293
+ }
294
+ .w-6 {
295
+ width: 1.5rem;
296
+ }
297
+ .w-7 {
298
+ width: 1.75rem;
299
+ }
300
+ .w-8 {
301
+ width: 2rem;
302
+ }
303
+ .w-9 {
304
+ width: 2.25rem;
305
+ }
306
+ .w-full {
307
+ width: 100%;
308
+ }
309
+ .min-w-0 {
310
+ min-width: 0px;
311
+ }
312
+ .min-w-\[12rem\] {
313
+ min-width: 12rem;
314
+ }
315
+ .min-w-\[200px\] {
316
+ min-width: 200px;
317
+ }
318
+ .max-w-2xl {
319
+ max-width: 42rem;
320
+ }
321
+ .max-w-4xl {
322
+ max-width: 56rem;
323
+ }
324
+ .max-w-\[12rem\] {
325
+ max-width: 12rem;
326
+ }
327
+ .max-w-\[14rem\] {
328
+ max-width: 14rem;
329
+ }
330
+ .max-w-\[160px\] {
331
+ max-width: 160px;
332
+ }
333
+ .max-w-\[200px\] {
334
+ max-width: 200px;
335
+ }
336
+ .max-w-full {
337
+ max-width: 100%;
338
+ }
339
+ .max-w-lg {
340
+ max-width: 32rem;
341
+ }
342
+ .max-w-sm {
343
+ max-width: 24rem;
344
+ }
345
+ .max-w-xl {
346
+ max-width: 36rem;
347
+ }
348
+ .max-w-xs {
349
+ max-width: 20rem;
350
+ }
351
+ .flex-1 {
352
+ flex: 1 1 0%;
353
+ }
354
+ .flex-shrink-0 {
355
+ flex-shrink: 0;
356
+ }
357
+ .shrink-0 {
358
+ flex-shrink: 0;
359
+ }
360
+ .grow {
361
+ flex-grow: 1;
362
+ }
363
+ .-translate-y-1\/2 {
364
+ --tw-translate-y: -50%;
365
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
366
+ }
367
+ .translate-x-0\.5 {
368
+ --tw-translate-x: 0.125rem;
369
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
370
+ }
371
+ .translate-x-4 {
372
+ --tw-translate-x: 1rem;
373
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
374
+ }
375
+ .scale-110 {
376
+ --tw-scale-x: 1.1;
377
+ --tw-scale-y: 1.1;
378
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
379
+ }
380
+ .transform {
381
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
382
+ }
383
+ @keyframes pulse {
384
+ 50% {
385
+ opacity: .5;
386
+ }
387
+ }
388
+ .animate-pulse {
389
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
390
+ }
391
+ @keyframes spin {
392
+ to {
393
+ transform: rotate(360deg);
394
+ }
395
+ }
396
+ .animate-spin {
397
+ animation: spin 1s linear infinite;
398
+ }
399
+ .cursor-not-allowed {
400
+ cursor: not-allowed;
401
+ }
402
+ .cursor-pointer {
403
+ cursor: pointer;
404
+ }
405
+ .select-none {
406
+ -webkit-user-select: none;
407
+ -moz-user-select: none;
408
+ user-select: none;
409
+ }
410
+ .resize-none {
411
+ resize: none;
412
+ }
413
+ .appearance-none {
414
+ -webkit-appearance: none;
415
+ -moz-appearance: none;
416
+ appearance: none;
417
+ }
418
+ .grid-cols-2 {
419
+ grid-template-columns: repeat(2, minmax(0, 1fr));
420
+ }
421
+ .grid-cols-3 {
422
+ grid-template-columns: repeat(3, minmax(0, 1fr));
423
+ }
424
+ .grid-cols-8 {
425
+ grid-template-columns: repeat(8, minmax(0, 1fr));
426
+ }
427
+ .flex-col {
428
+ flex-direction: column;
429
+ }
430
+ .flex-wrap {
431
+ flex-wrap: wrap;
432
+ }
433
+ .items-start {
434
+ align-items: flex-start;
435
+ }
436
+ .items-end {
437
+ align-items: flex-end;
438
+ }
439
+ .items-center {
440
+ align-items: center;
441
+ }
442
+ .justify-end {
443
+ justify-content: flex-end;
444
+ }
445
+ .justify-center {
446
+ justify-content: center;
447
+ }
448
+ .justify-between {
449
+ justify-content: space-between;
450
+ }
451
+ .gap-0\.5 {
452
+ gap: 0.125rem;
453
+ }
454
+ .gap-1 {
455
+ gap: 0.25rem;
456
+ }
457
+ .gap-1\.5 {
458
+ gap: 0.375rem;
459
+ }
460
+ .gap-2 {
461
+ gap: 0.5rem;
462
+ }
463
+ .gap-3 {
464
+ gap: 0.75rem;
465
+ }
466
+ .space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
467
+ --tw-space-y-reverse: 0;
468
+ margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
469
+ margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
470
+ }
471
+ .space-y-1 > :not([hidden]) ~ :not([hidden]) {
472
+ --tw-space-y-reverse: 0;
473
+ margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
474
+ margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
475
+ }
476
+ .space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
477
+ --tw-space-y-reverse: 0;
478
+ margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
479
+ margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
480
+ }
481
+ .space-y-2 > :not([hidden]) ~ :not([hidden]) {
482
+ --tw-space-y-reverse: 0;
483
+ margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
484
+ margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
485
+ }
486
+ .space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
487
+ --tw-space-y-reverse: 0;
488
+ margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
489
+ margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
490
+ }
491
+ .space-y-3 > :not([hidden]) ~ :not([hidden]) {
492
+ --tw-space-y-reverse: 0;
493
+ margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
494
+ margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
495
+ }
496
+ .space-y-4 > :not([hidden]) ~ :not([hidden]) {
497
+ --tw-space-y-reverse: 0;
498
+ margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
499
+ margin-bottom: calc(1rem * var(--tw-space-y-reverse));
500
+ }
501
+ .divide-y > :not([hidden]) ~ :not([hidden]) {
502
+ --tw-divide-y-reverse: 0;
503
+ border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
504
+ border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
505
+ }
506
+ .self-start {
507
+ align-self: flex-start;
508
+ }
509
+ .overflow-auto {
510
+ overflow: auto;
511
+ }
512
+ .overflow-hidden {
513
+ overflow: hidden;
514
+ }
515
+ .overflow-y-auto {
516
+ overflow-y: auto;
517
+ }
518
+ .truncate {
519
+ overflow: hidden;
520
+ text-overflow: ellipsis;
521
+ white-space: nowrap;
522
+ }
523
+ .rounded {
524
+ border-radius: 0.25rem;
525
+ }
526
+ .rounded-full {
527
+ border-radius: 9999px;
528
+ }
529
+ .rounded-lg {
530
+ border-radius: var(--radius);
531
+ }
532
+ .rounded-md {
533
+ border-radius: calc(var(--radius) - 2px);
534
+ }
535
+ .rounded-xl {
536
+ border-radius: 0.75rem;
537
+ }
538
+ .border {
539
+ border-width: 1px;
540
+ }
541
+ .border-2 {
542
+ border-width: 2px;
543
+ }
544
+ .border-b {
545
+ border-bottom-width: 1px;
546
+ }
547
+ .border-b-2 {
548
+ border-bottom-width: 2px;
549
+ }
550
+ .border-r {
551
+ border-right-width: 1px;
552
+ }
553
+ .border-t {
554
+ border-top-width: 1px;
555
+ }
556
+ .border-solid {
557
+ border-style: solid;
558
+ }
559
+ .border-dashed {
560
+ border-style: dashed;
561
+ }
562
+ .border-blue-600 {
563
+ --tw-border-opacity: 1;
564
+ border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
565
+ }
566
+ .border-border {
567
+ border-color: hsl(var(--border));
568
+ }
569
+ .border-destructive {
570
+ border-color: hsl(var(--destructive));
571
+ }
572
+ .border-destructive\/50 {
573
+ border-color: hsl(var(--destructive) / 0.5);
574
+ }
575
+ .border-gray-100 {
576
+ --tw-border-opacity: 1;
577
+ border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
578
+ }
579
+ .border-gray-200 {
580
+ --tw-border-opacity: 1;
581
+ border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
582
+ }
583
+ .border-gray-300 {
584
+ --tw-border-opacity: 1;
585
+ border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
586
+ }
587
+ .border-primary {
588
+ border-color: hsl(var(--primary));
589
+ }
590
+ .border-primary\/50 {
591
+ border-color: hsl(var(--primary) / 0.5);
592
+ }
593
+ .border-transparent {
594
+ border-color: transparent;
595
+ }
596
+ .bg-\[hsl\(var\(--sl-control-active-bg\)\)\] {
597
+ background-color: hsl(var(--sl-control-active-bg));
598
+ }
599
+ .bg-accent {
600
+ background-color: hsl(var(--accent));
601
+ }
602
+ .bg-amber-50 {
603
+ --tw-bg-opacity: 1;
604
+ background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
605
+ }
606
+ .bg-background {
607
+ background-color: hsl(var(--background));
608
+ }
609
+ .bg-background\/80 {
610
+ background-color: hsl(var(--background) / 0.8);
611
+ }
612
+ .bg-black\/50 {
613
+ background-color: rgb(0 0 0 / 0.5);
614
+ }
615
+ .bg-blue-100 {
616
+ --tw-bg-opacity: 1;
617
+ background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
618
+ }
619
+ .bg-blue-50 {
620
+ --tw-bg-opacity: 1;
621
+ background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
622
+ }
623
+ .bg-blue-500 {
624
+ --tw-bg-opacity: 1;
625
+ background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
626
+ }
627
+ .bg-blue-600 {
628
+ --tw-bg-opacity: 1;
629
+ background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
630
+ }
631
+ .bg-card {
632
+ background-color: hsl(var(--card));
633
+ }
634
+ .bg-destructive {
635
+ background-color: hsl(var(--destructive));
636
+ }
637
+ .bg-destructive\/10 {
638
+ background-color: hsl(var(--destructive) / 0.1);
639
+ }
640
+ .bg-destructive\/5 {
641
+ background-color: hsl(var(--destructive) / 0.05);
642
+ }
643
+ .bg-destructive\/80 {
644
+ background-color: hsl(var(--destructive) / 0.8);
645
+ }
646
+ .bg-emerald-50 {
647
+ --tw-bg-opacity: 1;
648
+ background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
649
+ }
650
+ .bg-foreground {
651
+ background-color: hsl(var(--foreground));
652
+ }
653
+ .bg-foreground\/60 {
654
+ background-color: hsl(var(--foreground) / 0.6);
655
+ }
656
+ .bg-gray-100 {
657
+ --tw-bg-opacity: 1;
658
+ background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
659
+ }
660
+ .bg-gray-300 {
661
+ --tw-bg-opacity: 1;
662
+ background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
663
+ }
664
+ .bg-gray-50 {
665
+ --tw-bg-opacity: 1;
666
+ background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
667
+ }
668
+ .bg-muted {
669
+ background-color: hsl(var(--muted));
670
+ }
671
+ .bg-muted\/20 {
672
+ background-color: hsl(var(--muted) / 0.2);
673
+ }
674
+ .bg-muted\/30 {
675
+ background-color: hsl(var(--muted) / 0.3);
676
+ }
677
+ .bg-primary {
678
+ background-color: hsl(var(--primary));
679
+ }
680
+ .bg-primary\/10 {
681
+ background-color: hsl(var(--primary) / 0.1);
682
+ }
683
+ .bg-primary\/5 {
684
+ background-color: hsl(var(--primary) / 0.05);
685
+ }
686
+ .bg-red-50 {
687
+ --tw-bg-opacity: 1;
688
+ background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
689
+ }
690
+ .bg-transparent {
691
+ background-color: transparent;
692
+ }
693
+ .bg-white {
694
+ --tw-bg-opacity: 1;
695
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
696
+ }
697
+ .fill-current {
698
+ fill: currentColor;
699
+ }
700
+ .object-contain {
701
+ -o-object-fit: contain;
702
+ object-fit: contain;
703
+ }
704
+ .object-cover {
705
+ -o-object-fit: cover;
706
+ object-fit: cover;
707
+ }
708
+ .p-0\.5 {
709
+ padding: 0.125rem;
710
+ }
711
+ .p-1 {
712
+ padding: 0.25rem;
713
+ }
714
+ .p-1\.5 {
715
+ padding: 0.375rem;
716
+ }
717
+ .p-2 {
718
+ padding: 0.5rem;
719
+ }
720
+ .p-2\.5 {
721
+ padding: 0.625rem;
722
+ }
723
+ .p-3 {
724
+ padding: 0.75rem;
725
+ }
726
+ .p-4 {
727
+ padding: 1rem;
728
+ }
729
+ .p-6 {
730
+ padding: 1.5rem;
731
+ }
732
+ .px-1 {
733
+ padding-left: 0.25rem;
734
+ padding-right: 0.25rem;
735
+ }
736
+ .px-1\.5 {
737
+ padding-left: 0.375rem;
738
+ padding-right: 0.375rem;
739
+ }
740
+ .px-2 {
741
+ padding-left: 0.5rem;
742
+ padding-right: 0.5rem;
743
+ }
744
+ .px-2\.5 {
745
+ padding-left: 0.625rem;
746
+ padding-right: 0.625rem;
747
+ }
748
+ .px-3 {
749
+ padding-left: 0.75rem;
750
+ padding-right: 0.75rem;
751
+ }
752
+ .px-4 {
753
+ padding-left: 1rem;
754
+ padding-right: 1rem;
755
+ }
756
+ .px-5 {
757
+ padding-left: 1.25rem;
758
+ padding-right: 1.25rem;
759
+ }
760
+ .px-6 {
761
+ padding-left: 1.5rem;
762
+ padding-right: 1.5rem;
763
+ }
764
+ .py-0 {
765
+ padding-top: 0px;
766
+ padding-bottom: 0px;
767
+ }
768
+ .py-0\.5 {
769
+ padding-top: 0.125rem;
770
+ padding-bottom: 0.125rem;
771
+ }
772
+ .py-1 {
773
+ padding-top: 0.25rem;
774
+ padding-bottom: 0.25rem;
775
+ }
776
+ .py-1\.5 {
777
+ padding-top: 0.375rem;
778
+ padding-bottom: 0.375rem;
779
+ }
780
+ .py-10 {
781
+ padding-top: 2.5rem;
782
+ padding-bottom: 2.5rem;
783
+ }
784
+ .py-12 {
785
+ padding-top: 3rem;
786
+ padding-bottom: 3rem;
787
+ }
788
+ .py-2 {
789
+ padding-top: 0.5rem;
790
+ padding-bottom: 0.5rem;
791
+ }
792
+ .py-2\.5 {
793
+ padding-top: 0.625rem;
794
+ padding-bottom: 0.625rem;
795
+ }
796
+ .py-3 {
797
+ padding-top: 0.75rem;
798
+ padding-bottom: 0.75rem;
799
+ }
800
+ .py-4 {
801
+ padding-top: 1rem;
802
+ padding-bottom: 1rem;
803
+ }
804
+ .pb-1 {
805
+ padding-bottom: 0.25rem;
806
+ }
807
+ .pb-2 {
808
+ padding-bottom: 0.5rem;
809
+ }
810
+ .pb-3 {
811
+ padding-bottom: 0.75rem;
812
+ }
813
+ .pb-4 {
814
+ padding-bottom: 1rem;
815
+ }
816
+ .pl-1 {
817
+ padding-left: 0.25rem;
818
+ }
819
+ .pl-7 {
820
+ padding-left: 1.75rem;
821
+ }
822
+ .pl-8 {
823
+ padding-left: 2rem;
824
+ }
825
+ .pl-9 {
826
+ padding-left: 2.25rem;
827
+ }
828
+ .pr-2 {
829
+ padding-right: 0.5rem;
830
+ }
831
+ .pr-3 {
832
+ padding-right: 0.75rem;
833
+ }
834
+ .pr-5 {
835
+ padding-right: 1.25rem;
836
+ }
837
+ .pr-9 {
838
+ padding-right: 2.25rem;
839
+ }
840
+ .pt-1 {
841
+ padding-top: 0.25rem;
842
+ }
843
+ .pt-2 {
844
+ padding-top: 0.5rem;
845
+ }
846
+ .pt-3 {
847
+ padding-top: 0.75rem;
848
+ }
849
+ .pt-4 {
850
+ padding-top: 1rem;
851
+ }
852
+ .text-left {
853
+ text-align: left;
854
+ }
855
+ .text-center {
856
+ text-align: center;
857
+ }
858
+ .font-mono {
859
+ font-family:
860
+ ui-monospace,
861
+ SFMono-Regular,
862
+ Menlo,
863
+ Monaco,
864
+ Consolas,
865
+ "Liberation Mono",
866
+ "Courier New",
867
+ monospace;
868
+ }
869
+ .text-2xl {
870
+ font-size: 1.5rem;
871
+ line-height: 2rem;
872
+ }
873
+ .text-\[10px\] {
874
+ font-size: 10px;
875
+ }
876
+ .text-\[11px\] {
877
+ font-size: 11px;
878
+ }
879
+ .text-\[9px\] {
880
+ font-size: 9px;
881
+ }
882
+ .text-base {
883
+ font-size: 1rem;
884
+ line-height: 1.5rem;
885
+ }
886
+ .text-sm {
887
+ font-size: 0.875rem;
888
+ line-height: 1.25rem;
889
+ }
890
+ .text-xs {
891
+ font-size: 0.75rem;
892
+ line-height: 1rem;
893
+ }
894
+ .font-bold {
895
+ font-weight: 700;
896
+ }
897
+ .font-medium {
898
+ font-weight: 500;
899
+ }
900
+ .font-semibold {
901
+ font-weight: 600;
902
+ }
903
+ .uppercase {
904
+ text-transform: uppercase;
905
+ }
906
+ .capitalize {
907
+ text-transform: capitalize;
908
+ }
909
+ .\!italic {
910
+ font-style: italic !important;
911
+ }
912
+ .italic {
913
+ font-style: italic;
914
+ }
915
+ .tracking-wide {
916
+ letter-spacing: 0.025em;
917
+ }
918
+ .tracking-wider {
919
+ letter-spacing: 0.05em;
920
+ }
921
+ .text-\[hsl\(var\(--sl-control-active-fg\)\)\] {
922
+ color: hsl(var(--sl-control-active-fg));
923
+ }
924
+ .text-\[hsl\(var\(--sl-control-fg\)\)\] {
925
+ color: hsl(var(--sl-control-fg));
926
+ }
927
+ .text-accent-foreground {
928
+ color: hsl(var(--accent-foreground));
929
+ }
930
+ .text-amber-600 {
931
+ --tw-text-opacity: 1;
932
+ color: rgb(217 119 6 / var(--tw-text-opacity, 1));
933
+ }
934
+ .text-amber-700 {
935
+ --tw-text-opacity: 1;
936
+ color: rgb(180 83 9 / var(--tw-text-opacity, 1));
937
+ }
938
+ .text-background {
939
+ color: hsl(var(--background));
940
+ }
941
+ .text-blue-700 {
942
+ --tw-text-opacity: 1;
943
+ color: rgb(29 78 216 / var(--tw-text-opacity, 1));
944
+ }
945
+ .text-destructive {
946
+ color: hsl(var(--destructive));
947
+ }
948
+ .text-destructive-foreground {
949
+ color: hsl(var(--destructive-foreground));
950
+ }
951
+ .text-emerald-700 {
952
+ --tw-text-opacity: 1;
953
+ color: rgb(4 120 87 / var(--tw-text-opacity, 1));
954
+ }
955
+ .text-foreground {
956
+ color: hsl(var(--foreground));
957
+ }
958
+ .text-gray-400 {
959
+ --tw-text-opacity: 1;
960
+ color: rgb(156 163 175 / var(--tw-text-opacity, 1));
961
+ }
962
+ .text-gray-500 {
963
+ --tw-text-opacity: 1;
964
+ color: rgb(107 114 128 / var(--tw-text-opacity, 1));
965
+ }
966
+ .text-gray-600 {
967
+ --tw-text-opacity: 1;
968
+ color: rgb(75 85 99 / var(--tw-text-opacity, 1));
969
+ }
970
+ .text-gray-700 {
971
+ --tw-text-opacity: 1;
972
+ color: rgb(55 65 81 / var(--tw-text-opacity, 1));
973
+ }
974
+ .text-gray-800 {
975
+ --tw-text-opacity: 1;
976
+ color: rgb(31 41 55 / var(--tw-text-opacity, 1));
977
+ }
978
+ .text-gray-900 {
979
+ --tw-text-opacity: 1;
980
+ color: rgb(17 24 39 / var(--tw-text-opacity, 1));
981
+ }
982
+ .text-muted-foreground {
983
+ color: hsl(var(--muted-foreground));
984
+ }
985
+ .text-muted-foreground\/40 {
986
+ color: hsl(var(--muted-foreground) / 0.4);
987
+ }
988
+ .text-primary {
989
+ color: hsl(var(--primary));
990
+ }
991
+ .text-primary-foreground {
992
+ color: hsl(var(--primary-foreground));
993
+ }
994
+ .text-red-400 {
995
+ --tw-text-opacity: 1;
996
+ color: rgb(248 113 113 / var(--tw-text-opacity, 1));
997
+ }
998
+ .text-red-700 {
999
+ --tw-text-opacity: 1;
1000
+ color: rgb(185 28 28 / var(--tw-text-opacity, 1));
1001
+ }
1002
+ .text-white {
1003
+ --tw-text-opacity: 1;
1004
+ color: rgb(255 255 255 / var(--tw-text-opacity, 1));
1005
+ }
1006
+ .underline {
1007
+ text-decoration-line: underline;
1008
+ }
1009
+ .opacity-0 {
1010
+ opacity: 0;
1011
+ }
1012
+ .opacity-100 {
1013
+ opacity: 1;
1014
+ }
1015
+ .opacity-50 {
1016
+ opacity: 0.5;
1017
+ }
1018
+ .opacity-60 {
1019
+ opacity: 0.6;
1020
+ }
1021
+ .opacity-70 {
1022
+ opacity: 0.7;
1023
+ }
1024
+ .opacity-80 {
1025
+ opacity: 0.8;
1026
+ }
1027
+ .shadow {
1028
+ --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
1029
+ --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
1030
+ box-shadow:
1031
+ var(--tw-ring-offset-shadow, 0 0 #0000),
1032
+ var(--tw-ring-shadow, 0 0 #0000),
1033
+ var(--tw-shadow);
1034
+ }
1035
+ .shadow-2xl {
1036
+ --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
1037
+ --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
1038
+ box-shadow:
1039
+ var(--tw-ring-offset-shadow, 0 0 #0000),
1040
+ var(--tw-ring-shadow, 0 0 #0000),
1041
+ var(--tw-shadow);
1042
+ }
1043
+ .shadow-lg {
1044
+ --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
1045
+ --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
1046
+ box-shadow:
1047
+ var(--tw-ring-offset-shadow, 0 0 #0000),
1048
+ var(--tw-ring-shadow, 0 0 #0000),
1049
+ var(--tw-shadow);
1050
+ }
1051
+ .shadow-sm {
1052
+ --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1053
+ --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
1054
+ box-shadow:
1055
+ var(--tw-ring-offset-shadow, 0 0 #0000),
1056
+ var(--tw-ring-shadow, 0 0 #0000),
1057
+ var(--tw-shadow);
1058
+ }
1059
+ .shadow-xl {
1060
+ --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
1061
+ --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
1062
+ box-shadow:
1063
+ var(--tw-ring-offset-shadow, 0 0 #0000),
1064
+ var(--tw-ring-shadow, 0 0 #0000),
1065
+ var(--tw-shadow);
1066
+ }
1067
+ .outline {
1068
+ outline-style: solid;
1069
+ }
1070
+ .ring-1 {
1071
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1072
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1073
+ box-shadow:
1074
+ var(--tw-ring-offset-shadow),
1075
+ var(--tw-ring-shadow),
1076
+ var(--tw-shadow, 0 0 #0000);
1077
+ }
1078
+ .ring-2 {
1079
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1080
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1081
+ box-shadow:
1082
+ var(--tw-ring-offset-shadow),
1083
+ var(--tw-ring-shadow),
1084
+ var(--tw-shadow, 0 0 #0000);
1085
+ }
1086
+ .ring-primary {
1087
+ --tw-ring-color: hsl(var(--primary));
1088
+ }
1089
+ .blur {
1090
+ --tw-blur: blur(8px);
1091
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
1092
+ }
1093
+ .filter {
1094
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
1095
+ }
1096
+ .backdrop-blur-sm {
1097
+ --tw-backdrop-blur: blur(4px);
1098
+ backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
1099
+ }
1100
+ .transition {
1101
+ transition-property:
1102
+ color,
1103
+ background-color,
1104
+ border-color,
1105
+ text-decoration-color,
1106
+ fill,
1107
+ stroke,
1108
+ opacity,
1109
+ box-shadow,
1110
+ transform,
1111
+ filter,
1112
+ backdrop-filter;
1113
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1114
+ transition-duration: 150ms;
1115
+ }
1116
+ .transition-all {
1117
+ transition-property: all;
1118
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1119
+ transition-duration: 150ms;
1120
+ }
1121
+ .transition-colors {
1122
+ transition-property:
1123
+ color,
1124
+ background-color,
1125
+ border-color,
1126
+ text-decoration-color,
1127
+ fill,
1128
+ stroke;
1129
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1130
+ transition-duration: 150ms;
1131
+ }
1132
+ .transition-opacity {
1133
+ transition-property: opacity;
1134
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1135
+ transition-duration: 150ms;
1136
+ }
1137
+ .transition-shadow {
1138
+ transition-property: box-shadow;
1139
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1140
+ transition-duration: 150ms;
1141
+ }
1142
+ .transition-transform {
1143
+ transition-property: transform;
1144
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1145
+ transition-duration: 150ms;
1146
+ }
1147
+ .duration-300 {
1148
+ transition-duration: 300ms;
1149
+ }
1150
+ .sl-ui-styles-loaded {
1151
+ --sl-ui-styles: loaded;
1152
+ }
1153
+ .placeholder\:text-muted-foreground::-moz-placeholder {
1154
+ color: hsl(var(--muted-foreground));
1155
+ }
1156
+ .placeholder\:text-muted-foreground::placeholder {
1157
+ color: hsl(var(--muted-foreground));
1158
+ }
1159
+ .hover\:border-blue-400:hover {
1160
+ --tw-border-opacity: 1;
1161
+ border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
1162
+ }
1163
+ .hover\:border-gray-300:hover {
1164
+ --tw-border-opacity: 1;
1165
+ border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
1166
+ }
1167
+ .hover\:border-muted-foreground:hover {
1168
+ border-color: hsl(var(--muted-foreground));
1169
+ }
1170
+ .hover\:border-muted-foreground\/40:hover {
1171
+ border-color: hsl(var(--muted-foreground) / 0.4);
1172
+ }
1173
+ .hover\:border-ring:hover {
1174
+ border-color: hsl(var(--ring));
1175
+ }
1176
+ .hover\:bg-\[hsl\(var\(--ra-muted\)\)\]:hover {
1177
+ background-color: hsl(var(--ra-muted));
1178
+ }
1179
+ .hover\:bg-\[hsl\(var\(--ra-muted\)\/0\.5\)\]:hover {
1180
+ background-color: hsl(var(--ra-muted)/0.5);
1181
+ }
1182
+ .hover\:bg-\[hsl\(var\(--ra-muted\)\/0\.6\)\]:hover {
1183
+ background-color: hsl(var(--ra-muted)/0.6);
1184
+ }
1185
+ .hover\:bg-\[hsl\(var\(--sl-control-hover-bg\)\/0\.08\)\]:hover {
1186
+ background-color: hsl(var(--sl-control-hover-bg)/0.08);
1187
+ }
1188
+ .hover\:bg-\[hsl\(var\(--sl-control-hover-bg\)\/0\.10\)\]:hover {
1189
+ background-color: hsl(var(--sl-control-hover-bg)/0.10);
1190
+ }
1191
+ .hover\:bg-accent:hover {
1192
+ background-color: hsl(var(--accent));
1193
+ }
1194
+ .hover\:bg-accent\/30:hover {
1195
+ background-color: hsl(var(--accent) / 0.3);
1196
+ }
1197
+ .hover\:bg-accent\/50:hover {
1198
+ background-color: hsl(var(--accent) / 0.5);
1199
+ }
1200
+ .hover\:bg-blue-100:hover {
1201
+ --tw-bg-opacity: 1;
1202
+ background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
1203
+ }
1204
+ .hover\:bg-blue-50\/50:hover {
1205
+ background-color: rgb(239 246 255 / 0.5);
1206
+ }
1207
+ .hover\:bg-blue-700:hover {
1208
+ --tw-bg-opacity: 1;
1209
+ background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
1210
+ }
1211
+ .hover\:bg-destructive:hover {
1212
+ background-color: hsl(var(--destructive));
1213
+ }
1214
+ .hover\:bg-destructive\/10:hover {
1215
+ background-color: hsl(var(--destructive) / 0.1);
1216
+ }
1217
+ .hover\:bg-gray-100:hover {
1218
+ --tw-bg-opacity: 1;
1219
+ background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
1220
+ }
1221
+ .hover\:bg-gray-200:hover {
1222
+ --tw-bg-opacity: 1;
1223
+ background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
1224
+ }
1225
+ .hover\:bg-gray-50:hover {
1226
+ --tw-bg-opacity: 1;
1227
+ background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
1228
+ }
1229
+ .hover\:bg-muted:hover {
1230
+ background-color: hsl(var(--muted));
1231
+ }
1232
+ .hover\:bg-primary\/90:hover {
1233
+ background-color: hsl(var(--primary) / 0.9);
1234
+ }
1235
+ .hover\:bg-red-100:hover {
1236
+ --tw-bg-opacity: 1;
1237
+ background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
1238
+ }
1239
+ .hover\:bg-red-50:hover {
1240
+ --tw-bg-opacity: 1;
1241
+ background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
1242
+ }
1243
+ .hover\:text-\[hsl\(var\(--sl-control-hover-fg\)\)\]:hover {
1244
+ color: hsl(var(--sl-control-hover-fg));
1245
+ }
1246
+ .hover\:text-accent-foreground:hover {
1247
+ color: hsl(var(--accent-foreground));
1248
+ }
1249
+ .hover\:text-blue-500:hover {
1250
+ --tw-text-opacity: 1;
1251
+ color: rgb(59 130 246 / var(--tw-text-opacity, 1));
1252
+ }
1253
+ .hover\:text-blue-600:hover {
1254
+ --tw-text-opacity: 1;
1255
+ color: rgb(37 99 235 / var(--tw-text-opacity, 1));
1256
+ }
1257
+ .hover\:text-destructive:hover {
1258
+ color: hsl(var(--destructive));
1259
+ }
1260
+ .hover\:text-destructive\/80:hover {
1261
+ color: hsl(var(--destructive) / 0.8);
1262
+ }
1263
+ .hover\:text-foreground:hover {
1264
+ color: hsl(var(--foreground));
1265
+ }
1266
+ .hover\:text-red-600:hover {
1267
+ --tw-text-opacity: 1;
1268
+ color: rgb(220 38 38 / var(--tw-text-opacity, 1));
1269
+ }
1270
+ .hover\:underline:hover {
1271
+ text-decoration-line: underline;
1272
+ }
1273
+ .hover\:opacity-100:hover {
1274
+ opacity: 1;
1275
+ }
1276
+ .hover\:shadow-md:hover {
1277
+ --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
1278
+ --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
1279
+ box-shadow:
1280
+ var(--tw-ring-offset-shadow, 0 0 #0000),
1281
+ var(--tw-ring-shadow, 0 0 #0000),
1282
+ var(--tw-shadow);
1283
+ }
1284
+ .hover\:shadow-sm:hover {
1285
+ --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1286
+ --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
1287
+ box-shadow:
1288
+ var(--tw-ring-offset-shadow, 0 0 #0000),
1289
+ var(--tw-ring-shadow, 0 0 #0000),
1290
+ var(--tw-shadow);
1291
+ }
1292
+ .focus\:outline-none:focus {
1293
+ outline: 2px solid transparent;
1294
+ outline-offset: 2px;
1295
+ }
1296
+ .focus\:ring-1:focus {
1297
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1298
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1299
+ box-shadow:
1300
+ var(--tw-ring-offset-shadow),
1301
+ var(--tw-ring-shadow),
1302
+ var(--tw-shadow, 0 0 #0000);
1303
+ }
1304
+ .focus\:ring-2:focus {
1305
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1306
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1307
+ box-shadow:
1308
+ var(--tw-ring-offset-shadow),
1309
+ var(--tw-ring-shadow),
1310
+ var(--tw-shadow, 0 0 #0000);
1311
+ }
1312
+ .focus\:ring-blue-500:focus {
1313
+ --tw-ring-opacity: 1;
1314
+ --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
1315
+ }
1316
+ .focus\:ring-ring:focus {
1317
+ --tw-ring-color: hsl(var(--ring));
1318
+ }
1319
+ .focus-visible\:outline-none:focus-visible {
1320
+ outline: 2px solid transparent;
1321
+ outline-offset: 2px;
1322
+ }
1323
+ .focus-visible\:ring-2:focus-visible {
1324
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1325
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1326
+ box-shadow:
1327
+ var(--tw-ring-offset-shadow),
1328
+ var(--tw-ring-shadow),
1329
+ var(--tw-shadow, 0 0 #0000);
1330
+ }
1331
+ .focus-visible\:ring-\[hsl\(var\(--sl-control-focus-ring\)\/0\.45\)\]:focus-visible {
1332
+ --tw-ring-color: hsl(var(--sl-control-focus-ring)/0.45);
1333
+ }
1334
+ .disabled\:cursor-not-allowed:disabled {
1335
+ cursor: not-allowed;
1336
+ }
1337
+ .disabled\:opacity-30:disabled {
1338
+ opacity: 0.3;
1339
+ }
1340
+ .disabled\:opacity-40:disabled {
1341
+ opacity: 0.4;
1342
+ }
1343
+ .disabled\:opacity-50:disabled {
1344
+ opacity: 0.5;
1345
+ }
1346
+ .disabled\:opacity-60:disabled {
1347
+ opacity: 0.6;
1348
+ }
1349
+ .disabled\:opacity-70:disabled {
1350
+ opacity: 0.7;
1351
+ }
1352
+ .group:hover .group-hover\:opacity-100 {
1353
+ opacity: 1;
1354
+ }
1355
+ @media (min-width: 640px) {
1356
+ .sm\:grid-cols-10 {
1357
+ grid-template-columns: repeat(10, minmax(0, 1fr));
1358
+ }
1359
+ .sm\:grid-cols-3 {
1360
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1361
+ }
1362
+ .sm\:grid-cols-4 {
1363
+ grid-template-columns: repeat(4, minmax(0, 1fr));
1364
+ }
1365
+ }
1366
+ @media (min-width: 768px) {
1367
+ .md\:grid-cols-12 {
1368
+ grid-template-columns: repeat(12, minmax(0, 1fr));
1369
+ }
1370
+ .md\:grid-cols-4 {
1371
+ grid-template-columns: repeat(4, minmax(0, 1fr));
1372
+ }
1373
+ .md\:grid-cols-5 {
1374
+ grid-template-columns: repeat(5, minmax(0, 1fr));
1375
+ }
1376
+ }
1377
+ @media (min-width: 1024px) {
1378
+ .lg\:grid-cols-6 {
1379
+ grid-template-columns: repeat(6, minmax(0, 1fr));
1380
+ }
1381
+ }
1382
+ @media (prefers-color-scheme: dark) {
1383
+ .dark\:border-gray-600 {
1384
+ --tw-border-opacity: 1;
1385
+ border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
1386
+ }
1387
+ .dark\:border-gray-700 {
1388
+ --tw-border-opacity: 1;
1389
+ border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
1390
+ }
1391
+ .dark\:border-gray-800 {
1392
+ --tw-border-opacity: 1;
1393
+ border-color: rgb(31 41 55 / var(--tw-border-opacity, 1));
1394
+ }
1395
+ .dark\:bg-amber-900\/30 {
1396
+ background-color: rgb(120 53 15 / 0.3);
1397
+ }
1398
+ .dark\:bg-blue-900\/30 {
1399
+ background-color: rgb(30 58 138 / 0.3);
1400
+ }
1401
+ .dark\:bg-blue-900\/40 {
1402
+ background-color: rgb(30 58 138 / 0.4);
1403
+ }
1404
+ .dark\:bg-emerald-900\/30 {
1405
+ background-color: rgb(6 78 59 / 0.3);
1406
+ }
1407
+ .dark\:bg-gray-600 {
1408
+ --tw-bg-opacity: 1;
1409
+ background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
1410
+ }
1411
+ .dark\:bg-gray-700 {
1412
+ --tw-bg-opacity: 1;
1413
+ background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
1414
+ }
1415
+ .dark\:bg-gray-800 {
1416
+ --tw-bg-opacity: 1;
1417
+ background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
1418
+ }
1419
+ .dark\:bg-gray-800\/50 {
1420
+ background-color: rgb(31 41 55 / 0.5);
1421
+ }
1422
+ .dark\:bg-gray-900 {
1423
+ --tw-bg-opacity: 1;
1424
+ background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
1425
+ }
1426
+ .dark\:bg-red-900\/30 {
1427
+ background-color: rgb(127 29 29 / 0.3);
1428
+ }
1429
+ .dark\:text-amber-300 {
1430
+ --tw-text-opacity: 1;
1431
+ color: rgb(252 211 77 / var(--tw-text-opacity, 1));
1432
+ }
1433
+ .dark\:text-amber-400 {
1434
+ --tw-text-opacity: 1;
1435
+ color: rgb(251 191 36 / var(--tw-text-opacity, 1));
1436
+ }
1437
+ .dark\:text-blue-300 {
1438
+ --tw-text-opacity: 1;
1439
+ color: rgb(147 197 253 / var(--tw-text-opacity, 1));
1440
+ }
1441
+ .dark\:text-emerald-300 {
1442
+ --tw-text-opacity: 1;
1443
+ color: rgb(110 231 183 / var(--tw-text-opacity, 1));
1444
+ }
1445
+ .dark\:text-gray-100 {
1446
+ --tw-text-opacity: 1;
1447
+ color: rgb(243 244 246 / var(--tw-text-opacity, 1));
1448
+ }
1449
+ .dark\:text-gray-200 {
1450
+ --tw-text-opacity: 1;
1451
+ color: rgb(229 231 235 / var(--tw-text-opacity, 1));
1452
+ }
1453
+ .dark\:text-gray-300 {
1454
+ --tw-text-opacity: 1;
1455
+ color: rgb(209 213 219 / var(--tw-text-opacity, 1));
1456
+ }
1457
+ .dark\:text-gray-400 {
1458
+ --tw-text-opacity: 1;
1459
+ color: rgb(156 163 175 / var(--tw-text-opacity, 1));
1460
+ }
1461
+ .dark\:text-gray-500 {
1462
+ --tw-text-opacity: 1;
1463
+ color: rgb(107 114 128 / var(--tw-text-opacity, 1));
1464
+ }
1465
+ .dark\:text-red-300 {
1466
+ --tw-text-opacity: 1;
1467
+ color: rgb(252 165 165 / var(--tw-text-opacity, 1));
1468
+ }
1469
+ .dark\:hover\:border-blue-500:hover {
1470
+ --tw-border-opacity: 1;
1471
+ border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
1472
+ }
1473
+ .dark\:hover\:border-gray-600:hover {
1474
+ --tw-border-opacity: 1;
1475
+ border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
1476
+ }
1477
+ .dark\:hover\:bg-blue-900\/50:hover {
1478
+ background-color: rgb(30 58 138 / 0.5);
1479
+ }
1480
+ .dark\:hover\:bg-blue-950\/20:hover {
1481
+ background-color: rgb(23 37 84 / 0.2);
1482
+ }
1483
+ .dark\:hover\:bg-gray-700:hover {
1484
+ --tw-bg-opacity: 1;
1485
+ background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
1486
+ }
1487
+ .dark\:hover\:bg-gray-800:hover {
1488
+ --tw-bg-opacity: 1;
1489
+ background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
1490
+ }
1491
+ .dark\:hover\:bg-gray-800\/50:hover {
1492
+ background-color: rgb(31 41 55 / 0.5);
1493
+ }
1494
+ .dark\:hover\:bg-red-900\/20:hover {
1495
+ background-color: rgb(127 29 29 / 0.2);
1496
+ }
1497
+ .dark\:hover\:bg-red-900\/30:hover {
1498
+ background-color: rgb(127 29 29 / 0.3);
1499
+ }
1500
+ .dark\:hover\:text-blue-400:hover {
1501
+ --tw-text-opacity: 1;
1502
+ color: rgb(96 165 250 / var(--tw-text-opacity, 1));
1503
+ }
1504
+ }
1505
+
1506
+ /* src/components/AdminPageHeader/admin-page-header.css */
1507
+ .sl-aph {
1508
+ width: 100%;
1509
+ font-family: var(--ra-font-ui, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
1510
+ color: hsl(var(--ra-text, 222 47% 11%));
1511
+ display: flex;
1512
+ flex-direction: column;
1513
+ gap: 0.5rem;
1514
+ }
1515
+ .sl-aph *,
1516
+ .sl-aph *::before,
1517
+ .sl-aph *::after {
1518
+ box-sizing: border-box;
1519
+ }
1520
+ .sl-aph__row {
1521
+ position: relative;
1522
+ display: flex;
1523
+ align-items: flex-start;
1524
+ gap: 0.6rem;
1525
+ padding: 0.25rem 0.25rem 0.5rem;
1526
+ }
1527
+ .sl-aph__main {
1528
+ flex: 1;
1529
+ min-width: 0;
1530
+ display: flex;
1531
+ align-items: flex-start;
1532
+ gap: 0.55rem;
1533
+ }
1534
+ .sl-aph__aside {
1535
+ display: flex;
1536
+ align-items: center;
1537
+ gap: 0.5rem;
1538
+ flex-shrink: 0;
1539
+ }
1540
+ .sl-aph__text {
1541
+ flex: 1;
1542
+ min-width: 0;
1543
+ }
1544
+ .sl-aph__title {
1545
+ font-family: var(--ra-font-display, var(--ra-font-ui, ui-sans-serif, system-ui, sans-serif));
1546
+ font-weight: 700;
1547
+ font-size: 1.2rem;
1548
+ line-height: 1.2;
1549
+ color: hsl(var(--ra-text, 222 47% 11%));
1550
+ letter-spacing: -0.015em;
1551
+ margin: 0;
1552
+ display: inline-flex;
1553
+ align-items: center;
1554
+ gap: 0.5rem;
1555
+ }
1556
+ .sl-aph__icon {
1557
+ flex-shrink: 0;
1558
+ display: inline-flex;
1559
+ align-items: center;
1560
+ justify-content: flex-start;
1561
+ background: transparent;
1562
+ color: hsl(var(--ra-text, 222 47% 11%));
1563
+ border: 0;
1564
+ padding: 0;
1565
+ }
1566
+ .sl-aph__icon > svg {
1567
+ width: 1.05rem;
1568
+ height: 1.05rem;
1569
+ }
1570
+ .sl-aph__subtitle {
1571
+ font-size: 0.78rem;
1572
+ color: hsl(var(--ra-muted-text, 220 9% 46%));
1573
+ margin: 0.1rem 0 0;
1574
+ line-height: 1.3;
1575
+ }
1576
+ .sl-aph__icon-btn {
1577
+ display: inline-flex;
1578
+ align-items: center;
1579
+ justify-content: center;
1580
+ width: 2rem;
1581
+ height: 2rem;
1582
+ padding: 0;
1583
+ border-radius: 999px;
1584
+ background: transparent;
1585
+ border: 1px solid transparent;
1586
+ color: hsl(var(--ra-muted-text, 220 9% 46%));
1587
+ cursor: pointer;
1588
+ transition:
1589
+ background .15s ease,
1590
+ color .15s ease,
1591
+ border-color .15s ease;
1592
+ text-decoration: none;
1593
+ }
1594
+ .sl-aph__icon-btn:hover {
1595
+ background: hsl(var(--ra-text, 222 47% 11%) / 0.06);
1596
+ color: hsl(var(--ra-text, 222 47% 11%));
1597
+ }
1598
+ .sl-aph__icon-btn:focus-visible {
1599
+ outline: none;
1600
+ box-shadow: 0 0 0 3px var(--ra-focus-ring, hsl(222 47% 11% / 0.35));
1601
+ }
1602
+ .sl-aph__icon-btn > svg {
1603
+ width: 1rem;
1604
+ height: 1rem;
1605
+ }
1606
+ .sl-aph__intro {
1607
+ position: relative;
1608
+ display: flex;
1609
+ align-items: center;
1610
+ gap: 0.55rem;
1611
+ padding: 0.4rem 2rem 0.4rem 0.5rem;
1612
+ border-radius: var(--ra-radius, 0.625rem);
1613
+ border: 1px solid hsl(var(--ra-info, 214 95% 55%) / 0.30);
1614
+ background: hsl(var(--ra-info, 214 95% 55%) / 0.08);
1615
+ }
1616
+ .sl-aph__intro[data-tone=success] {
1617
+ border-color: hsl(var(--ra-success, 142 71% 45%) / 0.30);
1618
+ background: hsl(var(--ra-success, 142 71% 45%) / 0.08);
1619
+ }
1620
+ .sl-aph__intro[data-tone=warning] {
1621
+ border-color: hsl(var(--ra-warning, 38 92% 50%) / 0.35);
1622
+ background: hsl(var(--ra-warning, 38 92% 50%) / 0.10);
1623
+ }
1624
+ .sl-aph__intro-icon {
1625
+ flex-shrink: 0;
1626
+ width: 1.5rem;
1627
+ height: 1.5rem;
1628
+ border-radius: 999px;
1629
+ display: inline-flex;
1630
+ align-items: center;
1631
+ justify-content: center;
1632
+ background: hsl(var(--ra-info, 214 95% 55%) / 0.18);
1633
+ color: hsl(var(--ra-info, 214 95% 55%));
1634
+ }
1635
+ .sl-aph__intro[data-tone=success] .sl-aph__intro-icon {
1636
+ background: hsl(var(--ra-success, 142 71% 45%) / 0.18);
1637
+ color: hsl(var(--ra-success, 142 71% 45%));
1638
+ }
1639
+ .sl-aph__intro[data-tone=warning] .sl-aph__intro-icon {
1640
+ background: hsl(var(--ra-warning, 38 92% 50%) / 0.20);
1641
+ color: hsl(var(--ra-warning, 38 92% 50%));
1642
+ }
1643
+ .sl-aph__intro-body {
1644
+ flex: 1;
1645
+ min-width: 0;
1646
+ }
1647
+ .sl-aph__intro-title {
1648
+ font-family: var(--ra-font-display, var(--ra-font-ui, ui-sans-serif, system-ui, sans-serif));
1649
+ font-weight: var(--ra-title-weight, 600);
1650
+ font-size: 0.8rem;
1651
+ color: hsl(var(--ra-text, 222 47% 11%));
1652
+ margin: 0;
1653
+ line-height: 1.2;
1654
+ display: inline;
1655
+ }
1656
+ .sl-aph__intro-text {
1657
+ font-size: 0.78rem;
1658
+ color: hsl(var(--ra-text, 222 47% 11%) / 0.85);
1659
+ line-height: 1.35;
1660
+ display: inline;
1661
+ margin-left: 0.4rem;
1662
+ }
1663
+ .sl-aph__intro-action {
1664
+ margin-left: 0.375rem;
1665
+ }
1666
+ .sl-aph__intro-dismiss {
1667
+ position: absolute;
1668
+ top: 50%;
1669
+ right: 0.35rem;
1670
+ transform: translateY(-50%);
1671
+ width: 1.4rem;
1672
+ height: 1.4rem;
1673
+ border-radius: 999px;
1674
+ display: inline-flex;
1675
+ align-items: center;
1676
+ justify-content: center;
1677
+ background: transparent;
1678
+ border: 0;
1679
+ color: hsl(var(--ra-muted-text, 220 9% 46%));
1680
+ cursor: pointer;
1681
+ padding: 0;
1682
+ }
1683
+ .sl-aph__intro-dismiss:hover {
1684
+ background: hsl(var(--ra-text, 222 47% 11%) / 0.06);
1685
+ color: hsl(var(--ra-text, 222 47% 11%));
1686
+ }
1687
+
1688
+ /* src/components/RecordsAdmin/shell/tokens.css */
1689
+ :root {
1690
+ --ra-status-own: var(--ra-emerald, 142 71% 45%);
1691
+ --ra-status-shared: var(--ra-amber, 38 92% 50%);
1692
+ --ra-status-missing: var(--muted-foreground, 220 9% 46%);
1693
+ --ra-accent: var(--primary, 222 47% 11%);
1694
+ --ra-surface: var(--card, 0 0% 100%);
1695
+ --ra-border: var(--border, 220 13% 91%);
1696
+ --ra-text: var(--foreground, 222 47% 11%);
1697
+ --ra-muted: var(--muted, 220 14% 96%);
1698
+ --ra-muted-text: var(--muted-foreground, 220 9% 46%);
1699
+ --ra-radius: var(--radius, 0.625rem);
1700
+ --ra-dot-size: 0.5rem;
1701
+ --ra-page-bg: var(--background, 220 14% 98%);
1702
+ --ra-card-shadow: 0 1px 2px hsl(var(--ra-accent) / 0.04), 0 4px 12px hsl(var(--ra-accent) / 0.05);
1703
+ --ra-card-shadow-hover: 0 2px 4px hsl(var(--ra-accent) / 0.06), 0 8px 24px hsl(var(--ra-accent) / 0.08);
1704
+ --ra-row-hover: hsl(var(--ra-accent) / 0.05);
1705
+ --ra-row-active-bg: hsl(var(--ra-accent) / 0.10);
1706
+ --ra-row-active-bd: hsl(var(--ra-accent) / 0.45);
1707
+ --ra-focus-ring: hsl(var(--ra-accent) / 0.35);
1708
+ --ra-font-display: var(--font-display, var(--font-sans, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif));
1709
+ --ra-font-ui: var(--font-sans, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
1710
+ --ra-title-weight: 600;
1711
+ --ra-display-weight: 700;
1712
+ --ra-info: var(--ra-blue, 214 95% 55%);
1713
+ --ra-success: var(--ra-emerald, 142 71% 45%);
1714
+ --ra-warning: var(--ra-amber, 38 92% 50%);
1715
+ --ra-danger: var(--destructive, 0 72% 51%);
1716
+ }
1717
+ :root {
1718
+ --sl-control-bg: var(--muted, 220 14% 96%);
1719
+ --sl-control-fg: var(--muted-foreground, 220 9% 40%);
1720
+ --sl-control-border: var(--border, 220 13% 88%);
1721
+ --sl-control-active-bg: var(--primary, 222 47% 11%);
1722
+ --sl-control-active-fg: var(--primary-foreground, 0 0% 100%);
1723
+ --sl-control-active-bd: var(--primary, 222 47% 11%);
1724
+ --sl-control-hover-bg: var(--sl-control-active-bg, 222 47% 11%);
1725
+ --sl-control-hover-fg: var(--foreground, 222 47% 11%);
1726
+ --sl-control-focus-ring: var(--sl-control-active-bg, 222 47% 11%);
1727
+ --sl-control-radius: var(--radius, 0.5rem);
1728
+ --sl-control-weight: 500;
1729
+ --sl-control-active-weight: 600;
1730
+ }
1731
+ .ra-status-dot {
1732
+ display: inline-block;
1733
+ width: var(--ra-dot-size);
1734
+ height: var(--ra-dot-size);
1735
+ border-radius: 9999px;
1736
+ flex-shrink: 0;
1737
+ }
1738
+ .ra-status-own {
1739
+ background: hsl(var(--ra-status-own));
1740
+ }
1741
+ .ra-status-shared {
1742
+ background: hsl(var(--ra-status-shared));
1743
+ }
1744
+ .ra-status-missing {
1745
+ background: hsl(var(--ra-status-missing) / 0.4);
1746
+ border: 1px solid hsl(var(--ra-status-missing) / 0.6);
1747
+ }
1748
+ .ra-row-active {
1749
+ background: var(--ra-row-active-bg);
1750
+ border-color: var(--ra-row-active-bd) !important;
1751
+ }
1752
+
1753
+ /* src/components/RecordsAdmin/shell/shell.css */
1754
+ .ra-shell {
1755
+ color: hsl(var(--ra-text));
1756
+ background: hsl(var(--ra-page-bg));
1757
+ font-family: var(--ra-font-ui);
1758
+ }
1759
+ .ra-shell *,
1760
+ .ra-shell *::before,
1761
+ .ra-shell *::after {
1762
+ box-sizing: border-box;
1763
+ }
1764
+ .ra-shell .ra-card {
1765
+ background: hsl(var(--ra-surface));
1766
+ border: 1px solid hsl(var(--ra-border));
1767
+ border-radius: var(--ra-radius);
1768
+ box-shadow: var(--ra-card-shadow);
1769
+ }
1770
+ .ra-shell .ra-card-hover {
1771
+ transition:
1772
+ box-shadow .18s ease,
1773
+ transform .18s ease,
1774
+ border-color .18s ease;
1775
+ }
1776
+ .ra-shell .ra-card-hover:hover {
1777
+ box-shadow: var(--ra-card-shadow-hover);
1778
+ }
1779
+ .ra-shell .ra-display {
1780
+ font-family: var(--ra-font-display);
1781
+ font-weight: var(--ra-display-weight);
1782
+ letter-spacing: -0.01em;
1783
+ }
1784
+ .ra-shell .ra-title {
1785
+ font-weight: var(--ra-title-weight);
1786
+ }
1787
+ .ra-shell :where(button, [role=button], input, select, textarea, a):focus-visible {
1788
+ outline: none;
1789
+ box-shadow: 0 0 0 3px var(--ra-focus-ring);
1790
+ border-radius: calc(var(--ra-radius) * 0.6);
1791
+ }
1792
+ .ra-shell .ra-header {
1793
+ display: block;
1794
+ width: 100%;
1795
+ }
1796
+ .ra-shell .ra-header__main {
1797
+ flex: 1;
1798
+ min-width: 0;
1799
+ display: flex;
1800
+ align-items: flex-start;
1801
+ gap: 0.55rem;
1802
+ }
1803
+ .ra-shell .ra-header-aside {
1804
+ display: flex;
1805
+ align-items: flex-start;
1806
+ gap: 0.5rem;
1807
+ flex-shrink: 0;
1808
+ }
1809
+ .ra-shell .ra-header-icon {
1810
+ flex-shrink: 0;
1811
+ display: inline-flex;
1812
+ align-items: center;
1813
+ justify-content: flex-start;
1814
+ background: transparent;
1815
+ color: hsl(var(--ra-text));
1816
+ border: 0;
1817
+ padding: 0;
1818
+ margin-top: 0.1rem;
1819
+ }
1820
+ .ra-shell .ra-header-icon > svg {
1821
+ width: 1.05rem;
1822
+ height: 1.05rem;
1823
+ }
1824
+ .ra-shell .ra-header-text {
1825
+ flex: 1;
1826
+ min-width: 0;
1827
+ }
1828
+ .ra-shell .ra-header-title {
1829
+ font-family: var(--ra-font-display);
1830
+ font-weight: 700;
1831
+ font-size: 1.2rem;
1832
+ line-height: 1.2;
1833
+ color: hsl(var(--ra-text));
1834
+ letter-spacing: -0.015em;
1835
+ margin: 0;
1836
+ display: inline-flex;
1837
+ align-items: center;
1838
+ gap: 0.5rem;
1839
+ }
1840
+ .ra-shell .ra-header-subtitle {
1841
+ font-size: 0.78rem;
1842
+ color: hsl(var(--ra-muted-text));
1843
+ margin-top: 0.1rem;
1844
+ line-height: 1.3;
1845
+ }
1846
+ .ra-shell .ra-header-stats {
1847
+ display: flex;
1848
+ align-items: stretch;
1849
+ gap: 0.15rem;
1850
+ padding: 0.15rem 0.4rem;
1851
+ border-radius: calc(var(--ra-radius) * 0.75);
1852
+ background: hsl(var(--ra-surface) / 0.7);
1853
+ border: 1px solid hsl(var(--ra-border));
1854
+ }
1855
+ .ra-shell .ra-header-stats--titled {
1856
+ flex-direction: column;
1857
+ align-items: stretch;
1858
+ padding: 0.4rem 0.55rem;
1859
+ gap: 0.3rem;
1860
+ }
1861
+ .ra-shell .ra-header-stats .ra-stats-items {
1862
+ display: flex;
1863
+ align-items: stretch;
1864
+ gap: 0.15rem;
1865
+ }
1866
+ .ra-shell .ra-header-stats .ra-stats-heading {
1867
+ display: flex;
1868
+ align-items: center;
1869
+ gap: 0.35rem;
1870
+ color: hsl(var(--ra-muted-text));
1871
+ font-size: 0.65rem;
1872
+ text-transform: uppercase;
1873
+ letter-spacing: 0.06em;
1874
+ }
1875
+ .ra-shell .ra-header-stats .ra-stats-heading-icon {
1876
+ display: inline-flex;
1877
+ align-items: center;
1878
+ color: hsl(var(--ra-text));
1879
+ opacity: 0.75;
1880
+ }
1881
+ .ra-shell .ra-header-stats .ra-stats-heading-icon > svg {
1882
+ width: 0.85rem;
1883
+ height: 0.85rem;
1884
+ }
1885
+ .ra-shell .ra-stat {
1886
+ display: flex;
1887
+ flex-direction: column;
1888
+ align-items: center;
1889
+ padding: 0.15rem 0.45rem;
1890
+ min-width: 2.5rem;
1891
+ }
1892
+ .ra-shell .ra-stat-value {
1893
+ font-family: var(--ra-font-display);
1894
+ font-weight: var(--ra-display-weight);
1895
+ font-size: 0.85rem;
1896
+ color: hsl(var(--ra-text));
1897
+ line-height: 1;
1898
+ }
1899
+ .ra-shell .ra-stat-label {
1900
+ font-size: 0.6rem;
1901
+ text-transform: uppercase;
1902
+ letter-spacing: 0.04em;
1903
+ color: hsl(var(--ra-muted-text));
1904
+ margin-top: 0.15rem;
1905
+ }
1906
+ .ra-shell .ra-stat-divider {
1907
+ width: 1px;
1908
+ background: hsl(var(--ra-border));
1909
+ margin: 0.25rem 0;
1910
+ }
1911
+ .ra-shell .ra-header-actions {
1912
+ display: flex;
1913
+ align-items: center;
1914
+ gap: 0.5rem;
1915
+ }
1916
+ .ra-shell .ra-tabs {
1917
+ display: flex;
1918
+ gap: 0.25rem;
1919
+ padding: 0.25rem;
1920
+ background: hsl(var(--sl-control-bg));
1921
+ border-radius: var(--sl-control-radius);
1922
+ border: 1px solid hsl(var(--sl-control-border));
1923
+ }
1924
+ .ra-shell .ra-tab {
1925
+ display: inline-flex;
1926
+ align-items: center;
1927
+ gap: 0.4rem;
1928
+ padding: 0.4rem 0.7rem;
1929
+ border-radius: calc(var(--sl-control-radius) - 2px);
1930
+ font-size: 0.78rem;
1931
+ font-weight: var(--sl-control-weight);
1932
+ color: hsl(var(--sl-control-fg));
1933
+ background: transparent;
1934
+ border: 0;
1935
+ cursor: pointer;
1936
+ transition:
1937
+ background .15s ease,
1938
+ color .15s ease,
1939
+ transform .15s ease;
1940
+ white-space: nowrap;
1941
+ }
1942
+ .ra-shell .ra-tab:hover {
1943
+ background: hsl(var(--sl-control-hover-bg) / 0.10);
1944
+ color: hsl(var(--sl-control-hover-fg));
1945
+ }
1946
+ .ra-shell .ra-tab:focus-visible {
1947
+ outline: none;
1948
+ box-shadow: 0 0 0 2px hsl(var(--sl-control-focus-ring) / 0.45);
1949
+ }
1950
+ .ra-shell .ra-tab[aria-selected=true] {
1951
+ background: hsl(var(--sl-control-active-bg));
1952
+ color: hsl(var(--sl-control-active-fg));
1953
+ border-color: hsl(var(--sl-control-active-bd));
1954
+ font-weight: var(--sl-control-active-weight);
1955
+ box-shadow: 0 1px 2px hsl(var(--sl-control-active-bg) / 0.25);
1956
+ }
1957
+ .ra-shell .ra-tab[aria-selected=true]:hover {
1958
+ background: hsl(var(--sl-control-active-bg) / 0.92);
1959
+ color: hsl(var(--sl-control-active-fg));
1960
+ }
1961
+ .ra-shell .ra-tab[aria-selected=true] .ra-tab-icon {
1962
+ color: hsl(var(--sl-control-active-fg));
1963
+ }
1964
+ .ra-shell .ra-tab[disabled] {
1965
+ opacity: .5;
1966
+ cursor: not-allowed;
1967
+ }
1968
+ .ra-shell .ra-tab-count {
1969
+ display: inline-flex;
1970
+ align-items: center;
1971
+ justify-content: center;
1972
+ min-width: 1.25rem;
1973
+ padding: 0 0.35rem;
1974
+ height: 1.1rem;
1975
+ border-radius: 999px;
1976
+ background: hsl(var(--sl-control-active-fg) / 0.20);
1977
+ color: hsl(var(--sl-control-active-fg));
1978
+ font-size: 0.625rem;
1979
+ font-weight: 600;
1980
+ line-height: 1;
1981
+ }
1982
+ .ra-shell .ra-tab[aria-selected=false] .ra-tab-count {
1983
+ background: hsl(var(--sl-control-fg) / 0.15);
1984
+ color: hsl(var(--sl-control-fg));
1985
+ }
1986
+ .ra-shell[data-density=compact] .ra-row {
1987
+ padding-block: 0.4rem;
1988
+ }
1989
+ .ra-shell .ra-row {
1990
+ display: flex;
1991
+ align-items: center;
1992
+ gap: 0.55rem;
1993
+ width: 100%;
1994
+ text-align: left;
1995
+ padding: 0.45rem 0.75rem;
1996
+ border-left: 3px solid transparent;
1997
+ background: transparent;
1998
+ border-bottom: 1px solid transparent;
1999
+ transition: background .12s ease, border-color .12s ease;
2000
+ cursor: pointer;
2001
+ color: hsl(var(--ra-text));
2002
+ font-family: inherit;
2003
+ }
2004
+ .ra-shell .ra-row + .ra-row {
2005
+ border-top: 1px solid hsl(var(--ra-border) / 0.6);
2006
+ }
2007
+ .ra-shell .ra-row:hover {
2008
+ background: var(--ra-row-hover);
2009
+ }
2010
+ .ra-shell .ra-row[data-selected=true] {
2011
+ background: var(--ra-row-active-bg);
2012
+ border-left-color: var(--ra-row-active-bd);
2013
+ }
2014
+ .ra-shell .ra-row-compact {
2015
+ padding-block: 0.3rem;
2016
+ }
2017
+ .ra-shell .ra-row-icon {
2018
+ display: inline-flex;
2019
+ align-items: center;
2020
+ justify-content: center;
2021
+ width: 1.5rem;
2022
+ height: 1.5rem;
2023
+ border-radius: calc(var(--ra-radius) * 0.6);
2024
+ background: hsl(var(--ra-muted));
2025
+ color: hsl(var(--ra-muted-text));
2026
+ flex-shrink: 0;
2027
+ }
2028
+ .ra-shell .ra-row[data-selected=true] .ra-row-icon {
2029
+ background: hsl(var(--ra-accent) / 0.15);
2030
+ color: hsl(var(--ra-accent));
2031
+ }
2032
+ .ra-shell .ra-row-body {
2033
+ flex: 1;
2034
+ min-width: 0;
2035
+ }
2036
+ .ra-shell .ra-row-title {
2037
+ font-weight: var(--ra-title-weight);
2038
+ font-size: 0.8125rem;
2039
+ line-height: 1.2;
2040
+ color: hsl(var(--ra-text));
2041
+ white-space: nowrap;
2042
+ overflow: hidden;
2043
+ text-overflow: ellipsis;
2044
+ }
2045
+ .ra-shell .ra-row-sub {
2046
+ font-size: 0.6875rem;
2047
+ color: hsl(var(--ra-muted-text));
2048
+ margin-top: 0.05rem;
2049
+ white-space: nowrap;
2050
+ overflow: hidden;
2051
+ text-overflow: ellipsis;
2052
+ }
2053
+ .ra-shell .ra-row-rule-chips {
2054
+ display: flex;
2055
+ flex-wrap: wrap;
2056
+ gap: 0.2rem;
2057
+ margin-top: 0.2rem;
2058
+ }
2059
+ .ra-shell .ra-rule-chip {
2060
+ display: inline-flex;
2061
+ align-items: center;
2062
+ max-width: 100%;
2063
+ padding: 0.05rem 0.4rem;
2064
+ border-radius: 999px;
2065
+ font-size: 0.625rem;
2066
+ font-weight: 500;
2067
+ line-height: 1.4;
2068
+ background: hsl(var(--ra-accent) / 0.10);
2069
+ color: hsl(var(--ra-accent));
2070
+ border: 1px solid hsl(var(--ra-accent) / 0.20);
2071
+ white-space: nowrap;
2072
+ overflow: hidden;
2073
+ text-overflow: ellipsis;
2074
+ }
2075
+ .ra-shell .ra-rule-chip-more {
2076
+ background: hsl(var(--ra-muted));
2077
+ color: hsl(var(--ra-muted-text));
2078
+ border-color: hsl(var(--ra-border));
2079
+ }
2080
+ .ra-shell[data-density=compact] .ra-row-rule-chips {
2081
+ margin-top: 0.15rem;
2082
+ gap: 0.15rem;
2083
+ }
2084
+ .ra-shell[data-density=compact] .ra-rule-chip {
2085
+ font-size: 0.6rem;
2086
+ padding: 0.02rem 0.35rem;
2087
+ }
2088
+ .ra-shell .ra-rule-filters {
2089
+ display: flex;
2090
+ flex-direction: column;
2091
+ gap: 0.3rem;
2092
+ }
2093
+ .ra-shell .ra-rule-filters-row {
2094
+ display: flex;
2095
+ flex-wrap: wrap;
2096
+ gap: 0.25rem;
2097
+ }
2098
+ .ra-shell .ra-rule-filter-chip {
2099
+ display: inline-flex;
2100
+ align-items: center;
2101
+ gap: 0.3rem;
2102
+ padding: 0.15rem 0.5rem;
2103
+ border-radius: 999px;
2104
+ font-size: 0.65rem;
2105
+ font-weight: 500;
2106
+ line-height: 1.4;
2107
+ background: hsl(var(--ra-muted));
2108
+ color: hsl(var(--ra-muted-text));
2109
+ border: 1px solid hsl(var(--ra-border));
2110
+ cursor: pointer;
2111
+ transition:
2112
+ background .12s ease,
2113
+ color .12s ease,
2114
+ border-color .12s ease;
2115
+ max-width: 100%;
2116
+ }
2117
+ .ra-shell .ra-rule-filter-chip:hover {
2118
+ background: hsl(var(--ra-accent) / 0.10);
2119
+ color: hsl(var(--ra-text));
2120
+ border-color: hsl(var(--ra-accent) / 0.25);
2121
+ }
2122
+ .ra-shell .ra-rule-filter-chip[data-active=true] {
2123
+ background: hsl(var(--ra-accent) / 0.15);
2124
+ color: hsl(var(--ra-accent));
2125
+ border-color: hsl(var(--ra-accent) / 0.40);
2126
+ }
2127
+ .ra-shell .ra-rule-filter-chip[data-tone=complexity][data-active=true] {
2128
+ background: hsl(var(--ra-info) / 0.15);
2129
+ color: hsl(var(--ra-info));
2130
+ border-color: hsl(var(--ra-info) / 0.40);
2131
+ }
2132
+ .ra-shell .ra-rule-filter-chip-label {
2133
+ white-space: nowrap;
2134
+ overflow: hidden;
2135
+ text-overflow: ellipsis;
2136
+ max-width: 9rem;
2137
+ }
2138
+ .ra-shell .ra-rule-filter-chip-count {
2139
+ display: inline-flex;
2140
+ align-items: center;
2141
+ justify-content: center;
2142
+ min-width: 1.1rem;
2143
+ height: 1rem;
2144
+ padding: 0 0.3rem;
2145
+ border-radius: 999px;
2146
+ background: hsl(var(--ra-surface));
2147
+ color: hsl(var(--ra-muted-text));
2148
+ font-size: 0.6rem;
2149
+ font-weight: 600;
2150
+ }
2151
+ .ra-shell .ra-rule-filter-chip[data-active=true] .ra-rule-filter-chip-count {
2152
+ background: hsl(var(--ra-accent) / 0.18);
2153
+ color: hsl(var(--ra-accent));
2154
+ }
2155
+ .ra-shell .ra-rule-filter-clear {
2156
+ align-self: flex-start;
2157
+ background: transparent;
2158
+ border: 0;
2159
+ padding: 0;
2160
+ color: hsl(var(--ra-muted-text));
2161
+ font-size: 0.65rem;
2162
+ cursor: pointer;
2163
+ text-decoration: underline;
2164
+ text-decoration-style: dotted;
2165
+ }
2166
+ .ra-shell .ra-rule-filter-clear:hover {
2167
+ color: hsl(var(--ra-text));
2168
+ }
2169
+ .ra-shell[data-density=compact] .ra-row {
2170
+ padding-block: 0.3rem;
2171
+ gap: 0.45rem;
2172
+ }
2173
+ .ra-shell[data-density=compact] .ra-row-title {
2174
+ font-size: 0.78125rem;
2175
+ }
2176
+ .ra-shell .ra-row-actions {
2177
+ display: inline-flex;
2178
+ align-items: center;
2179
+ gap: 0.15rem;
2180
+ margin-left: auto;
2181
+ opacity: 0;
2182
+ transition: opacity .15s ease;
2183
+ }
2184
+ .ra-shell .ra-row:hover .ra-row-actions,
2185
+ .ra-shell .ra-row:focus-within .ra-row-actions {
2186
+ opacity: 1;
2187
+ }
2188
+ .ra-shell .ra-row-action {
2189
+ width: 1.6rem;
2190
+ height: 1.6rem;
2191
+ display: inline-flex;
2192
+ align-items: center;
2193
+ justify-content: center;
2194
+ border-radius: 999px;
2195
+ background: transparent;
2196
+ color: hsl(var(--ra-muted-text));
2197
+ border: 0;
2198
+ cursor: pointer;
2199
+ transition: background .15s ease, color .15s ease;
2200
+ }
2201
+ .ra-shell .ra-row-action:hover {
2202
+ background: hsl(var(--ra-accent) / 0.10);
2203
+ color: hsl(var(--ra-text));
2204
+ }
2205
+ .ra-shell .ra-row-action[data-tone=danger]:hover {
2206
+ background: hsl(var(--ra-danger) / 0.12);
2207
+ color: hsl(var(--ra-danger));
2208
+ }
2209
+ .ra-shell .ra-chip {
2210
+ display: inline-flex;
2211
+ align-items: center;
2212
+ gap: 0.3rem;
2213
+ padding: 0.15rem 0.5rem;
2214
+ border-radius: 999px;
2215
+ font-size: 0.6875rem;
2216
+ font-weight: 500;
2217
+ background: hsl(var(--ra-muted));
2218
+ color: hsl(var(--ra-muted-text));
2219
+ border: 1px solid hsl(var(--ra-border));
2220
+ white-space: nowrap;
2221
+ max-width: 14rem;
2222
+ overflow: hidden;
2223
+ text-overflow: ellipsis;
2224
+ }
2225
+ .ra-shell .ra-chip[data-tone=success] {
2226
+ background: hsl(var(--ra-success) / 0.12);
2227
+ color: hsl(var(--ra-success));
2228
+ border-color: hsl(var(--ra-success) / 0.30);
2229
+ }
2230
+ .ra-shell .ra-chip[data-tone=warning] {
2231
+ background: hsl(var(--ra-warning) / 0.14);
2232
+ color: hsl(var(--ra-warning));
2233
+ border-color: hsl(var(--ra-warning) / 0.35);
2234
+ }
2235
+ .ra-shell .ra-chip[data-tone=info] {
2236
+ background: hsl(var(--ra-info) / 0.10);
2237
+ color: hsl(var(--ra-info));
2238
+ border-color: hsl(var(--ra-info) / 0.30);
2239
+ }
2240
+ .ra-shell .ra-chip[data-tone=danger] {
2241
+ background: hsl(var(--ra-danger) / 0.10);
2242
+ color: hsl(var(--ra-danger));
2243
+ border-color: hsl(var(--ra-danger) / 0.30);
2244
+ }
2245
+ .ra-shell .ra-chip[data-tone=muted] {
2246
+ background: transparent;
2247
+ color: hsl(var(--ra-muted-text));
2248
+ border-style: dashed;
2249
+ }
2250
+ .ra-shell .ra-group {
2251
+ border-bottom: 1px solid hsl(var(--ra-border));
2252
+ }
2253
+ .ra-shell .ra-group:last-child {
2254
+ border-bottom: 0;
2255
+ }
2256
+ .ra-shell .ra-group-summary {
2257
+ display: flex;
2258
+ align-items: center;
2259
+ gap: 0.5rem;
2260
+ width: 100%;
2261
+ padding: 0.5rem 0.85rem;
2262
+ background: hsl(var(--ra-muted) / 0.6);
2263
+ font-size: 0.7rem;
2264
+ font-weight: 600;
2265
+ text-transform: uppercase;
2266
+ letter-spacing: 0.04em;
2267
+ color: hsl(var(--ra-muted-text));
2268
+ border: 0;
2269
+ cursor: pointer;
2270
+ transition: background .12s ease;
2271
+ }
2272
+ .ra-shell .ra-group-summary:hover {
2273
+ background: hsl(var(--ra-muted));
2274
+ }
2275
+ .ra-shell .ra-group-summary .ra-group-chevron {
2276
+ transition: transform .15s ease;
2277
+ }
2278
+ .ra-shell .ra-group[data-open=false] .ra-group-chevron {
2279
+ transform: rotate(-90deg);
2280
+ }
2281
+ .ra-shell .ra-group-name {
2282
+ flex: 1;
2283
+ text-align: left;
2284
+ }
2285
+ .ra-shell .ra-group-count {
2286
+ font-size: 0.65rem;
2287
+ font-weight: 600;
2288
+ color: hsl(var(--ra-muted-text));
2289
+ background: hsl(var(--ra-surface));
2290
+ border: 1px solid hsl(var(--ra-border));
2291
+ border-radius: 999px;
2292
+ padding: 0.05rem 0.4rem;
2293
+ }
2294
+ .ra-shell .ra-group[data-open=false] .ra-group-body {
2295
+ display: none;
2296
+ }
2297
+ .ra-shell .ra-empty {
2298
+ display: flex;
2299
+ flex-direction: column;
2300
+ align-items: center;
2301
+ justify-content: center;
2302
+ text-align: center;
2303
+ padding: 2.5rem 1.5rem;
2304
+ gap: 0.75rem;
2305
+ }
2306
+ .ra-shell .ra-empty-icon {
2307
+ display: inline-flex;
2308
+ align-items: center;
2309
+ justify-content: center;
2310
+ width: 3.25rem;
2311
+ height: 3.25rem;
2312
+ border-radius: 999px;
2313
+ background: hsl(var(--ra-accent) / 0.08);
2314
+ color: hsl(var(--ra-accent));
2315
+ margin-bottom: 0.25rem;
2316
+ }
2317
+ .ra-shell .ra-empty-title {
2318
+ font-family: var(--ra-font-display);
2319
+ font-weight: var(--ra-display-weight);
2320
+ font-size: 1rem;
2321
+ color: hsl(var(--ra-text));
2322
+ margin: 0;
2323
+ letter-spacing: -0.01em;
2324
+ }
2325
+ .ra-shell .ra-empty-body {
2326
+ font-size: 0.8125rem;
2327
+ color: hsl(var(--ra-muted-text));
2328
+ max-width: 22rem;
2329
+ line-height: 1.45;
2330
+ }
2331
+ .ra-shell .ra-empty-actions {
2332
+ display: flex;
2333
+ align-items: center;
2334
+ gap: 0.5rem;
2335
+ margin-top: 0.25rem;
2336
+ flex-wrap: wrap;
2337
+ justify-content: center;
2338
+ }
2339
+ .ra-shell .ra-btn {
2340
+ display: inline-flex;
2341
+ align-items: center;
2342
+ gap: 0.4rem;
2343
+ padding: 0.45rem 0.85rem;
2344
+ border-radius: calc(var(--ra-radius) * 0.7);
2345
+ font-size: 0.8125rem;
2346
+ font-weight: 500;
2347
+ border: 1px solid hsl(var(--ra-border));
2348
+ background: hsl(var(--ra-surface));
2349
+ color: hsl(var(--ra-text));
2350
+ cursor: pointer;
2351
+ transition:
2352
+ background .15s ease,
2353
+ border-color .15s ease,
2354
+ box-shadow .15s ease,
2355
+ transform .1s ease;
2356
+ }
2357
+ .ra-shell .ra-btn:hover {
2358
+ background: hsl(var(--ra-muted));
2359
+ box-shadow: var(--ra-card-shadow);
2360
+ }
2361
+ .ra-shell .ra-btn:active {
2362
+ transform: translateY(1px);
2363
+ }
2364
+ .ra-shell .ra-btn[data-variant=primary] {
2365
+ background: hsl(var(--ra-accent));
2366
+ color: hsl(var(--ra-surface));
2367
+ border-color: hsl(var(--ra-accent));
2368
+ }
2369
+ .ra-shell .ra-btn[data-variant=primary]:hover {
2370
+ background: hsl(var(--ra-accent) / 0.92);
2371
+ }
2372
+ .ra-shell .ra-btn[data-variant=ghost] {
2373
+ background: transparent;
2374
+ border-color: transparent;
2375
+ color: hsl(var(--ra-muted-text));
2376
+ }
2377
+ .ra-shell .ra-btn[data-variant=ghost]:hover {
2378
+ background: hsl(var(--ra-muted));
2379
+ color: hsl(var(--ra-text));
2380
+ }
2381
+ .ra-shell .ra-btn[data-variant=danger] {
2382
+ color: hsl(var(--ra-danger));
2383
+ }
2384
+ .ra-shell .ra-btn[data-variant=danger]:hover {
2385
+ background: hsl(var(--ra-danger) / 0.10);
2386
+ border-color: hsl(var(--ra-danger) / 0.40);
2387
+ }
2388
+ .ra-shell .ra-intro {
2389
+ position: relative;
2390
+ display: flex;
2391
+ align-items: center;
2392
+ gap: 0.55rem;
2393
+ padding: 0.4rem 2rem 0.4rem 0.5rem;
2394
+ border-radius: var(--ra-radius);
2395
+ border: 1px solid hsl(var(--ra-info) / 0.30);
2396
+ background: hsl(var(--ra-info) / 0.08);
2397
+ }
2398
+ .ra-shell .ra-intro[data-tone=success] {
2399
+ border-color: hsl(var(--ra-success) / 0.30);
2400
+ background: hsl(var(--ra-success) / 0.08);
2401
+ }
2402
+ .ra-shell .ra-intro[data-tone=warning] {
2403
+ border-color: hsl(var(--ra-warning) / 0.35);
2404
+ background: hsl(var(--ra-warning) / 0.10);
2405
+ }
2406
+ .ra-shell .ra-intro-icon {
2407
+ flex-shrink: 0;
2408
+ width: 1.5rem;
2409
+ height: 1.5rem;
2410
+ border-radius: 999px;
2411
+ display: inline-flex;
2412
+ align-items: center;
2413
+ justify-content: center;
2414
+ background: hsl(var(--ra-info) / 0.18);
2415
+ color: hsl(var(--ra-info));
2416
+ }
2417
+ .ra-shell .ra-intro[data-tone=success] .ra-intro-icon {
2418
+ background: hsl(var(--ra-success) / 0.18);
2419
+ color: hsl(var(--ra-success));
2420
+ }
2421
+ .ra-shell .ra-intro[data-tone=warning] .ra-intro-icon {
2422
+ background: hsl(var(--ra-warning) / 0.20);
2423
+ color: hsl(var(--ra-warning));
2424
+ }
2425
+ .ra-shell .ra-intro-body {
2426
+ flex: 1;
2427
+ min-width: 0;
2428
+ }
2429
+ .ra-shell .ra-intro-title {
2430
+ font-family: var(--ra-font-display);
2431
+ font-weight: var(--ra-title-weight);
2432
+ font-size: 0.8rem;
2433
+ color: hsl(var(--ra-text));
2434
+ margin: 0;
2435
+ line-height: 1.2;
2436
+ display: inline;
2437
+ }
2438
+ .ra-shell .ra-intro-text {
2439
+ font-size: 0.78rem;
2440
+ color: hsl(var(--ra-text) / 0.85);
2441
+ line-height: 1.35;
2442
+ display: inline;
2443
+ margin-left: 0.4rem;
2444
+ }
2445
+ .ra-shell .ra-intro-dismiss {
2446
+ position: absolute;
2447
+ top: 50%;
2448
+ right: 0.35rem;
2449
+ transform: translateY(-50%);
2450
+ width: 1.4rem;
2451
+ height: 1.4rem;
2452
+ border-radius: 999px;
2453
+ display: inline-flex;
2454
+ align-items: center;
2455
+ justify-content: center;
2456
+ background: transparent;
2457
+ border: 0;
2458
+ color: hsl(var(--ra-muted-text));
2459
+ cursor: pointer;
2460
+ padding: 0;
2461
+ flex-shrink: 0;
2462
+ }
2463
+ .ra-shell .ra-intro-dismiss:hover {
2464
+ background: hsl(var(--ra-text) / 0.06);
2465
+ color: hsl(var(--ra-text));
2466
+ }
2467
+ .ra-shell .ra-bulk-menu {
2468
+ min-width: 12rem;
2469
+ background: hsl(var(--ra-surface));
2470
+ border: 1px solid hsl(var(--ra-border));
2471
+ border-radius: calc(var(--ra-radius) * 0.85);
2472
+ box-shadow: var(--ra-card-shadow-hover);
2473
+ padding: 0.3rem;
2474
+ z-index: 60;
2475
+ }
2476
+ .ra-shell .ra-bulk-item {
2477
+ display: flex;
2478
+ align-items: center;
2479
+ gap: 0.55rem;
2480
+ width: 100%;
2481
+ padding: 0.45rem 0.6rem;
2482
+ border-radius: calc(var(--ra-radius) * 0.6);
2483
+ font-size: 0.8125rem;
2484
+ color: hsl(var(--ra-text));
2485
+ background: transparent;
2486
+ border: 0;
2487
+ cursor: pointer;
2488
+ text-align: left;
2489
+ transition: background .12s ease, color .12s ease;
2490
+ }
2491
+ .ra-shell .ra-bulk-item:hover {
2492
+ background: hsl(var(--ra-muted));
2493
+ }
2494
+ .ra-shell .ra-bulk-item[data-tone=danger] {
2495
+ color: hsl(var(--ra-danger));
2496
+ }
2497
+ .ra-shell .ra-bulk-item[data-tone=danger]:hover {
2498
+ background: hsl(var(--ra-danger) / 0.10);
2499
+ }
2500
+ .ra-shell .ra-bulk-divider {
2501
+ height: 1px;
2502
+ background: hsl(var(--ra-border));
2503
+ margin: 0.25rem 0;
2504
+ }
2505
+ .ra-shell .ra-preview-rail {
2506
+ background: hsl(var(--ra-surface));
2507
+ border-left: 1px solid hsl(var(--ra-border));
2508
+ box-shadow: -4px 0 16px hsl(var(--ra-accent) / 0.04);
2509
+ display: flex;
2510
+ flex-direction: column;
2511
+ height: 100%;
2512
+ overflow: hidden;
2513
+ }
2514
+ .ra-shell .ra-preview-rail-header {
2515
+ position: sticky;
2516
+ top: 0;
2517
+ z-index: 1;
2518
+ display: flex;
2519
+ align-items: center;
2520
+ gap: 0.5rem;
2521
+ padding: 0.75rem 1rem;
2522
+ background:
2523
+ linear-gradient(
2524
+ 180deg,
2525
+ hsl(var(--ra-surface)) 0%,
2526
+ hsl(var(--ra-surface) / 0.92) 100%);
2527
+ border-bottom: 1px solid hsl(var(--ra-border));
2528
+ backdrop-filter: blur(6px);
2529
+ }
2530
+ .ra-shell .ra-preview-rail-title {
2531
+ display: inline-flex;
2532
+ align-items: center;
2533
+ gap: 0.4rem;
2534
+ font-size: 0.7rem;
2535
+ font-weight: 600;
2536
+ text-transform: uppercase;
2537
+ letter-spacing: 0.06em;
2538
+ color: hsl(var(--ra-muted-text));
2539
+ }
2540
+ .ra-shell .ra-preview-rail-body {
2541
+ flex: 1;
2542
+ overflow-y: auto;
2543
+ padding: 1rem;
2544
+ }
2545
+ .ra-confirm-root {
2546
+ position: fixed;
2547
+ inset: 0;
2548
+ z-index: 2147483000;
2549
+ display: flex;
2550
+ align-items: center;
2551
+ justify-content: center;
2552
+ padding: 1rem;
2553
+ background: transparent;
2554
+ }
2555
+ .ra-confirm-root .ra-confirm-backdrop {
2556
+ position: absolute;
2557
+ inset: 0;
2558
+ background: hsl(0 0% 0% / 0.45);
2559
+ backdrop-filter: blur(2px);
2560
+ animation: ra-confirm-fade .12s ease-out;
2561
+ }
2562
+ .ra-confirm-root .ra-confirm-card {
2563
+ position: relative;
2564
+ width: min(440px, 100%);
2565
+ background: hsl(var(--ra-surface));
2566
+ color: hsl(var(--ra-text));
2567
+ border: 1px solid hsl(var(--ra-border));
2568
+ border-radius: var(--ra-radius);
2569
+ box-shadow: 0 1px 2px hsl(0 0% 0% / 0.08), 0 24px 48px -12px hsl(0 0% 0% / 0.32);
2570
+ padding: 1.25rem;
2571
+ animation: ra-confirm-pop .14s ease-out;
2572
+ }
2573
+ .ra-confirm-root .ra-confirm-header {
2574
+ display: flex;
2575
+ align-items: center;
2576
+ gap: 0.6rem;
2577
+ margin-bottom: 0.5rem;
2578
+ }
2579
+ .ra-confirm-root .ra-confirm-icon {
2580
+ display: inline-flex;
2581
+ align-items: center;
2582
+ justify-content: center;
2583
+ width: 1.75rem;
2584
+ height: 1.75rem;
2585
+ border-radius: 999px;
2586
+ background: hsl(var(--ra-warning, 38 92% 50%) / 0.12);
2587
+ color: hsl(var(--ra-warning, 38 92% 50%));
2588
+ }
2589
+ .ra-confirm-root .ra-confirm-title {
2590
+ font-family: var(--ra-font-display);
2591
+ font-weight: 600;
2592
+ font-size: 1rem;
2593
+ margin: 0;
2594
+ }
2595
+ .ra-confirm-root .ra-confirm-body {
2596
+ font-size: 0.875rem;
2597
+ color: hsl(var(--ra-muted-text));
2598
+ margin: 0 0 1.1rem;
2599
+ line-height: 1.45;
2600
+ }
2601
+ .ra-confirm-root .ra-confirm-actions {
2602
+ display: flex;
2603
+ justify-content: flex-end;
2604
+ gap: 0.5rem;
2605
+ flex-wrap: wrap;
2606
+ }
2607
+ .ra-confirm-root .ra-confirm-btn {
2608
+ -webkit-appearance: none;
2609
+ -moz-appearance: none;
2610
+ appearance: none;
2611
+ border: 1px solid transparent;
2612
+ border-radius: calc(var(--ra-radius) - 2px);
2613
+ padding: 0.45rem 0.85rem;
2614
+ font-size: 0.8125rem;
2615
+ font-weight: 500;
2616
+ cursor: pointer;
2617
+ transition:
2618
+ background-color .12s ease,
2619
+ border-color .12s ease,
2620
+ color .12s ease;
2621
+ }
2622
+ .ra-confirm-root .ra-confirm-btn:focus-visible {
2623
+ outline: none;
2624
+ box-shadow: 0 0 0 3px var(--ra-focus-ring);
2625
+ }
2626
+ .ra-confirm-root .ra-confirm-btn-ghost {
2627
+ background: transparent;
2628
+ color: hsl(var(--ra-muted-text));
2629
+ border-color: hsl(var(--ra-border));
2630
+ }
2631
+ .ra-confirm-root .ra-confirm-btn-ghost:hover {
2632
+ background: hsl(var(--ra-muted));
2633
+ color: hsl(var(--ra-text));
2634
+ }
2635
+ .ra-confirm-root .ra-confirm-btn-danger {
2636
+ background: transparent;
2637
+ color: hsl(var(--ra-danger, 0 72% 51%));
2638
+ border-color: hsl(var(--ra-danger, 0 72% 51%) / 0.45);
2639
+ }
2640
+ .ra-confirm-root .ra-confirm-btn-danger:hover {
2641
+ background: hsl(var(--ra-danger, 0 72% 51%) / 0.08);
2642
+ border-color: hsl(var(--ra-danger, 0 72% 51%));
2643
+ }
2644
+ .ra-confirm-root .ra-confirm-btn-primary {
2645
+ background: hsl(var(--ra-accent));
2646
+ color: hsl(var(--ra-accent-fg, 0 0% 100%));
2647
+ border-color: hsl(var(--ra-accent));
2648
+ }
2649
+ .ra-confirm-root .ra-confirm-btn-primary:hover {
2650
+ filter: brightness(0.95);
2651
+ }
2652
+ @keyframes ra-confirm-fade {
2653
+ from {
2654
+ opacity: 0;
2655
+ }
2656
+ to {
2657
+ opacity: 1;
2658
+ }
2659
+ }
2660
+ @keyframes ra-confirm-pop {
2661
+ from {
2662
+ opacity: 0;
2663
+ transform: translateY(4px) scale(.98);
2664
+ }
2665
+ to {
2666
+ opacity: 1;
2667
+ transform: translateY(0) scale(1);
2668
+ }
2669
+ }
2670
+ .ra-shell .ra-unsaved-banner {
2671
+ display: flex;
2672
+ align-items: center;
2673
+ gap: 0.6rem;
2674
+ padding: 0.5rem 0.75rem;
2675
+ border: 1px solid hsl(var(--ra-warning, 38 92% 50%) / 0.35);
2676
+ background: hsl(var(--ra-warning, 38 92% 50%) / 0.08);
2677
+ border-radius: var(--ra-radius);
2678
+ font-size: 0.8125rem;
2679
+ color: hsl(var(--ra-text));
2680
+ animation: ra-unsaved-slide .14s ease-out;
2681
+ }
2682
+ .ra-shell .ra-unsaved-icon {
2683
+ display: inline-flex;
2684
+ align-items: center;
2685
+ justify-content: center;
2686
+ color: hsl(var(--ra-warning, 38 92% 50%));
2687
+ flex-shrink: 0;
2688
+ }
2689
+ .ra-shell .ra-unsaved-text {
2690
+ flex: 1;
2691
+ min-width: 0;
2692
+ overflow: hidden;
2693
+ text-overflow: ellipsis;
2694
+ white-space: nowrap;
2695
+ }
2696
+ .ra-shell .ra-unsaved-context {
2697
+ color: hsl(var(--ra-muted-text));
2698
+ font-weight: 400;
2699
+ }
2700
+ .ra-shell .ra-unsaved-error {
2701
+ color: hsl(var(--ra-danger, 0 72% 51%));
2702
+ font-size: 0.75rem;
2703
+ text-transform: uppercase;
2704
+ letter-spacing: 0.04em;
2705
+ font-weight: 500;
2706
+ }
2707
+ .ra-shell .ra-unsaved-actions {
2708
+ display: inline-flex;
2709
+ gap: 0.4rem;
2710
+ flex-shrink: 0;
2711
+ }
2712
+ .ra-shell .ra-unsaved-btn {
2713
+ display: inline-flex;
2714
+ align-items: center;
2715
+ gap: 0.3rem;
2716
+ -webkit-appearance: none;
2717
+ -moz-appearance: none;
2718
+ appearance: none;
2719
+ border: 1px solid transparent;
2720
+ border-radius: calc(var(--ra-radius) - 2px);
2721
+ padding: 0.3rem 0.6rem;
2722
+ font-size: 0.75rem;
2723
+ font-weight: 500;
2724
+ cursor: pointer;
2725
+ transition:
2726
+ background-color .12s ease,
2727
+ border-color .12s ease,
2728
+ color .12s ease,
2729
+ opacity .12s ease;
2730
+ }
2731
+ .ra-shell .ra-unsaved-btn:disabled {
2732
+ opacity: 0.5;
2733
+ cursor: not-allowed;
2734
+ }
2735
+ .ra-shell .ra-unsaved-btn:focus-visible {
2736
+ outline: none;
2737
+ box-shadow: 0 0 0 3px var(--ra-focus-ring);
2738
+ }
2739
+ .ra-shell .ra-unsaved-btn-ghost {
2740
+ background: transparent;
2741
+ color: hsl(var(--ra-muted-text));
2742
+ border-color: hsl(var(--ra-border));
2743
+ }
2744
+ .ra-shell .ra-unsaved-btn-ghost:hover:not(:disabled) {
2745
+ background: hsl(var(--ra-muted));
2746
+ color: hsl(var(--ra-text));
2747
+ }
2748
+ .ra-shell .ra-unsaved-btn-primary {
2749
+ background: hsl(var(--ra-accent));
2750
+ color: hsl(var(--ra-accent-fg, 0 0% 100%));
2751
+ border-color: hsl(var(--ra-accent));
2752
+ }
2753
+ .ra-shell .ra-unsaved-btn-primary:hover:not(:disabled) {
2754
+ filter: brightness(0.95);
2755
+ }
2756
+ .sl-aph .ra-unsaved-btn {
2757
+ display: inline-flex;
2758
+ align-items: center;
2759
+ gap: 0.3rem;
2760
+ -webkit-appearance: none;
2761
+ -moz-appearance: none;
2762
+ appearance: none;
2763
+ border: 1px solid transparent;
2764
+ border-radius: calc(var(--ra-radius, 8px) - 2px);
2765
+ padding: 0.3rem 0.6rem;
2766
+ font-size: 0.75rem;
2767
+ font-weight: 500;
2768
+ cursor: pointer;
2769
+ transition:
2770
+ background-color .12s ease,
2771
+ border-color .12s ease,
2772
+ color .12s ease,
2773
+ opacity .12s ease;
2774
+ }
2775
+ .sl-aph .ra-unsaved-btn:disabled {
2776
+ opacity: 0.5;
2777
+ cursor: not-allowed;
2778
+ }
2779
+ .sl-aph .ra-unsaved-btn:focus-visible {
2780
+ outline: none;
2781
+ box-shadow: 0 0 0 3px var(--ra-focus-ring, 0 0 0 3px hsl(var(--ra-accent) / 0.35));
2782
+ }
2783
+ .sl-aph .ra-unsaved-btn-ghost {
2784
+ background: transparent;
2785
+ color: hsl(var(--ra-muted-text));
2786
+ border-color: hsl(var(--ra-border));
2787
+ }
2788
+ .sl-aph .ra-unsaved-btn-ghost:hover:not(:disabled) {
2789
+ background: hsl(var(--ra-muted));
2790
+ color: hsl(var(--ra-text));
2791
+ }
2792
+ .sl-aph .ra-unsaved-btn-primary {
2793
+ background: hsl(var(--ra-accent));
2794
+ color: hsl(var(--ra-accent-fg, 0 0% 100%));
2795
+ border-color: hsl(var(--ra-accent));
2796
+ }
2797
+ .sl-aph .ra-unsaved-btn-primary:hover:not(:disabled) {
2798
+ filter: brightness(0.95);
2799
+ }
2800
+ .sl-aph .ra-unsaved-icon {
2801
+ display: inline-flex;
2802
+ align-items: center;
2803
+ justify-content: center;
2804
+ color: hsl(var(--ra-warning, 38 92% 50%));
2805
+ flex-shrink: 0;
2806
+ }
2807
+ @keyframes ra-unsaved-slide {
2808
+ from {
2809
+ opacity: 0;
2810
+ transform: translateY(-3px);
2811
+ }
2812
+ to {
2813
+ opacity: 1;
2814
+ transform: translateY(0);
2815
+ }
2816
+ }
2817
+ .ra-shell .ra-unsaved-pill,
2818
+ .sl-aph .ra-unsaved-pill {
2819
+ display: inline-flex;
2820
+ align-items: center;
2821
+ gap: 0.4rem;
2822
+ padding: 0.25rem 0.5rem 0.25rem 0.6rem;
2823
+ border: 1px solid hsl(var(--ra-warning, 38 92% 50%) / 0.35);
2824
+ background: hsl(var(--ra-warning, 38 92% 50%) / 0.08);
2825
+ border-radius: 999px;
2826
+ animation: ra-unsaved-slide .14s ease-out;
2827
+ }
2828
+ .ra-shell .ra-unsaved-pill .ra-unsaved-pill-text,
2829
+ .sl-aph .ra-unsaved-pill .ra-unsaved-pill-text {
2830
+ font-size: 0.75rem;
2831
+ font-weight: 500;
2832
+ color: hsl(var(--ra-text));
2833
+ white-space: nowrap;
2834
+ margin-right: 0.15rem;
2835
+ }
2836
+ .ra-shell .ra-clipboard-toast {
2837
+ position: fixed;
2838
+ bottom: 1.25rem;
2839
+ left: 50%;
2840
+ transform: translateX(-50%);
2841
+ z-index: 90;
2842
+ display: inline-flex;
2843
+ align-items: center;
2844
+ gap: 0.5rem;
2845
+ max-width: min(28rem, calc(100vw - 2rem));
2846
+ padding: 0.55rem 0.85rem;
2847
+ border-radius: 999px;
2848
+ background: hsl(var(--ra-text));
2849
+ color: hsl(var(--ra-surface));
2850
+ font-size: 0.75rem;
2851
+ line-height: 1;
2852
+ box-shadow: 0 8px 24px -10px hsl(0 0% 0% / 0.45);
2853
+ animation: ra-clipboard-pop 0.18s ease-out both;
2854
+ pointer-events: none;
2855
+ }
2856
+ @keyframes ra-clipboard-pop {
2857
+ from {
2858
+ opacity: 0;
2859
+ transform: translate(-50%, 6px);
2860
+ }
2861
+ to {
2862
+ opacity: 1;
2863
+ transform: translate(-50%, 0);
2864
+ }
2865
+ }
2866
+ .ra-shell .ra-row-menu-wrap {
2867
+ display: inline-flex;
2868
+ align-items: center;
2869
+ margin-left: 0.25rem;
2870
+ }
2871
+ .ra-shell .ra-row-menu-trigger {
2872
+ display: inline-flex;
2873
+ align-items: center;
2874
+ justify-content: center;
2875
+ width: 1.5rem;
2876
+ height: 1.5rem;
2877
+ border-radius: 0.35rem;
2878
+ background: transparent;
2879
+ color: hsl(var(--ra-muted-text));
2880
+ opacity: 0;
2881
+ transition:
2882
+ opacity .15s ease,
2883
+ background .15s ease,
2884
+ color .15s ease;
2885
+ border: 1px solid transparent;
2886
+ }
2887
+ .ra-shell .ra-row:hover .ra-row-menu-trigger,
2888
+ .ra-shell .ra-card-hover:hover .ra-row-menu-trigger,
2889
+ .ra-shell .ra-row-menu-trigger:focus-visible,
2890
+ .ra-shell .ra-row-menu-trigger[aria-expanded=true] {
2891
+ opacity: 1;
2892
+ }
2893
+ .ra-shell .ra-row-menu-trigger:hover {
2894
+ background: hsl(var(--ra-muted));
2895
+ color: hsl(var(--ra-text));
2896
+ }
2897
+ .ra-shell .ra-row-menu {
2898
+ position: absolute;
2899
+ right: 0;
2900
+ top: calc(100% + 4px);
2901
+ z-index: 50;
2902
+ min-width: 11rem;
2903
+ padding: 0.25rem;
2904
+ border-radius: 0.5rem;
2905
+ background: hsl(var(--ra-surface));
2906
+ border: 1px solid hsl(var(--ra-border));
2907
+ box-shadow: 0 12px 28px -10px hsl(0 0% 0% / 0.25);
2908
+ display: flex;
2909
+ flex-direction: column;
2910
+ gap: 0.125rem;
2911
+ }
2912
+ .ra-shell .ra-row-menu-item {
2913
+ display: inline-flex;
2914
+ align-items: center;
2915
+ gap: 0.5rem;
2916
+ padding: 0.4rem 0.55rem;
2917
+ border-radius: 0.35rem;
2918
+ font-size: 0.75rem;
2919
+ color: hsl(var(--ra-text));
2920
+ background: transparent;
2921
+ border: 0;
2922
+ text-align: left;
2923
+ width: 100%;
2924
+ cursor: pointer;
2925
+ }
2926
+ .ra-shell .ra-row-menu-item:hover:not(:disabled) {
2927
+ background: hsl(var(--ra-muted));
2928
+ }
2929
+ .ra-shell .ra-row-menu-item:disabled {
2930
+ opacity: 0.45;
2931
+ cursor: not-allowed;
2932
+ }
2933
+ .ra-shell .ra-item-list {
2934
+ display: flex;
2935
+ flex-direction: column;
2936
+ height: 100%;
2937
+ min-height: 0;
2938
+ }
2939
+ .ra-shell .ra-item-list-body {
2940
+ flex: 1;
2941
+ min-height: 0;
2942
+ overflow: auto;
2943
+ padding: 1rem 1.25rem 1.5rem;
2944
+ }
2945
+ .ra-shell .ra-item-toolbar {
2946
+ display: flex;
2947
+ align-items: center;
2948
+ justify-content: space-between;
2949
+ gap: 0.75rem;
2950
+ padding: 0.75rem 1.25rem;
2951
+ border-bottom: 1px solid hsl(var(--ra-border));
2952
+ background: hsl(var(--ra-surface));
2953
+ }
2954
+ .ra-shell .ra-item-toolbar-title {
2955
+ display: flex;
2956
+ align-items: baseline;
2957
+ gap: 0.5rem;
2958
+ min-width: 0;
2959
+ }
2960
+ .ra-shell .ra-item-toolbar-count {
2961
+ font-size: 0.7rem;
2962
+ font-weight: 600;
2963
+ color: hsl(var(--ra-muted-text));
2964
+ background: hsl(var(--ra-muted));
2965
+ border: 1px solid hsl(var(--ra-border));
2966
+ border-radius: 999px;
2967
+ padding: 0.05rem 0.45rem;
2968
+ }
2969
+ .ra-shell .ra-item-toolbar-actions {
2970
+ display: flex;
2971
+ align-items: center;
2972
+ gap: 0.5rem;
2973
+ flex-shrink: 0;
2974
+ }
2975
+ .ra-shell .ra-item-table-wrap {
2976
+ border: 1px solid hsl(var(--ra-border));
2977
+ border-radius: var(--ra-radius);
2978
+ background: hsl(var(--ra-surface));
2979
+ overflow: hidden;
2980
+ box-shadow: var(--ra-card-shadow);
2981
+ }
2982
+ .ra-shell .ra-item-table {
2983
+ width: 100%;
2984
+ border-collapse: collapse;
2985
+ font-size: 0.85rem;
2986
+ color: hsl(var(--ra-text));
2987
+ }
2988
+ .ra-shell .ra-item-table thead th {
2989
+ text-align: left;
2990
+ font-size: 0.7rem;
2991
+ font-weight: 600;
2992
+ text-transform: uppercase;
2993
+ letter-spacing: 0.04em;
2994
+ color: hsl(var(--ra-muted-text));
2995
+ padding: 0.65rem 0.85rem;
2996
+ background: hsl(var(--ra-muted) / 0.55);
2997
+ border-bottom: 1px solid hsl(var(--ra-border));
2998
+ }
2999
+ .ra-shell .ra-item-table tbody td {
3000
+ padding: 0.65rem 0.85rem;
3001
+ border-bottom: 1px solid hsl(var(--ra-border) / 0.7);
3002
+ vertical-align: middle;
3003
+ }
3004
+ .ra-shell .ra-item-table tbody tr:last-child td {
3005
+ border-bottom: 0;
3006
+ }
3007
+ .ra-shell .ra-item-row {
3008
+ cursor: pointer;
3009
+ transition: background .12s ease;
3010
+ }
3011
+ .ra-shell .ra-item-row:hover {
3012
+ background: var(--ra-row-hover);
3013
+ }
3014
+ .ra-shell .ra-item-row[data-selected=true] {
3015
+ background: var(--ra-row-active-bg);
3016
+ }
3017
+ .ra-shell .ra-item-row-title {
3018
+ font-weight: var(--ra-title-weight);
3019
+ color: hsl(var(--ra-text));
3020
+ }
3021
+ .ra-shell .ra-item-row-sub {
3022
+ font-size: 0.75rem;
3023
+ color: hsl(var(--ra-muted-text));
3024
+ margin-top: 0.15rem;
3025
+ }
3026
+ .ra-shell .ra-item-row-meta {
3027
+ font-size: 0.78rem;
3028
+ color: hsl(var(--ra-muted-text));
3029
+ }
3030
+ .ra-shell .ra-item-row-actions {
3031
+ text-align: right;
3032
+ white-space: nowrap;
3033
+ }
3034
+ .ra-shell .ra-item-row-actions .ra-row-action + .ra-row-action {
3035
+ margin-left: 0.15rem;
3036
+ }
3037
+ .ra-shell .ra-item-cards {
3038
+ display: grid;
3039
+ grid-template-columns: repeat(auto-fill, minmax(var(--ra-item-card-min, 240px), 1fr));
3040
+ gap: 0.85rem;
3041
+ }
3042
+ .ra-shell .ra-item-gallery {
3043
+ display: grid;
3044
+ grid-template-columns: repeat(auto-fill, minmax(var(--ra-item-gallery-min, 320px), 1fr));
3045
+ gap: 1rem;
3046
+ }
3047
+ .ra-shell .ra-item-cards[data-card-size=sm] {
3048
+ --ra-item-card-min: 180px;
3049
+ }
3050
+ .ra-shell .ra-item-cards[data-card-size=md] {
3051
+ --ra-item-card-min: 240px;
3052
+ }
3053
+ .ra-shell .ra-item-cards[data-card-size=lg] {
3054
+ --ra-item-card-min: 320px;
3055
+ gap: 1rem;
3056
+ }
3057
+ .ra-shell .ra-item-gallery[data-card-size=sm] {
3058
+ --ra-item-gallery-min: 240px;
3059
+ }
3060
+ .ra-shell .ra-item-gallery[data-card-size=md] {
3061
+ --ra-item-gallery-min: 320px;
3062
+ }
3063
+ .ra-shell .ra-item-gallery[data-card-size=lg] {
3064
+ --ra-item-gallery-min: 420px;
3065
+ gap: 1.25rem;
3066
+ }
3067
+ .ra-shell .ra-item-cards[data-card-size=lg] .ra-item-card-title,
3068
+ .ra-shell .ra-item-gallery[data-card-size=lg] .ra-item-card-title {
3069
+ font-size: 0.95rem;
3070
+ white-space: normal;
3071
+ display: -webkit-box;
3072
+ -webkit-line-clamp: 2;
3073
+ -webkit-box-orient: vertical;
3074
+ }
3075
+ .ra-shell .ra-item-cards[data-card-size=lg] .ra-item-card-body,
3076
+ .ra-shell .ra-item-gallery[data-card-size=lg] .ra-item-card-body {
3077
+ padding: 0.85rem 1rem 1rem;
3078
+ }
3079
+ .ra-shell .ra-item-card {
3080
+ position: relative;
3081
+ display: flex;
3082
+ flex-direction: column;
3083
+ align-items: stretch;
3084
+ text-align: left;
3085
+ padding: 0;
3086
+ background: hsl(var(--ra-surface));
3087
+ border: 1px solid hsl(var(--ra-border));
3088
+ border-radius: var(--ra-radius);
3089
+ overflow: hidden;
3090
+ cursor: pointer;
3091
+ transition:
3092
+ box-shadow .18s ease,
3093
+ transform .12s ease,
3094
+ border-color .15s ease;
3095
+ box-shadow: var(--ra-card-shadow);
3096
+ font-family: inherit;
3097
+ color: inherit;
3098
+ }
3099
+ .ra-shell .ra-item-card:hover {
3100
+ box-shadow: var(--ra-card-shadow-hover);
3101
+ border-color: hsl(var(--ra-accent) / 0.30);
3102
+ }
3103
+ .ra-shell .ra-item-card[data-selected=true] {
3104
+ border-color: hsl(var(--ra-accent) / 0.55);
3105
+ box-shadow: var(--ra-card-shadow-hover);
3106
+ }
3107
+ .ra-shell .ra-item-card-thumb {
3108
+ width: 100%;
3109
+ aspect-ratio: 1 / 1;
3110
+ background:
3111
+ linear-gradient(
3112
+ 135deg,
3113
+ hsl(var(--ra-accent) / 0.12),
3114
+ hsl(var(--ra-accent) / 0.04));
3115
+ display: flex;
3116
+ align-items: center;
3117
+ justify-content: center;
3118
+ color: hsl(var(--ra-accent));
3119
+ overflow: hidden;
3120
+ }
3121
+ .ra-shell .ra-item-card-thumb--gallery {
3122
+ aspect-ratio: 16 / 9;
3123
+ }
3124
+ .ra-shell .ra-item-card-thumb img {
3125
+ width: 100%;
3126
+ height: 100%;
3127
+ -o-object-fit: cover;
3128
+ object-fit: cover;
3129
+ }
3130
+ .ra-shell .ra-item-card-initials {
3131
+ font-family: var(--ra-font-display);
3132
+ font-weight: var(--ra-display-weight);
3133
+ font-size: 1.5rem;
3134
+ letter-spacing: 0.02em;
3135
+ }
3136
+ .ra-shell .ra-item-card-body {
3137
+ padding: 0.65rem 0.8rem 0.85rem;
3138
+ min-width: 0;
3139
+ }
3140
+ .ra-shell .ra-item-card-title {
3141
+ font-weight: var(--ra-title-weight);
3142
+ font-size: 0.85rem;
3143
+ white-space: nowrap;
3144
+ overflow: hidden;
3145
+ text-overflow: ellipsis;
3146
+ }
3147
+ .ra-shell .ra-item-card-sub {
3148
+ font-size: 0.75rem;
3149
+ color: hsl(var(--ra-muted-text));
3150
+ margin-top: 0.15rem;
3151
+ white-space: nowrap;
3152
+ overflow: hidden;
3153
+ text-overflow: ellipsis;
3154
+ }
3155
+ .ra-shell .ra-item-card-delete {
3156
+ position: absolute;
3157
+ top: 0.4rem;
3158
+ right: 0.4rem;
3159
+ background: hsl(var(--ra-surface) / 0.85);
3160
+ backdrop-filter: blur(4px);
3161
+ opacity: 0;
3162
+ transition: opacity .15s ease;
3163
+ }
3164
+ .ra-shell .ra-item-card:hover .ra-item-card-delete,
3165
+ .ra-shell .ra-item-card:focus-within .ra-item-card-delete {
3166
+ opacity: 1;
3167
+ }
3168
+ .ra-shell .ra-item-nav {
3169
+ display: flex;
3170
+ align-items: center;
3171
+ gap: 0.6rem;
3172
+ padding: 0.5rem 1.25rem;
3173
+ border-bottom: 1px solid hsl(var(--ra-border));
3174
+ background: hsl(var(--ra-surface));
3175
+ }
3176
+ .ra-shell .ra-item-nav-position {
3177
+ font-size: 0.72rem;
3178
+ color: hsl(var(--ra-muted-text));
3179
+ font-variant-numeric: tabular-nums;
3180
+ }
3181
+ .ra-shell .ra-item-nav-arrows {
3182
+ margin-left: auto;
3183
+ display: inline-flex;
3184
+ align-items: center;
3185
+ gap: 0.15rem;
3186
+ }
3187
+ .ra-shell .ra-item-nav-arrows .ra-row-action[disabled] {
3188
+ opacity: 0.35;
3189
+ cursor: not-allowed;
3190
+ }
3191
+ .ra-shell .ra-sibling-rail {
3192
+ display: flex;
3193
+ flex-direction: column;
3194
+ height: 100%;
3195
+ min-height: 0;
3196
+ }
3197
+ .ra-shell .ra-sibling-back {
3198
+ display: inline-flex;
3199
+ align-items: center;
3200
+ gap: 0.4rem;
3201
+ padding: 0.6rem 0.85rem;
3202
+ font-size: 0.75rem;
3203
+ font-weight: 500;
3204
+ color: hsl(var(--ra-muted-text));
3205
+ background: hsl(var(--ra-muted) / 0.5);
3206
+ border: 0;
3207
+ border-bottom: 1px solid hsl(var(--ra-border));
3208
+ cursor: pointer;
3209
+ text-align: left;
3210
+ transition: background .12s ease, color .12s ease;
3211
+ }
3212
+ .ra-shell .ra-sibling-back:hover {
3213
+ background: hsl(var(--ra-muted));
3214
+ color: hsl(var(--ra-text));
3215
+ }
3216
+ .ra-shell .ra-sibling-heading {
3217
+ padding: 0.6rem 0.85rem 0.4rem;
3218
+ font-size: 0.65rem;
3219
+ font-weight: 600;
3220
+ text-transform: uppercase;
3221
+ letter-spacing: 0.06em;
3222
+ color: hsl(var(--ra-muted-text));
3223
+ }
3224
+ .ra-shell .ra-sibling-body {
3225
+ flex: 1;
3226
+ min-height: 0;
3227
+ overflow-y: auto;
3228
+ }
3229
+ .ra-shell .ra-sibling-list {
3230
+ list-style: none;
3231
+ margin: 0;
3232
+ padding: 0;
3233
+ }
3234
+ .ra-shell .ra-status-icon {
3235
+ display: inline-flex;
3236
+ align-items: center;
3237
+ justify-content: center;
3238
+ flex-shrink: 0;
3239
+ border-radius: 9999px;
3240
+ }
3241
+ .ra-shell .ra-status-icon > svg {
3242
+ width: 100%;
3243
+ height: 100%;
3244
+ display: block;
3245
+ }
3246
+ .ra-shell .ra-status-icon--own {
3247
+ color: hsl(var(--ra-status-own));
3248
+ }
3249
+ .ra-shell .ra-status-icon--shared {
3250
+ color: hsl(var(--ra-status-shared));
3251
+ }
3252
+ .ra-shell .ra-status-icon--missing {
3253
+ color: hsl(var(--ra-status-missing) / 0.7);
3254
+ }
3255
+ .ra-shell .ra-row-status {
3256
+ display: inline-flex;
3257
+ align-items: center;
3258
+ justify-content: center;
3259
+ width: 1.5rem;
3260
+ height: 1.5rem;
3261
+ flex-shrink: 0;
3262
+ }
3263
+ .ra-shell .ra-row-scope {
3264
+ display: inline-flex;
3265
+ align-items: center;
3266
+ justify-content: center;
3267
+ width: 1.25rem;
3268
+ height: 1.25rem;
3269
+ border-radius: calc(var(--ra-radius) * 0.5);
3270
+ background: hsl(var(--ra-muted));
3271
+ color: hsl(var(--ra-muted-text));
3272
+ flex-shrink: 0;
3273
+ margin-left: auto;
3274
+ opacity: 0.55;
3275
+ transition:
3276
+ opacity .12s ease,
3277
+ color .12s ease,
3278
+ background .12s ease;
3279
+ }
3280
+ .ra-shell .ra-row:hover .ra-row-scope {
3281
+ opacity: 0.85;
3282
+ }
3283
+ .ra-shell .ra-row[data-selected=true] .ra-row-scope {
3284
+ opacity: 1;
3285
+ background: hsl(var(--ra-accent) / 0.12);
3286
+ color: hsl(var(--ra-accent));
3287
+ }
3288
+ .ra-shell .ra-row-rule-pip {
3289
+ display: inline-flex;
3290
+ align-items: center;
3291
+ justify-content: center;
3292
+ width: 1.1rem;
3293
+ height: 1.1rem;
3294
+ flex-shrink: 0;
3295
+ color: hsl(var(--ra-accent));
3296
+ opacity: 0.7;
3297
+ }
3298
+ .ra-shell .ra-row:hover .ra-row-rule-pip {
3299
+ opacity: 1;
3300
+ }
3301
+ .ra-shell .ra-row[data-tone=own] .ra-row-sub {
3302
+ color: hsl(var(--ra-status-own));
3303
+ }
3304
+ .ra-shell .ra-row[data-tone=shared] .ra-row-sub {
3305
+ color: hsl(var(--ra-status-shared));
3306
+ }
3307
+ .ra-shell .ra-row[data-selected=true] {
3308
+ background:
3309
+ linear-gradient(
3310
+ 90deg,
3311
+ hsl(var(--ra-accent) / 0.10) 0%,
3312
+ hsl(var(--ra-accent) / 0.04) 100%);
3313
+ border-left-width: 3px;
3314
+ border-left-color: hsl(var(--ra-accent));
3315
+ }
3316
+ .ra-shell .ra-dirty-pip {
3317
+ display: inline-block;
3318
+ width: 0.45rem;
3319
+ height: 0.45rem;
3320
+ border-radius: 9999px;
3321
+ background: hsl(var(--ra-warning));
3322
+ box-shadow: 0 0 0 2px hsl(var(--ra-warning) / 0.18);
3323
+ flex-shrink: 0;
3324
+ }
3325
+ .ra-shell .ra-error-pip {
3326
+ display: inline-block;
3327
+ width: 0.45rem;
3328
+ height: 0.45rem;
3329
+ border-radius: 9999px;
3330
+ background: hsl(var(--ra-danger, 0 72% 51%));
3331
+ box-shadow: 0 0 0 2px hsl(var(--ra-danger, 0 72% 51%) / 0.22);
3332
+ flex-shrink: 0;
3333
+ }
3334
+ .ra-shell .ra-group-summary {
3335
+ background: transparent;
3336
+ }
3337
+ .ra-shell {
3338
+ position: relative;
3339
+ }
3340
+ .ra-shell .ra-help-float {
3341
+ position: absolute;
3342
+ top: 0.65rem;
3343
+ right: 0.85rem;
3344
+ z-index: 5;
3345
+ display: inline-flex;
3346
+ align-items: center;
3347
+ justify-content: center;
3348
+ width: 1.6rem;
3349
+ height: 1.6rem;
3350
+ padding: 0;
3351
+ color: hsl(var(--ra-muted-text));
3352
+ background: hsl(var(--ra-surface) / 0.85);
3353
+ backdrop-filter: blur(6px);
3354
+ border: 1px solid hsl(var(--ra-border));
3355
+ border-radius: 999px;
3356
+ cursor: pointer;
3357
+ transition:
3358
+ color .12s ease,
3359
+ background .12s ease,
3360
+ border-color .12s ease;
3361
+ }
3362
+ .ra-shell .ra-help-float:hover {
3363
+ color: hsl(var(--ra-accent));
3364
+ border-color: hsl(var(--ra-accent) / 0.4);
3365
+ background: hsl(var(--ra-surface));
3366
+ }
3367
+ .ra-shell .ra-help-float svg {
3368
+ width: 0.95rem;
3369
+ height: 0.95rem;
3370
+ }
3371
+ .ra-shell .ra-help-float > span {
3372
+ position: absolute;
3373
+ width: 1px;
3374
+ height: 1px;
3375
+ padding: 0;
3376
+ margin: -1px;
3377
+ overflow: hidden;
3378
+ clip: rect(0, 0, 0, 0);
3379
+ white-space: nowrap;
3380
+ border: 0;
3381
+ }
3382
+ .ra-shell .ra-preview-reopen {
3383
+ position: absolute;
3384
+ top: 50%;
3385
+ right: 0;
3386
+ transform: translateY(-50%);
3387
+ z-index: 4;
3388
+ display: inline-flex;
3389
+ align-items: center;
3390
+ justify-content: center;
3391
+ gap: 0.4rem;
3392
+ padding: 0.65rem 0.45rem;
3393
+ background: hsl(var(--ra-surface));
3394
+ color: hsl(var(--ra-muted-text));
3395
+ border: 1px solid hsl(var(--ra-border));
3396
+ border-right: 0;
3397
+ border-radius: calc(var(--ra-radius) * 0.85) 0 0 calc(var(--ra-radius) * 0.85);
3398
+ box-shadow: var(--ra-card-shadow);
3399
+ cursor: pointer;
3400
+ transition:
3401
+ color .12s ease,
3402
+ background .12s ease,
3403
+ padding-right .15s ease;
3404
+ writing-mode: vertical-rl;
3405
+ font-size: 0.7rem;
3406
+ font-weight: 600;
3407
+ letter-spacing: 0.06em;
3408
+ text-transform: uppercase;
3409
+ }
3410
+ .ra-shell .ra-preview-reopen:hover {
3411
+ color: hsl(var(--ra-accent));
3412
+ background: hsl(var(--ra-accent) / 0.04);
3413
+ padding-right: 0.6rem;
3414
+ }
3415
+ .ra-shell .ra-preview-reopen svg {
3416
+ width: 0.85rem;
3417
+ height: 0.85rem;
3418
+ writing-mode: horizontal-tb;
3419
+ }
3420
+ .ra-shell .ra-unsaved-tray {
3421
+ position: relative;
3422
+ display: flex;
3423
+ align-items: center;
3424
+ gap: 0.6rem;
3425
+ padding: 0.5rem 0.75rem;
3426
+ border: 1px solid hsl(var(--ra-warning, 38 92% 50%) / 0.35);
3427
+ background: hsl(var(--ra-warning, 38 92% 50%) / 0.08);
3428
+ border-radius: var(--ra-radius);
3429
+ font-size: 0.8125rem;
3430
+ color: hsl(var(--ra-text));
3431
+ animation: ra-unsaved-slide .14s ease-out;
3432
+ }
3433
+ .ra-shell .ra-unsaved-count {
3434
+ flex: 1;
3435
+ min-width: 0;
3436
+ display: inline-flex;
3437
+ align-items: center;
3438
+ gap: 0.3rem;
3439
+ padding: 0.15rem 0.4rem;
3440
+ margin: -0.15rem -0.4rem;
3441
+ background: transparent;
3442
+ border: 0;
3443
+ color: inherit;
3444
+ font: inherit;
3445
+ font-weight: 500;
3446
+ text-align: left;
3447
+ cursor: pointer;
3448
+ border-radius: calc(var(--ra-radius) - 4px);
3449
+ }
3450
+ .ra-shell .ra-unsaved-count:hover {
3451
+ background: hsl(var(--ra-muted) / 0.6);
3452
+ }
3453
+ .ra-shell .ra-unsaved-error-chip {
3454
+ -webkit-appearance: none;
3455
+ -moz-appearance: none;
3456
+ appearance: none;
3457
+ border: 1px solid hsl(var(--ra-danger, 0 72% 51%) / 0.35);
3458
+ background: hsl(var(--ra-danger, 0 72% 51%) / 0.08);
3459
+ color: hsl(var(--ra-danger, 0 72% 51%));
3460
+ border-radius: 999px;
3461
+ padding: 0.15rem 0.55rem;
3462
+ font-size: 0.7rem;
3463
+ font-weight: 500;
3464
+ cursor: pointer;
3465
+ }
3466
+ .ra-shell .ra-unsaved-error-chip:hover {
3467
+ filter: brightness(0.97);
3468
+ }
3469
+ .ra-shell .ra-unsaved-popover {
3470
+ position: absolute;
3471
+ top: calc(100% + 6px);
3472
+ left: 0;
3473
+ z-index: 60;
3474
+ min-width: 18rem;
3475
+ max-height: 18rem;
3476
+ overflow: auto;
3477
+ background: hsl(var(--ra-surface));
3478
+ border: 1px solid hsl(var(--ra-border));
3479
+ border-radius: var(--ra-radius);
3480
+ box-shadow: 0 12px 30px -10px hsl(0 0% 0% / 0.25);
3481
+ padding: 0.3rem;
3482
+ display: flex;
3483
+ flex-direction: column;
3484
+ gap: 0.15rem;
3485
+ }
3486
+ .ra-shell .ra-unsaved-popover-row {
3487
+ display: flex;
3488
+ align-items: center;
3489
+ gap: 0.5rem;
3490
+ padding: 0.4rem 0.55rem;
3491
+ background: transparent;
3492
+ border: 0;
3493
+ border-radius: calc(var(--ra-radius) - 2px);
3494
+ cursor: pointer;
3495
+ text-align: left;
3496
+ font: inherit;
3497
+ color: hsl(var(--ra-text));
3498
+ }
3499
+ .ra-shell .ra-unsaved-popover-row:hover {
3500
+ background: hsl(var(--ra-muted));
3501
+ }
3502
+ .ra-shell .ra-unsaved-popover-dot {
3503
+ width: 0.5rem;
3504
+ height: 0.5rem;
3505
+ border-radius: 999px;
3506
+ flex-shrink: 0;
3507
+ }
3508
+ .ra-shell .ra-unsaved-popover-label {
3509
+ flex: 1;
3510
+ min-width: 0;
3511
+ white-space: nowrap;
3512
+ overflow: hidden;
3513
+ text-overflow: ellipsis;
3514
+ font-size: 0.8125rem;
3515
+ }
3516
+ .ra-shell .ra-unsaved-popover-ctx {
3517
+ color: hsl(var(--ra-muted-text));
3518
+ font-size: 0.7rem;
3519
+ text-transform: uppercase;
3520
+ letter-spacing: 0.04em;
3521
+ }
3522
+ .ra-shell .ra-unsaved-popover-err {
3523
+ color: hsl(var(--ra-danger, 0 72% 51%));
3524
+ font-size: 0.7rem;
3525
+ font-weight: 500;
3526
+ }
3527
+ .ra-saveall-overlay {
3528
+ position: fixed;
3529
+ inset: 0;
3530
+ z-index: 100;
3531
+ background: hsl(0 0% 0% / 0.45);
3532
+ display: flex;
3533
+ align-items: center;
3534
+ justify-content: center;
3535
+ padding: 1rem;
3536
+ animation: ra-confirm-fade .12s ease-out;
3537
+ }
3538
+ .ra-saveall-card {
3539
+ background: hsl(var(--ra-surface));
3540
+ color: hsl(var(--ra-text));
3541
+ border: 1px solid hsl(var(--ra-border));
3542
+ border-radius: var(--ra-radius);
3543
+ box-shadow: 0 24px 48px -16px hsl(0 0% 0% / 0.45);
3544
+ width: min(28rem, 100%);
3545
+ max-height: min(80vh, 36rem);
3546
+ display: flex;
3547
+ flex-direction: column;
3548
+ animation: ra-confirm-pop .14s ease-out;
3549
+ }
3550
+ .ra-saveall-header {
3551
+ padding: 1rem 1rem 0.5rem;
3552
+ display: flex;
3553
+ flex-direction: column;
3554
+ gap: 0.5rem;
3555
+ }
3556
+ .ra-saveall-title {
3557
+ font-weight: 600;
3558
+ font-size: 0.95rem;
3559
+ }
3560
+ .ra-saveall-progress {
3561
+ height: 4px;
3562
+ background: hsl(var(--ra-muted));
3563
+ border-radius: 999px;
3564
+ overflow: hidden;
3565
+ }
3566
+ .ra-saveall-progress-bar {
3567
+ height: 100%;
3568
+ background: hsl(var(--ra-accent));
3569
+ transition: width .2s ease;
3570
+ }
3571
+ .ra-saveall-counter {
3572
+ color: hsl(var(--ra-muted-text));
3573
+ font-size: 0.75rem;
3574
+ font-variant-numeric: tabular-nums;
3575
+ }
3576
+ .ra-saveall-list {
3577
+ list-style: none;
3578
+ margin: 0;
3579
+ padding: 0.25rem 0.5rem;
3580
+ overflow: auto;
3581
+ flex: 1;
3582
+ }
3583
+ .ra-saveall-row {
3584
+ display: flex;
3585
+ align-items: center;
3586
+ gap: 0.6rem;
3587
+ padding: 0.45rem 0.5rem;
3588
+ border-radius: calc(var(--ra-radius) - 4px);
3589
+ font-size: 0.8125rem;
3590
+ }
3591
+ .ra-saveall-row[data-status=saving] {
3592
+ background: hsl(var(--ra-accent) / 0.06);
3593
+ }
3594
+ .ra-saveall-row[data-status=saved] {
3595
+ color: hsl(var(--ra-muted-text));
3596
+ }
3597
+ .ra-saveall-row[data-status=error] {
3598
+ background: hsl(var(--ra-danger, 0 72% 51%) / 0.06);
3599
+ }
3600
+ .ra-saveall-icon {
3601
+ display: inline-flex;
3602
+ align-items: center;
3603
+ justify-content: center;
3604
+ flex-shrink: 0;
3605
+ color: hsl(var(--ra-muted-text));
3606
+ }
3607
+ .ra-saveall-row[data-status=saved] .ra-saveall-icon {
3608
+ color: hsl(var(--ra-success, 142 71% 45%));
3609
+ }
3610
+ .ra-saveall-row[data-status=saving] .ra-saveall-icon {
3611
+ color: hsl(var(--ra-accent));
3612
+ }
3613
+ .ra-saveall-row[data-status=error] .ra-saveall-icon {
3614
+ color: hsl(var(--ra-danger, 0 72% 51%));
3615
+ }
3616
+ .ra-saveall-label {
3617
+ flex: 1;
3618
+ min-width: 0;
3619
+ white-space: nowrap;
3620
+ overflow: hidden;
3621
+ text-overflow: ellipsis;
3622
+ }
3623
+ .ra-saveall-err {
3624
+ color: hsl(var(--ra-danger, 0 72% 51%));
3625
+ font-size: 0.7rem;
3626
+ max-width: 12rem;
3627
+ white-space: nowrap;
3628
+ overflow: hidden;
3629
+ text-overflow: ellipsis;
3630
+ }
3631
+ .ra-saveall-actions {
3632
+ padding: 0.75rem 1rem 1rem;
3633
+ display: flex;
3634
+ justify-content: flex-end;
3635
+ gap: 0.4rem;
3636
+ border-top: 1px solid hsl(var(--ra-border));
3637
+ }
3638
+ .ra-spin {
3639
+ animation: ra-spin 1s linear infinite;
3640
+ }
3641
+ @keyframes ra-spin {
3642
+ to {
3643
+ transform: rotate(360deg);
3644
+ }
3645
+ }
3646
+ /*# sourceMappingURL=index.css.map */