@uicraft/core 1.0.0

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