ui-style-kit-css 1.2.2 → 2.0.2

package/styles/retro-glass.css

@@ -12,6 +12,9 @@
 ========================================================= */
 
 
+@import url("./theme-colors.css");
+@import url("./native-elements.css");
+
 @layer ui-style-kit.retro_glass {
 :root {
   --rg-radius-xs: 0.25rem;
@@ -35,6 +38,9 @@
 
   --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;
 }
 
@@ -72,19 +78,84 @@
 }
 
 [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));
@@ -97,707 +168,84 @@
   --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
 ========================================================= */
 
-[data-ui="retro-glass"][data-theme="midnight-gold"][data-mode="light"] {
-  --rg-bg-rgb: 246 243 234;
-  --rg-surface-rgb: 255 250 240;
-  --rg-surface-strong-rgb: 255 255 255;
-  --rg-surface-soft-rgb: 237 230 211;
-  --rg-text-rgb: 23 32 51;
-  --rg-text-muted-rgb: 95 104 121;
-  --rg-border-rgb: 214 200 165;
-  --rg-primary-rgb: 184 135 47;
-  --rg-primary-hover-rgb: 148 104 31;
-  --rg-primary-text-rgb: 16 16 16;
-  --rg-secondary-rgb: 34 49 79;
-  --rg-secondary-hover-rgb: 23 36 60;
-  --rg-secondary-text-rgb: 255 255 255;
-  --rg-accent-rgb: 217 164 65;
-  --rg-success-rgb: 47 125 84;
-  --rg-warning-rgb: 167 106 0;
-  --rg-danger-rgb: 185 63 63;
-  --rg-link-rgb: 138 100 31;
-  --rg-focus-rgb: 217 164 65;
-}
 
-[data-ui="retro-glass"][data-theme="midnight-gold"][data-mode="dark"] {
-  --rg-bg-rgb: 7 17 31;
-  --rg-surface-rgb: 16 27 45;
-  --rg-surface-strong-rgb: 23 36 58;
-  --rg-surface-soft-rgb: 12 22 39;
-  --rg-text-rgb: 247 237 215;
-  --rg-text-muted-rgb: 185 192 204;
-  --rg-border-rgb: 57 72 97;
-  --rg-primary-rgb: 214 168 79;
-  --rg-primary-hover-rgb: 240 200 109;
-  --rg-primary-text-rgb: 16 16 16;
-  --rg-secondary-rgb: 111 134 184;
-  --rg-secondary-hover-rgb: 146 167 209;
-  --rg-secondary-text-rgb: 8 16 29;
-  --rg-accent-rgb: 243 210 122;
-  --rg-success-rgb: 107 214 156;
-  --rg-warning-rgb: 255 203 91;
-  --rg-danger-rgb: 255 123 123;
-  --rg-link-rgb: 243 210 122;
-  --rg-focus-rgb: 255 214 107;
-}
 
-[data-ui="retro-glass"][data-theme="midnight-gold"][data-mode="contrast"] {
-  --rg-bg-rgb: 0 0 0;
-  --rg-surface-rgb: 8 8 8;
-  --rg-surface-strong-rgb: 17 17 17;
-  --rg-surface-soft-rgb: 5 5 5;
-  --rg-text-rgb: 255 255 255;
-  --rg-text-muted-rgb: 245 245 245;
-  --rg-border-rgb: 255 255 255;
-  --rg-primary-rgb: 255 212 0;
-  --rg-primary-hover-rgb: 255 255 255;
-  --rg-primary-text-rgb: 0 0 0;
-  --rg-secondary-rgb: 0 217 255;
-  --rg-secondary-hover-rgb: 255 255 255;
-  --rg-secondary-text-rgb: 0 0 0;
-  --rg-accent-rgb: 255 234 0;
-  --rg-success-rgb: 0 255 117;
-  --rg-warning-rgb: 255 191 0;
-  --rg-danger-rgb: 255 77 77;
-  --rg-link-rgb: 0 217 255;
-  --rg-focus-rgb: 255 255 255;
-}
 
 /* =========================================================
    2. Ocean Steel
 ========================================================= */
 
-[data-ui="retro-glass"][data-theme="ocean-steel"][data-mode="light"] {
-  --rg-bg-rgb: 238 248 251;
-  --rg-surface-rgb: 255 255 255;
-  --rg-surface-strong-rgb: 248 253 255;
-  --rg-surface-soft-rgb: 220 236 242;
-  --rg-text-rgb: 16 36 46;
-  --rg-text-muted-rgb: 78 101 112;
-  --rg-border-rgb: 184 211 221;
-  --rg-primary-rgb: 8 125 157;
-  --rg-primary-hover-rgb: 6 100 126;
-  --rg-primary-text-rgb: 255 255 255;
-  --rg-secondary-rgb: 57 86 107;
-  --rg-secondary-hover-rgb: 44 67 84;
-  --rg-secondary-text-rgb: 255 255 255;
-  --rg-accent-rgb: 21 184 200;
-  --rg-success-rgb: 38 122 92;
-  --rg-warning-rgb: 167 101 0;
-  --rg-danger-rgb: 182 70 70;
-  --rg-link-rgb: 6 100 126;
-  --rg-focus-rgb: 21 184 200;
-}
 
