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