run-what 1.2.0

HTML-first web framework powered by Rust. No JavaScript frameworks, no build steps—just HTML.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017

/*! What CSS Framework
 *  A utility-first CSS framework with semantic components
 *  https://getwhatnow.com
 *
 *  EXTENSIBILITY GUIDE
 *  ===================
 *
 *  1. THEME CUSTOMIZATION — Override CSS variables in your own stylesheet:
 *     :root { --w-primary-600: #7c3aed; --w-font-sans: "Inter", sans-serif; }
 *
 *  2. COMPONENT CUSTOMIZATION — Each component exposes its own variables:
 *     .btn { --w-btn-radius: 9999px; }  .card { --w-card-radius: 1rem; }
 *
 *  3. CASCADE LAYERS — Uses @layer, so your unlayered CSS always wins.
 *     .btn { background: hotpink; }  (beats framework styles, no !important)
 *
 *  4. DARK MODE — Automatic via prefers-color-scheme, or <html class="dark">
 *
 *  5. UTILITIES — .{property}-{value} pattern: .p-4, .text-lg, .rounded-xl
 *
 *  Variable hooks: --w-btn-*, --w-card-*, --w-alert-*, --w-modal-*,
 *                  --w-table-*, --w-input-*
 */

/* Layer order declaration — user CSS without @layer always wins */
@layer base, utilities, components, interactions;

/* ================================================================
   BASE LAYER — Reset, variables, foundational styles
   ================================================================ */
@layer base {

/* Reset/Normalize */
*, *::before, *::after { box-sizing: border-box; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--w-font-sans); font-size: 1rem; line-height: inherit; color: var(--w-text); background-color: var(--w-bg); }
hr { height: 0; color: inherit; border-top-width: 1px; }
abbr[title] { text-decoration: underline dotted; }
b, strong { font-weight: bolder; }
code, kbd, samp, pre { font-family: ui-monospace, 'SF Mono', Menlo, Monaco, 'Cascadia Code', monospace; font-size: 1em; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
table { text-indent: 0; border-color: inherit; border-collapse: collapse; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: inherit; margin: 0; padding: 0; }
button, select { text-transform: none; }
button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; }
::-moz-focus-inner { border-style: none; padding: 0; }
legend { padding: 0; }
progress { vertical-align: baseline; }
[type='search'] { -webkit-appearance: textfield; outline-offset: -2px; }
::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
summary { display: list-item; }
ul, ol { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: inherit; }
img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
[hidden] { display: none !important; }

/* CSS Variables — Theme tokens */
:root {
  /* Colors — Neutrals */
  --w-black: #000000; --w-white: #ffffff;
  --w-gray-50: #f9fafb; --w-gray-100: #f3f4f6; --w-gray-200: #e5e7eb; --w-gray-300: #d1d5db;
  --w-gray-400: #9ca3af; --w-gray-500: #6b7280; --w-gray-600: #4b5563; --w-gray-700: #374151;
  --w-gray-800: #1f2937; --w-gray-900: #111827;

  /* Colors — Primary */
  --w-primary-50: #eff6ff; --w-primary-100: #dbeafe; --w-primary-200: #bfdbfe; --w-primary-300: #93c5fd;
  --w-primary-400: #60a5fa; --w-primary-500: #3b82f6; --w-primary-600: #2563eb; --w-primary-700: #1d4ed8;
  --w-primary-800: #1e40af; --w-primary-900: #1e3a8a;

  /* Colors — Semantic */
  --w-success-50: #f0fdf4; --w-success-100: #dcfce7; --w-success-500: #22c55e; --w-success-600: #16a34a; --w-success-700: #15803d;
  --w-warning-50: #fffbeb; --w-warning-100: #fef3c7; --w-warning-500: #f59e0b; --w-warning-600: #d97706; --w-warning-700: #b45309;
  --w-danger-50: #fef2f2; --w-danger-100: #fee2e2; --w-danger-500: #ef4444; --w-danger-600: #dc2626; --w-danger-700: #b91c1c;

  /* Colors — Raw palette */
  --w-red-50: #fef2f2; --w-red-100: #fee2e2; --w-red-200: #fecaca; --w-red-500: #ef4444; --w-red-600: #dc2626; --w-red-700: #b91c1c;
  --w-green-50: #f0fdf4; --w-green-100: #dcfce7; --w-green-300: #86efac; --w-green-500: #22c55e; --w-green-600: #16a34a;
  --w-yellow-50: #fefce8; --w-yellow-100: #fef9c3; --w-yellow-200: #fde68a; --w-yellow-500: #eab308; --w-yellow-600: #ca8a04;
  --w-blue-50: #eff6ff; --w-blue-100: #dbeafe; --w-blue-200: #bfdbfe; --w-blue-300: #93c5fd;
  --w-blue-500: #3b82f6; --w-blue-600: #2563eb; --w-blue-800: #1e40af; --w-blue-900: #1e3a8a;
  --w-indigo-50: #eef2ff; --w-indigo-100: #e0e7ff; --w-indigo-500: #6366f1; --w-indigo-600: #4f46e5;

  /* Typography */
  --w-font-sans: Tahoma, 'Segoe UI', Verdana, Arial, sans-serif;
  --w-font-serif: Georgia, Cambria, 'Times New Roman', Times, serif;
  --w-font-mono: ui-monospace, 'SF Mono', Menlo, Monaco, 'Cascadia Code', monospace;
  --w-text-xs: 0.75rem; --w-text-sm: 0.875rem; --w-text-base: 1rem; --w-text-lg: 1.125rem;
  --w-text-xl: 1.25rem; --w-text-2xl: 1.5rem; --w-text-3xl: 1.875rem; --w-text-4xl: 2.25rem; --w-text-5xl: 3rem;
  --w-font-thin: 100; --w-font-light: 300; --w-font-normal: 400; --w-font-medium: 500;
  --w-font-semibold: 600; --w-font-bold: 700; --w-font-extrabold: 800;
  --w-leading-none: 1; --w-leading-tight: 1.25; --w-leading-normal: 1.5; --w-leading-relaxed: 1.625; --w-leading-loose: 2;

  /* Spacing */
  --w-spacing-0: 0; --w-spacing-1: 0.25rem; --w-spacing-2: 0.5rem; --w-spacing-3: 0.75rem;
  --w-spacing-4: 1rem; --w-spacing-5: 1.25rem; --w-spacing-6: 1.5rem; --w-spacing-8: 2rem;
  --w-spacing-10: 2.5rem; --w-spacing-12: 3rem; --w-spacing-16: 4rem; --w-spacing-20: 5rem; --w-spacing-24: 6rem;

  /* Border radius */
  --w-rounded-none: 0; --w-rounded-sm: 0.125rem; --w-rounded: 0.25rem; --w-rounded-md: 0.375rem;
  --w-rounded-lg: 0.5rem; --w-rounded-xl: 0.75rem; --w-rounded-2xl: 1rem; --w-rounded-full: 9999px;

  /* Shadows */
  --w-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --w-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --w-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --w-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --w-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* Transitions */
  --w-transition-fast: 150ms ease; --w-transition: 200ms ease; --w-transition-slow: 300ms ease;

  /* Z-index scale */
  --w-z-dropdown: 1000; --w-z-sticky: 1020; --w-z-fixed: 1030;
  --w-z-modal-backdrop: 1040; --w-z-modal: 1050; --w-z-tooltip: 1070;

  /* Container breakpoints */
  --w-container-sm: 640px; --w-container-md: 768px; --w-container-lg: 1024px; --w-container-xl: 1280px;

  /* Semantic tokens (light mode defaults) */
  --w-bg: var(--w-white); --w-text: var(--w-gray-900); --w-border: var(--w-gray-200);
  --w-surface: var(--w-white); --w-surface-raised: var(--w-gray-50); --w-muted: var(--w-gray-500);
}

/* Dark mode — automatic via OS preference */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --w-bg: #0f172a; --w-text: var(--w-gray-100); --w-border: var(--w-gray-700);
    --w-surface: var(--w-gray-800); --w-surface-raised: var(--w-gray-700); --w-muted: var(--w-gray-400);
  }
}
/* Dark mode — manual via class */
:root.dark {
  --w-bg: #0f172a; --w-text: var(--w-gray-100); --w-border: var(--w-gray-700);
  --w-surface: var(--w-gray-800); --w-surface-raised: var(--w-gray-700); --w-muted: var(--w-gray-400);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

} /* end @layer base */

/* ================================================================
   UTILITIES LAYER — Spacing, layout, typography, colors, effects
   ================================================================ */