-[data-ui="retro-glass"][data-theme="ocean-steel"][data-mode="dark"] {
-  --rg-bg-rgb: 6 22 29;
-  --rg-surface-rgb: 13 37 48;
-  --rg-surface-strong-rgb: 20 52 66;
-  --rg-surface-soft-rgb: 8 29 38;
-  --rg-text-rgb: 233 251 255;
-  --rg-text-muted-rgb: 167 192 201;
-  --rg-border-rgb: 49 86 102;
-  --rg-primary-rgb: 54 196 221;
-  --rg-primary-hover-rgb: 115 227 244;
-  --rg-primary-text-rgb: 4 18 22;
-  --rg-secondary-rgb: 140 183 201;
-  --rg-secondary-hover-rgb: 178 213 226;
-  --rg-secondary-text-rgb: 6 22 29;
-  --rg-accent-rgb: 83 240 255;
-  --rg-success-rgb: 103 216 166;
-  --rg-warning-rgb: 255 192 97;
-  --rg-danger-rgb: 255 123 123;
-  --rg-link-rgb: 115 227 244;
-  --rg-focus-rgb: 83 240 255;
-}
 
-[data-ui="retro-glass"][data-theme="ocean-steel"][data-mode="contrast"] {
-  --rg-bg-rgb: 0 8 10;
-  --rg-surface-rgb: 0 16 20;
-  --rg-surface-strong-rgb: 0 26 32;
-  --rg-surface-soft-rgb: 0 0 0;
-  --rg-text-rgb: 255 255 255;
-  --rg-text-muted-rgb: 234 255 255;
-  --rg-border-rgb: 255 255 255;
-  --rg-primary-rgb: 0 229 255;
-  --rg-primary-hover-rgb: 255 255 255;
-  --rg-primary-text-rgb: 0 0 0;
-  --rg-secondary-rgb: 255 255 0;
-  --rg-secondary-hover-rgb: 255 255 255;
-  --rg-secondary-text-rgb: 0 0 0;
-  --rg-accent-rgb: 0 255 255;
-  --rg-success-rgb: 0 255 144;
-  --rg-warning-rgb: 255 208 0;
-  --rg-danger-rgb: 255 59 59;
-  --rg-link-rgb: 0 229 255;
-  --rg-focus-rgb: 255 255 255;
-}
 
 /* =========================================================
    3. Forest Moss
 ========================================================= */
 
-[data-ui="retro-glass"][data-theme="forest-moss"][data-mode="light"] {
-  --rg-bg-rgb: 242 247 239;
-  --rg-surface-rgb: 255 255 255;
-  --rg-surface-strong-rgb: 251 255 248;
-  --rg-surface-soft-rgb: 226 234 219;
-  --rg-text-rgb: 24 36 23;
-  --rg-text-muted-rgb: 88 104 82;
-  --rg-border-rgb: 197 211 186;
-  --rg-primary-rgb: 63 125 58;
-  --rg-primary-hover-rgb: 47 97 43;
-  --rg-primary-text-rgb: 255 255 255;
-  --rg-secondary-rgb: 106 95 56;
-  --rg-secondary-hover-rgb: 81 73 43;
-  --rg-secondary-text-rgb: 255 255 255;
-  --rg-accent-rgb: 156 186 82;
-  --rg-success-rgb: 47 125 84;
-  --rg-warning-rgb: 154 106 0;
-  --rg-danger-rgb: 173 69 69;
-  --rg-link-rgb: 47 97 43;
-  --rg-focus-rgb: 156 186 82;
-}
 
-[data-ui="retro-glass"][data-theme="forest-moss"][data-mode="dark"] {
-  --rg-bg-rgb: 7 16 6;
-  --rg-surface-rgb: 16 28 15;
-  --rg-surface-strong-rgb: 26 42 24;
-  --rg-surface-soft-rgb: 11 22 10;
-  --rg-text-rgb: 237 247 232;
-  --rg-text-muted-rgb: 180 197 173;
-  --rg-border-rgb: 61 83 56;
-  --rg-primary-rgb: 130 210 122;
-  --rg-primary-hover-rgb: 162 237 153;
-  --rg-primary-text-rgb: 7 16 6;
-  --rg-secondary-rgb: 210 189 114;
-  --rg-secondary-hover-rgb: 239 217 139;
-  --rg-secondary-text-rgb: 20 16 6;
-  --rg-accent-rgb: 185 239 107;
-  --rg-success-rgb: 117 223 167;
-  --rg-warning-rgb: 255 210 99;
-  --rg-danger-rgb: 255 133 133;
-  --rg-link-rgb: 162 237 153;
-  --rg-focus-rgb: 185 239 107;
-}
 
-[data-ui="retro-glass"][data-theme="forest-moss"][data-mode="contrast"] {
-  --rg-bg-rgb: 0 0 0;
-  --rg-surface-rgb: 7 16 7;
-  --rg-surface-strong-rgb: 11 25 11;
-  --rg-surface-soft-rgb: 0 0 0;
-  --rg-text-rgb: 255 255 255;
-  --rg-text-muted-rgb: 240 255 240;
-  --rg-border-rgb: 255 255 255;
-  --rg-primary-rgb: 108 255 95;
-  --rg-primary-hover-rgb: 255 255 255;
-  --rg-primary-text-rgb: 0 0 0;
-  --rg-secondary-rgb: 255 223 0;
-  --rg-secondary-hover-rgb: 255 255 255;
-  --rg-secondary-text-rgb: 0 0 0;
-  --rg-accent-rgb: 182 255 0;
-  --rg-success-rgb: 0 255 117;
-  --rg-warning-rgb: 255 208 0;
-  --rg-danger-rgb: 255 64 64;
-  --rg-link-rgb: 108 255 95;
-  --rg-focus-rgb: 255 255 255;
-}
 
 /* =========================================================
    4. Sunset Ember
 ========================================================= */
 
