@rokkit/themes 1.0.0-next.15 → 1.0.0-next.151

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 (320) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +106 -9
  3. package/build.mjs +244 -0
  4. package/dist/ant-design.css +2065 -0
  5. package/dist/base.css +5560 -0
  6. package/dist/bits-ui.css +2060 -0
  7. package/dist/carbon.css +2072 -0
  8. package/dist/daisy-ui.css +2081 -0
  9. package/dist/glass.css +1760 -0
  10. package/dist/grada-ui.css +1766 -0
  11. package/dist/index.css +25485 -0
  12. package/dist/material.css +1847 -0
  13. package/dist/minimal.css +1905 -0
  14. package/dist/rokkit.css +2306 -0
  15. package/dist/shadcn.css +2053 -0
  16. package/package.json +82 -52
  17. package/src/ant-design/button.css +183 -0
  18. package/src/ant-design/card.css +100 -0
  19. package/src/ant-design/chart.css +34 -0
  20. package/src/ant-design/connector.css +11 -0
  21. package/src/ant-design/dropdown.css +50 -0
  22. package/src/ant-design/floating-action.css +63 -0
  23. package/src/ant-design/floating-navigation.css +70 -0
  24. package/src/ant-design/grid.css +46 -0
  25. package/src/ant-design/index.css +34 -0
  26. package/src/ant-design/input.css +149 -0
  27. package/src/ant-design/list.css +126 -0
  28. package/src/ant-design/menu.css +88 -0
  29. package/src/ant-design/message.css +35 -0
  30. package/src/ant-design/range.css +61 -0
  31. package/src/ant-design/search-filter.css +49 -0
  32. package/src/ant-design/select.css +158 -0
  33. package/src/ant-design/status-list.css +66 -0
  34. package/src/ant-design/switch.css +29 -0
  35. package/src/ant-design/table.css +89 -0
  36. package/src/ant-design/tabs.css +149 -0
  37. package/src/ant-design/timeline.css +45 -0
  38. package/src/ant-design/toc.css +18 -0
  39. package/src/ant-design/toggle.css +48 -0
  40. package/src/ant-design/toolbar.css +85 -0
  41. package/src/ant-design/tree.css +127 -0
  42. package/src/ant-design/upload-progress.css +102 -0
  43. package/src/ant-design/upload-target.css +50 -0
  44. package/src/base/alert-list.css +91 -0
  45. package/src/base/breadcrumbs.css +47 -0
  46. package/src/base/button.css +254 -0
  47. package/src/base/card.css +36 -0
  48. package/src/base/carousel.css +128 -0
  49. package/src/base/chart.css +94 -0
  50. package/src/base/connector.css +92 -0
  51. package/src/base/display.css +91 -0
  52. package/src/base/dropdown.css +166 -0
  53. package/src/base/floating-action.css +388 -0
  54. package/src/base/floating-navigation.css +405 -0
  55. package/src/base/graph-paper.css +83 -0
  56. package/src/base/grid.css +93 -0
  57. package/src/base/index.css +47 -0
  58. package/src/base/input.css +288 -0
  59. package/src/base/item.css +78 -0
  60. package/src/base/list.css +183 -0
  61. package/src/base/menu.css +274 -0
  62. package/src/base/message.css +62 -0
  63. package/src/base/pill.css +57 -0
  64. package/src/base/progress.css +34 -0
  65. package/src/base/range.css +121 -0
  66. package/src/base/rating.css +42 -0
  67. package/src/base/reveal.css +37 -0
  68. package/src/base/search-filter.css +132 -0
  69. package/src/base/select.css +411 -0
  70. package/src/base/shine.css +14 -0
  71. package/src/base/status-list.css +19 -0
  72. package/src/base/stepper.css +140 -0
  73. package/src/base/swatch.css +79 -0
  74. package/src/base/switch.css +152 -0
  75. package/src/base/table.css +159 -0
  76. package/src/base/tabs.css +171 -0
  77. package/src/base/tilt.css +14 -0
  78. package/src/base/timeline.css +84 -0
  79. package/src/base/toc.css +50 -0
  80. package/src/base/toggle.css +138 -0
  81. package/src/base/toolbar.css +341 -0
  82. package/src/base/tree.css +235 -0
  83. package/src/base/upload-progress.css +155 -0
  84. package/src/base/upload-target.css +67 -0
  85. package/src/bits-ui/button.css +176 -0
  86. package/src/bits-ui/card.css +99 -0
  87. package/src/bits-ui/chart.css +34 -0
  88. package/src/bits-ui/connector.css +11 -0
  89. package/src/bits-ui/dropdown.css +50 -0
  90. package/src/bits-ui/floating-action.css +63 -0
  91. package/src/bits-ui/floating-navigation.css +70 -0
  92. package/src/bits-ui/grid.css +46 -0
  93. package/src/bits-ui/index.css +34 -0
  94. package/src/bits-ui/input.css +150 -0
  95. package/src/bits-ui/list.css +126 -0
  96. package/src/bits-ui/menu.css +88 -0
  97. package/src/bits-ui/message.css +35 -0
  98. package/src/bits-ui/range.css +61 -0
  99. package/src/bits-ui/search-filter.css +49 -0
  100. package/src/bits-ui/select.css +158 -0
  101. package/src/bits-ui/status-list.css +66 -0
  102. package/src/bits-ui/switch.css +29 -0
  103. package/src/bits-ui/table.css +89 -0
  104. package/src/bits-ui/tabs.css +151 -0
  105. package/src/bits-ui/timeline.css +45 -0
  106. package/src/bits-ui/toc.css +18 -0
  107. package/src/bits-ui/toggle.css +48 -0
  108. package/src/bits-ui/toolbar.css +85 -0
  109. package/src/bits-ui/tree.css +127 -0
  110. package/src/bits-ui/upload-progress.css +102 -0
  111. package/src/bits-ui/upload-target.css +50 -0
  112. package/src/carbon/button.css +183 -0
  113. package/src/carbon/card.css +97 -0
  114. package/src/carbon/chart.css +34 -0
  115. package/src/carbon/connector.css +11 -0
  116. package/src/carbon/dropdown.css +50 -0
  117. package/src/carbon/floating-action.css +63 -0
  118. package/src/carbon/floating-navigation.css +70 -0
  119. package/src/carbon/grid.css +46 -0
  120. package/src/carbon/index.css +33 -0
  121. package/src/carbon/input.css +148 -0
  122. package/src/carbon/list.css +126 -0
  123. package/src/carbon/menu.css +88 -0
  124. package/src/carbon/message.css +37 -0
  125. package/src/carbon/range.css +61 -0
  126. package/src/carbon/search-filter.css +49 -0
  127. package/src/carbon/select.css +158 -0
  128. package/src/carbon/status-list.css +66 -0
  129. package/src/carbon/switch.css +31 -0
  130. package/src/carbon/table.css +93 -0
  131. package/src/carbon/tabs.css +149 -0
  132. package/src/carbon/timeline.css +45 -0
  133. package/src/carbon/toc.css +22 -0
  134. package/src/carbon/toggle.css +48 -0
  135. package/src/carbon/toolbar.css +85 -0
  136. package/src/carbon/tree.css +127 -0
  137. package/src/carbon/upload-progress.css +102 -0
  138. package/src/carbon/upload-target.css +50 -0
  139. package/src/daisy-ui/button.css +195 -0
  140. package/src/daisy-ui/card.css +99 -0
  141. package/src/daisy-ui/chart.css +34 -0
  142. package/src/daisy-ui/connector.css +11 -0
  143. package/src/daisy-ui/dropdown.css +50 -0
  144. package/src/daisy-ui/floating-action.css +63 -0
  145. package/src/daisy-ui/floating-navigation.css +70 -0
  146. package/src/daisy-ui/grid.css +46 -0
  147. package/src/daisy-ui/index.css +33 -0
  148. package/src/daisy-ui/input.css +146 -0
  149. package/src/daisy-ui/list.css +127 -0
  150. package/src/daisy-ui/menu.css +88 -0
  151. package/src/daisy-ui/message.css +37 -0
  152. package/src/daisy-ui/range.css +61 -0
  153. package/src/daisy-ui/search-filter.css +49 -0
  154. package/src/daisy-ui/select.css +158 -0
  155. package/src/daisy-ui/status-list.css +66 -0
  156. package/src/daisy-ui/switch.css +31 -0
  157. package/src/daisy-ui/table.css +89 -0
  158. package/src/daisy-ui/tabs.css +149 -0
  159. package/src/daisy-ui/timeline.css +45 -0
  160. package/src/daisy-ui/toc.css +22 -0
  161. package/src/daisy-ui/toggle.css +48 -0
  162. package/src/daisy-ui/toolbar.css +85 -0
  163. package/src/daisy-ui/tree.css +127 -0
  164. package/src/daisy-ui/upload-progress.css +102 -0
  165. package/src/daisy-ui/upload-target.css +50 -0
  166. package/src/glass/button.css +174 -0
  167. package/src/glass/card.css +103 -0
  168. package/src/glass/chart.css +38 -0
  169. package/src/glass/dropdown.css +50 -0
  170. package/src/glass/floating-action.css +61 -0
  171. package/src/glass/floating-navigation.css +74 -0
  172. package/src/glass/index.css +30 -0
  173. package/src/glass/input.css +128 -0
  174. package/src/glass/list.css +122 -0
  175. package/src/glass/menu.css +92 -0
  176. package/src/glass/message.css +36 -0
  177. package/src/glass/range.css +61 -0
  178. package/src/glass/search-filter.css +49 -0
  179. package/src/glass/select.css +178 -0
  180. package/src/glass/status-list.css +66 -0
  181. package/src/glass/swatch.css +19 -0
  182. package/src/glass/switch.css +28 -0
  183. package/src/glass/table.css +87 -0
  184. package/src/glass/tabs.css +58 -0
  185. package/src/glass/timeline.css +46 -0
  186. package/src/glass/toc.css +18 -0
  187. package/src/glass/toggle.css +48 -0
  188. package/src/glass/toolbar.css +84 -0
  189. package/src/glass/tree.css +110 -0
  190. package/src/grada-ui/button.css +235 -0
  191. package/src/grada-ui/card.css +90 -0
  192. package/src/grada-ui/chart.css +34 -0
  193. package/src/grada-ui/dropdown.css +54 -0
  194. package/src/grada-ui/floating-action.css +59 -0
  195. package/src/grada-ui/floating-navigation.css +65 -0
  196. package/src/grada-ui/index.css +55 -0
  197. package/src/grada-ui/input.css +154 -0
  198. package/src/grada-ui/list.css +112 -0
  199. package/src/grada-ui/menu.css +81 -0
  200. package/src/grada-ui/message.css +48 -0
  201. package/src/grada-ui/range.css +55 -0
  202. package/src/grada-ui/search-filter.css +43 -0
  203. package/src/grada-ui/select.css +172 -0
  204. package/src/grada-ui/status-list.css +62 -0
  205. package/src/grada-ui/switch.css +31 -0
  206. package/src/grada-ui/table.css +79 -0
  207. package/src/grada-ui/tabs.css +55 -0
  208. package/src/grada-ui/timeline.css +38 -0
  209. package/src/grada-ui/toc.css +24 -0
  210. package/src/grada-ui/toggle.css +43 -0
  211. package/src/grada-ui/toolbar.css +83 -0
  212. package/src/grada-ui/tree.css +94 -0
  213. package/src/index.css +18 -0
  214. package/src/index.js +25 -2
  215. package/src/material/button.css +178 -0
  216. package/src/material/card.css +99 -0
  217. package/src/material/chart.css +38 -0
  218. package/src/material/dropdown.css +50 -0
  219. package/src/material/floating-action.css +64 -0
  220. package/src/material/floating-navigation.css +74 -0
  221. package/src/material/index.css +30 -0
  222. package/src/material/input.css +164 -0
  223. package/src/material/list.css +126 -0
  224. package/src/material/menu.css +92 -0
  225. package/src/material/message.css +36 -0
  226. package/src/material/range.css +62 -0
  227. package/src/material/search-filter.css +49 -0
  228. package/src/material/select.css +175 -0
  229. package/src/material/status-list.css +66 -0
  230. package/src/material/swatch.css +19 -0
  231. package/src/material/switch.css +28 -0
  232. package/src/material/table.css +91 -0
  233. package/src/material/tabs.css +85 -0
  234. package/src/material/timeline.css +46 -0
  235. package/src/material/toc.css +18 -0
  236. package/src/material/toggle.css +48 -0
  237. package/src/material/toolbar.css +85 -0
  238. package/src/material/tree.css +124 -0
  239. package/src/minimal/button.css +176 -0
  240. package/src/minimal/card.css +99 -0
  241. package/src/minimal/chart.css +38 -0
  242. package/src/minimal/dropdown.css +50 -0
  243. package/src/minimal/floating-action.css +63 -0
  244. package/src/minimal/floating-navigation.css +70 -0
  245. package/src/minimal/index.css +30 -0
  246. package/src/minimal/input.css +171 -0
  247. package/src/minimal/list.css +126 -0
  248. package/src/minimal/menu.css +88 -0
  249. package/src/minimal/message.css +36 -0
  250. package/src/minimal/range.css +61 -0
  251. package/src/minimal/search-filter.css +49 -0
  252. package/src/minimal/select.css +170 -0
  253. package/src/minimal/status-list.css +66 -0
  254. package/src/minimal/swatch.css +19 -0
  255. package/src/minimal/switch.css +32 -0
  256. package/src/minimal/table.css +89 -0
  257. package/src/minimal/tabs.css +149 -0
  258. package/src/minimal/timeline.css +45 -0
  259. package/src/minimal/toc.css +18 -0
  260. package/src/minimal/toggle.css +48 -0
  261. package/src/minimal/toolbar.css +85 -0
  262. package/src/minimal/tree.css +127 -0
  263. package/src/palette.css +7 -0
  264. package/src/rokkit/button.css +290 -0
  265. package/src/rokkit/card.css +102 -0
  266. package/src/rokkit/chart.css +38 -0
  267. package/src/rokkit/connector.css +11 -0
  268. package/src/rokkit/dropdown.css +70 -0
  269. package/src/rokkit/floating-action.css +65 -0
  270. package/src/rokkit/floating-navigation.css +83 -0
  271. package/src/rokkit/grid.css +46 -0
  272. package/src/rokkit/index.css +34 -0
  273. package/src/rokkit/input.css +134 -0
  274. package/src/rokkit/list.css +177 -0
  275. package/src/rokkit/menu.css +93 -0
  276. package/src/rokkit/message.css +44 -0
  277. package/src/rokkit/range.css +62 -0
  278. package/src/rokkit/search-filter.css +49 -0
  279. package/src/rokkit/select.css +190 -0
  280. package/src/rokkit/status-list.css +68 -0
  281. package/src/rokkit/swatch.css +18 -0
  282. package/src/rokkit/switch.css +29 -0
  283. package/src/rokkit/table.css +89 -0
  284. package/src/rokkit/tabs.css +111 -0
  285. package/src/rokkit/timeline.css +46 -0
  286. package/src/rokkit/toc.css +18 -0
  287. package/src/rokkit/toggle.css +48 -0
  288. package/src/rokkit/toolbar.css +90 -0
  289. package/src/rokkit/tree.css +149 -0
  290. package/src/rokkit/upload-progress.css +102 -0
  291. package/src/rokkit/upload-target.css +50 -0
  292. package/src/shadcn/button.css +176 -0
  293. package/src/shadcn/card.css +99 -0
  294. package/src/shadcn/chart.css +34 -0
  295. package/src/shadcn/connector.css +11 -0
  296. package/src/shadcn/dropdown.css +50 -0
  297. package/src/shadcn/floating-action.css +63 -0
  298. package/src/shadcn/floating-navigation.css +70 -0
  299. package/src/shadcn/grid.css +46 -0
  300. package/src/shadcn/index.css +34 -0
  301. package/src/shadcn/input.css +141 -0
  302. package/src/shadcn/list.css +126 -0
  303. package/src/shadcn/menu.css +88 -0
  304. package/src/shadcn/message.css +35 -0
  305. package/src/shadcn/range.css +61 -0
  306. package/src/shadcn/search-filter.css +49 -0
  307. package/src/shadcn/select.css +158 -0
  308. package/src/shadcn/status-list.css +66 -0
  309. package/src/shadcn/switch.css +31 -0
  310. package/src/shadcn/table.css +89 -0
  311. package/src/shadcn/tabs.css +149 -0
  312. package/src/shadcn/timeline.css +45 -0
  313. package/src/shadcn/toc.css +20 -0
  314. package/src/shadcn/toggle.css +48 -0
  315. package/src/shadcn/toolbar.css +85 -0
  316. package/src/shadcn/tree.css +127 -0
  317. package/src/shadcn/upload-progress.css +102 -0
  318. package/src/shadcn/upload-target.css +50 -0
  319. package/src/constants.js +0 -4
  320. package/src/utils.js +0 -88