@layer utilities {

/* --- Spacing --- */
.m-0 { margin: 0; } .m-1 { margin: 0.25rem; } .m-2 { margin: 0.5rem; } .m-3 { margin: 0.75rem; } .m-4 { margin: 1rem; } .m-6 { margin: 1.5rem; } .m-8 { margin: 2rem; } .m-auto { margin: auto; }
.mx-0 { margin-left: 0; margin-right: 0; } .mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; } .mx-4 { margin-left: 1rem; margin-right: 1rem; } .mx-auto { margin-left: auto; margin-right: auto; }
.my-0 { margin-top: 0; margin-bottom: 0; } .my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; } .my-4 { margin-top: 1rem; margin-bottom: 1rem; } .my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } .mt-10 { margin-top: 2.5rem; } .mt-12 { margin-top: 3rem; } .mt-16 { margin-top: 4rem; } .mt-20 { margin-top: 5rem; } .mt-24 { margin-top: 6rem; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; } .mb-12 { margin-bottom: 3rem; } .mb-16 { margin-bottom: 4rem; } .mb-20 { margin-bottom: 5rem; } .mb-24 { margin-bottom: 6rem; }
.ml-0 { margin-left: 0; } .ml-2 { margin-left: 0.5rem; } .ml-4 { margin-left: 1rem; } .ml-auto { margin-left: auto; }
.mr-0 { margin-right: 0; } .mr-2 { margin-right: 0.5rem; } .mr-4 { margin-right: 1rem; } .mr-auto { margin-right: auto; }
.-mt-1 { margin-top: -0.25rem; } .-mt-2 { margin-top: -0.5rem; } .-mb-1 { margin-bottom: -0.25rem; }
.p-0 { padding: 0; } .p-1 { padding: 0.25rem; } .p-2 { padding: 0.5rem; } .p-3 { padding: 0.75rem; } .p-4 { padding: 1rem; } .p-6 { padding: 1.5rem; } .p-8 { padding: 2rem; }
.px-0 { padding-left: 0; padding-right: 0; } .px-1 { padding-left: 0.25rem; padding-right: 0.25rem; } .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-0 { padding-top: 0; padding-bottom: 0; } .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } .py-4 { padding-top: 1rem; padding-bottom: 1rem; } .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .py-8 { padding-top: 2rem; padding-bottom: 2rem; } .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; } .py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.pt-0 { padding-top: 0; } .pt-2 { padding-top: 0.5rem; } .pt-4 { padding-top: 1rem; } .pt-6 { padding-top: 1.5rem; }
.pb-0 { padding-bottom: 0; } .pb-2 { padding-bottom: 0.5rem; } .pb-4 { padding-bottom: 1rem; } .pb-6 { padding-bottom: 1.5rem; } .pb-24 { padding-bottom: 6rem; }
.gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; }
.gap-x-1 { column-gap: 0.25rem; } .gap-x-2 { column-gap: 0.5rem; } .gap-x-4 { column-gap: 1rem; } .gap-x-6 { column-gap: 1.5rem; }
.gap-y-1 { row-gap: 0.25rem; } .gap-y-2 { row-gap: 0.5rem; } .gap-y-4 { row-gap: 1rem; } .gap-y-6 { row-gap: 1.5rem; }
.space-x-1 > * + * { margin-left: 0.25rem; } .space-x-2 > * + * { margin-left: 0.5rem; } .space-x-4 > * + * { margin-left: 1rem; } .space-x-6 > * + * { margin-left: 1.5rem; }
.space-y-1 > * + * { margin-top: 0.25rem; } .space-y-2 > * + * { margin-top: 0.5rem; } .space-y-3 > * + * { margin-top: 0.75rem; } .space-y-4 > * + * { margin-top: 1rem; } .space-y-6 > * + * { margin-top: 1.5rem; }

