/*!
 * UI Style Kit CSS v2.0.3
 * CSS theme and UI style preset library.
 * License: MIT
 */

@layer ui-style-kit.theme_colors, ui-style-kit.native_elements, ui-style-kit.minimal_saas, ui-style-kit.bento, ui-style-kit.maximalist, ui-style-kit.bauhaus, ui-style-kit.tactile, ui-style-kit.neumorphism, ui-style-kit.retrofuturism, ui-style-kit.brutalism, ui-style-kit.cyberpunk, ui-style-kit.y2k, ui-style-kit.retro_glass;

/* styles/theme-colors.css */
/* =========================================================
   UI Style Kit CSS - Shared Theme Color Roles
   Defines active scheme and mode colors once for every UI preset.
========================================================= */

@layer ui-style-kit.theme_colors {
/* Shared RGB roles keep visual presets focused on layout, texture, and component treatment. */
:where([data-ui][data-theme="midnight-gold"][data-mode="light"]) {
  --usk-bg-rgb: 246 243 234;
  --usk-surface-rgb: 255 250 240;
  --usk-surface-strong-rgb: 255 255 255;
  --usk-surface-soft-rgb: 237 230 211;
  --usk-text-rgb: 23 32 51;
  --usk-text-muted-rgb: 95 104 121;
  --usk-border-rgb: 214 200 165;
  --usk-primary-rgb: 184 135 47;
  --usk-primary-hover-rgb: 148 104 31;
  --usk-primary-text-rgb: 16 16 16;
  --usk-secondary-rgb: 34 49 79;
  --usk-secondary-hover-rgb: 23 36 60;
  --usk-secondary-text-rgb: 255 255 255;
  --usk-accent-rgb: 217 164 65;
  --usk-success-rgb: 47 125 84;
  --usk-warning-rgb: 167 106 0;
  --usk-danger-rgb: 185 63 63;
  --usk-link-rgb: 138 100 31;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 255 255 255;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 255 255 255;
  --usk-focus-rgb: 217 164 65;
}

:where([data-ui][data-theme="midnight-gold"][data-mode="dark"]) {
  --usk-bg-rgb: 7 17 31;
  --usk-surface-rgb: 16 27 45;
  --usk-surface-strong-rgb: 23 36 58;
  --usk-surface-soft-rgb: 12 22 39;
  --usk-text-rgb: 247 237 215;
  --usk-text-muted-rgb: 185 192 204;
  --usk-border-rgb: 57 72 97;
  --usk-primary-rgb: 214 168 79;
  --usk-primary-hover-rgb: 240 200 109;
  --usk-primary-text-rgb: 16 16 16;
  --usk-secondary-rgb: 111 134 184;
  --usk-secondary-hover-rgb: 146 167 209;
  --usk-secondary-text-rgb: 8 16 29;
  --usk-accent-rgb: 243 210 122;
  --usk-success-rgb: 107 214 156;
  --usk-warning-rgb: 255 203 91;
  --usk-danger-rgb: 255 123 123;
  --usk-link-rgb: 243 210 122;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 214 107;
}

:where([data-ui][data-theme="midnight-gold"][data-mode="contrast"]) {
  --usk-bg-rgb: 0 0 0;
  --usk-surface-rgb: 8 8 8;
  --usk-surface-strong-rgb: 17 17 17;
  --usk-surface-soft-rgb: 5 5 5;
  --usk-text-rgb: 255 255 255;
  --usk-text-muted-rgb: 245 245 245;
  --usk-border-rgb: 255 255 255;
  --usk-primary-rgb: 255 212 0;
  --usk-primary-hover-rgb: 255 255 255;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 0 217 255;
  --usk-secondary-hover-rgb: 255 255 255;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 255 234 0;
  --usk-success-rgb: 0 255 117;
  --usk-warning-rgb: 255 191 0;
  --usk-danger-rgb: 255 77 77;
  --usk-link-rgb: 0 217 255;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 255 255;
}

:where([data-ui][data-theme="ocean-steel"][data-mode="light"]) {
  --usk-bg-rgb: 238 248 251;
  --usk-surface-rgb: 255 255 255;
  --usk-surface-strong-rgb: 248 253 255;
  --usk-surface-soft-rgb: 220 236 242;
  --usk-text-rgb: 16 36 46;
  --usk-text-muted-rgb: 78 101 112;
  --usk-border-rgb: 184 211 221;
  --usk-primary-rgb: 8 125 157;
  --usk-primary-hover-rgb: 6 100 126;
  --usk-primary-text-rgb: 255 255 255;
  --usk-secondary-rgb: 57 86 107;
  --usk-secondary-hover-rgb: 44 67 84;
  --usk-secondary-text-rgb: 255 255 255;
  --usk-accent-rgb: 21 184 200;
  --usk-success-rgb: 38 122 92;
  --usk-warning-rgb: 167 101 0;
  --usk-danger-rgb: 182 70 70;
  --usk-link-rgb: 6 100 126;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 255 255 255;
  --usk-warning-text-rgb: 255 255 255;
  --usk-danger-text-rgb: 255 255 255;
  --usk-focus-rgb: 21 184 200;
}

:where([data-ui][data-theme="ocean-steel"][data-mode="dark"]) {
  --usk-bg-rgb: 6 22 29;
  --usk-surface-rgb: 13 37 48;
  --usk-surface-strong-rgb: 20 52 66;
  --usk-surface-soft-rgb: 8 29 38;
  --usk-text-rgb: 233 251 255;
  --usk-text-muted-rgb: 167 192 201;
  --usk-border-rgb: 49 86 102;
  --usk-primary-rgb: 54 196 221;
  --usk-primary-hover-rgb: 115 227 244;
  --usk-primary-text-rgb: 4 18 22;
  --usk-secondary-rgb: 140 183 201;
  --usk-secondary-hover-rgb: 178 213 226;
  --usk-secondary-text-rgb: 6 22 29;
  --usk-accent-rgb: 83 240 255;
  --usk-success-rgb: 103 216 166;
  --usk-warning-rgb: 255 192 97;
  --usk-danger-rgb: 255 123 123;
  --usk-link-rgb: 115 227 244;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 83 240 255;
}

:where([data-ui][data-theme="ocean-steel"][data-mode="contrast"]) {
  --usk-bg-rgb: 0 8 10;
  --usk-surface-rgb: 0 16 20;
  --usk-surface-strong-rgb: 0 26 32;
  --usk-surface-soft-rgb: 0 0 0;
  --usk-text-rgb: 255 255 255;
  --usk-text-muted-rgb: 234 255 255;
  --usk-border-rgb: 255 255 255;
  --usk-primary-rgb: 0 229 255;
  --usk-primary-hover-rgb: 255 255 255;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 255 255 0;
  --usk-secondary-hover-rgb: 255 255 255;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 0 255 255;
  --usk-success-rgb: 0 255 144;
  --usk-warning-rgb: 255 208 0;
  --usk-danger-rgb: 255 59 59;
  --usk-link-rgb: 0 229 255;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 255 255;
}

:where([data-ui][data-theme="forest-moss"][data-mode="light"]) {
  --usk-bg-rgb: 242 247 239;
  --usk-surface-rgb: 255 255 255;
  --usk-surface-strong-rgb: 251 255 248;
  --usk-surface-soft-rgb: 226 234 219;
  --usk-text-rgb: 24 36 23;
  --usk-text-muted-rgb: 88 104 82;
  --usk-border-rgb: 197 211 186;
  --usk-primary-rgb: 63 125 58;
  --usk-primary-hover-rgb: 47 97 43;
  --usk-primary-text-rgb: 255 255 255;
  --usk-secondary-rgb: 106 95 56;
  --usk-secondary-hover-rgb: 81 73 43;
  --usk-secondary-text-rgb: 255 255 255;
  --usk-accent-rgb: 156 186 82;
  --usk-success-rgb: 47 125 84;
  --usk-warning-rgb: 154 106 0;
  --usk-danger-rgb: 173 69 69;
  --usk-link-rgb: 47 97 43;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 255 255 255;
  --usk-warning-text-rgb: 255 255 255;
  --usk-danger-text-rgb: 255 255 255;
  --usk-focus-rgb: 156 186 82;
}

:where([data-ui][data-theme="forest-moss"][data-mode="dark"]) {
  --usk-bg-rgb: 7 16 6;
  --usk-surface-rgb: 16 28 15;
  --usk-surface-strong-rgb: 26 42 24;
  --usk-surface-soft-rgb: 11 22 10;
  --usk-text-rgb: 237 247 232;
  --usk-text-muted-rgb: 180 197 173;
  --usk-border-rgb: 61 83 56;
  --usk-primary-rgb: 130 210 122;
  --usk-primary-hover-rgb: 162 237 153;
  --usk-primary-text-rgb: 7 16 6;
  --usk-secondary-rgb: 210 189 114;
  --usk-secondary-hover-rgb: 239 217 139;
  --usk-secondary-text-rgb: 20 16 6;
  --usk-accent-rgb: 185 239 107;
  --usk-success-rgb: 117 223 167;
  --usk-warning-rgb: 255 210 99;
  --usk-danger-rgb: 255 133 133;
  --usk-link-rgb: 162 237 153;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 185 239 107;
}

:where([data-ui][data-theme="forest-moss"][data-mode="contrast"]) {
  --usk-bg-rgb: 0 0 0;
  --usk-surface-rgb: 7 16 7;
  --usk-surface-strong-rgb: 11 25 11;
  --usk-surface-soft-rgb: 0 0 0;
  --usk-text-rgb: 255 255 255;
  --usk-text-muted-rgb: 240 255 240;
  --usk-border-rgb: 255 255 255;
  --usk-primary-rgb: 108 255 95;
  --usk-primary-hover-rgb: 255 255 255;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 255 223 0;
  --usk-secondary-hover-rgb: 255 255 255;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 182 255 0;
  --usk-success-rgb: 0 255 117;
  --usk-warning-rgb: 255 208 0;
  --usk-danger-rgb: 255 64 64;
  --usk-link-rgb: 108 255 95;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 255 255;
}

:where([data-ui][data-theme="sunset-ember"][data-mode="light"]) {
  --usk-bg-rgb: 255 244 236;
  --usk-surface-rgb: 255 255 255;
  --usk-surface-strong-rgb: 255 250 246;
  --usk-surface-soft-rgb: 244 222 210;
  --usk-text-rgb: 42 23 17;
  --usk-text-muted-rgb: 118 88 77;
  --usk-border-rgb: 227 189 170;
  --usk-primary-rgb: 196 81 43;
  --usk-primary-hover-rgb: 159 63 32;
  --usk-primary-text-rgb: 255 255 255;
  --usk-secondary-rgb: 124 63 92;
  --usk-secondary-hover-rgb: 97 48 71;
  --usk-secondary-text-rgb: 255 255 255;
  --usk-accent-rgb: 230 154 58;
  --usk-success-rgb: 49 122 87;
  --usk-warning-rgb: 184 111 0;
  --usk-danger-rgb: 189 61 61;
  --usk-link-rgb: 159 63 32;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 255 255 255;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 255 255 255;
  --usk-focus-rgb: 230 154 58;
}

:where([data-ui][data-theme="sunset-ember"][data-mode="dark"]) {
  --usk-bg-rgb: 23 9 5;
  --usk-surface-rgb: 38 17 11;
  --usk-surface-strong-rgb: 53 25 18;
  --usk-surface-soft-rgb: 30 12 7;
  --usk-text-rgb: 255 240 232;
  --usk-text-muted-rgb: 208 177 165;
  --usk-border-rgb: 106 59 45;
  --usk-primary-rgb: 255 138 91;
  --usk-primary-hover-rgb: 255 173 138;
  --usk-primary-text-rgb: 26 8 3;
  --usk-secondary-rgb: 227 138 181;
  --usk-secondary-hover-rgb: 255 175 208;
  --usk-secondary-text-rgb: 26 7 18;
  --usk-accent-rgb: 255 193 102;
  --usk-success-rgb: 112 215 163;
  --usk-warning-rgb: 255 209 102;
  --usk-danger-rgb: 255 119 119;
  --usk-link-rgb: 255 173 138;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 193 102;
}

:where([data-ui][data-theme="sunset-ember"][data-mode="contrast"]) {
  --usk-bg-rgb: 0 0 0;
  --usk-surface-rgb: 18 4 0;
  --usk-surface-strong-rgb: 29 7 0;
  --usk-surface-soft-rgb: 0 0 0;
  --usk-text-rgb: 255 255 255;
  --usk-text-muted-rgb: 255 245 239;
  --usk-border-rgb: 255 255 255;
  --usk-primary-rgb: 255 106 0;
  --usk-primary-hover-rgb: 255 255 255;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 255 79 184;
  --usk-secondary-hover-rgb: 255 255 255;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 255 208 0;
  --usk-success-rgb: 0 255 144;
  --usk-warning-rgb: 255 191 0;
  --usk-danger-rgb: 255 48 48;
  --usk-link-rgb: 255 157 0;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 255 255;
}

:where([data-ui][data-theme="royal-plum"][data-mode="light"]) {
  --usk-bg-rgb: 248 241 251;
  --usk-surface-rgb: 255 255 255;
  --usk-surface-strong-rgb: 253 248 255;
  --usk-surface-soft-rgb: 234 220 240;
  --usk-text-rgb: 36 21 45;
  --usk-text-muted-rgb: 105 86 113;
  --usk-border-rgb: 213 187 221;
  --usk-primary-rgb: 123 63 160;
  --usk-primary-hover-rgb: 99 49 127;
  --usk-primary-text-rgb: 255 255 255;
  --usk-secondary-rgb: 63 76 154;
  --usk-secondary-hover-rgb: 48 58 119;
  --usk-secondary-text-rgb: 255 255 255;
  --usk-accent-rgb: 192 90 198;
  --usk-success-rgb: 49 124 92;
  --usk-warning-rgb: 166 106 0;
  --usk-danger-rgb: 183 65 95;
  --usk-link-rgb: 99 49 127;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 255 255 255;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 255 255 255;
  --usk-focus-rgb: 192 90 198;
}

:where([data-ui][data-theme="royal-plum"][data-mode="dark"]) {
  --usk-bg-rgb: 16 6 20;
  --usk-surface-rgb: 29 16 36;
  --usk-surface-strong-rgb: 42 23 52;
  --usk-surface-soft-rgb: 22 11 27;
  --usk-text-rgb: 250 236 255;
  --usk-text-muted-rgb: 200 176 209;
  --usk-border-rgb: 85 57 100;
  --usk-primary-rgb: 216 145 242;
  --usk-primary-hover-rgb: 235 184 255;
  --usk-primary-text-rgb: 19 6 23;
  --usk-secondary-rgb: 157 168 255;
  --usk-secondary-hover-rgb: 195 202 255;
  --usk-secondary-text-rgb: 8 11 31;
  --usk-accent-rgb: 255 156 246;
  --usk-success-rgb: 118 220 169;
  --usk-warning-rgb: 255 209 102;
  --usk-danger-rgb: 255 122 156;
  --usk-link-rgb: 235 184 255;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 156 246;
}

:where([data-ui][data-theme="royal-plum"][data-mode="contrast"]) {
  --usk-bg-rgb: 0 0 0;
  --usk-surface-rgb: 16 0 20;
  --usk-surface-strong-rgb: 26 0 34;
  --usk-surface-soft-rgb: 0 0 0;
  --usk-text-rgb: 255 255 255;
  --usk-text-muted-rgb: 255 240 255;
  --usk-border-rgb: 255 255 255;
  --usk-primary-rgb: 228 92 255;
  --usk-primary-hover-rgb: 255 255 255;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 0 217 255;
  --usk-secondary-hover-rgb: 255 255 255;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 255 0 245;
  --usk-success-rgb: 0 255 144;
  --usk-warning-rgb: 255 225 0;
  --usk-danger-rgb: 255 63 110;
  --usk-link-rgb: 228 92 255;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 255 255;
}

:where([data-ui][data-theme="graphite-cyan"][data-mode="light"]) {
  --usk-bg-rgb: 242 245 246;
  --usk-surface-rgb: 255 255 255;
  --usk-surface-strong-rgb: 249 251 252;
  --usk-surface-soft-rgb: 225 231 234;
  --usk-text-rgb: 23 29 33;
  --usk-text-muted-rgb: 93 104 112;
  --usk-border-rgb: 197 206 212;
  --usk-primary-rgb: 0 124 137;
  --usk-primary-hover-rgb: 0 99 110;
  --usk-primary-text-rgb: 255 255 255;
  --usk-secondary-rgb: 63 72 80;
  --usk-secondary-hover-rgb: 47 54 60;
  --usk-secondary-text-rgb: 255 255 255;
  --usk-accent-rgb: 34 184 199;
  --usk-success-rgb: 40 122 91;
  --usk-warning-rgb: 167 103 0;
  --usk-danger-rgb: 182 64 64;
  --usk-link-rgb: 0 99 110;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 255 255 255;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 255 255 255;
  --usk-focus-rgb: 34 184 199;
}

:where([data-ui][data-theme="graphite-cyan"][data-mode="dark"]) {
  --usk-bg-rgb: 8 11 13;
  --usk-surface-rgb: 18 24 28;
  --usk-surface-strong-rgb: 28 37 43;
  --usk-surface-soft-rgb: 13 17 20;
  --usk-text-rgb: 237 246 248;
  --usk-text-muted-rgb: 174 187 193;
  --usk-border-rgb: 59 72 79;
  --usk-primary-rgb: 62 217 232;
  --usk-primary-hover-rgb: 123 243 255;
  --usk-primary-text-rgb: 6 16 18;
  --usk-secondary-rgb: 170 181 188;
  --usk-secondary-hover-rgb: 210 219 224;
  --usk-secondary-text-rgb: 8 11 13;
  --usk-accent-rgb: 123 243 255;
  --usk-success-rgb: 110 218 165;
  --usk-warning-rgb: 255 200 97;
  --usk-danger-rgb: 255 125 125;
  --usk-link-rgb: 123 243 255;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 62 217 232;
}

:where([data-ui][data-theme="graphite-cyan"][data-mode="contrast"]) {
  --usk-bg-rgb: 0 0 0;
  --usk-surface-rgb: 7 7 7;
  --usk-surface-strong-rgb: 17 17 17;
  --usk-surface-soft-rgb: 0 0 0;
  --usk-text-rgb: 255 255 255;
  --usk-text-muted-rgb: 245 245 245;
  --usk-border-rgb: 255 255 255;
  --usk-primary-rgb: 0 240 255;
  --usk-primary-hover-rgb: 255 255 255;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 242 242 242;
  --usk-secondary-hover-rgb: 255 255 255;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 0 240 255;
  --usk-success-rgb: 0 255 117;
  --usk-warning-rgb: 255 208 0;
  --usk-danger-rgb: 255 64 64;
  --usk-link-rgb: 0 240 255;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 255 255;
}

:where([data-ui][data-theme="desert-sage"][data-mode="light"]) {
  --usk-bg-rgb: 248 242 231;
  --usk-surface-rgb: 255 255 255;
  --usk-surface-strong-rgb: 255 250 241;
  --usk-surface-soft-rgb: 234 223 205;
  --usk-text-rgb: 43 36 25;
  --usk-text-muted-rgb: 113 103 84;
  --usk-border-rgb: 215 198 167;
  --usk-primary-rgb: 140 106 61;
  --usk-primary-hover-rgb: 112 83 47;
  --usk-primary-text-rgb: 255 255 255;
  --usk-secondary-rgb: 95 118 85;
  --usk-secondary-hover-rgb: 72 92 64;
  --usk-secondary-text-rgb: 255 255 255;
  --usk-accent-rgb: 201 151 74;
  --usk-success-rgb: 81 125 72;
  --usk-warning-rgb: 166 107 0;
  --usk-danger-rgb: 174 74 63;
  --usk-link-rgb: 112 83 47;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 255 255 255;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 255 255 255;
  --usk-focus-rgb: 201 151 74;
}

:where([data-ui][data-theme="desert-sage"][data-mode="dark"]) {
  --usk-bg-rgb: 18 15 9;
  --usk-surface-rgb: 33 27 18;
  --usk-surface-strong-rgb: 47 40 27;
  --usk-surface-soft-rgb: 25 20 13;
  --usk-text-rgb: 248 239 223;
  --usk-text-muted-rgb: 199 186 163;
  --usk-border-rgb: 91 78 56;
  --usk-primary-rgb: 217 184 120;
  --usk-primary-hover-rgb: 240 211 154;
  --usk-primary-text-rgb: 21 16 6;
  --usk-secondary-rgb: 168 206 153;
  --usk-secondary-hover-rgb: 200 233 187;
  --usk-secondary-text-rgb: 9 20 7;
  --usk-accent-rgb: 241 196 110;
  --usk-success-rgb: 141 219 125;
  --usk-warning-rgb: 255 209 102;
  --usk-danger-rgb: 255 136 122;
  --usk-link-rgb: 240 211 154;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 241 196 110;
}

:where([data-ui][data-theme="desert-sage"][data-mode="contrast"]) {
  --usk-bg-rgb: 0 0 0;
  --usk-surface-rgb: 15 11 3;
  --usk-surface-strong-rgb: 26 18 5;
  --usk-surface-soft-rgb: 0 0 0;
  --usk-text-rgb: 255 255 255;
  --usk-text-muted-rgb: 255 248 232;
  --usk-border-rgb: 255 255 255;
  --usk-primary-rgb: 255 209 102;
  --usk-primary-hover-rgb: 255 255 255;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 157 255 107;
  --usk-secondary-hover-rgb: 255 255 255;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 255 176 0;
  --usk-success-rgb: 0 255 117;
  --usk-warning-rgb: 255 225 0;
  --usk-danger-rgb: 255 77 77;
  --usk-link-rgb: 255 209 102;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 255 255;
}

:where([data-ui][data-theme="rose-quartz"][data-mode="light"]) {
  --usk-bg-rgb: 255 242 245;
  --usk-surface-rgb: 255 255 255;
  --usk-surface-strong-rgb: 255 248 250;
  --usk-surface-soft-rgb: 242 220 227;
  --usk-text-rgb: 43 21 29;
  --usk-text-muted-rgb: 118 90 99;
  --usk-border-rgb: 223 184 198;
  --usk-primary-rgb: 184 71 109;
  --usk-primary-hover-rgb: 150 55 87;
  --usk-primary-text-rgb: 255 255 255;
  --usk-secondary-rgb: 122 85 126;
  --usk-secondary-hover-rgb: 96 65 99;
  --usk-secondary-text-rgb: 255 255 255;
  --usk-accent-rgb: 223 125 157;
  --usk-success-rgb: 49 122 92;
  --usk-warning-rgb: 166 106 0;
  --usk-danger-rgb: 189 63 85;
  --usk-link-rgb: 150 55 87;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 255 255 255;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 255 255 255;
  --usk-focus-rgb: 223 125 157;
}

:where([data-ui][data-theme="rose-quartz"][data-mode="dark"]) {
  --usk-bg-rgb: 22 7 12;
  --usk-surface-rgb: 37 16 24;
  --usk-surface-strong-rgb: 53 24 36;
  --usk-surface-soft-rgb: 28 11 17;
  --usk-text-rgb: 255 240 244;
  --usk-text-muted-rgb: 210 174 185;
  --usk-border-rgb: 101 55 71;
  --usk-primary-rgb: 255 143 179;
  --usk-primary-hover-rgb: 255 182 205;
  --usk-primary-text-rgb: 24 6 13;
  --usk-secondary-rgb: 217 160 223;
  --usk-secondary-hover-rgb: 239 194 244;
  --usk-secondary-text-rgb: 22 6 24;
  --usk-accent-rgb: 255 173 197;
  --usk-success-rgb: 119 219 169;
  --usk-warning-rgb: 255 209 102;
  --usk-danger-rgb: 255 120 144;
  --usk-link-rgb: 255 182 205;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 173 197;
}

:where([data-ui][data-theme="rose-quartz"][data-mode="contrast"]) {
  --usk-bg-rgb: 0 0 0;
  --usk-surface-rgb: 18 0 6;
  --usk-surface-strong-rgb: 32 0 13;
  --usk-surface-soft-rgb: 0 0 0;
  --usk-text-rgb: 255 255 255;
  --usk-text-muted-rgb: 255 240 245;
  --usk-border-rgb: 255 255 255;
  --usk-primary-rgb: 255 79 147;
  --usk-primary-hover-rgb: 255 255 255;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 240 0 255;
  --usk-secondary-hover-rgb: 255 255 255;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 255 138 179;
  --usk-success-rgb: 0 255 144;
  --usk-warning-rgb: 255 225 0;
  --usk-danger-rgb: 255 48 48;
  --usk-link-rgb: 255 138 179;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 255 255;
}

:where([data-ui][data-theme="cyber-lime"][data-mode="light"]) {
  --usk-bg-rgb: 244 250 237;
  --usk-surface-rgb: 255 255 255;
  --usk-surface-strong-rgb: 251 255 246;
  --usk-surface-soft-rgb: 226 239 211;
  --usk-text-rgb: 23 34 20;
  --usk-text-muted-rgb: 89 105 82;
  --usk-border-rgb: 198 216 179;
  --usk-primary-rgb: 95 159 31;
  --usk-primary-hover-rgb: 73 125 23;
  --usk-primary-text-rgb: 16 16 16;
  --usk-secondary-rgb: 20 127 134;
  --usk-secondary-hover-rgb: 14 98 104;
  --usk-secondary-text-rgb: 255 255 255;
  --usk-accent-rgb: 164 215 46;
  --usk-success-rgb: 47 125 84;
  --usk-warning-rgb: 156 104 0;
  --usk-danger-rgb: 179 65 65;
  --usk-link-rgb: 73 125 23;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 255 255 255;
  --usk-warning-text-rgb: 255 255 255;
  --usk-danger-text-rgb: 255 255 255;
  --usk-focus-rgb: 164 215 46;
}

:where([data-ui][data-theme="cyber-lime"][data-mode="dark"]) {
  --usk-bg-rgb: 5 11 5;
  --usk-surface-rgb: 13 24 12;
  --usk-surface-strong-rgb: 22 37 21;
  --usk-surface-soft-rgb: 8 17 8;
  --usk-text-rgb: 239 255 233;
  --usk-text-muted-rgb: 180 199 173;
  --usk-border-rgb: 57 82 54;
  --usk-primary-rgb: 168 255 61;
  --usk-primary-hover-rgb: 202 255 127;
  --usk-primary-text-rgb: 6 16 5;
  --usk-secondary-rgb: 61 235 242;
  --usk-secondary-hover-rgb: 134 248 255;
  --usk-secondary-text-rgb: 3 16 18;
  --usk-accent-rgb: 198 255 77;
  --usk-success-rgb: 111 240 168;
  --usk-warning-rgb: 255 218 98;
  --usk-danger-rgb: 255 119 119;
  --usk-link-rgb: 202 255 127;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 168 255 61;
}

:where([data-ui][data-theme="cyber-lime"][data-mode="contrast"]) {
  --usk-bg-rgb: 0 0 0;
  --usk-surface-rgb: 5 11 0;
  --usk-surface-strong-rgb: 11 22 0;
  --usk-surface-soft-rgb: 0 0 0;
  --usk-text-rgb: 255 255 255;
  --usk-text-muted-rgb: 244 255 232;
  --usk-border-rgb: 255 255 255;
  --usk-primary-rgb: 170 255 0;
  --usk-primary-hover-rgb: 255 255 255;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 0 240 255;
  --usk-secondary-hover-rgb: 255 255 255;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 204 255 0;
  --usk-success-rgb: 0 255 117;
  --usk-warning-rgb: 255 225 0;
  --usk-danger-rgb: 255 48 48;
  --usk-link-rgb: 170 255 0;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 255 255;
}

:where([data-ui][data-theme="arctic-indigo"][data-mode="light"]) {
  --usk-bg-rgb: 241 245 255;
  --usk-surface-rgb: 255 255 255;
  --usk-surface-strong-rgb: 248 251 255;
  --usk-surface-soft-rgb: 223 231 246;
  --usk-text-rgb: 20 27 46;
  --usk-text-muted-rgb: 88 100 122;
  --usk-border-rgb: 190 203 227;
  --usk-primary-rgb: 64 94 184;
  --usk-primary-hover-rgb: 49 72 148;
  --usk-primary-text-rgb: 255 255 255;
  --usk-secondary-rgb: 46 125 157;
  --usk-secondary-hover-rgb: 35 97 122;
  --usk-secondary-text-rgb: 255 255 255;
  --usk-accent-rgb: 123 147 232;
  --usk-success-rgb: 47 125 84;
  --usk-warning-rgb: 166 106 0;
  --usk-danger-rgb: 182 64 82;
  --usk-link-rgb: 49 72 148;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 255 255 255;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 255 255 255;
  --usk-focus-rgb: 123 147 232;
}

:where([data-ui][data-theme="arctic-indigo"][data-mode="dark"]) {
  --usk-bg-rgb: 6 10 22;
  --usk-surface-rgb: 16 24 43;
  --usk-surface-strong-rgb: 24 35 66;
  --usk-surface-soft-rgb: 10 16 32;
  --usk-text-rgb: 237 243 255;
  --usk-text-muted-rgb: 178 191 217;
  --usk-border-rgb: 58 75 120;
  --usk-primary-rgb: 145 168 255;
  --usk-primary-hover-rgb: 183 197 255;
  --usk-primary-text-rgb: 5 8 22;
  --usk-secondary-rgb: 118 216 243;
  --usk-secondary-hover-rgb: 165 234 255;
  --usk-secondary-text-rgb: 4 17 22;
  --usk-accent-rgb: 194 206 255;
  --usk-success-rgb: 114 219 166;
  --usk-warning-rgb: 255 209 102;
  --usk-danger-rgb: 255 125 145;
  --usk-link-rgb: 183 197 255;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 145 168 255;
}

:where([data-ui][data-theme="arctic-indigo"][data-mode="contrast"]) {
  --usk-bg-rgb: 0 0 0;
  --usk-surface-rgb: 3 8 22;
  --usk-surface-strong-rgb: 8 18 42;
  --usk-surface-soft-rgb: 0 0 0;
  --usk-text-rgb: 255 255 255;
  --usk-text-muted-rgb: 238 244 255;
  --usk-border-rgb: 255 255 255;
  --usk-primary-rgb: 111 140 255;
  --usk-primary-hover-rgb: 255 255 255;
  --usk-primary-text-rgb: 0 0 0;
  --usk-secondary-rgb: 0 217 255;
  --usk-secondary-hover-rgb: 255 255 255;
  --usk-secondary-text-rgb: 0 0 0;
  --usk-accent-rgb: 184 196 255;
  --usk-success-rgb: 0 255 144;
  --usk-warning-rgb: 255 225 0;
  --usk-danger-rgb: 255 63 95;
  --usk-link-rgb: 159 178 255;
  --usk-accent-text-rgb: 0 0 0;
  --usk-success-text-rgb: 0 0 0;
  --usk-warning-text-rgb: 0 0 0;
  --usk-danger-text-rgb: 0 0 0;
  --usk-focus-rgb: 255 255 255;
}
}


/* styles/native-elements.css */
/* =========================================================
   UI Style Kit CSS - Shared Native Element Layer

   Native fallback selectors are shared so UI presets can focus
   on visual identity while inheriting the same semantic coverage.
   Presets map --usk-native-* tokens to their public prefix tokens.
========================================================= */

@layer ui-style-kit.native_elements {
[data-ui][data-theme][data-mode] {
  --usk-native-surface: rgb(var(--usk-surface-rgb));
  --usk-native-surface-strong: rgb(var(--usk-surface-strong-rgb));
  --usk-native-surface-soft: rgb(var(--usk-surface-soft-rgb));
  --usk-native-card-bg: var(--usk-native-surface);
  --usk-native-control-bg: var(--usk-native-surface-soft);
  --usk-native-text: rgb(var(--usk-text-rgb));
  --usk-native-text-muted: rgb(var(--usk-text-muted-rgb));
  --usk-native-border: rgb(var(--usk-border-rgb));
  --usk-native-primary: rgb(var(--usk-primary-rgb));
  --usk-native-primary-hover: rgb(var(--usk-primary-hover-rgb));
  --usk-native-on-primary: rgb(var(--usk-primary-text-rgb));
  --usk-native-focus: rgb(var(--usk-focus-rgb));
  --usk-native-success: rgb(var(--usk-success-rgb));
  --usk-native-warning: rgb(var(--usk-warning-rgb));
  --usk-native-danger: rgb(var(--usk-danger-rgb));
  --usk-native-link: rgb(var(--usk-link-rgb));
  --usk-native-font-body: inherit;
  --usk-native-font-heading: inherit;
  --usk-native-font-control: inherit;
  --usk-native-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --usk-native-radius-sm: .5rem;
  --usk-native-radius: .75rem;
  --usk-native-radius-lg: 1rem;
  --usk-native-border-width: 1px;
  --usk-native-field-gap: .5rem;
  --usk-native-panel-padding: 1rem;
  --usk-native-control-padding-block: .72rem;
  --usk-native-control-padding-inline: .95rem;
  --usk-native-shadow: none;
  --usk-native-shadow-md: var(--usk-native-shadow);
  --usk-native-focus-ring: 0 0 0 3px rgb(var(--usk-focus-rgb) / .28);
}

[data-ui][data-theme][data-mode] :where(h1, h2, h3, h4, h5, h6) {
  color: var(--usk-native-text);
  font-family: var(--usk-native-font-heading);
  line-height: 1.15;
  margin: 0 0 .65em;
  text-wrap: balance;
}

[data-ui][data-theme][data-mode] :where(h1) { font-size: clamp(2rem, 5vw, 3.5rem); }
[data-ui][data-theme][data-mode] :where(h2) { font-size: clamp(1.55rem, 3vw, 2.35rem); }
[data-ui][data-theme][data-mode] :where(h3) { font-size: clamp(1.25rem, 2vw, 1.65rem); }

[data-ui][data-theme][data-mode] :where(p) {
  margin: 0 0 1rem;
  color: var(--usk-native-text-muted);
  line-height: 1.7;
}

[data-ui][data-theme][data-mode] :where(a) {
  color: var(--usk-native-link);
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}

[data-ui][data-theme][data-mode] :where(a:hover) { color: var(--usk-native-primary-hover); }

[data-ui][data-theme][data-mode] :where(ul, ol, menu) {
  margin: 0 0 1rem;
  padding-left: 1.35rem;
  color: var(--usk-native-text-muted);
}

[data-ui][data-theme][data-mode] :where(li) { margin-block: .25rem; }

[data-ui][data-theme][data-mode] :where(blockquote) {
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  color: var(--usk-native-text);
  background: var(--usk-native-surface-soft);
  border-left: .35rem solid var(--usk-native-primary);
  border-radius: var(--usk-native-radius);
}

[data-ui][data-theme][data-mode] :where(code, kbd, samp) {
  padding: .15em .35em;
  color: var(--usk-native-text);
  background: var(--usk-native-surface-soft);
  border: var(--usk-native-border-width) solid color-mix(in srgb, var(--usk-native-border) 62%, transparent);
  border-radius: var(--usk-native-radius-sm);
  font-family: var(--usk-native-font-mono);
  font-size: .92em;
}

[data-ui][data-theme][data-mode] :where(pre) {
  overflow: auto;
  margin: 1rem 0;
  padding: 1rem;
  color: var(--usk-native-text);
  background: var(--usk-native-surface-soft);
  border: var(--usk-native-border-width) solid var(--usk-native-border);
  border-radius: var(--usk-native-radius);
}

[data-ui][data-theme][data-mode] :where(pre code) {
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
}

[data-ui][data-theme][data-mode] :where(hr) {
  height: 1px;
  margin: 2rem 0;
  background: var(--usk-native-border);
  border: 0;
}

[data-ui][data-theme][data-mode] :where(mark) {
  padding-inline: .15em;
  color: var(--usk-native-text);
  background: color-mix(in srgb, var(--usk-native-warning) 32%, transparent);
  border-radius: .2em;
}

[data-ui][data-theme][data-mode] :where(small, sub, sup, rt, rp) { color: var(--usk-native-text-muted); }
[data-ui][data-theme][data-mode] :where(rt, rp) { font-size: .72em; }

[data-ui][data-theme][data-mode] :where(abbr[title]) {
  text-decoration: underline dotted var(--usk-native-primary);
  text-underline-offset: .18em;
  cursor: help;
}

[data-ui][data-theme][data-mode] :where(img, picture, video, canvas, svg, iframe, audio, object, embed, math) {
  max-width: 100%;
}

[data-ui][data-theme][data-mode] :where(img, video, canvas, svg, iframe) { height: auto; }

[data-ui][data-theme][data-mode] :where(figure) { margin: 1.25rem 0; }

[data-ui][data-theme][data-mode] :where(figcaption) {
  margin-top: .5rem;
  color: var(--usk-native-text-muted);
  font-size: .9rem;
}

[data-ui][data-theme][data-mode] :where(fieldset) {
  display: grid;
  gap: .9rem;
  min-inline-size: 0;
  margin: 0 0 1rem;
  padding: var(--usk-native-panel-padding);
  background: color-mix(in srgb, var(--usk-native-card-bg) 88%, transparent);
  border: var(--usk-native-border-width) solid var(--usk-native-border);
  border-radius: var(--usk-native-radius);
}

[data-ui][data-theme][data-mode] :where(legend) {
  padding-inline: .35rem;
  color: var(--usk-native-text);
  font-weight: 900;
}

[data-ui][data-theme][data-mode] :where(label) {
  color: var(--usk-native-text);
  font-weight: 750;
}

[data-ui][data-theme][data-mode] :where(label:has(input), label:has(select), label:has(textarea)) {
  display: grid;
  gap: var(--usk-native-field-gap);
  align-content: start;
}

[data-ui][data-theme][data-mode] :where(label:has(input[type="checkbox"]), label:has(input[type="radio"])) {
  display: inline-flex;
  gap: var(--usk-native-field-gap);
  align-items: center;
}

[data-ui][data-theme][data-mode] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select) {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--usk-native-control-padding-block) var(--usk-native-control-padding-inline);
  color: var(--usk-native-text);
  background: var(--usk-native-control-bg);
  border: var(--usk-native-border-width) solid var(--usk-native-border);
  border-radius: var(--usk-native-radius);
  font: inherit;
}

[data-ui][data-theme][data-mode] :where(textarea) {
  min-height: 7rem;
  resize: vertical;
}

[data-ui][data-theme][data-mode] :where(input, textarea, select, button) { font: inherit; }

[data-ui][data-theme][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
  min-height: 2.75rem;
  padding: .7rem 1rem;
  color: var(--usk-native-on-primary);
  background: var(--usk-native-primary);
  border: var(--usk-native-border-width) solid var(--usk-native-primary);
  border-radius: var(--usk-native-radius);
  font-family: var(--usk-native-font-control);
  font-weight: 850;
  cursor: pointer;
}

[data-ui][data-theme][data-mode] :where(button:not([class]):hover, input[type="button"]:not([class]):hover, input[type="submit"]:not([class]):hover, input[type="reset"]:not([class]):hover) {
  background: var(--usk-native-primary-hover);
  border-color: var(--usk-native-primary-hover);
}

[data-ui][data-theme][data-mode] :where(input[type="checkbox"], input[type="radio"]) {
  inline-size: 1.1rem;
  block-size: 1.1rem;
  accent-color: var(--usk-native-primary);
}

[data-ui][data-theme][data-mode] :where(input[type="range"]) {
  width: 100%;
  accent-color: var(--usk-native-primary);
}

[data-ui][data-theme][data-mode] :where(input[type="color"]) {
  inline-size: 3rem;
  block-size: 2.4rem;
  padding: .2rem;
  background: var(--usk-native-control-bg);
  border: var(--usk-native-border-width) solid var(--usk-native-border);
  border-radius: var(--usk-native-radius-sm);
}

[data-ui][data-theme][data-mode] :where(input[type="file"]) { color: var(--usk-native-text-muted); }

[data-ui][data-theme][data-mode] :where(input[type="file"]::file-selector-button) {
  margin-inline-end: .75rem;
  padding: .55rem .8rem;
  color: var(--usk-native-on-primary);
  background: var(--usk-native-primary);
  border: var(--usk-native-border-width) solid var(--usk-native-primary);
  border-radius: var(--usk-native-radius-sm);
  font-weight: 800;
  cursor: pointer;
}

[data-ui][data-theme][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
  opacity: .55;
  cursor: not-allowed;
}

[data-ui][data-theme][data-mode] :where(input:invalid, textarea:invalid, select:invalid, [aria-invalid="true"]) {
  border-color: var(--usk-native-danger);
}

[data-ui][data-theme][data-mode] :where(table) {
  width: 100%;
  margin: 1rem 0;
  overflow: hidden;
  background: var(--usk-native-surface);
  border: var(--usk-native-border-width) solid var(--usk-native-border);
  border-radius: var(--usk-native-radius);
  border-collapse: collapse;
}

[data-ui][data-theme][data-mode] :where(caption) {
  caption-side: bottom;
  padding: .75rem;
  color: var(--usk-native-text-muted);
  font-size: .9rem;
}

[data-ui][data-theme][data-mode] :where(th, td) {
  padding: .8rem .9rem;
  text-align: left;
  border-bottom: var(--usk-native-border-width) solid var(--usk-native-border);
}

[data-ui][data-theme][data-mode] :where(th) {
  color: var(--usk-native-text);
  background: color-mix(in srgb, var(--usk-native-primary) 10%, transparent);
}

[data-ui][data-theme][data-mode] :where(td) { color: var(--usk-native-text-muted); }

[data-ui][data-theme][data-mode] :where(details) {
  margin: 1rem 0;
  padding: .9rem 1rem;
  color: var(--usk-native-text);
  background: var(--usk-native-surface);
  border: var(--usk-native-border-width) solid var(--usk-native-border);
  border-radius: var(--usk-native-radius);
}

[data-ui][data-theme][data-mode] :where(summary) {
  color: var(--usk-native-text);
  font-weight: 900;
  cursor: pointer;
}

[data-ui][data-theme][data-mode] :where(dialog) {
  max-width: min(92vw, 42rem);
  padding: 0;
  color: var(--usk-native-text);
  background: var(--usk-native-surface-strong);
  border: var(--usk-native-border-width) solid var(--usk-native-border);
  border-radius: var(--usk-native-radius-lg);
  box-shadow: var(--usk-native-shadow-md), 0 30px 80px rgb(0 0 0 / .42);
}

[data-ui][data-theme][data-mode] :where(dialog::backdrop) { background: rgb(0 0 0 / .62); }

[data-ui][data-theme][data-mode] :where(progress, meter) {
  width: 100%;
  min-height: .9rem;
  accent-color: var(--usk-native-primary);
}

[data-ui][data-theme][data-mode] :where(main, section, header, footer, nav, article, aside, address) {
  color: var(--usk-native-text);
}

[data-ui][data-theme][data-mode] :where(article, aside) {
  padding: var(--usk-native-panel-padding);
  color: var(--usk-native-text);
  background: var(--usk-native-card-bg);
  border: var(--usk-native-border-width) solid var(--usk-native-border);
  border-radius: var(--usk-native-radius-lg);
  box-shadow: var(--usk-native-shadow);
}

[data-ui][data-theme][data-mode] :where(dl) {
  margin: 0 0 1rem;
  color: var(--usk-native-text-muted);
}

[data-ui][data-theme][data-mode] :where(dt) {
  color: var(--usk-native-text);
  font-weight: 900;
}

[data-ui][data-theme][data-mode] :where(dd) { margin: .25rem 0 .75rem 1.25rem; }
[data-ui][data-theme][data-mode] :where(strong, b) { color: var(--usk-native-text); font-weight: 900; }
[data-ui][data-theme][data-mode] :where(em, i, cite, var, q) { color: var(--usk-native-text); }
[data-ui][data-theme][data-mode] :where(ins) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-success); }
[data-ui][data-theme][data-mode] :where(del, s) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-danger); }
[data-ui][data-theme][data-mode] :where(output) { color: var(--usk-native-text); font-weight: 800; }
[data-ui][data-theme][data-mode] :where(optgroup, option) { color: var(--usk-native-text); background: var(--usk-native-surface); }
[data-ui][data-theme][data-mode] :where(time, data, dfn, ruby) { color: var(--usk-native-text); }
[data-ui][data-theme][data-mode] :where(search) { display: block; color: var(--usk-native-text); }

[data-ui][data-theme][data-mode] :where(:focus-visible) {
  outline: 3px solid var(--usk-native-focus);
  outline-offset: 3px;
  box-shadow: var(--usk-native-focus-ring);
}

[data-ui][data-theme][data-mode] :where(:target) {
  scroll-margin-top: 6rem;
  outline: 3px solid var(--usk-native-focus);
  outline-offset: .35rem;
}

[data-ui][data-theme][data-mode] :where([aria-current="page"]) { font-weight: 900; }
[data-ui][data-theme][data-mode] :where([aria-busy="true"]) { cursor: progress; }
[data-ui][data-theme][data-mode] :where([hidden]) { display: none !important; }
[data-ui][data-theme][data-mode] ::selection { color: var(--usk-native-on-primary); background: var(--usk-native-primary); }
}


/* styles/minimal-saas.css */
/* =========================================================
   UI Style Kit CSS — Minimal SaaS Theme System
   Includes 10 color schemes, light/dark/contrast modes,
   component classes, native element coverage, and CSS-only
   accessibility presentation helpers.

   Usage:
   <body data-ui="minimal-saas" data-theme="midnight-gold" data-mode="light">
   <body data-ui="minimal-saas" data-theme="arctic-indigo" data-mode="dark">
   <body data-ui="minimal-saas" data-theme="cyber-lime" data-mode="contrast">
========================================================= */


@layer ui-style-kit.minimal_saas {
:root {
  --saas-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --saas-font-display: Inter, ui-sans-serif, system-ui, sans-serif;
  --saas-font-body: var(--saas-font-sans);
  --saas-font-heading: var(--saas-font-display);
  --saas-font-control: var(--saas-font-display);
  --saas-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --saas-radius-xs: .25rem;
  --saas-radius-sm: .5rem;
  --saas-radius-md: 0.75rem;
  --saas-radius-lg: 1.125rem;
  --saas-radius-xl: calc(1.125rem + .5rem);
  --saas-radius-pill: 999px;
  --saas-space-1: .25rem;
  --saas-space-2: .5rem;
  --saas-space-3: .75rem;
  --saas-space-4: 1rem;
  --saas-space-5: 1.25rem;
  --saas-space-6: 1.5rem;
  --saas-space-8: 2rem;
  --saas-transition-fast: 150ms ease;
  --saas-transition-base: 240ms ease;
}

[data-ui="minimal-saas"][data-mode="light"] {
  color-scheme: light;
  --saas-panel-alpha: .98;
  --saas-panel-soft-alpha: .78;
  --saas-border-alpha: .58;
  --saas-shadow-alpha: .12;
  --saas-focus-alpha: .34;
}

[data-ui="minimal-saas"][data-mode="dark"] {
  color-scheme: dark;
  --saas-panel-alpha: .92;
  --saas-panel-soft-alpha: .64;
  --saas-border-alpha: .52;
  --saas-shadow-alpha: .34;
  --saas-focus-alpha: .42;
}

[data-ui="minimal-saas"][data-mode="contrast"] {
  color-scheme: dark;
  --saas-panel-alpha: 1;
  --saas-panel-soft-alpha: .92;
  --saas-border-alpha: 1;
  --saas-shadow-alpha: .5;
  --saas-focus-alpha: .72;
}

[data-ui="minimal-saas"][data-theme][data-mode] {
  /* Shared scheme aliases preserve the existing prefixed token API. */
  --saas-bg-rgb: var(--usk-bg-rgb);
  --saas-surface-rgb: var(--usk-surface-rgb);
  --saas-surface-strong-rgb: var(--usk-surface-strong-rgb);
  --saas-surface-soft-rgb: var(--usk-surface-soft-rgb);
  --saas-text-rgb: var(--usk-text-rgb);
  --saas-text-muted-rgb: var(--usk-text-muted-rgb);
  --saas-border-rgb: var(--usk-border-rgb);
  --saas-primary-rgb: var(--usk-primary-rgb);
  --saas-primary-hover-rgb: var(--usk-primary-hover-rgb);
  --saas-primary-text-rgb: var(--usk-primary-text-rgb);
  --saas-secondary-rgb: var(--usk-secondary-rgb);
  --saas-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
  --saas-secondary-text-rgb: var(--usk-secondary-text-rgb);
  --saas-accent-rgb: var(--usk-accent-rgb);
  --saas-success-rgb: var(--usk-success-rgb);
  --saas-warning-rgb: var(--usk-warning-rgb);
  --saas-danger-rgb: var(--usk-danger-rgb);
  --saas-link-rgb: var(--usk-link-rgb);
  --saas-accent-text-rgb: var(--usk-accent-text-rgb);
  --saas-success-text-rgb: var(--usk-success-text-rgb);
  --saas-warning-text-rgb: var(--usk-warning-text-rgb);
  --saas-danger-text-rgb: var(--usk-danger-text-rgb);
  --saas-focus-rgb: var(--usk-focus-rgb);
  /* Native fallback selectors inherit visual identity through shared tokens. */
  --usk-native-surface: var(--saas-surface);
  --usk-native-surface-strong: var(--saas-surface-strong);
  --usk-native-surface-soft: var(--saas-surface-soft);
  --usk-native-card-bg: var(--saas-card-bg);
  --usk-native-control-bg: var(--saas-control-bg);
  --usk-native-text: var(--saas-text);
  --usk-native-text-muted: var(--saas-text-muted);
  --usk-native-border: var(--saas-border);
  --usk-native-primary: var(--saas-primary);
  --usk-native-primary-hover: var(--saas-primary-hover);
  --usk-native-on-primary: var(--saas-on-primary);
  --usk-native-focus: var(--saas-focus);
  --usk-native-success: var(--saas-success);
  --usk-native-warning: var(--saas-warning);
  --usk-native-danger: var(--saas-danger);
  --usk-native-link: var(--saas-link);
  --usk-native-font-body: var(--saas-font-body);
  --usk-native-font-heading: var(--saas-font-heading);
  --usk-native-font-control: var(--saas-font-control);
  --usk-native-font-mono: var(--saas-font-mono);
  --usk-native-radius-sm: var(--saas-radius-sm);
  --usk-native-radius: var(--saas-radius-md);
  --usk-native-radius-lg: var(--saas-radius-lg);
  --usk-native-shadow: var(--saas-shadow-sm, none);
  --usk-native-shadow-md: var(--saas-shadow-md, var(--usk-native-shadow));
  --usk-native-focus-ring: var(--saas-focus-ring, 0 0 0 3px rgb(var(--saas-focus-rgb) / .28));
  --usk-native-border-width: 1px;
  --usk-native-field-gap: .5rem;
  --usk-native-panel-padding: var(--saas-space-5);
  --saas-bg: rgb(var(--saas-bg-rgb));
  --saas-surface: rgb(var(--saas-surface-rgb) / var(--saas-panel-alpha));
  --saas-surface-strong: rgb(var(--saas-surface-strong-rgb) / var(--saas-panel-alpha));
  --saas-surface-soft: rgb(var(--saas-surface-soft-rgb) / var(--saas-panel-soft-alpha));
  --saas-text: rgb(var(--saas-text-rgb));
  --saas-text-muted: rgb(var(--saas-text-muted-rgb));
  --saas-fg: var(--saas-text);
  --saas-surface-fg: var(--saas-text);
  --saas-muted: var(--saas-text-muted);
  --saas-border: rgb(var(--saas-border-rgb) / var(--saas-border-alpha));
  --saas-control-fg: var(--saas-text);
  --saas-primary: rgb(var(--saas-primary-rgb));
  --saas-primary-hover: rgb(var(--saas-primary-hover-rgb));
  --saas-primary-text: rgb(var(--saas-primary-text-rgb));
  --saas-secondary: rgb(var(--saas-secondary-rgb));
  --saas-secondary-hover: rgb(var(--saas-secondary-hover-rgb));
  --saas-secondary-text: rgb(var(--saas-secondary-text-rgb));
  --saas-on-primary: var(--saas-primary-text);
  --saas-on-secondary: var(--saas-secondary-text);
  --saas-on-accent: rgb(var(--saas-accent-text-rgb));
  --saas-on-success: rgb(var(--saas-success-text-rgb));
  --saas-on-warning: rgb(var(--saas-warning-text-rgb));
  --saas-on-danger: rgb(var(--saas-danger-text-rgb));
  --saas-accent: rgb(var(--saas-accent-rgb));
  --saas-success: rgb(var(--saas-success-rgb));
  --saas-warning: rgb(var(--saas-warning-rgb));
  --saas-danger: rgb(var(--saas-danger-rgb));
  --saas-link: rgb(var(--saas-link-rgb));
  --saas-focus: rgb(var(--saas-focus-rgb));
  --saas-focus-ring: 0 0 0 3px rgb(var(--saas-focus-rgb) / var(--saas-focus-alpha));
  --saas-theme-bg-size: auto;
  --saas-theme-bg: radial-gradient(circle at 0% 0%, rgb(var(--saas-primary-rgb) / .16), transparent 32rem), radial-gradient(circle at 100% 0%, rgb(var(--saas-accent-rgb) / .12), transparent 30rem), radial-gradient(circle at 50% 100%, rgb(var(--saas-secondary-rgb) / .10), transparent 34rem), var(--saas-bg);
  --saas-card-bg: linear-gradient(135deg, rgb(var(--saas-primary-rgb) / .10), rgb(var(--saas-accent-rgb) / .055) 42%, rgb(var(--saas-surface-strong-rgb) / var(--saas-panel-alpha)) 100%), var(--saas-surface);
  --saas-control-bg: linear-gradient(180deg, rgb(var(--saas-surface-strong-rgb) / var(--saas-panel-alpha)), rgb(var(--saas-surface-soft-rgb) / var(--saas-panel-soft-alpha)));
  --saas-spinner-track: rgb(var(--saas-border-rgb) / max(.28, calc(var(--saas-border-alpha) * .7)));
  --saas-spinner-stroke: var(--saas-primary);
  --saas-spinner-accent: var(--saas-accent);
}































/* =========================================================
   Base Page + Layout
========================================================= */

[data-ui="minimal-saas"] {
  min-height: 100vh;
  background: linear-gradient(180deg, rgb(var(--saas-primary-rgb) / .04), transparent 22rem), var(--saas-bg);
  color: var(--saas-text);
  font-family: var(--saas-font-body);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[data-ui="minimal-saas"] *,
[data-ui="minimal-saas"] *::before,
[data-ui="minimal-saas"] *::after { box-sizing: border-box; }

[data-ui="minimal-saas"][data-theme][data-mode] { background: var(--saas-theme-bg); background-size: var(--saas-theme-bg-size); }

.saas-page { min-height: 100vh; padding: clamp(1rem, 4vw, 3rem); }
.saas-container { width: min(100% - 2rem, 1200px); margin-inline: auto; }
.saas-section { display: grid; gap: var(--saas-space-5); padding: clamp(1rem, 3vw, 2rem); }
.saas-stack { display: flex; flex-direction: column; gap: var(--saas-space-4); }
.saas-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--saas-space-3); }
.saas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--saas-space-5); }
.saas-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: var(--saas-space-6); align-items: start; }

/* =========================================================
   Typography
========================================================= */

.saas-title, .saas-heading, .saas-kicker, .saas-button, .saas-badge, .saas-nav-link { font-family: var(--saas-font-heading); }
.saas-title { margin: 0; color: var(--saas-text); font-size: clamp(2rem, 5vw, 3.7rem); line-height: 1.02; letter-spacing: -0.045em; }
.saas-heading { margin: 0; color: var(--saas-text); font-size: clamp(1.2rem, 2.5vw, 2rem); line-height: 1.15; letter-spacing: -0.03em; }
.saas-kicker { margin: 0; color: var(--saas-primary); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.saas-subtitle, .saas-copy { margin: 0; color: var(--saas-text-muted); line-height: 1.65; }
.saas-text-muted { color: var(--saas-text-muted); }
.saas-divider { width: 100%; height: 1px; border: 0; background: var(--saas-border); }

/* =========================================================
   Surfaces
========================================================= */

.saas-surface, .saas-card, .saas-panel, .saas-toolbar, .saas-table-wrap {
  position: relative;
  background: linear-gradient(180deg, rgb(255 255 255 / .05), rgb(255 255 255 / 0)), var(--saas-surface);
  color: var(--saas-text);
  border: 1px solid var(--saas-border);
  border-radius: var(--saas-radius-lg);
  box-shadow: 0 10px 30px rgb(15 23 42 / var(--saas-shadow-alpha));
  transition: transform var(--saas-transition-base), box-shadow var(--saas-transition-base), border-color var(--saas-transition-base), background var(--saas-transition-base);
}
.saas-card, .saas-panel { padding: var(--saas-space-6); }
.saas-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--saas-space-4); padding: var(--saas-space-4); }
.saas-surface-sm { border-radius: var(--saas-radius-md); box-shadow: 0 6px 18px rgb(0 0 0 / calc(var(--saas-shadow-alpha) * .72)); }
.saas-surface-lg { border-radius: var(--saas-radius-xl); box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--saas-shadow-alpha) + .08)); }
.saas-well, .saas-inset { background: var(--saas-surface-soft); color: var(--saas-text); border: 1px solid rgb(var(--saas-border-rgb) / calc(var(--saas-border-alpha) * .7)); border-radius: var(--saas-radius-md); padding: var(--saas-space-5); box-shadow: inset 0 1px 3px rgb(0 0 0 / .08); }
.saas-hover-lift:hover { transform: translateY(-2px); box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--saas-shadow-alpha) + .12)); }

/* =========================================================
   Buttons
========================================================= */

.saas-button, .saas-icon-button {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--saas-space-2);
  min-height: 2.75rem; padding: .75rem 1.1rem; background: var(--saas-surface); color: var(--saas-text);
  border: 1px solid var(--saas-border); border-radius: var(--saas-radius-md); box-shadow: 0 6px 18px rgb(0 0 0 / var(--saas-shadow-alpha));
  font: inherit; font-weight: 800; line-height: 1; text-decoration: none; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none;
  transition: color var(--saas-transition-fast), background var(--saas-transition-fast), border-color var(--saas-transition-fast), box-shadow var(--saas-transition-fast), transform var(--saas-transition-fast);
}
.saas-button:hover, .saas-icon-button:hover { transform: translateY(-1px); border-color: var(--saas-primary); }
.saas-button:active, .saas-icon-button:active, .saas-button[aria-pressed="true"], .saas-icon-button[aria-pressed="true"], .saas-button.is-active, .saas-icon-button.is-active { transform: translateY(1px); box-shadow: inset 0 3px 10px rgb(0 0 0 / .18); }
.saas-button-primary { background: var(--saas-primary); color: var(--saas-on-primary); border-color: var(--saas-primary); }
.saas-button-primary:hover { background: var(--saas-primary-hover); border-color: var(--saas-primary-hover); }
.saas-button-secondary { background: var(--saas-secondary); color: var(--saas-on-secondary); border-color: var(--saas-secondary); }
.saas-button-secondary:hover { background: var(--saas-secondary-hover); border-color: var(--saas-secondary-hover); }
.saas-button-danger { background: var(--saas-danger); color: var(--saas-on-danger); border-color: var(--saas-danger); }
.saas-button-ghost { background: transparent; color: var(--saas-text); box-shadow: none; }
.saas-icon-button { width: 2.75rem; padding: 0; border-radius: var(--saas-radius-pill); }
.saas-button:disabled, .saas-icon-button:disabled, .saas-disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* Theme-responsive component defaults */
.saas-card, .saas-panel { background: var(--saas-card-bg); }
.saas-toolbar, .saas-table-wrap { background: var(--saas-control-bg); }
.saas-button:not(.saas-button-primary):not(.saas-button-secondary):not(.saas-button-danger):not(.saas-button-ghost), .saas-icon-button { background: var(--saas-control-bg); }
.saas-button, .saas-icon-button, .saas-badge, .saas-nav-link { font-family: var(--saas-font-control); }


/* =========================================================
   Forms
========================================================= */

.saas-field { display: flex; flex-direction: column; gap: var(--saas-space-2); }
.saas-label { color: var(--saas-text); font-size: .925rem; font-weight: 800; }
.saas-input, .saas-textarea, .saas-select {
  width: 100%; min-height: 2.875rem; padding: .75rem 1rem; background: var(--saas-surface-soft); color: var(--saas-text);
  border: 1px solid var(--saas-border); border-radius: var(--saas-radius-md); font: inherit; outline: none;
  transition: background var(--saas-transition-fast), border-color var(--saas-transition-fast), box-shadow var(--saas-transition-fast);
}
.saas-textarea { min-height: 8rem; resize: vertical; }
.saas-input::placeholder, .saas-textarea::placeholder { color: var(--saas-text-muted); opacity: .82; }
.saas-input:hover, .saas-textarea:hover, .saas-select:hover { border-color: rgb(var(--saas-primary-rgb) / .58); }
.saas-input:focus, .saas-textarea:focus, .saas-select:focus { border-color: var(--saas-focus); box-shadow: var(--saas-focus-ring); }
.saas-help-text { color: var(--saas-text-muted); font-size: .875rem; line-height: 1.45; }

/* Checkbox / Radio */
.saas-check, .saas-radio { display: inline-flex; align-items: center; gap: var(--saas-space-2); color: var(--saas-text); cursor: pointer; }
.saas-check input, .saas-radio input { position: absolute; opacity: 0; pointer-events: none; }
.saas-check-control, .saas-radio-control { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; background: var(--saas-surface-soft); border: 1px solid var(--saas-border); transition: background var(--saas-transition-fast), box-shadow var(--saas-transition-fast); }
.saas-check-control { border-radius: var(--saas-radius-xs); }
.saas-radio-control { border-radius: 50%; }
.saas-check input:checked + .saas-check-control, .saas-radio input:checked + .saas-radio-control { background: var(--saas-primary); border-color: var(--saas-primary); box-shadow: var(--saas-focus-ring); }
.saas-check input:checked + .saas-check-control::after { content: "✓"; color: var(--saas-on-primary); font-size: .9rem; font-weight: 900; }
.saas-radio input:checked + .saas-radio-control::after { content: ""; width: .55rem; height: .55rem; background: var(--saas-on-primary); border-radius: 50%; }

/* Switch */
.saas-switch { display: inline-flex; align-items: center; gap: var(--saas-space-3); color: var(--saas-text); cursor: pointer; }
.saas-switch input { position: absolute; opacity: 0; pointer-events: none; }
.saas-switch-track { position: relative; width: 3.5rem; height: 1.9rem; background: var(--saas-surface-soft); border: 1px solid var(--saas-border); border-radius: var(--saas-radius-pill); transition: background var(--saas-transition-fast), box-shadow var(--saas-transition-fast); }
.saas-switch-thumb { position: absolute; top: .22rem; left: .22rem; width: 1.34rem; height: 1.34rem; background: var(--saas-surface-strong); border: 1px solid var(--saas-border); border-radius: 50%; box-shadow: 0 4px 12px rgb(0 0 0 / var(--saas-shadow-alpha)); transition: left var(--saas-transition-fast), background var(--saas-transition-fast); }
.saas-switch input:checked + .saas-switch-track { background: var(--saas-primary); border-color: var(--saas-primary); }
.saas-switch input:checked + .saas-switch-track .saas-switch-thumb { left: calc(100% - 1.34rem - .22rem); background: var(--saas-on-primary); }

/* =========================================================
   Badges / Nav / Progress / Alerts / Tables
========================================================= */

.saas-badge { display: inline-flex; align-items: center; gap: var(--saas-space-1); min-height: 1.75rem; padding: .35rem .7rem; background: var(--saas-surface-soft); color: var(--saas-text); border: 1px solid var(--saas-border); border-radius: var(--saas-radius-pill); font-size: .8125rem; font-weight: 850; line-height: 1; }
.saas-badge-primary { background: var(--saas-primary); color: var(--saas-on-primary); border-color: var(--saas-primary); }
.saas-badge-secondary { background: var(--saas-secondary); color: var(--saas-on-secondary); border-color: var(--saas-secondary); }
.saas-badge-success { background: var(--saas-success); color: var(--saas-on-success); border-color: var(--saas-success); }
.saas-badge-warning { background: var(--saas-warning); color: var(--saas-on-warning); border-color: var(--saas-warning); }
.saas-badge-danger { background: var(--saas-danger); color: var(--saas-on-danger); border-color: var(--saas-danger); }

.saas-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--saas-space-2); padding: var(--saas-space-2); background: var(--saas-surface); border: 1px solid var(--saas-border); border-radius: var(--saas-radius-xl); box-shadow: 0 10px 30px rgb(0 0 0 / var(--saas-shadow-alpha)); }
.saas-nav-link { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: .65rem 1rem; color: var(--saas-text-muted); border-radius: var(--saas-radius-pill); text-decoration: none; font-weight: 850; transition: color var(--saas-transition-fast), background var(--saas-transition-fast), box-shadow var(--saas-transition-fast); }
.saas-nav-link:hover { color: var(--saas-text); background: var(--saas-surface-soft); }
.saas-nav-link[aria-current="page"], .saas-nav-link.is-active { color: var(--saas-on-primary); background: var(--saas-primary); }

/* Tooltips use compact contrast surfaces that stay readable across theme modes. */
.saas-tooltip, [data-ui="minimal-saas"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
  display: inline-flex; align-items: center; gap: .45rem; max-inline-size: 16rem; padding: .55rem .75rem;
  background: var(--saas-text); color: var(--saas-bg); border: 1px solid var(--saas-border); border-radius: var(--saas-radius-md);
  box-shadow: 0 .75rem 1.6rem rgb(15 23 42 / .24); font-size: .82rem; font-weight: 850; line-height: 1.35;
}
.saas-tooltip-arrow { inline-size: .55rem; block-size: .55rem; flex: 0 0 auto; background: currentColor; border-radius: .12rem; opacity: .9; transform: rotate(45deg); }

.saas-progress { width: 100%; height: .9rem; overflow: hidden; background: var(--saas-surface-soft); border: 1px solid var(--saas-border); border-radius: var(--saas-radius-pill); }
.saas-progress-bar { height: 100%; width: var(--saas-progress-value, 50%); background: linear-gradient(90deg, var(--saas-primary), var(--saas-accent)); border-radius: inherit; }

.saas-alert { display: grid; gap: var(--saas-space-2); padding: var(--saas-space-4); background: var(--saas-surface); color: var(--saas-text); border: 1px solid var(--saas-border); border-radius: var(--saas-radius-lg); box-shadow: 0 10px 30px rgb(0 0 0 / var(--saas-shadow-alpha)); }
.saas-alert-success { border-left-color: var(--saas-success); }
.saas-alert-warning { border-left-color: var(--saas-warning); }
.saas-alert-danger { border-left-color: var(--saas-danger); }
.saas-alert-title { margin: 0; font-weight: 900; }
.saas-alert-body { margin: 0; color: var(--saas-text-muted); line-height: 1.55; }

.saas-table-wrap { overflow: auto; }
.saas-table { width: 100%; border-collapse: collapse; }
.saas-table th, .saas-table td { padding: .95rem 1rem; text-align: left; border-bottom: 1px solid var(--saas-border); }
.saas-table th { color: var(--saas-text); font-size: .82rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; background: rgb(var(--saas-primary-rgb) / .08); }
.saas-table td { color: var(--saas-text-muted); }
.saas-table tr:hover td { background: rgb(var(--saas-primary-rgb) / .045); }

/* =========================================================
   Utilities
========================================================= */

.saas-text-primary { color: var(--saas-primary); } .saas-text-secondary { color: var(--saas-secondary); } .saas-text-accent { color: var(--saas-accent); } .saas-text-success { color: var(--saas-success); } .saas-text-warning { color: var(--saas-warning); } .saas-text-danger { color: var(--saas-danger); }
.saas-bg-primary { background: var(--saas-primary); color: var(--saas-on-primary); } .saas-bg-secondary { background: var(--saas-secondary); color: var(--saas-on-secondary); }
.saas-border { border: 1px solid var(--saas-border); } .saas-rounded { border-radius: var(--saas-radius-md); } .saas-rounded-lg { border-radius: var(--saas-radius-lg); } .saas-rounded-xl { border-radius: var(--saas-radius-xl); } .saas-pill { border-radius: var(--saas-radius-pill); }
.saas-sr-only, .saas-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.saas-skip-link { position: absolute; left: 1rem; top: 1rem; z-index: 9999; transform: translateY(-150%); padding: .75rem 1rem; background: var(--saas-primary); color: var(--saas-on-primary); border-radius: var(--saas-radius-md); font-weight: 900; }
.saas-skip-link:focus { transform: translateY(0); }

/* Minimal SaaS-specific product helpers */
.saas-metric { display: grid; gap: .25rem; padding: var(--saas-space-5); background: var(--saas-surface); border: 1px solid var(--saas-border); border-radius: var(--saas-radius-lg); }
.saas-metric-value { color: var(--saas-text); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 850; line-height: 1; letter-spacing: -.04em; }
.saas-metric-label { color: var(--saas-text-muted); font-size: .9rem; font-weight: 700; }
.saas-empty-state { display: grid; place-items: center; gap: var(--saas-space-3); min-height: 14rem; padding: var(--saas-space-6); text-align: center; background: var(--saas-surface-soft); border: 1px dashed var(--saas-border); border-radius: var(--saas-radius-lg); }

.saas-spinner, .saas-loading-spinner, [data-ui="minimal-saas"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
  display: inline-block;
  inline-size: 2rem;
  block-size: 2rem;
  border: .25rem solid var(--saas-spinner-track);
  border-block-start-color: var(--saas-spinner-stroke);
  border-inline-end-color: var(--saas-spinner-accent);
  border-radius: 50%;
  vertical-align: -.2em;
  animation: saas-spin .75s linear infinite;
}
.saas-spinner-sm { inline-size: 1rem; block-size: 1rem; border-width: .16rem; }
.saas-spinner-lg { inline-size: 3rem; block-size: 3rem; border-width: .32rem; }
.saas-button[aria-busy="true"], .saas-icon-button[aria-busy="true"], [data-ui="minimal-saas"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) { gap: .55rem; cursor: progress; }
.saas-button[aria-busy="true"]::after, .saas-icon-button[aria-busy="true"]::after, [data-ui="minimal-saas"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after {
  content: "";
  display: inline-block;
  inline-size: 1em;
  block-size: 1em;
  border: .16em solid rgb(var(--saas-primary-text-rgb) / .42);
  border-block-start-color: currentColor;
  border-radius: 50%;
  animation: saas-spin .75s linear infinite;
}
@keyframes saas-spin { to { transform: rotate(360deg); } }


@media (prefers-reduced-motion: reduce) {
  [data-ui="minimal-saas"] *, [data-ui="minimal-saas"] *::before, [data-ui="minimal-saas"] *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}
@media (prefers-contrast: more) {
  [data-ui="minimal-saas"] { --saas-border-alpha: 1; --saas-focus-alpha: .75; }
}
@media (forced-colors: active) {
  [data-ui="minimal-saas"] * { forced-color-adjust: auto; }
  [data-ui="minimal-saas"] :where(:focus-visible) { outline: 3px solid CanvasText; }
}
@media print {
  [data-ui="minimal-saas"] { background: #fff !important; color: #000 !important; }
  [data-ui="minimal-saas"] * { box-shadow: none !important; text-shadow: none !important; }
  [data-ui="minimal-saas"] a { color: #000 !important; text-decoration: underline; }
}
}


/* styles/bento.css */
/* =========================================================
   UI Style Kit CSS — Bento UI Theme System
   Includes 10 color schemes, light/dark/contrast modes,
   component classes, native element coverage, and CSS-only
   accessibility presentation helpers.

   Usage:
   <body data-ui="bento" data-theme="midnight-gold" data-mode="light">
   <body data-ui="bento" data-theme="arctic-indigo" data-mode="dark">
   <body data-ui="bento" data-theme="cyber-lime" data-mode="contrast">
========================================================= */


@layer ui-style-kit.bento {
:root {
  --bento-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bento-font-display: Inter, ui-sans-serif, system-ui, sans-serif;
  --bento-font-body: var(--bento-font-sans);
  --bento-font-heading: var(--bento-font-display);
  --bento-font-control: var(--bento-font-display);
  --bento-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --bento-radius-xs: .25rem;
  --bento-radius-sm: .5rem;
  --bento-radius-md: 1rem;
  --bento-radius-lg: 1.75rem;
  --bento-radius-xl: calc(1.75rem + .5rem);
  --bento-radius-pill: 999px;
  --bento-space-1: .25rem;
  --bento-space-2: .5rem;
  --bento-space-3: .75rem;
  --bento-space-4: 1rem;
  --bento-space-5: 1.25rem;
  --bento-space-6: 1.5rem;
  --bento-space-8: 2rem;
  --bento-transition-fast: 150ms ease;
  --bento-transition-base: 240ms ease;
}

[data-ui="bento"][data-mode="light"] {
  color-scheme: light;
  --bento-panel-alpha: .98;
  --bento-panel-soft-alpha: .78;
  --bento-border-alpha: .58;
  --bento-shadow-alpha: .12;
  --bento-focus-alpha: .34;
}

[data-ui="bento"][data-mode="dark"] {
  color-scheme: dark;
  --bento-panel-alpha: .92;
  --bento-panel-soft-alpha: .64;
  --bento-border-alpha: .52;
  --bento-shadow-alpha: .34;
  --bento-focus-alpha: .42;
}

[data-ui="bento"][data-mode="contrast"] {
  color-scheme: dark;
  --bento-panel-alpha: 1;
  --bento-panel-soft-alpha: .92;
  --bento-border-alpha: 1;
  --bento-shadow-alpha: .5;
  --bento-focus-alpha: .72;
}

[data-ui="bento"][data-theme][data-mode] {
  /* Shared scheme aliases preserve the existing prefixed token API. */
  --bento-bg-rgb: var(--usk-bg-rgb);
  --bento-surface-rgb: var(--usk-surface-rgb);
  --bento-surface-strong-rgb: var(--usk-surface-strong-rgb);
  --bento-surface-soft-rgb: var(--usk-surface-soft-rgb);
  --bento-text-rgb: var(--usk-text-rgb);
  --bento-text-muted-rgb: var(--usk-text-muted-rgb);
  --bento-border-rgb: var(--usk-border-rgb);
  --bento-primary-rgb: var(--usk-primary-rgb);
  --bento-primary-hover-rgb: var(--usk-primary-hover-rgb);
  --bento-primary-text-rgb: var(--usk-primary-text-rgb);
  --bento-secondary-rgb: var(--usk-secondary-rgb);
  --bento-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
  --bento-secondary-text-rgb: var(--usk-secondary-text-rgb);
  --bento-accent-rgb: var(--usk-accent-rgb);
  --bento-success-rgb: var(--usk-success-rgb);
  --bento-warning-rgb: var(--usk-warning-rgb);
  --bento-danger-rgb: var(--usk-danger-rgb);
  --bento-link-rgb: var(--usk-link-rgb);
  --bento-accent-text-rgb: var(--usk-accent-text-rgb);
  --bento-success-text-rgb: var(--usk-success-text-rgb);
  --bento-warning-text-rgb: var(--usk-warning-text-rgb);
  --bento-danger-text-rgb: var(--usk-danger-text-rgb);
  --bento-focus-rgb: var(--usk-focus-rgb);
  /* Native fallback selectors inherit visual identity through shared tokens. */
  --usk-native-surface: var(--bento-surface);
  --usk-native-surface-strong: var(--bento-surface-strong);
  --usk-native-surface-soft: var(--bento-surface-soft);
  --usk-native-card-bg: var(--bento-card-bg);
  --usk-native-control-bg: var(--bento-control-bg);
  --usk-native-text: var(--bento-text);
  --usk-native-text-muted: var(--bento-text-muted);
  --usk-native-border: var(--bento-border);
  --usk-native-primary: var(--bento-primary);
  --usk-native-primary-hover: var(--bento-primary-hover);
  --usk-native-on-primary: var(--bento-on-primary);
  --usk-native-focus: var(--bento-focus);
  --usk-native-success: var(--bento-success);
  --usk-native-warning: var(--bento-warning);
  --usk-native-danger: var(--bento-danger);
  --usk-native-link: var(--bento-link);
  --usk-native-font-body: var(--bento-font-body);
  --usk-native-font-heading: var(--bento-font-heading);
  --usk-native-font-control: var(--bento-font-control);
  --usk-native-font-mono: var(--bento-font-mono);
  --usk-native-radius-sm: var(--bento-radius-sm);
  --usk-native-radius: var(--bento-radius-md);
  --usk-native-radius-lg: var(--bento-radius-lg);
  --usk-native-shadow: var(--bento-shadow-sm, none);
  --usk-native-shadow-md: var(--bento-shadow-md, var(--usk-native-shadow));
  --usk-native-focus-ring: var(--bento-focus-ring, 0 0 0 3px rgb(var(--bento-focus-rgb) / .28));
  --usk-native-border-width: 1px;
  --usk-native-field-gap: .5rem;
  --usk-native-panel-padding: var(--bento-space-5);
  --bento-bg: rgb(var(--bento-bg-rgb));
  --bento-surface: rgb(var(--bento-surface-rgb) / var(--bento-panel-alpha));
  --bento-surface-strong: rgb(var(--bento-surface-strong-rgb) / var(--bento-panel-alpha));
  --bento-surface-soft: rgb(var(--bento-surface-soft-rgb) / var(--bento-panel-soft-alpha));
  --bento-text: rgb(var(--bento-text-rgb));
  --bento-text-muted: rgb(var(--bento-text-muted-rgb));
  --bento-fg: var(--bento-text);
  --bento-surface-fg: var(--bento-text);
  --bento-muted: var(--bento-text-muted);
  --bento-border: rgb(var(--bento-border-rgb) / var(--bento-border-alpha));
  --bento-control-fg: var(--bento-text);
  --bento-primary: rgb(var(--bento-primary-rgb));
  --bento-primary-hover: rgb(var(--bento-primary-hover-rgb));
  --bento-primary-text: rgb(var(--bento-primary-text-rgb));
  --bento-secondary: rgb(var(--bento-secondary-rgb));
  --bento-secondary-hover: rgb(var(--bento-secondary-hover-rgb));
  --bento-secondary-text: rgb(var(--bento-secondary-text-rgb));
  --bento-on-primary: var(--bento-primary-text);
  --bento-on-secondary: var(--bento-secondary-text);
  --bento-on-accent: rgb(var(--bento-accent-text-rgb));
  --bento-on-success: rgb(var(--bento-success-text-rgb));
  --bento-on-warning: rgb(var(--bento-warning-text-rgb));
  --bento-on-danger: rgb(var(--bento-danger-text-rgb));
  --bento-accent: rgb(var(--bento-accent-rgb));
  --bento-success: rgb(var(--bento-success-rgb));
  --bento-warning: rgb(var(--bento-warning-rgb));
  --bento-danger: rgb(var(--bento-danger-rgb));
  --bento-link: rgb(var(--bento-link-rgb));
  --bento-focus: rgb(var(--bento-focus-rgb));
  --bento-focus-ring: 0 0 0 3px rgb(var(--bento-focus-rgb) / var(--bento-focus-alpha));
  --bento-theme-bg-size: auto;
  --bento-theme-bg: radial-gradient(circle at 0% 0%, rgb(var(--bento-primary-rgb) / .16), transparent 32rem), radial-gradient(circle at 100% 0%, rgb(var(--bento-accent-rgb) / .12), transparent 30rem), radial-gradient(circle at 50% 100%, rgb(var(--bento-secondary-rgb) / .10), transparent 34rem), var(--bento-bg);
  --bento-card-bg: linear-gradient(135deg, rgb(var(--bento-primary-rgb) / .10), rgb(var(--bento-accent-rgb) / .055) 42%, rgb(var(--bento-surface-strong-rgb) / var(--bento-panel-alpha)) 100%), var(--bento-surface);
  --bento-control-bg: linear-gradient(180deg, rgb(var(--bento-surface-strong-rgb) / var(--bento-panel-alpha)), rgb(var(--bento-surface-soft-rgb) / var(--bento-panel-soft-alpha)));
  --bento-spinner-track: rgb(var(--bento-border-rgb) / max(.28, calc(var(--bento-border-alpha) * .7)));
  --bento-spinner-stroke: var(--bento-primary);
  --bento-spinner-accent: var(--bento-accent);
}































/* =========================================================
   Base Page + Layout
========================================================= */

[data-ui="bento"] {
  min-height: 100vh;
  background: radial-gradient(circle at 20% 5%, rgb(var(--bento-accent-rgb) / .18), transparent 26rem), radial-gradient(circle at 85% 0%, rgb(var(--bento-secondary-rgb) / .12), transparent 24rem), var(--bento-bg);
  color: var(--bento-text);
  font-family: var(--bento-font-body);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[data-ui="bento"] *,
[data-ui="bento"] *::before,
[data-ui="bento"] *::after { box-sizing: border-box; }

[data-ui="bento"][data-theme][data-mode] { background: var(--bento-theme-bg); background-size: var(--bento-theme-bg-size); }

.bento-page { min-height: 100vh; padding: clamp(1rem, 4vw, 3rem); }
.bento-container { width: min(100% - 2rem, 1200px); margin-inline: auto; }
.bento-section { display: grid; gap: var(--bento-space-5); padding: clamp(1rem, 3vw, 2rem); }
.bento-stack { display: flex; flex-direction: column; gap: var(--bento-space-4); }
.bento-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bento-space-3); }
.bento-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--bento-space-5); }
.bento-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: var(--bento-space-6); align-items: start; }

/* =========================================================
   Typography
========================================================= */

.bento-title, .bento-heading, .bento-kicker, .bento-button, .bento-badge, .bento-nav-link { font-family: var(--bento-font-heading); }
.bento-title { margin: 0; color: var(--bento-text); font-size: clamp(2rem, 5vw, 3.7rem); line-height: 1.02; letter-spacing: -0.055em; }
.bento-heading { margin: 0; color: var(--bento-text); font-size: clamp(1.2rem, 2.5vw, 2rem); line-height: 1.15; letter-spacing: -0.03em; }
.bento-kicker { margin: 0; color: var(--bento-primary); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.bento-subtitle, .bento-copy { margin: 0; color: var(--bento-text-muted); line-height: 1.65; }
.bento-text-muted { color: var(--bento-text-muted); }
.bento-divider { width: 100%; height: 1px; border: 0; background: var(--bento-border); }

/* =========================================================
   Surfaces
========================================================= */

.bento-surface, .bento-card, .bento-panel, .bento-toolbar, .bento-table-wrap {
  position: relative;
  background: linear-gradient(135deg, rgb(var(--bento-primary-rgb) / .08), transparent 36%), linear-gradient(180deg, rgb(255 255 255 / .08), rgb(255 255 255 / 0)), var(--bento-surface);
  color: var(--bento-text);
  border: 1px solid var(--bento-border);
  border-radius: var(--bento-radius-lg);
  box-shadow: 0 16px 40px rgb(0 0 0 / var(--bento-shadow-alpha));
  transition: transform var(--bento-transition-base), box-shadow var(--bento-transition-base), border-color var(--bento-transition-base), background var(--bento-transition-base);
}
.bento-card, .bento-panel { padding: var(--bento-space-6); }
.bento-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--bento-space-4); padding: var(--bento-space-4); }
.bento-surface-sm { border-radius: var(--bento-radius-md); box-shadow: 0 6px 18px rgb(0 0 0 / calc(var(--bento-shadow-alpha) * .72)); }
.bento-surface-lg { border-radius: var(--bento-radius-xl); box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--bento-shadow-alpha) + .08)); }
.bento-well, .bento-inset { background: var(--bento-surface-soft); color: var(--bento-text); border: 1px solid rgb(var(--bento-border-rgb) / calc(var(--bento-border-alpha) * .7)); border-radius: var(--bento-radius-md); padding: var(--bento-space-5); box-shadow: inset 0 1px 3px rgb(0 0 0 / .08); }
.bento-hover-lift:hover { transform: translateY(-3px) scale(1.005); box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--bento-shadow-alpha) + .12)); }

/* =========================================================
   Buttons
========================================================= */

.bento-button, .bento-icon-button {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--bento-space-2);
  min-height: 2.75rem; padding: .75rem 1.1rem; background: var(--bento-surface); color: var(--bento-text);
  border: 1px solid var(--bento-border); border-radius: var(--bento-radius-md); box-shadow: 0 6px 18px rgb(0 0 0 / var(--bento-shadow-alpha));
  font: inherit; font-weight: 800; line-height: 1; text-decoration: none; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none;
  transition: color var(--bento-transition-fast), background var(--bento-transition-fast), border-color var(--bento-transition-fast), box-shadow var(--bento-transition-fast), transform var(--bento-transition-fast);
}
.bento-button:hover, .bento-icon-button:hover { transform: translateY(-1px); border-color: var(--bento-primary); }
.bento-button:active, .bento-icon-button:active, .bento-button[aria-pressed="true"], .bento-icon-button[aria-pressed="true"], .bento-button.is-active, .bento-icon-button.is-active { transform: translateY(1px); box-shadow: inset 0 3px 10px rgb(0 0 0 / .18); }
.bento-button-primary { background: var(--bento-primary); color: var(--bento-on-primary); border-color: var(--bento-primary); }
.bento-button-primary:hover { background: var(--bento-primary-hover); border-color: var(--bento-primary-hover); }
.bento-button-secondary { background: var(--bento-secondary); color: var(--bento-on-secondary); border-color: var(--bento-secondary); }
.bento-button-secondary:hover { background: var(--bento-secondary-hover); border-color: var(--bento-secondary-hover); }
.bento-button-danger { background: var(--bento-danger); color: var(--bento-on-danger); border-color: var(--bento-danger); }
.bento-button-ghost { background: transparent; color: var(--bento-text); box-shadow: none; }
.bento-icon-button { width: 2.75rem; padding: 0; border-radius: var(--bento-radius-pill); }
.bento-button:disabled, .bento-icon-button:disabled, .bento-disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* Theme-responsive component defaults */
.bento-card, .bento-panel { background: var(--bento-card-bg); }
.bento-toolbar, .bento-table-wrap { background: var(--bento-control-bg); }
.bento-button:not(.bento-button-primary):not(.bento-button-secondary):not(.bento-button-danger):not(.bento-button-ghost), .bento-icon-button { background: var(--bento-control-bg); }
.bento-button, .bento-icon-button, .bento-badge, .bento-nav-link { font-family: var(--bento-font-control); }


/* =========================================================
   Forms
========================================================= */

.bento-field { display: flex; flex-direction: column; gap: var(--bento-space-2); }
.bento-label { color: var(--bento-text); font-size: .925rem; font-weight: 800; }
.bento-input, .bento-textarea, .bento-select {
  width: 100%; min-height: 2.875rem; padding: .75rem 1rem; background: var(--bento-surface-soft); color: var(--bento-text);
  border: 1px solid var(--bento-border); border-radius: var(--bento-radius-md); font: inherit; outline: none;
  transition: background var(--bento-transition-fast), border-color var(--bento-transition-fast), box-shadow var(--bento-transition-fast);
}
.bento-textarea { min-height: 8rem; resize: vertical; }
.bento-input::placeholder, .bento-textarea::placeholder { color: var(--bento-text-muted); opacity: .82; }
.bento-input:hover, .bento-textarea:hover, .bento-select:hover { border-color: rgb(var(--bento-primary-rgb) / .58); }
.bento-input:focus, .bento-textarea:focus, .bento-select:focus { border-color: var(--bento-focus); box-shadow: var(--bento-focus-ring); }
.bento-help-text { color: var(--bento-text-muted); font-size: .875rem; line-height: 1.45; }

/* Checkbox / Radio */
.bento-check, .bento-radio { display: inline-flex; align-items: center; gap: var(--bento-space-2); color: var(--bento-text); cursor: pointer; }
.bento-check input, .bento-radio input { position: absolute; opacity: 0; pointer-events: none; }
.bento-check-control, .bento-radio-control { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; background: var(--bento-surface-soft); border: 1px solid var(--bento-border); transition: background var(--bento-transition-fast), box-shadow var(--bento-transition-fast); }
.bento-check-control { border-radius: var(--bento-radius-xs); }
.bento-radio-control { border-radius: 50%; }
.bento-check input:checked + .bento-check-control, .bento-radio input:checked + .bento-radio-control { background: var(--bento-primary); border-color: var(--bento-primary); box-shadow: var(--bento-focus-ring); }
.bento-check input:checked + .bento-check-control::after { content: "✓"; color: var(--bento-on-primary); font-size: .9rem; font-weight: 900; }
.bento-radio input:checked + .bento-radio-control::after { content: ""; width: .55rem; height: .55rem; background: var(--bento-on-primary); border-radius: 50%; }

/* Switch */
.bento-switch { display: inline-flex; align-items: center; gap: var(--bento-space-3); color: var(--bento-text); cursor: pointer; }
.bento-switch input { position: absolute; opacity: 0; pointer-events: none; }
.bento-switch-track { position: relative; width: 3.5rem; height: 1.9rem; background: var(--bento-surface-soft); border: 1px solid var(--bento-border); border-radius: var(--bento-radius-pill); transition: background var(--bento-transition-fast), box-shadow var(--bento-transition-fast); }
.bento-switch-thumb { position: absolute; top: .22rem; left: .22rem; width: 1.34rem; height: 1.34rem; background: var(--bento-surface-strong); border: 1px solid var(--bento-border); border-radius: 50%; box-shadow: 0 4px 12px rgb(0 0 0 / var(--bento-shadow-alpha)); transition: left var(--bento-transition-fast), background var(--bento-transition-fast); }
.bento-switch input:checked + .bento-switch-track { background: var(--bento-primary); border-color: var(--bento-primary); }
.bento-switch input:checked + .bento-switch-track .bento-switch-thumb { left: calc(100% - 1.34rem - .22rem); background: var(--bento-on-primary); }

/* =========================================================
   Badges / Nav / Progress / Alerts / Tables
========================================================= */

.bento-badge { display: inline-flex; align-items: center; gap: var(--bento-space-1); min-height: 1.75rem; padding: .35rem .7rem; background: var(--bento-surface-soft); color: var(--bento-text); border: 1px solid var(--bento-border); border-radius: var(--bento-radius-pill); font-size: .8125rem; font-weight: 850; line-height: 1; }
.bento-badge-primary { background: var(--bento-primary); color: var(--bento-on-primary); border-color: var(--bento-primary); }
.bento-badge-secondary { background: var(--bento-secondary); color: var(--bento-on-secondary); border-color: var(--bento-secondary); }
.bento-badge-success { background: var(--bento-success); color: var(--bento-on-success); border-color: var(--bento-success); }
.bento-badge-warning { background: var(--bento-warning); color: var(--bento-on-warning); border-color: var(--bento-warning); }
.bento-badge-danger { background: var(--bento-danger); color: var(--bento-on-danger); border-color: var(--bento-danger); }

.bento-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bento-space-2); padding: var(--bento-space-2); background: var(--bento-surface); border: 1px solid var(--bento-border); border-radius: var(--bento-radius-xl); box-shadow: 0 10px 30px rgb(0 0 0 / var(--bento-shadow-alpha)); }
.bento-nav-link { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: .65rem 1rem; color: var(--bento-text-muted); border-radius: var(--bento-radius-pill); text-decoration: none; font-weight: 850; transition: color var(--bento-transition-fast), background var(--bento-transition-fast), box-shadow var(--bento-transition-fast); }
.bento-nav-link:hover { color: var(--bento-text); background: var(--bento-surface-soft); }
.bento-nav-link[aria-current="page"], .bento-nav-link.is-active { color: var(--bento-on-primary); background: var(--bento-primary); }

/* Tooltips use compact contrast surfaces that stay readable across theme modes. */
.bento-tooltip, [data-ui="bento"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
  display: inline-flex; align-items: center; gap: .45rem; max-inline-size: 16rem; padding: .6rem .8rem;
  background: linear-gradient(135deg, rgb(var(--bento-primary-rgb) / .18), transparent 52%), var(--bento-surface-strong);
  color: var(--bento-text); border: 1px solid rgb(var(--bento-border-rgb) / .7); border-radius: var(--bento-radius-sm);
  box-shadow: 0 .65rem 1.35rem rgb(0 0 0 / var(--bento-shadow-alpha)); font-size: .82rem; font-weight: 850; line-height: 1.35;
}
.bento-tooltip-arrow { inline-size: .6rem; block-size: .6rem; flex: 0 0 auto; background: var(--bento-primary); border-radius: var(--bento-radius-xs); transform: rotate(45deg); }

.bento-progress { width: 100%; height: .9rem; overflow: hidden; background: var(--bento-surface-soft); border: 1px solid var(--bento-border); border-radius: var(--bento-radius-pill); }
.bento-progress-bar { height: 100%; width: var(--bento-progress-value, 50%); background: linear-gradient(90deg, var(--bento-primary), var(--bento-accent)); border-radius: inherit; }

.bento-alert { display: grid; gap: var(--bento-space-2); padding: var(--bento-space-4); background: var(--bento-surface); color: var(--bento-text); border: 1px solid var(--bento-border); border-radius: var(--bento-radius-lg); box-shadow: 0 10px 30px rgb(0 0 0 / var(--bento-shadow-alpha)); }
.bento-alert-success { border-left-color: var(--bento-success); }
.bento-alert-warning { border-left-color: var(--bento-warning); }
.bento-alert-danger { border-left-color: var(--bento-danger); }
.bento-alert-title { margin: 0; font-weight: 900; }
.bento-alert-body { margin: 0; color: var(--bento-text-muted); line-height: 1.55; }

.bento-table-wrap { overflow: auto; }
.bento-table { width: 100%; border-collapse: collapse; }
.bento-table th, .bento-table td { padding: .95rem 1rem; text-align: left; border-bottom: 1px solid var(--bento-border); }
.bento-table th { color: var(--bento-text); font-size: .82rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; background: rgb(var(--bento-primary-rgb) / .08); }
.bento-table td { color: var(--bento-text-muted); }
.bento-table tr:hover td { background: rgb(var(--bento-primary-rgb) / .045); }

/* =========================================================
   Utilities
========================================================= */

.bento-text-primary { color: var(--bento-primary); } .bento-text-secondary { color: var(--bento-secondary); } .bento-text-accent { color: var(--bento-accent); } .bento-text-success { color: var(--bento-success); } .bento-text-warning { color: var(--bento-warning); } .bento-text-danger { color: var(--bento-danger); }
.bento-bg-primary { background: var(--bento-primary); color: var(--bento-on-primary); } .bento-bg-secondary { background: var(--bento-secondary); color: var(--bento-on-secondary); }
.bento-border { border: 1px solid var(--bento-border); } .bento-rounded { border-radius: var(--bento-radius-md); } .bento-rounded-lg { border-radius: var(--bento-radius-lg); } .bento-rounded-xl { border-radius: var(--bento-radius-xl); } .bento-pill { border-radius: var(--bento-radius-pill); }
.bento-sr-only, .bento-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.bento-skip-link { position: absolute; left: 1rem; top: 1rem; z-index: 9999; transform: translateY(-150%); padding: .75rem 1rem; background: var(--bento-primary); color: var(--bento-on-primary); border-radius: var(--bento-radius-md); font-weight: 900; }
.bento-skip-link:focus { transform: translateY(0); }

/* Bento-specific layout helpers */
.bento-grid-feature { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(8rem, auto); gap: var(--bento-space-5); }
.bento-tile { min-height: 12rem; padding: var(--bento-space-6); background: linear-gradient(135deg, rgb(var(--bento-primary-rgb) / .1), transparent 48%), var(--bento-surface); border: 1px solid var(--bento-border); border-radius: var(--bento-radius-xl); box-shadow: 0 16px 40px rgb(0 0 0 / var(--bento-shadow-alpha)); }
.bento-tile-lg { grid-column: span 4; grid-row: span 2; } .bento-tile-md { grid-column: span 3; } .bento-tile-sm { grid-column: span 2; }
.bento-stat { display: grid; gap: .25rem; } .bento-stat-value { color: var(--bento-primary); font-size: clamp(2rem, 4vw, 3rem); font-weight: 950; line-height: 1; } .bento-stat-label { color: var(--bento-text-muted); font-weight: 750; }
@media (max-width: 760px) { .bento-grid-feature { grid-template-columns: 1fr; } .bento-tile-lg, .bento-tile-md, .bento-tile-sm { grid-column: auto; grid-row: auto; } }

/* Spinner geometry follows the bento preset's compact tile language. */
.bento-spinner, .bento-loading-spinner, [data-ui="bento"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
  display: inline-block;
  inline-size: 2rem;
  block-size: 2rem;
  border: .18rem solid rgb(var(--bento-border-rgb) / .44);
  border-block-start-color: var(--bento-spinner-stroke);
  border-inline-end-color: var(--bento-spinner-accent);
  border-radius: var(--bento-radius-md);
  background: conic-gradient(from 0deg, var(--bento-spinner-stroke), var(--bento-spinner-accent), transparent 58%, var(--bento-spinner-track));
  box-shadow: inset 0 0 0 .28rem var(--bento-surface), 0 .5rem 1.15rem rgb(0 0 0 / var(--bento-shadow-alpha));
  vertical-align: -.2em;
  animation: bento-spin .9s steps(4, end) infinite;
}
.bento-spinner-sm { inline-size: 1rem; block-size: 1rem; border-width: .12rem; }
.bento-spinner-lg { inline-size: 3rem; block-size: 3rem; border-width: .24rem; }
.bento-button[aria-busy="true"], .bento-icon-button[aria-busy="true"], [data-ui="bento"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) { gap: .55rem; cursor: progress; }
.bento-button[aria-busy="true"]::after, .bento-icon-button[aria-busy="true"]::after, [data-ui="bento"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after {
  content: "";
  display: inline-block;
  inline-size: 1em;
  block-size: 1em;
  border: .16em solid rgb(var(--bento-primary-text-rgb) / .42);
  border-block-start-color: currentColor;
  border-radius: 50%;
  animation: bento-spin .75s linear infinite;
}
@keyframes bento-spin { to { transform: rotate(360deg); } }


@media (prefers-reduced-motion: reduce) {
  [data-ui="bento"] *, [data-ui="bento"] *::before, [data-ui="bento"] *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}
@media (prefers-contrast: more) {
  [data-ui="bento"] { --bento-border-alpha: 1; --bento-focus-alpha: .75; }
}
@media (forced-colors: active) {
  [data-ui="bento"] * { forced-color-adjust: auto; }
  [data-ui="bento"] :where(:focus-visible) { outline: 3px solid CanvasText; }
}
@media print {
  [data-ui="bento"] { background: #fff !important; color: #000 !important; }
  [data-ui="bento"] * { box-shadow: none !important; text-shadow: none !important; }
  [data-ui="bento"] a { color: #000 !important; text-decoration: underline; }
}
}


/* styles/maximalist.css */
/* =========================================================
   UI Style Kit CSS — Maximalist / Playful Theme System
   Includes 10 color schemes, light/dark/contrast modes,
   component classes, native element coverage, and CSS-only
   accessibility presentation helpers.

   Usage:
   <body data-ui="maximalist" data-theme="midnight-gold" data-mode="light">
   <body data-ui="maximalist" data-theme="arctic-indigo" data-mode="dark">
   <body data-ui="maximalist" data-theme="cyber-lime" data-mode="contrast">
========================================================= */


@layer ui-style-kit.maximalist {
:root {
  --max-font-sans: Nunito, Inter, ui-sans-serif, system-ui, sans-serif;
  --max-font-display: Cooper Black, Baloo 2, Nunito, Inter, ui-sans-serif, system-ui, sans-serif;
  --max-font-body: var(--max-font-sans);
  --max-font-heading: var(--max-font-display);
  --max-font-control: var(--max-font-display);
  --max-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --max-radius-xs: .25rem;
  --max-radius-sm: .5rem;
  --max-radius-md: 1.2rem;
  --max-radius-lg: 2rem;
  --max-radius-xl: calc(2rem + .5rem);
  --max-radius-pill: 999px;
  --max-space-1: .25rem;
  --max-space-2: .5rem;
  --max-space-3: .75rem;
  --max-space-4: 1rem;
  --max-space-5: 1.25rem;
  --max-space-6: 1.5rem;
  --max-space-8: 2rem;
  --max-transition-fast: 150ms ease;
  --max-transition-base: 240ms ease;
}

[data-ui="maximalist"][data-mode="light"] {
  color-scheme: light;
  --max-panel-alpha: .98;
  --max-panel-soft-alpha: .78;
  --max-border-alpha: .58;
  --max-shadow-alpha: .12;
  --max-focus-alpha: .34;
}

[data-ui="maximalist"][data-mode="dark"] {
  color-scheme: dark;
  --max-panel-alpha: .92;
  --max-panel-soft-alpha: .64;
  --max-border-alpha: .52;
  --max-shadow-alpha: .34;
  --max-focus-alpha: .42;
}

[data-ui="maximalist"][data-mode="contrast"] {
  color-scheme: dark;
  --max-panel-alpha: 1;
  --max-panel-soft-alpha: .92;
  --max-border-alpha: 1;
  --max-shadow-alpha: .5;
  --max-focus-alpha: .72;
}

[data-ui="maximalist"][data-theme][data-mode] {
  /* Shared scheme aliases preserve the existing prefixed token API. */
  --max-bg-rgb: var(--usk-bg-rgb);
  --max-surface-rgb: var(--usk-surface-rgb);
  --max-surface-strong-rgb: var(--usk-surface-strong-rgb);
  --max-surface-soft-rgb: var(--usk-surface-soft-rgb);
  --max-text-rgb: var(--usk-text-rgb);
  --max-text-muted-rgb: var(--usk-text-muted-rgb);
  --max-border-rgb: var(--usk-border-rgb);
  --max-primary-rgb: var(--usk-primary-rgb);
  --max-primary-hover-rgb: var(--usk-primary-hover-rgb);
  --max-primary-text-rgb: var(--usk-primary-text-rgb);
  --max-secondary-rgb: var(--usk-secondary-rgb);
  --max-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
  --max-secondary-text-rgb: var(--usk-secondary-text-rgb);
  --max-accent-rgb: var(--usk-accent-rgb);
  --max-success-rgb: var(--usk-success-rgb);
  --max-warning-rgb: var(--usk-warning-rgb);
  --max-danger-rgb: var(--usk-danger-rgb);
  --max-link-rgb: var(--usk-link-rgb);
  --max-accent-text-rgb: var(--usk-accent-text-rgb);
  --max-success-text-rgb: var(--usk-success-text-rgb);
  --max-warning-text-rgb: var(--usk-warning-text-rgb);
  --max-danger-text-rgb: var(--usk-danger-text-rgb);
  --max-focus-rgb: var(--usk-focus-rgb);
  /* Native fallback selectors inherit visual identity through shared tokens. */
  --usk-native-surface: var(--max-surface);
  --usk-native-surface-strong: var(--max-surface-strong);
  --usk-native-surface-soft: var(--max-surface-soft);
  --usk-native-card-bg: var(--max-card-bg);
  --usk-native-control-bg: var(--max-control-bg);
  --usk-native-text: var(--max-text);
  --usk-native-text-muted: var(--max-text-muted);
  --usk-native-border: var(--max-border);
  --usk-native-primary: var(--max-primary);
  --usk-native-primary-hover: var(--max-primary-hover);
  --usk-native-on-primary: var(--max-on-primary);
  --usk-native-focus: var(--max-focus);
  --usk-native-success: var(--max-success);
  --usk-native-warning: var(--max-warning);
  --usk-native-danger: var(--max-danger);
  --usk-native-link: var(--max-link);
  --usk-native-font-body: var(--max-font-body);
  --usk-native-font-heading: var(--max-font-heading);
  --usk-native-font-control: var(--max-font-control);
  --usk-native-font-mono: var(--max-font-mono);
  --usk-native-radius-sm: var(--max-radius-sm);
  --usk-native-radius: var(--max-radius-md);
  --usk-native-radius-lg: var(--max-radius-lg);
  --usk-native-shadow: var(--max-shadow-sm, none);
  --usk-native-shadow-md: var(--max-shadow-md, var(--usk-native-shadow));
  --usk-native-focus-ring: var(--max-focus-ring, 0 0 0 3px rgb(var(--max-focus-rgb) / .28));
  --usk-native-border-width: 1px;
  --usk-native-field-gap: .5rem;
  --usk-native-panel-padding: var(--max-space-5);
  --max-bg: rgb(var(--max-bg-rgb));
  --max-surface: rgb(var(--max-surface-rgb) / var(--max-panel-alpha));
  --max-surface-strong: rgb(var(--max-surface-strong-rgb) / var(--max-panel-alpha));
  --max-surface-soft: rgb(var(--max-surface-soft-rgb) / var(--max-panel-soft-alpha));
  --max-text: rgb(var(--max-text-rgb));
  --max-text-muted: rgb(var(--max-text-muted-rgb));
  --max-fg: var(--max-text);
  --max-surface-fg: var(--max-text);
  --max-muted: var(--max-text-muted);
  --max-border: rgb(var(--max-border-rgb) / var(--max-border-alpha));
  --max-control-fg: var(--max-text);
  --max-primary: rgb(var(--max-primary-rgb));
  --max-primary-hover: rgb(var(--max-primary-hover-rgb));
  --max-primary-text: rgb(var(--max-primary-text-rgb));
  --max-secondary: rgb(var(--max-secondary-rgb));
  --max-secondary-hover: rgb(var(--max-secondary-hover-rgb));
  --max-secondary-text: rgb(var(--max-secondary-text-rgb));
  --max-on-primary: var(--max-primary-text);
  --max-on-secondary: var(--max-secondary-text);
  --max-on-accent: rgb(var(--max-accent-text-rgb));
  --max-on-success: rgb(var(--max-success-text-rgb));
  --max-on-warning: rgb(var(--max-warning-text-rgb));
  --max-on-danger: rgb(var(--max-danger-text-rgb));
  --max-accent: rgb(var(--max-accent-rgb));
  --max-success: rgb(var(--max-success-rgb));
  --max-warning: rgb(var(--max-warning-rgb));
  --max-danger: rgb(var(--max-danger-rgb));
  --max-link: rgb(var(--max-link-rgb));
  --max-focus: rgb(var(--max-focus-rgb));
  --max-focus-ring: 0 0 0 3px rgb(var(--max-focus-rgb) / var(--max-focus-alpha));
  --max-theme-bg-size: auto;
  --max-theme-bg: radial-gradient(circle at 0% 0%, rgb(var(--max-primary-rgb) / .16), transparent 32rem), radial-gradient(circle at 100% 0%, rgb(var(--max-accent-rgb) / .12), transparent 30rem), radial-gradient(circle at 50% 100%, rgb(var(--max-secondary-rgb) / .10), transparent 34rem), var(--max-bg);
  --max-card-bg: linear-gradient(135deg, rgb(var(--max-primary-rgb) / .10), rgb(var(--max-accent-rgb) / .055) 42%, rgb(var(--max-surface-strong-rgb) / var(--max-panel-alpha)) 100%), var(--max-surface);
  --max-control-bg: linear-gradient(180deg, rgb(var(--max-surface-strong-rgb) / var(--max-panel-alpha)), rgb(var(--max-surface-soft-rgb) / var(--max-panel-soft-alpha)));
  --max-spinner-track: rgb(var(--max-border-rgb) / max(.28, calc(var(--max-border-alpha) * .7)));
  --max-spinner-stroke: var(--max-primary);
  --max-spinner-accent: var(--max-accent);
}































/* =========================================================
   Base Page + Layout
========================================================= */

[data-ui="maximalist"] {
  min-height: 100vh;
  background: radial-gradient(circle at 10% 10%, rgb(var(--max-primary-rgb) / .18), transparent 20rem), radial-gradient(circle at 90% 0%, rgb(var(--max-secondary-rgb) / .2), transparent 22rem), var(--max-bg);
  color: var(--max-text);
  font-family: var(--max-font-body);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[data-ui="maximalist"] *,
[data-ui="maximalist"] *::before,
[data-ui="maximalist"] *::after { box-sizing: border-box; }

[data-ui="maximalist"][data-theme][data-mode] { background: var(--max-theme-bg); background-size: var(--max-theme-bg-size); }

.max-page { min-height: 100vh; padding: clamp(1rem, 4vw, 3rem); }
.max-container { width: min(100% - 2rem, 1200px); margin-inline: auto; }
.max-section { display: grid; gap: var(--max-space-5); padding: clamp(1rem, 3vw, 2rem); }
.max-stack { display: flex; flex-direction: column; gap: var(--max-space-4); }
.max-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--max-space-3); }
.max-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--max-space-5); }
.max-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: var(--max-space-6); align-items: start; }

/* =========================================================
   Typography
========================================================= */

.max-title, .max-heading, .max-kicker, .max-button, .max-badge, .max-nav-link { font-family: var(--max-font-heading); }
.max-title { margin: 0; color: var(--max-text); font-size: clamp(2rem, 5vw, 3.7rem); line-height: 1.02; letter-spacing: -0.04em; text-wrap: balance; }
.max-heading { margin: 0; color: var(--max-text); font-size: clamp(1.2rem, 2.5vw, 2rem); line-height: 1.15; letter-spacing: -0.03em; }
.max-kicker { margin: 0; color: var(--max-primary); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.max-subtitle, .max-copy { margin: 0; color: var(--max-text-muted); line-height: 1.65; }
.max-text-muted { color: var(--max-text-muted); }
.max-divider { width: 100%; height: 3px; border: 0; background: var(--max-border); }

/* =========================================================
   Surfaces
========================================================= */

.max-surface, .max-card, .max-panel, .max-toolbar, .max-table-wrap {
  position: relative;
  background: linear-gradient(135deg, rgb(var(--max-accent-rgb) / .18), transparent 42%), var(--max-surface);
  color: var(--max-text);
  border: 3px solid var(--max-border);
  border-radius: var(--max-radius-lg);
  box-shadow: 8px 8px 0 rgb(var(--max-border-rgb) / .86);
  transition: transform var(--max-transition-base), box-shadow var(--max-transition-base), border-color var(--max-transition-base), background var(--max-transition-base);
}
.max-card, .max-panel { padding: var(--max-space-6); }
.max-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--max-space-4); padding: var(--max-space-4); }
.max-surface-sm { border-radius: var(--max-radius-md); box-shadow: 0 6px 18px rgb(0 0 0 / calc(var(--max-shadow-alpha) * .72)); }
.max-surface-lg { border-radius: var(--max-radius-xl); box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--max-shadow-alpha) + .08)); }
.max-well, .max-inset { background: var(--max-surface-soft); color: var(--max-text); border: 3px solid rgb(var(--max-border-rgb) / calc(var(--max-border-alpha) * .7)); border-radius: var(--max-radius-md); padding: var(--max-space-5); box-shadow: inset 0 1px 3px rgb(0 0 0 / .08); }
.max-hover-lift:hover { transform: translate(-2px, -2px); box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--max-shadow-alpha) + .12)); }

/* =========================================================
   Buttons
========================================================= */

.max-button, .max-icon-button {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--max-space-2);
  min-height: 2.75rem; padding: .75rem 1.1rem; background: var(--max-surface); color: var(--max-text);
  border: 3px solid var(--max-border); border-radius: var(--max-radius-md); box-shadow: 0 6px 18px rgb(0 0 0 / var(--max-shadow-alpha));
  font: inherit; font-weight: 800; line-height: 1; text-decoration: none; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none;
  transition: color var(--max-transition-fast), background var(--max-transition-fast), border-color var(--max-transition-fast), box-shadow var(--max-transition-fast), transform var(--max-transition-fast);
}
.max-button:hover, .max-icon-button:hover { transform: translateY(-1px); border-color: var(--max-primary); }
.max-button:active, .max-icon-button:active, .max-button[aria-pressed="true"], .max-icon-button[aria-pressed="true"], .max-button.is-active, .max-icon-button.is-active { transform: translateY(1px); box-shadow: inset 0 3px 10px rgb(0 0 0 / .18); }
.max-button-primary { background: var(--max-primary); color: var(--max-on-primary); border-color: var(--max-primary); }
.max-button-primary:hover { background: var(--max-primary-hover); border-color: var(--max-primary-hover); }
.max-button-secondary { background: var(--max-secondary); color: var(--max-on-secondary); border-color: var(--max-secondary); }
.max-button-secondary:hover { background: var(--max-secondary-hover); border-color: var(--max-secondary-hover); }
.max-button-danger { background: var(--max-danger); color: var(--max-on-danger); border-color: var(--max-danger); }
.max-button-ghost { background: transparent; color: var(--max-text); box-shadow: none; }
.max-icon-button { width: 2.75rem; padding: 0; border-radius: var(--max-radius-pill); }
.max-button:disabled, .max-icon-button:disabled, .max-disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* Theme-responsive component defaults */
.max-card, .max-panel { background: var(--max-card-bg); }
.max-toolbar, .max-table-wrap { background: var(--max-control-bg); }
.max-button:not(.max-button-primary):not(.max-button-secondary):not(.max-button-danger):not(.max-button-ghost), .max-icon-button { background: var(--max-control-bg); }
.max-button, .max-icon-button, .max-badge, .max-nav-link { font-family: var(--max-font-control); }


/* =========================================================
   Forms
========================================================= */

.max-field { display: flex; flex-direction: column; gap: var(--max-space-2); }
.max-label { color: var(--max-text); font-size: .925rem; font-weight: 800; }
.max-input, .max-textarea, .max-select {
  width: 100%; min-height: 2.875rem; padding: .75rem 1rem; background: var(--max-surface-soft); color: var(--max-text);
  border: 3px solid var(--max-border); border-radius: var(--max-radius-md); font: inherit; outline: none;
  transition: background var(--max-transition-fast), border-color var(--max-transition-fast), box-shadow var(--max-transition-fast);
}
.max-textarea { min-height: 8rem; resize: vertical; }
.max-input::placeholder, .max-textarea::placeholder { color: var(--max-text-muted); opacity: .82; }
.max-input:hover, .max-textarea:hover, .max-select:hover { border-color: rgb(var(--max-primary-rgb) / .58); }
.max-input:focus, .max-textarea:focus, .max-select:focus { border-color: var(--max-focus); box-shadow: var(--max-focus-ring); }
.max-help-text { color: var(--max-text-muted); font-size: .875rem; line-height: 1.45; }

/* Checkbox / Radio */
.max-check, .max-radio { display: inline-flex; align-items: center; gap: var(--max-space-2); color: var(--max-text); cursor: pointer; }
.max-check input, .max-radio input { position: absolute; opacity: 0; pointer-events: none; }
.max-check-control, .max-radio-control { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; background: var(--max-surface-soft); border: 3px solid var(--max-border); transition: background var(--max-transition-fast), box-shadow var(--max-transition-fast); }
.max-check-control { border-radius: var(--max-radius-xs); }
.max-radio-control { border-radius: 50%; }
.max-check input:checked + .max-check-control, .max-radio input:checked + .max-radio-control { background: var(--max-primary); border-color: var(--max-primary); box-shadow: var(--max-focus-ring); }
.max-check input:checked + .max-check-control::after { content: "✓"; color: var(--max-on-primary); font-size: .9rem; font-weight: 900; }
.max-radio input:checked + .max-radio-control::after { content: ""; width: .55rem; height: .55rem; background: var(--max-on-primary); border-radius: 50%; }

/* Switch */
.max-switch { display: inline-flex; align-items: center; gap: var(--max-space-3); color: var(--max-text); cursor: pointer; }
.max-switch input { position: absolute; opacity: 0; pointer-events: none; }
.max-switch-track { position: relative; width: 3.5rem; height: 1.9rem; background: var(--max-surface-soft); border: 3px solid var(--max-border); border-radius: var(--max-radius-pill); transition: background var(--max-transition-fast), box-shadow var(--max-transition-fast); }
.max-switch-thumb { position: absolute; top: .22rem; left: .22rem; width: 1.34rem; height: 1.34rem; background: var(--max-surface-strong); border: 3px solid var(--max-border); border-radius: 50%; box-shadow: 0 4px 12px rgb(0 0 0 / var(--max-shadow-alpha)); transition: left var(--max-transition-fast), background var(--max-transition-fast); }
.max-switch input:checked + .max-switch-track { background: var(--max-primary); border-color: var(--max-primary); }
.max-switch input:checked + .max-switch-track .max-switch-thumb { left: calc(100% - 1.34rem - .22rem); background: var(--max-on-primary); }

/* =========================================================
   Badges / Nav / Progress / Alerts / Tables
========================================================= */

.max-badge { display: inline-flex; align-items: center; gap: var(--max-space-1); min-height: 1.75rem; padding: .35rem .7rem; background: var(--max-surface-soft); color: var(--max-text); border: 3px solid var(--max-border); border-radius: var(--max-radius-pill); font-size: .8125rem; font-weight: 850; line-height: 1; }
.max-badge-primary { background: var(--max-primary); color: var(--max-on-primary); border-color: var(--max-primary); }
.max-badge-secondary { background: var(--max-secondary); color: var(--max-on-secondary); border-color: var(--max-secondary); }
.max-badge-success { background: var(--max-success); color: var(--max-on-success); border-color: var(--max-success); }
.max-badge-warning { background: var(--max-warning); color: var(--max-on-warning); border-color: var(--max-warning); }
.max-badge-danger { background: var(--max-danger); color: var(--max-on-danger); border-color: var(--max-danger); }

.max-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--max-space-2); padding: var(--max-space-2); background: var(--max-surface); border: 3px solid var(--max-border); border-radius: var(--max-radius-xl); box-shadow: 0 10px 30px rgb(0 0 0 / var(--max-shadow-alpha)); }
.max-nav-link { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: .65rem 1rem; color: var(--max-text-muted); border-radius: var(--max-radius-pill); text-decoration: none; font-weight: 850; transition: color var(--max-transition-fast), background var(--max-transition-fast), box-shadow var(--max-transition-fast); }
.max-nav-link:hover { color: var(--max-text); background: var(--max-surface-soft); }
.max-nav-link[aria-current="page"], .max-nav-link.is-active { color: var(--max-on-primary); background: var(--max-primary); }

/* Tooltips use compact contrast surfaces that stay readable across theme modes. */
.max-tooltip, [data-ui="maximalist"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
  display: inline-flex; align-items: center; gap: .45rem; max-inline-size: 16rem; padding: .6rem .85rem;
  background: linear-gradient(135deg, var(--max-primary), var(--max-accent)); color: var(--max-on-primary);
  border: 3px solid var(--max-border); border-radius: var(--max-radius-pill); box-shadow: .32rem .32rem 0 rgb(var(--max-secondary-rgb) / .68);
  font-size: .82rem; font-weight: 950; line-height: 1.25; text-transform: uppercase; letter-spacing: .04em;
}
.max-tooltip-arrow { inline-size: .62rem; block-size: .62rem; flex: 0 0 auto; background: var(--max-warning); border: 2px solid var(--max-border); transform: rotate(45deg); }

.max-progress { width: 100%; height: .9rem; overflow: hidden; background: var(--max-surface-soft); border: 3px solid var(--max-border); border-radius: var(--max-radius-pill); }
.max-progress-bar { height: 100%; width: var(--max-progress-value, 50%); background: linear-gradient(90deg, var(--max-primary), var(--max-accent)); border-radius: inherit; }

.max-alert { display: grid; gap: var(--max-space-2); padding: var(--max-space-4); background: var(--max-surface); color: var(--max-text); border: 3px solid var(--max-border); border-radius: var(--max-radius-lg); box-shadow: 0 10px 30px rgb(0 0 0 / var(--max-shadow-alpha)); }
.max-alert-success { border-left-color: var(--max-success); }
.max-alert-warning { border-left-color: var(--max-warning); }
.max-alert-danger { border-left-color: var(--max-danger); }
.max-alert-title { margin: 0; font-weight: 900; }
.max-alert-body { margin: 0; color: var(--max-text-muted); line-height: 1.55; }

.max-table-wrap { overflow: auto; }
.max-table { width: 100%; border-collapse: collapse; }
.max-table th, .max-table td { padding: .95rem 1rem; text-align: left; border-bottom: 3px solid var(--max-border); }
.max-table th { color: var(--max-text); font-size: .82rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; background: rgb(var(--max-primary-rgb) / .08); }
.max-table td { color: var(--max-text-muted); }
.max-table tr:hover td { background: rgb(var(--max-primary-rgb) / .045); }

/* =========================================================
   Utilities
========================================================= */

.max-text-primary { color: var(--max-primary); } .max-text-secondary { color: var(--max-secondary); } .max-text-accent { color: var(--max-accent); } .max-text-success { color: var(--max-success); } .max-text-warning { color: var(--max-warning); } .max-text-danger { color: var(--max-danger); }
.max-bg-primary { background: var(--max-primary); color: var(--max-on-primary); } .max-bg-secondary { background: var(--max-secondary); color: var(--max-on-secondary); }
.max-border { border: 3px solid var(--max-border); } .max-rounded { border-radius: var(--max-radius-md); } .max-rounded-lg { border-radius: var(--max-radius-lg); } .max-rounded-xl { border-radius: var(--max-radius-xl); } .max-pill { border-radius: var(--max-radius-pill); }
.max-sr-only, .max-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.max-skip-link { position: absolute; left: 1rem; top: 1rem; z-index: 9999; transform: translateY(-150%); padding: .75rem 1rem; background: var(--max-primary); color: var(--max-on-primary); border-radius: var(--max-radius-md); font-weight: 900; }
.max-skip-link:focus { transform: translateY(0); }

/* Maximalist-specific expressive helpers */
.max-sticker { display: inline-flex; align-items: center; padding: .45rem .8rem; background: var(--max-accent); color: #111; border: 3px solid var(--max-border); border-radius: var(--max-radius-pill); box-shadow: 5px 5px 0 rgb(var(--max-border-rgb) / .8); font-weight: 950; transform: rotate(-2deg); }
.max-callout { padding: var(--max-space-6); background: linear-gradient(135deg, var(--max-primary), var(--max-accent)); color: var(--max-on-primary); border: 3px solid var(--max-border); border-radius: var(--max-radius-xl); box-shadow: 10px 10px 0 rgb(var(--max-border-rgb) / .85); }
.max-wiggle:hover { animation: max-wiggle 420ms ease both; }
@keyframes max-wiggle { 0%,100% { transform: rotate(0deg); } 25% { transform: rotate(-1.5deg); } 75% { transform: rotate(1.5deg); } }

/* Spinner geometry follows the maximalist preset's expressive shape language. */
.max-spinner, .max-loading-spinner, [data-ui="maximalist"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
  display: inline-block;
  inline-size: 2rem;
  block-size: 2rem;
  border: .18rem solid rgb(var(--max-border-rgb) / .5);
  border-block-start-color: var(--max-spinner-stroke);
  border-inline-end-color: var(--max-spinner-accent);
  border-radius: 44% 56% 52% 48%;
  background: radial-gradient(circle at 30% 26%, rgb(var(--max-accent-rgb) / .72), transparent 24%), conic-gradient(var(--max-spinner-stroke), var(--max-spinner-accent), var(--max-secondary), var(--max-spinner-track));
  box-shadow: .18rem .18rem 0 rgb(var(--max-secondary-rgb) / .55), -.18rem -.18rem 0 rgb(var(--max-primary-rgb) / .35);
  vertical-align: -.2em;
  animation: max-spin .85s ease-in-out infinite;
}
.max-spinner-sm { inline-size: 1rem; block-size: 1rem; border-width: .12rem; }
.max-spinner-lg { inline-size: 3rem; block-size: 3rem; border-width: .24rem; }
.max-button[aria-busy="true"], .max-icon-button[aria-busy="true"], [data-ui="maximalist"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) { gap: .55rem; cursor: progress; }
.max-button[aria-busy="true"]::after, .max-icon-button[aria-busy="true"]::after, [data-ui="maximalist"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after {
  content: "";
  display: inline-block;
  inline-size: 1em;
  block-size: 1em;
  border: .16em solid rgb(var(--max-primary-text-rgb) / .42);
  border-block-start-color: currentColor;
  border-radius: 50%;
  animation: max-spin .75s linear infinite;
}
@keyframes max-spin { to { transform: rotate(360deg); } }


@media (prefers-reduced-motion: reduce) {
  [data-ui="maximalist"] *, [data-ui="maximalist"] *::before, [data-ui="maximalist"] *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}
@media (prefers-contrast: more) {
  [data-ui="maximalist"] { --max-border-alpha: 1; --max-focus-alpha: .75; }
}
@media (forced-colors: active) {
  [data-ui="maximalist"] * { forced-color-adjust: auto; }
  [data-ui="maximalist"] :where(:focus-visible) { outline: 3px solid CanvasText; }
}
@media print {
  [data-ui="maximalist"] { background: #fff !important; color: #000 !important; }
  [data-ui="maximalist"] * { box-shadow: none !important; text-shadow: none !important; }
  [data-ui="maximalist"] a { color: #000 !important; text-decoration: underline; }
}
}


/* styles/bauhaus.css */
/* =========================================================
   UI Style Kit CSS — Bauhaus / Swiss Modern Theme System
   Includes 10 color schemes, light/dark/contrast modes,
   component classes, native element coverage, and CSS-only
   accessibility presentation helpers.

   Usage:
   <body data-ui="bauhaus" data-theme="midnight-gold" data-mode="light">
   <body data-ui="bauhaus" data-theme="arctic-indigo" data-mode="dark">
   <body data-ui="bauhaus" data-theme="cyber-lime" data-mode="contrast">
========================================================= */


@layer ui-style-kit.bauhaus {
:root {
  --bau-font-sans: Helvetica Neue, Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
  --bau-font-display: Helvetica Neue, Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
  --bau-font-body: var(--bau-font-sans);
  --bau-font-heading: var(--bau-font-display);
  --bau-font-control: var(--bau-font-display);
  --bau-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --bau-radius-xs: .25rem;
  --bau-radius-sm: .5rem;
  --bau-radius-md: 0.125rem;
  --bau-radius-lg: 0.125rem;
  --bau-radius-xl: calc(0.125rem + .5rem);
  --bau-radius-pill: 999px;
  --bau-space-1: .25rem;
  --bau-space-2: .5rem;
  --bau-space-3: .75rem;
  --bau-space-4: 1rem;
  --bau-space-5: 1.25rem;
  --bau-space-6: 1.5rem;
  --bau-space-8: 2rem;
  --bau-transition-fast: 150ms ease;
  --bau-transition-base: 240ms ease;
}

[data-ui="bauhaus"][data-mode="light"] {
  color-scheme: light;
  --bau-panel-alpha: .98;
  --bau-panel-soft-alpha: .78;
  --bau-border-alpha: .58;
  --bau-shadow-alpha: .12;
  --bau-focus-alpha: .34;
}

[data-ui="bauhaus"][data-mode="dark"] {
  color-scheme: dark;
  --bau-panel-alpha: .92;
  --bau-panel-soft-alpha: .64;
  --bau-border-alpha: .52;
  --bau-shadow-alpha: .34;
  --bau-focus-alpha: .42;
}

[data-ui="bauhaus"][data-mode="contrast"] {
  color-scheme: dark;
  --bau-panel-alpha: 1;
  --bau-panel-soft-alpha: .92;
  --bau-border-alpha: 1;
  --bau-shadow-alpha: .5;
  --bau-focus-alpha: .72;
}

[data-ui="bauhaus"][data-theme][data-mode] {
  /* Shared scheme aliases preserve the existing prefixed token API. */
  --bau-bg-rgb: var(--usk-bg-rgb);
  --bau-surface-rgb: var(--usk-surface-rgb);
  --bau-surface-strong-rgb: var(--usk-surface-strong-rgb);
  --bau-surface-soft-rgb: var(--usk-surface-soft-rgb);
  --bau-text-rgb: var(--usk-text-rgb);
  --bau-text-muted-rgb: var(--usk-text-muted-rgb);
  --bau-border-rgb: var(--usk-border-rgb);
  --bau-primary-rgb: var(--usk-primary-rgb);
  --bau-primary-hover-rgb: var(--usk-primary-hover-rgb);
  --bau-primary-text-rgb: var(--usk-primary-text-rgb);
  --bau-secondary-rgb: var(--usk-secondary-rgb);
  --bau-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
  --bau-secondary-text-rgb: var(--usk-secondary-text-rgb);
  --bau-accent-rgb: var(--usk-accent-rgb);
  --bau-success-rgb: var(--usk-success-rgb);
  --bau-warning-rgb: var(--usk-warning-rgb);
  --bau-danger-rgb: var(--usk-danger-rgb);
  --bau-link-rgb: var(--usk-link-rgb);
  --bau-accent-text-rgb: var(--usk-accent-text-rgb);
  --bau-success-text-rgb: var(--usk-success-text-rgb);
  --bau-warning-text-rgb: var(--usk-warning-text-rgb);
  --bau-danger-text-rgb: var(--usk-danger-text-rgb);
  --bau-focus-rgb: var(--usk-focus-rgb);
  /* Native fallback selectors inherit visual identity through shared tokens. */
  --usk-native-surface: var(--bau-surface);
  --usk-native-surface-strong: var(--bau-surface-strong);
  --usk-native-surface-soft: var(--bau-surface-soft);
  --usk-native-card-bg: var(--bau-card-bg);
  --usk-native-control-bg: var(--bau-control-bg);
  --usk-native-text: var(--bau-text);
  --usk-native-text-muted: var(--bau-text-muted);
  --usk-native-border: var(--bau-border);
  --usk-native-primary: var(--bau-primary);
  --usk-native-primary-hover: var(--bau-primary-hover);
  --usk-native-on-primary: var(--bau-on-primary);
  --usk-native-focus: var(--bau-focus);
  --usk-native-success: var(--bau-success);
  --usk-native-warning: var(--bau-warning);
  --usk-native-danger: var(--bau-danger);
  --usk-native-link: var(--bau-link);
  --usk-native-font-body: var(--bau-font-body);
  --usk-native-font-heading: var(--bau-font-heading);
  --usk-native-font-control: var(--bau-font-control);
  --usk-native-font-mono: var(--bau-font-mono);
  --usk-native-radius-sm: var(--bau-radius-sm);
  --usk-native-radius: var(--bau-radius-md);
  --usk-native-radius-lg: var(--bau-radius-lg);
  --usk-native-shadow: var(--bau-shadow-sm, none);
  --usk-native-shadow-md: var(--bau-shadow-md, var(--usk-native-shadow));
  --usk-native-focus-ring: var(--bau-focus-ring, 0 0 0 3px rgb(var(--bau-focus-rgb) / .28));
  --usk-native-border-width: 1px;
  --usk-native-field-gap: .5rem;
  --usk-native-panel-padding: var(--bau-space-5);
  --bau-bg: rgb(var(--bau-bg-rgb));
  --bau-surface: rgb(var(--bau-surface-rgb) / var(--bau-panel-alpha));
  --bau-surface-strong: rgb(var(--bau-surface-strong-rgb) / var(--bau-panel-alpha));
  --bau-surface-soft: rgb(var(--bau-surface-soft-rgb) / var(--bau-panel-soft-alpha));
  --bau-text: rgb(var(--bau-text-rgb));
  --bau-text-muted: rgb(var(--bau-text-muted-rgb));
  --bau-fg: var(--bau-text);
  --bau-surface-fg: var(--bau-text);
  --bau-muted: var(--bau-text-muted);
  --bau-border: rgb(var(--bau-border-rgb) / var(--bau-border-alpha));
  --bau-control-fg: var(--bau-text);
  --bau-primary: rgb(var(--bau-primary-rgb));
  --bau-primary-hover: rgb(var(--bau-primary-hover-rgb));
  --bau-primary-text: rgb(var(--bau-primary-text-rgb));
  --bau-secondary: rgb(var(--bau-secondary-rgb));
  --bau-secondary-hover: rgb(var(--bau-secondary-hover-rgb));
  --bau-secondary-text: rgb(var(--bau-secondary-text-rgb));
  --bau-on-primary: var(--bau-primary-text);
  --bau-on-secondary: var(--bau-secondary-text);
  --bau-on-accent: rgb(var(--bau-accent-text-rgb));
  --bau-on-success: rgb(var(--bau-success-text-rgb));
  --bau-on-warning: rgb(var(--bau-warning-text-rgb));
  --bau-on-danger: rgb(var(--bau-danger-text-rgb));
  --bau-accent: rgb(var(--bau-accent-rgb));
  --bau-success: rgb(var(--bau-success-rgb));
  --bau-warning: rgb(var(--bau-warning-rgb));
  --bau-danger: rgb(var(--bau-danger-rgb));
  --bau-link: rgb(var(--bau-link-rgb));
  --bau-focus: rgb(var(--bau-focus-rgb));
  --bau-focus-ring: 0 0 0 3px rgb(var(--bau-focus-rgb) / var(--bau-focus-alpha));
  --bau-theme-bg-size: auto, auto, 48px 48px, 48px 48px, auto;
  --bau-theme-bg: radial-gradient(circle at 0% 0%, rgb(var(--bau-primary-rgb) / .13), transparent 30rem), radial-gradient(circle at 100% 0%, rgb(var(--bau-accent-rgb) / .10), transparent 28rem), linear-gradient(90deg, rgb(var(--bau-border-rgb) / .10) 1px, transparent 1px), linear-gradient(rgb(var(--bau-border-rgb) / .10) 1px, transparent 1px), var(--bau-bg);
  --bau-card-bg: linear-gradient(135deg, rgb(var(--bau-primary-rgb) / .10), rgb(var(--bau-accent-rgb) / .055) 42%, rgb(var(--bau-surface-strong-rgb) / var(--bau-panel-alpha)) 100%), var(--bau-surface);
  --bau-control-bg: linear-gradient(180deg, rgb(var(--bau-surface-strong-rgb) / var(--bau-panel-alpha)), rgb(var(--bau-surface-soft-rgb) / var(--bau-panel-soft-alpha)));
  --bau-spinner-track: rgb(var(--bau-border-rgb) / max(.28, calc(var(--bau-border-alpha) * .7)));
  --bau-spinner-stroke: var(--bau-primary);
  --bau-spinner-accent: var(--bau-accent);
}































/* =========================================================
   Base Page + Layout
========================================================= */

[data-ui="bauhaus"] {
  min-height: 100vh;
  background: linear-gradient(90deg, rgb(var(--bau-border-rgb) / .08) 1px, transparent 1px), linear-gradient(rgb(var(--bau-border-rgb) / .08) 1px, transparent 1px), var(--bau-bg); background-size: 48px 48px;
  color: var(--bau-text);
  font-family: var(--bau-font-body);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[data-ui="bauhaus"] *,
[data-ui="bauhaus"] *::before,
[data-ui="bauhaus"] *::after { box-sizing: border-box; }

[data-ui="bauhaus"][data-theme][data-mode] { background: var(--bau-theme-bg); background-size: var(--bau-theme-bg-size); }

.bau-page { min-height: 100vh; padding: clamp(1rem, 4vw, 3rem); }
.bau-container { width: min(100% - 2rem, 1200px); margin-inline: auto; }
.bau-section { display: grid; gap: var(--bau-space-5); padding: clamp(1rem, 3vw, 2rem); }
.bau-stack { display: flex; flex-direction: column; gap: var(--bau-space-4); }
.bau-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bau-space-3); }
.bau-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--bau-space-5); }
.bau-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: var(--bau-space-6); align-items: start; }

/* =========================================================
   Typography
========================================================= */

.bau-title, .bau-heading, .bau-kicker, .bau-button, .bau-badge, .bau-nav-link { font-family: var(--bau-font-heading); }
.bau-title { margin: 0; color: var(--bau-text); font-size: clamp(2rem, 5vw, 3.7rem); line-height: 1.02; letter-spacing: -0.06em; text-transform: uppercase; }
.bau-heading { margin: 0; color: var(--bau-text); font-size: clamp(1.2rem, 2.5vw, 2rem); line-height: 1.15; letter-spacing: -0.03em; }
.bau-kicker { margin: 0; color: var(--bau-primary); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.bau-subtitle, .bau-copy { margin: 0; color: var(--bau-text-muted); line-height: 1.65; }
.bau-text-muted { color: var(--bau-text-muted); }
.bau-divider { width: 100%; height: 2px; border: 0; background: var(--bau-border); }

/* =========================================================
   Surfaces
========================================================= */

.bau-surface, .bau-card, .bau-panel, .bau-toolbar, .bau-table-wrap {
  position: relative;
  background: linear-gradient(90deg, rgb(var(--bau-primary-rgb) / .1) 0 .5rem, transparent .5rem), var(--bau-surface);
  color: var(--bau-text);
  border: 2px solid var(--bau-border);
  border-radius: var(--bau-radius-lg);
  box-shadow: 6px 6px 0 rgb(var(--bau-primary-rgb) / .55);
  transition: transform var(--bau-transition-base), box-shadow var(--bau-transition-base), border-color var(--bau-transition-base), background var(--bau-transition-base);
}
.bau-card, .bau-panel { padding: var(--bau-space-6); }
.bau-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--bau-space-4); padding: var(--bau-space-4); }
.bau-surface-sm { border-radius: var(--bau-radius-md); box-shadow: 0 6px 18px rgb(0 0 0 / calc(var(--bau-shadow-alpha) * .72)); }
.bau-surface-lg { border-radius: var(--bau-radius-xl); box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--bau-shadow-alpha) + .08)); }
.bau-well, .bau-inset { background: var(--bau-surface-soft); color: var(--bau-text); border: 2px solid rgb(var(--bau-border-rgb) / calc(var(--bau-border-alpha) * .7)); border-radius: var(--bau-radius-md); padding: var(--bau-space-5); box-shadow: inset 0 1px 3px rgb(0 0 0 / .08); }
.bau-hover-lift:hover { transform: translate(-3px, -3px); box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--bau-shadow-alpha) + .12)); }

/* =========================================================
   Buttons
========================================================= */

.bau-button, .bau-icon-button {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--bau-space-2);
  min-height: 2.75rem; padding: .75rem 1.1rem; background: var(--bau-surface); color: var(--bau-text);
  border: 2px solid var(--bau-border); border-radius: var(--bau-radius-md); box-shadow: 0 6px 18px rgb(0 0 0 / var(--bau-shadow-alpha));
  font: inherit; font-weight: 800; line-height: 1; text-decoration: none; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none;
  transition: color var(--bau-transition-fast), background var(--bau-transition-fast), border-color var(--bau-transition-fast), box-shadow var(--bau-transition-fast), transform var(--bau-transition-fast);
}
.bau-button:hover, .bau-icon-button:hover { transform: translateY(-1px); border-color: var(--bau-primary); }
.bau-button:active, .bau-icon-button:active, .bau-button[aria-pressed="true"], .bau-icon-button[aria-pressed="true"], .bau-button.is-active, .bau-icon-button.is-active { transform: translateY(1px); box-shadow: inset 0 3px 10px rgb(0 0 0 / .18); }
.bau-button-primary { background: var(--bau-primary); color: var(--bau-on-primary); border-color: var(--bau-primary); }
.bau-button-primary:hover { background: var(--bau-primary-hover); border-color: var(--bau-primary-hover); }
.bau-button-secondary { background: var(--bau-secondary); color: var(--bau-on-secondary); border-color: var(--bau-secondary); }
.bau-button-secondary:hover { background: var(--bau-secondary-hover); border-color: var(--bau-secondary-hover); }
.bau-button-danger { background: var(--bau-danger); color: var(--bau-on-danger); border-color: var(--bau-danger); }
.bau-button-ghost { background: transparent; color: var(--bau-text); box-shadow: none; }
.bau-icon-button { width: 2.75rem; padding: 0; border-radius: var(--bau-radius-pill); }
.bau-button:disabled, .bau-icon-button:disabled, .bau-disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* Theme-responsive component defaults */
.bau-card, .bau-panel { background: var(--bau-card-bg); }
.bau-toolbar, .bau-table-wrap { background: var(--bau-control-bg); }
.bau-button:not(.bau-button-primary):not(.bau-button-secondary):not(.bau-button-danger):not(.bau-button-ghost), .bau-icon-button { background: var(--bau-control-bg); }
.bau-button, .bau-icon-button, .bau-badge, .bau-nav-link { font-family: var(--bau-font-control); }


/* =========================================================
   Forms
========================================================= */

.bau-field { display: flex; flex-direction: column; gap: var(--bau-space-2); }
.bau-label { color: var(--bau-text); font-size: .925rem; font-weight: 800; }
.bau-input, .bau-textarea, .bau-select {
  width: 100%; min-height: 2.875rem; padding: .75rem 1rem; background: var(--bau-surface-soft); color: var(--bau-text);
  border: 2px solid var(--bau-border); border-radius: var(--bau-radius-md); font: inherit; outline: none;
  transition: background var(--bau-transition-fast), border-color var(--bau-transition-fast), box-shadow var(--bau-transition-fast);
}
.bau-textarea { min-height: 8rem; resize: vertical; }
.bau-input::placeholder, .bau-textarea::placeholder { color: var(--bau-text-muted); opacity: .82; }
.bau-input:hover, .bau-textarea:hover, .bau-select:hover { border-color: rgb(var(--bau-primary-rgb) / .58); }
.bau-input:focus, .bau-textarea:focus, .bau-select:focus { border-color: var(--bau-focus); box-shadow: var(--bau-focus-ring); }
.bau-help-text { color: var(--bau-text-muted); font-size: .875rem; line-height: 1.45; }

/* Checkbox / Radio */
.bau-check, .bau-radio { display: inline-flex; align-items: center; gap: var(--bau-space-2); color: var(--bau-text); cursor: pointer; }
.bau-check input, .bau-radio input { position: absolute; opacity: 0; pointer-events: none; }
.bau-check-control, .bau-radio-control { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; background: var(--bau-surface-soft); border: 2px solid var(--bau-border); transition: background var(--bau-transition-fast), box-shadow var(--bau-transition-fast); }
.bau-check-control { border-radius: var(--bau-radius-xs); }
.bau-radio-control { border-radius: 50%; }
.bau-check input:checked + .bau-check-control, .bau-radio input:checked + .bau-radio-control { background: var(--bau-primary); border-color: var(--bau-primary); box-shadow: var(--bau-focus-ring); }
.bau-check input:checked + .bau-check-control::after { content: "✓"; color: var(--bau-on-primary); font-size: .9rem; font-weight: 900; }
.bau-radio input:checked + .bau-radio-control::after { content: ""; width: .55rem; height: .55rem; background: var(--bau-on-primary); border-radius: 50%; }

/* Switch */
.bau-switch { display: inline-flex; align-items: center; gap: var(--bau-space-3); color: var(--bau-text); cursor: pointer; }
.bau-switch input { position: absolute; opacity: 0; pointer-events: none; }
.bau-switch-track { position: relative; width: 3.5rem; height: 1.9rem; background: var(--bau-surface-soft); border: 2px solid var(--bau-border); border-radius: var(--bau-radius-pill); transition: background var(--bau-transition-fast), box-shadow var(--bau-transition-fast); }
.bau-switch-thumb { position: absolute; top: .22rem; left: .22rem; width: 1.34rem; height: 1.34rem; background: var(--bau-surface-strong); border: 2px solid var(--bau-border); border-radius: 50%; box-shadow: 0 4px 12px rgb(0 0 0 / var(--bau-shadow-alpha)); transition: left var(--bau-transition-fast), background var(--bau-transition-fast); }
.bau-switch input:checked + .bau-switch-track { background: var(--bau-primary); border-color: var(--bau-primary); }
.bau-switch input:checked + .bau-switch-track .bau-switch-thumb { left: calc(100% - 1.34rem - .22rem); background: var(--bau-on-primary); }

/* =========================================================
   Badges / Nav / Progress / Alerts / Tables
========================================================= */

.bau-badge { display: inline-flex; align-items: center; gap: var(--bau-space-1); min-height: 1.75rem; padding: .35rem .7rem; background: var(--bau-surface-soft); color: var(--bau-text); border: 2px solid var(--bau-border); border-radius: var(--bau-radius-pill); font-size: .8125rem; font-weight: 850; line-height: 1; }
.bau-badge-primary { background: var(--bau-primary); color: var(--bau-on-primary); border-color: var(--bau-primary); }
.bau-badge-secondary { background: var(--bau-secondary); color: var(--bau-on-secondary); border-color: var(--bau-secondary); }
.bau-badge-success { background: var(--bau-success); color: var(--bau-on-success); border-color: var(--bau-success); }
.bau-badge-warning { background: var(--bau-warning); color: var(--bau-on-warning); border-color: var(--bau-warning); }
.bau-badge-danger { background: var(--bau-danger); color: var(--bau-on-danger); border-color: var(--bau-danger); }

.bau-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bau-space-2); padding: var(--bau-space-2); background: var(--bau-surface); border: 2px solid var(--bau-border); border-radius: var(--bau-radius-xl); box-shadow: 0 10px 30px rgb(0 0 0 / var(--bau-shadow-alpha)); }
.bau-nav-link { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: .65rem 1rem; color: var(--bau-text-muted); border-radius: var(--bau-radius-pill); text-decoration: none; font-weight: 850; transition: color var(--bau-transition-fast), background var(--bau-transition-fast), box-shadow var(--bau-transition-fast); }
.bau-nav-link:hover { color: var(--bau-text); background: var(--bau-surface-soft); }
.bau-nav-link[aria-current="page"], .bau-nav-link.is-active { color: var(--bau-on-primary); background: var(--bau-primary); }

/* Tooltips use compact contrast surfaces that stay readable across theme modes. */
.bau-tooltip, [data-ui="bauhaus"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
  display: inline-flex; align-items: center; gap: .45rem; max-inline-size: 16rem; padding: .58rem .78rem;
  background: linear-gradient(90deg, var(--bau-primary) 0 .45rem, var(--bau-surface-strong) .45rem); color: var(--bau-text);
  border: 2px double var(--bau-border); border-radius: 0; box-shadow: none; font-size: .82rem; font-weight: 900; line-height: 1.25;
  text-transform: uppercase; letter-spacing: .08em;
}
.bau-tooltip-arrow { inline-size: .6rem; block-size: .6rem; flex: 0 0 auto; background: var(--bau-accent); transform: rotate(45deg); }

.bau-progress { width: 100%; height: .9rem; overflow: hidden; background: var(--bau-surface-soft); border: 2px solid var(--bau-border); border-radius: var(--bau-radius-pill); }
.bau-progress-bar { height: 100%; width: var(--bau-progress-value, 50%); background: linear-gradient(90deg, var(--bau-primary), var(--bau-accent)); border-radius: inherit; }

.bau-alert { display: grid; gap: var(--bau-space-2); padding: var(--bau-space-4); background: var(--bau-surface); color: var(--bau-text); border: 2px solid var(--bau-border); border-radius: var(--bau-radius-lg); box-shadow: 0 10px 30px rgb(0 0 0 / var(--bau-shadow-alpha)); }
.bau-alert-success { border-left-color: var(--bau-success); }
.bau-alert-warning { border-left-color: var(--bau-warning); }
.bau-alert-danger { border-left-color: var(--bau-danger); }
.bau-alert-title { margin: 0; font-weight: 900; }
.bau-alert-body { margin: 0; color: var(--bau-text-muted); line-height: 1.55; }

.bau-table-wrap { overflow: auto; }
.bau-table { width: 100%; border-collapse: collapse; }
.bau-table th, .bau-table td { padding: .95rem 1rem; text-align: left; border-bottom: 2px solid var(--bau-border); }
.bau-table th { color: var(--bau-text); font-size: .82rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; background: rgb(var(--bau-primary-rgb) / .08); }
.bau-table td { color: var(--bau-text-muted); }
.bau-table tr:hover td { background: rgb(var(--bau-primary-rgb) / .045); }

/* =========================================================
   Utilities
========================================================= */

.bau-text-primary { color: var(--bau-primary); } .bau-text-secondary { color: var(--bau-secondary); } .bau-text-accent { color: var(--bau-accent); } .bau-text-success { color: var(--bau-success); } .bau-text-warning { color: var(--bau-warning); } .bau-text-danger { color: var(--bau-danger); }
.bau-bg-primary { background: var(--bau-primary); color: var(--bau-on-primary); } .bau-bg-secondary { background: var(--bau-secondary); color: var(--bau-on-secondary); }
.bau-border { border: 2px solid var(--bau-border); } .bau-rounded { border-radius: var(--bau-radius-md); } .bau-rounded-lg { border-radius: var(--bau-radius-lg); } .bau-rounded-xl { border-radius: var(--bau-radius-xl); } .bau-pill { border-radius: var(--bau-radius-pill); }
.bau-sr-only, .bau-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.bau-skip-link { position: absolute; left: 1rem; top: 1rem; z-index: 9999; transform: translateY(-150%); padding: .75rem 1rem; background: var(--bau-primary); color: var(--bau-on-primary); border-radius: var(--bau-radius-md); font-weight: 900; }
.bau-skip-link:focus { transform: translateY(0); }

/* Bauhaus-specific geometric helpers */
.bau-composition { position: relative; overflow: hidden; }
.bau-composition::after { content: ""; position: absolute; inline-size: 7rem; block-size: 7rem; right: -2rem; top: -2rem; background: var(--bau-primary); border-radius: 50%; opacity: .22; }
.bau-block { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 4rem; min-block-size: 4rem; background: var(--bau-primary); color: var(--bau-on-primary); border: 2px solid var(--bau-border); font-weight: 950; }
.bau-rail { border-left: .75rem solid var(--bau-primary); padding-left: var(--bau-space-4); }

/* Spinner geometry follows the bauhaus preset's hard-edged composition. */
.bau-spinner, .bau-loading-spinner, [data-ui="bauhaus"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
  display: inline-block;
  inline-size: 2rem;
  block-size: 2rem;
  border: .2rem double var(--bau-border);
  border-block-start-color: var(--bau-spinner-stroke);
  border-inline-end-color: var(--bau-spinner-accent);
  border-radius: var(--bau-radius-xs);
  background: conic-gradient(var(--bau-primary) 0 25%, var(--bau-surface) 0 50%, var(--bau-accent) 0 75%, var(--bau-surface-soft) 0);
  vertical-align: -.2em;
  animation: bau-spin .8s steps(4, end) infinite;
}
.bau-spinner-sm { inline-size: 1rem; block-size: 1rem; border-width: .12rem; }
.bau-spinner-lg { inline-size: 3rem; block-size: 3rem; border-width: .28rem; }
.bau-button[aria-busy="true"], .bau-icon-button[aria-busy="true"], [data-ui="bauhaus"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) { gap: .55rem; cursor: progress; }
.bau-button[aria-busy="true"]::after, .bau-icon-button[aria-busy="true"]::after, [data-ui="bauhaus"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after {
  content: "";
  display: inline-block;
  inline-size: 1em;
  block-size: 1em;
  border: .16em solid rgb(var(--bau-primary-text-rgb) / .42);
  border-block-start-color: currentColor;
  border-radius: 50%;
  animation: bau-spin .75s linear infinite;
}
@keyframes bau-spin { to { transform: rotate(360deg); } }


@media (prefers-reduced-motion: reduce) {
  [data-ui="bauhaus"] *, [data-ui="bauhaus"] *::before, [data-ui="bauhaus"] *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}
@media (prefers-contrast: more) {
  [data-ui="bauhaus"] { --bau-border-alpha: 1; --bau-focus-alpha: .75; }
}
@media (forced-colors: active) {
  [data-ui="bauhaus"] * { forced-color-adjust: auto; }
  [data-ui="bauhaus"] :where(:focus-visible) { outline: 3px solid CanvasText; }
}
@media print {
  [data-ui="bauhaus"] { background: #fff !important; color: #000 !important; }
  [data-ui="bauhaus"] * { box-shadow: none !important; text-shadow: none !important; }
  [data-ui="bauhaus"] a { color: #000 !important; text-decoration: underline; }
}
}


/* styles/tactile.css */
/* =========================================================
   UI Style Kit CSS — Skeuomorphic / Tactile Theme System
   Includes 10 color schemes, light/dark/contrast modes,
   component classes, native element coverage, and CSS-only
   accessibility presentation helpers.

   Usage:
   <body data-ui="tactile" data-theme="midnight-gold" data-mode="light">
   <body data-ui="tactile" data-theme="arctic-indigo" data-mode="dark">
   <body data-ui="tactile" data-theme="cyber-lime" data-mode="contrast">
========================================================= */


@layer ui-style-kit.tactile {
:root {
  --tactile-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tactile-font-display: Inter, ui-sans-serif, system-ui, sans-serif;
  --tactile-font-body: var(--tactile-font-sans);
  --tactile-font-heading: var(--tactile-font-display);
  --tactile-font-control: var(--tactile-font-display);
  --tactile-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --tactile-radius-xs: .25rem;
  --tactile-radius-sm: .5rem;
  --tactile-radius-md: 0.9rem;
  --tactile-radius-lg: 1.4rem;
  --tactile-radius-xl: calc(1.4rem + .5rem);
  --tactile-radius-pill: 999px;
  --tactile-space-1: .25rem;
  --tactile-space-2: .5rem;
  --tactile-space-3: .75rem;
  --tactile-space-4: 1rem;
  --tactile-space-5: 1.25rem;
  --tactile-space-6: 1.5rem;
  --tactile-space-8: 2rem;
  --tactile-transition-fast: 150ms ease;
  --tactile-transition-base: 240ms ease;
}

[data-ui="tactile"][data-mode="light"] {
  color-scheme: light;
  --tactile-panel-alpha: .98;
  --tactile-panel-soft-alpha: .78;
  --tactile-border-alpha: .58;
  --tactile-shadow-alpha: .12;
  --tactile-focus-alpha: .34;
}

[data-ui="tactile"][data-mode="dark"] {
  color-scheme: dark;
  --tactile-panel-alpha: .92;
  --tactile-panel-soft-alpha: .64;
  --tactile-border-alpha: .52;
  --tactile-shadow-alpha: .34;
  --tactile-focus-alpha: .42;
}

[data-ui="tactile"][data-mode="contrast"] {
  color-scheme: dark;
  --tactile-panel-alpha: 1;
  --tactile-panel-soft-alpha: .92;
  --tactile-border-alpha: 1;
  --tactile-shadow-alpha: .5;
  --tactile-focus-alpha: .72;
}

[data-ui="tactile"][data-theme][data-mode] {
  /* Shared scheme aliases preserve the existing prefixed token API. */
  --tactile-bg-rgb: var(--usk-bg-rgb);
  --tactile-surface-rgb: var(--usk-surface-rgb);
  --tactile-surface-strong-rgb: var(--usk-surface-strong-rgb);
  --tactile-surface-soft-rgb: var(--usk-surface-soft-rgb);
  --tactile-text-rgb: var(--usk-text-rgb);
  --tactile-text-muted-rgb: var(--usk-text-muted-rgb);
  --tactile-border-rgb: var(--usk-border-rgb);
  --tactile-primary-rgb: var(--usk-primary-rgb);
  --tactile-primary-hover-rgb: var(--usk-primary-hover-rgb);
  --tactile-primary-text-rgb: var(--usk-primary-text-rgb);
  --tactile-secondary-rgb: var(--usk-secondary-rgb);
  --tactile-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
  --tactile-secondary-text-rgb: var(--usk-secondary-text-rgb);
  --tactile-accent-rgb: var(--usk-accent-rgb);
  --tactile-success-rgb: var(--usk-success-rgb);
  --tactile-warning-rgb: var(--usk-warning-rgb);
  --tactile-danger-rgb: var(--usk-danger-rgb);
  --tactile-link-rgb: var(--usk-link-rgb);
  --tactile-accent-text-rgb: var(--usk-accent-text-rgb);
  --tactile-success-text-rgb: var(--usk-success-text-rgb);
  --tactile-warning-text-rgb: var(--usk-warning-text-rgb);
  --tactile-danger-text-rgb: var(--usk-danger-text-rgb);
  --tactile-focus-rgb: var(--usk-focus-rgb);
  /* Native fallback selectors inherit visual identity through shared tokens. */
  --usk-native-surface: var(--tactile-surface);
  --usk-native-surface-strong: var(--tactile-surface-strong);
  --usk-native-surface-soft: var(--tactile-surface-soft);
  --usk-native-card-bg: var(--tactile-card-bg);
  --usk-native-control-bg: var(--tactile-control-bg);
  --usk-native-text: var(--tactile-text);
  --usk-native-text-muted: var(--tactile-text-muted);
  --usk-native-border: var(--tactile-border);
  --usk-native-primary: var(--tactile-primary);
  --usk-native-primary-hover: var(--tactile-primary-hover);
  --usk-native-on-primary: var(--tactile-on-primary);
  --usk-native-focus: var(--tactile-focus);
  --usk-native-success: var(--tactile-success);
  --usk-native-warning: var(--tactile-warning);
  --usk-native-danger: var(--tactile-danger);
  --usk-native-link: var(--tactile-link);
  --usk-native-font-body: var(--tactile-font-body);
  --usk-native-font-heading: var(--tactile-font-heading);
  --usk-native-font-control: var(--tactile-font-control);
  --usk-native-font-mono: var(--tactile-font-mono);
  --usk-native-radius-sm: var(--tactile-radius-sm);
  --usk-native-radius: var(--tactile-radius-md);
  --usk-native-radius-lg: var(--tactile-radius-lg);
  --usk-native-shadow: var(--tactile-shadow-sm, none);
  --usk-native-shadow-md: var(--tactile-shadow-md, var(--usk-native-shadow));
  --usk-native-focus-ring: var(--tactile-focus-ring, 0 0 0 3px rgb(var(--tactile-focus-rgb) / .28));
  --usk-native-border-width: 1px;
  --usk-native-field-gap: .5rem;
  --usk-native-panel-padding: var(--tactile-space-5);
  --tactile-bg: rgb(var(--tactile-bg-rgb));
  --tactile-surface: rgb(var(--tactile-surface-rgb) / var(--tactile-panel-alpha));
  --tactile-surface-strong: rgb(var(--tactile-surface-strong-rgb) / var(--tactile-panel-alpha));
  --tactile-surface-soft: rgb(var(--tactile-surface-soft-rgb) / var(--tactile-panel-soft-alpha));
  --tactile-text: rgb(var(--tactile-text-rgb));
  --tactile-text-muted: rgb(var(--tactile-text-muted-rgb));
  --tactile-fg: var(--tactile-text);
  --tactile-surface-fg: var(--tactile-text);
  --tactile-muted: var(--tactile-text-muted);
  --tactile-border: rgb(var(--tactile-border-rgb) / var(--tactile-border-alpha));
  --tactile-control-fg: var(--tactile-text);
  --tactile-primary: rgb(var(--tactile-primary-rgb));
  --tactile-primary-hover: rgb(var(--tactile-primary-hover-rgb));
  --tactile-primary-text: rgb(var(--tactile-primary-text-rgb));
  --tactile-secondary: rgb(var(--tactile-secondary-rgb));
  --tactile-secondary-hover: rgb(var(--tactile-secondary-hover-rgb));
  --tactile-secondary-text: rgb(var(--tactile-secondary-text-rgb));
  --tactile-on-primary: var(--tactile-primary-text);
  --tactile-on-secondary: var(--tactile-secondary-text);
  --tactile-on-accent: rgb(var(--tactile-accent-text-rgb));
  --tactile-on-success: rgb(var(--tactile-success-text-rgb));
  --tactile-on-warning: rgb(var(--tactile-warning-text-rgb));
  --tactile-on-danger: rgb(var(--tactile-danger-text-rgb));
  --tactile-accent: rgb(var(--tactile-accent-rgb));
  --tactile-success: rgb(var(--tactile-success-rgb));
  --tactile-warning: rgb(var(--tactile-warning-rgb));
  --tactile-danger: rgb(var(--tactile-danger-rgb));
  --tactile-link: rgb(var(--tactile-link-rgb));
  --tactile-focus: rgb(var(--tactile-focus-rgb));
  --tactile-focus-ring: 0 0 0 3px rgb(var(--tactile-focus-rgb) / var(--tactile-focus-alpha));
  --tactile-theme-bg-size: auto;
  --tactile-theme-bg: radial-gradient(circle at 0% 0%, rgb(var(--tactile-primary-rgb) / .16), transparent 32rem), radial-gradient(circle at 100% 0%, rgb(var(--tactile-accent-rgb) / .12), transparent 30rem), radial-gradient(circle at 50% 100%, rgb(var(--tactile-secondary-rgb) / .10), transparent 34rem), var(--tactile-bg);
  --tactile-card-bg: linear-gradient(135deg, rgb(var(--tactile-primary-rgb) / .10), rgb(var(--tactile-accent-rgb) / .055) 42%, rgb(var(--tactile-surface-strong-rgb) / var(--tactile-panel-alpha)) 100%), var(--tactile-surface);
  --tactile-control-bg: linear-gradient(180deg, rgb(var(--tactile-surface-strong-rgb) / var(--tactile-panel-alpha)), rgb(var(--tactile-surface-soft-rgb) / var(--tactile-panel-soft-alpha)));
  --tactile-spinner-track: rgb(var(--tactile-border-rgb) / max(.28, calc(var(--tactile-border-alpha) * .7)));
  --tactile-spinner-stroke: var(--tactile-primary);
  --tactile-spinner-accent: var(--tactile-accent);
}































/* =========================================================
   Base Page + Layout
========================================================= */

[data-ui="tactile"] {
  min-height: 100vh;
  background: radial-gradient(circle at 50% -10%, rgb(255 255 255 / .08), transparent 30rem), var(--tactile-bg);
  color: var(--tactile-text);
  font-family: var(--tactile-font-body);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[data-ui="tactile"] *,
[data-ui="tactile"] *::before,
[data-ui="tactile"] *::after { box-sizing: border-box; }

[data-ui="tactile"][data-theme][data-mode] { background: var(--tactile-theme-bg); background-size: var(--tactile-theme-bg-size); }

.tactile-page { min-height: 100vh; padding: clamp(1rem, 4vw, 3rem); }
.tactile-container { width: min(100% - 2rem, 1200px); margin-inline: auto; }
.tactile-section { display: grid; gap: var(--tactile-space-5); padding: clamp(1rem, 3vw, 2rem); }
.tactile-stack { display: flex; flex-direction: column; gap: var(--tactile-space-4); }
.tactile-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tactile-space-3); }
.tactile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--tactile-space-5); }
.tactile-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: var(--tactile-space-6); align-items: start; }

/* =========================================================
   Typography
========================================================= */

.tactile-title, .tactile-heading, .tactile-kicker, .tactile-button, .tactile-badge, .tactile-nav-link { font-family: var(--tactile-font-heading); }
.tactile-title { margin: 0; color: var(--tactile-text); font-size: clamp(2rem, 5vw, 3.7rem); line-height: 1.02; letter-spacing: -0.045em; }
.tactile-heading { margin: 0; color: var(--tactile-text); font-size: clamp(1.2rem, 2.5vw, 2rem); line-height: 1.15; letter-spacing: -0.03em; }
.tactile-kicker { margin: 0; color: var(--tactile-primary); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.tactile-subtitle, .tactile-copy { margin: 0; color: var(--tactile-text-muted); line-height: 1.65; }
.tactile-text-muted { color: var(--tactile-text-muted); }
.tactile-divider { width: 100%; height: 1px; border: 0; background: var(--tactile-border); }

/* =========================================================
   Surfaces
========================================================= */

.tactile-surface, .tactile-card, .tactile-panel, .tactile-toolbar, .tactile-table-wrap {
  position: relative;
  background: linear-gradient(180deg, rgb(255 255 255 / .18), rgb(255 255 255 / .03)), linear-gradient(135deg, rgb(var(--tactile-primary-rgb) / .07), transparent 46%), var(--tactile-surface);
  color: var(--tactile-text);
  border: 1px solid var(--tactile-border);
  border-radius: var(--tactile-radius-lg);
  box-shadow: 0 18px 36px rgb(0 0 0 / var(--tactile-shadow-alpha)), inset 0 1px 0 rgb(255 255 255 / .25);
  transition: transform var(--tactile-transition-base), box-shadow var(--tactile-transition-base), border-color var(--tactile-transition-base), background var(--tactile-transition-base);
}
.tactile-card, .tactile-panel { padding: var(--tactile-space-6); }
.tactile-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tactile-space-4); padding: var(--tactile-space-4); }
.tactile-surface-sm { border-radius: var(--tactile-radius-md); box-shadow: 0 6px 18px rgb(0 0 0 / calc(var(--tactile-shadow-alpha) * .72)); }
.tactile-surface-lg { border-radius: var(--tactile-radius-xl); box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--tactile-shadow-alpha) + .08)); }
.tactile-well, .tactile-inset { background: var(--tactile-surface-soft); color: var(--tactile-text); border: 1px solid rgb(var(--tactile-border-rgb) / calc(var(--tactile-border-alpha) * .7)); border-radius: var(--tactile-radius-md); padding: var(--tactile-space-5); box-shadow: inset 0 1px 3px rgb(0 0 0 / .08); }
.tactile-hover-lift:hover { transform: translateY(-2px); box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--tactile-shadow-alpha) + .12)); }

/* =========================================================
   Buttons
========================================================= */

.tactile-button, .tactile-icon-button {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--tactile-space-2);
  min-height: 2.75rem; padding: .75rem 1.1rem; background: var(--tactile-surface); color: var(--tactile-text);
  border: 1px solid var(--tactile-border); border-radius: var(--tactile-radius-md); box-shadow: 0 6px 18px rgb(0 0 0 / var(--tactile-shadow-alpha));
  font: inherit; font-weight: 800; line-height: 1; text-decoration: none; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none;
  transition: color var(--tactile-transition-fast), background var(--tactile-transition-fast), border-color var(--tactile-transition-fast), box-shadow var(--tactile-transition-fast), transform var(--tactile-transition-fast);
}
.tactile-button:hover, .tactile-icon-button:hover { transform: translateY(-1px); border-color: var(--tactile-primary); }
.tactile-button:active, .tactile-icon-button:active, .tactile-button[aria-pressed="true"], .tactile-icon-button[aria-pressed="true"], .tactile-button.is-active, .tactile-icon-button.is-active { transform: translateY(1px); box-shadow: inset 0 3px 10px rgb(0 0 0 / .18); }
.tactile-button-primary { background: var(--tactile-primary); color: var(--tactile-on-primary); border-color: var(--tactile-primary); }
.tactile-button-primary:hover { background: var(--tactile-primary-hover); border-color: var(--tactile-primary-hover); }
.tactile-button-secondary { background: var(--tactile-secondary); color: var(--tactile-on-secondary); border-color: var(--tactile-secondary); }
.tactile-button-secondary:hover { background: var(--tactile-secondary-hover); border-color: var(--tactile-secondary-hover); }
.tactile-button-danger { background: var(--tactile-danger); color: var(--tactile-on-danger); border-color: var(--tactile-danger); }
.tactile-button-ghost { background: transparent; color: var(--tactile-text); box-shadow: none; }
.tactile-icon-button { width: 2.75rem; padding: 0; border-radius: var(--tactile-radius-pill); }
.tactile-button:disabled, .tactile-icon-button:disabled, .tactile-disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* Theme-responsive component defaults */
.tactile-card, .tactile-panel { background: var(--tactile-card-bg); }
.tactile-toolbar, .tactile-table-wrap { background: var(--tactile-control-bg); }
.tactile-button:not(.tactile-button-primary):not(.tactile-button-secondary):not(.tactile-button-danger):not(.tactile-button-ghost), .tactile-icon-button { background: var(--tactile-control-bg); }
.tactile-button, .tactile-icon-button, .tactile-badge, .tactile-nav-link { font-family: var(--tactile-font-control); }


/* =========================================================
   Forms
========================================================= */

.tactile-field { display: flex; flex-direction: column; gap: var(--tactile-space-2); }
.tactile-label { color: var(--tactile-text); font-size: .925rem; font-weight: 800; }
.tactile-input, .tactile-textarea, .tactile-select {
  width: 100%; min-height: 2.875rem; padding: .75rem 1rem; background: var(--tactile-surface-soft); color: var(--tactile-text);
  border: 1px solid var(--tactile-border); border-radius: var(--tactile-radius-md); font: inherit; outline: none;
  transition: background var(--tactile-transition-fast), border-color var(--tactile-transition-fast), box-shadow var(--tactile-transition-fast);
}
.tactile-textarea { min-height: 8rem; resize: vertical; }
.tactile-input::placeholder, .tactile-textarea::placeholder { color: var(--tactile-text-muted); opacity: .82; }
.tactile-input:hover, .tactile-textarea:hover, .tactile-select:hover { border-color: rgb(var(--tactile-primary-rgb) / .58); }
.tactile-input:focus, .tactile-textarea:focus, .tactile-select:focus { border-color: var(--tactile-focus); box-shadow: var(--tactile-focus-ring); }
.tactile-help-text { color: var(--tactile-text-muted); font-size: .875rem; line-height: 1.45; }

/* Checkbox / Radio */
.tactile-check, .tactile-radio { display: inline-flex; align-items: center; gap: var(--tactile-space-2); color: var(--tactile-text); cursor: pointer; }
.tactile-check input, .tactile-radio input { position: absolute; opacity: 0; pointer-events: none; }
.tactile-check-control, .tactile-radio-control { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; background: var(--tactile-surface-soft); border: 1px solid var(--tactile-border); transition: background var(--tactile-transition-fast), box-shadow var(--tactile-transition-fast); }
.tactile-check-control { border-radius: var(--tactile-radius-xs); }
.tactile-radio-control { border-radius: 50%; }
.tactile-check input:checked + .tactile-check-control, .tactile-radio input:checked + .tactile-radio-control { background: var(--tactile-primary); border-color: var(--tactile-primary); box-shadow: var(--tactile-focus-ring); }
.tactile-check input:checked + .tactile-check-control::after { content: "✓"; color: var(--tactile-on-primary); font-size: .9rem; font-weight: 900; }
.tactile-radio input:checked + .tactile-radio-control::after { content: ""; width: .55rem; height: .55rem; background: var(--tactile-on-primary); border-radius: 50%; }

/* Switch */
.tactile-switch { display: inline-flex; align-items: center; gap: var(--tactile-space-3); color: var(--tactile-text); cursor: pointer; }
.tactile-switch input { position: absolute; opacity: 0; pointer-events: none; }
.tactile-switch-track { position: relative; width: 3.5rem; height: 1.9rem; background: var(--tactile-surface-soft); border: 1px solid var(--tactile-border); border-radius: var(--tactile-radius-pill); transition: background var(--tactile-transition-fast), box-shadow var(--tactile-transition-fast); }
.tactile-switch-thumb { position: absolute; top: .22rem; left: .22rem; width: 1.34rem; height: 1.34rem; background: var(--tactile-surface-strong); border: 1px solid var(--tactile-border); border-radius: 50%; box-shadow: 0 4px 12px rgb(0 0 0 / var(--tactile-shadow-alpha)); transition: left var(--tactile-transition-fast), background var(--tactile-transition-fast); }
.tactile-switch input:checked + .tactile-switch-track { background: var(--tactile-primary); border-color: var(--tactile-primary); }
.tactile-switch input:checked + .tactile-switch-track .tactile-switch-thumb { left: calc(100% - 1.34rem - .22rem); background: var(--tactile-on-primary); }

/* =========================================================
   Badges / Nav / Progress / Alerts / Tables
========================================================= */

.tactile-badge { display: inline-flex; align-items: center; gap: var(--tactile-space-1); min-height: 1.75rem; padding: .35rem .7rem; background: var(--tactile-surface-soft); color: var(--tactile-text); border: 1px solid var(--tactile-border); border-radius: var(--tactile-radius-pill); font-size: .8125rem; font-weight: 850; line-height: 1; }
.tactile-badge-primary { background: var(--tactile-primary); color: var(--tactile-on-primary); border-color: var(--tactile-primary); }
.tactile-badge-secondary { background: var(--tactile-secondary); color: var(--tactile-on-secondary); border-color: var(--tactile-secondary); }
.tactile-badge-success { background: var(--tactile-success); color: var(--tactile-on-success); border-color: var(--tactile-success); }
.tactile-badge-warning { background: var(--tactile-warning); color: var(--tactile-on-warning); border-color: var(--tactile-warning); }
.tactile-badge-danger { background: var(--tactile-danger); color: var(--tactile-on-danger); border-color: var(--tactile-danger); }

.tactile-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tactile-space-2); padding: var(--tactile-space-2); background: var(--tactile-surface); border: 1px solid var(--tactile-border); border-radius: var(--tactile-radius-xl); box-shadow: 0 10px 30px rgb(0 0 0 / var(--tactile-shadow-alpha)); }
.tactile-nav-link { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: .65rem 1rem; color: var(--tactile-text-muted); border-radius: var(--tactile-radius-pill); text-decoration: none; font-weight: 850; transition: color var(--tactile-transition-fast), background var(--tactile-transition-fast), box-shadow var(--tactile-transition-fast); }
.tactile-nav-link:hover { color: var(--tactile-text); background: var(--tactile-surface-soft); }
.tactile-nav-link[aria-current="page"], .tactile-nav-link.is-active { color: var(--tactile-on-primary); background: var(--tactile-primary); }

/* Tooltips use compact contrast surfaces that stay readable across theme modes. */
.tactile-tooltip, [data-ui="tactile"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
  display: inline-flex; align-items: center; gap: .45rem; max-inline-size: 16rem; padding: .6rem .82rem;
  background: linear-gradient(180deg, rgb(255 255 255 / .18), rgb(0 0 0 / .08)), var(--tactile-surface-strong);
  color: var(--tactile-text); border: 1px solid var(--tactile-border); border-radius: var(--tactile-radius-lg);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .32), 0 .7rem 1.4rem rgb(0 0 0 / var(--tactile-shadow-alpha)); font-size: .82rem; font-weight: 850; line-height: 1.35;
}
.tactile-tooltip-arrow { inline-size: .6rem; block-size: .6rem; flex: 0 0 auto; background: var(--tactile-surface-strong); border: 1px solid var(--tactile-border); border-radius: .18rem; transform: rotate(45deg); }

.tactile-progress { width: 100%; height: .9rem; overflow: hidden; background: var(--tactile-surface-soft); border: 1px solid var(--tactile-border); border-radius: var(--tactile-radius-pill); }
.tactile-progress-bar { height: 100%; width: var(--tactile-progress-value, 50%); background: linear-gradient(90deg, var(--tactile-primary), var(--tactile-accent)); border-radius: inherit; }

.tactile-alert { display: grid; gap: var(--tactile-space-2); padding: var(--tactile-space-4); background: var(--tactile-surface); color: var(--tactile-text); border: 1px solid var(--tactile-border); border-radius: var(--tactile-radius-lg); box-shadow: 0 10px 30px rgb(0 0 0 / var(--tactile-shadow-alpha)); }
.tactile-alert-success { border-left-color: var(--tactile-success); }
.tactile-alert-warning { border-left-color: var(--tactile-warning); }
.tactile-alert-danger { border-left-color: var(--tactile-danger); }
.tactile-alert-title { margin: 0; font-weight: 900; }
.tactile-alert-body { margin: 0; color: var(--tactile-text-muted); line-height: 1.55; }

.tactile-table-wrap { overflow: auto; }
.tactile-table { width: 100%; border-collapse: collapse; }
.tactile-table th, .tactile-table td { padding: .95rem 1rem; text-align: left; border-bottom: 1px solid var(--tactile-border); }
.tactile-table th { color: var(--tactile-text); font-size: .82rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; background: rgb(var(--tactile-primary-rgb) / .08); }
.tactile-table td { color: var(--tactile-text-muted); }
.tactile-table tr:hover td { background: rgb(var(--tactile-primary-rgb) / .045); }

/* =========================================================
   Utilities
========================================================= */

.tactile-text-primary { color: var(--tactile-primary); } .tactile-text-secondary { color: var(--tactile-secondary); } .tactile-text-accent { color: var(--tactile-accent); } .tactile-text-success { color: var(--tactile-success); } .tactile-text-warning { color: var(--tactile-warning); } .tactile-text-danger { color: var(--tactile-danger); }
.tactile-bg-primary { background: var(--tactile-primary); color: var(--tactile-on-primary); } .tactile-bg-secondary { background: var(--tactile-secondary); color: var(--tactile-on-secondary); }
.tactile-border { border: 1px solid var(--tactile-border); } .tactile-rounded { border-radius: var(--tactile-radius-md); } .tactile-rounded-lg { border-radius: var(--tactile-radius-lg); } .tactile-rounded-xl { border-radius: var(--tactile-radius-xl); } .tactile-pill { border-radius: var(--tactile-radius-pill); }
.tactile-sr-only, .tactile-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.tactile-skip-link { position: absolute; left: 1rem; top: 1rem; z-index: 9999; transform: translateY(-150%); padding: .75rem 1rem; background: var(--tactile-primary); color: var(--tactile-on-primary); border-radius: var(--tactile-radius-md); font-weight: 900; }
.tactile-skip-link:focus { transform: translateY(0); }

/* Tactile-specific physical helpers */
.tactile-bevel { background: linear-gradient(180deg, rgb(255 255 255 / .22), rgb(0 0 0 / .08)), var(--tactile-surface); box-shadow: inset 0 1px 0 rgb(255 255 255 / .32), inset 0 -1px 0 rgb(0 0 0 / .18), 0 16px 34px rgb(0 0 0 / var(--tactile-shadow-alpha)); }
.tactile-pressed { background: var(--tactile-surface-soft); box-shadow: inset 0 4px 14px rgb(0 0 0 / .22), inset 0 -1px 0 rgb(255 255 255 / .12); transform: translateY(1px); }
.tactile-knob { inline-size: 3.25rem; block-size: 3.25rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / .35), transparent 28%), var(--tactile-surface-strong); border: 1px solid var(--tactile-border); box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 12px 24px rgb(0 0 0 / var(--tactile-shadow-alpha)); }

/* Spinner geometry follows the tactile preset's pressed material controls. */
.tactile-spinner, .tactile-loading-spinner, [data-ui="tactile"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
  display: inline-block;
  inline-size: 2rem;
  block-size: 2rem;
  border: .18rem solid rgb(var(--tactile-border-rgb) / .55);
  border-block-start-color: var(--tactile-spinner-stroke);
  border-inline-end-color: var(--tactile-spinner-accent);
  border-radius: 50%;
  background: linear-gradient(145deg, rgb(var(--tactile-surface-strong-rgb) / .96), rgb(var(--tactile-surface-soft-rgb) / .72));
  box-shadow: inset .16rem .16rem .32rem rgb(0 0 0 / .18), inset -.16rem -.16rem .32rem rgb(255 255 255 / .26), 0 .25rem .75rem rgb(0 0 0 / var(--tactile-shadow-alpha));
  vertical-align: -.2em;
  animation: tactile-spin .85s cubic-bezier(.2, .8, .2, 1) infinite;
}
.tactile-spinner-sm { inline-size: 1rem; block-size: 1rem; border-width: .12rem; }
.tactile-spinner-lg { inline-size: 3rem; block-size: 3rem; border-width: .24rem; }
.tactile-button[aria-busy="true"], .tactile-icon-button[aria-busy="true"], [data-ui="tactile"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) { gap: .55rem; cursor: progress; }
.tactile-button[aria-busy="true"]::after, .tactile-icon-button[aria-busy="true"]::after, [data-ui="tactile"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after {
  content: "";
  display: inline-block;
  inline-size: 1em;
  block-size: 1em;
  border: .16em solid rgb(var(--tactile-primary-text-rgb) / .42);
  border-block-start-color: currentColor;
  border-radius: 50%;
  animation: tactile-spin .75s linear infinite;
}
@keyframes tactile-spin { to { transform: rotate(360deg); } }


@media (prefers-reduced-motion: reduce) {
  [data-ui="tactile"] *, [data-ui="tactile"] *::before, [data-ui="tactile"] *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}
@media (prefers-contrast: more) {
  [data-ui="tactile"] { --tactile-border-alpha: 1; --tactile-focus-alpha: .75; }
}
@media (forced-colors: active) {
  [data-ui="tactile"] * { forced-color-adjust: auto; }
  [data-ui="tactile"] :where(:focus-visible) { outline: 3px solid CanvasText; }
}
@media print {
  [data-ui="tactile"] { background: #fff !important; color: #000 !important; }
  [data-ui="tactile"] * { box-shadow: none !important; text-shadow: none !important; }
  [data-ui="tactile"] a { color: #000 !important; text-decoration: underline; }
}
}


/* styles/neumorphism.css */
/* =========================================================
   UI Style Kit CSS — Neumorphism Theme System
   Includes 10 color schemes, light/dark/contrast modes,
   component classes, native element coverage, and CSS-only
   accessibility presentation helpers.

   Usage:
   <body data-ui="neumorphism" data-theme="midnight-gold" data-mode="light">
   <body data-ui="neumorphism" data-theme="arctic-indigo" data-mode="dark">
   <body data-ui="neumorphism" data-theme="cyber-lime" data-mode="contrast">
========================================================= */


@layer ui-style-kit.neumorphism {
:root {
  --neo-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --neo-font-display: Inter, ui-sans-serif, system-ui, sans-serif;
  --neo-font-body: var(--neo-font-sans);
  --neo-font-heading: var(--neo-font-display);
  --neo-font-control: var(--neo-font-display);
  --neo-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --neo-radius-xs: .25rem;
  --neo-radius-sm: .5rem;
  --neo-radius-md: 0.9rem;
  --neo-radius-lg: 1.4rem;
  --neo-radius-xl: calc(1.4rem + .5rem);
  --neo-radius-pill: 999px;
  --neo-space-1: .25rem;
  --neo-space-2: .5rem;
  --neo-space-3: .75rem;
  --neo-space-4: 1rem;
  --neo-space-5: 1.25rem;
  --neo-space-6: 1.5rem;
  --neo-space-8: 2rem;
  --neo-transition-fast: 150ms ease;
  --neo-transition-base: 240ms ease;
}

[data-ui="neumorphism"][data-mode="light"] {
  color-scheme: light;
  --neo-panel-alpha: .98;
  --neo-panel-soft-alpha: .78;
  --neo-border-alpha: .58;
  --neo-shadow-alpha: .12;
  --neo-focus-alpha: .34;
}

[data-ui="neumorphism"][data-mode="dark"] {
  color-scheme: dark;
  --neo-panel-alpha: .92;
  --neo-panel-soft-alpha: .64;
  --neo-border-alpha: .52;
  --neo-shadow-alpha: .34;
  --neo-focus-alpha: .42;
}

[data-ui="neumorphism"][data-mode="contrast"] {
  color-scheme: dark;
  --neo-panel-alpha: 1;
  --neo-panel-soft-alpha: .92;
  --neo-border-alpha: 1;
  --neo-shadow-alpha: .5;
  --neo-focus-alpha: .72;
}

[data-ui="neumorphism"][data-theme][data-mode] {
  /* Shared scheme aliases preserve the existing prefixed token API. */
  --neo-bg-rgb: var(--usk-bg-rgb);
  --neo-surface-rgb: var(--usk-surface-rgb);
  --neo-surface-strong-rgb: var(--usk-surface-strong-rgb);
  --neo-surface-soft-rgb: var(--usk-surface-soft-rgb);
  --neo-text-rgb: var(--usk-text-rgb);
  --neo-text-muted-rgb: var(--usk-text-muted-rgb);
  --neo-border-rgb: var(--usk-border-rgb);
  --neo-primary-rgb: var(--usk-primary-rgb);
  --neo-primary-hover-rgb: var(--usk-primary-hover-rgb);
  --neo-primary-text-rgb: var(--usk-primary-text-rgb);
  --neo-secondary-rgb: var(--usk-secondary-rgb);
  --neo-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
  --neo-secondary-text-rgb: var(--usk-secondary-text-rgb);
  --neo-accent-rgb: var(--usk-accent-rgb);
  --neo-success-rgb: var(--usk-success-rgb);
  --neo-warning-rgb: var(--usk-warning-rgb);
  --neo-danger-rgb: var(--usk-danger-rgb);
  --neo-link-rgb: var(--usk-link-rgb);
  --neo-accent-text-rgb: var(--usk-accent-text-rgb);
  --neo-success-text-rgb: var(--usk-success-text-rgb);
  --neo-warning-text-rgb: var(--usk-warning-text-rgb);
  --neo-danger-text-rgb: var(--usk-danger-text-rgb);
  --neo-focus-rgb: var(--usk-focus-rgb);
  /* Native fallback selectors inherit visual identity through shared tokens. */
  --usk-native-surface: var(--neo-surface);
  --usk-native-surface-strong: var(--neo-surface-strong);
  --usk-native-surface-soft: var(--neo-surface-soft);
  --usk-native-card-bg: var(--neo-card-bg);
  --usk-native-control-bg: var(--neo-control-bg);
  --usk-native-text: var(--neo-text);
  --usk-native-text-muted: var(--neo-text-muted);
  --usk-native-border: var(--neo-border);
  --usk-native-primary: var(--neo-primary);
  --usk-native-primary-hover: var(--neo-primary-hover);
  --usk-native-on-primary: var(--neo-on-primary);
  --usk-native-focus: var(--neo-focus);
  --usk-native-success: var(--neo-success);
  --usk-native-warning: var(--neo-warning);
  --usk-native-danger: var(--neo-danger);
  --usk-native-link: var(--neo-link);
  --usk-native-font-body: var(--neo-font-body);
  --usk-native-font-heading: var(--neo-font-heading);
  --usk-native-font-control: var(--neo-font-control);
  --usk-native-font-mono: var(--neo-font-mono);
  --usk-native-radius-sm: var(--neo-radius-sm);
  --usk-native-radius: var(--neo-radius-md);
  --usk-native-radius-lg: var(--neo-radius-lg);
  --usk-native-shadow: var(--neo-shadow-sm, none);
  --usk-native-shadow-md: var(--neo-shadow-md, var(--usk-native-shadow));
  --usk-native-focus-ring: var(--neo-focus-ring, 0 0 0 3px rgb(var(--neo-focus-rgb) / .28));
  --usk-native-border-width: 1px;
  --usk-native-field-gap: .5rem;
  --usk-native-panel-padding: var(--neo-space-5);
  --usk-native-shadow: var(--neo-shadow-sm);
  --usk-native-shadow-md: var(--neo-shadow-md);
  --neo-bg: rgb(var(--neo-bg-rgb));
  --neo-surface: rgb(var(--neo-surface-rgb) / var(--neo-panel-alpha));
  --neo-surface-strong: rgb(var(--neo-surface-strong-rgb) / var(--neo-panel-alpha));
  --neo-surface-soft: rgb(var(--neo-surface-soft-rgb) / var(--neo-panel-soft-alpha));
  --neo-text: rgb(var(--neo-text-rgb));
  --neo-text-muted: rgb(var(--neo-text-muted-rgb));
  --neo-fg: var(--neo-text);
  --neo-surface-fg: var(--neo-text);
  --neo-muted: var(--neo-text-muted);
  --neo-border: rgb(var(--neo-border-rgb) / var(--neo-border-alpha));
  --neo-control-fg: var(--neo-text);
  --neo-primary: rgb(var(--neo-primary-rgb));
  --neo-primary-hover: rgb(var(--neo-primary-hover-rgb));
  --neo-primary-text: rgb(var(--neo-primary-text-rgb));
  --neo-secondary: rgb(var(--neo-secondary-rgb));
  --neo-secondary-hover: rgb(var(--neo-secondary-hover-rgb));
  --neo-secondary-text: rgb(var(--neo-secondary-text-rgb));
  --neo-on-primary: var(--neo-primary-text);
  --neo-on-secondary: var(--neo-secondary-text);
  --neo-on-accent: rgb(var(--neo-accent-text-rgb));
  --neo-on-success: rgb(var(--neo-success-text-rgb));
  --neo-on-warning: rgb(var(--neo-warning-text-rgb));
  --neo-on-danger: rgb(var(--neo-danger-text-rgb));
  --neo-accent: rgb(var(--neo-accent-rgb));
  --neo-success: rgb(var(--neo-success-rgb));
  --neo-warning: rgb(var(--neo-warning-rgb));
  --neo-danger: rgb(var(--neo-danger-rgb));
  --neo-link: rgb(var(--neo-link-rgb));
  --neo-focus: rgb(var(--neo-focus-rgb));
  --neo-focus-ring: 0 0 0 3px rgb(var(--neo-focus-rgb) / var(--neo-focus-alpha));
  --neo-theme-bg-size: auto;
  --neo-theme-bg: radial-gradient(circle at 0% 0%, rgb(var(--neo-primary-rgb) / .16), transparent 32rem), radial-gradient(circle at 100% 0%, rgb(var(--neo-accent-rgb) / .12), transparent 30rem), radial-gradient(circle at 50% 100%, rgb(var(--neo-secondary-rgb) / .10), transparent 34rem), var(--neo-bg);
  --neo-card-bg: linear-gradient(135deg, rgb(var(--neo-primary-rgb) / .10), rgb(var(--neo-accent-rgb) / .055) 42%, rgb(var(--neo-surface-strong-rgb) / var(--neo-panel-alpha)) 100%), var(--neo-surface);
  --neo-control-bg: linear-gradient(180deg, rgb(var(--neo-surface-strong-rgb) / var(--neo-panel-alpha)), rgb(var(--neo-surface-soft-rgb) / var(--neo-panel-soft-alpha)));
  --neo-spinner-track: rgb(var(--neo-border-rgb) / max(.28, calc(var(--neo-border-alpha) * .7)));
  --neo-spinner-stroke: var(--neo-primary);
  --neo-spinner-accent: var(--neo-accent);
}































/* =========================================================
   Base Page + Layout
========================================================= */

[data-ui="neumorphism"] {
  min-height: 100vh;
  background: radial-gradient(circle at 50% -10%, rgb(255 255 255 / .08), transparent 30rem), var(--neo-bg);
  color: var(--neo-text);
  font-family: var(--neo-font-body);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[data-ui="neumorphism"] *,
[data-ui="neumorphism"] *::before,
[data-ui="neumorphism"] *::after { box-sizing: border-box; }

[data-ui="neumorphism"][data-theme][data-mode] { background: var(--neo-theme-bg); background-size: var(--neo-theme-bg-size); }

.neo-page { min-height: 100vh; padding: clamp(1rem, 4vw, 3rem); }
.neo-container { width: min(100% - 2rem, 1200px); margin-inline: auto; }
.neo-section { display: grid; gap: var(--neo-space-5); padding: clamp(1rem, 3vw, 2rem); }
.neo-stack { display: flex; flex-direction: column; gap: var(--neo-space-4); }
.neo-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--neo-space-3); }
.neo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--neo-space-5); }
.neo-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: var(--neo-space-6); align-items: start; }

/* =========================================================
   Typography
========================================================= */

.neo-title, .neo-heading, .neo-kicker, .neo-button, .neo-badge, .neo-nav-link { font-family: var(--neo-font-heading); }
.neo-title { margin: 0; color: var(--neo-text); font-size: clamp(2rem, 5vw, 3.7rem); line-height: 1.02; letter-spacing: -0.045em; }
.neo-heading { margin: 0; color: var(--neo-text); font-size: clamp(1.2rem, 2.5vw, 2rem); line-height: 1.15; letter-spacing: -0.03em; }
.neo-kicker { margin: 0; color: var(--neo-primary); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.neo-subtitle, .neo-copy { margin: 0; color: var(--neo-text-muted); line-height: 1.65; }
.neo-text-muted { color: var(--neo-text-muted); }
.neo-divider { width: 100%; height: 1px; border: 0; background: var(--neo-border); }

/* =========================================================
   Surfaces
========================================================= */

.neo-surface, .neo-card, .neo-panel, .neo-toolbar, .neo-table-wrap {
  position: relative;
  background: linear-gradient(180deg, rgb(255 255 255 / .18), rgb(255 255 255 / .03)), linear-gradient(135deg, rgb(var(--neo-primary-rgb) / .07), transparent 46%), var(--neo-surface);
  color: var(--neo-text);
  border: 1px solid var(--neo-border);
  border-radius: var(--neo-radius-lg);
  box-shadow: 10px 10px 22px var(--neo-nm-dark), -10px -10px 22px var(--neo-nm-light);
  transition: transform var(--neo-transition-base), box-shadow var(--neo-transition-base), border-color var(--neo-transition-base), background var(--neo-transition-base);
}
.neo-card, .neo-panel { padding: var(--neo-space-6); }
.neo-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--neo-space-4); padding: var(--neo-space-4); }
.neo-surface-sm { border-radius: var(--neo-radius-md); box-shadow: 0 6px 18px rgb(0 0 0 / calc(var(--neo-shadow-alpha) * .72)); }
.neo-surface-lg { border-radius: var(--neo-radius-xl); box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--neo-shadow-alpha) + .08)); }
.neo-well, .neo-inset { background: var(--neo-surface-soft); color: var(--neo-text); border: 1px solid rgb(var(--neo-border-rgb) / calc(var(--neo-border-alpha) * .7)); border-radius: var(--neo-radius-md); padding: var(--neo-space-5); box-shadow: inset 0 1px 3px rgb(0 0 0 / .08); }
.neo-hover-lift:hover { transform: translateY(-2px); box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--neo-shadow-alpha) + .12)); }

/* =========================================================
   Buttons
========================================================= */

.neo-button, .neo-icon-button {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--neo-space-2);
  min-height: 2.75rem; padding: .75rem 1.1rem; background: var(--neo-surface); color: var(--neo-text);
  border: 1px solid var(--neo-border); border-radius: var(--neo-radius-md); box-shadow: 0 6px 18px rgb(0 0 0 / var(--neo-shadow-alpha));
  font: inherit; font-weight: 800; line-height: 1; text-decoration: none; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none;
  transition: color var(--neo-transition-fast), background var(--neo-transition-fast), border-color var(--neo-transition-fast), box-shadow var(--neo-transition-fast), transform var(--neo-transition-fast);
}
.neo-button:hover, .neo-icon-button:hover { transform: translateY(-1px); border-color: var(--neo-primary); }
.neo-button:active, .neo-icon-button:active, .neo-button[aria-pressed="true"], .neo-icon-button[aria-pressed="true"], .neo-button.is-active, .neo-icon-button.is-active { transform: translateY(1px); box-shadow: inset 0 3px 10px rgb(0 0 0 / .18); }
.neo-button-primary { background: var(--neo-primary); color: var(--neo-on-primary); border-color: var(--neo-primary); }
.neo-button-primary:hover { background: var(--neo-primary-hover); border-color: var(--neo-primary-hover); }
.neo-button-secondary { background: var(--neo-secondary); color: var(--neo-on-secondary); border-color: var(--neo-secondary); }
.neo-button-secondary:hover { background: var(--neo-secondary-hover); border-color: var(--neo-secondary-hover); }
.neo-button-danger { background: var(--neo-danger); color: var(--neo-on-danger); border-color: var(--neo-danger); }
.neo-button-ghost { background: transparent; color: var(--neo-text); box-shadow: none; }
.neo-icon-button { width: 2.75rem; padding: 0; border-radius: var(--neo-radius-pill); }
.neo-button:disabled, .neo-icon-button:disabled, .neo-disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* Theme-responsive component defaults */
.neo-card, .neo-panel { background: var(--neo-card-bg); }
.neo-toolbar, .neo-table-wrap { background: var(--neo-control-bg); }
.neo-button:not(.neo-button-primary):not(.neo-button-secondary):not(.neo-button-danger):not(.neo-button-ghost), .neo-icon-button { background: var(--neo-control-bg); }
.neo-button, .neo-icon-button, .neo-badge, .neo-nav-link { font-family: var(--neo-font-control); }


/* =========================================================
   Forms
========================================================= */

.neo-field { display: flex; flex-direction: column; gap: var(--neo-space-2); }
.neo-label { color: var(--neo-text); font-size: .925rem; font-weight: 800; }
.neo-input, .neo-textarea, .neo-select {
  width: 100%; min-height: 2.875rem; padding: .75rem 1rem; background: var(--neo-surface-soft); color: var(--neo-text);
  border: 1px solid var(--neo-border); border-radius: var(--neo-radius-md); font: inherit; outline: none;
  transition: background var(--neo-transition-fast), border-color var(--neo-transition-fast), box-shadow var(--neo-transition-fast);
}
.neo-textarea { min-height: 8rem; resize: vertical; }
.neo-input::placeholder, .neo-textarea::placeholder { color: var(--neo-text-muted); opacity: .82; }
.neo-input:hover, .neo-textarea:hover, .neo-select:hover { border-color: rgb(var(--neo-primary-rgb) / .58); }
.neo-input:focus, .neo-textarea:focus, .neo-select:focus { border-color: var(--neo-focus); box-shadow: var(--neo-focus-ring); }
.neo-help-text { color: var(--neo-text-muted); font-size: .875rem; line-height: 1.45; }

/* Checkbox / Radio */
.neo-check, .neo-radio { display: inline-flex; align-items: center; gap: var(--neo-space-2); color: var(--neo-text); cursor: pointer; }
.neo-check input, .neo-radio input { position: absolute; opacity: 0; pointer-events: none; }
.neo-check-control, .neo-radio-control { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; background: var(--neo-surface-soft); border: 1px solid var(--neo-border); transition: background var(--neo-transition-fast), box-shadow var(--neo-transition-fast); }
.neo-check-control { border-radius: var(--neo-radius-xs); }
.neo-radio-control { border-radius: 50%; }
.neo-check input:checked + .neo-check-control, .neo-radio input:checked + .neo-radio-control { background: var(--neo-primary); border-color: var(--neo-primary); box-shadow: var(--neo-focus-ring); }
.neo-check input:checked + .neo-check-control::after { content: "✓"; color: var(--neo-on-primary); font-size: .9rem; font-weight: 900; }
.neo-radio input:checked + .neo-radio-control::after { content: ""; width: .55rem; height: .55rem; background: var(--neo-on-primary); border-radius: 50%; }

/* Switch */
.neo-switch { display: inline-flex; align-items: center; gap: var(--neo-space-3); color: var(--neo-text); cursor: pointer; }
.neo-switch input { position: absolute; opacity: 0; pointer-events: none; }
.neo-switch-track { position: relative; width: 3.5rem; height: 1.9rem; background: var(--neo-surface-soft); border: 1px solid var(--neo-border); border-radius: var(--neo-radius-pill); transition: background var(--neo-transition-fast), box-shadow var(--neo-transition-fast); }
.neo-switch-thumb { position: absolute; top: .22rem; left: .22rem; width: 1.34rem; height: 1.34rem; background: var(--neo-surface-strong); border: 1px solid var(--neo-border); border-radius: 50%; box-shadow: 0 4px 12px rgb(0 0 0 / var(--neo-shadow-alpha)); transition: left var(--neo-transition-fast), background var(--neo-transition-fast); }
.neo-switch input:checked + .neo-switch-track { background: var(--neo-primary); border-color: var(--neo-primary); }
.neo-switch input:checked + .neo-switch-track .neo-switch-thumb { left: calc(100% - 1.34rem - .22rem); background: var(--neo-on-primary); }

/* =========================================================
   Badges / Nav / Progress / Alerts / Tables
========================================================= */

.neo-badge { display: inline-flex; align-items: center; gap: var(--neo-space-1); min-height: 1.75rem; padding: .35rem .7rem; background: var(--neo-surface-soft); color: var(--neo-text); border: 1px solid var(--neo-border); border-radius: var(--neo-radius-pill); font-size: .8125rem; font-weight: 850; line-height: 1; }
.neo-badge-primary { background: var(--neo-primary); color: var(--neo-on-primary); border-color: var(--neo-primary); }
.neo-badge-secondary { background: var(--neo-secondary); color: var(--neo-on-secondary); border-color: var(--neo-secondary); }
.neo-badge-success { background: var(--neo-success); color: var(--neo-on-success); border-color: var(--neo-success); }
.neo-badge-warning { background: var(--neo-warning); color: var(--neo-on-warning); border-color: var(--neo-warning); }
.neo-badge-danger { background: var(--neo-danger); color: var(--neo-on-danger); border-color: var(--neo-danger); }

.neo-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--neo-space-2); padding: var(--neo-space-2); background: var(--neo-surface); border: 1px solid var(--neo-border); border-radius: var(--neo-radius-xl); box-shadow: 0 10px 30px rgb(0 0 0 / var(--neo-shadow-alpha)); }
.neo-nav-link { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: .65rem 1rem; color: var(--neo-text-muted); border-radius: var(--neo-radius-pill); text-decoration: none; font-weight: 850; transition: color var(--neo-transition-fast), background var(--neo-transition-fast), box-shadow var(--neo-transition-fast); }
.neo-nav-link:hover { color: var(--neo-text); background: var(--neo-surface-soft); }
.neo-nav-link[aria-current="page"], .neo-nav-link.is-active { color: var(--neo-on-primary); background: var(--neo-primary); }

/* Tooltips use compact contrast surfaces that stay readable across theme modes. */
.neo-tooltip, [data-ui="neumorphism"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
  display: inline-flex; align-items: center; gap: .45rem; max-inline-size: 16rem; padding: .62rem .86rem;
  background: var(--neo-surface); color: var(--neo-text); border: 1px solid transparent; border-radius: var(--neo-radius-pill);
  box-shadow: -.35rem -.35rem .8rem rgb(255 255 255 / .28), .35rem .35rem .8rem rgb(0 0 0 / .18);
  font-size: .82rem; font-weight: 850; line-height: 1.35;
}
.neo-tooltip-arrow { inline-size: .58rem; block-size: .58rem; flex: 0 0 auto; background: var(--neo-surface); border-radius: 50%; box-shadow: inset .12rem .12rem .24rem rgb(0 0 0 / .12); }

.neo-progress { width: 100%; height: .9rem; overflow: hidden; background: var(--neo-surface-soft); border: 1px solid var(--neo-border); border-radius: var(--neo-radius-pill); }
.neo-progress-bar { height: 100%; width: var(--neo-progress-value, 50%); background: linear-gradient(90deg, var(--neo-primary), var(--neo-accent)); border-radius: inherit; }

.neo-alert { display: grid; gap: var(--neo-space-2); padding: var(--neo-space-4); background: var(--neo-surface); color: var(--neo-text); border: 1px solid var(--neo-border); border-radius: var(--neo-radius-lg); box-shadow: 0 10px 30px rgb(0 0 0 / var(--neo-shadow-alpha)); }
.neo-alert-success { border-left-color: var(--neo-success); }
.neo-alert-warning { border-left-color: var(--neo-warning); }
.neo-alert-danger { border-left-color: var(--neo-danger); }
.neo-alert-title { margin: 0; font-weight: 900; }
.neo-alert-body { margin: 0; color: var(--neo-text-muted); line-height: 1.55; }

.neo-table-wrap { overflow: auto; }
.neo-table { width: 100%; border-collapse: collapse; }
.neo-table th, .neo-table td { padding: .95rem 1rem; text-align: left; border-bottom: 1px solid var(--neo-border); }
.neo-table th { color: var(--neo-text); font-size: .82rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; background: rgb(var(--neo-primary-rgb) / .08); }
.neo-table td { color: var(--neo-text-muted); }
.neo-table tr:hover td { background: rgb(var(--neo-primary-rgb) / .045); }

/* =========================================================
   Utilities
========================================================= */

.neo-text-primary { color: var(--neo-primary); } .neo-text-secondary { color: var(--neo-secondary); } .neo-text-accent { color: var(--neo-accent); } .neo-text-success { color: var(--neo-success); } .neo-text-warning { color: var(--neo-warning); } .neo-text-danger { color: var(--neo-danger); }
.neo-bg-primary { background: var(--neo-primary); color: var(--neo-on-primary); } .neo-bg-secondary { background: var(--neo-secondary); color: var(--neo-on-secondary); }
.neo-border { border: 1px solid var(--neo-border); } .neo-rounded { border-radius: var(--neo-radius-md); } .neo-rounded-lg { border-radius: var(--neo-radius-lg); } .neo-rounded-xl { border-radius: var(--neo-radius-xl); } .neo-pill { border-radius: var(--neo-radius-pill); }
.neo-sr-only, .neo-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.neo-skip-link { position: absolute; left: 1rem; top: 1rem; z-index: 9999; transform: translateY(-150%); padding: .75rem 1rem; background: var(--neo-primary); color: var(--neo-on-primary); border-radius: var(--neo-radius-md); font-weight: 900; }
.neo-skip-link:focus { transform: translateY(0); }


/* =========================================================
   Neumorphism Depth Overrides
========================================================= */
[data-ui="neumorphism"][data-mode="light"] {
  --neo-nm-light: rgb(255 255 255 / .94);
  --neo-nm-dark: rgb(148 162 178 / .52);
}
[data-ui="neumorphism"][data-mode="dark"] {
  --neo-nm-light: rgb(46 55 70 / .74);
  --neo-nm-dark: rgb(0 0 0 / .5);
}
[data-ui="neumorphism"][data-mode="contrast"] {
  --neo-nm-light: rgb(64 64 64 / 1);
  --neo-nm-dark: rgb(0 0 0 / 1);
}
[data-ui="neumorphism"] { background: var(--neo-bg); }
.neo-surface, .neo-card, .neo-panel, .neo-toolbar, .neo-table-wrap {
  border-color: rgb(var(--neo-border-rgb) / .14);
  box-shadow: 10px 10px 22px var(--neo-nm-dark), -10px -10px 22px var(--neo-nm-light);
}
.neo-surface-lg, .neo-hover-lift:hover {
  box-shadow: 16px 16px 32px var(--neo-nm-dark), -16px -16px 32px var(--neo-nm-light);
}
.neo-well, .neo-inset, .neo-input, .neo-textarea, .neo-select, .neo-progress {
  box-shadow: inset 5px 5px 11px var(--neo-nm-dark), inset -5px -5px 11px var(--neo-nm-light);
}
.neo-button, .neo-icon-button, .neo-badge, .neo-nav {
  box-shadow: 5px 5px 11px var(--neo-nm-dark), -5px -5px 11px var(--neo-nm-light);
}
.neo-button:active, .neo-icon-button:active, .neo-button.is-active, .neo-icon-button.is-active, .neo-nav-link.is-active {
  box-shadow: inset 4px 4px 9px var(--neo-nm-dark), inset -4px -4px 9px var(--neo-nm-light);
}

/* Spinner geometry follows the neumorphism preset's soft extruded surfaces. */
.neo-spinner, .neo-loading-spinner, [data-ui="neumorphism"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
  display: inline-block;
  inline-size: 2rem;
  block-size: 2rem;
  border: .2rem solid transparent;
  border-block-start-color: var(--neo-spinner-stroke);
  border-inline-end-color: var(--neo-spinner-accent);
  border-radius: 50%;
  background: conic-gradient(from 45deg, var(--neo-spinner-stroke), transparent 34%, var(--neo-spinner-accent), var(--neo-spinner-track));
  box-shadow: -.35rem -.35rem .8rem rgb(255 255 255 / .32), .35rem .35rem .8rem rgb(0 0 0 / .18), inset 0 0 0 .38rem var(--neo-surface);
  vertical-align: -.2em;
  animation: neo-spin 1s linear infinite;
}
.neo-spinner-sm { inline-size: 1rem; block-size: 1rem; border-width: .12rem; }
.neo-spinner-lg { inline-size: 3rem; block-size: 3rem; border-width: .28rem; }
.neo-button[aria-busy="true"], .neo-icon-button[aria-busy="true"], [data-ui="neumorphism"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) { gap: .55rem; cursor: progress; }
.neo-button[aria-busy="true"]::after, .neo-icon-button[aria-busy="true"]::after, [data-ui="neumorphism"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after {
  content: "";
  display: inline-block;
  inline-size: 1em;
  block-size: 1em;
  border: .16em solid rgb(var(--neo-primary-text-rgb) / .42);
  border-block-start-color: currentColor;
  border-radius: 50%;
  animation: neo-spin .75s linear infinite;
}
@keyframes neo-spin { to { transform: rotate(360deg); } }


@media (prefers-reduced-motion: reduce) {
  [data-ui="neumorphism"] *, [data-ui="neumorphism"] *::before, [data-ui="neumorphism"] *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}
@media (prefers-contrast: more) {
  [data-ui="neumorphism"] { --neo-border-alpha: 1; --neo-focus-alpha: .75; }
}
@media (forced-colors: active) {
  [data-ui="neumorphism"] * { forced-color-adjust: auto; }
  [data-ui="neumorphism"] :where(:focus-visible) { outline: 3px solid CanvasText; }
}
@media print {
  [data-ui="neumorphism"] { background: #fff !important; color: #000 !important; }
  [data-ui="neumorphism"] * { box-shadow: none !important; text-shadow: none !important; }
  [data-ui="neumorphism"] a { color: #000 !important; text-decoration: underline; }
}
}


/* styles/retrofuturism.css */
/* =========================================================
   UI Style Kit CSS — Retrofuturism Theme System
   Includes 10 color schemes, light/dark/contrast modes,
   component classes, native element coverage, and CSS-only
   accessibility presentation helpers.

   Usage:
   <body data-ui="retrofuturism" data-theme="midnight-gold" data-mode="light">
   <body data-ui="retrofuturism" data-theme="arctic-indigo" data-mode="dark">
   <body data-ui="retrofuturism" data-theme="cyber-lime" data-mode="contrast">
========================================================= */


@layer ui-style-kit.retrofuturism {
:root {
  --retro-font-sans: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --retro-font-display: Orbitron, Eurostile, "Bank Gothic", Rajdhani, Inter, ui-sans-serif, system-ui, sans-serif;
  --retro-font-body: var(--retro-font-sans);
  --retro-font-heading: var(--retro-font-display);
  --retro-font-control: var(--retro-font-display);
  --retro-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --retro-radius-xs: .25rem;
  --retro-radius-sm: .5rem;
  --retro-radius-md: 0.75rem;
  --retro-radius-lg: 1rem;
  --retro-radius-xl: calc(1rem + .5rem);
  --retro-radius-pill: 999px;
  --retro-space-1: .25rem;
  --retro-space-2: .5rem;
  --retro-space-3: .75rem;
  --retro-space-4: 1rem;
  --retro-space-5: 1.25rem;
  --retro-space-6: 1.5rem;
  --retro-space-8: 2rem;
  --retro-transition-fast: 150ms ease;
  --retro-transition-base: 240ms ease;
}

[data-ui="retrofuturism"][data-mode="light"] {
  color-scheme: light;
  --retro-panel-alpha: .98;
  --retro-panel-soft-alpha: .78;
  --retro-border-alpha: .58;
  --retro-shadow-alpha: .12;
  --retro-focus-alpha: .34;
}

[data-ui="retrofuturism"][data-mode="dark"] {
  color-scheme: dark;
  --retro-panel-alpha: .92;
  --retro-panel-soft-alpha: .64;
  --retro-border-alpha: .52;
  --retro-shadow-alpha: .34;
  --retro-focus-alpha: .42;
}

[data-ui="retrofuturism"][data-mode="contrast"] {
  color-scheme: dark;
  --retro-panel-alpha: 1;
  --retro-panel-soft-alpha: .92;
  --retro-border-alpha: 1;
  --retro-shadow-alpha: .5;
  --retro-focus-alpha: .72;
}

[data-ui="retrofuturism"][data-theme][data-mode] {
  /* Shared scheme aliases preserve the existing prefixed token API. */
  --retro-bg-rgb: var(--usk-bg-rgb);
  --retro-surface-rgb: var(--usk-surface-rgb);
  --retro-surface-strong-rgb: var(--usk-surface-strong-rgb);
  --retro-surface-soft-rgb: var(--usk-surface-soft-rgb);
  --retro-text-rgb: var(--usk-text-rgb);
  --retro-text-muted-rgb: var(--usk-text-muted-rgb);
  --retro-border-rgb: var(--usk-border-rgb);
  --retro-primary-rgb: var(--usk-primary-rgb);
  --retro-primary-hover-rgb: var(--usk-primary-hover-rgb);
  --retro-primary-text-rgb: var(--usk-primary-text-rgb);
  --retro-secondary-rgb: var(--usk-secondary-rgb);
  --retro-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
  --retro-secondary-text-rgb: var(--usk-secondary-text-rgb);
  --retro-accent-rgb: var(--usk-accent-rgb);
  --retro-success-rgb: var(--usk-success-rgb);
  --retro-warning-rgb: var(--usk-warning-rgb);
  --retro-danger-rgb: var(--usk-danger-rgb);
  --retro-link-rgb: var(--usk-link-rgb);
  --retro-accent-text-rgb: var(--usk-accent-text-rgb);
  --retro-success-text-rgb: var(--usk-success-text-rgb);
  --retro-warning-text-rgb: var(--usk-warning-text-rgb);
  --retro-danger-text-rgb: var(--usk-danger-text-rgb);
  --retro-focus-rgb: var(--usk-focus-rgb);
  /* Native fallback selectors inherit visual identity through shared tokens. */
  --usk-native-surface: var(--retro-surface);
  --usk-native-surface-strong: var(--retro-surface-strong);
  --usk-native-surface-soft: var(--retro-surface-soft);
  --usk-native-card-bg: var(--retro-card-bg);
  --usk-native-control-bg: var(--retro-control-bg);
  --usk-native-text: var(--retro-text);
  --usk-native-text-muted: var(--retro-text-muted);
  --usk-native-border: var(--retro-border);
  --usk-native-primary: var(--retro-primary);
  --usk-native-primary-hover: var(--retro-primary-hover);
  --usk-native-on-primary: var(--retro-on-primary);
  --usk-native-focus: var(--retro-focus);
  --usk-native-success: var(--retro-success);
  --usk-native-warning: var(--retro-warning);
  --usk-native-danger: var(--retro-danger);
  --usk-native-link: var(--retro-link);
  --usk-native-font-body: var(--retro-font-body);
  --usk-native-font-heading: var(--retro-font-heading);
  --usk-native-font-control: var(--retro-font-control);
  --usk-native-font-mono: var(--retro-font-mono);
  --usk-native-radius-sm: var(--retro-radius-sm);
  --usk-native-radius: var(--retro-radius-md);
  --usk-native-radius-lg: var(--retro-radius-lg);
  --usk-native-shadow: var(--retro-shadow-sm, none);
  --usk-native-shadow-md: var(--retro-shadow-md, var(--usk-native-shadow));
  --usk-native-focus-ring: var(--retro-focus-ring, 0 0 0 3px rgb(var(--retro-focus-rgb) / .28));
  --usk-native-border-width: 1px;
  --usk-native-field-gap: .5rem;
  --usk-native-panel-padding: var(--retro-space-5);
  --usk-native-shadow: 0 10px 30px rgb(0 0 0 / calc(var(--retro-shadow-alpha) * .72));
  --retro-bg: rgb(var(--retro-bg-rgb));
  --retro-surface: rgb(var(--retro-surface-rgb) / var(--retro-panel-alpha));
  --retro-surface-strong: rgb(var(--retro-surface-strong-rgb) / var(--retro-panel-alpha));
  --retro-surface-soft: rgb(var(--retro-surface-soft-rgb) / var(--retro-panel-soft-alpha));
  --retro-text: rgb(var(--retro-text-rgb));
  --retro-text-muted: rgb(var(--retro-text-muted-rgb));
  --retro-fg: var(--retro-text);
  --retro-surface-fg: var(--retro-text);
  --retro-muted: var(--retro-text-muted);
  --retro-border: rgb(var(--retro-border-rgb) / var(--retro-border-alpha));
  --retro-control-fg: var(--retro-text);
  --retro-primary: rgb(var(--retro-primary-rgb));
  --retro-primary-hover: rgb(var(--retro-primary-hover-rgb));
  --retro-primary-text: rgb(var(--retro-primary-text-rgb));
  --retro-secondary: rgb(var(--retro-secondary-rgb));
  --retro-secondary-hover: rgb(var(--retro-secondary-hover-rgb));
  --retro-secondary-text: rgb(var(--retro-secondary-text-rgb));
  --retro-on-primary: var(--retro-primary-text);
  --retro-on-secondary: var(--retro-secondary-text);
  --retro-on-accent: rgb(var(--retro-accent-text-rgb));
  --retro-on-success: rgb(var(--retro-success-text-rgb));
  --retro-on-warning: rgb(var(--retro-warning-text-rgb));
  --retro-on-danger: rgb(var(--retro-danger-text-rgb));
  --retro-accent: rgb(var(--retro-accent-rgb));
  --retro-success: rgb(var(--retro-success-rgb));
  --retro-warning: rgb(var(--retro-warning-rgb));
  --retro-danger: rgb(var(--retro-danger-rgb));
  --retro-link: rgb(var(--retro-link-rgb));
  --retro-focus: rgb(var(--retro-focus-rgb));
  --retro-focus-ring: 0 0 0 3px rgb(var(--retro-focus-rgb) / var(--retro-focus-alpha));
  --retro-theme-bg-size: auto;
  --retro-theme-bg: radial-gradient(circle at 0% 0%, rgb(var(--retro-primary-rgb) / .16), transparent 32rem), radial-gradient(circle at 100% 0%, rgb(var(--retro-accent-rgb) / .12), transparent 30rem), radial-gradient(circle at 50% 100%, rgb(var(--retro-secondary-rgb) / .10), transparent 34rem), var(--retro-bg);
  --retro-card-bg: linear-gradient(135deg, rgb(var(--retro-primary-rgb) / .10), rgb(var(--retro-accent-rgb) / .055) 42%, rgb(var(--retro-surface-strong-rgb) / var(--retro-panel-alpha)) 100%), var(--retro-surface);
  --retro-control-bg: linear-gradient(180deg, rgb(var(--retro-surface-strong-rgb) / var(--retro-panel-alpha)), rgb(var(--retro-surface-soft-rgb) / var(--retro-panel-soft-alpha)));
  --retro-spinner-track: rgb(var(--retro-border-rgb) / max(.28, calc(var(--retro-border-alpha) * .7)));
  --retro-spinner-stroke: var(--retro-primary);
  --retro-spinner-accent: var(--retro-accent);
}































/* =========================================================
   Base Page + Layout
========================================================= */

[data-ui="retrofuturism"] {
  min-height: 100vh;
  background: radial-gradient(circle at 20% 5%, rgb(var(--retro-accent-rgb) / .18), transparent 26rem), radial-gradient(circle at 85% 0%, rgb(var(--retro-secondary-rgb) / .12), transparent 24rem), var(--retro-bg);
  color: var(--retro-text);
  font-family: var(--retro-font-body);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[data-ui="retrofuturism"] *,
[data-ui="retrofuturism"] *::before,
[data-ui="retrofuturism"] *::after { box-sizing: border-box; }

[data-ui="retrofuturism"][data-theme][data-mode] { background: var(--retro-theme-bg); background-size: var(--retro-theme-bg-size); }

.retro-page { min-height: 100vh; padding: clamp(1rem, 4vw, 3rem); }
.retro-container { width: min(100% - 2rem, 1200px); margin-inline: auto; }
.retro-section { display: grid; gap: var(--retro-space-5); padding: clamp(1rem, 3vw, 2rem); }
.retro-stack { display: flex; flex-direction: column; gap: var(--retro-space-4); }
.retro-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--retro-space-3); }
.retro-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--retro-space-5); }
.retro-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: var(--retro-space-6); align-items: start; }

/* =========================================================
   Typography
========================================================= */

.retro-title, .retro-heading, .retro-kicker, .retro-button, .retro-badge, .retro-nav-link { font-family: var(--retro-font-heading); }
.retro-title { margin: 0; color: var(--retro-text); font-size: clamp(2rem, 5vw, 3.7rem); line-height: 1.02; letter-spacing: -0.055em; }
.retro-heading { margin: 0; color: var(--retro-text); font-size: clamp(1.2rem, 2.5vw, 2rem); line-height: 1.15; letter-spacing: -0.03em; }
.retro-kicker { margin: 0; color: var(--retro-primary); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.retro-subtitle, .retro-copy { margin: 0; color: var(--retro-text-muted); line-height: 1.65; }
.retro-text-muted { color: var(--retro-text-muted); }
.retro-divider { width: 100%; height: 1px; border: 0; background: var(--retro-border); }

/* =========================================================
   Surfaces
========================================================= */

.retro-surface, .retro-card, .retro-panel, .retro-toolbar, .retro-table-wrap {
  position: relative;
  background: linear-gradient(135deg, rgb(var(--retro-primary-rgb) / .08), transparent 36%), linear-gradient(180deg, rgb(255 255 255 / .08), rgb(255 255 255 / 0)), var(--retro-surface);
  color: var(--retro-text);
  border: 1px solid var(--retro-border);
  border-radius: var(--retro-radius-lg);
  box-shadow: 0 12px 34px rgb(0 0 0 / var(--retro-shadow-alpha)), 0 0 24px rgb(var(--retro-primary-rgb) / .16);
  transition: transform var(--retro-transition-base), box-shadow var(--retro-transition-base), border-color var(--retro-transition-base), background var(--retro-transition-base);
}
.retro-card, .retro-panel { padding: var(--retro-space-6); }
.retro-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--retro-space-4); padding: var(--retro-space-4); }
.retro-surface-sm { border-radius: var(--retro-radius-md); box-shadow: 0 6px 18px rgb(0 0 0 / calc(var(--retro-shadow-alpha) * .72)); }
.retro-surface-lg { border-radius: var(--retro-radius-xl); box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--retro-shadow-alpha) + .08)); }
.retro-well, .retro-inset { background: var(--retro-surface-soft); color: var(--retro-text); border: 1px solid rgb(var(--retro-border-rgb) / calc(var(--retro-border-alpha) * .7)); border-radius: var(--retro-radius-md); padding: var(--retro-space-5); box-shadow: inset 0 1px 3px rgb(0 0 0 / .08); }
.retro-hover-lift:hover { transform: translateY(-3px) scale(1.005); box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--retro-shadow-alpha) + .12)); }

/* =========================================================
   Buttons
========================================================= */

.retro-button, .retro-icon-button {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--retro-space-2);
  min-height: 2.75rem; padding: .75rem 1.1rem; background: var(--retro-surface); color: var(--retro-text);
  border: 1px solid var(--retro-border); border-radius: var(--retro-radius-md); box-shadow: 0 6px 18px rgb(0 0 0 / var(--retro-shadow-alpha));
  font: inherit; font-weight: 800; line-height: 1; text-decoration: none; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none;
  transition: color var(--retro-transition-fast), background var(--retro-transition-fast), border-color var(--retro-transition-fast), box-shadow var(--retro-transition-fast), transform var(--retro-transition-fast);
}
.retro-button:hover, .retro-icon-button:hover { transform: translateY(-1px); border-color: var(--retro-primary); }
.retro-button:active, .retro-icon-button:active, .retro-button[aria-pressed="true"], .retro-icon-button[aria-pressed="true"], .retro-button.is-active, .retro-icon-button.is-active { transform: translateY(1px); box-shadow: inset 0 3px 10px rgb(0 0 0 / .18); }
.retro-button-primary { background: var(--retro-primary); color: var(--retro-on-primary); border-color: var(--retro-primary); }
.retro-button-primary:hover { background: var(--retro-primary-hover); border-color: var(--retro-primary-hover); }
.retro-button-secondary { background: var(--retro-secondary); color: var(--retro-on-secondary); border-color: var(--retro-secondary); }
.retro-button-secondary:hover { background: var(--retro-secondary-hover); border-color: var(--retro-secondary-hover); }
.retro-button-danger { background: var(--retro-danger); color: var(--retro-on-danger); border-color: var(--retro-danger); }
.retro-button-ghost { background: transparent; color: var(--retro-text); box-shadow: none; }
.retro-icon-button { width: 2.75rem; padding: 0; border-radius: var(--retro-radius-pill); }
.retro-button:disabled, .retro-icon-button:disabled, .retro-disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* Theme-responsive component defaults */
.retro-card, .retro-panel { background: var(--retro-card-bg); }
.retro-toolbar, .retro-table-wrap { background: var(--retro-control-bg); }
.retro-button:not(.retro-button-primary):not(.retro-button-secondary):not(.retro-button-danger):not(.retro-button-ghost), .retro-icon-button { background: var(--retro-control-bg); }
.retro-button, .retro-icon-button, .retro-badge, .retro-nav-link { font-family: var(--retro-font-control); }


/* =========================================================
   Forms
========================================================= */

.retro-field { display: flex; flex-direction: column; gap: var(--retro-space-2); }
.retro-label { color: var(--retro-text); font-size: .925rem; font-weight: 800; }
.retro-input, .retro-textarea, .retro-select {
  width: 100%; min-height: 2.875rem; padding: .75rem 1rem; background: var(--retro-surface-soft); color: var(--retro-text);
  border: 1px solid var(--retro-border); border-radius: var(--retro-radius-md); font: inherit; outline: none;
  transition: background var(--retro-transition-fast), border-color var(--retro-transition-fast), box-shadow var(--retro-transition-fast);
}
.retro-textarea { min-height: 8rem; resize: vertical; }
.retro-input::placeholder, .retro-textarea::placeholder { color: var(--retro-text-muted); opacity: .82; }
.retro-input:hover, .retro-textarea:hover, .retro-select:hover { border-color: rgb(var(--retro-primary-rgb) / .58); }
.retro-input:focus, .retro-textarea:focus, .retro-select:focus { border-color: var(--retro-focus); box-shadow: var(--retro-focus-ring); }
.retro-help-text { color: var(--retro-text-muted); font-size: .875rem; line-height: 1.45; }

/* Checkbox / Radio */
.retro-check, .retro-radio { display: inline-flex; align-items: center; gap: var(--retro-space-2); color: var(--retro-text); cursor: pointer; }
.retro-check input, .retro-radio input { position: absolute; opacity: 0; pointer-events: none; }
.retro-check-control, .retro-radio-control { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; background: var(--retro-surface-soft); border: 1px solid var(--retro-border); transition: background var(--retro-transition-fast), box-shadow var(--retro-transition-fast); }
.retro-check-control { border-radius: var(--retro-radius-xs); }
.retro-radio-control { border-radius: 50%; }
.retro-check input:checked + .retro-check-control, .retro-radio input:checked + .retro-radio-control { background: var(--retro-primary); border-color: var(--retro-primary); box-shadow: var(--retro-focus-ring); }
.retro-check input:checked + .retro-check-control::after { content: "✓"; color: var(--retro-on-primary); font-size: .9rem; font-weight: 900; }
.retro-radio input:checked + .retro-radio-control::after { content: ""; width: .55rem; height: .55rem; background: var(--retro-on-primary); border-radius: 50%; }

/* Switch */
.retro-switch { display: inline-flex; align-items: center; gap: var(--retro-space-3); color: var(--retro-text); cursor: pointer; }
.retro-switch input { position: absolute; opacity: 0; pointer-events: none; }
.retro-switch-track { position: relative; width: 3.5rem; height: 1.9rem; background: var(--retro-surface-soft); border: 1px solid var(--retro-border); border-radius: var(--retro-radius-pill); transition: background var(--retro-transition-fast), box-shadow var(--retro-transition-fast); }
.retro-switch-thumb { position: absolute; top: .22rem; left: .22rem; width: 1.34rem; height: 1.34rem; background: var(--retro-surface-strong); border: 1px solid var(--retro-border); border-radius: 50%; box-shadow: 0 4px 12px rgb(0 0 0 / var(--retro-shadow-alpha)); transition: left var(--retro-transition-fast), background var(--retro-transition-fast); }
.retro-switch input:checked + .retro-switch-track { background: var(--retro-primary); border-color: var(--retro-primary); }
.retro-switch input:checked + .retro-switch-track .retro-switch-thumb { left: calc(100% - 1.34rem - .22rem); background: var(--retro-on-primary); }

/* =========================================================
   Badges / Nav / Progress / Alerts / Tables
========================================================= */

.retro-badge { display: inline-flex; align-items: center; gap: var(--retro-space-1); min-height: 1.75rem; padding: .35rem .7rem; background: var(--retro-surface-soft); color: var(--retro-text); border: 1px solid var(--retro-border); border-radius: var(--retro-radius-pill); font-size: .8125rem; font-weight: 850; line-height: 1; }
.retro-badge-primary { background: var(--retro-primary); color: var(--retro-on-primary); border-color: var(--retro-primary); }
.retro-badge-secondary { background: var(--retro-secondary); color: var(--retro-on-secondary); border-color: var(--retro-secondary); }
.retro-badge-success { background: var(--retro-success); color: var(--retro-on-success); border-color: var(--retro-success); }
.retro-badge-warning { background: var(--retro-warning); color: var(--retro-on-warning); border-color: var(--retro-warning); }
.retro-badge-danger { background: var(--retro-danger); color: var(--retro-on-danger); border-color: var(--retro-danger); }

.retro-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--retro-space-2); padding: var(--retro-space-2); background: var(--retro-surface); border: 1px solid var(--retro-border); border-radius: var(--retro-radius-xl); box-shadow: 0 10px 30px rgb(0 0 0 / var(--retro-shadow-alpha)); }
.retro-nav-link { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: .65rem 1rem; color: var(--retro-text-muted); border-radius: var(--retro-radius-pill); text-decoration: none; font-weight: 850; transition: color var(--retro-transition-fast), background var(--retro-transition-fast), box-shadow var(--retro-transition-fast); }
.retro-nav-link:hover { color: var(--retro-text); background: var(--retro-surface-soft); }
.retro-nav-link[aria-current="page"], .retro-nav-link.is-active { color: var(--retro-on-primary); background: var(--retro-primary); }

/* Tooltips use compact contrast surfaces that stay readable across theme modes. */
.retro-tooltip, [data-ui="retrofuturism"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
  display: inline-flex; align-items: center; gap: .45rem; max-inline-size: 16rem; padding: .6rem .82rem;
  background: radial-gradient(circle at 20% 20%, rgb(var(--retro-accent-rgb) / .18), transparent 35%), var(--retro-surface-strong);
  color: var(--retro-text); border: 1px solid rgb(var(--retro-primary-rgb) / .62); border-radius: var(--retro-radius-pill);
  box-shadow: 0 0 1.2rem rgb(var(--retro-accent-rgb) / var(--retro-glow-alpha)); font-size: .82rem; font-weight: 900; line-height: 1.25;
  text-transform: uppercase; letter-spacing: .06em;
}
.retro-tooltip-arrow { inline-size: .58rem; block-size: .58rem; flex: 0 0 auto; background: var(--retro-accent); border-radius: 50%; box-shadow: 0 0 .8rem rgb(var(--retro-accent-rgb) / var(--retro-glow-alpha)); }

.retro-progress { width: 100%; height: .9rem; overflow: hidden; background: var(--retro-surface-soft); border: 1px solid var(--retro-border); border-radius: var(--retro-radius-pill); }
.retro-progress-bar { height: 100%; width: var(--retro-progress-value, 50%); background: linear-gradient(90deg, var(--retro-primary), var(--retro-accent)); border-radius: inherit; }

.retro-alert { display: grid; gap: var(--retro-space-2); padding: var(--retro-space-4); background: var(--retro-surface); color: var(--retro-text); border: 1px solid var(--retro-border); border-radius: var(--retro-radius-lg); box-shadow: 0 10px 30px rgb(0 0 0 / var(--retro-shadow-alpha)); }
.retro-alert-success { border-left-color: var(--retro-success); }
.retro-alert-warning { border-left-color: var(--retro-warning); }
.retro-alert-danger { border-left-color: var(--retro-danger); }
.retro-alert-title { margin: 0; font-weight: 900; }
.retro-alert-body { margin: 0; color: var(--retro-text-muted); line-height: 1.55; }

.retro-table-wrap { overflow: auto; }
.retro-table { width: 100%; border-collapse: collapse; }
.retro-table th, .retro-table td { padding: .95rem 1rem; text-align: left; border-bottom: 1px solid var(--retro-border); }
.retro-table th { color: var(--retro-text); font-size: .82rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; background: rgb(var(--retro-primary-rgb) / .08); }
.retro-table td { color: var(--retro-text-muted); }
.retro-table tr:hover td { background: rgb(var(--retro-primary-rgb) / .045); }

/* =========================================================
   Utilities
========================================================= */

.retro-text-primary { color: var(--retro-primary); } .retro-text-secondary { color: var(--retro-secondary); } .retro-text-accent { color: var(--retro-accent); } .retro-text-success { color: var(--retro-success); } .retro-text-warning { color: var(--retro-warning); } .retro-text-danger { color: var(--retro-danger); }
.retro-bg-primary { background: var(--retro-primary); color: var(--retro-on-primary); } .retro-bg-secondary { background: var(--retro-secondary); color: var(--retro-on-secondary); }
.retro-border { border: 1px solid var(--retro-border); } .retro-rounded { border-radius: var(--retro-radius-md); } .retro-rounded-lg { border-radius: var(--retro-radius-lg); } .retro-rounded-xl { border-radius: var(--retro-radius-xl); } .retro-pill { border-radius: var(--retro-radius-pill); }
.retro-sr-only, .retro-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.retro-skip-link { position: absolute; left: 1rem; top: 1rem; z-index: 9999; transform: translateY(-150%); padding: .75rem 1rem; background: var(--retro-primary); color: var(--retro-on-primary); border-radius: var(--retro-radius-md); font-weight: 900; }
.retro-skip-link:focus { transform: translateY(0); }


/* =========================================================
   Retrofuturism Console/Grid Overrides
========================================================= */
[data-ui="retrofuturism"][data-theme][data-mode] {
  --retro-scanline-alpha: .055;
  --retro-grid-alpha: .12;
  --retro-glow-alpha: .34;
}
[data-ui="retrofuturism"] {
  background:
    radial-gradient(circle at 50% -10%, rgb(var(--retro-accent-rgb) / .16), transparent 34rem),
    radial-gradient(circle at 85% 12%, rgb(var(--retro-secondary-rgb) / .12), transparent 28rem),
    linear-gradient(180deg, rgb(255 255 255 / .025), rgb(0 0 0 / .08)),
    var(--retro-bg);
}
.retro-page {
  background-image:
    linear-gradient(to bottom, rgb(255 255 255 / var(--retro-scanline-alpha)) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, rgb(var(--retro-border-rgb) / var(--retro-grid-alpha)) 1px, transparent 1px),
    linear-gradient(rgb(var(--retro-border-rgb) / var(--retro-grid-alpha)) 1px, transparent 1px);
  background-size: 100% 4px, 44px 44px, 44px 44px;
}
.retro-title, .retro-heading {
  text-transform: uppercase;
  letter-spacing: .07em;
  text-shadow: 0 0 12px rgb(var(--retro-primary-rgb) / .24), 0 0 26px rgb(var(--retro-accent-rgb) / .16);
}
.retro-surface, .retro-card, .retro-panel, .retro-toolbar, .retro-table-wrap {
  background:
    linear-gradient(180deg, rgb(255 255 255 / .1), rgb(255 255 255 / .02)),
    linear-gradient(135deg, rgb(var(--retro-primary-rgb) / .08), transparent 46%),
    var(--retro-surface);
  box-shadow:
    0 18px 48px rgb(0 0 0 / var(--retro-shadow-alpha)),
    0 0 0 1px rgb(var(--retro-border-rgb) / .2),
    0 0 26px rgb(var(--retro-primary-rgb) / .14);
}
.retro-button-primary, .retro-badge-primary, .retro-nav-link.is-active {
  box-shadow: 0 0 0 1px rgb(var(--retro-primary-rgb) / .34), 0 0 22px rgb(var(--retro-primary-rgb) / .22);
}

/* Spinner geometry follows the retrofuturism preset's radar-style motion. */
.retro-spinner, .retro-loading-spinner, [data-ui="retrofuturism"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
  display: inline-block;
  inline-size: 2rem;
  block-size: 2rem;
  border: .12rem solid var(--retro-border);
  border-block-start-color: var(--retro-spinner-stroke);
  border-inline-end-color: var(--retro-spinner-accent);
  border-radius: 50%;
  background: radial-gradient(circle at center, var(--retro-accent) 0 .16rem, transparent .18rem), conic-gradient(from -45deg, var(--retro-spinner-stroke), transparent 42%, var(--retro-spinner-accent), var(--retro-spinner-track));
  box-shadow: 0 0 0 .2rem rgb(var(--retro-primary-rgb) / .16), 0 0 1.35rem rgb(var(--retro-accent-rgb) / var(--retro-glow-alpha));
  vertical-align: -.2em;
  animation: retro-spin 1.05s linear infinite;
}
.retro-spinner-sm { inline-size: 1rem; block-size: 1rem; border-width: .08rem; }
.retro-spinner-lg { inline-size: 3rem; block-size: 3rem; border-width: .18rem; }
.retro-button[aria-busy="true"], .retro-icon-button[aria-busy="true"], [data-ui="retrofuturism"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) { gap: .55rem; cursor: progress; }
.retro-button[aria-busy="true"]::after, .retro-icon-button[aria-busy="true"]::after, [data-ui="retrofuturism"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after {
  content: "";
  display: inline-block;
  inline-size: 1em;
  block-size: 1em;
  border: .16em solid rgb(var(--retro-primary-text-rgb) / .42);
  border-block-start-color: currentColor;
  border-radius: 50%;
  animation: retro-spin .75s linear infinite;
}
@keyframes retro-spin { to { transform: rotate(360deg); } }


@media (prefers-reduced-motion: reduce) {
  [data-ui="retrofuturism"] *, [data-ui="retrofuturism"] *::before, [data-ui="retrofuturism"] *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}
@media (prefers-contrast: more) {
  [data-ui="retrofuturism"] { --retro-border-alpha: 1; --retro-focus-alpha: .75; }
}
@media (forced-colors: active) {
  [data-ui="retrofuturism"] * { forced-color-adjust: auto; }
  [data-ui="retrofuturism"] :where(:focus-visible) { outline: 3px solid CanvasText; }
}
@media print {
  [data-ui="retrofuturism"] { background: #fff !important; color: #000 !important; }
  [data-ui="retrofuturism"] * { box-shadow: none !important; text-shadow: none !important; }
  [data-ui="retrofuturism"] a { color: #000 !important; text-decoration: underline; }
}
}


/* styles/brutalism.css */
/* =========================================================
   Brutalism Theme System
   Includes:
   - 10 color schemes
   - light / dark / contrast modes
   - themed UI components and utilities

   Usage:
   <body data-ui="brutalism" data-theme="midnight-gold" data-mode="light">
   <body data-ui="brutalism" data-theme="midnight-gold" data-mode="dark">
   <body data-ui="brutalism" data-theme="midnight-gold" data-mode="contrast">
========================================================= */


@layer ui-style-kit.brutalism {
:root {
  --brutal-radius-xs: 0.25rem;
  --brutal-radius-sm: 0.5rem;
  --brutal-radius-md: 0.75rem;
  --brutal-radius-lg: 1rem;
  --brutal-radius-xl: 1.5rem;
  --brutal-radius-pill: 999px;

  --brutal-space-1: 0.25rem;
  --brutal-space-2: 0.5rem;
  --brutal-space-3: 0.75rem;
  --brutal-space-4: 1rem;
  --brutal-space-5: 1.25rem;
  --brutal-space-6: 1.5rem;
  --brutal-space-8: 2rem;

  --brutal-transition-fast: 140ms ease;
  --brutal-transition-base: 220ms ease;
  --brutal-transition-slow: 360ms ease;

  --brutal-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --brutal-font-display: Orbitron, Rajdhani, Eurostile, "Bank Gothic", var(--brutal-font-sans);
  --brutal-font-body: var(--brutal-font-sans);
  --brutal-font-heading: var(--brutal-font-display);
  --brutal-font-control: var(--brutal-font-display);
  --brutal-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

[data-ui="brutalism"][data-mode="light"] {
  color-scheme: light;
  --brutal-panel-alpha: 0.92;
  --brutal-panel-strong-alpha: 0.98;
  --brutal-panel-soft-alpha: 0.74;
  --brutal-border-alpha: 0.7;
  --brutal-glow-alpha: 0.24;
  --brutal-shadow-alpha: 0.18;
  --brutal-grid-alpha: 0.075;
}

[data-ui="brutalism"][data-mode="dark"] {
  color-scheme: dark;
  --brutal-panel-alpha: 0.82;
  --brutal-panel-strong-alpha: 0.94;
  --brutal-panel-soft-alpha: 0.58;
  --brutal-border-alpha: 0.64;
  --brutal-glow-alpha: 0.42;
  --brutal-shadow-alpha: 0.42;
  --brutal-grid-alpha: 0.12;
}

[data-ui="brutalism"][data-mode="contrast"] {
  color-scheme: dark;
  --brutal-panel-alpha: 1;
  --brutal-panel-strong-alpha: 1;
  --brutal-panel-soft-alpha: 0.92;
  --brutal-border-alpha: 1;
  --brutal-glow-alpha: 0.68;
  --brutal-shadow-alpha: 0.56;
  --brutal-grid-alpha: 0.18;
}

[data-ui="brutalism"][data-theme][data-mode] {
  /* Shared scheme aliases preserve the existing prefixed token API. */
  --brutal-bg-rgb: var(--usk-bg-rgb);
  --brutal-surface-rgb: var(--usk-surface-rgb);
  --brutal-surface-strong-rgb: var(--usk-surface-strong-rgb);
  --brutal-surface-soft-rgb: var(--usk-surface-soft-rgb);
  --brutal-text-rgb: var(--usk-text-rgb);
  --brutal-text-muted-rgb: var(--usk-text-muted-rgb);
  --brutal-border-rgb: var(--usk-border-rgb);
  --brutal-primary-rgb: var(--usk-primary-rgb);
  --brutal-primary-hover-rgb: var(--usk-primary-hover-rgb);
  --brutal-primary-text-rgb: var(--usk-primary-text-rgb);
  --brutal-secondary-rgb: var(--usk-secondary-rgb);
  --brutal-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
  --brutal-secondary-text-rgb: var(--usk-secondary-text-rgb);
  --brutal-accent-rgb: var(--usk-accent-rgb);
  --brutal-success-rgb: var(--usk-success-rgb);
  --brutal-warning-rgb: var(--usk-warning-rgb);
  --brutal-danger-rgb: var(--usk-danger-rgb);
  --brutal-link-rgb: var(--usk-link-rgb);
  --brutal-accent-text-rgb: var(--usk-accent-text-rgb);
  --brutal-success-text-rgb: var(--usk-success-text-rgb);
  --brutal-warning-text-rgb: var(--usk-warning-text-rgb);
  --brutal-danger-text-rgb: var(--usk-danger-text-rgb);
  --brutal-focus-rgb: var(--usk-focus-rgb);
  /* Native fallback selectors inherit visual identity through shared tokens. */
  --usk-native-surface: var(--brutal-surface);
  --usk-native-surface-strong: var(--brutal-surface-strong);
  --usk-native-surface-soft: var(--brutal-surface-soft);
  --usk-native-card-bg: var(--brutal-card-bg);
  --usk-native-control-bg: var(--brutal-control-bg);
  --usk-native-text: var(--brutal-text);
  --usk-native-text-muted: var(--brutal-text-muted);
  --usk-native-border: var(--brutal-border);
  --usk-native-primary: var(--brutal-primary);
  --usk-native-primary-hover: var(--brutal-primary-hover);
  --usk-native-on-primary: var(--brutal-on-primary);
  --usk-native-focus: var(--brutal-focus);
  --usk-native-success: var(--brutal-success);
  --usk-native-warning: var(--brutal-warning);
  --usk-native-danger: var(--brutal-danger);
  --usk-native-link: var(--brutal-link);
  --usk-native-font-body: var(--brutal-font-body);
  --usk-native-font-heading: var(--brutal-font-heading);
  --usk-native-font-control: var(--brutal-font-control);
  --usk-native-font-mono: var(--brutal-font-mono);
  --usk-native-radius-sm: var(--brutal-radius-sm);
  --usk-native-radius: var(--brutal-radius-md);
  --usk-native-radius-lg: var(--brutal-radius-lg);
  --usk-native-shadow: var(--brutal-shadow-sm, none);
  --usk-native-shadow-md: var(--brutal-shadow-md, var(--usk-native-shadow));
  --usk-native-focus-ring: var(--brutal-focus-ring, 0 0 0 3px rgb(var(--brutal-focus-rgb) / .28));
  --usk-native-border-width: 1px;
  --usk-native-field-gap: .5rem;
  --usk-native-panel-padding: var(--brutal-space-5);
  --usk-native-border-width: 3px;
  --usk-native-radius-sm: var(--brutal-radius-xs);
  --usk-native-radius: var(--brutal-radius-sm);
  --usk-native-shadow: 6px 6px 0 var(--brutal-primary);
  --brutal-bg: rgb(var(--brutal-bg-rgb));
  --brutal-surface: rgb(var(--brutal-surface-rgb) / var(--brutal-panel-alpha));
  --brutal-surface-strong: rgb(var(--brutal-surface-strong-rgb) / var(--brutal-panel-strong-alpha));
  --brutal-surface-soft: rgb(var(--brutal-surface-soft-rgb) / var(--brutal-panel-soft-alpha));
  --brutal-text: rgb(var(--brutal-text-rgb));
  --brutal-text-muted: rgb(var(--brutal-text-muted-rgb));
  --brutal-fg: var(--brutal-text);
  --brutal-surface-fg: var(--brutal-text);
  --brutal-muted: var(--brutal-text-muted);
  --brutal-border: rgb(var(--brutal-border-rgb) / var(--brutal-border-alpha));
  --brutal-control-fg: var(--brutal-text);
  --brutal-primary: rgb(var(--brutal-primary-rgb));
  --brutal-primary-hover: rgb(var(--brutal-primary-hover-rgb));
  --brutal-primary-text: rgb(var(--brutal-primary-text-rgb));
  --brutal-secondary: rgb(var(--brutal-secondary-rgb));
  --brutal-secondary-hover: rgb(var(--brutal-secondary-hover-rgb));
  --brutal-secondary-text: rgb(var(--brutal-secondary-text-rgb));
  --brutal-on-primary: var(--brutal-primary-text);
  --brutal-on-secondary: var(--brutal-secondary-text);
  --brutal-on-accent: rgb(var(--brutal-accent-text-rgb));
  --brutal-on-success: rgb(var(--brutal-success-text-rgb));
  --brutal-on-warning: rgb(var(--brutal-warning-text-rgb));
  --brutal-on-danger: rgb(var(--brutal-danger-text-rgb));
  --brutal-accent: rgb(var(--brutal-accent-rgb));
  --brutal-success: rgb(var(--brutal-success-rgb));
  --brutal-warning: rgb(var(--brutal-warning-rgb));
  --brutal-danger: rgb(var(--brutal-danger-rgb));
  --brutal-link: rgb(var(--brutal-link-rgb));
  --brutal-focus: rgb(var(--brutal-focus-rgb));
  --brutal-glow-primary: rgb(var(--brutal-primary-rgb) / var(--brutal-glow-alpha));
  --brutal-glow-secondary: rgb(var(--brutal-secondary-rgb) / var(--brutal-glow-alpha));
  --brutal-glow-accent: rgb(var(--brutal-accent-rgb) / var(--brutal-glow-alpha));
  --brutal-shadow-sm: 0 2px 8px rgb(0 0 0 / var(--brutal-shadow-alpha));
  --brutal-shadow-md: 0 10px 28px rgb(0 0 0 / calc(var(--brutal-shadow-alpha) + 0.05));
  --brutal-shadow-lg: 0 22px 60px rgb(0 0 0 / calc(var(--brutal-shadow-alpha) + 0.12));
  --brutal-theme-bg-size: auto, auto, 32px 32px, 32px 32px, auto;
  --brutal-theme-bg: radial-gradient(circle at 0% 0%, rgb(var(--brutal-primary-rgb) / .14), transparent 28rem), radial-gradient(circle at 100% 0%, rgb(var(--brutal-accent-rgb) / .10), transparent 26rem), linear-gradient(90deg, rgb(var(--brutal-border-rgb) / var(--brutal-grid-alpha)) 1px, transparent 1px), linear-gradient(rgb(var(--brutal-border-rgb) / var(--brutal-grid-alpha)) 1px, transparent 1px), var(--brutal-bg);
  --brutal-card-bg: linear-gradient(135deg, rgb(var(--brutal-primary-rgb) / .10), rgb(var(--brutal-accent-rgb) / .055) 42%, rgb(var(--brutal-surface-strong-rgb) / var(--brutal-panel-alpha)) 100%), var(--brutal-surface);
  --brutal-control-bg: linear-gradient(180deg, rgb(var(--brutal-surface-strong-rgb) / var(--brutal-panel-alpha)), rgb(var(--brutal-surface-soft-rgb) / var(--brutal-panel-soft-alpha)));
  --brutal-spinner-track: rgb(var(--brutal-border-rgb) / max(.28, calc(var(--brutal-border-alpha) * .7)));
  --brutal-spinner-stroke: var(--brutal-primary);
  --brutal-spinner-accent: var(--brutal-accent);
}

/* =========================================================
   1. Midnight Gold
========================================================= */




/* =========================================================
   2. Ocean Steel
========================================================= */




/* =========================================================
   3. Forest Moss
========================================================= */




/* =========================================================
   4. Sunset Ember
========================================================= */




/* =========================================================
   5. Royal Plum
========================================================= */




/* =========================================================
   6. Graphite Cyan
========================================================= */




/* =========================================================
   7. Desert Sage
========================================================= */




/* =========================================================
   8. Rose Quartz
========================================================= */




/* =========================================================
   9. Cyber Lime
========================================================= */




/* =========================================================
   10. Arctic Indigo
========================================================= */




/* =========================================================
   Brutalism Base
========================================================= */

[data-ui="brutalism"] {
  min-height: 100vh;
  background:
    linear-gradient(90deg, rgb(var(--brutal-border-rgb) / var(--brutal-grid-alpha)) 1px, transparent 1px),
    linear-gradient(rgb(var(--brutal-border-rgb) / var(--brutal-grid-alpha)) 1px, transparent 1px),
    var(--brutal-bg);
  background-size: 32px 32px;
  color: var(--brutal-text);
  font-family: var(--brutal-font-body);
}

[data-ui="brutalism"] *,
[data-ui="brutalism"] *::before,
[data-ui="brutalism"] *::after { box-sizing: border-box; }

[data-ui="brutalism"][data-theme][data-mode] { background: var(--brutal-theme-bg); background-size: var(--brutal-theme-bg-size); }

[data-ui="brutalism"] a { color: var(--brutal-link); text-decoration-thickness: 0.14em; text-underline-offset: 0.16em; font-weight: 800; }
[data-ui="brutalism"] ::selection { background: var(--brutal-primary); color: var(--brutal-on-primary); }

/* Spinner geometry follows the brutalism preset's blunt mechanical edges. */
.brutal-spinner, .brutal-loading-spinner, [data-ui="brutalism"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
  display: inline-block;
  inline-size: 2rem;
  block-size: 2rem;
  border: .28rem solid var(--brutal-border);
  border-block-start-color: var(--brutal-spinner-stroke);
  border-inline-end-color: var(--brutal-spinner-accent);
  border-radius: 0;
  box-shadow: .25rem .25rem 0 var(--brutal-secondary);
  vertical-align: -.2em;
  animation: brutal-spin .65s steps(4, end) infinite;
}
.brutal-spinner-sm { inline-size: 1rem; block-size: 1rem; border-width: .16rem; }
.brutal-spinner-lg { inline-size: 3rem; block-size: 3rem; border-width: .36rem; }
.brutal-button[aria-busy="true"], .brutal-icon-button[aria-busy="true"], [data-ui="brutalism"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) { gap: .55rem; cursor: progress; }
.brutal-button[aria-busy="true"]::after, .brutal-icon-button[aria-busy="true"]::after, [data-ui="brutalism"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after {
  content: "";
  display: inline-block;
  inline-size: 1em;
  block-size: 1em;
  border: .16em solid rgb(var(--brutal-primary-text-rgb) / .42);
  border-block-start-color: currentColor;
  border-radius: 50%;
  animation: brutal-spin .75s linear infinite;
}
@keyframes brutal-spin { to { transform: rotate(360deg); } }


.brutal-page { min-height: 100vh; padding: clamp(1rem, 4vw, 3rem); }
.brutal-container { width: min(100% - 2rem, 1200px); margin-inline: auto; }
.brutal-stack { display: flex; flex-direction: column; gap: var(--brutal-space-4); }
.brutal-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--brutal-space-3); }
.brutal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--brutal-space-5); }
.brutal-section { padding: clamp(1.25rem, 4vw, 2.5rem); }

.brutal-title,
.brutal-heading,
.brutal-kicker,
.brutal-button,
.brutal-badge,
.brutal-nav-link { font-family: var(--brutal-font-heading); text-transform: uppercase; }

.brutal-title { margin: 0; font-size: clamp(2rem, 6vw, 4.25rem); line-height: 0.95; letter-spacing: -0.04em; color: var(--brutal-text); text-shadow: 4px 4px 0 var(--brutal-accent); }
.brutal-heading { margin: 0; font-size: clamp(1.25rem, 3vw, 2rem); line-height: 1.05; letter-spacing: -0.02em; }
.brutal-kicker { margin: 0; color: var(--brutal-primary); font-size: 0.85rem; font-weight: 900; letter-spacing: 0.12em; }
.brutal-subtitle, .brutal-copy { margin: 0; color: var(--brutal-text-muted); line-height: 1.6; }
.brutal-text-muted { color: var(--brutal-text-muted); }

.brutal-card,
.brutal-panel,
.brutal-surface,
.brutal-toolbar,
.brutal-table-wrap {
  background: var(--brutal-surface-strong);
  color: var(--brutal-text);
  border: 3px solid var(--brutal-border);
  border-radius: var(--brutal-radius-sm);
  box-shadow: 10px 10px 0 var(--brutal-primary);
  transition: transform var(--brutal-transition-fast), box-shadow var(--brutal-transition-fast), background var(--brutal-transition-fast);
}
.brutal-card, .brutal-panel { padding: var(--brutal-space-6); }
.brutal-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--brutal-space-4); padding: var(--brutal-space-4); }
.brutal-inset, .brutal-well { background: var(--brutal-surface-soft); color: var(--brutal-text); border: 3px solid var(--brutal-border); box-shadow: inset 6px 6px 0 rgb(0 0 0 / 0.16); border-radius: var(--brutal-radius-sm); }
.brutal-well { padding: var(--brutal-space-5); }
.brutal-hover-lift:hover { transform: translate(-3px, -3px); box-shadow: 14px 14px 0 var(--brutal-primary-hover); }
.brutal-pressed { transform: translate(4px, 4px); box-shadow: 4px 4px 0 var(--brutal-primary); }

.brutal-button,
.brutal-icon-button {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--brutal-space-2);
  min-height: 2.85rem; padding: 0.75rem 1.1rem; background: var(--brutal-surface-strong); color: var(--brutal-text);
  border: 3px solid var(--brutal-border); border-radius: var(--brutal-radius-xs); box-shadow: 6px 6px 0 var(--brutal-secondary);
  font: inherit; font-family: var(--brutal-font-display); font-weight: 900; letter-spacing: 0.04em; line-height: 1; cursor: pointer; text-decoration: none;
  transition: transform var(--brutal-transition-fast), box-shadow var(--brutal-transition-fast), background var(--brutal-transition-fast), color var(--brutal-transition-fast);
}
.brutal-button:hover, .brutal-icon-button:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--brutal-primary); }
.brutal-button:active, .brutal-icon-button:active, .brutal-button.is-active, .brutal-button[aria-pressed="true"] { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--brutal-secondary); }
.brutal-button-primary { background: var(--brutal-primary); color: var(--brutal-on-primary); }
.brutal-button-primary:hover { background: var(--brutal-primary-hover); }
.brutal-button-secondary { background: var(--brutal-secondary); color: var(--brutal-on-secondary); box-shadow: 6px 6px 0 var(--brutal-primary); }
.brutal-button-secondary:hover { background: var(--brutal-secondary-hover); }
.brutal-button-danger { background: var(--brutal-danger); color: #fff; }
.brutal-icon-button { width: 2.85rem; padding: 0; }
.brutal-button:disabled, .brutal-icon-button:disabled, .brutal-disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* Theme-responsive component defaults */
.brutal-card, .brutal-panel { background: var(--brutal-card-bg); }
.brutal-toolbar, .brutal-table-wrap { background: var(--brutal-control-bg); }
.brutal-button:not(.brutal-button-primary):not(.brutal-button-secondary):not(.brutal-button-danger):not(.brutal-button-ghost), .brutal-icon-button { background: var(--brutal-control-bg); }
.brutal-button, .brutal-icon-button, .brutal-badge, .brutal-nav-link { font-family: var(--brutal-font-control); }


.brutal-field { display: flex; flex-direction: column; gap: var(--brutal-space-2); }
.brutal-label { font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; }
.brutal-input, .brutal-textarea, .brutal-select { width: 100%; min-height: 2.9rem; padding: 0.75rem 1rem; background: var(--brutal-surface-strong); color: var(--brutal-text); border: 3px solid var(--brutal-border); border-radius: var(--brutal-radius-xs); box-shadow: inset 4px 4px 0 rgb(0 0 0 / 0.12); font: inherit; outline: none; }
.brutal-textarea { min-height: 8rem; resize: vertical; }
.brutal-input:focus, .brutal-textarea:focus, .brutal-select:focus { border-color: var(--brutal-focus); box-shadow: 0 0 0 4px rgb(var(--brutal-focus-rgb) / 0.28), inset 4px 4px 0 rgb(0 0 0 / 0.12); }
.brutal-help-text { color: var(--brutal-text-muted); font-size: 0.9rem; }

.brutal-badge { display: inline-flex; align-items: center; min-height: 1.8rem; padding: 0.35rem 0.75rem; background: var(--brutal-surface-strong); color: var(--brutal-text); border: 3px solid var(--brutal-border); box-shadow: 4px 4px 0 var(--brutal-accent); font-size: 0.8rem; font-weight: 900; }
.brutal-badge-primary { background: var(--brutal-primary); color: var(--brutal-on-primary); }
.brutal-badge-secondary { background: var(--brutal-secondary); color: var(--brutal-on-secondary); }
.brutal-badge-success { background: var(--brutal-success); color: #fff; }
.brutal-badge-warning { background: var(--brutal-warning); color: #111; }
.brutal-badge-danger { background: var(--brutal-danger); color: #fff; }

.brutal-nav { display: flex; flex-wrap: wrap; gap: var(--brutal-space-2); padding: var(--brutal-space-2); background: var(--brutal-surface-strong); border: 3px solid var(--brutal-border); box-shadow: 8px 8px 0 var(--brutal-primary); }
.brutal-nav-link { display: inline-flex; min-height: 2.5rem; align-items: center; padding: 0.65rem 1rem; color: var(--brutal-text); border: 3px solid transparent; font-weight: 900; text-decoration: none; }
.brutal-nav-link:hover { border-color: var(--brutal-border); background: var(--brutal-surface-soft); }
.brutal-nav-link.is-active, .brutal-nav-link[aria-current="page"] { background: var(--brutal-primary); color: var(--brutal-on-primary); border-color: var(--brutal-border); }

/* Tooltips use compact contrast surfaces that stay readable across theme modes. */
.brutal-tooltip, [data-ui="brutalism"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
  display: inline-flex; align-items: center; gap: .45rem; max-inline-size: 16rem; padding: .58rem .78rem;
  background: var(--brutal-warning); color: #111; border: 3px solid var(--brutal-border); border-radius: 0; box-shadow: .28rem .28rem 0 var(--brutal-primary);
  font-size: .82rem; font-weight: 950; line-height: 1.2; text-transform: uppercase; letter-spacing: .04em;
}
.brutal-tooltip-arrow { inline-size: .6rem; block-size: .6rem; flex: 0 0 auto; background: var(--brutal-danger); border: 3px solid var(--brutal-border); transform: rotate(45deg); }

.brutal-progress { width: 100%; height: 1rem; background: var(--brutal-surface-soft); border: 3px solid var(--brutal-border); }
.brutal-progress-bar { height: 100%; width: var(--brutal-progress-value, 50%); background: var(--brutal-primary); }
.brutal-alert { padding: var(--brutal-space-4); background: var(--brutal-surface-strong); border: 3px solid var(--brutal-border); box-shadow: 8px 8px 0 var(--brutal-accent); }
.brutal-alert-success { box-shadow: 8px 8px 0 var(--brutal-success); } .brutal-alert-warning { box-shadow: 8px 8px 0 var(--brutal-warning); } .brutal-alert-danger { box-shadow: 8px 8px 0 var(--brutal-danger); }
.brutal-alert-title { margin: 0; font-weight: 900; text-transform: uppercase; } .brutal-alert-body { margin: 0.5rem 0 0; color: var(--brutal-text-muted); }

.brutal-table-wrap { overflow: auto; box-shadow: 8px 8px 0 var(--brutal-primary); }
.brutal-table { width: 100%; border-collapse: collapse; } .brutal-table th, .brutal-table td { padding: 0.9rem 1rem; border: 2px solid var(--brutal-border); text-align: left; } .brutal-table th { background: var(--brutal-primary); color: var(--brutal-on-primary); text-transform: uppercase; }

.brutal-text-primary { color: var(--brutal-primary); } .brutal-text-secondary { color: var(--brutal-secondary); } .brutal-text-accent { color: var(--brutal-accent); } .brutal-text-success { color: var(--brutal-success); } .brutal-text-warning { color: var(--brutal-warning); } .brutal-text-danger { color: var(--brutal-danger); }
.brutal-bg-primary { background: var(--brutal-primary); color: var(--brutal-on-primary); } .brutal-bg-secondary { background: var(--brutal-secondary); color: var(--brutal-on-secondary); }

[data-ui="brutalism"] :focus-visible { outline: 4px solid var(--brutal-focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { [data-ui="brutalism"] *, [data-ui="brutalism"] *::before, [data-ui="brutalism"] *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }

@media (prefers-reduced-motion: reduce) {
  [data-ui="brutalism"] *, [data-ui="brutalism"] *::before, [data-ui="brutalism"] *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}
@media (prefers-contrast: more) {
  [data-ui="brutalism"] { --brutal-border-alpha: 1; }
}
@media (forced-colors: active) {
  [data-ui="brutalism"] * { forced-color-adjust: auto; }
  [data-ui="brutalism"] :where(:focus-visible) { outline: 3px solid CanvasText; box-shadow: none; }
}
@media print {
  [data-ui="brutalism"] { background: #fff !important; color: #000 !important; }
  [data-ui="brutalism"] * { box-shadow: none !important; text-shadow: none !important; }
  [data-ui="brutalism"] a { color: #000 !important; text-decoration: underline; }
}
}


/* styles/cyberpunk.css */
/* =========================================================
   Cyberpunk Theme System
   Includes:
   - 10 color schemes
   - light / dark / contrast modes
   - themed UI components and utilities

   Usage:
   <body data-ui="cyberpunk" data-theme="midnight-gold" data-mode="light">
   <body data-ui="cyberpunk" data-theme="midnight-gold" data-mode="dark">
   <body data-ui="cyberpunk" data-theme="midnight-gold" data-mode="contrast">
========================================================= */


@layer ui-style-kit.cyberpunk {
:root {
  --cyber-radius-xs: 0.25rem;
  --cyber-radius-sm: 0.5rem;
  --cyber-radius-md: 0.75rem;
  --cyber-radius-lg: 1rem;
  --cyber-radius-xl: 1.5rem;
  --cyber-radius-pill: 999px;

  --cyber-space-1: 0.25rem;
  --cyber-space-2: 0.5rem;
  --cyber-space-3: 0.75rem;
  --cyber-space-4: 1rem;
  --cyber-space-5: 1.25rem;
  --cyber-space-6: 1.5rem;
  --cyber-space-8: 2rem;

  --cyber-transition-fast: 140ms ease;
  --cyber-transition-base: 220ms ease;
  --cyber-transition-slow: 360ms ease;

  --cyber-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cyber-font-display: Orbitron, Rajdhani, Eurostile, "Bank Gothic", var(--cyber-font-sans);
  --cyber-font-body: var(--cyber-font-sans);
  --cyber-font-heading: var(--cyber-font-display);
  --cyber-font-control: var(--cyber-font-display);
  --cyber-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

[data-ui="cyberpunk"][data-mode="light"] {
  color-scheme: light;
  --cyber-panel-alpha: 0.92;
  --cyber-panel-strong-alpha: 0.98;
  --cyber-panel-soft-alpha: 0.74;
  --cyber-border-alpha: 0.7;
  --cyber-glow-alpha: 0.24;
  --cyber-shadow-alpha: 0.18;
  --cyber-grid-alpha: 0.075;
}

[data-ui="cyberpunk"][data-mode="dark"] {
  color-scheme: dark;
  --cyber-panel-alpha: 0.82;
  --cyber-panel-strong-alpha: 0.94;
  --cyber-panel-soft-alpha: 0.58;
  --cyber-border-alpha: 0.64;
  --cyber-glow-alpha: 0.42;
  --cyber-shadow-alpha: 0.42;
  --cyber-grid-alpha: 0.12;
}

[data-ui="cyberpunk"][data-mode="contrast"] {
  color-scheme: dark;
  --cyber-panel-alpha: 1;
  --cyber-panel-strong-alpha: 1;
  --cyber-panel-soft-alpha: 0.92;
  --cyber-border-alpha: 1;
  --cyber-glow-alpha: 0.68;
  --cyber-shadow-alpha: 0.56;
  --cyber-grid-alpha: 0.18;
}

[data-ui="cyberpunk"][data-theme][data-mode] {
  /* Shared scheme aliases preserve the existing prefixed token API. */
  --cyber-bg-rgb: var(--usk-bg-rgb);
  --cyber-surface-rgb: var(--usk-surface-rgb);
  --cyber-surface-strong-rgb: var(--usk-surface-strong-rgb);
  --cyber-surface-soft-rgb: var(--usk-surface-soft-rgb);
  --cyber-text-rgb: var(--usk-text-rgb);
  --cyber-text-muted-rgb: var(--usk-text-muted-rgb);
  --cyber-border-rgb: var(--usk-border-rgb);
  --cyber-primary-rgb: var(--usk-primary-rgb);
  --cyber-primary-hover-rgb: var(--usk-primary-hover-rgb);
  --cyber-primary-text-rgb: var(--usk-primary-text-rgb);
  --cyber-secondary-rgb: var(--usk-secondary-rgb);
  --cyber-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
  --cyber-secondary-text-rgb: var(--usk-secondary-text-rgb);
  --cyber-accent-rgb: var(--usk-accent-rgb);
  --cyber-success-rgb: var(--usk-success-rgb);
  --cyber-warning-rgb: var(--usk-warning-rgb);
  --cyber-danger-rgb: var(--usk-danger-rgb);
  --cyber-link-rgb: var(--usk-link-rgb);
  --cyber-accent-text-rgb: var(--usk-accent-text-rgb);
  --cyber-success-text-rgb: var(--usk-success-text-rgb);
  --cyber-warning-text-rgb: var(--usk-warning-text-rgb);
  --cyber-danger-text-rgb: var(--usk-danger-text-rgb);
  --cyber-focus-rgb: var(--usk-focus-rgb);
  /* Native fallback selectors inherit visual identity through shared tokens. */
  --usk-native-surface: var(--cyber-surface);
  --usk-native-surface-strong: var(--cyber-surface-strong);
  --usk-native-surface-soft: var(--cyber-surface-soft);
  --usk-native-card-bg: var(--cyber-card-bg);
  --usk-native-control-bg: var(--cyber-control-bg);
  --usk-native-text: var(--cyber-text);
  --usk-native-text-muted: var(--cyber-text-muted);
  --usk-native-border: var(--cyber-border);
  --usk-native-primary: var(--cyber-primary);
  --usk-native-primary-hover: var(--cyber-primary-hover);
  --usk-native-on-primary: var(--cyber-on-primary);
  --usk-native-focus: var(--cyber-focus);
  --usk-native-success: var(--cyber-success);
  --usk-native-warning: var(--cyber-warning);
  --usk-native-danger: var(--cyber-danger);
  --usk-native-link: var(--cyber-link);
  --usk-native-font-body: var(--cyber-font-body);
  --usk-native-font-heading: var(--cyber-font-heading);
  --usk-native-font-control: var(--cyber-font-control);
  --usk-native-font-mono: var(--cyber-font-mono);
  --usk-native-radius-sm: var(--cyber-radius-sm);
  --usk-native-radius: var(--cyber-radius-md);
  --usk-native-radius-lg: var(--cyber-radius-lg);
  --usk-native-shadow: var(--cyber-shadow-sm, none);
  --usk-native-shadow-md: var(--cyber-shadow-md, var(--usk-native-shadow));
  --usk-native-focus-ring: var(--cyber-focus-ring, 0 0 0 3px rgb(var(--cyber-focus-rgb) / .28));
  --usk-native-border-width: 1px;
  --usk-native-field-gap: .5rem;
  --usk-native-panel-padding: var(--cyber-space-5);
  --usk-native-shadow: 0 0 18px rgb(var(--cyber-primary-rgb) / .16);
  --usk-native-focus-ring: 0 0 0 2px rgb(var(--cyber-focus-rgb) / .24), 0 0 24px rgb(var(--cyber-focus-rgb) / .24);
  --cyber-bg: rgb(var(--cyber-bg-rgb));
  --cyber-surface: rgb(var(--cyber-surface-rgb) / var(--cyber-panel-alpha));
  --cyber-surface-strong: rgb(var(--cyber-surface-strong-rgb) / var(--cyber-panel-strong-alpha));
  --cyber-surface-soft: rgb(var(--cyber-surface-soft-rgb) / var(--cyber-panel-soft-alpha));
  --cyber-text: rgb(var(--cyber-text-rgb));
  --cyber-text-muted: rgb(var(--cyber-text-muted-rgb));
  --cyber-fg: var(--cyber-text);
  --cyber-surface-fg: var(--cyber-text);
  --cyber-muted: var(--cyber-text-muted);
  --cyber-border: rgb(var(--cyber-border-rgb) / var(--cyber-border-alpha));
  --cyber-control-fg: var(--cyber-text);
  --cyber-primary: rgb(var(--cyber-primary-rgb));
  --cyber-primary-hover: rgb(var(--cyber-primary-hover-rgb));
  --cyber-primary-text: rgb(var(--cyber-primary-text-rgb));
  --cyber-secondary: rgb(var(--cyber-secondary-rgb));
  --cyber-secondary-hover: rgb(var(--cyber-secondary-hover-rgb));
  --cyber-secondary-text: rgb(var(--cyber-secondary-text-rgb));
  --cyber-on-primary: var(--cyber-primary-text);
  --cyber-on-secondary: var(--cyber-secondary-text);
  --cyber-on-accent: rgb(var(--cyber-accent-text-rgb));
  --cyber-on-success: rgb(var(--cyber-success-text-rgb));
  --cyber-on-warning: rgb(var(--cyber-warning-text-rgb));
  --cyber-on-danger: rgb(var(--cyber-danger-text-rgb));
  --cyber-accent: rgb(var(--cyber-accent-rgb));
  --cyber-success: rgb(var(--cyber-success-rgb));
  --cyber-warning: rgb(var(--cyber-warning-rgb));
  --cyber-danger: rgb(var(--cyber-danger-rgb));
  --cyber-link: rgb(var(--cyber-link-rgb));
  --cyber-focus: rgb(var(--cyber-focus-rgb));
  --cyber-glow-primary: rgb(var(--cyber-primary-rgb) / var(--cyber-glow-alpha));
  --cyber-glow-secondary: rgb(var(--cyber-secondary-rgb) / var(--cyber-glow-alpha));
  --cyber-glow-accent: rgb(var(--cyber-accent-rgb) / var(--cyber-glow-alpha));
  --cyber-shadow-sm: 0 2px 8px rgb(0 0 0 / var(--cyber-shadow-alpha));
  --cyber-shadow-md: 0 10px 28px rgb(0 0 0 / calc(var(--cyber-shadow-alpha) + 0.05));
  --cyber-shadow-lg: 0 22px 60px rgb(0 0 0 / calc(var(--cyber-shadow-alpha) + 0.12));
  --cyber-theme-bg-size: auto, auto, auto, 48px 48px, 48px 48px, auto;
  --cyber-theme-bg: radial-gradient(circle at 10% 10%, rgb(var(--cyber-primary-rgb) / .18), transparent 24rem), radial-gradient(circle at 90% 0%, rgb(var(--cyber-secondary-rgb) / .16), transparent 28rem), radial-gradient(circle at 50% 100%, rgb(var(--cyber-accent-rgb) / .10), transparent 34rem), linear-gradient(90deg, rgb(var(--cyber-primary-rgb) / var(--cyber-grid-alpha)) 1px, transparent 1px), linear-gradient(rgb(var(--cyber-secondary-rgb) / var(--cyber-grid-alpha)) 1px, transparent 1px), var(--cyber-bg);
  --cyber-card-bg: linear-gradient(135deg, rgb(var(--cyber-primary-rgb) / .10), rgb(var(--cyber-accent-rgb) / .055) 42%, rgb(var(--cyber-surface-strong-rgb) / var(--cyber-panel-alpha)) 100%), var(--cyber-surface);
  --cyber-control-bg: linear-gradient(180deg, rgb(var(--cyber-surface-strong-rgb) / var(--cyber-panel-alpha)), rgb(var(--cyber-surface-soft-rgb) / var(--cyber-panel-soft-alpha)));
  --cyber-spinner-track: rgb(var(--cyber-border-rgb) / max(.28, calc(var(--cyber-border-alpha) * .7)));
  --cyber-spinner-stroke: var(--cyber-primary);
  --cyber-spinner-accent: var(--cyber-accent);
}

/* =========================================================
   1. Midnight Gold
========================================================= */




/* =========================================================
   2. Ocean Steel
========================================================= */




/* =========================================================
   3. Forest Moss
========================================================= */




/* =========================================================
   4. Sunset Ember
========================================================= */




/* =========================================================
   5. Royal Plum
========================================================= */




/* =========================================================
   6. Graphite Cyan
========================================================= */




/* =========================================================
   7. Desert Sage
========================================================= */




/* =========================================================
   8. Rose Quartz
========================================================= */




/* =========================================================
   9. Cyber Lime
========================================================= */




/* =========================================================
   10. Arctic Indigo
========================================================= */




/* =========================================================
   Cyberpunk Base
========================================================= */

[data-ui="cyberpunk"] {
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 10%, rgb(var(--cyber-primary-rgb) / 0.16), transparent 24rem),
    radial-gradient(circle at 90% 0%, rgb(var(--cyber-secondary-rgb) / 0.16), transparent 28rem),
    linear-gradient(90deg, rgb(var(--cyber-primary-rgb) / var(--cyber-grid-alpha)) 1px, transparent 1px),
    linear-gradient(rgb(var(--cyber-secondary-rgb) / var(--cyber-grid-alpha)) 1px, transparent 1px),
    var(--cyber-bg);
  background-size: auto, auto, 48px 48px, 48px 48px, auto;
  color: var(--cyber-text);
  font-family: var(--cyber-font-body);
}
[data-ui="cyberpunk"] *, [data-ui="cyberpunk"] *::before, [data-ui="cyberpunk"] *::after { box-sizing: border-box; }
[data-ui="cyberpunk"][data-theme][data-mode] { background: var(--cyber-theme-bg); background-size: var(--cyber-theme-bg-size); }
[data-ui="cyberpunk"] a { color: var(--cyber-link); text-decoration-color: rgb(var(--cyber-primary-rgb) / 0.6); text-underline-offset: 0.18em; }
[data-ui="cyberpunk"] ::selection { background: var(--cyber-primary); color: var(--cyber-on-primary); }

.cyber-page { position: relative; min-height: 100vh; padding: clamp(1rem, 4vw, 3rem); overflow: hidden; }
.cyber-page::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgb(255 255 255 / 0.035) 0 1px, transparent 1px 4px); mix-blend-mode: screen; }
.cyber-container { width: min(100% - 2rem, 1200px); margin-inline: auto; } .cyber-stack { display: flex; flex-direction: column; gap: var(--cyber-space-4); } .cyber-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cyber-space-3); } .cyber-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--cyber-space-5); } .cyber-section { padding: clamp(1.25rem, 4vw, 2.5rem); }

.cyber-title, .cyber-heading, .cyber-kicker, .cyber-button, .cyber-badge, .cyber-nav-link { font-family: var(--cyber-font-heading); text-transform: uppercase; }
.cyber-title { margin: 0; font-size: clamp(2rem, 5vw, 4rem); line-height: 1; letter-spacing: 0.08em; color: var(--cyber-text); text-shadow: 0 0 10px var(--cyber-glow-primary), 0 0 26px var(--cyber-glow-accent); }
.cyber-heading { margin: 0; font-size: clamp(1.25rem, 3vw, 2rem); letter-spacing: 0.08em; } .cyber-kicker { margin: 0; color: var(--cyber-primary); letter-spacing: 0.18em; font-size: 0.8rem; font-weight: 900; }
.cyber-subtitle, .cyber-copy { margin: 0; color: var(--cyber-text-muted); line-height: 1.65; } .cyber-text-muted { color: var(--cyber-text-muted); }

.cyber-card, .cyber-panel, .cyber-console, .cyber-toolbar, .cyber-table-wrap {
  position: relative; background: linear-gradient(135deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.02)), var(--cyber-surface);
  color: var(--cyber-text); border: 1px solid var(--cyber-border); border-radius: var(--cyber-radius-md); box-shadow: var(--cyber-shadow-md), 0 0 24px var(--cyber-glow-primary); overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 1rem, 100% 100%, 1rem 100%, 0 calc(100% - 1rem));
  transition: transform var(--cyber-transition-base), box-shadow var(--cyber-transition-base), border-color var(--cyber-transition-base);
}
.cyber-card::before, .cyber-panel::before, .cyber-console::before, .cyber-toolbar::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-top: 2px solid rgb(var(--cyber-primary-rgb) / 0.5); background: linear-gradient(120deg, transparent 0 68%, rgb(var(--cyber-accent-rgb) / 0.09)); }
.cyber-card, .cyber-panel, .cyber-console { padding: var(--cyber-space-6); } .cyber-console { background: linear-gradient(180deg, rgb(var(--cyber-primary-rgb) / 0.08), transparent), var(--cyber-surface-strong); }
.cyber-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cyber-space-4); padding: var(--cyber-space-4); }
.cyber-hover-lift:hover { transform: translateY(-3px); border-color: var(--cyber-primary); box-shadow: var(--cyber-shadow-lg), 0 0 34px var(--cyber-glow-primary), 0 0 48px var(--cyber-glow-secondary); }
.cyber-inset, .cyber-well { background: linear-gradient(180deg, rgb(0 0 0 / 0.1), rgb(255 255 255 / 0.02)), var(--cyber-surface-soft); border: 1px solid rgb(var(--cyber-border-rgb) / 0.46); border-radius: var(--cyber-radius-md); box-shadow: inset 0 0 24px rgb(0 0 0 / 0.18); } .cyber-well { padding: var(--cyber-space-5); }

.cyber-button, .cyber-icon-button { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--cyber-space-2); min-height: 2.85rem; padding: 0.75rem 1.1rem; background: linear-gradient(135deg, rgb(var(--cyber-primary-rgb) / 0.22), rgb(var(--cyber-accent-rgb) / 0.1)), var(--cyber-surface); color: var(--cyber-text); border: 1px solid rgb(var(--cyber-primary-rgb) / 0.7); border-radius: var(--cyber-radius-xs); box-shadow: var(--cyber-shadow-sm), 0 0 18px var(--cyber-glow-primary); font: inherit; font-family: var(--cyber-font-display); font-weight: 900; letter-spacing: 0.09em; cursor: pointer; text-decoration: none; clip-path: polygon(0 0, calc(100% - .75rem) 0, 100% .75rem, 100% 100%, .75rem 100%, 0 calc(100% - .75rem)); transition: transform var(--cyber-transition-fast), box-shadow var(--cyber-transition-fast), background var(--cyber-transition-fast); }
.cyber-button:hover, .cyber-icon-button:hover { transform: translateY(-1px); box-shadow: var(--cyber-shadow-md), 0 0 26px var(--cyber-glow-primary); } .cyber-button:active, .cyber-icon-button:active, .cyber-button.is-active, .cyber-button[aria-pressed="true"] { transform: translateY(1px); box-shadow: inset 0 0 18px rgb(0 0 0 / 0.22), 0 0 18px var(--cyber-glow-primary); }
.cyber-button-primary { background: linear-gradient(135deg, rgb(255 255 255 / 0.14), transparent), var(--cyber-primary); color: var(--cyber-on-primary); } .cyber-button-primary:hover { background: var(--cyber-primary-hover); } .cyber-button-secondary { background: linear-gradient(135deg, rgb(255 255 255 / 0.14), transparent), var(--cyber-secondary); color: var(--cyber-on-secondary); border-color: rgb(var(--cyber-secondary-rgb) / 0.7); } .cyber-button-secondary:hover { background: var(--cyber-secondary-hover); } .cyber-button-danger { background: var(--cyber-danger); color: #fff; } .cyber-icon-button { width: 2.85rem; padding: 0; }

.cyber-field { display: flex; flex-direction: column; gap: var(--cyber-space-2); } .cyber-label { font-family: var(--cyber-font-heading); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 800; font-size: 0.8rem; }
.cyber-input, .cyber-textarea, .cyber-select { width: 100%; min-height: 2.9rem; padding: 0.8rem 1rem; background: var(--cyber-surface-soft); color: var(--cyber-text); border: 1px solid rgb(var(--cyber-border-rgb) / 0.58); border-radius: var(--cyber-radius-xs); box-shadow: inset 0 0 18px rgb(0 0 0 / 0.2); font: inherit; outline: none; } .cyber-textarea { min-height: 8rem; resize: vertical; }
.cyber-input:focus, .cyber-textarea:focus, .cyber-select:focus { border-color: var(--cyber-focus); box-shadow: 0 0 0 2px rgb(var(--cyber-focus-rgb) / 0.24), 0 0 24px rgb(var(--cyber-focus-rgb) / 0.24), inset 0 0 18px rgb(0 0 0 / 0.2); } .cyber-help-text { color: var(--cyber-text-muted); font-size: 0.9rem; }

.cyber-badge { display: inline-flex; align-items: center; min-height: 1.8rem; padding: 0.35rem 0.75rem; background: var(--cyber-surface); color: var(--cyber-text); border: 1px solid rgb(var(--cyber-primary-rgb) / 0.7); box-shadow: 0 0 16px var(--cyber-glow-primary); font-size: 0.78rem; font-weight: 900; letter-spacing: 0.1em; clip-path: polygon(.5rem 0, 100% 0, calc(100% - .5rem) 100%, 0 100%); }
.cyber-badge-primary { background: var(--cyber-primary); color: var(--cyber-on-primary); } .cyber-badge-secondary { background: var(--cyber-secondary); color: var(--cyber-on-secondary); } .cyber-badge-success { background: var(--cyber-success); color: #fff; } .cyber-badge-warning { background: var(--cyber-warning); color: #111; } .cyber-badge-danger { background: var(--cyber-danger); color: #fff; }

.cyber-nav { display: flex; flex-wrap: wrap; gap: var(--cyber-space-2); padding: var(--cyber-space-2); background: var(--cyber-surface); border: 1px solid var(--cyber-border); border-radius: var(--cyber-radius-md); box-shadow: var(--cyber-shadow-md), 0 0 22px var(--cyber-glow-primary); } .cyber-nav-link { display: inline-flex; min-height: 2.5rem; align-items: center; padding: 0.65rem 1rem; color: var(--cyber-text-muted); border: 1px solid transparent; border-radius: var(--cyber-radius-xs); text-decoration: none; font-weight: 900; letter-spacing: 0.08em; } .cyber-nav-link:hover { color: var(--cyber-text); border-color: rgb(var(--cyber-primary-rgb) / 0.48); } .cyber-nav-link.is-active, .cyber-nav-link[aria-current="page"] { background: var(--cyber-primary); color: var(--cyber-on-primary); border-color: var(--cyber-primary); box-shadow: 0 0 18px var(--cyber-glow-primary); }
/* Tooltips use compact contrast surfaces that stay readable across theme modes. */
.cyber-tooltip, [data-ui="cyberpunk"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) { display: inline-flex; align-items: center; gap: .45rem; max-inline-size: 16rem; padding: .58rem .82rem; background: linear-gradient(90deg, rgb(var(--cyber-primary-rgb) / .26), rgb(var(--cyber-accent-rgb) / .12)), var(--cyber-surface-strong); color: var(--cyber-text); border: 1px solid rgb(var(--cyber-primary-rgb) / .7); border-radius: var(--cyber-radius-xs); clip-path: polygon(0 .35rem, .35rem 0, 100% 0, 100% calc(100% - .35rem), calc(100% - .35rem) 100%, 0 100%); box-shadow: 0 0 1rem var(--cyber-glow-primary); font-size: .82rem; font-weight: 900; line-height: 1.25; text-transform: uppercase; letter-spacing: .08em; }
.cyber-tooltip-arrow { inline-size: .58rem; block-size: .58rem; flex: 0 0 auto; background: var(--cyber-accent); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); box-shadow: 0 0 .8rem var(--cyber-glow-accent); }
.cyber-progress { width: 100%; height: 0.9rem; background: var(--cyber-surface-soft); border: 1px solid var(--cyber-border); box-shadow: inset 0 0 18px rgb(0 0 0 / .18); } .cyber-progress-bar { height: 100%; width: var(--cyber-progress-value, 50%); background: linear-gradient(90deg, var(--cyber-primary), var(--cyber-accent)); box-shadow: 0 0 18px var(--cyber-glow-primary); }
.cyber-alert { padding: var(--cyber-space-4); background: var(--cyber-surface); border: 1px solid var(--cyber-border); border-left: 4px solid var(--cyber-primary); box-shadow: var(--cyber-shadow-md), 0 0 22px var(--cyber-glow-primary); } .cyber-alert-success { border-left-color: var(--cyber-success); } .cyber-alert-warning { border-left-color: var(--cyber-warning); } .cyber-alert-danger { border-left-color: var(--cyber-danger); } .cyber-alert-title { margin: 0; font-family: var(--cyber-font-heading); text-transform: uppercase; } .cyber-alert-body { margin: .5rem 0 0; color: var(--cyber-text-muted); }
.cyber-table-wrap { overflow: auto; } .cyber-table { width: 100%; border-collapse: collapse; } .cyber-table th, .cyber-table td { padding: .9rem 1rem; border-bottom: 1px solid rgb(var(--cyber-border-rgb) / .38); text-align: left; } .cyber-table th { background: rgb(var(--cyber-primary-rgb) / .12); font-family: var(--cyber-font-heading); text-transform: uppercase; letter-spacing: .1em; } .cyber-table td { color: var(--cyber-text-muted); } .cyber-table tr:hover td { background: rgb(var(--cyber-primary-rgb) / .06); }
.cyber-text-primary { color: var(--cyber-primary); } .cyber-text-secondary { color: var(--cyber-secondary); } .cyber-text-accent { color: var(--cyber-accent); } .cyber-text-success { color: var(--cyber-success); } .cyber-text-warning { color: var(--cyber-warning); } .cyber-text-danger { color: var(--cyber-danger); }
[data-ui="cyberpunk"] :focus-visible { outline: 3px solid var(--cyber-focus); outline-offset: 3px; } .cyber-button:focus-visible, .cyber-icon-button:focus-visible, .cyber-input:focus-visible, .cyber-nav-link:focus-visible { box-shadow: 0 0 0 3px rgb(var(--cyber-focus-rgb) / .28), 0 0 28px rgb(var(--cyber-focus-rgb) / .28); }
@media (prefers-reduced-motion: reduce) { [data-ui="cyberpunk"] *, [data-ui="cyberpunk"] *::before, [data-ui="cyberpunk"] *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }


/* Theme-responsive component defaults */
.cyber-card, .cyber-panel { background: var(--cyber-card-bg); }
.cyber-toolbar, .cyber-table-wrap { background: var(--cyber-control-bg); }
.cyber-button:not(.cyber-button-primary):not(.cyber-button-secondary):not(.cyber-button-danger):not(.cyber-button-ghost), .cyber-icon-button { background: var(--cyber-control-bg); }
.cyber-button, .cyber-icon-button, .cyber-badge, .cyber-nav-link { font-family: var(--cyber-font-control); }

/* Spinner geometry follows the cyberpunk preset's clipped neon readouts. */
.cyber-spinner, .cyber-loading-spinner, [data-ui="cyberpunk"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
  display: inline-block;
  inline-size: 2rem;
  block-size: 2rem;
  border: .16rem solid rgb(var(--cyber-primary-rgb) / .72);
  border-block-start-color: var(--cyber-spinner-stroke);
  border-inline-end-color: var(--cyber-spinner-accent);
  border-radius: var(--cyber-radius-xs);
  clip-path: polygon(50% 0, 100% 26%, 100% 74%, 50% 100%, 0 74%, 0 26%);
  background: conic-gradient(from 90deg, transparent 0 22%, var(--cyber-spinner-stroke) 0 45%, transparent 0 58%, var(--cyber-spinner-accent) 0 82%, transparent 0);
  box-shadow: 0 0 1rem var(--cyber-glow-primary), inset 0 0 .65rem rgb(var(--cyber-accent-rgb) / .38);
  vertical-align: -.2em;
  animation: cyber-spin .72s linear infinite;
}
.cyber-spinner-sm { inline-size: 1rem; block-size: 1rem; border-width: .1rem; }
.cyber-spinner-lg { inline-size: 3rem; block-size: 3rem; border-width: .22rem; }
.cyber-button[aria-busy="true"], .cyber-icon-button[aria-busy="true"], [data-ui="cyberpunk"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) { gap: .55rem; cursor: progress; }
.cyber-button[aria-busy="true"]::after, .cyber-icon-button[aria-busy="true"]::after, [data-ui="cyberpunk"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after {
  content: "";
  display: inline-block;
  inline-size: 1em;
  block-size: 1em;
  border: .16em solid rgb(var(--cyber-primary-text-rgb) / .42);
  border-block-start-color: currentColor;
  border-radius: 50%;
  animation: cyber-spin .75s linear infinite;
}
@keyframes cyber-spin { to { transform: rotate(360deg); } }


@media (prefers-reduced-motion: reduce) {
  [data-ui="cyberpunk"] *, [data-ui="cyberpunk"] *::before, [data-ui="cyberpunk"] *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}
@media (prefers-contrast: more) {
  [data-ui="cyberpunk"] { --cyber-border-alpha: 1; }
}
@media (forced-colors: active) {
  [data-ui="cyberpunk"] * { forced-color-adjust: auto; }
  [data-ui="cyberpunk"] :where(:focus-visible) { outline: 3px solid CanvasText; box-shadow: none; }
}
@media print {
  [data-ui="cyberpunk"] { background: #fff !important; color: #000 !important; }
  [data-ui="cyberpunk"] * { box-shadow: none !important; text-shadow: none !important; }
  [data-ui="cyberpunk"] a { color: #000 !important; text-decoration: underline; }
}
}


/* styles/y2k.css */
/* =========================================================
   Y2K Theme System
   Includes:
   - 10 color schemes
   - light / dark / contrast modes
   - themed UI components and utilities

   Usage:
   <body data-ui="y2k" data-theme="midnight-gold" data-mode="light">
   <body data-ui="y2k" data-theme="midnight-gold" data-mode="dark">
   <body data-ui="y2k" data-theme="midnight-gold" data-mode="contrast">
========================================================= */


@layer ui-style-kit.y2k {
:root {
  --y2k-radius-xs: 0.25rem;
  --y2k-radius-sm: 0.5rem;
  --y2k-radius-md: 0.75rem;
  --y2k-radius-lg: 1rem;
  --y2k-radius-xl: 1.5rem;
  --y2k-radius-pill: 999px;

  --y2k-space-1: 0.25rem;
  --y2k-space-2: 0.5rem;
  --y2k-space-3: 0.75rem;
  --y2k-space-4: 1rem;
  --y2k-space-5: 1.25rem;
  --y2k-space-6: 1.5rem;
  --y2k-space-8: 2rem;

  --y2k-transition-fast: 140ms ease;
  --y2k-transition-base: 220ms ease;
  --y2k-transition-slow: 360ms ease;

  --y2k-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --y2k-font-display: Orbitron, Rajdhani, Eurostile, "Bank Gothic", var(--y2k-font-sans);
  --y2k-font-body: var(--y2k-font-sans);
  --y2k-font-heading: var(--y2k-font-display);
  --y2k-font-control: var(--y2k-font-display);
  --y2k-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

[data-ui="y2k"][data-mode="light"] {
  color-scheme: light;
  --y2k-panel-alpha: 0.92;
  --y2k-panel-strong-alpha: 0.98;
  --y2k-panel-soft-alpha: 0.74;
  --y2k-border-alpha: 0.7;
  --y2k-glow-alpha: 0.24;
  --y2k-shadow-alpha: 0.18;
  --y2k-grid-alpha: 0.075;
}

[data-ui="y2k"][data-mode="dark"] {
  color-scheme: dark;
  --y2k-panel-alpha: 0.82;
  --y2k-panel-strong-alpha: 0.94;
  --y2k-panel-soft-alpha: 0.58;
  --y2k-border-alpha: 0.64;
  --y2k-glow-alpha: 0.42;
  --y2k-shadow-alpha: 0.42;
  --y2k-grid-alpha: 0.12;
}

[data-ui="y2k"][data-mode="contrast"] {
  color-scheme: dark;
  --y2k-panel-alpha: 1;
  --y2k-panel-strong-alpha: 1;
  --y2k-panel-soft-alpha: 0.92;
  --y2k-border-alpha: 1;
  --y2k-glow-alpha: 0.68;
  --y2k-shadow-alpha: 0.56;
  --y2k-grid-alpha: 0.18;
}

[data-ui="y2k"][data-theme][data-mode] {
  /* Shared scheme aliases preserve the existing prefixed token API. */
  --y2k-bg-rgb: var(--usk-bg-rgb);
  --y2k-surface-rgb: var(--usk-surface-rgb);
  --y2k-surface-strong-rgb: var(--usk-surface-strong-rgb);
  --y2k-surface-soft-rgb: var(--usk-surface-soft-rgb);
  --y2k-text-rgb: var(--usk-text-rgb);
  --y2k-text-muted-rgb: var(--usk-text-muted-rgb);
  --y2k-border-rgb: var(--usk-border-rgb);
  --y2k-primary-rgb: var(--usk-primary-rgb);
  --y2k-primary-hover-rgb: var(--usk-primary-hover-rgb);
  --y2k-primary-text-rgb: var(--usk-primary-text-rgb);
  --y2k-secondary-rgb: var(--usk-secondary-rgb);
  --y2k-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
  --y2k-secondary-text-rgb: var(--usk-secondary-text-rgb);
  --y2k-accent-rgb: var(--usk-accent-rgb);
  --y2k-success-rgb: var(--usk-success-rgb);
  --y2k-warning-rgb: var(--usk-warning-rgb);
  --y2k-danger-rgb: var(--usk-danger-rgb);
  --y2k-link-rgb: var(--usk-link-rgb);
  --y2k-accent-text-rgb: var(--usk-accent-text-rgb);
  --y2k-success-text-rgb: var(--usk-success-text-rgb);
  --y2k-warning-text-rgb: var(--usk-warning-text-rgb);
  --y2k-danger-text-rgb: var(--usk-danger-text-rgb);
  --y2k-focus-rgb: var(--usk-focus-rgb);
  /* Native fallback selectors inherit visual identity through shared tokens. */
  --usk-native-surface: var(--y2k-surface);
  --usk-native-surface-strong: var(--y2k-surface-strong);
  --usk-native-surface-soft: var(--y2k-surface-soft);
  --usk-native-card-bg: var(--y2k-card-bg);
  --usk-native-control-bg: var(--y2k-control-bg);
  --usk-native-text: var(--y2k-text);
  --usk-native-text-muted: var(--y2k-text-muted);
  --usk-native-border: var(--y2k-border);
  --usk-native-primary: var(--y2k-primary);
  --usk-native-primary-hover: var(--y2k-primary-hover);
  --usk-native-on-primary: var(--y2k-on-primary);
  --usk-native-focus: var(--y2k-focus);
  --usk-native-success: var(--y2k-success);
  --usk-native-warning: var(--y2k-warning);
  --usk-native-danger: var(--y2k-danger);
  --usk-native-link: var(--y2k-link);
  --usk-native-font-body: var(--y2k-font-body);
  --usk-native-font-heading: var(--y2k-font-heading);
  --usk-native-font-control: var(--y2k-font-control);
  --usk-native-font-mono: var(--y2k-font-mono);
  --usk-native-radius-sm: var(--y2k-radius-sm);
  --usk-native-radius: var(--y2k-radius-md);
  --usk-native-radius-lg: var(--y2k-radius-lg);
  --usk-native-shadow: var(--y2k-shadow-sm, none);
  --usk-native-shadow-md: var(--y2k-shadow-md, var(--usk-native-shadow));
  --usk-native-focus-ring: var(--y2k-focus-ring, 0 0 0 3px rgb(var(--y2k-focus-rgb) / .28));
  --usk-native-border-width: 1px;
  --usk-native-field-gap: .5rem;
  --usk-native-panel-padding: var(--y2k-space-5);
  --y2k-bg: rgb(var(--y2k-bg-rgb));
  --y2k-surface: rgb(var(--y2k-surface-rgb) / var(--y2k-panel-alpha));
  --y2k-surface-strong: rgb(var(--y2k-surface-strong-rgb) / var(--y2k-panel-strong-alpha));
  --y2k-surface-soft: rgb(var(--y2k-surface-soft-rgb) / var(--y2k-panel-soft-alpha));
  --y2k-text: rgb(var(--y2k-text-rgb));
  --y2k-text-muted: rgb(var(--y2k-text-muted-rgb));
  --y2k-fg: var(--y2k-text);
  --y2k-surface-fg: var(--y2k-text);
  --y2k-muted: var(--y2k-text-muted);
  --y2k-border: rgb(var(--y2k-border-rgb) / var(--y2k-border-alpha));
  --y2k-control-fg: var(--y2k-text);
  --y2k-primary: rgb(var(--y2k-primary-rgb));
  --y2k-primary-hover: rgb(var(--y2k-primary-hover-rgb));
  --y2k-primary-text: rgb(var(--y2k-primary-text-rgb));
  --y2k-secondary: rgb(var(--y2k-secondary-rgb));
  --y2k-secondary-hover: rgb(var(--y2k-secondary-hover-rgb));
  --y2k-secondary-text: rgb(var(--y2k-secondary-text-rgb));
  --y2k-on-primary: var(--y2k-primary-text);
  --y2k-on-secondary: var(--y2k-secondary-text);
  --y2k-on-accent: rgb(var(--y2k-accent-text-rgb));
  --y2k-on-success: rgb(var(--y2k-success-text-rgb));
  --y2k-on-warning: rgb(var(--y2k-warning-text-rgb));
  --y2k-on-danger: rgb(var(--y2k-danger-text-rgb));
  --y2k-accent: rgb(var(--y2k-accent-rgb));
  --y2k-success: rgb(var(--y2k-success-rgb));
  --y2k-warning: rgb(var(--y2k-warning-rgb));
  --y2k-danger: rgb(var(--y2k-danger-rgb));
  --y2k-link: rgb(var(--y2k-link-rgb));
  --y2k-focus: rgb(var(--y2k-focus-rgb));
  --y2k-glow-primary: rgb(var(--y2k-primary-rgb) / var(--y2k-glow-alpha));
  --y2k-glow-secondary: rgb(var(--y2k-secondary-rgb) / var(--y2k-glow-alpha));
  --y2k-glow-accent: rgb(var(--y2k-accent-rgb) / var(--y2k-glow-alpha));
  --y2k-shadow-sm: 0 2px 8px rgb(0 0 0 / var(--y2k-shadow-alpha));
  --y2k-shadow-md: 0 10px 28px rgb(0 0 0 / calc(var(--y2k-shadow-alpha) + 0.05));
  --y2k-shadow-lg: 0 22px 60px rgb(0 0 0 / calc(var(--y2k-shadow-alpha) + 0.12));
  --y2k-theme-bg-size: auto;
  --y2k-theme-bg: radial-gradient(circle at 20% 10%, rgb(var(--y2k-accent-rgb) / .22), transparent 24rem), radial-gradient(circle at 90% 20%, rgb(var(--y2k-secondary-rgb) / .18), transparent 28rem), radial-gradient(circle at 10% 100%, rgb(var(--y2k-primary-rgb) / .10), transparent 30rem), linear-gradient(135deg, rgb(255 255 255 / .10), transparent 45%), var(--y2k-bg);
  --y2k-card-bg: linear-gradient(135deg, rgb(var(--y2k-primary-rgb) / .10), rgb(var(--y2k-accent-rgb) / .055) 42%, rgb(var(--y2k-surface-strong-rgb) / var(--y2k-panel-alpha)) 100%), var(--y2k-surface);
  --y2k-control-bg: linear-gradient(180deg, rgb(var(--y2k-surface-strong-rgb) / var(--y2k-panel-alpha)), rgb(var(--y2k-surface-soft-rgb) / var(--y2k-panel-soft-alpha)));
  --y2k-spinner-track: rgb(var(--y2k-border-rgb) / max(.28, calc(var(--y2k-border-alpha) * .7)));
  --y2k-spinner-stroke: var(--y2k-primary);
  --y2k-spinner-accent: var(--y2k-accent);
}

/* =========================================================
   1. Midnight Gold
========================================================= */




/* =========================================================
   2. Ocean Steel
========================================================= */




/* =========================================================
   3. Forest Moss
========================================================= */




/* =========================================================
   4. Sunset Ember
========================================================= */




/* =========================================================
   5. Royal Plum
========================================================= */




/* =========================================================
   6. Graphite Cyan
========================================================= */




/* =========================================================
   7. Desert Sage
========================================================= */




/* =========================================================
   8. Rose Quartz
========================================================= */




/* =========================================================
   9. Cyber Lime
========================================================= */




/* =========================================================
   10. Arctic Indigo
========================================================= */




/* =========================================================
   Y2K Base
========================================================= */

[data-ui="y2k"] {
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 10%, rgb(var(--y2k-accent-rgb) / 0.22), transparent 24rem),
    radial-gradient(circle at 90% 20%, rgb(var(--y2k-secondary-rgb) / 0.18), transparent 28rem),
    linear-gradient(135deg, rgb(255 255 255 / 0.1), transparent 45%),
    var(--y2k-bg);
  color: var(--y2k-text);
  font-family: var(--y2k-font-body);
}
[data-ui="y2k"] *, [data-ui="y2k"] *::before, [data-ui="y2k"] *::after { box-sizing: border-box; }
[data-ui="y2k"][data-theme][data-mode] { background: var(--y2k-theme-bg); background-size: var(--y2k-theme-bg-size); }
[data-ui="y2k"] a { color: var(--y2k-link); text-decoration-thickness: 0.11em; text-underline-offset: 0.18em; } [data-ui="y2k"] ::selection { background: var(--y2k-primary); color: var(--y2k-on-primary); }

.y2k-page { min-height: 100vh; padding: clamp(1rem, 4vw, 3rem); background-image: radial-gradient(rgb(var(--y2k-border-rgb) / var(--y2k-grid-alpha)) 1px, transparent 1px); background-size: 22px 22px; }
.y2k-container { width: min(100% - 2rem, 1200px); margin-inline: auto; } .y2k-stack { display: flex; flex-direction: column; gap: var(--y2k-space-4); } .y2k-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--y2k-space-3); } .y2k-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--y2k-space-5); } .y2k-section { padding: clamp(1.25rem, 4vw, 2.5rem); }
.y2k-title, .y2k-heading, .y2k-kicker, .y2k-button, .y2k-badge, .y2k-nav-link { font-family: var(--y2k-font-heading); }
.y2k-title { margin: 0; font-size: clamp(2.25rem, 6vw, 4.5rem); line-height: .95; letter-spacing: -0.05em; color: var(--y2k-text); text-shadow: 2px 2px 0 rgb(var(--y2k-accent-rgb) / .56), 0 0 24px var(--y2k-glow-accent); } .y2k-heading { margin: 0; font-size: clamp(1.25rem, 3vw, 2rem); letter-spacing: -0.03em; } .y2k-kicker { margin: 0; color: var(--y2k-primary); font-size: .82rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; } .y2k-subtitle, .y2k-copy { margin: 0; color: var(--y2k-text-muted); line-height: 1.65; } .y2k-text-muted { color: var(--y2k-text-muted); }

.y2k-card, .y2k-panel, .y2k-bubble, .y2k-toolbar, .y2k-table-wrap { position: relative; background: linear-gradient(145deg, rgb(255 255 255 / .42), rgb(255 255 255 / .08)), var(--y2k-surface); color: var(--y2k-text); border: 1px solid rgb(255 255 255 / .38); border-bottom-color: rgb(var(--y2k-border-rgb) / .4); border-right-color: rgb(var(--y2k-border-rgb) / .35); border-radius: var(--y2k-radius-xl); box-shadow: var(--y2k-shadow-md), inset 0 1px 0 rgb(255 255 255 / .42), 0 0 28px var(--y2k-glow-accent); overflow: hidden; transition: transform var(--y2k-transition-base), box-shadow var(--y2k-transition-base); }
.y2k-card::before, .y2k-panel::before, .y2k-bubble::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 20% 0%, rgb(255 255 255 / .42), transparent 22%), linear-gradient(120deg, transparent 0 55%, rgb(var(--y2k-accent-rgb) / .12)); }
.y2k-card, .y2k-panel, .y2k-bubble { padding: var(--y2k-space-6); } .y2k-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--y2k-space-4); padding: var(--y2k-space-4); border-radius: var(--y2k-radius-pill); } .y2k-hover-lift:hover { transform: translateY(-3px) scale(1.005); box-shadow: var(--y2k-shadow-lg), 0 0 42px var(--y2k-glow-accent); } .y2k-inset, .y2k-well { background: linear-gradient(180deg, rgb(0 0 0 / .08), rgb(255 255 255 / .12)), var(--y2k-surface-soft); border: 1px solid rgb(var(--y2k-border-rgb) / .42); border-radius: var(--y2k-radius-lg); box-shadow: inset 0 8px 18px rgb(0 0 0 / .12); } .y2k-well { padding: var(--y2k-space-5); }

.y2k-button, .y2k-icon-button { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--y2k-space-2); min-height: 2.85rem; padding: .75rem 1.15rem; background: linear-gradient(180deg, rgb(255 255 255 / .42), rgb(255 255 255 / .08)), var(--y2k-surface-strong); color: var(--y2k-text); border: 1px solid rgb(255 255 255 / .42); border-radius: var(--y2k-radius-pill); box-shadow: var(--y2k-shadow-sm), inset 0 1px 0 rgb(255 255 255 / .5); font: inherit; font-family: var(--y2k-font-display); font-weight: 900; letter-spacing: .02em; cursor: pointer; text-decoration: none; transition: transform var(--y2k-transition-fast), box-shadow var(--y2k-transition-fast), background var(--y2k-transition-fast); }
.y2k-button:hover, .y2k-icon-button:hover { transform: translateY(-2px); box-shadow: var(--y2k-shadow-md), 0 0 26px var(--y2k-glow-accent); } .y2k-button:active, .y2k-icon-button:active, .y2k-button.is-active, .y2k-button[aria-pressed="true"] { transform: translateY(1px) scale(.99); box-shadow: inset 0 8px 16px rgb(0 0 0 / .14); }
.y2k-button-primary { background: linear-gradient(180deg, rgb(255 255 255 / .46), rgb(255 255 255 / .08)), var(--y2k-primary); color: var(--y2k-on-primary); } .y2k-button-primary:hover { background: linear-gradient(180deg, rgb(255 255 255 / .5), rgb(255 255 255 / .1)), var(--y2k-primary-hover); } .y2k-button-secondary { background: linear-gradient(180deg, rgb(255 255 255 / .46), rgb(255 255 255 / .08)), var(--y2k-secondary); color: var(--y2k-on-secondary); } .y2k-button-secondary:hover { background: var(--y2k-secondary-hover); } .y2k-button-danger { background: var(--y2k-danger); color: #fff; } .y2k-icon-button { width: 2.85rem; padding: 0; }

.y2k-field { display: flex; flex-direction: column; gap: var(--y2k-space-2); } .y2k-label { font-weight: 900; letter-spacing: .04em; } .y2k-input, .y2k-textarea, .y2k-select { width: 100%; min-height: 2.9rem; padding: .8rem 1rem; background: linear-gradient(180deg, rgb(255 255 255 / .22), rgb(0 0 0 / .05)), var(--y2k-surface-soft); color: var(--y2k-text); border: 1px solid rgb(255 255 255 / .38); border-radius: var(--y2k-radius-lg); box-shadow: inset 0 6px 14px rgb(0 0 0 / .12); font: inherit; outline: none; } .y2k-textarea { min-height: 8rem; resize: vertical; } .y2k-input:focus, .y2k-textarea:focus, .y2k-select:focus { border-color: var(--y2k-focus); box-shadow: inset 0 6px 14px rgb(0 0 0 / .12), 0 0 0 3px rgb(var(--y2k-focus-rgb) / .25), 0 0 24px rgb(var(--y2k-focus-rgb) / .22); } .y2k-help-text { color: var(--y2k-text-muted); font-size: .9rem; }

.y2k-badge { display: inline-flex; align-items: center; min-height: 1.8rem; padding: .35rem .8rem; background: linear-gradient(180deg, rgb(255 255 255 / .4), rgb(255 255 255 / .08)), var(--y2k-surface-strong); color: var(--y2k-text); border: 1px solid rgb(255 255 255 / .42); border-radius: var(--y2k-radius-pill); box-shadow: var(--y2k-shadow-sm); font-size: .78rem; font-weight: 900; } .y2k-badge-primary { background: var(--y2k-primary); color: var(--y2k-on-primary); } .y2k-badge-secondary { background: var(--y2k-secondary); color: var(--y2k-on-secondary); } .y2k-badge-success { background: var(--y2k-success); color: #fff; } .y2k-badge-warning { background: var(--y2k-warning); color: #111; } .y2k-badge-danger { background: var(--y2k-danger); color: #fff; }
.y2k-nav { display: flex; flex-wrap: wrap; gap: var(--y2k-space-2); padding: var(--y2k-space-2); background: linear-gradient(180deg, rgb(255 255 255 / .38), rgb(255 255 255 / .08)), var(--y2k-surface); border: 1px solid rgb(255 255 255 / .42); border-radius: var(--y2k-radius-pill); box-shadow: var(--y2k-shadow-md); } .y2k-nav-link { display: inline-flex; min-height: 2.5rem; align-items: center; padding: .65rem 1rem; color: var(--y2k-text-muted); border-radius: var(--y2k-radius-pill); text-decoration: none; font-weight: 900; } .y2k-nav-link:hover { color: var(--y2k-text); background: rgb(255 255 255 / .16); } .y2k-nav-link.is-active, .y2k-nav-link[aria-current="page"] { background: var(--y2k-primary); color: var(--y2k-on-primary); box-shadow: 0 0 20px var(--y2k-glow-primary); }
/* Tooltips use compact contrast surfaces that stay readable across theme modes. */
.y2k-tooltip, [data-ui="y2k"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) { display: inline-flex; align-items: center; gap: .45rem; max-inline-size: 16rem; padding: .62rem .9rem; background: radial-gradient(circle at 28% 18%, rgb(255 255 255 / .76), transparent 26%), linear-gradient(135deg, var(--y2k-primary), var(--y2k-secondary)); color: var(--y2k-on-primary); border: 1px solid rgb(255 255 255 / .54); border-radius: var(--y2k-radius-pill); box-shadow: var(--y2k-shadow-md), 0 0 1.1rem var(--y2k-glow-primary); font-size: .82rem; font-weight: 900; line-height: 1.3; }
.y2k-tooltip-arrow { inline-size: .62rem; block-size: .62rem; flex: 0 0 auto; background: rgb(255 255 255 / .72); border-radius: 50%; box-shadow: inset -.12rem -.12rem .3rem rgb(var(--y2k-secondary-rgb) / .28); }
.y2k-progress { width: 100%; height: .9rem; background: var(--y2k-surface-soft); border-radius: var(--y2k-radius-pill); box-shadow: inset 0 6px 14px rgb(0 0 0 / .12); overflow: hidden; } .y2k-progress-bar { height: 100%; width: var(--y2k-progress-value, 50%); background: linear-gradient(90deg, var(--y2k-primary), var(--y2k-accent), var(--y2k-secondary)); border-radius: inherit; }
.y2k-alert { padding: var(--y2k-space-4); background: var(--y2k-surface); border: 1px solid rgb(255 255 255 / .38); border-radius: var(--y2k-radius-xl); box-shadow: var(--y2k-shadow-md); } .y2k-alert-title { margin: 0; font-weight: 900; } .y2k-alert-body { margin: .5rem 0 0; color: var(--y2k-text-muted); } .y2k-alert-success { box-shadow: var(--y2k-shadow-md), 0 0 22px rgb(var(--y2k-success-rgb) / .2); } .y2k-alert-warning { box-shadow: var(--y2k-shadow-md), 0 0 22px rgb(var(--y2k-warning-rgb) / .2); } .y2k-alert-danger { box-shadow: var(--y2k-shadow-md), 0 0 22px rgb(var(--y2k-danger-rgb) / .2); }
.y2k-table-wrap { overflow: auto; } .y2k-table { width: 100%; border-collapse: collapse; } .y2k-table th, .y2k-table td { padding: .9rem 1rem; border-bottom: 1px solid rgb(var(--y2k-border-rgb) / .34); text-align: left; } .y2k-table th { background: rgb(255 255 255 / .16); font-weight: 900; } .y2k-table td { color: var(--y2k-text-muted); }
.y2k-text-primary { color: var(--y2k-primary); } .y2k-text-secondary { color: var(--y2k-secondary); } .y2k-text-accent { color: var(--y2k-accent); } .y2k-text-success { color: var(--y2k-success); } .y2k-text-warning { color: var(--y2k-warning); } .y2k-text-danger { color: var(--y2k-danger); }
[data-ui="y2k"] :focus-visible { outline: 3px solid var(--y2k-focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { [data-ui="y2k"] *, [data-ui="y2k"] *::before, [data-ui="y2k"] *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }


/* Theme-responsive component defaults */
.y2k-card, .y2k-panel { background: var(--y2k-card-bg); }
.y2k-toolbar, .y2k-table-wrap { background: var(--y2k-control-bg); }
.y2k-button:not(.y2k-button-primary):not(.y2k-button-secondary):not(.y2k-button-danger):not(.y2k-button-ghost), .y2k-icon-button { background: var(--y2k-control-bg); }
.y2k-button, .y2k-icon-button, .y2k-badge, .y2k-nav-link { font-family: var(--y2k-font-control); }

/* Spinner geometry follows the y2k preset's glossy plastic controls. */
.y2k-spinner, .y2k-loading-spinner, [data-ui="y2k"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
  display: inline-block;
  inline-size: 2rem;
  block-size: 2rem;
  border: .14rem solid rgb(255 255 255 / .42);
  border-block-start-color: var(--y2k-spinner-stroke);
  border-inline-end-color: var(--y2k-spinner-accent);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgb(255 255 255 / .9), transparent 18%), conic-gradient(var(--y2k-spinner-stroke), var(--y2k-spinner-accent), var(--y2k-spinner-track), var(--y2k-secondary));
  box-shadow: 0 0 1.2rem var(--y2k-glow-primary), inset -.18rem -.18rem .45rem rgb(var(--y2k-secondary-rgb) / .28);
  vertical-align: -.2em;
  animation: y2k-spin .88s linear infinite;
}
.y2k-spinner-sm { inline-size: 1rem; block-size: 1rem; border-width: .08rem; }
.y2k-spinner-lg { inline-size: 3rem; block-size: 3rem; border-width: .22rem; }
.y2k-button[aria-busy="true"], .y2k-icon-button[aria-busy="true"], [data-ui="y2k"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) { gap: .55rem; cursor: progress; }
.y2k-button[aria-busy="true"]::after, .y2k-icon-button[aria-busy="true"]::after, [data-ui="y2k"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after {
  content: "";
  display: inline-block;
  inline-size: 1em;
  block-size: 1em;
  border: .16em solid rgb(var(--y2k-primary-text-rgb) / .42);
  border-block-start-color: currentColor;
  border-radius: 50%;
  animation: y2k-spin .75s linear infinite;
}
@keyframes y2k-spin { to { transform: rotate(360deg); } }


@media (prefers-reduced-motion: reduce) {
  [data-ui="y2k"] *, [data-ui="y2k"] *::before, [data-ui="y2k"] *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}
@media (prefers-contrast: more) {
  [data-ui="y2k"] { --y2k-border-alpha: 1; }
}
@media (forced-colors: active) {
  [data-ui="y2k"] * { forced-color-adjust: auto; }
  [data-ui="y2k"] :where(:focus-visible) { outline: 3px solid CanvasText; box-shadow: none; }
}
@media print {
  [data-ui="y2k"] { background: #fff !important; color: #000 !important; }
  [data-ui="y2k"] * { box-shadow: none !important; text-shadow: none !important; }
  [data-ui="y2k"] a { color: #000 !important; text-decoration: underline; }
}
}


/* styles/retro-glass.css */
/* =========================================================
   Glassmorphism + Retrofuturism Hybrid Theme System
   Includes:
   - 10 color schemes
   - light / dark / contrast modes
   - themed UI components and utilities

   Usage:
   <body data-ui="retro-glass" data-theme="midnight-gold" data-mode="light">
   <body data-ui="retro-glass" data-theme="midnight-gold" data-mode="dark">
   <body data-ui="retro-glass" data-theme="midnight-gold" data-mode="contrast">
========================================================= */


@layer ui-style-kit.retro_glass {
:root {
  --rg-radius-xs: 0.25rem;
  --rg-radius-sm: 0.5rem;
  --rg-radius-md: 0.75rem;
  --rg-radius-lg: 1rem;
  --rg-radius-xl: 1.5rem;
  --rg-radius-pill: 999px;

  --rg-space-1: 0.25rem;
  --rg-space-2: 0.5rem;
  --rg-space-3: 0.75rem;
  --rg-space-4: 1rem;
  --rg-space-5: 1.25rem;
  --rg-space-6: 1.5rem;
  --rg-space-8: 2rem;

  --rg-transition-fast: 140ms ease;
  --rg-transition-base: 220ms ease;
  --rg-transition-slow: 360ms ease;

  --rg-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rg-font-display: Orbitron, Rajdhani, Eurostile, "Bank Gothic", var(--rg-font-sans);
  --rg-font-body: var(--rg-font-sans);
  --rg-font-heading: var(--rg-font-display);
  --rg-font-control: var(--rg-font-display);
  --rg-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

[data-ui="retro-glass"][data-mode="light"] {
  color-scheme: light;
  --rg-panel-alpha: 0.92;
  --rg-panel-strong-alpha: 0.98;
  --rg-panel-soft-alpha: 0.74;
  --rg-border-alpha: 0.7;
  --rg-glow-alpha: 0.24;
  --rg-shadow-alpha: 0.18;
  --rg-grid-alpha: 0.075;
}

[data-ui="retro-glass"][data-mode="dark"] {
  color-scheme: dark;
  --rg-panel-alpha: 0.82;
  --rg-panel-strong-alpha: 0.94;
  --rg-panel-soft-alpha: 0.58;
  --rg-border-alpha: 0.64;
  --rg-glow-alpha: 0.42;
  --rg-shadow-alpha: 0.42;
  --rg-grid-alpha: 0.12;
}

[data-ui="retro-glass"][data-mode="contrast"] {
  color-scheme: dark;
  --rg-panel-alpha: 1;
  --rg-panel-strong-alpha: 1;
  --rg-panel-soft-alpha: 0.92;
  --rg-border-alpha: 1;
  --rg-glow-alpha: 0.68;
  --rg-shadow-alpha: 0.56;
  --rg-grid-alpha: 0.18;
}

[data-ui="retro-glass"][data-theme][data-mode] {
  /* Shared scheme aliases preserve the existing prefixed token API. */
  --rg-bg-rgb: var(--usk-bg-rgb);
  --rg-surface-rgb: var(--usk-surface-rgb);
  --rg-surface-strong-rgb: var(--usk-surface-strong-rgb);
  --rg-surface-soft-rgb: var(--usk-surface-soft-rgb);
  --rg-text-rgb: var(--usk-text-rgb);
  --rg-text-muted-rgb: var(--usk-text-muted-rgb);
  --rg-border-rgb: var(--usk-border-rgb);
  --rg-primary-rgb: var(--usk-primary-rgb);
  --rg-primary-hover-rgb: var(--usk-primary-hover-rgb);
  --rg-primary-text-rgb: var(--usk-primary-text-rgb);
  --rg-secondary-rgb: var(--usk-secondary-rgb);
  --rg-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
  --rg-secondary-text-rgb: var(--usk-secondary-text-rgb);
  --rg-accent-rgb: var(--usk-accent-rgb);
  --rg-success-rgb: var(--usk-success-rgb);
  --rg-warning-rgb: var(--usk-warning-rgb);
  --rg-danger-rgb: var(--usk-danger-rgb);
  --rg-link-rgb: var(--usk-link-rgb);
  --rg-accent-text-rgb: var(--usk-accent-text-rgb);
  --rg-success-text-rgb: var(--usk-success-text-rgb);
  --rg-warning-text-rgb: var(--usk-warning-text-rgb);
  --rg-danger-text-rgb: var(--usk-danger-text-rgb);
  --rg-focus-rgb: var(--usk-focus-rgb);
  /* Native fallback selectors inherit visual identity through shared tokens. */
  --usk-native-surface: var(--rg-surface);
  --usk-native-surface-strong: var(--rg-surface-strong);
  --usk-native-surface-soft: var(--rg-surface-soft);
  --usk-native-card-bg: var(--rg-card-bg);
  --usk-native-control-bg: var(--rg-control-bg);
  --usk-native-text: var(--rg-text);
  --usk-native-text-muted: var(--rg-text-muted);
  --usk-native-border: var(--rg-border);
  --usk-native-primary: var(--rg-primary);
  --usk-native-primary-hover: var(--rg-primary-hover);
  --usk-native-on-primary: var(--rg-on-primary);
  --usk-native-focus: var(--rg-focus);
  --usk-native-success: var(--rg-success);
  --usk-native-warning: var(--rg-warning);
  --usk-native-danger: var(--rg-danger);
  --usk-native-link: var(--rg-link);
  --usk-native-font-body: var(--rg-font-body);
  --usk-native-font-heading: var(--rg-font-heading);
  --usk-native-font-control: var(--rg-font-control);
  --usk-native-font-mono: var(--rg-font-mono);
  --usk-native-radius-sm: var(--rg-radius-sm);
  --usk-native-radius: var(--rg-radius-md);
  --usk-native-radius-lg: var(--rg-radius-lg);
  --usk-native-shadow: var(--rg-shadow-sm, none);
  --usk-native-shadow-md: var(--rg-shadow-md, var(--usk-native-shadow));
  --usk-native-focus-ring: var(--rg-focus-ring, 0 0 0 3px rgb(var(--rg-focus-rgb) / .28));
  --usk-native-border-width: 1px;
  --usk-native-field-gap: .5rem;
  --usk-native-panel-padding: var(--rg-space-5);
  --usk-native-shadow: 0 10px 30px rgb(0 0 0 / calc(var(--rg-shadow-alpha) * .72));
  --rg-bg: rgb(var(--rg-bg-rgb));
  --rg-surface: rgb(var(--rg-surface-rgb) / var(--rg-panel-alpha));
  --rg-surface-strong: rgb(var(--rg-surface-strong-rgb) / var(--rg-panel-strong-alpha));
  --rg-surface-soft: rgb(var(--rg-surface-soft-rgb) / var(--rg-panel-soft-alpha));
  --rg-text: rgb(var(--rg-text-rgb));
  --rg-text-muted: rgb(var(--rg-text-muted-rgb));
  --rg-fg: var(--rg-text);
  --rg-surface-fg: var(--rg-text);
  --rg-muted: var(--rg-text-muted);
  --rg-border: rgb(var(--rg-border-rgb) / var(--rg-border-alpha));
  --rg-control-fg: var(--rg-text);
  --rg-primary: rgb(var(--rg-primary-rgb));
  --rg-primary-hover: rgb(var(--rg-primary-hover-rgb));
  --rg-primary-text: rgb(var(--rg-primary-text-rgb));
  --rg-secondary: rgb(var(--rg-secondary-rgb));
  --rg-secondary-hover: rgb(var(--rg-secondary-hover-rgb));
  --rg-secondary-text: rgb(var(--rg-secondary-text-rgb));
  --rg-on-primary: var(--rg-primary-text);
  --rg-on-secondary: var(--rg-secondary-text);
  --rg-on-accent: rgb(var(--rg-accent-text-rgb));
  --rg-on-success: rgb(var(--rg-success-text-rgb));
  --rg-on-warning: rgb(var(--rg-warning-text-rgb));
  --rg-on-danger: rgb(var(--rg-danger-text-rgb));
  --rg-accent: rgb(var(--rg-accent-rgb));
  --rg-success: rgb(var(--rg-success-rgb));
  --rg-warning: rgb(var(--rg-warning-rgb));
  --rg-danger: rgb(var(--rg-danger-rgb));
  --rg-link: rgb(var(--rg-link-rgb));
  --rg-focus: rgb(var(--rg-focus-rgb));
  --rg-glow-primary: rgb(var(--rg-primary-rgb) / var(--rg-glow-alpha));
  --rg-glow-secondary: rgb(var(--rg-secondary-rgb) / var(--rg-glow-alpha));
  --rg-glow-accent: rgb(var(--rg-accent-rgb) / var(--rg-glow-alpha));
  --rg-shadow-sm: 0 2px 8px rgb(0 0 0 / var(--rg-shadow-alpha));
  --rg-shadow-md: 0 10px 28px rgb(0 0 0 / calc(var(--rg-shadow-alpha) + 0.05));
  --rg-shadow-lg: 0 22px 60px rgb(0 0 0 / calc(var(--rg-shadow-alpha) + 0.12));
  --rg-theme-bg-size: auto, auto, auto, 52px 52px, 52px 52px, auto;
  --rg-theme-bg: radial-gradient(circle at 15% 15%, rgb(var(--rg-primary-rgb) / .18), transparent 28rem), radial-gradient(circle at 85% 10%, rgb(var(--rg-secondary-rgb) / .16), transparent 26rem), radial-gradient(circle at 50% 110%, rgb(var(--rg-accent-rgb) / .14), transparent 34rem), linear-gradient(90deg, rgb(var(--rg-border-rgb) / var(--rg-grid-alpha)) 1px, transparent 1px), linear-gradient(rgb(var(--rg-border-rgb) / var(--rg-grid-alpha)) 1px, transparent 1px), var(--rg-bg);
  --rg-card-bg: linear-gradient(135deg, rgb(var(--rg-primary-rgb) / .10), rgb(var(--rg-accent-rgb) / .055) 42%, rgb(var(--rg-surface-strong-rgb) / var(--rg-panel-alpha)) 100%), var(--rg-surface);
  --rg-control-bg: linear-gradient(180deg, rgb(var(--rg-surface-strong-rgb) / var(--rg-panel-alpha)), rgb(var(--rg-surface-soft-rgb) / var(--rg-panel-soft-alpha)));
  --rg-spinner-track: rgb(var(--rg-border-rgb) / max(.28, calc(var(--rg-border-alpha) * .7)));
  --rg-spinner-stroke: var(--rg-primary);
  --rg-spinner-accent: var(--rg-accent);
}

/* =========================================================
   1. Midnight Gold
========================================================= */




/* =========================================================
   2. Ocean Steel
========================================================= */




/* =========================================================
   3. Forest Moss
========================================================= */




/* =========================================================
   4. Sunset Ember
========================================================= */




/* =========================================================
   5. Royal Plum
========================================================= */




/* =========================================================
   6. Graphite Cyan
========================================================= */




/* =========================================================
   7. Desert Sage
========================================================= */




/* =========================================================
   8. Rose Quartz
========================================================= */




/* =========================================================
   9. Cyber Lime
========================================================= */




/* =========================================================
   10. Arctic Indigo
========================================================= */




/* =========================================================
   Retro Glass Base
========================================================= */

[data-ui="retro-glass"] {
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 15%, rgb(var(--rg-primary-rgb) / 0.18), transparent 28rem),
    radial-gradient(circle at 85% 10%, rgb(var(--rg-secondary-rgb) / 0.16), transparent 26rem),
    radial-gradient(circle at 50% 110%, rgb(var(--rg-accent-rgb) / 0.14), transparent 34rem),
    linear-gradient(90deg, rgb(var(--rg-border-rgb) / var(--rg-grid-alpha)) 1px, transparent 1px),
    linear-gradient(rgb(var(--rg-border-rgb) / var(--rg-grid-alpha)) 1px, transparent 1px),
    var(--rg-bg);
  background-size: auto, auto, auto, 52px 52px, 52px 52px, auto;
  color: var(--rg-text);
  font-family: var(--rg-font-body);
}
[data-ui="retro-glass"] *, [data-ui="retro-glass"] *::before, [data-ui="retro-glass"] *::after { box-sizing: border-box; }
[data-ui="retro-glass"][data-theme][data-mode] { background: var(--rg-theme-bg); background-size: var(--rg-theme-bg-size); }
[data-ui="retro-glass"] a { color: var(--rg-link); text-underline-offset: 0.18em; } [data-ui="retro-glass"] ::selection { background: var(--rg-primary); color: var(--rg-on-primary); }

.rg-page { min-height: 100vh; padding: clamp(1rem, 4vw, 3rem); } .rg-container { width: min(100% - 2rem, 1200px); margin-inline: auto; } .rg-stack { display: flex; flex-direction: column; gap: var(--rg-space-4); } .rg-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rg-space-3); } .rg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--rg-space-5); } .rg-section { padding: clamp(1.25rem, 4vw, 2.5rem); }
.rg-title, .rg-heading, .rg-kicker, .rg-button, .rg-badge, .rg-nav-link { font-family: var(--rg-font-heading); text-transform: uppercase; } .rg-title { margin: 0; font-size: clamp(2rem, 5vw, 3.8rem); line-height: 1.02; letter-spacing: .06em; text-shadow: 0 0 14px var(--rg-glow-primary), 0 0 34px var(--rg-glow-accent); } .rg-heading { margin: 0; font-size: clamp(1.25rem, 3vw, 2rem); letter-spacing: .06em; } .rg-kicker { margin: 0; color: var(--rg-primary); font-size: .8rem; font-weight: 900; letter-spacing: .18em; } .rg-subtitle, .rg-copy { margin: 0; color: var(--rg-text-muted); line-height: 1.65; } .rg-text-muted { color: var(--rg-text-muted); }

.rg-card, .rg-panel, .rg-console, .rg-toolbar, .rg-table-wrap { position: relative; background: linear-gradient(135deg, rgb(255 255 255 / .18), rgb(255 255 255 / .04)), linear-gradient(135deg, rgb(var(--rg-primary-rgb) / .06), transparent 52%), var(--rg-surface); color: var(--rg-text); border: 1px solid var(--rg-border); border-top-color: rgb(255 255 255 / .28); border-left-color: rgb(255 255 255 / .2); border-radius: var(--rg-radius-xl); box-shadow: var(--rg-shadow-md), 0 0 28px var(--rg-glow-primary); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); overflow: hidden; transition: transform var(--rg-transition-base), box-shadow var(--rg-transition-base), border-color var(--rg-transition-base); }
.rg-card::before, .rg-panel::before, .rg-console::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(255 255 255 / .1), transparent 30%), linear-gradient(90deg, transparent, rgb(var(--rg-accent-rgb) / .08), transparent); } .rg-card, .rg-panel, .rg-console { padding: var(--rg-space-6); } .rg-console { border-radius: var(--rg-radius-lg); box-shadow: var(--rg-shadow-lg), inset 0 0 28px rgb(var(--rg-primary-rgb) / .08), 0 0 32px var(--rg-glow-primary); } .rg-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rg-space-4); padding: var(--rg-space-4); } .rg-hover-lift:hover { transform: translateY(-3px); border-color: rgb(var(--rg-primary-rgb) / .68); box-shadow: var(--rg-shadow-lg), 0 0 44px var(--rg-glow-primary), 0 0 60px var(--rg-glow-secondary); }
.rg-inset, .rg-well { background: linear-gradient(180deg, rgb(0 0 0 / .08), rgb(255 255 255 / .04)), var(--rg-surface-soft); border: 1px solid rgb(var(--rg-border-rgb) / .36); border-radius: var(--rg-radius-lg); box-shadow: inset 0 8px 22px rgb(0 0 0 / .16); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); } .rg-well { padding: var(--rg-space-5); }

.rg-button, .rg-icon-button { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--rg-space-2); min-height: 2.85rem; padding: .75rem 1.1rem; background: linear-gradient(135deg, rgb(255 255 255 / .24), rgb(255 255 255 / .04)), var(--rg-surface); color: var(--rg-text); border: 1px solid rgb(var(--rg-border-rgb) / .56); border-top-color: rgb(255 255 255 / .32); border-radius: var(--rg-radius-md); box-shadow: var(--rg-shadow-sm); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); font: inherit; font-family: var(--rg-font-display); font-weight: 900; letter-spacing: .08em; cursor: pointer; text-decoration: none; transition: transform var(--rg-transition-fast), box-shadow var(--rg-transition-fast), background var(--rg-transition-fast), border-color var(--rg-transition-fast); }
.rg-button:hover, .rg-icon-button:hover { transform: translateY(-2px); border-color: rgb(var(--rg-primary-rgb) / .68); box-shadow: var(--rg-shadow-md), 0 0 24px var(--rg-glow-primary); } .rg-button:active, .rg-icon-button:active, .rg-button.is-active, .rg-button[aria-pressed="true"] { transform: translateY(1px); box-shadow: inset 0 8px 18px rgb(0 0 0 / .18), 0 0 18px var(--rg-glow-primary); } .rg-button-primary { background: linear-gradient(135deg, rgb(255 255 255 / .22), rgb(255 255 255 / .04)), var(--rg-primary); color: var(--rg-on-primary); border-color: rgb(var(--rg-primary-rgb) / .72); } .rg-button-primary:hover { background: var(--rg-primary-hover); } .rg-button-secondary { background: linear-gradient(135deg, rgb(255 255 255 / .22), rgb(255 255 255 / .04)), var(--rg-secondary); color: var(--rg-on-secondary); border-color: rgb(var(--rg-secondary-rgb) / .72); } .rg-button-secondary:hover { background: var(--rg-secondary-hover); } .rg-button-danger { background: var(--rg-danger); color: #fff; } .rg-icon-button { width: 2.85rem; padding: 0; }

.rg-field { display: flex; flex-direction: column; gap: var(--rg-space-2); } .rg-label { font-family: var(--rg-font-heading); text-transform: uppercase; letter-spacing: .12em; font-weight: 900; font-size: .8rem; } .rg-input, .rg-textarea, .rg-select { width: 100%; min-height: 2.9rem; padding: .8rem 1rem; background: linear-gradient(180deg, rgb(255 255 255 / .06), rgb(0 0 0 / .08)), var(--rg-surface-soft); color: var(--rg-text); border: 1px solid rgb(var(--rg-border-rgb) / .44); border-radius: var(--rg-radius-md); box-shadow: inset 0 8px 18px rgb(0 0 0 / .14); font: inherit; outline: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .rg-textarea { min-height: 8rem; resize: vertical; } .rg-input:focus, .rg-textarea:focus, .rg-select:focus { border-color: var(--rg-focus); box-shadow: inset 0 8px 18px rgb(0 0 0 / .14), 0 0 0 3px rgb(var(--rg-focus-rgb) / .24), 0 0 26px rgb(var(--rg-focus-rgb) / .22); } .rg-help-text { color: var(--rg-text-muted); font-size: .9rem; }

.rg-badge { display: inline-flex; align-items: center; min-height: 1.8rem; padding: .35rem .75rem; background: linear-gradient(135deg, rgb(255 255 255 / .2), rgb(255 255 255 / .04)), var(--rg-surface); color: var(--rg-text); border: 1px solid rgb(var(--rg-border-rgb) / .5); border-radius: var(--rg-radius-pill); box-shadow: var(--rg-shadow-sm); font-size: .78rem; font-weight: 900; letter-spacing: .08em; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .rg-badge-primary { background: var(--rg-primary); color: var(--rg-on-primary); } .rg-badge-secondary { background: var(--rg-secondary); color: var(--rg-on-secondary); } .rg-badge-success { background: var(--rg-success); color: #fff; } .rg-badge-warning { background: var(--rg-warning); color: #111; } .rg-badge-danger { background: var(--rg-danger); color: #fff; }
.rg-nav { display: flex; flex-wrap: wrap; gap: var(--rg-space-2); padding: var(--rg-space-2); background: linear-gradient(135deg, rgb(255 255 255 / .18), rgb(255 255 255 / .04)), var(--rg-surface); border: 1px solid var(--rg-border); border-radius: var(--rg-radius-xl); box-shadow: var(--rg-shadow-md), 0 0 24px var(--rg-glow-primary); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); } .rg-nav-link { display: inline-flex; min-height: 2.5rem; align-items: center; padding: .65rem 1rem; color: var(--rg-text-muted); border: 1px solid transparent; border-radius: var(--rg-radius-pill); text-decoration: none; font-weight: 900; letter-spacing: .08em; } .rg-nav-link:hover { color: var(--rg-text); background: rgb(255 255 255 / .1); border-color: rgb(var(--rg-primary-rgb) / .36); } .rg-nav-link.is-active, .rg-nav-link[aria-current="page"] { background: var(--rg-primary); color: var(--rg-on-primary); box-shadow: 0 0 22px var(--rg-glow-primary); }
/* Tooltips use compact contrast surfaces that stay readable across theme modes. */
.rg-tooltip, [data-ui="retro-glass"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) { display: inline-flex; align-items: center; gap: .45rem; max-inline-size: 16rem; padding: .62rem .88rem; background: linear-gradient(135deg, rgb(255 255 255 / .28), rgb(255 255 255 / .06)), var(--rg-surface); color: var(--rg-text); border: 1px solid rgb(255 255 255 / .34); border-radius: 38% 62% 48% 52% / 52% 42% 58% 48%; box-shadow: var(--rg-shadow-md), 0 0 1.25rem var(--rg-glow-primary); -webkit-backdrop-filter: blur(14px) saturate(145%); backdrop-filter: blur(14px) saturate(145%); font-size: .82rem; font-weight: 900; line-height: 1.3; letter-spacing: .04em; }
.rg-tooltip-arrow { inline-size: .6rem; block-size: .6rem; flex: 0 0 auto; background: rgb(255 255 255 / .38); border: 1px solid rgb(255 255 255 / .3); border-radius: 40% 60% 45% 55%; transform: rotate(45deg); }
.rg-progress { width: 100%; height: .9rem; background: var(--rg-surface-soft); border: 1px solid rgb(var(--rg-border-rgb) / .4); border-radius: var(--rg-radius-pill); box-shadow: inset 0 8px 18px rgb(0 0 0 / .14); overflow: hidden; } .rg-progress-bar { height: 100%; width: var(--rg-progress-value, 50%); background: linear-gradient(90deg, var(--rg-primary), var(--rg-accent), var(--rg-secondary)); border-radius: inherit; box-shadow: 0 0 18px var(--rg-glow-primary); }
.rg-alert { padding: var(--rg-space-4); background: var(--rg-surface); border: 1px solid var(--rg-border); border-radius: var(--rg-radius-lg); box-shadow: var(--rg-shadow-md), 0 0 22px var(--rg-glow-primary); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .rg-alert-title { margin: 0; font-family: var(--rg-font-heading); text-transform: uppercase; } .rg-alert-body { margin: .5rem 0 0; color: var(--rg-text-muted); } .rg-alert-success { border-left: 4px solid var(--rg-success); } .rg-alert-warning { border-left: 4px solid var(--rg-warning); } .rg-alert-danger { border-left: 4px solid var(--rg-danger); }
.rg-table-wrap { overflow: auto; } .rg-table { width: 100%; border-collapse: collapse; } .rg-table th, .rg-table td { padding: .9rem 1rem; border-bottom: 1px solid rgb(var(--rg-border-rgb) / .34); text-align: left; } .rg-table th { background: rgb(var(--rg-primary-rgb) / .1); font-family: var(--rg-font-heading); text-transform: uppercase; letter-spacing: .1em; } .rg-table td { color: var(--rg-text-muted); }
.rg-text-primary { color: var(--rg-primary); } .rg-text-secondary { color: var(--rg-secondary); } .rg-text-accent { color: var(--rg-accent); } .rg-text-success { color: var(--rg-success); } .rg-text-warning { color: var(--rg-warning); } .rg-text-danger { color: var(--rg-danger); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { [data-ui="retro-glass"] { --rg-panel-alpha: .96; --rg-panel-strong-alpha: 1; --rg-panel-soft-alpha: .9; } }
[data-ui="retro-glass"] :focus-visible { outline: 3px solid var(--rg-focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { [data-ui="retro-glass"] *, [data-ui="retro-glass"] *::before, [data-ui="retro-glass"] *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }


/* Theme-responsive component defaults */
.rg-card, .rg-panel { background: var(--rg-card-bg); }
.rg-toolbar, .rg-table-wrap { background: var(--rg-control-bg); }
.rg-button:not(.rg-button-primary):not(.rg-button-secondary):not(.rg-button-danger):not(.rg-button-ghost), .rg-icon-button { background: var(--rg-control-bg); }
.rg-button, .rg-icon-button, .rg-badge, .rg-nav-link { font-family: var(--rg-font-control); }

/* Spinner geometry follows the retro glass preset's translucent lens shape. */
.rg-spinner, .rg-loading-spinner, [data-ui="retro-glass"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
  display: inline-block;
  inline-size: 2rem;
  block-size: 2rem;
  border: .12rem solid rgb(255 255 255 / .32);
  border-block-start-color: var(--rg-spinner-stroke);
  border-inline-end-color: var(--rg-spinner-accent);
  border-radius: 38% 62% 48% 52%;
  background: linear-gradient(135deg, rgb(255 255 255 / .32), transparent 46%), conic-gradient(from 35deg, var(--rg-spinner-stroke), transparent 40%, var(--rg-spinner-accent), var(--rg-spinner-track));
  box-shadow: 0 0 1.35rem var(--rg-glow-primary), inset 0 0 .85rem rgb(255 255 255 / .18);
  -webkit-backdrop-filter: blur(.4rem);
  backdrop-filter: blur(.4rem);
  vertical-align: -.2em;
  animation: rg-spin .95s linear infinite;
}
.rg-spinner-sm { inline-size: 1rem; block-size: 1rem; border-width: .08rem; }
.rg-spinner-lg { inline-size: 3rem; block-size: 3rem; border-width: .2rem; }
.rg-button[aria-busy="true"], .rg-icon-button[aria-busy="true"], [data-ui="retro-glass"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) { gap: .55rem; cursor: progress; }
.rg-button[aria-busy="true"]::after, .rg-icon-button[aria-busy="true"]::after, [data-ui="retro-glass"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after {
  content: "";
  display: inline-block;
  inline-size: 1em;
  block-size: 1em;
  border: .16em solid rgb(var(--rg-primary-text-rgb) / .42);
  border-block-start-color: currentColor;
  border-radius: 50%;
  animation: rg-spin .75s linear infinite;
}
@keyframes rg-spin { to { transform: rotate(360deg); } }


@media (prefers-reduced-motion: reduce) {
  [data-ui="retro-glass"] *, [data-ui="retro-glass"] *::before, [data-ui="retro-glass"] *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}
@media (prefers-contrast: more) {
  [data-ui="retro-glass"] { --rg-border-alpha: 1; }
}
@media (forced-colors: active) {
  [data-ui="retro-glass"] * { forced-color-adjust: auto; }
  [data-ui="retro-glass"] :where(:focus-visible) { outline: 3px solid CanvasText; box-shadow: none; }
}
@media print {
  [data-ui="retro-glass"] { background: #fff !important; color: #000 !important; }
  [data-ui="retro-glass"] * { box-shadow: none !important; text-shadow: none !important; }
  [data-ui="retro-glass"] a { color: #000 !important; text-decoration: underline; }
}
}