@ziyarago/ui 0.0.0-stage → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (119) hide show
  1. package/CHANGELOG.md +52 -0
  2. package/LICENSE +25 -0
  3. package/README.md +121 -2
  4. package/THIRD_PARTY_NOTICES.md +12 -0
  5. package/assets/3d/_sheet.png +0 -0
  6. package/assets/3d/archive.png +0 -0
  7. package/assets/3d/bag.png +0 -0
  8. package/assets/3d/cameraoff.png +0 -0
  9. package/assets/3d/comment.png +0 -0
  10. package/assets/3d/crowd.png +0 -0
  11. package/assets/3d/firstaid.png +0 -0
  12. package/assets/3d/flag.png +0 -0
  13. package/assets/3d/grain.png +0 -0
  14. package/assets/3d/guide.png +0 -0
  15. package/assets/3d/hotel.png +0 -0
  16. package/assets/3d/kaaba.png +0 -0
  17. package/assets/3d/logo.png +0 -0
  18. package/assets/3d/luggage.png +0 -0
  19. package/assets/3d/map.png +0 -0
  20. package/assets/3d/mosque.png +0 -0
  21. package/assets/3d/plane.png +0 -0
  22. package/assets/3d/profile.png +0 -0
  23. package/assets/3d/restaurant.png +0 -0
  24. package/assets/3d/ring360.png +0 -0
  25. package/assets/3d/shoes.png +0 -0
  26. package/assets/3d/star.png +0 -0
  27. package/assets/3d/store.png +0 -0
  28. package/assets/3d/taxi.png +0 -0
  29. package/assets/3d/threads.png +0 -0
  30. package/assets/3d/tour360.png +0 -0
  31. package/assets/3d/trash.png +0 -0
  32. package/assets/3d/umbrella.png +0 -0
  33. package/assets/3d/video.png +0 -0
  34. package/assets/3d/water.png +0 -0
  35. package/assets/brand/mark.png +0 -0
  36. package/assets/brand/ziyarago-logo-light.svg +21 -0
  37. package/assets/brand/ziyarago-logo.svg +21 -0
  38. package/assets/brand/ziyarago-mark-light.svg +13 -0
  39. package/assets/brand/ziyarago-mark.svg +13 -0
  40. package/assets/fonts/thmanyah/thmanyahsans-Black.otf +0 -0
  41. package/assets/fonts/thmanyah/thmanyahsans-Bold.otf +0 -0
  42. package/assets/fonts/thmanyah/thmanyahsans-Light.otf +0 -0
  43. package/assets/fonts/thmanyah/thmanyahsans-Medium.otf +0 -0
  44. package/assets/fonts/thmanyah/thmanyahsans-Regular.otf +0 -0
  45. package/assets/fonts/thmanyah/thmanyahserifdisplay-Black.otf +0 -0
  46. package/assets/fonts/thmanyah/thmanyahserifdisplay-Bold.otf +0 -0
  47. package/assets/fonts/thmanyah/thmanyahserifdisplay-Light.otf +0 -0
  48. package/assets/fonts/thmanyah/thmanyahserifdisplay-Medium.otf +0 -0
  49. package/assets/fonts/thmanyah/thmanyahserifdisplay-Regular.otf +0 -0
  50. package/assets/fonts/thmanyah/thmanyahseriftext-Black.otf +0 -0
  51. package/assets/fonts/thmanyah/thmanyahseriftext-Bold.otf +0 -0
  52. package/assets/fonts/thmanyah/thmanyahseriftext-Light.otf +0 -0
  53. package/assets/fonts/thmanyah/thmanyahseriftext-Medium.otf +0 -0
  54. package/assets/fonts/thmanyah/thmanyahseriftext-Regular.otf +0 -0
  55. package/dist/llms-full.txt +2293 -0
  56. package/dist/llms.txt +239 -0
  57. package/dist/manifest.json +10254 -0
  58. package/dist/style.css +1357 -0
  59. package/dist/tokens.css +48 -0
  60. package/package.json +118 -4
  61. package/src/catalog.js +4 -0
  62. package/src/core/components.js +124 -0
  63. package/src/core/components2.js +163 -0
  64. package/src/core/components3.js +35 -0
  65. package/src/core/components4.js +58 -0
  66. package/src/core/components6.js +48 -0
  67. package/src/core/components7.js +42 -0
  68. package/src/core/dialog.js +65 -0
  69. package/src/core/index.js +9 -0
  70. package/src/core/pages.js +51 -0
  71. package/src/meta/README.md +29 -0
  72. package/src/meta/actions.js +161 -0
  73. package/src/meta/data.js +327 -0
  74. package/src/meta/domain.js +212 -0
  75. package/src/meta/feedback.js +153 -0
  76. package/src/meta/forms.js +453 -0
  77. package/src/meta/groups.js +16 -0
  78. package/src/meta/index.js +14 -0
  79. package/src/meta/layout.js +159 -0
  80. package/src/meta/media.js +104 -0
  81. package/src/meta/navigation.js +99 -0
  82. package/src/meta/overlay.js +264 -0
  83. package/src/meta/pages.js +229 -0
  84. package/src/meta/templates.json +2422 -0
  85. package/src/meta/typography.js +58 -0
  86. package/src/nuxt/module.mjs +29 -0
  87. package/src/nuxt/plugin.mjs +9 -0
  88. package/src/react/index.js +31 -0
  89. package/src/styles/components.css +162 -0
  90. package/src/styles/components2.css +68 -0
  91. package/src/styles/components3.css +29 -0
  92. package/src/styles/components4.css +18 -0
  93. package/src/styles/components5.css +5 -0
  94. package/src/styles/components6.css +19 -0
  95. package/src/styles/components7.css +44 -0
  96. package/src/styles/components8.css +47 -0
  97. package/src/styles/effects.css +43 -0
  98. package/src/styles/fonts.css +17 -0
  99. package/src/styles/index.css +21 -0
  100. package/src/styles/sizes/actions.css +126 -0
  101. package/src/styles/sizes/data.css +161 -0
  102. package/src/styles/sizes/domain.css +35 -0
  103. package/src/styles/sizes/feedback.css +69 -0
  104. package/src/styles/sizes/forms.css +122 -0
  105. package/src/styles/sizes/layout.css +15 -0
  106. package/src/styles/sizes/media.css +28 -0
  107. package/src/styles/sizes/navigation.css +146 -0
  108. package/src/styles/sizes/overlay.css +79 -0
  109. package/src/styles/sizes/typography.css +12 -0
  110. package/src/styles/tokens.css +47 -0
  111. package/src/theme.js +52 -0
  112. package/src/vue/index.js +29 -0
  113. package/tokens/tokens.json +9 -0
  114. package/types/core.d.ts +4 -0
  115. package/types/nuxt.d.ts +11 -0
  116. package/types/react.d.ts +189 -0
  117. package/types/shared.d.ts +18 -0
  118. package/types/theme.d.ts +6 -0
  119. package/types/vue.d.ts +192 -0