/* --- Layout --- */
.block { display: block; } .inline-block { display: inline-block; } .inline { display: inline; }
.flex { display: flex; } .inline-flex { display: inline-flex; } .grid { display: grid; } .hidden { display: none; } .contents { display: contents; }
.flex-row { flex-direction: row; } .flex-col { flex-direction: column; } .flex-row-reverse { flex-direction: row-reverse; } .flex-col-reverse { flex-direction: column-reverse; }
.flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; }
.flex-1 { flex: 1 1 0%; } .flex-auto { flex: 1 1 auto; } .flex-none { flex: none; } .flex-initial { flex: 0 1 auto; }
.grow { flex-grow: 1; } .grow-0 { flex-grow: 0; } .shrink-0 { flex-shrink: 0; } .flex-shrink-0 { flex-shrink: 0; }
.justify-start { justify-content: flex-start; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-around { justify-content: space-around; } .justify-evenly { justify-content: space-evenly; }
.items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .items-center { align-items: center; } .items-stretch { align-items: stretch; } .items-baseline { align-items: baseline; }
.self-start { align-self: flex-start; } .self-center { align-self: center; } .self-end { align-self: flex-end; } .self-stretch { align-self: stretch; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.col-span-1 { grid-column: span 1; } .col-span-2 { grid-column: span 2; } .col-span-3 { grid-column: span 3; } .col-span-full { grid-column: 1 / -1; }
.row-span-1 { grid-row: span 1; } .row-span-2 { grid-row: span 2; } .row-span-3 { grid-row: span 3; } .row-span-full { grid-row: 1 / -1; }
.static { position: static; } .fixed { position: fixed; } .absolute { position: absolute; } .relative { position: relative; } .sticky { position: sticky; }
.inset-0 { inset: 0; } .top-0 { top: 0; } .right-0 { right: 0; } .bottom-0 { bottom: 0; } .left-0 { left: 0; }
.z-0 { z-index: 0; } .z-10 { z-index: 10; } .z-20 { z-index: 20; } .z-30 { z-index: 30; } .z-50 { z-index: 50; } .z-modal { z-index: var(--w-z-modal); }
.overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; } .overflow-clip { overflow: clip; }
.container { width: 100%; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 640px) { .container { max-width: 640px; } }
@media (min-width: 768px) { .container { max-width: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }

/* Sizing */
.w-full { width: 100%; } .w-auto { width: auto; } .w-screen { width: 100vw; }
.w-1\/2 { width: 50%; } .w-1\/3 { width: 33.333%; } .w-2\/3 { width: 66.667%; } .w-1\/4 { width: 25%; } .w-3\/4 { width: 75%; }
.min-w-0 { min-width: 0; } .min-w-full { min-width: 100%; }
.max-w-sm { max-width: 24rem; } .max-w-md { max-width: 28rem; } .max-w-lg { max-width: 32rem; } .max-w-xl { max-width: 36rem; } .max-w-2xl { max-width: 42rem; } .max-w-4xl { max-width: 56rem; } .max-w-full { max-width: 100%; } .max-w-prose { max-width: 65ch; } .max-w-none { max-width: none; }
.h-full { height: 100%; } .h-screen { height: 100vh; } .h-dvh { height: 100dvh; } .h-auto { height: auto; }
.min-h-0 { min-height: 0; } .min-h-screen { min-height: 100vh; } .min-h-dvh { min-height: 100dvh; }
.size-4 { width: 1rem; height: 1rem; } .size-5 { width: 1.25rem; height: 1.25rem; } .size-6 { width: 1.5rem; height: 1.5rem; } .size-8 { width: 2rem; height: 2rem; } .size-10 { width: 2.5rem; height: 2.5rem; } .size-12 { width: 3rem; height: 3rem; } .size-16 { width: 4rem; height: 4rem; } .size-full { width: 100%; height: 100%; }
.aspect-auto { aspect-ratio: auto; } .aspect-square { aspect-ratio: 1; } .aspect-video { aspect-ratio: 16 / 9; }

/* --- Typography --- */
.font-sans { font-family: var(--w-font-sans); } .font-serif { font-family: var(--w-font-serif); } .font-mono { font-family: var(--w-font-mono); }
.text-xs { font-size: 0.75rem; line-height: 1rem; } .text-sm { font-size: 0.875rem; line-height: 1.25rem; } .text-base { font-size: 1rem; line-height: 1.5rem; } .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; } .text-2xl { font-size: 1.5rem; line-height: 2rem; } .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .text-5xl { font-size: 3rem; line-height: 1; }
.font-light { font-weight: 300; } .font-normal { font-weight: 400; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } .font-extrabold { font-weight: 800; }
.leading-none { line-height: 1; } .leading-tight { line-height: 1.25; } .leading-normal { line-height: 1.5; } .leading-relaxed { line-height: 1.625; }
.tracking-tight { letter-spacing: -0.025em; } .tracking-normal { letter-spacing: 0; } .tracking-wide { letter-spacing: 0.025em; } .tracking-wider { letter-spacing: 0.05em; }
.text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; }
.text-balance { text-wrap: balance; } .text-pretty { text-wrap: pretty; }
.underline { text-decoration: underline; } .no-underline { text-decoration: none; } .line-through { text-decoration: line-through; }
.uppercase { text-transform: uppercase; } .capitalize { text-transform: capitalize; } .lowercase { text-transform: lowercase; } .normal-case { text-transform: none; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.whitespace-nowrap { white-space: nowrap; } .whitespace-pre-wrap { white-space: pre-wrap; } .whitespace-pre { white-space: pre; }
.break-words { overflow-wrap: break-word; } .break-all { word-break: break-all; }
.italic { font-style: italic; } .not-italic { font-style: normal; }
.list-disc { list-style-type: disc; } .list-decimal { list-style-type: decimal; } .list-none { list-style-type: none; }
.list-inside { list-style-position: inside; } .list-outside { list-style-position: outside; }

/* Text colors — Neutral */
.text-black { color: var(--w-black); } .text-white { color: var(--w-white); }
.text-gray-300 { color: var(--w-gray-300); } .text-gray-400 { color: var(--w-gray-400); } .text-gray-500 { color: var(--w-gray-500); } .text-gray-600 { color: var(--w-gray-600); } .text-gray-700 { color: var(--w-gray-700); } .text-gray-800 { color: var(--w-gray-800); } .text-gray-900 { color: var(--w-gray-900); }
/* Text colors — Primary */
.text-primary { color: var(--w-primary-600); } .text-primary-400 { color: var(--w-primary-400); } .text-primary-500 { color: var(--w-primary-500); } .text-primary-600 { color: var(--w-primary-600); } .text-primary-700 { color: var(--w-primary-700); } .text-primary-800 { color: var(--w-primary-800); }
/* Text colors — Semantic */
.text-success { color: var(--w-success-600); } .text-success-500 { color: var(--w-success-500); } .text-success-600 { color: var(--w-success-600); } .text-success-700 { color: var(--w-success-700); }
.text-warning { color: var(--w-warning-600); } .text-warning-500 { color: var(--w-warning-500); } .text-warning-600 { color: var(--w-warning-600); } .text-warning-700 { color: var(--w-warning-700); }
.text-danger { color: var(--w-danger-600); } .text-danger-500 { color: var(--w-danger-500); } .text-danger-600 { color: var(--w-danger-600); } .text-danger-700 { color: var(--w-danger-700); }
.text-muted { color: var(--w-muted); }
/* Text colors — Raw palette */
.text-red-500 { color: var(--w-red-500); } .text-red-600 { color: var(--w-red-600); } .text-red-700 { color: var(--w-red-700); }
.text-green-500 { color: var(--w-green-500); } .text-green-600 { color: var(--w-green-600); }
.text-yellow-500 { color: var(--w-yellow-500); } .text-yellow-600 { color: var(--w-yellow-600); }
.text-blue-500 { color: var(--w-blue-500); } .text-blue-600 { color: var(--w-blue-600); } .text-blue-800 { color: var(--w-blue-800); } .text-blue-900 { color: var(--w-blue-900); }
.text-indigo-500 { color: var(--w-indigo-500); } .text-indigo-600 { color: var(--w-indigo-600); }

/* --- Colors & Effects --- */
/* Backgrounds — Neutral */
.bg-transparent { background-color: transparent; } .bg-white { background-color: var(--w-white); } .bg-black { background-color: var(--w-black); }
.bg-gray-50 { background-color: var(--w-gray-50); } .bg-gray-100 { background-color: var(--w-gray-100); } .bg-gray-200 { background-color: var(--w-gray-200); } .bg-gray-300 { background-color: var(--w-gray-300); }
.bg-gray-800 { background-color: var(--w-gray-800); } .bg-gray-900 { background-color: var(--w-gray-900); }
/* Backgrounds — Primary */
.bg-primary { background-color: var(--w-primary-600); } .bg-primary-50 { background-color: var(--w-primary-50); } .bg-primary-100 { background-color: var(--w-primary-100); } .bg-primary-200 { background-color: var(--w-primary-200); } .bg-primary-500 { background-color: var(--w-primary-500); } .bg-primary-600 { background-color: var(--w-primary-600); } .bg-primary-700 { background-color: var(--w-primary-700); }
/* Backgrounds — Semantic */
.bg-success { background-color: var(--w-success-600); } .bg-success-50 { background-color: var(--w-success-50); } .bg-success-100 { background-color: var(--w-success-100); }
.bg-warning { background-color: var(--w-warning-500); } .bg-warning-50 { background-color: var(--w-warning-50); } .bg-warning-100 { background-color: var(--w-warning-100); }
.bg-danger { background-color: var(--w-danger-600); } .bg-danger-50 { background-color: var(--w-danger-50); } .bg-danger-100 { background-color: var(--w-danger-100); }
/* Backgrounds — Raw palette */
.bg-red-50 { background-color: var(--w-red-50); } .bg-red-100 { background-color: var(--w-red-100); }
.bg-green-50 { background-color: var(--w-green-50); } .bg-green-100 { background-color: var(--w-green-100); }
.bg-yellow-50 { background-color: var(--w-yellow-50); } .bg-yellow-100 { background-color: var(--w-yellow-100); }
.bg-blue-50 { background-color: var(--w-blue-50); } .bg-blue-100 { background-color: var(--w-blue-100); }
.bg-indigo-50 { background-color: var(--w-indigo-50); } .bg-indigo-100 { background-color: var(--w-indigo-100); }
/* Backgrounds — Surfaces */
.bg-surface { background-color: var(--w-surface); } .bg-surface-raised { background-color: var(--w-surface-raised); }

/* Borders */
.border { border: 1px solid var(--w-border); } .border-0 { border-width: 0; } .border-2 { border: 2px solid var(--w-border); }
.border-t { border-top: 1px solid var(--w-border); } .border-b { border-bottom: 1px solid var(--w-border); } .border-l { border-left: 1px solid var(--w-border); } .border-r { border-right: 1px solid var(--w-border); }
.border-gray-200 { border-color: var(--w-gray-200); } .border-gray-300 { border-color: var(--w-gray-300); } .border-gray-400 { border-color: var(--w-gray-400); }
.border-primary { border-color: var(--w-primary-500); } .border-primary-200 { border-color: var(--w-primary-200); } .border-primary-300 { border-color: var(--w-primary-300); }
.border-success { border-color: var(--w-success-500); } .border-success-300 { border-color: rgba(34, 197, 94, 0.3); } .border-success-500 { border-color: var(--w-success-500); }
.border-warning { border-color: var(--w-warning-500); } .border-warning-300 { border-color: rgba(245, 158, 11, 0.3); }
.border-danger { border-color: var(--w-danger-500); } .border-danger-300 { border-color: rgba(239, 68, 68, 0.3); }
/* Borders — Raw palette */
.border-red-200 { border-color: var(--w-red-200); } .border-green-300 { border-color: var(--w-green-300); }
.border-yellow-200 { border-color: var(--w-yellow-200); } .border-blue-200 { border-color: var(--w-blue-200); } .border-blue-300 { border-color: var(--w-blue-300); }
.border-dashed { border-style: dashed; } .border-dotted { border-style: dotted; } .border-solid { border-style: solid; }
.divide-y > * + * { border-top: 1px solid var(--w-border); }
.divide-x > * + * { border-left: 1px solid var(--w-border); }
.divide-gray-200 > * + * { border-color: var(--w-gray-200); }

/* Border radius */
.rounded-none { border-radius: 0; } .rounded-sm { border-radius: 0.125rem; } .rounded { border-radius: 0.25rem; } .rounded-md { border-radius: 0.375rem; } .rounded-lg { border-radius: 0.5rem; } .rounded-xl { border-radius: 0.75rem; } .rounded-2xl { border-radius: 1rem; } .rounded-3xl { border-radius: 1.5rem; } .rounded-full { border-radius: 9999px; }

/* Shadows */
.shadow-none { box-shadow: none; } .shadow-sm { box-shadow: var(--w-shadow-sm); } .shadow { box-shadow: var(--w-shadow); } .shadow-md { box-shadow: var(--w-shadow-md); } .shadow-lg { box-shadow: var(--w-shadow-lg); } .shadow-xl { box-shadow: var(--w-shadow-xl); }

/* Rings (outline without affecting layout) */
.ring-1 { box-shadow: 0 0 0 1px var(--w-gray-300); } .ring-2 { box-shadow: 0 0 0 2px var(--w-gray-300); }
.ring-primary { --w-ring-color: var(--w-primary-500); box-shadow: 0 0 0 2px var(--w-ring-color); }
.ring-success { box-shadow: 0 0 0 2px var(--w-success-500); }
.ring-danger { box-shadow: 0 0 0 2px var(--w-danger-500); }

/* Opacity */
.opacity-0 { opacity: 0; } .opacity-25 { opacity: 0.25; } .opacity-50 { opacity: 0.5; } .opacity-75 { opacity: 0.75; } .opacity-100 { opacity: 1; }

/* Cursors & interaction */
.cursor-pointer { cursor: pointer; } .cursor-not-allowed { cursor: not-allowed; } .cursor-default { cursor: default; } .cursor-grab { cursor: grab; }
.pointer-events-none { pointer-events: none; } .pointer-events-auto { pointer-events: auto; }
.select-none { user-select: none; } .select-all { user-select: all; } .select-text { user-select: text; }
.scroll-mt-16 { scroll-margin-top: 4rem; } .scroll-mt-20 { scroll-margin-top: 5rem; }

/* Transitions */
.transition { transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 200ms; transition-timing-function: ease; }
.transition-colors { transition-property: color, background-color, border-color; transition-duration: 200ms; transition-timing-function: ease; }
.transition-transform { transition-property: transform; transition-duration: 200ms; transition-timing-function: ease; }
.transition-opacity { transition-property: opacity; transition-duration: 200ms; transition-timing-function: ease; }
.transition-all { transition: all 200ms ease; }
.duration-75 { transition-duration: 75ms; } .duration-150 { transition-duration: 150ms; } .duration-300 { transition-duration: 300ms; } .duration-500 { transition-duration: 500ms; }

/* Gradients */
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--w-gradient-from, transparent), var(--w-gradient-to, transparent)); }
.bg-gradient-to-l { background-image: linear-gradient(to left, var(--w-gradient-from, transparent), var(--w-gradient-to, transparent)); }
.bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--w-gradient-from, transparent), var(--w-gradient-to, transparent)); }
.from-blue-50 { --w-gradient-from: var(--w-blue-50); } .from-blue-100 { --w-gradient-from: var(--w-blue-100); }
.from-indigo-50 { --w-gradient-from: var(--w-indigo-50); }
.to-blue-50 { --w-gradient-to: var(--w-blue-50); } .to-indigo-50 { --w-gradient-to: var(--w-indigo-50); }
.to-white { --w-gradient-to: var(--w-white); } .to-transparent { --w-gradient-to: transparent; }

/* Transforms */
.translate-y-0 { transform: translateY(0); } .translate-y-1 { transform: translateY(0.25rem); } .-translate-y-1 { transform: translateY(-0.25rem); }
.scale-95 { transform: scale(0.95); } .scale-100 { transform: scale(1); } .scale-105 { transform: scale(1.05); }