-[data-ui="retro-glass"][data-theme="sunset-ember"][data-mode="light"] {
-  --rg-bg-rgb: 255 244 236;
-  --rg-surface-rgb: 255 255 255;
-  --rg-surface-strong-rgb: 255 250 246;
-  --rg-surface-soft-rgb: 244 222 210;
-  --rg-text-rgb: 42 23 17;
-  --rg-text-muted-rgb: 118 88 77;
-  --rg-border-rgb: 227 189 170;
-  --rg-primary-rgb: 196 81 43;
-  --rg-primary-hover-rgb: 159 63 32;
-  --rg-primary-text-rgb: 255 255 255;
-  --rg-secondary-rgb: 124 63 92;
-  --rg-secondary-hover-rgb: 97 48 71;
-  --rg-secondary-text-rgb: 255 255 255;
-  --rg-accent-rgb: 230 154 58;
-  --rg-success-rgb: 49 122 87;
-  --rg-warning-rgb: 184 111 0;
-  --rg-danger-rgb: 189 61 61;
-  --rg-link-rgb: 159 63 32;
-  --rg-focus-rgb: 230 154 58;
-}
 
-[data-ui="retro-glass"][data-theme="sunset-ember"][data-mode="dark"] {
-  --rg-bg-rgb: 23 9 5;
-  --rg-surface-rgb: 38 17 11;
-  --rg-surface-strong-rgb: 53 25 18;
-  --rg-surface-soft-rgb: 30 12 7;
-  --rg-text-rgb: 255 240 232;
-  --rg-text-muted-rgb: 208 177 165;
-  --rg-border-rgb: 106 59 45;
-  --rg-primary-rgb: 255 138 91;
-  --rg-primary-hover-rgb: 255 173 138;
-  --rg-primary-text-rgb: 26 8 3;
-  --rg-secondary-rgb: 227 138 181;
-  --rg-secondary-hover-rgb: 255 175 208;
-  --rg-secondary-text-rgb: 26 7 18;
-  --rg-accent-rgb: 255 193 102;
-  --rg-success-rgb: 112 215 163;
-  --rg-warning-rgb: 255 209 102;
-  --rg-danger-rgb: 255 119 119;
-  --rg-link-rgb: 255 173 138;
-  --rg-focus-rgb: 255 193 102;
-}
 
-[data-ui="retro-glass"][data-theme="sunset-ember"][data-mode="contrast"] {
-  --rg-bg-rgb: 0 0 0;
-  --rg-surface-rgb: 18 4 0;
-  --rg-surface-strong-rgb: 29 7 0;
-  --rg-surface-soft-rgb: 0 0 0;
-  --rg-text-rgb: 255 255 255;
-  --rg-text-muted-rgb: 255 245 239;
-  --rg-border-rgb: 255 255 255;
-  --rg-primary-rgb: 255 106 0;
-  --rg-primary-hover-rgb: 255 255 255;
-  --rg-primary-text-rgb: 0 0 0;
-  --rg-secondary-rgb: 255 79 184;
-  --rg-secondary-hover-rgb: 255 255 255;
-  --rg-secondary-text-rgb: 0 0 0;
-  --rg-accent-rgb: 255 208 0;
-  --rg-success-rgb: 0 255 144;
-  --rg-warning-rgb: 255 191 0;
-  --rg-danger-rgb: 255 48 48;
-  --rg-link-rgb: 255 157 0;
-  --rg-focus-rgb: 255 255 255;
-}
 
 /* =========================================================
    5. Royal Plum
 ========================================================= */
 
-[data-ui="retro-glass"][data-theme="royal-plum"][data-mode="light"] {
-  --rg-bg-rgb: 248 241 251;
-  --rg-surface-rgb: 255 255 255;
-  --rg-surface-strong-rgb: 253 248 255;
-  --rg-surface-soft-rgb: 234 220 240;
-  --rg-text-rgb: 36 21 45;
-  --rg-text-muted-rgb: 105 86 113;
-  --rg-border-rgb: 213 187 221;
-  --rg-primary-rgb: 123 63 160;
-  --rg-primary-hover-rgb: 99 49 127;
-  --rg-primary-text-rgb: 255 255 255;
-  --rg-secondary-rgb: 63 76 154;
-  --rg-secondary-hover-rgb: 48 58 119;
-  --rg-secondary-text-rgb: 255 255 255;
-  --rg-accent-rgb: 192 90 198;
-  --rg-success-rgb: 49 124 92;
-  --rg-warning-rgb: 166 106 0;
-  --rg-danger-rgb: 183 65 95;
-  --rg-link-rgb: 99 49 127;
-  --rg-focus-rgb: 192 90 198;
-}
 
-[data-ui="retro-glass"][data-theme="royal-plum"][data-mode="dark"] {
-  --rg-bg-rgb: 16 6 20;
-  --rg-surface-rgb: 29 16 36;
-  --rg-surface-strong-rgb: 42 23 52;
-  --rg-surface-soft-rgb: 22 11 27;
-  --rg-text-rgb: 250 236 255;
-  --rg-text-muted-rgb: 200 176 209;
-  --rg-border-rgb: 85 57 100;
-  --rg-primary-rgb: 216 145 242;
-  --rg-primary-hover-rgb: 235 184 255;
-  --rg-primary-text-rgb: 19 6 23;
-  --rg-secondary-rgb: 157 168 255;
-  --rg-secondary-hover-rgb: 195 202 255;
-  --rg-secondary-text-rgb: 8 11 31;
-  --rg-accent-rgb: 255 156 246;
-  --rg-success-rgb: 118 220 169;
-  --rg-warning-rgb: 255 209 102;
-  --rg-danger-rgb: 255 122 156;
-  --rg-link-rgb: 235 184 255;
-  --rg-focus-rgb: 255 156 246;
-}
 