package/dist/style.css ADDED
@@ -0,0 +1,1357 @@
1
+ /* @ziyarago/ui · generated by scripts/build.mjs — do not edit */
2
+ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
3
+
4
+ /* ./fonts.css */
5
+
6
+ /* Thmanyah — free incl. commercial, https://font.thmanyah.com. Files in assets/fonts/thmanyah. Adjust URLs to your bundler.
7
+ Thmanyah is visually heavier than Manrope at the same weight and has no 600 face. Weight ranges map the UI weights (300-900) so Arabic does not look bold:
8
+ 200-300 Light, 400-600 Regular, 700 Medium, 800 Bold, 900 Black. */
9
+ @font-face{font-family:'Thmanyah Sans';font-weight:200 300;src:url('../assets/fonts/thmanyah/thmanyahsans-Light.otf') format('opentype');font-display:swap}
10
+ @font-face{font-family:'Thmanyah Sans';font-weight:400 600;src:url('../assets/fonts/thmanyah/thmanyahsans-Regular.otf') format('opentype');font-display:swap}
11
+ @font-face{font-family:'Thmanyah Sans';font-weight:700;src:url('../assets/fonts/thmanyah/thmanyahsans-Medium.otf') format('opentype');font-display:swap}
12
+ @font-face{font-family:'Thmanyah Sans';font-weight:800;src:url('../assets/fonts/thmanyah/thmanyahsans-Bold.otf') format('opentype');font-display:swap}
13
+ @font-face{font-family:'Thmanyah Sans';font-weight:900;src:url('../assets/fonts/thmanyah/thmanyahsans-Black.otf') format('opentype');font-display:swap}
14
+ @font-face{font-family:'Thmanyah Serif Display';font-weight:200 300;src:url('../assets/fonts/thmanyah/thmanyahserifdisplay-Light.otf') format('opentype');font-display:swap}
15
+ @font-face{font-family:'Thmanyah Serif Display';font-weight:400 600;src:url('../assets/fonts/thmanyah/thmanyahserifdisplay-Regular.otf') format('opentype');font-display:swap}
16
+ @font-face{font-family:'Thmanyah Serif Display';font-weight:700;src:url('../assets/fonts/thmanyah/thmanyahserifdisplay-Medium.otf') format('opentype');font-display:swap}
17
+ @font-face{font-family:'Thmanyah Serif Display';font-weight:800;src:url('../assets/fonts/thmanyah/thmanyahserifdisplay-Bold.otf') format('opentype');font-display:swap}
18
+ @font-face{font-family:'Thmanyah Serif Text';font-weight:200 300;src:url('../assets/fonts/thmanyah/thmanyahseriftext-Light.otf') format('opentype');font-display:swap}
19
+ @font-face{font-family:'Thmanyah Serif Text';font-weight:400 600;src:url('../assets/fonts/thmanyah/thmanyahseriftext-Regular.otf') format('opentype');font-display:swap}
20
+ @font-face{font-family:'Thmanyah Serif Text';font-weight:700;src:url('../assets/fonts/thmanyah/thmanyahseriftext-Medium.otf') format('opentype');font-display:swap}
21
+ @font-face{font-family:'Thmanyah Serif Text';font-weight:800;src:url('../assets/fonts/thmanyah/thmanyahseriftext-Bold.otf') format('opentype');font-display:swap}
22
+
23
+
24
+ /* ./tokens.css */
25
+ /* @ziyarago/ui · tokens (OKLCH). Theme: [data-theme=dark|light] · Palette: [data-palette=gold|tamam] · Direction: dir=rtl */
26
+ :root,[data-palette="gold"]{--zg-brand:oklch(0.676 0.084 67.4);--zg-brand-hover:oklch(0.73 0.09 67.4);--zg-sky:oklch(0.703 0.09 229.6)}
27
+ [data-palette="tamam"]{--zg-brand:oklch(0.77 0.23 142);--zg-brand-hover:oklch(0.82 0.23 142);--zg-sky:oklch(0.72 0.1 200)}
28
+ :root,[data-theme="dark"]{--zg-pop:oklch(0.262 0.004 17.4);
29
+ --zg-on-brand:oklch(0.2 0.02 60);
30
+ --zg-brand-soft:color-mix(in oklch,var(--zg-brand) 22%,transparent);
31
+ --zg-brand-glow:color-mix(in oklch,var(--zg-brand) 40%,transparent);
32
+ --zg-brand-text:color-mix(in oklch,var(--zg-brand) 70%,white);
33
+ --zg-sky-text:oklch(0.8 0.08 226);
34
+ --zg-bg:oklch(0.216 0.003 17.4);
35
+ --zg-s1:oklch(1 0 0 / .055);--zg-s2:oklch(1 0 0 / .085);--zg-s3:oklch(1 0 0 / .13);
36
+ --zg-glass:oklch(0.235 0.006 40 / .92);
37
+ --zg-stroke:oklch(1 0 0 / .08);
38
+ --zg-text-1:oklch(0.97 0.004 70);--zg-text-2:oklch(0.82 0.008 70);--zg-text-3:oklch(0.66 0.01 70);
39
+ --zg-inv-bg:oklch(0.96 0.004 70);--zg-inv-fg:oklch(0.2 0.01 60);
40
+ --zg-green:oklch(0.76 0.15 150);--zg-amber:oklch(0.8 0.14 80);--zg-red:oklch(0.7 0.18 25);
41
+ --zg-rim:inset 0 1px 0 oklch(1 0 0 / .16),inset 0 0 0 1px oklch(1 0 0 / .07),inset 0 -1px 0 oklch(0 0 0 / .25);
42
+ --zg-shadow-1:0 8px 24px oklch(0 0 0 / .28);--zg-shadow-2:0 24px 64px oklch(0 0 0 / .5);
43
+ }
44
+ [data-theme="light"]{--zg-pop:oklch(0.985 0.003 70);
45
+ --zg-on-brand:oklch(0.2 0.02 60);
46
+ --zg-brand-text:oklch(0.45 0.07 65);
47
+ --zg-sky-text:oklch(0.48 0.08 230);
48
+ --zg-bg:oklch(0.919 0.007 67.6);
49
+ --zg-s1:oklch(1 0 0 / .62);--zg-s2:oklch(1 0 0 / .74);--zg-s3:oklch(1 0 0 / .88);
50
+ --zg-glass:oklch(0.975 0.004 70 / .94);
51
+ --zg-stroke:oklch(0.3 0.02 60 / .15);
52
+ --zg-text-1:oklch(0.2 0.01 60);--zg-text-2:oklch(0.36 0.012 60);--zg-text-3:oklch(0.47 0.012 60);
53
+ --zg-inv-bg:oklch(0.22 0.01 60);--zg-inv-fg:oklch(0.97 0.004 70);
54
+ --zg-green:oklch(0.5 0.14 150);--zg-amber:oklch(0.55 0.13 70);--zg-red:oklch(0.52 0.19 25);
55
+ --zg-rim:inset 0 1px 0 oklch(1 0 0 / .95),inset 0 0 0 1px oklch(1 0 0 / .45),0 0 0 1px oklch(0.3 0.02 60 / .13);
56
+ --zg-shadow-1:0 8px 24px oklch(0.4 0.03 60 / .17);--zg-shadow-2:0 24px 64px oklch(0.4 0.03 60 / .22);
57
+ }
58
+ :root{--zg-z-bar:50;--zg-z-pop:60;--zg-z-modal:200;
59
+ --zg-font:'Manrope','Thmanyah Sans',system-ui,sans-serif;--zg-font-ar:'Thmanyah Sans',system-ui,sans-serif;--zg-font-ar-display:'Thmanyah Serif Display','Thmanyah Sans',serif;--zg-font-ar-text:'Thmanyah Serif Text','Thmanyah Sans',serif;--zg-font-mono:'JetBrains Mono',ui-monospace,monospace;
60
+ --zg-h-xs:28px;--zg-h-sm:32px;--zg-h-md:40px;--zg-h-lg:48px;--zg-h-xl:56px;
61
+ --zg-r-card:32px;--zg-r-tile:20px;--zg-ease:cubic-bezier(.2,.8,.2,1);
62
+ }
63
+ [dir="rtl"]{--zg-font:var(--zg-font-ar)}
64
+
65
+ /* Size scale. Adapters put data-size="xs|sm|md|lg|xl" on a component root when it has a size prop.
66
+ Component CSS must read these only inside its own [data-size] selector, never in default rules, so sizes do not leak into children. */
67
+ [data-size="xs"]{--zg-sz-h:28px;--zg-sz-fs:12px;--zg-sz-px:10px;--zg-sz-gap:6px;--zg-sz-icon:14px;--zg-sz-pad:10px}
68
+ [data-size="sm"]{--zg-sz-h:32px;--zg-sz-fs:13px;--zg-sz-px:12px;--zg-sz-gap:8px;--zg-sz-icon:16px;--zg-sz-pad:12px}
69
+ [data-size="md"]{--zg-sz-h:40px;--zg-sz-fs:14px;--zg-sz-px:16px;--zg-sz-gap:10px;--zg-sz-icon:18px;--zg-sz-pad:16px}
70
+ [data-size="lg"]{--zg-sz-h:48px;--zg-sz-fs:15px;--zg-sz-px:20px;--zg-sz-gap:12px;--zg-sz-icon:20px;--zg-sz-pad:20px}
71
+ [data-size="xl"]{--zg-sz-h:56px;--zg-sz-fs:16px;--zg-sz-px:24px;--zg-sz-gap:14px;--zg-sz-icon:22px;--zg-sz-pad:24px}
72
+
73
+
74
+ /* ./components.css */
75
+ /* @ziyarago/ui · components. Every class is zg-*; no global resets except .zg-root */
76
+ .zg-root{font-family:var(--zg-font);color:var(--zg-text-1);background:var(--zg-bg);-webkit-font-smoothing:antialiased}
77
+ .zg-root *,.zg-root *::before,.zg-root *::after{box-sizing:border-box}
78
+ .zg-glass{background:var(--zg-s1);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);box-shadow:var(--zg-rim),var(--zg-shadow-1)}
79
+ .zg-icon:not([style*="--zg-icon"]){visibility:hidden}
80
+ .zg-icon{display:inline-block;flex:none;width:1em;height:1em;background:currentColor;-webkit-mask:var(--zg-icon) center/contain no-repeat;mask:var(--zg-icon) center/contain no-repeat}
81
+ .zg-mono{font-family:var(--zg-font-mono);font-variant-numeric:tabular-nums}
82
+ .zg-num{font-variant-numeric:tabular-nums;font-weight:200;letter-spacing:-.035em}
83
+ .zg-hatch{background:repeating-linear-gradient(135deg,var(--zg-s3) 0 1.5px,transparent 1.5px 6px)}
84
+
85
+ /* Button */
86
+ .zg-btn{--h:var(--zg-h-md);display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--h);padding:0 calc(var(--h)*.45);border:0;border-radius:999px;cursor:pointer;font:600 14px var(--zg-font);white-space:nowrap;color:var(--zg-text-1);background:var(--zg-s2);box-shadow:var(--zg-rim);transition:transform .15s var(--zg-ease),background .15s,filter .15s}
87
+ .zg-btn:hover{background:var(--zg-s3)}.zg-btn:active{transform:scale(.96)}
88
+ .zg-btn:focus-visible,.zg-ibtn:focus-visible,.zg-input:focus-within{outline:0;box-shadow:var(--zg-rim),0 0 0 3px var(--zg-brand-soft)}
89
+ .zg-btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}
90
+ .zg-btn--primary{background:var(--zg-brand);color:var(--zg-on-brand);box-shadow:inset 0 1px 0 oklch(1 0 0 / .3),0 8px 24px var(--zg-brand-glow)}.zg-btn--primary:hover{background:var(--zg-brand-hover)}
91
+ .zg-btn--inverse{background:var(--zg-inv-bg);color:var(--zg-inv-fg)}.zg-btn--inverse:hover{background:var(--zg-inv-bg);filter:brightness(1.1)}
92
+ .zg-btn--ghost{background:transparent;box-shadow:none}.zg-btn--ghost:hover{background:var(--zg-s2)}
93
+ .zg-btn--danger{background:color-mix(in oklch,var(--zg-red) 18%,transparent);color:var(--zg-red)}
94
+ .zg-btn--xs{--h:var(--zg-h-xs);font-size:12px}.zg-btn--sm{--h:var(--zg-h-sm);font-size:13px}.zg-btn--lg{--h:var(--zg-h-lg);font-size:15px}.zg-btn--xl{--h:var(--zg-h-xl);font-size:16px}
95
+ .zg-btn--block{display:flex;width:100%}
96
+ .zg-spin{width:1em;height:1em;border-radius:50%;border:2px solid currentColor;border-inline-end-color:transparent;animation:zg-spin .7s linear infinite}
97
+ @keyframes zg-spin{to{transform:rotate(360deg)}}
98
+ .zg-ibtn{--h:var(--zg-h-md);width:var(--h);height:var(--h);display:inline-grid;place-items:center;border:0;border-radius:50%;cursor:pointer;color:var(--zg-text-1);background:var(--zg-s2);box-shadow:var(--zg-rim);font-size:calc(var(--h)*.45)}
99
+ .zg-ibtn:hover{background:var(--zg-s3)}.zg-ibtn:active{transform:scale(.92)}
100
+ .zg-ibtn--sm{--h:var(--zg-h-sm)}.zg-ibtn--lg{--h:var(--zg-h-lg)}.zg-ibtn--ghost{background:transparent;box-shadow:none}
101
+
102
+ /* Badge · Avatar · Switch · Checkbox */
103
+ .zg-badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font:600 12px var(--zg-font);white-space:nowrap;--c:var(--zg-text-2);color:var(--c);background:color-mix(in oklch,var(--c) 14%,transparent)}
104
+ .zg-badge--brand{--c:var(--zg-brand-text)}.zg-badge--success{--c:var(--zg-green)}.zg-badge--warning{--c:var(--zg-amber)}.zg-badge--danger{--c:var(--zg-red)}.zg-badge--info{--c:var(--zg-sky-text)}
105
+ .zg-badge__dot{width:6px;height:6px;border-radius:50%;background:currentColor}
106
+ .zg-avatar{--s:40px;width:var(--s);height:var(--s);flex:none;border-radius:50%;display:grid;place-items:center;overflow:hidden;font:700 calc(var(--s)*.38) var(--zg-font);background:var(--zg-brand);color:var(--zg-on-brand);box-shadow:var(--zg-rim)}
107
+ .zg-avatar img{width:100%;height:100%;object-fit:cover}
108
+ .zg-switch{display:inline-flex;align-items:center;gap:10px;border:0;background:none;padding:0;cursor:pointer;color:var(--zg-text-1);font:500 14px var(--zg-font)}
109
+ .zg-switch__track{width:44px;height:26px;border-radius:999px;padding:3px;background:var(--zg-s3);box-shadow:var(--zg-rim);transition:background .2s}
110
+ .zg-switch__thumb{display:block;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px oklch(0 0 0 / .3);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
111
+ .zg-switch[aria-checked="true"] .zg-switch__track{background:var(--zg-brand)}
112
+ .zg-switch[aria-checked="true"] .zg-switch__thumb{transform:translateX(18px)}
113
+ [dir="rtl"] .zg-switch[aria-checked="true"] .zg-switch__thumb{transform:translateX(-18px)}
114
+ .zg-check{display:inline-flex;align-items:center;gap:10px;border:0;background:none;padding:0;cursor:pointer;color:var(--zg-text-1);font:500 14px var(--zg-font)}
115
+ .zg-check__box{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;color:var(--zg-on-brand);box-shadow:inset 0 0 0 1.5px var(--zg-text-3)}
116
+ .zg-check[aria-checked="true"] .zg-check__box{background:var(--zg-brand);box-shadow:none}
117
+
118
+ /* Segmented · Tabs · Chips */
119
+ .zg-seg{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--zg-s2);box-shadow:var(--zg-rim);max-width:100%;overflow-x:auto;scrollbar-width:none}
120
+ .zg-seg button{height:32px;padding:0 14px;border:0;border-radius:999px;cursor:pointer;font:600 13px var(--zg-font);white-space:nowrap;background:transparent;color:var(--zg-text-2);transition:background .2s}
121
+ .zg-seg button[aria-pressed="true"],.zg-seg button[aria-selected="true"]{background:var(--zg-inv-bg);color:var(--zg-inv-fg)}
122
+ .zg-seg--sm button{height:26px;padding:0 10px;font-size:12px}
123
+ .zg-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;box-shadow:inset 0 -1px 0 var(--zg-stroke)}
124
+ .zg-tabs button{position:relative;height:44px;padding:0 16px;border:0;background:none;cursor:pointer;font:600 14px var(--zg-font);color:var(--zg-text-3);white-space:nowrap}
125
+ .zg-tabs button[aria-selected="true"]{color:var(--zg-text-1)}
126
+ .zg-tabs button[aria-selected="true"]::after{content:"";position:absolute;inset-inline:12px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--zg-brand)}
127
+ .zg-chips{display:flex;gap:8px;flex-wrap:wrap}
128
+ .zg-chip{height:34px;padding:0 14px;border:0;border-radius:999px;cursor:pointer;font:600 13px var(--zg-font);background:var(--zg-s2);color:var(--zg-text-2);box-shadow:var(--zg-rim)}
129
+ .zg-chip[aria-pressed="true"]{background:var(--zg-brand-soft);color:var(--zg-brand-text);box-shadow:inset 0 0 0 1.5px var(--zg-brand)}
130
+
131
+ /* Fields */
132
+ .zg-field{display:flex;flex-direction:column;gap:6px;min-width:0}
133
+ .zg-label{font:600 13px var(--zg-font);color:var(--zg-text-2)}
134
+ .zg-input{--h:var(--zg-h-lg);display:flex;align-items:center;gap:10px;height:var(--h);padding:0 6px 0 18px;border-radius:999px;background:var(--zg-s2);box-shadow:var(--zg-rim);color:var(--zg-text-3)}
135
+ .zg-input input{flex:1;min-width:0;height:calc(var(--h) - 4px);border:0;outline:0;background:transparent;color:var(--zg-text-1);font:500 15px var(--zg-font)}
136
+ .zg-input input::placeholder{color:var(--zg-text-3)}
137
+ .zg-input--error{box-shadow:inset 0 0 0 1.5px var(--zg-red)}
138
+ .zg-hint{font-size:12px;color:var(--zg-text-3)}.zg-hint--error{color:var(--zg-red)}
139
+ .zg-select{position:relative}
140
+ .zg-select__trigger{width:100%;justify-content:space-between;text-align:start}
141
+ .zg-select__list{position:absolute;z-index:40;inset-inline:0;top:calc(100% + 6px);padding:6px;border-radius:20px;background:var(--zg-glass);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);box-shadow:var(--zg-rim),var(--zg-shadow-2);max-height:280px;overflow:auto}
142
+ .zg-select__opt{display:flex;align-items:center;justify-content:space-between;width:100%;height:40px;padding:0 14px;border:0;border-radius:14px;cursor:pointer;background:none;color:var(--zg-text-1);font:500 14px var(--zg-font);text-align:start}
143
+ .zg-select__opt:hover{background:var(--zg-s2)}.zg-select__opt[aria-selected="true"]{color:var(--zg-brand-text);font-weight:700}
144
+ .zg-code{position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:8px;direction:ltr}
145
+ .zg-code__cell{height:60px;border-radius:18px;display:grid;place-items:center;font:300 28px var(--zg-font);font-variant-numeric:tabular-nums;background:var(--zg-s2);box-shadow:var(--zg-rim)}
146
+ .zg-code__cell--on{box-shadow:inset 0 0 0 2px var(--zg-brand)}
147
+ .zg-code input{position:absolute;inset:0;width:100%;opacity:0;border:0;cursor:text}
148
+ .zg-stepper{display:flex;align-items:center;gap:8px}
149
+ .zg-step{display:flex;align-items:center;gap:8px;font:600 13px var(--zg-font);color:var(--zg-text-3)}
150
+ .zg-step__n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--zg-s2);box-shadow:var(--zg-rim)}
151
+ .zg-step--done .zg-step__n,.zg-step--cur .zg-step__n{background:var(--zg-brand);color:var(--zg-on-brand)}
152
+ .zg-step--cur,.zg-step--done{color:var(--zg-text-1)}
153
+ .zg-step__bar{flex:1;height:2px;min-width:16px;background:var(--zg-s3)}
154
+
155
+ /* Surfaces */
156
+ .zg-card{border-radius:var(--zg-r-card);padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0}
157
+ .zg-card--inverse{background:linear-gradient(150deg,oklch(0.285 0.022 239.4),oklch(0.2 0.012 240));color:oklch(0.97 0.004 70)}
158
+ .zg-card__head{display:flex;align-items:flex-start;gap:12px}.zg-card__title{font:600 18px var(--zg-font);margin:0}.zg-card__sub{font-size:13px;color:var(--zg-text-3)}
159
+ .zg-modal-scrim{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;background:oklch(0.12 0.005 40 / .5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
160
+ .zg-modal{width:100%;max-width:520px;max-height:92vh;display:flex;flex-direction:column;border-radius:32px;overflow:hidden;background:var(--zg-glass);backdrop-filter:blur(40px) saturate(1.6);-webkit-backdrop-filter:blur(40px) saturate(1.6);box-shadow:var(--zg-rim),var(--zg-shadow-2);color:var(--zg-text-1)}
161
+ .zg-modal__head{display:flex;align-items:center;gap:12px;padding:20px 20px 16px;box-shadow:0 1px 0 var(--zg-stroke)}.zg-modal__head h3{flex:1;margin:0;font:600 18px var(--zg-font)}
162
+ .zg-modal__body{padding:20px;overflow:auto;display:flex;flex-direction:column;gap:16px}
163
+ .zg-modal__foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px 18px;box-shadow:0 -1px 0 var(--zg-stroke)}
164
+ .zg-drawer-scrim{align-items:stretch}.zg-drawer-scrim--end{justify-content:flex-end}.zg-drawer-scrim--start{justify-content:flex-start}
165
+ .zg-drawer{width:min(420px,100%);max-width:none;max-height:none;border-radius:32px;margin:0}
166
+ .zg-toast{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:22px;background:var(--zg-glass);box-shadow:var(--zg-rim),var(--zg-shadow-1);max-width:380px}
167
+ .zg-toast__icon{width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center;--c:var(--zg-sky-text);color:var(--c);background:color-mix(in oklch,var(--c) 16%,transparent)}
168
+ .zg-toast--success .zg-toast__icon{--c:var(--zg-green)}.zg-toast--danger .zg-toast__icon{--c:var(--zg-red)}.zg-toast--warning .zg-toast__icon{--c:var(--zg-amber)}
169
+ .zg-toast b{display:block;font:600 14px var(--zg-font)}.zg-toast span{font-size:13px;color:var(--zg-text-2)}
170
+
171
+ /* Data */
172
+ .zg-kpi{border-radius:var(--zg-r-tile);padding:16px 18px;display:flex;flex-direction:column;gap:6px;background:var(--zg-s1);box-shadow:var(--zg-rim)}
173
+ .zg-kpi--brand{background:var(--zg-brand);color:var(--zg-on-brand)}.zg-kpi--inverse{background:var(--zg-inv-bg);color:var(--zg-inv-fg)}
174
+ .zg-kpi__label{font-size:13px;opacity:.75}.zg-kpi__value{font-size:36px;line-height:1}.zg-kpi__sub{font-size:12px;opacity:.75}
175
+ .zg-delta{font:700 12px var(--zg-font-mono)}.zg-delta--up{color:var(--zg-green)}.zg-delta--down{color:var(--zg-red)}
176
+ .zg-progress{display:flex;flex-direction:column;gap:6px}.zg-progress__row{display:flex;justify-content:space-between;font-size:13px}
177
+ .zg-progress__track{height:8px;border-radius:999px;overflow:hidden;background:repeating-linear-gradient(135deg,var(--zg-s3) 0 1.5px,transparent 1.5px 6px)}
178
+ .zg-progress__bar{height:100%;border-radius:999px;background:var(--zg-brand);transition:width .8s var(--zg-ease)}
179
+ .zg-progress--success .zg-progress__bar{background:var(--zg-green)}.zg-progress--warning .zg-progress__bar{background:var(--zg-amber)}.zg-progress--danger .zg-progress__bar{background:var(--zg-red)}
180
+ .zg-ring{position:relative;display:inline-grid;place-items:center}.zg-ring svg{transform:rotate(-90deg)}.zg-ring__c{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:4px;text-align:center}.zg-ring__v{font-weight:300;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1;color:var(--zg-text-1)}.zg-ring__l{font:500 12px/1.2 var(--zg-font);color:var(--zg-text-3)}
181
+ .zg-table-wrap{overflow:auto;border-radius:24px}
182
+ .zg-table{width:100%;border-collapse:collapse;font-size:14px}
183
+ .zg-table th{position:sticky;top:0;text-align:start;padding:12px 16px;font:600 12px var(--zg-font);color:var(--zg-text-3);background:var(--zg-s2);white-space:nowrap}
184
+ .zg-table th button{all:unset;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
185
+ .zg-table td{padding:12px 16px;box-shadow:inset 0 1px 0 var(--zg-stroke)}
186
+ .zg-table tr[aria-selected="true"] td{background:var(--zg-brand-soft)}.zg-table tbody tr:hover td{background:var(--zg-s1)}
187
+ .zg-table .num{text-align:end;font-variant-numeric:tabular-nums}
188
+ .zg-empty{padding:40px 16px;text-align:center;color:var(--zg-text-3)}
189
+ .zg-kcol{flex:1 1 260px;min-width:260px;display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:28px;background:var(--zg-s1);box-shadow:var(--zg-rim)}
190
+ .zg-kcol__head{display:flex;align-items:center;gap:8px;padding:4px 6px;font:600 14px var(--zg-font)}
191
+ .zg-kcard{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:20px;background:var(--zg-s2);box-shadow:var(--zg-rim);cursor:grab}
192
+ .zg-timeline{display:flex;flex-direction:column}
193
+ .zg-tl{display:grid;grid-template-columns:28px 1fr;gap:12px}
194
+ .zg-tl__rail{display:flex;flex-direction:column;align-items:center}.zg-tl__dot{width:12px;height:12px;margin-top:5px;border-radius:50%;background:var(--zg-brand);box-shadow:0 0 0 4px var(--zg-brand-soft)}.zg-tl__line{flex:1;width:2px;background:var(--zg-s3)}
195
+ .zg-tl__body{padding-bottom:18px;display:flex;flex-direction:column;gap:2px;font-size:14px}.zg-tl__time{font-size:12px;color:var(--zg-text-3)}
196
+
197
+ /* Navigation */
198
+ .zg-crumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--zg-text-3)}.zg-crumbs a{color:var(--zg-text-2);text-decoration:none}.zg-crumbs a:hover{color:var(--zg-text-1)}.zg-crumbs b{color:var(--zg-text-1)}
199
+ .zg-pager{display:inline-flex;gap:4px}.zg-pager button{min-width:36px;height:36px;border:0;border-radius:999px;cursor:pointer;font:600 13px var(--zg-font);background:transparent;color:var(--zg-text-2)}.zg-pager button[aria-current="page"]{background:var(--zg-inv-bg);color:var(--zg-inv-fg)}
200
+ .zg-topnav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;padding:10px clamp(10px,2vw,20px);background:color-mix(in oklch,var(--zg-bg) 62%,transparent);backdrop-filter:blur(28px) saturate(1.6);-webkit-backdrop-filter:blur(28px) saturate(1.6);box-shadow:0 1px 0 var(--zg-stroke)}
201
+ .zg-topnav__brand{display:flex;align-items:center;gap:10px;font:700 18px var(--zg-font);flex:none}
202
+ .zg-topnav__items{margin-inline-start:auto;display:flex;gap:2px;padding:4px;border-radius:999px;background:var(--zg-s2);box-shadow:var(--zg-rim);overflow-x:auto;scrollbar-width:none;min-width:0}
203
+ .zg-topnav__actions{display:flex;align-items:center;gap:8px;flex:none}
204
+ .zg-navitem{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:0;border-radius:999px;cursor:pointer;font:600 14px var(--zg-font);white-space:nowrap;background:transparent;color:var(--zg-text-2);transition:background .2s}
205
+ .zg-navitem:hover{background:var(--zg-s2)}.zg-navitem[aria-current="page"]{background:var(--zg-inv-bg);color:var(--zg-inv-fg)}
206
+ .zg-navitem__count{height:20px;min-width:20px;padding:0 6px;border-radius:999px;display:grid;place-items:center;font:700 11px var(--zg-font);background:var(--zg-brand);color:var(--zg-on-brand)}
207
+ .zg-sidenav{--w:272px;position:sticky;top:0;height:100vh;width:var(--w);flex:none;display:flex;flex-direction:column;gap:6px;padding:16px 12px;background:color-mix(in oklch,var(--zg-bg) 62%,transparent);backdrop-filter:blur(40px) saturate(1.6);-webkit-backdrop-filter:blur(40px) saturate(1.6);box-shadow:inset -1px 0 0 var(--zg-stroke);transition:width .3s var(--zg-ease);overflow:hidden}
208
+ [dir="rtl"] .zg-sidenav{box-shadow:inset 1px 0 0 var(--zg-stroke)}
209
+ .zg-sidenav--collapsed{--w:76px}
210
+ .zg-sidenav .zg-navitem{width:100%;height:46px;border-radius:16px;justify-content:flex-start;padding:0 14px}
211
+ .zg-sidenav--collapsed .zg-navitem{justify-content:center;padding:0}.zg-sidenav--collapsed .zg-navitem span:not(.zg-icon){display:none}
212
+ .zg-sidenav__brand{display:flex;align-items:center;gap:10px;padding:6px 8px 14px;font:700 18px var(--zg-font);white-space:nowrap}
213
+ .zg-sidenav--collapsed .zg-sidenav__brand span{display:none}
214
+ .zg-sidenav__sp{flex:1}.zg-sidenav__group{padding:14px 14px 4px;font:700 11px var(--zg-font);letter-spacing:.1em;text-transform:uppercase;color:var(--zg-text-3)}
215
+ .zg-shell{min-height:100vh;display:flex}.zg-shell--top{flex-direction:column}
216
+ .zg-shell__main{flex:1;min-width:0;max-width:1440px;width:100%;margin:0 auto;padding:clamp(16px,2.4vw,32px);display:flex;flex-direction:column;gap:20px}
217
+ .zg-shell__bar{display:none;position:sticky;top:0;z-index:50;align-items:center;gap:12px;padding:10px 16px;background:color-mix(in oklch,var(--zg-bg) 62%,transparent);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px)}
218
+ @media(max-width:820px){.zg-shell:not(.zg-shell--top){flex-direction:column}.zg-shell:not(.zg-shell--top) .zg-sidenav{display:none}.zg-shell__bar{display:flex}}
219
+ .zg-page-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}.zg-page-head h1{margin:0;font:300 clamp(28px,3vw,40px) var(--zg-font);letter-spacing:-.03em}.zg-page-head p{margin:4px 0 0;color:var(--zg-text-3);font-size:15px}
220
+ .zg-auth{min-height:100vh;display:grid;place-items:center;padding:24px}.zg-auth__card{width:100%;max-width:440px;padding:clamp(24px,3vw,36px);border-radius:36px;display:flex;flex-direction:column;gap:22px;background:color-mix(in oklch,var(--zg-bg) 55%,transparent);backdrop-filter:blur(28px) saturate(1.6);-webkit-backdrop-filter:blur(28px) saturate(1.6);box-shadow:var(--zg-rim),var(--zg-shadow-1)}
221
+
222
+ .zg-shell--frame{min-height:0;height:100%;overflow:auto}.zg-shell--frame .zg-sidenav{height:100%;position:relative}.zg-shell--frame .zg-topnav{position:sticky}
223
+
224
+ /* Domain */
225
+ .zg-lead{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:20px;background:var(--zg-s2);box-shadow:var(--zg-rim)}.zg-lead__row{display:flex;align-items:center;gap:10px}
226
+ .zg-hotel{display:flex;flex-direction:column;border-radius:28px;overflow:hidden;background:var(--zg-s1);box-shadow:var(--zg-rim),var(--zg-shadow-1)}
227
+ .zg-hotel__img{position:relative;aspect-ratio:16/10;background:var(--zg-s3) center/cover}.zg-hotel__tags{position:absolute;top:10px;inset-inline-start:10px;display:flex;gap:6px}
228
+ .zg-hotel__body{padding:16px;display:flex;flex-direction:column;gap:10px}.zg-hotel__row{display:flex;align-items:flex-start;gap:12px}.zg-hotel__price{margin-inline-start:auto;text-align:end;line-height:1.15}
229
+ .zg-pt{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.zg-pt__i{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;border-radius:18px;background:var(--zg-s2);font-size:12px;color:var(--zg-text-3)}
230
+ .zg-pt__i b{font:600 16px var(--zg-font-mono);color:var(--zg-text-1)}.zg-pt__i[aria-current="true"]{background:var(--zg-sky);color:oklch(0.22 0.03 230)}.zg-pt__i[aria-current="true"] b{color:inherit}
231
+ .zg-rt{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:3px;direction:ltr}.zg-rt i{height:36px;border-radius:7px;background:var(--zg-s2);position:relative}.zg-rt i[data-s="past"]{background:var(--zg-brand-soft)}.zg-rt i[data-s="cur"]{background:var(--zg-brand)}.zg-rt i[data-s="last"]{background:color-mix(in oklch,var(--zg-sky) 16%,transparent)}
232
+ .zg-rt i[data-odd]::after{content:"";position:absolute;top:5px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--zg-sky)}
233
+ .zg-call{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;border-radius:18px;background:var(--zg-s2)}
234
+ @media(prefers-reduced-motion:reduce){.zg-root *{animation-duration:.01ms!important;transition-duration:.01ms!important}}
235
+
236
+ .zg-topnav__items{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}.zg-topnav__items:not(:hover){}.zg-topnav__items .zg-navitem{padding-inline:12px}
237
+
238
+
239
+ /* ./components2.css */
240
+ /* ── part 2 ── */
241
+ .zg-alert{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:22px;--c:var(--zg-sky-text);background:color-mix(in oklch,var(--c) 12%,var(--zg-s2));box-shadow:var(--zg-rim)}
242
+ .zg-alert--success{--c:var(--zg-green)}.zg-alert--warning{--c:var(--zg-amber)}.zg-alert--danger{--c:var(--zg-red)}
243
+ .zg-alert__i{width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center;color:var(--c);background:color-mix(in oklch,var(--c) 18%,transparent)}
244
+ .zg-alert__b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:14px;line-height:1.5}.zg-alert__b b{font-size:15px}.zg-alert__b span{color:var(--zg-text-2)}
245
+ .zg-banner{border-radius:0;box-shadow:inset 0 -1px 0 var(--zg-stroke)}
246
+ .zg-acc{display:flex;flex-direction:column;border-radius:24px;background:var(--zg-s1);box-shadow:var(--zg-rim);padding:6px}
247
+ .zg-acc__i+.zg-acc__i{box-shadow:inset 0 1px 0 var(--zg-stroke)}
248
+ .zg-acc__h{all:unset;box-sizing:border-box;display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 16px;cursor:pointer;font:600 15px var(--zg-font);color:var(--zg-text-1)}
249
+ .zg-acc__i[data-open="true"] .zg-acc__h .zg-icon{transform:rotate(180deg)}.zg-acc__b{padding:0 16px 16px;color:var(--zg-text-2);line-height:1.6;font-size:14px}
250
+ .zg-skelw{display:flex;flex-direction:column;gap:8px}.zg-skel{display:block;height:14px;border-radius:999px;background:linear-gradient(90deg,var(--zg-s2),var(--zg-s3),var(--zg-s2));background-size:200% 100%;animation:zg-sh 1.4s linear infinite}
251
+ .zg-skel--rect{height:96px;border-radius:20px}.zg-skel--circle{border-radius:50%}@keyframes zg-sh{to{background-position:-200% 0}}
252
+ .zg-div{display:flex;align-items:center;gap:12px;color:var(--zg-text-3);font-size:12px}.zg-div::before,.zg-div::after{content:"";flex:1;height:1px;background:var(--zg-stroke)}.zg-div:not(:has(span))::after{display:none}
253
+ .zg-es{display:flex;flex-direction:column;align-items:center;gap:8px;padding:32px 16px;text-align:center;color:var(--zg-text-2)}.zg-es b{color:var(--zg-text-1);font-size:17px}
254
+ .zg-es__ico{width:64px;height:64px;border-radius:22px;display:grid;place-items:center;background:var(--zg-brand-soft);color:var(--zg-brand-text);box-shadow:var(--zg-rim)}.zg-es__img{width:112px;height:112px;background:center/contain no-repeat}
255
+ .zg-es__a{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:8px}.zg-es--page{min-height:60vh;justify-content:center}
256
+ .zg-lo{position:relative}.zg-lo__o{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border-radius:inherit;background:color-mix(in oklch,var(--zg-bg) 55%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
257
+ .zg-car{position:relative;border-radius:28px;overflow:hidden;box-shadow:var(--zg-rim),var(--zg-shadow-1)}.zg-car__s{aspect-ratio:16/8;background:var(--zg-s3) center/cover;display:flex;align-items:flex-end}
258
+ .zg-car__c{width:100%;padding:44px 20px 18px;color:#fff;display:flex;flex-direction:column;gap:2px;background:linear-gradient(transparent,oklch(0.1 0 0 / .7))}
259
+ .zg-car__p,.zg-car__n{position:absolute;top:50%;margin-top:-16px}.zg-car__p{inset-inline-start:12px}.zg-car__n{inset-inline-end:12px}
260
+ [dir="rtl"] .zg-car__p .zg-icon,[dir="rtl"] .zg-car__n .zg-icon{transform:scaleX(-1)}
261
+ .zg-car__d{position:absolute;bottom:10px;inset-inline:0;display:flex;gap:6px;justify-content:center}.zg-car__d button{width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;background:oklch(1 0 0 / .45)}.zg-car__d button[aria-current="true"]{width:22px;border-radius:999px;background:#fff}
262
+ .zg-gal{display:flex;flex-direction:column;gap:10px}.zg-gal__m{position:relative;aspect-ratio:16/10;border-radius:28px;background:var(--zg-s3) center/cover;box-shadow:var(--zg-rim)}.zg-gal__n{position:absolute;top:12px;inset-inline-end:12px;background:oklch(0.15 0 0 / .6);color:#fff}
263
+ .zg-gal__t{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}.zg-gal__t button{flex:none;width:84px;aspect-ratio:4/3;border:0;border-radius:16px;cursor:pointer;background:var(--zg-s3) center/cover;opacity:.6}.zg-gal__t button[aria-current="true"]{opacity:1;box-shadow:0 0 0 2px var(--zg-brand)}
264
+ .zg-code-b{border-radius:22px;overflow:hidden;background:oklch(0.17 0.006 240);color:oklch(0.9 0.01 240);box-shadow:var(--zg-rim)}.zg-code-b__h{display:flex;align-items:center;justify-content:space-between;padding:8px 8px 8px 16px;font-size:12px;color:oklch(0.7 0.01 240);box-shadow:inset 0 -1px 0 oklch(1 0 0 / .08)}
265
+ .zg-code-b pre{margin:0;padding:16px;overflow:auto;font-size:13px;line-height:1.6;direction:ltr;text-align:left}
266
+ .zg-price--on{box-shadow:var(--zg-rim),0 0 0 2px var(--zg-brand),var(--zg-shadow-1)}.zg-feat{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14px}.zg-feat li{display:flex;gap:10px;align-items:center;color:var(--zg-text-2)}.zg-feat .zg-icon{color:var(--zg-green)}
267
+ .zg-inc{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:28px;max-width:440px}.zg-inc__ok{background:var(--zg-green);color:#fff;box-shadow:0 8px 24px color-mix(in oklch,var(--zg-green) 45%,transparent)}
268
+ .zg-dd{position:relative;display:inline-block}.zg-menu{position:absolute;z-index:40;inset-inline-start:0;top:calc(100% + 6px);min-width:220px;padding:6px;border-radius:20px;background:var(--zg-glass);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);box-shadow:var(--zg-rim),var(--zg-shadow-2);display:flex;flex-direction:column}
269
+ .zg-menu--static{position:static;display:inline-flex}.zg-menu__i{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;min-height:40px;padding:0 12px;border-radius:14px;cursor:pointer;font:500 14px var(--zg-font);color:var(--zg-text-1)}
270
+ .zg-menu__i:hover{background:var(--zg-s2)}.zg-menu__i--danger{color:var(--zg-red)}.zg-menu__i .zg-kbd{margin-inline-start:auto}.zg-menu__sep{height:1px;margin:4px 8px;background:var(--zg-stroke)}
271
+ .zg-kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:7px;font:600 11px var(--zg-font-mono);color:var(--zg-text-2);background:var(--zg-s2);box-shadow:var(--zg-rim),0 1px 0 var(--zg-stroke)}
272
+ .zg-pop{position:absolute;z-index:40;inset-inline-start:0;top:calc(100% + 6px);min-width:240px;padding:14px;border-radius:20px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--zg-rim),var(--zg-shadow-2);background:var(--zg-glass)}
273
+ .zg-tip{position:relative;display:inline-flex}.zg-tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);inset-inline-start:50%;transform:translateX(-50%) translateY(4px);white-space:nowrap;padding:6px 10px;border-radius:10px;font:600 12px var(--zg-font);background:var(--zg-inv-bg);color:var(--zg-inv-fg);opacity:0;pointer-events:none;transition:.15s}
274
+ .zg-tip:hover::after,.zg-tip:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}
275
+ .zg-hc{position:relative;display:inline-block;border-bottom:1.5px dotted var(--zg-text-3);cursor:help}.zg-hc__c{position:absolute;z-index:40;top:calc(100% + 8px);inset-inline-start:0;width:280px;padding:14px;border-radius:20px;opacity:0;visibility:hidden;transition:.15s;font-size:14px;line-height:1.5;background:var(--zg-glass)}.zg-hc:hover .zg-hc__c,.zg-hc:focus-within .zg-hc__c{opacity:1;visibility:visible}
276
+ .zg-cb{display:inline-flex;align-items:center;gap:2px;padding:4px;border-radius:999px}.zg-cb__s{width:1px;height:20px;margin:0 4px;background:var(--zg-stroke)}
277
+ .zg-bell__n{position:absolute;top:-2px;inset-inline-end:-2px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;display:grid;place-items:center;font:700 10px var(--zg-font);background:var(--zg-red);color:#fff}.zg-ibtn{position:relative}
278
+ .zg-fab{display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 20px;border:0;border-radius:999px;cursor:pointer;font:600 15px var(--zg-font);background:var(--zg-brand);color:var(--zg-on-brand);box-shadow:inset 0 1px 0 oklch(1 0 0 / .3),0 12px 32px var(--zg-brand-glow)}
279
+ .zg-ta{width:100%;padding:14px 18px;border:0;outline:0;resize:vertical;border-radius:24px;background:var(--zg-s2);box-shadow:var(--zg-rim);color:var(--zg-text-1);font:500 15px/1.5 var(--zg-font)}.zg-ta:focus{box-shadow:var(--zg-rim),0 0 0 3px var(--zg-brand-soft)}
280
+ .zg-num-in{padding:0 6px}.zg-num-in input{text-align:center}
281
+ .zg-radio{border-radius:50%!important}.zg-radio i{width:10px;height:10px;border-radius:50%;background:var(--zg-on-brand)}.zg-check[aria-checked="true"] .zg-radio{background:var(--zg-brand)}
282
+ .zg-range{-webkit-appearance:none;appearance:none;flex:1;height:8px;border-radius:999px;outline:0;background:linear-gradient(90deg,var(--zg-brand) var(--p),var(--zg-s3) var(--p))}
283
+ .zg-range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 8px oklch(0 0 0 / .35);cursor:grab}.zg-range::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:#fff;box-shadow:0 2px 8px oklch(0 0 0 / .35)}
284
+ .zg-rate{display:inline-flex;gap:2px}.zg-rate button{all:unset;cursor:pointer;color:var(--zg-s3);display:grid;place-items:center;padding:2px}.zg-rate button[data-on="true"]{color:var(--zg-brand)}.zg-rate button[data-on="true"] .zg-icon{filter:drop-shadow(0 0 6px var(--zg-brand-glow))}
285
+ .zg-tag{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 6px 0 12px;border-radius:999px;font:600 13px var(--zg-font);background:var(--zg-s2);color:var(--zg-text-1);box-shadow:var(--zg-rim)}.zg-tag:not(:has(button)){padding-inline-end:12px}
286
+ .zg-tag button{all:unset;cursor:pointer;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;color:var(--zg-text-3)}.zg-tag button:hover{background:var(--zg-s3)}
287
+ .zg-chipin{height:auto;min-height:var(--zg-h-lg);flex-wrap:wrap;padding:6px 12px;border-radius:24px;gap:6px}.zg-chipin input{min-width:100px}
288
+ .zg-inline{all:unset;display:inline-flex;align-items:center;gap:8px;cursor:pointer;padding:6px 12px;border-radius:14px;font:500 15px var(--zg-font);color:var(--zg-text-1)}.zg-inline:hover{background:var(--zg-s2)}.zg-inline .zg-icon{opacity:.5}
289
+ .zg-swatch{width:32px;height:32px;padding:0;border:0;border-radius:50%;cursor:pointer;box-shadow:var(--zg-rim)}.zg-swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--zg-bg),0 0 0 4px var(--zg-text-1)}
290
+ .zg-fdrop{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 16px;border-radius:24px;cursor:pointer;text-align:center;color:var(--zg-text-2);background:var(--zg-s1);box-shadow:inset 0 0 0 1.5px var(--zg-stroke)}.zg-fdrop:hover,.zg-fdrop[data-drag]{box-shadow:inset 0 0 0 1.5px var(--zg-brand);background:var(--zg-brand-soft)}.zg-fdrop[data-drag]{box-shadow:inset 0 0 0 2px var(--zg-brand)}.zg-fdrop:focus-visible{outline:2px solid var(--zg-brand);outline-offset:2px}.zg-fdrop b{color:var(--zg-text-1)}
291
+ .zg-cal{display:flex;flex-direction:column;gap:8px;min-width:280px}.zg-cal__h{display:flex;align-items:center;justify-content:space-between}.zg-cal__g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
292
+ .zg-cal__w{text-align:center;font:600 11px var(--zg-font);color:var(--zg-text-3);padding:4px 0}.zg-cal__d{all:unset;box-sizing:border-box;position:relative;height:36px;border-radius:999px;display:grid;place-items:center;cursor:pointer;font:500 14px var(--zg-font);font-variant-numeric:tabular-nums;color:var(--zg-text-1)}
293
+ .zg-cal__d:hover{background:var(--zg-s2)}.zg-cal__d[data-today="true"]{box-shadow:inset 0 0 0 1.5px var(--zg-sky)}.zg-cal__d[aria-pressed="true"]{background:var(--zg-brand);color:var(--zg-on-brand);font-weight:700}
294
+ .zg-cal__d[data-ev]::after{content:"";position:absolute;bottom:4px;width:4px;height:4px;border-radius:50%;background:var(--zg-sky)}
295
+ .zg-kpii{display:inline-flex;flex-direction:column;gap:2px}.zg-mini{display:flex;align-items:flex-end;gap:3px;width:100%}.zg-mini i{flex:1;border-radius:4px 4px 2px 2px}
296
+ .zg-desc{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;margin:0;font-size:14px}.zg-desc dt{color:var(--zg-text-3)}.zg-desc dd{margin:0;font-weight:500}
297
+ .zg-lazy{display:block;width:100%;background:var(--zg-s3) center/cover;box-shadow:var(--zg-rim)}.zg-sys{display:flex;flex-direction:column}.zg-sys__r{display:flex;align-items:center;gap:12px;min-height:44px;font-size:14px;box-shadow:inset 0 1px 0 var(--zg-stroke)}.zg-sys__r:first-child{box-shadow:none}
298
+ .zg-tree{display:flex;flex-direction:column;gap:2px}.zg-tree__n{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:8px;min-height:36px;padding-inline-end:12px;border-radius:12px;cursor:pointer;font:500 14px var(--zg-font);color:var(--zg-text-1)}.zg-tree__n:hover{background:var(--zg-s2)}.zg-tree__n--on{background:var(--zg-brand-soft);color:var(--zg-brand-text)}
299
+ .zg-subnav{display:flex;flex-direction:column;gap:2px;min-width:220px}.zg-subnav .zg-navitem{height:42px;border-radius:14px}.zg-rail{display:inline-flex;flex-direction:column;gap:4px;padding:6px;border-radius:999px}
300
+ .zg-split{display:grid;gap:20px;align-items:start}.zg-setsec{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:24px;padding:20px 0;box-shadow:inset 0 -1px 0 var(--zg-stroke)}@media(max-width:700px){.zg-setsec{grid-template-columns:1fr}}
301
+ .zg-scroll{overflow:auto;scrollbar-width:thin}
302
+ .zg-rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;width:100%}.zg-room{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:18px;cursor:pointer;font-size:12px;color:var(--zg-text-2);background:var(--zg-s2);box-shadow:var(--zg-rim)}.zg-room b{font-size:16px;color:var(--zg-text-1)}
303
+ .zg-room[data-tone]{background:color-mix(in oklab,var(--c) 16%,var(--zg-s2))}.zg-room[data-tone="brand"]{background:var(--zg-brand-soft)}
304
+ .zg-rc{display:grid;grid-template-columns:56px repeat(var(--d),minmax(0,1fr));gap:2px;align-items:center;direction:ltr;font-size:12px}.zg-rc__h{text-align:center;color:var(--zg-text-3)}.zg-rc__c{height:28px;border-radius:6px;background:var(--zg-s2)}.zg-rc__c[data-b]{background:var(--zg-brand-soft);border-radius:0}.zg-rc__c[data-b="start"]{background:var(--zg-brand);border-radius:999px 0 0 999px}
305
+ .zg-occ{display:flex;align-items:flex-end;gap:8px;height:160px}.zg-occ__c{flex:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px}.zg-occ__c i{width:100%;border-radius:10px 10px 4px 4px}
306
+
307
+ .zg-kpi--brand .zg-delta{color:inherit;opacity:.85}.zg-kpi--brand .zg-delta::before{opacity:.9}
308
+
309
+
310
+ /* ./components3.css */
311
+ /* ── part 3 ── */
312
+ .zg-t-brand{--c:var(--zg-brand);--ct:var(--zg-brand-text)}.zg-t-sky{--c:var(--zg-sky);--ct:var(--zg-sky-text)}.zg-t-success{--c:var(--zg-green);--ct:var(--zg-green)}.zg-t-warning{--c:var(--zg-amber);--ct:var(--zg-amber)}.zg-t-danger{--c:var(--zg-red);--ct:var(--zg-red)}.zg-t-neutral{--c:var(--zg-text-3);--ct:var(--zg-text-2)}
313
+ .zg-btn--tonal{background:color-mix(in oklch,var(--c,var(--zg-brand)) 16%,transparent);color:var(--ct,var(--zg-brand-text));box-shadow:none}.zg-btn--tonal:hover{background:color-mix(in oklch,var(--c,var(--zg-brand)) 26%,transparent)}
314
+ .zg-btn--outlined{background:transparent;color:var(--ct,var(--zg-brand-text));box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--c,var(--zg-brand)) 55%,transparent)}.zg-btn--outlined:hover{background:color-mix(in oklch,var(--c,var(--zg-brand)) 10%,transparent)}
315
+ .zg-btn--text{background:transparent;color:var(--ct,var(--zg-brand-text));box-shadow:none}.zg-btn--text:hover{background:color-mix(in oklch,var(--c,var(--zg-brand)) 10%,transparent)}
316
+ .zg-btn--elevated{background:var(--c,var(--zg-brand));color:var(--zg-on-brand);box-shadow:0 4px 12px color-mix(in oklch,var(--c,var(--zg-brand)) 40%,transparent)}
317
+ .zg-chip2{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:8px;font:500 13px var(--zg-font);white-space:nowrap}.zg-chip2--pill{border-radius:999px}.zg-chip2--sm{height:24px;padding:0 8px;font-size:12px}.zg-chip2--lg{height:38px;padding:0 16px;font-size:14px}
318
+ .zg-chip2--tonal{background:color-mix(in oklch,var(--c) 16%,transparent);color:var(--ct)}.zg-chip2--outlined{box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--c) 55%,transparent);color:var(--ct)}.zg-chip2--solid{background:var(--c);color:var(--zg-on-brand)}
319
+ .zg-chip2 button{all:unset;cursor:pointer;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:color-mix(in oklch,currentColor 18%,transparent)}
320
+ .zg-tile{width:var(--s);height:var(--s);flex:none;border-radius:8px;display:grid;place-items:center;background:color-mix(in oklch,var(--c) 16%,transparent);color:var(--ct)}.zg-tile--circle{border-radius:50%}
321
+ .zg-usercell{display:inline-flex;align-items:center;gap:10px}.zg-usercell>span{display:flex;flex-direction:column;line-height:1.3}.zg-usercell b{font-size:14px}
322
+ .zg-srow{display:flex;align-items:center;gap:12px;min-height:56px}
323
+ .zg-statline{position:relative;overflow:hidden;gap:6px}.zg-statline__bar{position:absolute;inset-inline:0;bottom:0;height:3px;background:var(--c);opacity:.9}
324
+ .zg-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));padding:8px}.zg-strip__i{display:flex;align-items:center;gap:14px;padding:14px 20px}.zg-strip__i+.zg-strip__i{box-shadow:inset 1px 0 0 var(--zg-stroke)}
325
+ .zg-vs{display:flex;flex-direction:column;gap:12px}.zg-vs__r{display:flex;align-items:center;justify-content:space-between;gap:12px}.zg-vs__bar{display:flex;height:8px;border-radius:999px;overflow:hidden;gap:3px}.zg-vs__bar i{border-radius:999px}
326
+ .zg-segbar{display:flex;height:36px;border-radius:12px;overflow:hidden;gap:3px}.zg-segbar i{display:block;height:100%;border-radius:6px}
327
+ .zg-hero{display:flex;align-items:center;gap:20px;padding:24px;border-radius:28px;overflow:hidden;background:linear-gradient(135deg,color-mix(in oklch,var(--zg-brand) 34%,var(--zg-s2)),var(--zg-s1));box-shadow:var(--zg-rim),var(--zg-shadow-1)}.zg-hero__t{flex:1;display:flex;flex-direction:column;gap:10px;align-items:flex-start;min-width:0}.zg-hero__img{width:112px;height:112px;flex:none;background:center/contain no-repeat;filter:drop-shadow(0 10px 18px oklch(0 0 0 / .35))}
328
+ .zg-tt{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px}.zg-tt__i{all:unset;box-sizing:border-box;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:92px;height:82px;border-radius:16px;cursor:pointer;font:500 13px var(--zg-font);color:var(--zg-text-2);background:var(--zg-s1);box-shadow:inset 0 0 0 1px var(--zg-stroke)}
329
+ .zg-tt__i[aria-pressed="true"]{color:var(--zg-brand-text);background:var(--zg-brand-soft);box-shadow:inset 0 0 0 1.5px var(--zg-brand)}.zg-tt__add{box-shadow:inset 0 0 0 1.5px var(--zg-stroke);background:transparent;border:0;outline:1.5px dashed var(--zg-stroke);outline-offset:-1.5px}
330
+ .zg-pt{display:flex;gap:6px;flex-wrap:wrap}.zg-pt--v{flex-direction:column;flex-wrap:nowrap}.zg-pt button{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px;border-radius:8px;cursor:pointer;font:500 15px var(--zg-font);color:var(--zg-text-2);white-space:nowrap}.zg-pt button:hover{background:var(--zg-s2)}
331
+ .zg-pt button[aria-selected="true"]{background:var(--zg-brand);color:var(--zg-on-brand);box-shadow:0 4px 14px var(--zg-brand-glow)}
332
+ .zg-btn--tonal.zg-btn--sm{padding-inline:12px}
333
+ .zg-snack{display:inline-flex;align-items:center;gap:14px;min-height:44px;padding:0 16px;border-radius:8px;font:500 14px var(--zg-font);background:var(--zg-inv-bg);color:var(--zg-inv-fg);box-shadow:var(--zg-shadow-2)}.zg-snack button{all:unset;cursor:pointer;font-weight:700;font-size:13px;display:grid;place-items:center}
334
+ .zg-snack--tonal{background:color-mix(in oklch,var(--c) 18%,var(--zg-bg));color:var(--ct)}
335
+ .zg-tour{width:min(380px,100%);display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:12px;background:var(--zg-inv-bg);color:var(--zg-inv-fg);box-shadow:var(--zg-shadow-2)}.zg-tour .zg-ibtn{color:inherit}.zg-tour .zg-btn:not(.zg-btn--primary){background:oklch(0 0 0 / .08);color:inherit}
336
+ .zg-prof{padding:0;overflow:hidden}.zg-prof__cover{height:220px;background:linear-gradient(135deg,color-mix(in oklch,var(--zg-brand) 40%,var(--zg-s3)),color-mix(in oklch,var(--zg-sky) 30%,var(--zg-s2))) center/cover}
337
+ .zg-prof__row{display:flex;gap:20px;align-items:flex-end;flex-wrap:wrap;padding:0 24px 22px;margin-top:-44px}.zg-prof__av{border-radius:50%;box-shadow:0 0 0 5px var(--zg-bg);display:inline-flex}
338
+ .zg-split2{min-height:100%;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}.zg-split2__a{display:grid;place-items:center;padding:32px;background:linear-gradient(160deg,color-mix(in oklch,var(--zg-brand) 22%,var(--zg-s2)),var(--zg-s1));min-height:420px}.zg-split2__m{display:grid;place-items:center;padding:32px}
339
+ @media(max-width:820px){.zg-split2{grid-template-columns:1fr}.zg-split2__a{display:none}}
340
+
341
+
342
+ /* ./components4.css */
343
+ /* ── part 4 ── */
344
+ .zg-input--filled{border-radius:8px 8px 0 0;background:var(--zg-s3);box-shadow:inset 0 -2px 0 var(--zg-stroke)}.zg-input--underlined{border-radius:0;background:transparent;padding-inline-start:2px;box-shadow:inset 0 -1.5px 0 var(--zg-stroke)}.zg-input--solo{background:var(--zg-bg);box-shadow:var(--zg-shadow-1)}
345
+ .zg-input--filled:focus-within,.zg-input--underlined:focus-within{box-shadow:inset 0 -2px 0 var(--zg-brand)}
346
+ .zg-input--compact{--h:var(--zg-h-sm)}.zg-input:hover:not(:focus-within):not(.zg-input--error){background:var(--zg-s3)}.zg-input--disabled{opacity:.5;pointer-events:none}
347
+ .zg-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 4px;box-shadow:inset 0 1px 0 var(--zg-stroke)}
348
+ .zg-opt{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:18px;cursor:pointer;background:var(--zg-s1);box-shadow:inset 0 0 0 1px var(--zg-stroke);color:var(--zg-text-1)}.zg-opt:hover{background:var(--zg-s2)}
349
+ .zg-opt[aria-checked="true"]{background:var(--zg-brand-soft);box-shadow:inset 0 0 0 1.5px var(--zg-brand)}.zg-opt:focus-visible{outline:3px solid var(--zg-brand-soft)}.zg-opt__img{width:48px;height:48px;border-radius:12px;background:var(--zg-s3) center/cover}
350
+ .zg-opt .zg-check__box{flex:none}
351
+ .zg-rte{border-radius:20px;overflow:hidden;background:var(--zg-s2);box-shadow:var(--zg-rim)}.zg-rte__t{display:flex;align-items:center;flex-wrap:wrap;gap:2px;padding:6px 8px;box-shadow:inset 0 -1px 0 var(--zg-stroke)}
352
+ .zg-rte__c{min-height:140px;padding:14px 18px;outline:0;font:400 15px/1.6 var(--zg-font);color:var(--zg-text-1)}.zg-rte__c:empty::before{content:attr(data-ph);color:var(--zg-text-3)}.zg-rte__c:focus{box-shadow:inset 0 0 0 2px var(--zg-brand-soft)}
353
+ .zg-range2w{position:relative;height:28px}.zg-range2w>i{position:absolute;inset-inline:0;top:10px;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--zg-s3) var(--a),var(--zg-brand) var(--a),var(--zg-brand) var(--b),var(--zg-s3) var(--b))}
354
+ .zg-range2{position:absolute;inset:0;width:100%;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
355
+ .zg-range2::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 8px oklch(0 0 0 / .35);cursor:grab}.zg-range2::-moz-range-thumb{pointer-events:auto;width:22px;height:22px;border:0;border-radius:50%;background:#fff;box-shadow:0 2px 8px oklch(0 0 0 / .35)}
356
+ .zg-cal__d[data-mid]{background:var(--zg-brand-soft);border-radius:0}
357
+ .zg-stepdlg{max-width:860px;flex-direction:row;min-height:420px}.zg-stepdlg__s{width:240px;flex:none;display:flex;flex-direction:column;gap:18px;padding:24px 20px;background:var(--zg-s1);box-shadow:inset -1px 0 0 var(--zg-stroke)}
358
+ .zg-stepdlg__i{display:flex;gap:12px;align-items:center;color:var(--zg-text-3)}.zg-stepdlg__i.is-cur{color:var(--zg-text-1)}.zg-stepdlg__i.is-cur .zg-step__n{background:var(--zg-brand);color:var(--zg-on-brand)}.zg-stepdlg__i.is-done .zg-step__n{background:var(--zg-brand-soft);color:var(--zg-brand-text)}
359
+ @media(max-width:700px){.zg-stepdlg{flex-direction:column}.zg-stepdlg__s{width:auto;flex-direction:row;overflow-x:auto}}
360
+ .zg-fsd{position:fixed;inset:0;z-index:210;display:flex;flex-direction:column;background:var(--zg-bg)}.zg-fsd__h{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--zg-brand);color:var(--zg-on-brand)}.zg-fsd__h .zg-ibtn{color:inherit}.zg-fsd__b{flex:1;overflow:auto;padding:24px;display:flex;flex-direction:column;gap:16px}
361
+
362
+
363
+ /* ./components5.css */
364
+ /* ── page templates ── */
365
+ .zg-pgroot{display:block;min-width:0;width:100%}.zg-pg{display:flex;flex-direction:column;gap:16px;min-width:0}.zg-pg__r{min-width:0}
366
+ .zg-pg__auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--min,340px)),1fr));gap:16px;align-items:start;min-width:0}
367
+ .zg-pg__two{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;min-width:0}.zg-pg__main{flex:999 1 460px;min-width:0;display:flex;flex-direction:column;gap:16px}.zg-pg__side{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:16px}.zg-pg__aside{flex:1 1 260px;min-width:0;max-width:100%;display:flex;flex-direction:column;gap:16px}
368
+ .zg-pgauth{position:relative;min-height:100%;display:grid;place-items:center;padding:24px}.zg-pgauth__bg{position:absolute;inset:0;overflow:hidden}.zg-pgauth__c{position:relative;width:100%;max-width:440px}
369
+
370
+
371
+ /* ./components6.css */
372
+ /* ── part 6 ── */
373
+ .zg-ctx{display:contents}.zg-ctx__scrim{position:fixed;inset:0;z-index:220}
374
+ .zg-sort{display:flex;flex-direction:column;gap:6px}.zg-sort__i{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 12px;border-radius:16px;background:var(--zg-s1);box-shadow:var(--zg-rim);cursor:grab}.zg-sort__i:hover{background:var(--zg-s2)}
375
+ .zg-sort__i.is-over{box-shadow:inset 0 2px 0 var(--zg-brand),var(--zg-rim)}.zg-sort__i.is-drag{opacity:.4}.zg-sort__h{color:var(--zg-text-3);display:flex}
376
+ .zg-map{position:relative;overflow:hidden;border-radius:28px;background:var(--zg-s2);box-shadow:var(--zg-rim);touch-action:none;cursor:grab;user-select:none}.zg-map:active{cursor:grabbing}
377
+ .zg-pin{position:absolute;transform:translate(-50%,-100%);width:34px;height:34px;border:0;border-radius:50% 50% 50% 4px;rotate:-45deg;display:grid;place-items:center;cursor:pointer;background:var(--c,var(--zg-brand));color:var(--zg-on-brand);box-shadow:0 6px 16px oklch(0 0 0 / .4)}.zg-pin>*{rotate:45deg}
378
+ .zg-map__z{position:absolute;inset-inline-end:12px;top:12px;display:flex;flex-direction:column;gap:6px}.zg-map__c{position:absolute;inset-inline-start:10px;bottom:6px;font:500 10px var(--zg-font);color:var(--zg-text-3);background:color-mix(in oklch,var(--zg-bg) 70%,transparent);padding:2px 8px;border-radius:999px}
379
+ .zg-imgup{position:relative;display:grid;place-items:center;width:100%;cursor:pointer;overflow:hidden;background:var(--zg-s2) center/cover;box-shadow:inset 0 0 0 1.5px var(--zg-stroke)}.zg-imgup:hover{box-shadow:inset 0 0 0 1.5px var(--zg-brand)}
380
+ .zg-imgup__e{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--zg-text-3)}.zg-imgup__o{position:absolute;inset-inline-end:8px;bottom:8px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--zg-brand);color:var(--zg-on-brand);box-shadow:0 4px 12px var(--zg-brand-glow)}
381
+ .zg-saver{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:var(--zg-bg);outline:0;cursor:pointer;overflow:hidden}.zg-saver__g{position:absolute;width:60vmin;height:60vmin;border-radius:50%;background:color-mix(in oklch,var(--zg-brand) 28%,transparent);filter:blur(110px);transition:left 1s linear,top 1s linear}
382
+ .zg-saver__c{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}.zg-saver__m{width:72px;height:72px;background:center/contain no-repeat;opacity:.9}
383
+ .zg-tourov{position:fixed;inset:0;z-index:250}.zg-tourov__full{position:absolute;inset:0;background:oklch(0.1 0 0 / .7)}.zg-tourov__cut{position:absolute;border-radius:14px;box-shadow:0 0 0 9999px oklch(0.1 0 0 / .7),0 0 0 2px var(--zg-brand);pointer-events:none}
384
+ .zg-rte__c blockquote{margin:8px 0;padding:4px 14px;border-inline-start:3px solid var(--zg-brand);color:var(--zg-text-2)}.zg-rte__c pre{margin:8px 0;padding:12px 14px;border-radius:12px;background:oklch(0.17 0.006 240);color:oklch(0.9 0.01 240);font:500 13px var(--zg-font-mono);overflow:auto;direction:ltr;text-align:left}
385
+ /* focus + disabled audit */
386
+ .zg-btn:focus-visible,.zg-ibtn:focus-visible,.zg-chip:focus-visible,.zg-chip2 button:focus-visible,.zg-tt__i:focus-visible,.zg-pt button:focus-visible,.zg-navitem:focus-visible,.zg-menu__i:focus-visible,.zg-check:focus-visible,.zg-switch:focus-visible,.zg-cal__d:focus-visible,.zg-acc__h:focus-visible,.zg-tree__n:focus-visible,.zg-room:focus-visible,.zg-pin:focus-visible,.zg-sort__i:focus-visible,.zg-inline:focus-visible{outline:3px solid var(--zg-brand-soft);outline-offset:2px}
387
+ .zg-btn:disabled,.zg-ibtn:disabled,.zg-chip:disabled,[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none}.zg-tt__i:hover,.zg-chip:hover:not([aria-pressed="true"]){background:var(--zg-s2)}.zg-room:hover,.zg-hotel:hover,.zg-lead:hover{box-shadow:var(--zg-rim),var(--zg-shadow-1)}.zg-table tbody tr:hover{background:var(--zg-s1)}
388
+ /* mobile */
389
+ @media(max-width:720px){.zg-shell__main{padding:14px;gap:14px}.zg-page-head h1{font-size:28px}.zg-hero{flex-direction:column;align-items:flex-start}.zg-hero__img{align-self:flex-end}.zg-strip__i+.zg-strip__i{box-shadow:inset 0 1px 0 var(--zg-stroke)}
390
+ .zg-modal-scrim{align-items:flex-end;padding:0}.zg-modal{max-width:100%;max-height:90vh;border-radius:28px 28px 0 0}.zg-prof__cover{height:150px}.zg-prof__av .zg-avatar{--s:84px!important}.zg-prof__row{margin-top:-34px;padding:0 16px 18px}.zg-map{border-radius:20px}.zg-opt{padding:12px}.zg-fsd__b{padding:16px}.zg-pt{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.zg-es--page{min-height:50vh}}
391
+
392
+
393
+ /* ./components7.css */
394
+ /* components, part 7 — gluestack parity */
395
+ .zg-heading{margin:0;font-family:var(--zg-font);font-weight:300;letter-spacing:-.03em;line-height:1.1;color:var(--zg-text-1)}
396
+ .zg-heading--xs{font-size:16px}.zg-heading--sm{font-size:20px}.zg-heading--md{font-size:24px}.zg-heading--lg{font-size:clamp(26px,3vw,32px)}.zg-heading--xl{font-size:clamp(30px,4vw,44px)}.zg-heading--2xl{font-size:clamp(36px,6vw,64px)}
397
+ .zg-heading--brand{color:var(--zg-brand-text)}
398
+ .zg-text{margin:0;font-family:var(--zg-font);color:var(--zg-text-1);line-height:1.5}
399
+ .zg-text--xs{font-size:12px}.zg-text--sm{font-size:14px}.zg-text--md{font-size:16px}.zg-text--lg{font-size:18px}
400
+ .zg-text--muted{color:var(--zg-text-2)}.zg-text--subtle{color:var(--zg-text-3)}.zg-text--brand{color:var(--zg-brand-text)}.zg-text--bold{font-weight:600}
401
+ .zg-text--truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
402
+ .zg-box{box-sizing:border-box}
403
+ .zg-center{display:flex;align-items:center;justify-content:center}
404
+ .zg-stack{display:flex}
405
+ .zg-grid{display:grid}
406
+ .zg-link{color:var(--zg-brand-text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in oklch,var(--zg-brand-text) 40%,transparent);display:inline-flex;align-items:center;gap:4px;border-radius:4px}
407
+ .zg-link:hover{text-decoration-color:currentColor}.zg-link:focus-visible{outline:2px solid var(--zg-brand);outline-offset:2px}.zg-link--plain{text-decoration:none}
408
+ .zg-press{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;border-radius:12px;-webkit-tap-highlight-color:transparent}
409
+ .zg-press:active{opacity:.7}.zg-press:focus-visible{outline:2px solid var(--zg-brand);outline-offset:2px}.zg-press[disabled]{opacity:.45;cursor:not-allowed}
410
+ .zg-liquid{position:relative;border-radius:var(--zg-liquid-r,24px);padding:20px;background:linear-gradient(135deg,color-mix(in oklch,var(--zg-text-1) 14%,transparent),color-mix(in oklch,var(--zg-text-1) 4%,transparent));backdrop-filter:blur(var(--zg-liquid-b,18px)) saturate(1.8);-webkit-backdrop-filter:blur(var(--zg-liquid-b,18px)) saturate(1.8);box-shadow:inset 0 1px 0 color-mix(in oklch,var(--zg-text-1) 30%,transparent),inset 0 -1px 0 color-mix(in oklch,var(--zg-text-1) 8%,transparent),0 12px 32px oklch(0 0 0/.25);border:1px solid var(--zg-stroke);overflow:hidden}
411
+ .zg-sheet-scrim{align-items:flex-end;justify-content:center;padding:0}
412
+ .zg-sheet{width:min(560px,100%);display:flex;flex-direction:column;gap:12px;padding:10px 20px 20px;border-radius:28px 28px 0 0;background:var(--zg-s1);box-shadow:var(--zg-rim),var(--zg-shadow-1);overflow:auto;animation:zg-sheet-in .22s ease-out}
413
+ .zg-sheet__grab{align-self:center;width:40px;height:4px;border-radius:2px;background:var(--zg-stroke);flex:none;margin-block:2px 4px}
414
+ .zg-sheet__t{margin:0;font:500 18px var(--zg-font)}.zg-sheet__b{display:flex;flex-direction:column;gap:12px}.zg-sheet__f{display:flex;gap:8px;justify-content:flex-end}
415
+ @keyframes zg-sheet-in{from{transform:translateY(24px);opacity:0}}
416
+ @media (prefers-reduced-motion:reduce){.zg-sheet{animation:none}}
417
+ .zg-as{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:var(--zg-s2)}
418
+ .zg-as__i{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;padding:14px 16px;font:400 16px var(--zg-font);color:var(--zg-text-1);cursor:pointer}
419
+ .zg-as__i+.zg-as__i{box-shadow:inset 0 1px 0 var(--zg-stroke)}.zg-as__i:hover{background:color-mix(in oklch,var(--zg-text-1) 6%,transparent)}.zg-as__i:focus-visible{outline:2px solid var(--zg-brand);outline-offset:-2px}
420
+ .zg-as__i--danger{color:var(--zg-red)}.zg-as__i[disabled]{opacity:.45;cursor:not-allowed}
421
+ .zg-as__i--cancel{justify-content:center;font-weight:600;border-radius:16px;background:var(--zg-s2);margin-top:4px}
422
+ .zg-iv{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:oklch(0 0 0/.88);padding:56px 16px}
423
+ .zg-iv__img{max-width:100%;max-height:100%;object-fit:contain;border-radius:12px}
424
+ .zg-iv__x{position:absolute;top:12px;inset-inline-end:12px}.zg-iv__p{position:absolute;inset-inline-start:12px;top:50%}.zg-iv__n{position:absolute;inset-inline-end:12px;top:50%}
425
+ .zg-iv__c{position:absolute;bottom:16px;left:50%;transform:translateX(-50%)}
426
+ .zg-chat{display:flex;flex-direction:column;border-radius:24px;overflow:hidden;min-height:320px;max-height:560px}
427
+ .zg-chat__h{display:flex;flex-direction:column;gap:2px;padding:16px 20px;box-shadow:inset 0 -1px 0 var(--zg-stroke)}
428
+ .zg-chat__m{flex:1;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:16px 20px}
429
+ .zg-chat__b{max-width:82%;padding:10px 14px;border-radius:18px;line-height:1.45;font-size:15px;white-space:pre-wrap;overflow-wrap:anywhere}
430
+ .zg-chat__b--ai{align-self:flex-start;background:var(--zg-s2);border-end-start-radius:6px}
431
+ .zg-chat__b--user{align-self:flex-end;background:var(--zg-brand);color:var(--zg-on-brand,#000);border-end-end-radius:6px}
432
+ .zg-chat__dots{display:flex;gap:4px}.zg-chat__dots i{width:6px;height:6px;border-radius:50%;background:var(--zg-text-3);animation:zg-dot 1s infinite ease-in-out}.zg-chat__dots i:nth-child(2){animation-delay:.15s}.zg-chat__dots i:nth-child(3){animation-delay:.3s}
433
+ @keyframes zg-dot{0%,80%,100%{opacity:.3}40%{opacity:1}}
434
+ @media (prefers-reduced-motion:reduce){.zg-chat__dots i{animation:none}}
435
+ .zg-chat__f{display:flex;gap:8px;padding:12px 16px;box-shadow:inset 0 1px 0 var(--zg-stroke)}
436
+ .zg-chat__in{flex:1;min-width:0;height:44px;padding:0 14px;border-radius:22px;border:1px solid var(--zg-stroke);background:var(--zg-s2);color:var(--zg-text-1);font:400 15px var(--zg-font)}
437
+ .zg-chat__in:focus-visible{outline:2px solid var(--zg-brand);outline-offset:1px}
438
+
439
+
440
+ /* ./components8.css */
441
+ /* components, part 8 — surfaces, stacking and motion for popups, bars and dialogs */
442
+ .zg-select__list,.zg-menu,.zg-pop,.zg-hc__c{background:var(--zg-pop);-webkit-backdrop-filter:none;backdrop-filter:none;z-index:var(--zg-z-pop)}
443
+ .zg-select__list,.zg-menu,.zg-pop{transform-origin:top;animation:zg-pop-in .16s var(--zg-ease) both}
444
+ .zg-hc__c{transform-origin:top;transform:translateY(-4px) scale(.98);transition:opacity .16s var(--zg-ease),transform .16s var(--zg-ease),visibility .16s}
445
+ .zg-hc:hover .zg-hc__c,.zg-hc:focus-within .zg-hc__c{transform:none}
446
+ .zg-tip::after{z-index:var(--zg-z-pop)}
447
+ .zg-cal{background:transparent}
448
+ .zg-select__list .zg-cal,.zg-pop .zg-cal{padding:6px}
449
+ @keyframes zg-pop-in{from{opacity:0;transform:translateY(-6px) scale(.97)}}
450
+
451
+ .zg-card:has(.zg-select__list),.zg-card:has(.zg-menu),.zg-card:has(.zg-pop),.zg-card:has(.zg-hc:hover),.zg-card:has(.zg-tip:hover),
452
+ .zg-glass:has(.zg-select__list),.zg-glass:has(.zg-menu),.zg-glass:has(.zg-pop),.zg-glass:has(.zg-hc:hover),.zg-glass:has(.zg-tip:hover){position:relative;z-index:var(--zg-z-pop)}
453
+
454
+ .zg-topnav,.zg-shell__bar{z-index:var(--zg-z-bar);background:color-mix(in oklch,var(--zg-bg) 94%,transparent)}
455
+ .zg-sidenav{background:color-mix(in oklch,var(--zg-bg) 94%,transparent)}
456
+
457
+ .zg-modal-scrim{z-index:var(--zg-z-modal);animation:zg-fade-in .18s var(--zg-ease) both}
458
+ .zg-modal{background:var(--zg-pop);-webkit-backdrop-filter:none;backdrop-filter:none;animation:zg-modal-in .22s var(--zg-ease) both}
459
+ .zg-drawer-scrim--end .zg-drawer{animation-name:zg-drawer-in-end}
460
+ .zg-drawer-scrim--start .zg-drawer{animation-name:zg-drawer-in-start}
461
+ .zg-sheet{background:var(--zg-pop)}
462
+ @keyframes zg-fade-in{from{opacity:0}}
463
+ @keyframes zg-modal-in{from{opacity:0;transform:translateY(12px) scale(.97)}}
464
+ @keyframes zg-drawer-in-end{from{transform:translateX(32px);opacity:0}}
465
+ @keyframes zg-drawer-in-start{from{transform:translateX(-32px);opacity:0}}
466
+ @media (prefers-reduced-motion:reduce){.zg-select__list,.zg-menu,.zg-pop,.zg-modal-scrim,.zg-modal,.zg-drawer{animation:none}.zg-hc__c{transition:none}}
467
+
468
+ .zg-bell__n{color:oklch(0.16 0.03 25)}
469
+ [data-theme="light"] .zg-bell__n{color:#fff}
470
+ .zg-inc__ok{color:oklch(0.16 0.03 150)}
471
+ [data-theme="light"] .zg-inc__ok{color:#fff}
472
+
473
+ /* disabled states: switch, checkbox/radio, options, menu items */
474
+ .zg-switch:disabled,.zg-check:disabled,.zg-switch[aria-disabled="true"],.zg-check[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:auto}
475
+ .zg-select__opt:disabled,.zg-menu__i:disabled,.zg-tree__n:disabled{opacity:.45;cursor:not-allowed;pointer-events:auto;background:none}
476
+ .zg-select__opt:disabled:hover,.zg-menu__i:disabled:hover,.zg-tree__n:disabled:hover{background:none}
477
+ [role="radiogroup"][aria-disabled="true"]{opacity:1;pointer-events:auto;cursor:not-allowed}
478
+ .zg-drop{display:contents}.zg-drop>.zg-kcol{transition:box-shadow .15s,background .15s}.zg-drop[data-over="true"]>.zg-kcol{background:var(--zg-brand-soft);box-shadow:inset 0 0 0 2px var(--zg-brand)}.zg-drag{cursor:grab}.zg-drag:active{cursor:grabbing}
479
+ /* default Button variant is intentional: matches the base .zg-btn look */
480
+ .zg-btn--secondary{background:var(--zg-s2);color:var(--zg-text-1);box-shadow:var(--zg-rim)}.zg-btn--secondary:hover{background:var(--zg-s3)}
481
+ /* Pagination: ellipsis + prev/next */
482
+ .zg-pager{align-items:center}.zg-pager__gap{min-width:24px;text-align:center;color:var(--zg-text-3);font:600 13px var(--zg-font);user-select:none}
483
+ .zg-pager button:disabled{opacity:.4;cursor:not-allowed}.zg-pager__nav{display:inline-flex;align-items:center;justify-content:center;padding:0}
484
+ [dir="rtl"] .zg-pager__nav .zg-icon{transform:scaleX(-1)}
485
+ /* CommandPalette active row, dialog focus */
486
+ .zg-menu__i.is-active,.zg-menu__i[aria-selected="true"]{background:var(--zg-s2)}
487
+ .zg-modal:focus,.zg-sheet:focus,.zg-fsd:focus,.zg-saver:focus{outline:0}
488
+
489
+
490
+ /* ./sizes/typography.css */
491
+ /* size overrides for the typography group. Only [data-size] selectors, see the size scale at the end of tokens.css */
492
+ .zg-text--xl{font-size:20px}
493
+ .zg-code-b[data-size="xs"] pre{font-size:11px;padding:10px}.zg-code-b[data-size="xs"] .zg-code-b__h{font-size:11px;padding:4px 4px 4px 10px}
494
+ .zg-code-b[data-size="sm"] pre{font-size:12px;padding:12px}.zg-code-b[data-size="sm"] .zg-code-b__h{font-size:11px;padding:6px 6px 6px 12px}
495
+ .zg-code-b[data-size="lg"] pre{font-size:14px;padding:20px}.zg-code-b[data-size="lg"] .zg-code-b__h{font-size:13px;padding:10px 10px 10px 20px}
496
+ .zg-code-b[data-size="xl"] pre{font-size:16px;padding:24px}.zg-code-b[data-size="xl"] .zg-code-b__h{font-size:14px;padding:12px 12px 12px 24px}
497
+ .zg-kbd[data-size="xs"]{min-width:18px;height:18px;padding:0 4px;font-size:10px;border-radius:5px}
498
+ .zg-kbd[data-size="sm"]{min-width:20px;height:20px;padding:0 5px;font-size:10.5px;border-radius:6px}
499
+ .zg-kbd[data-size="lg"]{min-width:26px;height:26px;padding:0 8px;font-size:12px;border-radius:8px}
500
+ .zg-kbd[data-size="xl"]{min-width:30px;height:30px;padding:0 10px;font-size:14px;border-radius:9px}
501
+ .zg-link[data-size="xs"]{font-size:.8em}.zg-link[data-size="sm"]{font-size:.9em}.zg-link[data-size="lg"]{font-size:1.1em}.zg-link[data-size="xl"]{font-size:1.25em}
502
+ .zg-link[data-size="xs"],.zg-link[data-size="sm"]{gap:3px}.zg-link[data-size="lg"],.zg-link[data-size="xl"]{gap:6px}
503
+
504
+
505
+ /* ./sizes/layout.css */
506
+ /* size overrides for the layout group. Only [data-size] selectors, see the size scale at the end of tokens.css */
507
+ .zg-div[data-size="xs"]{font-size:10px;gap:8px}.zg-div[data-size="sm"]{font-size:11px;gap:10px}.zg-div[data-size="lg"]{font-size:13px;gap:14px}.zg-div[data-size="xl"]{font-size:15px;gap:16px}
508
+ .zg-setsec[data-size="xs"]{padding:10px 0;gap:12px}.zg-setsec[data-size="sm"]{padding:14px 0;gap:16px}.zg-setsec[data-size="lg"]{padding:26px 0;gap:32px}.zg-setsec[data-size="xl"]{padding:34px 0;gap:40px}
509
+ .zg-setsec[data-size="xs"] b{font-size:13px!important}.zg-setsec[data-size="sm"] b{font-size:14px!important}.zg-setsec[data-size="lg"] b{font-size:18px!important}.zg-setsec[data-size="xl"] b{font-size:21px!important}
510
+ .zg-setsec[data-size="xs"] .zg-hint{font-size:11px!important}.zg-setsec[data-size="sm"] .zg-hint{font-size:12px!important}.zg-setsec[data-size="lg"] .zg-hint{font-size:14px!important}.zg-setsec[data-size="xl"] .zg-hint{font-size:15px!important}
511
+ .zg-setsec[data-size="xs"]>.zg-field{gap:8px!important}.zg-setsec[data-size="sm"]>.zg-field{gap:10px!important}.zg-setsec[data-size="lg"]>.zg-field{gap:18px!important}.zg-setsec[data-size="xl"]>.zg-field{gap:22px!important}
512
+ .zg-page-head[data-size="xs"] h1{font-size:20px}.zg-page-head[data-size="sm"] h1{font-size:24px}.zg-page-head[data-size="lg"] h1{font-size:clamp(32px,3.6vw,48px)}.zg-page-head[data-size="xl"] h1{font-size:clamp(38px,4.4vw,58px)}
513
+ .zg-page-head[data-size="xs"] p{font-size:12px}.zg-page-head[data-size="sm"] p{font-size:13px}.zg-page-head[data-size="lg"] p{font-size:17px}.zg-page-head[data-size="xl"] p{font-size:19px}
514
+ .zg-page-head[data-size="xs"]{gap:8px}.zg-page-head[data-size="sm"]{gap:12px}.zg-page-head[data-size="lg"]{gap:20px}.zg-page-head[data-size="xl"]{gap:24px}
515
+ .zg-liquid[data-size="xs"]{padding:8px}.zg-liquid[data-size="sm"]{padding:12px}.zg-liquid[data-size="lg"]{padding:28px}.zg-liquid[data-size="xl"]{padding:36px}
516
+ .zg-foot[data-size="xs"]{padding:8px 4px;gap:8px}.zg-foot[data-size="sm"]{padding:12px 4px;gap:12px}.zg-foot[data-size="lg"]{padding:24px 4px;gap:20px}.zg-foot[data-size="xl"]{padding:32px 4px;gap:24px}
517
+ .zg-foot[data-size="xs"] span,.zg-foot[data-size="xs"] a{font-size:11px!important}.zg-foot[data-size="sm"] span,.zg-foot[data-size="sm"] a{font-size:12px!important}.zg-foot[data-size="lg"] span,.zg-foot[data-size="lg"] a{font-size:15px!important}.zg-foot[data-size="xl"] span,.zg-foot[data-size="xl"] a{font-size:17px!important}
518
+ .zg-sort[data-size="xs"]{gap:4px;font-size:.8em}.zg-sort[data-size="sm"]{gap:5px;font-size:.9em}.zg-sort[data-size="lg"]{gap:8px;font-size:1.1em}.zg-sort[data-size="xl"]{gap:10px;font-size:1.25em}
519
+ .zg-sort[data-size="xs"] .zg-sort__i{padding:3px 4px 3px 8px;gap:6px;border-radius:10px}.zg-sort[data-size="sm"] .zg-sort__i{padding:5px 6px 5px 10px;gap:8px;border-radius:13px}
520
+ .zg-sort[data-size="lg"] .zg-sort__i{padding:11px 11px 11px 15px;gap:12px}.zg-sort[data-size="xl"] .zg-sort__i{padding:14px 14px 14px 18px;gap:14px}
521
+
522
+
523
+ /* ./sizes/actions.css */
524
+ /* size overrides for the actions group. Only [data-size] selectors, see the size scale at the end of tokens.css */
525
+ .zg-btn[data-size="xs"]{--h:28px;font-size:12px;gap:6px}
526
+ .zg-btn[data-size="sm"]{--h:32px;font-size:13px;gap:8px}
527
+ .zg-btn[data-size="md"]{--h:40px;font-size:14px;gap:8px}
528
+ .zg-btn[data-size="lg"]{--h:48px;font-size:15px;gap:10px}
529
+ .zg-btn[data-size="xl"]{--h:56px;font-size:16px;gap:12px}
530
+ .zg-btn[data-size="xs"] .zg-icon{width:14px!important;height:14px!important}
531
+ .zg-btn[data-size="sm"] .zg-icon{width:16px!important;height:16px!important}
532
+ .zg-btn[data-size="md"] .zg-icon{width:18px!important;height:18px!important}
533
+ .zg-btn[data-size="lg"] .zg-icon{width:20px!important;height:20px!important}
534
+ .zg-btn[data-size="xl"] .zg-icon{width:22px!important;height:22px!important}
535
+ .zg-ibtn[data-size="xs"]{--h:28px}
536
+ .zg-ibtn[data-size="sm"]{--h:32px}
537
+ .zg-ibtn[data-size="md"]{--h:40px}
538
+ .zg-ibtn[data-size="lg"]{--h:48px}
539
+ .zg-ibtn[data-size="xl"]{--h:56px}
540
+ .zg-chip2[data-size="xs"]{height:22px;font-size:11px;padding:0 8px;gap:4px}
541
+ .zg-chip2[data-size="sm"]{height:26px;font-size:12px;padding:0 10px;gap:5px}
542
+ .zg-chip2[data-size="md"]{height:32px;font-size:13px;padding:0 12px;gap:6px}
543
+ .zg-chip2[data-size="lg"]{height:38px;font-size:14px;padding:0 16px;gap:8px}
544
+ .zg-chip2[data-size="xl"]{height:46px;font-size:15px;padding:0 20px;gap:10px}
545
+ .zg-chip2[data-size="xs"] .zg-icon{width:12px!important;height:12px!important}
546
+ .zg-chip2[data-size="sm"] .zg-icon{width:13px!important;height:13px!important}
547
+ .zg-chip2[data-size="md"] .zg-icon{width:14px!important;height:14px!important}
548
+ .zg-chip2[data-size="lg"] .zg-icon{width:16px!important;height:16px!important}
549
+ .zg-chip2[data-size="xl"] .zg-icon{width:18px!important;height:18px!important}
550
+ .zg-chip2[data-size="xs"] button{width:14px;height:14px}
551
+ .zg-chip2[data-size="sm"] button{width:16px;height:16px}
552
+ .zg-chip2[data-size="md"] button{width:18px;height:18px}
553
+ .zg-chip2[data-size="lg"] button{width:20px;height:20px}
554
+ .zg-chip2[data-size="xl"] button{width:24px;height:24px}
555
+ .zg-badge[data-size="xs"]{height:18px;font-size:10px;padding:0 7px;gap:4px}
556
+ .zg-badge[data-size="sm"]{height:20px;font-size:11px;padding:0 8px;gap:5px}
557
+ .zg-badge[data-size="md"]{height:24px;font-size:12px;padding:0 10px;gap:6px}
558
+ .zg-badge[data-size="lg"]{height:28px;font-size:13px;padding:0 12px;gap:7px}
559
+ .zg-badge[data-size="xl"]{height:32px;font-size:14px;padding:0 14px;gap:8px}
560
+ .zg-badge[data-size="xs"] .zg-badge__dot{width:4px;height:4px}
561
+ .zg-badge[data-size="sm"] .zg-badge__dot{width:5px;height:5px}
562
+ .zg-badge[data-size="md"] .zg-badge__dot{width:6px;height:6px}
563
+ .zg-badge[data-size="lg"] .zg-badge__dot{width:7px;height:7px}
564
+ .zg-badge[data-size="xl"] .zg-badge__dot{width:8px;height:8px}
565
+ .zg-tag[data-size="xs"]{height:22px;font-size:11px;padding:0 5px 0 10px;gap:5px}
566
+ .zg-tag[data-size="sm"]{height:24px;font-size:12px;padding:0 5px 0 10px;gap:5px}
567
+ .zg-tag[data-size="md"]{height:28px;font-size:13px;padding:0 6px 0 12px;gap:6px}
568
+ .zg-tag[data-size="lg"]{height:34px;font-size:14px;padding:0 7px 0 14px;gap:8px}
569
+ .zg-tag[data-size="xl"]{height:40px;font-size:15px;padding:0 8px 0 16px;gap:10px}
570
+ .zg-tag[data-size="xs"]:not(:has(button)){padding-inline-end:10px}
571
+ .zg-tag[data-size="sm"]:not(:has(button)){padding-inline-end:10px}
572
+ .zg-tag[data-size="md"]:not(:has(button)){padding-inline-end:12px}
573
+ .zg-tag[data-size="lg"]:not(:has(button)){padding-inline-end:14px}
574
+ .zg-tag[data-size="xl"]:not(:has(button)){padding-inline-end:16px}
575
+ .zg-tag[data-size="xs"] button{width:16px;height:16px}
576
+ .zg-tag[data-size="sm"] button{width:18px;height:18px}
577
+ .zg-tag[data-size="md"] button{width:20px;height:20px}
578
+ .zg-tag[data-size="lg"] button{width:24px;height:24px}
579
+ .zg-tag[data-size="xl"] button{width:28px;height:28px}
580
+ .zg-fab[data-size="xs"]{height:36px;font-size:12px;padding:0 12px;gap:6px}
581
+ .zg-fab[data-size="sm"]{height:44px;font-size:13px;padding:0 16px;gap:8px}
582
+ .zg-fab[data-size="md"]{height:56px;font-size:15px;padding:0 20px;gap:10px}
583
+ .zg-fab[data-size="lg"]{height:64px;font-size:16px;padding:0 24px;gap:12px}
584
+ .zg-fab[data-size="xl"]{height:72px;font-size:18px;padding:0 28px;gap:14px}
585
+ .zg-fab[data-size="xs"] .zg-icon{width:16px!important;height:16px!important}
586
+ .zg-fab[data-size="sm"] .zg-icon{width:18px!important;height:18px!important}
587
+ .zg-fab[data-size="md"] .zg-icon{width:20px!important;height:20px!important}
588
+ .zg-fab[data-size="lg"] .zg-icon{width:22px!important;height:22px!important}
589
+ .zg-fab[data-size="xl"] .zg-icon{width:26px!important;height:26px!important}
590
+ .zg-seg[data-size="xs"] button{height:22px;font-size:11px;padding:0 8px}
591
+ .zg-seg[data-size="sm"] button{height:26px;font-size:12px;padding:0 10px}
592
+ .zg-seg[data-size="md"] button{height:32px;font-size:13px;padding:0 14px}
593
+ .zg-seg[data-size="lg"] button{height:40px;font-size:14px;padding:0 18px}
594
+ .zg-seg[data-size="xl"] button{height:48px;font-size:15px;padding:0 22px}
595
+ .zg-seg[data-size="xs"] button{gap:4px;display:inline-flex;align-items:center;justify-content:center}
596
+ .zg-seg[data-size="sm"] button{gap:4px;display:inline-flex;align-items:center;justify-content:center}
597
+ .zg-seg[data-size="md"] button{gap:4px;display:inline-flex;align-items:center;justify-content:center}
598
+ .zg-seg[data-size="lg"] button{gap:5px;display:inline-flex;align-items:center;justify-content:center}
599
+ .zg-seg[data-size="xl"] button{gap:5px;display:inline-flex;align-items:center;justify-content:center}
600
+ .zg-seg[data-size="xs"] .zg-icon{width:12px!important;height:12px!important}
601
+ .zg-seg[data-size="sm"] .zg-icon{width:14px!important;height:14px!important}
602
+ .zg-seg[data-size="md"] .zg-icon{width:16px!important;height:16px!important}
603
+ .zg-seg[data-size="lg"] .zg-icon{width:18px!important;height:18px!important}
604
+ .zg-seg[data-size="xl"] .zg-icon{width:20px!important;height:20px!important}
605
+ .zg-chips[data-size="xs"]{gap:6px}
606
+ .zg-chips[data-size="sm"]{gap:6px}
607
+ .zg-chips[data-size="md"]{gap:8px}
608
+ .zg-chips[data-size="lg"]{gap:10px}
609
+ .zg-chips[data-size="xl"]{gap:12px}
610
+ .zg-chips[data-size="xs"] .zg-chip{height:26px;font-size:11px;padding:0 10px}
611
+ .zg-chips[data-size="sm"] .zg-chip{height:30px;font-size:12px;padding:0 12px}
612
+ .zg-chips[data-size="md"] .zg-chip{height:34px;font-size:13px;padding:0 14px}
613
+ .zg-chips[data-size="lg"] .zg-chip{height:42px;font-size:14px;padding:0 18px}
614
+ .zg-chips[data-size="xl"] .zg-chip{height:50px;font-size:15px;padding:0 22px}
615
+ .zg-rail[data-size="xs"]{gap:2px;padding:4px}
616
+ .zg-rail[data-size="sm"]{gap:3px;padding:5px}
617
+ .zg-rail[data-size="md"]{gap:4px;padding:6px}
618
+ .zg-rail[data-size="lg"]{gap:6px;padding:8px}
619
+ .zg-rail[data-size="xl"]{gap:8px;padding:10px}
620
+ .zg-rail[data-size="xs"] .zg-ibtn{--h:28px}
621
+ .zg-rail[data-size="sm"] .zg-ibtn{--h:32px}
622
+ .zg-rail[data-size="md"] .zg-ibtn{--h:40px}
623
+ .zg-rail[data-size="lg"] .zg-ibtn{--h:48px}
624
+ .zg-rail[data-size="xl"] .zg-ibtn{--h:56px}
625
+ .zg-card[data-size="xs"]{padding:10px;gap:8px}
626
+ .zg-card[data-size="sm"]{padding:14px;gap:10px}
627
+ .zg-card[data-size="md"]{padding:20px;gap:14px}
628
+ .zg-card[data-size="lg"]{padding:26px;gap:18px}
629
+ .zg-card[data-size="xl"]{padding:32px;gap:22px}
630
+ .zg-card[data-size="xs"] .zg-card__title{font-size:13px}
631
+ .zg-card[data-size="sm"] .zg-card__title{font-size:15px}
632
+ .zg-card[data-size="md"] .zg-card__title{font-size:18px}
633
+ .zg-card[data-size="lg"] .zg-card__title{font-size:20px}
634
+ .zg-card[data-size="xl"] .zg-card__title{font-size:21px}
635
+ .zg-card[data-size="xs"] .zg-card__sub{font-size:11px}
636
+ .zg-card[data-size="sm"] .zg-card__sub{font-size:12px}
637
+ .zg-card[data-size="md"] .zg-card__sub{font-size:13px}
638
+ .zg-card[data-size="lg"] .zg-card__sub{font-size:14px}
639
+ .zg-card[data-size="xl"] .zg-card__sub{font-size:15px}
640
+ .zg-card[data-size="xs"] .zg-card__head .zg-ibtn{--h:24px}
641
+ .zg-card[data-size="sm"] .zg-card__head .zg-ibtn{--h:28px}
642
+ .zg-card[data-size="md"] .zg-card__head .zg-ibtn{--h:32px}
643
+ .zg-card[data-size="lg"] .zg-card__head .zg-ibtn{--h:36px}
644
+ .zg-card[data-size="xl"] .zg-card__head .zg-ibtn{--h:40px}
645
+ .zg-dd[data-size="xs"]>.zg-ibtn{--h:28px}
646
+ .zg-dd[data-size="sm"]>.zg-ibtn{--h:32px}
647
+ .zg-dd[data-size="md"]>.zg-ibtn{--h:40px}
648
+ .zg-dd[data-size="lg"]>.zg-ibtn{--h:48px}
649
+ .zg-dd[data-size="xl"]>.zg-ibtn{--h:56px}
650
+
651
+
652
+ /* ./sizes/forms.css */
653
+ /* size overrides for the forms group. Only [data-size] selectors, see the size scale at the end of tokens.css */
654
+ [data-size]{
655
+ --zg-fm-h:calc(var(--zg-sz-h) + 8px);
656
+ --zg-fm-fs:calc(var(--zg-sz-fs) + 1px);
657
+ --zg-fm-px:calc(var(--zg-sz-px) + 2px);
658
+ --zg-fm-btn:calc(var(--zg-sz-h) - 8px);
659
+ --zg-fm-box:calc(var(--zg-sz-h) * .55);
660
+ --zg-fm-sw:calc(var(--zg-sz-h) * .65);
661
+ --zg-fm-iu:calc(var(--zg-sz-h) * 4);
662
+ }
663
+
664
+ /* ---- text-like inputs: label, hint, shared .zg-input chrome ---- */
665
+ .zg-field[data-size] .zg-label{font-size:max(12px,calc(var(--zg-sz-fs) - 1px))}
666
+ .zg-field[data-size] .zg-hint{font-size:max(11px,calc(var(--zg-sz-fs) - 2px))}
667
+ .zg-field[data-size] .zg-input{--h:var(--zg-fm-h);gap:var(--zg-sz-gap);padding:0 6px 0 var(--zg-fm-px)}
668
+ .zg-field[data-size] .zg-input input{font-size:var(--zg-fm-fs)}
669
+ .zg-field[data-size] .zg-input.zg-num-in{padding:0 6px}
670
+ .zg-field[data-size] .zg-input.zg-chipin{min-height:var(--zg-fm-h);height:auto;padding:6px calc(var(--zg-sz-px) - 4px)}
671
+ .zg-field[data-size] .zg-chipin .zg-tag{height:calc(var(--zg-sz-h) * .7);font-size:calc(var(--zg-sz-fs) - 1px)}
672
+ .zg-field[data-size] .zg-chipin .zg-tag button{width:calc(var(--zg-sz-h) * .5);height:calc(var(--zg-sz-h) * .5)}
673
+ .zg-field[data-size] .zg-input .zg-ibtn{--h:var(--zg-fm-btn)}
674
+ .zg-field[data-size] .zg-num-in .zg-ibtn{--h:var(--zg-fm-btn)}
675
+ .zg-field[data-size] > div[style*="130px"]{grid-template-columns:calc(var(--zg-sz-h) * 3.25) minmax(0,1fr)!important}
676
+ .zg-field[data-size] .zg-ta{padding:calc(var(--zg-sz-pad) - 2px) var(--zg-fm-px);font-size:var(--zg-fm-fs);border-radius:calc(var(--zg-fm-h) / 2)}
677
+
678
+ /* compact inputs whose root is the .zg-input itself (SearchInput, InlineEdit editing) */
679
+ .zg-input[data-size]{--h:var(--zg-sz-h)!important;gap:var(--zg-sz-gap);padding:0 6px 0 var(--zg-fm-px)}
680
+ .zg-input[data-size] input{font-size:var(--zg-fm-fs)}
681
+ .zg-input[data-size] .zg-ibtn{--h:var(--zg-fm-btn)}
682
+ .zg-inline[data-size]{gap:calc(var(--zg-sz-gap) - 2px);padding:calc(var(--zg-sz-h) * .15) calc(var(--zg-sz-px) - 4px);font-size:var(--zg-fm-fs);border-radius:calc(var(--zg-sz-h) * .35)}
683
+
684
+ /* icons: md keeps the library defaults */
685
+ .zg-field[data-size]:not([data-size="md"]) .zg-input .zg-icon,
686
+ .zg-input[data-size]:not([data-size="md"]) .zg-icon,
687
+ .zg-field[data-size]:not([data-size="md"]) .zg-select__trigger .zg-icon,
688
+ .zg-field[data-size]:not([data-size="md"]) .zg-fdrop > .zg-icon,
689
+ .zg-inline[data-size]:not([data-size="md"]) .zg-icon{width:var(--zg-sz-icon)!important;height:var(--zg-sz-icon)!important}
690
+ .zg-field[data-size]:not([data-size="md"]) .zg-input .zg-ibtn .zg-icon,
691
+ .zg-input[data-size]:not([data-size="md"]) .zg-ibtn .zg-icon,
692
+ .zg-field[data-size]:not([data-size="md"]) .zg-rte__t .zg-icon,
693
+ .zg-field[data-size]:not([data-size="md"]) .zg-chipin .zg-tag .zg-icon{width:calc(var(--zg-sz-icon) - 2px)!important;height:calc(var(--zg-sz-icon) - 2px)!important}
694
+ .zg-field[data-size]:not([data-size="md"]) .zg-fdrop > .zg-icon{width:calc(var(--zg-sz-icon) + 6px)!important;height:calc(var(--zg-sz-icon) + 6px)!important}
695
+
696
+ /* ---- select-likes: trigger and popup rows ---- */
697
+ .zg-field[data-size] .zg-select__trigger{height:var(--zg-fm-h)!important;padding-inline:var(--zg-fm-px);font-size:var(--zg-fm-fs);gap:var(--zg-sz-gap)}
698
+ .zg-field[data-size] .zg-select__opt{height:calc(var(--zg-sz-h));padding:0 calc(var(--zg-sz-px) - 2px);font-size:var(--zg-sz-fs)}
699
+ .zg-field[data-size] .zg-select__opt .zg-check__box{width:calc(var(--zg-sz-h) * .45)!important;height:calc(var(--zg-sz-h) * .45)!important}
700
+ .zg-field[data-size] .zg-select__list .zg-empty{padding:calc(var(--zg-sz-pad) * 2.5) var(--zg-sz-pad);font-size:var(--zg-sz-fs)}
701
+ .zg-field[data-size] .zg-tree__n{min-height:calc(var(--zg-sz-h) - 4px);font-size:var(--zg-sz-fs);gap:calc(var(--zg-sz-gap) - 2px)}
702
+ .zg-field[data-size] .zg-select__list .zg-sidenav__group{font-size:max(11px,calc(var(--zg-sz-fs) - 2px))}
703
+ .zg-dd[data-size]>.zg-btn.zg-btn--tonal.zg-btn--sm{height:var(--zg-fm-btn);font-size:calc(var(--zg-sz-fs) - 1px);padding-inline:calc(var(--zg-sz-px) - 4px);gap:calc(var(--zg-sz-gap) - 2px)}
704
+ .zg-dd[data-size]:not([data-size="md"])>.zg-btn.zg-btn--tonal.zg-btn--sm .zg-icon{width:calc(var(--zg-sz-icon) - 4px)!important;height:calc(var(--zg-sz-icon) - 4px)!important}
705
+
706
+ /* ---- checkbox / radio ---- */
707
+ .zg-check[data-size],.zg-field[data-size] .zg-check{gap:var(--zg-sz-gap);font-size:var(--zg-sz-fs)}
708
+ .zg-check[data-size] .zg-check__box,.zg-field[data-size] .zg-check .zg-check__box{width:var(--zg-fm-box);height:var(--zg-fm-box);border-radius:calc(var(--zg-fm-box) * .32)}
709
+ .zg-check[data-size] .zg-check__box .zg-icon,.zg-field[data-size] .zg-check .zg-check__box .zg-icon{width:calc(var(--zg-fm-box) * .64)!important;height:calc(var(--zg-fm-box) * .64)!important}
710
+ .zg-check[data-size] .zg-radio,.zg-field[data-size] .zg-check .zg-radio{border-radius:50%!important}
711
+ .zg-check[data-size] .zg-radio i,.zg-field[data-size] .zg-check .zg-radio i{width:calc(var(--zg-fm-box) * .45);height:calc(var(--zg-fm-box) * .45)}
712
+ .zg-field[data-size][role="radiogroup"]{gap:var(--zg-sz-gap)!important}
713
+
714
+ /* ---- switch ---- */
715
+ .zg-switch[data-size]{gap:var(--zg-sz-gap);font-size:var(--zg-sz-fs)}
716
+ .zg-switch[data-size] .zg-switch__track{width:calc(var(--zg-fm-sw) * 1.6923);height:var(--zg-fm-sw)}
717
+ .zg-switch[data-size] .zg-switch__thumb{width:calc(var(--zg-fm-sw) - 6px);height:calc(var(--zg-fm-sw) - 6px)}
718
+ .zg-switch[data-size][aria-checked="true"] .zg-switch__thumb{transform:translateX(calc(var(--zg-fm-sw) * .6923))}
719
+ [dir="rtl"] .zg-switch[data-size][aria-checked="true"] .zg-switch__thumb{transform:translateX(calc(var(--zg-fm-sw) * -.6923))}
720
+
721
+ /* ---- option cards ---- */
722
+ .zg-opt[data-size],.zg-field[data-size] .zg-opt{gap:calc(var(--zg-sz-gap) + 2px);padding:calc(var(--zg-sz-pad) - 2px) var(--zg-sz-pad);border-radius:calc(var(--zg-sz-h) * .45)}
723
+ .zg-opt[data-size] > span > b,.zg-field[data-size] .zg-opt > span > b{font-size:var(--zg-fm-fs)!important}
724
+ .zg-opt[data-size] > b,.zg-field[data-size] .zg-opt > b{font-size:calc(var(--zg-sz-fs) + 2px)!important}
725
+ .zg-opt[data-size] .zg-hint,.zg-field[data-size] .zg-opt .zg-hint{font-size:max(11px,calc(var(--zg-sz-fs) - 2px))}
726
+ .zg-opt[data-size] .zg-opt__img,.zg-field[data-size] .zg-opt .zg-opt__img{width:calc(var(--zg-sz-h) * 1.2);height:calc(var(--zg-sz-h) * 1.2)}
727
+ .zg-opt[data-size] .zg-tile,.zg-field[data-size] .zg-opt .zg-tile{--s:var(--zg-sz-h)!important}
728
+ .zg-opt[data-size] .zg-check__box,.zg-field[data-size] .zg-opt .zg-check__box{width:var(--zg-fm-box);height:var(--zg-fm-box)}
729
+ .zg-opt[data-size]:not([data-size="md"]) .zg-tile .zg-icon,.zg-field[data-size]:not([data-size="md"]) .zg-opt .zg-tile .zg-icon{width:calc(var(--zg-sz-icon) + 2px)!important;height:calc(var(--zg-sz-icon) + 2px)!important}
730
+ .zg-opt[data-size] .zg-check__box .zg-icon,.zg-field[data-size] .zg-opt .zg-check__box .zg-icon{width:calc(var(--zg-fm-box) * .55)!important;height:calc(var(--zg-fm-box) * .55)!important}
731
+ .zg-opt[data-size] .zg-radio i,.zg-field[data-size] .zg-opt .zg-radio i{width:calc(var(--zg-fm-box) * .45);height:calc(var(--zg-fm-box) * .45)}
732
+
733
+ /* ---- sliders ---- */
734
+ .zg-field[data-size] .zg-range{height:calc(var(--zg-sz-h) * .2)}
735
+ .zg-field[data-size] .zg-range::-webkit-slider-thumb{width:var(--zg-fm-box);height:var(--zg-fm-box)}
736
+ .zg-field[data-size] .zg-range::-moz-range-thumb{width:var(--zg-fm-box);height:var(--zg-fm-box)}
737
+ .zg-field[data-size] .zg-range2w{height:calc(var(--zg-sz-h) * .7)}
738
+ .zg-field[data-size] .zg-range2w > i{top:calc((var(--zg-sz-h) * .7 - var(--zg-sz-h) * .2) / 2);height:calc(var(--zg-sz-h) * .2)}
739
+ .zg-field[data-size] .zg-range2::-webkit-slider-thumb{width:var(--zg-fm-box);height:var(--zg-fm-box)}
740
+ .zg-field[data-size] .zg-range2::-moz-range-thumb{width:var(--zg-fm-box);height:var(--zg-fm-box)}
741
+ .zg-field[data-size] .zg-mono{font-size:var(--zg-sz-fs)}
742
+
743
+ /* ---- code input ---- */
744
+ .zg-code[data-size]{gap:calc(var(--zg-sz-gap) - 2px)}
745
+ .zg-code[data-size] .zg-code__cell{height:calc(var(--zg-sz-h) * 1.5);border-radius:calc(var(--zg-sz-h) * .45);font-size:calc(var(--zg-sz-h) * .7)}
746
+
747
+ /* ---- color picker, file and image upload ---- */
748
+ .zg-field[data-size] .zg-chips{gap:calc(var(--zg-sz-gap) - 2px)}
749
+ .zg-field[data-size] .zg-swatch{width:calc(var(--zg-sz-h) * .8);height:calc(var(--zg-sz-h) * .8)}
750
+ .zg-field[data-size] .zg-fdrop{padding:calc(var(--zg-sz-pad) * 1.75) var(--zg-sz-pad);gap:calc(var(--zg-sz-gap) - 4px);font-size:var(--zg-sz-fs);border-radius:calc(var(--zg-sz-h) * .6)}
751
+ .zg-field[data-size] .zg-imgup{width:var(--zg-fm-iu,100%)}
752
+ .zg-field[data-size] .zg-imgup__e .zg-hint{font-size:max(10px,calc(var(--zg-sz-fs) - 2px))}
753
+ .zg-field[data-size] .zg-imgup__o{width:calc(var(--zg-sz-h) * .85);height:calc(var(--zg-sz-h) * .85)}
754
+
755
+ /* ---- rich editor ---- */
756
+ .zg-field[data-size] .zg-rte__t .zg-ibtn{--h:var(--zg-fm-btn)}
757
+ .zg-field[data-size] .zg-rte__c{min-height:calc(var(--zg-sz-h) * 3.5);padding:calc(var(--zg-sz-pad) - 2px) calc(var(--zg-sz-pad) + 2px);font-size:var(--zg-fm-fs)}
758
+
759
+ /* ---- calendars (Calendar, RangeCalendar, calendar inside DatePicker) ---- */
760
+ .zg-cal[data-size],.zg-field[data-size] .zg-cal{min-width:calc(var(--zg-sz-h) * 7)}
761
+ .zg-cal[data-size] .zg-cal__d,.zg-field[data-size] .zg-cal .zg-cal__d{height:calc(var(--zg-sz-h) - 4px);font-size:var(--zg-sz-fs)}
762
+ .zg-cal[data-size] .zg-cal__w,.zg-field[data-size] .zg-cal .zg-cal__w{font-size:max(10px,calc(var(--zg-sz-fs) - 3px))}
763
+ .zg-cal[data-size] .zg-cal__h .zg-ibtn,.zg-field[data-size] .zg-cal .zg-cal__h .zg-ibtn{--h:var(--zg-fm-btn)}
764
+ .zg-cal[data-size] .zg-cal__h b,.zg-field[data-size] .zg-cal .zg-cal__h b{font-size:var(--zg-fm-fs)}
765
+ .zg-cal[data-size]:not([data-size="md"]) .zg-cal__h .zg-icon,.zg-field[data-size]:not([data-size="md"]) .zg-cal .zg-cal__h .zg-icon{width:calc(var(--zg-sz-icon) - 2px)!important;height:calc(var(--zg-sz-icon) - 2px)!important}
766
+
767
+ /* ---- stepper (Stepper, StepForm) ---- */
768
+ .zg-stepper[data-size],.zg-field[data-size] .zg-stepper{gap:calc(var(--zg-sz-gap) - 2px)}
769
+ .zg-stepper[data-size] .zg-step,.zg-field[data-size] .zg-stepper .zg-step{gap:calc(var(--zg-sz-gap) - 2px);font-size:calc(var(--zg-sz-fs) - 1px)}
770
+ .zg-stepper[data-size] .zg-step__n,.zg-field[data-size] .zg-stepper .zg-step__n{width:calc(var(--zg-sz-h) * .7);height:calc(var(--zg-sz-h) * .7)}
771
+ .zg-stepper[data-size]:not([data-size="md"]) .zg-step__n .zg-icon,.zg-field[data-size]:not([data-size="md"]) .zg-stepper .zg-step__n .zg-icon{width:calc(var(--zg-sz-icon) - 4px)!important;height:calc(var(--zg-sz-icon) - 4px)!important}
772
+
773
+ /* ---- LoginForm submit (plain element) ---- */
774
+ .zg-field[data-size] .zg-btn--block{--h:var(--zg-fm-h);font-size:var(--zg-fm-fs)}
775
+
776
+
777
+ /* ./sizes/data.css */
778
+ /* size overrides for the data group. Only [data-size] selectors, see the size scale at the end of tokens.css */
779
+ /* Card (also PricingCard, IntegrationCard, ChartCard, StatLine): padding, gap, title */
780
+ .zg-card[data-size="xs"]{padding:12px;gap:8px}
781
+ .zg-card[data-size="sm"]{padding:16px;gap:10px}
782
+ .zg-card[data-size="md"]{padding:20px;gap:14px}
783
+ .zg-card[data-size="lg"]{padding:28px;gap:18px}
784
+ .zg-card[data-size="xl"]{padding:36px;gap:22px}
785
+ .zg-card[data-size="xs"] .zg-card__title{font-size:14px}
786
+ .zg-card[data-size="sm"] .zg-card__title{font-size:16px}
787
+ .zg-card[data-size="md"] .zg-card__title{font-size:18px}
788
+ .zg-card[data-size="lg"] .zg-card__title{font-size:21px}
789
+ .zg-card[data-size="xl"] .zg-card__title{font-size:24px}
790
+ .zg-card[data-size="xs"] .zg-card__sub{font-size:11px}
791
+ .zg-card[data-size="sm"] .zg-card__sub{font-size:12px}
792
+ .zg-card[data-size="md"] .zg-card__sub{font-size:13px}
793
+ .zg-card[data-size="lg"] .zg-card__sub{font-size:14px}
794
+ .zg-card[data-size="xl"] .zg-card__sub{font-size:15px}
795
+ /* DataTable, DataGroup: row density */
796
+ .zg-table-wrap[data-size="xs"] .zg-table{font-size:12px}
797
+ .zg-table-wrap[data-size="sm"] .zg-table{font-size:13px}
798
+ .zg-table-wrap[data-size="md"] .zg-table{font-size:14px}
799
+ .zg-table-wrap[data-size="lg"] .zg-table{font-size:15px}
800
+ .zg-table-wrap[data-size="xl"] .zg-table{font-size:16px}
801
+ .zg-table-wrap[data-size="xs"] .zg-table th{padding:6px 10px;font-size:10px}
802
+ .zg-table-wrap[data-size="sm"] .zg-table th{padding:8px 12px;font-size:11px}
803
+ .zg-table-wrap[data-size="md"] .zg-table th{padding:12px 16px;font-size:12px}
804
+ .zg-table-wrap[data-size="lg"] .zg-table th{padding:16px 20px;font-size:13px}
805
+ .zg-table-wrap[data-size="xl"] .zg-table th{padding:20px 24px;font-size:14px}
806
+ .zg-table-wrap[data-size="xs"] .zg-table td{padding:6px 10px}
807
+ .zg-table-wrap[data-size="sm"] .zg-table td{padding:8px 12px}
808
+ .zg-table-wrap[data-size="md"] .zg-table td{padding:12px 16px}
809
+ .zg-table-wrap[data-size="lg"] .zg-table td{padding:16px 20px}
810
+ .zg-table-wrap[data-size="xl"] .zg-table td{padding:20px 24px}
811
+ .zg-table-wrap[data-size="xs"] .zg-dg__g{padding:6px 10px!important;font-size:11px!important}
812
+ .zg-table-wrap[data-size="sm"] .zg-dg__g{padding:8px 12px!important;font-size:12px!important}
813
+ .zg-table-wrap[data-size="md"] .zg-dg__g{padding:10px 16px!important;font-size:13px!important}
814
+ .zg-table-wrap[data-size="lg"] .zg-dg__g{padding:12px 20px!important;font-size:14px!important}
815
+ .zg-table-wrap[data-size="xl"] .zg-dg__g{padding:14px 24px!important;font-size:15px!important}
816
+ /* Descriptions */
817
+ .zg-desc[data-size="xs"]{font-size:12px;gap:6px 12px}
818
+ .zg-desc[data-size="sm"]{font-size:13px;gap:8px 16px}
819
+ .zg-desc[data-size="md"]{font-size:14px;gap:10px 20px}
820
+ .zg-desc[data-size="lg"]{font-size:15px;gap:12px 24px}
821
+ .zg-desc[data-size="xl"]{font-size:16px;gap:14px 28px}
822
+ /* Timeline */
823
+ .zg-timeline[data-size="xs"] .zg-tl{grid-template-columns:18px 1fr;gap:8px}
824
+ .zg-timeline[data-size="sm"] .zg-tl{grid-template-columns:22px 1fr;gap:10px}
825
+ .zg-timeline[data-size="md"] .zg-tl{grid-template-columns:28px 1fr;gap:12px}
826
+ .zg-timeline[data-size="lg"] .zg-tl{grid-template-columns:34px 1fr;gap:14px}
827
+ .zg-timeline[data-size="xl"] .zg-tl{grid-template-columns:40px 1fr;gap:16px}
828
+ .zg-timeline[data-size="xs"] .zg-tl__dot{width:8px;height:8px;margin-top:3px;box-shadow:0 0 0 3px var(--zg-brand-soft)}
829
+ .zg-timeline[data-size="sm"] .zg-tl__dot{width:10px;height:10px;margin-top:4px;box-shadow:0 0 0 3px var(--zg-brand-soft)}
830
+ .zg-timeline[data-size="md"] .zg-tl__dot{width:12px;height:12px;margin-top:5px;box-shadow:0 0 0 4px var(--zg-brand-soft)}
831
+ .zg-timeline[data-size="lg"] .zg-tl__dot{width:14px;height:14px;margin-top:6px;box-shadow:0 0 0 5px var(--zg-brand-soft)}
832
+ .zg-timeline[data-size="xl"] .zg-tl__dot{width:18px;height:18px;margin-top:7px;box-shadow:0 0 0 6px var(--zg-brand-soft)}
833
+ .zg-timeline[data-size="xs"] .zg-tl__body{font-size:12px;padding-bottom:10px}
834
+ .zg-timeline[data-size="sm"] .zg-tl__body{font-size:13px;padding-bottom:14px}
835
+ .zg-timeline[data-size="md"] .zg-tl__body{font-size:14px;padding-bottom:18px}
836
+ .zg-timeline[data-size="lg"] .zg-tl__body{font-size:16px;padding-bottom:24px}
837
+ .zg-timeline[data-size="xl"] .zg-tl__body{font-size:18px;padding-bottom:30px}
838
+ .zg-timeline[data-size="xs"] .zg-tl__time{font-size:10px}
839
+ .zg-timeline[data-size="sm"] .zg-tl__time{font-size:11px}
840
+ .zg-timeline[data-size="md"] .zg-tl__time{font-size:12px}
841
+ .zg-timeline[data-size="lg"] .zg-tl__time{font-size:13px}
842
+ .zg-timeline[data-size="xl"] .zg-tl__time{font-size:14px}
843
+ /* TreeView */
844
+ .zg-tree[data-size="xs"] .zg-tree__n{min-height:26px;font-size:12px;gap:6px}
845
+ .zg-tree[data-size="sm"] .zg-tree__n{min-height:30px;font-size:13px;gap:6px}
846
+ .zg-tree[data-size="md"] .zg-tree__n{min-height:36px;font-size:14px;gap:8px}
847
+ .zg-tree[data-size="lg"] .zg-tree__n{min-height:42px;font-size:15px;gap:10px}
848
+ .zg-tree[data-size="xl"] .zg-tree__n{min-height:48px;font-size:16px;gap:12px}
849
+ /* KpiTile, StatsCard, KpiInline */
850
+ .zg-kpi[data-size="xs"]{padding:10px 12px}
851
+ .zg-kpi[data-size="sm"]{padding:12px 14px}
852
+ .zg-kpi[data-size="md"]{padding:16px 18px}
853
+ .zg-kpi[data-size="lg"]{padding:20px 24px}
854
+ .zg-kpi[data-size="xl"]{padding:24px 28px}
855
+ .zg-kpi[data-size="xs"] .zg-kpi__value{font-size:24px}
856
+ .zg-kpi[data-size="sm"] .zg-kpi__value{font-size:30px}
857
+ .zg-kpi[data-size="md"] .zg-kpi__value{font-size:36px}
858
+ .zg-kpi[data-size="lg"] .zg-kpi__value{font-size:44px}
859
+ .zg-kpi[data-size="xl"] .zg-kpi__value{font-size:52px}
860
+ .zg-kpi[data-size="xs"] .zg-kpi__label{font-size:11px}
861
+ .zg-kpi[data-size="sm"] .zg-kpi__label{font-size:12px}
862
+ .zg-kpi[data-size="md"] .zg-kpi__label{font-size:13px}
863
+ .zg-kpi[data-size="lg"] .zg-kpi__label{font-size:14px}
864
+ .zg-kpi[data-size="xl"] .zg-kpi__label{font-size:15px}
865
+ .zg-kpi[data-size="xs"] .zg-kpi__sub{font-size:10px}
866
+ .zg-kpi[data-size="sm"] .zg-kpi__sub{font-size:11px}
867
+ .zg-kpi[data-size="md"] .zg-kpi__sub{font-size:12px}
868
+ .zg-kpi[data-size="lg"] .zg-kpi__sub{font-size:13px}
869
+ .zg-kpi[data-size="xl"] .zg-kpi__sub{font-size:14px}
870
+ .zg-kpii[data-size="xs"] .zg-kpii__v{font-size:15px!important}
871
+ .zg-kpii[data-size="sm"] .zg-kpii__v{font-size:17px!important}
872
+ .zg-kpii[data-size="md"] .zg-kpii__v{font-size:20px!important}
873
+ .zg-kpii[data-size="lg"] .zg-kpii__v{font-size:24px!important}
874
+ .zg-kpii[data-size="xl"] .zg-kpii__v{font-size:28px!important}
875
+ /* StatRow, StatLine, StatStrip */
876
+ .zg-srow[data-size="xs"]{min-height:40px;gap:8px}
877
+ .zg-srow[data-size="sm"]{min-height:48px;gap:10px}
878
+ .zg-srow[data-size="md"]{min-height:56px;gap:12px}
879
+ .zg-srow[data-size="lg"]{min-height:64px;gap:14px}
880
+ .zg-srow[data-size="xl"]{min-height:72px;gap:16px}
881
+ .zg-srow[data-size="xs"] .zg-srow__t{font-size:12px!important}
882
+ .zg-srow[data-size="sm"] .zg-srow__t{font-size:13px!important}
883
+ .zg-srow[data-size="md"] .zg-srow__t{font-size:15px!important}
884
+ .zg-srow[data-size="lg"] .zg-srow__t{font-size:16px!important}
885
+ .zg-srow[data-size="xl"] .zg-srow__t{font-size:18px!important}
886
+ .zg-srow[data-size="xs"] .zg-srow__v{font-size:13px!important}
887
+ .zg-srow[data-size="sm"] .zg-srow__v{font-size:15px!important}
888
+ .zg-srow[data-size="md"] .zg-srow__v{font-size:17px!important}
889
+ .zg-srow[data-size="lg"] .zg-srow__v{font-size:19px!important}
890
+ .zg-srow[data-size="xl"] .zg-srow__v{font-size:22px!important}
891
+ .zg-statline[data-size="xs"] .zg-statline__v{font-size:18px!important}
892
+ .zg-statline[data-size="sm"] .zg-statline__v{font-size:22px!important}
893
+ .zg-statline[data-size="md"] .zg-statline__v{font-size:26px!important}
894
+ .zg-statline[data-size="lg"] .zg-statline__v{font-size:32px!important}
895
+ .zg-statline[data-size="xl"] .zg-statline__v{font-size:38px!important}
896
+ .zg-strip[data-size="xs"] .zg-strip__v{font-size:16px!important}
897
+ .zg-strip[data-size="sm"] .zg-strip__v{font-size:19px!important}
898
+ .zg-strip[data-size="md"] .zg-strip__v{font-size:22px!important}
899
+ .zg-strip[data-size="lg"] .zg-strip__v{font-size:26px!important}
900
+ .zg-strip[data-size="xl"] .zg-strip__v{font-size:30px!important}
901
+ .zg-strip[data-size="xs"] .zg-strip__i{padding:8px 12px;gap:8px}
902
+ .zg-strip[data-size="sm"] .zg-strip__i{padding:10px 16px;gap:10px}
903
+ .zg-strip[data-size="md"] .zg-strip__i{padding:14px 20px;gap:14px}
904
+ .zg-strip[data-size="lg"] .zg-strip__i{padding:18px 24px;gap:16px}
905
+ .zg-strip[data-size="xl"] .zg-strip__i{padding:22px 28px;gap:18px}
906
+ /* SegBar, VersusBar */
907
+ [data-size="xs"] > .zg-segbar{height:20px}
908
+ [data-size="sm"] > .zg-segbar{height:28px}
909
+ [data-size="md"] > .zg-segbar{height:36px}
910
+ [data-size="lg"] > .zg-segbar{height:44px}
911
+ [data-size="xl"] > .zg-segbar{height:52px}
912
+ .zg-vs[data-size="xs"] .zg-vs__bar{height:4px}
913
+ .zg-vs[data-size="sm"] .zg-vs__bar{height:6px}
914
+ .zg-vs[data-size="md"] .zg-vs__bar{height:8px}
915
+ .zg-vs[data-size="lg"] .zg-vs__bar{height:12px}
916
+ .zg-vs[data-size="xl"] .zg-vs__bar{height:16px}
917
+ /* Ring label */
918
+ .zg-ring[data-size="xs"] .zg-ring__l{font-size:8px}
919
+ .zg-ring[data-size="sm"] .zg-ring__l{font-size:10px}
920
+ .zg-ring[data-size="md"] .zg-ring__l{font-size:12px}
921
+ .zg-ring[data-size="lg"] .zg-ring__l{font-size:13px}
922
+ .zg-ring[data-size="xl"] .zg-ring__l{font-size:15px}
923
+ /* UserCell text */
924
+ .zg-usercell[data-size="xs"]{gap:6px}
925
+ .zg-usercell[data-size="sm"]{gap:8px}
926
+ .zg-usercell[data-size="md"]{gap:10px}
927
+ .zg-usercell[data-size="lg"]{gap:12px}
928
+ .zg-usercell[data-size="xl"]{gap:14px}
929
+ .zg-usercell[data-size="xs"] b{font-size:12px}
930
+ .zg-usercell[data-size="sm"] b{font-size:13px}
931
+ .zg-usercell[data-size="md"] b{font-size:14px}
932
+ .zg-usercell[data-size="lg"] b{font-size:16px}
933
+ .zg-usercell[data-size="xl"] b{font-size:18px}
934
+ .zg-usercell[data-size="xs"] .zg-hint{font-size:10px}
935
+ .zg-usercell[data-size="sm"] .zg-hint{font-size:11px}
936
+ .zg-usercell[data-size="md"] .zg-hint{font-size:12px}
937
+ .zg-usercell[data-size="lg"] .zg-hint{font-size:13px}
938
+ .zg-usercell[data-size="xl"] .zg-hint{font-size:14px}
939
+
940
+
941
+ /* ./sizes/feedback.css */
942
+ /* size overrides for the feedback group. Only [data-size] selectors, see the size scale at the end of tokens.css */
943
+
944
+ /* Alert / Banner */
945
+ .zg-alert[data-size="xs"]{--a-p:8px 10px;--a-g:8px;--a-i:22px;--a-v:13px;--a-f:12px;--a-t:13px;--a-r:14px}
946
+ .zg-alert[data-size="sm"]{--a-p:10px 12px;--a-g:10px;--a-i:26px;--a-v:15px;--a-f:13px;--a-t:14px;--a-r:16px}
947
+ .zg-alert[data-size="md"]{--a-p:14px 16px;--a-g:12px;--a-i:32px;--a-v:18px;--a-f:14px;--a-t:15px;--a-r:22px}
948
+ .zg-alert[data-size="lg"]{--a-p:18px 20px;--a-g:14px;--a-i:38px;--a-v:22px;--a-f:15px;--a-t:16px;--a-r:24px}
949
+ .zg-alert[data-size="xl"]{--a-p:22px 24px;--a-g:16px;--a-i:44px;--a-v:26px;--a-f:16px;--a-t:18px;--a-r:26px}
950
+ .zg-alert[data-size]{padding:var(--a-p);gap:var(--a-g);border-radius:var(--a-r)}
951
+ .zg-alert[data-size].zg-banner{border-radius:0}
952
+ .zg-alert[data-size] .zg-alert__i{width:var(--a-i);height:var(--a-i)}
953
+ .zg-alert[data-size] .zg-alert__i svg{width:var(--a-v);height:var(--a-v)}
954
+ .zg-alert[data-size] .zg-alert__b{font-size:var(--a-f)}
955
+ .zg-alert[data-size] .zg-alert__b b{font-size:var(--a-t)}
956
+
957
+ /* Toast */
958
+ .zg-toast[data-size="xs"]{--t-p:8px 10px;--t-g:8px;--t-i:22px;--t-v:13px;--t-f:11px;--t-t:12px;--t-w:280px;--t-r:14px}
959
+ .zg-toast[data-size="sm"]{--t-p:10px 12px;--t-g:10px;--t-i:26px;--t-v:15px;--t-f:12px;--t-t:13px;--t-w:330px;--t-r:18px}
960
+ .zg-toast[data-size="md"]{--t-p:14px 16px;--t-g:12px;--t-i:32px;--t-v:18px;--t-f:13px;--t-t:14px;--t-w:380px;--t-r:22px}
961
+ .zg-toast[data-size="lg"]{--t-p:18px 20px;--t-g:14px;--t-i:38px;--t-v:22px;--t-f:14px;--t-t:16px;--t-w:440px;--t-r:24px}
962
+ .zg-toast[data-size="xl"]{--t-p:22px 24px;--t-g:16px;--t-i:44px;--t-v:26px;--t-f:16px;--t-t:18px;--t-w:500px;--t-r:26px}
963
+ .zg-toast[data-size]{padding:var(--t-p);gap:var(--t-g);max-width:var(--t-w);border-radius:var(--t-r)}
964
+ .zg-toast[data-size] .zg-toast__icon{width:var(--t-i);height:var(--t-i)}
965
+ .zg-toast[data-size] .zg-toast__icon svg{width:var(--t-v);height:var(--t-v)}
966
+ .zg-toast[data-size] b{font-size:var(--t-t)}
967
+ .zg-toast[data-size] span:not(.zg-toast__icon){font-size:var(--t-f)}
968
+
969
+ /* Snackbar */
970
+ .zg-snack[data-size="xs"]{--s-h:32px;--s-px:10px;--s-g:10px;--s-f:12px}
971
+ .zg-snack[data-size="sm"]{--s-h:38px;--s-px:12px;--s-g:12px;--s-f:13px}
972
+ .zg-snack[data-size="md"]{--s-h:44px;--s-px:16px;--s-g:14px;--s-f:14px}
973
+ .zg-snack[data-size="lg"]{--s-h:52px;--s-px:20px;--s-g:16px;--s-f:15px}
974
+ .zg-snack[data-size="xl"]{--s-h:60px;--s-px:24px;--s-g:18px;--s-f:16px}
975
+ .zg-snack[data-size]{min-height:var(--s-h);padding:0 var(--s-px);gap:var(--s-g);font-size:var(--s-f)}
976
+
977
+ /* Progress */
978
+ .zg-progress[data-size="xs"]{--p-h:4px;--p-f:11px;--p-g:4px}
979
+ .zg-progress[data-size="sm"]{--p-h:6px;--p-f:12px;--p-g:5px}
980
+ .zg-progress[data-size="md"]{--p-h:8px;--p-f:13px;--p-g:6px}
981
+ .zg-progress[data-size="lg"]{--p-h:12px;--p-f:14px;--p-g:8px}
982
+ .zg-progress[data-size="xl"]{--p-h:16px;--p-f:15px;--p-g:10px}
983
+ .zg-progress[data-size]{gap:var(--p-g)}
984
+ .zg-progress[data-size] .zg-progress__row{font-size:var(--p-f)}
985
+ .zg-progress[data-size] .zg-progress__track{height:var(--p-h)}
986
+
987
+ /* Spinner: size is resolved to font-size in the core, only the stroke is tuned here */
988
+ .zg-spin[data-size="lg"]{border-width:3px}
989
+ .zg-spin[data-size="xl"]{border-width:4px}
990
+
991
+ /* Skeleton */
992
+ .zg-skelw[data-size="xs"]{--k-h:8px;--k-g:5px}
993
+ .zg-skelw[data-size="sm"]{--k-h:11px;--k-g:6px}
994
+ .zg-skelw[data-size="md"]{--k-h:14px;--k-g:8px}
995
+ .zg-skelw[data-size="lg"]{--k-h:18px;--k-g:10px}
996
+ .zg-skelw[data-size="xl"]{--k-h:22px;--k-g:12px}
997
+ .zg-skelw[data-size]{gap:var(--k-g)}
998
+ .zg-skelw[data-size] .zg-skel--text{height:var(--k-h)}
999
+
1000
+ /* EmptyState */
1001
+ .zg-es[data-size="xs"]{--e-p:16px 12px;--e-i:40px;--e-v:20px;--e-t:14px;--e-f:12px;--e-g:6px;--e-r:14px;--e-m:112px}
1002
+ .zg-es[data-size="sm"]{--e-p:24px 14px;--e-i:52px;--e-v:24px;--e-t:16px;--e-f:13px;--e-g:7px;--e-r:18px;--e-m:112px}
1003
+ .zg-es[data-size="md"]{--e-p:32px 16px;--e-i:64px;--e-v:28px;--e-t:17px;--e-f:16px;--e-g:8px;--e-r:22px;--e-m:112px}
1004
+ .zg-es[data-size="lg"]{--e-p:44px 20px;--e-i:80px;--e-v:34px;--e-t:20px;--e-f:17px;--e-g:10px;--e-r:26px;--e-m:112px}
1005
+ .zg-es[data-size="xl"]{--e-p:56px 24px;--e-i:96px;--e-v:40px;--e-t:24px;--e-f:18px;--e-g:12px;--e-r:30px;--e-m:112px}
1006
+ .zg-es[data-size]{padding:var(--e-p);gap:var(--e-g);font-size:var(--e-f)}
1007
+ .zg-es[data-size] b{font-size:var(--e-t)}
1008
+ .zg-es[data-size] .zg-es__ico{width:var(--e-i);height:var(--e-i);border-radius:var(--e-r)}
1009
+ .zg-es[data-size] .zg-es__ico svg{width:var(--e-v);height:var(--e-v)}
1010
+ .zg-es[data-size] .zg-es__img{width:calc(var(--e-i)*1.75);height:calc(var(--e-i)*1.75)}
1011
+
1012
+
1013
+ /* ./sizes/overlay.css */
1014
+ /* size overrides for the overlay group. Only [data-size] selectors, see the size scale at the end of tokens.css */
1015
+
1016
+ /* Modal / ConfirmDialog: data-size lands on the scrim */
1017
+ .zg-modal-scrim[data-size="xs"]{--m-w:320px;--m-hp:14px 16px 12px;--m-bp:16px;--m-fp:10px 16px 14px;--m-t:15px;--m-f:13px;--m-g:12px}
1018
+ .zg-modal-scrim[data-size="sm"]{--m-w:420px;--m-hp:16px 18px 14px;--m-bp:18px;--m-fp:12px 18px 16px;--m-t:17px;--m-f:14px;--m-g:14px}
1019
+ .zg-modal-scrim[data-size="md"]{--m-w:520px;--m-hp:20px 20px 16px;--m-bp:20px;--m-fp:14px 20px 18px;--m-t:18px;--m-f:14px;--m-g:16px}
1020
+ .zg-modal-scrim[data-size="lg"]{--m-w:640px;--m-hp:24px 26px 18px;--m-bp:26px;--m-fp:16px 26px 22px;--m-t:20px;--m-f:15px;--m-g:18px}
1021
+ .zg-modal-scrim[data-size="xl"]{--m-w:720px;--m-hp:28px 32px 20px;--m-bp:32px;--m-fp:18px 32px 26px;--m-t:22px;--m-f:16px;--m-g:20px}
1022
+ .zg-modal-scrim[data-size]:not(.zg-drawer-scrim):not(.zg-sheet-scrim) .zg-modal:not(.zg-stepdlg){max-width:var(--m-w)}
1023
+ .zg-modal-scrim[data-size] .zg-modal__head{padding:var(--m-hp)}
1024
+ .zg-modal-scrim[data-size] .zg-modal__head h3{font-size:var(--m-t)}
1025
+ .zg-modal-scrim[data-size] .zg-modal__body{padding:var(--m-bp);gap:var(--m-g);font-size:var(--m-f)}
1026
+ .zg-modal-scrim[data-size] .zg-modal__foot{padding:var(--m-fp)}
1027
+
1028
+ /* StepDialog */
1029
+ .zg-modal-scrim[data-size="xs"] .zg-stepdlg{max-width:640px;min-height:320px}
1030
+ .zg-modal-scrim[data-size="sm"] .zg-stepdlg{max-width:740px;min-height:380px}
1031
+ .zg-modal-scrim[data-size="md"] .zg-stepdlg{max-width:860px;min-height:420px}
1032
+ .zg-modal-scrim[data-size="lg"] .zg-stepdlg{max-width:980px;min-height:480px}
1033
+ .zg-modal-scrim[data-size="xl"] .zg-stepdlg{max-width:1100px;min-height:540px}
1034
+
1035
+ /* Drawer */
1036
+ .zg-drawer-scrim[data-size="xs"] .zg-drawer{width:min(280px,100%)}
1037
+ .zg-drawer-scrim[data-size="sm"] .zg-drawer{width:min(340px,100%)}
1038
+ .zg-drawer-scrim[data-size="md"] .zg-drawer{width:min(420px,100%)}
1039
+ .zg-drawer-scrim[data-size="lg"] .zg-drawer{width:min(520px,100%)}
1040
+ .zg-drawer-scrim[data-size="xl"] .zg-drawer{width:min(640px,100%)}
1041
+
1042
+ /* BottomSheet / Actionsheet */
1043
+ .zg-sheet-scrim[data-size="xs"] .zg-sheet{width:min(360px,100%);padding:8px 14px 14px;gap:8px}
1044
+ .zg-sheet-scrim[data-size="sm"] .zg-sheet{width:min(460px,100%);padding:9px 16px 16px;gap:10px}
1045
+ .zg-sheet-scrim[data-size="lg"] .zg-sheet{width:min(680px,100%);padding:12px 24px 24px;gap:14px}
1046
+ .zg-sheet-scrim[data-size="xl"] .zg-sheet{width:min(800px,100%);padding:14px 28px 28px;gap:16px}
1047
+ .zg-sheet-scrim[data-size="xs"] .zg-sheet__t{font-size:15px}
1048
+ .zg-sheet-scrim[data-size="sm"] .zg-sheet__t{font-size:16px}
1049
+ .zg-sheet-scrim[data-size="lg"] .zg-sheet__t{font-size:20px}
1050
+ .zg-sheet-scrim[data-size="xl"] .zg-sheet__t{font-size:22px}
1051
+
1052
+ /* CommandPalette: width is an inline style, so !important is required */
1053
+ .zg-modal-scrim[data-size="xs"] .zg-modal[aria-label="Command palette"]{max-width:400px!important}
1054
+ .zg-modal-scrim[data-size="sm"] .zg-modal[aria-label="Command palette"]{max-width:480px!important}
1055
+ .zg-modal-scrim[data-size="lg"] .zg-modal[aria-label="Command palette"]{max-width:640px!important}
1056
+ .zg-modal-scrim[data-size="xl"] .zg-modal[aria-label="Command palette"]{max-width:720px!important}
1057
+
1058
+ /* Menu / Dropdown / ContextMenu / Popover / Popconfirm: data-size on the wrapper (.zg-dd, .zg-ctx) or on the static .zg-menu */
1059
+ :is(.zg-dd,.zg-ctx,.zg-menu)[data-size="xs"]{--u-h:28px;--u-px:8px;--u-g:6px;--u-f:12px;--u-r:10px;--u-mw:160px;--u-pp:10px;--u-pg:8px;--u-pw:200px;--u-pf:12px}
1060
+ :is(.zg-dd,.zg-ctx,.zg-menu)[data-size="sm"]{--u-h:32px;--u-px:10px;--u-g:8px;--u-f:13px;--u-r:12px;--u-mw:190px;--u-pp:12px;--u-pg:10px;--u-pw:220px;--u-pf:13px}
1061
+ :is(.zg-dd,.zg-ctx,.zg-menu)[data-size="md"]{--u-h:40px;--u-px:12px;--u-g:10px;--u-f:14px;--u-r:14px;--u-mw:220px;--u-pp:14px;--u-pg:12px;--u-pw:240px;--u-pf:14px}
1062
+ :is(.zg-dd,.zg-ctx,.zg-menu)[data-size="lg"]{--u-h:48px;--u-px:16px;--u-g:12px;--u-f:15px;--u-r:16px;--u-mw:260px;--u-pp:18px;--u-pg:14px;--u-pw:280px;--u-pf:15px}
1063
+ :is(.zg-dd,.zg-ctx,.zg-menu)[data-size="xl"]{--u-h:56px;--u-px:20px;--u-g:14px;--u-f:16px;--u-r:18px;--u-mw:300px;--u-pp:22px;--u-pg:16px;--u-pw:320px;--u-pf:16px}
1064
+ :is(.zg-dd,.zg-ctx,.zg-menu)[data-size] .zg-menu__i{min-height:var(--u-h);padding:0 var(--u-px);gap:var(--u-g);font-size:var(--u-f);border-radius:var(--u-r)}
1065
+ :is(.zg-dd,.zg-ctx)[data-size] .zg-menu{min-width:var(--u-mw)}
1066
+ .zg-menu[data-size]{min-width:var(--u-mw)}
1067
+ :is(.zg-dd,.zg-ctx)[data-size] .zg-menu__i svg{width:calc(var(--u-f) + 2px);height:calc(var(--u-f) + 2px)}
1068
+ .zg-dd[data-size] .zg-pop{min-width:var(--u-pw);padding:var(--u-pp);gap:var(--u-pg);font-size:var(--u-pf)}
1069
+ .zg-dd[data-size] .zg-pop b{font-size:var(--u-pf)!important}
1070
+ .zg-dd[data-size]>.zg-btn{height:var(--zg-sz-h);font-size:var(--zg-sz-fs);padding-inline:var(--zg-sz-px)}
1071
+
1072
+ /* Tooltip */
1073
+ .zg-tip[data-size="xs"]::after{padding:3px 7px;font-size:10px;border-radius:7px}
1074
+ .zg-tip[data-size="sm"]::after{padding:4px 9px;font-size:11px;border-radius:8px}
1075
+ .zg-tip[data-size="lg"]::after{padding:8px 13px;font-size:13px;border-radius:12px}
1076
+ .zg-tip[data-size="xl"]::after{padding:10px 16px;font-size:14px;border-radius:14px}
1077
+
1078
+ /* HoverCard */
1079
+ .zg-hc[data-size="xs"] .zg-hc__c{width:200px;padding:10px;font-size:12px;border-radius:14px}
1080
+ .zg-hc[data-size="sm"] .zg-hc__c{width:240px;padding:12px;font-size:13px;border-radius:16px}
1081
+ .zg-hc[data-size="lg"] .zg-hc__c{width:340px;padding:18px;font-size:15px;border-radius:22px}
1082
+ .zg-hc[data-size="xl"] .zg-hc__c{width:400px;padding:22px;font-size:16px;border-radius:24px}
1083
+
1084
+ /* CommandBar: md matches the current 32px buttons */
1085
+ .zg-cb[data-size="xs"]{--cb-h:24px;--cb-p:3px;--cb-s:16px}
1086
+ .zg-cb[data-size="sm"]{--cb-h:28px;--cb-p:3px;--cb-s:18px}
1087
+ .zg-cb[data-size="md"]{--cb-h:32px;--cb-p:4px;--cb-s:20px}
1088
+ .zg-cb[data-size="lg"]{--cb-h:40px;--cb-p:5px;--cb-s:24px}
1089
+ .zg-cb[data-size="xl"]{--cb-h:48px;--cb-p:6px;--cb-s:28px}
1090
+ .zg-cb[data-size]{padding:var(--cb-p)}
1091
+ .zg-cb[data-size] .zg-ibtn{--h:var(--cb-h)}
1092
+ .zg-cb[data-size] .zg-cb__s{height:var(--cb-s)}
1093
+
1094
+
1095
+ /* ./sizes/navigation.css */
1096
+ /* size overrides for the navigation group. Only [data-size] selectors, see the size scale at the end of tokens.css */
1097
+ .zg-topnav[data-size="xs"]{padding-block:6px;gap:8px}
1098
+ .zg-topnav[data-size="sm"]{padding-block:8px;gap:10px}
1099
+ .zg-topnav[data-size="md"]{padding-block:10px;gap:12px}
1100
+ .zg-topnav[data-size="lg"]{padding-block:14px;gap:14px}
1101
+ .zg-topnav[data-size="xl"]{padding-block:18px;gap:16px}
1102
+ .zg-topnav[data-size="xs"] .zg-topnav__brand{font-size:13px}
1103
+ .zg-topnav[data-size="sm"] .zg-topnav__brand{font-size:15px}
1104
+ .zg-topnav[data-size="md"] .zg-topnav__brand{font-size:18px}
1105
+ .zg-topnav[data-size="lg"] .zg-topnav__brand{font-size:21px}
1106
+ .zg-topnav[data-size="xl"] .zg-topnav__brand{font-size:24px}
1107
+ .zg-topnav[data-size="xs"] .zg-navitem{height:28px;font-size:12px;padding-inline:8px}
1108
+ .zg-topnav[data-size="sm"] .zg-navitem{height:32px;font-size:13px;padding-inline:10px}
1109
+ .zg-topnav[data-size="md"] .zg-navitem{height:40px;font-size:14px;padding-inline:12px}
1110
+ .zg-topnav[data-size="lg"] .zg-navitem{height:48px;font-size:15px;padding-inline:16px}
1111
+ .zg-topnav[data-size="xl"] .zg-navitem{height:56px;font-size:16px;padding-inline:20px}
1112
+ .zg-topnav[data-size="xs"] .zg-icon{width:14px!important;height:14px!important}
1113
+ .zg-topnav[data-size="sm"] .zg-icon{width:16px!important;height:16px!important}
1114
+ .zg-topnav[data-size="md"] .zg-icon{width:18px!important;height:18px!important}
1115
+ .zg-topnav[data-size="lg"] .zg-icon{width:20px!important;height:20px!important}
1116
+ .zg-topnav[data-size="xl"] .zg-icon{width:22px!important;height:22px!important}
1117
+ .zg-sidenav[data-size="xs"]{--w:216px;padding:10px 10px}
1118
+ .zg-sidenav[data-size="sm"]{--w:240px;padding:12px 10px}
1119
+ .zg-sidenav[data-size="md"]{--w:272px;padding:16px 12px}
1120
+ .zg-sidenav[data-size="lg"]{--w:304px;padding:18px 14px}
1121
+ .zg-sidenav[data-size="xl"]{--w:336px;padding:20px 16px}
1122
+ .zg-sidenav[data-size="xs"].zg-sidenav--collapsed{--w:56px}
1123
+ .zg-sidenav[data-size="sm"].zg-sidenav--collapsed{--w:64px}
1124
+ .zg-sidenav[data-size="md"].zg-sidenav--collapsed{--w:76px}
1125
+ .zg-sidenav[data-size="lg"].zg-sidenav--collapsed{--w:88px}
1126
+ .zg-sidenav[data-size="xl"].zg-sidenav--collapsed{--w:100px}
1127
+ .zg-sidenav[data-size="xs"] .zg-navitem{height:34px;font-size:12px;padding-inline:10px}
1128
+ .zg-sidenav[data-size="sm"] .zg-navitem{height:40px;font-size:13px;padding-inline:12px}
1129
+ .zg-sidenav[data-size="md"] .zg-navitem{height:46px;font-size:14px;padding-inline:14px}
1130
+ .zg-sidenav[data-size="lg"] .zg-navitem{height:54px;font-size:15px;padding-inline:16px}
1131
+ .zg-sidenav[data-size="xl"] .zg-navitem{height:62px;font-size:16px;padding-inline:18px}
1132
+ .zg-sidenav[data-size="xs"] .zg-sidenav--collapsed .zg-navitem,.zg-sidenav[data-size="xs"].zg-sidenav--collapsed .zg-navitem{padding:0}
1133
+ .zg-sidenav[data-size="sm"] .zg-sidenav--collapsed .zg-navitem,.zg-sidenav[data-size="sm"].zg-sidenav--collapsed .zg-navitem{padding:0}
1134
+ .zg-sidenav[data-size="md"] .zg-sidenav--collapsed .zg-navitem,.zg-sidenav[data-size="md"].zg-sidenav--collapsed .zg-navitem{padding:0}
1135
+ .zg-sidenav[data-size="lg"] .zg-sidenav--collapsed .zg-navitem,.zg-sidenav[data-size="lg"].zg-sidenav--collapsed .zg-navitem{padding:0}
1136
+ .zg-sidenav[data-size="xl"] .zg-sidenav--collapsed .zg-navitem,.zg-sidenav[data-size="xl"].zg-sidenav--collapsed .zg-navitem{padding:0}
1137
+ .zg-sidenav[data-size="xs"] .zg-icon{width:14px!important;height:14px!important}
1138
+ .zg-sidenav[data-size="sm"] .zg-icon{width:16px!important;height:16px!important}
1139
+ .zg-sidenav[data-size="md"] .zg-icon{width:18px!important;height:18px!important}
1140
+ .zg-sidenav[data-size="lg"] .zg-icon{width:20px!important;height:20px!important}
1141
+ .zg-sidenav[data-size="xl"] .zg-icon{width:22px!important;height:22px!important}
1142
+ .zg-sidenav[data-size="xs"] .zg-sidenav__brand{font-size:13px}
1143
+ .zg-sidenav[data-size="sm"] .zg-sidenav__brand{font-size:15px}
1144
+ .zg-sidenav[data-size="md"] .zg-sidenav__brand{font-size:18px}
1145
+ .zg-sidenav[data-size="lg"] .zg-sidenav__brand{font-size:21px}
1146
+ .zg-sidenav[data-size="xl"] .zg-sidenav__brand{font-size:24px}
1147
+ .zg-sidenav[data-size="xs"] .zg-sidenav__group{font-size:9px}
1148
+ .zg-sidenav[data-size="sm"] .zg-sidenav__group{font-size:10px}
1149
+ .zg-sidenav[data-size="md"] .zg-sidenav__group{font-size:11px}
1150
+ .zg-sidenav[data-size="lg"] .zg-sidenav__group{font-size:12px}
1151
+ .zg-sidenav[data-size="xl"] .zg-sidenav__group{font-size:13px}
1152
+ .zg-subnav[data-size="xs"]{min-width:180px;gap:1px}
1153
+ .zg-subnav[data-size="sm"]{min-width:200px;gap:2px}
1154
+ .zg-subnav[data-size="md"]{min-width:220px;gap:2px}
1155
+ .zg-subnav[data-size="lg"]{min-width:250px;gap:3px}
1156
+ .zg-subnav[data-size="xl"]{min-width:280px;gap:4px}
1157
+ .zg-subnav[data-size="xs"] .zg-navitem{height:32px;font-size:12px;padding-inline:10px;border-radius:11px}
1158
+ .zg-subnav[data-size="sm"] .zg-navitem{height:36px;font-size:13px;padding-inline:12px;border-radius:12px}
1159
+ .zg-subnav[data-size="md"] .zg-navitem{height:42px;font-size:14px;padding-inline:14px;border-radius:14px}
1160
+ .zg-subnav[data-size="lg"] .zg-navitem{height:50px;font-size:15px;padding-inline:16px;border-radius:17px}
1161
+ .zg-subnav[data-size="xl"] .zg-navitem{height:58px;font-size:16px;padding-inline:18px;border-radius:19px}
1162
+ .zg-subnav[data-size="xs"] .zg-icon{width:14px!important;height:14px!important}
1163
+ .zg-subnav[data-size="sm"] .zg-icon{width:16px!important;height:16px!important}
1164
+ .zg-subnav[data-size="md"] .zg-icon{width:16px!important;height:16px!important}
1165
+ .zg-subnav[data-size="lg"] .zg-icon{width:18px!important;height:18px!important}
1166
+ .zg-subnav[data-size="xl"] .zg-icon{width:20px!important;height:20px!important}
1167
+ .zg-subnav[data-size="xs"] .zg-sidenav__group{font-size:9px}
1168
+ .zg-subnav[data-size="sm"] .zg-sidenav__group{font-size:10px}
1169
+ .zg-subnav[data-size="md"] .zg-sidenav__group{font-size:11px}
1170
+ .zg-subnav[data-size="lg"] .zg-sidenav__group{font-size:12px}
1171
+ .zg-subnav[data-size="xl"] .zg-sidenav__group{font-size:13px}
1172
+ .zg-tabs[data-size="xs"]{gap:2px}
1173
+ .zg-tabs[data-size="sm"]{gap:3px}
1174
+ .zg-tabs[data-size="md"]{gap:4px}
1175
+ .zg-tabs[data-size="lg"]{gap:6px}
1176
+ .zg-tabs[data-size="xl"]{gap:8px}
1177
+ .zg-tabs[data-size="xs"] button{height:32px;font-size:12px;padding:0 10px}
1178
+ .zg-tabs[data-size="sm"] button{height:38px;font-size:13px;padding:0 12px}
1179
+ .zg-tabs[data-size="md"] button{height:44px;font-size:14px;padding:0 16px}
1180
+ .zg-tabs[data-size="lg"] button{height:52px;font-size:15px;padding:0 20px}
1181
+ .zg-tabs[data-size="xl"] button{height:60px;font-size:16px;padding:0 24px}
1182
+ .zg-tabs[data-size="xs"] button[aria-selected="true"]::after{inset-inline:8px;height:2px}
1183
+ .zg-tabs[data-size="sm"] button[aria-selected="true"]::after{inset-inline:10px;height:2px}
1184
+ .zg-tabs[data-size="md"] button[aria-selected="true"]::after{inset-inline:12px;height:3px}
1185
+ .zg-tabs[data-size="lg"] button[aria-selected="true"]::after{inset-inline:14px;height:3px}
1186
+ .zg-tabs[data-size="xl"] button[aria-selected="true"]::after{inset-inline:16px;height:4px}
1187
+ .zg-pt[data-size="xs"]{gap:3px}
1188
+ .zg-pt[data-size="sm"]{gap:4px}
1189
+ .zg-pt[data-size="md"]{gap:6px}
1190
+ .zg-pt[data-size="lg"]{gap:8px}
1191
+ .zg-pt[data-size="xl"]{gap:10px}
1192
+ .zg-pt[data-size="xs"] button{height:28px;font-size:12px;padding:0 10px;gap:6px}
1193
+ .zg-pt[data-size="sm"] button{height:32px;font-size:13px;padding:0 12px;gap:6px}
1194
+ .zg-pt[data-size="md"] button{height:38px;font-size:15px;padding:0 18px;gap:8px}
1195
+ .zg-pt[data-size="lg"] button{height:46px;font-size:16px;padding:0 22px;gap:10px}
1196
+ .zg-pt[data-size="xl"] button{height:54px;font-size:18px;padding:0 26px;gap:12px}
1197
+ .zg-pt[data-size="xs"] .zg-icon{width:14px!important;height:14px!important}
1198
+ .zg-pt[data-size="sm"] .zg-icon{width:16px!important;height:16px!important}
1199
+ .zg-pt[data-size="md"] .zg-icon{width:16px!important;height:16px!important}
1200
+ .zg-pt[data-size="lg"] .zg-icon{width:18px!important;height:18px!important}
1201
+ .zg-pt[data-size="xl"] .zg-icon{width:20px!important;height:20px!important}
1202
+ .zg-crumbs[data-size="xs"]{font-size:11px;gap:4px}
1203
+ .zg-crumbs[data-size="sm"]{font-size:12px;gap:6px}
1204
+ .zg-crumbs[data-size="md"]{font-size:13px;gap:8px}
1205
+ .zg-crumbs[data-size="lg"]{font-size:15px;gap:10px}
1206
+ .zg-crumbs[data-size="xl"]{font-size:17px;gap:12px}
1207
+ .zg-crumbs[data-size="xs"] .zg-icon{width:10px!important;height:10px!important}
1208
+ .zg-crumbs[data-size="sm"] .zg-icon{width:12px!important;height:12px!important}
1209
+ .zg-crumbs[data-size="md"] .zg-icon{width:14px!important;height:14px!important}
1210
+ .zg-crumbs[data-size="lg"] .zg-icon{width:16px!important;height:16px!important}
1211
+ .zg-crumbs[data-size="xl"] .zg-icon{width:18px!important;height:18px!important}
1212
+ .zg-pager[data-size="xs"]{gap:2px}
1213
+ .zg-pager[data-size="sm"]{gap:3px}
1214
+ .zg-pager[data-size="md"]{gap:4px}
1215
+ .zg-pager[data-size="lg"]{gap:6px}
1216
+ .zg-pager[data-size="xl"]{gap:8px}
1217
+ .zg-pager[data-size="xs"] button{min-width:26px;height:26px;font-size:11px}
1218
+ .zg-pager[data-size="sm"] button{min-width:30px;height:30px;font-size:12px}
1219
+ .zg-pager[data-size="md"] button{min-width:36px;height:36px;font-size:13px}
1220
+ .zg-pager[data-size="lg"] button{min-width:44px;height:44px;font-size:15px}
1221
+ .zg-pager[data-size="xl"] button{min-width:52px;height:52px;font-size:17px}
1222
+ .zg-acc[data-size="xs"]{padding:4px;border-radius:16px}
1223
+ .zg-acc[data-size="sm"]{padding:5px;border-radius:20px}
1224
+ .zg-acc[data-size="md"]{padding:6px;border-radius:24px}
1225
+ .zg-acc[data-size="lg"]{padding:8px;border-radius:28px}
1226
+ .zg-acc[data-size="xl"]{padding:10px;border-radius:32px}
1227
+ .zg-acc[data-size="xs"] .zg-acc__h{min-height:36px;font-size:12px;padding:0 12px}
1228
+ .zg-acc[data-size="sm"] .zg-acc__h{min-height:44px;font-size:13px;padding:0 14px}
1229
+ .zg-acc[data-size="md"] .zg-acc__h{min-height:52px;font-size:15px;padding:0 16px}
1230
+ .zg-acc[data-size="lg"] .zg-acc__h{min-height:60px;font-size:16px;padding:0 20px}
1231
+ .zg-acc[data-size="xl"] .zg-acc__h{min-height:68px;font-size:18px;padding:0 24px}
1232
+ .zg-acc[data-size="xs"] .zg-acc__b{font-size:12px;padding:0 12px 12px}
1233
+ .zg-acc[data-size="sm"] .zg-acc__b{font-size:13px;padding:0 14px 12px}
1234
+ .zg-acc[data-size="md"] .zg-acc__b{font-size:14px;padding:0 16px 16px}
1235
+ .zg-acc[data-size="lg"] .zg-acc__b{font-size:15px;padding:0 20px 18px}
1236
+ .zg-acc[data-size="xl"] .zg-acc__b{font-size:16px;padding:0 24px 20px}
1237
+ .zg-acc[data-size="xs"] .zg-icon{width:12px!important;height:12px!important}
1238
+ .zg-acc[data-size="sm"] .zg-icon{width:14px!important;height:14px!important}
1239
+ .zg-acc[data-size="md"] .zg-icon{width:16px!important;height:16px!important}
1240
+ .zg-acc[data-size="lg"] .zg-icon{width:18px!important;height:18px!important}
1241
+ .zg-acc[data-size="xl"] .zg-icon{width:20px!important;height:20px!important}
1242
+
1243
+
1244
+ /* ./sizes/media.css */
1245
+ /* size overrides for the media group. Only [data-size] selectors, see the size scale at the end of tokens.css */
1246
+ /* Gallery: thumbnails */
1247
+ .zg-gal[data-size="xs"] .zg-gal__t{gap:4px}
1248
+ .zg-gal[data-size="sm"] .zg-gal__t{gap:6px}
1249
+ .zg-gal[data-size="md"] .zg-gal__t{gap:8px}
1250
+ .zg-gal[data-size="lg"] .zg-gal__t{gap:10px}
1251
+ .zg-gal[data-size="xl"] .zg-gal__t{gap:12px}
1252
+ .zg-gal[data-size="xs"] .zg-gal__t button{width:48px;border-radius:8px}
1253
+ .zg-gal[data-size="sm"] .zg-gal__t button{width:64px;border-radius:10px}
1254
+ .zg-gal[data-size="md"] .zg-gal__t button{width:84px;border-radius:16px}
1255
+ .zg-gal[data-size="lg"] .zg-gal__t button{width:112px;border-radius:18px}
1256
+ .zg-gal[data-size="xl"] .zg-gal__t button{width:144px;border-radius:20px}
1257
+ /* Carousel: slide height and caption */
1258
+ .zg-car[data-size="xs"]{aspect-ratio:16/6}
1259
+ .zg-car[data-size="sm"]{aspect-ratio:16/7}
1260
+ .zg-car[data-size="md"]{aspect-ratio:16/8}
1261
+ .zg-car[data-size="lg"]{aspect-ratio:16/9}
1262
+ .zg-car[data-size="xl"]{aspect-ratio:16/10}
1263
+ .zg-car[data-size="xs"] .zg-car__c{padding:28px 12px 14px;font-size:11px}
1264
+ .zg-car[data-size="sm"] .zg-car__c{padding:36px 16px 16px;font-size:12px}
1265
+ .zg-car[data-size="md"] .zg-car__c{padding:44px 20px 18px;font-size:14px}
1266
+ .zg-car[data-size="lg"] .zg-car__c{padding:52px 24px 22px;font-size:16px}
1267
+ .zg-car[data-size="xl"] .zg-car__c{padding:60px 28px 26px;font-size:18px}
1268
+ /* bug fix: .zg-ibtn{position:relative} overrides the absolute arrows */
1269
+ .zg-car>.zg-car__p,.zg-car>.zg-car__n{position:absolute}
1270
+ .zg-car[data-size]{width:100%}
1271
+ .zg-car[data-size] .zg-car__s{aspect-ratio:auto;height:100%}
1272
+ .zg-gal[data-size]{flex:none;width:100%}
1273
+
1274
+
1275
+ /* ./sizes/domain.css */
1276
+ /* size overrides for the domain group. Only [data-size] selectors, see the size scale at the end of tokens.css */
1277
+ .zg-dm[data-size="xs"]{--dz:.82}.zg-dm[data-size="sm"]{--dz:.91}.zg-dm[data-size="md"]{--dz:1}.zg-dm[data-size="lg"]{--dz:1.12}.zg-dm[data-size="xl"]{--dz:1.25}
1278
+ .zg-lead.zg-dm[data-size]{padding:calc(14px*var(--dz));gap:calc(10px*var(--dz));border-radius:calc(20px*var(--dz))}
1279
+ .zg-lead.zg-dm[data-size] .zg-lead__row{gap:calc(10px*var(--dz))}
1280
+ .zg-kcard.zg-dm[data-size]{padding:calc(14px*var(--dz));gap:calc(8px*var(--dz));border-radius:calc(20px*var(--dz));font-size:calc(14px*var(--dz))}
1281
+ .zg-kcol.zg-dm[data-size]{padding:calc(12px*var(--dz));gap:calc(10px*var(--dz));min-width:calc(260px*var(--dz));flex-basis:calc(260px*var(--dz));border-radius:calc(28px*var(--dz))}
1282
+ .zg-kcol.zg-dm[data-size] .zg-kcol__head{font-size:calc(14px*var(--dz))}
1283
+ .zg-hotel.zg-dm[data-size]{border-radius:calc(28px*var(--dz))}
1284
+ .zg-hotel.zg-dm[data-size] .zg-hotel__body{padding:calc(16px*var(--dz));gap:calc(10px*var(--dz))}
1285
+ .zg-hotel.zg-dm[data-size] .zg-hotel__row{gap:calc(12px*var(--dz))}
1286
+ .zg-hotel.zg-dm[data-size] .zg-hotel__tags{top:calc(10px*var(--dz));inset-inline-start:calc(10px*var(--dz));gap:calc(6px*var(--dz))}
1287
+ .zg-hotel.zg-dm[data-size] .zg-hint{font-size:calc(13px*var(--dz))}
1288
+ .zg-hotel.zg-dm[data-size] .zg-badge{font-size:calc(12px*var(--dz))}
1289
+ .zg-hotel.zg-dm[data-size="xs"] .zg-hotel__img{aspect-ratio:16/8}.zg-hotel.zg-dm[data-size="xl"] .zg-hotel__img{aspect-ratio:16/11}
1290
+ .zg-card.zg-dm[data-size]{padding:calc(20px*var(--dz));gap:calc(14px*var(--dz));border-radius:calc(32px*var(--dz))}
1291
+ .zg-card.zg-dm[data-size] .zg-card__title{font-size:calc(18px*var(--dz))}
1292
+ .zg-card.zg-dm[data-size] .zg-card__sub,.zg-card.zg-dm[data-size] .zg-hint{font-size:calc(13px*var(--dz))}
1293
+ .zg-card.zg-dm[data-size] .zg-card__head{gap:calc(12px*var(--dz))}
1294
+ .zg-card.zg-dm[data-size] .zg-lead__row{gap:calc(10px*var(--dz))}
1295
+ .zg-card.zg-dm[data-size] .zg-chips{gap:calc(8px*var(--dz))}
1296
+ .zg-pt.zg-dm[data-size]{gap:calc(6px*var(--dz))}
1297
+ .zg-pt.zg-dm[data-size] > .zg-pt__i{padding:calc(12px*var(--dz)) calc(6px*var(--dz));gap:calc(4px*var(--dz));border-radius:calc(18px*var(--dz));font-size:calc(12px*var(--dz))}
1298
+ .zg-pt.zg-dm[data-size] > .zg-pt__i b{font-size:calc(16px*var(--dz))}
1299
+ .zg-rt.zg-dm[data-size]{gap:calc(3px*var(--dz))}
1300
+ .zg-rt.zg-dm[data-size] i{height:calc(36px*var(--dz));border-radius:calc(7px*var(--dz))}
1301
+ .zg-call.zg-dm[data-size]{grid-template-columns:calc(36px*var(--dz)) minmax(0,1fr) auto;gap:calc(12px*var(--dz));padding:calc(10px*var(--dz)) calc(12px*var(--dz));border-radius:calc(18px*var(--dz))}
1302
+ .zg-call.zg-dm[data-size] .zg-hint,.zg-lead.zg-dm[data-size] .zg-hint,.zg-kcard.zg-dm[data-size] .zg-hint,.zg-inc.zg-dm[data-size] .zg-hint{font-size:calc(13px*var(--dz))}
1303
+ .zg-lead.zg-dm[data-size] .zg-badge,.zg-kcard.zg-dm[data-size] .zg-badge,.zg-card.zg-dm[data-size] .zg-badge{font-size:calc(12px*var(--dz))}
1304
+ .zg-inc.zg-dm[data-size]{gap:calc(14px*var(--dz));padding:calc(14px*var(--dz)) calc(16px*var(--dz));border-radius:calc(28px*var(--dz));max-width:calc(440px*var(--dz))}
1305
+ .zg-inc.zg-dm[data-size] .zg-inc__ok{--h:var(--zg-h-md)}.zg-inc.zg-dm[data-size="xs"] .zg-inc__ok{--h:var(--zg-h-xs)}.zg-inc.zg-dm[data-size="sm"] .zg-inc__ok{--h:var(--zg-h-sm)}.zg-inc.zg-dm[data-size="lg"] .zg-inc__ok{--h:var(--zg-h-lg)}.zg-inc.zg-dm[data-size="xl"] .zg-inc__ok{--h:var(--zg-h-xl)}
1306
+ .zg-rooms.zg-dm[data-size]{grid-template-columns:repeat(auto-fill,minmax(calc(88px*var(--dz)),1fr));gap:calc(8px*var(--dz))}
1307
+ .zg-rooms.zg-dm[data-size] .zg-room{padding:calc(12px*var(--dz));border-radius:calc(18px*var(--dz));font-size:calc(12px*var(--dz))}
1308
+ .zg-rooms.zg-dm[data-size] .zg-room b{font-size:calc(16px*var(--dz))}
1309
+ .zg-rc.zg-dm[data-size]{grid-template-columns:calc(56px*var(--dz)) repeat(var(--d),minmax(0,1fr));font-size:calc(12px*var(--dz))}
1310
+ .zg-rc.zg-dm[data-size] .zg-rc__c{height:calc(28px*var(--dz))}
1311
+
1312
+
1313
+ /* ./effects.css */
1314
+ /* motion, effects, page backgrounds and gradient cards */
1315
+
1316
+ /* ── motion off: no animations or transitions ── */
1317
+ [data-motion="off"] *,[data-motion="off"] *::before,[data-motion="off"] *::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
1318
+
1319
+ /* ── effects lite: flat surfaces for weak browsers and devices ── */
1320
+ [data-fx="lite"] *,[data-fx="lite"] *::before,[data-fx="lite"] *::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
1321
+ [data-fx="lite"]{--zg-shadow-1:0 2px 8px oklch(0 0 0 / .18);--zg-shadow-2:0 6px 20px oklch(0 0 0 / .28);--zg-brand-glow:transparent}
1322
+ [data-fx="lite"][data-theme="light"]{--zg-shadow-1:0 2px 8px oklch(0.4 0.03 60 / .12);--zg-shadow-2:0 6px 20px oklch(0.4 0.03 60 / .18)}
1323
+ [data-fx="lite"] .zg-glass{background:var(--zg-pop)}
1324
+
1325
+ /* ── page backgrounds ── set data-bg on <html> (useUiTheme().setBackground) or on any element with class zg-bg ── */
1326
+ :root{--zg-bgL:.62;--zg-bgC:.16;--zg-bgA:26%}
1327
+ [data-theme="light"]{--zg-bgL:.8;--zg-bgC:.11;--zg-bgA:34%}
1328
+ [data-bg="aurora"]{--zg-bg-image:radial-gradient(60% 50% at 12% 8%,color-mix(in oklch,var(--zg-brand) var(--zg-bgA),transparent),transparent 70%),radial-gradient(50% 45% at 88% 18%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 250) var(--zg-bgA),transparent),transparent 70%),radial-gradient(65% 55% at 50% 105%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 320) var(--zg-bgA),transparent),transparent 70%)}
1329
+ [data-bg="sunset"]{--zg-bg-image:radial-gradient(70% 55% at 10% 0%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 55) var(--zg-bgA),transparent),transparent 70%),radial-gradient(60% 50% at 95% 25%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 15) var(--zg-bgA),transparent),transparent 70%),radial-gradient(70% 60% at 40% 110%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 340) var(--zg-bgA),transparent),transparent 70%)}
1330
+ [data-bg="ocean"]{--zg-bg-image:radial-gradient(70% 55% at 85% 0%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 230) var(--zg-bgA),transparent),transparent 70%),radial-gradient(60% 55% at 5% 40%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 200) var(--zg-bgA),transparent),transparent 70%),radial-gradient(70% 55% at 60% 110%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 265) var(--zg-bgA),transparent),transparent 70%)}
1331
+ [data-bg="emerald"]{--zg-bg-image:radial-gradient(65% 55% at 8% 5%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 155) var(--zg-bgA),transparent),transparent 70%),radial-gradient(55% 50% at 92% 30%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 190) var(--zg-bgA),transparent),transparent 70%),radial-gradient(70% 55% at 45% 110%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 120) var(--zg-bgA),transparent),transparent 70%)}
1332
+ [data-bg="rose"]{--zg-bg-image:radial-gradient(65% 55% at 90% 0%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 355) var(--zg-bgA),transparent),transparent 70%),radial-gradient(55% 50% at 5% 35%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 20) var(--zg-bgA),transparent),transparent 70%),radial-gradient(70% 55% at 50% 110%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 310) var(--zg-bgA),transparent),transparent 70%)}
1333
+ [data-bg="mesh"]{--zg-bg-image:radial-gradient(40% 35% at 15% 15%,color-mix(in oklch,var(--zg-brand) var(--zg-bgA),transparent),transparent 70%),radial-gradient(35% 35% at 80% 10%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 250) var(--zg-bgA),transparent),transparent 70%),radial-gradient(40% 40% at 90% 70%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 155) var(--zg-bgA),transparent),transparent 70%),radial-gradient(40% 40% at 20% 85%,color-mix(in oklch,oklch(var(--zg-bgL) var(--zg-bgC) 330) var(--zg-bgA),transparent),transparent 70%)}
1334
+ html[data-bg]:not([data-bg="none"]),.zg-bg:not([data-bg="none"]){background-color:var(--zg-bg);background-image:var(--zg-bg-image);background-attachment:fixed}
1335
+ .zg-bg:not([data-bg="none"]){background-attachment:scroll}
1336
+ html[data-bg]:not([data-bg="none"]) .zg-root{background:transparent}
1337
+ html[data-fx="full"][data-motion="on"][data-bg]:not([data-bg="none"]){background-size:140% 140%;animation:zg-bg-drift 48s ease-in-out infinite alternate}
1338
+ @keyframes zg-bg-drift{from{background-position:0% 0%}to{background-position:100% 100%}}
1339
+
1340
+ /* ── gradient cards ── <UiCard variant="gradient" tone="sky" intensity="soft|vivid"> ── */
1341
+ .zg-card--grad{--t:var(--zg-brand);--tv:var(--zg-brand);--on:var(--zg-on-brand)}
1342
+ .zg-card--t-brand{--t:var(--zg-brand);--tv:var(--zg-brand);--tv2:color-mix(in oklch,var(--zg-brand) 62%,oklch(0.88 0.07 85));--on:var(--zg-on-brand)}
1343
+ .zg-card--t-sky{--t:var(--zg-sky);--tv:oklch(0.6 0.14 235);--on:#fff}
1344
+ .zg-card--t-success{--t:var(--zg-green);--tv:oklch(0.56 0.15 150);--on:#fff}
1345
+ .zg-card--t-warning{--t:var(--zg-amber);--tv:oklch(0.8 0.15 85);--tv2:oklch(0.76 0.15 55);--on:oklch(0.2 0.04 80)}
1346
+ .zg-card--t-danger{--t:var(--zg-red);--tv:oklch(0.56 0.2 25);--on:#fff}
1347
+ .zg-card--t-violet{--t:oklch(0.64 0.2 295);--tv:oklch(0.5 0.22 295);--on:#fff}
1348
+ .zg-card--t-rose{--t:oklch(0.68 0.2 5);--tv:oklch(0.58 0.21 5);--on:#fff}
1349
+ .zg-card--t-neutral{--t:oklch(0.62 0.01 60);--tv:oklch(0.32 0.01 60);--on:#fff}
1350
+ .zg-card.zg-card--grad{background:linear-gradient(140deg,color-mix(in oklch,var(--t) var(--zg-g1,36%),var(--zg-gbase,var(--zg-s1))),color-mix(in oklch,var(--t) var(--zg-g2,9%),var(--zg-gbase,var(--zg-s1))) 70%);box-shadow:var(--zg-rim),inset 0 0 0 1px color-mix(in oklch,var(--t) 32%,transparent),var(--zg-shadow-1)}
1351
+ .zg-card.zg-card--grad.zg-card--vivid{background:linear-gradient(140deg,var(--tv),var(--tv2,color-mix(in oklch,var(--tv) 62%,oklch(0.25 0.1 280))));color:var(--on);box-shadow:inset 0 1px 0 oklch(1 0 0 / .28),var(--zg-shadow-1)}
1352
+ [data-theme="dark"]{--zg-gbase:var(--zg-s1);--zg-g1:36%;--zg-g2:9%}
1353
+ [data-theme="light"]{--zg-gbase:white;--zg-g1:30%;--zg-g2:8%}
1354
+ [data-fx="full"][data-motion="on"] .zg-card.zg-card--grad{transition:transform .25s var(--zg-ease),box-shadow .25s var(--zg-ease)}
1355
+ [data-fx="full"][data-motion="on"] .zg-card.zg-card--grad:hover{transform:translateY(-2px)}
1356
+ html[data-bg]:not([data-bg="none"]) body{background:transparent}
1357
+