/* Hover states */
.hover\:bg-gray-50:hover { background-color: var(--w-gray-50); }
.hover\:bg-gray-100:hover { background-color: var(--w-gray-100); } .hover\:bg-gray-200:hover { background-color: var(--w-gray-200); }
.hover\:bg-primary:hover { background-color: var(--w-primary-600); } .hover\:bg-primary-50:hover { background-color: var(--w-primary-50); } .hover\:bg-primary-700:hover { background-color: var(--w-primary-700); }
.hover\:text-primary:hover { color: var(--w-primary-600); } .hover\:text-white:hover { color: var(--w-white); } .hover\:text-gray-900:hover { color: var(--w-gray-900); }
.hover\:underline:hover { text-decoration: underline; } .hover\:no-underline:hover { text-decoration: none; }
.hover\:shadow-lg:hover { box-shadow: var(--w-shadow-lg); } .hover\:shadow-md:hover { box-shadow: var(--w-shadow-md); }
.hover\:scale-105:hover { transform: scale(1.05); } .hover\:-translate-y-1:hover { transform: translateY(-0.25rem); }
.hover\:opacity-80:hover { opacity: 0.8; } .hover\:opacity-100:hover { opacity: 1; }

/* Focus states — using :focus-visible for keyboard-only focus rings */
.focus\:outline-none:focus-visible { outline: none; }
.focus\:ring:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); }
.focus\:ring-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3); }

/* Disabled states */
.disabled\:opacity-50:disabled { opacity: 0.5; } .disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }

/* Backdrop */
.backdrop-blur { backdrop-filter: blur(8px); } .backdrop-blur-sm { backdrop-filter: blur(4px); } .backdrop-blur-lg { backdrop-filter: blur(16px); } .backdrop-blur-xl { backdrop-filter: blur(24px); }

/* Accessibility */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.not-sr-only { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; }

/* --- Responsive Variants --- */
@media (min-width: 640px) {
  .sm\:hidden { display: none; } .sm\:block { display: block; } .sm\:flex { display: flex; } .sm\:grid { display: grid; } .sm\:inline-flex { display: inline-flex; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:flex-row { flex-direction: row; } .sm\:flex-col { flex-direction: column; }
  .sm\:text-left { text-align: left; } .sm\:text-center { text-align: center; }
}
@media (min-width: 768px) {
  .md\:hidden { display: none; } .md\:block { display: block; } .md\:flex { display: flex; } .md\:grid { display: grid; } .md\:inline-flex { display: inline-flex; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:flex-row { flex-direction: row; } .md\:flex-col { flex-direction: column; }
  .md\:text-left { text-align: left; } .md\:text-center { text-align: center; }
  .md\:w-1\/2 { width: 50%; } .md\:w-1\/3 { width: 33.333%; } .md\:w-auto { width: auto; }
  .md\:gap-6 { gap: 1.5rem; } .md\:gap-8 { gap: 2rem; }
  .md\:p-8 { padding: 2rem; } .md\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
  .lg\:hidden { display: none; } .lg\:block { display: block; } .lg\:flex { display: flex; } .lg\:grid { display: grid; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:flex-row { flex-direction: row; }
  .lg\:w-1\/2 { width: 50%; } .lg\:w-1\/3 { width: 33.333%; } .lg\:w-1\/4 { width: 25%; }
  .lg\:gap-8 { gap: 2rem; } .lg\:gap-12 { gap: 3rem; }
}
@media (max-width: 639px) { .hidden-mobile { display: none; } }
@media (min-width: 640px) { .hidden-desktop { display: none; } }

/* --- Print --- */
@media print {
  .no-print { display: none !important; }
  .modal-backdrop, .drawer-backdrop { display: none !important; }
  body { color: black; background: white; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; }
}

} /* end @layer utilities */

/*! what:minimal-cut-start */
/* ================================================================
   COMPONENTS LAYER — Buttons, forms, cards, navigation, etc.
   ================================================================ */
@layer components {

/* Shared keyframe (buttons, spinners) */
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Buttons --- */
.btn {
  --w-btn-padding-x: 1rem;
  --w-btn-padding-y: 0.5rem;
  --w-btn-font-size: 0.875rem;
  --w-btn-radius: var(--w-rounded-md);
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--w-btn-padding-y) var(--w-btn-padding-x);
  font-size: var(--w-btn-font-size); font-weight: 500; line-height: 1.5;
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--w-btn-radius);
  cursor: pointer; transition: all 200ms ease; user-select: none;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); }
.btn-primary { background-color: var(--w-primary-600); color: var(--w-white); }
.btn-primary:hover:not(:disabled) { background-color: var(--w-primary-700); }
.btn-secondary { background-color: var(--w-gray-600); color: var(--w-white); }
.btn-secondary:hover:not(:disabled) { background-color: var(--w-gray-700); }
.btn-success { background-color: var(--w-success-600); color: var(--w-white); }
.btn-success:hover:not(:disabled) { background-color: var(--w-success-700); }
.btn-warning { background-color: var(--w-warning-500); color: var(--w-white); }
.btn-warning:hover:not(:disabled) { background-color: var(--w-warning-600); }
.btn-danger { background-color: var(--w-danger-600); color: var(--w-white); }
.btn-danger:hover:not(:disabled) { background-color: var(--w-danger-700); }
.btn-info { background-color: var(--w-primary-500); color: var(--w-white); }
.btn-info:hover:not(:disabled) { background-color: var(--w-primary-600); }
.btn-outline { background-color: transparent; border-color: var(--w-gray-300); color: var(--w-gray-700); }
.btn-outline:hover:not(:disabled) { background-color: var(--w-gray-50); border-color: var(--w-gray-400); }
.btn-outline-primary { background-color: transparent; border-color: var(--w-primary-600); color: var(--w-primary-600); }
.btn-outline-primary:hover:not(:disabled) { background-color: var(--w-primary-600); color: var(--w-white); }
.btn-outline-secondary { background-color: transparent; border-color: var(--w-gray-400); color: var(--w-gray-700); }
.btn-outline-secondary:hover:not(:disabled) { background-color: var(--w-gray-100); }
.btn-outline-success { background-color: transparent; border-color: var(--w-success-600); color: var(--w-success-600); }
.btn-outline-success:hover:not(:disabled) { background-color: var(--w-success-600); color: var(--w-white); }
.btn-outline-warning { background-color: transparent; border-color: var(--w-warning-500); color: var(--w-warning-600); }
.btn-outline-warning:hover:not(:disabled) { background-color: var(--w-warning-500); color: var(--w-white); }
.btn-outline-danger { background-color: transparent; border-color: var(--w-danger-600); color: var(--w-danger-600); }
.btn-outline-danger:hover:not(:disabled) { background-color: var(--w-danger-600); color: var(--w-white); }
.btn-ghost { background-color: transparent; color: var(--w-gray-700); }
.btn-ghost:hover:not(:disabled) { background-color: var(--w-gray-100); }
.btn-link { background-color: transparent; color: var(--w-primary-600); padding: 0; border: none; }
.btn-link:hover:not(:disabled) { text-decoration: underline; }
.btn-sm { --w-btn-padding-x: 0.75rem; --w-btn-padding-y: 0.25rem; --w-btn-font-size: 0.75rem; }
.btn-lg { --w-btn-padding-x: 1.5rem; --w-btn-padding-y: 0.75rem; --w-btn-font-size: 1.125rem; }
.btn-xl { --w-btn-padding-x: 2rem; --w-btn-padding-y: 1rem; --w-btn-font-size: 1.25rem; }
.btn-block { display: flex; width: 100%; }
.btn-icon { padding: 0.5rem; }
.btn-icon.btn-sm { padding: 0.25rem; }
.btn-icon.btn-lg { padding: 0.75rem; }
.btn-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn-loading::after { content: ''; position: absolute; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.6s linear infinite; }
.btn-loading.btn-primary::after, .btn-loading.btn-secondary::after, .btn-loading.btn-success::after, .btn-loading.btn-warning::after, .btn-loading.btn-danger::after { border-color: var(--w-white); border-right-color: transparent; }
.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; }
.btn-group .btn:first-child { border-top-left-radius: var(--w-rounded-md); border-bottom-left-radius: var(--w-rounded-md); }
.btn-group .btn:last-child { border-top-right-radius: var(--w-rounded-md); border-bottom-right-radius: var(--w-rounded-md); }
.btn-group .btn:not(:last-child) { border-right-width: 0; }
.btn-group-vertical { display: inline-flex; flex-direction: column; }
.btn-group-vertical .btn { border-radius: 0; width: 100%; }
.btn-group-vertical .btn:first-child { border-top-left-radius: var(--w-rounded-md); border-top-right-radius: var(--w-rounded-md); }
.btn-group-vertical .btn:last-child { border-bottom-left-radius: var(--w-rounded-md); border-bottom-right-radius: var(--w-rounded-md); }
.btn-group-vertical .btn:not(:last-child) { border-bottom-width: 0; }