-[data-ui="retro-glass"][data-theme="royal-plum"][data-mode="contrast"] {
-  --rg-bg-rgb: 0 0 0;
-  --rg-surface-rgb: 16 0 20;
-  --rg-surface-strong-rgb: 26 0 34;
-  --rg-surface-soft-rgb: 0 0 0;
-  --rg-text-rgb: 255 255 255;
-  --rg-text-muted-rgb: 255 240 255;
-  --rg-border-rgb: 255 255 255;
-  --rg-primary-rgb: 228 92 255;
-  --rg-primary-hover-rgb: 255 255 255;
-  --rg-primary-text-rgb: 0 0 0;
-  --rg-secondary-rgb: 0 217 255;
-  --rg-secondary-hover-rgb: 255 255 255;
-  --rg-secondary-text-rgb: 0 0 0;
-  --rg-accent-rgb: 255 0 245;
-  --rg-success-rgb: 0 255 144;
-  --rg-warning-rgb: 255 225 0;
-  --rg-danger-rgb: 255 63 110;
-  --rg-link-rgb: 228 92 255;
-  --rg-focus-rgb: 255 255 255;
-}
 
 /* =========================================================
    6. Graphite Cyan
 ========================================================= */
 
-[data-ui="retro-glass"][data-theme="graphite-cyan"][data-mode="light"] {
-  --rg-bg-rgb: 242 245 246;
-  --rg-surface-rgb: 255 255 255;
-  --rg-surface-strong-rgb: 249 251 252;
-  --rg-surface-soft-rgb: 225 231 234;
-  --rg-text-rgb: 23 29 33;
-  --rg-text-muted-rgb: 93 104 112;
-  --rg-border-rgb: 197 206 212;
-  --rg-primary-rgb: 0 124 137;
-  --rg-primary-hover-rgb: 0 99 110;
-  --rg-primary-text-rgb: 255 255 255;
-  --rg-secondary-rgb: 63 72 80;
-  --rg-secondary-hover-rgb: 47 54 60;
-  --rg-secondary-text-rgb: 255 255 255;
-  --rg-accent-rgb: 34 184 199;
-  --rg-success-rgb: 40 122 91;
-  --rg-warning-rgb: 167 103 0;
-  --rg-danger-rgb: 182 64 64;
-  --rg-link-rgb: 0 99 110;
-  --rg-focus-rgb: 34 184 199;
-}
 
-[data-ui="retro-glass"][data-theme="graphite-cyan"][data-mode="dark"] {
-  --rg-bg-rgb: 8 11 13;
-  --rg-surface-rgb: 18 24 28;
-  --rg-surface-strong-rgb: 28 37 43;
-  --rg-surface-soft-rgb: 13 17 20;
-  --rg-text-rgb: 237 246 248;
-  --rg-text-muted-rgb: 174 187 193;
-  --rg-border-rgb: 59 72 79;
-  --rg-primary-rgb: 62 217 232;
-  --rg-primary-hover-rgb: 123 243 255;
-  --rg-primary-text-rgb: 6 16 18;
-  --rg-secondary-rgb: 170 181 188;
-  --rg-secondary-hover-rgb: 210 219 224;
-  --rg-secondary-text-rgb: 8 11 13;
-  --rg-accent-rgb: 123 243 255;
-  --rg-success-rgb: 110 218 165;
-  --rg-warning-rgb: 255 200 97;
-  --rg-danger-rgb: 255 125 125;
-  --rg-link-rgb: 123 243 255;
-  --rg-focus-rgb: 62 217 232;
-}
 
-[data-ui="retro-glass"][data-theme="graphite-cyan"][data-mode="contrast"] {
-  --rg-bg-rgb: 0 0 0;
-  --rg-surface-rgb: 7 7 7;
-  --rg-surface-strong-rgb: 17 17 17;
-  --rg-surface-soft-rgb: 0 0 0;
-  --rg-text-rgb: 255 255 255;
-  --rg-text-muted-rgb: 245 245 245;
-  --rg-border-rgb: 255 255 255;
-  --rg-primary-rgb: 0 240 255;
-  --rg-primary-hover-rgb: 255 255 255;
-  --rg-primary-text-rgb: 0 0 0;
-  --rg-secondary-rgb: 242 242 242;
-  --rg-secondary-hover-rgb: 255 255 255;
-  --rg-secondary-text-rgb: 0 0 0;
-  --rg-accent-rgb: 0 240 255;
-  --rg-success-rgb: 0 255 117;
-  --rg-warning-rgb: 255 208 0;
-  --rg-danger-rgb: 255 64 64;
-  --rg-link-rgb: 0 240 255;
-  --rg-focus-rgb: 255 255 255;
-}
 
 /* =========================================================
    7. Desert Sage
 ========================================================= */
 
-[data-ui="retro-glass"][data-theme="desert-sage"][data-mode="light"] {
-  --rg-bg-rgb: 248 242 231;
-  --rg-surface-rgb: 255 255 255;
-  --rg-surface-strong-rgb: 255 250 241;
-  --rg-surface-soft-rgb: 234 223 205;
-  --rg-text-rgb: 43 36 25;
-  --rg-text-muted-rgb: 113 103 84;
-  --rg-border-rgb: 215 198 167;
-  --rg-primary-rgb: 140 106 61;
-  --rg-primary-hover-rgb: 112 83 47;
-  --rg-primary-text-rgb: 255 255 255;
-  --rg-secondary-rgb: 95 118 85;
-  --rg-secondary-hover-rgb: 72 92 64;
-  --rg-secondary-text-rgb: 255 255 255;
-  --rg-accent-rgb: 201 151 74;
-  --rg-success-rgb: 81 125 72;
-  --rg-warning-rgb: 166 107 0;
-  --rg-danger-rgb: 174 74 63;
-  --rg-link-rgb: 112 83 47;
-  --rg-focus-rgb: 201 151 74;
-}
 
