1use crate::*;
2
3class! {
4 pub c_app_root {
9 display: "flex";
10 height: "100%";
11 padding-top: var!(safe-area-inset-top);
12 padding-bottom: var!(safe-area-inset-bottom);
13 font-family: "system-ui, -apple-system, sans-serif";
14 background: var!(background);
15 color: var!(foreground);
16 user-select: "none";
17 -webkit-user-select: "none";
18 -webkit-font-smoothing: "antialiased";
19 -moz-osx-font-smoothing: "grayscale";
20 text-rendering: "optimizeLegibility";
21 scrollbar-color: format!("{} {}", var!(scrollbar-thumb), var!(scrollbar-track));
22 ::-webkit-scrollbar-thumb {
23 background: var!(scrollbar-thumb);
24 border: "none";
25 }
26 ::-webkit-scrollbar-thumb:hover {
27 background: var!(scrollbar-thumb-hover);
28 }
29 ::-webkit-scrollbar-thumb:active {
30 background: var!(scrollbar-thumb-active);
31 }
32
33 *, *::before, *::after {
38 box-sizing: "border-box";
39 }
40 h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, pre, hr {
41 margin: "0px";
42 padding: "0px";
43 }
44 ul, ol {
45 list-style: "none";
46 padding: "0px";
47 margin: "0px";
48 }
49 a {
50 color: "inherit";
51 text-decoration: "none";
52 }
53 button {
54 appearance: "none";
55 -webkit-appearance: "none";
56 -moz-appearance: "none";
57 background: "transparent";
58 border: "none";
59 padding: "0px";
60 margin: "0px";
61 font: "inherit";
62 color: "inherit";
63 cursor: "pointer";
64 outline: "none";
65 font-family: "inherit";
66 ::-moz-focus-inner {
67 border: "0px";
68 padding: "0px";
69 }
70 }
71 input, textarea, select, button {
72 font: "inherit";
73 font-family: "inherit";
74 font-size: "inherit";
75 line-height: "normal";
76 margin: "0px";
77 padding: "0px";
78 border: "none";
79 outline: "none";
80 background: "transparent";
81 color: "inherit";
82 appearance: "none";
83 -webkit-appearance: "none";
84 -moz-appearance: "none";
85 }
86 input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"] {
87 appearance: "none";
88 -webkit-appearance: "none";
89 -moz-appearance: "none";
90 border-radius: "0px";
91 }
92 input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
93 -webkit-appearance: "none";
94 appearance: "none";
95 }
96 input[type="number"] {
97 -moz-appearance: "textfield";
98 }
99 input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
100 -webkit-appearance: "none";
101 appearance: "none";
102 margin: "0px";
103 }
104 textarea {
105 appearance: "none";
106 -webkit-appearance: "none";
107 -moz-appearance: "none";
108 resize: "vertical";
109 font-family: "inherit";
110 }
111 select {
112 appearance: "none";
113 -webkit-appearance: "none";
114 -moz-appearance: "none";
115 background-image: "none";
116 border-radius: "0px";
117 }
118 img, svg, video, canvas, audio, iframe, embed, object {
119 display: "block";
120 max-width: "100%";
121 height: "auto";
122 }
123 table {
124 border-collapse: "collapse";
125 border-spacing: "0px";
126 }
127 hr {
128 border: "none";
129 margin: "0px";
130 }
131 :focus-visible {
132 outline: "none";
133 }
134 : focus:not(: focus-visible) {
135 outline: "none";
136 }
137 h1, h2, h3, h4, h5, h6 {
138 font-weight: "inherit";
139 font-size: "inherit";
140 }
141 strong, b {
142 font-weight: "700";
143 }
144 em, i {
145 font-style: "italic";
146 }
147 code, pre, kbd, samp {
148 font-family: "ui-monospace, monospace";
149 }
150 @media ((max-width: 767px)) {
151 input, select, textarea {
152 font-size: "16px";
153 }
154 }
155 }
156
157 pub c_mobile_app_root {
158 display: "flex";
159 flex-direction: "column";
160 width: "100%";
161 height: "100%";
162 gap: var!(space-sm);
163 font-family: "system-ui, -apple-system, sans-serif";
164 background: var!(background);
165 color: var!(foreground);
166 padding: format!("{} {} {} {}", var!(padding-shell-top), var!(safe-area-inset-right), var!(padding-shell-bottom), var!(safe-area-inset-left));
167 scrollbar-color: format!("{} {}", var!(scrollbar-thumb), var!(scrollbar-track));
168 ::-webkit-scrollbar-thumb {
169 background: var!(scrollbar-thumb);
170 border: "none";
171 }
172 ::-webkit-scrollbar-thumb:hover {
173 background: var!(scrollbar-thumb-hover);
174 }
175 ::-webkit-scrollbar-thumb:active {
176 background: var!(scrollbar-thumb-active);
177 }
178 }
179
180 pub c_app_nav {
185 width: var!(nav-width);
186 background: var!(background);
187 border-left: format!("2px solid {}", var!(border));
188 display: "flex";
189 flex-direction: "column";
190 height: "100%";
191 flex-shrink: "0";
192 @media ((max-width: 767px)) {
193 display: "none";
194 }
195 }
196
197 pub c_nav_header {
198 padding: format!("{} {}", var!(space-xl), var!(space-xl));
199 width: "100%";
200 box-sizing: "border-box";
201 font-size: var!(font-xl);
202 font-weight: "700";
203 color: var!(foreground);
204 letter-spacing: "-0.02em";
205 display: "flex";
206 align-items: "center";
207 gap: format!("{}", var!(space-md));
208 flex-shrink: "0";
209 text-decoration: "none";
210 cursor: "pointer";
211 position: "relative";
212 ::after {
213 content: "''";
214 position: "absolute";
215 bottom: "0px";
216 left: var!(space-lg);
217 right: var!(space-lg);
218 height: "1px";
219 background: format!("linear-gradient(90deg, transparent, {}, transparent)", var!(border));
220 }
221 }
222
223 pub c_nav_brand_title {
224 font-size: var!(font-xl);
225 font-weight: "700";
226 color: var!(foreground);
227 letter-spacing: "-0.02em";
228 }
229
230 pub c_euv_logo {
231 display: "flex";
232 background: var!(accent);
233 align-items: "center";
234 justify-content: "center";
235 color: var!(text-on-accent);
236 font-weight: "700";
237 border: "none";
238 cursor: "pointer";
239 padding: "0px";
240 flex-shrink: "0";
241 position: "relative";
242 }
243
244 pub c_euv_logo_nav {
245 width: "32px";
246 height: "32px";
247 font-size: var!(font-lg);
248 }
249
250 pub c_euv_logo_fab {
251 width: "36px";
252 height: "36px";
253 font-size: var!(font-xl);
254 @media ((max-width: 767px)) {
255 width: "44px";
256 height: "44px";
257 }
258 }
259
260 pub c_nav_section_label {
261 padding: format!("{} {} {} {}", var!(space-md), var!(space-xl), var!(space-xs), var!(space-xl));
262 margin: "0px";
263 font-size: var!(font-xs);
264 font-weight: "700";
265 color: var!(foreground);
266 text-transform: "uppercase";
267 letter-spacing: "0.10em";
268 flex-shrink: "0";
269 }
270
271 pub c_nav_items_scroll {
272 flex: "1";
273 overflow-y: "auto";
274 contain: "content";
275 scrollbar-color: format!("{} {}", var!(scrollbar-thumb), var!(scrollbar-track));
276 ::-webkit-scrollbar-thumb {
277 background: var!(scrollbar-thumb);
278 border: "none";
279 }
280 ::-webkit-scrollbar-thumb:hover {
281 background: var!(scrollbar-thumb-hover);
282 }
283 ::-webkit-scrollbar-thumb:active {
284 background: var!(scrollbar-thumb-active);
285 }
286 }
287
288 pub c_nav_theme_toggle {
289 padding: format!("{} {}", var!(space-md), var!(space-xl));
290 flex-shrink: "0";
291 margin-top: "auto";
292 @media ((max-width: 767px)) {
293 display: "none";
294 }
295 }
296
297 pub c_nav_theme_button {
298 width: "100%";
299 height: "36px";
300 padding: "0px";
301 cursor: "pointer";
302 outline: "none";
303 border: format!("1px dashed {}", var!(border));
304 display: "flex";
305 align-items: "center";
306 justify-content: "center";
307 :focus-visible {
308 outline: "none";
309 }
310 :active {
311 background: "transparent";
312 border-color: var!(border);
313 }
314 }
315
316 pub c_theme_icon_sun {
317 width: "20px";
318 height: "20px";
319 background-repeat: "no-repeat";
320 background-position: "center";
321 background-size: "20px 20px";
322 background-image: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%23ffffff' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cline x1='12' y1='1' x2='12' y2='4'/%3E%3Cline x1='12' y1='20' x2='12' y2='23'/%3E%3Cline x1='4.22' y1='4.22' x2='6.34' y2='6.34'/%3E%3Cline x1='17.66' y1='17.66' x2='19.78' y2='19.78'/%3E%3Cline x1='1' y1='12' x2='4' y2='12'/%3E%3Cline x1='20' y1='12' x2='23' y2='12'/%3E%3Cline x1='4.22' y1='19.78' x2='6.34' y2='17.66'/%3E%3Cline x1='17.66' y1='6.34' x2='19.78' y2='4.22'/%3E%3C/svg%3E\")";
323 transition: format!("transform {} {}", var!(duration-normal), var!(ease-out));
324 }
325
326 pub c_theme_icon_moon {
327 width: "20px";
328 height: "20px";
329 background-repeat: "no-repeat";
330 background-position: "center";
331 background-size: "20px 20px";
332 background-image: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%23000000' stroke='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 13A9 9 0 1 1 11 3a7 7 0 0 0 10 10z'/%3E%3C/svg%3E\")";
333 transition: format!("transform {} {}", var!(duration-normal), var!(ease-out));
334 }
335
336 pub c_nav_footer {
337 padding: format!("{} {}", var!(space-lg), var!(space-xl));
338 position: "relative";
339 font-size: var!(font-xs);
340 color: var!(muted-foreground);
341 flex-shrink: "0";
342 text-decoration: "none";
343 display: "flex";
344 align-items: "center";
345 gap: var!(space-xs);
346 cursor: "pointer";
347 transition: format!("opacity {} {}", var!(duration-fast), var!(ease-out));
348 opacity: "1";
349 :hover {
350 opacity: "1";
351 }
352 }
353
354 pub c_nav_footer_divider {
355 position: "absolute";
356 top: "0";
357 left: var!(space-lg);
358 right: var!(space-lg);
359 height: "1px";
360 background: format!("linear-gradient(90deg, transparent, {}, transparent)", var!(border));
361 }
362
363 pub c_nav_footer_text {
364 font-weight: "400";
365 letter-spacing: "0.02em";
366 }
367
368 pub c_nav_footer_brand {
369 font-weight: "700";
370 color: var!(accent);
371 }
372
373 pub c_nav_item_active {
374 display: "flex";
375 align-items: "center";
376 gap: var!(space-sm);
377 padding: format!("{} {}", var!(space-md), var!(space-xl));
378 text-decoration: "none";
379 font-size: var!(font-base);
380 color: var!(text-on-accent);
381 font-weight: "600";
382 background: var!(accent);
383 }
384
385 pub c_nav_item_inactive {
386 display: "flex";
387 align-items: "center";
388 gap: var!(space-sm);
389 padding: format!("{} {}", var!(space-md), var!(space-xl));
390 text-decoration: "none";
391 font-size: var!(font-base);
392 color: var!(foreground);
393 font-weight: "400";
394 :hover {
395 background: var!(accent-muted);
396 color: var!(accent);
397 box-shadow: format!("inset 4px 0 0 0 {}", var!(foreground));
398 }
399 }
400
401 pub c_nav_item_icon {
402 flex-shrink: "0";
403 width: "20px";
404 text-align: "center";
405 }
406
407 pub c_nav_item_label {
408 flex: "1";
409 overflow: "hidden";
410 text-overflow: "ellipsis";
411 white-space: "nowrap";
412 color: "inherit";
413 }
414
415 pub c_app_main {
420 flex: "1";
421 height: "100%";
422 overflow: "auto";
423 padding: format!("{} {} {} {}", var!(padding-main-top), var!(padding-main-horizontal), var!(padding-main-bottom), var!(padding-main-horizontal));
424 scrollbar-color: format!("{} {}", var!(scrollbar-thumb), var!(scrollbar-track));
425 ::-webkit-scrollbar {
426 width: "6px";
427 }
428 ::-webkit-scrollbar-thumb {
429 background: var!(scrollbar-thumb);
430 border: "none";
431 }
432 ::-webkit-scrollbar-thumb:hover {
433 background: var!(scrollbar-thumb-hover);
434 }
435 ::-webkit-scrollbar-thumb:active {
436 background: var!(scrollbar-thumb-active);
437 }
438 @media ((max-width: 767px)) {
439 padding: format!("{} {} {} {}", var!(padding-main-top), var!(padding-main-horizontal-mobile), var!(padding-main-bottom), var!(padding-main-horizontal-mobile));
440 scrollbar-width: "none";
441 ::-webkit-scrollbar {
442 width: "0px";
443 }
444 }
445 }
446
447 pub c_page_router {
448 flex: "1";
449 display: "flex";
450 flex-direction: "column";
451 }
452
453 pub c_page_container {
454 width: "100%";
455 margin: "0px auto";
456 max-width: var!(content-max-width);
457 }
458
459 pub c_page {
464 position: "relative";
465 text-align: "center";
466 box-sizing: "border-box";
467 }
468
469 pub c_page_glow {
470 position: "absolute";
471 top: "-50%";
472 left: "50%";
473 transform: "translateX(-50%)";
474 width: "400px";
475 max-width: "100%";
476 height: "400px";
477 pointer-events: "none";
478 }
479
480 pub c_page_content {
481 position: "relative";
482 z-index: "1";
483 }
484
485 pub c_page_icon {
486 font-size: "36px";
487 padding-bottom: var!(space-md);
488 @media ((max-width: 767px)) {
489 font-size: "40px";
490 }
491 }
492
493 pub c_page_title {
494 font-size: var!(font-4xl);
495 font-weight: "800";
496 letter-spacing: "-0.03em";
497 margin: "0px";
498 color: var!(foreground);
499 margin-bottom: var!(space-sm);
500 @media ((max-width: 767px)) {
501 font-size: var!(font-3xl);
502 }
503 }
504
505 pub c_page_subtitle {
506 font-size: var!(font-lg);
507 color: var!(muted-foreground);
508 margin: "0px auto";
509 margin-bottom: var!(space-sm);
510 max-width: "560px";
511 opacity: "1";
512 @media ((max-width: 767px)) {
513 font-size: var!(font-base);
514 }
515 }
516
517 pub c_card {
522 color: var!(foreground);
523 box-sizing: "border-box";
524 }
525
526 pub c_card_title {
527 margin: format!("{} 0px", var!(gap-component));
528 color: var!(foreground);
529 font-size: var!(font-lg);
530 font-weight: "600";
531 padding-bottom: var!(gap-component);
532 border-bottom: format!("1px dashed {}", var!(border));
533 letter-spacing: "-0.01em";
534 @media ((max-width: 767px)) {
535 font-size: var!(font-md);
536 }
537 }
538
539 pub c_primary_button {
544 display: "flex";
545 justify-content: "center";
546 align-items: "center";
547 gap: var!(space-sm);
548 width: "100%";
549 height: "42px";
550 background: var!(accent);
551 color: var!(text-on-accent);
552 border: "1px solid transparent";
553 padding: format!("0px {}", var!(space-2xl));
554 cursor: "pointer";
555 font-size: var!(font-base);
556 font-weight: "500";
557 letter-spacing: "0.02em";
558 text-align: "center";
559 outline: "none";
560 box-sizing: "border-box";
561 white-space: "nowrap";
562 overflow: "hidden";
563 text-overflow: "ellipsis";
564 user-select: "none";
565 -webkit-user-select: "none";
566 :focus-visible {
567 outline: "none";
568 }
569 :disabled {
570 background: var!(muted-foreground);
571 cursor: "not-allowed";
572 opacity: "1";
573 }
574 :hover {
575 background: var!(accent);
576 }
577 :active {
578 background: var!(accent);
579 color: var!(text-on-accent);
580 border-color: "transparent";
581 }
582 @media ((max-width: 767px)) {
583 max-width: "100%";
584 padding: format!("{} {}", var!(space-lg), var!(space-xl));
585 font-size: var!(font-md);
586 }
587 }
588
589 pub c_modal_close_button {
590 display: "flex";
591 justify-content: "center";
592 align-items: "center";
593 color: "inherit";
594 border: "none";
595 padding: format!("{} {}", var!(space-sm), var!(space-md));
596 cursor: "pointer";
597 font-size: "20px";
598 font-weight: "400";
599 vertical-align: "middle";
600 outline: "none";
601 opacity: "1";
602 flex-shrink: "0";
603 transition: format!("opacity {} {}", var!(duration-fast), var!(ease-out));
604 :hover {
605 opacity: "1";
606 }
607 :active {
608 opacity: "1";
609 }
610 :focus {
611 outline: "none";
612 }
613 }
614
615 pub c_button_controls {
620 display: "flex";
621 flex-wrap: "wrap";
622 gap: var!(gap-element);
623 margin-top: var!(gap-component);
624 }
625
626 pub c_euv_button_primary_md {
631 display: "flex";
632 justify-content: "center";
633 align-items: "center";
634 gap: var!(space-sm);
635 flex: "1 1 120px";
636 height: "42px";
637 padding: format!("0px {}", var!(space-xl));
638 background: var!(accent);
639 color: var!(text-on-accent);
640 cursor: "pointer";
641 font-size: var!(font-base);
642 font-weight: "500";
643 outline: "none";
644 white-space: "nowrap";
645 user-select: "none";
646 -webkit-user-select: "none";
647 box-sizing: "border-box";
648 :hover {
649 background: var!(accent);
650 }
651 :focus-visible {
652 outline: "none";
653 }
654 :disabled {
655 background: var!(muted-foreground);
656 cursor: "not-allowed";
657 opacity: "1";
658 }
659 :active {
660 background: var!(accent);
661 color: var!(text-on-accent);
662 border-color: var!(text-on-accent);
663 }
664 }
665
666 pub c_euv_button_outline_md {
667 display: "flex";
668 justify-content: "center";
669 align-items: "center";
670 gap: var!(space-sm);
671 flex: "1 1 120px";
672 height: "42px";
673 padding: format!("0px {}", var!(space-xl));
674 color: var!(foreground);
675 border: format!("1px solid {}", var!(border));
676 cursor: "pointer";
677 font-size: var!(font-base);
678 font-weight: "500";
679 outline: "none";
680 white-space: "nowrap";
681 user-select: "none";
682 -webkit-user-select: "none";
683 box-sizing: "border-box";
684 :hover {
685 background: var!(accent-muted);
686 border-color: var!(accent);
687 color: var!(accent);
688 }
689 :focus-visible {
690 outline: "none";
691 }
692 :active {
693 background: "transparent";
694 color: var!(foreground);
695 border-color: var!(border);
696 }
697 }
698
699 pub c_badge {
704 display: "inline-flex";
705 justify-content: "center";
706 align-items: "center";
707 color: var!(text-on-accent);
708 padding: format!("{} {}", var!(space-2xs), var!(space-sm));
709 border: format!("1px solid {}", var!(accent));
710 font-size: var!(font-xs);
711 font-weight: "600";
712 cursor: "pointer";
713 text-align: "center";
714 background: var!(accent);
715 :focus-visible {
716 outline: "none";
717 }
718 @media ((max-width: 767px)) {
719 padding: format!("{} {}", var!(space-2xs), var!(space-xs));
720 font-size: var!(font-xs);
721 }
722 }
723
724 pub c_badge_outline {
725 display: "inline-flex";
726 justify-content: "center";
727 align-items: "center";
728 color: var!(foreground);
729 padding: format!("{} {}", var!(space-2xs), var!(space-sm));
730 font-size: var!(font-xs);
731 font-weight: "600";
732 cursor: "pointer";
733 text-align: "center";
734 border: format!("1.5px solid {}", var!(border));
735 @media ((max-width: 767px)) {
736 padding: format!("{} {}", var!(space-2xs), var!(space-xs));
737 font-size: var!(font-xs);
738 }
739 }
740
741 pub c_euv_tag_solid_black {
742 display: "inline-flex";
743 align-items: "center";
744 justify-content: "center";
745 color: var!(text-on-accent);
746 padding: format!("{} {}", var!(space-xs), var!(space-md));
747 font-size: var!(font-sm);
748 font-weight: "600";
749 cursor: "pointer";
750 background: var!(accent);
751 border: format!("1px solid {}", var!(accent));
752 }
753
754 pub c_euv_tag_solid_white {
755 display: "inline-flex";
756 align-items: "center";
757 justify-content: "center";
758 color: var!(foreground);
759 padding: format!("{} {}", var!(space-2xs), var!(space-sm));
760 font-size: var!(font-xs);
761 font-weight: "600";
762 cursor: "pointer";
763 border: format!("1.5px solid {}", var!(accent));
764 }
765
766 pub c_euv_tag_outline_black {
771 display: "inline-flex";
772 justify-content: "center";
773 align-items: "center";
774 color: var!(accent);
775 padding: format!("{} {}", var!(space-2xs), var!(space-sm));
776 font-size: var!(font-xs);
777 font-weight: "600";
778 cursor: "pointer";
779 border: format!("1.5px solid {}", var!(accent));
780 }
781
782 pub c_euv_tag_outline_white {
783 display: "inline-flex";
784 justify-content: "center";
785 align-items: "center";
786 color: var!(foreground);
787 padding: format!("{} {}", var!(space-xs), var!(space-md));
788 font-size: var!(font-sm);
789 font-weight: "600";
790 cursor: "pointer";
791 border: format!("1.5px solid {}", var!(border));
792 }
793
794 pub c_euv_input_wrapper {
799 width: "100%";
800 margin: format!("{} 0px", var!(gap-element));
801 }
802
803 pub c_form_label {
804 display: "block";
805 margin-bottom: var!(space-sm);
806 color: "inherit";
807 font-weight: "500";
808 font-size: var!(font-base);
809 }
810
811 pub c_inline_input_row {
812 display: "flex";
813 align-items: "center";
814 gap: var!(gap-component);
815 }
816
817 pub c_euv_input {
818 width: "100%";
819 min-height: var!(min-height-base);
820 padding: format!("0px {}", var!(space-lg));
821 border: format!("1px solid {}", var!(border));
822 font-size: var!(font-base);
823 line-height: "normal";
824 box-sizing: "border-box";
825 outline: "none";
826 color: var!(foreground);
827 appearance: "none";
828 -webkit-appearance: "none";
829 -moz-appearance: "none";
830 vertical-align: "middle";
831 :hover {
832 border-color: var!(accent);
833 background: var!(accent-muted);
834 }
835 :focus {
836 outline: "none";
837 border-color: var!(accent);
838 background: var!(accent-muted);
839 }
840 }
841
842 pub c_euv_input_no_transition {
843 width: "100%";
844 min-height: var!(min-height-base);
845 padding: format!("0px {}", var!(space-lg));
846 border: format!("1px solid {}", var!(border));
847 font-size: var!(font-base);
848 line-height: "normal";
849 box-sizing: "border-box";
850 outline: "none";
851 color: var!(foreground);
852 appearance: "none";
853 -webkit-appearance: "none";
854 -moz-appearance: "none";
855 vertical-align: "middle";
856 }
857
858 pub c_euv_input_error {
859 width: "100%";
860 min-height: var!(min-height-base);
861 padding: format!("0px {}", var!(space-lg));
862 border: format!("1px solid {}", var!(foreground));
863 font-size: var!(font-base);
864 line-height: "normal";
865 box-sizing: "border-box";
866 outline: "none";
867 color: var!(foreground);
868 appearance: "none";
869 -webkit-appearance: "none";
870 -moz-appearance: "none";
871 vertical-align: "middle";
872 :focus {
873 outline: "none";
874 border-color: var!(foreground);
875 }
876 }
877
878 pub c_form_checkbox {
879 cursor: "pointer";
880 width: var!(space-lg);
881 height: var!(space-lg);
882 }
883
884 pub c_form_checkbox_label {
885 font-size: var!(font-base);
886 color: "inherit";
887 cursor: "pointer";
888 }
889
890 pub c_form_checkbox_row {
891 margin: format!("{} 0px", var!(gap-component));
892 display: "flex";
893 align-items: "center";
894 gap: var!(gap-element);
895 }
896
897 pub c_select_input {
898 width: "100%";
899 min-height: var!(min-height-base);
900 padding: format!("0px {}", var!(space-lg));
901 border: format!("1px solid {}", var!(border));
902 font-size: var!(font-base);
903 line-height: "normal";
904 box-sizing: "border-box";
905 outline: "none";
906 cursor: "pointer";
907 appearance: "none";
908 -webkit-appearance: "none";
909 -moz-appearance: "none";
910 color: var!(foreground);
911 vertical-align: "middle";
912 background-image: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='currentColor' d='M6 8L1 3h10z'/%3E%3C/svg%3E\")";
913 background-repeat: "no-repeat";
914 background-position: "right 14px center";
915 :focus {
916 outline: "none";
917 border-color: var!(accent);
918 background: var!(accent-muted);
919 }
920 }
921
922 pub c_textarea_input {
923 width: "100%";
924 max-width: "100%";
925 padding: format!("{} {}", var!(space-md), var!(space-lg));
926 border: format!("1px solid {}", var!(border));
927 font-size: var!(font-base);
928 line-height: "normal";
929 box-sizing: "border-box";
930 outline: "none";
931 resize: "vertical";
932 overflow-x: "hidden";
933 word-wrap: "break-word";
934 font-family: "inherit";
935 color: var!(foreground);
936 appearance: "none";
937 -webkit-appearance: "none";
938 -moz-appearance: "none";
939 :hover {
940 border-color: var!(accent);
941 background: var!(accent-muted);
942 }
943 :focus {
944 outline: "none";
945 border-color: var!(accent);
946 background: var!(accent-muted);
947 }
948 }
949
950 pub c_textarea_input_error {
951 width: "100%";
952 max-width: "100%";
953 padding: format!("{} {}", var!(space-md), var!(space-lg));
954 border: format!("1px solid {}", var!(foreground));
955 font-size: var!(font-base);
956 line-height: "normal";
957 box-sizing: "border-box";
958 outline: "none";
959 resize: "vertical";
960 overflow-x: "hidden";
961 word-wrap: "break-word";
962 font-family: "inherit";
963 color: var!(foreground);
964 appearance: "none";
965 -webkit-appearance: "none";
966 -moz-appearance: "none";
967 :focus {
968 outline: "none";
969 border-color: var!(foreground);
970 }
971 }
972
973 pub c_textarea_counter {
974 text-align: "right";
975 margin-top: var!(space-xs);
976 margin-bottom: var!(gap-component);
977 }
978
979 pub c_textarea_counter_text {
980 font-size: var!(font-sm);
981 color: "inherit";
982 opacity: "1";
983 }
984
985 pub c_field_error_text {
986 color: var!(foreground);
987 font-size: var!(font-base);
988 margin-top: var!(space-xs);
989 margin-bottom: var!(space-sm);
990 }
991
992 pub c_error_box {
997 margin: format!("{} 0px", var!(gap-component));
998 background: var!(accent-muted);
999 color: var!(foreground);
1000 font-size: var!(font-base);
1001 box-sizing: "border-box";
1002 }
1003
1004 pub c_success_box {
1005 margin: format!("{} 0px", var!(gap-component));
1006 background: var!(accent-muted);
1007 color: var!(foreground);
1008 font-size: var!(font-base);
1009 box-sizing: "border-box";
1010 }
1011
1012 pub c_counter_row {
1017 display: "grid";
1018 grid-template-columns: "1fr 1fr";
1019 align-items: "center";
1020 gap: var!(gap-component);
1021 @media ((max-width: 767px)) {
1022 grid-template-columns: "1fr";
1023 }
1024 }
1025
1026 pub c_counter_text {
1027 font-size: var!(font-lg);
1028 color: "inherit";
1029 margin-bottom: var!(gap-component);
1030 }
1031
1032 pub c_counter_value {
1033 font-weight: "700";
1034 color: var!(accent);
1035 font-size: var!(font-2xl);
1036 @media ((max-width: 767px)) {
1037 font-size: var!(font-xl);
1038 }
1039 }
1040
1041 pub c_badge_row {
1042 display: "flex";
1043 gap: var!(gap-inline);
1044 flex-wrap: "wrap";
1045 align-items: "center";
1046 }
1047
1048 pub c_badge_hint {
1049 margin-bottom: var!(gap-component);
1050 color: "inherit";
1051 opacity: "1";
1052 font-size: var!(font-base);
1053 }
1054
1055 pub c_text_ellipsis {
1060 overflow: "hidden";
1061 text-overflow: "ellipsis";
1062 white-space: "nowrap";
1063 }
1064
1065 pub c_info_row {
1066 display: "flex";
1067 align-items: "center";
1068 gap: var!(space-md);
1069 padding: format!("{} 0", var!(space-sm));
1070 overflow: "hidden";
1071 }
1072
1073 pub c_info_label {
1074 font-size: var!(font-sm);
1075 font-weight: "500";
1076 color: var!(muted-foreground);
1077 min-width: "72px";
1078 flex-shrink: "0";
1079 letter-spacing: "0.02em";
1080 }
1081
1082 pub c_info_value {
1083 c_text_ellipsis();
1084 font-size: var!(font-base);
1085 font-weight: "600";
1086 color: var!(foreground);
1087 font-family: "ui-monospace, monospace";
1088 flex: "1";
1089 }
1090
1091 pub c_info_link {
1092 c_text_ellipsis();
1093 font-size: var!(font-base);
1094 font-weight: "600";
1095 color: var!(accent);
1096 font-family: "ui-monospace, monospace";
1097 flex: "1";
1098 text-decoration: "none";
1099 transition: format!("opacity {} {}", var!(duration-fast), var!(ease-out));
1100 :hover {
1101 opacity: "1";
1102 }
1103 }
1104
1105 pub c_camera_video_container {
1110 margin: format!("{} 0", var!(space-lg));
1111 }
1112
1113 pub c_camera_video_active {
1114 width: "100%";
1115 background: "#000";
1116 aspect-ratio: "16 / 9";
1117 object-fit: "cover";
1118 border: format!("2px solid {}", var!(accent));
1119 box-sizing: "border-box";
1120 }
1121
1122 pub c_camera_video_hidden {
1123 width: "100%";
1124 aspect-ratio: "16 / 9";
1125 display: "none";
1126 }
1127
1128 pub c_camera_video_placeholder {
1129 width: "100%";
1130 aspect-ratio: "16 / 9";
1131 border: format!("2px dashed {}", var!(border));
1132 display: "flex";
1133 align-items: "center";
1134 justify-content: "center";
1135 box-sizing: "border-box";
1136 }
1137
1138 pub c_camera_placeholder_content {
1139 display: "flex";
1140 flex-direction: "column";
1141 align-items: "center";
1142 gap: var!(space-md);
1143 }
1144
1145 pub c_camera_placeholder_icon {
1146 font-size: var!(font-4xl);
1147 opacity: "1";
1148 }
1149
1150 pub c_camera_placeholder_text {
1151 font-size: var!(font-base);
1152 color: "inherit";
1153 opacity: "1";
1154 }
1155
1156 pub c_camera_error_box {
1157 margin: format!("{} 0px", var!(gap-component));
1158 color: var!(foreground);
1159 font-size: var!(font-base);
1160 word-break: "break-all";
1161 overflow-wrap: "break-word";
1162 box-sizing: "border-box";
1163 }
1164
1165 pub c_camera_scan_result_box {
1166 margin-top: var!(gap-component);
1167 box-sizing: "border-box";
1168 }
1169
1170 pub c_camera_scan_result_label {
1171 font-size: var!(font-sm);
1172 font-weight: "600";
1173 color: var!(foreground);
1174 margin-bottom: var!(space-xs);
1175 }
1176
1177 pub c_camera_scan_result_value {
1178 font-size: var!(font-base);
1179 color: "inherit";
1180 word-break: "break-all";
1181 overflow-wrap: "break-word";
1182 }
1183
1184 pub c_canvas_preview_container {
1189 margin: format!("{} 0", var!(space-lg));
1190 overflow: "hidden";
1191 border: format!("2px solid {}", var!(border));
1192 background: "#ffffff";
1193 aspect-ratio: "9 / 16";
1194 display: "flex";
1195 align-items: "center";
1196 justify-content: "center";
1197 box-sizing: "border-box";
1198 }
1199
1200 pub c_canvas_placeholder {
1201 color: var!(muted-foreground);
1202 font-size: var!(font-sm);
1203 text-align: "center";
1204 padding: var!(space-lg);
1205 }
1206
1207 pub c_canvas_preview_image {
1208 width: "100%";
1209 height: "100%";
1210 object-fit: "cover";
1211 display: "block";
1212 }
1213
1214 pub c_canvas_container_fullscreen {
1215 width: "100%";
1216 height: "100%";
1217 background: var!(background);
1218 display: "flex";
1219 flex-direction: "column";
1220 position: "fixed";
1221 top: "0";
1222 left: "0";
1223 z-index: "10002";
1224 padding: format!("{} {} {} {}", var!(padding-shell-top), var!(space-lg), var!(padding-shell-bottom), var!(space-lg));
1225 box-sizing: "border-box";
1226 }
1227
1228 pub c_canvas_drawing_fullscreen_wrapper {
1229 flex: "1";
1230 display: "flex";
1231 align-items: "center";
1232 justify-content: "center";
1233 overflow: "hidden";
1234 padding: var!(space-xs);
1235 }
1236
1237 pub c_canvas_drawing_fullscreen {
1238 border: format!("2px solid {}", var!(border));
1239 display: "block";
1240 cursor: "crosshair";
1241 touch-action: "none";
1242 }
1243
1244 pub c_canvas_fullscreen_toolbar {
1245 display: "flex";
1246 flex-direction: "column";
1247 align-items: "stretch";
1248 width: "100%";
1249 padding: format!("{} {}", var!(space-xs), "0px");
1250 flex-shrink: "0";
1251 gap: var!(space-xs);
1252 }
1253
1254 pub c_canvas_fullscreen_toolbar_row_top {
1255 display: "flex";
1256 align-items: "center";
1257 height: var!(mobile-header-height);
1258 width: "100%";
1259 gap: var!(space-sm);
1260 }
1261
1262 pub c_canvas_fullscreen_toolbar_color_wrapper {
1263 display: "flex";
1264 align-items: "center";
1265 justify-content: "center";
1266 flex: "1";
1267 min-width: "0";
1268 }
1269
1270 pub c_canvas_color_input_fullscreen {
1271 width: "100%";
1272 height: "42px";
1273 border: format!("1px solid {}", var!(border));
1274 cursor: "pointer";
1275 padding: format!("{}", var!(space-xs));
1276 }
1277
1278 pub c_canvas_fullscreen_toolbar_row_bottom {
1279 display: "flex";
1280 align-items: "center";
1281 width: "100%";
1282 }
1283
1284 pub c_canvas_fullscreen_range_input {
1285 flex: "1 1 0%";
1286 min-width: "120px";
1287 cursor: "pointer";
1288 -webkit-appearance: "none";
1289 appearance: "none";
1290 border: "none";
1291 outline: "none";
1292 height: "24px";
1293 ::-webkit-slider-runnable-track {
1294 height: "6px";
1295 background: format!("linear-gradient(to right, {} 0%, {} var(--value,50%), {} var(--value,50%), {} 100%)", var!(foreground), var!(foreground), var!(border), var!(border));
1296 border-radius: "3px";
1297 border: "none";
1298 }
1299 ::-webkit-slider-thumb {
1300 width: "20px";
1301 height: "20px";
1302 background: var!(background);
1303 border: format!("2px solid {}", var!(accent));
1304 border-radius: "50%";
1305 cursor: "pointer";
1306 -webkit-appearance: "none";
1307 margin-top: "-7px";
1308 }
1309 ::-moz-range-track {
1310 height: "6px";
1311 background: format!("linear-gradient(to right, {} 0%, {} var(--value,50%), {} var(--value,50%), {} 100%)", var!(foreground), var!(foreground), var!(border), var!(border));
1312 border-radius: "3px";
1313 border: "none";
1314 }
1315 ::-moz-range-thumb {
1316 width: "20px";
1317 height: "20px";
1318 background: var!(background);
1319 border: format!("2px solid {}", var!(accent));
1320 border-radius: "50%";
1321 cursor: "pointer";
1322 }
1323 }
1324
1325 pub c_canvas_fullscreen_toolbar_button {
1326 flex: "0 0 auto";
1327 overflow: "hidden";
1328 }
1329
1330 pub c_custom_attrs_demo {
1335 color: "inherit";
1336 box-sizing: "border-box";
1337 }
1338
1339 pub c_demo_text {
1340 color: "inherit";
1341 margin-bottom: var!(gap-component);
1342 }
1343
1344 pub c_demo_text_muted {
1345 color: "inherit";
1346 opacity: "1";
1347 font-size: var!(font-base);
1348 margin-bottom: "0px";
1349 }
1350
1351 pub c_loading_container {
1356 display: "flex";
1357 align-items: "center";
1358 justify-content: "center";
1359 gap: var!(gap-component);
1360 margin: format!("{} 0px", var!(gap-component));
1361 box-sizing: "border-box";
1362 }
1363
1364 pub c_spinner {
1365 width: "28px";
1366 height: "28px";
1367 border: format!("3px solid {}", var!(accent-muted));
1368 border-top: format!("3px solid {}", var!(accent));
1369 border-radius: "50%";
1370 flex-shrink: "0";
1371 animation: "euv-spin 0.8s linear infinite";
1372 }
1373
1374 pub c_loading_text_col {
1375 display: "flex";
1376 flex-direction: "column";
1377 gap: var!(space-xs);
1378 }
1379
1380 pub c_loading_title {
1381 color: var!(foreground);
1382 font-size: var!(font-md);
1383 font-weight: "500";
1384 }
1385
1386 pub c_loading_subtitle {
1387 color: var!(muted-foreground);
1388 font-size: var!(font-base);
1389 }
1390
1391 pub c_error_container {
1392 display: "flex";
1393 align-items: "center";
1394 gap: var!(gap-element);
1395 margin-top: var!(gap-component);
1396 box-sizing: "border-box";
1397 }
1398
1399 pub c_error_icon {
1400 width: "20px";
1401 height: "20px";
1402 display: "flex";
1403 align-items: "center";
1404 justify-content: "center";
1405 flex-shrink: "0";
1406 color: var!(foreground);
1407 font-size: var!(font-sm);
1408 font-weight: "700";
1409 }
1410
1411 pub c_error_text {
1412 color: var!(foreground);
1413 font-size: var!(font-base);
1414 }
1415
1416 pub c_data_box {
1417 margin: format!("{} 0px", var!(gap-component));
1418 box-sizing: "border-box";
1419 }
1420
1421 pub c_data_pre {
1422 color: var!(foreground);
1423 font-size: var!(font-base);
1424 margin: "0px";
1425 white-space: "pre-wrap";
1426 word-break: "break-all";
1427 font-family: "ui-monospace, monospace";
1428 }
1429
1430 pub c_fetch_hint {
1431 color: "inherit";
1432 opacity: "1";
1433 font-size: var!(font-base);
1434 margin-bottom: var!(gap-component);
1435 }
1436
1437 pub c_toggle_content {
1442 margin-top: var!(gap-component);
1443 color: "inherit";
1444 }
1445
1446 pub c_toggle_title {
1447 margin-top: "0px";
1448 color: var!(accent);
1449 font-size: var!(font-md);
1450 }
1451
1452 pub c_role_button_row {
1453 display: "flex";
1454 flex-wrap: "wrap";
1455 gap: var!(gap-element);
1456 margin-bottom: var!(gap-component);
1457 }
1458
1459 pub c_role_guest_text {
1460 color: var!(foreground);
1461 font-size: var!(font-base);
1462 }
1463
1464 pub c_role_user_text {
1465 color: var!(foreground);
1466 font-size: var!(font-base);
1467 }
1468
1469 pub c_role_admin_text {
1470 color: var!(foreground);
1471 font-size: var!(font-base);
1472 }
1473
1474 pub c_tab_bar {
1479 display: "flex";
1480 border-bottom: format!("1px dashed {}", var!(border));
1481 margin-bottom: var!(gap-component);
1482 gap: var!(gap-element);
1483 @media ((max-width: 767px)) {
1484 flex-wrap: "wrap";
1485 }
1486 }
1487
1488 pub c_tab_item_active {
1489 padding: format!("{} {}", var!(space-md), var!(space-xl));
1490 cursor: "pointer";
1491 border-bottom: format!("2px solid {}", var!(accent));
1492 color: var!(text-on-accent);
1493 background: var!(accent);
1494 font-size: var!(font-base);
1495 font-weight: "500";
1496 }
1497
1498 pub c_tab_item_inactive {
1499 padding: format!("{} {}", var!(space-md), var!(space-xl));
1500 cursor: "pointer";
1501 border-bottom: "2px solid transparent";
1502 color: "inherit";
1503 font-size: var!(font-base);
1504 font-weight: "500";
1505 :hover {
1506 background: var!(accent-muted);
1507 color: var!(accent);
1508 }
1509 }
1510
1511 pub c_tab_content {
1512 padding: format!("{} 0px", var!(gap-element));
1513 }
1514
1515 pub c_tab_text {
1516 color: "inherit";
1517 font-size: var!(font-base);
1518 margin-bottom: var!(gap-element);
1519 }
1520
1521 pub c_tab_text_muted {
1522 color: "inherit";
1523 opacity: "1";
1524 font-size: var!(font-base);
1525 }
1526
1527 pub c_tab_text_input {
1528 color: "inherit";
1529 font-size: var!(font-base);
1530 margin-bottom: var!(gap-component);
1531 }
1532
1533 pub c_list_input {
1538 width: "100%";
1539 flex: "1";
1540 height: "42px";
1541 padding: format!("0px {}", var!(space-lg));
1542 border: format!("1px solid {}", var!(border));
1543 font-size: var!(font-base);
1544 line-height: "normal";
1545 box-sizing: "border-box";
1546 outline: "none";
1547 color: var!(foreground);
1548 appearance: "none";
1549 -webkit-appearance: "none";
1550 -moz-appearance: "none";
1551 vertical-align: "middle";
1552 :hover {
1553 border-color: var!(accent);
1554 background: var!(accent-muted);
1555 }
1556 :focus {
1557 outline: "none";
1558 border-color: var!(accent);
1559 background: var!(accent-muted);
1560 }
1561 }
1562
1563 pub c_list_input_error {
1564 width: "100%";
1565 flex: "1";
1566 height: "42px";
1567 padding: format!("0px {}", var!(space-lg));
1568 border: format!("1px solid {}", var!(foreground));
1569 font-size: var!(font-base);
1570 line-height: "normal";
1571 box-sizing: "border-box";
1572 outline: "none";
1573 color: var!(foreground);
1574 appearance: "none";
1575 -webkit-appearance: "none";
1576 -moz-appearance: "none";
1577 vertical-align: "middle";
1578 :focus {
1579 outline: "none";
1580 border-color: var!(foreground);
1581 }
1582 }
1583
1584 pub c_list_error_text {
1585 color: var!(foreground);
1586 font-size: var!(font-base);
1587 margin: format!("{} 0px", var!(gap-element));
1588 }
1589
1590 pub c_inline_input_button_wrap {
1591 flex-shrink: "0";
1592 }
1593
1594 pub c_list_ul {
1595 list-style: "none";
1596 padding: "0px";
1597 margin: "0px";
1598 margin-top: var!(gap-component);
1599 }
1600
1601 pub c_list_item {
1602 display: "flex";
1603 justify-content: "space-between";
1604 align-items: "center";
1605 gap: var!(gap-component);
1606 min-height: var!(min-height-base);
1607 margin: format!("{} 0px", var!(gap-element));
1608 }
1609
1610 pub c_list_item_text {
1611 flex: "1";
1612 overflow: "hidden";
1613 text-overflow: "ellipsis";
1614 white-space: "nowrap";
1615 font-size: var!(font-base);
1616 color: "inherit";
1617 min-width: "0";
1618 }
1619
1620 pub c_list_item_button {
1621 max-width: "120px";
1622 flex-shrink: "0";
1623 }
1624
1625 pub c_log_container {
1630 font-family: "ui-monospace, monospace";
1631 font-size: var!(font-base);
1632 margin-top: "0px";
1633 color: var!(foreground);
1634 }
1635
1636 pub c_log_item {
1637 padding: format!("{} 0px", var!(space-sm));
1638 font-size: var!(font-base);
1639 color: var!(foreground);
1640 }
1641
1642 pub c_render_count_text {
1647 font-size: var!(font-lg);
1648 color: "inherit";
1649 margin-bottom: var!(gap-component);
1650 }
1651
1652 pub c_event_result {
1657 font-size: var!(font-base);
1658 color: "inherit";
1659 margin-top: var!(gap-element);
1660 }
1661
1662 pub c_event_highlight {
1663 font-weight: "600";
1664 color: var!(accent);
1665 }
1666
1667 pub c_event_info_grid {
1668 display: "grid";
1669 grid-template-columns: "1fr 1fr";
1670 gap: var!(gap-element);
1671 margin-top: var!(gap-component);
1672 @media ((max-width: 767px)) {
1673 grid-template-columns: "1fr";
1674 gap: var!(gap-element);
1675 }
1676 }
1677
1678 pub c_event_info_row {
1679 display: "flex";
1680 align-items: "center";
1681 gap: var!(space-sm);
1682 overflow: "hidden";
1683 }
1684
1685 pub c_event_info_label {
1686 font-size: var!(font-base);
1687 font-weight: "600";
1688 color: var!(foreground);
1689 flex-shrink: "0";
1690 }
1691
1692 pub c_event_info_value {
1693 c_text_ellipsis();
1694 font-size: var!(font-base);
1695 font-weight: "600";
1696 color: var!(accent);
1697 font-family: "ui-monospace, monospace";
1698 flex: "1";
1699 }
1700
1701 pub c_event_mouse_area {
1702 min-height: "120px";
1703 padding: format!("{} 0px", var!(space-xl));
1704 border: format!("2px dashed {}", var!(border));
1705 cursor: "crosshair";
1706 text-align: "center";
1707 user-select: "none";
1708 color: "inherit";
1709 }
1710
1711 pub c_event_drag_zone {
1712 min-height: "100px";
1713 padding: format!("{} 0px", var!(space-xl));
1714 border: format!("2px dashed {}", var!(border));
1715 text-align: "center";
1716 user-select: "none";
1717 color: var!(foreground);
1718 }
1719
1720 pub c_event_drag_zone_active {
1721 min-height: "100px";
1722 padding: format!("{} 0px", var!(space-xl));
1723 border: format!("2px dashed {}", var!(border));
1724 text-align: "center";
1725 user-select: "none";
1726 color: var!(foreground);
1727 }
1728
1729 pub c_event_drag_item {
1730 display: "inline-block";
1731 padding: format!("{} {}", var!(space-sm), var!(space-xl));
1732 background: var!(accent);
1733 color: var!(text-on-accent);
1734 font-size: var!(font-base);
1735 font-weight: "500";
1736 cursor: "grab";
1737 margin: var!(space-sm);
1738 }
1739
1740 pub c_event_drop_zone {
1741 border: format!("2px dashed {}", var!(border));
1742 padding: format!("{} {}", var!(space-4xl), var!(space-xl));
1743 text-align: "center";
1744 cursor: "pointer";
1745 }
1746
1747 pub c_event_drop_zone_active {
1748 border: format!("2px dashed {}", var!(accent));
1749 padding: format!("{} {}", var!(space-4xl), var!(space-xl));
1750 text-align: "center";
1751 cursor: "pointer";
1752 background: var!(accent-muted);
1753 }
1754
1755 pub c_event_drop_icon {
1756 font-size: var!(font-5xl);
1757 display: "block";
1758 padding-bottom: var!(space-md);
1759 }
1760
1761 pub c_event_drop_text {
1762 font-size: var!(font-lg);
1763 font-weight: "500";
1764 color: "inherit";
1765 padding-bottom: var!(space-md);
1766 }
1767
1768 pub c_event_drop_hint {
1769 font-size: var!(font-base);
1770 color: "inherit";
1771 opacity: "1";
1772 margin: "0px";
1773 }
1774
1775 pub c_event_wheel_zone {
1776 min-height: "120px";
1777 padding: format!("{} 0px", var!(space-xl));
1778 border: format!("2px dashed {}", var!(border));
1779 text-align: "center";
1780 overflow: "auto";
1781 color: var!(foreground);
1782 }
1783
1784 pub c_event_clipboard_area {
1785 color: var!(foreground);
1786 }
1787
1788 pub c_event_touch_zone {
1789 min-height: "120px";
1790 padding: format!("{} 0px", var!(space-xl));
1791 border: format!("2px dashed {}", var!(accent));
1792 text-align: "center";
1793 touch-action: "none";
1794 user-select: "none";
1795 color: var!(accent);
1796 }
1797
1798 pub c_event_form_area {
1799 padding: format!("{} 0px", var!(space-lg));
1800 color: var!(foreground);
1801 }
1802
1803 pub c_event_media_area {
1804 padding: format!("{} 0px", var!(space-lg));
1805 color: var!(foreground);
1806 max-width: "100%";
1807 overflow: "hidden";
1808 }
1809
1810 pub c_event_audio {
1811 width: "100%";
1812 max-width: "100%";
1813 }
1814
1815 pub c_event_video_area {
1816 color: var!(foreground);
1817 width: "100%";
1818 overflow: "hidden";
1819 }
1820
1821 pub c_event_video {
1822 width: "100%";
1823 max-width: "100%";
1824 }
1825
1826 pub c_event_image_area {
1827 padding: format!("{} 0px", var!(space-lg));
1828 color: "inherit";
1829 width: "100%";
1830 overflow: "hidden";
1831 display: "flex";
1832 flex-direction: "column";
1833 align-items: "center";
1834 gap: var!(space-md);
1835 }
1836
1837 pub c_event_image {
1838 width: "200px";
1839 max-width: "100%";
1840 object-fit: "contain";
1841 display: "block";
1842 }
1843
1844 pub c_event_url_text {
1845 text-align: "center";
1846 font-size: var!(font-sm);
1847 color: "inherit";
1848 opacity: "1";
1849 font-family: "ui-monospace, monospace";
1850 word-break: "break-all";
1851 width: "100%";
1852 }
1853
1854 pub c_timer_display {
1859 text-align: "center";
1860 padding: var!(space-xl);
1861 margin: format!("{} 0px", var!(gap-component));
1862 color: "inherit";
1863 }
1864
1865 pub c_timer_value {
1866 font-size: var!(font-5xl);
1867 font-weight: "700";
1868 color: var!(accent);
1869 letter-spacing: "0.04em";
1870 font-family: "ui-monospace, monospace";
1871 @media ((max-width: 767px)) {
1872 font-size: var!(font-4xl);
1873 }
1874 }
1875
1876 pub c_timer_controls {
1877 display: "flex";
1878 flex-wrap: "wrap";
1879 gap: var!(gap-element);
1880 }
1881
1882 pub c_timer_done {
1883 text-align: "center";
1884 margin-top: var!(gap-component);
1885 font-size: var!(font-lg);
1886 font-weight: "600";
1887 color: var!(foreground);
1888 }
1889
1890 pub c_modal_overlay {
1895 position: "fixed";
1896 top: "0px";
1897 left: "0px";
1898 width: "100%";
1899 height: "100%";
1900 background: var!(bg-overlay);
1901 contain: "layout style paint";
1902 display: "flex";
1903 align-items: "center";
1904 justify-content: "center";
1905 z-index: "1000";
1906 animation: format!("euv-fade-in {} {}", var!(duration-modal-overlay), var!(ease-out));
1907 @media ((max-width: 767px)) {
1908 align-items: "center";
1909 justify-content: "center";
1910 }
1911 }
1912
1913 pub c_modal_content {
1914 background: var!(background);
1915 padding: "0px";
1916 max-width: "480px";
1917 width: "90%";
1918 animation: format!("euv-scale-in-modal {} {}", var!(duration-modal-content), var!(ease-bounce));
1919 overflow: "hidden";
1920 color: var!(foreground);
1921 box-sizing: "border-box";
1922 @media ((max-width: 767px)) {
1923 max-width: "100%";
1924 width: "calc(100% - 32px)";
1925 max-height: "85vh";
1926 overflow-y: "auto";
1927 }
1928 }
1929
1930 pub c_modal_header {
1931 display: "flex";
1932 justify-content: "space-between";
1933 align-items: "center";
1934 padding: format!("{} {} 0px {}", var!(space-md), var!(space-xl), var!(space-xl));
1935 }
1936
1937 pub c_modal_title {
1938 margin: "0px";
1939 font-size: var!(font-xl);
1940 font-weight: "600";
1941 color: "inherit";
1942 }
1943
1944 pub c_modal_body {
1945 padding: format!("0px {} {} {}", var!(space-xl), var!(space-md), var!(space-xl));
1946 color: "inherit";
1947 }
1948
1949 pub c_modal_actions {
1950 display: "flex";
1951 flex-wrap: "wrap";
1952 gap: var!(space-md);
1953 margin: format!("{} 0px", var!(space-md));
1954 }
1955
1956 pub c_anim_fade_in {
1961 margin-top: var!(gap-component);
1962 animation: format!("euv-fade-in 0.5s {}", var!(ease-out));
1963 font-size: var!(font-base);
1964 color: "inherit";
1965 }
1966
1967 pub c_anim_spin_container {
1968 display: "flex";
1969 justify-content: "center";
1970 align-items: "center";
1971 margin: format!("{} 0px", var!(space-lg));
1972 min-height: "80px";
1973 }
1974
1975 pub c_anim_spin {
1976 font-size: var!(font-5xl);
1977 animation: "euv-spin 1.5s linear infinite";
1978 display: "inline-block";
1979 @media ((max-width: 767px)) {
1980 font-size: var!(font-4xl);
1981 }
1982 }
1983
1984 pub c_anim_spin_stopped {
1985 font-size: var!(font-5xl);
1986 display: "inline-block";
1987 opacity: "1";
1988 @media ((max-width: 767px)) {
1989 font-size: var!(font-4xl);
1990 }
1991 }
1992
1993 pub c_anim_pulse_container {
1994 display: "flex";
1995 justify-content: "center";
1996 align-items: "center";
1997 margin: format!("{} 0px", var!(space-lg));
1998 min-height: "80px";
1999 }
2000
2001 pub c_anim_pulse {
2002 font-size: var!(font-5xl);
2003 animation: "euv-pulse 1.5s ease-in-out infinite";
2004 display: "inline-block";
2005 color: var!(foreground);
2006 @media ((max-width: 767px)) {
2007 font-size: var!(font-4xl);
2008 }
2009 }
2010
2011 pub c_anim_pulse_stopped {
2012 font-size: var!(font-5xl);
2013 display: "inline-block";
2014 opacity: "1";
2015 color: var!(foreground);
2016 @media ((max-width: 767px)) {
2017 font-size: var!(font-4xl);
2018 }
2019 }
2020
2021 pub c_progress_container {
2022 width: "100%";
2023 height: "12px";
2024 margin: format!("{} 0px", var!(space-lg));
2025 overflow: "hidden";
2026 }
2027
2028 pub c_progress_bar_running {
2029 height: "100%";
2030 background: var!(accent);
2031 animation: format!("euv-progress 1.6s {} forwards", var!(ease-in-out));
2032 }
2033
2034 pub c_progress_bar_stopped {
2035 height: "100%";
2036 background: var!(accent);
2037 width: "0%";
2038 }
2039
2040 pub c_anim_scale_box {
2041 margin: format!("{} 0px", var!(gap-component));
2042 padding: var!(space-xl);
2043 background: var!(accent);
2044 cursor: "pointer";
2045 transition: format!("transform {} {}", var!(duration-normal), var!(ease-out));
2046 }
2047
2048 pub c_browser_api_row {
2053 display: "grid";
2054 grid-template-columns: "1fr 1fr";
2055 gap: var!(gap-component);
2056 margin-bottom: var!(gap-component);
2057 @media ((max-width: 767px)) {
2058 grid-template-columns: "1fr";
2059 }
2060 }
2061
2062 pub c_browser_api_actions {
2063 display: "flex";
2064 flex-wrap: "wrap";
2065 gap: var!(gap-element);
2066 margin: format!("{} 0px", var!(gap-component));
2067 }
2068
2069 pub c_browser_result_box {
2070 margin-top: var!(gap-component);
2071 font-size: var!(font-base);
2072 word-break: "break-all";
2073 color: "inherit";
2074 }
2075
2076 pub c_browser_result_label {
2077 font-weight: "600";
2078 color: var!(accent);
2079 }
2080
2081 pub c_browser_result_value {
2082 color: "inherit";
2083 }
2084
2085 pub c_browser_info_grid {
2086 display: "grid";
2087 gap: var!(gap-component);
2088 margin-top: var!(gap-component);
2089 @media ((max-width: 767px)) {
2090 grid-template-columns: "1fr";
2091 }
2092 }
2093
2094 pub c_browser_info_item {
2095 display: "flex";
2096 flex-direction: "column";
2097 gap: var!(space-xs);
2098 color: "inherit";
2099 }
2100
2101 pub c_browser_info_label {
2102 font-size: var!(font-sm);
2103 font-weight: "600";
2104 color: "inherit";
2105 opacity: "1";
2106 text-transform: "uppercase";
2107 letter-spacing: "0.05em";
2108 }
2109
2110 pub c_browser_info_value {
2111 font-size: var!(font-base);
2112 color: "inherit";
2113 word-break: "break-all";
2114 font-family: "ui-monospace, monospace";
2115 }
2116
2117 pub c_vconsole_badge {
2122 position: "absolute";
2123 top: "-6px";
2124 right: "-8px";
2125 min-width: "18px";
2126 height: "18px";
2127 background: var!(background);
2128 color: var!(foreground);
2129 font-size: "10px";
2130 font-weight: "600";
2131 display: "flex";
2132 align-items: "center";
2133 justify-content: "center";
2134 padding: format!("0px {}", var!(space-xs));
2135 border: format!("1px solid {}", var!(accent));
2136 pointer-events: "none";
2137 transition: format!("transform {} {}, opacity {} {}", var!(duration-normal), var!(ease-out), var!(duration-normal), var!(ease-out));
2138 }
2139
2140 pub c_vconsole_overlay {
2141 position: "fixed";
2142 top: "0px";
2143 left: "0px";
2144 right: "0px";
2145 bottom: "0px";
2146 z-index: "10000";
2147 background: var!(bg-overlay);
2148 contain: "layout style paint";
2149 transition: format!("opacity {} {}", var!(duration-overlay), var!(ease-out));
2150 }
2151
2152 pub c_vconsole_overlay_hidden {
2153 opacity: "0";
2154 pointer-events: "none";
2155 }
2156
2157 pub c_vconsole_panel {
2158 position: "fixed";
2159 bottom: "0px";
2160 left: "0px";
2161 right: "0px";
2162 height: format!("calc(76vh - {})", var!(safe-area-inset-bottom));
2163 background: var!(background);
2164 z-index: "10001";
2165 display: "flex";
2166 flex-direction: "column";
2167 contain: "layout style paint";
2168 will-change: "transform";
2169 transition: format!("transform {} {}", var!(duration-overlay), var!(ease-out));
2170 overflow: "hidden";
2171 padding: format!("{} {}", var!(padding-main-top), var!(padding-main-horizontal));
2172 @media ((max-width: 767px)) {
2173 padding: format!("{} {}", var!(space-md), var!(padding-main-horizontal-mobile));
2174 }
2175 }
2176
2177 pub c_vconsole_panel_closed {
2178 transform: "translateY(100%)";
2179 will-change: "auto";
2180 }
2181
2182 pub c_vconsole_fab {
2183 position: "fixed";
2184 bottom: format!("calc(20px + {})", var!(safe-area-inset-bottom));
2185 right: var!(padding-main-horizontal);
2186 z-index: "9999";
2187 @media ((max-width: 767px)) {
2188 bottom: format!("calc(16px + {})", var!(safe-area-inset-bottom));
2189 right: var!(padding-main-horizontal-mobile);
2190 }
2191 }
2192
2193 pub c_vconsole_header {
2194 display: "flex";
2195 justify-content: "space-between";
2196 align-items: "center";
2197 flex-shrink: "0";
2198 }
2199
2200 pub c_vconsole_title {
2201 color: var!(foreground);
2202 font-size: var!(font-md);
2203 font-weight: "600";
2204 margin: "0px";
2205 letter-spacing: "0.03em";
2206 display: "flex";
2207 align-items: "center";
2208 gap: var!(space-sm);
2209 }
2210
2211 pub c_vconsole_title_dot {
2212 width: "8px";
2213 height: "8px";
2214 background: var!(accent);
2215 display: "inline-block";
2216 animation: "euv-pulse 2s ease-in-out infinite";
2217 }
2218
2219 pub c_vconsole_header_actions {
2220 display: "flex";
2221 gap: var!(space-sm);
2222 align-items: "center";
2223 }
2224
2225 pub c_vconsole_clear_button {
2226 display: "inline-flex";
2227 justify-content: "center";
2228 align-items: "center";
2229 color: var!(foreground);
2230 padding: format!("{} {}", var!(space-2xs), var!(space-sm));
2231 font-size: var!(font-xs);
2232 font-weight: "600";
2233 cursor: "pointer";
2234 text-align: "center";
2235 border: format!("1.5px solid {}", var!(border));
2236 margin-left: "auto";
2237 :focus-visible {
2238 outline: "none";
2239 }
2240 }
2241
2242 pub c_vconsole_close_button {
2243 display: "inline-flex";
2244 justify-content: "center";
2245 align-items: "center";
2246 color: var!(foreground);
2247 padding: format!("{} {}", var!(space-xs), var!(space-md));
2248 cursor: "pointer";
2249 font-size: var!(font-sm);
2250 font-weight: "400";
2251 text-align: "center";
2252 white-space: "nowrap";
2253 user-select: "none";
2254 -webkit-user-select: "none";
2255 vertical-align: "middle";
2256 outline: "none";
2257 transition: format!("all {} {}", var!(duration-fast), var!(ease-out));
2258 :hover {
2259 border-color: var!(foreground);
2260 color: var!(foreground);
2261 background: var!(background);
2262 }
2263 :focus-visible {
2264 outline: "none";
2265 }
2266 :active {
2267 background: "transparent";
2268 color: var!(foreground);
2269 border-color: var!(border);
2270 }
2271 }
2272
2273 pub c_vconsole_body {
2274 flex: "1";
2275 overflow-y: "auto";
2276 contain: "content";
2277 padding-bottom: var!(space-md);
2278 font-family: "ui-monospace, monospace";
2279 font-size: var!(font-xs);
2280 }
2281
2282 pub c_vconsole_log_item {
2283 display: "flex";
2284 align-items: "center";
2285 padding: format!("{} 0px", var!(space-sm));
2286 border-bottom: format!("1px dashed {}", var!(border));
2287 color: var!(foreground);
2288 font-size: var!(font-xs);
2289 word-break: "break-all";
2290 }
2291
2292 pub c_vconsole_empty {
2293 color: var!(muted-foreground);
2294 font-size: var!(font-xs);
2295 text-align: "center";
2296 padding: format!("{} 0px", var!(space-4xl));
2297 overflow: "hidden";
2298 }
2299
2300 pub c_vconsole_empty_hidden {
2301 height: "0";
2302 overflow: "hidden";
2303 padding: "0";
2304 }
2305
2306 pub c_vconsole_log_list {
2307 overflow: "hidden";
2308 }
2309
2310 pub c_vconsole_log_list_hidden {
2311 height: "0";
2312 overflow: "hidden";
2313 }
2314
2315 pub c_vconsole_count {
2316 color: var!(muted-foreground);
2317 font-size: var!(font-sm);
2318 font-weight: "400";
2319 }
2320
2321 pub c_vconsole_filter_bar {
2322 display: "flex";
2323 gap: var!(space-sm);
2324 padding: format!("{} 0px", var!(space-sm));
2325 border-bottom: format!("1px dashed {}", var!(border));
2326 flex-shrink: "0";
2327 align-items: "center";
2328 }
2329
2330 pub c_vconsole_filter_badge {
2331 display: "inline-flex";
2332 justify-content: "center";
2333 align-items: "center";
2334 color: var!(text-on-accent);
2335 padding: format!("{} {}", var!(space-2xs), var!(space-sm));
2336 border: format!("1px solid {}", var!(accent));
2337 font-size: var!(font-xs);
2338 font-weight: "600";
2339 cursor: "pointer";
2340 text-align: "center";
2341 background: var!(accent);
2342 :focus-visible {
2343 outline: "none";
2344 }
2345 }
2346
2347 pub c_vconsole_filter_badge_outline {
2348 display: "inline-flex";
2349 justify-content: "center";
2350 align-items: "center";
2351 color: var!(foreground);
2352 padding: format!("{} {}", var!(space-2xs), var!(space-sm));
2353 font-size: var!(font-xs);
2354 font-weight: "600";
2355 cursor: "pointer";
2356 text-align: "center";
2357 border: format!("1.5px solid {}", var!(border));
2358 }
2359
2360 pub c_vconsole_level_badge {
2361 padding: format!("{} {}", var!(space-2xs), var!(space-sm));
2362 font-size: var!(font-xs);
2363 margin-right: var!(space-sm);
2364 letter-spacing: "0.05em";
2365 color: var!(foreground);
2366 border: "1px solid currentColor";
2367 wrap: "nowrap";
2368 flex-shrink: "0";
2369 }
2370
2371 pub c_mobile_header {
2376 display: "flex";
2377 align-items: "center";
2378 justify-content: "space-between";
2379 padding: format!("0px {}", var!(space-lg));
2380 height: var!(mobile-header-height);
2381 flex-shrink: "0";
2382 position: "sticky";
2383 top: "0px";
2384 z-index: "100";
2385 contain: "content";
2386 border-bottom: format!("1px solid {}", var!(border));
2387 }
2388
2389 pub c_mobile_header_left {
2390 display: "flex";
2391 align-items: "center";
2392 gap: format!("{}", var!(space-md));
2393 }
2394
2395 pub c_mobile_header_logo {
2396 display: "flex";
2397 align-items: "center";
2398 gap: format!("{}", var!(space-sm));
2399 text-decoration: "none";
2400 color: var!(foreground);
2401 }
2402
2403 pub c_mobile_menu_button {
2404 width: "40px";
2405 height: "40px";
2406 border: "none";
2407 cursor: "pointer";
2408 font-size: "22px";
2409 font-weight: "700";
2410 display: "flex";
2411 align-items: "center";
2412 justify-content: "center";
2413 color: var!(foreground);
2414 padding: "0px";
2415 :active {
2416 background: "transparent";
2417 color: var!(foreground);
2418 }
2419 }
2420
2421 pub c_mobile_theme_button {
2422 width: "40px";
2423 height: "40px";
2424 border: "none";
2425 cursor: "pointer";
2426 display: "flex";
2427 align-items: "center";
2428 justify-content: "center";
2429 padding: "0px";
2430 :active {
2431 background: "transparent";
2432 }
2433 }
2434
2435 pub c_mobile_menu_button_active {
2436 width: "40px";
2437 height: "40px";
2438 border: "none";
2439 cursor: "pointer";
2440 font-size: "22px";
2441 font-weight: "700";
2442 display: "flex";
2443 align-items: "center";
2444 justify-content: "center";
2445 color: var!(accent);
2446 padding: "0px";
2447 :active {
2448 background: var!(background);
2449 color: var!(accent);
2450 }
2451 }
2452
2453 pub c_mobile_drawer_close_button {
2454 width: "32px";
2455 height: "32px";
2456 border: "none";
2457 cursor: "pointer";
2458 font-size: "18px";
2459 font-weight: "500";
2460 display: "flex";
2461 align-items: "center";
2462 justify-content: "center";
2463 color: var!(muted-foreground);
2464 padding: "0px";
2465 transition: format!("color {} {}", var!(duration-fast), var!(ease-out));
2466 :hover {
2467 color: var!(foreground);
2468 }
2469 :active {
2470 color: var!(muted-foreground);
2471 }
2472 }
2473
2474 pub c_mobile_overlay {
2475 position: "fixed";
2476 top: "0px";
2477 left: "0px";
2478 width: "100%";
2479 height: "100%";
2480 background: var!(bg-overlay);
2481 z-index: "200";
2482 contain: "layout style paint";
2483 transition: format!("opacity {} {}", var!(duration-overlay), var!(ease-out));
2484 }
2485
2486 pub c_mobile_overlay_hidden {
2487 opacity: "0";
2488 pointer-events: "none";
2489 }
2490
2491 pub c_mobile_nav_drawer {
2492 position: "fixed";
2493 top: "0px";
2494 left: "0px";
2495 width: "240px";
2496 max-width: "100%";
2497 height: "100%";
2498 background: var!(background);
2499 z-index: "201";
2500 display: "flex";
2501 flex-direction: "column";
2502 padding-top: var!(padding-shell-top);
2503 padding-bottom: var!(padding-shell-bottom);
2504 contain: "layout style paint";
2505 will-change: "transform";
2506 transition: format!("transform {} {}", var!(duration-overlay), var!(ease-out));
2507 overflow: "hidden";
2508 }
2509
2510 pub c_mobile_nav_drawer_closed {
2511 transform: "translateX(-100%)";
2512 will-change: "auto";
2513 }
2514
2515 pub c_mobile_nav_drawer_header {
2516 display: "flex";
2517 align-items: "center";
2518 justify-content: "space-between";
2519 padding: format!("0px {}", var!(space-lg));
2520 height: var!(mobile-header-height);
2521 flex-shrink: "0";
2522 position: "relative";
2523 ::after {
2524 content: "''";
2525 position: "absolute";
2526 bottom: "0px";
2527 left: var!(space-lg);
2528 right: var!(space-lg);
2529 height: "1px";
2530 background: format!("linear-gradient(90deg, transparent, {}, transparent)", var!(border));
2531 }
2532 }
2533
2534 pub c_mobile_main {
2535 c_app_main();
2536 ::-webkit-scrollbar {
2537 width: "0px";
2538 }
2539 }
2540
2541 pub c_keep_alive_tab_bar {
2546 display: "flex";
2547 border-bottom: format!("1px dashed {}", var!(border));
2548 margin-bottom: var!(gap-component);
2549 gap: var!(gap-element);
2550 }
2551
2552 pub c_keep_alive_tab_panel {
2553 padding: format!("{} 0px", var!(gap-element));
2554 }
2555
2556 pub c_keep_alive_panel_title {
2557 margin-top: "0px";
2558 color: var!(accent);
2559 font-size: var!(font-md);
2560 margin-bottom: var!(gap-element);
2561 }
2562
2563 pub c_keep_alive_demo_text {
2564 color: "inherit";
2565 font-size: var!(font-base);
2566 margin-bottom: var!(gap-component);
2567 }
2568
2569 pub c_keep_alive_counter_display {
2570 display: "flex";
2571 justify-content: "center";
2572 align-items: "center";
2573 margin: format!("{} 0px", var!(space-xl));
2574 }
2575
2576 pub c_keep_alive_counter_value {
2577 font-size: var!(font-5xl);
2578 font-weight: "700";
2579 font-variant-numeric: "tabular-nums";
2580 color: var!(accent);
2581 min-width: "120px";
2582 text-align: "center";
2583 }
2584
2585 pub c_keep_alive_counter_controls {
2586 display: "flex";
2587 flex-wrap: "wrap";
2588 gap: format!("{}", var!(space-md));
2589 }
2590
2591 pub c_keep_alive_form_group {
2592 margin-bottom: var!(gap-component);
2593 }
2594
2595 pub c_keep_alive_form_preview {
2596 margin-top: var!(gap-component);
2597 background: var!(accent-muted);
2598 }
2599
2600 pub c_keep_alive_preview_label {
2601 font-size: var!(font-base);
2602 font-weight: "600";
2603 color: var!(accent);
2604 margin: format!("0px 0px {} 0px", var!(space-xs));
2605 }
2606
2607 pub c_file_upload_input_hidden {
2612 position: "absolute";
2613 width: "1px";
2614 height: "1px";
2615 padding: "0px";
2616 margin: "-1px";
2617 overflow: "hidden";
2618 clip: "rect(0, 0, 0, 0)";
2619 white-space: "nowrap";
2620 border: "0px";
2621 }
2622
2623 pub c_file_upload_options {
2624 margin: format!("{} 0px", var!(gap-component));
2625 }
2626
2627 pub c_file_upload_item {
2628 display: "flex";
2629 align-items: "center";
2630 gap: format!("{}", var!(space-md));
2631 margin: format!("{} 0px", var!(space-sm));
2632 font-size: var!(font-base);
2633 color: "inherit";
2634 }
2635
2636 pub c_file_upload_item_index {
2637 font-size: var!(font-sm);
2638 font-weight: "600";
2639 color: var!(accent);
2640 min-width: "24px";
2641 }
2642
2643 pub c_file_upload_item_name {
2644 color: "inherit";
2645 word-break: "break-all";
2646 }
2647
2648 pub c_binding_child_box {
2653 display: "flex";
2654 flex-direction: "column";
2655 gap: var!(gap-component);
2656 margin-top: var!(gap-component);
2657 }
2658
2659 pub c_binding_child_label {
2660 font-size: var!(font-base);
2661 font-weight: "600";
2662 color: var!(accent);
2663 text-transform: "uppercase";
2664 letter-spacing: "0.05em";
2665 }
2666
2667 pub c_binding_parent_box {
2668 display: "flex";
2669 flex-direction: "column";
2670 gap: var!(gap-component);
2671 margin-top: var!(gap-component);
2672 }
2673
2674 pub c_binding_section_title {
2675 margin-top: var!(gap-component);
2676 margin-bottom: var!(gap-element);
2677 color: var!(accent);
2678 font-size: var!(font-md);
2679 font-weight: "600";
2680 }
2681
2682 pub c_binding_temp_converter {
2683 display: "flex";
2684 align-items: "flex-end";
2685 gap: var!(gap-component);
2686 flex-wrap: "wrap";
2687 margin-top: var!(gap-component);
2688 }
2689
2690 pub c_binding_temp_field {
2691 flex: "1";
2692 min-width: "120px";
2693 }
2694
2695 pub c_binding_temp_arrow {
2696 font-size: "20px";
2697 font-weight: "700";
2698 color: var!(accent);
2699 padding-bottom: "10px";
2700 }
2701
2702 pub c_binding_color_mixer {
2703 margin-top: var!(gap-component);
2704 }
2705
2706 pub c_binding_color_preview {
2707 width: "100%";
2708 height: "80px";
2709 display: "flex";
2710 align-items: "center";
2711 justify-content: "center";
2712 margin-bottom: var!(gap-component);
2713 }
2714
2715 pub c_binding_color_hex {
2716 font-family: "ui-monospace, monospace";
2717 font-size: var!(font-xl);
2718 font-weight: "700";
2719 color: var!(text-on-accent);
2720 letter-spacing: "0.02em";
2721 }
2722
2723 pub c_binding_slider_row {
2724 display: "flex";
2725 align-items: "center";
2726 gap: format!("{}", var!(space-md));
2727 margin-bottom: var!(space-sm);
2728 }
2729
2730 pub c_binding_slider_label {
2731 font-size: var!(font-base);
2732 font-weight: "700";
2733 min-width: var!(font-sm);
2734 }
2735
2736 pub c_binding_slider {
2737 flex: "1";
2738 height: "24px";
2739 padding: "0px";
2740 cursor: "pointer";
2741 -webkit-appearance: "none";
2742 appearance: "none";
2743 border: "none";
2744 outline: "none";
2745 ::-webkit-slider-runnable-track {
2746 height: "6px";
2747 background: format!("linear-gradient(to right, {} 0%, {} var(--value,50%), {} var(--value,50%), {} 100%)", var!(foreground), var!(foreground), var!(border), var!(border));
2748 border-radius: "3px";
2749 border: "none";
2750 }
2751 ::-webkit-slider-thumb {
2752 width: "20px";
2753 height: "20px";
2754 background: var!(background);
2755 border: format!("2px solid {}", var!(accent));
2756 border-radius: "50%";
2757 cursor: "pointer";
2758 -webkit-appearance: "none";
2759 margin-top: "-7px";
2760 }
2761 : active::-webkit-slider-thumb {
2762 transform: "scale(0.92)";
2763 }
2764 ::-moz-range-track {
2765 height: "6px";
2766 background: format!("linear-gradient(to right, {} 0%, {} var(--value,50%), {} var(--value,50%), {} 100%)", var!(foreground), var!(foreground), var!(border), var!(border));
2767 border-radius: "3px";
2768 border: "none";
2769 }
2770 ::-moz-range-thumb {
2771 width: "20px";
2772 height: "20px";
2773 background: var!(background);
2774 border: format!("2px solid {}", var!(accent));
2775 border-radius: "50%";
2776 cursor: "pointer";
2777 }
2778 : active::-moz-range-thumb {
2779 transform: "scale(0.92)";
2780 }
2781 }
2782
2783 pub c_binding_slider_value {
2784 font-size: var!(font-base);
2785 font-weight: "500";
2786 color: "inherit";
2787 min-width: "32px";
2788 text-align: "right";
2789 font-family: "ui-monospace, monospace";
2790 }
2791
2792 pub c_binding_typed_prop_value {
2793 font-family: "ui-monospace, monospace";
2794 font-size: var!(font-base);
2795 font-weight: "600";
2796 color: var!(accent);
2797 padding: format!("1px {}", var!(space-sm));
2798 }
2799
2800 pub c_binding_typed_prop_group {
2801 display: "flex";
2802 align-items: "center";
2803 gap: var!(space-sm);
2804 }
2805
2806 pub c_binding_typed_warning {
2807 font-size: var!(font-base);
2808 font-weight: "500";
2809 color: var!(foreground);
2810 margin-bottom: "0px";
2811 }
2812
2813 pub c_binding_form_label {
2814 display: "block";
2815 color: "inherit";
2816 font-weight: "500";
2817 font-size: var!(font-base);
2818 }
2819
2820 pub c_binding_demo_text {
2821 color: "inherit";
2822 margin: "0px"
2823 }
2824
2825 pub c_binding_compact_button {
2826 display: "inline-flex";
2827 justify-content: "center";
2828 align-items: "center";
2829 height: "42px";
2830 padding: format!("0px {}", var!(space-md));
2831 background: var!(accent);
2832 color: var!(text-on-accent);
2833 border: format!("1px solid {}", var!(accent));
2834 cursor: "pointer";
2835 font-size: var!(font-sm);
2836 font-weight: "600";
2837 outline: "none";
2838 white-space: "nowrap";
2839 user-select: "none";
2840 -webkit-user-select: "none";
2841 box-sizing: "border-box";
2842 :hover {
2843 background: var!(accent);
2844 }
2845 :focus-visible {
2846 outline: "none";
2847 }
2848 :active {
2849 background: var!(accent);
2850 color: var!(text-on-accent);
2851 border-color: var!(accent);
2852 }
2853 }
2854
2855 pub c_attrs_dynamic_demo(prop_key: &str, prop_value: &str) {
2860 {
2861 prop_key
2862 }
2863 : prop_value;
2864 margin-top: var!(gap-component);
2865 color: "inherit";
2866 margin-top: var!(space-md);
2867 }
2868
2869 pub c_dynamic_component_tab_bar {
2874 display: "flex";
2875 flex-wrap: "wrap";
2876 gap: var!(gap-element);
2877 margin-bottom: var!(gap-component);
2878 }
2879
2880 pub c_dynamic_component_panel {
2881 display: "block";
2882 min-height: var!(min-height-sm);
2883 margin-top: var!(gap-component);
2884 }
2885
2886 pub c_virtual_list_status {
2891 display: "flex";
2892 gap: var!(gap-component);
2893 padding: format!("{} 0px", var!(gap-component));
2894 flex-wrap: "nowrap";
2895 overflow: "hidden";
2896 text-overflow: "ellipsis";
2897 white-space: "nowrap";
2898 @media ((max-width: 767px)) {
2899 gap: var!(gap-component-mobile);
2900 }
2901 }
2902
2903 pub c_virtual_list_status_item {
2904 font-size: var!(font-base);
2905 color: "inherit";
2906 overflow: "hidden";
2907 text-overflow: "ellipsis";
2908 white-space: "nowrap";
2909 }
2910
2911 pub c_virtual_list_status_value {
2912 font-weight: "700";
2913 color: var!(accent);
2914 font-family: "ui-monospace, monospace";
2915 }
2916
2917 pub c_virtual_list_container {
2918 flex: "1";
2919 height: "666px";
2920 max-height: "666px";
2921 overflow-y: "auto";
2922 }
2923
2924 pub c_virtual_list_card {
2925 flex: "1";
2926 padding: var!(space-xl);
2927 color: var!(foreground);
2928 display: "flex";
2929 flex-direction: "column";
2930 @media ((max-width: 767px)) {
2931 padding: var!(space-lg);
2932 }
2933 }
2934
2935 pub c_virtual_list_row {
2936 display: "flex";
2937 align-items: "center";
2938 gap: var!(space-lg);
2939 height: "100%";
2940 box-sizing: "border-box";
2941 }
2942
2943 pub c_virtual_list_row_index {
2944 min-width: "36px";
2945 font-size: var!(font-sm);
2946 font-weight: "600";
2947 color: var!(accent);
2948 font-family: "ui-monospace, monospace";
2949 flex-shrink: "0";
2950 display: "flex";
2951 align-items: "center";
2952 }
2953
2954 pub c_virtual_list_row_label {
2955 font-size: var!(font-base);
2956 font-weight: "500";
2957 color: "inherit";
2958 min-width: "120px";
2959 flex-shrink: "0";
2960 overflow: "hidden";
2961 text-overflow: "ellipsis";
2962 white-space: "nowrap";
2963 display: "flex";
2964 align-items: "center";
2965 }
2966
2967 pub c_virtual_list_row_description {
2968 font-size: var!(font-base);
2969 color: "inherit";
2970 opacity: "1";
2971 overflow: "hidden";
2972 text-overflow: "ellipsis";
2973 white-space: "nowrap";
2974 flex: "1";
2975 display: "flex";
2976 align-items: "center";
2977 }
2978
2979 pub c_element_stack {
2984 display: "flex";
2985 flex-direction: "column";
2986 gap: var!(gap-element);
2987 }
2988
2989 pub c_switcher {
2990 display: "flex";
2991 gap: var!(gap-component);
2992 flex-wrap: "wrap";
2993 @media ((max-width: 767px)) {
2994 flex-direction: "column";
2995 gap: var!(gap-component-mobile);
2996 }
2997 }
2998
2999 pub c_switcher_col {
3000 flex: "1";
3001 min-width: "200px";
3002 @media ((max-width: 767px)) {
3003 min-width: "100%";
3004 }
3005 }
3006
3007 pub c_hint {
3012 color: "inherit";
3013 opacity: "1";
3014 font-size: var!(font-base);
3015 margin-bottom: var!(gap-component);
3016 }
3017
3018 pub c_net_messages_empty {
3023 color: "inherit";
3024 opacity: "1";
3025 padding: var!(space-xl);
3026 text-align: "center";
3027 font-size: var!(font-base);
3028 }
3029
3030 pub c_net_messages_list {
3031 display: "flex";
3032 flex-direction: "column";
3033 gap: var!(space-xs);
3034 }
3035
3036 pub c_net_message_item {
3037 display: "flex";
3038 align-items: "baseline";
3039 gap: var!(gap-element);
3040 justify-content: "space-between";
3041 }
3042
3043 pub c_net_message_index {
3044 color: var!(accent);
3045 font-size: var!(font-sm);
3046 font-weight: "600";
3047 white-space: "nowrap";
3048 flex-shrink: "0";
3049 }
3050
3051 pub c_net_message_data {
3052 color: "inherit";
3053 font-size: var!(font-base);
3054 word-break: "break-all";
3055 overflow-wrap: "break-word";
3056 flex: "1";
3057 min-width: "0";
3058 }
3059
3060 pub c_ws_message_input {
3065 width: "100%";
3066 flex: "1";
3067 height: "42px";
3068 padding: format!("0px {}", var!(space-lg));
3069 color: var!(foreground);
3070 border: format!("1px solid {}", var!(border));
3071 font-size: var!(font-base);
3072 line-height: "normal";
3073 box-sizing: "border-box";
3074 outline: "none";
3075 appearance: "none";
3076 -webkit-appearance: "none";
3077 -moz-appearance: "none";
3078 vertical-align: "middle";
3079 :hover {
3080 border-color: var!(accent);
3081 background: var!(accent-muted);
3082 }
3083 :focus {
3084 outline: "none";
3085 border-color: var!(accent);
3086 background: var!(accent-muted);
3087 }
3088 }
3089
3090 pub c_ws_message_time {
3091 color: var!(foreground);
3092 font-size: var!(font-sm);
3093 white-space: "nowrap";
3094 flex-shrink: "0";
3095 margin-left: "auto";
3096 }
3097
3098 pub c_home {
3107 position: "relative";
3108 text-align: "center";
3109 margin-bottom: var!(space-xl);
3110 flex: "1";
3111 display: "flex";
3112 flex-direction: "column";
3113 justify-content: "center";
3114 @media ((max-width: 767px)) {
3115 margin-bottom: var!(space-lg);
3116 flex: "0 0 auto";
3117 }
3118 }
3119
3120 pub c_home_content {
3121 position: "relative";
3122 z-index: "1";
3123 }
3124
3125 pub c_home_badge_row {
3126 display: "inline-flex";
3127 align-items: "center";
3128 gap: var!(space-sm);
3129 margin-bottom: var!(space-md);
3130 }
3131
3132 pub c_home_badge {
3133 display: "inline-flex";
3134 justify-content: "center";
3135 align-items: "center";
3136 padding: format!("{} {}", var!(space-xs), var!(space-sm));
3137 color: var!(accent);
3138 font-size: var!(font-xs);
3139 font-weight: "600";
3140 letter-spacing: "0.05em";
3141 border: format!("1px solid {}", var!(accent));
3142 }
3143
3144 pub c_home_title {
3145 font-size: var!(font-5xl);
3146 font-weight: "800";
3147 letter-spacing: "-0.03em";
3148 margin: "0px";
3149 color: var!(foreground);
3150 margin-bottom: var!(space-xs);
3151 @media ((max-width: 767px)) {
3152 font-size: var!(font-4xl);
3153 }
3154 }
3155
3156 pub c_home_subtitle {
3157 font-size: var!(font-lg);
3158 color: var!(foreground);
3159 margin: "0px auto";
3160 max-width: "520px";
3161 margin-bottom: var!(space-lg);
3162 @media ((max-width: 767px)) {
3163 font-size: var!(font-base);
3164 }
3165 }
3166
3167 pub c_home_actions {
3168 display: "flex";
3169 gap: var!(space-md);
3170 justify-content: "center";
3171 flex-wrap: "wrap";
3172 }
3173
3174 pub c_home_btn_primary {
3175 display: "inline-flex";
3176 justify-content: "center";
3177 align-items: "center";
3178 gap: var!(space-sm);
3179 padding: format!("{} {}", var!(space-sm), var!(space-2xl));
3180 background: var!(accent);
3181 color: var!(text-on-accent);
3182 font-size: var!(font-base);
3183 font-weight: "600";
3184 text-decoration: "none";
3185 border: "1.5px solid transparent";
3186 cursor: "pointer";
3187 letter-spacing: "0.01em";
3188 vertical-align: "middle";
3189 min-height: var!(min-height-sm);
3190 :focus-visible {
3191 outline: "none";
3192 }
3193 :active {
3194 background: var!(accent);
3195 color: var!(text-on-accent);
3196 border-color: "1.5px solid transparent";
3197 }
3198 }
3199
3200 pub c_home_btn_secondary {
3201 display: "inline-flex";
3202 justify-content: "center";
3203 align-items: "center";
3204 gap: var!(space-sm);
3205 padding: format!("{} {}", var!(space-sm), var!(space-2xl));
3206 color: var!(accent);
3207 font-size: var!(font-base);
3208 font-weight: "600";
3209 text-decoration: "none";
3210 border: format!("1.5px solid {}", var!(accent));
3211 cursor: "pointer";
3212 letter-spacing: "0.01em";
3213 vertical-align: "middle";
3214 min-height: var!(min-height-sm);
3215 :focus-visible {
3216 outline: "none";
3217 }
3218 :active {
3219 background: "transparent";
3220 color: var!(accent);
3221 border-color: var!(accent);
3222 }
3223 }
3224
3225 pub c_home_stats {
3230 display: "grid";
3231 grid-template-columns: "repeat(4, 1fr)";
3232 gap: var!(space-md);
3233 margin-bottom: var!(space-xl);
3234 @media ((max-width: 767px)) {
3235 grid-template-columns: "repeat(2, 1fr)";
3236 gap: var!(space-sm);
3237 }
3238 }
3239
3240 pub c_home_stat_card {
3241 display: "flex";
3242 flex-direction: "column";
3243 align-items: "center";
3244 justify-content: "center";
3245 gap: var!(space-xs);
3246 }
3247
3248 pub c_home_stat_icon {
3249 font-size: var!(font-2xl);
3250 }
3251
3252 pub c_home_stat_value {
3253 font-size: var!(font-xl);
3254 font-weight: "800";
3255 color: var!(foreground);
3256 letter-spacing: "-0.01em";
3257 }
3258
3259 pub c_home_stat_label {
3260 font-size: var!(font-sm);
3261 color: var!(muted-foreground);
3262 font-weight: "500";
3263 }
3264
3265 pub c_home_section_title {
3270 font-size: var!(font-2xl);
3271 font-weight: "700";
3272 color: var!(foreground);
3273 margin: "0px";
3274 margin: format!("{} 0px", var!(gap-component));
3275 letter-spacing: "-0.02em";
3276 }
3277
3278 pub c_home_section_desc {
3279 font-size: var!(font-base);
3280 color: var!(foreground);
3281 margin: "0px";
3282 margin-bottom: var!(space-2xl);
3283 }
3284
3285 pub c_home_feature_grid {
3286 display: "grid";
3287 grid-template-columns: "repeat(2, 1fr)";
3288 gap: var!(space-md);
3289 @media ((max-width: 767px)) {
3290 grid-template-columns: "1fr";
3291 }
3292 }
3293
3294 pub c_feature_card {
3295 display: "flex";
3296 flex-direction: "column";
3297 gap: var!(space-sm);
3298 padding: "0px";
3299 overflow: "hidden";
3300 }
3301
3302 pub c_feature_header {
3303 display: "flex";
3304 align-items: "center";
3305 gap: var!(space-sm);
3306 }
3307
3308 pub c_feature_icon {
3309 font-size: var!(font-2xl);
3310 display: "flex";
3311 align-items: "center";
3312 justify-content: "center";
3313 line-height: "1";
3314 flex-shrink: "0";
3315 }
3316
3317 pub c_feature_name {
3318 font-size: var!(font-lg);
3319 font-weight: "600";
3320 color: var!(foreground);
3321 margin: "0px";
3322 overflow: "hidden";
3323 text-overflow: "ellipsis";
3324 white-space: "nowrap";
3325 }
3326
3327 pub c_feature_desc {
3328 font-size: var!(font-sm);
3329 color: var!(foreground);
3330 margin: "0px";
3331 }
3332
3333 }