/* --- Forms --- */
.form-group { margin-bottom: 1rem; }
.form-label { display: block; margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--w-gray-700); }
.form-input, .form-textarea, .form-select, .form-control {
  --w-input-radius: var(--w-rounded-md);
  --w-input-border: var(--w-gray-300);
  --w-input-focus-ring: rgba(59, 130, 246, 0.1);
  display: block; width: 100%; padding: 0.5rem 0.75rem;
  font-size: 1rem; line-height: 1.5; color: var(--w-gray-900); background-color: var(--w-white);
  border: 1px solid var(--w-input-border); border-radius: var(--w-input-radius);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.form-input:focus-visible, .form-textarea:focus-visible, .form-select:focus-visible, .form-control:focus-visible { outline: none; border-color: var(--w-primary-500); box-shadow: 0 0 0 3px var(--w-input-focus-ring); }
.form-input::placeholder, .form-textarea::placeholder, .form-control::placeholder { color: var(--w-gray-400); }
.form-input:disabled, .form-textarea:disabled, .form-select:disabled, .form-control:disabled { background-color: var(--w-gray-100); cursor: not-allowed; opacity: 0.7; }
.form-textarea, textarea.form-control { min-height: 100px; resize: vertical; }
.form-select, select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 0.5rem center; background-repeat: no-repeat; background-size: 1.5em; padding-right: 2.5rem; }
.form-checkbox, .form-radio { display: flex; align-items: center; cursor: pointer; }
.form-checkbox input, .form-radio input { width: 1rem; height: 1rem; margin-right: 0.5rem; accent-color: var(--w-primary-600); }
.checkbox-horizontal, .radio-horizontal { display: flex; flex-wrap: wrap; gap: 1rem; }
.checkbox-vertical, .radio-vertical { display: flex; flex-direction: column; gap: 0.5rem; }
.form-switch { display: flex; align-items: center; cursor: pointer; }
.form-switch input { appearance: none; width: 2.5rem; height: 1.25rem; background-color: var(--w-gray-300); border-radius: 9999px; position: relative; cursor: pointer; transition: background-color 200ms ease; }
.form-switch input::before { content: ''; position: absolute; top: 2px; left: 2px; width: 1rem; height: 1rem; background-color: var(--w-white); border-radius: 50%; transition: transform 200ms ease; box-shadow: var(--w-shadow-sm); }
.form-switch input:checked { background-color: var(--w-primary-600); }
.form-switch input:checked::before { transform: translateX(1.25rem); }
.form-switch span { margin-left: 0.75rem; font-size: 0.875rem; color: var(--w-gray-700); }
.form-error { display: block; margin-top: 0.25rem; font-size: 0.875rem; color: var(--w-danger-600); }
.form-hint { display: block; margin-top: 0.25rem; font-size: 0.875rem; color: var(--w-gray-500); }
.input-group { display: flex; }
.input-group .form-input { flex: 1; border-radius: 0; }
.input-group .form-input:first-child { border-top-left-radius: var(--w-rounded-md); border-bottom-left-radius: var(--w-rounded-md); }
.input-group .form-input:last-child { border-top-right-radius: var(--w-rounded-md); border-bottom-right-radius: var(--w-rounded-md); }
.form-control-sm { padding: 0.375rem 0.625rem; font-size: 0.875rem; line-height: 1.4; }
.form-control-lg { padding: 0.625rem 1rem; font-size: 1.125rem; line-height: 1.6; }
.form-control.is-valid { border-color: var(--w-success-500, #22c55e); }
.form-control.is-valid:focus-visible { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15); }
.form-control.is-invalid { border-color: var(--w-danger-500, #ef4444); }
.form-control.is-invalid:focus-visible { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); }
.invalid-feedback { display: block; margin-top: 0.25rem; font-size: 0.8125rem; color: var(--w-danger-600, #dc2626); }
.form-check { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; }
.form-check input[type="checkbox"], .form-check input[type="radio"] { width: 1rem; height: 1rem; accent-color: var(--w-primary-600); }

/* --- Cards --- */
.card {
  --w-card-radius: var(--w-rounded-lg);
  --w-card-border: 1px solid var(--w-gray-200);
  --w-card-shadow: none;
  background-color: var(--w-white); border: var(--w-card-border);
  border-radius: var(--w-card-radius); box-shadow: var(--w-card-shadow);
}
.card-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--w-gray-200); background-color: var(--w-gray-50); }
.card-title { font-size: 1.125rem; font-weight: 600; color: var(--w-gray-900); margin: 0; }
.card-subtitle { font-size: 0.875rem; color: var(--w-gray-500); margin-top: 0.25rem; }
.card-body { padding: 1.5rem; }
.card-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--w-gray-200); background-color: var(--w-gray-50); }
.card-image { width: 100%; height: auto; display: block; }
.card-image-top { border-radius: var(--w-card-radius) var(--w-card-radius) 0 0; }
.card-sm .card-header { padding: 0.75rem 1rem; } .card-sm .card-body { padding: 1rem; } .card-sm .card-footer { padding: 0.75rem 1rem; }
.card-lg .card-header { padding: 1.25rem 2rem; } .card-lg .card-body { padding: 2rem; } .card-lg .card-footer { padding: 1.25rem 2rem; }
.card-elevated { --w-card-border: none; --w-card-shadow: var(--w-shadow-lg); }
.card-flat { --w-card-border: none; background-color: var(--w-gray-50); }
.card-bordered { border-width: 2px; }
.card-interactive { transition: all 200ms ease; cursor: pointer; }
.card-interactive:hover { transform: translateY(-2px); box-shadow: var(--w-shadow-lg); }
.card-horizontal { display: flex; flex-direction: row; }
.card-horizontal .card-image { width: 200px; min-width: 200px; height: 100%; object-fit: cover; border-radius: var(--w-card-radius) 0 0 var(--w-card-radius); }
.card-horizontal .card-body { flex: 1; }
.card-primary { border-color: var(--w-primary-200); }
.card-primary .card-header { background-color: var(--w-primary-50); border-bottom-color: var(--w-primary-200); }
.card-success { border-color: var(--w-success-500); }
.card-success .card-header { background-color: var(--w-success-50); border-bottom-color: var(--w-success-500); }
.card-warning { border-color: var(--w-warning-500); }
.card-warning .card-header { background-color: var(--w-warning-50); border-bottom-color: var(--w-warning-500); }
.card-danger { border-color: var(--w-danger-500); }
.card-danger .card-header { background-color: var(--w-danger-50); border-bottom-color: var(--w-danger-500); }
.post-card .card-title a { color: inherit; text-decoration: none; }
.post-card .card-title a:hover { color: var(--w-primary-600); }

/* --- Navigation --- */
.navigation-top { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; background-color: var(--w-white); border-bottom: 1px solid var(--w-gray-200); }
.navigation-top .nav-brand { font-size: 1.25rem; font-weight: 700; color: var(--w-gray-900); text-decoration: none; }
.navigation-top .nav-links { display: flex; align-items: center; gap: 1.5rem; }
.navigation-top .nav-link { color: var(--w-gray-600); text-decoration: none; font-weight: 500; transition: color 200ms ease; }
.navigation-top .nav-link:hover { color: var(--w-primary-600); }
.navigation-top .nav-link.active { color: var(--w-primary-600); }
.navigation-top-sticky { position: sticky; top: 0; z-index: var(--w-z-sticky); }
.navigation-left { display: flex; flex-direction: column; width: 256px; min-height: 100vh; padding: 1rem; background-color: var(--w-gray-50); border-right: 1px solid var(--w-gray-200); }
.navigation-left .nav-brand { padding: 1rem; margin-bottom: 1.5rem; font-size: 1.25rem; font-weight: 700; color: var(--w-gray-900); }
.navigation-left .nav-section { margin-bottom: 1.5rem; }
.navigation-left .nav-section-title { padding: 0.5rem 1rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--w-gray-500); }
.navigation-left .nav-item { display: flex; align-items: center; padding: 0.5rem 1rem; border-radius: var(--w-rounded-md); color: var(--w-gray-700); text-decoration: none; font-weight: 500; transition: all 200ms ease; }
.navigation-left .nav-item:hover { background-color: var(--w-gray-100); color: var(--w-gray-900); }
.navigation-left .nav-item.active { background-color: var(--w-primary-50); color: var(--w-primary-700); }
.navigation-tabs { display: flex; border-bottom: 1px solid var(--w-gray-200); }
.navigation-tabs .tab { padding: 0.75rem 1rem; font-weight: 500; color: var(--w-gray-500); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 200ms ease; }
.navigation-tabs .tab:hover { color: var(--w-gray-700); border-bottom-color: var(--w-gray-300); }
.navigation-tabs .tab.active { color: var(--w-primary-600); border-bottom-color: var(--w-primary-600); }
.navigation-breadcrumb { display: flex; align-items: center; padding: 0.75rem 0; font-size: 0.875rem; }
.navigation-breadcrumb .breadcrumb-item { color: var(--w-gray-500); text-decoration: none; }
.navigation-breadcrumb .breadcrumb-item:hover { color: var(--w-primary-600); }
.navigation-breadcrumb .breadcrumb-separator { margin: 0 0.5rem; color: var(--w-gray-400); }
.navigation-breadcrumb .breadcrumb-current { color: var(--w-gray-900); font-weight: 500; }
.navigation-pagination { display: flex; align-items: center; gap: 0.25rem; }
.navigation-pagination .page-link { display: flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; padding: 0.5rem; border-radius: var(--w-rounded-md); color: var(--w-gray-700); text-decoration: none; font-weight: 500; transition: all 200ms ease; }
.navigation-pagination .page-link:hover { background-color: var(--w-gray-100); }
.navigation-pagination .page-link.active { background-color: var(--w-primary-600); color: var(--w-white); }

/* --- Jumbo / Hero --- */
.jumbo { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 1.5rem; text-align: center; background-color: var(--w-gray-50); }
.jumbo-content { max-width: 1024px; margin: 0 auto; }
.jumbo-title { font-size: 2.25rem; font-weight: 700; line-height: 1.25; color: var(--w-gray-900); margin-bottom: 1rem; text-wrap: balance; }
.jumbo-subtitle { font-size: 1.25rem; color: var(--w-gray-600); margin-bottom: 2rem; max-width: 42rem; margin-left: auto; margin-right: auto; }
.jumbo-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.jumbo-sm { padding: 2rem 1.5rem; }
.jumbo-sm .jumbo-title { font-size: 1.5rem; }
.jumbo-lg { padding: 6rem 1.5rem; min-height: 60vh; }
.jumbo-lg .jumbo-title { font-size: 3rem; }
.jumbo-primary { background-color: var(--w-primary-600); color: var(--w-white); }
.jumbo-primary .jumbo-title { color: var(--w-white); }
.jumbo-primary .jumbo-subtitle { color: var(--w-primary-100); }
.jumbo-dark { background-color: var(--w-gray-900); color: var(--w-white); }
.jumbo-dark .jumbo-title { color: var(--w-white); }
.jumbo-dark .jumbo-subtitle { color: var(--w-gray-400); }