@@ -0,0 +1,2306 @@
1
+ /**
2
+ * @rokkit/themes - Rokkit Theme
3
+ *
4
+ * Rich gradients, glowing borders, and vibrant accents.
5
+ * Default theme — no wrapper needed.
6
+ */
7
+
8
+ /**
9
+ * Button - Rokkit Theme Styles
10
+ *
11
+ * Rich gradients and glowing borders.
12
+ */
13
+
14
+ /* =============================================================================
15
+ Default Style (filled)
16
+ ============================================================================= */
17
+
18
+ /* Default variant */
19
+ [data-style='rokkit'] [data-button][data-style='default'][data-variant='default'],
20
+ [data-style='rokkit'] [data-button]:not([data-style])[data-variant='default'],
21
+ [data-style='rokkit'] [data-button][data-style='default']:not([data-variant]),
22
+ [data-style='rokkit'] [data-button]:not([data-style]):not([data-variant]) {
23
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-200),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
24
+ }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="default"][data-variant="default"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="default"][data-variant="default"],[data-mode="dark"][data-style="rokkit"] [data-button]:not([data-style])[data-variant="default"],[data-mode="dark"] [data-style="rokkit"] [data-button]:not([data-style])[data-variant="default"],[data-mode="dark"][data-style="rokkit"] [data-button][data-style="default"]:not([data-variant]),[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="default"]:not([data-variant]),[data-mode="dark"][data-style="rokkit"] [data-button]:not([data-style]):not([data-variant]),[data-mode="dark"] [data-style="rokkit"] [data-button]:not([data-style]):not([data-variant]){--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-700),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-800),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
25
+
26
+ /* Primary variant */
27
+ [data-style='rokkit'] [data-button][data-style='default'][data-variant='primary'],
28
+ [data-style='rokkit'] [data-button]:not([data-style])[data-variant='primary'] {
29
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));
30
+ }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="default"][data-variant="primary"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="default"][data-variant="primary"],[data-mode="dark"][data-style="rokkit"] [data-button]:not([data-style])[data-variant="primary"],[data-mode="dark"] [data-style="rokkit"] [data-button]:not([data-style])[data-variant="primary"]{--un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);}
31
+
32
+ /* Secondary variant */
33
+ [data-style='rokkit'] [data-button][data-style='default'][data-variant='secondary'],
34
+ [data-style='rokkit'] [data-button]:not([data-style])[data-variant='secondary'] {
35
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-secondary-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-secondary-400),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-300),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));
36
+ }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="default"][data-variant="secondary"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="default"][data-variant="secondary"],[data-mode="dark"][data-style="rokkit"] [data-button]:not([data-style])[data-variant="secondary"],[data-mode="dark"] [data-style="rokkit"] [data-button]:not([data-style])[data-variant="secondary"]{--un-border-opacity:1;border-color:rgba(var(--color-secondary-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-secondary-600),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-700),1) var(--un-gradient-to-position);}
37
+
38
+ /* Accent variant */
39
+ [data-style='rokkit'] [data-button][data-style='default'][data-variant='accent'],
40
+ [data-style='rokkit'] [data-button]:not([data-style])[data-variant='accent'] {
41
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-accent-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-accent-400),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-accent-300),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-accent-50),var(--un-text-opacity));
42
+ }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="default"][data-variant="accent"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="default"][data-variant="accent"],[data-mode="dark"][data-style="rokkit"] [data-button]:not([data-style])[data-variant="accent"],[data-mode="dark"] [data-style="rokkit"] [data-button]:not([data-style])[data-variant="accent"]{--un-border-opacity:1;border-color:rgba(var(--color-accent-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-accent-600),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-accent-700),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-accent-50),var(--un-text-opacity));}
43
+
44
+ /* Danger variant */
45
+ [data-style='rokkit'] [data-button][data-style='default'][data-variant='danger'],
46
+ [data-style='rokkit'] [data-button]:not([data-style])[data-variant='danger'] {
47
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-danger-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-danger-400),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-danger-300),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-danger-50),var(--un-text-opacity));
48
+ }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="default"][data-variant="danger"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="default"][data-variant="danger"],[data-mode="dark"][data-style="rokkit"] [data-button]:not([data-style])[data-variant="danger"],[data-mode="dark"] [data-style="rokkit"] [data-button]:not([data-style])[data-variant="danger"]{--un-border-opacity:1;border-color:rgba(var(--color-danger-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-danger-600),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-danger-700),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-danger-50),var(--un-text-opacity));}
49
+
50
+ /* =============================================================================
51
+ Outline Style
52
+ ============================================================================= */
53
+
54
+ [data-style='rokkit'] [data-button][data-style='outline'][data-variant='default'],
55
+ [data-style='rokkit'] [data-button][data-style='outline']:not([data-variant]) {
56
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));background-color:transparent;--un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
57
+ }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="outline"][data-variant="default"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="outline"][data-variant="default"],[data-mode="dark"][data-style="rokkit"] [data-button][data-style="outline"]:not([data-variant]),[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="outline"]:not([data-variant]){--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
58
+
59
+ [data-style='rokkit'] [data-button][data-style='outline'][data-variant='primary'] {
60
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-primary-400),var(--un-border-opacity));background-color:transparent;--un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
61
+ }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="outline"][data-variant="primary"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="outline"][data-variant="primary"]{--un-border-opacity:1;border-color:rgba(var(--color-primary-600),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
62
+
63
+ [data-style='rokkit'] [data-button][data-style='outline'][data-variant='secondary'] {
64
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-secondary-400),var(--un-border-opacity));background-color:transparent;--un-text-opacity:1;color:rgba(var(--color-secondary-600),var(--un-text-opacity));
65
+ }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="outline"][data-variant="secondary"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="outline"][data-variant="secondary"]{--un-border-opacity:1;border-color:rgba(var(--color-secondary-600),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-secondary-400),var(--un-text-opacity));}
66
+
67
+ [data-style='rokkit'] [data-button][data-style='outline'][data-variant='accent'] {
68
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-accent-400),var(--un-border-opacity));background-color:transparent;--un-text-opacity:1;color:rgba(var(--color-accent-600),var(--un-text-opacity));
69
+ }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="outline"][data-variant="accent"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="outline"][data-variant="accent"]{--un-border-opacity:1;border-color:rgba(var(--color-accent-600),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-accent-400),var(--un-text-opacity));}
70
+
71
+ [data-style='rokkit'] [data-button][data-style='outline'][data-variant='danger'] {
72
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-danger-400),var(--un-border-opacity));background-color:transparent;--un-text-opacity:1;color:rgba(var(--color-danger-400),var(--un-text-opacity));
73
+ }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="outline"][data-variant="danger"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="outline"][data-variant="danger"]{--un-border-opacity:1;border-color:rgba(var(--color-danger-600),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-danger-600),var(--un-text-opacity));}
74
+
75
+ /* =============================================================================
76
+ Ghost Style
77
+ ============================================================================= */
78
+
79
+ [data-style='rokkit'] [data-button][data-style='ghost'] {
80
+ border-color:transparent;background-color:transparent;
81
+ }
82
+
83
+ [data-style='rokkit'] [data-button][data-style='ghost'][data-variant='default'],
84
+ [data-style='rokkit'] [data-button][data-style='ghost']:not([data-variant]) {
85
+ --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
86
+ }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="ghost"][data-variant="default"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="ghost"][data-variant="default"],[data-mode="dark"][data-style="rokkit"] [data-button][data-style="ghost"]:not([data-variant]),[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="ghost"]:not([data-variant]){--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
87
+
88
+ [data-style='rokkit'] [data-button][data-style='ghost'][data-variant='primary'] {
89
+ --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
90
+ }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="ghost"][data-variant="primary"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="ghost"][data-variant="primary"]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
91
+
92
+ [data-style='rokkit'] [data-button][data-style='ghost'][data-variant='secondary'] {
93
+ --un-text-opacity:1;color:rgba(var(--color-secondary-600),var(--un-text-opacity));
94
+ }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="ghost"][data-variant="secondary"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="ghost"][data-variant="secondary"]{--un-text-opacity:1;color:rgba(var(--color-secondary-400),var(--un-text-opacity));}
95
+
96
+ [data-style='rokkit'] [data-button][data-style='ghost'][data-variant='accent'] {
97
+ --un-text-opacity:1;color:rgba(var(--color-accent-600),var(--un-text-opacity));
98
+ }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="ghost"][data-variant="accent"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="ghost"][data-variant="accent"]{--un-text-opacity:1;color:rgba(var(--color-accent-400),var(--un-text-opacity));}
99
+
100
+ [data-style='rokkit'] [data-button][data-style='ghost'][data-variant='danger'] {
101
+ --un-text-opacity:1;color:rgba(var(--color-danger-400),var(--un-text-opacity));
102
+ }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="ghost"][data-variant="danger"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="ghost"][data-variant="danger"]{--un-text-opacity:1;color:rgba(var(--color-danger-600),var(--un-text-opacity));}
103
+
104
+ /* =============================================================================
105
+ Gradient Style
106
+ ============================================================================= */
107
+
108
+ [data-style='rokkit'] [data-button][data-style='gradient'][data-variant='default'],
109
+ [data-style='rokkit'] [data-button][data-style='gradient']:not([data-variant]) {
110
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-400),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-200),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));
111
+ }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="gradient"][data-variant="default"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="gradient"][data-variant="default"],[data-mode="dark"][data-style="rokkit"] [data-button][data-style="gradient"]:not([data-variant]),[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="gradient"]:not([data-variant]){--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-600),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-800),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
112
+
113
+ [data-style='rokkit'] [data-button][data-style='gradient'][data-variant='primary'] {
114
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-primary-300),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));
115
+ }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="gradient"][data-variant="primary"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="gradient"][data-variant="primary"]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-primary-700),1) var(--un-gradient-to-position);}
116
+
117
+ [data-style='rokkit'] [data-button][data-style='gradient'][data-variant='secondary'] {
118
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-secondary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-300),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));
119
+ }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="gradient"][data-variant="secondary"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="gradient"][data-variant="secondary"]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-secondary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-700),1) var(--un-gradient-to-position);}
120
+
121
+ [data-style='rokkit'] [data-button][data-style='gradient'][data-variant='accent'] {
122
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-accent-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-accent-300),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-accent-50),var(--un-text-opacity));
123
+ }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="gradient"][data-variant="accent"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="gradient"][data-variant="accent"]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-accent-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-accent-700),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-accent-50),var(--un-text-opacity));}
124
+
125
+ [data-style='rokkit'] [data-button][data-style='gradient'][data-variant='danger'] {
126
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-danger-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-danger-300),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-danger-50),var(--un-text-opacity));
127
+ }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="gradient"][data-variant="danger"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="gradient"][data-variant="danger"]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-danger-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-danger-700),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-danger-50),var(--un-text-opacity));}
128
+
129
+ [data-style='rokkit']
130
+ [data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {
131
+ filter: brightness(1.1);
132
+ }
133
+
134
+ /* =============================================================================
135
+ Link Style
136
+ ============================================================================= */
137
+
138
+ [data-style='rokkit'] [data-button][data-style='link'][data-variant='default'],
139
+ [data-style='rokkit'] [data-button][data-style='link']:not([data-variant]) {
140
+ --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
141
+ }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="link"][data-variant="default"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="link"][data-variant="default"],[data-mode="dark"][data-style="rokkit"] [data-button][data-style="link"]:not([data-variant]),[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="link"]:not([data-variant]){--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
142
+
143
+ [data-style='rokkit'] [data-button][data-style='link'][data-variant='primary'] {
144
+ --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
145
+ }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="link"][data-variant="primary"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="link"][data-variant="primary"]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
146
+
147
+ [data-style='rokkit'] [data-button][data-style='link'][data-variant='secondary'] {
148
+ --un-text-opacity:1;color:rgba(var(--color-secondary-600),var(--un-text-opacity));
149
+ }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="link"][data-variant="secondary"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="link"][data-variant="secondary"]{--un-text-opacity:1;color:rgba(var(--color-secondary-400),var(--un-text-opacity));}
150
+
151
+ [data-style='rokkit'] [data-button][data-style='link'][data-variant='accent'] {
152
+ --un-text-opacity:1;color:rgba(var(--color-accent-600),var(--un-text-opacity));
153
+ }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="link"][data-variant="accent"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="link"][data-variant="accent"]{--un-text-opacity:1;color:rgba(var(--color-accent-400),var(--un-text-opacity));}
154
+
155
+ [data-style='rokkit'] [data-button][data-style='link'][data-variant='danger'] {
156
+ --un-text-opacity:1;color:rgba(var(--color-danger-400),var(--un-text-opacity));
157
+ }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="link"][data-variant="danger"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="link"][data-variant="danger"]{--un-text-opacity:1;color:rgba(var(--color-danger-600),var(--un-text-opacity));}
158
+
159
+ [data-style='rokkit'] [data-button][data-style='link']:hover:not(:disabled):not([data-disabled]) {
160
+ --un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
161
+ }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="link"]:hover:not(:disabled):not([data-disabled]),[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="link"]:hover:not(:disabled):not([data-disabled]){--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
162
+
163
+ /* =============================================================================
164
+ Hover States
165
+ ============================================================================= */
166
+
167
+ /* Default style hover */
168
+ [data-style='rokkit'] [data-button][data-style='default']:hover:not(:disabled):not([data-disabled]),
169
+ [data-style='rokkit'] [data-button]:not([data-style]):hover:not(:disabled):not([data-disabled]) {
170
+ opacity:0.9;
171
+ }
172
+
173
+ /* Outline style hover */
174
+ [data-style='rokkit']
175
+ [data-button][data-style='outline']:hover:not(:disabled):not(
176
+ [data-disabled]
177
+ )[data-variant='default'],
178
+ [data-style='rokkit']
179
+ [data-button][data-style='outline']:hover:not(:disabled):not([data-disabled]):not(
180
+ [data-variant]
181
+ ) {
182
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-200),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-100),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
183
+ }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="outline"]:hover:not(:disabled):not([data-disabled])[data-variant="default"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="outline"]:hover:not(:disabled):not([data-disabled])[data-variant="default"],[data-mode="dark"][data-style="rokkit"] [data-button][data-style="outline"]:hover:not(:disabled):not([data-disabled]):not([data-variant]),[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="outline"]:hover:not(:disabled):not([data-disabled]):not([data-variant]){--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-800),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-900),1) var(--un-gradient-to-position);}
184
+
185
+ [data-style='rokkit']
186
+ [data-button][data-style='outline']:hover:not(:disabled):not(
187
+ [data-disabled]
188
+ )[data-variant='primary'] {
189
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-200),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-primary-100),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
190
+ }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="outline"]:hover:not(:disabled):not([data-disabled])[data-variant="primary"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="outline"]:hover:not(:disabled):not([data-disabled])[data-variant="primary"]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-800),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-primary-900),1) var(--un-gradient-to-position);}
191
+
192
+ [data-style='rokkit']
193
+ [data-button][data-style='outline']:hover:not(:disabled):not(
194
+ [data-disabled]
195
+ )[data-variant='secondary'] {
196
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-secondary-200),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-100),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
197
+ }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="outline"]:hover:not(:disabled):not([data-disabled])[data-variant="secondary"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="outline"]:hover:not(:disabled):not([data-disabled])[data-variant="secondary"]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-secondary-800),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-900),1) var(--un-gradient-to-position);}
198
+
199
+ [data-style='rokkit']
200
+ [data-button][data-style='outline']:hover:not(:disabled):not(
201
+ [data-disabled]
202
+ )[data-variant='accent'] {
203
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-accent-200),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-accent-100),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
204
+ }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="outline"]:hover:not(:disabled):not([data-disabled])[data-variant="accent"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="outline"]:hover:not(:disabled):not([data-disabled])[data-variant="accent"]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-accent-800),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-accent-900),1) var(--un-gradient-to-position);}
205
+
206
+ [data-style='rokkit']
207
+ [data-button][data-style='outline']:hover:not(:disabled):not(
208
+ [data-disabled]
209
+ )[data-variant='danger'] {
210
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-danger-200),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-danger-100),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
211
+ }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="outline"]:hover:not(:disabled):not([data-disabled])[data-variant="danger"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="outline"]:hover:not(:disabled):not([data-disabled])[data-variant="danger"]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-danger-800),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-danger-900),1) var(--un-gradient-to-position);}
212
+
213
+ /* Ghost style hover */
214
+ [data-style='rokkit']
215
+ [data-button][data-style='ghost']:hover:not(:disabled):not(
216
+ [data-disabled]
217
+ )[data-variant='default'],
218
+ [data-style='rokkit']
219
+ [data-button][data-style='ghost']:hover:not(:disabled):not([data-disabled]):not([data-variant]) {
220
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));
221
+ }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="ghost"]:hover:not(:disabled):not([data-disabled])[data-variant="default"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="ghost"]:hover:not(:disabled):not([data-disabled])[data-variant="default"],[data-mode="dark"][data-style="rokkit"] [data-button][data-style="ghost"]:hover:not(:disabled):not([data-disabled]):not([data-variant]),[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="ghost"]:hover:not(:disabled):not([data-disabled]):not([data-variant]){--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));}
222
+
223
+ [data-style='rokkit']
224
+ [data-button][data-style='ghost']:hover:not(:disabled):not(
225
+ [data-disabled]
226
+ )[data-variant='primary'] {
227
+ --un-bg-opacity:1;background-color:rgba(var(--color-primary-100),var(--un-bg-opacity));
228
+ }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="ghost"]:hover:not(:disabled):not([data-disabled])[data-variant="primary"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="ghost"]:hover:not(:disabled):not([data-disabled])[data-variant="primary"]{--un-bg-opacity:1;background-color:rgba(var(--color-primary-900),var(--un-bg-opacity));}
229
+
230
+ [data-style='rokkit']
231
+ [data-button][data-style='ghost']:hover:not(:disabled):not(
232
+ [data-disabled]
233
+ )[data-variant='secondary'] {
234
+ --un-bg-opacity:1;background-color:rgba(var(--color-secondary-100),var(--un-bg-opacity));
235
+ }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="ghost"]:hover:not(:disabled):not([data-disabled])[data-variant="secondary"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="ghost"]:hover:not(:disabled):not([data-disabled])[data-variant="secondary"]{--un-bg-opacity:1;background-color:rgba(var(--color-secondary-900),var(--un-bg-opacity));}
236
+
237
+ [data-style='rokkit']
238
+ [data-button][data-style='ghost']:hover:not(:disabled):not(
239
+ [data-disabled]
240
+ )[data-variant='accent'] {
241
+ --un-bg-opacity:1;background-color:rgba(var(--color-accent-100),var(--un-bg-opacity));
242
+ }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="ghost"]:hover:not(:disabled):not([data-disabled])[data-variant="accent"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="ghost"]:hover:not(:disabled):not([data-disabled])[data-variant="accent"]{--un-bg-opacity:1;background-color:rgba(var(--color-accent-900),var(--un-bg-opacity));}
243
+
244
+ [data-style='rokkit']
245
+ [data-button][data-style='ghost']:hover:not(:disabled):not(
246
+ [data-disabled]
247
+ )[data-variant='danger'] {
248
+ --un-bg-opacity:1;background-color:rgba(var(--color-danger-100),var(--un-bg-opacity));
249
+ }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="ghost"]:hover:not(:disabled):not([data-disabled])[data-variant="danger"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="ghost"]:hover:not(:disabled):not([data-disabled])[data-variant="danger"]{--un-bg-opacity:1;background-color:rgba(var(--color-danger-900),var(--un-bg-opacity));}
250
+
251
+ /* =============================================================================
252
+ Active/Pressed State
253
+ ============================================================================= */
254
+
255
+ [data-style='rokkit'] [data-button]:active:not(:disabled):not([data-disabled]) {
256
+ --un-scale-x:0.95;--un-scale-y:0.95;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));
257
+ animation: button-pop 0.25s ease-out;
258
+ }
259
+
260
+ /* =============================================================================
261
+ Focus
262
+ ============================================================================= */
263
+
264
+ [data-style='rokkit'] [data-button]:focus-visible {
265
+ outline:2px solid transparent;outline-offset:2px;--un-ring-width:2px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-400),var(--un-ring-opacity));
266
+ }[data-mode="dark"][data-style="rokkit"] [data-button]:focus-visible,[data-mode="dark"] [data-style="rokkit"] [data-button]:focus-visible{--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-600),var(--un-ring-opacity));}
267
+
268
+ /* =============================================================================
269
+ Icon Colors
270
+ ============================================================================= */
271
+
272
+ [data-style='rokkit'] [data-button] [data-item-icon],
273
+ [data-style='rokkit'] [data-button] [data-button-icon-right] {
274
+ color: inherit;
275
+ opacity: 0.8;
276
+ }
277
+
278
+ [data-style='rokkit'] [data-button]:hover [data-item-icon],
279
+ [data-style='rokkit'] [data-button]:hover [data-button-icon-right] {
280
+ opacity: 1;
281
+ }
282
+
283
+ /* =============================================================================
284
+ Button Group
285
+ ============================================================================= */
286
+
287
+ [data-style='rokkit'] [data-button-group] {
288
+ gap:1px;
289
+ }
290
+
291
+ [data-style='rokkit'] [data-button-group] [data-button]:first-child {
292
+ border-top-left-radius:0.5rem;border-bottom-left-radius:0.5rem;border-top-right-radius:0;border-bottom-right-radius:0;
293
+ }
294
+
295
+ [data-style='rokkit'] [data-button-group] [data-button]:last-child {
296
+ border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:0.5rem;border-bottom-right-radius:0.5rem;
297
+ }
298
+
299
+ /**
300
+ * Toolbar - Rokkit Theme Styles
301
+ *
302
+ * Rich gradients and glowing borders.
303
+ */
304
+
305
+ /* =============================================================================
306
+ Toolbar Container
307
+ ============================================================================= */
308
+
309
+ [data-style='rokkit'] [data-toolbar] {
310
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-200),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-100),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
311
+ }[data-mode="dark"][data-style="rokkit"] [data-toolbar],[data-mode="dark"] [data-style="rokkit"] [data-toolbar]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-800),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-900),1) var(--un-gradient-to-position);}
312
+
313
+ /* Position-based borders */
314
+ [data-style='rokkit'] [data-toolbar][data-toolbar-position='top'],
315
+ [data-style='rokkit'] [data-toolbar]:not([data-toolbar-position]) {
316
+ border-bottom-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
317
+ }[data-mode="dark"][data-style="rokkit"] [data-toolbar][data-toolbar-position="top"],[data-mode="dark"] [data-style="rokkit"] [data-toolbar][data-toolbar-position="top"],[data-mode="dark"][data-style="rokkit"] [data-toolbar]:not([data-toolbar-position]),[data-mode="dark"] [data-style="rokkit"] [data-toolbar]:not([data-toolbar-position]){--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));}
318
+
319
+ [data-style='rokkit'] [data-toolbar][data-toolbar-position='bottom'] {
320
+ border-top-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
321
+ }[data-mode="dark"][data-style="rokkit"] [data-toolbar][data-toolbar-position="bottom"],[data-mode="dark"] [data-style="rokkit"] [data-toolbar][data-toolbar-position="bottom"]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));}
322
+
323
+ [data-style='rokkit'] [data-toolbar][data-toolbar-position='left'] {
324
+ border-right-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
325
+ }[data-mode="dark"][data-style="rokkit"] [data-toolbar][data-toolbar-position="left"],[data-mode="dark"] [data-style="rokkit"] [data-toolbar][data-toolbar-position="left"]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));}
326
+
327
+ [data-style='rokkit'] [data-toolbar][data-toolbar-position='right'] {
328
+ border-left-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
329
+ }[data-mode="dark"][data-style="rokkit"] [data-toolbar][data-toolbar-position="right"],[data-mode="dark"] [data-style="rokkit"] [data-toolbar][data-toolbar-position="right"]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));}
330
+
331
+ /* Compact item spacing for small toolbars */
332
+ [data-style='rokkit'] [data-toolbar][data-toolbar-size='sm'],
333
+ [data-style='rokkit'] [data-toolbar][data-size='sm'] {
334
+ gap: 1px;
335
+ }
336
+
337
+ /* =============================================================================
338
+ Toolbar Items
339
+ ============================================================================= */
340
+
341
+ [data-style='rokkit'] [data-toolbar-item] {
342
+ --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
343
+ }[data-mode="dark"][data-style="rokkit"] [data-toolbar-item],[data-mode="dark"] [data-style="rokkit"] [data-toolbar-item]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
344
+
345
+ [data-style='rokkit'] [data-toolbar-item]:hover:not(:disabled):not([data-disabled='true']) {
346
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-200),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));
347
+ }[data-mode="dark"][data-style="rokkit"] [data-toolbar-item]:hover:not(:disabled):not([data-disabled="true"]),[data-mode="dark"] [data-style="rokkit"] [data-toolbar-item]:hover:not(:disabled):not([data-disabled="true"]){--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-700),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-800),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
348
+
349
+ [data-style='rokkit'] [data-toolbar-item]:focus-visible:not(:disabled):not([data-disabled='true']) {
350
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-200),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));outline:2px solid transparent;outline-offset:2px;--un-ring-width:2px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-400),var(--un-ring-opacity));
351
+ }[data-mode="dark"][data-style="rokkit"] [data-toolbar-item]:focus-visible:not(:disabled):not([data-disabled="true"]),[data-mode="dark"] [data-style="rokkit"] [data-toolbar-item]:focus-visible:not(:disabled):not([data-disabled="true"]){--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-700),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-800),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-600),var(--un-ring-opacity));}
352
+
353
+ /* Active/pressed state */
354
+ [data-style='rokkit'] [data-toolbar-item][data-active='true'] {
355
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
356
+ }[data-mode="dark"][data-style="rokkit"] [data-toolbar-item][data-active="true"],[data-mode="dark"] [data-style="rokkit"] [data-toolbar-item][data-active="true"]{--un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
357
+
358
+ [data-style='rokkit'] [data-toolbar-item][data-active='true']:hover:not(:disabled) {
359
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-primary-400),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-primary-950),var(--un-text-opacity));
360
+ }[data-mode="dark"][data-style="rokkit"] [data-toolbar-item][data-active="true"]:hover:not(:disabled),[data-mode="dark"] [data-style="rokkit"] [data-toolbar-item][data-active="true"]:hover:not(:disabled){--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-primary-600),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-primary-50),var(--un-text-opacity));}
361
+
362
+ /* =============================================================================
363
+ Toolbar Icon
364
+ ============================================================================= */
365
+
366
+ [data-style='rokkit'] [data-toolbar-item] [data-toolbar-icon] {
367
+ --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
368
+ }[data-mode="dark"][data-style="rokkit"] [data-toolbar-item] [data-toolbar-icon],[data-mode="dark"] [data-style="rokkit"] [data-toolbar-item] [data-toolbar-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
369
+
370
+ [data-style='rokkit'] [data-toolbar-item]:hover:not(:disabled) [data-toolbar-icon] {
371
+ --un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));
372
+ }[data-mode="dark"][data-style="rokkit"] [data-toolbar-item]:hover:not(:disabled) [data-toolbar-icon],[data-mode="dark"] [data-style="rokkit"] [data-toolbar-item]:hover:not(:disabled) [data-toolbar-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
373
+
374
+ [data-style='rokkit'] [data-toolbar-item][data-active='true'] [data-toolbar-icon] {
375
+ --un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
376
+ }[data-mode="dark"][data-style="rokkit"] [data-toolbar-item][data-active="true"] [data-toolbar-icon],[data-mode="dark"] [data-style="rokkit"] [data-toolbar-item][data-active="true"] [data-toolbar-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
377
+
378
+ /* =============================================================================
379
+ Separator & Divider
380
+ ============================================================================= */
381
+
382
+ [data-style='rokkit'] [data-toolbar-separator] {
383
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-300),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
384
+ }[data-mode="dark"][data-style="rokkit"] [data-toolbar-separator],[data-mode="dark"] [data-style="rokkit"] [data-toolbar-separator]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-700),1) var(--un-gradient-to-position);}
385
+
386
+ [data-style='rokkit'] [data-toolbar-divider] {
387
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-300),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
388
+ }[data-mode="dark"][data-style="rokkit"] [data-toolbar-divider],[data-mode="dark"] [data-style="rokkit"] [data-toolbar-divider]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-700),1) var(--un-gradient-to-position);}
389
+
390
+ /**
391
+ * Tabs - Rokkit Theme Styles
392
+ *
393
+ * Rich gradients and glowing borders.
394
+ */
395
+
396
+ /* =============================================================================
397
+ Tab List
398
+ ============================================================================= */
399
+
400
+ [data-style='rokkit'] [data-tabs-list] {
401
+ gap:0.25rem;border-bottom-width:2px;--un-border-opacity:1;border-color:rgba(var(--color-surface-300),var(--un-border-opacity));padding-left:0.25rem;padding-right:0.25rem;
402
+ }[data-mode="dark"][data-style="rokkit"] [data-tabs-list],[data-mode="dark"] [data-style="rokkit"] [data-tabs-list]{--un-border-opacity:1;border-color:rgba(var(--color-surface-700),var(--un-border-opacity));}
403
+
404
+ [data-style='rokkit'] [data-tabs][data-position='after'] [data-tabs-list] {
405
+ border-top-width:2px;border-bottom-width:0px;
406
+ }
407
+
408
+ [data-style='rokkit'] [data-tabs][data-orientation='vertical'] [data-tabs-list] {
409
+ border-right-width:2px;border-bottom-width:0px;padding-left:0;padding-right:0;padding-top:0.25rem;padding-bottom:0.25rem;
410
+ }
411
+
412
+ [data-style='rokkit']
413
+ [data-tabs][data-orientation='vertical'][data-position='after']
414
+ [data-tabs-list] {
415
+ border-top-width:0px;border-right-width:0px;border-left-width:2px;
416
+ }
417
+
418
+ [data-style='rokkit'] [data-tabs-list]:focus-within {
419
+ --un-border-opacity:1;border-color:rgba(var(--color-secondary),var(--un-border-opacity));outline:2px solid transparent;outline-offset:2px;
420
+ }
421
+
422
+ /* =============================================================================
423
+ Tab Triggers
424
+ ============================================================================= */
425
+
426
+ [data-style='rokkit'] [data-tabs-trigger] {
427
+ flex-shrink:0;border-top-left-radius:0.25rem;border-top-right-radius:0.25rem;--un-bg-opacity:1;background-color:rgba(var(--color-surface-100),var(--un-bg-opacity));
428
+ }[data-mode="dark"][data-style="rokkit"] [data-tabs-trigger],[data-mode="dark"] [data-style="rokkit"] [data-tabs-trigger]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));}
429
+
430
+ [data-style='rokkit'] [data-tabs][data-position='after'] [data-tabs-trigger] {
431
+ border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0.25rem;border-bottom-right-radius:0.25rem;
432
+ }
433
+
434
+ [data-style='rokkit'] [data-tabs][data-orientation='vertical'] [data-tabs-trigger] {
435
+ border-radius:0;border-top-left-radius:0.25rem;border-bottom-left-radius:0.25rem;
436
+ }
437
+
438
+ [data-style='rokkit']
439
+ [data-tabs][data-orientation='vertical']
440
+ [data-tabs-list]:focus-within
441
+ [data-tabs-trigger][data-selected] {
442
+ --un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
443
+ }
444
+
445
+ [data-style='rokkit']
446
+ [data-tabs][data-orientation='vertical'][data-position='after']
447
+ [data-tabs-trigger] {
448
+ border-radius:0;border-top-right-radius:0.25rem;border-bottom-right-radius:0.25rem;
449
+ }
450
+
451
+ [data-style='rokkit']
452
+ [data-tabs][data-orientation='vertical'][data-position='after']
453
+ [data-tabs-list]:focus-within
454
+ [data-tabs-trigger][data-selected] {
455
+ --un-gradient-shape:to left in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
456
+ }
457
+
458
+ [data-style='rokkit'] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]) {
459
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
460
+ }[data-mode="dark"][data-style="rokkit"] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]),[data-mode="dark"] [data-style="rokkit"] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]){--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
461
+
462
+ /* Selected state */
463
+ [data-style='rokkit'] [data-tabs-trigger][data-selected] {
464
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-300),var(--un-bg-opacity));
465
+ }[data-mode="dark"][data-style="rokkit"] [data-tabs-trigger][data-selected],[data-mode="dark"] [data-style="rokkit"] [data-tabs-trigger][data-selected]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-700),var(--un-bg-opacity));}
466
+
467
+ [data-style='rokkit'] [data-tabs-list]:focus-within [data-tabs-trigger][data-selected] {
468
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
469
+ }[data-mode="dark"][data-style="rokkit"] [data-tabs-list]:focus-within [data-tabs-trigger][data-selected],[data-mode="dark"] [data-style="rokkit"] [data-tabs-list]:focus-within [data-tabs-trigger][data-selected]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
470
+
471
+ [data-style='rokkit']
472
+ [data-tabs][data-position='after']
473
+ [data-tabs-list]:focus-within
474
+ [data-tabs-trigger][data-selected] {
475
+ --un-gradient-shape:to top in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
476
+ }
477
+
478
+ /* =============================================================================
479
+ Tab Icon
480
+ ============================================================================= */
481
+
482
+ [data-style='rokkit'] [data-tabs-trigger] [data-tabs-icon] {
483
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
484
+ }[data-mode="dark"][data-style="rokkit"] [data-tabs-trigger] [data-tabs-icon],[data-mode="dark"] [data-style="rokkit"] [data-tabs-trigger] [data-tabs-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
485
+
486
+ [data-style='rokkit'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {
487
+ --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
488
+ }[data-mode="dark"][data-style="rokkit"] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon],[data-mode="dark"] [data-style="rokkit"] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
489
+
490
+ [data-style='rokkit'] [data-tabs-trigger][data-selected] [data-tabs-icon] {
491
+ --un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
492
+ }[data-mode="dark"][data-style="rokkit"] [data-tabs-trigger][data-selected] [data-tabs-icon],[data-mode="dark"] [data-style="rokkit"] [data-tabs-trigger][data-selected] [data-tabs-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
493
+
494
+ /* =============================================================================
495
+ Tab Panel
496
+ ============================================================================= */
497
+
498
+ [data-style='rokkit'] [data-tabs-content] {
499
+ --un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
500
+ }[data-mode="dark"][data-style="rokkit"] [data-tabs-content],[data-mode="dark"] [data-style="rokkit"] [data-tabs-content]{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
501
+
502
+ /**
503
+ * Toggle - Rokkit Theme Styles
504
+ *
505
+ * Rich gradients and glowing borders.
506
+ */
507
+
508
+ /* =============================================================================
509
+ Toggle Container
510
+ ============================================================================= */
511
+
512
+ [data-style='rokkit'] [data-toggle] {
513
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));border-radius:0.5rem;--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-200),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
514
+ }[data-mode="dark"][data-style="rokkit"] [data-toggle],[data-mode="dark"] [data-style="rokkit"] [data-toggle]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-700),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-800),1) var(--un-gradient-to-position);}
515
+
516
+ /* =============================================================================
517
+ Toggle Options
518
+ ============================================================================= */
519
+
520
+ [data-style='rokkit'] [data-toggle-option] {
521
+ --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
522
+ }[data-mode="dark"][data-style="rokkit"] [data-toggle-option],[data-mode="dark"] [data-style="rokkit"] [data-toggle-option]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
523
+
524
+ [data-style='rokkit'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
525
+ [data-style='rokkit'] [data-toggle-option]:focus:not(:disabled):not([data-disabled='true']) {
526
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-400),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-300),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
527
+ }[data-mode="dark"][data-style="rokkit"] [data-toggle-option]:hover:not(:disabled):not([data-disabled="true"]),[data-mode="dark"] [data-style="rokkit"] [data-toggle-option]:hover:not(:disabled):not([data-disabled="true"]),[data-mode="dark"][data-style="rokkit"] [data-toggle-option]:focus:not(:disabled):not([data-disabled="true"]),[data-mode="dark"] [data-style="rokkit"] [data-toggle-option]:focus:not(:disabled):not([data-disabled="true"]){--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-600),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-700),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
528
+
529
+ /* Selected state */
530
+ [data-style='rokkit'] [data-toggle-option][data-selected='true'] {
531
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
532
+ }[data-mode="dark"][data-style="rokkit"] [data-toggle-option][data-selected="true"],[data-mode="dark"] [data-style="rokkit"] [data-toggle-option][data-selected="true"]{--un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
533
+
534
+ /* =============================================================================
535
+ Toggle Icon
536
+ ============================================================================= */
537
+
538
+ [data-style='rokkit'] [data-toggle-option] [data-toggle-icon] {
539
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
540
+ }[data-mode="dark"][data-style="rokkit"] [data-toggle-option] [data-toggle-icon],[data-mode="dark"] [data-style="rokkit"] [data-toggle-option] [data-toggle-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
541
+
542
+ [data-style='rokkit'] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],
543
+ [data-style='rokkit'] [data-toggle-option]:focus:not(:disabled) [data-toggle-icon] {
544
+ --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
545
+ }[data-mode="dark"][data-style="rokkit"] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],[data-mode="dark"] [data-style="rokkit"] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],[data-mode="dark"][data-style="rokkit"] [data-toggle-option]:focus:not(:disabled) [data-toggle-icon],[data-mode="dark"] [data-style="rokkit"] [data-toggle-option]:focus:not(:disabled) [data-toggle-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
546
+
547
+ [data-style='rokkit'] [data-toggle-option][data-selected='true'] [data-toggle-icon] {
548
+ --un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
549
+ }[data-mode="dark"][data-style="rokkit"] [data-toggle-option][data-selected="true"] [data-toggle-icon],[data-mode="dark"] [data-style="rokkit"] [data-toggle-option][data-selected="true"] [data-toggle-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
550
+
551
+ /**
552
+ * Switch - Rokkit Theme Styles
553
+ */
554
+
555
+ [data-style='rokkit'] [data-switch-track] {
556
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-200),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
557
+ }[data-mode="dark"][data-style="rokkit"] [data-switch-track],[data-mode="dark"] [data-style="rokkit"] [data-switch-track]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-700),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-800),1) var(--un-gradient-to-position);}
558
+
559
+ [data-style='rokkit'] [data-switch] [data-switch-thumb] {
560
+ --switch-thumb-travel: 1.125rem;
561
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-600),var(--un-bg-opacity));--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
562
+ }[data-mode="dark"][data-style="rokkit"] [data-switch] [data-switch-thumb],[data-mode="dark"] [data-style="rokkit"] [data-switch] [data-switch-thumb]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-400),var(--un-bg-opacity));}
563
+
564
+ [data-style='rokkit'] [data-switch]:focus-visible [data-switch-track] {
565
+ --un-ring-width:2px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-offset-width:1px;--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-500),var(--un-ring-opacity));
566
+ }[data-mode="dark"][data-style="rokkit"] [data-switch]:focus-visible [data-switch-track],[data-mode="dark"] [data-style="rokkit"] [data-switch]:focus-visible [data-switch-track]{--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-500),var(--un-ring-opacity));}
567
+
568
+ /* On state */
569
+ [data-style='rokkit'] [data-switch][aria-checked='true'] [data-switch-track] {
570
+ --un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-400),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-400),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
571
+ }[data-mode="dark"][data-style="rokkit"] [data-switch][aria-checked="true"] [data-switch-track],[data-mode="dark"] [data-style="rokkit"] [data-switch][aria-checked="true"] [data-switch-track]{--un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-600),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-600),1) var(--un-gradient-to-position);}
572
+
573
+ [data-style='rokkit'] [data-switch][aria-checked='true'] [data-switch-thumb] {
574
+ --un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity));--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
575
+ }
576
+
577
+ [data-style='rokkit'] [data-switch-label] {
578
+ --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
579
+ }[data-mode="dark"][data-style="rokkit"] [data-switch-label],[data-mode="dark"] [data-style="rokkit"] [data-switch-label]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
580
+
581
+ /**
582
+ * List - Rokkit Theme Styles
583
+ *
584
+ * Rich gradients and glowing borders.
585
+ */
586
+
587
+ /* =============================================================================
588
+ List Container
589
+ ============================================================================= */
590
+
591
+ [data-style='rokkit'] [data-list]:focus-within {
592
+ border-radius:0.25rem;--un-ring-width:0px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
593
+ }
594
+
595
+ /* =============================================================================
596
+ List Items
597
+ ============================================================================= */
598
+
599
+ [data-style='rokkit'] [data-list] [data-list-item] {
600
+ border-width:0px;border-color:transparent;border-radius:0;border-style:solid;--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
601
+ }[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-item],[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-item]{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
602
+
603
+ [data-style='rokkit'] [data-list] a[data-list-item],
604
+ [data-style='rokkit'] [data-list] button[data-list-item] {
605
+ border-radius:0;--un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
606
+ }[data-mode="dark"][data-style="rokkit"] [data-list] a[data-list-item],[data-mode="dark"] [data-style="rokkit"] [data-list] a[data-list-item],[data-mode="dark"][data-style="rokkit"] [data-list] button[data-list-item],[data-mode="dark"] [data-style="rokkit"] [data-list] button[data-list-item]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
607
+
608
+ /* Hover and focus (keyboard navigation) */
609
+ [data-style='rokkit'] [data-list] [data-list-item]:hover:not(:disabled):not([data-disabled='true']),
610
+ [data-style='rokkit']
611
+ [data-list]
612
+ [data-list-item]:focus:not(:disabled):not([data-disabled='true']) {
613
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-200),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));outline:2px solid transparent;outline-offset:2px;
614
+ }[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-item]:hover:not(:disabled):not([data-disabled="true"]),[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-item]:hover:not(:disabled):not([data-disabled="true"]),[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-item]:focus:not(:disabled):not([data-disabled="true"]),[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-item]:focus:not(:disabled):not([data-disabled="true"]){--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-700),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-800),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
615
+
616
+ /* Active state — muted gradient when list not focused */
617
+ [data-style='rokkit'] [data-list] [data-list-item][data-active='true'] {
618
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-200),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
619
+ }[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-item][data-active="true"],[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-item][data-active="true"]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-700),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-800),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
620
+
621
+ /* Active state — full gradient when list has focus */
622
+ [data-style='rokkit'] [data-list]:focus-within [data-list-item][data-active='true'] {
623
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));
624
+ }[data-mode="dark"][data-style="rokkit"] [data-list]:focus-within [data-list-item][data-active="true"],[data-mode="dark"] [data-style="rokkit"] [data-list]:focus-within [data-list-item][data-active="true"]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);}
625
+
626
+ /* Active + hover — same as focus-within gradient */
627
+ [data-style='rokkit'] [data-list] [data-list-item][data-active='true']:hover:not(:disabled) {
628
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));
629
+ }[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-item][data-active="true"]:hover:not(:disabled),[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-item][data-active="true"]:hover:not(:disabled){--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);}
630
+
631
+ /* =============================================================================
632
+ Item Elements
633
+ ============================================================================= */
634
+
635
+ [data-style='rokkit'] [data-list] [data-list-item] [data-item-icon] {
636
+ font-size: 1rem;
637
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
638
+ }[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-item] [data-item-icon],[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-item] [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
639
+
640
+ [data-style='rokkit'] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],
641
+ [data-style='rokkit'] [data-list] [data-list-item]:focus:not(:disabled) [data-item-icon] {
642
+ --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
643
+ }[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-item]:hover:not(:disabled) [data-item-icon],[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-item]:focus:not(:disabled) [data-item-icon],[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-item]:focus:not(:disabled) [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
644
+
645
+ [data-style='rokkit'] [data-list] [data-list-item][data-active='true'] [data-item-icon] {
646
+ --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
647
+ }[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-item][data-active="true"] [data-item-icon],[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-item][data-active="true"] [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
648
+
649
+ [data-style='rokkit']
650
+ [data-list]:focus-within
651
+ [data-list-item][data-active='true']
652
+ [data-item-icon],
653
+ [data-style='rokkit']
654
+ [data-list]
655
+ [data-list-item][data-active='true']:hover:not(:disabled)
656
+ [data-item-icon] {
657
+ --un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));
658
+ }
659
+
660
+ /* Item description */
661
+ [data-style='rokkit'] [data-list] [data-list-item] [data-item-description] {
662
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
663
+ }[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-item] [data-item-description],[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-item] [data-item-description]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
664
+
665
+ [data-style='rokkit'] [data-list] [data-list-item][data-active='true'] [data-item-description] {
666
+ --un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
667
+ }[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-item][data-active="true"] [data-item-description],[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-item][data-active="true"] [data-item-description]{--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
668
+
669
+ [data-style='rokkit']
670
+ [data-list]:focus-within
671
+ [data-list-item][data-active='true']
672
+ [data-item-description],
673
+ [data-style='rokkit']
674
+ [data-list]
675
+ [data-list-item][data-active='true']:hover:not(:disabled)
676
+ [data-item-description] {
677
+ --un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));
678
+ }
679
+
680
+ /* Item badge */
681
+ [data-style='rokkit'] [data-list] [data-list-item] [data-item-badge] {
682
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-200),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
683
+ }[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-item] [data-item-badge],[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-item] [data-item-badge]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-700),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-800),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
684
+
685
+ [data-style='rokkit'] [data-list] [data-list-item][data-active='true'] [data-item-badge] {
686
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-primary-400),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-300),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-primary-200),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-primary-800),var(--un-text-opacity));
687
+ }[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-item][data-active="true"] [data-item-badge],[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-item][data-active="true"] [data-item-badge]{--un-border-opacity:1;border-color:rgba(var(--color-primary-600),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-700),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-primary-800),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-primary-200),var(--un-text-opacity));}
688
+
689
+ [data-style='rokkit']
690
+ [data-list]:focus-within
691
+ [data-list-item][data-active='true']
692
+ [data-item-badge] {
693
+ --un-border-opacity:1;border-color:rgba(var(--color-primary-600),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-600),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-primary-500),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));
694
+ }[data-mode="dark"][data-style="rokkit"] [data-list]:focus-within [data-list-item][data-active="true"] [data-item-badge],[data-mode="dark"] [data-style="rokkit"] [data-list]:focus-within [data-list-item][data-active="true"] [data-item-badge]{--un-border-opacity:1;border-color:rgba(var(--color-primary-400),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-400),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-primary-500),1) var(--un-gradient-to-position);}
695
+
696
+ /* =============================================================================
697
+ Indentation by nesting level
698
+ ============================================================================= */
699
+
700
+ [data-style='rokkit'] [data-list] [data-list-item][data-level='2'],
701
+ [data-style='rokkit'] [data-list] [data-list-group][data-level='2'] {
702
+ padding-left: 1.25rem;
703
+ }
704
+
705
+ [data-style='rokkit'] [data-list] [data-list-item][data-level='3'],
706
+ [data-style='rokkit'] [data-list] [data-list-group][data-level='3'] {
707
+ padding-left: 2rem;
708
+ }
709
+
710
+ /* =============================================================================
711
+ Groups
712
+ ============================================================================= */
713
+
714
+ [data-style='rokkit'] [data-list] [data-list-group] {
715
+ margin-top:0.5rem;--un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
716
+ }[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-group],[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-group]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
717
+
718
+ [data-style='rokkit'] [data-list] [data-list-group]:first-child {
719
+ margin-top:0;
720
+ }
721
+
722
+ [data-style='rokkit'] [data-list] [data-list-group] [data-item-icon] {
723
+ font-size: 1rem;
724
+ }
725
+
726
+ [data-style='rokkit'] [data-list] [data-list-group]:hover:not(:disabled),
727
+ [data-style='rokkit'] [data-list] [data-list-group]:focus:not(:disabled) {
728
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-400),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-300),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
729
+ }[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-group]:hover:not(:disabled),[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-group]:hover:not(:disabled),[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-group]:focus:not(:disabled),[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-group]:focus:not(:disabled){--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-600),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-700),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
730
+
731
+ /* =============================================================================
732
+ Separator
733
+ ============================================================================= */
734
+
735
+ [data-style='rokkit'] [data-list] [data-list-separator] {
736
+ --un-gradient-from-position:0%;--un-gradient-from:transparent var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:transparent var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
737
+ }
738
+
739
+ /* =============================================================================
740
+ Multi-Selection
741
+ ============================================================================= */
742
+
743
+ [data-style='rokkit'] [data-list] [data-list-item][data-selected='true'] {
744
+ --un-bg-opacity:1;background-color:rgba(var(--color-primary-300),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
745
+ }[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-item][data-selected="true"],[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-item][data-selected="true"]{--un-bg-opacity:1;background-color:rgba(var(--color-primary-700),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
746
+
747
+ [data-style='rokkit'] [data-list]:focus-within [data-list-item][data-selected='true'] {
748
+ --un-bg-opacity:1;background-color:rgba(var(--color-primary-400),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
749
+ }[data-mode="dark"][data-style="rokkit"] [data-list]:focus-within [data-list-item][data-selected="true"],[data-mode="dark"] [data-style="rokkit"] [data-list]:focus-within [data-list-item][data-selected="true"]{--un-bg-opacity:1;background-color:rgba(var(--color-primary-600),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
750
+
751
+ [data-style='rokkit'] [data-list] [data-list-item][data-selected='true']:hover:not(:disabled) {
752
+ --un-bg-opacity:1;background-color:rgba(var(--color-primary-500),var(--un-bg-opacity));
753
+ }[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-item][data-selected="true"]:hover:not(:disabled),[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-item][data-selected="true"]:hover:not(:disabled){--un-bg-opacity:1;background-color:rgba(var(--color-primary-500),var(--un-bg-opacity));}
754
+
755
+ [data-style='rokkit'] [data-list] [data-list-item][data-selected='true'] [data-item-icon] {
756
+ --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
757
+ }[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-item][data-selected="true"] [data-item-icon],[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-item][data-selected="true"] [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
758
+
759
+ /**
760
+ * Tree - Rokkit Theme Styles
761
+ *
762
+ * Rich gradients and glowing borders.
763
+ */
764
+
765
+ /* =============================================================================
766
+ Tree Container
767
+ ============================================================================= */
768
+
769
+ [data-style='rokkit'] [data-tree]:focus-within {
770
+ border-radius:0.25rem;--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-400),var(--un-ring-opacity));
771
+ }[data-mode="dark"][data-style="rokkit"] [data-tree]:focus-within,[data-mode="dark"] [data-style="rokkit"] [data-tree]:focus-within{--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-600),var(--un-ring-opacity));}
772
+
773
+ /* =============================================================================
774
+ Tree Toggle Button
775
+ ============================================================================= */
776
+
777
+ [data-style='rokkit'] [data-tree-toggle-btn] {
778
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
779
+ }[data-mode="dark"][data-style="rokkit"] [data-tree-toggle-btn],[data-mode="dark"] [data-style="rokkit"] [data-tree-toggle-btn]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
780
+
781
+ [data-style='rokkit'] [data-tree-toggle-btn]:hover {
782
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-200),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
783
+ }[data-mode="dark"][data-style="rokkit"] [data-tree-toggle-btn]:hover,[data-mode="dark"] [data-style="rokkit"] [data-tree-toggle-btn]:hover{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-700),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-800),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
784
+
785
+ /* =============================================================================
786
+ Tree Item Content
787
+ ============================================================================= */
788
+
789
+ [data-style='rokkit'] [data-tree-item-content] {
790
+ --un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
791
+ }[data-mode="dark"][data-style="rokkit"] [data-tree-item-content],[data-mode="dark"] [data-style="rokkit"] [data-tree-item-content]{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
792
+
793
+ [data-style='rokkit'] [data-tree-item-content]:hover:not(:disabled),
794
+ [data-style='rokkit'] [data-tree-item-content]:focus:not(:disabled) {
795
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-200),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));outline:2px solid transparent;outline-offset:2px;
796
+ }[data-mode="dark"][data-style="rokkit"] [data-tree-item-content]:hover:not(:disabled),[data-mode="dark"] [data-style="rokkit"] [data-tree-item-content]:hover:not(:disabled),[data-mode="dark"][data-style="rokkit"] [data-tree-item-content]:focus:not(:disabled),[data-mode="dark"] [data-style="rokkit"] [data-tree-item-content]:focus:not(:disabled){--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-700),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-800),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
797
+
798
+ /* Focus visible for keyboard navigation */
799
+ [data-style='rokkit'] [data-tree-item-content]:focus-visible {
800
+ outline:2px solid transparent;outline-offset:2px;--un-ring-width:2px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-500),var(--un-ring-opacity));
801
+ }[data-mode="dark"][data-style="rokkit"] [data-tree-item-content]:focus-visible,[data-mode="dark"] [data-style="rokkit"] [data-tree-item-content]:focus-visible{--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-500),var(--un-ring-opacity));}
802
+
803
+ /* Active/selected state - when focus is within tree */
804
+ [data-style='rokkit'] [data-tree]:focus-within [data-tree-item-content][data-active='true'] {
805
+ border-left-width:2px;--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-500),var(--un-border-left-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
806
+ }[data-mode="dark"][data-style="rokkit"] [data-tree]:focus-within [data-tree-item-content][data-active="true"],[data-mode="dark"] [data-style="rokkit"] [data-tree]:focus-within [data-tree-item-content][data-active="true"]{--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-500),var(--un-border-left-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
807
+
808
+ [data-style='rokkit']
809
+ [data-tree]:focus-within
810
+ [data-tree-item-content][data-active='true']:hover:not(:disabled) {
811
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-400),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-primary-300),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
812
+ }[data-mode="dark"][data-style="rokkit"] [data-tree]:focus-within [data-tree-item-content][data-active="true"]:hover:not(:disabled),[data-mode="dark"] [data-style="rokkit"] [data-tree]:focus-within [data-tree-item-content][data-active="true"]:hover:not(:disabled){--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-600),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-primary-700),1) var(--un-gradient-to-position);}
813
+
814
+ /* Active/selected state - when focus is outside tree (muted) */
815
+ [data-style='rokkit'] [data-tree]:not(:focus-within) [data-tree-item-content][data-active='true'] {
816
+ border-left-width:2px;--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-surface-500),var(--un-border-left-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-200),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));
817
+ }[data-mode="dark"][data-style="rokkit"] [data-tree]:not(:focus-within) [data-tree-item-content][data-active="true"],[data-mode="dark"] [data-style="rokkit"] [data-tree]:not(:focus-within) [data-tree-item-content][data-active="true"]{--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-surface-500),var(--un-border-left-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-700),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-800),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
818
+
819
+ /* =============================================================================
820
+ Item Elements
821
+ ============================================================================= */
822
+
823
+ [data-style='rokkit'] [data-tree-item-content] [data-item-icon] {
824
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
825
+ }[data-mode="dark"][data-style="rokkit"] [data-tree-item-content] [data-item-icon],[data-mode="dark"] [data-style="rokkit"] [data-tree-item-content] [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
826
+
827
+ [data-style='rokkit'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
828
+ --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
829
+ }[data-mode="dark"][data-style="rokkit"] [data-tree-item-content]:hover:not(:disabled) [data-item-icon],[data-mode="dark"] [data-style="rokkit"] [data-tree-item-content]:hover:not(:disabled) [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
830
+
831
+ [data-style='rokkit']
832
+ [data-tree]:focus-within
833
+ [data-tree-item-content][data-active='true']
834
+ [data-item-icon] {
835
+ --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
836
+ }[data-mode="dark"][data-style="rokkit"] [data-tree]:focus-within [data-tree-item-content][data-active="true"] [data-item-icon],[data-mode="dark"] [data-style="rokkit"] [data-tree]:focus-within [data-tree-item-content][data-active="true"] [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
837
+
838
+ [data-style='rokkit']
839
+ [data-tree]:not(:focus-within)
840
+ [data-tree-item-content][data-active='true']
841
+ [data-item-icon] {
842
+ --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
843
+ }[data-mode="dark"][data-style="rokkit"] [data-tree]:not(:focus-within) [data-tree-item-content][data-active="true"] [data-item-icon],[data-mode="dark"] [data-style="rokkit"] [data-tree]:not(:focus-within) [data-tree-item-content][data-active="true"] [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
844
+
845
+ /* Item description */
846
+ [data-style='rokkit'] [data-tree-item-content] [data-item-description] {
847
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
848
+ }[data-mode="dark"][data-style="rokkit"] [data-tree-item-content] [data-item-description],[data-mode="dark"] [data-style="rokkit"] [data-tree-item-content] [data-item-description]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
849
+
850
+ [data-style='rokkit']
851
+ [data-tree]:focus-within
852
+ [data-tree-item-content][data-active='true']
853
+ [data-item-description] {
854
+ --un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
855
+ }[data-mode="dark"][data-style="rokkit"] [data-tree]:focus-within [data-tree-item-content][data-active="true"] [data-item-description],[data-mode="dark"] [data-style="rokkit"] [data-tree]:focus-within [data-tree-item-content][data-active="true"] [data-item-description]{--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
856
+
857
+ [data-style='rokkit']
858
+ [data-tree]:not(:focus-within)
859
+ [data-tree-item-content][data-active='true']
860
+ [data-item-description] {
861
+ --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
862
+ }[data-mode="dark"][data-style="rokkit"] [data-tree]:not(:focus-within) [data-tree-item-content][data-active="true"] [data-item-description],[data-mode="dark"] [data-style="rokkit"] [data-tree]:not(:focus-within) [data-tree-item-content][data-active="true"] [data-item-description]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
863
+
864
+ /* Item badge */
865
+ [data-style='rokkit'] [data-tree-item-content] [data-item-badge] {
866
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-200),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
867
+ }[data-mode="dark"][data-style="rokkit"] [data-tree-item-content] [data-item-badge],[data-mode="dark"] [data-style="rokkit"] [data-tree-item-content] [data-item-badge]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-700),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-800),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
868
+
869
+ [data-style='rokkit']
870
+ [data-tree]:focus-within
871
+ [data-tree-item-content][data-active='true']
872
+ [data-item-badge] {
873
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-primary-400),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-300),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-primary-200),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-primary-800),var(--un-text-opacity));
874
+ }[data-mode="dark"][data-style="rokkit"] [data-tree]:focus-within [data-tree-item-content][data-active="true"] [data-item-badge],[data-mode="dark"] [data-style="rokkit"] [data-tree]:focus-within [data-tree-item-content][data-active="true"] [data-item-badge]{--un-border-opacity:1;border-color:rgba(var(--color-primary-600),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-700),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-primary-800),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-primary-200),var(--un-text-opacity));}
875
+
876
+ [data-style='rokkit']
877
+ [data-tree]:not(:focus-within)
878
+ [data-tree-item-content][data-active='true']
879
+ [data-item-badge] {
880
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-400),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-300),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
881
+ }[data-mode="dark"][data-style="rokkit"] [data-tree]:not(:focus-within) [data-tree-item-content][data-active="true"] [data-item-badge],[data-mode="dark"] [data-style="rokkit"] [data-tree]:not(:focus-within) [data-tree-item-content][data-active="true"] [data-item-badge]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-600),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-700),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
882
+
883
+ /* =============================================================================
884
+ Multi-Selection
885
+ ============================================================================= */
886
+
887
+ [data-style='rokkit'] [data-tree-node][data-selected='true'] [data-tree-node-row] {
888
+ --un-bg-opacity:1;background-color:rgba(var(--color-primary-300),var(--un-bg-opacity));
889
+ }[data-mode="dark"][data-style="rokkit"] [data-tree-node][data-selected="true"] [data-tree-node-row],[data-mode="dark"] [data-style="rokkit"] [data-tree-node][data-selected="true"] [data-tree-node-row]{--un-bg-opacity:1;background-color:rgba(var(--color-primary-700),var(--un-bg-opacity));}
890
+
891
+ [data-style='rokkit']
892
+ [data-tree]:focus-within
893
+ [data-tree-node][data-selected='true']
894
+ [data-tree-node-row] {
895
+ --un-bg-opacity:1;background-color:rgba(var(--color-primary-400),var(--un-bg-opacity));
896
+ }[data-mode="dark"][data-style="rokkit"] [data-tree]:focus-within [data-tree-node][data-selected="true"] [data-tree-node-row],[data-mode="dark"] [data-style="rokkit"] [data-tree]:focus-within [data-tree-node][data-selected="true"] [data-tree-node-row]{--un-bg-opacity:1;background-color:rgba(var(--color-primary-600),var(--un-bg-opacity));}
897
+
898
+ [data-style='rokkit'] [data-tree-node][data-selected='true'] [data-tree-item-content] {
899
+ --un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
900
+ }[data-mode="dark"][data-style="rokkit"] [data-tree-node][data-selected="true"] [data-tree-item-content],[data-mode="dark"] [data-style="rokkit"] [data-tree-node][data-selected="true"] [data-tree-item-content]{--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
901
+
902
+ [data-style='rokkit']
903
+ [data-tree-node][data-selected='true']
904
+ [data-tree-item-content]
905
+ [data-item-icon] {
906
+ --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
907
+ }[data-mode="dark"][data-style="rokkit"] [data-tree-node][data-selected="true"] [data-tree-item-content] [data-item-icon],[data-mode="dark"] [data-style="rokkit"] [data-tree-node][data-selected="true"] [data-tree-item-content] [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
908
+
909
+ /**
910
+ * Connector - Rokkit Theme Styles
911
+ *
912
+ * Visual theming for tree line connectors.
913
+ */
914
+
915
+ [data-style='rokkit'] [data-connector] [data-connector-v],
916
+ [data-style='rokkit'] [data-connector] [data-connector-h],
917
+ [data-style='rokkit'] [data-connector] [data-connector-corner] {
918
+ --un-border-opacity:1;border-color:rgba(var(--color-surface-300),var(--un-border-opacity));
919
+ }[data-mode="dark"][data-style="rokkit"] [data-connector] [data-connector-v],[data-mode="dark"] [data-style="rokkit"] [data-connector] [data-connector-v],[data-mode="dark"][data-style="rokkit"] [data-connector] [data-connector-h],[data-mode="dark"] [data-style="rokkit"] [data-connector] [data-connector-h],[data-mode="dark"][data-style="rokkit"] [data-connector] [data-connector-corner],[data-mode="dark"] [data-style="rokkit"] [data-connector] [data-connector-corner]{--un-border-opacity:1;border-color:rgba(var(--color-surface-700),var(--un-border-opacity));}
920
+
921
+ /**
922
+ * Select - Rokkit Theme Styles
923
+ *
924
+ * Rich gradients and glowing borders.
925
+ */
926
+
927
+ /* =============================================================================
928
+ Trigger Button
929
+ ============================================================================= */
930
+
931
+ [data-style='rokkit'] [data-select-trigger] {
932
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-200),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-100),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
933
+ }[data-mode="dark"][data-style="rokkit"] [data-select-trigger],[data-mode="dark"] [data-style="rokkit"] [data-select-trigger]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-800),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-900),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
934
+
935
+ [data-style='rokkit'] [data-select-trigger]:hover:not(:disabled) {
936
+ --un-border-opacity:1;border-color:rgba(var(--color-surface-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-200),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));
937
+ }[data-mode="dark"][data-style="rokkit"] [data-select-trigger]:hover:not(:disabled),[data-mode="dark"] [data-style="rokkit"] [data-select-trigger]:hover:not(:disabled){--un-border-opacity:1;border-color:rgba(var(--color-surface-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-700),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-800),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
938
+
939
+ [data-style='rokkit'] [data-select-trigger]:focus-visible {
940
+ outline:2px solid transparent;outline-offset:2px;--un-ring-width:2px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-400),var(--un-ring-opacity));
941
+ }[data-mode="dark"][data-style="rokkit"] [data-select-trigger]:focus-visible,[data-mode="dark"] [data-style="rokkit"] [data-select-trigger]:focus-visible{--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-600),var(--un-ring-opacity));}
942
+
943
+ [data-style='rokkit'] [data-select][data-open='true'] [data-select-trigger] {
944
+ --un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-400),var(--un-ring-opacity));
945
+ }[data-mode="dark"][data-style="rokkit"] [data-select][data-open="true"] [data-select-trigger],[data-mode="dark"] [data-style="rokkit"] [data-select][data-open="true"] [data-select-trigger]{--un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-600),var(--un-ring-opacity));}
946
+
947
+ /* =============================================================================
948
+ Placeholder
949
+ ============================================================================= */
950
+
951
+ [data-style='rokkit'] [data-select-placeholder] {
952
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
953
+ }[data-mode="dark"][data-style="rokkit"] [data-select-placeholder],[data-mode="dark"] [data-style="rokkit"] [data-select-placeholder]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
954
+
955
+ /* =============================================================================
956
+ Arrow
957
+ ============================================================================= */
958
+
959
+ [data-style='rokkit'] [data-select-arrow] {
960
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
961
+ }[data-mode="dark"][data-style="rokkit"] [data-select-arrow],[data-mode="dark"] [data-style="rokkit"] [data-select-arrow]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
962
+
963
+ [data-style='rokkit'] [data-select-trigger]:hover:not(:disabled) [data-select-arrow] {
964
+ --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
965
+ }[data-mode="dark"][data-style="rokkit"] [data-select-trigger]:hover:not(:disabled) [data-select-arrow],[data-mode="dark"] [data-style="rokkit"] [data-select-trigger]:hover:not(:disabled) [data-select-arrow]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
966
+
967
+ /* =============================================================================
968
+ Tags (MultiSelect)
969
+ ============================================================================= */
970
+
971
+ [data-style='rokkit'] [data-select-tag] {
972
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-400),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-300),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
973
+ }[data-mode="dark"][data-style="rokkit"] [data-select-tag],[data-mode="dark"] [data-style="rokkit"] [data-select-tag]{--un-border-opacity:1;border-color:rgba(var(--color-surface-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-600),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-700),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
974
+
975
+ [data-style='rokkit'] [data-select-tag-remove] {
976
+ --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
977
+ }[data-mode="dark"][data-style="rokkit"] [data-select-tag-remove],[data-mode="dark"] [data-style="rokkit"] [data-select-tag-remove]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
978
+
979
+ [data-style='rokkit'] [data-select-tag-remove]:hover {
980
+ --un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));
981
+ }[data-mode="dark"][data-style="rokkit"] [data-select-tag-remove]:hover,[data-mode="dark"] [data-style="rokkit"] [data-select-tag-remove]:hover{--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
982
+
983
+ /* =============================================================================
984
+ Dropdown Panel
985
+ ============================================================================= */
986
+
987
+ [data-style='rokkit'] [data-select-dropdown] {
988
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-200),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-100),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
989
+ }[data-mode="dark"][data-style="rokkit"] [data-select-dropdown],[data-mode="dark"] [data-style="rokkit"] [data-select-dropdown]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-800),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-900),1) var(--un-gradient-to-position);}
990
+
991
+ /* =============================================================================
992
+ Options
993
+ ============================================================================= */
994
+
995
+ [data-style='rokkit'] [data-select-option] {
996
+ border-width:0px;border-color:transparent;border-radius:0;border-style:solid;--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
997
+ }[data-mode="dark"][data-style="rokkit"] [data-select-option],[data-mode="dark"] [data-style="rokkit"] [data-select-option]{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
998
+
999
+ /* Hover and focus */
1000
+ [data-style='rokkit'] [data-select-option]:hover:not(:disabled),
1001
+ [data-style='rokkit'] [data-select-option]:focus:not(:disabled) {
1002
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-200),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));outline:2px solid transparent;outline-offset:2px;
1003
+ }[data-mode="dark"][data-style="rokkit"] [data-select-option]:hover:not(:disabled),[data-mode="dark"] [data-style="rokkit"] [data-select-option]:hover:not(:disabled),[data-mode="dark"][data-style="rokkit"] [data-select-option]:focus:not(:disabled),[data-mode="dark"] [data-style="rokkit"] [data-select-option]:focus:not(:disabled){--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-700),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-800),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
1004
+
1005
+ /* Selected state — muted when dropdown not focused */
1006
+ [data-style='rokkit'] [data-select-option][data-selected='true'] {
1007
+ border-left-width:2px;--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-500),var(--un-border-left-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
1008
+ }[data-mode="dark"][data-style="rokkit"] [data-select-option][data-selected="true"],[data-mode="dark"] [data-style="rokkit"] [data-select-option][data-selected="true"]{--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-500),var(--un-border-left-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
1009
+
1010
+ /* Selected state — full gradient when dropdown has focus */
1011
+ [data-style='rokkit']
1012
+ [data-select-dropdown]:focus-within
1013
+ [data-select-option][data-selected='true'] {
1014
+ border-left-width:2px;--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-500),var(--un-border-left-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
1015
+ }[data-mode="dark"][data-style="rokkit"] [data-select-dropdown]:focus-within [data-select-option][data-selected="true"],[data-mode="dark"] [data-style="rokkit"] [data-select-dropdown]:focus-within [data-select-option][data-selected="true"]{--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-500),var(--un-border-left-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
1016
+
1017
+ /* Selected + hover */
1018
+ [data-style='rokkit'] [data-select-option][data-selected='true']:hover:not(:disabled) {
1019
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-400),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-primary-300),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
1020
+ }[data-mode="dark"][data-style="rokkit"] [data-select-option][data-selected="true"]:hover:not(:disabled),[data-mode="dark"] [data-style="rokkit"] [data-select-option][data-selected="true"]:hover:not(:disabled){--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-600),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-primary-700),1) var(--un-gradient-to-position);}
1021
+
1022
+ /* Check mark */
1023
+ [data-style='rokkit'] [data-select-check] {
1024
+ --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
1025
+ }[data-mode="dark"][data-style="rokkit"] [data-select-check],[data-mode="dark"] [data-style="rokkit"] [data-select-check]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
1026
+
1027
+ /* Checkbox */
1028
+ [data-style='rokkit'] [data-select-checkbox] {
1029
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-200),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-100),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
1030
+ }[data-mode="dark"][data-style="rokkit"] [data-select-checkbox],[data-mode="dark"] [data-style="rokkit"] [data-select-checkbox]{--un-border-opacity:1;border-color:rgba(var(--color-surface-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-800),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-900),1) var(--un-gradient-to-position);}
1031
+
1032
+ [data-style='rokkit'] [data-select-checkbox][data-checked='true'] {
1033
+ --un-border-opacity:1;border-color:rgba(var(--color-primary-600),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-600),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-primary-500),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity));
1034
+ }[data-mode="dark"][data-style="rokkit"] [data-select-checkbox][data-checked="true"],[data-mode="dark"] [data-style="rokkit"] [data-select-checkbox][data-checked="true"]{--un-border-opacity:1;border-color:rgba(var(--color-primary-400),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-400),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-primary-500),1) var(--un-gradient-to-position);}
1035
+
1036
+ /* Item elements */
1037
+ [data-style='rokkit'] [data-select-option] [data-item-icon] {
1038
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1039
+ }[data-mode="dark"][data-style="rokkit"] [data-select-option] [data-item-icon],[data-mode="dark"] [data-style="rokkit"] [data-select-option] [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1040
+
1041
+ [data-style='rokkit'] [data-select-option]:hover:not(:disabled) [data-item-icon] {
1042
+ --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
1043
+ }[data-mode="dark"][data-style="rokkit"] [data-select-option]:hover:not(:disabled) [data-item-icon],[data-mode="dark"] [data-style="rokkit"] [data-select-option]:hover:not(:disabled) [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
1044
+
1045
+ [data-style='rokkit'] [data-select-option][data-selected='true'] [data-item-icon] {
1046
+ --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
1047
+ }[data-mode="dark"][data-style="rokkit"] [data-select-option][data-selected="true"] [data-item-icon],[data-mode="dark"] [data-style="rokkit"] [data-select-option][data-selected="true"] [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
1048
+
1049
+ [data-style='rokkit']
1050
+ [data-select-dropdown]:focus-within
1051
+ [data-select-option][data-selected='true']
1052
+ [data-item-icon] {
1053
+ --un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
1054
+ }[data-mode="dark"][data-style="rokkit"] [data-select-dropdown]:focus-within [data-select-option][data-selected="true"] [data-item-icon],[data-mode="dark"] [data-style="rokkit"] [data-select-dropdown]:focus-within [data-select-option][data-selected="true"] [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
1055
+
1056
+ [data-style='rokkit'] [data-select-option] [data-item-description] {
1057
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1058
+ }[data-mode="dark"][data-style="rokkit"] [data-select-option] [data-item-description],[data-mode="dark"] [data-style="rokkit"] [data-select-option] [data-item-description]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1059
+
1060
+ [data-style='rokkit'] [data-select-option][data-selected='true'] [data-item-description] {
1061
+ --un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
1062
+ }[data-mode="dark"][data-style="rokkit"] [data-select-option][data-selected="true"] [data-item-description],[data-mode="dark"] [data-style="rokkit"] [data-select-option][data-selected="true"] [data-item-description]{--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
1063
+
1064
+ [data-style='rokkit'] [data-select-option] [data-item-badge] {
1065
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
1066
+ }[data-mode="dark"][data-style="rokkit"] [data-select-option] [data-item-badge],[data-mode="dark"] [data-style="rokkit"] [data-select-option] [data-item-badge]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
1067
+
1068
+ [data-style='rokkit'] [data-select-option][data-selected='true'] [data-item-badge] {
1069
+ --un-bg-opacity:1;background-color:rgba(var(--color-primary-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-800),var(--un-text-opacity));
1070
+ }[data-mode="dark"][data-style="rokkit"] [data-select-option][data-selected="true"] [data-item-badge],[data-mode="dark"] [data-style="rokkit"] [data-select-option][data-selected="true"] [data-item-badge]{--un-bg-opacity:1;background-color:rgba(var(--color-primary-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-200),var(--un-text-opacity));}
1071
+
1072
+ /* =============================================================================
1073
+ Groups
1074
+ ============================================================================= */
1075
+
1076
+ [data-style='rokkit'] [data-select-group-label] {
1077
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1078
+ }[data-mode="dark"][data-style="rokkit"] [data-select-group-label],[data-mode="dark"] [data-style="rokkit"] [data-select-group-label]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1079
+
1080
+ /* =============================================================================
1081
+ Divider
1082
+ ============================================================================= */
1083
+
1084
+ [data-style='rokkit'] [data-select-divider] {
1085
+ --un-gradient-from-position:0%;--un-gradient-from:transparent var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:transparent var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
1086
+ }
1087
+
1088
+ /* =============================================================================
1089
+ Filter Input
1090
+ ============================================================================= */
1091
+
1092
+ [data-style='rokkit'] [data-select-filter] {
1093
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));
1094
+ }[data-mode="dark"][data-style="rokkit"] [data-select-filter],[data-mode="dark"] [data-style="rokkit"] [data-select-filter]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));}
1095
+
1096
+ [data-style='rokkit'] [data-select-filter-input] {
1097
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-100),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
1098
+ }[data-mode="dark"][data-style="rokkit"] [data-select-filter-input],[data-mode="dark"] [data-style="rokkit"] [data-select-filter-input]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-900),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
1099
+
1100
+ [data-style='rokkit'] [data-select-filter-input]:focus {
1101
+ --un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-400),var(--un-ring-opacity));
1102
+ }[data-mode="dark"][data-style="rokkit"] [data-select-filter-input]:focus,[data-mode="dark"] [data-style="rokkit"] [data-select-filter-input]:focus{--un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-600),var(--un-ring-opacity));}
1103
+
1104
+ [data-style='rokkit'] [data-select-filter-input]::placeholder {
1105
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1106
+ }[data-mode="dark"][data-style="rokkit"] [data-select-filter-input]::placeholder,[data-mode="dark"] [data-style="rokkit"] [data-select-filter-input]::placeholder{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1107
+
1108
+ [data-style='rokkit'] [data-select-empty] {
1109
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1110
+ }[data-mode="dark"][data-style="rokkit"] [data-select-empty],[data-mode="dark"] [data-style="rokkit"] [data-select-empty]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1111
+
1112
+ /**
1113
+ * Menu - Rokkit Theme Styles
1114
+ *
1115
+ * Rich gradients and glowing borders.
1116
+ */
1117
+
1118
+ /* =============================================================================
1119
+ Menu Trigger
1120
+ ============================================================================= */
1121
+
1122
+ [data-style='rokkit'] [data-menu-trigger] {
1123
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-200),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
1124
+ }[data-mode="dark"][data-style="rokkit"] [data-menu-trigger],[data-mode="dark"] [data-style="rokkit"] [data-menu-trigger]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-700),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-800),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
1125
+
1126
+ [data-style='rokkit'] [data-menu-trigger]:hover:not(:disabled) {
1127
+ --un-border-opacity:1;border-color:rgba(var(--color-surface-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-400),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-300),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));
1128
+ }[data-mode="dark"][data-style="rokkit"] [data-menu-trigger]:hover:not(:disabled),[data-mode="dark"] [data-style="rokkit"] [data-menu-trigger]:hover:not(:disabled){--un-border-opacity:1;border-color:rgba(var(--color-surface-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-600),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-700),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
1129
+
1130
+ [data-style='rokkit'] [data-menu-trigger]:focus-visible {
1131
+ outline:2px solid transparent;outline-offset:2px;
1132
+ }
1133
+
1134
+ [data-style='rokkit'] [data-menu][data-open='true'] [data-menu-trigger] {
1135
+ --un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
1136
+ }[data-mode="dark"][data-style="rokkit"] [data-menu][data-open="true"] [data-menu-trigger],[data-mode="dark"] [data-style="rokkit"] [data-menu][data-open="true"] [data-menu-trigger]{--un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);}
1137
+
1138
+ /* Trigger elements */
1139
+ [data-style='rokkit'] [data-menu-trigger] [data-menu-icon] {
1140
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1141
+ }[data-mode="dark"][data-style="rokkit"] [data-menu-trigger] [data-menu-icon],[data-mode="dark"] [data-style="rokkit"] [data-menu-trigger] [data-menu-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1142
+
1143
+ [data-style='rokkit'] [data-menu-trigger]:hover:not(:disabled) [data-menu-icon] {
1144
+ --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
1145
+ }[data-mode="dark"][data-style="rokkit"] [data-menu-trigger]:hover:not(:disabled) [data-menu-icon],[data-mode="dark"] [data-style="rokkit"] [data-menu-trigger]:hover:not(:disabled) [data-menu-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
1146
+
1147
+ [data-style='rokkit'] [data-menu-trigger] [data-menu-arrow] {
1148
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1149
+ }[data-mode="dark"][data-style="rokkit"] [data-menu-trigger] [data-menu-arrow],[data-mode="dark"] [data-style="rokkit"] [data-menu-trigger] [data-menu-arrow]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1150
+
1151
+ /* =============================================================================
1152
+ Menu Dropdown
1153
+ ============================================================================= */
1154
+
1155
+ [data-style='rokkit'] [data-menu-dropdown] {
1156
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-200),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-100),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
1157
+ }[data-mode="dark"][data-style="rokkit"] [data-menu-dropdown],[data-mode="dark"] [data-style="rokkit"] [data-menu-dropdown]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-800),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-900),1) var(--un-gradient-to-position);}
1158
+
1159
+ [data-style='rokkit'] [data-menu-dropdown]:focus-within {
1160
+ outline:2px solid transparent;outline-offset:2px;
1161
+ }
1162
+
1163
+ /* =============================================================================
1164
+ Menu Items
1165
+ ============================================================================= */
1166
+
1167
+ [data-style='rokkit'] [data-menu-item] {
1168
+ border-width:0px;border-color:transparent;border-radius:0;border-style:solid;--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
1169
+ }[data-mode="dark"][data-style="rokkit"] [data-menu-item],[data-mode="dark"] [data-style="rokkit"] [data-menu-item]{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
1170
+
1171
+ [data-style='rokkit'] [data-menu-item]:hover:not(:disabled):not([data-disabled='true']),
1172
+ [data-style='rokkit'] [data-menu-item]:focus:not(:disabled):not([data-disabled='true']) {
1173
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-200),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));outline:2px solid transparent;outline-offset:2px;
1174
+ }[data-mode="dark"][data-style="rokkit"] [data-menu-item]:hover:not(:disabled):not([data-disabled="true"]),[data-mode="dark"] [data-style="rokkit"] [data-menu-item]:hover:not(:disabled):not([data-disabled="true"]),[data-mode="dark"][data-style="rokkit"] [data-menu-item]:focus:not(:disabled):not([data-disabled="true"]),[data-mode="dark"] [data-style="rokkit"] [data-menu-item]:focus:not(:disabled):not([data-disabled="true"]){--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-700),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-800),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
1175
+
1176
+ /* Item elements */
1177
+ [data-style='rokkit'] [data-menu-item] [data-item-icon] {
1178
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1179
+ }[data-mode="dark"][data-style="rokkit"] [data-menu-item] [data-item-icon],[data-mode="dark"] [data-style="rokkit"] [data-menu-item] [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1180
+
1181
+ [data-style='rokkit'] [data-menu-item]:hover:not(:disabled) [data-item-icon],
1182
+ [data-style='rokkit'] [data-menu-item]:focus:not(:disabled) [data-item-icon] {
1183
+ --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
1184
+ }[data-mode="dark"][data-style="rokkit"] [data-menu-item]:hover:not(:disabled) [data-item-icon],[data-mode="dark"] [data-style="rokkit"] [data-menu-item]:hover:not(:disabled) [data-item-icon],[data-mode="dark"][data-style="rokkit"] [data-menu-item]:focus:not(:disabled) [data-item-icon],[data-mode="dark"] [data-style="rokkit"] [data-menu-item]:focus:not(:disabled) [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
1185
+
1186
+ [data-style='rokkit'] [data-menu-item] [data-item-description] {
1187
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1188
+ }[data-mode="dark"][data-style="rokkit"] [data-menu-item] [data-item-description],[data-mode="dark"] [data-style="rokkit"] [data-menu-item] [data-item-description]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1189
+
1190
+ /* =============================================================================
1191
+ Groups
1192
+ ============================================================================= */
1193
+
1194
+ [data-style='rokkit'] [data-menu-group] {
1195
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1196
+ }[data-mode="dark"][data-style="rokkit"] [data-menu-group],[data-mode="dark"] [data-style="rokkit"] [data-menu-group]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1197
+
1198
+ /* =============================================================================
1199
+ Divider
1200
+ ============================================================================= */
1201
+
1202
+ [data-style='rokkit'] [data-menu-separator] {
1203
+ --un-gradient-from-position:0%;--un-gradient-from:transparent var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:transparent var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
1204
+ }
1205
+
1206
+ /**
1207
+ * Dropdown - Rokkit Theme Styles
1208
+ *
1209
+ * Rich gradients and glowing borders.
1210
+ */
1211
+
1212
+ /* =============================================================================
1213
+ Trigger
1214
+ ============================================================================= */
1215
+
1216
+ [data-style='rokkit'] [data-dropdown-trigger] {
1217
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-200),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
1218
+ }[data-mode="dark"][data-style="rokkit"] [data-dropdown-trigger],[data-mode="dark"] [data-style="rokkit"] [data-dropdown-trigger]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-700),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-800),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
1219
+
1220
+ [data-style='rokkit'] [data-dropdown-trigger]:hover:not(:disabled) {
1221
+ --un-border-opacity:1;border-color:rgba(var(--color-surface-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-400),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-300),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));
1222
+ }[data-mode="dark"][data-style="rokkit"] [data-dropdown-trigger]:hover:not(:disabled),[data-mode="dark"] [data-style="rokkit"] [data-dropdown-trigger]:hover:not(:disabled){--un-border-opacity:1;border-color:rgba(var(--color-surface-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-600),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-700),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
1223
+
1224
+ [data-style='rokkit'] [data-dropdown-trigger]:focus-visible {
1225
+ outline:2px solid transparent;outline-offset:2px;
1226
+ }
1227
+
1228
+ [data-style='rokkit'] [data-dropdown][data-open='true'] [data-dropdown-trigger] {
1229
+ --un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
1230
+ }[data-mode="dark"][data-style="rokkit"] [data-dropdown][data-open="true"] [data-dropdown-trigger],[data-mode="dark"] [data-style="rokkit"] [data-dropdown][data-open="true"] [data-dropdown-trigger]{--un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);}
1231
+
1232
+ [data-style='rokkit'] [data-dropdown-trigger] [data-dropdown-icon] {
1233
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1234
+ }[data-mode="dark"][data-style="rokkit"] [data-dropdown-trigger] [data-dropdown-icon],[data-mode="dark"] [data-style="rokkit"] [data-dropdown-trigger] [data-dropdown-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1235
+
1236
+ [data-style='rokkit'] [data-dropdown-trigger]:hover:not(:disabled) [data-dropdown-icon] {
1237
+ --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
1238
+ }[data-mode="dark"][data-style="rokkit"] [data-dropdown-trigger]:hover:not(:disabled) [data-dropdown-icon],[data-mode="dark"] [data-style="rokkit"] [data-dropdown-trigger]:hover:not(:disabled) [data-dropdown-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
1239
+
1240
+ [data-style='rokkit'] [data-dropdown-trigger] [data-dropdown-arrow] {
1241
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1242
+ }[data-mode="dark"][data-style="rokkit"] [data-dropdown-trigger] [data-dropdown-arrow],[data-mode="dark"] [data-style="rokkit"] [data-dropdown-trigger] [data-dropdown-arrow]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1243
+
1244
+ /* =============================================================================
1245
+ Panel
1246
+ ============================================================================= */
1247
+
1248
+ [data-style='rokkit'] [data-dropdown-panel] {
1249
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-200),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-100),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
1250
+ }[data-mode="dark"][data-style="rokkit"] [data-dropdown-panel],[data-mode="dark"] [data-style="rokkit"] [data-dropdown-panel]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-800),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-900),1) var(--un-gradient-to-position);}
1251
+
1252
+ /* =============================================================================
1253
+ Options
1254
+ ============================================================================= */
1255
+
1256
+ [data-style='rokkit'] [data-dropdown-option] {
1257
+ --un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
1258
+ }[data-mode="dark"][data-style="rokkit"] [data-dropdown-option],[data-mode="dark"] [data-style="rokkit"] [data-dropdown-option]{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
1259
+
1260
+ [data-style='rokkit'] [data-dropdown-option]:hover:not(:disabled),
1261
+ [data-style='rokkit'] [data-dropdown-option]:focus:not(:disabled) {
1262
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-200),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));outline:2px solid transparent;outline-offset:2px;
1263
+ }[data-mode="dark"][data-style="rokkit"] [data-dropdown-option]:hover:not(:disabled),[data-mode="dark"] [data-style="rokkit"] [data-dropdown-option]:hover:not(:disabled),[data-mode="dark"][data-style="rokkit"] [data-dropdown-option]:focus:not(:disabled),[data-mode="dark"] [data-style="rokkit"] [data-dropdown-option]:focus:not(:disabled){--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-700),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-800),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
1264
+
1265
+ [data-style='rokkit'] [data-dropdown-option][data-active='true'] {
1266
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
1267
+ }[data-mode="dark"][data-style="rokkit"] [data-dropdown-option][data-active="true"],[data-mode="dark"] [data-style="rokkit"] [data-dropdown-option][data-active="true"]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
1268
+
1269
+ /* =============================================================================
1270
+ Separator
1271
+ ============================================================================= */
1272
+
1273
+ [data-style='rokkit'] [data-dropdown-separator] {
1274
+ --un-gradient-from-position:0%;--un-gradient-from:transparent var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:transparent var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
1275
+ }
1276
+
1277
+ /**
1278
+ * FloatingAction - Rokkit Theme Styles
1279
+ *
1280
+ * Rich gradients and glowing borders.
1281
+ */
1282
+
1283
+ /* =============================================================================
1284
+ FAB Trigger Button
1285
+ ============================================================================= */
1286
+
1287
+ [data-style='rokkit'] [data-fab-trigger] {
1288
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity));--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-600),var(--un-ring-opacity));
1289
+ }[data-mode="dark"][data-style="rokkit"] [data-fab-trigger],[data-mode="dark"] [data-style="rokkit"] [data-fab-trigger]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);}
1290
+
1291
+ [data-style='rokkit'] [data-fab-trigger]:hover:not(:disabled) {
1292
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-400),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-primary-500),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-shadow:var(--un-shadow-inset) 0 20px 25px -5px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 8px 10px -6px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-500),var(--un-ring-opacity));
1293
+ transform: scale(1.05);
1294
+ }
1295
+
1296
+ [data-style='rokkit'] [data-fab-trigger]:focus-visible {
1297
+ --un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);outline:2px solid transparent;outline-offset:2px;--un-ring-width:3px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-400),var(--un-ring-opacity));
1298
+ }
1299
+
1300
+ [data-style='rokkit'] [data-fab][data-open='true'] [data-fab-trigger] {
1301
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-400),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-300),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-opacity:1;--un-ring-color:rgba(var(--color-surface-500),var(--un-ring-opacity));
1302
+ transform: rotate(45deg);
1303
+ }[data-mode="dark"][data-style="rokkit"] [data-fab][data-open="true"] [data-fab-trigger],[data-mode="dark"] [data-style="rokkit"] [data-fab][data-open="true"] [data-fab-trigger]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-600),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-700),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));--un-ring-opacity:1;--un-ring-color:rgba(var(--color-surface-500),var(--un-ring-opacity));}
1304
+
1305
+ [data-style='rokkit'] [data-fab][data-open='true'] [data-fab-trigger]:hover:not(:disabled) {
1306
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-400),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
1307
+ transform: rotate(45deg) scale(1.05);
1308
+ }[data-mode="dark"][data-style="rokkit"] [data-fab][data-open="true"] [data-fab-trigger]:hover:not(:disabled),[data-mode="dark"] [data-style="rokkit"] [data-fab][data-open="true"] [data-fab-trigger]:hover:not(:disabled){--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-600),1) var(--un-gradient-to-position);}
1309
+
1310
+ /* =============================================================================
1311
+ FAB Items
1312
+ ============================================================================= */
1313
+
1314
+ [data-style='rokkit'] [data-fab-item] {
1315
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-100),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-50),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-opacity:1;--un-ring-color:rgba(var(--color-surface-200),var(--un-ring-opacity));
1316
+ }[data-mode="dark"][data-style="rokkit"] [data-fab-item],[data-mode="dark"] [data-style="rokkit"] [data-fab-item]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-900),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-950),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));--un-ring-opacity:1;--un-ring-color:rgba(var(--color-surface-800),var(--un-ring-opacity));}
1317
+
1318
+ [data-style='rokkit'] [data-fab-item]:hover:not(:disabled) {
1319
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-200),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-100),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-opacity:1;--un-ring-color:rgba(var(--color-surface-300),var(--un-ring-opacity));
1320
+ }[data-mode="dark"][data-style="rokkit"] [data-fab-item]:hover:not(:disabled),[data-mode="dark"] [data-style="rokkit"] [data-fab-item]:hover:not(:disabled){--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-800),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-900),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));--un-ring-opacity:1;--un-ring-color:rgba(var(--color-surface-700),var(--un-ring-opacity));}
1321
+
1322
+ [data-style='rokkit'] [data-fab-item]:focus-visible {
1323
+ --un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);outline:2px solid transparent;outline-offset:2px;--un-ring-width:2px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-400),var(--un-ring-opacity));
1324
+ }
1325
+
1326
+ /* Item icon */
1327
+ [data-style='rokkit'] [data-fab-item] [data-fab-item-icon] {
1328
+ --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
1329
+ }[data-mode="dark"][data-style="rokkit"] [data-fab-item] [data-fab-item-icon],[data-mode="dark"] [data-style="rokkit"] [data-fab-item] [data-fab-item-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
1330
+
1331
+ [data-style='rokkit'] [data-fab-item]:hover:not(:disabled) [data-fab-item-icon] {
1332
+ --un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
1333
+ }[data-mode="dark"][data-style="rokkit"] [data-fab-item]:hover:not(:disabled) [data-fab-item-icon],[data-mode="dark"] [data-style="rokkit"] [data-fab-item]:hover:not(:disabled) [data-fab-item-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
1334
+
1335
+ /* =============================================================================
1336
+ Backdrop
1337
+ ============================================================================= */
1338
+
1339
+ [data-style='rokkit'] [data-fab-backdrop] {
1340
+ background: rgba(0, 0, 0, 0.4);
1341
+ }
1342
+
1343
+ /* Rokkit Theme - Form field and input styles */
1344
+
1345
+ /* Field root: text color, spacing, rounded */
1346
+ [data-style='rokkit'] [data-field-root] {
1347
+ gap:0.25rem;border-radius:0.375rem;--un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;
1348
+ }[data-mode="dark"][data-style="rokkit"] [data-field-root],[data-mode="dark"] [data-style="rokkit"] [data-field-root]{--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
1349
+
1350
+ /* Disabled state */
1351
+ [data-style='rokkit'] [data-field-root][data-field-disabled] [data-input-root] {
1352
+ cursor:not-allowed;--un-bg-opacity:1;background-color:rgba(var(--color-surface-300),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
1353
+ }[data-mode="dark"][data-style="rokkit"] [data-field-root][data-field-disabled] [data-input-root],[data-mode="dark"] [data-style="rokkit"] [data-field-root][data-field-disabled] [data-input-root]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-700),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
1354
+
1355
+ /* Labels */
1356
+ [data-style='rokkit'] [data-field] > label {
1357
+ --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
1358
+ }[data-mode="dark"][data-style="rokkit"] [data-field]>label,[data-mode="dark"] [data-style="rokkit"] [data-field]>label{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
1359
+
1360
+ [data-style='rokkit'] [data-form-root] label {
1361
+ --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
1362
+ }[data-mode="dark"][data-style="rokkit"] [data-form-root] label,[data-mode="dark"] [data-style="rokkit"] [data-form-root] label{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
1363
+
1364
+ /* Info field value */
1365
+ [data-style='rokkit'] [data-field-info] {
1366
+ --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));font-weight:500;
1367
+ }[data-mode="dark"][data-style="rokkit"] [data-field-info],[data-mode="dark"] [data-style="rokkit"] [data-field-info]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
1368
+
1369
+ /* Separator */
1370
+ [data-style='rokkit'] [data-form-separator] {
1371
+ --un-border-opacity:1;border-color:rgba(var(--color-surface-200),var(--un-border-opacity));
1372
+ }[data-mode="dark"][data-style="rokkit"] [data-form-separator],[data-mode="dark"] [data-style="rokkit"] [data-form-separator]{--un-border-opacity:1;border-color:rgba(var(--color-surface-800),var(--un-border-opacity));}
1373
+
1374
+ /* Input root: gradient border wrapper */
1375
+ [data-style='rokkit'] [data-input-root] {
1376
+ display:flex;align-items:center;border-radius:0.375rem;--un-bg-opacity:1;background-color:rgba(var(--color-surface-400),var(--un-bg-opacity));padding:1px;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;
1377
+ }[data-mode="dark"][data-style="rokkit"] [data-input-root],[data-mode="dark"] [data-style="rokkit"] [data-input-root]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-600),var(--un-bg-opacity));}
1378
+
1379
+ [data-style='rokkit'] [data-input-root]:focus-within {
1380
+ border-color:transparent;--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
1381
+ }
1382
+
1383
+ /* Standard inputs inside wrapper */
1384
+ [data-style='rokkit']
1385
+ [data-input-root]
1386
+ input:not([type='checkbox'], [type='radio'], [type='color']),
1387
+ [data-style='rokkit'] [data-input-root] select {
1388
+ border-radius:0.375rem;border-style:none;--un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));padding-left:0.75rem;padding-right:0.75rem;--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
1389
+ font-size: 0.875rem;
1390
+ height: 2.25rem;
1391
+ }[data-mode="dark"][data-style="rokkit"] [data-input-root] input:not([type="checkbox"],[type="radio"],[type="color"]),[data-mode="dark"] [data-style="rokkit"] [data-input-root] input:not([type="checkbox"],[type="radio"],[type="color"]),[data-mode="dark"][data-style="rokkit"] [data-input-root] select,[data-mode="dark"] [data-style="rokkit"] [data-input-root] select{--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}[data-style="rokkit"] [data-input-root] input:not([type="checkbox"],[type="radio"],[type="color"]):focus,[data-style="rokkit"] [data-input-root] select:focus{outline:2px solid transparent;outline-offset:2px;}
1392
+
1393
+ [data-style='rokkit'] [data-input-root] textarea {
1394
+ border-radius:0.375rem;border-style:none;--un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem;--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
1395
+ font-size: 0.875rem;
1396
+ }[data-mode="dark"][data-style="rokkit"] [data-input-root] textarea,[data-mode="dark"] [data-style="rokkit"] [data-input-root] textarea{--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}[data-style="rokkit"] [data-input-root] textarea:focus{outline:2px solid transparent;outline-offset:2px;}
1397
+
1398
+ /* Select inside input-root: remove trigger styles since input-root provides the border */
1399
+ [data-style='rokkit'] [data-input-root] [data-select-trigger] {
1400
+ border-radius:0.375rem;border-style:none;--un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));--un-shadow:0 0 var(--un-shadow-color, rgb(0 0 0 / 0));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-width:0px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
1401
+ background-image: none;
1402
+ }[data-mode="dark"][data-style="rokkit"] [data-input-root] [data-select-trigger],[data-mode="dark"] [data-style="rokkit"] [data-input-root] [data-select-trigger]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}[data-style="rokkit"] [data-input-root] [data-select-trigger]:focus{outline:2px solid transparent;outline-offset:2px;}
1403
+
1404
+ /* Suppress standalone select open-state ring/border when inside input-root */
1405
+ [data-style='rokkit'] [data-input-root] [data-select][data-open='true'] [data-select-trigger] {
1406
+ border-style:none;--un-shadow:0 0 var(--un-shadow-color, rgb(0 0 0 / 0));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-width:0px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
1407
+ }
1408
+
1409
+ [data-style='rokkit'] [data-input-root] input::placeholder,
1410
+ [data-style='rokkit'] [data-input-root] textarea::placeholder {
1411
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1412
+ }[data-mode="dark"][data-style="rokkit"] [data-input-root] input::placeholder,[data-mode="dark"] [data-style="rokkit"] [data-input-root] input::placeholder,[data-mode="dark"][data-style="rokkit"] [data-input-root] textarea::placeholder,[data-mode="dark"] [data-style="rokkit"] [data-input-root] textarea::placeholder{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1413
+
1414
+ /* Checkbox field */
1415
+ [data-style='rokkit'] [data-field-type='checkbox'] [data-field] {
1416
+ display:flex;align-items:center;line-height:2;
1417
+ }
1418
+
1419
+ /* Checkbox icon: theme-colored */
1420
+ [data-style='rokkit'] [data-checkbox-icon] {
1421
+ cursor:pointer;border-radius:0.25rem;font-size:1.125rem;line-height:1.75rem;--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;
1422
+ }[data-mode="dark"][data-style="rokkit"] [data-checkbox-icon],[data-mode="dark"] [data-style="rokkit"] [data-checkbox-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1423
+
1424
+ [data-style='rokkit'] [data-checkbox-icon]:focus-visible {
1425
+ outline-width:2px;--un-outline-color-opacity:1;outline-color:rgba(var(--color-primary-400),var(--un-outline-color-opacity));outline-offset:2px;
1426
+ }[data-mode="dark"][data-style="rokkit"] [data-checkbox-icon]:focus-visible,[data-mode="dark"] [data-style="rokkit"] [data-checkbox-icon]:focus-visible{--un-outline-color-opacity:1;outline-color:rgba(var(--color-primary-600),var(--un-outline-color-opacity));}
1427
+
1428
+ [data-style='rokkit']
1429
+ [data-checkbox-root][data-variant='custom']:has(input:checked)
1430
+ [data-checkbox-icon] {
1431
+ --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
1432
+ }[data-mode="dark"][data-style="rokkit"] [data-checkbox-root][data-variant="custom"]:has(input:checked) [data-checkbox-icon],[data-mode="dark"] [data-style="rokkit"] [data-checkbox-root][data-variant="custom"]:has(input:checked) [data-checkbox-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
1433
+
1434
+ [data-style='rokkit'] [data-field] textarea {
1435
+ min-height:5rem;padding-top:0.5rem;padding-bottom:0.5rem;
1436
+ }
1437
+
1438
+ /* Color input */
1439
+ [data-style='rokkit'] [data-field-type='color'] [data-input-root] {
1440
+ overflow:hidden;
1441
+ }
1442
+
1443
+ [data-style='rokkit'] [data-field-type='color'] input[type='color'] {
1444
+ min-height:2.75rem;display:flex;flex:1 1 0%;border-radius:0.375rem;--un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));
1445
+ }[data-mode="dark"][data-style="rokkit"] [data-field-type="color"] input[type="color"],[data-mode="dark"] [data-style="rokkit"] [data-field-type="color"] input[type="color"]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));}[data-style="rokkit"] [data-field-type="color"] input[type="color"]:focus{outline:2px solid transparent;outline-offset:2px;}
1446
+
1447
+ /* Description and message */
1448
+ [data-style='rokkit'] [data-description],
1449
+ [data-style='rokkit'] [data-message] {
1450
+ --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
1451
+ }[data-mode="dark"][data-style="rokkit"] [data-description],[data-mode="dark"] [data-style="rokkit"] [data-description],[data-mode="dark"][data-style="rokkit"] [data-message],[data-mode="dark"] [data-style="rokkit"] [data-message]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
1452
+
1453
+ [data-style='rokkit'] [data-message] {
1454
+ border-radius:0.375rem;padding-left:0.5rem;padding-right:0.5rem;padding-top:0.25rem;padding-bottom:0.25rem;
1455
+ }
1456
+
1457
+ /* Validation state messages */
1458
+ [data-style='rokkit'] [data-field-state='success'] [data-message] {
1459
+ --un-bg-opacity:1;background-color:rgba(var(--color-success),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-success),var(--un-text-opacity));opacity:0.1;
1460
+ }
1461
+
1462
+ [data-style='rokkit'] [data-field-state='warning'] [data-message] {
1463
+ --un-bg-opacity:1;background-color:rgba(var(--color-warning),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-warning),var(--un-text-opacity));opacity:0.1;
1464
+ }
1465
+
1466
+ [data-style='rokkit'] [data-field-state='info'] [data-message] {
1467
+ --un-bg-opacity:1;background-color:rgba(var(--color-info),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-info),var(--un-text-opacity));opacity:0.1;
1468
+ }
1469
+
1470
+ [data-style='rokkit'] [data-field-state='error'] [data-message] {
1471
+ --un-bg-opacity:1;background-color:rgba(var(--color-error),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-error),var(--un-text-opacity));opacity:0.1;
1472
+ }
1473
+
1474
+ [data-style='rokkit'] [data-field-root][data-field-state='fail'] [data-input-root] {
1475
+ --un-bg-opacity:1;background-color:rgba(var(--color-error),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-error),var(--un-text-opacity));opacity:0.1;
1476
+ }
1477
+
1478
+ /**
1479
+ * Table - Rokkit Theme Styles
1480
+ *
1481
+ * Rich gradients and glowing borders.
1482
+ */
1483
+
1484
+ /* =============================================================================
1485
+ Header
1486
+ ============================================================================= */
1487
+
1488
+ [data-style='rokkit'] [data-table-header] th {
1489
+ border-bottom-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
1490
+ }[data-mode="dark"][data-style="rokkit"] [data-table-header] th,[data-mode="dark"] [data-style="rokkit"] [data-table-header] th{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
1491
+
1492
+ [data-style='rokkit'] [data-table-header-cell][data-sortable='true']:hover {
1493
+ --un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
1494
+ }[data-mode="dark"][data-style="rokkit"] [data-table-header-cell][data-sortable="true"]:hover,[data-mode="dark"] [data-style="rokkit"] [data-table-header-cell][data-sortable="true"]:hover{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
1495
+
1496
+ [data-style='rokkit'] [data-table-header-cell][data-sort-order='ascending'],
1497
+ [data-style='rokkit'] [data-table-header-cell][data-sort-order='descending'] {
1498
+ --un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
1499
+ }[data-mode="dark"][data-style="rokkit"] [data-table-header-cell][data-sort-order="ascending"],[data-mode="dark"] [data-style="rokkit"] [data-table-header-cell][data-sort-order="ascending"],[data-mode="dark"][data-style="rokkit"] [data-table-header-cell][data-sort-order="descending"],[data-mode="dark"] [data-style="rokkit"] [data-table-header-cell][data-sort-order="descending"]{--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
1500
+
1501
+ [data-style='rokkit'] [data-table-sort-icon] {
1502
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1503
+ }[data-mode="dark"][data-style="rokkit"] [data-table-sort-icon],[data-mode="dark"] [data-style="rokkit"] [data-table-sort-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1504
+
1505
+ [data-style='rokkit'] [data-table-header-cell][data-sort-order='ascending'] [data-table-sort-icon],
1506
+ [data-style='rokkit']
1507
+ [data-table-header-cell][data-sort-order='descending']
1508
+ [data-table-sort-icon] {
1509
+ --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
1510
+ }[data-mode="dark"][data-style="rokkit"] [data-table-header-cell][data-sort-order="ascending"] [data-table-sort-icon],[data-mode="dark"] [data-style="rokkit"] [data-table-header-cell][data-sort-order="ascending"] [data-table-sort-icon],[data-mode="dark"][data-style="rokkit"] [data-table-header-cell][data-sort-order="descending"] [data-table-sort-icon],[data-mode="dark"] [data-style="rokkit"] [data-table-header-cell][data-sort-order="descending"] [data-table-sort-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
1511
+
1512
+ /* =============================================================================
1513
+ Caption
1514
+ ============================================================================= */
1515
+
1516
+ [data-style='rokkit'] [data-table-caption] {
1517
+ --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
1518
+ }[data-mode="dark"][data-style="rokkit"] [data-table-caption],[data-mode="dark"] [data-style="rokkit"] [data-table-caption]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
1519
+
1520
+ /* =============================================================================
1521
+ Rows
1522
+ ============================================================================= */
1523
+
1524
+ [data-style='rokkit'] [data-table-row] {
1525
+ border-bottom-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-300),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
1526
+ }[data-mode="dark"][data-style="rokkit"] [data-table-row],[data-mode="dark"] [data-style="rokkit"] [data-table-row]{--un-border-opacity:1;border-color:rgba(var(--color-surface-700),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
1527
+
1528
+ [data-style='rokkit'] [data-table-row]:hover {
1529
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-200),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
1530
+ }[data-mode="dark"][data-style="rokkit"] [data-table-row]:hover,[data-mode="dark"] [data-style="rokkit"] [data-table-row]:hover{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-700),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-800),1) var(--un-gradient-to-position);}
1531
+
1532
+ [data-style='rokkit'] [data-table-row]:focus {
1533
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-200),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));outline:2px solid transparent;outline-offset:2px;
1534
+ }[data-mode="dark"][data-style="rokkit"] [data-table-row]:focus,[data-mode="dark"] [data-style="rokkit"] [data-table-row]:focus{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-700),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-800),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
1535
+
1536
+ [data-style='rokkit'] [data-table-row][data-selected='true'] {
1537
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
1538
+ }[data-mode="dark"][data-style="rokkit"] [data-table-row][data-selected="true"],[data-mode="dark"] [data-style="rokkit"] [data-table-row][data-selected="true"]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
1539
+
1540
+ /* =============================================================================
1541
+ Striped
1542
+ ============================================================================= */
1543
+
1544
+ [data-style='rokkit'] [data-striped='true'] [data-table-body] tr:nth-child(even) {
1545
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));
1546
+ }[data-mode="dark"][data-style="rokkit"] [data-striped="true"] [data-table-body] tr:nth-child(even),[data-mode="dark"] [data-style="rokkit"] [data-striped="true"] [data-table-body] tr:nth-child(even){--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));}
1547
+
1548
+ /* =============================================================================
1549
+ Empty
1550
+ ============================================================================= */
1551
+
1552
+ [data-style='rokkit'] [data-table-empty] {
1553
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1554
+ }[data-mode="dark"][data-style="rokkit"] [data-table-empty],[data-mode="dark"] [data-style="rokkit"] [data-table-empty]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1555
+
1556
+ /* =============================================================================
1557
+ Cell Icon
1558
+ ============================================================================= */
1559
+
1560
+ [data-style='rokkit'] [data-table-cell] [data-cell-icon] {
1561
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1562
+ }[data-mode="dark"][data-style="rokkit"] [data-table-cell] [data-cell-icon],[data-mode="dark"] [data-style="rokkit"] [data-table-cell] [data-cell-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1563
+
1564
+ [data-style='rokkit'] [data-table-row][data-selected='true'] [data-cell-icon] {
1565
+ --un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
1566
+ }[data-mode="dark"][data-style="rokkit"] [data-table-row][data-selected="true"] [data-cell-icon],[data-mode="dark"] [data-style="rokkit"] [data-table-row][data-selected="true"] [data-cell-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
1567
+
1568
+ /**
1569
+ * SearchFilter - Rokkit Theme Styles
1570
+ *
1571
+ * Rich gradients and glowing borders.
1572
+ */
1573
+
1574
+ /* =============================================================================
1575
+ Input
1576
+ ============================================================================= */
1577
+
1578
+ [data-style='rokkit'] [data-search-input] {
1579
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));background-color:transparent;--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
1580
+ }[data-mode="dark"][data-style="rokkit"] [data-search-input],[data-mode="dark"] [data-style="rokkit"] [data-search-input]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
1581
+
1582
+ [data-style='rokkit'] [data-search-input]:focus {
1583
+ --un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-400),var(--un-ring-opacity));
1584
+ }[data-mode="dark"][data-style="rokkit"] [data-search-input]:focus,[data-mode="dark"] [data-style="rokkit"] [data-search-input]:focus{--un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-600),var(--un-ring-opacity));}
1585
+
1586
+ [data-style='rokkit'] [data-search-input]::placeholder {
1587
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1588
+ }[data-mode="dark"][data-style="rokkit"] [data-search-input]::placeholder,[data-mode="dark"] [data-style="rokkit"] [data-search-input]::placeholder{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1589
+
1590
+ /* =============================================================================
1591
+ Clear Button
1592
+ ============================================================================= */
1593
+
1594
+ [data-style='rokkit'] [data-search-clear] {
1595
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1596
+ }[data-mode="dark"][data-style="rokkit"] [data-search-clear],[data-mode="dark"] [data-style="rokkit"] [data-search-clear]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1597
+
1598
+ [data-style='rokkit'] [data-search-clear]:hover {
1599
+ --un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
1600
+ }[data-mode="dark"][data-style="rokkit"] [data-search-clear]:hover,[data-mode="dark"] [data-style="rokkit"] [data-search-clear]:hover{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
1601
+
1602
+ /* =============================================================================
1603
+ Tags
1604
+ ============================================================================= */
1605
+
1606
+ [data-style='rokkit'] [data-search-tag] {
1607
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-200),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
1608
+ }[data-mode="dark"][data-style="rokkit"] [data-search-tag],[data-mode="dark"] [data-style="rokkit"] [data-search-tag]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-700),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-800),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
1609
+
1610
+ [data-style='rokkit'] [data-search-tag-remove] {
1611
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1612
+ }[data-mode="dark"][data-style="rokkit"] [data-search-tag-remove],[data-mode="dark"] [data-style="rokkit"] [data-search-tag-remove]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1613
+
1614
+ [data-style='rokkit'] [data-search-tag-remove]:hover {
1615
+ --un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));
1616
+ }[data-mode="dark"][data-style="rokkit"] [data-search-tag-remove]:hover,[data-mode="dark"] [data-style="rokkit"] [data-search-tag-remove]:hover{--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
1617
+
1618
+ /**
1619
+ * Range - Rokkit Theme Styles
1620
+ *
1621
+ * Rich gradients and glowing borders.
1622
+ */
1623
+
1624
+ /* =============================================================================
1625
+ Track
1626
+ ============================================================================= */
1627
+
1628
+ [data-style='rokkit'] [data-range-bar] {
1629
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-300),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));
1630
+ }[data-mode="dark"][data-style="rokkit"] [data-range-bar],[data-mode="dark"] [data-style="rokkit"] [data-range-bar]{--un-border-opacity:1;border-color:rgba(var(--color-surface-700),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));}
1631
+
1632
+ [data-style='rokkit'] [data-range-selected] {
1633
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
1634
+ }
1635
+
1636
+ /* =============================================================================
1637
+ Thumb
1638
+ ============================================================================= */
1639
+
1640
+ [data-style='rokkit'] [data-range-thumb] {
1641
+ --un-border-opacity:1;border-color:rgba(var(--color-secondary),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-secondary),var(--un-bg-opacity));--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
1642
+ }
1643
+
1644
+ [data-style='rokkit'] [data-range-thumb][data-sliding] {
1645
+ --un-shadow:var(--un-shadow-inset) 0 20px 25px -5px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 8px 10px -6px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
1646
+ box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-secondary) 30%, transparent);
1647
+ }
1648
+
1649
+ [data-style='rokkit'] [data-range-thumb]:focus-visible {
1650
+ box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-secondary) 30%, transparent);
1651
+ }
1652
+
1653
+ /* =============================================================================
1654
+ Ticks
1655
+ ============================================================================= */
1656
+
1657
+ [data-style='rokkit'] [data-range-tick] {
1658
+ --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
1659
+ }[data-mode="dark"][data-style="rokkit"] [data-range-tick],[data-mode="dark"] [data-style="rokkit"] [data-range-tick]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
1660
+
1661
+ [data-style='rokkit'] [data-tick-bar] {
1662
+ --un-border-opacity:1;border-color:rgba(var(--color-surface-500),var(--un-border-opacity));
1663
+ }[data-mode="dark"][data-style="rokkit"] [data-tick-bar],[data-mode="dark"] [data-style="rokkit"] [data-tick-bar]{--un-border-opacity:1;border-color:rgba(var(--color-surface-500),var(--un-border-opacity));}
1664
+
1665
+ [data-style='rokkit'] [data-tick-label] {
1666
+ --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
1667
+ }[data-mode="dark"][data-style="rokkit"] [data-tick-label],[data-mode="dark"] [data-style="rokkit"] [data-tick-label]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
1668
+
1669
+ /* =============================================================================
1670
+ Disabled
1671
+ ============================================================================= */
1672
+
1673
+ [data-style='rokkit'] [data-range][data-disabled] [data-range-thumb] {
1674
+ --un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-400),var(--un-bg-opacity));
1675
+ }[data-mode="dark"][data-style="rokkit"] [data-range][data-disabled] [data-range-thumb],[data-mode="dark"] [data-style="rokkit"] [data-range][data-disabled] [data-range-thumb]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-600),var(--un-bg-opacity));}
1676
+
1677
+ [data-style='rokkit'] [data-range][data-disabled] [data-range-selected] {
1678
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-400),var(--un-bg-opacity));
1679
+ }[data-mode="dark"][data-style="rokkit"] [data-range][data-disabled] [data-range-selected],[data-mode="dark"] [data-style="rokkit"] [data-range][data-disabled] [data-range-selected]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-600),var(--un-bg-opacity));}
1680
+
1681
+ /**
1682
+ * Timeline - Rokkit Theme Styles
1683
+ *
1684
+ * Rich gradients and glowing accents.
1685
+ */
1686
+
1687
+ /* =============================================================================
1688
+ Circle
1689
+ ============================================================================= */
1690
+
1691
+ [data-style='rokkit'] [data-timeline-circle] {
1692
+ --un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
1693
+ }[data-mode="dark"][data-style="rokkit"] [data-timeline-circle],[data-mode="dark"] [data-style="rokkit"] [data-timeline-circle]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
1694
+
1695
+ [data-style='rokkit'] [data-timeline-item][data-completed] [data-timeline-circle] {
1696
+ --un-border-opacity:1;border-color:rgba(var(--color-primary),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-primary),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));
1697
+ }
1698
+
1699
+ [data-style='rokkit'] [data-timeline-item][data-active] [data-timeline-circle] {
1700
+ --un-border-opacity:1;border-color:rgba(var(--color-primary),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-primary),var(--un-text-opacity));
1701
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
1702
+ }
1703
+
1704
+ /* =============================================================================
1705
+ Connector
1706
+ ============================================================================= */
1707
+
1708
+ [data-style='rokkit'] [data-timeline-connector] {
1709
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-300),var(--un-bg-opacity));
1710
+ }[data-mode="dark"][data-style="rokkit"] [data-timeline-connector],[data-mode="dark"] [data-style="rokkit"] [data-timeline-connector]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-700),var(--un-bg-opacity));}
1711
+
1712
+ [data-style='rokkit'] [data-timeline-item][data-completed] [data-timeline-connector] {
1713
+ --un-bg-opacity:1;background-color:rgba(var(--color-primary),var(--un-bg-opacity));
1714
+ }
1715
+
1716
+ /* =============================================================================
1717
+ Body
1718
+ ============================================================================= */
1719
+
1720
+ [data-style='rokkit'] [data-timeline-title] {
1721
+ --un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
1722
+ }[data-mode="dark"][data-style="rokkit"] [data-timeline-title],[data-mode="dark"] [data-style="rokkit"] [data-timeline-title]{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
1723
+
1724
+ [data-style='rokkit'] [data-timeline-description] {
1725
+ --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
1726
+ }[data-mode="dark"][data-style="rokkit"] [data-timeline-description],[data-mode="dark"] [data-style="rokkit"] [data-timeline-description]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
1727
+
1728
+ /**
1729
+ * FloatingNavigation - Rokkit Theme Styles
1730
+ *
1731
+ * Rich gradients and glowing borders.
1732
+ */
1733
+
1734
+ /* =============================================================================
1735
+ Container
1736
+ ============================================================================= */
1737
+
1738
+ [data-style='rokkit'] [data-floating-nav] {
1739
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-100),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-50),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-shadow:var(--un-shadow-inset) 0 20px 25px -5px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 8px 10px -6px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-opacity:1;--un-ring-color:rgba(var(--color-surface-300),var(--un-ring-opacity));
1740
+ }[data-mode="dark"][data-style="rokkit"] [data-floating-nav],[data-mode="dark"] [data-style="rokkit"] [data-floating-nav]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-900),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-950),1) var(--un-gradient-to-position);--un-ring-opacity:1;--un-ring-color:rgba(var(--color-surface-700),var(--un-ring-opacity));}
1741
+
1742
+ /* =============================================================================
1743
+ Header
1744
+ ============================================================================= */
1745
+
1746
+ [data-style='rokkit'] [data-floating-nav-title] {
1747
+ --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
1748
+ }[data-mode="dark"][data-style="rokkit"] [data-floating-nav-title],[data-mode="dark"] [data-style="rokkit"] [data-floating-nav-title]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
1749
+
1750
+ [data-style='rokkit'] [data-floating-nav-pin] {
1751
+ --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
1752
+ }[data-mode="dark"][data-style="rokkit"] [data-floating-nav-pin],[data-mode="dark"] [data-style="rokkit"] [data-floating-nav-pin]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
1753
+
1754
+ [data-style='rokkit'] [data-floating-nav-pin]:hover {
1755
+ --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
1756
+ }[data-mode="dark"][data-style="rokkit"] [data-floating-nav-pin]:hover,[data-mode="dark"] [data-style="rokkit"] [data-floating-nav-pin]:hover{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
1757
+
1758
+ [data-style='rokkit'] [data-floating-nav-pin][aria-pressed='true'] {
1759
+ --un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
1760
+ }[data-mode="dark"][data-style="rokkit"] [data-floating-nav-pin][aria-pressed="true"],[data-mode="dark"] [data-style="rokkit"] [data-floating-nav-pin][aria-pressed="true"]{--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
1761
+
1762
+ /* =============================================================================
1763
+ Items
1764
+ ============================================================================= */
1765
+
1766
+ [data-style='rokkit'] [data-floating-nav-item] {
1767
+ --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
1768
+ }[data-mode="dark"][data-style="rokkit"] [data-floating-nav-item],[data-mode="dark"] [data-style="rokkit"] [data-floating-nav-item]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
1769
+
1770
+ [data-style='rokkit'] [data-floating-nav-item]:hover {
1771
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-200),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-100),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));
1772
+ }[data-mode="dark"][data-style="rokkit"] [data-floating-nav-item]:hover,[data-mode="dark"] [data-style="rokkit"] [data-floating-nav-item]:hover{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-800),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-900),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
1773
+
1774
+ [data-style='rokkit'] [data-floating-nav-item][data-active] {
1775
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),0.1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-primary-500),0.05) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
1776
+ }[data-mode="dark"][data-style="rokkit"] [data-floating-nav-item][data-active],[data-mode="dark"] [data-style="rokkit"] [data-floating-nav-item][data-active]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),0.1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-primary-500),0.05) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
1777
+
1778
+ [data-style='rokkit'] [data-floating-nav-item]:focus-visible {
1779
+ outline:2px solid transparent;outline-offset:2px;--un-ring-width:2px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-400),var(--un-ring-opacity));
1780
+ }
1781
+
1782
+ /* Icon */
1783
+ [data-style='rokkit'] [data-floating-nav-icon] {
1784
+ --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
1785
+ }[data-mode="dark"][data-style="rokkit"] [data-floating-nav-icon],[data-mode="dark"] [data-style="rokkit"] [data-floating-nav-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
1786
+
1787
+ [data-style='rokkit'] [data-floating-nav-item]:hover [data-floating-nav-icon] {
1788
+ --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
1789
+ }[data-mode="dark"][data-style="rokkit"] [data-floating-nav-item]:hover [data-floating-nav-icon],[data-mode="dark"] [data-style="rokkit"] [data-floating-nav-item]:hover [data-floating-nav-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
1790
+
1791
+ [data-style='rokkit'] [data-floating-nav-item][data-active] [data-floating-nav-icon] {
1792
+ --un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
1793
+ }[data-mode="dark"][data-style="rokkit"] [data-floating-nav-item][data-active] [data-floating-nav-icon],[data-mode="dark"] [data-style="rokkit"] [data-floating-nav-item][data-active] [data-floating-nav-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
1794
+
1795
+ /* Label */
1796
+ [data-style='rokkit'] [data-floating-nav-label] {
1797
+ --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
1798
+ }[data-mode="dark"][data-style="rokkit"] [data-floating-nav-label],[data-mode="dark"] [data-style="rokkit"] [data-floating-nav-label]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
1799
+
1800
+ [data-style='rokkit'] [data-floating-nav-item][data-active] [data-floating-nav-label] {
1801
+ --un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));font-weight:500;
1802
+ }[data-mode="dark"][data-style="rokkit"] [data-floating-nav-item][data-active] [data-floating-nav-label],[data-mode="dark"] [data-style="rokkit"] [data-floating-nav-item][data-active] [data-floating-nav-label]{--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
1803
+
1804
+ /* =============================================================================
1805
+ Active Indicator
1806
+ ============================================================================= */
1807
+
1808
+ [data-style='rokkit'] [data-floating-nav-indicator] {
1809
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-primary-600),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
1810
+ }[data-mode="dark"][data-style="rokkit"] [data-floating-nav-indicator],[data-mode="dark"] [data-style="rokkit"] [data-floating-nav-indicator]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-primary-400),1) var(--un-gradient-to-position);}
1811
+
1812
+ /**
1813
+ * Grid - Rokkit Theme Styles
1814
+ *
1815
+ * Tile borders, hover/focus effects, selection highlight.
1816
+ */
1817
+
1818
+ /* =============================================================================
1819
+ Grid Tiles
1820
+ ============================================================================= */
1821
+
1822
+ [data-style='rokkit'] [data-grid] [data-grid-item] {
1823
+ --un-border-opacity:1;border-color:rgba(var(--color-surface-300),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
1824
+ }[data-mode="dark"][data-style="rokkit"] [data-grid] [data-grid-item],[data-mode="dark"] [data-style="rokkit"] [data-grid] [data-grid-item]{--un-border-opacity:1;border-color:rgba(var(--color-surface-700),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
1825
+
1826
+ [data-style='rokkit'] [data-grid] [data-grid-item]:hover:not(:disabled):not([data-disabled]) {
1827
+ --un-border-opacity:1;border-color:rgba(var(--color-surface-500),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));
1828
+ }[data-mode="dark"][data-style="rokkit"] [data-grid] [data-grid-item]:hover:not(:disabled):not([data-disabled]),[data-mode="dark"] [data-style="rokkit"] [data-grid] [data-grid-item]:hover:not(:disabled):not([data-disabled]){--un-border-opacity:1;border-color:rgba(var(--color-surface-500),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
1829
+
1830
+ [data-style='rokkit'] [data-grid] [data-grid-item]:focus:not(:disabled):not([data-disabled]) {
1831
+ --un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));outline:2px solid transparent;outline-offset:2px;
1832
+ }[data-mode="dark"][data-style="rokkit"] [data-grid] [data-grid-item]:focus:not(:disabled):not([data-disabled]),[data-mode="dark"] [data-style="rokkit"] [data-grid] [data-grid-item]:focus:not(:disabled):not([data-disabled]){--un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
1833
+
1834
+ /* Active / selected tile */
1835
+ [data-style='rokkit'] [data-grid] [data-grid-item][data-active] {
1836
+ --un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-primary-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
1837
+ }[data-mode="dark"][data-style="rokkit"] [data-grid] [data-grid-item][data-active],[data-mode="dark"] [data-style="rokkit"] [data-grid] [data-grid-item][data-active]{--un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-primary-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
1838
+
1839
+ [data-style='rokkit'] [data-grid] [data-grid-item][data-active]:hover:not(:disabled) {
1840
+ --un-bg-opacity:1;background-color:rgba(var(--color-primary-300),var(--un-bg-opacity));
1841
+ }[data-mode="dark"][data-style="rokkit"] [data-grid] [data-grid-item][data-active]:hover:not(:disabled),[data-mode="dark"] [data-style="rokkit"] [data-grid] [data-grid-item][data-active]:hover:not(:disabled){--un-bg-opacity:1;background-color:rgba(var(--color-primary-700),var(--un-bg-opacity));}
1842
+
1843
+ /* =============================================================================
1844
+ Item Elements
1845
+ ============================================================================= */
1846
+
1847
+ [data-style='rokkit'] [data-grid] [data-grid-item] [data-item-icon] {
1848
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1849
+ }[data-mode="dark"][data-style="rokkit"] [data-grid] [data-grid-item] [data-item-icon],[data-mode="dark"] [data-style="rokkit"] [data-grid] [data-grid-item] [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1850
+
1851
+ [data-style='rokkit'] [data-grid] [data-grid-item]:hover:not(:disabled) [data-item-icon] {
1852
+ --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
1853
+ }[data-mode="dark"][data-style="rokkit"] [data-grid] [data-grid-item]:hover:not(:disabled) [data-item-icon],[data-mode="dark"] [data-style="rokkit"] [data-grid] [data-grid-item]:hover:not(:disabled) [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
1854
+
1855
+ [data-style='rokkit'] [data-grid] [data-grid-item][data-active] [data-item-icon] {
1856
+ --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
1857
+ }[data-mode="dark"][data-style="rokkit"] [data-grid] [data-grid-item][data-active] [data-item-icon],[data-mode="dark"] [data-style="rokkit"] [data-grid] [data-grid-item][data-active] [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
1858
+
1859
+ /**
1860
+ * UploadTarget - Rokkit Theme Styles
1861
+ *
1862
+ * Colors, drag-over highlight, hover/focus rings.
1863
+ */
1864
+
1865
+ /* =============================================================================
1866
+ Drop Zone
1867
+ ============================================================================= */
1868
+
1869
+ [data-style='rokkit'] [data-upload-target] {
1870
+ --un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
1871
+ }[data-mode="dark"][data-style="rokkit"] [data-upload-target],[data-mode="dark"] [data-style="rokkit"] [data-upload-target]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
1872
+
1873
+ [data-style='rokkit'] [data-upload-target]:hover:not([data-disabled]) {
1874
+ --un-border-opacity:1;border-color:rgba(var(--color-surface-500),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
1875
+ }[data-mode="dark"][data-style="rokkit"] [data-upload-target]:hover:not([data-disabled]),[data-mode="dark"] [data-style="rokkit"] [data-upload-target]:hover:not([data-disabled]){--un-border-opacity:1;border-color:rgba(var(--color-surface-500),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
1876
+
1877
+ [data-style='rokkit'] [data-upload-target]:focus-visible:not([data-disabled]) {
1878
+ --un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--un-ring-width:2px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-300),var(--un-ring-opacity));
1879
+ }[data-mode="dark"][data-style="rokkit"] [data-upload-target]:focus-visible:not([data-disabled]),[data-mode="dark"] [data-style="rokkit"] [data-upload-target]:focus-visible:not([data-disabled]){--un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-700),var(--un-ring-opacity));}
1880
+
1881
+ /* Drag-over highlight */
1882
+ [data-style='rokkit'] [data-upload-target][data-dragging] {
1883
+ --un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-primary-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
1884
+ }[data-mode="dark"][data-style="rokkit"] [data-upload-target][data-dragging],[data-mode="dark"] [data-style="rokkit"] [data-upload-target][data-dragging]{--un-border-opacity:1;border-color:rgba(var(--color-primary-500),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-primary-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
1885
+
1886
+ /* =============================================================================
1887
+ Upload Icon
1888
+ ============================================================================= */
1889
+
1890
+ [data-style='rokkit'] [data-upload-target] [data-upload-icon] {
1891
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1892
+ }[data-mode="dark"][data-style="rokkit"] [data-upload-target] [data-upload-icon],[data-mode="dark"] [data-style="rokkit"] [data-upload-target] [data-upload-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1893
+
1894
+ [data-style='rokkit'] [data-upload-target][data-dragging] [data-upload-icon] {
1895
+ --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
1896
+ }[data-mode="dark"][data-style="rokkit"] [data-upload-target][data-dragging] [data-upload-icon],[data-mode="dark"] [data-style="rokkit"] [data-upload-target][data-dragging] [data-upload-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
1897
+
1898
+ /* =============================================================================
1899
+ Browse Button
1900
+ ============================================================================= */
1901
+
1902
+ [data-style='rokkit'] [data-upload-target] [data-upload-button] {
1903
+ --un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
1904
+ }[data-mode="dark"][data-style="rokkit"] [data-upload-target] [data-upload-button],[data-mode="dark"] [data-style="rokkit"] [data-upload-target] [data-upload-button]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
1905
+
1906
+ [data-style='rokkit'] [data-upload-target] [data-upload-button]:hover:not(:disabled) {
1907
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-300),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));
1908
+ }[data-mode="dark"][data-style="rokkit"] [data-upload-target] [data-upload-button]:hover:not(:disabled),[data-mode="dark"] [data-style="rokkit"] [data-upload-target] [data-upload-button]:hover:not(:disabled){--un-bg-opacity:1;background-color:rgba(var(--color-surface-700),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
1909
+
1910
+ /**
1911
+ * UploadProgress - Rokkit Theme Styles
1912
+ *
1913
+ * Status colors, progress fill, action buttons.
1914
+ */
1915
+
1916
+ /* =============================================================================
1917
+ Header
1918
+ ============================================================================= */
1919
+
1920
+ [data-style='rokkit'] [data-upload-header] {
1921
+ --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
1922
+ }[data-mode="dark"][data-style="rokkit"] [data-upload-header],[data-mode="dark"] [data-style="rokkit"] [data-upload-header]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
1923
+
1924
+ [data-style='rokkit'] [data-upload-clear] {
1925
+ --un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
1926
+ }[data-mode="dark"][data-style="rokkit"] [data-upload-clear],[data-mode="dark"] [data-style="rokkit"] [data-upload-clear]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
1927
+
1928
+ [data-style='rokkit'] [data-upload-clear]:hover {
1929
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-300),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));
1930
+ }[data-mode="dark"][data-style="rokkit"] [data-upload-clear]:hover,[data-mode="dark"] [data-style="rokkit"] [data-upload-clear]:hover{--un-bg-opacity:1;background-color:rgba(var(--color-surface-700),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
1931
+
1932
+ /* =============================================================================
1933
+ File Rows
1934
+ ============================================================================= */
1935
+
1936
+ [data-style='rokkit'] [data-upload-file-status] {
1937
+ --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
1938
+ }[data-mode="dark"][data-style="rokkit"] [data-upload-file-status],[data-mode="dark"] [data-style="rokkit"] [data-upload-file-status]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
1939
+
1940
+ [data-style='rokkit'] [data-upload-file-status]:hover {
1941
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));
1942
+ }[data-mode="dark"][data-style="rokkit"] [data-upload-file-status]:hover,[data-mode="dark"] [data-style="rokkit"] [data-upload-file-status]:hover{--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));}
1943
+
1944
+ /* =============================================================================
1945
+ File Elements
1946
+ ============================================================================= */
1947
+
1948
+ [data-style='rokkit'] [data-upload-file-icon] {
1949
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1950
+ }[data-mode="dark"][data-style="rokkit"] [data-upload-file-icon],[data-mode="dark"] [data-style="rokkit"] [data-upload-file-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1951
+
1952
+ [data-style='rokkit'] [data-upload-file-size] {
1953
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1954
+ }[data-mode="dark"][data-style="rokkit"] [data-upload-file-size],[data-mode="dark"] [data-style="rokkit"] [data-upload-file-size]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1955
+
1956
+ /* =============================================================================
1957
+ Progress Bar
1958
+ ============================================================================= */
1959
+
1960
+ [data-style='rokkit'] [data-upload-bar] {
1961
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-300),var(--un-bg-opacity));
1962
+ }[data-mode="dark"][data-style="rokkit"] [data-upload-bar],[data-mode="dark"] [data-style="rokkit"] [data-upload-bar]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-700),var(--un-bg-opacity));}
1963
+
1964
+ [data-style='rokkit'] [data-upload-fill] {
1965
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
1966
+ }[data-mode="dark"][data-style="rokkit"] [data-upload-fill],[data-mode="dark"] [data-style="rokkit"] [data-upload-fill]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);}
1967
+
1968
+ /* =============================================================================
1969
+ Status Colors
1970
+ ============================================================================= */
1971
+
1972
+ [data-style='rokkit'] [data-upload-file-status][data-status='uploading'] [data-upload-status] {
1973
+ --un-text-opacity:1;color:rgba(var(--color-primary-600),var(--un-text-opacity));
1974
+ }[data-mode="dark"][data-style="rokkit"] [data-upload-file-status][data-status="uploading"] [data-upload-status],[data-mode="dark"] [data-style="rokkit"] [data-upload-file-status][data-status="uploading"] [data-upload-status]{--un-text-opacity:1;color:rgba(var(--color-primary-400),var(--un-text-opacity));}
1975
+
1976
+ [data-style='rokkit'] [data-upload-file-status][data-status='done'] [data-upload-status] {
1977
+ --un-text-opacity:1;color:rgb(34 197 94 / var(--un-text-opacity));
1978
+ }
1979
+
1980
+ [data-style='rokkit'] [data-upload-file-status][data-status='error'] [data-upload-status] {
1981
+ --un-text-opacity:1;color:rgb(239 68 68 / var(--un-text-opacity));
1982
+ }
1983
+
1984
+ [data-style='rokkit'] [data-upload-file-status][data-status='pending'] [data-upload-status] {
1985
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1986
+ }[data-mode="dark"][data-style="rokkit"] [data-upload-file-status][data-status="pending"] [data-upload-status],[data-mode="dark"] [data-style="rokkit"] [data-upload-file-status][data-status="pending"] [data-upload-status]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1987
+
1988
+ /* Status-based file icon tinting */
1989
+ [data-style='rokkit'] [data-upload-file-status][data-status='done'] [data-upload-file-icon] {
1990
+ --un-text-opacity:1;color:rgb(34 197 94 / var(--un-text-opacity));
1991
+ }
1992
+
1993
+ [data-style='rokkit'] [data-upload-file-status][data-status='error'] [data-upload-file-icon] {
1994
+ --un-text-opacity:1;color:rgb(239 68 68 / var(--un-text-opacity));
1995
+ }
1996
+
1997
+ /* =============================================================================
1998
+ Action Buttons
1999
+ ============================================================================= */
2000
+
2001
+ [data-style='rokkit'] [data-upload-actions] button {
2002
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
2003
+ }[data-mode="dark"][data-style="rokkit"] [data-upload-actions] button,[data-mode="dark"] [data-style="rokkit"] [data-upload-actions] button{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
2004
+
2005
+ [data-style='rokkit'] [data-upload-actions] button:hover {
2006
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-300),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));
2007
+ }[data-mode="dark"][data-style="rokkit"] [data-upload-actions] button:hover,[data-mode="dark"] [data-style="rokkit"] [data-upload-actions] button:hover{--un-bg-opacity:1;background-color:rgba(var(--color-surface-700),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
2008
+
2009
+ [data-style='rokkit'] [data-upload-file-status][data-status='error'] [data-upload-retry]:hover {
2010
+ --un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
2011
+ }[data-mode="dark"][data-style="rokkit"] [data-upload-file-status][data-status="error"] [data-upload-retry]:hover,[data-mode="dark"] [data-style="rokkit"] [data-upload-file-status][data-status="error"] [data-upload-retry]:hover{--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
2012
+
2013
+ /* TableOfContents — Rokkit theme */
2014
+
2015
+ [data-style='rokkit'] [data-toc] [data-toc-label] {
2016
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
2017
+ }[data-mode="dark"][data-style="rokkit"] [data-toc] [data-toc-label],[data-mode="dark"] [data-style="rokkit"] [data-toc] [data-toc-label]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
2018
+
2019
+ [data-style='rokkit'] [data-toc] [data-toc-item] {
2020
+ --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
2021
+ }[data-mode="dark"][data-style="rokkit"] [data-toc] [data-toc-item],[data-mode="dark"] [data-style="rokkit"] [data-toc] [data-toc-item]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
2022
+
2023
+ [data-style='rokkit'] [data-toc] [data-toc-item]:hover,
2024
+ [data-style='rokkit'] [data-toc] [data-toc-item][data-toc-focused] {
2025
+ --un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));outline:2px solid transparent;outline-offset:2px;
2026
+ }[data-mode="dark"][data-style="rokkit"] [data-toc] [data-toc-item]:hover,[data-mode="dark"] [data-style="rokkit"] [data-toc] [data-toc-item]:hover,[data-mode="dark"][data-style="rokkit"] [data-toc] [data-toc-item][data-toc-focused],[data-mode="dark"] [data-style="rokkit"] [data-toc] [data-toc-item][data-toc-focused]{--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
2027
+
2028
+ [data-style='rokkit'] [data-toc] [data-toc-item][data-toc-active] {
2029
+ --un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-500),var(--un-border-left-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
2030
+ }[data-mode="dark"][data-style="rokkit"] [data-toc] [data-toc-item][data-toc-active],[data-mode="dark"] [data-style="rokkit"] [data-toc] [data-toc-item][data-toc-active]{--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-500),var(--un-border-left-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
2031
+
2032
+ /**
2033
+ * Card - Rokkit Theme Styles
2034
+ *
2035
+ * Rich gradients, elevated shadows, and vibrant surface styling.
2036
+ */
2037
+
2038
+ /* =============================================================================
2039
+ Base Card Styles
2040
+ ============================================================================= */
2041
+
2042
+ [data-style='rokkit'] [data-card] {
2043
+ border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-200),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-100),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
2044
+ }[data-mode="dark"][data-style="rokkit"] [data-card],[data-mode="dark"] [data-style="rokkit"] [data-card]{--un-border-opacity:1;border-color:rgba(var(--color-surface-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-800),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-900),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
2045
+
2046
+ /* Interactive cards (buttons) */
2047
+ [data-style='rokkit'] [data-card][data-card-interactive] {
2048
+ cursor: pointer;
2049
+ transition:
2050
+ transform 0.2s ease,
2051
+ box-shadow 0.2s ease;
2052
+ }
2053
+
2054
+ [data-style='rokkit'] [data-card][data-card-interactive]:hover {
2055
+ --un-shadow:var(--un-shadow-inset) 0 20px 25px -5px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 8px 10px -6px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
2056
+ transform: translateY(-2px);
2057
+ }
2058
+
2059
+ [data-style='rokkit'] [data-card][data-card-interactive]:active {
2060
+ --un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
2061
+ transform: translateY(0);
2062
+ }
2063
+
2064
+ /* =============================================================================
2065
+ Card Sections
2066
+ ============================================================================= */
2067
+
2068
+ [data-style='rokkit'] [data-card-header] {
2069
+ border-bottom-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));
2070
+ }[data-mode="dark"][data-style="rokkit"] [data-card-header],[data-mode="dark"] [data-style="rokkit"] [data-card-header]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));}
2071
+
2072
+ [data-style='rokkit'] [data-card-body] {
2073
+ --un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
2074
+ }[data-mode="dark"][data-style="rokkit"] [data-card-body],[data-mode="dark"] [data-style="rokkit"] [data-card-body]{--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
2075
+
2076
+ [data-style='rokkit'] [data-card-footer] {
2077
+ border-top-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
2078
+ }[data-mode="dark"][data-style="rokkit"] [data-card-footer],[data-mode="dark"] [data-style="rokkit"] [data-card-footer]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
2079
+
2080
+ /* =============================================================================
2081
+ Focus States
2082
+ ============================================================================= */
2083
+
2084
+ [data-style='rokkit'] [data-card][data-card-interactive]:focus-visible {
2085
+ outline:2px solid transparent;outline-offset:2px;--un-ring-width:2px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-500),var(--un-ring-opacity));
2086
+ }[data-mode="dark"][data-style="rokkit"] [data-card][data-card-interactive]:focus-visible,[data-mode="dark"] [data-style="rokkit"] [data-card][data-card-interactive]:focus-visible{--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-500),var(--un-ring-opacity));}
2087
+
2088
+ /* =============================================================================
2089
+ Disabled State
2090
+ ============================================================================= */
2091
+
2092
+ [data-style='rokkit'] [data-card][data-card-interactive][data-disabled],
2093
+ [data-style='rokkit'] [data-card][data-card-interactive]:disabled {
2094
+ cursor:not-allowed;opacity:0.5;
2095
+ transform: none;
2096
+ }
2097
+
2098
+ /* =============================================================================
2099
+ Variants
2100
+ ============================================================================= */
2101
+
2102
+ /* Primary — gradient from primary to secondary */
2103
+ [data-style='rokkit'] [data-card][data-variant='primary'] {
2104
+ --un-border-opacity:1;border-color:rgba(var(--color-primary-600),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
2105
+ }[data-mode="dark"][data-style="rokkit"] [data-card][data-variant="primary"],[data-mode="dark"] [data-style="rokkit"] [data-card][data-variant="primary"]{--un-border-opacity:1;border-color:rgba(var(--color-primary-400),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);}
2106
+
2107
+ [data-style='rokkit'] [data-card][data-variant='primary'] [data-card-header],
2108
+ [data-style='rokkit'] [data-card][data-variant='primary'] [data-card-footer] {
2109
+ border-color:rgba(var(--color-primary-400),0.4);
2110
+ }[data-mode="dark"][data-style="rokkit"] [data-card][data-variant="primary"] [data-card-header],[data-mode="dark"] [data-style="rokkit"] [data-card][data-variant="primary"] [data-card-header],[data-mode="dark"][data-style="rokkit"] [data-card][data-variant="primary"] [data-card-footer],[data-mode="dark"] [data-style="rokkit"] [data-card][data-variant="primary"] [data-card-footer]{border-color:rgba(var(--color-primary-600),0.4);}
2111
+
2112
+ [data-style='rokkit'] [data-card][data-variant='primary'] [data-card-body] {
2113
+ @apply text-on-primary/80;
2114
+ }
2115
+
2116
+ /* Secondary — muted secondary surface */
2117
+ [data-style='rokkit'] [data-card][data-variant='secondary'] {
2118
+ --un-border-opacity:1;border-color:rgba(var(--color-secondary-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-secondary-400),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-300),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));--un-shadow:var(--un-shadow-inset) 0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
2119
+ }[data-mode="dark"][data-style="rokkit"] [data-card][data-variant="secondary"],[data-mode="dark"] [data-style="rokkit"] [data-card][data-variant="secondary"]{--un-border-opacity:1;border-color:rgba(var(--color-secondary-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-secondary-600),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-700),1) var(--un-gradient-to-position);}
2120
+
2121
+ [data-style='rokkit'] [data-card][data-variant='secondary'] [data-card-header],
2122
+ [data-style='rokkit'] [data-card][data-variant='secondary'] [data-card-footer] {
2123
+ border-color:rgba(var(--color-secondary-400),0.4);
2124
+ }[data-mode="dark"][data-style="rokkit"] [data-card][data-variant="secondary"] [data-card-header],[data-mode="dark"] [data-style="rokkit"] [data-card][data-variant="secondary"] [data-card-header],[data-mode="dark"][data-style="rokkit"] [data-card][data-variant="secondary"] [data-card-footer],[data-mode="dark"] [data-style="rokkit"] [data-card][data-variant="secondary"] [data-card-footer]{border-color:rgba(var(--color-secondary-600),0.4);}
2125
+
2126
+ [data-style='rokkit'] [data-card][data-variant='secondary'] [data-card-body] {
2127
+ @apply text-on-secondary/80;
2128
+ }
2129
+
2130
+ /* Tertiary — elevated surface, no color accent */
2131
+ [data-style='rokkit'] [data-card][data-variant='tertiary'] {
2132
+ --un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-200),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));--un-shadow:var(--un-shadow-inset) 0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
2133
+ }[data-mode="dark"][data-style="rokkit"] [data-card][data-variant="tertiary"],[data-mode="dark"] [data-style="rokkit"] [data-card][data-variant="tertiary"]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-700),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-800),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
2134
+
2135
+ /**
2136
+ * Message - Rokkit Theme Styles
2137
+ */
2138
+
2139
+ /* Type colors */
2140
+ [data-style='rokkit'] [data-message-root][data-type='error'] {
2141
+ --un-border-opacity:1;border-color:rgba(var(--color-error-400),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-error-100),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-error-800),var(--un-text-opacity));
2142
+ }[data-mode="dark"][data-style="rokkit"] [data-message-root][data-type="error"],[data-mode="dark"] [data-style="rokkit"] [data-message-root][data-type="error"]{--un-border-opacity:1;border-color:rgba(var(--color-error-600),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-error-900),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-error-200),var(--un-text-opacity));}
2143
+ [data-style='rokkit'] [data-message-root][data-type='error'] [data-message-icon] {
2144
+ --un-text-opacity:1;color:rgba(var(--color-error-600),var(--un-text-opacity));
2145
+ }[data-mode="dark"][data-style="rokkit"] [data-message-root][data-type="error"] [data-message-icon],[data-mode="dark"] [data-style="rokkit"] [data-message-root][data-type="error"] [data-message-icon]{--un-text-opacity:1;color:rgba(var(--color-error-400),var(--un-text-opacity));}
2146
+ [data-style='rokkit'] [data-message-root][data-type='error'] [data-message-dismiss] {
2147
+ --un-text-opacity:1;color:rgba(var(--color-error-600),var(--un-text-opacity));
2148
+ }[data-mode="dark"][data-style="rokkit"] [data-message-root][data-type="error"] [data-message-dismiss],[data-mode="dark"] [data-style="rokkit"] [data-message-root][data-type="error"] [data-message-dismiss]{--un-text-opacity:1;color:rgba(var(--color-error-400),var(--un-text-opacity));}
2149
+
2150
+ [data-style='rokkit'] [data-message-root][data-type='warning'] {
2151
+ --un-border-opacity:1;border-color:rgba(var(--color-warning-400),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-warning-100),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-warning-800),var(--un-text-opacity));
2152
+ }[data-mode="dark"][data-style="rokkit"] [data-message-root][data-type="warning"],[data-mode="dark"] [data-style="rokkit"] [data-message-root][data-type="warning"]{--un-border-opacity:1;border-color:rgba(var(--color-warning-600),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-warning-900),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-warning-200),var(--un-text-opacity));}
2153
+ [data-style='rokkit'] [data-message-root][data-type='warning'] [data-message-icon] {
2154
+ --un-text-opacity:1;color:rgba(var(--color-warning-600),var(--un-text-opacity));
2155
+ }[data-mode="dark"][data-style="rokkit"] [data-message-root][data-type="warning"] [data-message-icon],[data-mode="dark"] [data-style="rokkit"] [data-message-root][data-type="warning"] [data-message-icon]{--un-text-opacity:1;color:rgba(var(--color-warning-400),var(--un-text-opacity));}
2156
+ [data-style='rokkit'] [data-message-root][data-type='warning'] [data-message-dismiss] {
2157
+ --un-text-opacity:1;color:rgba(var(--color-warning-600),var(--un-text-opacity));
2158
+ }[data-mode="dark"][data-style="rokkit"] [data-message-root][data-type="warning"] [data-message-dismiss],[data-mode="dark"] [data-style="rokkit"] [data-message-root][data-type="warning"] [data-message-dismiss]{--un-text-opacity:1;color:rgba(var(--color-warning-400),var(--un-text-opacity));}
2159
+
2160
+ [data-style='rokkit'] [data-message-root][data-type='info'] {
2161
+ --un-border-opacity:1;border-color:rgba(var(--color-info-400),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-info-100),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-info-800),var(--un-text-opacity));
2162
+ }[data-mode="dark"][data-style="rokkit"] [data-message-root][data-type="info"],[data-mode="dark"] [data-style="rokkit"] [data-message-root][data-type="info"]{--un-border-opacity:1;border-color:rgba(var(--color-info-600),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-info-900),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-info-200),var(--un-text-opacity));}
2163
+ [data-style='rokkit'] [data-message-root][data-type='info'] [data-message-icon] {
2164
+ --un-text-opacity:1;color:rgba(var(--color-info-600),var(--un-text-opacity));
2165
+ }[data-mode="dark"][data-style="rokkit"] [data-message-root][data-type="info"] [data-message-icon],[data-mode="dark"] [data-style="rokkit"] [data-message-root][data-type="info"] [data-message-icon]{--un-text-opacity:1;color:rgba(var(--color-info-400),var(--un-text-opacity));}
2166
+ [data-style='rokkit'] [data-message-root][data-type='info'] [data-message-dismiss] {
2167
+ --un-text-opacity:1;color:rgba(var(--color-info-600),var(--un-text-opacity));
2168
+ }[data-mode="dark"][data-style="rokkit"] [data-message-root][data-type="info"] [data-message-dismiss],[data-mode="dark"] [data-style="rokkit"] [data-message-root][data-type="info"] [data-message-dismiss]{--un-text-opacity:1;color:rgba(var(--color-info-400),var(--un-text-opacity));}
2169
+
2170
+ [data-style='rokkit'] [data-message-root][data-type='success'] {
2171
+ --un-border-opacity:1;border-color:rgba(var(--color-success-400),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-success-100),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-success-800),var(--un-text-opacity));
2172
+ }[data-mode="dark"][data-style="rokkit"] [data-message-root][data-type="success"],[data-mode="dark"] [data-style="rokkit"] [data-message-root][data-type="success"]{--un-border-opacity:1;border-color:rgba(var(--color-success-600),var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-success-900),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-success-200),var(--un-text-opacity));}
2173
+ [data-style='rokkit'] [data-message-root][data-type='success'] [data-message-icon] {
2174
+ --un-text-opacity:1;color:rgba(var(--color-success-600),var(--un-text-opacity));
2175
+ }[data-mode="dark"][data-style="rokkit"] [data-message-root][data-type="success"] [data-message-icon],[data-mode="dark"] [data-style="rokkit"] [data-message-root][data-type="success"] [data-message-icon]{--un-text-opacity:1;color:rgba(var(--color-success-400),var(--un-text-opacity));}
2176
+ [data-style='rokkit'] [data-message-root][data-type='success'] [data-message-dismiss] {
2177
+ --un-text-opacity:1;color:rgba(var(--color-success-600),var(--un-text-opacity));
2178
+ }[data-mode="dark"][data-style="rokkit"] [data-message-root][data-type="success"] [data-message-dismiss],[data-mode="dark"] [data-style="rokkit"] [data-message-root][data-type="success"] [data-message-dismiss]{--un-text-opacity:1;color:rgba(var(--color-success-400),var(--un-text-opacity));}
2179
+
2180
+ /**
2181
+ * StatusList - Rokkit Theme Styles
2182
+ */
2183
+
2184
+ /* ── @rokkit/ui StatusList: icon colors by status (pass/fail/warn/unknown) ── */
2185
+
2186
+ [data-style='rokkit'] [data-status-item][data-status='pass'] span {
2187
+ --un-text-opacity:1;color:rgba(var(--color-success-600),var(--un-text-opacity));
2188
+ }[data-mode="dark"][data-style="rokkit"] [data-status-item][data-status="pass"] span,[data-mode="dark"] [data-style="rokkit"] [data-status-item][data-status="pass"] span{--un-text-opacity:1;color:rgba(var(--color-success-400),var(--un-text-opacity));}
2189
+ [data-style='rokkit'] [data-status-item][data-status='fail'] span {
2190
+ --un-text-opacity:1;color:rgba(var(--color-error-600),var(--un-text-opacity));
2191
+ }[data-mode="dark"][data-style="rokkit"] [data-status-item][data-status="fail"] span,[data-mode="dark"] [data-style="rokkit"] [data-status-item][data-status="fail"] span{--un-text-opacity:1;color:rgba(var(--color-error-400),var(--un-text-opacity));}
2192
+ [data-style='rokkit'] [data-status-item][data-status='warn'] span {
2193
+ --un-text-opacity:1;color:rgba(var(--color-warning-600),var(--un-text-opacity));
2194
+ }[data-mode="dark"][data-style="rokkit"] [data-status-item][data-status="warn"] span,[data-mode="dark"] [data-style="rokkit"] [data-status-item][data-status="warn"] span{--un-text-opacity:1;color:rgba(var(--color-warning-400),var(--un-text-opacity));}
2195
+ [data-style='rokkit'] [data-status-item][data-status='unknown'] span {
2196
+ --un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));
2197
+ }[data-mode="dark"][data-style="rokkit"] [data-status-item][data-status="unknown"] span,[data-mode="dark"] [data-style="rokkit"] [data-status-item][data-status="unknown"] span{--un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));}
2198
+
2199
+ /* ── @rokkit/ui StatusList: text color by status ── */
2200
+
2201
+ [data-style='rokkit'] [data-status-item][data-status='pass'] {
2202
+ --un-text-opacity:1;color:rgba(var(--color-success-700),var(--un-text-opacity));
2203
+ }[data-mode="dark"][data-style="rokkit"] [data-status-item][data-status="pass"],[data-mode="dark"] [data-style="rokkit"] [data-status-item][data-status="pass"]{--un-text-opacity:1;color:rgba(var(--color-success-300),var(--un-text-opacity));}
2204
+ [data-style='rokkit'] [data-status-item][data-status='fail'] {
2205
+ --un-text-opacity:1;color:rgba(var(--color-error-700),var(--un-text-opacity));
2206
+ }[data-mode="dark"][data-style="rokkit"] [data-status-item][data-status="fail"],[data-mode="dark"] [data-style="rokkit"] [data-status-item][data-status="fail"]{--un-text-opacity:1;color:rgba(var(--color-error-300),var(--un-text-opacity));}
2207
+ [data-style='rokkit'] [data-status-item][data-status='warn'] {
2208
+ --un-text-opacity:1;color:rgba(var(--color-warning-700),var(--un-text-opacity));
2209
+ }[data-mode="dark"][data-style="rokkit"] [data-status-item][data-status="warn"],[data-mode="dark"] [data-style="rokkit"] [data-status-item][data-status="warn"]{--un-text-opacity:1;color:rgba(var(--color-warning-300),var(--un-text-opacity));}
2210
+ [data-style='rokkit'] [data-status-item][data-status='unknown'] {
2211
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
2212
+ }[data-mode="dark"][data-style="rokkit"] [data-status-item][data-status="unknown"],[data-mode="dark"] [data-style="rokkit"] [data-status-item][data-status="unknown"]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
2213
+
2214
+ /* ── @rokkit/forms StatusList: group headers by severity ── */
2215
+
2216
+ [data-style='rokkit'] [data-status-group][data-severity='error'] [data-status-header] {
2217
+ --un-text-opacity:1;color:rgba(var(--color-error-600),var(--un-text-opacity));
2218
+ }[data-mode="dark"][data-style="rokkit"] [data-status-group][data-severity="error"] [data-status-header],[data-mode="dark"] [data-style="rokkit"] [data-status-group][data-severity="error"] [data-status-header]{--un-text-opacity:1;color:rgba(var(--color-error-400),var(--un-text-opacity));}
2219
+ [data-style='rokkit'] [data-status-group][data-severity='warning'] [data-status-header] {
2220
+ --un-text-opacity:1;color:rgba(var(--color-warning-600),var(--un-text-opacity));
2221
+ }[data-mode="dark"][data-style="rokkit"] [data-status-group][data-severity="warning"] [data-status-header],[data-mode="dark"] [data-style="rokkit"] [data-status-group][data-severity="warning"] [data-status-header]{--un-text-opacity:1;color:rgba(var(--color-warning-400),var(--un-text-opacity));}
2222
+ [data-style='rokkit'] [data-status-group][data-severity='info'] [data-status-header] {
2223
+ --un-text-opacity:1;color:rgba(var(--color-info-600),var(--un-text-opacity));
2224
+ }[data-mode="dark"][data-style="rokkit"] [data-status-group][data-severity="info"] [data-status-header],[data-mode="dark"] [data-style="rokkit"] [data-status-group][data-severity="info"] [data-status-header]{--un-text-opacity:1;color:rgba(var(--color-info-400),var(--un-text-opacity));}
2225
+ [data-style='rokkit'] [data-status-group][data-severity='success'] [data-status-header] {
2226
+ --un-text-opacity:1;color:rgba(var(--color-success-600),var(--un-text-opacity));
2227
+ }[data-mode="dark"][data-style="rokkit"] [data-status-group][data-severity="success"] [data-status-header],[data-mode="dark"] [data-style="rokkit"] [data-status-group][data-severity="success"] [data-status-header]{--un-text-opacity:1;color:rgba(var(--color-success-400),var(--un-text-opacity));}
2228
+
2229
+ /* ── @rokkit/forms StatusList: item colors by severity ── */
2230
+
2231
+ [data-style='rokkit'] [data-status-item][data-status='error'] {
2232
+ --un-text-opacity:1;color:rgba(var(--color-error-700),var(--un-text-opacity));
2233
+ }[data-mode="dark"][data-style="rokkit"] [data-status-item][data-status="error"],[data-mode="dark"] [data-style="rokkit"] [data-status-item][data-status="error"]{--un-text-opacity:1;color:rgba(var(--color-error-300),var(--un-text-opacity));}
2234
+ [data-style='rokkit'] [data-status-item][data-status='warning'] {
2235
+ --un-text-opacity:1;color:rgba(var(--color-warning-700),var(--un-text-opacity));
2236
+ }[data-mode="dark"][data-style="rokkit"] [data-status-item][data-status="warning"],[data-mode="dark"] [data-style="rokkit"] [data-status-item][data-status="warning"]{--un-text-opacity:1;color:rgba(var(--color-warning-300),var(--un-text-opacity));}
2237
+ [data-style='rokkit'] [data-status-item][data-status='info'] {
2238
+ --un-text-opacity:1;color:rgba(var(--color-info-700),var(--un-text-opacity));
2239
+ }[data-mode="dark"][data-style="rokkit"] [data-status-item][data-status="info"],[data-mode="dark"] [data-style="rokkit"] [data-status-item][data-status="info"]{--un-text-opacity:1;color:rgba(var(--color-info-300),var(--un-text-opacity));}
2240
+ [data-style='rokkit'] [data-status-item][data-status='success'] {
2241
+ --un-text-opacity:1;color:rgba(var(--color-success-700),var(--un-text-opacity));
2242
+ }[data-mode="dark"][data-style="rokkit"] [data-status-item][data-status="success"],[data-mode="dark"] [data-style="rokkit"] [data-status-item][data-status="success"]{--un-text-opacity:1;color:rgba(var(--color-success-300),var(--un-text-opacity));}
2243
+
2244
+ /* Count badge */
2245
+ [data-style='rokkit'] [data-status-count] {
2246
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-300),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));font-weight:600;
2247
+ }[data-mode="dark"][data-style="rokkit"] [data-status-count],[data-mode="dark"] [data-style="rokkit"] [data-status-count]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-700),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
2248
+
2249
+ /**
2250
+ * Chart - Rokkit Theme Styles
2251
+ */
2252
+
2253
+ [data-style='rokkit'] [data-chart-axis-line],
2254
+ [data-style='rokkit'] [data-chart-tick] line {
2255
+ --un-stroke-opacity:1;stroke:rgba(var(--color-surface-400),var(--un-stroke-opacity));
2256
+ }[data-mode="dark"][data-style="rokkit"] [data-chart-axis-line],[data-mode="dark"] [data-style="rokkit"] [data-chart-axis-line],[data-mode="dark"][data-style="rokkit"] [data-chart-tick] line,[data-mode="dark"] [data-style="rokkit"] [data-chart-tick] line{--un-stroke-opacity:1;stroke:rgba(var(--color-surface-600),var(--un-stroke-opacity));}
2257
+
2258
+ [data-style='rokkit'] [data-chart-tick-label] {
2259
+ --un-fill-opacity:1;fill:rgba(var(--color-surface-600),var(--un-fill-opacity));
2260
+ }[data-mode="dark"][data-style="rokkit"] [data-chart-tick-label],[data-mode="dark"] [data-style="rokkit"] [data-chart-tick-label]{--un-fill-opacity:1;fill:rgba(var(--color-surface-400),var(--un-fill-opacity));}
2261
+
2262
+ [data-style='rokkit'] [data-chart-grid-line] {
2263
+ --un-stroke-opacity:1;stroke:rgba(var(--color-surface-300),var(--un-stroke-opacity));
2264
+ stroke-dasharray: 4 4;
2265
+ stroke-opacity: 0.5;
2266
+ }[data-mode="dark"][data-style="rokkit"] [data-chart-grid-line],[data-mode="dark"] [data-style="rokkit"] [data-chart-grid-line]{--un-stroke-opacity:1;stroke:rgba(var(--color-surface-700),var(--un-stroke-opacity));}
2267
+
2268
+ [data-style='rokkit'] [data-chart-legend-label] {
2269
+ --un-fill-opacity:1;fill:rgba(var(--color-surface-600),var(--un-fill-opacity));
2270
+ }[data-mode="dark"][data-style="rokkit"] [data-chart-legend-label],[data-mode="dark"] [data-style="rokkit"] [data-chart-legend-label]{--un-fill-opacity:1;fill:rgba(var(--color-surface-400),var(--un-fill-opacity));}
2271
+
2272
+ [data-style='rokkit'] [data-chart-legend-item]:hover {
2273
+ --un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));
2274
+ }[data-mode="dark"][data-style="rokkit"] [data-chart-legend-item]:hover,[data-mode="dark"] [data-style="rokkit"] [data-chart-legend-item]:hover{--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
2275
+
2276
+ [data-style='rokkit'] [data-plot-element="bar"][data-dimmed],
2277
+ [data-style='rokkit'] [data-plot-element="point"][data-dimmed],
2278
+ [data-style='rokkit'] [data-plot-element="arc"][data-dimmed],
2279
+ [data-style='rokkit'] [data-plot-element="line"][data-dimmed],
2280
+ [data-style='rokkit'] [data-plot-element="area"][data-dimmed] {
2281
+ opacity: 0.15;
2282
+ }
2283
+
2284
+ [data-style='rokkit'] [data-facet-title] {
2285
+ --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
2286
+ }[data-mode="dark"][data-style="rokkit"] [data-facet-title],[data-mode="dark"] [data-style="rokkit"] [data-facet-title]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
2287
+
2288
+ /**
2289
+ * Swatch — Rokkit Theme
2290
+ * Selected ring uses primary→secondary gradient, matching input focus ring.
2291
+ */
2292
+
2293
+ [data-style='rokkit'] [data-swatch-item][data-selected] {
2294
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
2295
+ }
2296
+
2297
+ [data-style='rokkit'] [data-swatch-item]:hover:not(:disabled):not([data-disabled]):not([data-selected]),
2298
+ [data-style='rokkit'] [data-swatch-item]:focus-visible:not(:disabled):not([data-disabled]):not([data-selected]) {
2299
+ --un-outline-color-opacity:1;outline-color:rgba(var(--color-primary-400),var(--un-outline-color-opacity));
2300
+ }[data-mode="dark"][data-style="rokkit"] [data-swatch-item]:hover:not(:disabled):not([data-disabled]):not([data-selected]),[data-mode="dark"] [data-style="rokkit"] [data-swatch-item]:hover:not(:disabled):not([data-disabled]):not([data-selected]),[data-mode="dark"][data-style="rokkit"] [data-swatch-item]:focus-visible:not(:disabled):not([data-disabled]):not([data-selected]),[data-mode="dark"] [data-style="rokkit"] [data-swatch-item]:focus-visible:not(:disabled):not([data-disabled]):not([data-selected]){--un-outline-color-opacity:1;outline-color:rgba(var(--color-primary-600),var(--un-outline-color-opacity));}
2301
+
2302
+ [data-style='rokkit'] [data-swatch-item][data-selected]:focus-visible {
2303
+ --un-outline-color-opacity:1;outline-color:rgba(var(--color-primary-600),var(--un-outline-color-opacity));
2304
+ outline-offset: 3px;
2305
+ }[data-mode="dark"][data-style="rokkit"] [data-swatch-item][data-selected]:focus-visible,[data-mode="dark"] [data-style="rokkit"] [data-swatch-item][data-selected]:focus-visible{--un-outline-color-opacity:1;outline-color:rgba(var(--color-primary-400),var(--un-outline-color-opacity));}
2306
+