npm - handler-playable-sdk - Versions diffs - 0.3.61 → 0.3.63 - Mend

handler-playable-sdk 0.3.61 → 0.3.63

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/dist/{chunk-2YFOCUIT.js → chunk-WMRJWOF7.js} +69 -69
package/dist/cli/brand-dna.mjs +1 -1
package/dist/cli/canva-import.mjs +1 -1
package/dist/cli/cleanup-assets.mjs +1 -1
package/dist/cli/fix-scales.mjs +1 -1
package/dist/cli/index.js +1 -1
package/dist/cli/screen-helper.mjs +1 -1
package/dist/cli/setup-library.mjs +1 -1
package/dist/cli/student-helper.mjs +1 -1
package/dist/cli/sync-screens.mjs +1 -1
package/dist/cli/validate-assets.mjs +1 -1
package/dist/cli/validate.mjs +1 -1
package/dist/index.cjs +72 -72
package/dist/index.css +306 -243
package/dist/index.js +1 -1
package/dist/pixi/index.cjs +10 -10
package/dist/pixi/index.css +306 -243
package/dist/pixi/index.js +1 -1
package/dist/three/index.cjs +40 -40
package/dist/three/index.css +306 -243
package/dist/three/index.js +1 -1
package/package.json +2 -2

package/dist/pixi/index.css CHANGED Viewed

@@ -44,6 +44,75 @@
   /* HANDLER Shadow System */
   --ui-shadow: 0 2px 8px rgba(30, 30, 30, 0.08);
   --ui-shadow-hover: 0 4px 12px rgba(30, 30, 30, 0.12);
+  --ui-shadow-strong: 0 20px 50px rgba(0, 0, 0, 0.5);
+  /* === EXTENDED COLOR PALETTE === */
+  /* Pure Colors */
+  --ui-black: #000000;
+  --ui-white: #FFFFFF;
+  /* Device Frame */
+  --ui-device-frame-bg: #000000;
+  /* Light Overlays (White with opacity) */
+  --ui-overlay-light-1: rgba(255, 255, 255, 0.02);
+  --ui-overlay-light-2: rgba(255, 255, 255, 0.03);
+  --ui-overlay-light-3: rgba(255, 255, 255, 0.05);
+  --ui-overlay-light-4: rgba(255, 255, 255, 0.08);
+  --ui-overlay-light-5: rgba(255, 255, 255, 0.1);
+  --ui-overlay-light-6: rgba(255, 255, 255, 0.15);
+  --ui-overlay-light-7: rgba(255, 255, 255, 0.2);
+  /* Dark Overlays (Black with opacity) */
+  --ui-overlay-dark-1: rgba(0, 0, 0, 0.2);
+  --ui-overlay-dark-2: rgba(0, 0, 0, 0.3);
+  --ui-overlay-dark-3: rgba(0, 0, 0, 0.5);
+  /* Accent Overlays (Terracotta with opacity) */
+  --ui-accent-overlay-1: rgba(227, 138, 90, 0.08);
+  --ui-accent-overlay-2: rgba(227, 138, 90, 0.12);
+  --ui-accent-overlay-3: rgba(227, 138, 90, 0.35);
+  --ui-accent-overlay-4: rgba(227, 138, 90, 0.45);
+  --ui-accent-overlay-5: rgba(227, 138, 90, 0.5);
+  --ui-accent-overlay-6: rgba(227, 138, 90, 0.55);
+  /* Danger Overlays */
+  --ui-danger-overlay-1: rgba(217, 117, 88, 0.1);
+  --ui-danger-overlay-2: rgba(217, 117, 88, 0.3);
+  /* Accent-2 Overlays */
+  --ui-accent-2-overlay-1: rgba(201, 162, 140, 0.1);
+  /* Border Overlays */
+  --ui-border-overlay-1: rgba(212, 207, 200, 0.8);
+  /* AI Tools Dark Background */
+  --ui-ai-dark-bg: rgba(8, 10, 14, 0.6);
+  /* Error/Alert Colors (for critical states) */
+  --ui-error-bright: #FF5C70;
+  --ui-error-bright-overlay-1: rgba(255, 92, 112, 0.1);
+  --ui-error-bright-overlay-2: rgba(255, 92, 112, 0.3);
+  --ui-alert-red: #FF5A5A;
+  --ui-alert-red-overlay-1: rgba(255, 90, 90, 0.15);
+  --ui-alert-red-overlay-2: rgba(255, 90, 90, 0.4);
+  /* Console/Debug Colors */
+  --ui-console-info: #007acc;
+  --ui-console-bg: #e1e4e8;
+  --ui-console-text: #333;
+  /* AI Prompt Colors */
+  --ui-ai-magenta: #FF00FF;
+  /* Status Colors (for override states, validation, etc.) */
+  --ui-status-warning: #FFD36B;
+  --ui-status-warning-border: rgba(255, 211, 107, 0.4);
+  --ui-status-success: #9FE7C5;
+  --ui-status-success-border: rgba(159, 231, 197, 0.4);
+  --ui-status-info: #9FC4FF;
+  --ui-status-info-border: rgba(159, 196, 255, 0.35);
   /* Background Texture */
   --ui-noise-opacity: 0.05;
@@ -214,7 +283,7 @@
 .compare-viewport.is-active {
   border-color: var(--ui-accent);
-  box-shadow: 0 0 0 1px rgba(227, 138, 90, 0.3), var(--ui-shadow);
+  box-shadow: 0 0 0 1px var(--ui-accent-overlay-3), var(--ui-shadow);
 }
 .compare-header {
@@ -263,7 +332,7 @@
 .compare-viewport.is-active .compare-focus {
   border-color: var(--ui-accent);
-  background: rgba(227, 138, 90, 0.12);
+  background: var(--ui-accent-overlay-2);
   color: var(--ui-text);
 }
@@ -298,7 +367,7 @@
   justify-content: center;
   font-size: 11px;
   color: var(--ui-muted);
-  background: rgba(246, 243, 239, 0.5);
+  background: var(--ui-border-overlay-1);
   opacity: 0;
   transition: opacity var(--ui-duration-normal) var(--ui-ease);
   pointer-events: none;
@@ -312,7 +381,7 @@
   width: 100%;
   height: 100%;
   display: block;
-  background: #000;
+  background: var(--ui-black);
 }
 @media (max-width: 1100px) {
@@ -466,7 +535,7 @@
 }
 .status-icon.active {
-  background: rgba(227, 138, 90, 0.15);
+  background: var(--ui-accent-overlay-1);
   color: var(--ui-terracotta);
 }