/* --- Tables --- */
.table {
  --w-table-stripe-bg: var(--w-gray-50);
  --w-table-hover-bg: var(--w-gray-100);
  width: 100%; border-collapse: collapse; font-size: 0.875rem;
}
.table th, .table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--w-gray-200); }
.table th { font-weight: 600; color: var(--w-gray-700); background-color: var(--w-gray-50); }
.table td { color: var(--w-gray-900); }
.table-striped tbody tr:nth-child(odd) { background-color: var(--w-table-stripe-bg); }
.table-hover tbody tr:hover { background-color: var(--w-table-hover-bg); }
.table-container { overflow-x: auto; border: 1px solid var(--w-gray-200); border-radius: var(--w-rounded-lg); }
.table-container .table { margin: 0; }
.table-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
.table-status { display: inline-flex; align-items: center; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; border-radius: 9999px; }
.table-status-success { background-color: var(--w-success-50); color: var(--w-success-700); }
.table-status-warning { background-color: var(--w-warning-50); color: var(--w-warning-700); }
.table-status-danger { background-color: var(--w-danger-50); color: var(--w-danger-700); }

/* --- Alerts --- */
.alert {
  --w-alert-radius: var(--w-rounded-lg);
  --w-alert-padding: 1rem;
  display: flex; padding: var(--w-alert-padding); border-radius: var(--w-alert-radius); font-size: 0.875rem;
}
.alert-icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-right: 0.75rem; }
.alert-content { flex: 1; }
.alert-title { font-weight: 600; margin-bottom: 0.25rem; }
.alert-description { margin: 0; }
.alert-info { background-color: var(--w-primary-50); color: var(--w-primary-800); border: 1px solid var(--w-primary-200); }
.alert-success { background-color: var(--w-success-50); color: var(--w-success-700); border: 1px solid rgba(34, 197, 94, 0.2); }
.alert-warning { background-color: var(--w-warning-50); color: var(--w-warning-700); border: 1px solid rgba(245, 158, 11, 0.2); }
.alert-danger { background-color: var(--w-danger-50); color: var(--w-danger-700); border: 1px solid rgba(239, 68, 68, 0.2); }
.alert-dismissible { position: relative; padding-right: 3rem; }
.alert-close { position: absolute; top: 0.75rem; right: 0.75rem; padding: 0.25rem; background: none; border: none; cursor: pointer; color: currentColor; opacity: 0.5; transition: opacity 200ms ease; border-radius: var(--w-rounded); }
.alert-close:hover { opacity: 1; background-color: rgba(0, 0, 0, 0.1); }
.alert-sm { --w-alert-padding: 0.75rem; font-size: 0.8125rem; }
.alert-lg { --w-alert-padding: 1.25rem; font-size: 1rem; }
.callout { padding: 1rem 1.5rem; border-left: 4px solid var(--w-gray-300); background-color: var(--w-gray-50); border-radius: 0 0.25rem 0.25rem 0; }
.callout-title { font-weight: 600; margin-bottom: 0.5rem; }
.callout-info { border-left-color: var(--w-primary-500); background-color: var(--w-primary-50); }
.callout-success { border-left-color: var(--w-success-500); background-color: var(--w-success-50); }
.callout-warning { border-left-color: var(--w-warning-500); background-color: var(--w-warning-50); }
.callout-danger { border-left-color: var(--w-danger-500); background-color: var(--w-danger-50); }

/* --- Badges --- */
.badge { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; font-size: 0.75rem; font-weight: 500; line-height: 1.5; border-radius: 9999px; white-space: nowrap; }
.badge-sm { padding: 0.0625rem 0.375rem; font-size: 0.6875rem; }
.badge-lg { padding: 0.25rem 0.75rem; font-size: 0.875rem; }
.badge-primary { background-color: var(--w-primary-100); color: var(--w-primary-700); }
.badge-secondary { background-color: var(--w-gray-100); color: var(--w-gray-700); }
.badge-success { background-color: var(--w-success-50); color: var(--w-success-700); }
.badge-warning { background-color: var(--w-warning-50); color: var(--w-warning-700); }
.badge-danger { background-color: var(--w-danger-50); color: var(--w-danger-700); }
.badge-info { background-color: var(--w-primary-50); color: var(--w-primary-600); }
.badge-outline { background-color: transparent; border: 1px solid currentColor; }
.badge-outline-primary { color: var(--w-primary-600); border-color: var(--w-primary-600); }
.badge-outline-secondary { color: var(--w-gray-600); border-color: var(--w-gray-400); }
.badge-outline-success { color: var(--w-success-600); border-color: var(--w-success-600); }
.badge-outline-warning { color: var(--w-warning-600); border-color: var(--w-warning-500); }
.badge-outline-danger { color: var(--w-danger-600); border-color: var(--w-danger-600); }
.badge-solid-primary { background-color: var(--w-primary-600); color: var(--w-white); }
.badge-solid-secondary { background-color: var(--w-gray-600); color: var(--w-white); }
.badge-solid-success { background-color: var(--w-success-600); color: var(--w-white); }
.badge-solid-warning { background-color: var(--w-warning-500); color: var(--w-white); }
.badge-solid-danger { background-color: var(--w-danger-600); color: var(--w-white); }
.badge-rounded { border-radius: var(--w-rounded-md); }
.badge-dot { width: 0.5rem; height: 0.5rem; padding: 0; border-radius: 50%; }
.badge-dot-primary { background-color: var(--w-primary-500); }
.badge-dot-success { background-color: var(--w-success-500); }
.badge-dot-warning { background-color: var(--w-warning-500); }
.badge-dot-danger { background-color: var(--w-danger-500); }

/* --- Modals --- */
.modal-backdrop {
  --w-modal-backdrop: rgba(0, 0, 0, 0.5);
  position: fixed; inset: 0; background-color: var(--w-modal-backdrop);
  z-index: var(--w-z-modal-backdrop); display: flex; align-items: center; justify-content: center;
  padding: 1rem; opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 200ms ease;
}
.modal-backdrop.active { opacity: 1; visibility: visible; }
.modal-backdrop-blur { --w-modal-backdrop: rgba(0, 0, 0, 0.3); backdrop-filter: blur(8px); }
.modal {
  --w-modal-radius: var(--w-rounded-xl);
  --w-modal-shadow: var(--w-shadow-xl);
  --w-modal-max-width: 500px;
  background-color: var(--w-white); border-radius: var(--w-modal-radius);
  box-shadow: var(--w-modal-shadow); max-width: var(--w-modal-max-width); width: 100%;
  max-height: calc(100vh - 2rem); display: flex; flex-direction: column;
  transform: scale(0.95) translateY(-10px); transition: transform 200ms ease;
}
.modal-backdrop.active .modal { transform: scale(1) translateY(0); }
.modal-sm { --w-modal-max-width: 360px; } .modal-lg { --w-modal-max-width: 720px; } .modal-xl { --w-modal-max-width: 960px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid var(--w-gray-200); }
.modal-title { font-size: 1.125rem; font-weight: 600; color: var(--w-gray-900); margin: 0; }
.modal-close { padding: 0.5rem; background: none; border: none; cursor: pointer; color: var(--w-gray-400); border-radius: var(--w-rounded); transition: all 200ms ease; }
.modal-close:hover { background-color: var(--w-gray-100); color: var(--w-gray-600); }
.modal-body { padding: 1.5rem; overflow-y: auto; flex: 1; }
.modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--w-gray-200); }

/* Drawer (slide-in panel) */
.drawer-backdrop { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.5); z-index: var(--w-z-modal-backdrop); opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 200ms ease; }
.drawer-backdrop.active { opacity: 1; visibility: visible; }
.drawer { position: fixed; background-color: var(--w-white); box-shadow: var(--w-shadow-xl); display: flex; flex-direction: column; transition: transform 300ms ease; z-index: var(--w-z-modal); }
.drawer-right { top: 0; right: 0; bottom: 0; width: 400px; max-width: 100%; transform: translateX(100%); }
.drawer-left { top: 0; left: 0; bottom: 0; width: 400px; max-width: 100%; transform: translateX(-100%); }
.drawer-top { top: 0; left: 0; right: 0; height: 300px; max-height: 100%; transform: translateY(-100%); }
.drawer-bottom { bottom: 0; left: 0; right: 0; height: 300px; max-height: 100%; transform: translateY(100%); }
.drawer-backdrop.active .drawer-right { transform: translateX(0); }
.drawer-backdrop.active .drawer-left { transform: translateX(0); }
.drawer-backdrop.active .drawer-top { transform: translateY(0); }
.drawer-backdrop.active .drawer-bottom { transform: translateY(0); }
.drawer-sm { width: 280px; } .drawer-lg { width: 560px; } .drawer-xl { width: 720px; }
.drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid var(--w-gray-200); }
.drawer-title { font-size: 1.125rem; font-weight: 600; color: var(--w-gray-900); margin: 0; }
.drawer-close { padding: 0.5rem; background: none; border: none; cursor: pointer; color: var(--w-gray-400); border-radius: var(--w-rounded); transition: all 200ms ease; }
.drawer-close:hover { background-color: var(--w-gray-100); color: var(--w-gray-600); }
.drawer-body { padding: 1.5rem; overflow-y: auto; flex: 1; }
.drawer-footer { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--w-gray-200); }