-[data-ui="retro-glass"][data-theme="desert-sage"][data-mode="dark"] {
-  --rg-bg-rgb: 18 15 9;
-  --rg-surface-rgb: 33 27 18;
-  --rg-surface-strong-rgb: 47 40 27;
-  --rg-surface-soft-rgb: 25 20 13;
-  --rg-text-rgb: 248 239 223;
-  --rg-text-muted-rgb: 199 186 163;
-  --rg-border-rgb: 91 78 56;
-  --rg-primary-rgb: 217 184 120;
-  --rg-primary-hover-rgb: 240 211 154;
-  --rg-primary-text-rgb: 21 16 6;
-  --rg-secondary-rgb: 168 206 153;
-  --rg-secondary-hover-rgb: 200 233 187;
-  --rg-secondary-text-rgb: 9 20 7;
-  --rg-accent-rgb: 241 196 110;
-  --rg-success-rgb: 141 219 125;
-  --rg-warning-rgb: 255 209 102;
-  --rg-danger-rgb: 255 136 122;
-  --rg-link-rgb: 240 211 154;
-  --rg-focus-rgb: 241 196 110;
-}
 
-[data-ui="retro-glass"][data-theme="desert-sage"][data-mode="contrast"] {
-  --rg-bg-rgb: 0 0 0;
-  --rg-surface-rgb: 15 11 3;
-  --rg-surface-strong-rgb: 26 18 5;
-  --rg-surface-soft-rgb: 0 0 0;
-  --rg-text-rgb: 255 255 255;
-  --rg-text-muted-rgb: 255 248 232;
-  --rg-border-rgb: 255 255 255;
-  --rg-primary-rgb: 255 209 102;
-  --rg-primary-hover-rgb: 255 255 255;
-  --rg-primary-text-rgb: 0 0 0;
-  --rg-secondary-rgb: 157 255 107;
-  --rg-secondary-hover-rgb: 255 255 255;
-  --rg-secondary-text-rgb: 0 0 0;
-  --rg-accent-rgb: 255 176 0;
-  --rg-success-rgb: 0 255 117;
-  --rg-warning-rgb: 255 225 0;
-  --rg-danger-rgb: 255 77 77;
-  --rg-link-rgb: 255 209 102;
-  --rg-focus-rgb: 255 255 255;
-}
 
 /* =========================================================
    8. Rose Quartz
 ========================================================= */
 
-[data-ui="retro-glass"][data-theme="rose-quartz"][data-mode="light"] {
-  --rg-bg-rgb: 255 242 245;
-  --rg-surface-rgb: 255 255 255;
-  --rg-surface-strong-rgb: 255 248 250;
-  --rg-surface-soft-rgb: 242 220 227;
-  --rg-text-rgb: 43 21 29;
-  --rg-text-muted-rgb: 118 90 99;
-  --rg-border-rgb: 223 184 198;
-  --rg-primary-rgb: 184 71 109;
-  --rg-primary-hover-rgb: 150 55 87;
-  --rg-primary-text-rgb: 255 255 255;
-  --rg-secondary-rgb: 122 85 126;
-  --rg-secondary-hover-rgb: 96 65 99;
-  --rg-secondary-text-rgb: 255 255 255;
-  --rg-accent-rgb: 223 125 157;
-  --rg-success-rgb: 49 122 92;
-  --rg-warning-rgb: 166 106 0;
-  --rg-danger-rgb: 189 63 85;
-  --rg-link-rgb: 150 55 87;
-  --rg-focus-rgb: 223 125 157;
-}
 
-[data-ui="retro-glass"][data-theme="rose-quartz"][data-mode="dark"] {
-  --rg-bg-rgb: 22 7 12;
-  --rg-surface-rgb: 37 16 24;
-  --rg-surface-strong-rgb: 53 24 36;
-  --rg-surface-soft-rgb: 28 11 17;
-  --rg-text-rgb: 255 240 244;
-  --rg-text-muted-rgb: 210 174 185;
-  --rg-border-rgb: 101 55 71;
-  --rg-primary-rgb: 255 143 179;
-  --rg-primary-hover-rgb: 255 182 205;
-  --rg-primary-text-rgb: 24 6 13;
-  --rg-secondary-rgb: 217 160 223;
-  --rg-secondary-hover-rgb: 239 194 244;
-  --rg-secondary-text-rgb: 22 6 24;
-  --rg-accent-rgb: 255 173 197;
-  --rg-success-rgb: 119 219 169;
-  --rg-warning-rgb: 255 209 102;
-  --rg-danger-rgb: 255 120 144;
-  --rg-link-rgb: 255 182 205;
-  --rg-focus-rgb: 255 173 197;
-}
 
-[data-ui="retro-glass"][data-theme="rose-quartz"][data-mode="contrast"] {
-  --rg-bg-rgb: 0 0 0;
-  --rg-surface-rgb: 18 0 6;
-  --rg-surface-strong-rgb: 32 0 13;
-  --rg-surface-soft-rgb: 0 0 0;
-  --rg-text-rgb: 255 255 255;
-  --rg-text-muted-rgb: 255 240 245;
-  --rg-border-rgb: 255 255 255;
-  --rg-primary-rgb: 255 79 147;
-  --rg-primary-hover-rgb: 255 255 255;
-  --rg-primary-text-rgb: 0 0 0;
-  --rg-secondary-rgb: 240 0 255;
-  --rg-secondary-hover-rgb: 255 255 255;
-  --rg-secondary-text-rgb: 0 0 0;
-  --rg-accent-rgb: 255 138 179;
-  --rg-success-rgb: 0 255 144;
-  --rg-warning-rgb: 255 225 0;
-  --rg-danger-rgb: 255 48 48;
-  --rg-link-rgb: 255 138 179;
-  --rg-focus-rgb: 255 255 255;
-}
 
 /* =========================================================
    9. Cyber Lime
 ========================================================= */
 