@@ -589,7 +658,7 @@
 .scene-tools-body .debug-field input[type="number"]:focus {
   outline: none;
   border-color: var(--ui-terracotta);
-  box-shadow: 0 0 0 2px rgba(227, 138, 90, 0.2);
+  box-shadow: 0 0 0 2px var(--ui-accent-overlay-1);
 }
 /* Debug nudge controls */
@@ -748,7 +817,7 @@
 .scene-panel-search input:focus {
   outline: none;
   border-color: var(--ui-accent);
-  box-shadow: 0 0 0 2px rgba(61, 214, 198, 0.2);
+  box-shadow: 0 0 0 2px var(--ui-accent-overlay-1);
 }
 .scene-panel-filters {
@@ -776,18 +845,18 @@
 .scene-screen-filter:hover {
   border-color: var(--ui-terracotta);
-  background-color: rgba(227, 138, 90, 0.05);
+  background-color: var(--ui-accent-overlay-1);
 }
 .scene-screen-filter:focus {
   outline: none;
   border-color: var(--ui-accent);
-  box-shadow: 0 0 0 2px rgba(61, 214, 198, 0.2);
+  box-shadow: 0 0 0 2px var(--ui-accent-overlay-1);
 }
 .filter-chip {
-  border: 1px solid rgba(111, 140, 255, 0.3);
-  background: rgba(19, 24, 34, 0.7);
+  border: 1px solid var(--ui-accent-overlay-3);
+  background: var(--ui-ai-dark-bg);
   color: var(--ui-muted);
   font-size: 11px;
   border-radius: 999px;
@@ -822,7 +891,7 @@
   margin-left: 6px;
   padding: 2px 6px;
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--ui-overlay-light-4);
   color: var(--ui-text);
   font-size: 10px;
 }
@@ -864,31 +933,31 @@
   border-radius: 999px;
   text-transform: uppercase;
   letter-spacing: 0.4px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--ui-overlay-light-5);
 }
 .scene-object-badge.ui {
-  background: rgba(227, 138, 90, 0.12);
+  background: var(--ui-accent-overlay-2);
   /* Terracotta tint */
   color: var(--ui-terracotta);
 }
 .scene-object-badge.scene {
-  background: rgba(201, 162, 140, 0.12);
+  background: var(--ui-accent-2-overlay-1);
   /* Dusty clay tint */
   color: var(--ui-accent-2);
 }
 .scene-object-item:hover {
   border-color: var(--ui-terracotta);
-  background: rgba(227, 138, 90, 0.08);
+  background: var(--ui-accent-overlay-1);
   /* Light terracotta wash */
 }
 .scene-object-item.selected {
   border-color: var(--ui-terracotta);
-  background: rgba(227, 138, 90, 0.15);
-  box-shadow: 0 0 0 1px rgba(227, 138, 90, 0.3);
+  background: var(--ui-accent-overlay-2);
+  box-shadow: 0 0 0 1px var(--ui-accent-overlay-3);
 }
 /* Debug Toggle Button in Toolbar */
@@ -897,7 +966,7 @@
 }
 .debug-toggle-badge {
-  background-color: #28a745;
+  background-color: var(--ui-success);
   color: var(--ui-text);
   font-size: 10px;
   padding: 2px 4px;
@@ -913,10 +982,10 @@
 /* Inspector Image Property - Premium Layout */
 .inspector-property-image {
   margin-bottom: 16px;
-  background: rgba(255, 255, 255, 0.02);
+  background: var(--ui-overlay-light-1);
   border-radius: 10px;
   padding: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--ui-overlay-light-3);
 }
 .inspector-property-image .property-header {
@@ -935,9 +1004,9 @@
   position: relative;
   width: 100px;
   height: 80px;
-  background: #0d1117;
+  background: var(--ui-black);
   border-radius: 8px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--ui-overlay-light-5);
   overflow: hidden;
   cursor: zoom-in;
   flex-shrink: 0;
@@ -966,8 +1035,8 @@
   font-family: inherit;
   font-size: 11px !important;
   color: var(--ui-muted) !important;
-  background: rgba(0, 0, 0, 0.2) !important;
-  border-color: rgba(255, 255, 255, 0.05) !important;
+  background: var(--ui-overlay-dark-1) !important;
+  border-color: var(--ui-overlay-light-3) !important;
 }
 .inspector-image-actions {
@@ -982,31 +1051,31 @@
 }
 .inspector-image-actions .inspector-btn.primary {
-  background: #6d5dfc;
+  background: var(--ui-terracotta);
   color: white;
   font-weight: 600;
 }
 .highlight-pulse {
   animation: pulse-border 1s infinite alternate;
-  border-color: #6d5dfc !important;
+  border-color: var(--ui-terracotta) !important;
   /* Removed glow effect - HANDLER forbids glows */
 }
 @keyframes pulse-border {
   from {
-    border-color: rgba(109, 93, 252, 0.3);
+    border-color: var(--ui-accent-overlay-3);
   }
   to {
-    border-color: rgba(109, 93, 252, 1);
+    border-color: var(--ui-terracotta);
   }
 }
 .property-badge {
   font-size: 9px;
   font-weight: 800;
-  background: rgba(61, 214, 198, 0.15);
+  background: var(--ui-accent-overlay-2);
   color: var(--ui-accent);
   padding: 2px 5px;
   border-radius: 4px;
@@ -1042,7 +1111,7 @@
 .toolbar-divider {
   width: 1px;
   height: 20px;
-  background-color: #555;
+  background-color: var(--ui-border);
   margin: 0 4px;
 }
@@ -1094,7 +1163,7 @@
 /* Higher z-index during drag to stay above everything */
 .scene-panel.dragging {
   z-index: 9999 !important;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--ui-shadow-strong);
   opacity: 0.95;
 }
@@ -1172,8 +1241,8 @@
 }
 .customize-icon-btn:hover {
-  border-color: rgba(227, 138, 90, 0.55);
-  background: rgba(227, 138, 90, 0.08);
+  border-color: var(--ui-accent-overlay-6);
+  background: var(--ui-accent-overlay-1);
 }
 .customize-icon-btn svg {
@@ -1199,8 +1268,8 @@
   gap: 6px;
   padding: 8px;
   border-radius: 8px;
-  background: rgba(20, 26, 36, 0.7);
-  border: 1px solid rgba(255, 255, 255, 0.05);
+  background: var(--ui-ai-dark-bg);
+  border: 1px solid var(--ui-overlay-light-3);
   font-size: 11px;
   color: var(--ui-muted);
 }