/* --- Avatars --- */
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; font-size: 0.875rem; border-radius: 9999px; overflow: hidden; background: var(--w-gray-200); color: var(--w-gray-600); font-weight: 600; flex-shrink: 0; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-xs { width: 1.5rem; height: 1.5rem; font-size: 0.625rem; }
.avatar-sm { width: 2rem; height: 2rem; font-size: 0.75rem; }
.avatar-lg { width: 3rem; height: 3rem; font-size: 1rem; }
.avatar-xl { width: 4rem; height: 4rem; font-size: 1.25rem; }
.avatar-2xl { width: 5rem; height: 5rem; font-size: 1.5rem; }
.avatar-square { border-radius: var(--w-rounded-lg); }
.avatar-group { display: flex; }
.avatar-group .avatar { margin-left: -0.5rem; border: 2px solid white; }
.avatar-group .avatar:first-child { margin-left: 0; }
.avatar-status { position: relative; }
.avatar-status::after { content: ''; position: absolute; bottom: 0; right: 0; width: 0.625rem; height: 0.625rem; border-radius: 9999px; border: 2px solid white; background: var(--w-gray-400); }
.avatar-online::after { background: var(--w-success-600); }
.avatar-offline::after { background: var(--w-gray-400); }
.avatar-busy::after { background: var(--w-danger-600); }
.avatar-away::after { background: var(--w-warning-500); }

/* --- Empty States --- */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1.5rem; text-align: center; }
.empty-state-icon { font-size: 3rem; color: var(--w-gray-300); margin-bottom: 1rem; }
.empty-state-title { font-size: 1.125rem; font-weight: 600; color: var(--w-gray-700); margin-bottom: 0.5rem; }
.empty-state-description { font-size: 0.875rem; color: var(--w-gray-500); max-width: 24rem; margin-bottom: 1.5rem; }
.empty-state-action { margin-top: 0.5rem; }

/* --- Progress Bars --- */
.progress { width: 100%; height: 0.5rem; background: var(--w-gray-200); border-radius: 9999px; overflow: hidden; }
.progress-bar { height: 100%; border-radius: 9999px; background: var(--w-primary-600); transition: width 300ms ease; }
.progress-sm { height: 0.25rem; } .progress-lg { height: 0.75rem; } .progress-xl { height: 1rem; }
.progress-primary .progress-bar { background: var(--w-primary-600); }
.progress-success .progress-bar { background: var(--w-success-600); }
.progress-warning .progress-bar { background: var(--w-warning-500); }
.progress-danger .progress-bar { background: var(--w-danger-600); }
.progress-info .progress-bar { background: var(--w-primary-400); }
.progress-label { display: flex; justify-content: space-between; margin-bottom: 0.25rem; font-size: 0.875rem; color: var(--w-gray-600); }
.progress-striped .progress-bar { background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); background-size: 1rem 1rem; }

/* --- Spinners --- */
.spinner { display: inline-block; width: 1.5rem; height: 1.5rem; border: 2px solid var(--w-gray-200); border-top-color: var(--w-primary-600); border-radius: 9999px; animation: spin 0.6s linear infinite; }
.spinner-sm { width: 1rem; height: 1rem; }
.spinner-lg { width: 2rem; height: 2rem; }
.spinner-xl { width: 3rem; height: 3rem; border-width: 3px; }
.spinner-primary { border-top-color: var(--w-primary-600); }
.spinner-success { border-top-color: var(--w-success-600); }
.spinner-warning { border-top-color: var(--w-warning-500); }
.spinner-danger { border-top-color: var(--w-danger-600); }
.spinner-white { border-color: rgba(255,255,255,0.3); border-top-color: white; }
.spinner-dots { display: inline-flex; gap: 0.25rem; }
.spinner-dots::before, .spinner-dots::after, .spinner-dots span { content: ''; display: block; width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--w-primary-600); animation: pulse-dot 1.4s ease-in-out infinite; }
.spinner-dots::after { animation-delay: 0.2s; }
.spinner-dots span { animation-delay: 0.4s; }
@keyframes pulse-dot { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }

/* --- Dropdowns --- */
.dropdown { position: relative; display: inline-block; }
.dropdown summary { list-style: none; cursor: pointer; }
.dropdown summary::-webkit-details-marker { display: none; }
.dropdown-menu { position: absolute; top: 100%; left: 0; z-index: var(--w-z-dropdown); min-width: 12rem; padding: 0.25rem 0; margin-top: 0.25rem; background: white; border: 1px solid var(--w-gray-200); border-radius: var(--w-rounded-lg); box-shadow: var(--w-shadow-lg); }
.dropdown-right .dropdown-menu { left: auto; right: 0; }
.dropdown-item { display: block; width: 100%; padding: 0.5rem 0.75rem; font-size: 0.875rem; color: var(--w-gray-700); text-decoration: none; cursor: pointer; border: none; background: none; text-align: left; }
.dropdown-item:hover { background: var(--w-gray-100); color: var(--w-gray-900); }
.dropdown-item-danger { color: var(--w-danger-600); }
.dropdown-item-danger:hover { background: var(--w-danger-600); color: white; }
.dropdown-divider { height: 0; margin: 0.25rem 0; border-top: 1px solid var(--w-gray-200); }
.dropdown-header { padding: 0.5rem 0.75rem; font-size: 0.75rem; font-weight: 600; color: var(--w-gray-500); text-transform: uppercase; }

/* --- Tooltips --- */
[data-tooltip] { position: relative; }
[data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 0.5rem); left: 50%; transform: translateX(-50%); padding: 0.375rem 0.625rem; font-size: 0.75rem; font-weight: 500; color: white; background: var(--w-gray-800); border-radius: var(--w-rounded-md); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 150ms ease; z-index: var(--w-z-tooltip); }
[data-tooltip]:hover::after { opacity: 1; }
[data-tooltip-position="bottom"]::after { bottom: auto; top: calc(100% + 0.5rem); }
[data-tooltip-position="left"]::after { bottom: auto; top: 50%; left: auto; right: calc(100% + 0.5rem); transform: translateY(-50%); }
[data-tooltip-position="right"]::after { bottom: auto; top: 50%; left: calc(100% + 0.5rem); transform: translateY(-50%); }

/* --- Tabs (CSS-only, radio-based, zero JS) --- */
/* Pattern: .tab-group > .tab-list (with labels wrapping radios) + .tab-panels */
.tab-group .tab-list { display: flex; border-bottom: 2px solid var(--w-gray-200); margin-bottom: 1rem; }
.tab-group .tab { padding: 0.625rem 1rem; font-size: 0.875rem; font-weight: 500; color: var(--w-gray-600); cursor: pointer; border: none; background: none; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color 150ms ease, border-color 150ms ease; display: inline-flex; align-items: center; }
.tab-group .tab input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.tab-group .tab:hover { color: var(--w-gray-900); }
.tab-group .tab:has(input:checked) { color: var(--w-primary-600); border-bottom-color: var(--w-primary-600); }
.tab-group .tab-panels { display: grid; }
.tab-group .tab-panels > .tab-panel { grid-column: 1; grid-row: 1; visibility: hidden; }
/* Reveal the nth panel when the nth tab radio is checked. Supports up to 8 tabs. */
.tab-group:has(.tab-list > .tab:nth-child(1) input:checked) .tab-panels > .tab-panel:nth-child(1),
.tab-group:has(.tab-list > .tab:nth-child(2) input:checked) .tab-panels > .tab-panel:nth-child(2),
.tab-group:has(.tab-list > .tab:nth-child(3) input:checked) .tab-panels > .tab-panel:nth-child(3),
.tab-group:has(.tab-list > .tab:nth-child(4) input:checked) .tab-panels > .tab-panel:nth-child(4),
.tab-group:has(.tab-list > .tab:nth-child(5) input:checked) .tab-panels > .tab-panel:nth-child(5),
.tab-group:has(.tab-list > .tab:nth-child(6) input:checked) .tab-panels > .tab-panel:nth-child(6),
.tab-group:has(.tab-list > .tab:nth-child(7) input:checked) .tab-panels > .tab-panel:nth-child(7),
.tab-group:has(.tab-list > .tab:nth-child(8) input:checked) .tab-panels > .tab-panel:nth-child(8) { visibility: visible; }
/* Pill variant */
.tab-group.tabs-pills .tab-list { border-bottom: none; gap: 0.25rem; }
.tab-group.tabs-pills .tab { border-bottom: none; border-radius: var(--w-rounded-md); }
.tab-group.tabs-pills .tab:has(input:checked) { background: var(--w-primary-100); color: var(--w-primary-700); border-bottom-color: transparent; }

/* --- Skeleton Loading --- */
.skeleton { background: linear-gradient(90deg, var(--w-gray-200) 25%, var(--w-gray-100) 50%, var(--w-gray-200) 75%); background-size: 200% 100%; animation: skeleton-loading 1.5s ease-in-out infinite; border-radius: var(--w-rounded-md); }
.skeleton-text { height: 0.875rem; margin-bottom: 0.5rem; }
.skeleton-text:last-child { width: 60%; }
.skeleton-title { height: 1.25rem; width: 40%; margin-bottom: 0.75rem; }
.skeleton-avatar { width: 2.5rem; height: 2.5rem; border-radius: 9999px; }
.skeleton-image { width: 100%; height: 12rem; }
.skeleton-button { width: 6rem; height: 2.25rem; border-radius: var(--w-rounded-md); }
@keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* --- Prose (typography container) --- */
.prose { max-width: 65ch; }
.prose p { margin-bottom: 1.25em; line-height: 1.75; }
.prose h2 { margin-top: 2em; margin-bottom: 0.75em; font-size: 1.5rem; font-weight: 700; }
.prose h3 { margin-top: 1.6em; margin-bottom: 0.6em; font-size: 1.25rem; font-weight: 600; }
.prose ul, .prose ol { margin-bottom: 1.25em; padding-left: 1.5em; }
.prose li { margin-bottom: 0.5em; }
.prose code { font-size: 0.875em; background-color: var(--w-gray-100); padding: 0.125em 0.25em; border-radius: 0.25rem; }