-[data-ui="retro-glass"][data-theme="cyber-lime"][data-mode="light"] {
-  --rg-bg-rgb: 244 250 237;
-  --rg-surface-rgb: 255 255 255;
-  --rg-surface-strong-rgb: 251 255 246;
-  --rg-surface-soft-rgb: 226 239 211;
-  --rg-text-rgb: 23 34 20;
-  --rg-text-muted-rgb: 89 105 82;
-  --rg-border-rgb: 198 216 179;
-  --rg-primary-rgb: 95 159 31;
-  --rg-primary-hover-rgb: 73 125 23;
-  --rg-primary-text-rgb: 16 16 16;
-  --rg-secondary-rgb: 20 127 134;
-  --rg-secondary-hover-rgb: 14 98 104;
-  --rg-secondary-text-rgb: 255 255 255;
-  --rg-accent-rgb: 164 215 46;
-  --rg-success-rgb: 47 125 84;
-  --rg-warning-rgb: 156 104 0;
-  --rg-danger-rgb: 179 65 65;
-  --rg-link-rgb: 73 125 23;
-  --rg-focus-rgb: 164 215 46;
-}
 
-[data-ui="retro-glass"][data-theme="cyber-lime"][data-mode="dark"] {
-  --rg-bg-rgb: 5 11 5;
-  --rg-surface-rgb: 13 24 12;
-  --rg-surface-strong-rgb: 22 37 21;
-  --rg-surface-soft-rgb: 8 17 8;
-  --rg-text-rgb: 239 255 233;
-  --rg-text-muted-rgb: 180 199 173;
-  --rg-border-rgb: 57 82 54;
-  --rg-primary-rgb: 168 255 61;
-  --rg-primary-hover-rgb: 202 255 127;
-  --rg-primary-text-rgb: 6 16 5;
-  --rg-secondary-rgb: 61 235 242;
-  --rg-secondary-hover-rgb: 134 248 255;
-  --rg-secondary-text-rgb: 3 16 18;
-  --rg-accent-rgb: 198 255 77;
-  --rg-success-rgb: 111 240 168;
-  --rg-warning-rgb: 255 218 98;
-  --rg-danger-rgb: 255 119 119;
-  --rg-link-rgb: 202 255 127;
-  --rg-focus-rgb: 168 255 61;
-}
 
-[data-ui="retro-glass"][data-theme="cyber-lime"][data-mode="contrast"] {
-  --rg-bg-rgb: 0 0 0;
-  --rg-surface-rgb: 5 11 0;
-  --rg-surface-strong-rgb: 11 22 0;
-  --rg-surface-soft-rgb: 0 0 0;
-  --rg-text-rgb: 255 255 255;
-  --rg-text-muted-rgb: 244 255 232;
-  --rg-border-rgb: 255 255 255;
-  --rg-primary-rgb: 170 255 0;
-  --rg-primary-hover-rgb: 255 255 255;
-  --rg-primary-text-rgb: 0 0 0;
-  --rg-secondary-rgb: 0 240 255;
-  --rg-secondary-hover-rgb: 255 255 255;
-  --rg-secondary-text-rgb: 0 0 0;
-  --rg-accent-rgb: 204 255 0;
-  --rg-success-rgb: 0 255 117;
-  --rg-warning-rgb: 255 225 0;
-  --rg-danger-rgb: 255 48 48;
-  --rg-link-rgb: 170 255 0;
-  --rg-focus-rgb: 255 255 255;
-}
 
 /* =========================================================
    10. Arctic Indigo
 ========================================================= */
 
-[data-ui="retro-glass"][data-theme="arctic-indigo"][data-mode="light"] {
-  --rg-bg-rgb: 241 245 255;
-  --rg-surface-rgb: 255 255 255;
-  --rg-surface-strong-rgb: 248 251 255;
-  --rg-surface-soft-rgb: 223 231 246;
-  --rg-text-rgb: 20 27 46;
-  --rg-text-muted-rgb: 88 100 122;
-  --rg-border-rgb: 190 203 227;
-  --rg-primary-rgb: 64 94 184;
-  --rg-primary-hover-rgb: 49 72 148;
-  --rg-primary-text-rgb: 255 255 255;
-  --rg-secondary-rgb: 46 125 157;
-  --rg-secondary-hover-rgb: 35 97 122;
-  --rg-secondary-text-rgb: 255 255 255;
-  --rg-accent-rgb: 123 147 232;
-  --rg-success-rgb: 47 125 84;
-  --rg-warning-rgb: 166 106 0;
-  --rg-danger-rgb: 182 64 82;
-  --rg-link-rgb: 49 72 148;
-  --rg-focus-rgb: 123 147 232;
-}
 
-[data-ui="retro-glass"][data-theme="arctic-indigo"][data-mode="dark"] {
-  --rg-bg-rgb: 6 10 22;
-  --rg-surface-rgb: 16 24 43;
-  --rg-surface-strong-rgb: 24 35 66;
-  --rg-surface-soft-rgb: 10 16 32;
-  --rg-text-rgb: 237 243 255;
-  --rg-text-muted-rgb: 178 191 217;
-  --rg-border-rgb: 58 75 120;
-  --rg-primary-rgb: 145 168 255;
-  --rg-primary-hover-rgb: 183 197 255;
-  --rg-primary-text-rgb: 5 8 22;
-  --rg-secondary-rgb: 118 216 243;
-  --rg-secondary-hover-rgb: 165 234 255;
-  --rg-secondary-text-rgb: 4 17 22;
-  --rg-accent-rgb: 194 206 255;
-  --rg-success-rgb: 114 219 166;
-  --rg-warning-rgb: 255 209 102;
-  --rg-danger-rgb: 255 125 145;
-  --rg-link-rgb: 183 197 255;
-  --rg-focus-rgb: 145 168 255;
-}
 