@@ -1246,8 +1315,8 @@
   width: 100%;
   padding: 6px 8px;
   border-radius: 8px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(10, 14, 20, 0.85);
+  border: 1px solid var(--ui-overlay-light-4);
+  background: var(--ui-ai-dark-bg);
   color: var(--ui-text);
   font-size: 12px;
 }
@@ -1270,7 +1339,7 @@
 .batch-ai-btn {
   border: 1px solid var(--ui-border);
-  background: rgba(25, 32, 44, 0.8);
+  background: var(--ui-ai-dark-bg);
   color: var(--ui-text);
   border-radius: 8px;
   padding: 4px 10px;
@@ -1279,8 +1348,8 @@
 }
 .batch-ai-btn.primary {
-  border-color: rgba(191, 126, 255, 0.6);
-  background: rgba(191, 126, 255, 0.2);
+  border-color: var(--ui-accent-overlay-6);
+  background: var(--ui-accent-overlay-2);
 }
 .batch-ai-file {
@@ -1301,8 +1370,8 @@
   margin-top: 8px;
   padding: 8px;
   border-radius: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  background: rgba(16, 20, 28, 0.6);
+  border: 1px solid var(--ui-overlay-light-2);
+  background: var(--ui-ai-dark-bg);
 }
 .batch-ai-palette {
@@ -1316,7 +1385,7 @@
   width: 22px;
   height: 22px;
   border-radius: 6px;
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  border: 1px solid var(--ui-overlay-light-7);
 }
 .batch-ai-muted {
@@ -1333,8 +1402,8 @@
 .batch-ai-item {
   border-radius: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  background: rgba(12, 16, 22, 0.7);
+  border: 1px solid var(--ui-overlay-light-2);
+  background: var(--ui-ai-dark-bg);
   padding: 8px;
   display: flex;
   flex-direction: column;
@@ -1367,8 +1436,8 @@
   max-height: 140px;
   object-fit: contain;
   border-radius: 8px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(8, 10, 14, 0.6);
+  border: 1px solid var(--ui-overlay-light-4);
+  background: var(--ui-ai-dark-bg);
 }
 .batch-ai-thumb.hidden {
@@ -1403,8 +1472,8 @@
   width: 100%;
   padding: 6px 8px;
   border-radius: 8px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(10, 14, 20, 0.85);
+  border: 1px solid var(--ui-overlay-light-4);
+  background: var(--ui-ai-dark-bg);
   color: var(--ui-text);
   font-size: 12px;
 }
@@ -1423,7 +1492,7 @@
 .brand-dna-btn {
   border: 1px solid var(--ui-border);
-  background: rgba(25, 32, 44, 0.8);
+  background: var(--ui-ai-dark-bg);
   color: var(--ui-text);
   border-radius: 8px;
   padding: 4px 10px;
@@ -1432,8 +1501,8 @@
 }
 .brand-dna-btn.primary {
-  border-color: rgba(111, 140, 255, 0.6);
-  background: rgba(111, 140, 255, 0.2);
+  border-color: var(--ui-accent-overlay-6);
+  background: var(--ui-accent-overlay-2);
 }
 .brand-dna-file {
@@ -1458,8 +1527,8 @@
   margin: 6px 0 0;
   padding: 8px;
   border-radius: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  background: rgba(12, 16, 22, 0.7);
+  border: 1px solid var(--ui-overlay-light-2);
+  background: var(--ui-ai-dark-bg);
   color: var(--ui-text);
   font-size: 11px;
   white-space: pre-wrap;
@@ -1469,8 +1538,8 @@
   margin-top: 8px;
   padding: 8px;
   border-radius: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  background: rgba(16, 20, 28, 0.6);
+  border: 1px solid var(--ui-overlay-light-2);
+  background: var(--ui-ai-dark-bg);
 }
 .brand-dna-palette {
@@ -1484,7 +1553,7 @@
   width: 22px;
   height: 22px;
   border-radius: 6px;
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  border: 1px solid var(--ui-overlay-light-7);
 }
 .brand-dna-muted {
@@ -1501,8 +1570,8 @@
 .brand-dna-object {
   border-radius: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  background: rgba(12, 16, 22, 0.7);
+  border: 1px solid var(--ui-overlay-light-2);
+  background: var(--ui-ai-dark-bg);
   padding: 8px;
   display: flex;
   flex-direction: column;
@@ -1546,7 +1615,7 @@
 .ai-modal {
   position: fixed;
   inset: 0;
-  background: rgba(30, 30, 30, 0.75);
+  background: var(--ui-overlay-dark-3);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1628,7 +1697,7 @@
   gap: 12px;
   padding: 12px 14px;
   border-radius: 10px;
-  background: rgba(227, 138, 90, 0.08);
+  background: var(--ui-accent-overlay-1);
   border: 1px solid var(--ui-terracotta);
 }
@@ -1649,7 +1718,7 @@
   flex: 1;
   height: 8px;
   border-radius: 999px;
-  background: linear-gradient(90deg, rgba(227, 138, 90, 0.3), var(--ui-terracotta), rgba(227, 138, 90, 0.3));
+  background: linear-gradient(90deg, var(--ui-accent-overlay-3), var(--ui-terracotta), var(--ui-accent-overlay-3));
   background-size: 200% 100%;
   animation: ai-bar 1.4s var(--ui-ease) infinite;
 }
@@ -1701,7 +1770,7 @@
 .ai-textarea:focus {
   outline: none;
   border-color: var(--ui-terracotta);
-  box-shadow: 0 0 0 3px rgba(227, 138, 90, 0.15);
+  box-shadow: 0 0 0 3px var(--ui-accent-overlay-2);
 }
 .ai-textarea {
@@ -1771,8 +1840,8 @@
 .ai-gallery-item.active {
   border-color: var(--ui-terracotta);
-  background: rgba(227, 138, 90, 0.1);
-  box-shadow: 0 0 0 2px rgba(227, 138, 90, 0.2);
+  background: var(--ui-accent-overlay-2);
+  box-shadow: 0 0 0 2px var(--ui-accent-overlay-1);
 }
 .ai-gallery-thumb {
@@ -1870,7 +1939,7 @@
 .asset-editor-modal {
   position: fixed;
   inset: 0;
-  background: rgba(6, 10, 16, 0.82);
+  background: var(--ui-overlay-dark-3);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1880,10 +1949,10 @@
 .asset-editor-card {
   width: min(680px, 90vw);
   max-height: 85vh;
-  background: rgba(16, 20, 28, 0.98);
+  background: var(--ui-dark-panel);
   border: 1px solid var(--ui-border);
   border-radius: 16px;
-  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
+  box-shadow: var(--ui-shadow-strong);
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -1894,7 +1963,7 @@
   align-items: center;
   justify-content: space-between;
   padding: 16px 20px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  border-bottom: 1px solid var(--ui-overlay-light-2);
 }
 .asset-editor-title {
@@ -1911,7 +1980,7 @@
 .asset-editor-close {
   border: 1px solid var(--ui-border);
-  background: rgba(25, 32, 44, 0.8);
+  background: var(--ui-ai-dark-bg);
   color: var(--ui-text);
   border-radius: 8px;
   padding: 6px 12px;
@@ -1921,12 +1990,12 @@
 }
 .asset-editor-close:hover {
-  background: rgba(25, 32, 44, 1);
+  background: var(--ui-black);
 }
 .asset-editor-tabs {
   display: flex;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  border-bottom: 1px solid var(--ui-overlay-light-2);
 }
 .asset-editor-tab {
@@ -1948,7 +2017,7 @@
 .asset-editor-tab:hover:not(.active) {
   color: var(--ui-text);
-  background: rgba(255, 255, 255, 0.02);
+  background: var(--ui-overlay-light-1);
 }
 .asset-editor-body {
@@ -1986,13 +2055,13 @@
   justify-content: flex-end;
   gap: 12px;
   padding: 16px 20px;
-  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  border-top: 1px solid var(--ui-overlay-light-2);
 }
 .asset-preview-modal {
   position: fixed;
   inset: 0;
-  background: rgba(8, 10, 14, 0.72);
+  background: var(--ui-overlay-dark-3);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2002,7 +2071,7 @@
 .asset-preview-card {
   width: min(720px, 92vw);
   max-height: 82vh;
-  background: rgba(16, 20, 28, 0.98);
+  background: var(--ui-dark-panel);
   border: 1px solid var(--ui-border);
   border-radius: 14px;
   box-shadow: var(--ui-shadow);
@@ -2015,7 +2084,7 @@
   align-items: center;
   justify-content: space-between;
   padding: 10px 14px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  border-bottom: 1px solid var(--ui-overlay-light-2);
   color: var(--ui-text);
 }
@@ -2027,7 +2096,7 @@
 .asset-preview-close {
   border: 1px solid var(--ui-border);
-  background: rgba(25, 32, 44, 0.8);
+  background: var(--ui-ai-dark-bg);
   color: var(--ui-text);
   border-radius: 8px;
   padding: 4px 10px;
@@ -2040,7 +2109,7 @@
   color: var(--ui-muted);
   font-size: 11px;
   word-break: break-all;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  border-bottom: 1px solid var(--ui-overlay-light-2);
 }
 .asset-preview-actions {
@@ -2051,7 +2120,7 @@
 .asset-preview-change {
   border: 1px solid var(--ui-border);
-  background: rgba(25, 32, 44, 0.8);
+  background: var(--ui-ai-dark-bg);
   color: var(--ui-text);
   border-radius: 8px;
   padding: 4px 10px;
@@ -2061,7 +2130,7 @@
 .asset-preview-ai {
   border: 1px solid var(--ui-border);
-  background: rgba(25, 32, 44, 0.8);
+  background: var(--ui-ai-dark-bg);
   color: var(--ui-text);
   border-radius: 8px;
   padding: 4px 10px;
@@ -2078,7 +2147,7 @@
 }
 .asset-preview-ai-output {
-  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  border-top: 1px solid var(--ui-overlay-light-2);
   padding: 10px 12px 14px;
 }
@@ -2097,8 +2166,8 @@
   max-height: 200px;
   object-fit: contain;
   border-radius: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(8, 10, 14, 0.6);
+  border: 1px solid var(--ui-overlay-light-4);
+  background: var(--ui-ai-dark-bg);
 }
 .asset-preview-body img {
@@ -2122,7 +2191,7 @@
 .asset-crop-modal {
   position: fixed;
   inset: 0;
-  background: rgba(8, 10, 14, 0.78);
+  background: var(--ui-overlay-dark-3);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2131,7 +2200,7 @@
 .asset-crop-card {
   width: min(860px, 96vw);
-  background: rgba(16, 20, 28, 0.98);
+  background: var(--ui-dark-panel);
   border: 1px solid var(--ui-border);
   border-radius: 14px;
   box-shadow: var(--ui-shadow);
@@ -2145,7 +2214,7 @@
   justify-content: space-between;
   gap: 16px;
   padding: 12px 16px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  border-bottom: 1px solid var(--ui-overlay-light-2);
   color: var(--ui-text);
 }
@@ -2162,7 +2231,7 @@
 .asset-crop-close {
   border: 1px solid var(--ui-border);
-  background: rgba(25, 32, 44, 0.8);
+  background: var(--ui-ai-dark-bg);
   color: var(--ui-text);
   border-radius: 8px;
   padding: 4px 10px;
@@ -2196,15 +2265,15 @@
 .asset-crop-canvas {
   border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(8, 10, 14, 0.55);
+  border: 1px solid var(--ui-overlay-light-4);
+  background: var(--ui-ai-dark-bg);
   cursor: grab;
 }
 .asset-crop-preview {
   border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(8, 10, 14, 0.55);
+  border: 1px solid var(--ui-overlay-light-4);
+  background: var(--ui-ai-dark-bg);
 }
 .asset-crop-canvas:active {
@@ -2236,7 +2305,7 @@
 .asset-crop-reset {
   border: 1px solid var(--ui-border);
-  background: rgba(25, 32, 44, 0.8);
+  background: var(--ui-ai-dark-bg);
   color: var(--ui-text);
   border-radius: 8px;
   padding: 4px 10px;
@@ -2256,7 +2325,7 @@
   padding: 6px 14px;
   font-size: 12px;
   border: 1px solid var(--ui-border);
-  background: rgba(28, 36, 50, 0.85);
+  background: var(--ui-ai-dark-bg);
   color: var(--ui-text);
   cursor: pointer;
 }
@@ -2264,7 +2333,7 @@
 .asset-crop-apply {
   background: var(--ui-accent);
   border-color: transparent;
-  color: #10151f;
+  color: var(--ui-dark-panel);
   font-weight: 600;
 }
@@ -2280,12 +2349,12 @@
   justify-content: space-between;
   gap: 12px;
   padding: 10px 14px;
-  background-color: rgba(24, 28, 38, 0.95);
+  background-color: var(--ui-dark-panel);
   color: var(--ui-text);
   font-size: 12px;
   user-select: none;
   cursor: move;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  border-bottom: 1px solid var(--ui-overlay-light-1);
 }
 .scene-panel-actions {
@@ -2297,7 +2366,7 @@
 .scene-panel-action {
   border: 1px solid var(--ui-border);
   border-radius: 6px;
-  background: #1f2633;
+  background: var(--ui-ai-dark-bg);
   color: var(--ui-muted);
   font-size: 11px;
   padding: 4px 8px;
@@ -2305,7 +2374,7 @@
 }
 .scene-panel-action:hover {
-  border-color: rgba(255, 159, 67, 0.6);
+  border-color: var(--ui-accent-2-overlay-1);
   color: var(--ui-text);
 }
@@ -2322,7 +2391,7 @@
 /* Terracotta hover for close button */
 .scene-panel-toggle:hover {
-  background: rgba(227, 138, 90, 0.15);
+  background: var(--ui-accent-overlay-2);
   color: var(--ui-terracotta);
 }
@@ -2335,7 +2404,7 @@
 .panel-pill {
   padding: 2px 8px;
   border-radius: 999px;
-  background: rgba(61, 214, 198, 0.12);
+  background: var(--ui-accent-overlay-2);
   color: var(--ui-accent);
   font-size: 10px;
   text-transform: uppercase;
@@ -2343,18 +2412,18 @@
 }
 .panel-accent-blue .panel-pill {
-  background: rgba(111, 140, 255, 0.14);
+  background: var(--ui-accent-2-overlay-1);
   color: var(--ui-accent-3);
 }
 .panel-accent-amber .panel-pill {
-  background: rgba(255, 159, 67, 0.16);
+  background: var(--ui-accent-2-overlay-1);
   color: var(--ui-accent-2);
 }
 .panel-accent-violet .panel-pill {
-  background: rgba(191, 126, 255, 0.18);
-  color: #d6b7ff;
+  background: var(--ui-accent-2-overlay-1);
+  color: var(--ui-accent-2);
 }
 .panel-title-text {
@@ -2364,19 +2433,19 @@
 }
 .panel-accent-teal {
-  border-color: rgba(61, 214, 198, 0.35);
+  border-color: var(--ui-accent-overlay-3);
 }
 .panel-accent-blue {
-  border-color: rgba(111, 140, 255, 0.35);
+  border-color: var(--ui-accent-overlay-3);
 }
 .panel-accent-amber {
-  border-color: rgba(255, 159, 67, 0.4);
+  border-color: var(--ui-accent-overlay-4);
 }
 .panel-accent-violet {
-  border-color: rgba(191, 126, 255, 0.35);
+  border-color: var(--ui-accent-overlay-3);
 }
 .scene-panel-body {
@@ -2397,9 +2466,9 @@
 /* Device Frame Styling - The "Phone" Look */
 .device-frame {
-  box-shadow: 0 0 0 1px rgba(30, 30, 30, 0.08), 0 8px 20px rgba(30, 30, 30, 0.15);
+  box-shadow: 0 0 0 1px var(--ui-overlay-dark-1), 0 8px 20px var(--ui-overlay-dark-1);
   border-radius: 14px;
-  background-color: #000;
+  background-color: var(--ui-device-frame-bg);
   transition: width var(--ui-duration-normal) var(--ui-ease), height var(--ui-duration-normal) var(--ui-ease);
   overflow: hidden;
   position: relative;
@@ -2412,7 +2481,7 @@
   align-items: center;
   transform-origin: center center;
   transition: transform var(--ui-duration-normal) cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  filter: drop-shadow(0 6px 16px rgba(30, 30, 30, 0.12));
+  filter: drop-shadow(0 6px 16px var(--ui-overlay-dark-1));
 }
 /* ========== 05-console.css ========== */
@@ -2460,7 +2529,7 @@
 .console-msg.type-error {
   color: var(--ui-danger);
-  background: rgba(217, 117, 88, 0.1);
+  background: var(--ui-danger-overlay-1);
 }
 .console-msg.type-warn {
@@ -2558,7 +2627,7 @@
 .console-msg.type-warn {
   color: var(--ui-accent-2);
-  background: rgba(201, 162, 140, 0.1);
+  background: var(--ui-accent-2-overlay-1);
 }
 /* ========== 06-debug-overlay.css ========== */
@@ -2681,23 +2750,23 @@
   margin-bottom: 12px;
   padding: 6px 10px;
   border-radius: 8px;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: var(--ui-surface-2);
+  border: 1px solid var(--ui-border);
 }
 .override-status[data-state="diff"] {
-  color: #ffd36b;
-  border-color: rgba(255, 211, 107, 0.4);
+  color: var(--ui-status-warning);
+  border-color: var(--ui-status-warning-border);
 }
 .override-status[data-state="match"] {
-  color: #9fe7c5;
-  border-color: rgba(159, 231, 197, 0.4);
+  color: var(--ui-status-success);
+  border-color: var(--ui-status-success-border);
 }
 .override-status[data-state="saved"] {
-  color: #9fc4ff;
-  border-color: rgba(159, 196, 255, 0.35);
+  color: var(--ui-status-info);
+  border-color: var(--ui-status-info-border);
 }
 .debug-header {
@@ -2705,8 +2774,8 @@
   align-items: center;
   justify-content: space-between;
   padding: 12px 16px;
-  border-bottom: 1px solid #444;
-  background-color: #252525;
+  border-bottom: 1px solid var(--ui-border);
+  background-color: var(--ui-bg-2);
   border-radius: 8px 8px 0 0;
   cursor: move;
   user-select: none;
@@ -2716,16 +2785,16 @@
   display: flex;
   gap: 6px;
   padding: 8px 12px;
-  border-bottom: 1px solid #333;
-  background-color: #1f1f1f;
+  border-bottom: 1px solid var(--ui-border);
+  background-color: var(--ui-surface-2);
 }
 .debug-tab {
   flex: 1;
-  border: 1px solid #444;
+  border: 1px solid var(--ui-border);
   border-radius: 6px;
-  background-color: #262626;
-  color: #bfc3c7;
+  background-color: var(--ui-surface);
+  color: var(--ui-muted);
   font-size: 12px;
   padding: 6px 10px;
   cursor: pointer;
@@ -2733,15 +2802,15 @@
 }
 .debug-tab.active {
-  background-color: #323232;
+  background-color: var(--ui-surface-2);
   color: var(--ui-text);
-  border-color: #ffb43b;
-  box-shadow: inset 0 0 0 1px rgba(255, 180, 59, 0.35);
+  border-color: var(--ui-accent);
+  box-shadow: inset 0 0 0 1px var(--ui-accent-overlay-3);
 }
 .debug-hint {
   font-size: 11px;
-  color: #9aa0a6;
+  color: var(--ui-muted);
   margin-bottom: 10px;
 }
@@ -2754,9 +2823,9 @@
 }
 .debug-collapsible {
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  border: 1px solid var(--ui-border);
   border-radius: 10px;
-  background-color: rgba(21, 26, 36, 0.85);
+  background-color: var(--ui-surface);
   overflow: hidden;
   margin-bottom: 12px;
 }
@@ -2768,7 +2837,7 @@
   justify-content: space-between;
   gap: 12px;
   padding: 10px 12px;
-  background-color: rgba(24, 30, 42, 0.9);
+  background-color: var(--ui-bg-2);
   border: none;
   color: var(--ui-text);
   font-size: 12px;
@@ -2805,17 +2874,17 @@
 }
 .debug-arrow-btn {
-  border: 1px solid #444;
+  border: 1px solid var(--ui-border);
   border-radius: 6px;
-  background-color: #2b2b2b;
-  color: #e7e7e7;
+  background-color: var(--ui-surface);
+  color: var(--ui-text);
   font-size: 14px;
   cursor: pointer;
   transition: all 0.15s var(--ui-ease);
 }
 .debug-arrow-btn:hover {
-  border-color: #ffb43b;
+  border-color: var(--ui-accent);
   color: var(--ui-text);
 }
@@ -2845,8 +2914,8 @@
   gap: 8px;
   padding: 8px;
   border-radius: 6px;
-  background-color: rgba(25, 30, 40, 0.8);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  background-color: var(--ui-surface-2);
+  border: 1px solid var(--ui-border);
 }
 .debug-info-row {
@@ -2858,11 +2927,11 @@
 }
 .debug-info-label {
-  color: #9aa0a6;
+  color: var(--ui-muted);
 }
 .debug-info-value {
-  color: #f1f3f5;
+  color: var(--ui-text);
   font-weight: 600;
 }
@@ -2879,8 +2948,8 @@
 .debug-action-btn {
   background-color: transparent;
-  color: #ccc;
-  border: 1px solid #555;
+  color: var(--ui-muted);
+  border: 1px solid var(--ui-border);
   border-radius: 3px;
   padding: 4px 8px;
   font-size: 11px;
@@ -2898,7 +2967,7 @@
   max-width: 140px;
   max-height: 140px;
   border-radius: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--ui-border);
 }
 .brand-vision-panel .vision-raw-block {
@@ -2961,8 +3030,8 @@
   height: 80px;
   object-fit: cover;
   border-radius: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid var(--ui-border);
+  background: var(--ui-overlay-dark-1);
 }
 .brand-vision-panel .vision-mapping-actions {
@@ -2978,7 +3047,7 @@
 }
 .debug-action-btn:hover {
-  background-color: #444;
+  background-color: var(--ui-surface-2);
   color: var(--ui-text);
 }
@@ -2995,7 +3064,7 @@
 .panel-section {
   margin-bottom: 16px;
   padding-bottom: 12px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  border-bottom: 1px solid var(--ui-border);
 }
 .panel-section:last-child {
@@ -3032,7 +3101,7 @@
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-bottom: 8px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  border-bottom: 1px solid var(--ui-border);
   padding-bottom: 4px;
 }
@@ -3043,7 +3112,7 @@
 .debug-field label {
   display: block;
   font-size: 11px;
-  color: #aaa;
+  color: var(--ui-muted);
   margin-bottom: 4px;
   font-weight: 500;
 }
@@ -3051,7 +3120,7 @@
 .debug-field input,
 .debug-field select {
   width: 100%;
-  background-color: var(--ui-surface);
+  background-color: var(--ui-surface-2);
   color: var(--ui-text);
   border: 1px solid var(--ui-border);
   border-radius: 4px;
@@ -3064,15 +3133,16 @@
 .debug-field input:focus,
 .debug-field select:focus {
   outline: none;
-  border-color: var(--ui-accent-3);
-  box-shadow: 0 0 0 2px rgba(111, 140, 255, 0.2);
+  background: var(--ui-surface);
+  border-color: var(--ui-accent);
+  box-shadow: 0 0 0 2px rgba(227, 138, 90, 0.15);
 }
 .debug-field input[type="range"] {
   -webkit-appearance: none;
   appearance: none;
   height: 6px;
-  background: #555;
+  background: var(--ui-border);
   border-radius: 3px;
   outline: none;
 }
@@ -3128,9 +3198,9 @@
 .debug-btn {
   flex: 1;
-  background-color: #444;
+  background-color: var(--ui-surface-2);
   color: var(--ui-text);
-  border: 1px solid #666;
+  border: 1px solid var(--ui-border);
   border-radius: 4px;
   padding: 6px 8px;
   font-size: 11px;
@@ -3139,39 +3209,40 @@
 }
 .debug-btn:hover {
-  background-color: #555;
+  background-color: var(--ui-surface);
   border-color: var(--ui-muted);
 }
 .debug-btn.primary {
-  background-color: #2a5bd7;
-  border-color: #2a5bd7;
+  background-color: var(--ui-accent);
+  border-color: var(--ui-accent);
 }
 .debug-btn.primary:hover {
-  background-color: #2147a7;
-  border-color: #2147a7;
+  background-color: var(--ui-terracotta-hover);
+  border-color: var(--ui-terracotta-hover);
 }
 .debug-btn.danger {
-  background-color: #dc3545;
-  border-color: #dc3545;
+  background-color: var(--ui-danger);
+  border-color: var(--ui-danger);
 }
 .debug-btn.danger:hover {
-  background-color: #c82333;
-  border-color: #c82333;
+  background-color: var(--ui-danger);
+  border-color: var(--ui-danger);
+  opacity: 0.9;
 }
 .debug-btn.secondary {
-  background-color: rgba(61, 214, 198, 0.1);
-  border-color: rgba(61, 214, 198, 0.3);
+  background-color: var(--ui-accent-overlay-1);
+  border-color: var(--ui-accent-overlay-3);
   color: var(--ui-accent);
 }
 .debug-btn.secondary:hover {
-  background-color: rgba(61, 214, 198, 0.2);
-  border-color: rgba(61, 214, 198, 0.4);
+  background-color: var(--ui-accent-overlay-2);
+  border-color: var(--ui-accent-overlay-4);
 }
 /* -------------------------------------------------------------------------- */
@@ -3235,18 +3306,18 @@
   border-radius: 8px;
   cursor: pointer;
   transition: all var(--ui-duration-fast) var(--ui-ease);
-  background: rgba(25, 30, 40, 0.8);
+  background: var(--ui-surface-2);
 }
 .library-item:hover {
-  border-color: rgba(61, 214, 198, 0.5);
-  background: rgba(61, 214, 198, 0.1);
+  border-color: var(--ui-accent-overlay-5);
+  background: var(--ui-accent-overlay-1);
 }
 .library-item.selected {
-  border-color: rgba(61, 214, 198, 0.8);
-  background: rgba(61, 214, 198, 0.15);
-  box-shadow: 0 0 0 1px rgba(61, 214, 198, 0.4);
+  border-color: var(--ui-accent);
+  background: var(--ui-accent-overlay-2);
+  box-shadow: 0 0 0 1px var(--ui-accent-overlay-4);
 }
 .library-thumbnail {
@@ -3254,7 +3325,7 @@
   height: 40px;
   object-fit: cover;
   border-radius: 4px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--ui-border);
 }
 .library-label {
@@ -3269,9 +3340,9 @@
   color: var(--ui-text);
   margin: 12px 0;
   padding: 8px;
-  background: rgba(25, 30, 40, 0.8);
+  background: var(--ui-surface-2);
   border-radius: 6px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  border: 1px solid var(--ui-border);
 }
 .library-empty {
@@ -3314,7 +3385,7 @@
   letter-spacing: 0.8px;
   color: var(--ui-accent);
   padding: 6px 8px;
-  background: rgba(61, 214, 198, 0.08);
+  background: var(--ui-accent-overlay-1);
   border-radius: 6px;
   margin-bottom: 8px;
 }
@@ -3369,9 +3440,9 @@
 .inspector-header {
   padding: 12px;
-  background: rgba(24, 30, 42, 0.9);
+  background: var(--ui-surface-2);
   border-radius: 8px;
-  border: 1px solid rgba(191, 126, 255, 0.2);
+  border: 1px solid var(--ui-border);
 }
 .inspector-object-name {
@@ -3389,8 +3460,8 @@
 }
 .inspector-section {
-  background: rgba(21, 26, 36, 0.85);
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: var(--ui-surface);
+  border: 1px solid var(--ui-border);
   border-radius: 8px;
   overflow: hidden;
 }
@@ -3400,8 +3471,8 @@
   align-items: center;
   gap: 6px;
   padding: 6px 10px;
-  background: rgba(24, 30, 42, 0.9);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  background: var(--ui-bg-2);
+  border-bottom: 1px solid var(--ui-border);
   cursor: pointer;
   user-select: none;
 }
@@ -3433,7 +3504,7 @@
 .ai-tabs {
   display: flex;
-  background: rgba(0, 0, 0, 0.2);
+  background: var(--ui-overlay-dark-1);
   border-radius: 8px;
   padding: 4px;
   margin-bottom: 16px;
@@ -3457,7 +3528,7 @@
 }
 .ai-tab-btn:hover {
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--ui-overlay-light-3);
 }
 .ai-tab-btn.active {
@@ -3938,7 +4009,7 @@
 .debug-select {
   width: 100%;
-  background-color: var(--ui-surface);
+  background-color: var(--ui-surface-2);
   color: var(--ui-text);
   border: 1px solid var(--ui-border);
   border-radius: 4px;
@@ -4017,9 +4088,7 @@
 .inspector-property-label {
   font-size: 10px;
   font-weight: 600;
-  color: var(--ui-dark-text);
-  /* Use lighter text for dark backgrounds */
-  opacity: 0.7;
+  color: var(--ui-muted);
   text-transform: capitalize;
   width: 80px;
   flex-shrink: 0;
@@ -4028,7 +4097,7 @@
 .inspector-input {
   flex: 1;
   min-width: 80px;
-  background: var(--ui-surface);
+  background: var(--ui-surface-2);
   color: var(--ui-text);
   border: 1px solid var(--ui-border);
   border-radius: 4px;
@@ -4040,8 +4109,9 @@
 .inspector-input:focus {
   outline: none;
-  border-color: rgba(227, 138, 90, 0.7);
-  box-shadow: 0 0 0 2px rgba(227, 138, 90, 0.18);
+  background: var(--ui-surface);
+  border-color: var(--ui-accent);
+  box-shadow: 0 0 0 2px rgba(227, 138, 90, 0.15);
 }
 .inspector-checkbox {
@@ -4053,8 +4123,7 @@
   align-items: center;
   cursor: pointer;
   font-size: 12px;
-  color: var(--ui-dark-text);
-  /* Use lighter text for dark backgrounds */
+  color: var(--ui-text);
 }
 .inspector-image-preview {
@@ -4141,13 +4210,12 @@
 .inspector-object-header {
   font-size: 11px;
   font-weight: 700;
-  color: var(--ui-dark-text);
-  /* Use lighter text for dark backgrounds */
+  color: var(--ui-text);
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-bottom: 8px;
   padding-bottom: 6px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  border-bottom: 1px solid var(--ui-border);
 }
 .inspector-object-body {
@@ -4169,8 +4237,7 @@
   margin-right: 6px;
   transition: transform var(--ui-duration-fast) var(--ui-ease);
   font-size: 10px;
-  color: var(--ui-dark-text);
-  opacity: 0.5;
+  color: var(--ui-muted);
 }
 .inspector-section.collapsed .inspector-section-arrow {
@@ -4182,8 +4249,7 @@
 }
 .inspector-section-title {
-  color: var(--ui-dark-text) !important;
-  /* Force light text on dark background */
+  color: var(--ui-text);
   font-weight: 700;
 }
@@ -4302,14 +4368,14 @@
 }
 .library-category-tab:hover {
-  background: rgba(227, 138, 90, 0.08);
+  background: var(--ui-accent-overlay-1);
   color: var(--ui-text);
 }
 .library-category-tab.active {
-  background: rgba(227, 138, 90, 0.12);
+  background: var(--ui-accent-overlay-2);
   color: var(--ui-accent);
-  border-color: rgba(227, 138, 90, 0.35);
+  border-color: var(--ui-accent-overlay-3);
 }
 /* Individual Slot */
@@ -4322,11 +4388,11 @@
 }
 .library-slot:hover {
-  border-color: rgba(227, 138, 90, 0.5);
+  border-color: var(--ui-accent-overlay-5);
 }
 .library-slot.expanded {
-  border-color: rgba(227, 138, 90, 0.55);
+  border-color: var(--ui-accent-overlay-6);
   background: var(--ui-surface-2);
 }
@@ -4347,15 +4413,15 @@
   gap: 4px;
   padding: 6px;
   border-radius: 8px;
-  border: 1px solid rgba(212, 207, 200, 0.8);
+  border: 1px solid var(--ui-border-overlay-1);
   background: var(--ui-surface);
   cursor: pointer;
   transition: all 0.15s var(--ui-ease);
 }
 .library-item:hover {
-  background: rgba(227, 138, 90, 0.08);
-  border-color: rgba(227, 138, 90, 0.45);
+  background: var(--ui-accent-overlay-1);
+  border-color: var(--ui-accent-overlay-4);
 }
 .library-item:active {
@@ -4389,7 +4455,6 @@
   text-align: center;
 }
 /* ========== 10-ai-tools.css ========== */
 /* 10 Ai Tools */
 /* Auto-generated from preview.css */
@@ -4415,8 +4480,8 @@
   height: 24px;
   object-fit: cover;
   border-radius: 4px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  background: rgba(8, 10, 14, 0.6);
+  border: 1px solid var(--ui-overlay-light-5);
+  background: var(--ui-ai-dark-bg);
   flex-shrink: 0;
   margin-right: 6px;
 }
@@ -4425,10 +4490,10 @@
   width: 12px;
   height: 12px;
   border-radius: 50%;
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  border: 1px solid var(--ui-overlay-light-7);
   flex-shrink: 0;
   margin-left: 6px;
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 4px var(--ui-overlay-dark-2);
 }
 .scene-object-meta {
@@ -4463,7 +4528,7 @@
 }
 .slot-header:hover {
-  background: rgba(255, 255, 255, 0.03);
+  background: var(--ui-overlay-light-2);
 }
 .slot-current {
@@ -4472,8 +4537,8 @@
   flex-shrink: 0;
   border-radius: 6px;
   overflow: hidden;
-  background: rgba(0, 0, 0, 0.3);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: var(--ui-overlay-dark-2);
+  border: 1px solid var(--ui-overlay-light-4);
 }
 .slot-thumbnail {
@@ -4514,8 +4579,8 @@
   width: 24px;
   height: 24px;
   border-radius: 6px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--ui-overlay-light-5);
+  background: var(--ui-overlay-light-3);
   color: var(--ui-muted);
   font-size: 14px;
   cursor: pointer;
@@ -4526,8 +4591,8 @@
 }
 .slot-reset:hover {
-  background: rgba(255, 90, 90, 0.15);
-  border-color: rgba(255, 90, 90, 0.4);
+  background: var(--ui-alert-red-overlay-1);
+  border-color: var(--ui-alert-red-overlay-2);
   color: var(--ui-danger);
 }
@@ -4553,9 +4618,9 @@
 }
 .staging-group {
-  background: rgba(255, 255, 255, 0.02);
+  background: var(--ui-overlay-light-1);
   border-radius: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--ui-overlay-light-3);
   overflow: hidden;
 }
@@ -4564,8 +4629,8 @@
   align-items: center;
   gap: 8px;
   padding: 8px 12px;
-  background: rgba(255, 255, 255, 0.03);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  background: var(--ui-overlay-light-2);
+  border-bottom: 1px solid var(--ui-overlay-light-3);
   font-size: 12px;
   font-weight: 700;
 }
@@ -4588,7 +4653,7 @@
   align-items: center;
   gap: 8px;
   padding: 6px 4px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
+  border-bottom: 1px solid var(--ui-overlay-light-1);
 }
 .staging-item:last-child {
@@ -4609,7 +4674,7 @@
   flex: 1;
   font-size: 11px;
   color: var(--ui-text);
-  background: rgba(0, 0, 0, 0.2);
+  background: var(--ui-overlay-dark-1);
   padding: 2px 6px;
   border-radius: 4px;
   font-family: 'JetBrains Mono', 'Consolas', monospace;
@@ -4633,8 +4698,6 @@
   transform: scale(1.2);
 }
 /* ========== 11-modals.css ========== */
 /* 11 Modals */
 /* Auto-generated from preview.css */
@@ -5009,7 +5072,7 @@
 }
 .unused-group {
-  border-top: 1px dashed rgba(255, 255, 255, 0.1);
+  border-top: 1px dashed var(--ui-overlay-light-5);
   margin-top: 8px;
   padding-top: 8px;
 }
@@ -5041,7 +5104,7 @@
 .staging-clear-all {
   background: transparent;
-  border: 1px solid rgba(217, 117, 88, 0.3);
+  border: 1px solid var(--ui-danger-overlay-2);
   color: var(--ui-danger);
   font-size: 10px;
   padding: 2px 8px;
@@ -5051,7 +5114,7 @@
 }
 .staging-clear-all:hover {
-  background: rgba(217, 117, 88, 0.1);
+  background: var(--ui-danger-overlay-1);
   border-color: var(--ui-danger);
 }
@@ -5127,7 +5190,7 @@
   flex: 1;
   padding: 6px;
   font-size: 10px;
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--ui-overlay-light-3);
   border: 1px solid var(--ui-border);
   border-radius: 6px;
   color: var(--ui-text);
@@ -5135,16 +5198,16 @@
 }
 .footer-btn:hover:not(:disabled) {
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--ui-overlay-light-5);
 }
 .footer-btn.danger {
   color: var(--ui-danger);
-  border-color: rgba(255, 92, 112, 0.3);
+  border-color: var(--ui-error-bright-overlay-2);
 }
 .footer-btn.danger:hover {
-  background: rgba(255, 92, 112, 0.1);
+  background: var(--ui-error-bright-overlay-1);
   border-color: var(--ui-danger);
 }
@@ -5157,7 +5220,7 @@
   font-size: 10px;
   color: var(--ui-muted);
   line-height: 1.4;
-  background: rgba(227, 138, 90, 0.08);
+  background: var(--ui-accent-overlay-1);
   padding: 8px;
   border-radius: 8px;
 }