/* --- Responsive overrides --- */
@media (max-width: 768px) {
  .jumbo-lg .jumbo-title { font-size: 2.25rem; }
  .navigation-top .nav-links { display: none; }
  .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: 1fr; }
}

/* --- Dark mode component overrides --- */
@media (prefers-color-scheme: dark) {
  :root:not(.light) .card { background-color: var(--w-gray-800); border-color: var(--w-gray-700); }
  :root:not(.light) .card-header, :root:not(.light) .card-footer { background-color: var(--w-gray-800); border-color: var(--w-gray-700); }
  :root:not(.light) .modal { background-color: var(--w-gray-800); }
  :root:not(.light) .modal-header, :root:not(.light) .modal-footer { border-color: var(--w-gray-700); }
  :root:not(.light) .drawer { background-color: var(--w-gray-800); }
  :root:not(.light) .form-input, :root:not(.light) .form-textarea, :root:not(.light) .form-select { background-color: var(--w-gray-800); border-color: var(--w-gray-600); color: var(--w-gray-100); }
  :root:not(.light) .table th { background-color: var(--w-gray-800); color: var(--w-gray-300); }
  :root:not(.light) .table td { color: var(--w-gray-200); }
  :root:not(.light) .table th, :root:not(.light) .table td { border-color: var(--w-gray-700); }
  :root:not(.light) .navigation-top { background-color: var(--w-gray-800); border-color: var(--w-gray-700); }
  :root:not(.light) .dropdown-menu { background: var(--w-gray-800); border-color: var(--w-gray-700); }
  :root:not(.light) .dropdown-item:hover { background: var(--w-gray-700); }
  :root:not(.light) .w-accordion-header { background: var(--w-gray-800); border-color: var(--w-gray-700); }
  :root:not(.light) .callout { background-color: var(--w-gray-800); }
}
:root.dark .card { background-color: var(--w-gray-800); border-color: var(--w-gray-700); }
:root.dark .card-header, :root.dark .card-footer { background-color: var(--w-gray-800); border-color: var(--w-gray-700); }
:root.dark .modal { background-color: var(--w-gray-800); }
:root.dark .modal-header, :root.dark .modal-footer { border-color: var(--w-gray-700); }
:root.dark .drawer { background-color: var(--w-gray-800); }
:root.dark .form-input, :root.dark .form-textarea, :root.dark .form-select, :root.dark .form-control { background-color: var(--w-gray-800); border-color: var(--w-gray-600); color: var(--w-gray-100); }
:root.dark .table th { background-color: var(--w-gray-800); color: var(--w-gray-300); }
:root.dark .table td { color: var(--w-gray-200); }
:root.dark .table th, :root.dark .table td { border-color: var(--w-gray-700); }
:root.dark .navigation-top { background-color: var(--w-gray-800); border-color: var(--w-gray-700); }
:root.dark .dropdown-menu { background: var(--w-gray-800); border-color: var(--w-gray-700); }
:root.dark .dropdown-item:hover { background: var(--w-gray-700); }
:root.dark .w-accordion-header { background: var(--w-gray-800); border-color: var(--w-gray-700); }
:root.dark .callout { background-color: var(--w-gray-800); }

/* --- Form Validation States --- */
.w-invalid {
  border-color: var(--w-danger-500, #ef4444) !important;
  box-shadow: 0 0 0 1px var(--w-danger-500, #ef4444);
}
.w-invalid:focus {
  box-shadow: 0 0 0 2px var(--w-danger-200, #fecaca);
}
.w-field-error {
  color: var(--w-danger-600, #dc2626);
  font-size: 0.8125rem;
  margin-top: 0.25rem;
  line-height: 1.4;
}
:root.dark .w-invalid {
  border-color: var(--w-danger-400, #f87171) !important;
  box-shadow: 0 0 0 1px var(--w-danger-400, #f87171);
}
:root.dark .w-field-error {
  color: var(--w-danger-400, #f87171);
}

} /* end @layer components */

/* ================================================================
   INTERACTIONS LAYER — native HTML state, no client-side JS
   ================================================================ */
@layer interactions {

/* Show/Hide */
.w-hidden { display: none !important; }

/* Accordion — built on native <details>/<summary>, zero JS */
.w-accordion { margin-bottom: 0.5rem; }
.w-accordion-header { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: var(--w-gray-50); border: 1px solid var(--w-gray-200); border-radius: var(--w-rounded); transition: background 0.2s; }
.w-accordion-header::-webkit-details-marker { display: none; }
.w-accordion-header:hover { background: var(--w-gray-100); }
.w-accordion-header .w-accordion-icon { transition: transform 0.3s; }
.w-accordion[open] .w-accordion-header .w-accordion-icon { transform: rotate(180deg); }
.w-accordion-content { padding: 0 1rem; }

/* Loading state for containers */
.w-loading { opacity: 0.6; pointer-events: none; }

/* Example section patterns (demo pages) */
.example-section { margin-bottom: 3rem; }
.example-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; }
.example-description { color: var(--w-gray-600); margin-bottom: 1rem; }
.example-container { border: 1px solid var(--w-gray-200); border-radius: var(--w-rounded-lg); overflow: hidden; }
.example-demo { padding: 1.5rem; }
.example-code { display: block; padding: 1rem 1.5rem; background: var(--w-gray-50); border-top: 1px solid var(--w-gray-200); font-size: 0.8125rem; line-height: 1.6; white-space: pre-wrap; overflow-x: auto; }

/* ===== Pagination ===== */
.what-pagination { margin: 1.5rem 0; }
.what-pagination ul { display: flex; gap: 0.25rem; list-style: none; padding: 0; margin: 0; justify-content: center; align-items: center; }
.what-pagination li a,
.what-pagination li span { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 0.5rem; border-radius: var(--w-rounded-md); font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: all 0.15s ease; }
.what-pagination li a { color: var(--w-gray-700); background: var(--w-gray-100); border: 1px solid var(--w-gray-200); }
.what-pagination li a:hover { background: var(--w-primary-50, #eff6ff); border-color: var(--w-primary-300, #93c5fd); color: var(--w-primary-700, #1d4ed8); }
/* State classes sit on <span>s; the li+element compound out-specifies the
   base ".what-pagination li span" rule without !important, so unlayered
   user CSS can still recolor these. */
.what-pagination li span.what-pagination-active { background: var(--w-primary-600, #2563eb); color: #fff; border: 1px solid var(--w-primary-600, #2563eb); }
.what-pagination li span.what-pagination-disabled { color: var(--w-gray-400); background: var(--w-gray-50); cursor: not-allowed; border: 1px solid var(--w-gray-200); }
.what-pagination li span.what-pagination-ellipsis { color: var(--w-gray-400); cursor: default; border: none; background: transparent; }

@media (prefers-color-scheme: dark) {
  .what-pagination li a { color: var(--w-gray-300); background: var(--w-gray-800); border-color: var(--w-gray-700); }
  .what-pagination li a:hover { background: var(--w-gray-700); border-color: var(--w-primary-400); color: var(--w-primary-300); }
  .what-pagination li span.what-pagination-active { background: var(--w-primary-500); border-color: var(--w-primary-500); }
  .what-pagination li span.what-pagination-disabled { color: var(--w-gray-600); background: var(--w-gray-900); border-color: var(--w-gray-800); }
  .what-pagination li span.what-pagination-ellipsis { color: var(--w-gray-600); }
}

} /* end @layer interactions */

/*! what:minimal-cut-end */
/* ================================================================
   PAGE SOURCE VIEWER — Dark code view for "view source" toggle
   ================================================================ */
.page-source {
  background: #1e1e2e;
  color: #cdd6f4;
  padding: 1.5rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  font-size: 0.8125rem;
  line-height: 1.7;
  font-family: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
  white-space: pre;
  border: 1px solid #313244;
  margin: 0;
}
.page-source code {
  background: transparent;
  padding: 0;
  font-size: inherit;
  color: inherit;
}
@media (prefers-color-scheme: dark) {
  .page-source {
    background: #11111b;
    border-color: #1e1e2e;
  }
}

/* Coming Soon */
coming-soon {
  display: block;
  position: relative;
  border: 1.5px dashed #800020;
  border-radius: 0.5rem;
  padding: 1.25rem;
  margin-top: 0.5rem;
  opacity: 0.65;
}
coming-soon::before {
  content: "Coming Soon";
  position: absolute;
  top: -0.65rem;
  left: 0.75rem;
  background: white;
  color: #800020;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 0.4rem;
}
@media (prefers-color-scheme: dark) {
  coming-soon { border-color: #b03060; }
  coming-soon::before { background: #1a1a2e; color: #d4607a; }
}

/* Wire Status Indicator */
.w-wire-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--w-gray-500, #6b7280);
}
.w-wire-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--w-gray-400, #9ca3af);
  transition: background 0.3s;
}
.w-wire-status.connected .w-wire-dot {
  background: var(--w-green-500, #22c55e);
}
.w-wire-status:not([data-show-users="true"]) .w-wire-users { display: none; }