-[data-ui="retro-glass"][data-theme="arctic-indigo"][data-mode="contrast"] {
-  --rg-bg-rgb: 0 0 0;
-  --rg-surface-rgb: 3 8 22;
-  --rg-surface-strong-rgb: 8 18 42;
-  --rg-surface-soft-rgb: 0 0 0;
-  --rg-text-rgb: 255 255 255;
-  --rg-text-muted-rgb: 238 244 255;
-  --rg-border-rgb: 255 255 255;
-  --rg-primary-rgb: 111 140 255;
-  --rg-primary-hover-rgb: 255 255 255;
-  --rg-primary-text-rgb: 0 0 0;
-  --rg-secondary-rgb: 0 217 255;
-  --rg-secondary-hover-rgb: 255 255 255;
-  --rg-secondary-text-rgb: 0 0 0;
-  --rg-accent-rgb: 184 196 255;
-  --rg-success-rgb: 0 255 144;
-  --rg-warning-rgb: 255 225 0;
-  --rg-danger-rgb: 255 63 95;
-  --rg-link-rgb: 159 178 255;
-  --rg-focus-rgb: 255 255 255;
-}
 
 /* =========================================================
    Retro Glass Base
@@ -814,94 +262,75 @@
     var(--rg-bg);
   background-size: auto, auto, auto, 52px 52px, 52px 52px, auto;
   color: var(--rg-text);
-  font-family: var(--rg-font-sans);
+  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"] a { color: var(--rg-link); text-underline-offset: 0.18em; } [data-ui="retro-glass"] ::selection { background: var(--rg-primary); color: var(--rg-primary-text); }
+[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-display); 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-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); backdrop-filter: blur(18px) saturate(150%); -webkit-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, .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); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); } .rg-well { padding: var(--rg-space-5); }
+.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); backdrop-filter: blur(14px) saturate(150%); -webkit-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-primary-text); 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-secondary-text); 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-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-display); 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; backdrop-filter: blur(10px); -webkit-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-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; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .rg-badge-primary { background: var(--rg-primary); color: var(--rg-primary-text); } .rg-badge-secondary { background: var(--rg-secondary); color: var(--rg-secondary-text); } .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); backdrop-filter: blur(18px) saturate(150%); -webkit-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-primary-text); box-shadow: 0 0 22px var(--rg-glow-primary); }
+.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); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .rg-alert-title { margin: 0; font-family: var(--rg-font-display); 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-display); text-transform: uppercase; letter-spacing: .1em; } .rg-table td { color: var(--rg-text-muted); }
+.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; } }
 
-/* =========================================================
-   Native HTML Coverage + CSS Accessibility Layer
-========================================================= */
 
