1use super::*;
2
3class! {
4 pub c_app_root {
9 display: "flex";
10 height: "100%";
11 padding-bottom: var!(safe-area-inset-bottom);
12 font-family: "system-ui, -apple-system, sans-serif";
13 background: var!(background);
14 color: var!(foreground);
15 user-select: "none";
16 -webkit-user-select: "none";
17 -webkit-font-smoothing: "antialiased";
18 -moz-osx-font-smoothing: "grayscale";
19 text-rendering: "optimizeLegibility";
20 scrollbar-color: format!("{} {}", var!(scrollbar-thumb), var!(scrollbar-track));
21 ::-webkit-scrollbar-thumb {
22 background: var!(scrollbar-thumb);
23 border: "none";
24 border-radius: "0px";
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 }
122 table {
123 border-collapse: "collapse";
124 border-spacing: "0px";
125 }
126 hr {
127 border: "none";
128 margin: "0px";
129 }
130 :focus-visible {
131 outline: "none";
132 }
133 : focus:not(: focus-visible) {
134 outline: "none";
135 }
136 h1, h2, h3, h4, h5, h6 {
137 font-weight: "inherit";
138 font-size: "inherit";
139 }
140 strong, b {
141 font-weight: "700";
142 }
143 em, i {
144 font-style: "italic";
145 }
146 code, pre, kbd, samp {
147 font-family: "ui-monospace, monospace";
148 }
149 @media ((max-width: 767px)) {
150 input, select, textarea {
151 font-size: "16px";
152 }
153 }
154 }
155
156 pub c_mobile_app_root {
157 display: "flex";
158 flex-direction: "column";
159 width: "100%";
160 height: "100%";
161 font-family: "system-ui, -apple-system, sans-serif";
162 background: var!(background);
163 color: var!(foreground);
164 padding: format!("0px {} {} {}", var!(safe-area-inset-right), var!(padding-shell-bottom), var!(safe-area-inset-left));
165 scrollbar-color: format!("{} {}", var!(scrollbar-thumb), var!(scrollbar-track));
166 ::-webkit-scrollbar-thumb {
167 background: var!(scrollbar-thumb);
168 border: "none";
169 border-radius: "0px";
170 }
171 ::-webkit-scrollbar-thumb:hover {
172 background: var!(scrollbar-thumb-hover);
173 }
174 ::-webkit-scrollbar-thumb:active {
175 background: var!(scrollbar-thumb-active);
176 }
177 }
178
179 pub c_app_nav {
184 width: var!(nav-width);
185 background: var!(background);
186 border-left: format!("2px solid {}", var!(border));
187 display: "flex";
188 flex-direction: "column";
189 height: "100%";
190 flex-shrink: "0";
191 padding-top: var!(safe-area-inset-top);
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 border-radius: "0px";
280 }
281 ::-webkit-scrollbar-thumb:hover {
282 background: var!(scrollbar-thumb-hover);
283 }
284 ::-webkit-scrollbar-thumb:active {
285 background: var!(scrollbar-thumb-active);
286 }
287 }
288
289 pub c_nav_theme_toggle {
290 padding: format!("{} {}", var!(space-md), var!(space-xl));
291 flex-shrink: "0";
292 margin-top: "auto";
293 @media ((max-width: 767px)) {
294 display: "none";
295 }
296 }
297
298 pub c_nav_locale_row {
301 padding: format!("{} {}", var!(space-md), var!(space-xl));
302 flex-shrink: "0";
303 }
304
305 pub c_nav_theme_button {
306 width: "100%";
307 height: "36px";
308 padding: "0px";
309 cursor: "pointer";
310 outline: "none";
311 border: format!("1px dashed {}", var!(border));
312 display: "flex";
313 align-items: "center";
314 justify-content: "center";
315 :focus-visible {
316 outline: "none";
317 }
318 :active {
319 background: "transparent";
320 border-color: var!(border);
321 }
322 }
323
324 pub c_theme_icon_sun {
325 width: "20px";
326 height: "20px";
327 background-repeat: "no-repeat";
328 background-position: "center";
329 background-size: "20px 20px";
330 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\")";
331 transition: format!("transform {} {}", var!(duration-normal), var!(ease-out));
332 }
333
334 pub c_theme_icon_moon {
335 width: "20px";
336 height: "20px";
337 background-repeat: "no-repeat";
338 background-position: "center";
339 background-size: "20px 20px";
340 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\")";
341 transition: format!("transform {} {}", var!(duration-normal), var!(ease-out));
342 }
343
344 pub c_nav_footer {
345 padding: format!("{} {}", var!(space-lg), var!(space-xl));
346 position: "relative";
347 font-size: var!(font-xs);
348 color: var!(muted-foreground);
349 flex-shrink: "0";
350 text-decoration: "none";
351 display: "flex";
352 align-items: "center";
353 gap: var!(space-xs);
354 cursor: "pointer";
355 transition: format!("opacity {} {}", var!(duration-fast), var!(ease-out));
356 opacity: "1";
357 :hover {
358 opacity: "1";
359 }
360 }
361
362 pub c_nav_footer_divider {
363 position: "absolute";
364 top: "0";
365 left: var!(space-lg);
366 right: var!(space-lg);
367 height: "1px";
368 background: format!("linear-gradient(90deg, transparent, {}, transparent)", var!(border));
369 }
370
371 pub c_nav_footer_text {
372 font-weight: "400";
373 letter-spacing: "0.02em";
374 }
375
376 pub c_nav_footer_brand {
377 font-weight: "700";
378 color: var!(accent);
379 }
380
381 pub c_nav_item_active {
382 display: "flex";
383 align-items: "center";
384 gap: var!(space-sm);
385 padding: format!("{} {}", var!(space-md), var!(space-xl));
386 text-decoration: "none";
387 font-size: var!(font-base);
388 color: var!(text-on-accent);
389 font-weight: "600";
390 background: var!(accent);
391 }
392
393 pub c_nav_item_inactive {
394 display: "flex";
395 align-items: "center";
396 gap: var!(space-sm);
397 padding: format!("{} {}", var!(space-md), var!(space-xl));
398 text-decoration: "none";
399 font-size: var!(font-base);
400 color: var!(foreground);
401 font-weight: "400";
402 :hover {
403 background: var!(accent-muted);
404 color: var!(accent);
405 box-shadow: format!("inset 4px 0 0 0 {}", var!(foreground));
406 }
407 }
408
409 pub c_nav_item_icon {
410 flex-shrink: "0";
411 width: "20px";
412 text-align: "center";
413 }
414
415 pub c_nav_item_label {
416 flex: "1";
417 overflow: "hidden";
418 text-overflow: "ellipsis";
419 white-space: "nowrap";
420 color: "inherit";
421 }
422
423 pub c_app_main {
428 flex: "1";
429 height: "100%";
430 overflow: "auto";
431 padding: format!("{} {} {} {}", var!(padding-main-top), var!(padding-main-horizontal), var!(padding-main-bottom), var!(padding-main-horizontal));
432 scrollbar-color: format!("{} {}", var!(scrollbar-thumb), var!(scrollbar-track));
433 ::-webkit-scrollbar {
434 width: "6px";
435 }
436 ::-webkit-scrollbar-thumb {
437 background: var!(scrollbar-thumb);
438 border: "none";
439 border-radius: "0px";
440 }
441 ::-webkit-scrollbar-thumb:hover {
442 background: var!(scrollbar-thumb-hover);
443 }
444 ::-webkit-scrollbar-thumb:active {
445 background: var!(scrollbar-thumb-active);
446 }
447 @media ((max-width: 767px)) {
448 padding: format!("{} {} {} {}", var!(padding-main-top-mobile), var!(padding-main-horizontal-mobile), var!(padding-main-bottom), var!(padding-main-horizontal-mobile));
449 scrollbar-width: "none";
450 ::-webkit-scrollbar {
451 width: "0px";
452 }
453 }
454 }
455
456 pub c_page_router {
457 flex: "1";
458 display: "flex";
459 flex-direction: "column";
460 }
461
462 pub c_page_container {
463 width: "100%";
464 margin: "0px auto";
465 max-width: var!(content-max-width);
466 }
467
468 pub c_page {
473 position: "relative";
474 text-align: "center";
475 box-sizing: "border-box";
476 }
477
478 pub c_page_glow {
479 position: "absolute";
480 top: "-50%";
481 left: "50%";
482 transform: "translateX(-50%)";
483 width: "400px";
484 max-width: "100%";
485 height: "400px";
486 pointer-events: "none";
487 }
488
489 pub c_page_content {
490 position: "relative";
491 z-index: "1";
492 }
493
494 pub c_page_icon {
495 font-size: "36px";
496 padding-bottom: var!(space-md);
497 @media ((max-width: 767px)) {
498 font-size: "40px";
499 }
500 }
501
502 pub c_page_title {
503 font-size: var!(font-4xl);
504 font-weight: "800";
505 letter-spacing: "-0.03em";
506 margin: "0px";
507 color: var!(foreground);
508 margin-bottom: var!(space-sm);
509 @media ((max-width: 767px)) {
510 font-size: var!(font-3xl);
511 }
512 }
513
514 pub c_page_subtitle {
515 font-size: var!(font-lg);
516 color: var!(muted-foreground);
517 margin: "0px auto";
518 margin-bottom: var!(space-sm);
519 max-width: "560px";
520 opacity: "1";
521 @media ((max-width: 767px)) {
522 font-size: var!(font-base);
523 }
524 }
525
526 pub c_card {
531 color: var!(foreground);
532 box-sizing: "border-box";
533 }
534
535 pub c_card_title {
536 margin: format!("{} 0px", var!(gap-component));
537 color: var!(foreground);
538 font-size: var!(font-lg);
539 font-weight: "600";
540 padding-bottom: var!(gap-component);
541 border-bottom: format!("1px dashed {}", var!(border));
542 letter-spacing: "-0.01em";
543 @media ((max-width: 767px)) {
544 font-size: var!(font-md);
545 }
546 }
547
548 pub c_primary_button {
553 display: "flex";
554 justify-content: "center";
555 align-items: "center";
556 gap: var!(space-sm);
557 width: "100%";
558 height: "42px";
559 background: var!(accent);
560 color: var!(text-on-accent);
561 border: "1px solid transparent";
562 padding: format!("0px {}", var!(space-2xl));
563 cursor: "pointer";
564 font-size: var!(font-base);
565 font-weight: "500";
566 letter-spacing: "0.02em";
567 text-align: "center";
568 outline: "none";
569 box-sizing: "border-box";
570 white-space: "nowrap";
571 overflow: "hidden";
572 text-overflow: "ellipsis";
573 user-select: "none";
574 -webkit-user-select: "none";
575 :focus-visible {
576 outline: "none";
577 }
578 :disabled {
579 background: var!(muted-foreground);
580 cursor: "not-allowed";
581 opacity: "1";
582 }
583 :hover {
584 background: var!(accent);
585 }
586 :active {
587 background: var!(accent);
588 color: var!(text-on-accent);
589 border-color: "transparent";
590 }
591 @media ((max-width: 767px)) {
592 max-width: "100%";
593 padding: format!("{} {}", var!(space-lg), var!(space-xl));
594 font-size: var!(font-md);
595 }
596 }
597
598 pub c_modal_close_button {
599 display: "flex";
600 justify-content: "center";
601 align-items: "center";
602 color: "inherit";
603 border: "none";
604 padding: format!("{} {}", var!(space-sm), var!(space-md));
605 cursor: "pointer";
606 font-size: "20px";
607 font-weight: "400";
608 vertical-align: "middle";
609 outline: "none";
610 opacity: "1";
611 flex-shrink: "0";
612 transition: format!("opacity {} {}", var!(duration-fast), var!(ease-out));
613 :hover {
614 opacity: "1";
615 }
616 :active {
617 opacity: "1";
618 }
619 :focus {
620 outline: "none";
621 }
622 }
623
624 pub c_button_controls {
629 display: "flex";
630 flex-wrap: "wrap";
631 gap: var!(gap-element);
632 margin-top: var!(gap-component);
633 margin-bottom: var!(gap-component);
634 }
635
636 pub c_euv_button_primary_md {
641 display: "flex";
642 justify-content: "center";
643 align-items: "center";
644 gap: var!(space-sm);
645 flex: "1 1 120px";
646 height: "42px";
647 padding: format!("0px {}", var!(space-xl));
648 background: var!(accent);
649 color: var!(text-on-accent);
650 cursor: "pointer";
651 font-size: var!(font-base);
652 font-weight: "500";
653 outline: "none";
654 white-space: "nowrap";
655 user-select: "none";
656 -webkit-user-select: "none";
657 box-sizing: "border-box";
658 :disabled {
659 background: var!(muted-foreground);
660 cursor: "not-allowed";
661 opacity: "1";
662 }
663 }
664
665 pub c_euv_button_outline_md {
666 display: "flex";
667 justify-content: "center";
668 align-items: "center";
669 gap: var!(space-sm);
670 flex: "1 1 120px";
671 height: "42px";
672 padding: format!("0px {}", var!(space-xl));
673 color: var!(foreground);
674 border: format!("1px solid {}", var!(border));
675 cursor: "pointer";
676 font-size: var!(font-base);
677 font-weight: "500";
678 outline: "none";
679 white-space: "nowrap";
680 user-select: "none";
681 -webkit-user-select: "none";
682 box-sizing: "border-box";
683 :focus-visible {
684 outline: "none";
685 }
686 :disabled {
687 background: var!(muted-foreground);
688 cursor: "not-allowed";
689 opacity: "1";
690 }
691 }
692
693 pub c_badge {
698 display: "inline-flex";
699 justify-content: "center";
700 align-items: "center";
701 color: var!(text-on-accent);
702 padding: format!("{} {}", var!(space-2xs), var!(space-sm));
703 border: format!("1px solid {}", var!(accent));
704 font-size: var!(font-xs);
705 font-weight: "600";
706 cursor: "pointer";
707 text-align: "center";
708 background: var!(accent);
709 :focus-visible {
710 outline: "none";
711 }
712 @media ((max-width: 767px)) {
713 padding: format!("{} {}", var!(space-2xs), var!(space-xs));
714 font-size: var!(font-xs);
715 }
716 }
717
718 pub c_badge_outline {
719 display: "inline-flex";
720 justify-content: "center";
721 align-items: "center";
722 color: var!(foreground);
723 padding: format!("{} {}", var!(space-2xs), var!(space-sm));
724 font-size: var!(font-xs);
725 font-weight: "600";
726 cursor: "pointer";
727 text-align: "center";
728 border: format!("1.5px solid {}", var!(border));
729 @media ((max-width: 767px)) {
730 padding: format!("{} {}", var!(space-2xs), var!(space-xs));
731 font-size: var!(font-xs);
732 }
733 }
734
735 pub c_euv_tag_solid_black {
736 display: "inline-block";
737 vertical-align: "middle";
738 text-align: "center";
739 line-height: "1";
740 color: var!(text-on-accent);
741 padding: format!("{} {}", var!(space-xs), var!(space-md));
742 font-size: var!(font-sm);
743 font-weight: "600";
744 cursor: "pointer";
745 background: var!(accent);
746 border: format!("1px solid {}", var!(accent));
747 box-sizing: "border-box";
748 }
749
750 pub c_euv_tag_solid_white {
751 display: "inline-block";
752 vertical-align: "middle";
753 text-align: "center";
754 line-height: "1";
755 color: var!(foreground);
756 padding: format!("{} {}", var!(space-2xs), var!(space-sm));
757 font-size: var!(font-xs);
758 font-weight: "600";
759 cursor: "pointer";
760 border: format!("1.5px solid {}", var!(accent));
761 box-sizing: "border-box";
762 }
763
764 pub c_euv_tag_outline_black {
769 display: "inline-block";
770 vertical-align: "middle";
771 text-align: "center";
772 line-height: "1";
773 color: var!(accent);
774 padding: format!("{} {}", var!(space-2xs), var!(space-sm));
775 font-size: var!(font-xs);
776 font-weight: "600";
777 cursor: "pointer";
778 border: format!("1.5px solid {}", var!(accent));
779 box-sizing: "border-box";
780 }
781
782 pub c_euv_tag_outline_white {
783 display: "inline-block";
784 vertical-align: "middle";
785 text-align: "center";
786 line-height: "1";
787 color: var!(foreground);
788 padding: format!("{} {}", var!(space-xs), var!(space-md));
789 font-size: var!(font-sm);
790 font-weight: "600";
791 cursor: "pointer";
792 border: format!("1.5px solid {}", var!(border));
793 box-sizing: "border-box";
794 }
795
796 pub c_euv_input_wrapper {
801 width: "100%";
802 margin: format!("{} 0px", var!(gap-element));
803 }
804
805 pub c_form_label {
806 display: "block";
807 margin-bottom: var!(space-sm);
808 color: "inherit";
809 font-weight: "500";
810 font-size: var!(font-base);
811 }
812
813 pub c_inline_input_row {
814 display: "flex";
815 align-items: "center";
816 gap: var!(gap-component);
817 }
818
819 pub c_euv_input {
820 width: "100%";
821 min-height: var!(min-height-base);
822 padding: format!("0px {}", var!(space-lg));
823 border: format!("1px solid {}", var!(border));
824 font-size: var!(font-base);
825 line-height: "normal";
826 box-sizing: "border-box";
827 outline: "none";
828 color: var!(foreground);
829 appearance: "none";
830 -webkit-appearance: "none";
831 -moz-appearance: "none";
832 vertical-align: "middle";
833 :hover {
834 border-color: var!(accent);
835 background: var!(accent-muted);
836 }
837 :focus {
838 outline: "none";
839 border-color: var!(accent);
840 background: var!(accent-muted);
841 }
842 }
843
844 pub c_euv_input_no_transition {
845 width: "100%";
846 min-height: var!(min-height-base);
847 padding: format!("0px {}", var!(space-lg));
848 border: format!("1px solid {}", var!(border));
849 font-size: var!(font-base);
850 line-height: "normal";
851 box-sizing: "border-box";
852 outline: "none";
853 color: var!(foreground);
854 appearance: "none";
855 -webkit-appearance: "none";
856 -moz-appearance: "none";
857 vertical-align: "middle";
858 }
859
860 pub c_euv_input_error {
861 width: "100%";
862 min-height: var!(min-height-base);
863 padding: format!("0px {}", var!(space-lg));
864 border: format!("1px solid {}", var!(foreground));
865 font-size: var!(font-base);
866 line-height: "normal";
867 box-sizing: "border-box";
868 outline: "none";
869 color: var!(foreground);
870 appearance: "none";
871 -webkit-appearance: "none";
872 -moz-appearance: "none";
873 vertical-align: "middle";
874 :focus {
875 outline: "none";
876 border-color: var!(foreground);
877 }
878 }
879
880 pub c_form_checkbox {
881 cursor: "pointer";
882 width: var!(space-lg);
883 height: var!(space-lg);
884 }
885
886 pub c_form_checkbox_label {
887 font-size: var!(font-base);
888 color: "inherit";
889 cursor: "pointer";
890 }
891
892 pub c_form_checkbox_row {
893 margin: format!("{} 0px", var!(gap-component));
894 display: "flex";
895 align-items: "center";
896 gap: var!(gap-element);
897 }
898
899 pub c_select_input {
900 width: "100%";
901 min-height: var!(min-height-base);
902 padding: format!("0px {}", var!(space-lg));
903 border: format!("1px solid {}", var!(border));
904 font-size: var!(font-base);
905 line-height: "normal";
906 box-sizing: "border-box";
907 outline: "none";
908 cursor: "pointer";
909 appearance: "none";
910 -webkit-appearance: "none";
911 -moz-appearance: "none";
912 color: var!(foreground);
913 vertical-align: "middle";
914 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\")";
915 background-repeat: "no-repeat";
916 background-position: "right 14px center";
917 :focus {
918 outline: "none";
919 border-color: var!(accent);
920 background: var!(accent-muted);
921 }
922 }
923
924 pub c_textarea_input {
925 width: "100%";
926 max-width: "100%";
927 padding: format!("{} {}", var!(space-md), var!(space-lg));
928 border: format!("1px solid {}", var!(border));
929 font-size: var!(font-base);
930 line-height: "normal";
931 box-sizing: "border-box";
932 outline: "none";
933 resize: "vertical";
934 overflow-x: "hidden";
935 word-wrap: "break-word";
936 font-family: "inherit";
937 color: var!(foreground);
938 appearance: "none";
939 -webkit-appearance: "none";
940 -moz-appearance: "none";
941 :hover {
942 border-color: var!(accent);
943 background: var!(accent-muted);
944 }
945 :focus {
946 outline: "none";
947 border-color: var!(accent);
948 background: var!(accent-muted);
949 }
950 }
951
952 pub c_textarea_input_error {
953 width: "100%";
954 max-width: "100%";
955 padding: format!("{} {}", var!(space-md), var!(space-lg));
956 border: format!("1px solid {}", var!(foreground));
957 font-size: var!(font-base);
958 line-height: "normal";
959 box-sizing: "border-box";
960 outline: "none";
961 resize: "vertical";
962 overflow-x: "hidden";
963 word-wrap: "break-word";
964 font-family: "inherit";
965 color: var!(foreground);
966 appearance: "none";
967 -webkit-appearance: "none";
968 -moz-appearance: "none";
969 :focus {
970 outline: "none";
971 border-color: var!(foreground);
972 }
973 }
974
975 pub c_textarea_counter {
976 text-align: "right";
977 margin-top: var!(space-xs);
978 margin-bottom: var!(gap-component);
979 }
980
981 pub c_textarea_counter_text {
982 font-size: var!(font-sm);
983 color: "inherit";
984 opacity: "1";
985 }
986
987 pub c_field_error_text {
988 color: var!(foreground);
989 font-size: var!(font-base);
990 margin-top: var!(space-xs);
991 margin-bottom: var!(space-sm);
992 }
993
994 pub c_error_box {
999 margin: format!("{} 0px", var!(gap-component));
1000 background: var!(accent-muted);
1001 color: var!(foreground);
1002 font-size: var!(font-base);
1003 box-sizing: "border-box";
1004 }
1005
1006 pub c_success_box {
1007 margin: format!("{} 0px", var!(gap-component));
1008 background: var!(accent-muted);
1009 color: var!(foreground);
1010 font-size: var!(font-base);
1011 box-sizing: "border-box";
1012 }
1013
1014 pub c_counter_row {
1019 display: "grid";
1020 grid-template-columns: "1fr 1fr";
1021 align-items: "center";
1022 gap: var!(gap-component);
1023 @media ((max-width: 767px)) {
1024 grid-template-columns: "1fr";
1025 }
1026 }
1027
1028 pub c_counter_text {
1029 font-size: var!(font-base);
1030 color: "inherit";
1031 margin-bottom: var!(gap-component);
1032 }
1033
1034 pub c_counter_value {
1035 font-weight: "700";
1036 color: var!(accent);
1037 font-size: var!(font-base);
1038 }
1039
1040 pub c_badge_row {
1041 display: "flex";
1042 gap: var!(gap-inline);
1043 flex-wrap: "wrap";
1044 align-items: "center";
1045 }
1046
1047 pub c_badge_hint {
1048 margin-bottom: var!(gap-component);
1049 color: "inherit";
1050 opacity: "1";
1051 font-size: var!(font-base);
1052 }
1053
1054 pub c_text_ellipsis {
1059 overflow: "hidden";
1060 text-overflow: "ellipsis";
1061 white-space: "nowrap";
1062 }
1063
1064 pub c_info_row {
1065 display: "flex";
1066 align-items: "center";
1067 gap: var!(space-md);
1068 padding: format!("{} 0", var!(space-sm));
1069 overflow: "hidden";
1070 }
1071
1072 pub c_info_label {
1073 font-size: var!(font-sm);
1074 font-weight: "500";
1075 color: var!(muted-foreground);
1076 min-width: "72px";
1077 flex-shrink: "0";
1078 letter-spacing: "0.02em";
1079 }
1080
1081 pub c_info_value {
1082 c_text_ellipsis();
1083 font-size: var!(font-base);
1084 font-weight: "600";
1085 color: var!(foreground);
1086 font-family: "ui-monospace, monospace";
1087 flex: "1";
1088 }
1089
1090 pub c_info_link {
1091 c_text_ellipsis();
1092 font-size: var!(font-base);
1093 font-weight: "600";
1094 color: var!(accent);
1095 font-family: "ui-monospace, monospace";
1096 flex: "1";
1097 text-decoration: "none";
1098 transition: format!("opacity {} {}", var!(duration-fast), var!(ease-out));
1099 :hover {
1100 opacity: "1";
1101 }
1102 }
1103
1104 pub c_camera_video_container {
1109 margin: format!("{} 0", var!(space-lg));
1110 }
1111
1112 pub c_camera_video_active {
1113 width: "100%";
1114 background: "#000";
1115 aspect-ratio: "16 / 9";
1116 object-fit: "cover";
1117 border: format!("2px solid {}", var!(accent));
1118 box-sizing: "border-box";
1119 }
1120
1121 pub c_camera_video_hidden {
1122 width: "100%";
1123 aspect-ratio: "16 / 9";
1124 display: "none";
1125 }
1126
1127 pub c_camera_video_placeholder {
1128 width: "100%";
1129 aspect-ratio: "16 / 9";
1130 border: format!("2px dashed {}", var!(border));
1131 display: "flex";
1132 align-items: "center";
1133 justify-content: "center";
1134 box-sizing: "border-box";
1135 }
1136
1137 pub c_camera_placeholder_content {
1138 display: "flex";
1139 flex-direction: "column";
1140 align-items: "center";
1141 gap: var!(space-md);
1142 }
1143
1144 pub c_camera_placeholder_icon {
1145 font-size: var!(font-4xl);
1146 opacity: "1";
1147 }
1148
1149 pub c_camera_placeholder_text {
1150 font-size: var!(font-base);
1151 color: "inherit";
1152 opacity: "1";
1153 }
1154
1155 pub c_camera_error_box {
1156 margin: format!("{} 0px", var!(gap-component));
1157 color: var!(foreground);
1158 font-size: var!(font-base);
1159 word-break: "break-all";
1160 overflow-wrap: "break-word";
1161 box-sizing: "border-box";
1162 }
1163
1164 pub c_camera_scan_result_box {
1165 margin-top: var!(gap-component);
1166 box-sizing: "border-box";
1167 }
1168
1169 pub c_camera_scan_result_label {
1170 font-size: var!(font-sm);
1171 font-weight: "600";
1172 color: var!(foreground);
1173 margin-bottom: var!(space-xs);
1174 }
1175
1176 pub c_camera_scan_result_value {
1177 font-size: var!(font-base);
1178 color: "inherit";
1179 word-break: "break-all";
1180 overflow-wrap: "break-word";
1181 }
1182
1183 pub c_canvas_preview_container {
1188 margin: format!("{} 0", var!(space-lg));
1189 overflow: "hidden";
1190 border: format!("2px solid {}", var!(border));
1191 background: "#ffffff";
1192 aspect-ratio: "9 / 16";
1193 display: "flex";
1194 align-items: "center";
1195 justify-content: "center";
1196 box-sizing: "border-box";
1197 }
1198
1199 pub c_canvas_placeholder {
1200 color: var!(muted-foreground);
1201 font-size: var!(font-sm);
1202 text-align: "center";
1203 padding: var!(space-lg);
1204 }
1205
1206 pub c_canvas_preview_image {
1207 width: "100%";
1208 height: "100%";
1209 object-fit: "cover";
1210 display: "block";
1211 }
1212
1213 pub c_canvas_container_fullscreen {
1214 width: "100%";
1215 height: "100%";
1216 background: var!(background);
1217 display: "flex";
1218 flex-direction: "column";
1219 position: "fixed";
1220 top: "0";
1221 left: "0";
1222 z-index: "10002";
1223 padding: format!("{} {} {} {}", var!(padding-shell-top), var!(space-lg), var!(padding-shell-bottom), var!(space-lg));
1224 box-sizing: "border-box";
1225 }
1226
1227 pub c_canvas_drawing_fullscreen_wrapper {
1228 flex: "1";
1229 display: "flex";
1230 align-items: "center";
1231 justify-content: "center";
1232 overflow: "hidden";
1233 padding: var!(space-xs);
1234 }
1235
1236 pub c_canvas_drawing_fullscreen {
1237 border: format!("2px solid {}", var!(border));
1238 display: "block";
1239 cursor: "crosshair";
1240 touch-action: "none";
1241 }
1242
1243 pub c_canvas_fullscreen_toolbar {
1244 display: "flex";
1245 flex-direction: "column";
1246 align-items: "stretch";
1247 width: "100%";
1248 padding: format!("{} {}", var!(space-xs), "0px");
1249 flex-shrink: "0";
1250 gap: var!(space-xs);
1251 }
1252
1253 pub c_canvas_fullscreen_toolbar_row_top {
1254 display: "flex";
1255 align-items: "center";
1256 height: var!(mobile-header-height);
1257 width: "100%";
1258 gap: var!(space-sm);
1259 }
1260
1261 pub c_canvas_fullscreen_toolbar_color_wrapper {
1262 display: "flex";
1263 align-items: "center";
1264 justify-content: "center";
1265 flex: "1";
1266 min-width: "0";
1267 }
1268
1269 pub c_canvas_color_input_fullscreen {
1270 width: "100%";
1271 height: "42px";
1272 border: format!("1px solid {}", var!(border));
1273 cursor: "pointer";
1274 padding: format!("{}", var!(space-xs));
1275 }
1276
1277 pub c_canvas_fullscreen_toolbar_row_bottom {
1278 display: "flex";
1279 align-items: "center";
1280 width: "100%";
1281 }
1282
1283 pub c_canvas_fullscreen_range_input {
1284 flex: "1 1 0%";
1285 min-width: "120px";
1286 cursor: "pointer";
1287 -webkit-appearance: "none";
1288 appearance: "none";
1289 border: "none";
1290 outline: "none";
1291 height: "24px";
1292 ::-webkit-slider-runnable-track {
1293 height: "6px";
1294 background: format!("linear-gradient(to right, {} 0%, {} var(--value,50%), {} var(--value,50%), {} 100%)", var!(foreground), var!(foreground), var!(border), var!(border));
1295 border-radius: "3px";
1296 border: "none";
1297 }
1298 ::-webkit-slider-thumb {
1299 width: "20px";
1300 height: "20px";
1301 background: var!(background);
1302 border: format!("2px solid {}", var!(accent));
1303 border-radius: "50%";
1304 cursor: "pointer";
1305 -webkit-appearance: "none";
1306 margin-top: "-7px";
1307 }
1308 ::-moz-range-track {
1309 height: "6px";
1310 background: format!("linear-gradient(to right, {} 0%, {} var(--value,50%), {} var(--value,50%), {} 100%)", var!(foreground), var!(foreground), var!(border), var!(border));
1311 border-radius: "3px";
1312 border: "none";
1313 }
1314 ::-moz-range-thumb {
1315 width: "20px";
1316 height: "20px";
1317 background: var!(background);
1318 border: format!("2px solid {}", var!(accent));
1319 border-radius: "50%";
1320 cursor: "pointer";
1321 }
1322 }
1323
1324 pub c_canvas_fullscreen_toolbar_button {
1325 flex: "0 0 auto";
1326 overflow: "hidden";
1327 }
1328
1329 pub c_game_container_fullscreen {
1343 width: "100%";
1344 height: "100%";
1345 background: var!(background);
1346 display: "flex";
1347 flex-direction: "column";
1348 position: "fixed";
1349 top: "0";
1350 left: "0";
1351 z-index: "10002";
1352 padding: format!(
1353 "{} {} {} {}",
1354 var!(padding-shell-top),
1355 var!(space-lg),
1356 var!(padding-shell-bottom),
1357 var!(space-lg)
1358 );
1359 box-sizing: "border-box";
1360 }
1361
1362 pub c_game_fullscreen_toolbar {
1368 display: "flex";
1369 align-items: "center";
1370 justify-content: "flex-end";
1371 width: "100%";
1372 padding: format!("{} {} {} {}", var!(space-xs), var!(space-lg), var!(space-xs), var!(space-lg));
1373 flex-shrink: "0";
1374 gap: var!(space-sm);
1375 box-sizing: "border-box";
1376 }
1377
1378 pub c_custom_attrs_demo {
1383 color: var!(foreground);
1388 box-sizing: "border-box";
1389 }
1390
1391 pub c_demo_text {
1392 color: var!(foreground);
1393 margin-bottom: var!(gap-component);
1394 }
1395
1396 pub c_demo_text_muted {
1397 color: var!(foreground);
1398 opacity: "1";
1399 font-size: var!(font-base);
1400 margin-bottom: "0px";
1401 }
1402
1403 pub c_loading_container {
1408 display: "flex";
1409 align-items: "center";
1410 justify-content: "center";
1411 gap: var!(gap-component);
1412 margin: format!("{} 0px", var!(gap-component));
1413 box-sizing: "border-box";
1414 }
1415
1416 pub c_spinner {
1417 width: "28px";
1418 height: "28px";
1419 border: format!("3px solid {}", var!(accent-muted));
1420 border-top: format!("3px solid {}", var!(accent));
1421 border-radius: "50%";
1422 flex-shrink: "0";
1423 animation: "euv-spin 0.8s linear infinite";
1424 }
1425
1426 pub c_loading_text_col {
1427 display: "flex";
1428 flex-direction: "column";
1429 gap: var!(space-xs);
1430 }
1431
1432 pub c_loading_title {
1433 color: var!(foreground);
1434 font-size: var!(font-md);
1435 font-weight: "500";
1436 }
1437
1438 pub c_loading_subtitle {
1439 color: var!(muted-foreground);
1440 font-size: var!(font-base);
1441 }
1442
1443 pub c_loading_overlay(background: &str) {
1444 position: "absolute";
1445 top: "0";
1446 left: "0";
1447 width: "100%";
1448 height: "100%";
1449 display: "flex";
1450 flex-direction: "column";
1451 align-items: "center";
1452 justify-content: "center";
1453 gap: var!(gap-component);
1454 background: background;
1455 z-index: "1";
1456 box-sizing: "border-box";
1457 }
1458
1459 pub c_error_container {
1460 display: "flex";
1461 align-items: "center";
1462 gap: var!(gap-element);
1463 margin-top: var!(gap-component);
1464 box-sizing: "border-box";
1465 }
1466
1467 pub c_error_icon {
1468 width: "20px";
1469 height: "20px";
1470 display: "flex";
1471 align-items: "center";
1472 justify-content: "center";
1473 flex-shrink: "0";
1474 color: var!(foreground);
1475 font-size: var!(font-sm);
1476 font-weight: "700";
1477 }
1478
1479 pub c_error_text {
1480 color: var!(foreground);
1481 font-size: var!(font-base);
1482 }
1483
1484 pub c_data_box {
1485 margin: format!("{} 0px", var!(gap-component));
1486 box-sizing: "border-box";
1487 }
1488
1489 pub c_data_pre {
1490 color: var!(foreground);
1491 font-size: var!(font-base);
1492 margin: "0px";
1493 white-space: "pre-wrap";
1494 word-break: "break-all";
1495 font-family: "ui-monospace, monospace";
1496 }
1497
1498 pub c_fetch_hint {
1499 color: "inherit";
1500 opacity: "1";
1501 font-size: var!(font-base);
1502 margin-bottom: var!(gap-component);
1503 }
1504
1505 pub c_toggle_content {
1510 margin-top: var!(gap-component);
1511 color: "inherit";
1512 }
1513
1514 pub c_toggle_title {
1515 margin-top: "0px";
1516 color: var!(accent);
1517 font-size: var!(font-md);
1518 }
1519
1520 pub c_role_button_row {
1521 display: "flex";
1522 flex-wrap: "nowrap";
1523 gap: var!(gap-element);
1524 margin-bottom: var!(gap-component);
1525 }
1526
1527 pub c_role_guest_text {
1528 color: var!(foreground);
1529 font-size: var!(font-base);
1530 }
1531
1532 pub c_role_user_text {
1533 color: var!(foreground);
1534 font-size: var!(font-base);
1535 }
1536
1537 pub c_role_admin_text {
1538 color: var!(foreground);
1539 font-size: var!(font-base);
1540 }
1541
1542 pub c_tab_bar {
1547 display: "flex";
1548 border-bottom: format!("1px dashed {}", var!(border));
1549 margin-bottom: var!(gap-component);
1550 gap: var!(gap-element);
1551 @media ((max-width: 767px)) {
1552 flex-wrap: "wrap";
1553 }
1554 }
1555
1556 pub c_tab_item_active {
1557 padding: format!("{} {}", var!(space-md), var!(space-xl));
1558 cursor: "pointer";
1559 border-bottom: format!("2px solid {}", var!(accent));
1560 color: var!(text-on-accent);
1561 background: var!(accent);
1562 font-size: var!(font-base);
1563 font-weight: "500";
1564 }
1565
1566 pub c_tab_item_inactive {
1567 padding: format!("{} {}", var!(space-md), var!(space-xl));
1568 cursor: "pointer";
1569 border-bottom: "2px solid transparent";
1570 color: "inherit";
1571 font-size: var!(font-base);
1572 font-weight: "500";
1573 :hover {
1574 background: var!(accent-muted);
1575 color: var!(accent);
1576 }
1577 }
1578
1579 pub c_tab_content {
1580 padding: format!("{} 0px", var!(gap-element));
1581 }
1582
1583 pub c_tab_text {
1584 color: "inherit";
1585 font-size: var!(font-base);
1586 margin-bottom: var!(gap-element);
1587 }
1588
1589 pub c_tab_text_muted {
1590 color: "inherit";
1591 opacity: "1";
1592 font-size: var!(font-base);
1593 }
1594
1595 pub c_tab_text_input {
1596 color: "inherit";
1597 font-size: var!(font-base);
1598 margin-bottom: var!(gap-component);
1599 }
1600
1601 pub c_list_input {
1606 width: "100%";
1607 flex: "1";
1608 height: "42px";
1609 padding: format!("0px {}", var!(space-lg));
1610 border: format!("1px solid {}", var!(border));
1611 font-size: var!(font-base);
1612 line-height: "normal";
1613 box-sizing: "border-box";
1614 outline: "none";
1615 color: var!(foreground);
1616 appearance: "none";
1617 -webkit-appearance: "none";
1618 -moz-appearance: "none";
1619 vertical-align: "middle";
1620 :hover {
1621 border-color: var!(accent);
1622 background: var!(accent-muted);
1623 }
1624 :focus {
1625 outline: "none";
1626 border-color: var!(accent);
1627 background: var!(accent-muted);
1628 }
1629 }
1630
1631 pub c_list_input_error {
1632 width: "100%";
1633 flex: "1";
1634 height: "42px";
1635 padding: format!("0px {}", var!(space-lg));
1636 border: format!("1px solid {}", var!(foreground));
1637 font-size: var!(font-base);
1638 line-height: "normal";
1639 box-sizing: "border-box";
1640 outline: "none";
1641 color: var!(foreground);
1642 appearance: "none";
1643 -webkit-appearance: "none";
1644 -moz-appearance: "none";
1645 vertical-align: "middle";
1646 :focus {
1647 outline: "none";
1648 border-color: var!(foreground);
1649 }
1650 }
1651
1652 pub c_list_error_text {
1653 color: var!(foreground);
1654 font-size: var!(font-base);
1655 margin: format!("{} 0px", var!(gap-element));
1656 }
1657
1658 pub c_inline_input_button_wrap {
1659 flex-shrink: "0";
1660 }
1661
1662 pub c_list_ul {
1663 list-style: "none";
1664 padding: "0px";
1665 margin: "0px";
1666 margin-top: var!(gap-component);
1667 }
1668
1669 pub c_list_item {
1670 display: "flex";
1671 justify-content: "space-between";
1672 align-items: "center";
1673 gap: var!(gap-component);
1674 min-height: var!(min-height-base);
1675 margin: format!("{} 0px", var!(gap-element));
1676 }
1677
1678 pub c_list_item_text {
1679 flex: "1";
1680 overflow: "hidden";
1681 text-overflow: "ellipsis";
1682 white-space: "nowrap";
1683 font-size: var!(font-base);
1684 color: "inherit";
1685 min-width: "0";
1686 }
1687
1688 pub c_list_item_button {
1689 max-width: "120px";
1690 flex-shrink: "0";
1691 }
1692
1693 pub c_log_container {
1698 font-family: "ui-monospace, monospace";
1699 font-size: var!(font-base);
1700 margin-top: "0px";
1701 color: var!(foreground);
1702 }
1703
1704 pub c_log_item {
1705 padding: format!("{} 0px", var!(space-sm));
1706 font-size: var!(font-base);
1707 color: var!(foreground);
1708 }
1709
1710 pub c_render_count_text {
1715 font-size: var!(font-base);
1716 color: "inherit";
1717 margin-bottom: var!(gap-component);
1718 }
1719
1720 pub c_event_result {
1725 font-size: var!(font-base);
1726 color: "inherit";
1727 margin-top: var!(gap-element);
1728 }
1729
1730 pub c_event_highlight {
1731 font-weight: "600";
1732 color: var!(accent);
1733 }
1734
1735 pub c_event_info_grid {
1736 display: "grid";
1737 grid-template-columns: "1fr 1fr";
1738 gap: var!(gap-element);
1739 margin-top: var!(gap-component);
1740 @media ((max-width: 767px)) {
1741 grid-template-columns: "1fr";
1742 gap: var!(gap-element);
1743 }
1744 }
1745
1746 pub c_event_info_row {
1747 display: "flex";
1748 align-items: "center";
1749 gap: var!(space-sm);
1750 overflow: "hidden";
1751 }
1752
1753 pub c_event_info_label {
1754 font-size: var!(font-base);
1755 font-weight: "600";
1756 color: var!(foreground);
1757 flex-shrink: "0";
1758 }
1759
1760 pub c_event_info_value {
1761 c_text_ellipsis();
1762 font-size: var!(font-base);
1763 font-weight: "600";
1764 color: var!(accent);
1765 font-family: "ui-monospace, monospace";
1766 flex: "1";
1767 }
1768
1769 pub c_event_mouse_area {
1770 min-height: "120px";
1771 padding: format!("{} 0px", var!(space-xl));
1772 border: format!("2px dashed {}", var!(border));
1773 cursor: "crosshair";
1774 text-align: "center";
1775 user-select: "none";
1776 color: "inherit";
1777 }
1778
1779 pub c_event_drag_zone {
1780 min-height: "100px";
1781 padding: format!("{} 0px", var!(space-xl));
1782 border: format!("2px dashed {}", var!(border));
1783 text-align: "center";
1784 user-select: "none";
1785 color: var!(foreground);
1786 }
1787
1788 pub c_event_drag_zone_active {
1789 min-height: "100px";
1790 padding: format!("{} 0px", var!(space-xl));
1791 border: format!("2px dashed {}", var!(border));
1792 text-align: "center";
1793 user-select: "none";
1794 color: var!(foreground);
1795 }
1796
1797 pub c_event_drag_item {
1798 display: "inline-block";
1799 padding: format!("{} {}", var!(space-sm), var!(space-xl));
1800 background: var!(accent);
1801 color: var!(text-on-accent);
1802 font-size: var!(font-base);
1803 font-weight: "500";
1804 cursor: "grab";
1805 margin: var!(space-sm);
1806 }
1807
1808 pub c_event_drop_zone {
1809 border: format!("2px dashed {}", var!(border));
1810 padding: format!("{} {}", var!(space-4xl), var!(space-xl));
1811 text-align: "center";
1812 cursor: "pointer";
1813 }
1814
1815 pub c_event_drop_zone_active {
1816 border: format!("2px dashed {}", var!(accent));
1817 padding: format!("{} {}", var!(space-4xl), var!(space-xl));
1818 text-align: "center";
1819 cursor: "pointer";
1820 background: var!(accent-muted);
1821 }
1822
1823 pub c_event_drop_icon {
1824 font-size: var!(font-5xl);
1825 display: "block";
1826 padding-bottom: var!(space-md);
1827 }
1828
1829 pub c_event_drop_text {
1830 font-size: var!(font-lg);
1831 font-weight: "500";
1832 color: "inherit";
1833 padding-bottom: var!(space-md);
1834 }
1835
1836 pub c_event_drop_hint {
1837 font-size: var!(font-base);
1838 color: "inherit";
1839 opacity: "1";
1840 margin: "0px";
1841 }
1842
1843 pub c_event_wheel_zone {
1844 min-height: "120px";
1845 padding: format!("{} 0px", var!(space-xl));
1846 border: format!("2px dashed {}", var!(border));
1847 text-align: "center";
1848 overflow: "auto";
1849 color: var!(foreground);
1850 }
1851
1852 pub c_event_clipboard_area {
1853 color: var!(foreground);
1854 }
1855
1856 pub c_event_touch_zone {
1857 min-height: "120px";
1858 padding: format!("{} 0px", var!(space-xl));
1859 border: format!("2px dashed {}", var!(accent));
1860 text-align: "center";
1861 touch-action: "none";
1862 user-select: "none";
1863 color: var!(accent);
1864 }
1865
1866 pub c_event_form_area {
1867 padding: format!("{} 0px", var!(space-lg));
1868 color: var!(foreground);
1869 }
1870
1871 pub c_event_media_area {
1872 padding: format!("{} 0px", var!(space-lg));
1873 color: var!(foreground);
1874 max-width: "100%";
1875 overflow: "hidden";
1876 }
1877
1878 pub c_event_audio {
1879 width: "100%";
1880 max-width: "100%";
1881 }
1882
1883 pub c_event_video_area {
1884 color: var!(foreground);
1885 width: "100%";
1886 overflow: "hidden";
1887 }
1888
1889 pub c_event_video {
1890 width: "100%";
1891 max-width: "100%";
1892 }
1893
1894 pub c_event_image_area {
1895 padding: format!("{} 0px", var!(space-lg));
1896 color: "inherit";
1897 width: "100%";
1898 overflow: "hidden";
1899 display: "flex";
1900 flex-direction: "column";
1901 align-items: "center";
1902 gap: var!(space-md);
1903 }
1904
1905 pub c_event_image {
1906 width: "200px";
1907 max-width: "100%";
1908 object-fit: "contain";
1909 display: "block";
1910 }
1911
1912 pub c_event_url_text {
1913 text-align: "center";
1914 font-size: var!(font-sm);
1915 color: "inherit";
1916 opacity: "1";
1917 font-family: "ui-monospace, monospace";
1918 word-break: "break-all";
1919 width: "100%";
1920 }
1921
1922 pub c_timer_display {
1927 text-align: "center";
1928 padding: var!(space-xl);
1929 margin: format!("{} 0px", var!(gap-component));
1930 color: "inherit";
1931 }
1932
1933 pub c_timer_value {
1934 font-size: var!(font-base);
1935 font-weight: "700";
1936 color: var!(accent);
1937 letter-spacing: "0.04em";
1938 font-family: "ui-monospace, monospace";
1939 }
1940
1941 pub c_timer_controls {
1942 display: "flex";
1943 flex-wrap: "wrap";
1944 gap: var!(gap-element);
1945 }
1946
1947 pub c_timer_done {
1948 text-align: "center";
1949 margin-top: var!(gap-component);
1950 font-size: var!(font-lg);
1951 font-weight: "600";
1952 color: var!(foreground);
1953 }
1954
1955 pub c_modal_overlay {
1960 position: "fixed";
1961 top: "0px";
1962 left: "0px";
1963 width: "100%";
1964 height: "100%";
1965 background: var!(bg-overlay);
1966 contain: "layout style paint";
1967 display: "flex";
1968 align-items: "center";
1969 justify-content: "center";
1970 z-index: "1000";
1971 animation: format!("euv-fade-in {} {}", var!(duration-modal-overlay), var!(ease-out));
1972 @media ((max-width: 767px)) {
1973 align-items: "center";
1974 justify-content: "center";
1975 }
1976 }
1977
1978 pub c_modal_content {
1979 background: var!(background);
1980 padding: "0px";
1981 max-width: "480px";
1982 width: "90%";
1983 animation: format!("euv-scale-in-modal {} {}", var!(duration-modal-content), var!(ease-bounce));
1984 overflow: "hidden";
1985 color: var!(foreground);
1986 box-sizing: "border-box";
1987 @media ((max-width: 767px)) {
1988 max-width: "100%";
1989 width: "calc(100% - 32px)";
1990 max-height: "85vh";
1991 overflow-y: "auto";
1992 }
1993 }
1994
1995 pub c_modal_header {
1996 display: "flex";
1997 justify-content: "space-between";
1998 align-items: "center";
1999 padding: format!("{} {} 0px {}", var!(space-md), var!(space-xl), var!(space-xl));
2000 }
2001
2002 pub c_modal_title {
2003 margin: "0px";
2004 font-size: var!(font-xl);
2005 font-weight: "600";
2006 color: "inherit";
2007 }
2008
2009 pub c_modal_body {
2010 padding: format!("0px {} {} {}", var!(space-xl), var!(space-md), var!(space-xl));
2011 color: "inherit";
2012 }
2013
2014 pub c_modal_actions {
2015 display: "flex";
2016 flex-wrap: "wrap";
2017 gap: var!(space-md);
2018 margin: format!("{} 0px", var!(space-md));
2019 }
2020
2021 pub c_anim_fade_in {
2026 margin-top: var!(gap-component);
2027 animation: format!("euv-fade-in 0.5s {}", var!(ease-out));
2028 font-size: var!(font-base);
2029 color: "inherit";
2030 }
2031
2032 pub c_anim_spin_container {
2033 display: "flex";
2034 justify-content: "center";
2035 align-items: "center";
2036 margin: format!("{} 0px", var!(space-lg));
2037 min-height: "80px";
2038 }
2039
2040 pub c_anim_spin {
2041 font-size: var!(font-5xl);
2042 animation: "euv-spin 1.5s linear infinite";
2043 display: "inline-block";
2044 @media ((max-width: 767px)) {
2045 font-size: var!(font-4xl);
2046 }
2047 }
2048
2049 pub c_anim_spin_stopped {
2050 font-size: var!(font-5xl);
2051 display: "inline-block";
2052 opacity: "1";
2053 @media ((max-width: 767px)) {
2054 font-size: var!(font-4xl);
2055 }
2056 }
2057
2058 pub c_anim_pulse_container {
2059 display: "flex";
2060 justify-content: "center";
2061 align-items: "center";
2062 margin: format!("{} 0px", var!(space-lg));
2063 min-height: "80px";
2064 }
2065
2066 pub c_anim_pulse {
2067 font-size: var!(font-5xl);
2068 animation: "euv-pulse 1.5s ease-in-out infinite";
2069 display: "inline-block";
2070 color: var!(foreground);
2071 @media ((max-width: 767px)) {
2072 font-size: var!(font-4xl);
2073 }
2074 }
2075
2076 pub c_anim_pulse_stopped {
2077 font-size: var!(font-5xl);
2078 display: "inline-block";
2079 opacity: "1";
2080 color: var!(foreground);
2081 @media ((max-width: 767px)) {
2082 font-size: var!(font-4xl);
2083 }
2084 }
2085
2086 pub c_progress_container {
2087 width: "100%";
2088 height: "12px";
2089 margin: format!("{} 0px", var!(space-lg));
2090 overflow: "hidden";
2091 }
2092
2093 pub c_progress_bar_running {
2094 height: "100%";
2095 background: var!(accent);
2096 animation: format!("euv-progress 1.6s {} forwards", var!(ease-in-out));
2097 }
2098
2099 pub c_progress_bar_stopped {
2100 height: "100%";
2101 background: var!(accent);
2102 width: "0%";
2103 }
2104
2105 pub c_anim_scale_box {
2106 margin: format!("{} 0px", var!(gap-component));
2107 padding: var!(space-xl);
2108 background: var!(accent);
2109 cursor: "pointer";
2110 transition: format!("transform {} {}", var!(duration-normal), var!(ease-out));
2111 }
2112
2113 pub c_browser_api_row {
2118 display: "grid";
2119 grid-template-columns: "1fr 1fr";
2120 gap: var!(gap-component);
2121 margin-bottom: var!(gap-component);
2122 @media ((max-width: 767px)) {
2123 grid-template-columns: "1fr";
2124 }
2125 }
2126
2127 pub c_browser_api_actions {
2128 display: "flex";
2129 flex-wrap: "wrap";
2130 gap: var!(gap-element);
2131 margin: format!("{} 0px", var!(gap-component));
2132 }
2133
2134 pub c_browser_result_box {
2135 margin-top: var!(gap-component);
2136 font-size: var!(font-base);
2137 word-break: "break-all";
2138 color: "inherit";
2139 }
2140
2141 pub c_browser_result_label {
2142 font-weight: "600";
2143 color: var!(accent);
2144 }
2145
2146 pub c_browser_result_value {
2147 color: "inherit";
2148 }
2149
2150 pub c_browser_info_grid {
2151 display: "grid";
2152 gap: var!(gap-component);
2153 margin-top: var!(gap-component);
2154 @media ((max-width: 767px)) {
2155 grid-template-columns: "1fr";
2156 }
2157 }
2158
2159 pub c_browser_info_item {
2160 display: "flex";
2161 flex-direction: "column";
2162 gap: var!(space-xs);
2163 color: "inherit";
2164 }
2165
2166 pub c_browser_info_label {
2167 font-size: var!(font-sm);
2168 font-weight: "600";
2169 color: "inherit";
2170 opacity: "1";
2171 text-transform: "uppercase";
2172 letter-spacing: "0.05em";
2173 }
2174
2175 pub c_browser_info_value {
2176 font-size: var!(font-base);
2177 color: "inherit";
2178 word-break: "break-all";
2179 font-family: "ui-monospace, monospace";
2180 }
2181
2182 pub c_vconsole_badge {
2187 position: "absolute";
2188 top: "-6px";
2189 right: "-8px";
2190 min-width: "18px";
2191 height: "18px";
2192 background: var!(background);
2193 color: var!(foreground);
2194 font-size: "10px";
2195 font-weight: "600";
2196 display: "flex";
2197 align-items: "center";
2198 justify-content: "center";
2199 padding: format!("0px {}", var!(space-xs));
2200 border: format!("1px solid {}", var!(accent));
2201 pointer-events: "none";
2202 transition: format!("transform {} {}, opacity {} {}", var!(duration-normal), var!(ease-out), var!(duration-normal), var!(ease-out));
2203 }
2204
2205 pub c_vconsole_overlay {
2206 position: "fixed";
2207 top: "0px";
2208 left: "0px";
2209 right: "0px";
2210 bottom: "0px";
2211 z-index: "10000";
2212 background: var!(bg-overlay);
2213 contain: "layout style paint";
2214 transition: format!("opacity {} {}", var!(duration-overlay), var!(ease-out));
2215 }
2216
2217 pub c_vconsole_overlay_hidden {
2218 opacity: "0";
2219 pointer-events: "none";
2220 }
2221
2222 pub c_vconsole_panel {
2223 position: "fixed";
2224 bottom: "0px";
2225 left: "0px";
2226 right: "0px";
2227 height: format!("calc(76vh - {})", var!(safe-area-inset-bottom));
2228 background: var!(background);
2229 z-index: "10001";
2230 display: "flex";
2231 flex-direction: "column";
2232 contain: "layout style paint";
2233 will-change: "transform";
2234 transition: format!("transform {} {}", var!(duration-overlay), var!(ease-out));
2235 overflow: "hidden";
2236 padding: format!("{} {}", var!(padding-main-top), var!(padding-main-horizontal));
2237 @media ((max-width: 767px)) {
2238 padding: format!("{} {}", var!(space-md), var!(padding-main-horizontal-mobile));
2239 }
2240 }
2241
2242 pub c_vconsole_panel_closed {
2243 transform: "translateY(100%)";
2244 will-change: "auto";
2245 }
2246
2247 pub c_vconsole_fab {
2248 position: "fixed";
2249 bottom: format!("calc(20px + {})", var!(safe-area-inset-bottom));
2250 right: var!(padding-main-horizontal);
2251 z-index: "9999";
2252 @media ((max-width: 767px)) {
2253 bottom: format!("calc(16px + {})", var!(safe-area-inset-bottom));
2254 right: var!(padding-main-horizontal-mobile);
2255 }
2256 }
2257
2258 pub c_vconsole_header {
2259 display: "flex";
2260 justify-content: "space-between";
2261 align-items: "center";
2262 flex-shrink: "0";
2263 }
2264
2265 pub c_vconsole_title {
2266 color: var!(foreground);
2267 font-size: var!(font-md);
2268 font-weight: "600";
2269 margin: "0px";
2270 letter-spacing: "0.03em";
2271 display: "flex";
2272 align-items: "center";
2273 gap: var!(space-sm);
2274 }
2275
2276 pub c_vconsole_title_dot {
2277 width: "8px";
2278 height: "8px";
2279 background: var!(accent);
2280 display: "inline-block";
2281 animation: "euv-pulse 2s ease-in-out infinite";
2282 }
2283
2284 pub c_vconsole_header_actions {
2285 display: "flex";
2286 gap: var!(space-sm);
2287 align-items: "center";
2288 }
2289
2290 pub c_vconsole_clear_button {
2291 display: "inline-flex";
2292 justify-content: "center";
2293 align-items: "center";
2294 color: var!(foreground);
2295 padding: format!("{} {}", var!(space-2xs), var!(space-sm));
2296 font-size: var!(font-xs);
2297 font-weight: "600";
2298 cursor: "pointer";
2299 text-align: "center";
2300 border: format!("1.5px solid {}", var!(border));
2301 margin-left: "auto";
2302 :focus-visible {
2303 outline: "none";
2304 }
2305 }
2306
2307 pub c_vconsole_close_button {
2308 display: "inline-flex";
2309 justify-content: "center";
2310 align-items: "center";
2311 color: var!(foreground);
2312 padding: format!("{} {}", var!(space-xs), var!(space-md));
2313 cursor: "pointer";
2314 font-size: var!(font-sm);
2315 font-weight: "400";
2316 text-align: "center";
2317 white-space: "nowrap";
2318 user-select: "none";
2319 -webkit-user-select: "none";
2320 vertical-align: "middle";
2321 outline: "none";
2322 transition: format!("all {} {}", var!(duration-fast), var!(ease-out));
2323 :hover {
2324 border-color: var!(foreground);
2325 color: var!(foreground);
2326 background: var!(background);
2327 }
2328 :focus-visible {
2329 outline: "none";
2330 }
2331 :active {
2332 background: "transparent";
2333 color: var!(foreground);
2334 border-color: var!(border);
2335 }
2336 }
2337
2338 pub c_vconsole_body {
2339 flex: "1";
2340 overflow-y: "auto";
2341 contain: "content";
2342 padding-bottom: var!(space-md);
2343 font-family: "ui-monospace, monospace";
2344 font-size: var!(font-xs);
2345 }
2346
2347 pub c_vconsole_log_item {
2348 display: "flex";
2349 align-items: "center";
2350 padding: format!("{} 0px", var!(space-sm));
2351 border-bottom: format!("1px dashed {}", var!(border));
2352 color: var!(foreground);
2353 font-size: var!(font-xs);
2354 word-break: "break-all";
2355 }
2356
2357 pub c_vconsole_empty {
2358 color: var!(muted-foreground);
2359 font-size: var!(font-xs);
2360 text-align: "center";
2361 padding: format!("{} 0px", var!(space-4xl));
2362 overflow: "hidden";
2363 }
2364
2365 pub c_vconsole_empty_hidden {
2366 height: "0";
2367 overflow: "hidden";
2368 padding: "0";
2369 }
2370
2371 pub c_vconsole_log_list {
2372 overflow: "hidden";
2373 }
2374
2375 pub c_vconsole_log_list_hidden {
2376 height: "0";
2377 overflow: "hidden";
2378 }
2379
2380 pub c_vconsole_count {
2381 color: var!(muted-foreground);
2382 font-size: var!(font-sm);
2383 font-weight: "400";
2384 }
2385
2386 pub c_vconsole_filter_bar {
2387 display: "flex";
2388 gap: var!(space-sm);
2389 padding: format!("{} 0px", var!(space-sm));
2390 border-bottom: format!("1px dashed {}", var!(border));
2391 flex-shrink: "0";
2392 align-items: "center";
2393 }
2394
2395 pub c_vconsole_filter_badge {
2396 display: "inline-flex";
2397 justify-content: "center";
2398 align-items: "center";
2399 color: var!(text-on-accent);
2400 padding: format!("{} {}", var!(space-2xs), var!(space-sm));
2401 border: format!("1px solid {}", var!(accent));
2402 font-size: var!(font-xs);
2403 font-weight: "600";
2404 cursor: "pointer";
2405 text-align: "center";
2406 background: var!(accent);
2407 :focus-visible {
2408 outline: "none";
2409 }
2410 }
2411
2412 pub c_vconsole_filter_badge_outline {
2413 display: "inline-flex";
2414 justify-content: "center";
2415 align-items: "center";
2416 color: var!(foreground);
2417 padding: format!("{} {}", var!(space-2xs), var!(space-sm));
2418 font-size: var!(font-xs);
2419 font-weight: "600";
2420 cursor: "pointer";
2421 text-align: "center";
2422 border: format!("1.5px solid {}", var!(border));
2423 }
2424
2425 pub c_vconsole_level_badge {
2426 padding: format!("{} {}", var!(space-2xs), var!(space-sm));
2427 font-size: var!(font-xs);
2428 margin-right: var!(space-sm);
2429 letter-spacing: "0.05em";
2430 color: var!(foreground);
2431 border: "1px solid currentColor";
2432 wrap: "nowrap";
2433 flex-shrink: "0";
2434 }
2435
2436 pub c_mobile_header {
2441 display: "flex";
2442 align-items: "center";
2443 justify-content: "space-between";
2444 padding: format!("var(--euv-mobile-safe-top, 0px) 0px 0px {}", var!(space-lg));
2445 height: format!("calc({} + var(--euv-mobile-safe-top, 0px))", var!(mobile-header-height));
2446 flex-shrink: "0";
2447 position: "sticky";
2448 top: "0px";
2449 z-index: "100";
2450 contain: "content";
2451 background: var!(background);
2452 border-bottom: format!("1px solid {}", var!(border));
2453 }
2454
2455 pub c_mobile_header_left {
2456 display: "flex";
2457 align-items: "center";
2458 gap: format!("{}", var!(space-md));
2459 }
2460
2461 pub c_mobile_header_logo {
2462 display: "flex";
2463 align-items: "center";
2464 gap: format!("{}", var!(space-sm));
2465 text-decoration: "none";
2466 color: var!(foreground);
2467 }
2468
2469 pub c_mobile_menu_button {
2470 width: "40px";
2471 height: "40px";
2472 border: "none";
2473 cursor: "pointer";
2474 font-size: "22px";
2475 font-weight: "700";
2476 display: "flex";
2477 align-items: "center";
2478 justify-content: "center";
2479 color: var!(foreground);
2480 padding: "0px";
2481 :active {
2482 background: "transparent";
2483 color: var!(foreground);
2484 }
2485 }
2486
2487 pub c_mobile_theme_button {
2488 width: "40px";
2489 height: "40px";
2490 border: "none";
2491 cursor: "pointer";
2492 display: "flex";
2493 align-items: "center";
2494 justify-content: "center";
2495 padding: "0px";
2496 :active {
2497 background: "transparent";
2498 }
2499 }
2500
2501 pub c_mobile_menu_button_active {
2502 width: "40px";
2503 height: "40px";
2504 border: "none";
2505 cursor: "pointer";
2506 font-size: "22px";
2507 font-weight: "700";
2508 display: "flex";
2509 align-items: "center";
2510 justify-content: "center";
2511 color: var!(accent);
2512 padding: "0px";
2513 :active {
2514 background: var!(background);
2515 color: var!(accent);
2516 }
2517 }
2518
2519 pub c_mobile_drawer_close_button {
2520 width: "32px";
2521 height: "32px";
2522 border: "none";
2523 cursor: "pointer";
2524 font-size: "18px";
2525 font-weight: "500";
2526 display: "flex";
2527 align-items: "center";
2528 justify-content: "center";
2529 color: var!(muted-foreground);
2530 padding: "0px";
2531 transition: format!("color {} {}", var!(duration-fast), var!(ease-out));
2532 :hover {
2533 color: var!(foreground);
2534 }
2535 :active {
2536 color: var!(muted-foreground);
2537 }
2538 }
2539
2540 pub c_mobile_overlay {
2541 position: "fixed";
2542 top: "0px";
2543 left: "0px";
2544 width: "100%";
2545 height: "100%";
2546 background: var!(bg-overlay);
2547 z-index: "200";
2548 contain: "layout style paint";
2549 transition: format!("opacity {} {}", var!(duration-overlay), var!(ease-out));
2550 }
2551
2552 pub c_mobile_overlay_hidden {
2553 opacity: "0";
2554 pointer-events: "none";
2555 }
2556
2557 pub c_mobile_nav_drawer {
2558 position: "fixed";
2559 top: "0px";
2560 left: "0px";
2561 width: "240px";
2562 max-width: "100%";
2563 height: "100%";
2564 background: var!(background);
2565 z-index: "201";
2566 display: "flex";
2567 flex-direction: "column";
2568 padding-top: "var(--euv-mobile-safe-top, 0px)";
2569 padding-bottom: var!(padding-shell-bottom);
2570 contain: "layout style paint";
2571 will-change: "transform";
2572 transition: format!("transform {} {}", var!(duration-overlay), var!(ease-out));
2573 overflow: "hidden";
2574 }
2575
2576 pub c_mobile_nav_drawer_closed {
2577 transform: "translateX(-100%)";
2578 }
2579
2580 pub c_mobile_nav_drawer_header {
2581 display: "flex";
2582 align-items: "center";
2583 justify-content: "space-between";
2584 padding: format!("0px {}", var!(space-lg));
2585 height: var!(mobile-header-height);
2586 flex-shrink: "0";
2587 position: "relative";
2588 ::after {
2589 content: "''";
2590 position: "absolute";
2591 bottom: "0px";
2592 left: var!(space-lg);
2593 right: var!(space-lg);
2594 height: "1px";
2595 background: format!("linear-gradient(90deg, transparent, {}, transparent)", var!(border));
2596 }
2597 }
2598
2599 pub c_mobile_main {
2600 c_app_main();
2601 ::-webkit-scrollbar {
2602 width: "0px";
2603 }
2604 }
2605
2606 pub c_keep_alive_tab_bar {
2611 display: "flex";
2612 border-bottom: format!("1px dashed {}", var!(border));
2613 margin-bottom: var!(gap-component);
2614 gap: var!(gap-element);
2615 }
2616
2617 pub c_keep_alive_tab_panel {
2618 padding: format!("{} 0px", var!(gap-element));
2619 }
2620
2621 pub c_keep_alive_panel_title {
2622 margin-top: "0px";
2623 color: var!(accent);
2624 font-size: var!(font-md);
2625 margin-bottom: var!(gap-element);
2626 }
2627
2628 pub c_keep_alive_demo_text {
2629 color: "inherit";
2630 font-size: var!(font-base);
2631 margin-bottom: var!(gap-component);
2632 }
2633
2634 pub c_keep_alive_counter_display {
2635 display: "flex";
2636 justify-content: "center";
2637 align-items: "center";
2638 margin: format!("{} 0px", var!(space-xl));
2639 }
2640
2641 pub c_keep_alive_counter_value {
2642 font-size: var!(font-base);
2643 font-weight: "700";
2644 font-variant-numeric: "tabular-nums";
2645 color: var!(accent);
2646 text-align: "center";
2647 }
2648
2649 pub c_keep_alive_counter_controls {
2650 display: "flex";
2651 flex-wrap: "wrap";
2652 gap: format!("{}", var!(space-md));
2653 }
2654
2655 pub c_keep_alive_form_group {
2656 margin-bottom: var!(gap-component);
2657 }
2658
2659 pub c_keep_alive_form_preview {
2660 margin-top: var!(gap-component);
2661 background: var!(accent-muted);
2662 }
2663
2664 pub c_keep_alive_preview_label {
2665 font-size: var!(font-base);
2666 font-weight: "600";
2667 color: var!(accent);
2668 margin: format!("0px 0px {} 0px", var!(space-xs));
2669 }
2670
2671 pub c_file_upload_input_hidden {
2676 position: "absolute";
2677 width: "1px";
2678 height: "1px";
2679 padding: "0px";
2680 margin: "-1px";
2681 overflow: "hidden";
2682 clip: "rect(0, 0, 0, 0)";
2683 white-space: "nowrap";
2684 border: "0px";
2685 }
2686
2687 pub c_file_upload_options {
2688 margin: format!("{} 0px", var!(gap-component));
2689 }
2690
2691 pub c_file_upload_item {
2692 display: "flex";
2693 align-items: "center";
2694 gap: format!("{}", var!(space-md));
2695 margin: format!("{} 0px", var!(space-sm));
2696 font-size: var!(font-base);
2697 color: "inherit";
2698 }
2699
2700 pub c_file_upload_item_index {
2701 font-size: var!(font-sm);
2702 font-weight: "600";
2703 color: var!(accent);
2704 min-width: "24px";
2705 }
2706
2707 pub c_file_upload_item_name {
2708 color: "inherit";
2709 word-break: "break-all";
2710 }
2711
2712 pub c_binding_child_box {
2717 display: "flex";
2718 flex-direction: "column";
2719 gap: var!(gap-component);
2720 margin-top: var!(gap-component);
2721 }
2722
2723 pub c_binding_child_label {
2724 font-size: var!(font-base);
2725 font-weight: "600";
2726 color: var!(accent);
2727 text-transform: "uppercase";
2728 letter-spacing: "0.05em";
2729 }
2730
2731 pub c_binding_parent_box {
2732 display: "flex";
2733 flex-direction: "column";
2734 gap: var!(gap-component);
2735 margin-top: var!(gap-component);
2736 }
2737
2738 pub c_binding_section_title {
2739 margin-top: var!(gap-component);
2740 margin-bottom: var!(gap-element);
2741 color: var!(accent);
2742 font-size: var!(font-md);
2743 font-weight: "600";
2744 }
2745
2746 pub c_binding_temp_converter {
2747 display: "flex";
2748 align-items: "flex-end";
2749 gap: var!(gap-component);
2750 flex-wrap: "wrap";
2751 margin-top: var!(gap-component);
2752 }
2753
2754 pub c_binding_temp_field {
2755 flex: "1";
2756 min-width: "120px";
2757 }
2758
2759 pub c_binding_temp_arrow {
2760 font-size: "20px";
2761 font-weight: "700";
2762 color: var!(accent);
2763 padding-bottom: "10px";
2764 }
2765
2766 pub c_binding_color_mixer {
2767 margin-top: var!(gap-component);
2768 }
2769
2770 pub c_binding_color_preview {
2771 width: "100%";
2772 height: "80px";
2773 display: "flex";
2774 align-items: "center";
2775 justify-content: "center";
2776 margin-bottom: var!(gap-component);
2777 }
2778
2779 pub c_binding_color_hex {
2780 font-family: "ui-monospace, monospace";
2781 font-size: var!(font-xl);
2782 font-weight: "700";
2783 color: var!(text-on-accent);
2784 letter-spacing: "0.02em";
2785 }
2786
2787 pub c_binding_slider_row {
2788 display: "flex";
2789 align-items: "center";
2790 gap: format!("{}", var!(space-md));
2791 margin-bottom: var!(space-sm);
2792 }
2793
2794 pub c_binding_slider_label {
2795 font-size: var!(font-base);
2796 font-weight: "700";
2797 min-width: var!(font-sm);
2798 }
2799
2800 pub c_binding_slider {
2801 flex: "1";
2802 height: "24px";
2803 padding: "0px";
2804 cursor: "pointer";
2805 -webkit-appearance: "none";
2806 appearance: "none";
2807 border: "none";
2808 outline: "none";
2809 ::-webkit-slider-runnable-track {
2810 height: "6px";
2811 background: format!("linear-gradient(to right, {} 0%, {} var(--value,50%), {} var(--value,50%), {} 100%)", var!(foreground), var!(foreground), var!(border), var!(border));
2812 border-radius: "3px";
2813 border: "none";
2814 }
2815 ::-webkit-slider-thumb {
2816 width: "20px";
2817 height: "20px";
2818 background: var!(background);
2819 border: format!("2px solid {}", var!(accent));
2820 border-radius: "50%";
2821 cursor: "pointer";
2822 -webkit-appearance: "none";
2823 margin-top: "-7px";
2824 }
2825 : active::-webkit-slider-thumb {
2826 transform: "scale(0.92)";
2827 }
2828 ::-moz-range-track {
2829 height: "6px";
2830 background: format!("linear-gradient(to right, {} 0%, {} var(--value,50%), {} var(--value,50%), {} 100%)", var!(foreground), var!(foreground), var!(border), var!(border));
2831 border-radius: "3px";
2832 border: "none";
2833 }
2834 ::-moz-range-thumb {
2835 width: "20px";
2836 height: "20px";
2837 background: var!(background);
2838 border: format!("2px solid {}", var!(accent));
2839 border-radius: "50%";
2840 cursor: "pointer";
2841 }
2842 : active::-moz-range-thumb {
2843 transform: "scale(0.92)";
2844 }
2845 }
2846
2847 pub c_binding_slider_value {
2848 font-size: var!(font-base);
2849 font-weight: "500";
2850 color: "inherit";
2851 min-width: "32px";
2852 text-align: "right";
2853 font-family: "ui-monospace, monospace";
2854 }
2855
2856 pub c_binding_typed_prop_value {
2857 font-family: "ui-monospace, monospace";
2858 font-size: var!(font-base);
2859 font-weight: "600";
2860 color: var!(accent);
2861 padding: format!("1px {}", var!(space-sm));
2862 }
2863
2864 pub c_binding_typed_prop_group {
2865 display: "flex";
2866 align-items: "center";
2867 gap: var!(space-sm);
2868 }
2869
2870 pub c_binding_typed_warning {
2871 font-size: var!(font-base);
2872 font-weight: "500";
2873 color: var!(foreground);
2874 margin-bottom: "0px";
2875 }
2876
2877 pub c_binding_form_label {
2878 display: "block";
2879 color: "inherit";
2880 font-weight: "500";
2881 font-size: var!(font-base);
2882 }
2883
2884 pub c_binding_demo_text {
2885 color: "inherit";
2886 margin: "0px"
2887 }
2888
2889 pub c_binding_compact_button {
2890 display: "inline-flex";
2891 justify-content: "center";
2892 align-items: "center";
2893 height: "42px";
2894 padding: format!("0px {}", var!(space-md));
2895 background: var!(accent);
2896 color: var!(text-on-accent);
2897 border: format!("1px solid {}", var!(accent));
2898 cursor: "pointer";
2899 font-size: var!(font-sm);
2900 font-weight: "600";
2901 outline: "none";
2902 white-space: "nowrap";
2903 user-select: "none";
2904 -webkit-user-select: "none";
2905 box-sizing: "border-box";
2906 :hover {
2907 background: var!(accent);
2908 }
2909 :focus-visible {
2910 outline: "none";
2911 }
2912 :active {
2913 background: var!(accent);
2914 color: var!(text-on-accent);
2915 border-color: var!(accent);
2916 }
2917 }
2918
2919 pub c_attrs_dynamic_demo(prop_key: &str, prop_value: &str) {
2924 {
2925 prop_key
2926 }
2927 : prop_value;
2928 }
2935
2936 pub c_dynamic_component_tab_bar {
2941 display: "flex";
2942 flex-wrap: "wrap";
2943 gap: var!(gap-element);
2944 margin-bottom: var!(gap-component);
2945 }
2946
2947 pub c_dynamic_component_panel {
2948 display: "block";
2949 min-height: var!(min-height-sm);
2950 margin-top: var!(gap-component);
2951 }
2952
2953 pub c_virtual_list_status {
2958 display: "flex";
2959 gap: var!(gap-component);
2960 padding: format!("{} 0px", var!(gap-component));
2961 flex-wrap: "nowrap";
2962 overflow: "hidden";
2963 text-overflow: "ellipsis";
2964 white-space: "nowrap";
2965 @media ((max-width: 767px)) {
2966 gap: var!(gap-component-mobile);
2967 }
2968 }
2969
2970 pub c_virtual_list_status_item {
2971 font-size: var!(font-base);
2972 color: "inherit";
2973 overflow: "hidden";
2974 text-overflow: "ellipsis";
2975 white-space: "nowrap";
2976 }
2977
2978 pub c_virtual_list_status_value {
2979 font-weight: "700";
2980 color: var!(accent);
2981 font-family: "ui-monospace, monospace";
2982 }
2983
2984 pub c_virtual_list_container {
2985 flex: "1";
2986 height: "666px";
2987 max-height: "666px";
2988 overflow-y: "auto";
2989 }
2990
2991 pub c_virtual_list_card {
2992 flex: "1";
2993 padding: var!(space-xl);
2994 color: var!(foreground);
2995 display: "flex";
2996 flex-direction: "column";
2997 @media ((max-width: 767px)) {
2998 padding: var!(space-lg);
2999 }
3000 }
3001
3002 pub c_virtual_list_row {
3003 display: "flex";
3004 align-items: "center";
3005 gap: var!(space-lg);
3006 height: "100%";
3007 box-sizing: "border-box";
3008 }
3009
3010 pub c_virtual_list_row_index {
3011 min-width: "36px";
3012 font-size: var!(font-sm);
3013 font-weight: "600";
3014 color: var!(accent);
3015 font-family: "ui-monospace, monospace";
3016 flex-shrink: "0";
3017 display: "flex";
3018 align-items: "center";
3019 }
3020
3021 pub c_virtual_list_row_label {
3022 font-size: var!(font-base);
3023 font-weight: "500";
3024 color: "inherit";
3025 min-width: "120px";
3026 flex-shrink: "0";
3027 overflow: "hidden";
3028 text-overflow: "ellipsis";
3029 white-space: "nowrap";
3030 display: "flex";
3031 align-items: "center";
3032 }
3033
3034 pub c_virtual_list_row_description {
3035 font-size: var!(font-base);
3036 color: "inherit";
3037 opacity: "1";
3038 overflow: "hidden";
3039 text-overflow: "ellipsis";
3040 white-space: "nowrap";
3041 flex: "1";
3042 display: "flex";
3043 align-items: "center";
3044 }
3045
3046 pub c_element_stack {
3051 display: "flex";
3052 flex-direction: "column";
3053 gap: var!(gap-element);
3054 }
3055
3056 pub c_switcher {
3057 display: "flex";
3058 gap: var!(gap-component);
3059 flex-wrap: "wrap";
3060 @media ((max-width: 767px)) {
3061 flex-direction: "column";
3062 gap: var!(gap-component-mobile);
3063 }
3064 }
3065
3066 pub c_switcher_col {
3067 flex: "1";
3068 min-width: "200px";
3069 @media ((max-width: 767px)) {
3070 min-width: "100%";
3071 }
3072 }
3073
3074 pub c_hint {
3079 color: "inherit";
3080 opacity: "1";
3081 font-size: var!(font-base);
3082 margin-bottom: var!(gap-component);
3083 }
3084
3085 pub c_net_messages_empty {
3090 color: "inherit";
3091 opacity: "1";
3092 padding: var!(space-xl);
3093 text-align: "center";
3094 font-size: var!(font-base);
3095 }
3096
3097 pub c_net_messages_list {
3098 display: "flex";
3099 flex-direction: "column";
3100 gap: var!(space-xs);
3101 }
3102
3103 pub c_net_message_item {
3104 display: "flex";
3105 align-items: "baseline";
3106 gap: var!(gap-element);
3107 justify-content: "space-between";
3108 }
3109
3110 pub c_net_message_index {
3111 color: var!(accent);
3112 font-size: var!(font-sm);
3113 font-weight: "600";
3114 white-space: "nowrap";
3115 flex-shrink: "0";
3116 }
3117
3118 pub c_net_message_data {
3119 color: "inherit";
3120 font-size: var!(font-base);
3121 word-break: "break-all";
3122 overflow-wrap: "break-word";
3123 flex: "1";
3124 min-width: "0";
3125 }
3126
3127 pub c_ws_message_input {
3132 width: "100%";
3133 flex: "1";
3134 height: "42px";
3135 padding: format!("0px {}", var!(space-lg));
3136 color: var!(foreground);
3137 border: format!("1px solid {}", var!(border));
3138 font-size: var!(font-base);
3139 line-height: "normal";
3140 box-sizing: "border-box";
3141 outline: "none";
3142 appearance: "none";
3143 -webkit-appearance: "none";
3144 -moz-appearance: "none";
3145 vertical-align: "middle";
3146 :hover {
3147 border-color: var!(accent);
3148 background: var!(accent-muted);
3149 }
3150 :focus {
3151 outline: "none";
3152 border-color: var!(accent);
3153 background: var!(accent-muted);
3154 }
3155 }
3156
3157 pub c_ws_message_time {
3158 color: var!(foreground);
3159 font-size: var!(font-sm);
3160 white-space: "nowrap";
3161 flex-shrink: "0";
3162 margin-left: "auto";
3163 }
3164
3165 pub c_home {
3174 position: "relative";
3175 text-align: "center";
3176 margin-bottom: var!(space-xl);
3177 flex: "1";
3178 display: "flex";
3179 flex-direction: "column";
3180 justify-content: "center";
3181 @media ((max-width: 767px)) {
3182 margin-bottom: var!(space-lg);
3183 flex: "0 0 auto";
3184 justify-content: "flex-start";
3185 }
3186 }
3187
3188 pub c_home_content {
3189 position: "relative";
3190 z-index: "1";
3191 }
3192
3193 pub c_home_badge_row {
3194 display: "inline-flex";
3195 align-items: "center";
3196 gap: var!(space-sm);
3197 margin-bottom: var!(space-md);
3198 }
3199
3200 pub c_home_badge {
3201 display: "inline-flex";
3202 justify-content: "center";
3203 align-items: "center";
3204 padding: format!("{} {}", var!(space-xs), var!(space-sm));
3205 color: var!(accent);
3206 font-size: var!(font-xs);
3207 font-weight: "600";
3208 letter-spacing: "0.05em";
3209 border: format!("1px solid {}", var!(accent));
3210 }
3211
3212 pub c_home_title {
3213 font-size: var!(font-5xl);
3214 font-weight: "800";
3215 letter-spacing: "-0.03em";
3216 margin: "0px";
3217 color: var!(foreground);
3218 margin-bottom: var!(space-xs);
3219 @media ((max-width: 767px)) {
3220 font-size: var!(font-4xl);
3221 }
3222 }
3223
3224 pub c_home_subtitle {
3225 font-size: var!(font-lg);
3226 color: var!(foreground);
3227 margin: "0px auto";
3228 max-width: "520px";
3229 margin-bottom: var!(space-lg);
3230 @media ((max-width: 767px)) {
3231 font-size: var!(font-base);
3232 }
3233 }
3234
3235 pub c_home_actions {
3236 display: "flex";
3237 gap: var!(space-md);
3238 justify-content: "center";
3239 flex-wrap: "wrap";
3240 }
3241
3242 pub c_home_btn_primary {
3243 display: "inline-flex";
3244 justify-content: "center";
3245 align-items: "center";
3246 gap: var!(space-sm);
3247 padding: format!("{} {}", var!(space-sm), var!(space-2xl));
3248 background: var!(accent);
3249 color: var!(text-on-accent);
3250 font-size: var!(font-base);
3251 font-weight: "600";
3252 text-decoration: "none";
3253 border: "1.5px solid transparent";
3254 cursor: "pointer";
3255 letter-spacing: "0.01em";
3256 vertical-align: "middle";
3257 min-height: var!(min-height-sm);
3258 :focus-visible {
3259 outline: "none";
3260 }
3261 :active {
3262 background: var!(accent);
3263 color: var!(text-on-accent);
3264 border-color: "1.5px solid transparent";
3265 }
3266 }
3267
3268 pub c_home_btn_secondary {
3269 display: "inline-flex";
3270 justify-content: "center";
3271 align-items: "center";
3272 gap: var!(space-sm);
3273 padding: format!("{} {}", var!(space-sm), var!(space-2xl));
3274 color: var!(accent);
3275 font-size: var!(font-base);
3276 font-weight: "600";
3277 text-decoration: "none";
3278 border: format!("1.5px solid {}", var!(accent));
3279 cursor: "pointer";
3280 letter-spacing: "0.01em";
3281 vertical-align: "middle";
3282 min-height: var!(min-height-sm);
3283 :focus-visible {
3284 outline: "none";
3285 }
3286 :active {
3287 background: "transparent";
3288 color: var!(accent);
3289 border-color: var!(accent);
3290 }
3291 }
3292
3293 pub c_home_stats {
3298 display: "grid";
3299 grid-template-columns: "repeat(4, 1fr)";
3300 gap: var!(space-md);
3301 margin-bottom: var!(space-xl);
3302 @media ((max-width: 767px)) {
3303 grid-template-columns: "repeat(2, 1fr)";
3304 gap: var!(space-sm);
3305 }
3306 }
3307
3308 pub c_home_stat_card {
3309 display: "flex";
3310 flex-direction: "column";
3311 align-items: "center";
3312 justify-content: "center";
3313 gap: var!(space-xs);
3314 }
3315
3316 pub c_home_stat_icon {
3317 font-size: var!(font-2xl);
3318 }
3319
3320 pub c_home_stat_value {
3321 font-size: var!(font-xl);
3322 font-weight: "800";
3323 color: var!(foreground);
3324 letter-spacing: "-0.01em";
3325 }
3326
3327 pub c_home_stat_label {
3328 font-size: var!(font-sm);
3329 color: var!(muted-foreground);
3330 font-weight: "500";
3331 }
3332
3333 pub c_home_section_title {
3338 font-size: var!(font-2xl);
3339 font-weight: "700";
3340 color: var!(foreground);
3341 margin: "0px";
3342 margin: format!("{} 0px", var!(gap-component));
3343 letter-spacing: "-0.02em";
3344 }
3345
3346 pub c_home_section_desc {
3347 font-size: var!(font-base);
3348 color: var!(foreground);
3349 margin: "0px";
3350 margin-bottom: var!(space-2xl);
3351 }
3352
3353 pub c_home_feature_grid {
3354 display: "grid";
3355 grid-template-columns: "repeat(2, 1fr)";
3356 gap: var!(space-md);
3357 @media ((max-width: 767px)) {
3358 grid-template-columns: "1fr";
3359 }
3360 }
3361
3362 pub c_feature_card {
3363 display: "flex";
3364 flex-direction: "column";
3365 gap: var!(space-sm);
3366 padding: "0px";
3367 overflow: "hidden";
3368 }
3369
3370 pub c_feature_header {
3371 display: "flex";
3372 align-items: "center";
3373 gap: var!(space-sm);
3374 }
3375
3376 pub c_feature_icon {
3377 font-size: var!(font-2xl);
3378 display: "flex";
3379 align-items: "center";
3380 justify-content: "center";
3381 line-height: "1";
3382 flex-shrink: "0";
3383 }
3384
3385 pub c_feature_name {
3386 font-size: var!(font-lg);
3387 font-weight: "600";
3388 color: var!(foreground);
3389 margin: "0px";
3390 overflow: "hidden";
3391 text-overflow: "ellipsis";
3392 white-space: "nowrap";
3393 }
3394
3395 pub c_feature_desc {
3396 font-size: var!(font-sm);
3397 color: var!(foreground);
3398 margin: "0px";
3399 }
3400
3401 pub c_debug {
3412 display: "flex";
3413 flex-direction: "row";
3414 align-items: "baseline";
3415 gap: var!(space-sm);
3416 padding: var!(space-xs);
3417 border: format!("1px dashed {}", var!(accent-muted));
3418 border-radius: var!(radius-sm);
3419 background: var!(surface-muted);
3420 font-family: "ui-monospace, SFMono-Regular, monospace";
3421 font-size: var!(font-sm);
3422 color: var!(foreground);
3423 margin: format!("{} 0px", var!(space-xs));
3424 }
3425
3426 pub c_debug_label {
3427 font-weight: "600";
3428 color: var!(accent);
3429 flex-shrink: "0";
3430 }
3431
3432 pub c_debug_value {
3433 font-family: "ui-monospace, SFMono-Regular, monospace";
3434 color: var!(foreground);
3435 margin: "0px";
3436 }
3437
3438 pub c_euv_navbar {
3443 position: "fixed";
3444 top: "0px";
3445 left: "0px";
3446 right: "0px";
3447 height: "56px";
3448 display: "flex";
3449 align-items: "center";
3450 gap: var!(gap-element);
3451 padding: format!("0px {}", var!(padding-main-horizontal));
3452 border-bottom: format!("1px solid {}", var!(border));
3453 background: var!(background);
3454 z-index: "100";
3455 @media ((max-width: 767px)) {
3456 padding: format!("0px {}", var!(padding-main-horizontal-mobile));
3457 }
3458 }
3459 pub c_euv_navbar_brand {
3460 display: "flex";
3461 align-items: "center";
3462 gap: var!(gap-element);
3463 font-size: var!(font-lg);
3464 font-weight: "700";
3465 letter-spacing: "-0.02em";
3466 color: var!(foreground);
3467 cursor: "pointer";
3468 flex-shrink: "0";
3469 }
3470 pub c_euv_navbar_logo {
3471 width: "32px";
3472 height: "32px";
3473 display: "flex";
3474 align-items: "center";
3475 justify-content: "center";
3476 background: var!(accent);
3477 color: var!(text-on-accent);
3478 font-size: var!(font-lg);
3479 flex-shrink: "0";
3480 }
3481 pub c_euv_navbar_links {
3482 display: "flex";
3483 align-items: "center";
3484 gap: var!(gap-section);
3485 margin-left: "auto";
3486 @media ((max-width: 767px)) {
3487 display: "none";
3488 }
3489 }
3490 pub c_euv_navbar_link {
3491 font-size: var!(font-sm);
3492 font-weight: "500";
3493 color: var!(foreground);
3494 padding: format!("{} {}", var!(space-xs), var!(space-sm));
3495 border-bottom: "2px solid transparent";
3496 cursor: "pointer";
3497 hover {
3498 color: var!(accent);
3499 }
3500 }
3501 pub c_euv_navbar_link_active {
3502 font-size: var!(font-sm);
3503 font-weight: "600";
3504 color: var!(accent);
3505 padding: format!("{} {}", var!(space-xs), var!(space-sm));
3506 border-bottom: format!("2px solid {}", var!(accent));
3507 cursor: "pointer";
3508 }
3509 pub c_euv_navbar_actions {
3510 display: "flex";
3511 align-items: "center";
3512 gap: var!(gap-element);
3513 margin-left: var!(gap-section);
3514 @media ((max-width: 767px)) {
3515 margin-left: "auto";
3516 }
3517 }
3518 pub c_euv_navbar_icon_button {
3519 width: "36px";
3520 height: "36px";
3521 display: "flex";
3522 align-items: "center";
3523 justify-content: "center";
3524 border: format!("1px dashed {}", var!(border));
3525 cursor: "pointer";
3526 font-size: var!(font-base);
3527 hover {
3528 background: var!(accent-muted);
3529 }
3530 }
3531 pub c_euv_navbar_menu_button {
3532 display: "none";
3533 width: "40px";
3534 height: "40px";
3535 align-items: "center";
3536 justify-content: "center";
3537 font-size: var!(font-xl);
3538 cursor: "pointer";
3539 transition: format!("background {} {}", var!(duration-fast), var!(ease-out));
3540 @media ((max-width: 767px)) {
3541 display: "flex";
3542 }
3543 }
3544 pub c_euv_navbar_menu_button_active {
3545 display: "none";
3546 width: "40px";
3547 height: "40px";
3548 align-items: "center";
3549 justify-content: "center";
3550 font-size: var!(font-xl);
3551 cursor: "pointer";
3552 background: var!(accent-muted);
3553 transition: format!("background {} {}", var!(duration-fast), var!(ease-out));
3554 @media ((max-width: 767px)) {
3555 display: "flex";
3556 }
3557 }
3558
3559 pub c_euv_dropdown {
3564 position: "relative";
3565 }
3566 pub c_euv_dropdown_menu {
3567 position: "absolute";
3568 top: "44px";
3569 right: "0px";
3570 width: "100%";
3582 background: var!(background);
3583 border: format!("1px solid {}", var!(border));
3584 box-shadow: var!(shadow-accent-lg);
3585 flex-direction: "column";
3586 z-index: "101";
3587 }
3588 pub c_euv_dropdown_menu_open {
3589 display: "flex";
3590 }
3591 pub c_euv_dropdown_menu_closed {
3592 display: "none";
3593 }
3594 pub c_euv_dropdown_item {
3595 padding: format!("{} {}", var!(space-sm), var!(space-lg));
3596 font-size: var!(font-sm);
3597 text-align: "left";
3598 cursor: "pointer";
3599 hover {
3600 background: var!(accent-muted);
3601 }
3602 }
3603
3604 pub c_euv_sidebar_group {
3609 margin-bottom: var!(space-xs);
3610 }
3611 pub c_euv_sidebar_group_title {
3612 display: "flex";
3613 align-items: "center";
3614 justify-content: "space-between";
3615 width: "100%";
3616 padding: format!("{} {}", var!(space-sm), var!(space-xl));
3617 font-size: var!(font-sm);
3618 font-weight: "600";
3619 cursor: "pointer";
3620 text-align: "left";
3621 hover {
3622 background: var!(accent-muted);
3623 }
3624 }
3625 pub c_euv_sidebar_group_arrow {
3626 font-size: var!(font-xs);
3627 color: var!(muted-foreground);
3628 transition: format!("transform {} {}", var!(duration-fast), var!(ease-out));
3629 }
3630 pub c_euv_sidebar_group_arrow_open {
3631 transform: "rotate(90deg)";
3632 }
3633 pub c_euv_sidebar_children {
3634 display: "flex";
3635 flex-direction: "column";
3636 padding-left: var!(space-md);
3637 border-left: format!("1px dashed {}", var!(border));
3638 margin-left: var!(space-sm);
3639 animation: format!("euv-fade-in {} {}", var!(duration-normal), var!(ease-out));
3640 }
3641 pub c_euv_sidebar_link {
3642 display: "block";
3643 padding: format!("{} {}", var!(space-sm), var!(space-xl));
3644 font-size: var!(font-sm);
3645 color: var!(foreground);
3646 cursor: "pointer";
3647 transition: format!("background {} {}", var!(duration-fast), var!(ease-out));
3648 hover {
3649 background: var!(accent-muted);
3650 color: var!(accent);
3651 box-shadow: format!("inset 4px 0px 0px {}", var!(accent));
3652 }
3653 }
3654 pub c_euv_sidebar_link_active {
3655 display: "block";
3656 padding: format!("{} {}", var!(space-sm), var!(space-xl));
3657 font-size: var!(font-sm);
3658 background: var!(accent);
3659 color: var!(text-on-accent);
3660 font-weight: "600";
3661 cursor: "pointer";
3662 }
3663
3664 pub c_euv_toc {
3669 position: "sticky";
3670 top: "76px";
3671 display: "flex";
3672 flex-direction: "column";
3673 gap: var!(space-xs);
3674 border-left: format!("1px solid {}", var!(border));
3675 padding-left: var!(space-lg);
3676 }
3677 pub c_euv_toc_title {
3678 font-size: var!(font-xs);
3679 font-weight: "700";
3680 text-transform: "uppercase";
3681 letter-spacing: "0.08em";
3682 color: var!(muted-foreground);
3683 margin-bottom: var!(space-xs);
3684 }
3685 pub c_euv_toc_link {
3686 font-size: var!(font-sm);
3687 color: var!(muted-foreground);
3688 cursor: "pointer";
3689 line-height: "1.5";
3690 hover {
3691 color: var!(accent);
3692 }
3693 }
3694 pub c_euv_toc_link_nested {
3695 padding-left: var!(space-lg);
3696 }
3697
3698 pub c_euv_pagination {
3703 display: "flex";
3704 justify-content: "space-between";
3705 gap: var!(gap-component);
3706 margin-top: var!(space-4xl);
3707 @media ((max-width: 767px)) {
3708 flex-direction: "column";
3709 }
3710 }
3711 pub c_euv_pagination_link {
3712 flex: "1";
3713 border: format!("1px solid {}", var!(border));
3714 padding: var!(space-lg);
3715 cursor: "pointer";
3716 display: "flex";
3717 flex-direction: "column";
3718 gap: var!(space-2xs);
3719 hover {
3720 border-color: var!(accent);
3721 }
3722 }
3723 pub c_euv_pagination_label {
3724 font-size: var!(font-xs);
3725 color: var!(muted-foreground);
3726 text-transform: "uppercase";
3727 letter-spacing: "0.08em";
3728 }
3729 pub c_euv_pagination_text {
3730 font-size: var!(font-base);
3731 font-weight: "600";
3732 color: var!(accent);
3733 }
3734 pub c_euv_pagination_next {
3735 text-align: "right";
3736 }
3737 pub c_euv_pagination_spacer {
3738 flex: "1";
3739 }
3740
3741 pub c_euv_drawer_overlay {
3746 position: "fixed";
3747 top: "0px";
3748 left: "0px";
3749 right: "0px";
3750 bottom: "0px";
3751 background: var!(bg-overlay);
3752 z-index: "200";
3753 transition: format!("opacity {} {}, visibility {} {}", var!(duration-overlay), var!(ease-out), var!(duration-overlay), var!(ease-out));
3754 }
3755 pub c_euv_drawer_overlay_open {
3756 opacity: "1";
3757 visibility: "visible";
3758 }
3759 pub c_euv_drawer_overlay_closed {
3760 opacity: "0";
3761 visibility: "hidden";
3762 }
3763 pub c_euv_drawer {
3764 position: "fixed";
3765 top: "0px";
3766 left: "0px";
3767 bottom: "0px";
3768 width: "260px";
3769 background: var!(background);
3770 border-right: format!("1px solid {}", var!(border));
3771 z-index: "201";
3772 overflow-y: "auto";
3773 padding: var!(space-xl);
3774 transition: format!("transform {} {}, visibility {} {}", var!(duration-normal), var!(ease-out), var!(duration-normal), var!(ease-out));
3775 }
3776 pub c_euv_drawer_open {
3777 transform: "translateX(0px)";
3778 visibility: "visible";
3779 }
3780 pub c_euv_drawer_closed {
3781 transform: "translateX(-100%)";
3782 visibility: "hidden";
3783 }
3784
3785 pub c_euv_markdown {
3790 width: "100%";
3791 min-width: "0px";
3792 }
3793 pub c_euv_footer {
3794 margin-top: var!(space-7xl);
3795 padding: format!("{} 0px", var!(space-2xl));
3796 border-top: format!("1px dashed {}", var!(border));
3797 text-align: "center";
3798 font-size: var!(font-sm);
3799 color: var!(muted-foreground);
3800 }
3801
3802 pub c_euv_result {
3807 display: "flex";
3808 flex-direction: "column";
3809 align-items: "center";
3810 justify-content: "center";
3811 text-align: "center";
3812 gap: var!(space-md);
3813 padding: format!("{} {}", var!(space-4xl), var!(space-md));
3814 min-height: "50vh";
3815 }
3816 pub c_euv_result_code {
3817 font-size: var!(font-6xl);
3818 font-weight: "700";
3819 line-height: "1";
3820 letter-spacing: "-0.02em";
3821 }
3822 pub c_euv_result_title {
3823 font-size: var!(font-2xl);
3824 font-weight: "600";
3825 margin: "0px";
3826 }
3827 pub c_euv_result_description {
3828 color: var!(muted-foreground);
3829 margin: "0px";
3830 }
3831 pub c_euv_result_actions {
3832 display: "flex";
3833 gap: var!(space-md);
3834 margin-top: var!(space-lg);
3835 }
3836
3837 pub c_euv_doc_layout {
3838 display: "flex";
3839 gap: var!(space-4xl);
3840 width: "100%";
3841 min-width: "0px";
3842 max-width: "1080px";
3843 margin: "0px auto";
3844 }
3845 pub c_euv_doc_content {
3846 flex: "1";
3847 min-width: "0px";
3848 max-width: var!(content-max-width);
3849 }
3850 pub c_euv_doc_toc {
3851 width: "200px";
3852 flex-shrink: "0";
3853 @media ((max-width: 1100px)) {
3854 display: "none";
3855 }
3856 }
3857}