-.rg-sr-only,
-.rg-visually-hidden { position: absolute !important; inline-size: 1px !important; block-size: 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; }
-.rg-skip-link { position: fixed; inset-block-start: 1rem; inset-inline-start: 1rem; z-index: 10000; transform: translateY(-150%); padding: .75rem 1rem; background: var(--rg-primary); color: var(--rg-primary-text); border: 1px solid var(--rg-border); border-radius: var(--rg-radius-sm); box-shadow: var(--rg-shadow-md); font-weight: 900; text-decoration: none; }
-.rg-skip-link:focus { transform: translateY(0); }
-.rg-divider { width: 100%; height: 1px; border: 0; margin: 1.5rem 0; background: var(--rg-border); }
-
-[data-ui="retro-glass"] :where(h1, h2, h3, h4, h5, h6) { color: var(--rg-text); font-family: var(--rg-font-display); line-height: 1.15; margin: 0 0 .65em; text-wrap: balance; }
-[data-ui="retro-glass"] :where(h1) { font-size: clamp(2rem, 5vw, 3.5rem); }
-[data-ui="retro-glass"] :where(h2) { font-size: clamp(1.55rem, 3vw, 2.35rem); }
-[data-ui="retro-glass"] :where(h3) { font-size: clamp(1.25rem, 2vw, 1.65rem); }
-[data-ui="retro-glass"] :where(p) { margin: 0 0 1rem; color: var(--rg-text-muted); line-height: 1.7; }
-[data-ui="retro-glass"] :where(a) { color: var(--rg-link); text-decoration-thickness: .08em; text-underline-offset: .18em; }
-[data-ui="retro-glass"] :where(a:hover) { color: var(--rg-primary-hover); }
-[data-ui="retro-glass"] :where(ul, ol) { margin: 0 0 1rem; padding-left: 1.35rem; color: var(--rg-text-muted); }
-[data-ui="retro-glass"] :where(li) { margin-block: .25rem; }
-[data-ui="retro-glass"] :where(blockquote) { margin: 1.25rem 0; padding: 1rem 1.25rem; color: var(--rg-text); background: var(--rg-surface-soft); border-left: .35rem solid var(--rg-primary); border-radius: var(--rg-radius-md); }
-[data-ui="retro-glass"] :where(code, kbd, samp) { font-family: var(--rg-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace); font-size: .92em; background: var(--rg-surface-soft); color: var(--rg-text); border: 1px solid rgb(var(--rg-border-rgb) / .45); border-radius: var(--rg-radius-xs); padding: .15em .35em; }
-[data-ui="retro-glass"] :where(pre) { overflow: auto; margin: 1rem 0; padding: 1rem; background: var(--rg-surface-soft); color: var(--rg-text); border: 1px solid var(--rg-border); border-radius: var(--rg-radius-md); }
-[data-ui="retro-glass"] :where(pre code) { display: block; padding: 0; border: 0; background: transparent; }
-[data-ui="retro-glass"] :where(hr) { height: 1px; border: 0; margin: 2rem 0; background: var(--rg-border); }
-[data-ui="retro-glass"] :where(mark) { background: rgb(var(--rg-warning-rgb) / .32); color: var(--rg-text); border-radius: .2em; padding-inline: .15em; }
-[data-ui="retro-glass"] :where(small) { color: var(--rg-text-muted); }
-[data-ui="retro-glass"] :where(abbr[title]) { text-decoration: underline dotted var(--rg-primary); text-underline-offset: .18em; cursor: help; }
-[data-ui="retro-glass"] :where(img, picture, video, canvas, svg, iframe) { max-width: 100%; height: auto; }
-[data-ui="retro-glass"] :where(figure) { margin: 1.25rem 0; }
-[data-ui="retro-glass"] :where(figcaption) { margin-top: .5rem; color: var(--rg-text-muted); font-size: .9rem; }
-[data-ui="retro-glass"] :where(fieldset) { min-inline-size: 0; margin: 0 0 1rem; padding: 1rem; border: 1px solid var(--rg-border); border-radius: var(--rg-radius-md); }
-[data-ui="retro-glass"] :where(legend) { padding-inline: .35rem; color: var(--rg-text); font-weight: 900; }
-[data-ui="retro-glass"] :where(label) { color: var(--rg-text); font-weight: 750; }
-[data-ui="retro-glass"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select) { width: 100%; min-height: 2.75rem; padding: .72rem .95rem; background: var(--rg-surface-soft); color: var(--rg-text); border: 1px solid var(--rg-border); border-radius: var(--rg-radius-md); font: inherit; }
-[data-ui="retro-glass"] :where(textarea) { resize: vertical; min-height: 7rem; }
-[data-ui="retro-glass"] :where(input, textarea, select, button) { font: inherit; }
-[data-ui="retro-glass"] :where(button, input[type="button"], input[type="submit"], input[type="reset"]) { min-height: 2.75rem; padding: .7rem 1rem; background: var(--rg-primary); color: var(--rg-primary-text); border: 1px solid var(--rg-primary); border-radius: var(--rg-radius-md); font-weight: 850; cursor: pointer; }
-[data-ui="retro-glass"] :where(button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover) { background: var(--rg-primary-hover); border-color: var(--rg-primary-hover); }
-[data-ui="retro-glass"] :where(input[type="checkbox"], input[type="radio"]) { inline-size: 1.1rem; block-size: 1.1rem; accent-color: var(--rg-primary); }
-[data-ui="retro-glass"] :where(input[type="range"]) { width: 100%; accent-color: var(--rg-primary); }
-[data-ui="retro-glass"] :where(input[type="color"]) { inline-size: 3rem; block-size: 2.4rem; padding: .2rem; background: var(--rg-surface-soft); border: 1px solid var(--rg-border); border-radius: var(--rg-radius-sm); }
-[data-ui="retro-glass"] :where(input[type="file"]) { color: var(--rg-text-muted); }
-[data-ui="retro-glass"] :where(input[type="file"]::file-selector-button) { margin-inline-end: .75rem; padding: .55rem .8rem; border: 1px solid var(--rg-primary); border-radius: var(--rg-radius-sm); background: var(--rg-primary); color: var(--rg-primary-text); font-weight: 800; cursor: pointer; }
-[data-ui="retro-glass"] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) { opacity: .55; cursor: not-allowed; }
-[data-ui="retro-glass"] :where(input:invalid, textarea:invalid, select:invalid, [aria-invalid="true"]) { border-color: var(--rg-danger); }
-[data-ui="retro-glass"] :where(table) { width: 100%; border-collapse: collapse; margin: 1rem 0; background: var(--rg-surface); border: 1px solid var(--rg-border); border-radius: var(--rg-radius-md); overflow: hidden; }
-[data-ui="retro-glass"] :where(caption) { caption-side: bottom; padding: .75rem; color: var(--rg-text-muted); font-size: .9rem; }
-[data-ui="retro-glass"] :where(th, td) { padding: .8rem .9rem; text-align: left; border-bottom: 1px solid var(--rg-border); }
-[data-ui="retro-glass"] :where(th) { color: var(--rg-text); background: rgb(var(--rg-primary-rgb) / .08); }
-[data-ui="retro-glass"] :where(td) { color: var(--rg-text-muted); }
-[data-ui="retro-glass"] :where(details) { margin: 1rem 0; padding: .9rem 1rem; background: var(--rg-surface); border: 1px solid var(--rg-border); border-radius: var(--rg-radius-md); }
-[data-ui="retro-glass"] :where(summary) { color: var(--rg-text); font-weight: 900; cursor: pointer; }
-[data-ui="retro-glass"] :where(dialog) { max-width: min(92vw, 42rem); padding: 0; background: var(--rg-surface-strong); color: var(--rg-text); border: 1px solid var(--rg-border); border-radius: var(--rg-radius-lg); box-shadow: 0 30px 80px rgb(0 0 0 / .42); }
-[data-ui="retro-glass"] :where(dialog::backdrop) { background: rgb(0 0 0 / .62); }
-[data-ui="retro-glass"] :where(progress, meter) { width: 100%; min-height: .9rem; accent-color: var(--rg-primary); }
-[data-ui="retro-glass"] :where(:focus-visible) { outline: 3px solid var(--rg-focus); outline-offset: 3px; box-shadow: 0 0 0 4px rgb(var(--rg-focus-rgb) / .28); }
-[data-ui="retro-glass"] :where(:target) { scroll-margin-top: 6rem; outline: 3px solid var(--rg-focus); outline-offset: .35rem; }
-[data-ui="retro-glass"] :where([aria-current="page"]) { font-weight: 900; }
-[data-ui="retro-glass"] :where([aria-busy="true"]) { cursor: progress; }
-[data-ui="retro-glass"] :where([hidden]) { display: none !important; }
-[data-ui="retro-glass"] ::selection { background: var(--rg-primary); color: var(--rg-primary-text); }
+/* 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; }